
bpmn-js
前端的自定义流程图
那就可爱多一点点
程序员,喜欢和挑战的前端童鞋,希望可以一起沟通学习
展开
-
如何自己实现一个丝滑的流程图绘制工具(九) 自定义连接线
但是有个需要注意的是,你吧线改变了两端,虽然创建线的时候的两头节点看不到,但是本质存在会影响画其他节点。所以我连接线创建的两个虚拟节点类型是不同的。这样遍历画布上的节点就可以找到多余的两个点,删掉。创建一个线的dom节点,监听鼠标的移动和放下,使线跟随鼠标移动。在画布区域松开鼠标后,创建两个很小的节点并连接起来。产品又有更近的想法了,bpmn-js的连接线你用的时候是看不到的,也就是你从左侧点击连接线的没有线随鼠标移动.这样就是一个假象,一根线放在画布上,可以改变连接线的两端。原创 2023-11-10 13:44:59 · 665 阅读 · 0 评论 -
如何自己实现一个丝滑的流程图绘制工具(八) 创建节点的文本标签
节点的文本标签不希望是通过节点编辑实现,而是拿到节点名字渲染上去,包括连接线。原创 2023-09-01 17:03:03 · 374 阅读 · 0 评论 -
自定义拖拽功能,上下拖拽改变盒子高度
拖拽改成元素的高度原创 2023-08-25 11:06:25 · 656 阅读 · 1 评论 -
如何自己实现一个丝滑的流程图绘制工具(六)bpmn删除、复制节点
bpmn-js实现复制和删除节点功能原创 2023-08-25 10:15:59 · 839 阅读 · 0 评论 -
如何自己实现一个丝滑的流程图绘制工具(七)bpmn-js 批量删除、复制节点
希望实现批量删除和复制节点,因为bpmn-js是canvas画的,所以不能像平时页面上的复制一样直接选择范围,会变成移动画布。因为bpmn-js对鼠标直接选取范围进行了拦截。所以我加了一个辅助按键进行选择。绘制一个选择的效果框,这样才可以看出来选的节点有哪些。上面的选中范围框效果也是用canvas画出来的。原创 2023-08-30 14:43:35 · 873 阅读 · 0 评论 -
如何自己实现一个丝滑的流程图绘制工具(五)bpmn的xml和json互转
bpmn-js中如何xml和json的互转原创 2023-08-24 21:30:00 · 2255 阅读 · 0 评论 -
如何自己实现一个丝滑的流程图绘制工具(四)bpmn-js开启只读状态
bpmn-js如何开启只读和编辑状态的切换原创 2023-08-24 17:08:26 · 703 阅读 · 0 评论 -
如何自己实现一个丝滑的流程图绘制工具(三)自定义挂载vue组件
bpmn-sj中如何挂载自定义组件,代替普通的流程图节点原创 2023-08-24 16:58:54 · 360 阅读 · 0 评论 -
如何自己实现一个丝滑的流程图绘制工具(二) 自定义面板
bpmn-js如何自定义面板内容呢?原创 2023-08-24 16:05:31 · 197 阅读 · 0 评论 -
如何自己实现一个丝滑的流程图绘制工具(一)vue如何使用
、他的流程图是涉及到业务的,比如开始事件、结束事件等。接下来看看在vue项目中我们如何使用bpmn-js。3、可以实现一个完整的流程事件,并进行模拟。对比下来我还是选择了。引入npm 相关的包。原创 2023-08-24 15:20:07 · 1369 阅读 · 2 评论