Comments (4)
没看懂什么意思
from logicflow.
没看懂什么意思
我上面有案例,我使用的html 页面引入的js 实现的,浏览器可直接打开index.html 拖拽并行网关组件,其他组件是正常的
from logicflow.
看了一下,目前1.x版本的cdn里没有导出BPMNElements相关的内容,可以升到我们最新的2.0.beta.4这里导出了完整的内容,不过我们在2.0版本优化了CDN包的打包逻辑,在引入的时候写法上需要调整一下,具体可以参考下面这段根据你的demo改写的逻辑
(Tip: 在写法上一个不同点是引入CDN时只能整体引入,取方法/插件时需要增加前缀(如下文中new LogicFlow需要写成new Core.LogicFlow, plugins传入的插件需要写成Extension.插件名
<!-- 引入 core包 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/index.css" />
<!-- 引入 extension包样式 -->
<script src="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@logicflow/[email protected]/dist/index.css" />
<style>
#container {
width: 1000px;
height: 500px
}
</style>
<style>
.drawer {
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100%;
background-color: #f1f1f1;
transition: right 0.3s ease-in-out;
padding: 20px;
box-sizing: border-box;
z-index: 1000;
}
.drawer.open {
right: 0;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
display: none;
}
.overlay.show {
display: block;
}
.drawer-button {
margin: 10px;
}
<div>
<div class="overlay" onclick="closeDrawer()"></div>
<div class="drawer" id="bpmn:startEvent">
<div>
start-event-drawer
</div>
<div>
<div>节点编码 <input type="" name="" /> </div>
<div>节点名称 <input type="" name="" /> </div>
<div>监听器类型 <select> <option>任务创建</option></select> </div>
<div>监听器路径 <textarea name=""></textarea> </div>
</div>
</div>
<div class="drawer" id="bpmn:userTask">
<div>
user-task-drawer
</div>
<div>
<div>节点编码 <input type="" name="" /> </div>
<div>节点名称 <input type="" name="" /> </div>
<div>协作方式
<input type="radio" name=""/>或签
<input type="radio" name=""/>票签
<input type="radio" name=""/>会签
</div>
<div>权限标识 <select> <option>任务创建</option></select> </div>
<div>是否可以跳转任意节点
<input type="radio" name=""/>否
<input type="radio" name=""/>是
</div>
<div>监听器类型 <select> <option>任务创建</option></select> </div>
<div>监听器路径 <textarea name=""></textarea> </div>
</div>
</div>
<div class="drawer" id="bpmn:exclusiveGateway">
<div>
exclusive-gateway-drawer
</div>
<div>
<div>节点编码 <input type="" name="" /> </div>
<div>节点名称 <input type="" name="" /> </div>
</div>
</div>
<div class="drawer" id="bpmn:parallelGateway">
<div>
parallel-gateway-drawer
</div>
<div>
<div>节点编码 <input type="" name="" /> </div>
<div>节点名称 <input type="" name="" /> </div>
</div>
</div>
<div class="drawer" id="bpmn:endEvent">
<div>
end-event-drawer
</div>
<div>
<div>节点编码 <input type="" name="" /> </div>
<div>节点名称 <input type="" name="" /> </div>
</div>
</div>
<div class="drawer" id="bpmn:sequenceFlow">
<div>
sequence-flow-drawer
</div>
<div>
<div>跳转类型 <select> <option>审批通过</option> <option>退回</option></select> </div>
</div>
</div>
</div>
<script>
window.onload = function () {
console.log('Extension', Extension)
InitLogicFlow();
}
function InitLogicFlow() {
// LogicFlow配置选项
const lf = new Core.LogicFlow({
container: document.querySelector("#container"),
grid: {
visible: true,
type: 'mesh',
size: 10,
config: {
color: '#eeeeee'
}
},
height: 500,
hoverOutline: false,
edgeSelectedOutline: false,
keyboard: {
enabled: true
},
plugins: [Extension.BpmnElement, Extension.BPMNElements, Extension.BpmnXmlAdapter, Extension.SelectionSelect, Extension.DndPanel, Extension.Control]
})
console.log('lf', lf)
// 拖拽面板
lf.extension.dndPanel.setPatternItems([
{
label: '选区',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAOVJREFUOBGtVMENwzAIjKP++2026ETdpv10iy7WFbqFyyW6GBywLCv5gI+Dw2Bluj1znuSjhb99Gkn6QILDY2imo60p8nsnc9bEo3+QJ+AKHfMdZHnl78wyTnyHZD53Zzx73MRSgYvnqgCUHj6gwdck7Zsp1VOrz0Uz8NbKunzAW+Gu4fYW28bUYutYlzSa7B84Fh7d1kjLwhcSdYAYrdkMQVpsBr5XgDGuXwQfQr0y9zwLda+DUYXLaGKdd2ZTtvbolaO87pdo24hP7ov16N0zArH1ur3iwJpXxm+v7oAJNR4JEP8DoAuSFEkYH7cAAAAASUVORK5CYII=',
callback: () => {
// lf.current!.extension.selectionSelect.openSelectionSelect()
// lf.current!.once('selection:selected', () => {
// lf.current!.extension.selectionSelect.closeSelectionSelect()
// })
}
},
{
type: 'bpmn:startEvent',
text: '开始',
label: '开始节点',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAAnBJREFUOBGdVL1rU1EcPfdGBddmaZLiEhdx1MHZQXApraCzQ7GKLgoRBxMfcRELuihWKcXFRcEWF8HBf0DdDCKYRZpnl7p0svLe9Zzbd29eQhTbC8nv+9zf130AT63jvooOGS8Vf9Nt5zxba7sXQwODfkWpkbjTQfCGUd9gIp3uuPP8bZ946g56dYQvnBg+b1HB8VIQmMFrazKcKSvFW2dQTxJnJdQ77urmXWOMBCmXM2Rke4S7UAW+/8ywwFoewmBps2tu7mbTdp8VMOkIRAkKfrVawalJTtIliclFbaOBqa0M2xImHeVIfd/nKAfVq/LGnPss5Kh00VEdSzfwnBXPUpmykNss4lUI9C1ga+8PNrBD5YeqRY2Zz8PhjooIbfJXjowvQJBqkmEkVnktWhwu2SM7SMx7Cj0N9IC0oQXRo8xwAGzQms+xrB/nNSUWVveI48ayrFGyC2+E2C+aWrZHXvOuz+CiV6iycWe1Rd1Q6+QUG07nb5SbPrL4426d+9E1axKjY3AoRrlEeSQo2Eu0T6BWAAr6COhTcWjRaYfKG5csnvytvUr/WY4rrPMB53Uo7jZRjXaG6/CFfNMaXEu75nG47X+oepU7PKJvvzGDY1YLSKHJrK7vFUwXKkaxwhCW3u+sDFMVrIju54RYYbFKpALZAo7sB6wcKyyrd+aBMryMT2gPyD6GsQoRFkGHr14TthZni9ck0z+Pnmee460mHXbRAypKNy3nuMdrWgVKj8YVV8E7PSzp1BZ9SJnJAsXdryw/h5ctboUVi4AFiCd+lQaYMw5z3LGTBKjLQOeUF35k89f58Vv/tGh+l+PE/wG0rgfIUbZK5AAAAABJRU5ErkJggg=='
},
{
type: 'bpmn:userTask',
text: '用户任务',
label: '用户任务',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAEFVwZaAAAABGdBTUEAALGPC/xhBQAAAqlJREFUOBF9VM9rE0EUfrMJNUKLihGbpLGtaCOIR8VjQMGDePCgCCIiCNqzCAp2MyYUCXhUtF5E0D+g1t48qAd7CCLqQUQKEWkStcEfVGlLdp/fm3aW2QQdyLzf33zz5m2IsAZ9XhDpyaaIZkTS4ASzK41TFao88GuJ3hsr2pAbipHxuSYyKRugagICGANkfFnNh3HeE2N0b3nN2cgnpcictw5veJIzxmDamSlxxQZicq/mflxhbaH8BLRbuRwNtZp0JAhoplVRUdzmCe/vO27wFuuA3S5qXruGdboy5/PRGFsbFGKo/haRtQHIrM83bVeTrOgNhZReWaYGnE4aUQgTJNvijJFF4jQ8BxJE5xfKatZWmZcTQ+BVgh7s8SgPlCkcec4mGTmieTP4xd7PcpIEg1TX6gdeLW8rTVMVLVvb7ctXoH0Cydl2QOPJBG21STE5OsnbweVYzAnD3A7PVILuY0yiiyDwSm2g441r6rMSgp6iK42yqroI2QoXeJVeA+YeZSa47gZdXaZWQKTrG93rukk/l2Al6Kzh5AZEl7dDQy+JjgFahQjRopSxPbrbvK7GRe9ePWBo1wcU7sYrFZtavXALwGw/7Dnc50urrHJuTPSoO2IMV3gUQGNg87IbSOIY9BpiT9HV7FCZ94nPXb3MSnwHn/FFFE1vG6DTby+r31KAkUktB3Qf6ikUPWxW1BkXSPQeMHHiW0+HAd2GelJsZz1OJegCxqzl+CLVHa/IibuHeJ1HAKzhuDR+ymNaRFM+4jU6UWKXorRmbyqkq/D76FffevwdCp+jN3UAN/C9JRVTDuOxC/oh+EdMnqIOrlYteKSfadVRGLJFJPSB/ti/6K8f0CNymg/iH2gO/f0DwE0yjAFO6l8JaR5j0VPwPwfaYHqOqrCI319WzwhwzNW/aQAAAABJRU5ErkJggg=='
},
{
type: 'bpmn:exclusiveGateway',
text: '排他网关',
label: '排他网关',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAAHeEJUAAAAABGdBTUEAALGPC/xhBQAAAvVJREFUOBGNVEFrE0EU/mY3bQoiFlOkaUJrQUQoWMGePLX24EH0IIoHKQiCV0G8iE1covgLiqA/QTzVm1JPogc9tIJYFaQtlhQxqYjSpunu+L7JvmUTU3AgmTfvffPNN++9WSA1DO182f6xwILzD5btfAoQmwL5KJEwiQyVbSVZ0IgRyV6PTpIJ81E5ZvqfHQR0HUOBHW4L5Et2kQ6Zf7iAOhTFAA8s0pEP7AXO1uAA52SbqGk6h/6J45LaLhO64ByfcUzM39V7ZiAdS2yCePPEIQYvTUHqM/n7dgQNfBKWPjpF4ISk8q3J4nB11qw6X8l+FsF3EhlkEMfrjIer3wJTLwS2aCNcj4DbGxXTw00JmAuO+Ni6bBxVUCvS5d9aa04+so4pHW5jLTywuXAL7jJ+D06sl82Sgl2JuVBQn498zkc2bGKxULHjCnSMadBKYDYYHAtsby1EQ5lNGrQd4Y3v4Zo0XdGEmDno46yCM9Tk+RiJmUYHS/aXHPNTcjxcbTFna000PFJHIVZ5lFRqRpJWk9/+QtlOUYJj9HG5pVFEU7zqIYDVsw2s+AJaD8wTd2umgSCCyUxgGsS1Y6TBwXQQTFuZaHcd8gAGioE90hlsY+wMcs30RduYtxanjMGal8H5dMW67dmT1JFtYUEe8LiQLRsPZ6IIc7A4J5tqco3T0pnv/4u0kyzrYUq7gASuEyI8VXKvB9Odytv6jS/PNaZBln0nioJG/AVQRZvApOdhjj3Jt8QC8Im09SafwdBdvIpztpxWxpeKCC+EsFdS8DCyuCn2munFpL7ctHKp+Xc5cMybeIyMAN33SPL3ZR9QV1XVwLyzHm6Iv0/yeUuUb7PPlZC4D4HZkeu6dpF4v9j9MreGtMbxMMRLIcjJic9yHi7WQ3yVKzZVWUr5UrViJvn1FfUlwe/KYVfYyWRLSGNu16hR01U9IacajXPei0wx/5BqgInvJN+MMNtNme7ReU9SBbgntovn0kKHpFg7UogZvaZiOue/q1SBo9ktHzQAAAAASUVORK5CYII='
},
{
type: 'bpmn:parallelGateway',
text: '并行网关',
label: '并行网关',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAYAAACpF6WWAAAACXBIWXMAAC4jAAAuIwF4pT92AAAB3klEQVQ4jaXUO2hUURAG4G9lRVFEW4OKYBAMIoiIvRDxEZ8odmLhA+JmTSxTSix9QNTC2AQFOx/RGB/pLBS1sbT2ga0SUbGIxZnrHq+72UWnmTlz7/z3PzP/3Er3yKwObBBnMY6Bdi/P6wBwGBexBDVc+1/QQZyL+Eb447jyr6AFQ6jjCHrj3G8Oxq1Ac4Z1jEY8jb52jJuBDmUMzwTgZnzEIUziQMZ4tAxQBh3GhYxJAd6F5VgZ5zvYFnENY61AhzSuPITr2bNv4Wey3FPsi/gYLpdBc4Z1XCrd4F34T6X8PY0enyoYVzUfyhYszYo3hd+K71n+h9TjvbgVjL9Wukdmi5Uax9GIO1qzsBX4IA31fMH0qjTFHdgVXz6MZVlhD07jJp5l+Z8BuB4nIzdRid0fC+qwB/dLbNbiLXbjQelZD15isaTj3mJQuZAnpB7ltjp8Vym/AW8C8KHYuFxSNQ0Z3dVYSVgQfmGWW4fnUgunpdYpgxaMC709wf6IP0vD+xLnjXiNRVI7cgKq/raB+Fg/bks6nMQqvNfoYRVTUp//sFY/lN9CDiZ9AbgGrwLwMXY2K57r13dCkhtJDcN4IV15CttbFTa7fpnxfKnXxda1ZNgpKInxTPhHONiu4BfEpWWaWt6MSgAAAABJRU5ErkJggg=='
},
{
type: 'bpmn:endEvent',
text: '结束',
label: '结束节点',
icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAAH6ji2bAAAABGdBTUEAALGPC/xhBQAAA1BJREFUOBFtVE1IVUEYPXOf+tq40Y3vPcmFIdSjIorWoRG0ERWUgnb5FwVhYQSl72oUoZAboxKNFtWiwKRN0M+jpfSzqJAQclHo001tKkjl3emc8V69igP3znzfnO/M9zcDcKT67azmjYWTwl9Vn7Vumeqzj1DVb6cleQY4oAVnIOPb+mKAGxQmKI5CWNJ2aLPatxWa3aB9K7/fB+/Z0jUF6TmMlFLQqrkECWQzOZxYGjTlOl8eeKaIY5yHnFn486xBustDjWT6dG7pmjHOJd+33t0iitTPkK6tEvjxq4h2MozQ6WFSX/LkDUGfFwfhEZj1Auz/U4pyAi5Sznd7uKzznXeVHlI/Aywmk6j7fsUsEuCGADrWARXXwjxWQsUbIupDHJI7kF5dRktg0eN81IbiZXiTESic50iwS+t1oJgL83jAiBupLDCQqwziaWSoAFSeIR3P5Xv5az00wyIn35QRYTwdSYbz8pH8fxUUAtxnFvYmEmgI0wYXUXcCCSpeEVpXlsRhBnCEATxWylL9+EKCAYhe1NGstUa6356kS9NVvt3DU2fd+Wtbm/+lSbylJqsqkSm9CRhvoJVlvKPvF1RKY/FcPn5j4UfIMLn8D4UYb54BNsilTDXKnF4CfTobA0FpoW/LSp306wkXM+XaOJhZaFkcNM82ASNAWMrhrUbRfmyeI1FvRBTpN06WKxa9BK0o2E4Pd3zfBBEwPsv9sQBnmLVbLEIZ/Xe9LYwJu/Er17W6HYVBc7vmuk0xUQ+pqxdom5Fnp55SiytXLPYoMXNM4u4SNSCFWnrVIzKG3EGyMXo6n/BQOe+bX3FClY4PwydVhthOZ9NnS+ntiLh0fxtlUJHAuGaFoVmttpVMeum0p3WEXbcll94l1wM/gZ0Ccczop77VvN2I7TlsZCsuXf1WHvWEhjO8DPtyOVg2/mvK9QqboEth+7pD6NUQC1HN/TwvydGBARi9MZSzLE4b8Ru3XhX2PBxf8E1er2A6516o0w4sIA+lwURhAON82Kwe2iDAC1Watq4XHaGQ7skLcFOtI5lDxuM2gZe6WFIotPAhbaeYlU4to5cuarF1QrcZ/lwrLaCJl66JBocYZnrNlvm2+MBCTmUymPrYZVbjdlr/BxlMjmNmNI3SAAAAAElFTkSuQmCC'
}
])
// 控制面板
lf.extension.control.addItem({
//iconClass: 'lf-control-save',
title: '',
text: '保存',
onClick: (lf, ev) => {
console.log('getGraphData', lf.getGraphData())
}
})
// 监听被点击节点
lf.on('node:click', data => {
console.log('data.type', data)
openDrawer(data.data.type)
})
// 监听被点击节点
lf.on('edge:click', data => {
console.log('data.type', data)
openDrawer(data.data.type)
})
lf.render({})
// 方便调试
window.lf = lf;
}
</script>
from logicflow.
新版本已解决
from logicflow.
Related Issues (20)
- [Bug Report]: rotate旋转,框选导致的问题 HOT 1
- [Feature]: 节点数较多时, 页面性能较差,卡顿明显, 操作过程中FPS从160降到10以下 HOT 3
- [Feature]: 第一次很难找到获取画布数据源的 api,文档可以优化~ HOT 1
- [Bug Report]: 文档教程有误 HOT 2
- [Bug Report]: 新插件 NodeSelection 选中后 resize 问题
- [Feature]: overlapMode 能否增加一种禁止选中元素置顶的配置 HOT 2
- [Bug Report]: 预设的 BPMN 泳道元素 resize 异常
- [Bug Report]: 多选后,出现节点漏掉的现象 HOT 1
- [Bug Report]: HOT 2
- 设置了grid的size属性,addNode,会造成节点有偏移 HOT 2
- [Bug Report]: 【分组扩展组件】折叠时后连线的问题
- [Bug Report]: 【分组扩展组件】折叠时后撤回与恢复的问题
- [Bug Report]: 先旋转节点,然后进行缩放,锚点有问题 HOT 1
- [Bug Report]: 升级2.0.2报错 HOT 4
- vue3中,logicflow封装另一个公共组件,在两个不同地方使用,有一处使用地方不显示图形 HOT 1
- [Feature]: 如何在贝塞尔曲线上的中间位置增加元素
- [Bug Report]: windows在开发extention包时,执行pnpm run build:watch报错 HOT 1
- [Feature]: 连线和锚点问题
- [Bug Report]: 2.0.1以上版本流程保存bpmn格式后再回显时报错Cannot read properties of undefined (reading 'dc:Bounds') HOT 1
- [Bug Report]: 2.0.1以上版本流程保存bpmn格式后再回显时报错Cannot read properties of undefined (reading 'dc:Bounds') HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from logicflow.