@flowgram.ai/free-layout-core 0.1.0-alpha.12 → 0.1.0-alpha.14

package/dist/esm/index.js

@@ -7,11 +7,11 @@ import "./chunk-TQLT57GW.js";
 import "./chunk-CGOMTQ3G.js";
 import {
   WorkflowContentChangeType
-} from "./chunk-242F2JCI.js";
+} from "./chunk-U2XMPOSL.js";
 import {
   LineColors,
   LineType
-} from "./chunk-CTGO4RKX.js";
+} from "./chunk-5BT3ZR4D.js";
 import "./chunk-DDJTYHXN.js";
 import {
   WorkflowOperationBaseService
@@ -100,6 +100,16 @@ var buildGroupJSON = (json) => {
   };
 };
 
+// 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) {
@@ -110,8 +120,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)
@@ -158,7 +168,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
@@ -167,7 +177,7 @@ 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,
@@ -176,17 +186,18 @@ import {
 } from "@flowgram.ai/core";
 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._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()));
@@ -195,6 +206,9 @@ 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;
@@ -219,28 +233,65 @@ var WorkflowPortEntity = class extends Entity {
   isErrorPort() {
     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(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;
+    let point = { x: 0, y: 0 };
+    const offset = this._offset || { 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);
@@ -307,6 +358,32 @@ 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.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();
@@ -345,17 +422,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
    */
@@ -494,9 +580,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;
   }
 };
@@ -537,6 +621,9 @@ var _WorkflowNodeLinesData = class _WorkflowNodeLinesData extends EntityData2 {
   get allLines() {
     return this.data.inputLines.concat(this.data.outputLines);
   }
+  get availableLines() {
+    return this.allLines.filter((line) => !line.isDrawing && !line.isHidden);
+  }
   /**
    * 输入节点
    */
@@ -637,8 +724,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" }
       }
     };
   }
@@ -678,22 +765,35 @@ 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
-    };
+    if (this.entity.info.drawingTo) {
+      this.data.position.to = this.entity.info.drawingTo;
+    } else {
+      this.data.position.to = this.entity.to?.getData(WorkflowNodePortsData)?.getInputPoint(this.entity.info.toPort) ?? {
+        x: this.data.position.from.x,
+        y: this.data.position.from.y,
+        location: this.data.position.from.location === "right" ? "left" : "top"
+      };
+    }
     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() {
@@ -723,13 +823,16 @@ var POINT_RADIUS = 10;
 var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   constructor(opts) {
     super(opts);
+    this._onLineDataChangeEmitter = new Emitter2();
+    this.onLineDataChange = this._onLineDataChangeEmitter.event;
     this._uiState = {
       hasError: false,
       flowing: false,
       disabled: false,
-      vertical: false,
       hideArrow: false,
       reverse: false,
+      shrink: 10,
+      curvature: 0.25,
       highlightColor: "",
       lockedColor: ""
     };
@@ -747,7 +850,8 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       to: opts.to,
       drawingTo: opts.drawingTo,
       fromPort: opts.fromPort,
-      toPort: opts.toPort
+      toPort: opts.toPort,
+      data: opts.data
     });
     if (opts.drawingTo) {
       this.isDrawing = true;
@@ -760,6 +864,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       this.fromPort?.validate();
       this.toPort?.validate();
     });
+    this.toDispose.push(this._onLineDataChangeEmitter);
   }
   /**
    * 转成线条 id
@@ -802,9 +907,13 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
    * 更新线条扩展数据
    * @param data
    */
-  set lineData(data) {
-    this._lineData = data;
-    this.fireChange();
+  set lineData(newValue) {
+    const oldValue = this._lineData;
+    if (!isEqual2(oldValue, newValue)) {
+      this._lineData = newValue;
+      this._onLineDataChangeEmitter.fire({ oldValue, newValue });
+      this.fireChange();
+    }
   }
   /**
    * 获取线条的前置节点
@@ -827,20 +936,17 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   }
   /**
    * 获取是否 testrun processing
-   * @deprecated  use `uiState.flowing` instead
+   * @deprecated  use `flowing` instead
    */
   get processing() {
     return this._uiState.flowing;
   }
   /**
    * 设置 testrun processing 状态
-   * @deprecated  use `uiState.flowing` instead
+   * @deprecated  use `flowing` instead
    */
   set processing(status) {
-    if (this._uiState.flowing !== status) {
-      this._uiState.flowing = status;
-      this.fireChange();
-    }
+    this.flowing = status;
   }
   // 获取连线是否为错误态
   get hasError() {
@@ -870,7 +976,6 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       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 {
@@ -895,7 +1000,6 @@ 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();
     }
@@ -928,6 +1032,9 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   get bounds() {
     return this.getData(WorkflowLineRenderData).bounds;
   }
+  get center() {
+    return this.getData(WorkflowLineRenderData).center;
+  }
   /**
    * 获取点和线最接近的距离
    */
@@ -961,13 +1068,25 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   get flowing() {
     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, this.uiState.disabled);
   }
   /** 是否竖向 */
   get vertical() {
-    return this.linesManager.isVerticalLine(this, this.uiState.vertical);
+    const fromLocation = this.fromPort.location;
+    const toLocation = this.toPort?.location;
+    if (toLocation) {
+      return toLocation === "top";
+    } else {
+      return fromLocation === "bottom";
+    }
   }
   /** 获取线条渲染器类型 */
   get renderType() {
@@ -975,7 +1094,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);
@@ -989,6 +1108,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       this.info = info;
       this._from = this.document.getNode(info.from);
       this._to = info.to ? this.document.getNode(info.to) : void 0;
+      this._lineData = info.data;
       this.fireChange();
     }
   }
