LogicFlow（Vue3）

官方文档
GITEE 小demo

步骤1.安装

//LogicFlow
npm install @logicflow/core --save

//LogicFlow组件
npm install @logicflow/extension --save

快速上手

参考官网案例

// 创建容器
<div id="container"></div>

// 准备数据
const data = {
  // 节点
  nodes: [
  {id: 21, type: 'rect',x: 100,y: 200,text: {value: '矩形节点',x: 100,y: 200}},
  {id: 50,type: 'circle', x: 300,y: 400,text: {value: '圆形节点',x: 300,y: 400}},
  ],
  // 边
  edges:[
    {type: 'polyline', sourceNodeId: 50,targetNodeId: 21 }
  ]
}
// 渲染画布
const lf = new LogicFlow({
  container: document.querySelector('#container'),
  width: 700,
  height: 600,
});

lf.render(data);

步骤2.准备节点侧边栏

<!--组件栏-->
<div class="node-panel">
    <div class="node-item" @mousedown='methods.mouseDownHandle(item)' v-for="(item,index) in shapeList" :key="index">
         <div class="node-item-icon" :class="item.class">
               <span class="node-label">{{item.text}}</span>
         </div>
    </div>
</div>

节点数据

 shapeList: [
    {type: 'rect', text: '矩形',class:'node-rect'},
    {type: 'circle', text: '圆形',class:'node-circle'},
    {type: 'ellipse', text: '椭圆',class:'node-ellipse'},
    {type: 'polygon', text: '多边形',class:'node-polygon'},
    {type: 'my-rect', text: '自定义',class:'node-rect'},
],

拖拽事件 @mousedown:methods.mouseDownHandle(item)

 /**
  * 拖拽
  * @param item 拖拽属性
  */
mouseDownHandle : function (item) {
    data.lf.dnd.startDrag({
          type:item.type,
          text:item.text,
          properties:{}
    });
},

侧边栏的node样式（非专业前端，样式讲究凑合着看吧）

.node-panel {
    width: 70px;
    padding: 20px 0;
    background-color: white;
    box-shadow: 0 0 10px 1px rgb(228, 224, 219);
    border-radius: 6px;
    text-align: center;
    z-index: 101;
}
.node-item {
    margin-bottom: 20px;
}
.node-item-icon {
    width: 30px;
    height: 30px;
    margin-left: 20px;
    background-size: cover;
    text-align: center;
}
.node-label {
    font-size: 12px;
    margin-top: 5px;
    user-select: none;
}
.node-rect{
    width: 40px;
    height: 30px;
    border: 2px solid black;
}
.node-circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid black;
}
.node-ellipse{
    border: 2px solid black;
    border-radius: 60%;
    width: 40px;
    height: 30px;
}
.node-polygon{
    width: 40px;
    height: 40px;
    border: 2px solid black;
    transform:rotate(45deg);
}