LogicFlow 在HTML中的引入与使用
LogicFlow的引入与使用,相较于BPMNJS相对容易一些,更加灵活一些,但是扩展代码可能写得更多一些。
示例展示
使用方式
这个的使用方式就简单很多了,利用cdn把js下载下来,引入到HTML文件中,直接使用就可以。这里就不详细说明其中的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(`
节点id:${node.id}
节点类型:${node.type}
节点坐标:(x: ${node.x}, y: ${node.y})`
);
},
},
],
edgeMenu: [
{
text: '属性',
callback(edge) {
alert(`
边id:${edge.id}
边类型:${edge.type}
边坐标:(x: ${edge.x}, y: ${edge.y})
源节点id:${edge.sourceNodeId}
目标节点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