# vue-flow-draggable **Repository Path**: macosx/vue-flow-draggable ## Basic Information - **Project Name**: vue-flow-draggable - **Description**: 基于jsPlumb的画布流程组件,类似Visio - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 12 - **Created**: 2021-01-21 - **Last Updated**: 2021-01-21 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # vue-flow-draggable 案例预览:https://lq782655835.github.io/vue-flow-draggable/ ## Flow设计文档 ### 1. 快速开始 安装 ``` yarn add vue-flow-draggable ``` 使用 ``` js import FlowChart from 'vue-flow-draggable'; import 'vue-flow-draggable/dist/vue-flow-draggable.css'; ``` > 一定要在mounted中设置,因为jsPlumb render需要dom节点已完成 ### 2. 架构设计 ![image](https://user-images.githubusercontent.com/6310131/84100368-4cb75900-aa3e-11ea-9f40-350e008be138.png) ### 3. Method API设计 #### 1. FlowChart.setContainer(id) 设置容器,同时进行插件初始化 #### 2. FlowChart.loadData(model) 获取model数据,在flow中渲染以及后续编辑。model数据结构见[下方](#4-model数据结构) #### 3. FlowChart.addNode(position, elId) 在容器内添加节点。参数: * position:节点位置 * elId:记录生产节点的源节点id,便于传递原节点信息 #### 4. FlowChart.undo() 撤销上一步命令 #### 5. FlowChart.zoomOut() 放大 #### 6. FlowChart.zoomIn() 缩小 #### 7. FlowChart.getModelData() 拿到实时model数据 #### 8. FlowChart.use(plugin, ...args) 插件扩展。详细见下方[插件设计](#6-通用插件设计) ### 4. Event API设计 #### 1. selectNode 当前画布选中的node。回调:function(nodeId) #### 2. addCommand 添加命令后触发,Command命令类型可以见[下方](#5-command命令类型)。回调:function() #### 3. commandListEmpty 命令栈为空时触发。回调function() #### 4. showNodeData 右键菜单,选择“查看数据”时触发。回调function(nodeId) > TODO: 右键菜单做成通用设计 ### 4. Model数据结构 * nodes 数组 * id(节点唯一ID) * points 附着在node上的连接点(ai业务中的输入和输出参数) * targets 目标endpoints * sources 源endpoints (string数组,存放endpoint的ID) * position 画布坐标位置 * left * top * data 节点信息 * icon * value * nodeState * endpoints 数组 * id 唯一ID * data endpoint信息 * value * edges 数组 * 连线关系,sourceId -> targetId ### 5. Command命令类型 * Node节点命令 * AddNodeCommand * RemoveNodeCommand * MoveNodeCommand(移动) * PasteNodeCommand(粘贴) * RenameNodeCommand(重命名) * Connector连线命令 * AddConnectorCommand * RemoveConnectorCommand ### 6. 通用插件设计 插件扩展,将底层能力暴露给开发者自定义,从而解耦业务。插件方式参考自MarkdownIt。 参数中args第一个参数是暴露的FlowChart内部对象,具体有: * instance: jsPlumb底层实例 * editor: 画布操作实例,提供封装的jsPlumb操作 * model: 暴露model模型数据结构和操作 * contentMenu: 暴露右键插件 实现第一个插件,更复杂插件可以看[执行模型插件pluginFlowExec](./src/FlowChart/pluginFlowExec.js): ``` js FlowChart.use(function({ instance, editor, model, contentMenu}) { this.rerender = () => { // 会使整个jsPlumb立即重绘。 instance.setSuspendDrawing(false, true) // 重新渲染 editor.render(); } }) ``` ## 功能点 主要分三个区域: ![](/public/md.png) #### 菜单节点区域 - [x] 从菜单中拖动一个节点到主设计区域,可放置该节点 - [x] 按节点类型组织节点 - [x] 菜单右键 #### 主设计区域 - [x] 操作可撤销 - [x] 背景的平移和缩放 - [x] 可接收从菜单中拖入的节点 - [x] 拖入的节点会根据当前的节点信息生成对应的端点(用于拖出连线) - [x] 生成的端点分两种类型:源端点和目标端点,应在样式上作区分 - [x] 源端点放置在节点bottom位置,目标节点防止在节点的top位置(便于从上往下拖出连接线) - [x] 所有节点可通过拖拽移动位置 - [x] 所有节点和连接线可删除 - [x] 所有节点和端点在鼠标悬浮需要有tooltip框来提示节点或端点信息 - [x] 所有节点、端点和连接线在鼠标悬浮时需要设置不同的样式 - [x] 所有节点和连接线可被选中 - [x] 导入数据生成流程图 - [ ] 操作实时保存数据 - [ ] 键盘删除快捷键 #### 节点配置区域 - 在设计区域选中节点时,节点配置区域会显示一个对应的节点配置面板 - 不同节点应拥有对应的节点配置面板 - 节点面板用来展示和配置节点属性 #### 右键菜单功能 - 节点: - [x] 复制 - [x] 删除 - [x] 查看数据 - [x] 重命名 - 连接线: - [x] 删除 - 背景: - [x] 粘贴 ## 安装依赖 ``` npm install ``` ## 开发模式 ``` npm run serve ``` ## 编译生产代码 ``` npm run build ``` ## 技术细节 1. 使用[panzoom](https://github.com/timmywil/panzoom)缩放画布div 1. 设计Command模式,1. 方便顶层调用 2. undo设计