bpmn.js流程图交互操作效果代码-html代码-BFW代码库

bpmn.js流程图交互操作效果代码

代码语言：html

所属分类：图表

代码描述：bpmn.js流程图交互操作效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>
<head>
  <title>bpmn-js interaction demo</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/diagram-js.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bpmn-js.css">

  <style>
    .console {
      width: 100%;
      min-height: 80px;
      border: none;
      padding: 0;
    }

    .console textarea {
      width: 100%;
      min-height: 80px;
    }
  </style>
</head>
<body>

  <div class="header">
    <h1>bpmn-js diagram interaction example</h1>
    <p>
      interact with the diagram using your mouse and see what happens,
      click the end event for a special alert.
    </p>
  </div>

  <hr>

  <div class="canvas">
    <h3>diagram</h3>
    <div id="js-canvas"></div>
  </div>

  <hr>

  <div class="console">
    <h3>console</h3>
    <textarea id="js-console"></textarea>
  </div>

  <!-- viewer -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bpmn-viewer.development.js"></script>
  <!-- app -->
  <script>
    var console = document.querySelector('#js-console');

    function log() {
      console.value += Array.prototype.slice.call(arguments).map(function(e) {
        return String(e);
      }).join(' ');

      console.value += '\n';
      console.scrollTop = console.scrollHeight;
    }

    // the diagram to display
    // you may load it asynchronously via ajax, too
    var diagramXML = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<definitions xmlns=\"http://www.omg.org/spec/BPMN/20100524/MODEL\"\r\n             xmlns:bpmndi=\"http://www.omg.org/spec/BPMN/20100524/DI\"\r\n             xmlns:omgdc=\"http://www.omg.org/spec/DD/20100524/DC\"\r\n             xmlns:omgdi=\"http://www.omg.org/spec/DD/20100524/DI\"\r\n             xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"\r\n             expressionLanguage=\"http://www.w3.org/1999/XPath\"\r\n             typeLanguage=\"http://www.w3.org/2001/XMLSchema\"\r\n             targetNamespace=\"\"\r\n             xsi:schemaLocation=\"http://www.omg.org/spec/BPMN/20100524/MODEL http://www.omg.org/spec/BPMN/2.0/20100501/BPMN20.xsd\">\r\n<collaboration id=\"sid-c0e745ff-361e-4afb-8c8d-2a1fc32b1424\">\r\n    <participant id=\"sid-87F4C1D6-25E1-4A45-9DA7-AD945993D06F\" name=\"Customer\" processRef=\"sid-C3803939-0872-457F-8336-EA.........完整代码请登录后点击上方下载按钮下载查看