# LogicFlow流程图

**Repository Path**: xiaomao2541864996/logic-low-demo

## Basic Information

- **Project Name**: LogicFlow流程图
- **Description**: LogicFlow笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 9
- **Forks**: 2
- **Created**: 2021-06-09
- **Last Updated**: 2023-02-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

###### 效果
![](./README.png)

<font size=3>[官方文档](http://logic-flow.org/guide/start.html)

### <font size=3 color=read>步骤1.安装
```js
//LogicFlow
npm install @logicflow/core --save

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

### <font size=3 color=read>快速上手
<font size=3>[参考官网案例](http://logic-flow.org/)
```vue
// 创建容器
<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);
```

### <font size=3 color=read>步骤2.准备节点侧边栏
```vue
<!--组件栏-->
<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>
```
<font size=3 color=blue>节点数据
<font size=3>[]()
```json
 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'},
],
```

<font size=3 color=blue>拖拽事件 @mousedown:methods.mouseDownHandle(item)
```js
 /**
  * 拖拽
  * @param item 拖拽属性
  */
mouseDownHandle : function (item) {
    data.lf.dnd.startDrag({
          type:item.type,
          text:item.text,
          properties:{}
    });
},
```
<font size=3 color=blue>侧边栏的node样式（非专业前端，样式讲究凑合着看吧）
```css
.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);
}
```