Vue-flow-draggable NPM

vue-flow-draggable

案例预览：

Flow设计文档

1. 快速开始

yarn add vue-flow-draggable

import FlowChart from 'vue-flow-draggable';
import 'vue-flow-draggable/dist/vue-flow-draggable.css';

<template>
    <div id="mainContainer"></div>
</template>
<script>
export default {
    mounted() {
        // 一行代码即可，画布设置完成
        // 即刻支持节点连接、右键、缩放等
        FlowChart.setContainer('mainContainer');

        // 加数据，渲染画布和编辑操作
        FlowChart.loadData(mockdata);

        // flow事件暴露，方便做业务逻辑
        FlowChart.on('selectNode', (nodeId: string) => {
            this.isShowNode = true;
            this.currentNodeId = nodeId;
        });
    }
}
</script>

一定要在mounted中设置，因为jsPlumbrender需要dom节点已完成

2. 架构设计

3. Method API设计

1. FlowChart.setContainer(id)

设置容器，同时进行插件初始化

2. FlowChart.loadData(model)

获取model数据，在flow中渲染以及后续编辑。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)

插件扩展。详细见下方插件设计

4. Event API设计

1. selectNode

当前画布选中的node。回调：function(nodeId)

2. addCommand

添加命令后触发，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:

FlowChart.use(function({ instance, editor, model, contentMenu}) {
    this.rerender = () => {
        // 会使整个jsPlumb立即重绘。
        instance.setSuspendDrawing(false, true)
        // 重新渲染
        editor.render();
    }
})