LogicFlow 在HTML中的引入與使用

LogicFlow的引入與使用，相較于BPMNJS相對(duì)容易一些，更加靈活一些，但是擴(kuò)展代碼可能寫得更多一些。

示例展示

使用方式

這個(gè)的使用方式就簡(jiǎn)單很多了，利用cdn把js下載下來，引入到HTML文件中，直接使用就可以。這里就不詳細(xì)說明其中的API使用了，看示例代碼就可以了。

核心代碼

    <script src="./assets/js/logic-flow.js"></script>
    <link href="./assets/css/index.css" rel="stylesheet">



    <script src="./assets//js/BpmnElement.js"></script>
    <script src="./assets/js/BpmnAdapter.js"></script>
    <script src="./assets/js/Control.js"></script>
    <script src="./assets/js/Menu.js"></script>
    <script src="./assets/js/SelectionSelect.js"></script>
    <script src="./assets/js/DndPanel.js"></script>
    <script src="./assets/js/Snapshot.js"></script>
    <link href="./assets/css/extension.css" rel="stylesheet">


    <script src="./logicflow.js"></script>
    <link href="./logicflow.css" rel="stylesheet">

html body

 <div id="graph" class="viewport" style="width: 100%; height: 100%;"></div>

核心JS

const config = getConfig();
  LogicFlow.use(BpmnElement);
  LogicFlow.use(BpmnXmlAdapter);
  LogicFlow.use(Snapshot);
  LogicFlow.use(Control);
  LogicFlow.use(Menu);
  LogicFlow.use(SelectionSelect);
  LogicFlow.use(DndPanel);
  lf = new LogicFlow({
    ...config,
    container: document.querySelector("#graph"),
  });
  // 右擊菜單：component-menu.md
  lf.extension.menu.addMenuConfig({
    nodeMenu: [
      {
        text: '分享',
        className: 'test-share',
        callback() {
          alert('分享成功！');
        }
      },
      {
        text: '屬性',
        callback(node) {
          alert(`
            節(jié)點(diǎn)id：${node.id}
            節(jié)點(diǎn)類型：${node.type}
            節(jié)點(diǎn)坐標(biāo)：(x: ${node.x}, y: ${node.y})`
          );
        },
      },
    ],
    edgeMenu: [
      {
        text: '屬性',
        callback(edge) {
          alert(`
            邊id：${edge.id}
            邊類型：${edge.type}
            邊坐標(biāo)：(x: ${edge.x}, y: ${edge.y})
            源節(jié)點(diǎn)id：${edge.sourceNodeId}
            目標(biāo)節(jié)點(diǎn)id：${edge.targetNodeId}`
          );
        },
      },
    ],
    graphMenu: [
      {
        text: '分享',
        callback() {
          alert('分享成功！');
        }
      },
    ],
  });
  lf.render();

參考鏈接

• extension links: https://cdn.jsdelivr.net/npm/@logicflow/extension@1.2.9/lib/
• logicfllw website: https://07.logic-flow.cn/guide/start.html
• logicflow github: https://github.com/didi/LogicFlow
• 示例：http://logic-flow.org/examples/#/basic/node