LogicFlow 移动事件

LogicFlow 是一个基于 JavaScript 的流程图库，它可以让用户在网页上创建和编辑流程图。移动事件在 LogicFlow 中是一个非常常见的操作，因为用户需要通过移动节点来构建他们的流程图。

在 LogicFlow 中，移动事件包括两个事件：mousedown 和 mousemove。当用户按下鼠标按钮并开始移动节点时，会触发 mousedown 事件。同时，LogicFlow 会监听 mousemove 事件，以便在用户移动节点时更新其位置。当用户释放鼠标按钮时，会触发 mouseup 事件。在 mouseup 事件中，LogicFlow 会将节点的最终位置保存到数据模型中，并更新视图。

以下是一个示例代码片段，展示了 LogicFlow 中如何处理移动事件：

// 监听 mousedown 事件
lf.on('node:mousedown', (event) => {
  // 获取当前节点的 id
  const nodeId = event.data.id;
  // 记录起始位置
  const startPos = lf.getNodePosition(nodeId);

  // 监听 mousemove 事件
  lf.on('mousemove', (event) => {
    // 计算当前位置
    const { x, y } = event.data.pos;
    const offsetX = x - startPos.x;
    const offsetY = y - startPos.y;

    // 更新节点位置
    lf.setNodePosition(nodeId, {
      x: startPos.x + offsetX,
      y: startPos.y + offsetY,
    });
  });

  // 监听 mouseup 事件
  lf.on('mouseup', () => {
    // 取消 mousemove 监听
    lf.off('mousemove');

    // 保存节点位置
    const { x, y } = lf.getNodePosition(nodeId);
    saveNodePositionToModel(nodeId, x, y);
  });
});

这段代码演示了如何监听 mousedown 事件，并在用户开始移动节点时启动 mousemove 监听器。在 mousemove 监听器中，我们计算出节点的当前位置，并使用 lf.setNodePosition() 方法更新节点的位置。在 mouseup 事件中，我们取消 mousemove 监听器，并将节点的最终位置保存到数据模型中。