jsPlumb 流程设计器深度话题

// 流程图本质就是"图"——节点(node)+ 边(edge)
{
  nodes: [
    {
      id: 'node_1',
      type: 'start',        // 节点类型:start/end/approve/condition
      label: '发起申请',
      x: 100, y: 200,     // 在画布坐标系的位置(不是屏幕坐标!)
      config: { ... }       // 节点参数:审批人、条件等
    },
    ...
  ],
  edges: [
    {
      id: 'edge_1',
      source: 'node_1',      // 起点节点 id
      sourcePort: 'bottom',   // 起点锚点(上下左右)
      target: 'node_2',
      targetPort: 'top',
      label: '同意'
    }
  ]
}

// 画布状态:scale(缩放倍数)+ offsetX/Y(平移偏移)
let scale = 1
let offsetX = 0, offsetY = 0

// 屏幕坐标 → 画布坐标(点击放置节点时用)
function screenToCanvas(screenX, screenY) {
  return {
    x: (screenX - offsetX) / scale,
    y: (screenY - offsetY) / scale
  }
}

// 画布坐标 → 屏幕坐标(渲染节点时用)
function canvasToScreen(canvasX, canvasY) {
  return {
    x: canvasX * scale + offsetX,
    y: canvasY * scale + offsetY
  }
}

// 缩放时,围绕鼠标位置缩放(不是左上角)
function zoomAt(mouseX, mouseY, newScale) {
  // 关键:缩放前后,鼠标对应的画布坐标不变
  const before = screenToCanvas(mouseX, mouseY)
  scale = newScale
  const after = screenToCanvas(mouseX, mouseY)
  // 反推新的 offset,让 before === after
  offsetX = mouseX - before.x * scale
  offsetY = mouseY - before.y * scale
}

// 1. 定义命令接口:每个命令都能执行和撤销
class Command {
  execute() {}   // 执行
  undo() {}      // 撤销(反执行)
}

// 2. 具体命令:添加节点
class AddNodeCommand extends Command {
  constructor(graph, node) {
    super()
    this.graph = graph
    this.node = node
  }
  execute() { this.graph.nodes.push(this.node) }
  undo() {
    const i = this.graph.nodes.findIndex(n => n.id === this.node.id)
    this.graph.nodes.splice(i, 1)
  }
}

// 3. 移动节点命令(要存"移动前"和"移动后"的位置)
class MoveNodeCommand extends Command {
  constructor(node, oldX, oldY, newX, newY) {
    super()
    this.node = node
    this.oldX = oldX; this.oldY = oldY
    this.newX = newX; this.newY = newY
  }
  execute() { this.node.x = this.newX; this.node.y = this.newY }
  undo() { this.node.x = this.oldX; this.node.y = this.oldY }
}

// 4. 命令管理器:维护两个栈
class CommandManager {
  constructor() {
    this.undoStack = []
    this.redoStack = []
  }
  execute(cmd) {
    cmd.execute()
    this.undoStack.push(cmd)
    this.redoStack = []  // 新操作清空 redo 栈
  }
  undo() {
    const cmd = this.undoStack.pop()
    if (cmd) { cmd.undo(); this.redoStack.push(cmd) }
  }
  redo() {
    const cmd = this.redoStack.pop()
    if (cmd) { cmd.execute(); this.undoStack.push(cmd) }
  }
}

// 拖动节点时,不立即重绘,只标记"脏了"
let isDirty = false
let rafId = null

function markDirty() {
  if (isDirty) return  // 已经标记过,跳过
  isDirty = true
  rafId = requestAnimationFrame(() => {
    repaintAllDirtyEdges()  // 一帧只重绘一次
    isDirty = false
  })
}

// 节点拖动事件里调 markDirty,而不是直接 repaint
node.on('drag', () => {
  updateNodePosition(node)
  markDirty()  // 原来是直接 repaint,现在批处理
})

• 锚点限制: start 节点只能从"下"出,end 节点只能从"上"入
• 类型校验: condition 节点的两个出口必须连不同分支
• 防环: 连线不能形成环(DFS 检测)
• 唯一性: 同两个节点不能连多条线(或限制最多 N 条)
• 吸附: 拖拽连线接近目标节点时自动吸附(connector + tolerance)