@flowgram.ai/free-layout-core 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/esm/index.js

@@ -1,20 +1,24 @@
 import {
   URLParams
-} from "./chunk-DE4324TR.js";
+} from "./chunk-IKQUOAWQ.js";
+import "./chunk-KNYZRMIO.js";
+import "./chunk-NU6G5HF4.js";
+import "./chunk-TQLT57GW.js";
 import "./chunk-CGOMTQ3G.js";
 import {
   WorkflowContentChangeType
-} from "./chunk-J5FVRRUV.js";
+} from "./chunk-U2XMPOSL.js";
 import {
   LineColors,
   LineType
-} from "./chunk-PT4ZVDZZ.js";
+} from "./chunk-5BT3ZR4D.js";
+import "./chunk-DDJTYHXN.js";
+import {
+  WorkflowOperationBaseService
+} from "./chunk-3UW6BHP2.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
-import "./chunk-DDJTYHXN.js";
-import "./chunk-KNYZRMIO.js";
-import "./chunk-NU6G5HF4.js";
 
 // src/workflow-commands.ts
 var WorkflowCommands = /* @__PURE__ */ ((WorkflowCommands2) => {
@@ -39,16 +43,20 @@ import {
   useEntities,
   useEntityFromContext as useEntityFromContext3,
   useEntityDataFromContext,
-  useRefresh as useRefresh2,
-  usePlaygroundLatest
+  useRefresh as useRefresh2
 } from "@flowgram.ai/core";
 
 // src/hooks/use-node-render.tsx
 import { useCallback, useEffect as useEffect2, useRef, useState, useContext, useMemo } from "react";
 import { useObserve } from "@flowgram.ai/reactive";
 import { getNodeForm } from "@flowgram.ai/node";
-import { FlowNodeRenderData as FlowNodeRenderData2 } from "@flowgram.ai/document";
-import { PlaygroundEntityContext, useListenEvents, useService } from "@flowgram.ai/core";
+import { FlowNodeRenderData as FlowNodeRenderData3 } from "@flowgram.ai/document";
+import {
+  MouseTouchEvent as MouseTouchEvent2,
+  PlaygroundEntityContext,
+  useListenEvents,
+  useService
+} from "@flowgram.ai/core";
 
 // src/service/workflow-select-service.ts
 import { inject, injectable } from "inversify";
@@ -63,6 +71,44 @@ import { Rectangle as Rectangle6, SizeSchema } from "@flowgram.ai/utils";
 import { bindConfigEntity } from "@flowgram.ai/core";
 import { delay } from "@flowgram.ai/utils";
 
+// src/utils/build-group-json.ts
+import { FlowNodeBaseType } from "@flowgram.ai/document";
+var buildGroupJSON = (json) => {
+  const { nodes, edges } = json;
+  const groupJSONs = nodes.filter(
+    (nodeJSON) => nodeJSON.type === FlowNodeBaseType.GROUP
+  );
+  const nodeJSONMap = new Map(nodes.map((n) => [n.id, n]));
+  const groupNodeJSONs = groupJSONs.map((groupJSON) => {
+    const groupBlocks = (groupJSON.data.blockIDs ?? []).map((blockID) => nodeJSONMap.get(blockID)).filter(Boolean);
+    const groupEdges = edges?.filter(
+      (edge) => groupBlocks.some((block) => block.id === edge.sourceNodeID || block.id === edge.targetNodeID)
+    );
+    const groupNodeJSON = {
+      ...groupJSON,
+      blocks: groupBlocks,
+      edges: groupEdges
+    };
+    return groupNodeJSON;
+  });
+  const groupBlockSet = new Set(groupJSONs.map((groupJSON) => groupJSON.data.blockIDs).flat());
+  const processedNodes = nodes.filter((nodeJSON) => !groupBlockSet.has(nodeJSON.id)).concat(groupNodeJSONs);
+  return {
+    nodes: processedNodes,
+    edges
+  };
+};
+
+// src/utils/get-line-center.ts
+function getLineCenter(from, to, bbox, linePadding) {
+  return {
+    x: bbox.center.x,
+    y: bbox.center.y,
+    labelX: bbox.center.x - bbox.x + linePadding,
+    labelY: bbox.center.y - bbox.y + linePadding
+  };
+}
+
 // src/utils/nanoid.ts
 import { nanoid as nanoidOrigin } from "nanoid";
 function nanoid(n) {
@@ -73,8 +119,8 @@ function nanoid(n) {
 import { compose, composeAsync } from "@flowgram.ai/utils";
 
 // src/utils/fit-view.ts
-import { TransformData } from "@flowgram.ai/core";
 import { Rectangle } from "@flowgram.ai/utils";
+import { TransformData } from "@flowgram.ai/core";
 var fitView = (doc, playgroundConfig, easing = true) => {
   const bounds = Rectangle.enlarge(
     doc.getAllNodes().map((node) => node.getData(TransformData).bounds)
@@ -121,7 +167,7 @@ var WorkflowNodeEntity = FlowNodeEntity;
 
 // src/entities/workflow-line-entity.ts
 import { isEqual as isEqual2 } from "lodash-es";
-import { domUtils } from "@flowgram.ai/utils";
+import { domUtils, Emitter as Emitter2 } from "@flowgram.ai/utils";
 import { Entity as Entity2 } from "@flowgram.ai/core";
 
 // src/entity-datas/workflow-node-ports-data.ts
@@ -130,25 +176,49 @@ import { FlowNodeRenderData } from "@flowgram.ai/document";
 import { EntityData, SizeData } from "@flowgram.ai/core";
 
 // src/entities/workflow-port-entity.ts
-import { Rectangle as Rectangle3, Emitter } from "@flowgram.ai/utils";
+import { Rectangle as Rectangle3, Emitter, Compare } from "@flowgram.ai/utils";
+import { FlowNodeTransformData } from "@flowgram.ai/document";
 import {
   Entity,
   PlaygroundConfigEntity,
   TransformData as TransformData3
 } from "@flowgram.ai/core";
+
+// src/utils/location-config-to-point.ts
+function locationConfigToPoint(bounds, config, _offset = { x: 0, y: 0 }) {
+  const offset = { ..._offset };
+  if (config.left !== void 0) {
+    offset.x += typeof config.left === "string" ? parseFloat(config.left) * 0.01 * bounds.width : config.left;
+  } else if (config.right !== void 0) {
+    offset.x += bounds.width - (typeof config.right === "string" ? parseFloat(config.right) * 0.01 * bounds.width : config.right);
+  }
+  if (config.top !== void 0) {
+    offset.y += typeof config.top === "string" ? parseFloat(config.top) * 0.01 * bounds.height : config.top;
+  } else if (config.bottom !== void 0) {
+    offset.y += bounds.height - (typeof config.bottom === "string" ? parseFloat(config.bottom) * 0.01 * bounds.height : config.bottom);
+  }
+  return {
+    x: bounds.x + offset.x,
+    y: bounds.y + offset.y
+  };
+}
+
+// src/entities/workflow-port-entity.ts
 var PORT_SIZE = 24;
 var WorkflowPortEntity = class extends Entity {
-  // relativePosition
   constructor(opts) {
     super(opts);
     this.portID = "";
-    this._disabled = false;
     this._hasError = false;
     this._onErrorChangedEmitter = new Emitter();
     this.onErrorChanged = this._onErrorChangedEmitter.event;
     this.portID = opts.portID || "";
     this.portType = opts.type;
-    this._disabled = opts.disabled ?? false;
+    this._disabled = opts.disabled;
+    this._offset = opts.offset;
+    this._locationConfig = opts.locationConfig;
+    this._location = opts.location;
+    this._size = opts.size;
     this.node = opts.node;
     this.updateTargetElement(opts.targetElement);
     this.toDispose.push(this.node.getData(TransformData3).onDataChange(() => this.fireChange()));
@@ -157,51 +227,98 @@ var WorkflowPortEntity = class extends Entity {
   static getPortEntityId(node, portType, portID = "") {
     return getPortEntityId(node, portType, portID);
   }
+  get position() {
+    return this._location;
+  }
   // 获取连线是否为错误态
   get hasError() {
     return this._hasError;
   }
   // 设置连线的错误态，外部应使用 validate 进行更新
   set hasError(hasError) {
-    this._hasError = hasError;
-    this._onErrorChangedEmitter.fire();
+    if (hasError !== this._hasError) {
+      this._hasError = hasError;
+      this._onErrorChangedEmitter.fire();
+    }
   }
   validate() {
     const anyLineHasError = this.allLines.some((line) => {
       if (line.disposed || line.isHidden) {
         return false;
       }
-      line.validateSelf();
       return line.hasError;
     });
     const isPortHasError = this.node.document.isErrorPort(this);
     this.hasError = anyLineHasError || isPortHasError;
   }
   isErrorPort() {
-    return this.node.document.isErrorPort(this);
+    return this.node.document.isErrorPort(this, this.hasError);
+  }
+  get location() {
+    if (this._location) {
+      return this._location;
+    }
+    if (this.portType === "input") {
+      return "left";
+    }
+    return "right";
   }
   get point() {
-    const { targetElement } = this;
-    const { bounds } = this.node.getData(TransformData3);
+    const { targetElement, _locationConfig } = this;
+    const { bounds } = this.node.getData(FlowNodeTransformData);
+    const location2 = this.location;
     if (targetElement) {
       const pos = domReactToBounds(targetElement.getBoundingClientRect()).center;
-      return this.entityManager.getEntity(PlaygroundConfigEntity).getPosFromMouseEvent({
+      const point2 = this.entityManager.getEntity(PlaygroundConfigEntity).getPosFromMouseEvent({
         clientX: pos.x,
         clientY: pos.y
       });
+      return {
+        x: point2.x,
+        y: point2.y,
+        location: location2
+      };
     }
-    if (this.portType === "input") {
-      return bounds.leftCenter;
+    if (_locationConfig) {
+      return {
+        ...locationConfigToPoint(bounds, _locationConfig, this._offset),
+        location: location2
+      };
+    }
+    const offset = this._offset || { x: 0, y: 0 };
+    let point = { x: 0, y: 0 };
+    switch (location2) {
+      case "left":
+        point = bounds.leftCenter;
+        break;
+      case "top":
+        point = bounds.topCenter;
+        break;
+      case "right":
+        point = bounds.rightCenter;
+        break;
+      case "bottom":
+        point = bounds.bottomCenter;
+        break;
     }
-    return bounds.rightCenter;
+    return {
+      x: point.x + offset.x,
+      y: point.y + offset.y,
+      location: location2
+    };
   }
   /**
-   * 点的区域
+   * 端口热区
    */
   get bounds() {
     const { point } = this;
-    const halfSize = PORT_SIZE / 2;
-    return new Rectangle3(point.x - halfSize, point.y - halfSize, PORT_SIZE, PORT_SIZE);
+    const size = this._size || { width: PORT_SIZE, height: PORT_SIZE };
+    return new Rectangle3(
+      point.x - size.width / 2,
+      point.y - size.height / 2,
+      size.width,
+      size.height
+    );
   }
   isHovered(x, y) {
     return this.bounds.contains(x, y);
@@ -211,7 +328,7 @@ var WorkflowPortEntity = class extends Entity {
    */
   get relativePosition() {
     const { point } = this;
-    const { bounds } = this.node.getData(TransformData3);
+    const { bounds } = this.node.getData(FlowNodeTransformData);
     return {
       x: point.x - bounds.x,
       y: point.y - bounds.y
@@ -242,10 +359,17 @@ var WorkflowPortEntity = class extends Entity {
   }
   /**
    * 当前点位上连接的线条
+   * @deprecated use `availableLines` instead
    */
   get lines() {
     return this.allLines.filter((line) => !line.isDrawing);
   }
+  /**
+   * 当前有效的线条，不包含正在画的线条和隐藏的线条（这个出现在线条重连会先把原来的线条隐藏）
+   */
+  get availableLines() {
+    return this.allLines.filter((line) => !line.isDrawing && !line.isHidden);
+  }
   /**
    * 当前点位上连接的线条（包含 isDrawing === true 的线条）
    */
@@ -261,6 +385,36 @@ var WorkflowPortEntity = class extends Entity {
     });
     return lines;
   }
+  update(data) {
+    let changed = false;
+    if (data.targetElement !== this.targetElement) {
+      this.targetElement = data.targetElement;
+      changed = true;
+    }
+    if (data.location !== this._location) {
+      this._location = data.location;
+      changed = true;
+    }
+    if (Compare.isChanged(data.offset, this._offset)) {
+      this._offset = data.offset;
+      changed = true;
+    }
+    if (Compare.isChanged(data.locationConfig, this._locationConfig)) {
+      this._locationConfig = data.locationConfig;
+      changed = true;
+    }
+    if (Compare.isChanged(data.size, this._size)) {
+      this._size = data.size;
+      changed = true;
+    }
+    if (data.disabled !== this._disabled) {
+      this._disabled = data.disabled;
+      changed = true;
+    }
+    if (changed) {
+      this.fireChange();
+    }
+  }
   dispose() {
     this.lines.forEach((l) => l.dispose());
     super.dispose();
@@ -299,17 +453,26 @@ var WorkflowNodePortsData = class extends EntityData {
     return {};
   }
   /**
-   * 更新静态的 ports 数据
+   * Update all ports data, includes static ports and dynamic ports
+   * @param ports
    */
-  updateStaticPorts(ports) {
+  updateAllPorts(ports) {
     const meta = this.entity.getNodeMeta();
-    this._staticPorts = ports;
+    if (ports) {
+      this._staticPorts = ports;
+    }
     if (meta.useDynamicPort) {
       this.updateDynamicPorts();
     } else {
       this.updatePorts(this._staticPorts);
     }
   }
+  /**
+   * @deprecated use `updateAllPorts` instead
+   */
+  updateStaticPorts(ports) {
+    this.updateAllPorts(ports);
+  }
   /**
    * 动态计算点位，通过 dom 的 data-port-key
    */
@@ -323,6 +486,7 @@ var WorkflowNodePortsData = class extends EntityData {
         ...Array.from(elements).map((element) => ({
           portID: element.getAttribute("data-port-id"),
           type: element.getAttribute("data-port-type"),
+          location: element.getAttribute("data-port-location"),
           targetElement: element
         }))
       );
@@ -358,7 +522,6 @@ var WorkflowNodePortsData = class extends EntityData {
       port.allLines.forEach((line) => {
         line.validate();
       });
-      port.validate();
     });
   }
   /**
@@ -449,9 +612,7 @@ var WorkflowNodePortsData = class extends EntityData {
    */
   updatePortEntity(portInfo) {
     const portEntity = this.getOrCreatePortEntity(portInfo);
-    if (portInfo.targetElement) {
-      portEntity.updateTargetElement(portInfo.targetElement);
-    }
+    portEntity.update(portInfo);
     return portEntity;
   }
 };
@@ -470,7 +631,7 @@ var _WorkflowNodeLinesData = class _WorkflowNodeLinesData extends EntityData2 {
   constructor(entity) {
     super(entity);
     this.entity = entity;
-    this.toDispose.push(
+    this.entity.preDispose.push(
       Disposable.create(() => {
         this.inputLines.slice().forEach((line) => line.dispose());
         this.outputLines.slice().forEach((line) => line.dispose());
@@ -489,6 +650,12 @@ var _WorkflowNodeLinesData = class _WorkflowNodeLinesData extends EntityData2 {
   get outputLines() {
     return this.data.outputLines;
   }
+  get allLines() {
+    return this.data.inputLines.concat(this.data.outputLines);
+  }
+  get availableLines() {
+    return this.allLines.filter((line) => !line.isDrawing && !line.isHidden);
+  }
   /**
    * 输入节点
    */
@@ -589,8 +756,8 @@ var WorkflowLineRenderData = class extends EntityData3 {
       version: "",
       contributions: /* @__PURE__ */ new Map(),
       position: {
-        from: { x: 0, y: 0 },
-        to: { x: 0, y: 0 }
+        from: { x: 0, y: 0, location: "right" },
+        to: { x: 0, y: 0, location: "left" }
       }
     };
   }
@@ -630,22 +797,27 @@ var WorkflowLineRenderData = class extends EntityData3 {
   get lineType() {
     return this.entity.renderType ?? this.entity.linesManager.lineType;
   }
+  /**
+   * 获取 center 位置
+   */
+  get center() {
+    return this.currentLine?.center || { x: 0, y: 0, labelX: 0, labelY: 0 };
+  }
   /**
    * 更新版本
    * WARNING: 这个方法，必须在 requestAnimationFrame / useLayoutEffect 中调用，否则会引起浏览器强制重排
    */
   updatePosition() {
-    this.data.position.from = this.entity.from.getData(WorkflowNodePortsData).getOutputPoint(this.entity.info.fromPort);
-    this.data.position.to = this.entity.info.drawingTo ?? this.entity.to?.getData(WorkflowNodePortsData)?.getInputPoint(this.entity.info.toPort) ?? {
-      x: this.data.position.from.x,
-      y: this.data.position.from.y
-    };
+    this.data.position.from = this.entity.drawingFrom || this.entity.fromPort.point;
+    this.data.position.to = this.entity.drawingTo || this.entity.toPort.point;
     this.data.version = [
       this.lineType,
       this.data.position.from.x,
       this.data.position.from.y,
+      this.data.position.from.location,
       this.data.position.to.x,
-      this.data.position.to.y
+      this.data.position.to.y,
+      this.data.position.to.location
     ].join("-");
   }
   get currentLine() {
@@ -675,8 +847,20 @@ var POINT_RADIUS = 10;
 var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   constructor(opts) {
     super(opts);
-    this._processing = false;
-    this._hasError = false;
+    this._onLineDataChangeEmitter = new Emitter2();
+    this.onLineDataChange = this._onLineDataChangeEmitter.event;
+    this._uiState = {
+      hasError: false,
+      flowing: false,
+      disabled: false,
+      hideArrow: false,
+      reverse: false,
+      shrink: 10,
+      curvature: 0.25,
+      highlightColor: "",
+      lockedColor: ""
+    };
+    this.stackIndex = 0;
     /**
      * 线条数据
      */
@@ -690,11 +874,22 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       to: opts.to,
       drawingTo: opts.drawingTo,
       fromPort: opts.fromPort,
-      toPort: opts.toPort
+      drawingFrom: opts.drawingFrom,
+      toPort: opts.toPort,
+      data: opts.data
     });
-    if (opts.drawingTo) {
+    if (opts.drawingTo || opts.drawingFrom) {
       this.isDrawing = true;
     }
+    this.onEntityChange(() => {
+      this.fromPort?.validate();
+      this.toPort?.validate();
+    });
+    this.onDispose(() => {
+      this.fromPort?.validate();
+      this.toPort?.validate();
+    });
+    this.toDispose.push(this._onLineDataChangeEmitter);
   }
   /**
    * 转成线条 id
@@ -704,6 +899,47 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     const { from, to, fromPort, toPort } = info;
     return `${from}_${fromPort || ""}-${to || ""}_${toPort || ""}`;
   }
+  /**
+   * 线条的 UI 状态
+   */
+  get uiState() {
+    return this._uiState;
+  }
+  /**
+   * 更新线条的 ui 状态
+   * @param newState
+   */
+  updateUIState(newState) {
+    let changed = false;
+    Object.keys(newState).forEach((key) => {
+      const value = newState[key];
+      if (this._uiState[key] !== value) {
+        this._uiState[key] = value;
+        changed = true;
+      }
+    });
+    if (changed) {
+      this.fireChange();
+    }
+  }
+  /**
+   * 线条的扩展数据
+   */
+  get lineData() {
+    return this._lineData;
+  }
+  /**
+   * 更新线条扩展数据
+   * @param data
+   */
+  set lineData(newValue) {
+    const oldValue = this._lineData;
+    if (!isEqual2(oldValue, newValue)) {
+      this._lineData = newValue;
+      this._onLineDataChangeEmitter.fire({ oldValue, newValue });
+      this.fireChange();
+    }
+  }
   /**
    * 获取线条的前置节点
    */
@@ -725,29 +961,27 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   }
   /**
    * 获取是否 testrun processing
+   * @deprecated  use `flowing` instead
    */
   get processing() {
-    return this._processing;
+    return this._uiState.flowing;
   }
   /**
    * 设置 testrun processing 状态
+   * @deprecated  use `flowing` instead
    */
   set processing(status) {
-    if (this._processing !== status) {
-      this._processing = status;
-      this.fireChange();
-    }
+    this.flowing = status;
   }
   // 获取连线是否为错误态
   get hasError() {
-    return this._hasError;
+    return this.uiState.hasError;
   }
   // 设置连线的错误态
   set hasError(hasError) {
-    if (this._hasError !== hasError) {
-      this._hasError = hasError;
-      this.fireChange();
-    }
+    this.updateUIState({
+      hasError
+    });
     if (this._node) {
       this._node.dataset.hasError = this.hasError ? "true" : "false";
     }
@@ -762,11 +996,11 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     if (this.toPort === toPort) {
       return;
     }
+    const prePort = this.toPort;
     if (toPort && toPort.portType === "input" && this.linesManager.canAddLine(this.fromPort, toPort, true)) {
       const { node, portID } = toPort;
       this._to = node;
       this.info.drawingTo = void 0;
-      this.info.isDefaultLine = false;
       this.info.to = node.id;
       this.info.toPort = portID;
     } else {
@@ -774,6 +1008,33 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       this.info.to = void 0;
       this.info.toPort = "";
     }
+    if (prePort) {
+      prePort.validate();
+    }
+    this.fireChange();
+  }
+  setFromPort(fromPort) {
+    if (!this.isDrawing) {
+      throw new Error("[setFromPort] only support drawing line.");
+    }
+    if (this.fromPort === fromPort) {
+      return;
+    }
+    const prePort = this.fromPort;
+    if (fromPort && fromPort.portType === "output" && this.linesManager.canAddLine(fromPort, this.toPort, true)) {
+      const { node, portID } = fromPort;
+      this._from = node;
+      this.info.drawingFrom = void 0;
+      this.info.from = node.id;
+      this.info.fromPort = portID;
+    } else {
+      this._from = void 0;
+      this.info.from = void 0;
+      this.info.fromPort = "";
+    }
+    if (prePort) {
+      prePort.validate();
+    }
     this.fireChange();
   }
   /**
@@ -788,11 +1049,26 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     }
     if (!oldDrawingTo || pos.x !== oldDrawingTo.x || pos.y !== oldDrawingTo.y) {
       this.info.to = void 0;
-      this.info.isDefaultLine = false;
       this.info.drawingTo = pos;
       this.fireChange();
     }
   }
+  set drawingFrom(pos) {
+    const oldDrawingFrom = this.info.drawingFrom;
+    if (!pos) {
+      this.info.drawingFrom = void 0;
+      this.fireChange();
+      return;
+    }
+    if (!oldDrawingFrom || pos.x !== oldDrawingFrom.x || pos.y !== oldDrawingFrom.y) {
+      this.info.from = void 0;
+      this.info.drawingFrom = pos;
+      this.fireChange();
+    }
+  }
+  get drawingFrom() {
+    return this.info.drawingFrom;
+  }
   /**
    * 获取线条正在画线的位置
    */
@@ -800,13 +1076,20 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     return this.info.drawingTo;
   }
   get highlightColor() {
-    return this.info.highlightColor || "";
+    return this.uiState.highlightColor || "";
   }
-  set highlightColor(color) {
-    if (this.info.highlightColor !== color) {
-      this.info.highlightColor = color;
-      this.fireChange();
-    }
+  set highlightColor(highlightColor) {
+    this.updateUIState({
+      highlightColor
+    });
+  }
+  get lockedColor() {
+    return this.uiState.lockedColor;
+  }
+  set lockedColor(lockedColor) {
+    this.updateUIState({
+      lockedColor
+    });
   }
   /**
    * 获取线条的边框位置大小
@@ -814,6 +1097,9 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   get bounds() {
     return this.getData(WorkflowLineRenderData).bounds;
   }
+  get center() {
+    return this.getData(WorkflowLineRenderData).center;
+  }
   /**
    * 获取点和线最接近的距离
    */
@@ -821,13 +1107,16 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     return this.getData(WorkflowLineRenderData).calcDistance(pos);
   }
   get fromPort() {
-    return this.from.getData(WorkflowNodePortsData).getPortEntityByKey("output", this.info.fromPort);
+    if (!this.from) {
+      return void 0;
+    }
+    return this.from.ports.getPortEntityByKey("output", this.info.fromPort);
   }
   get toPort() {
     if (!this.to) {
       return void 0;
     }
-    return this.to.getData(WorkflowNodePortsData).getPortEntityByKey("input", this.info.toPort);
+    return this.to.ports.getPortEntityByKey("input", this.info.toPort);
   }
   /**
    * 获取线条真实的输入输出节点坐标
@@ -837,23 +1126,37 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   }
   /** 是否反转箭头 */
   get reverse() {
-    return this.linesManager.isReverseLine(this);
+    return this.linesManager.isReverseLine(this, this.uiState.reverse);
   }
   /** 是否隐藏箭头 */
   get hideArrow() {
-    return this.linesManager.isHideArrowLine(this);
+    return this.linesManager.isHideArrowLine(this, this.uiState.hideArrow);
   }
   /** 是否流动 */
   get flowing() {
-    return this.linesManager.isFlowingLine(this);
+    return this.linesManager.isFlowingLine(this, this.uiState.flowing);
+  }
+  set flowing(flowing) {
+    if (this._uiState.flowing !== flowing) {
+      this._uiState.flowing = flowing;
+      this.fireChange();
+    }
   }
   /** 是否禁用 */
   get disabled() {
-    return this.linesManager.isDisabledLine(this);
+    return this.linesManager.isDisabledLine(this, this.uiState.disabled);
   }
-  /** 是否竖向 */
+  /**
+   * @deprecated
+   */
   get vertical() {
-    return this.linesManager.isVerticalLine(this);
+    const fromLocation = this.fromPort?.location;
+    const toLocation = this.toPort?.location;
+    if (toLocation) {
+      return toLocation === "top";
+    } else {
+      return fromLocation === "bottom";
+    }
   }
   /** 获取线条渲染器类型 */
   get renderType() {
@@ -861,7 +1164,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   }
   /** 获取线条样式 */
   get className() {
-    return this.linesManager.setLineClassName(this) ?? "";
+    return [this.linesManager.setLineClassName(this), this._uiState.className].filter((s) => !!s).join(" ");
   }
   get color() {
     return this.linesManager.getLineColor(this);
@@ -873,22 +1176,24 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   initInfo(info) {
     if (!isEqual2(info, this.info)) {
       this.info = info;
-      this._from = this.document.getNode(info.from);
+      this._from = info.from ? this.document.getNode(info.from) : void 0;
       this._to = info.to ? this.document.getNode(info.to) : void 0;
+      this._lineData = info.data;
       this.fireChange();
     }
   }
   // 校验连线是否为错误态
   validate() {
-    const { fromPort, toPort } = this;
     this.validateSelf();
-    fromPort?.validate();
-    toPort?.validate();
   }
+  /**
+   * use `validate` instead
+   * @deprecated
+   */
   validateSelf() {
     const { fromPort, toPort } = this;
     if (fromPort) {
-      this.hasError = this.linesManager.isErrorLine(fromPort, toPort);
+      this.hasError = this.linesManager.isErrorLine(fromPort, toPort, this.uiState.hasError);
     }
   }
   is(line) {
@@ -905,7 +1210,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     this._node = domUtils.createDivWithClass("gedit-flow-activity-line");
     this._node.dataset.testid = "sdk.workflow.canvas.line";
     this._node.dataset.lineId = this.id;
-    this._node.dataset.fromNodeId = this.from.id;
+    this._node.dataset.fromNodeId = this.from?.id ?? "";
     this._node.dataset.fromPortId = this.fromPort?.id ?? "";
     this._node.dataset.toNodeId = this.to?.id ?? "";
     this._node.dataset.toPortId = this.toPort?.id ?? "";
@@ -919,6 +1224,9 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       sourcePortID: this.info.fromPort,
       targetPortID: this.info.toPort
     };
+    if (this._lineData !== void 0) {
+      json.data = this._lineData;
+    }
     if (!json.sourcePortID) {
       delete json.sourcePortID;
     }
@@ -1031,12 +1339,14 @@ WorkflowSelectService = __decorateClass([
 
 // src/service/workflow-hover-service.ts
 import { inject as inject2, injectable as injectable2 } from "inversify";
+import { Emitter as Emitter3 } from "@flowgram.ai/utils";
 import { EntityManager } from "@flowgram.ai/core";
-import { Emitter as Emitter2 } from "@flowgram.ai/utils";
 var WorkflowHoverService = class {
   constructor() {
-    this.onHoveredChangeEmitter = new Emitter2();
+    this.onHoveredChangeEmitter = new Emitter3();
+    this.onUpdateHoverPositionEmitter = new Emitter3();
     this.onHoveredChange = this.onHoveredChangeEmitter.event;
+    this.onUpdateHoverPosition = this.onUpdateHoverPositionEmitter.event;
     // 当前鼠标 hover 位置
     this.hoveredPos = { x: 0, y: 0 };
     /**
@@ -1056,6 +1366,13 @@ var WorkflowHoverService = class {
       this.onHoveredChangeEmitter.fire(hoveredKey);
     }
   }
+  updateHoverPosition(position, target) {
+    this.hoveredPos = position;
+    this.onUpdateHoverPositionEmitter.fire({
+      position,
+      target
+    });
+  }
   /**
    * 清空 hover 内容
    */
@@ -1075,10 +1392,17 @@ var WorkflowHoverService = class {
   }
   /**
    * 获取被 hover 的节点或线条
+   * @deprecated use 'someHovered' instead
    */
   get hoveredNode() {
     return this.entityManager.getEntityById(this.hoveredKey);
   }
+  /**
+   * 获取被 hover 的节点或线条
+   */
+  get someHovered() {
+    return this.entityManager.getEntityById(this.hoveredKey);
+  }
 };
 __decorateClass([
   inject2(EntityManager)
@@ -1093,33 +1417,32 @@ import { inject as inject6, injectable as injectable6, postConstruct as postCons
 import {
   domUtils as domUtils2,
   PromiseDeferred,
-  Emitter as Emitter5,
+  Emitter as Emitter6,
   DisposableCollection as DisposableCollection2,
   Rectangle as Rectangle8,
-  delay as delay2
+  delay as delay2,
+  Point
 } from "@flowgram.ai/utils";
-import {
-  FlowNodeTransformData as FlowNodeTransformData5,
-  FlowOperationBaseService
-} from "@flowgram.ai/document";
-import { FlowNodeBaseType as FlowNodeBaseType2 } from "@flowgram.ai/document";
+import { FlowNodeTransformData as FlowNodeTransformData6 } from "@flowgram.ai/document";
+import { FlowNodeBaseType as FlowNodeBaseType3 } from "@flowgram.ai/document";
 import {
   CommandService,
+  MouseTouchEvent,
   PlaygroundConfigEntity as PlaygroundConfigEntity5,
   PlaygroundDrag,
-  TransformData as TransformData9
+  TransformData as TransformData8
 } from "@flowgram.ai/core";
 
 // src/workflow-lines-manager.ts
 import { last } from "lodash-es";
 import { inject as inject3, injectable as injectable3 } from "inversify";
-import { Disposable as Disposable2, DisposableCollection, Emitter as Emitter3 } from "@flowgram.ai/utils";
-import { FlowNodeTransformData as FlowNodeTransformData2 } from "@flowgram.ai/document";
-import { EntityManager as EntityManager2, PlaygroundConfigEntity as PlaygroundConfigEntity2, TransformData as TransformData6 } from "@flowgram.ai/core";
+import { DisposableCollection, Emitter as Emitter4 } from "@flowgram.ai/utils";
+import { FlowNodeRenderData as FlowNodeRenderData2, FlowNodeTransformData as FlowNodeTransformData3 } from "@flowgram.ai/document";
+import { EntityManager as EntityManager2, PlaygroundConfigEntity as PlaygroundConfigEntity2 } from "@flowgram.ai/core";
 
 // src/workflow-document-option.ts
 import { FlowNodeErrorData } from "@flowgram.ai/form-core";
-import { FlowNodeTransformData } from "@flowgram.ai/document";
+import { FlowNodeTransformData as FlowNodeTransformData2 } from "@flowgram.ai/document";
 import { TransformData as TransformData5 } from "@flowgram.ai/core";
 
 // src/utils/flow-node-form-data.ts
@@ -1132,31 +1455,36 @@ function toFormJSON(node) {
   if (!formData || !node.getNodeRegistry().formMeta) return void 0;
   return formData.toJSON();
 }
-function initFormDataFromJSON(node, json) {
+function initFormDataFromJSON(node, json, isFirstCreate) {
   const formData = node.getData(FlowNodeFormData);
   const registry = node.getNodeRegistry();
   const { formMeta } = registry;
   if (formData && formMeta) {
-    formData.createForm(formMeta, json.data);
-    formData.onDataChange(() => {
-      node.document.fireContentChange({
-        type: "NODE_DATA_CHANGE" /* NODE_DATA_CHANGE */,
-        toJSON: () => formData.toJSON(),
-        entity: node
+    if (isFirstCreate) {
+      formData.createForm(formMeta, json.data);
+      formData.onDataChange(() => {
+        node.document.fireContentChange({
+          type: "NODE_DATA_CHANGE" /* NODE_DATA_CHANGE */,
+          toJSON: () => formData.toJSON(),
+          entity: node
+        });
       });
-    });
+    } else {
+      formData.updateFormValues(json.data);
+    }
   }
 }
 
 // src/workflow-document-option.ts
 var WorkflowDocumentOptions = Symbol("WorkflowDocumentOptions");
 var WorkflowDocumentOptionsDefault = {
-  cursors: {
-    grab: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC40ODczIDIuNjIzNzhDOS45MDczMSAyLjYyMzc4IDkuNDM3MTMgMy4wOTM5NiA5LjQzNzEzIDMuNjczOTZWNS4xNDM3NkM5LjM5NDI4IDQuNDAyNzQgOC43Nzk3OCAzLjgxNTA0IDguMDI4MDIgMy44MTUwNEM3LjI0ODQ4IDMuODE1MDQgNi42MTY1MyA0LjQ0Njk5IDYuNjE2NTMgNS4yMjY1M1YxMS44Mjg5TDUuNjc0MTggMTEuMDA0OUM1LjE1NDg3IDEwLjU1MDkgNC40MDk1IDEwLjQ2MzYgMy43OTkzOCAxMC43ODU1TDMuNjk2OTQgMTAuODM5NkMzLjA2MjE3IDExLjE3NDUgMi45MjI2IDEyLjAyMjggMy40MTY2MiAxMi41NDM0TDcuMzM5NTkgMTYuNjc3NVYxNy4zMjU5QzcuMzM5NTkgMTcuNzg2MiA3LjcxMjY5IDE4LjE1OTMgOC4xNzI5MiAxOC4xNTkzSDEzLjgwODRDMTQuMjY4NyAxOC4xNTkzIDE0LjY0MTcgMTcuNzg2MiAxNC42NDE3IDE3LjMyNTlWMTYuNzkzNUMxNS44MDk0IDE1LjY0ODUgMTYuNDY3MyAxNC4wODE5IDE2LjQ2NzMgMTIuNDQ2NVYxMS40OTY3TDE2LjQ2NzEgNi42MzY4NUMxNi40NjcxIDUuOTU2MyAxNS45MTU0IDUuNDA0NjEgMTUuMjM0OCA1LjQwNDYxQzE0LjU1NDMgNS40MDQ2MSAxNC4wMDI2IDUuOTU2MyAxNC4wMDI2IDYuNjM2ODVMMTQuMDAyMSA1LjA0NzI4QzE0LjAwMjEgNC4zNjY3MyAxMy40NTA0IDMuODE1MDQgMTIuNzY5OCAzLjgxNTA0QzEyLjA4OTMgMy44MTUwNCAxMS41Mzc2IDQuMzY2NzMgMTEuNTM3NiA1LjA0NzI4TDExLjUzNzUgMy42NzM5NUMxMS41Mzc1IDMuMDkzOTYgMTEuMDY3MyAyLjYyMzc4IDEwLjQ4NzMgMi42MjM3OFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDg3NCAxLjM3NDAyQzExLjM2MTIgMS4zNzQwMiAxMi4xMjExIDEuODYxMTggMTIuNTEwNSAyLjU3ODY4QzEyLjU5NTggMi41Njk4MyAxMi42ODIzIDIuNTY1MjggMTIuNzcgMi41NjUyOEMxMy44Mjc4IDIuNTY1MjggMTQuNzMxMSAzLjIyNzAxIDE1LjA4ODUgNC4xNTkxMUMxNS4xMzcgNC4xNTYyOSAxNS4xODU4IDQuMTU0ODYgMTUuMjM1IDQuMTU0ODZDMTYuNjA1OSA0LjE1NDg2IDE3LjcxNzIgNS4yNjYxOSAxNy43MTcyIDYuNjM3MDlMMTcuNzE3NCAxMi40NDY3QzE3LjcxNzQgMTQuMjM1NSAxNy4wNjQ0IDE1Ljk1NTkgMTUuODkxOSAxNy4yOTA0VjE3LjMyNjJDMTUuODkxOSAxOC40NzY4IDE0Ljk1OTEgMTkuNDA5NSAxMy44MDg1IDE5LjQwOTVIOC4xNzMwNkM3LjAyMjQ3IDE5LjQwOTUgNi4wODk3MyAxOC40NzY4IDYuMDg5NzMgMTcuMzI2MlYxNy4xNzY0TDIuNTEwMDMgMTMuNDA0MUMxLjQ0NTk5IDEyLjI4MjggMS43NDY2IDEwLjQ1NTUgMy4xMTM3OSA5LjczNDI0TDMuMjE2MjQgOS42ODAxOUMzLjg5MTY4IDkuMzIzODMgNC42NjE4NSA5LjI1NDAxIDUuMzY2NjYgOS40NTE5OFY1LjIyNjc4QzUuMzY2NjYgMy43NTY4NyA2LjU1ODI2IDIuNTY1MjggOC4wMjgxNiAyLjU2NTI4QzguMTcyOTMgMi41NjUyOCA4LjMxNDk5IDIuNTc2ODQgOC40NTM0NyAyLjU5OTA3QzguODM5NDMgMS44NzA0MiA5LjYwNTQ2IDEuMzc0MDIgMTAuNDg3NCAxLjM3NDAyWk0xMi40NDc2IDMuODU3ODdWOS40NzY0NkMxMi40NDc2IDkuNzI4NTIgMTIuMjQzMyA5LjkzMjg1IDExLjk5MTMgOS45MzI4NUMxMS43MzkyIDkuOTMyODUgMTEuNTM0OSA5LjcyODUyIDExLjUzNDkgOS40NzY0NlYzLjc5NjU1QzExLjUzNDkgMy43Nzk1NiAxMS41MzU4IDMuNzYyNzcgMTEuNTM3NiAzLjc0NjI2VjMuNjc0MkMxMS41Mzc2IDMuNDMyODIgMTEuNDU2MiAzLjIxMDQ2IDExLjMxOTMgMy4wMzMwOUMxMS4xMjcyIDIuNzg0MjggMTAuODI2MSAyLjYyNDAyIDEwLjQ4NzQgMi42MjQwMkMxMC4xMjM4IDIuNjI0MDIgOS44MDMzMiAyLjgwODg2IDkuNjE0ODMgMy4wODk3QzkuNTAyNjkgMy4yNTY3OSA5LjQzNzI2IDMuNDU3ODUgOS40MzcyNiAzLjY3NDJWMy43ODU3M0M5LjQzNzM1IDMuNzg5MzMgOS40MzczOSAzLjc5Mjk0IDkuNDM3MzkgMy43OTY1NVY5LjkwMTdDOS40MzczOSAxMC4xNTM3IDkuMjMzMDYgMTAuMzU4MSA4Ljk4MTAxIDEwLjM1ODFDOC43Mjg5NSAxMC4zNTgxIDguNTI0NjIgMTAuMTUzNyA4LjUyNDYyIDkuOTAxN1YzLjkwNTA3QzguNDE3NzMgMy44NjQ5IDguMzA0NjggMy44MzczMiA4LjE4NzI2IDMuODI0MTVDOC4xMzUwNCAzLjgxODI5IDguMDgxOTUgMy44MTUyOCA4LjAyODE2IDMuODE1MjhDNy4yNDg2MSAzLjgxNTI4IDYuNjE2NjYgNC40NDcyMyA2LjYxNjY2IDUuMjI2NzhWMTEuODI5Mkw1LjY3NDMxIDExLjAwNTJDNS41Nzg2OCAxMC45MjE2IDUuNDc1MzcgMTAuODUwNCA1LjM2NjY2IDEwLjc5MTlDNC44ODUwNiAxMC41MzI5IDQuMjk3MjggMTAuNTIzMSAzLjc5OTUyIDEwLjc4NThMMy42OTcwNyAxMC44Mzk4QzMuMDYyMzEgMTEuMTc0NyAyLjkyMjczIDEyLjAyMzEgMy40MTY3NSAxMi41NDM3TDcuMzM5NzMgMTYuNjc3N1YxNy4zMjYyQzcuMzM5NzMgMTcuNzg2NCA3LjcxMjgyIDE4LjE1OTUgOC4xNzMwNiAxOC4xNTk1SDEzLjgwODVDMTQuMjY4OCAxOC4xNTk1IDE0LjY0MTkgMTcuNzg2NCAxNC42NDE5IDE3LjMyNjJWMTYuNzkzOEMxNS43Mzc5IDE1LjcxOSAxNi4zODQ3IDE0LjI3MjggMTYuNDYgMTIuNzQ3QzE2LjQ2NDEgMTIuNjY0MSAxNi40NjY1IDEyLjU4MDkgMTYuNDY3MiAxMi40OTc1TDE2LjQ2NzQgMTIuNDQ2N0wxNi40NjcyIDYuNjM3MDlDMTYuNDY3MiA1Ljk2MjMgMTUuOTI0OCA1LjQxNDE5IDE1LjI1MjIgNS40MDQ5N0wxNS4yMzUgNS40MDQ4NkMxNS4xMjQ2IDUuNDA0ODYgMTUuMDE3NyA1LjQxOTM2IDE0LjkxNTkgNS40NDY1NlY5LjYwMjI2QzE0LjkxNTkgOS44NTQzMSAxNC43MTE2IDEwLjA1ODYgMTQuNDU5NSAxMC4wNTg2QzE0LjIwNzUgMTAuMDU4NiAxNC4wMDMxIDkuODU0MzEgMTQuMDAzMSA5LjYwMjI2VjYuNjA1MTRDMTQuMDAyOSA2LjYxNTc2IDE0LjAwMjcgNi42MjY0MSAxNC4wMDI3IDYuNjM3MDlWOS4yNzcwNUwxNC4wMDIyIDUuMDQ3NTJDMTQuMDAyMiA0Ljg2OTEzIDEzLjk2NDMgNC42OTk2IDEzLjg5NjEgNC41NDY1M0MxMy43MDY0IDQuMTIwNzIgMTMuMjgyMiAzLjgyMjM1IDEyLjc4NzYgMy44MTU0MUwxMi43NyAzLjgxNTI4QzEyLjY1ODQgMy44MTUyOCAxMi41NTA0IDMuODMwMSAxMi40NDc2IDMuODU3ODdaIiBmaWxsPSIjMUQxQzIzIi8+Cjwvc3ZnPg=="), auto',
-    grabbing: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjYxODE3IDUuNTk4NzVDNi42MTgxNyA0LjgxOTIgNy4yNTAxMiA0LjE4NzI2IDguMDI5NjcgNC4xODcyNkM4Ljc3ODczIDQuMTg3MjYgOS4zOTE1MiA0Ljc3MDc1IDkuNDM4MjkgNS41MDgwMUM5LjQ1OTkyIDQuOTQ3MSA5LjkyMTQ3IDQuNDk5MDIgMTAuNDg3NyA0LjQ5OTAyQzExLjA2NzcgNC40OTkwMiAxMS41Mzc4IDQuOTY5MiAxMS41Mzc4IDUuNTQ5MTlWOC43NjI0NkwxMS41Mzc5IDYuNzExNUMxMS41Mzc5IDYuMDMwOTUgMTIuMDg5NiA1LjQ3OTI2IDEyLjc3MDIgNS40NzkyNkMxMy40NTA3IDUuNDc5MjYgMTQuMDAyNCA2LjAzMDk1IDE0LjAwMjQgNi43MTE1TDE0LjAwMjQgOC43NjI0NkwxNC4wMDI5IDguMDE5ODNDMTQuMDAyOSA3LjMzOTI5IDE0LjU1NDYgNi43ODc1OSAxNS4yMzUyIDYuNzg3NTlDMTUuOTE1NyA2Ljc4NzU5IDE2LjQ2NzQgNy4zMzkyOCAxNi40Njc0IDguMDE5ODNWMTEuNDk3TDE2LjQ2NzUgMTIuNDQ2N0MxNi40Njc1IDE0LjA4MjEgMTUuODA5NiAxNS42NDg3IDE0LjY0MiAxNi43OTM4VjE3LjMyNjJDMTQuNjQyIDE3Ljc4NjQgMTQuMjY4OSAxOC4xNTk1IDEzLjgwODcgMTguMTU5NUg4LjE3MzE3QzcuNzEyOTMgMTguMTU5NSA3LjMzOTg0IDE3Ljc4NjQgNy4zMzk4NCAxNy4zMjYyVjE1Ljk0MjRMNS4zNDU2MiAxNC43NTM0QzQuNTg5MjQgMTQuMzAyNCA0LjEyNTkxIDEzLjQ4NjcgNC4xMjU4OSAxMi42MDYxTDQuMTI1ODMgOS4yODM4M0M0LjEyNTgyIDguOTU0MjcgNC4zMjAwMyA4LjY1NTY2IDQuNjIxMjkgOC41MjIwNUw2LjYxODE3IDcuNjM2MzRWNS41OTg3NVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDg3OCAzLjI0OTAyQzExLjI3OTYgMy4yNDkwMiAxMS45Nzc4IDMuNjQ5MDIgMTIuMzkxNyA0LjI1Nzk2QzEyLjUxNTEgNC4yMzkwNiAxMi42NDE2IDQuMjI5MjYgMTIuNzcwMyA0LjIyOTI2QzEzLjcyMjQgNC4yMjkyNiAxNC41NDkzIDQuNzY1MzEgMTQuOTY1NyA1LjU1MjA3QzE1LjA1NDMgNS41NDI1IDE1LjE0NDIgNS41Mzc1OSAxNS4yMzUzIDUuNTM3NTlDMTYuNjA2MiA1LjUzNzU5IDE3LjcxNzYgNi42NDg5MyAxNy43MTc2IDguMDE5ODNMMTcuNzE3NyAxMi40NDY3QzE3LjcxNzcgMTQuMjM1NSAxNy4wNjQ3IDE1Ljk1NTkgMTUuODkyMSAxNy4yOTA0VjE3LjMyNjJDMTUuODkyMSAxOC40NzY4IDE0Ljk1OTQgMTkuNDA5NSAxMy44MDg4IDE5LjQwOTVIOC4xNzMzMkM3LjAyMjczIDE5LjQwOTUgNi4wODk5OCAxOC40NzY4IDYuMDg5OTggMTcuMzI2MlYxNi42NTI0TDQuNzA1NjMgMTUuODI3QzMuNTcxMDYgMTUuMTUwNSAyLjg3NjA3IDEzLjkyNzEgMi44NzYwNCAxMi42MDYxTDIuODc1OTggOS4yODM4NUMyLjg3NTk2IDguNDU5OTYgMy4zNjE0OSA3LjcxMzQ1IDQuMTE0NjIgNy4zNzk0TDUuMzY4MzIgNi44MjMzM1Y1LjU5ODc1QzUuMzY4MzIgNC4xMjg4NSA2LjU1OTkxIDIuOTM3MjYgOC4wMjk4MiAyLjkzNzI2QzguNjA4MzEgMi45MzcyNiA5LjE0MzU1IDMuMTIxNyA5LjU4MDA1IDMuNDM1MDVDOS44NTg1MyAzLjMxNTMyIDEwLjE2NTQgMy4yNDkwMiAxMC40ODc4IDMuMjQ5MDJaTTEyLjQ0NzkgNS41MjE4NlY5LjQ3NTU3QzEyLjQ0NzkgOS43Mjc2MiAxMi4yNDM2IDkuOTMxOTUgMTEuOTkxNiA5LjkzMTk1QzExLjc1NjggOS45MzE5NSAxMS41NjM0IDkuNzU0NjUgMTEuNTM4IDkuNTI2NjNDMTEuNTM2MSA5LjUwOTg3IDExLjUzNTIgOS40OTI4MyAxMS41MzUyIDkuNDc1NTdWNS40NzE1OEMxMS41MTU0IDUuMjAwODMgMTEuMzkzIDQuOTU4NTggMTEuMjA2NiA0Ljc4MzU4QzExLjAxODggNC42MDcxMSAxMC43NjU5IDQuNDk5MDIgMTAuNDg3OCA0LjQ5OTAyQzEwLjQ3NjYgNC40OTkwMiAxMC40NjU0IDQuNDk5MTkgMTAuNDU0MiA0LjQ5OTU0QzkuOTAzNDcgNC41MTY4NCA5LjQ1OTY0IDQuOTU4MjQgOS40Mzg0NCA1LjUwODAxQzkuNDM4MiA1LjUwNDMgOS40Mzc5NSA1LjUwMDU4IDkuNDM3NjkgNS40OTY4OFY5LjkwMjQzQzkuNDM3NjkgMTAuMTU0NSA5LjIzMzM2IDEwLjM1ODggOC45ODEzMSAxMC4zNTg4QzguNzI5MjUgMTAuMzU4OCA4LjUyNDkyIDEwLjE1NDUgOC41MjQ5MiA5LjkwMjQzVjQuMjc2NTNDOC4zNzA4NiA0LjIxODgyIDguMjA0MDIgNC4xODcyNiA4LjAyOTgyIDQuMTg3MjZDNy4yNTAyNyA0LjE4NzI2IDYuNjE4MzIgNC44MTkyIDYuNjE4MzIgNS41OTg3NUw2LjYxODI3IDkuOTc1OTlDNi42MTgyNyAxMC4yMjggNi40MTM5NCAxMC40MzI0IDYuMTYxODkgMTAuNDMyNEM1LjkwOTgzIDEwLjQzMjQgNS43MDU1IDEwLjIyOCA1LjcwNTUgOS45NzU5OVY4LjA0MTIyTDQuNjIxNDQgOC41MjIwNUM0LjMyMDE4IDguNjU1NjYgNC4xMjU5NyA4Ljk1NDI3IDQuMTI1OTggOS4yODM4M0w0LjEyNjA0IDEyLjYwNjFDNC4xMjYwNiAxMy40ODY3IDQuNTg5MzkgMTQuMzAyNCA1LjM0NTc2IDE0Ljc1MzRMNy4zMzk5OCAxNS45NDI0VjE3LjMyNjJDNy4zMzk5OCAxNy43ODY0IDcuNzEzMDggMTguMTU5NSA4LjE3MzMyIDE4LjE1OTVIMTMuODA4OEMxNC4yNjkgMTguMTU5NSAxNC42NDIxIDE3Ljc4NjQgMTQuNjQyMSAxNy4zMjYyVjE2Ljc5MzhDMTUuNzM4MSAxNS43MTkgMTYuMzg1IDE0LjI3MjggMTYuNDYwMyAxMi43NDdDMTYuNDY0NiAxMi42NiAxNi40NjcgMTIuNTcyOCAxNi40Njc2IDEyLjQ4NTRMMTYuNDY3NyAxMi40NDY3TDE2LjQ2NzYgOC4wMTk4M0MxNi40Njc2IDcuMzQ1MDQgMTUuOTI1MiA2Ljc5NjkzIDE1LjI1MjUgNi43ODc3MUwxNS4yMzUzIDYuNzg3NTlDMTUuMTI1IDYuNzg3NTkgMTUuMDE4IDYuODAyMSAxNC45MTYyIDYuODI5MzFWOS42MDEzNkMxNC45MTYyIDkuODUzNDIgMTQuNzExOSAxMC4wNTc3IDE0LjQ1OTggMTAuMDU3N0MxNC4yMDc4IDEwLjA1NzcgMTQuMDAzNCA5Ljg1MzQxIDE0LjAwMzQgOS42MDEzNlY3Ljk4OTg1QzE0LjAwMzIgNy45OTk4MiAxNC4wMDMxIDguMDA5ODEgMTQuMDAzMSA4LjAxOTgzTDE0LjAwMzQgOS42MDEzNkwxNC4wMDI1IDYuNzExNUMxNC4wMDI1IDYuNDQ5NzQgMTMuOTIwOSA2LjIwNzA1IDEzLjc4MTggNi4wMDc0OEMxMy41NjIgNS42OTI0MiAxMy4xOTg5IDUuNDg0ODMgMTIuNzg3IDUuNDc5MzdMMTIuNzcwMyA1LjQ3OTI2QzEyLjY1ODggNS40NzkyNiAxMi41NTA3IDUuNDk0MDggMTIuNDQ3OSA1LjUyMTg2WiIgZmlsbD0iIzFEMUMyMyIvPgo8L3N2Zz4="), auto'
-  },
-  fromNodeJSON(node, json) {
-    initFormDataFromJSON(node, json);
+  // cursors: {
+  //   grab: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMC40ODczIDIuNjIzNzhDOS45MDczMSAyLjYyMzc4IDkuNDM3MTMgMy4wOTM5NiA5LjQzNzEzIDMuNjczOTZWNS4xNDM3NkM5LjM5NDI4IDQuNDAyNzQgOC43Nzk3OCAzLjgxNTA0IDguMDI4MDIgMy44MTUwNEM3LjI0ODQ4IDMuODE1MDQgNi42MTY1MyA0LjQ0Njk5IDYuNjE2NTMgNS4yMjY1M1YxMS44Mjg5TDUuNjc0MTggMTEuMDA0OUM1LjE1NDg3IDEwLjU1MDkgNC40MDk1IDEwLjQ2MzYgMy43OTkzOCAxMC43ODU1TDMuNjk2OTQgMTAuODM5NkMzLjA2MjE3IDExLjE3NDUgMi45MjI2IDEyLjAyMjggMy40MTY2MiAxMi41NDM0TDcuMzM5NTkgMTYuNjc3NVYxNy4zMjU5QzcuMzM5NTkgMTcuNzg2MiA3LjcxMjY5IDE4LjE1OTMgOC4xNzI5MiAxOC4xNTkzSDEzLjgwODRDMTQuMjY4NyAxOC4xNTkzIDE0LjY0MTcgMTcuNzg2MiAxNC42NDE3IDE3LjMyNTlWMTYuNzkzNUMxNS44MDk0IDE1LjY0ODUgMTYuNDY3MyAxNC4wODE5IDE2LjQ2NzMgMTIuNDQ2NVYxMS40OTY3TDE2LjQ2NzEgNi42MzY4NUMxNi40NjcxIDUuOTU2MyAxNS45MTU0IDUuNDA0NjEgMTUuMjM0OCA1LjQwNDYxQzE0LjU1NDMgNS40MDQ2MSAxNC4wMDI2IDUuOTU2MyAxNC4wMDI2IDYuNjM2ODVMMTQuMDAyMSA1LjA0NzI4QzE0LjAwMjEgNC4zNjY3MyAxMy40NTA0IDMuODE1MDQgMTIuNzY5OCAzLjgxNTA0QzEyLjA4OTMgMy44MTUwNCAxMS41Mzc2IDQuMzY2NzMgMTEuNTM3NiA1LjA0NzI4TDExLjUzNzUgMy42NzM5NUMxMS41Mzc1IDMuMDkzOTYgMTEuMDY3MyAyLjYyMzc4IDEwLjQ4NzMgMi42MjM3OFoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDg3NCAxLjM3NDAyQzExLjM2MTIgMS4zNzQwMiAxMi4xMjExIDEuODYxMTggMTIuNTEwNSAyLjU3ODY4QzEyLjU5NTggMi41Njk4MyAxMi42ODIzIDIuNTY1MjggMTIuNzcgMi41NjUyOEMxMy44Mjc4IDIuNTY1MjggMTQuNzMxMSAzLjIyNzAxIDE1LjA4ODUgNC4xNTkxMUMxNS4xMzcgNC4xNTYyOSAxNS4xODU4IDQuMTU0ODYgMTUuMjM1IDQuMTU0ODZDMTYuNjA1OSA0LjE1NDg2IDE3LjcxNzIgNS4yNjYxOSAxNy43MTcyIDYuNjM3MDlMMTcuNzE3NCAxMi40NDY3QzE3LjcxNzQgMTQuMjM1NSAxNy4wNjQ0IDE1Ljk1NTkgMTUuODkxOSAxNy4yOTA0VjE3LjMyNjJDMTUuODkxOSAxOC40NzY4IDE0Ljk1OTEgMTkuNDA5NSAxMy44MDg1IDE5LjQwOTVIOC4xNzMwNkM3LjAyMjQ3IDE5LjQwOTUgNi4wODk3MyAxOC40NzY4IDYuMDg5NzMgMTcuMzI2MlYxNy4xNzY0TDIuNTEwMDMgMTMuNDA0MUMxLjQ0NTk5IDEyLjI4MjggMS43NDY2IDEwLjQ1NTUgMy4xMTM3OSA5LjczNDI0TDMuMjE2MjQgOS42ODAxOUMzLjg5MTY4IDkuMzIzODMgNC42NjE4NSA5LjI1NDAxIDUuMzY2NjYgOS40NTE5OFY1LjIyNjc4QzUuMzY2NjYgMy43NTY4NyA2LjU1ODI2IDIuNTY1MjggOC4wMjgxNiAyLjU2NTI4QzguMTcyOTMgMi41NjUyOCA4LjMxNDk5IDIuNTc2ODQgOC40NTM0NyAyLjU5OTA3QzguODM5NDMgMS44NzA0MiA5LjYwNTQ2IDEuMzc0MDIgMTAuNDg3NCAxLjM3NDAyWk0xMi40NDc2IDMuODU3ODdWOS40NzY0NkMxMi40NDc2IDkuNzI4NTIgMTIuMjQzMyA5LjkzMjg1IDExLjk5MTMgOS45MzI4NUMxMS43MzkyIDkuOTMyODUgMTEuNTM0OSA5LjcyODUyIDExLjUzNDkgOS40NzY0NlYzLjc5NjU1QzExLjUzNDkgMy43Nzk1NiAxMS41MzU4IDMuNzYyNzcgMTEuNTM3NiAzLjc0NjI2VjMuNjc0MkMxMS41Mzc2IDMuNDMyODIgMTEuNDU2MiAzLjIxMDQ2IDExLjMxOTMgMy4wMzMwOUMxMS4xMjcyIDIuNzg0MjggMTAuODI2MSAyLjYyNDAyIDEwLjQ4NzQgMi42MjQwMkMxMC4xMjM4IDIuNjI0MDIgOS44MDMzMiAyLjgwODg2IDkuNjE0ODMgMy4wODk3QzkuNTAyNjkgMy4yNTY3OSA5LjQzNzI2IDMuNDU3ODUgOS40MzcyNiAzLjY3NDJWMy43ODU3M0M5LjQzNzM1IDMuNzg5MzMgOS40MzczOSAzLjc5Mjk0IDkuNDM3MzkgMy43OTY1NVY5LjkwMTdDOS40MzczOSAxMC4xNTM3IDkuMjMzMDYgMTAuMzU4MSA4Ljk4MTAxIDEwLjM1ODFDOC43Mjg5NSAxMC4zNTgxIDguNTI0NjIgMTAuMTUzNyA4LjUyNDYyIDkuOTAxN1YzLjkwNTA3QzguNDE3NzMgMy44NjQ5IDguMzA0NjggMy44MzczMiA4LjE4NzI2IDMuODI0MTVDOC4xMzUwNCAzLjgxODI5IDguMDgxOTUgMy44MTUyOCA4LjAyODE2IDMuODE1MjhDNy4yNDg2MSAzLjgxNTI4IDYuNjE2NjYgNC40NDcyMyA2LjYxNjY2IDUuMjI2NzhWMTEuODI5Mkw1LjY3NDMxIDExLjAwNTJDNS41Nzg2OCAxMC45MjE2IDUuNDc1MzcgMTAuODUwNCA1LjM2NjY2IDEwLjc5MTlDNC44ODUwNiAxMC41MzI5IDQuMjk3MjggMTAuNTIzMSAzLjc5OTUyIDEwLjc4NThMMy42OTcwNyAxMC44Mzk4QzMuMDYyMzEgMTEuMTc0NyAyLjkyMjczIDEyLjAyMzEgMy40MTY3NSAxMi41NDM3TDcuMzM5NzMgMTYuNjc3N1YxNy4zMjYyQzcuMzM5NzMgMTcuNzg2NCA3LjcxMjgyIDE4LjE1OTUgOC4xNzMwNiAxOC4xNTk1SDEzLjgwODVDMTQuMjY4OCAxOC4xNTk1IDE0LjY0MTkgMTcuNzg2NCAxNC42NDE5IDE3LjMyNjJWMTYuNzkzOEMxNS43Mzc5IDE1LjcxOSAxNi4zODQ3IDE0LjI3MjggMTYuNDYgMTIuNzQ3QzE2LjQ2NDEgMTIuNjY0MSAxNi40NjY1IDEyLjU4MDkgMTYuNDY3MiAxMi40OTc1TDE2LjQ2NzQgMTIuNDQ2N0wxNi40NjcyIDYuNjM3MDlDMTYuNDY3MiA1Ljk2MjMgMTUuOTI0OCA1LjQxNDE5IDE1LjI1MjIgNS40MDQ5N0wxNS4yMzUgNS40MDQ4NkMxNS4xMjQ2IDUuNDA0ODYgMTUuMDE3NyA1LjQxOTM2IDE0LjkxNTkgNS40NDY1NlY5LjYwMjI2QzE0LjkxNTkgOS44NTQzMSAxNC43MTE2IDEwLjA1ODYgMTQuNDU5NSAxMC4wNTg2QzE0LjIwNzUgMTAuMDU4NiAxNC4wMDMxIDkuODU0MzEgMTQuMDAzMSA5LjYwMjI2VjYuNjA1MTRDMTQuMDAyOSA2LjYxNTc2IDE0LjAwMjcgNi42MjY0MSAxNC4wMDI3IDYuNjM3MDlWOS4yNzcwNUwxNC4wMDIyIDUuMDQ3NTJDMTQuMDAyMiA0Ljg2OTEzIDEzLjk2NDMgNC42OTk2IDEzLjg5NjEgNC41NDY1M0MxMy43MDY0IDQuMTIwNzIgMTMuMjgyMiAzLjgyMjM1IDEyLjc4NzYgMy44MTU0MUwxMi43NyAzLjgxNTI4QzEyLjY1ODQgMy44MTUyOCAxMi41NTA0IDMuODMwMSAxMi40NDc2IDMuODU3ODdaIiBmaWxsPSIjMUQxQzIzIi8+Cjwvc3ZnPg=="), auto',
+  //   grabbing:
+  //     'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMCAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjYxODE3IDUuNTk4NzVDNi42MTgxNyA0LjgxOTIgNy4yNTAxMiA0LjE4NzI2IDguMDI5NjcgNC4xODcyNkM4Ljc3ODczIDQuMTg3MjYgOS4zOTE1MiA0Ljc3MDc1IDkuNDM4MjkgNS41MDgwMUM5LjQ1OTkyIDQuOTQ3MSA5LjkyMTQ3IDQuNDk5MDIgMTAuNDg3NyA0LjQ5OTAyQzExLjA2NzcgNC40OTkwMiAxMS41Mzc4IDQuOTY5MiAxMS41Mzc4IDUuNTQ5MTlWOC43NjI0NkwxMS41Mzc5IDYuNzExNUMxMS41Mzc5IDYuMDMwOTUgMTIuMDg5NiA1LjQ3OTI2IDEyLjc3MDIgNS40NzkyNkMxMy40NTA3IDUuNDc5MjYgMTQuMDAyNCA2LjAzMDk1IDE0LjAwMjQgNi43MTE1TDE0LjAwMjQgOC43NjI0NkwxNC4wMDI5IDguMDE5ODNDMTQuMDAyOSA3LjMzOTI5IDE0LjU1NDYgNi43ODc1OSAxNS4yMzUyIDYuNzg3NTlDMTUuOTE1NyA2Ljc4NzU5IDE2LjQ2NzQgNy4zMzkyOCAxNi40Njc0IDguMDE5ODNWMTEuNDk3TDE2LjQ2NzUgMTIuNDQ2N0MxNi40Njc1IDE0LjA4MjEgMTUuODA5NiAxNS42NDg3IDE0LjY0MiAxNi43OTM4VjE3LjMyNjJDMTQuNjQyIDE3Ljc4NjQgMTQuMjY4OSAxOC4xNTk1IDEzLjgwODcgMTguMTU5NUg4LjE3MzE3QzcuNzEyOTMgMTguMTU5NSA3LjMzOTg0IDE3Ljc4NjQgNy4zMzk4NCAxNy4zMjYyVjE1Ljk0MjRMNS4zNDU2MiAxNC43NTM0QzQuNTg5MjQgMTQuMzAyNCA0LjEyNTkxIDEzLjQ4NjcgNC4xMjU4OSAxMi42MDYxTDQuMTI1ODMgOS4yODM4M0M0LjEyNTgyIDguOTU0MjcgNC4zMjAwMyA4LjY1NTY2IDQuNjIxMjkgOC41MjIwNUw2LjYxODE3IDcuNjM2MzRWNS41OTg3NVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTAuNDg3OCAzLjI0OTAyQzExLjI3OTYgMy4yNDkwMiAxMS45Nzc4IDMuNjQ5MDIgMTIuMzkxNyA0LjI1Nzk2QzEyLjUxNTEgNC4yMzkwNiAxMi42NDE2IDQuMjI5MjYgMTIuNzcwMyA0LjIyOTI2QzEzLjcyMjQgNC4yMjkyNiAxNC41NDkzIDQuNzY1MzEgMTQuOTY1NyA1LjU1MjA3QzE1LjA1NDMgNS41NDI1IDE1LjE0NDIgNS41Mzc1OSAxNS4yMzUzIDUuNTM3NTlDMTYuNjA2MiA1LjUzNzU5IDE3LjcxNzYgNi42NDg5MyAxNy43MTc2IDguMDE5ODNMMTcuNzE3NyAxMi40NDY3QzE3LjcxNzcgMTQuMjM1NSAxNy4wNjQ3IDE1Ljk1NTkgMTUuODkyMSAxNy4yOTA0VjE3LjMyNjJDMTUuODkyMSAxOC40NzY4IDE0Ljk1OTQgMTkuNDA5NSAxMy44MDg4IDE5LjQwOTVIOC4xNzMzMkM3LjAyMjczIDE5LjQwOTUgNi4wODk5OCAxOC40NzY4IDYuMDg5OTggMTcuMzI2MlYxNi42NTI0TDQuNzA1NjMgMTUuODI3QzMuNTcxMDYgMTUuMTUwNSAyLjg3NjA3IDEzLjkyNzEgMi44NzYwNCAxMi42MDYxTDIuODc1OTggOS4yODM4NUMyLjg3NTk2IDguNDU5OTYgMy4zNjE0OSA3LjcxMzQ1IDQuMTE0NjIgNy4zNzk0TDUuMzY4MzIgNi44MjMzM1Y1LjU5ODc1QzUuMzY4MzIgNC4xMjg4NSA2LjU1OTkxIDIuOTM3MjYgOC4wMjk4MiAyLjkzNzI2QzguNjA4MzEgMi45MzcyNiA5LjE0MzU1IDMuMTIxNyA5LjU4MDA1IDMuNDM1MDVDOS44NTg1MyAzLjMxNTMyIDEwLjE2NTQgMy4yNDkwMiAxMC40ODc4IDMuMjQ5MDJaTTEyLjQ0NzkgNS41MjE4NlY5LjQ3NTU3QzEyLjQ0NzkgOS43Mjc2MiAxMi4yNDM2IDkuOTMxOTUgMTEuOTkxNiA5LjkzMTk1QzExLjc1NjggOS45MzE5NSAxMS41NjM0IDkuNzU0NjUgMTEuNTM4IDkuNTI2NjNDMTEuNTM2MSA5LjUwOTg3IDExLjUzNTIgOS40OTI4MyAxMS41MzUyIDkuNDc1NTdWNS40NzE1OEMxMS41MTU0IDUuMjAwODMgMTEuMzkzIDQuOTU4NTggMTEuMjA2NiA0Ljc4MzU4QzExLjAxODggNC42MDcxMSAxMC43NjU5IDQuNDk5MDIgMTAuNDg3OCA0LjQ5OTAyQzEwLjQ3NjYgNC40OTkwMiAxMC40NjU0IDQuNDk5MTkgMTAuNDU0MiA0LjQ5OTU0QzkuOTAzNDcgNC41MTY4NCA5LjQ1OTY0IDQuOTU4MjQgOS40Mzg0NCA1LjUwODAxQzkuNDM4MiA1LjUwNDMgOS40Mzc5NSA1LjUwMDU4IDkuNDM3NjkgNS40OTY4OFY5LjkwMjQzQzkuNDM3NjkgMTAuMTU0NSA5LjIzMzM2IDEwLjM1ODggOC45ODEzMSAxMC4zNTg4QzguNzI5MjUgMTAuMzU4OCA4LjUyNDkyIDEwLjE1NDUgOC41MjQ5MiA5LjkwMjQzVjQuMjc2NTNDOC4zNzA4NiA0LjIxODgyIDguMjA0MDIgNC4xODcyNiA4LjAyOTgyIDQuMTg3MjZDNy4yNTAyNyA0LjE4NzI2IDYuNjE4MzIgNC44MTkyIDYuNjE4MzIgNS41OTg3NUw2LjYxODI3IDkuOTc1OTlDNi42MTgyNyAxMC4yMjggNi40MTM5NCAxMC40MzI0IDYuMTYxODkgMTAuNDMyNEM1LjkwOTgzIDEwLjQzMjQgNS43MDU1IDEwLjIyOCA1LjcwNTUgOS45NzU5OVY4LjA0MTIyTDQuNjIxNDQgOC41MjIwNUM0LjMyMDE4IDguNjU1NjYgNC4xMjU5NyA4Ljk1NDI3IDQuMTI1OTggOS4yODM4M0w0LjEyNjA0IDEyLjYwNjFDNC4xMjYwNiAxMy40ODY3IDQuNTg5MzkgMTQuMzAyNCA1LjM0NTc2IDE0Ljc1MzRMNy4zMzk5OCAxNS45NDI0VjE3LjMyNjJDNy4zMzk5OCAxNy43ODY0IDcuNzEzMDggMTguMTU5NSA4LjE3MzMyIDE4LjE1OTVIMTMuODA4OEMxNC4yNjkgMTguMTU5NSAxNC42NDIxIDE3Ljc4NjQgMTQuNjQyMSAxNy4zMjYyVjE2Ljc5MzhDMTUuNzM4MSAxNS43MTkgMTYuMzg1IDE0LjI3MjggMTYuNDYwMyAxMi43NDdDMTYuNDY0NiAxMi42NiAxNi40NjcgMTIuNTcyOCAxNi40Njc2IDEyLjQ4NTRMMTYuNDY3NyAxMi40NDY3TDE2LjQ2NzYgOC4wMTk4M0MxNi40Njc2IDcuMzQ1MDQgMTUuOTI1MiA2Ljc5NjkzIDE1LjI1MjUgNi43ODc3MUwxNS4yMzUzIDYuNzg3NTlDMTUuMTI1IDYuNzg3NTkgMTUuMDE4IDYuODAyMSAxNC45MTYyIDYuODI5MzFWOS42MDEzNkMxNC45MTYyIDkuODUzNDIgMTQuNzExOSAxMC4wNTc3IDE0LjQ1OTggMTAuMDU3N0MxNC4yMDc4IDEwLjA1NzcgMTQuMDAzNCA5Ljg1MzQxIDE0LjAwMzQgOS42MDEzNlY3Ljk4OTg1QzE0LjAwMzIgNy45OTk4MiAxNC4wMDMxIDguMDA5ODEgMTQuMDAzMSA4LjAxOTgzTDE0LjAwMzQgOS42MDEzNkwxNC4wMDI1IDYuNzExNUMxNC4wMDI1IDYuNDQ5NzQgMTMuOTIwOSA2LjIwNzA1IDEzLjc4MTggNi4wMDc0OEMxMy41NjIgNS42OTI0MiAxMy4xOTg5IDUuNDg0ODMgMTIuNzg3IDUuNDc5MzdMMTIuNzcwMyA1LjQ3OTI2QzEyLjY1ODggNS40NzkyNiAxMi41NTA3IDUuNDk0MDggMTIuNDQ3OSA1LjUyMTg2WiIgZmlsbD0iIzFEMUMyMyIvPgo8L3N2Zz4="), auto',
+  // },
+  fromNodeJSON(node, json, isFirstCreate) {
+    initFormDataFromJSON(node, json, isFirstCreate);
     return;
   },
   toNodeJSON(node) {
@@ -1170,7 +1498,7 @@ var WorkflowDocumentOptionsDefault = {
     const nodeMeta = node.getNodeMeta();
     const subCanvas = nodeMeta.subCanvas?.(node);
     if (subCanvas?.isCanvas === false) {
-      const canvasNodeTransform = subCanvas.canvasNode.getData(FlowNodeTransformData);
+      const canvasNodeTransform = subCanvas.canvasNode.getData(FlowNodeTransformData2);
       const { x, y } = canvasNodeTransform.transform.position;
       metaData.canvasPosition = { x, y };
     }
@@ -1193,8 +1521,8 @@ var WorkflowLinesManager = class {
     this.toDispose = new DisposableCollection();
     // 线条类型
     this._lineType = 0 /* BEZIER */;
-    this.onAvailableLinesChangeEmitter = new Emitter3();
-    this.onForceUpdateEmitter = new Emitter3();
+    this.onAvailableLinesChangeEmitter = new Emitter4();
+    this.onForceUpdateEmitter = new Emitter4();
     /**
      * 有效的线条被添加或者删除时候触发，未连上的线条不算
      */
@@ -1220,12 +1548,13 @@ var WorkflowLinesManager = class {
   }
   get lineColor() {
     const color = {
-      default: "#4d53e8" /* DEFUALT */,
-      error: "red" /* ERROR */,
-      hidden: "transparent" /* HIDDEN */,
-      drawing: "#5DD6E3" /* DRAWING */,
-      hovered: "#37d0ff" /* HOVER */,
-      selected: "#37d0ff" /* HOVER */
+      default: "var(--g-workflow-line-color-default,#4d53e8)" /* DEFUALT */,
+      error: "var(--g-workflow-line-color-error,red)" /* ERROR */,
+      hidden: "var(--g-workflow-line-color-hidden,transparent)" /* HIDDEN */,
+      drawing: "var(--g-workflow-line-color-drawing, #5DD6E3)" /* DRAWING */,
+      hovered: "var(--g-workflow-line-color-hover,#37d0ff)" /* HOVER */,
+      selected: "var(--g-workflow-line-color-selected,#37d0ff)" /* SELECTED */,
+      flowing: "var(--g-workflow-line-color-flowing,#4d53e8)" /* FLOWING */
     };
     if (this.options.lineColor) {
       Object.assign(color, this.options.lineColor);
@@ -1254,6 +1583,9 @@ var WorkflowLinesManager = class {
   getAllLines() {
     return this.entityManager.getEntities(WorkflowLineEntity);
   }
+  getAllAvailableLines() {
+    return this.getAllLines().filter((l) => !l.isDrawing && !l.isHidden);
+  }
   hasLine(portInfo) {
     return !!this.entityManager.getEntityById(
       WorkflowLineEntity.portInfoToLineId(portInfo)
@@ -1264,6 +1596,9 @@ var WorkflowLinesManager = class {
       WorkflowLineEntity.portInfoToLineId(portInfo)
     );
   }
+  getLineById(id) {
+    return this.entityManager.getEntityById(id);
+  }
   replaceLine(oldPortInfo, newPortInfo) {
     const oldLine = this.getLine(oldPortInfo);
     if (oldLine) {
@@ -1272,7 +1607,7 @@ var WorkflowLinesManager = class {
     return this.createLine(newPortInfo);
   }
   createLine(options) {
-    const { from, to, drawingTo, fromPort, toPort } = options;
+    const { from, to, drawingTo, fromPort, drawingFrom, toPort, data } = options;
     const available = Boolean(from && to);
     const key = options.key || WorkflowLineEntity.portInfoToLineId(options);
     let line = this.entityManager.getEntityById(key);
@@ -1281,12 +1616,12 @@ var WorkflowLinesManager = class {
       line.validate();
       return line;
     }
-    const fromNode = this.entityManager.getEntityById(from)?.getData(WorkflowNodeLinesData);
+    const fromNode = from ? this.entityManager.getEntityById(from).getData(WorkflowNodeLinesData) : void 0;
     const toNode = to ? this.entityManager.getEntityById(to).getData(WorkflowNodeLinesData) : void 0;
-    if (!fromNode) {
+    if (!fromNode && !toNode) {
       return;
     }
-    this.isDrawing = Boolean(drawingTo);
+    this.isDrawing = Boolean(drawingTo || drawingFrom);
     line = this.entityManager.createEntity(WorkflowLineEntity, {
       id: key,
       document: this.document,
@@ -1295,30 +1630,35 @@ var WorkflowLinesManager = class {
       fromPort,
       toPort,
       to,
-      drawingTo
+      drawingTo,
+      drawingFrom,
+      data
     });
     this.registerData(line);
-    fromNode.addLine(line);
+    fromNode?.addLine(line);
     toNode?.addLine(line);
     line.onDispose(() => {
-      if (drawingTo) {
-        this.isDrawing = false;
-      }
-      fromNode.removeLine(line);
+      this.isDrawing = false;
+      fromNode?.removeLine(line);
       toNode?.removeLine(line);
-      line.validate();
     });
-    line.toDispose.push(
-      Disposable2.create(() => {
-        if (available) {
-          this.onAvailableLinesChangeEmitter.fire({
-            type: "DELETE_LINE" /* DELETE_LINE */,
-            toJSON: () => line.toJSON(),
-            entity: line
-          });
-        }
-      })
-    );
+    line.onDispose(() => {
+      if (available) {
+        this.onAvailableLinesChangeEmitter.fire({
+          type: "DELETE_LINE" /* DELETE_LINE */,
+          toJSON: () => line.toJSON(),
+          entity: line
+        });
+      }
+    });
+    line.onLineDataChange(({ oldValue }) => {
+      this.onAvailableLinesChangeEmitter.fire({
+        type: "LINE_DATA_CHANGE" /* LINE_DATA_CHANGE */,
+        toJSON: () => line.toJSON(),
+        oldValue,
+        entity: line
+      });
+    });
     if (available) {
       this.onAvailableLinesChangeEmitter.fire({
         type: "ADD_LINE" /* ADD_LINE */,
@@ -1352,41 +1692,35 @@ var WorkflowLinesManager = class {
   get disposed() {
     return this.toDispose.disposed;
   }
-  isErrorLine(fromPort, toPort) {
+  isErrorLine(fromPort, toPort, defaultValue) {
     if (this.options.isErrorLine) {
       return this.options.isErrorLine(fromPort, toPort, this);
     }
-    return false;
+    return !!defaultValue;
   }
-  isReverseLine(line) {
+  isReverseLine(line, defaultValue = false) {
     if (this.options.isReverseLine) {
       return this.options.isReverseLine(line);
     }
-    return false;
+    return defaultValue;
   }
-  isHideArrowLine(line) {
+  isHideArrowLine(line, defaultValue = false) {
     if (this.options.isHideArrowLine) {
       return this.options.isHideArrowLine(line);
     }
-    return false;
+    return defaultValue;
   }
-  isFlowingLine(line) {
+  isFlowingLine(line, defaultValue = false) {
     if (this.options.isFlowingLine) {
       return this.options.isFlowingLine(line);
     }
-    return false;
+    return defaultValue;
   }
-  isDisabledLine(line) {
+  isDisabledLine(line, defaultValue = false) {
     if (this.options.isDisabledLine) {
       return this.options.isDisabledLine(line);
     }
-    return false;
-  }
-  isVerticalLine(line) {
-    if (this.options.isVerticalLine) {
-      return this.options.isVerticalLine(line);
-    }
-    return false;
+    return defaultValue;
   }
   setLineRenderType(line) {
     if (this.options.setLineRenderType) {
@@ -1404,6 +1738,9 @@ var WorkflowLinesManager = class {
     if (line.isHidden) {
       return this.lineColor.hidden;
     }
+    if (line.lockedColor) {
+      return line.lockedColor;
+    }
     if (line.hasError) {
       return this.lineColor.error;
     }
@@ -1419,10 +1756,21 @@ var WorkflowLinesManager = class {
     if (this.selectService.isSelected(line.id)) {
       return this.lineColor.selected;
     }
+    if (this.isFlowingLine(line)) {
+      return this.lineColor.flowing;
+    }
     return this.lineColor.default;
   }
   canAddLine(fromPort, toPort, silent) {
-    if (fromPort === toPort || fromPort.node === toPort.node || fromPort.portType !== "output" || toPort.portType !== "input" || toPort.disabled) {
+    if (fromPort === toPort || fromPort.node === toPort.node || fromPort.portType !== "output" || toPort.portType !== "input" || fromPort.disabled || toPort.disabled) {
+      return false;
+    }
+    const fromCanAdd = fromPort.node.getNodeRegistry().canAddLine;
+    const toCanAdd = toPort.node.getNodeRegistry().canAddLine;
+    if (fromCanAdd && !fromCanAdd(fromPort, toPort, this, silent)) {
+      return false;
+    }
+    if (toCanAdd && !toCanAdd(fromPort, toPort, this, silent)) {
       return false;
     }
     if (this.options.canAddLine) {
@@ -1442,8 +1790,8 @@ var WorkflowLinesManager = class {
     }
     return true;
   }
-  canReset(fromPort, oldToPort, newToPort) {
-    if (this.options && this.options.canResetLine && !this.options.canResetLine(fromPort, oldToPort, newToPort, this)) {
+  canReset(oldLine, newLineInfo) {
+    if (this.options && this.options.canResetLine && !this.options.canResetLine(oldLine, newLineInfo, this)) {
       return false;
     }
     return true;
@@ -1452,11 +1800,18 @@ var WorkflowLinesManager = class {
    * 根据鼠标位置找到 port
    * @param pos
    */
-  getPortFromMousePos(pos) {
-    const allPorts = this.entityManager.getEntities(WorkflowPortEntity).filter((port) => port.node.flowNodeType !== "root");
+  getPortFromMousePos(pos, portType) {
+    const allNodes = this.getSortedNodes().reverse();
+    const allPorts = allNodes.map((node) => {
+      if (!portType) {
+        return node.ports.allPorts;
+      }
+      return portType === "input" ? node.ports.inputPorts : node.ports.outputPorts;
+    }).flat();
     const targetPort = allPorts.find((port) => port.isHovered(pos.x, pos.y));
     if (targetPort) {
-      const targetNode = this.document.getAllNodes().slice().reverse().filter((node) => targetPort.node?.parent?.id !== node.id).find((node) => node.getData(TransformData6).contains(pos.x, pos.y));
+      const containNodes = this.getContainNodesFromMousePos(pos);
+      const targetNode = last(containNodes);
       if (targetNode && targetNode !== targetPort.node) {
         return;
       }
@@ -1468,16 +1823,8 @@ var WorkflowLinesManager = class {
    * @param pos - 鼠标位置
    */
   getNodeFromMousePos(pos) {
-    const allNodes = this.document.getAllNodes();
-    const containNodes = [];
     const { selection } = this.selectService;
-    const zoom = this.entityManager.getEntity(PlaygroundConfigEntity2)?.config?.zoom || 1;
-    allNodes.forEach((node) => {
-      const { bounds } = node.getData(FlowNodeTransformData2);
-      if (bounds.clone().pad(4 / zoom).contains(pos.x, pos.y)) {
-        containNodes.push(node);
-      }
-    });
+    const containNodes = this.getContainNodesFromMousePos(pos);
     if (selection?.length) {
       const filteredNodes = containNodes.filter(
         (node) => selection.some((_node) => node.id === _node.id)
@@ -1495,6 +1842,25 @@ var WorkflowLinesManager = class {
   registerData(line) {
     line.addData(WorkflowLineRenderData);
   }
+  getSortedNodes() {
+    return this.document.getAllNodes().sort((a, b) => this.getNodeIndex(a) - this.getNodeIndex(b));
+  }
+  /** 获取鼠标坐标位置的所有节点（stackIndex 从小到大排序） */
+  getContainNodesFromMousePos(pos) {
+    const allNodes = this.getSortedNodes();
+    const zoom = this.entityManager.getEntity(PlaygroundConfigEntity2)?.config?.zoom || 1;
+    const containNodes = allNodes.map((node) => {
+      const { bounds } = node.getData(FlowNodeTransformData3);
+      if (bounds.clone().pad(4 / zoom).contains(pos.x, pos.y)) {
+        return node;
+      }
+    }).filter(Boolean);
+    return containNodes;
+  }
+  getNodeIndex(node) {
+    const nodeRenderData = node.getData(FlowNodeRenderData2);
+    return nodeRenderData.stackIndex;
+  }
 };
 __decorateClass([
   inject3(WorkflowHoverService)
@@ -1515,28 +1881,32 @@ WorkflowLinesManager = __decorateClass([
 // src/workflow-document.ts
 import { customAlphabet } from "nanoid";
 import { inject as inject5, injectable as injectable5, optional, postConstruct } from "inversify";
-import { Disposable as Disposable3, Emitter as Emitter4 } from "@flowgram.ai/utils";
+import { Emitter as Emitter5 } from "@flowgram.ai/utils";
 import { NodeEngineContext } from "@flowgram.ai/form-core";
-import { FlowDocument, FlowNodeBaseType, FlowNodeTransformData as FlowNodeTransformData4 } from "@flowgram.ai/document";
+import {
+  FlowDocument,
+  FlowNodeBaseType as FlowNodeBaseType2,
+  FlowNodeTransformData as FlowNodeTransformData5
+} from "@flowgram.ai/document";
 import {
   injectPlaygroundContext,
   PlaygroundConfigEntity as PlaygroundConfigEntity4,
   PositionData,
-  TransformData as TransformData8
+  TransformData as TransformData7
 } from "@flowgram.ai/core";
 
 // src/layout/free-layout.ts
 import { inject as inject4, injectable as injectable4 } from "inversify";
-import {
-  FlowDocumentProvider,
-  FlowNodeTransformData as FlowNodeTransformData3
-} from "@flowgram.ai/document";
-import { PlaygroundConfigEntity as PlaygroundConfigEntity3, TransformData as TransformData7 } from "@flowgram.ai/core";
 import {
   PaddingSchema,
   Rectangle as Rectangle7,
   SizeSchema as SizeSchema2
 } from "@flowgram.ai/utils";
+import {
+  FlowDocumentProvider,
+  FlowNodeTransformData as FlowNodeTransformData4
+} from "@flowgram.ai/document";
+import { PlaygroundConfigEntity as PlaygroundConfigEntity3, TransformData as TransformData6 } from "@flowgram.ai/core";
 var FREE_LAYOUT_KEY = "free-layout";
 var FreeLayout = class {
   constructor() {
@@ -1549,12 +1919,12 @@ var FreeLayout = class {
    * 更新布局
    */
   update() {
-    if (this.document.root.getData(FlowNodeTransformData3)?.localDirty) {
+    if (this.document.root.getData(FlowNodeTransformData4)?.localDirty) {
       this.document.root.clearMemoGlobal();
     }
   }
   syncTransform(node) {
-    const transform = node.getData(FlowNodeTransformData3);
+    const transform = node.getData(FlowNodeTransformData4);
     if (!transform.localDirty) {
       return;
     }
@@ -1568,16 +1938,31 @@ var FreeLayout = class {
     }
     node.parent.clearMemoGlobal();
     node.parent.clearMemoLocal();
-    const parentTransform = node.parent.getData(FlowNodeTransformData3);
+    const parentTransform = node.parent.getData(FlowNodeTransformData4);
     parentTransform.transform.fireChange();
   }
+  /**
+   * 更新所有受影响的上下游节点
+   */
+  updateAffectedTransform(node) {
+    const transformData = node.transform;
+    if (!transformData.localDirty) {
+      return;
+    }
+    const allParents = this.getAllParents(node);
+    const allBlocks = this.getAllBlocks(node).reverse();
+    const affectedNodes = [...allBlocks, ...allParents];
+    affectedNodes.forEach((node2) => {
+      this.fireChange(node2);
+    });
+  }
   /**
    * 获取节点的 padding 数据
    * @param node
    */
   getPadding(node) {
     const { padding } = node.getNodeMeta();
-    const transform = node.getData(FlowNodeTransformData3);
+    const transform = node.getData(FlowNodeTransformData4);
     if (padding) {
       return typeof padding === "function" ? padding(transform) : padding;
     }
@@ -1589,7 +1974,7 @@ var FreeLayout = class {
    */
   getInitScroll(contentSize) {
     const bounds = Rectangle7.enlarge(
-      this.document.getAllNodes().map((node) => node.getData(TransformData7).bounds)
+      this.document.getAllNodes().map((node) => node.getData(TransformData6).bounds)
     ).pad(30, 30);
     const viewport = this.playgroundConfig.getViewport(false);
     const zoom = SizeSchema2.fixSize(bounds, viewport);
@@ -1602,13 +1987,13 @@ var FreeLayout = class {
    * 获取默认输入点
    */
   getDefaultInputPoint(node) {
-    return node.getData(TransformData7).bounds.leftCenter;
+    return node.getData(TransformData6).bounds.leftCenter;
   }
   /**
    * 获取默认输出点
    */
   getDefaultOutputPoint(node) {
-    return node.getData(TransformData7).bounds.rightCenter;
+    return node.getData(TransformData6).bounds.rightCenter;
   }
   /**
    * 水平中心点
@@ -1616,6 +2001,30 @@ var FreeLayout = class {
   getDefaultNodeOrigin() {
     return { x: 0.5, y: 0 };
   }
+  getAllParents(node) {
+    const parents = [];
+    let current = node.parent;
+    while (current) {
+      parents.push(current);
+      current = current.parent;
+    }
+    return parents;
+  }
+  getAllBlocks(node) {
+    return node.blocks.reduce(
+      (acc, child) => [...acc, ...this.getAllBlocks(child)],
+      [node]
+    );
+  }
+  fireChange(node) {
+    const transformData = node?.transform;
+    if (!node || !transformData?.localDirty) {
+      return;
+    }
+    node.clearMemoGlobal();
+    node.clearMemoLocal();
+    transformData.transform.fireChange();
+  }
 };
 __decorateClass([
   inject4(PlaygroundConfigEntity3)
@@ -1633,12 +2042,11 @@ var WorkflowDocumentProvider = Symbol("WorkflowDocumentProvider");
 var WorkflowDocument = class extends FlowDocument {
   constructor() {
     super(...arguments);
-    this._onContentChangeEmitter = new Emitter4();
-    this.onLoadedEmitter = new Emitter4();
+    this._onContentChangeEmitter = new Emitter5();
+    this.onLoadedEmitter = new Emitter5();
     this.onContentChange = this._onContentChangeEmitter.event;
-    this._onReloadEmitter = new Emitter4();
+    this._onReloadEmitter = new Emitter5();
     this.onReload = this._onReloadEmitter.event;
-    this.disposed = false;
     /**
      * 数据加载完成
      */
@@ -1649,6 +2057,11 @@ var WorkflowDocument = class extends FlowDocument {
   get loading() {
     return this._loading;
   }
+  /**
+   * use `ctx.tools.fitView()` instead
+   * @deprecated
+   * @param easing
+   */
   async fitView(easing) {
     return fitView(this, this.playgroundConfig, easing).then(() => {
       this.linesManager.forceUpdate();
@@ -1667,12 +2080,17 @@ var WorkflowDocument = class extends FlowDocument {
     });
   }
   async load() {
+    if (this.disposed) return;
     this._loading = true;
     await super.load();
     this._loading = false;
     this.onLoadedEmitter.fire();
   }
+  /**
+   * @deprecated use `ctx.operation.fromJSON` instead
+   */
   async reload(json, delayTime = 0) {
+    if (this.disposed) return;
     this._loading = true;
     this.clear();
     this.fromJSON(json);
@@ -1685,10 +2103,13 @@ var WorkflowDocument = class extends FlowDocument {
    * @param json
    */
   fromJSON(json, fireRender = true) {
-    const { flattenJSON, nodeBlocks, nodeEdges } = this.flatJSON(json);
-    const nestedJSON = this.nestJSON(flattenJSON, nodeBlocks, nodeEdges);
+    if (this.disposed) return;
+    const workflowJSON = {
+      nodes: json.nodes ?? [],
+      edges: json.edges ?? []
+    };
     this.entityManager.changeEntityLocked = true;
-    this.renderJSON(nestedJSON);
+    this.batchAddFromJSON(workflowJSON);
     this.entityManager.changeEntityLocked = false;
     this.transformer.loading = false;
     if (fireRender) {
@@ -1708,9 +2129,18 @@ var WorkflowDocument = class extends FlowDocument {
    * 创建流程节点
    * @param json
    */
-  createWorkflowNode(json, isClone = false, parentId) {
-    const isExistedNode = this.getNode(json.id);
-    const parent = this.getNode(parentId ?? this.root.id) ?? this.root;
+  createWorkflowNode(json, isClone = false, parentID) {
+    return this._createWorkflowNode(json, { parentID });
+  }
+  /**
+   * 创建流程节点
+   * @param json
+   */
+  _createWorkflowNode(json, options) {
+    const { parentID, onNodeCreated, onEdgeCreated } = options ?? {};
+    const existedNode = this.getNode(json.id);
+    const isExistedNode = existedNode && existedNode.flowNodeType === json.type;
+    const parent = this.getNode(parentID ?? this.root.id) ?? this.root;
     const node = this.addNode(
       {
         ...json,
@@ -1723,36 +2153,44 @@ var WorkflowDocument = class extends FlowDocument {
     const { formMeta } = registry;
     const meta = node.getNodeMeta();
     const formData = getFlowNodeFormData(node);
-    const transform = node.getData(FlowNodeTransformData4);
+    const transform = node.getData(FlowNodeTransformData5);
     const freeLayout = this.layout;
-    transform.onDataChange(() => {
-      freeLayout.syncTransform(node);
-    });
+    if (!isExistedNode) {
+      transform.onDataChange(() => {
+        freeLayout.syncTransform(node);
+      });
+    }
     let { position } = meta;
     if (!position) {
       position = this.getNodeDefaultPosition(json.type);
     }
-    node.getData(TransformData8).update({
+    node.getData(TransformData7).update({
       position
     });
-    if (formMeta && formData && !formData.formModel.initialized) {
-      formData.createForm(formMeta, json.data);
-      formData.onDataChange(() => {
+    if (formMeta && formData) {
+      if (!formData.formModel.initialized) {
+        formData.createForm(formMeta, json.data);
+        formData.onDataChange(() => {
+          this.fireContentChange({
+            type: "NODE_DATA_CHANGE" /* NODE_DATA_CHANGE */,
+            toJSON: () => formData.toJSON(),
+            entity: node
+          });
+        });
+      } else {
+        formData.updateFormValues(json.data);
+      }
+    }
+    const positionData = node.getData(PositionData);
+    if (!isExistedNode) {
+      positionData.onDataChange(() => {
         this.fireContentChange({
-          type: "NODE_DATA_CHANGE" /* NODE_DATA_CHANGE */,
-          toJSON: () => formData.toJSON(),
+          type: "MOVE_NODE" /* MOVE_NODE */,
+          toJSON: () => positionData.toJSON(),
           entity: node
         });
       });
     }
-    const positionData = node.getData(PositionData);
-    positionData.onDataChange(() => {
-      this.fireContentChange({
-        type: "MOVE_NODE" /* MOVE_NODE */,
-        toJSON: () => positionData.toJSON(),
-        entity: node
-      });
-    });
     const subCanvas = this.getNodeSubCanvas(node);
     if (!isExistedNode && !subCanvas?.isCanvas) {
       this.fireContentChange({
@@ -1760,54 +2198,132 @@ var WorkflowDocument = class extends FlowDocument {
         entity: node,
         toJSON: () => this.toNodeJSON(node)
       });
-      node.toDispose.push(
-        Disposable3.create(() => {
-          this.fireContentChange({
-            type: "DELETE_NODE" /* DELETE_NODE */,
-            entity: node,
-            toJSON: () => this.toNodeJSON(node)
-          });
-        })
-      );
-      node.toDispose.push(
-        Disposable3.create(() => {
-          if (!node.parent || node.parent.flowNodeType === FlowNodeBaseType.ROOT) {
-            return;
-          }
-          const parentTransform = node.parent.getData(FlowNodeTransformData4);
-          setTimeout(() => {
-            parentTransform.fireChange();
-          }, 0);
-        })
-      );
+      node.onDispose(() => {
+        if (!node.parent || node.parent.flowNodeType === FlowNodeBaseType2.ROOT) {
+          return;
+        }
+        const parentTransform = node.parent.getData(FlowNodeTransformData5);
+        parentTransform.fireChange();
+      });
+      let lastDeleteNodeData;
+      node.preDispose.onDispose(() => {
+        lastDeleteNodeData = this.toNodeJSON(node);
+      });
+      node.onDispose(() => {
+        this.fireContentChange({
+          type: "DELETE_NODE" /* DELETE_NODE */,
+          entity: node,
+          toJSON: () => lastDeleteNodeData
+        });
+      });
     }
     if (json.blocks) {
-      this.renderJSON(
+      this.batchAddFromJSON(
         { nodes: json.blocks, edges: json.edges ?? [] },
         {
           parent: node,
-          isClone
+          onNodeCreated,
+          onEdgeCreated
         }
       );
     }
     if (subCanvas) {
-      const canvasTransform = subCanvas.canvasNode.getData(TransformData8);
+      const canvasTransform = subCanvas.canvasNode.getData(TransformData7);
       canvasTransform.update({
         position: subCanvas.parentNode.getNodeMeta()?.canvasPosition
       });
-      subCanvas.parentNode.onDispose(() => {
-        subCanvas.canvasNode.dispose();
+      if (!isExistedNode) {
+        subCanvas.parentNode.onDispose(() => {
+          subCanvas.canvasNode.dispose();
+        });
+        subCanvas.canvasNode.onDispose(() => {
+          subCanvas.parentNode.dispose();
+        });
+      }
+    }
+    if (!isExistedNode) {
+      this.onNodeCreateEmitter.fire({
+        node,
+        data: json,
+        json
       });
-      subCanvas.canvasNode.onDispose(() => {
-        subCanvas.parentNode.dispose();
+    } else {
+      this.onNodeUpdateEmitter.fire({
+        node,
+        data: json,
+        json
       });
     }
-    this.onNodeCreateEmitter.fire({
-      node,
-      data: json
+    return node;
+  }
+  /**
+   * 添加节点，如果节点已经存在则不会重复创建
+   * @param data
+   * @param addedNodes
+   */
+  addNode(data, addedNodes, ignoreCreateAndUpdateEvent) {
+    const { id, type = "block", originParent, parent, meta, hidden, index } = data;
+    let node = this.getNode(id);
+    let isNew = false;
+    const register = this.getNodeRegistry(type, data.originParent);
+    if (node && node.flowNodeType !== data.type) {
+      node.dispose();
+      node = void 0;
+    }
+    if (!node) {
+      const { dataRegistries } = register;
+      node = this.entityManager.createEntity(WorkflowNodeEntity, {
+        id,
+        document: this,
+        flowNodeType: type,
+        originParent,
+        meta
+      });
+      this.options.preNodeCreate?.(node);
+      const datas = dataRegistries ? this.nodeDataRegistries.concat(...dataRegistries) : this.nodeDataRegistries;
+      node.addInitializeData(datas);
+      node.ports = node.getData(WorkflowNodePortsData);
+      node.lines = node.getData(WorkflowNodeLinesData);
+      node.onDispose(() => this.onNodeDisposeEmitter.fire({ node }));
+      this.options.fromNodeJSON?.(node, data, true);
+      isNew = true;
+    } else {
+      this.options.fromNodeJSON?.(node, data, false);
+    }
+    node.initData({
+      originParent,
+      parent,
+      meta,
+      hidden,
+      index
     });
+    addedNodes?.push(node);
+    if (register.onCreate) {
+      const extendNodes = register.onCreate(node, data);
+      if (extendNodes && addedNodes) {
+        addedNodes.push(...extendNodes);
+      }
+    }
+    if (!ignoreCreateAndUpdateEvent) {
+      if (isNew) {
+        this.onNodeCreateEmitter.fire({
+          node,
+          data,
+          json: data
+        });
+      } else {
+        this.onNodeUpdateEmitter.fire({ node, data, json: data });
+      }
+    }
     return node;
   }
+  get layout() {
+    const layout = this.layouts.find((layout2) => layout2.name == this.currentLayoutKey);
+    if (!layout) {
+      throw new Error(`Unknown flow layout: ${this.currentLayoutKey}`);
+    }
+    return layout;
+  }
   /**
    * 获取默认的 x y 坐标, 默认为当前画布可视区域中心
    * @param type
@@ -1839,7 +2355,7 @@ var WorkflowDocument = class extends FlowDocument {
         throw new Error(`[WorkflowDocument.createWorkflowNodeByType] Node Id "${id}" duplicated.`);
       }
     }
-    return this.createWorkflowNode(
+    return this._createWorkflowNode(
       {
         ...json,
         id,
@@ -1850,15 +2366,17 @@ var WorkflowDocument = class extends FlowDocument {
         blocks: json?.blocks,
         edges: json?.edges
       },
-      false,
-      parentID
+      { parentID }
     );
   }
   getAllNodes() {
-    return this.entityManager.getEntities(WorkflowNodeEntity).filter((n) => n.id !== FlowNodeBaseType.ROOT);
+    return this.entityManager.getEntities(WorkflowNodeEntity).filter((n) => n.id !== FlowNodeBaseType2.ROOT);
+  }
+  getAllEdges() {
+    return this.entityManager.getEntities(WorkflowLineEntity);
   }
   getAllPorts() {
-    return this.entityManager.getEntities(WorkflowPortEntity).filter((p) => p.node.id !== FlowNodeBaseType.ROOT);
+    return this.entityManager.getEntities(WorkflowPortEntity).filter((p) => p.node.id !== FlowNodeBaseType2.ROOT);
   }
   /**
    * 获取画布中的非游离节点
@@ -1873,10 +2391,13 @@ var WorkflowDocument = class extends FlowDocument {
       from: line.from.id,
       to: line.to.id
     }));
-    const startNodeId = allNode.find((node) => node.isStart).id;
-    const endNodeId = allNode.find((node) => node.isNodeEnd).id;
-    const nodeInSubCanvas = allNode.filter((node) => node.parent?.flowNodeType === FlowNodeBaseType.SUB_CANVAS).map((node) => node.id);
-    const associatedCache = /* @__PURE__ */ new Set([endNodeId, ...nodeInSubCanvas]);
+    const startNodeId = allNode.find((node) => node.isStart)?.id;
+    const endNodeId = allNode.find((node) => node.isNodeEnd)?.id;
+    const nodeInContainer = allNode.filter((node) => node.parent?.getNodeMeta().isContainer).map((node) => node.id);
+    const associatedCache = new Set(nodeInContainer);
+    if (endNodeId) {
+      associatedCache.add(endNodeId);
+    }
     const bfs = (nodeId) => {
       if (associatedCache.has(nodeId)) {
         return;
@@ -1890,7 +2411,9 @@ var WorkflowDocument = class extends FlowDocument {
       }, []);
       nextNodes.forEach(bfs);
     };
-    bfs(startNodeId);
+    if (startNodeId) {
+      bfs(startNodeId);
+    }
     const associatedNodes = allNode.filter((node) => associatedCache.has(node.id));
     return associatedNodes;
   }
@@ -1952,7 +2475,7 @@ var WorkflowDocument = class extends FlowDocument {
       x: json.meta.position.x + 30,
       y: json.meta.position.y + 30
     };
-    return this.createWorkflowNode(
+    return this._createWorkflowNode(
       {
         id: newNodeId || `1${nanoid2()}`,
         type: node.flowNodeType,
@@ -1964,16 +2487,17 @@ var WorkflowDocument = class extends FlowDocument {
         blocks: json.blocks,
         edges: json.edges
       },
-      true,
-      node.parent?.id
+      {
+        parentID: node.parent?.id
+      }
     );
   }
-  copyNodeFromJSON(flowNodeType, nodeJSON, newNodeId, position, parentId) {
+  copyNodeFromJSON(flowNodeType, nodeJSON, newNodeId, position, parentID) {
     position = position || {
       x: nodeJSON.meta.position.x + 30,
       y: nodeJSON.meta.position.y + 30
     };
-    return this.createWorkflowNode(
+    return this._createWorkflowNode(
       {
         id: newNodeId || `1${nanoid2()}`,
         type: flowNodeType,
@@ -1985,8 +2509,9 @@ var WorkflowDocument = class extends FlowDocument {
         blocks: nodeJSON.blocks,
         edges: nodeJSON.edges
       },
-      true,
-      parentId
+      {
+        parentID
+      }
     );
   }
   canRemove(node, silent) {
@@ -2002,136 +2527,59 @@ var WorkflowDocument = class extends FlowDocument {
   /**
    * 判断端口是否为错误态
    */
-  isErrorPort(port) {
+  isErrorPort(port, defaultValue = false) {
     if (typeof this.options.isErrorPort === "function") {
       return this.options.isErrorPort(port);
     }
-    return false;
+    return defaultValue;
   }
   /**
    * 导出数据
    */
   toJSON() {
+    if (this.disposed) {
+      throw new Error(
+        "The WorkflowDocument has been disposed and it is no longer possible to call toJSON."
+      );
+    }
     const rootJSON = this.toNodeJSON(this.root);
-    return {
+    const json = {
       nodes: rootJSON.blocks ?? [],
       edges: rootJSON.edges ?? []
     };
+    return json;
   }
   dispose() {
-    if (this.disposed) {
-      return;
-    }
     super.dispose();
-    this.disposed = true;
     this._onReloadEmitter.dispose();
   }
-  getEdgeID(edge) {
-    return WorkflowLineEntity.portInfoToLineId({
-      from: edge.sourceNodeID,
-      to: edge.targetNodeID,
-      fromPort: edge.sourcePortID,
-      toPort: edge.targetPortID
-    });
-  }
-  /**
-   * 拍平树形json结构，将结构信息提取到map
-   */
-  flatJSON(json = { nodes: [], edges: [] }) {
-    const nodeBlocks = /* @__PURE__ */ new Map();
-    const nodeEdges = /* @__PURE__ */ new Map();
-    const rootNodes = json.nodes ?? [];
-    const rootEdges = json.edges ?? [];
-    const flattenNodeJSONs = [...rootNodes];
-    const flattenEdgeJSONs = [...rootEdges];
-    const rootBlockIDs = rootNodes.map((node) => node.id);
-    const rootEdgeIDs = rootEdges.map((edge) => this.getEdgeID(edge));
-    nodeBlocks.set(FlowNodeBaseType.ROOT, rootBlockIDs);
-    nodeEdges.set(FlowNodeBaseType.ROOT, rootEdgeIDs);
-    rootNodes.forEach((nodeJSON) => {
-      const { blocks, edges } = nodeJSON;
-      if (blocks) {
-        flattenNodeJSONs.push(...blocks);
-        const blockIDs = [];
-        blocks.forEach((block) => {
-          blockIDs.push(block.id);
-        });
-        nodeBlocks.set(nodeJSON.id, blockIDs);
-        delete nodeJSON.blocks;
-      }
-      if (edges) {
-        flattenEdgeJSONs.push(...edges);
-        const edgeIDs = [];
-        edges.forEach((edge) => {
-          const edgeID = this.getEdgeID(edge);
-          edgeIDs.push(edgeID);
-        });
-        nodeEdges.set(nodeJSON.id, edgeIDs);
-        delete nodeJSON.edges;
-      }
-    });
-    const flattenJSON = {
-      nodes: flattenNodeJSONs,
-      edges: flattenEdgeJSONs
-    };
-    return {
-      flattenJSON,
-      nodeBlocks,
-      nodeEdges
-    };
-  }
   /**
-   * 对JSON进行分层
+   * 批量添加节点
+   * @deprecated use 'batchAddFromJSON' instead
+   * @param json
+   * @param options
    */
-  nestJSON(flattenJSON, nodeBlocks, nodeEdges) {
-    const nestJSON = {
-      nodes: [],
-      edges: []
-    };
-    const nodeMap = /* @__PURE__ */ new Map();
-    const edgeMap = /* @__PURE__ */ new Map();
-    const rootBlockSet = new Set(nodeBlocks.get(FlowNodeBaseType.ROOT) ?? []);
-    const rootEdgeSet = new Set(nodeEdges.get(FlowNodeBaseType.ROOT) ?? []);
-    flattenJSON.nodes.forEach((nodeJSON) => {
-      nodeMap.set(nodeJSON.id, nodeJSON);
-    });
-    flattenJSON.edges.forEach((edgeJSON) => {
-      const edgeID = this.getEdgeID(edgeJSON);
-      edgeMap.set(edgeID, edgeJSON);
-    });
-    flattenJSON.nodes.forEach((nodeJSON) => {
-      if (rootBlockSet.has(nodeJSON.id)) {
-        nestJSON.nodes.push(nodeJSON);
-      }
-      if (nodeBlocks.has(nodeJSON.id)) {
-        const blockIDs = nodeBlocks.get(nodeJSON.id);
-        const blockJSONs = blockIDs.map((blockID) => nodeMap.get(blockID)).filter(Boolean);
-        nodeJSON.blocks = blockJSONs;
-      }
-      if (nodeEdges.has(nodeJSON.id)) {
-        const edgeIDs = nodeEdges.get(nodeJSON.id);
-        const edgeJSONs = edgeIDs.map((edgeID) => edgeMap.get(edgeID)).filter(Boolean);
-        nodeJSON.edges = edgeJSONs;
-      }
-    });
-    flattenJSON.edges.forEach((edgeJSON) => {
-      const edgeID = this.getEdgeID(edgeJSON);
-      if (rootEdgeSet.has(edgeID)) {
-        nestJSON.edges.push(edgeJSON);
-      }
-    });
-    return nestJSON;
+  renderJSON(json, options) {
+    return this.batchAddFromJSON(json, options);
   }
   /**
-   * 逐层创建节点和线条
+   * 批量添加节点
    */
-  renderJSON(json, options) {
-    const { parent = this.root, isClone = false } = options ?? {};
-    const containerID = this.getNodeSubCanvas(parent)?.canvasNode.id ?? parent.id;
-    json.nodes.forEach((nodeJSON) => {
-      this.createWorkflowNode(nodeJSON, isClone, containerID);
-    }), // 创建线条
-    json.edges.forEach((edge) => this.createWorkflowLine(edge, containerID));
+  batchAddFromJSON(json, options) {
+    const { parent = this.root, onNodeCreated, onEdgeCreated } = options ?? {};
+    const parentID = this.getNodeSubCanvas(parent)?.canvasNode.id ?? parent.id;
+    const processedJSON = buildGroupJSON(json);
+    const nodes = processedJSON.nodes.map(
+      (nodeJSON) => this._createWorkflowNode(nodeJSON, {
+        parentID,
+        onNodeCreated,
+        onEdgeCreated
+      })
+    );
+    const edges = processedJSON.edges.map((edge) => this.createWorkflowLine(edge, parentID)).filter(Boolean);
+    nodes.forEach((node) => options?.onNodeCreated?.(node));
+    edges.forEach((edge) => options?.onEdgeCreated?.(edge));
+    return { nodes, edges };
   }
   getNodeSubCanvas(node) {
     if (!node) return;
@@ -2140,18 +2588,24 @@ var WorkflowDocument = class extends FlowDocument {
     return subCanvas;
   }
   getNodeChildren(node) {
-    if (!node) return [];
+    if (!node || node.flowNodeType === FlowNodeBaseType2.GROUP) return [];
     const subCanvas = this.getNodeSubCanvas(node);
-    const childrenWithCanvas = subCanvas ? subCanvas.canvasNode.collapsedChildren : node.collapsedChildren;
-    const children = childrenWithCanvas.filter((child) => {
+    const realChildren = subCanvas ? subCanvas.canvasNode.blocks : node.blocks;
+    const childrenWithoutSubCanvas = realChildren.filter((child) => {
       const childMeta = child.getNodeMeta();
       return !childMeta.subCanvas?.(node)?.isCanvas;
     }).filter(Boolean);
+    const children = childrenWithoutSubCanvas.map((child) => {
+      if (child.flowNodeType === FlowNodeBaseType2.GROUP) {
+        return [child, ...child.blocks];
+      }
+      return child;
+    }).flat();
     return children;
   }
   toLineJSON(line) {
     const lineJSON = line.toJSON();
-    if (!line.to || !line.info.to || !line.toPort) {
+    if (!line.from || !line.info.from || !line.fromPort || !line.to || !line.info.to || !line.toPort) {
       return;
     }
     const fromSubCanvas = this.getNodeSubCanvas(line.from);
@@ -2173,7 +2627,7 @@ var WorkflowDocument = class extends FlowDocument {
     }
     return lineJSON;
   }
-  createWorkflowLine(json, parentId) {
+  createWorkflowLine(json, parentID) {
     const fromNode = this.getNode(json.sourceNodeID);
     const toNode = this.getNode(json.targetNodeID);
     if (!fromNode || !toNode) {
@@ -2183,12 +2637,13 @@ var WorkflowDocument = class extends FlowDocument {
       from: json.sourceNodeID,
       fromPort: json.sourcePortID,
       to: json.targetNodeID,
-      toPort: json.targetPortID
+      toPort: json.targetPortID,
+      data: json.data
     };
-    if (!parentId) {
+    if (!parentID) {
       return this.linesManager.createLine(lineInfo);
     }
-    const canvasNode = this.getNode(parentId);
+    const canvasNode = this.getNode(parentID);
     if (!canvasNode) {
       return this.linesManager.createLine(lineInfo);
     }
@@ -2246,12 +2701,24 @@ function checkDragSuccess(time, e, originLine) {
   }
   return false;
 }
+function reverseLocation(sourceLocation) {
+  switch (sourceLocation) {
+    case "bottom":
+      return "top";
+    case "left":
+      return "right";
+    case "top":
+      return "bottom";
+    case "right":
+      return "left";
+  }
+}
 var WorkflowDragService = class {
   constructor() {
-    this._onDragLineEventEmitter = new Emitter5();
+    this._onDragLineEventEmitter = new Emitter6();
     this.onDragLineEventChange = this._onDragLineEventEmitter.event;
     this.isDragging = false;
-    this._nodesDragEmitter = new Emitter5();
+    this._nodesDragEmitter = new Emitter6();
     this.onNodesDrag = this._nodesDragEmitter.event;
     this._toDispose = new DisposableCollection2();
     this._droppableTransforms = [];
@@ -2269,86 +2736,80 @@ var WorkflowDragService = class {
   }
   /**
    * 拖拽选中节点
-   * @param event
+   * @param triggerEvent
    */
-  startDragSelectedNodes(event) {
+  async startDragSelectedNodes(triggerEvent) {
     let { selectedNodes } = this.selectService;
-    if (selectedNodes.length === 0 || this.playgroundConfig.readonly || this.playgroundConfig.disabled) {
+    if (selectedNodes.length === 0 || this.playgroundConfig.readonly || this.playgroundConfig.disabled || this.isDragging) {
       return Promise.resolve(false);
     }
-    const sameParent = this.childrenOfContainer(selectedNodes);
-    if (sameParent && sameParent.flowNodeType !== FlowNodeBaseType2.ROOT) {
-      selectedNodes = [sameParent];
-    }
-    const { altKey } = event;
+    this.isDragging = true;
     let startPosition = this.getNodesPosition(selectedNodes);
     let startPositions = selectedNodes.map((node) => {
-      const transform = node.getData(TransformData9);
+      const transform = node.getData(TransformData8);
       return { x: transform.position.x, y: transform.position.y };
     });
     let dragSuccess = false;
     const startTime = Date.now();
     const dragger = new PlaygroundDrag({
-      onDragStart: () => {
-        this.isDragging = true;
+      onDragStart: (dragEvent) => {
+        this._nodesDragEmitter.fire({
+          type: "onDragStart",
+          nodes: selectedNodes,
+          startPositions,
+          dragEvent,
+          triggerEvent,
+          dragger
+        });
       },
-      onDrag: (e) => {
-        if (!dragSuccess && checkDragSuccess(Date.now() - startTime, e)) {
+      onDrag: (dragEvent) => {
+        if (!dragSuccess && checkDragSuccess(Date.now() - startTime, dragEvent)) {
           dragSuccess = true;
-          if (altKey) {
-            const tryCopyNodes = selectedNodes;
-            if (tryCopyNodes.length > 0) {
-              this.selectService.clear();
-              this.commandService.executeCommand("PASTE_NODES" /* PASTE_NODES */, tryCopyNodes, true).then((newNodes) => {
-                if (newNodes && Array.isArray(newNodes) && newNodes.length > 0) {
-                  selectedNodes = newNodes;
-                  startPosition = this.getNodesPosition(tryCopyNodes);
-                  startPositions = tryCopyNodes.filter((n) => !n.getNodeMeta().copyDisable).map((node) => {
-                    const transform = node.getData(TransformData9);
-                    return {
-                      x: transform.position.x,
-                      y: transform.position.y
-                    };
-                  });
-                }
-              });
-            }
-          }
         }
         const offset = this.getDragPosOffset({
-          event: e,
+          event: dragEvent,
           selectedNodes,
           startPosition
         });
+        const positions = [];
         selectedNodes.forEach((node, index) => {
-          const transform = node.getData(TransformData9);
+          const transform = node.getData(TransformData8);
           const nodeStartPosition = startPositions[index];
           const newPosition = {
             x: nodeStartPosition.x + offset.x,
             y: nodeStartPosition.y + offset.y
           };
-          if (node.collapsedChildren?.length > 0) {
-            node.collapsedChildren.forEach((childNode) => {
-              const childNodeTransformData = childNode.getData(FlowNodeTransformData5);
-              childNodeTransformData.fireChange();
-            });
-          }
           transform.update({
             position: newPosition
           });
+          this.document.layout.updateAffectedTransform(node);
+          positions.push(newPosition);
+        });
+        this._nodesDragEmitter.fire({
+          type: "onDragging",
+          nodes: selectedNodes,
+          startPositions,
+          positions,
+          dragEvent,
+          triggerEvent,
+          dragger
         });
       },
-      onDragEnd: () => {
+      onDragEnd: (dragEvent) => {
         this.isDragging = false;
         this._nodesDragEmitter.fire({
           type: "onDragEnd",
           nodes: selectedNodes,
           startPositions,
-          altKey
+          dragEvent,
+          triggerEvent,
+          dragger
         });
+        this.resetContainerInternalPosition(selectedNodes);
       }
     });
-    return dragger.start(event.clientX, event.clientY, this.playgroundConfig).then(() => dragSuccess);
+    const { clientX, clientY } = MouseTouchEvent.getEventCoord(triggerEvent);
+    return dragger.start(clientX, clientY, this.playgroundConfig)?.then(() => dragSuccess);
   }
   /**
    * 通过拖入卡片添加
@@ -2385,7 +2846,7 @@ var WorkflowDragService = class {
         const targetNode = event.currentTarget;
         domNode = cloneNode ? cloneNode(e) : targetNode.cloneNode(true);
         const bounds = targetNode.getBoundingClientRect();
-        startPos = { x: bounds.left, y: bounds.top };
+        startPos = { x: bounds.left + window.scrollX, y: bounds.top + window.scrollY };
         domUtils2.setStyle(domNode, {
           zIndex: 1e3,
           position: "absolute",
@@ -2420,7 +2881,12 @@ var WorkflowDragService = class {
       },
       onDragEnd: async (e) => {
         const dropNode = this._dropNode;
-        const dragNode = await this.dropCard(type, e, data, dropNode);
+        const { allowDrop } = this.canDropToNode({
+          dragNodeType: type,
+          dropNodeType: dropNode?.flowNodeType,
+          dropNode
+        });
+        const dragNode = allowDrop ? await this.dropCard(type, e, data, dropNode) : void 0;
         this.clearDrop();
         if (dragNode) {
           domNode.remove();
@@ -2442,25 +2908,25 @@ var WorkflowDragService = class {
   /**
    * 如果存在容器节点，且传入鼠标坐标，需要用容器的坐标减去传入的鼠标坐标
    */
-  adjustSubNodePosition(subNodeType, containerNode, mousePos, resetEmptyPos = true) {
+  adjustSubNodePosition(subNodeType, containerNode, mousePos) {
     if (!mousePos) {
       return { x: 0, y: 0 };
     }
-    if (!subNodeType || !containerNode || containerNode.flowNodeType === FlowNodeBaseType2.ROOT) {
+    if (!subNodeType || !containerNode || containerNode.flowNodeType === FlowNodeBaseType3.ROOT) {
       return mousePos;
     }
     const isParentEmpty = !containerNode.children || containerNode.children.length === 0;
     const parentPadding = this.document.layout.getPadding(containerNode);
-    const parentTransform = containerNode.getData(TransformData9);
-    if (isParentEmpty && resetEmptyPos) {
+    const containerWorldTransform = containerNode.transform.transform.worldTransform;
+    if (isParentEmpty) {
       return {
         x: 0,
         y: parentPadding.top
       };
     } else {
       return {
-        x: mousePos.x - parentTransform.position.x,
-        y: mousePos.y - parentTransform.position.y
+        x: mousePos.x - containerWorldTransform.tx,
+        y: mousePos.y - containerWorldTransform.ty
       };
     }
   }
@@ -2473,6 +2939,35 @@ var WorkflowDragService = class {
       dispose: () => this.posAdjusters.delete(adjuster)
     };
   }
+  /**
+   * 判断是否可以放置节点
+   */
+  canDropToNode(params) {
+    const { canDropToNode } = this.document.options;
+    const { dragNodeType, dropNode } = params;
+    if (canDropToNode) {
+      const result = canDropToNode(params);
+      if (result) {
+        return {
+          allowDrop: true,
+          dropNode
+        };
+      }
+      return {
+        allowDrop: false
+      };
+    }
+    if (!dragNodeType) {
+      return {
+        allowDrop: false,
+        message: "Please select a node to drop"
+      };
+    }
+    return {
+      allowDrop: true,
+      dropNode
+    };
+  }
   /**
    * 获取拖拽偏移
    */
@@ -2503,23 +2998,24 @@ var WorkflowDragService = class {
     return offset;
   }
   updateDroppableTransforms() {
-    this._droppableTransforms = this.document.getRenderDatas(FlowNodeTransformData5, false).filter((transform) => {
+    this._droppableTransforms = this.document.getRenderDatas(FlowNodeTransformData6, false).filter((transform) => {
       const { entity } = transform;
       if (entity.originParent) {
         return this.nodeSelectable(entity) && this.nodeSelectable(entity.originParent);
       }
       return this.nodeSelectable(entity);
-    }).filter((transform) => {
-      const { entity } = transform;
-      return entity.flowNodeType === FlowNodeBaseType2.SUB_CANVAS;
-    });
+    }).filter((transform) => this.isContainer(transform.entity));
+  }
+  /** 是否容器节点 */
+  isContainer(node) {
+    return node?.getNodeMeta().isContainer ?? false;
   }
   /**
    * 获取节点整体位置
    */
   getNodesPosition(nodes) {
     const selectedBounds = Rectangle8.enlarge(
-      nodes.map((n) => n.getData(FlowNodeTransformData5).bounds)
+      nodes.map((n) => n.getData(FlowNodeTransformData6).bounds)
     );
     const position = {
       x: selectedBounds.x,
@@ -2558,18 +3054,30 @@ var WorkflowDragService = class {
     line.highlightColor = color;
     this.hoverService.clearHovered();
   }
-  handleDragOnNode(toNode, fromPort, line, toPort, originLine) {
-    if (toPort && (originLine?.toPort === toPort || toPort.portType === "input" && this.linesManager.canAddLine(fromPort, toPort, true))) {
-      this.hoverService.updateHoveredKey(toPort.id);
-      line.setToPort(toPort);
+  checkDraggingPort(isDrawingTo, line, draggingNode, draggingPort, originLine) {
+    let successDrawing = false;
+    if (isDrawingTo) {
+      successDrawing = !!(draggingPort && // 同一条线条则不用在判断 canAddLine
+      (originLine?.toPort === draggingPort || draggingPort.portType === "input" && this.linesManager.canAddLine(line.fromPort, draggingPort, true)));
+    } else {
+      successDrawing = !!(draggingPort && // 同一条线条则不用在判断 canAddLine
+      (originLine?.fromPort === draggingPort || draggingPort.portType === "output" && this.linesManager.canAddLine(draggingPort, line.toPort, true)));
+    }
+    if (successDrawing) {
+      this.hoverService.updateHoveredKey(draggingPort.id);
+      if (isDrawingTo) {
+        line.setToPort(draggingPort);
+      } else {
+        line.setFromPort(draggingPort);
+      }
       this._onDragLineEventEmitter.fire({
         type: "onDrag",
-        onDragNodeId: toNode.id
+        onDragNodeId: draggingNode.id
       });
       return {
         hasError: false
       };
-    } else if (toNode.flowNodeType === FlowNodeBaseType2.SUB_CANVAS) {
+    } else if (this.isContainer(draggingNode)) {
       return {
         hasError: false
       };
@@ -2580,12 +3088,44 @@ var WorkflowDragService = class {
       };
     }
   }
+  /**
+   * 容器内子节点总体位置重置为0
+   */
+  resetContainerInternalPosition(nodes) {
+    const container = this.childrenOfContainer(nodes);
+    if (!container) {
+      return;
+    }
+    const bounds = Rectangle8.enlarge(
+      container.blocks.map((node) => {
+        const x = node.transform.position.x - node.transform.bounds.width / 2;
+        const y = node.transform.position.y;
+        const width = node.transform.bounds.width;
+        const height = node.transform.bounds.height;
+        return new Rectangle8(x, y, width, height);
+      })
+    );
+    const containerTransform = container.getData(TransformData8);
+    this.operationService.updateNodePosition(container, {
+      x: containerTransform.position.x + bounds.x,
+      y: containerTransform.position.y + bounds.y
+    });
+    this.document.layout.updateAffectedTransform(container);
+    container.blocks.forEach((node) => {
+      const transform = node.getData(TransformData8);
+      this.operationService.updateNodePosition(node, {
+        x: transform.position.x - bounds.x,
+        y: transform.position.y - bounds.y
+      });
+      this.document.layout.updateAffectedTransform(node);
+    });
+  }
   childrenOfContainer(nodes) {
     if (nodes.length === 0) {
       return;
     }
     const sourceContainer = nodes[0]?.parent;
-    if (!sourceContainer || sourceContainer.collapsedChildren.length !== nodes.length) {
+    if (!sourceContainer || sourceContainer.flowNodeType === FlowNodeBaseType3.ROOT) {
       return;
     }
     const valid = nodes.every((node) => node?.parent === sourceContainer);
@@ -2599,15 +3139,18 @@ var WorkflowDragService = class {
    * @param opts
    * @param event
    */
-  async startDrawingLine(fromPort, event, originLine) {
-    const isFromInActivePort = !originLine && fromPort.isErrorPort() && fromPort.disabled;
-    if (originLine?.disabled || isFromInActivePort || this.playgroundConfig.readonly || this.playgroundConfig.disabled) {
+  async startDrawingLine(port, event, originLine) {
+    const isDrawingTo = port.portType === "output";
+    const isInActivePort = !originLine && port.isErrorPort() && port.disabled;
+    if (originLine?.disabled || isInActivePort || this.playgroundConfig.readonly || this.playgroundConfig.disabled) {
       return { dragSuccess: false, newLine: void 0 };
     }
+    this.selectService.clear();
     const config = this.playgroundConfig;
     const deferred = new PromiseDeferred();
     const preCursor = config.cursor;
-    let line, toPort, toNode, lineErrorReset = false;
+    let line;
+    let newLineInfo;
     const startTime = Date.now();
     let dragSuccess = false;
     const dragger = new PlaygroundDrag({
@@ -2617,57 +3160,49 @@ var WorkflowDragService = class {
             originLine.highlightColor = this.linesManager.lineColor.hidden;
           }
           dragSuccess = true;
-          line = this.linesManager.createLine({
-            from: fromPort.node.id,
-            fromPort: fromPort.portID,
-            drawingTo: config.getPosFromMouseEvent(event)
-          });
+          const pos = config.getPosFromMouseEvent(event);
+          if (isDrawingTo) {
+            line = this.linesManager.createLine({
+              from: port.node.id,
+              fromPort: port.portID,
+              data: originLine?.lineData,
+              drawingTo: {
+                x: pos.x,
+                y: pos.y,
+                location: port.location === "right" ? "left" : "top"
+              }
+            });
+          } else {
+            line = this.linesManager.createLine({
+              to: port.node.id,
+              toPort: port.portID,
+              data: originLine?.lineData,
+              drawingFrom: {
+                x: pos.x,
+                y: pos.y,
+                location: port.location === "left" ? "right" : "bottom"
+              }
+            });
+          }
           if (!line) {
             return;
           }
           config.updateCursor("grab");
-          line.highlightColor = this.linesManager.lineColor.drawing;
+          line.highlightColor = originLine?.lockedColor || this.linesManager.lineColor.drawing;
           this.hoverService.updateHoveredKey("");
         }
         if (!line) {
           return;
         }
-        lineErrorReset = false;
         const dragPos = config.getPosFromMouseEvent(e);
-        toNode = this.linesManager.getNodeFromMousePos(dragPos);
-        toPort = this.linesManager.getPortFromMousePos(dragPos);
-        if (!toPort) {
-          line.setToPort(void 0);
-        } else if (!this.linesManager.canAddLine(fromPort, toPort, true)) {
-          line.highlightColor = this.linesManager.lineColor.error;
-          lineErrorReset = true;
-          line.setToPort(void 0);
-        } else {
-          line.setToPort(toPort);
-        }
-        this._onDragLineEventEmitter.fire({
-          type: "onDrag"
-        });
-        this.setLineColor(line, this.linesManager.lineColor.drawing);
-        if (toNode && toNode.flowNodeType !== FlowNodeBaseType2.SUB_CANVAS) {
-          const portsData = toNode.getData(WorkflowNodePortsData);
-          toPort = portsData.inputPorts[0];
-          const { hasError } = this.handleDragOnNode(toNode, fromPort, line, toPort, originLine);
-          lineErrorReset = hasError;
-        }
-        if (line.toPort) {
-          line.drawingTo = { x: line.toPort.point.x, y: line.toPort.point.y };
-        } else {
-          line.drawingTo = { x: dragPos.x, y: dragPos.y };
-        }
-        originLine?.validate();
-        line.validate();
+        newLineInfo = this.updateDrawingLine(isDrawingTo, line, dragPos, originLine);
       },
       // eslint-disable-next-line complexity
       onDragEnd: async (e) => {
         const dragPos = config.getPosFromMouseEvent(e);
         const onDragLineEndCallbacks = Array.from(this._onDragLineEndCallbacks.values());
         config.updateCursor(preCursor);
+        const { fromPort, toPort, hasError } = newLineInfo || {};
         await Promise.all(
           onDragLineEndCallbacks.map(
             (callback) => callback({
@@ -2692,35 +3227,32 @@ var WorkflowDragService = class {
           deferred.resolve({ dragSuccess });
         };
         if (dragSuccess) {
-          if (originLine && originLine.toPort === toPort) {
+          if (originLine && originLine.toPort === toPort && originLine.fromPort === fromPort) {
             return end();
           }
-          if (toPort && toPort.portType !== "input") {
+          if (toPort && toPort.portType !== "input" || fromPort && fromPort.portType !== "output") {
             return end();
           }
-          const newLineInfo = toPort ? {
+          const newLinePortInfo = toPort && fromPort ? {
             from: fromPort.node.id,
             fromPort: fromPort.portID,
             to: toPort.node.id,
-            toPort: toPort.portID
+            toPort: toPort.portID,
+            data: originLine?.lineData
           } : void 0;
-          const isReset = originLine && toPort;
-          if (isReset && !this.linesManager.canReset(
-            originLine.fromPort,
-            originLine.toPort,
-            toPort
-          )) {
+          const isReset = originLine && newLinePortInfo;
+          if (isReset && !this.linesManager.canReset(originLine, newLinePortInfo)) {
             return end();
           }
-          if (originLine && (!this.linesManager.canRemove(originLine, newLineInfo, false) || lineErrorReset)) {
+          if (originLine && (!this.linesManager.canRemove(originLine, newLinePortInfo, false) || hasError)) {
             return end();
           } else {
             originLine?.dispose();
           }
-          if (!toPort || !this.linesManager.canAddLine(fromPort, toPort, false)) {
+          if (!newLinePortInfo || !this.linesManager.canAddLine(fromPort, toPort, false)) {
             return end();
           }
-          const newLine = this.linesManager.createLine(newLineInfo);
+          const newLine = this.linesManager.createLine(newLinePortInfo);
           if (!newLine) {
             end();
           }
@@ -2733,17 +3265,113 @@ var WorkflowDragService = class {
         }
       }
     });
-    await dragger.start(event.clientX, event.clientY, config);
+    const { clientX, clientY } = MouseTouchEvent.getEventCoord(event);
+    await dragger.start(clientX, clientY, config);
     return deferred.promise;
   }
+  updateDrawingLine(isDrawingTo, line, dragPos, originLine) {
+    let hasError = false;
+    const mouseNode = this.linesManager.getNodeFromMousePos(dragPos);
+    let toNode;
+    let toPort;
+    let fromPort;
+    let fromNode;
+    if (isDrawingTo) {
+      fromPort = line.fromPort;
+      toNode = mouseNode;
+      toPort = this.linesManager.getPortFromMousePos(dragPos, "input");
+      if (toNode && this.canBuildContainerLine(toNode, dragPos)) {
+        toPort = this.getNearestPort(toNode, dragPos, "input");
+        hasError = this.checkDraggingPort(isDrawingTo, line, toNode, toPort, originLine).hasError;
+      }
+      if (!toPort) {
+        line.setToPort(void 0);
+      } else if (!this.linesManager.canAddLine(fromPort, toPort, true)) {
+        hasError = true;
+        line.setToPort(void 0);
+      } else {
+        line.setToPort(toPort);
+      }
+      if (line.toPort) {
+        line.drawingTo = {
+          x: line.toPort.point.x,
+          y: line.toPort.point.y,
+          location: line.toPort.location
+        };
+      } else {
+        line.drawingTo = {
+          x: dragPos.x,
+          y: dragPos.y,
+          location: reverseLocation(line.fromPort.location)
+        };
+      }
+    } else {
+      toPort = line.toPort;
+      fromNode = mouseNode;
+      fromPort = this.linesManager.getPortFromMousePos(dragPos, "output");
+      if (fromNode && this.canBuildContainerLine(fromNode, dragPos)) {
+        fromPort = this.getNearestPort(fromNode, dragPos, "output");
+        hasError = this.checkDraggingPort(
+          isDrawingTo,
+          line,
+          fromNode,
+          fromPort,
+          originLine
+        ).hasError;
+      }
+      if (!fromPort) {
+        line.setFromPort(void 0);
+      } else if (!this.linesManager.canAddLine(fromPort, toPort, true)) {
+        hasError = true;
+        line.setFromPort(void 0);
+      } else {
+        line.setFromPort(fromPort);
+      }
+      if (line.fromPort) {
+        line.drawingFrom = {
+          x: line.fromPort.point.x,
+          y: line.fromPort.point.y,
+          location: line.fromPort.location
+        };
+      } else {
+        line.drawingFrom = {
+          x: dragPos.x,
+          y: dragPos.y,
+          location: reverseLocation(line.toPort.location)
+        };
+      }
+    }
+    this._onDragLineEventEmitter.fire({
+      type: "onDrag"
+    });
+    if (hasError) {
+      this.setLineColor(line, this.linesManager.lineColor.error);
+    } else {
+      this.setLineColor(line, originLine?.lockedColor || this.linesManager.lineColor.drawing);
+    }
+    originLine?.validate();
+    line.validate();
+    return {
+      fromPort,
+      toPort,
+      hasError
+    };
+  }
   /**
    * 重新连接线条
    * @param line
    * @param e
    */
   async resetLine(line, e) {
-    const { fromPort } = line;
-    const { dragSuccess } = await this.startDrawingLine(fromPort, e, line);
+    const { fromPort, toPort } = line;
+    const mousePos = this.playgroundConfig.getPosFromMouseEvent(e);
+    const distanceFrom = Point.getDistance(fromPort.point, mousePos);
+    const distanceTo = Point.getDistance(toPort.point, mousePos);
+    const { dragSuccess } = await this.startDrawingLine(
+      distanceTo <= distanceFrom || !this.document.options.twoWayConnection ? fromPort : toPort,
+      e,
+      line
+    );
     if (!dragSuccess) {
       this.selectService.select(line);
     }
@@ -2758,6 +3386,36 @@ var WorkflowDragService = class {
       }
     };
   }
+  /** 能否建立容器连线 */
+  canBuildContainerLine(node, mousePos) {
+    const isContainer = this.isContainer(node);
+    if (!isContainer) {
+      return true;
+    }
+    const { padding, bounds } = node.transform;
+    const DEFAULT_DELTA = 10;
+    const leftDelta = padding.left * 2 / 3 || DEFAULT_DELTA;
+    const rightDelta = padding.right * 2 / 3 || DEFAULT_DELTA;
+    const bottomDelta = padding.bottom * 2 / 3 || DEFAULT_DELTA;
+    const topDelta = padding.top * 2 / 3 || DEFAULT_DELTA;
+    const rectangles = [
+      new Rectangle8(bounds.x, bounds.y, leftDelta, bounds.height),
+      // left
+      new Rectangle8(bounds.x, bounds.y, bounds.width, topDelta),
+      // top
+      new Rectangle8(bounds.x, bounds.y + bounds.height - bottomDelta, bounds.width, bottomDelta),
+      // bottom
+      new Rectangle8(bounds.x + bounds.width - rightDelta, bounds.y, rightDelta, bounds.height)
+      // right
+    ];
+    return rectangles.some((rect) => rect.contains(mousePos.x, mousePos.y));
+  }
+  /** 获取最近的 port */
+  getNearestPort(node, mousePos, portType = "input") {
+    const portsData = node.ports;
+    const distanceSortedPorts = (portType === "input" ? portsData.inputPorts : portsData.outputPorts).sort((a, b) => Point.getDistance(mousePos, a.point) - Point.getDistance(mousePos, b.point));
+    return distanceSortedPorts[0];
+  }
 };
 __decorateClass([
   inject6(PlaygroundConfigEntity5)
@@ -2778,7 +3436,7 @@ __decorateClass([
   inject6(WorkflowSelectService)
 ], WorkflowDragService.prototype, "selectService", 2);
 __decorateClass([
-  inject6(FlowOperationBaseService)
+  inject6(WorkflowOperationBaseService)
 ], WorkflowDragService.prototype, "operationService", 2);
 __decorateClass([
   inject6(WorkflowDocumentOptions)
@@ -2794,16 +3452,16 @@ WorkflowDragService = __decorateClass([
 import { inject as inject7, injectable as injectable7, postConstruct as postConstruct3 } from "inversify";
 import { PlaygroundConfigEntity as PlaygroundConfigEntity6 } from "@flowgram.ai/core";
 import { EntityManager as EntityManager3 } from "@flowgram.ai/core";
-import { DisposableCollection as DisposableCollection3, Emitter as Emitter6 } from "@flowgram.ai/utils";
+import { DisposableCollection as DisposableCollection3, Emitter as Emitter7 } from "@flowgram.ai/utils";
 
 // src/utils/layout-to-positions.ts
-import { FlowNodeTransformData as FlowNodeTransformData6 } from "@flowgram.ai/document";
-import { TransformData as TransformData10, startTween } from "@flowgram.ai/core";
+import { FlowNodeTransformData as FlowNodeTransformData7 } from "@flowgram.ai/document";
+import { TransformData as TransformData9, startTween } from "@flowgram.ai/core";
 var layoutToPositions = async (nodes, nodePositionMap) => {
   const newNodePositionMap = {};
   nodes.forEach((node) => {
-    const transform = node.getData(TransformData10);
-    const nodeTransform = node.getData(FlowNodeTransformData6);
+    const transform = node.getData(TransformData9);
+    const nodeTransform = node.getData(FlowNodeTransformData7);
     newNodePositionMap[node.id] = {
       x: transform.position.x,
       y: transform.position.y + nodeTransform.bounds.height / 2
@@ -2816,21 +3474,17 @@ var layoutToPositions = async (nodes, nodePositionMap) => {
       duration: 300,
       onUpdate: (v) => {
         nodes.forEach((node) => {
-          const transform = node.getData(TransformData10);
+          const transform = node.getData(TransformData9);
           const deltaX = (nodePositionMap[node.id].x - transform.position.x) * v.d / 100;
           const deltaY = (nodePositionMap[node.id].y - transform.bounds.height / 2 - transform.position.y) * v.d / 100;
-          if (node.collapsedChildren?.length > 0) {
-            node.collapsedChildren.forEach((childNode) => {
-              const childNodeTransformData = childNode.getData(FlowNodeTransformData6);
-              childNodeTransformData.fireChange();
-            });
-          }
           transform.update({
             position: {
               x: transform.position.x + deltaX,
               y: transform.position.y + deltaY
             }
           });
+          const document2 = node.document;
+          document2.layout.updateAffectedTransform(node);
         });
       },
       onComplete: () => {
@@ -2843,7 +3497,7 @@ var layoutToPositions = async (nodes, nodePositionMap) => {
 // src/service/workflow-reset-layout-service.ts
 var WorkflowResetLayoutService = class {
   constructor() {
-    this._resetLayoutEmitter = new Emitter6();
+    this._resetLayoutEmitter = new Emitter7();
     /**
      * reset layout事件
      */
@@ -2900,6 +3554,95 @@ WorkflowResetLayoutService = __decorateClass([
   injectable7()
 ], WorkflowResetLayoutService);
 
+// src/service/workflow-operation-base-service.ts
+import { inject as inject8 } from "inversify";
+import { Emitter as Emitter8 } from "@flowgram.ai/utils";
+import { FlowOperationBaseServiceImpl } from "@flowgram.ai/document";
+import { TransformData as TransformData10 } from "@flowgram.ai/core";
+var WorkflowOperationBaseServiceImpl = class extends FlowOperationBaseServiceImpl {
+  constructor() {
+    super(...arguments);
+    this.onNodePostionUpdateEmitter = new Emitter8();
+    this.onNodePostionUpdate = this.onNodePostionUpdateEmitter.event;
+  }
+  updateNodePosition(nodeOrId, position) {
+    const node = this.toNodeEntity(nodeOrId);
+    if (!node) {
+      return;
+    }
+    const transformData = node.getData(TransformData10);
+    const oldPosition = {
+      x: transformData.position.x,
+      y: transformData.position.y
+    };
+    transformData.update({
+      position
+    });
+    this.onNodePostionUpdateEmitter.fire({
+      node,
+      oldPosition,
+      newPosition: position
+    });
+  }
+  fromJSON(json) {
+    if (this.document.disposed) return;
+    const workflowJSON = {
+      nodes: json.nodes ?? [],
+      edges: json.edges ?? []
+    };
+    const oldNodes = this.document.getAllNodes();
+    const oldEdges = this.linesManager.getAllLines();
+    const oldPositionMap = new Map(
+      oldNodes.map((node) => [
+        node.id,
+        {
+          x: node.transform.transform.position.x,
+          y: node.transform.transform.position.y
+        }
+      ])
+    );
+    const newNodes = [];
+    const newEdges = [];
+    this.document.batchAddFromJSON(workflowJSON, {
+      onNodeCreated: (node) => newNodes.push(node),
+      onEdgeCreated: (edge) => newEdges.push(edge)
+    });
+    const newEdgeIDSet = new Set(newEdges.map((edge) => edge.id));
+    oldEdges.forEach((edge) => {
+      if (!newEdgeIDSet.has(edge.id)) {
+        edge.dispose();
+        return;
+      }
+    });
+    const newNodeIDSet = new Set(newNodes.map((node) => node.id));
+    oldNodes.forEach((node) => {
+      if (!newNodeIDSet.has(node.id)) {
+        node.dispose();
+        return;
+      }
+      const oldPosition = oldPositionMap.get(node.id);
+      const newPosition = {
+        x: node.transform.transform.position.x,
+        y: node.transform.transform.position.y
+      };
+      if (oldPosition && (oldPosition.x !== newPosition.x || oldPosition.y !== newPosition.y)) {
+        this.onNodePostionUpdateEmitter.fire({
+          node,
+          oldPosition,
+          newPosition
+        });
+      }
+    });
+    this.document.fireRender();
+  }
+};
+__decorateClass([
+  inject8(WorkflowDocument)
+], WorkflowOperationBaseServiceImpl.prototype, "document", 2);
+__decorateClass([
+  inject8(WorkflowLinesManager)
+], WorkflowOperationBaseServiceImpl.prototype, "linesManager", 2);
+
 // src/hooks/use-playground-readonly-state.ts
 import { useEffect } from "react";
 import { usePlayground, useRefresh } from "@flowgram.ai/core";
@@ -2920,14 +3663,18 @@ function usePlaygroundReadonlyState(listenChange) {
 function checkTargetDraggable(el) {
   return el && el.tagName !== "INPUT" && el.tagName !== "TEXTAREA" && !el.closest(".flow-canvas-not-draggable");
 }
+var isFirefox = typeof navigator !== "undefined" && navigator?.userAgent?.includes?.("Firefox");
 function useNodeRender(nodeFromProps) {
   const node = nodeFromProps || useContext(PlaygroundEntityContext);
-  const renderData = node.getData(FlowNodeRenderData2);
-  const portsData = node.getData(WorkflowNodePortsData);
+  const renderData = node.getData(FlowNodeRenderData3);
+  const portsData = node.ports;
   const readonly = usePlaygroundReadonlyState();
   const dragService = useService(WorkflowDragService);
   const selectionService = useService(WorkflowSelectService);
   const isDragging = useRef(false);
+  const [formValueVersion, updateFormValueVersion] = useState(0);
+  const formValueDependRef = useRef(false);
+  formValueDependRef.current = false;
   const nodeRef = useRef(null);
   const [linkingNodeId, setLinkingNodeId] = useState("");
   useEffect2(() => {
@@ -2944,15 +3691,17 @@ function useNodeRender(nodeFromProps) {
   }, []);
   const startDrag = useCallback(
     (e) => {
-      e.preventDefault();
+      MouseTouchEvent2.preventDefault(e);
       if (!selectionService.isSelected(node.id)) {
         selectNode(e);
       }
-      if (!checkTargetDraggable(e.target) || !checkTargetDraggable(document.activeElement)) {
-        return;
+      if (!MouseTouchEvent2.isTouchEvent(e)) {
+        if (!checkTargetDraggable(e.target) || !checkTargetDraggable(document.activeElement)) {
+          return;
+        }
       }
       isDragging.current = true;
-      dragService.startDragSelectedNodes(e).finally(
+      dragService.startDragSelectedNodes(e)?.finally(
         () => setTimeout(() => {
           isDragging.current = false;
         })
@@ -2965,7 +3714,7 @@ function useNodeRender(nodeFromProps) {
       if (isDragging.current) {
         return;
       }
-      if (e.metaKey || e.shiftKey || e.ctrlKey) {
+      if (e.shiftKey) {
         selectionService.toggleSelect(node);
       } else {
         selectionService.selectNode(node);
@@ -2978,7 +3727,6 @@ function useNodeRender(nodeFromProps) {
   );
   const deleteNode = useCallback(() => node.dispose(), [node]);
   useListenEvents(portsData.onDataChange);
-  const isFirefox = navigator?.userAgent?.includes?.("Firefox");
   const onFocus = useCallback(() => {
     if (isFirefox) {
       nodeRef.current?.setAttribute("draggable", "false");
@@ -2991,8 +3739,8 @@ function useNodeRender(nodeFromProps) {
   }, []);
   const getExtInfo = useCallback(() => node.getExtInfo(), [node]);
   const updateExtInfo = useCallback(
-    (data) => {
-      node.updateExtInfo(data);
+    (data, fullUpdate) => {
+      node.updateExtInfo(data, fullUpdate);
     },
     [node]
   );
@@ -3001,44 +3749,94 @@ function useNodeRender(nodeFromProps) {
   const toggleExpand = useCallback(() => {
     renderData.toggleExpand();
   }, [renderData]);
-  return {
-    node,
-    selected: selectionService.isSelected(node.id),
-    activated: selectionService.isActivated(node.id),
-    expanded: renderData.expanded,
-    startDrag,
-    ports: portsData.allPorts,
-    deleteNode,
-    selectNode,
-    readonly,
-    linkingNodeId,
-    nodeRef,
-    onFocus,
-    onBlur,
-    getExtInfo,
-    updateExtInfo,
-    toggleExpand,
-    get form() {
-      if (!form) return void 0;
-      return {
-        ...form,
-        get values() {
+  const selected = selectionService.isSelected(node.id);
+  const activated = selectionService.isActivated(node.id);
+  const expanded = renderData.expanded;
+  useEffect2(() => {
+    const toDispose = form?.onFormValuesChange(() => {
+      if (formValueDependRef.current) {
+        updateFormValueVersion((v) => v + 1);
+      }
+    });
+    return () => toDispose?.dispose();
+  }, [form]);
+  return useMemo(
+    () => ({
+      id: node.id,
+      type: node.flowNodeType,
+      get data() {
+        if (form) {
+          formValueDependRef.current = true;
           return form.values;
-        },
-        get state() {
-          return formState;
         }
-      };
-    }
-  };
+        return getExtInfo();
+      },
+      updateData(values) {
+        if (form) {
+          form.updateFormValues(values);
+        } else {
+          updateExtInfo(values, true);
+        }
+      },
+      node,
+      selected,
+      activated,
+      expanded,
+      startDrag,
+      get ports() {
+        return portsData.allPorts;
+      },
+      deleteNode,
+      selectNode,
+      readonly,
+      linkingNodeId,
+      nodeRef,
+      onFocus,
+      onBlur,
+      getExtInfo,
+      updateExtInfo,
+      toggleExpand,
+      get form() {
+        if (!form) return void 0;
+        return {
+          ...form,
+          get values() {
+            formValueDependRef.current = true;
+            return form.values;
+          },
+          get state() {
+            return formState;
+          }
+        };
+      }
+    }),
+    [
+      node,
+      selected,
+      activated,
+      expanded,
+      startDrag,
+      deleteNode,
+      selectNode,
+      readonly,
+      linkingNodeId,
+      nodeRef,
+      onFocus,
+      onBlur,
+      getExtInfo,
+      updateExtInfo,
+      toggleExpand,
+      formValueVersion
+    ]
+  );
 }
 
 // src/hooks/use-current-dom-node.ts
-import { FlowNodeRenderData as FlowNodeRenderData3 } from "@flowgram.ai/document";
+import { FlowNodeRenderData as FlowNodeRenderData4 } from "@flowgram.ai/document";
 import { useEntityFromContext } from "@flowgram.ai/core";
 function useCurrentDomNode() {
   const entity = useEntityFromContext();
-  const renderData = entity.getData(FlowNodeRenderData3);
+  const renderData = entity.getData(FlowNodeRenderData4);
   return renderData.node;
 }
 
@@ -3068,20 +3866,20 @@ var InteractiveType = /* @__PURE__ */ ((InteractiveType2) => {
 
 // src/workflow-document-container-module.ts
 import { ContainerModule } from "inversify";
-import { FlowDocument as FlowDocument2, FlowDocumentContribution } from "@flowgram.ai/document";
 import { bindContributions } from "@flowgram.ai/utils";
+import { FlowDocument as FlowDocument2, FlowDocumentContribution } from "@flowgram.ai/document";
 
 // src/workflow-document-contribution.ts
-import { injectable as injectable8, inject as inject8 } from "inversify";
+import { injectable as injectable8, inject as inject9 } from "inversify";
 import {
-  FlowNodeRenderData as FlowNodeRenderData4,
-  FlowNodeTransformData as FlowNodeTransformData7
+  FlowNodeRenderData as FlowNodeRenderData5,
+  FlowNodeTransformData as FlowNodeTransformData8
 } from "@flowgram.ai/document";
 var WorkflowDocumentContribution = class {
   registerDocument(document2) {
     document2.registerNodeDatas(
-      FlowNodeTransformData7,
-      FlowNodeRenderData4,
+      FlowNodeTransformData8,
+      FlowNodeRenderData5,
       WorkflowNodePortsData,
       WorkflowNodeLinesData
     );
@@ -3089,7 +3887,7 @@ var WorkflowDocumentContribution = class {
   }
 };
 __decorateClass([
-  inject8(FreeLayout)
+  inject9(FreeLayout)
 ], WorkflowDocumentContribution.prototype, "freeLayout", 2);
 WorkflowDocumentContribution = __decorateClass([
   injectable8()
@@ -3097,11 +3895,35 @@ WorkflowDocumentContribution = __decorateClass([
 
 // src/utils/get-url-params.ts
 function getUrlParams() {
-  return location.search.replace(/^\?/, "").split("&").reduce((res, key) => {
+  const paramsMap = /* @__PURE__ */ new Map();
+  location.search.replace(/^\?/, "").split("&").forEach((key) => {
+    if (!key) return;
     const [k, v] = key.split("=");
-    res[k] = v;
-    return res;
-  }, {});
+    if (k) {
+      const decodedKey = decodeURIComponent(k.trim());
+      const decodedValue = v ? decodeURIComponent(v.trim()) : "";
+      const dangerousProps = [
+        "__proto__",
+        "constructor",
+        "prototype",
+        "__defineGetter__",
+        "__defineSetter__",
+        "__lookupGetter__",
+        "__lookupSetter__",
+        "hasOwnProperty",
+        "isPrototypeOf",
+        "propertyIsEnumerable",
+        "toString",
+        "valueOf",
+        "toLocaleString"
+      ];
+      if (dangerousProps.includes(decodedKey.toLowerCase())) {
+        return;
+      }
+      paramsMap.set(decodedKey, decodedValue);
+    }
+  });
+  return Object.fromEntries(paramsMap);
 }
 
 // src/workflow-document-container-module.ts
@@ -3114,6 +3936,7 @@ var WorkflowDocumentContainerModule = new ContainerModule(
     bind(WorkflowSelectService).toSelf().inSingletonScope();
     bind(WorkflowHoverService).toSelf().inSingletonScope();
     bind(WorkflowResetLayoutService).toSelf().inSingletonScope();
+    bind(WorkflowOperationBaseService).to(WorkflowOperationBaseServiceImpl).inSingletonScope();
     bind(URLParams).toDynamicValue(() => getUrlParams()).inSingletonScope();
     bindContributions(bind, WorkflowDocumentContribution, [FlowDocumentContribution]);
     bind(WorkflowDocumentOptions).toConstantValue({
@@ -3123,81 +3946,6 @@ var WorkflowDocumentContainerModule = new ContainerModule(
     bind(WorkflowDocumentProvider).toDynamicValue((ctx) => () => ctx.container.get(WorkflowDocument)).inSingletonScope();
   }
 );
-
-// src/utils/simple-line.ts
-import { Point, Rectangle as Rectangle9 } from "@flowgram.ai/utils";
-var LINE_PADDING = 12;
-var WorkflowSimpleLineContribution = class {
-  constructor(entity) {
-    this.entity = entity;
-  }
-  get path() {
-    return this.data?.path ?? "";
-  }
-  calcDistance(pos) {
-    if (!this.data) {
-      return Number.MAX_SAFE_INTEGER;
-    }
-    const [start, end] = this.data.points;
-    return Point.getDistance(pos, this.projectPointOnLine(pos, start, end));
-  }
-  get bounds() {
-    if (!this.data) {
-      return new Rectangle9();
-    }
-    return this.data.bbox;
-  }
-  update(params) {
-    const { fromPos, toPos } = params;
-    const { vertical } = this.entity;
-    const sourceOffset = {
-      x: vertical ? 0 : POINT_RADIUS,
-      y: vertical ? POINT_RADIUS : 0
-    };
-    const targetOffset = {
-      x: vertical ? 0 : -POINT_RADIUS,
-      y: vertical ? -POINT_RADIUS : 0
-    };
-    const points = [
-      {
-        x: fromPos.x + sourceOffset.x,
-        y: fromPos.y + sourceOffset.y
-      },
-      {
-        x: toPos.x + targetOffset.x,
-        y: toPos.y + targetOffset.y
-      }
-    ];
-    const bbox = Rectangle9.createRectangleWithTwoPoints(points[0], points[1]);
-    const adjustedPoints = points.map((p) => ({
-      x: p.x - bbox.x + LINE_PADDING,
-      y: p.y - bbox.y + LINE_PADDING
-    }));
-    const path = `M ${adjustedPoints[0].x} ${adjustedPoints[0].y} L ${adjustedPoints[1].x} ${adjustedPoints[1].y}`;
-    this.data = {
-      points,
-      path,
-      bbox
-    };
-  }
-  projectPointOnLine(point, lineStart, lineEnd) {
-    const dx = lineEnd.x - lineStart.x;
-    const dy = lineEnd.y - lineStart.y;
-    if (dx === 0) {
-      return { x: lineStart.x, y: point.y };
-    }
-    if (dy === 0) {
-      return { x: point.x, y: lineStart.y };
-    }
-    const t = ((point.x - lineStart.x) * dx + (point.y - lineStart.y) * dy) / (dx * dx + dy * dy);
-    const clampedT = Math.max(0, Math.min(1, t));
-    return {
-      x: lineStart.x + clampedT * dx,
-      y: lineStart.y + clampedT * dy
-    };
-  }
-};
-WorkflowSimpleLineContribution.type = "WorkflowSimpleLineContribution";
 export {
   EditorCursorState,
   InteractiveType,
@@ -3223,17 +3971,20 @@ export {
   WorkflowNodeEntity,
   WorkflowNodeLinesData,
   WorkflowNodePortsData,
+  WorkflowOperationBaseService,
+  WorkflowOperationBaseServiceImpl,
   WorkflowPortEntity,
   WorkflowResetLayoutService,
   WorkflowSelectService,
-  WorkflowSimpleLineContribution,
   bindConfigEntity,
+  buildGroupJSON,
   compose,
   composeAsync,
   delay,
   domReactToBounds,
   fitView,
   getAntiOverlapPosition,
+  getLineCenter,
   getPortEntityId,
   nanoid,
   useConfigEntity,
@@ -3247,7 +3998,6 @@ export {
   usePlayground2 as usePlayground,
   usePlaygroundContainer,
   usePlaygroundContext,
-  usePlaygroundLatest,
   usePlaygroundReadonlyState,
   useRefresh2 as useRefresh,
   useService3 as useService,