Skip to content

lq782655835/vue-flow-draggable

Repository files navigation

vue-flow-draggable

案例预览:https://lq782655835.github.io/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中设置,因为jsPlumb render需要dom节点已完成

2. 架构设计

image

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();
    }
})

功能点

主要分三个区域:

菜单节点区域

  • 从菜单中拖动一个节点到主设计区域,可放置该节点
  • 按节点类型组织节点
  • 菜单右键

主设计区域

  • 操作可撤销
  • 背景的平移和缩放
  • 可接收从菜单中拖入的节点
  • 拖入的节点会根据当前的节点信息生成对应的端点(用于拖出连线)
  • 生成的端点分两种类型:源端点和目标端点,应在样式上作区分
  • 源端点放置在节点bottom位置,目标节点防止在节点的top位置(便于从上往下拖出连接线)
  • 所有节点可通过拖拽移动位置
  • 所有节点和连接线可删除
  • 所有节点和端点在鼠标悬浮需要有tooltip框来提示节点或端点信息
  • 所有节点、端点和连接线在鼠标悬浮时需要设置不同的样式
  • 所有节点和连接线可被选中
  • 导入数据生成流程图
  • 操作实时保存数据
  • 键盘删除快捷键

节点配置区域

  • 在设计区域选中节点时,节点配置区域会显示一个对应的节点配置面板
  • 不同节点应拥有对应的节点配置面板
  • 节点面板用来展示和配置节点属性

右键菜单功能

  • 节点:
    • 复制
    • 删除
    • 查看数据
    • 重命名
  • 连接线:
    • 删除
  • 背景:
    • 粘贴

安装依赖

npm install

开发模式

npm run serve

编译生产代码

npm run build

技术细节

  1. 使用panzoom缩放画布div
  2. 设计Command模式,1. 方便顶层调用 2. undo设计