流程类SVG画布的通用开发范式

大多数流程类画布场景，可以用antv x6或其他开源库即可，但如果有大量的自定义需求，自己开发的话，应该如何设计呢？本文介绍这类场景的一些通用设计思路。

MVC驱动

View

View就是实际渲染到界面的画布Panel以及画布上的各元素，比如Node，Port，Rect,Circle。这类元素可能是由SVG渲染，也可能是由React渲染。

Model

Model是画布上各图形背后的数据信息，比如画布上有一个Node，那么就存在一个对应的Node的Model实例。

项目里常可以用Node.tsx和Node.ts分别代表View逻辑和数据逻辑。

Controller

View只定义渲染内容，本身不外部耦合，除自身内部渲染可能存在一些ui状态外，不会主动获取状态或数据，也不会主动更新------这部分逻辑由Controller负责。

Controller会给View传入对应的数据实例，以及部分必要的环境信息，View需要向Controller提供试图更新的方法。

脏检查机制

画布上的任何需要更新视图的操作，都可以看成是对Model实例的操作，需要更新视图的，则可以对该Model实例标记为dirty。只要循环检查是否存在某个Model实例上有dirty标记，即可确定是否需要更新视图。

这里可以用RAF循环检测。

整体模块设计

MVC: 上文已介绍，视图更新驱动的核心部分
device: 鼠标事件监听、键盘事件监听/快捷键设置、屏幕坐标转换
操作request：操作栈管理的最小单位，可将多个修改合并为一次操作
命令command：一系列操作或处理的集合，用于封装一些通用或复杂的操作。比如画布或连线的拖拽。command是承载通用事件处理程序的直接对象，统一由事件中心调度。

request 操作栈伪代码

ts 复制代码

接口 Request
  exec()   // 执行（并记下"之后"的状态）
  undo()   // 回到"之前"
  redo()   // 再做到"之后"

RequestManager
  queue = []        // 历史操作
  idx = -1          // 当前停在哪一步
  maxStep = 20

  commit(req):
    req.exec()
    // 若在中间 undo 过，丢掉后面的分支
    queue = queue[0 .. idx]
    queue.push(req)
    idx++
    超过 maxStep → 丢掉最老的

  undo():
    若 idx >= 0:
      queue[idx].undo()
      idx--

  redo():
    若 idx < queue.length - 1:
      idx++
      queue[idx].redo()

command命令的伪代码

js 复制代码

BaseCommand
  onStart / onTerminate
  onMouseDown / Move / Up / Wheel / Key...
  // 默认全返回 false（不处理）


DragNodeCommand
  onMouseMove: 改节点 position，dirty
  onMouseUp:   commit 撤销请求 → terminate()

DragLinkCommand
  onMouseMove: 创建临时连线，更新预览终点
  onMouseUp:   落在 Port 上就连上并 commit；否则删线 → terminate()