@@ -1149,12 +1269,12 @@ WorkflowSelectService = __decorateClass([
 
 // src/service/workflow-hover-service.ts
 import { inject as inject2, injectable as injectable2 } from "inversify";
-import { Emitter as Emitter2 } from "@flowgram.ai/utils";
+import { Emitter as Emitter3 } from "@flowgram.ai/utils";
 import { EntityManager } from "@flowgram.ai/core";
 var WorkflowHoverService = class {
   constructor() {
-    this.onHoveredChangeEmitter = new Emitter2();
-    this.onUpdateHoverPositionEmitter = new Emitter2();
+    this.onHoveredChangeEmitter = new Emitter3();
+    this.onUpdateHoverPositionEmitter = new Emitter3();
     this.onHoveredChange = this.onHoveredChangeEmitter.event;
     this.onUpdateHoverPosition = this.onUpdateHoverPositionEmitter.event;
     // 当前鼠标 hover 位置
@@ -1220,7 +1340,7 @@ 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
@@ -1241,7 +1361,7 @@ import {
 // src/workflow-lines-manager.ts
 import { last } from "lodash-es";
 import { inject as inject3, injectable as injectable3 } from "inversify";
-import { DisposableCollection, Emitter as Emitter3 } from "@flowgram.ai/utils";
+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";
 
@@ -1325,8 +1445,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();
     /**
      * 有效的线条被添加或者删除时候触发，未连上的线条不算
      */
@@ -1397,6 +1517,9 @@ var WorkflowLinesManager = class {
       WorkflowLineEntity.portInfoToLineId(portInfo)
     );
   }
+  getLineById(id) {
+    return this.entityManager.getEntityById(id);
+  }
   replaceLine(oldPortInfo, newPortInfo) {
     const oldLine = this.getLine(oldPortInfo);
     if (oldLine) {
@@ -1405,7 +1528,7 @@ var WorkflowLinesManager = class {
     return this.createLine(newPortInfo);
   }
   createLine(options) {
-    const { from, to, drawingTo, fromPort, toPort } = options;
+    const { from, to, drawingTo, fromPort, toPort, data } = options;
     const available = Boolean(from && to);
     const key = options.key || WorkflowLineEntity.portInfoToLineId(options);
     let line = this.entityManager.getEntityById(key);
@@ -1428,7 +1551,8 @@ var WorkflowLinesManager = class {
       fromPort,
       toPort,
       to,
-      drawingTo
+      drawingTo,
+      data
     });
     this.registerData(line);
     fromNode.addLine(line);
@@ -1449,6 +1573,14 @@ var WorkflowLinesManager = class {
         });
       }
     });
+    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 */,
@@ -1512,12 +1644,6 @@ var WorkflowLinesManager = class {
     }
     return defaultValue;
   }
-  isVerticalLine(line, defaultValue = false) {
-    if (this.options.isVerticalLine) {
-      return this.options.isVerticalLine(line);
-    }
-    return defaultValue;
-  }
   setLineRenderType(line) {
     if (this.options.setLineRenderType) {
       return this.options.setLineRenderType(line);
@@ -1561,6 +1687,14 @@ var WorkflowLinesManager = class {
     if (fromPort === toPort || fromPort.node === toPort.node || fromPort.portType !== "output" || toPort.portType !== "input" || 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) {
       return this.options.canAddLine(fromPort, toPort, this, silent);
     }
@@ -1664,7 +1798,7 @@ WorkflowLinesManager = __decorateClass([
 // src/workflow-document.ts
 import { customAlphabet } from "nanoid";
 import { inject as inject5, injectable as injectable5, optional, postConstruct } from "inversify";
-import { Emitter as Emitter4 } from "@flowgram.ai/utils";
+import { Emitter as Emitter5 } from "@flowgram.ai/utils";
 import { NodeEngineContext } from "@flowgram.ai/form-core";
 import {
   FlowDocument,
@@ -1825,10 +1959,10 @@ 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;
     /**
      * 数据加载完成
@@ -1840,6 +1974,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();
@@ -2147,10 +2286,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 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 = /* @__PURE__ */ new Set([endNodeId, ...nodeInContainer]);
+    const associatedCache = new Set(nodeInContainer);
+    if (endNodeId) {
+      associatedCache.add(endNodeId);
+    }
     const bfs = (nodeId) => {
       if (associatedCache.has(nodeId)) {
         return;
@@ -2164,7 +2306,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;
   }
@@ -2286,6 +2430,11 @@ var WorkflowDocument = class extends FlowDocument {
    * 导出数据
    */
   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);
     const json = {
       nodes: rootJSON.blocks ?? [],
@@ -2298,9 +2447,18 @@ var WorkflowDocument = class extends FlowDocument {
     this._onReloadEmitter.dispose();
   }
   /**
-   * 逐层创建节点和线条
+   * 批量添加节点
+   * @deprecated use 'batchAddFromJSON' instead
+   * @param json
+   * @param options
    */
   renderJSON(json, options) {
+    return this.batchAddFromJSON(json, options);
+  }
+  /**
+   * 批量添加节点
+   */
+  batchAddFromJSON(json, options) {
     const { parent = this.root, isClone = false } = options ?? {};
     const containerID = this.getNodeSubCanvas(parent)?.canvasNode.id ?? parent.id;
     const processedJSON = buildGroupJSON(json);
@@ -2366,7 +2524,8 @@ 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) {
       return this.linesManager.createLine(lineInfo);
@@ -2431,10 +2590,10 @@ function checkDragSuccess(time, e, originLine) {
 }
 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 = [];
@@ -2833,10 +2992,16 @@ var WorkflowDragService = class {
             originLine.highlightColor = this.linesManager.lineColor.hidden;
           }
           dragSuccess = true;
+          const pos = config.getPosFromMouseEvent(event);
           line = this.linesManager.createLine({
             from: fromPort.node.id,
             fromPort: fromPort.portID,
-            drawingTo: config.getPosFromMouseEvent(event)
+            data: originLine?.lineData,
+            drawingTo: {
+              x: pos.x,
+              y: pos.y,
+              location: fromPort.location === "right" ? "left" : "top"
+            }
           });
           if (!line) {
             return;
@@ -2871,9 +3036,17 @@ var WorkflowDragService = class {
           lineErrorReset = hasError;
         }
         if (line.toPort) {
-          line.drawingTo = { x: line.toPort.point.x, y: line.toPort.point.y };
+          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 };
+          line.drawingTo = {
+            x: dragPos.x,
+            y: dragPos.y,
+            location: line.fromPort.location === "right" ? "left" : "top"
+          };
         }
         originLine?.validate();
         line.validate();
@@ -2917,7 +3090,8 @@ var WorkflowDragService = class {
             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(
@@ -3030,7 +3204,7 @@ 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 FlowNodeTransformData7 } from "@flowgram.ai/document";
@@ -3075,7 +3249,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事件
      */
@@ -3134,13 +3308,13 @@ WorkflowResetLayoutService = __decorateClass([
 
 // src/service/workflow-operation-base-service.ts
 import { inject as inject8 } from "inversify";
-import { Emitter as Emitter7 } from "@flowgram.ai/utils";
+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 Emitter7();
+    this.onNodePostionUpdateEmitter = new Emitter8();
     this.onNodePostionUpdate = this.onNodePostionUpdateEmitter.event;
   }
   updateNodePosition(nodeOrId, position) {
@@ -3187,6 +3361,7 @@ function usePlaygroundReadonlyState(listenChange) {
 function checkTargetDraggable(el) {
   return el && el.tagName !== "INPUT" && el.tagName !== "TEXTAREA" && !el.closest(".flow-canvas-not-draggable");
 }
+var isFirefox = navigator?.userAgent?.includes?.("Firefox");
 function useNodeRender(nodeFromProps) {
   const node = nodeFromProps || useContext(PlaygroundEntityContext);
   const renderData = node.getData(FlowNodeRenderData3);
@@ -3250,7 +3425,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");
@@ -3446,81 +3620,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,
@@ -3551,7 +3650,6 @@ export {
   WorkflowPortEntity,
   WorkflowResetLayoutService,
   WorkflowSelectService,
-  WorkflowSimpleLineContribution,
   bindConfigEntity,
   buildGroupJSON,
   compose,
@@ -3560,6 +3658,7 @@ export {
   domReactToBounds,
   fitView,
   getAntiOverlapPosition,
+  getLineCenter,
   getPortEntityId,
   nanoid,
   useConfigEntity,