@flowgram.ai/free-layout-core 0.1.6 → 0.1.8

package/dist/index.js

@@ -28,9 +28,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  BezierControlType: () => BezierControlType,
   EditorCursorState: () => EditorCursorState,
-  FoldLine: () => FoldLine,
   InteractiveType: () => InteractiveType,
   LINE_HOVER_DISTANCE: () => LINE_HOVER_DISTANCE,
   LineColors: () => LineColors,
@@ -49,6 +47,7 @@ __export(src_exports, {
   WorkflowDragService: () => WorkflowDragService,
   WorkflowHoverService: () => WorkflowHoverService,
   WorkflowLineEntity: () => WorkflowLineEntity,
+  WorkflowLineRenderData: () => WorkflowLineRenderData,
   WorkflowLinesManager: () => WorkflowLinesManager,
   WorkflowNodeEntity: () => WorkflowNodeEntity,
   WorkflowNodeLinesData: () => WorkflowNodeLinesData,
@@ -56,32 +55,31 @@ __export(src_exports, {
   WorkflowPortEntity: () => WorkflowPortEntity,
   WorkflowResetLayoutService: () => WorkflowResetLayoutService,
   WorkflowSelectService: () => WorkflowSelectService,
+  WorkflowSimpleLineContribution: () => WorkflowSimpleLineContribution,
   bindConfigEntity: () => import_core3.bindConfigEntity,
-  compose: () => import_utils3.compose,
-  composeAsync: () => import_utils3.composeAsync,
-  delay: () => import_utils6.delay,
+  compose: () => import_utils.compose,
+  composeAsync: () => import_utils.composeAsync,
+  delay: () => import_utils4.delay,
   domReactToBounds: () => domReactToBounds,
   fitView: () => fitView,
   getAntiOverlapPosition: () => getAntiOverlapPosition,
-  getBezierHorizontalControlPoints: () => getBezierHorizontalControlPoints,
-  getBezierVerticalControlPoints: () => getBezierVerticalControlPoints,
   getPortEntityId: () => getPortEntityId,
   nanoid: () => nanoid,
-  useConfigEntity: () => import_core23.useConfigEntity,
+  useConfigEntity: () => import_core24.useConfigEntity,
   useCurrentDomNode: () => useCurrentDomNode,
   useCurrentEntity: () => useCurrentEntity,
-  useEntities: () => import_core23.useEntities,
-  useEntityDataFromContext: () => import_core23.useEntityDataFromContext,
-  useEntityFromContext: () => import_core23.useEntityFromContext,
-  useListenEvents: () => import_core23.useListenEvents,
+  useEntities: () => import_core24.useEntities,
+  useEntityDataFromContext: () => import_core24.useEntityDataFromContext,
+  useEntityFromContext: () => import_core24.useEntityFromContext,
+  useListenEvents: () => import_core24.useListenEvents,
   useNodeRender: () => useNodeRender,
-  usePlayground: () => import_core23.usePlayground,
-  usePlaygroundContainer: () => import_core23.usePlaygroundContainer,
-  usePlaygroundContext: () => import_core23.usePlaygroundContext,
-  usePlaygroundLatest: () => import_core23.usePlaygroundLatest,
+  usePlayground: () => import_core24.usePlayground,
+  usePlaygroundContainer: () => import_core24.usePlaygroundContainer,
+  usePlaygroundContext: () => import_core24.usePlaygroundContext,
+  usePlaygroundLatest: () => import_core24.usePlaygroundLatest,
   usePlaygroundReadonlyState: () => usePlaygroundReadonlyState,
-  useRefresh: () => import_core23.useRefresh,
-  useService: () => import_core23.useService,
+  useRefresh: () => import_core24.useRefresh,
+  useService: () => import_core24.useService,
   useWorkflowDocument: () => useWorkflowDocument
 });
 module.exports = __toCommonJS(src_exports);
@@ -99,332 +97,23 @@ var WorkflowCommands = /* @__PURE__ */ ((WorkflowCommands2) => {
 })(WorkflowCommands || {});
 
 // src/hooks/index.ts
-var import_core23 = require("@flowgram.ai/core");
+var import_core24 = require("@flowgram.ai/core");
 
 // src/hooks/use-node-render.tsx
 var import_react2 = require("react");
 var import_reactive = require("@flowgram.ai/reactive");
 var import_node = require("@flowgram.ai/node");
 var import_document10 = require("@flowgram.ai/document");
-var import_core19 = require("@flowgram.ai/core");
+var import_core20 = require("@flowgram.ai/core");
 
 // src/service/workflow-select-service.ts
 var import_inversify = require("inversify");
-var import_core7 = require("@flowgram.ai/core");
+var import_core9 = require("@flowgram.ai/core");
 var import_utils9 = require("@flowgram.ai/utils");
 
 // src/utils/index.ts
 var import_core3 = require("@flowgram.ai/core");
-var import_utils6 = require("@flowgram.ai/utils");
-
-// src/utils/fold-line.ts
-var import_utils = require("@flowgram.ai/utils");
-function pointLineDistance(p1, p2, p3) {
-  let len;
-  if (p1.x - p2.x === 0) {
-    len = Math.abs(p3.x - p1.x);
-  } else {
-    const A = (p1.y - p2.y) / (p1.x - p2.x);
-    const B = p1.y - A * p1.x;
-    len = Math.abs((A * p3.x + B - p3.y) / Math.sqrt(A * A + 1));
-  }
-  return len;
-}
-var FoldLine;
-((FoldLine2) => {
-  const EDGE_RADIUS = 5;
-  const OFFSET = 20;
-  function getEdgeCenter({ source, target }) {
-    const xOffset = Math.abs(target.x - source.x) / 2;
-    const centerX = target.x < source.x ? target.x + xOffset : target.x - xOffset;
-    const yOffset = Math.abs(target.y - source.y) / 2;
-    const centerY = target.y < source.y ? target.y + yOffset : target.y - yOffset;
-    return [centerX, centerY];
-  }
-  const getDirection = ({ source, target }) => source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
-  function getPoints({ source, target }) {
-    const sourceDir = { x: 1, y: 0 };
-    const targetDir = { x: -1, y: 0 };
-    const sourceGapped = {
-      x: source.x + sourceDir.x * OFFSET,
-      y: source.y + sourceDir.y * OFFSET
-    };
-    const targetGapped = {
-      x: target.x + targetDir.x * OFFSET,
-      y: target.y + targetDir.y * OFFSET
-    };
-    const dir = getDirection({
-      source: sourceGapped,
-      target: targetGapped
-    });
-    const dirAccessor = dir.x !== 0 ? "x" : "y";
-    const currDir = dir[dirAccessor];
-    let points = [];
-    let centerX, centerY;
-    const [defaultCenterX, defaultCenterY] = getEdgeCenter({
-      source,
-      target
-    });
-    if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
-      centerX = defaultCenterX;
-      centerY = defaultCenterY;
-      const verticalSplit = [
-        { x: centerX, y: sourceGapped.y },
-        { x: centerX, y: targetGapped.y }
-      ];
-      const horizontalSplit = [
-        { x: sourceGapped.x, y: centerY },
-        { x: targetGapped.x, y: centerY }
-      ];
-      if (sourceDir[dirAccessor] === currDir) {
-        points = dirAccessor === "x" ? verticalSplit : horizontalSplit;
-      } else {
-        points = dirAccessor === "x" ? horizontalSplit : verticalSplit;
-      }
-    } else {
-      const sourceTarget = [{ x: sourceGapped.x, y: targetGapped.y }];
-      const targetSource = [{ x: targetGapped.x, y: sourceGapped.y }];
-      if (dirAccessor === "x") {
-        points = sourceDir.x === currDir ? targetSource : sourceTarget;
-      } else {
-        points = sourceDir.y === currDir ? sourceTarget : targetSource;
-      }
-      const dirAccessorOpposite = dirAccessor === "x" ? "y" : "x";
-      const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite];
-      const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
-      const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
-      const flipSourceTarget = sourceDir[dirAccessor] === 1 && (!isSameDir && sourceGtTargetOppo || isSameDir && sourceLtTargetOppo) || sourceDir[dirAccessor] !== 1 && (!isSameDir && sourceLtTargetOppo || isSameDir && sourceGtTargetOppo);
-      if (flipSourceTarget) {
-        points = dirAccessor === "x" ? sourceTarget : targetSource;
-      }
-      const sourceGapPoint = { x: sourceGapped.x, y: sourceGapped.y };
-      const targetGapPoint = { x: targetGapped.x, y: targetGapped.y };
-      const maxXDistance = Math.max(
-        Math.abs(sourceGapPoint.x - points[0].x),
-        Math.abs(targetGapPoint.x - points[0].x)
-      );
-      const maxYDistance = Math.max(
-        Math.abs(sourceGapPoint.y - points[0].y),
-        Math.abs(targetGapPoint.y - points[0].y)
-      );
-      if (maxXDistance >= maxYDistance) {
-        centerX = (sourceGapPoint.x + targetGapPoint.x) / 2;
-        centerY = points[0].y;
-      } else {
-        centerX = points[0].x;
-        centerY = (sourceGapPoint.y + targetGapPoint.y) / 2;
-      }
-    }
-    const pathPoints = [
-      source,
-      { x: sourceGapped.x, y: sourceGapped.y },
-      ...points,
-      { x: targetGapped.x, y: targetGapped.y },
-      target
-    ];
-    return pathPoints;
-  }
-  FoldLine2.getPoints = getPoints;
-  function getBend(a, b, c) {
-    const bendSize = Math.min(
-      import_utils.Point.getDistance(a, b) / 2,
-      import_utils.Point.getDistance(b, c) / 2,
-      EDGE_RADIUS
-    );
-    const { x, y } = b;
-    if (a.x === x && x === c.x || a.y === y && y === c.y) {
-      return `L${x} ${y}`;
-    }
-    if (a.y === y) {
-      const xDir2 = a.x < c.x ? -1 : 1;
-      const yDir2 = a.y < c.y ? 1 : -1;
-      return `L ${x + bendSize * xDir2},${y}Q ${x},${y} ${x},${y + bendSize * yDir2}`;
-    }
-    const xDir = a.x < c.x ? 1 : -1;
-    const yDir = a.y < c.y ? -1 : 1;
-    return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
-  }
-  function getSmoothStepPath(points) {
-    const path = points.reduce((res, p, i) => {
-      let segment = "";
-      if (i > 0 && i < points.length - 1) {
-        segment = getBend(points[i - 1], p, points[i + 1]);
-      } else {
-        segment = `${i === 0 ? "M" : "L"}${p.x} ${p.y}`;
-      }
-      res += segment;
-      return res;
-    }, "");
-    return path;
-  }
-  FoldLine2.getSmoothStepPath = getSmoothStepPath;
-  function getBounds(points) {
-    const xList = points.map((p) => p.x);
-    const yList = points.map((p) => p.y);
-    const left = Math.min(...xList);
-    const right = Math.max(...xList);
-    const top = Math.min(...yList);
-    const bottom = Math.max(...yList);
-    return import_utils.Rectangle.createRectangleWithTwoPoints(
-      {
-        x: left,
-        y: top
-      },
-      {
-        x: right,
-        y: bottom
-      }
-    );
-  }
-  FoldLine2.getBounds = getBounds;
-  function getFoldLineToPointDistance(points, pos) {
-    const bounds = getBounds(points);
-    if (bounds.contains(pos.x, pos.y)) {
-      const lines = points.reduce((res, point, index) => {
-        if (index === 0) {
-          return res;
-        }
-        res.push([points[index - 1], point]);
-        return res;
-      }, []);
-      return Math.min(...lines.map((l) => pointLineDistance(...l, pos)));
-    }
-    return Math.min(...points.map((p) => import_utils.Point.getDistance(p, pos)));
-  }
-  FoldLine2.getFoldLineToPointDistance = getFoldLineToPointDistance;
-})(FoldLine || (FoldLine = {}));
-
-// src/utils/bezier.ts
-var import_utils2 = require("@flowgram.ai/utils");
-var BezierControlType = /* @__PURE__ */ ((BezierControlType2) => {
-  BezierControlType2[BezierControlType2["RIGHT_TOP"] = 0] = "RIGHT_TOP";
-  BezierControlType2[BezierControlType2["RIGHT_BOTTOM"] = 1] = "RIGHT_BOTTOM";
-  BezierControlType2[BezierControlType2["LEFT_TOP"] = 2] = "LEFT_TOP";
-  BezierControlType2[BezierControlType2["LEFT_BOTTOM"] = 3] = "LEFT_BOTTOM";
-  return BezierControlType2;
-})(BezierControlType || {});
-var CONTROL_MAX = 300;
-function getBezierHorizontalControlPoints(fromPos, toPos) {
-  const rect = import_utils2.Rectangle.createRectangleWithTwoPoints(fromPos, toPos);
-  let type;
-  if (fromPos.x <= toPos.x) {
-    type = fromPos.y <= toPos.y ? 1 /* RIGHT_BOTTOM */ : 0 /* RIGHT_TOP */;
-  } else {
-    type = fromPos.y <= toPos.y ? 3 /* LEFT_BOTTOM */ : 2 /* LEFT_TOP */;
-  }
-  let controls;
-  switch (type) {
-    case 0 /* RIGHT_TOP */:
-      controls = [
-        {
-          x: rect.rightBottom.x - rect.width / 2,
-          y: rect.rightBottom.y
-        },
-        {
-          x: rect.leftTop.x + rect.width / 2,
-          y: rect.leftTop.y
-        }
-      ];
-      break;
-    case 1 /* RIGHT_BOTTOM */:
-      controls = [
-        {
-          x: rect.rightTop.x - rect.width / 2,
-          y: rect.rightTop.y
-        },
-        {
-          x: rect.leftBottom.x + rect.width / 2,
-          y: rect.leftBottom.y
-        }
-      ];
-      break;
-    case 2 /* LEFT_TOP */:
-      controls = [
-        {
-          x: rect.rightBottom.x + Math.min(rect.width, CONTROL_MAX),
-          y: rect.rightBottom.y
-        },
-        {
-          x: rect.leftTop.x - Math.min(rect.width, CONTROL_MAX),
-          y: rect.leftTop.y
-        }
-      ];
-      break;
-    case 3 /* LEFT_BOTTOM */:
-      controls = [
-        {
-          x: rect.rightTop.x + Math.min(rect.width, CONTROL_MAX),
-          y: rect.rightTop.y
-        },
-        {
-          x: rect.leftBottom.x - Math.min(rect.width, CONTROL_MAX),
-          y: rect.leftBottom.y
-        }
-      ];
-  }
-  return controls;
-}
-function getBezierVerticalControlPoints(fromPos, toPos) {
-  const rect = import_utils2.Rectangle.createRectangleWithTwoPoints(fromPos, toPos);
-  let type;
-  if (fromPos.y <= toPos.y) {
-    type = fromPos.x <= toPos.x ? 1 /* RIGHT_BOTTOM */ : 3 /* LEFT_BOTTOM */;
-  } else {
-    type = fromPos.x <= toPos.x ? 0 /* RIGHT_TOP */ : 2 /* LEFT_TOP */;
-  }
-  let controls;
-  switch (type) {
-    case 1 /* RIGHT_BOTTOM */:
-      controls = [
-        {
-          x: rect.leftTop.x,
-          y: rect.leftTop.y + rect.height / 2
-        },
-        {
-          x: rect.rightBottom.x,
-          y: rect.rightBottom.y - rect.height / 2
-        }
-      ];
-      break;
-    case 3 /* LEFT_BOTTOM */:
-      controls = [
-        {
-          x: rect.rightTop.x,
-          y: rect.rightTop.y + rect.height / 2
-        },
-        {
-          x: rect.leftBottom.x,
-          y: rect.leftBottom.y - rect.height / 2
-        }
-      ];
-      break;
-    case 0 /* RIGHT_TOP */:
-      controls = [
-        {
-          x: rect.leftBottom.x,
-          y: rect.leftBottom.y + Math.min(rect.height, CONTROL_MAX)
-        },
-        {
-          x: rect.rightTop.x,
-          y: rect.rightTop.y - Math.min(rect.height, CONTROL_MAX)
-        }
-      ];
-      break;
-    case 2 /* LEFT_TOP */:
-      controls = [
-        {
-          x: rect.rightBottom.x,
-          y: rect.rightBottom.y + Math.min(rect.height, CONTROL_MAX)
-        },
-        {
-          x: rect.leftTop.x,
-          y: rect.leftTop.y - Math.min(rect.height, CONTROL_MAX)
-        }
-      ];
-      break;
-  }
-  return controls;
-}
+var import_utils4 = require("@flowgram.ai/utils");
 
 // src/utils/nanoid.ts
 var import_nanoid = require("nanoid");
@@ -433,13 +122,13 @@ function nanoid(n) {
 }
 
 // src/utils/compose.ts
-var import_utils3 = require("@flowgram.ai/utils");
+var import_utils = require("@flowgram.ai/utils");
 
 // src/utils/fit-view.ts
 var import_core = require("@flowgram.ai/core");
-var import_utils4 = require("@flowgram.ai/utils");
+var import_utils2 = require("@flowgram.ai/utils");
 var fitView = (doc, playgroundConfig, easing = true) => {
-  const bounds = import_utils4.Rectangle.enlarge(
+  const bounds = import_utils2.Rectangle.enlarge(
     doc.getAllNodes().map((node) => node.getData(import_core.TransformData).bounds)
   );
   return playgroundConfig.fitView(bounds, easing, 30);
@@ -471,11 +160,11 @@ function getAntiOverlapPosition(doc, position, containerNode) {
 }
 
 // src/utils/statics.ts
-var import_utils5 = require("@flowgram.ai/utils");
+var import_utils3 = require("@flowgram.ai/utils");
 var getPortEntityId = (node, portType, portID = "") => `port_${portType}_${node.id}_${portID}`;
 var WORKFLOW_LINE_ENTITY = "WorkflowLineEntity";
 function domReactToBounds(react) {
-  return new import_utils5.Rectangle(react.x, react.y, react.width, react.height);
+  return new import_utils3.Rectangle(react.x, react.y, react.width, react.height);
 }
 
 // src/entities/workflow-node-entity.ts
@@ -484,24 +173,8 @@ var WorkflowNodeEntity = import_document.FlowNodeEntity;
 
 // src/entities/workflow-line-entity.ts
 var import_lodash_es2 = require("lodash-es");
-var import_bezier_js = require("bezier-js");
 var import_utils8 = require("@flowgram.ai/utils");
-var import_core6 = require("@flowgram.ai/core");
-
-// src/typings/workflow-line.ts
-var LineType = /* @__PURE__ */ ((LineType2) => {
-  LineType2[LineType2["BEZIER"] = 0] = "BEZIER";
-  LineType2[LineType2["LINE_CHART"] = 1] = "LINE_CHART";
-  return LineType2;
-})(LineType || {});
-var LineColors = /* @__PURE__ */ ((LineColors2) => {
-  LineColors2["HIDDEN"] = "transparent";
-  LineColors2["DEFUALT"] = "#4d53e8";
-  LineColors2["DRAWING"] = "#5DD6E3";
-  LineColors2["HOVER"] = "#37d0ff";
-  LineColors2["ERROR"] = "red";
-  return LineColors2;
-})(LineColors || {});
+var import_core8 = require("@flowgram.ai/core");
 
 // src/entity-datas/workflow-node-ports-data.ts
 var import_lodash_es = require("lodash-es");
@@ -509,7 +182,7 @@ var import_document2 = require("@flowgram.ai/document");
 var import_core5 = require("@flowgram.ai/core");
 
 // src/entities/workflow-port-entity.ts
-var import_utils7 = require("@flowgram.ai/utils");
+var import_utils5 = require("@flowgram.ai/utils");
 var import_core4 = require("@flowgram.ai/core");
 var PORT_SIZE = 24;
 var WorkflowPortEntity = class extends import_core4.Entity {
@@ -519,7 +192,7 @@ var WorkflowPortEntity = class extends import_core4.Entity {
     this.portID = "";
     this._disabled = false;
     this._hasError = false;
-    this._onErrorChangedEmitter = new import_utils7.Emitter();
+    this._onErrorChangedEmitter = new import_utils5.Emitter();
     this.onErrorChanged = this._onErrorChangedEmitter.event;
     this.portID = opts.portID || "";
     this.portType = opts.type;
@@ -576,7 +249,7 @@ var WorkflowPortEntity = class extends import_core4.Entity {
   get bounds() {
     const { point } = this;
     const halfSize = PORT_SIZE / 2;
-    return new import_utils7.Rectangle(point.x - halfSize, point.y - halfSize, PORT_SIZE, PORT_SIZE);
+    return new import_utils5.Rectangle(point.x - halfSize, point.y - halfSize, PORT_SIZE, PORT_SIZE);
   }
   isHovered(x, y) {
     return this.bounds.contains(x, y);
@@ -832,10 +505,222 @@ var WorkflowNodePortsData = class extends import_core5.EntityData {
 };
 WorkflowNodePortsData.type = "WorkflowNodePortsData";
 
+// src/entity-datas/workflow-node-lines-data.ts
+var import_utils6 = require("@flowgram.ai/utils");
+var import_core6 = require("@flowgram.ai/core");
+var _WorkflowNodeLinesData = class _WorkflowNodeLinesData extends import_core6.EntityData {
+  getDefaultData() {
+    return {
+      inputLines: [],
+      outputLines: []
+    };
+  }
+  constructor(entity) {
+    super(entity);
+    this.entity = entity;
+    this.toDispose.push(
+      import_utils6.Disposable.create(() => {
+        this.inputLines.slice().forEach((line) => line.dispose());
+        this.outputLines.slice().forEach((line) => line.dispose());
+      })
+    );
+  }
+  /**
+   * 输入线条
+   */
+  get inputLines() {
+    return this.data.inputLines;
+  }
+  /**
+   * 输出线条
+   */
+  get outputLines() {
+    return this.data.outputLines;
+  }
+  /**
+   * 输入节点
+   */
+  get inputNodes() {
+    return this.inputLines.map((l) => l.from).filter(Boolean);
+  }
+  /**
+   * 所有输入节点
+   */
+  get allInputNodes() {
+    const nodeSet = /* @__PURE__ */ new Set();
+    const handleNode = (node) => {
+      if (nodeSet.has(node)) {
+        return;
+      }
+      nodeSet.add(node);
+      const { inputNodes } = node.getData(_WorkflowNodeLinesData);
+      if (!inputNodes || !inputNodes.length) {
+        return;
+      }
+      inputNodes.forEach((inputNode) => {
+        if (inputNode?.parent === node || node?.parent === inputNode) {
+          return;
+        }
+        handleNode(inputNode);
+      });
+    };
+    handleNode(this.entity);
+    nodeSet.delete(this.entity);
+    return Array.from(nodeSet);
+  }
+  /**
+   * 输出节点
+   */
+  get outputNodes() {
+    return this.outputLines.map((l) => l.to).filter(Boolean);
+  }
+  /**
+   * 输入输出节点
+   */
+  get allOutputNodes() {
+    const nodeSet = /* @__PURE__ */ new Set();
+    const handleNode = (node) => {
+      if (nodeSet.has(node)) {
+        return;
+      }
+      nodeSet.add(node);
+      const { outputNodes } = node.getData(_WorkflowNodeLinesData);
+      if (!outputNodes || !outputNodes.length) {
+        return;
+      }
+      outputNodes.forEach((outputNode) => {
+        if (outputNode?.parent === node || node?.parent === outputNode) {
+          return;
+        }
+        handleNode(outputNode);
+      });
+    };
+    handleNode(this.entity);
+    nodeSet.delete(this.entity);
+    return Array.from(nodeSet);
+  }
+  addLine(line) {
+    if (line.from === this.entity) {
+      this.outputLines.push(line);
+    } else {
+      this.inputLines.push(line);
+    }
+    this.fireChange();
+  }
+  removeLine(line) {
+    const { inputLines, outputLines } = this;
+    const inputIndex = inputLines.indexOf(line);
+    const outputIndex = outputLines.indexOf(line);
+    if (inputIndex !== -1) {
+      inputLines.splice(inputIndex, 1);
+      this.fireChange();
+    }
+    if (outputIndex !== -1) {
+      outputLines.splice(outputIndex, 1);
+      this.fireChange();
+    }
+  }
+};
+_WorkflowNodeLinesData.type = "WorkflowNodeLinesData";
+var WorkflowNodeLinesData = _WorkflowNodeLinesData;
+
+// src/entity-datas/workflow-line-render-data.ts
+var import_utils7 = require("@flowgram.ai/utils");
+var import_core7 = require("@flowgram.ai/core");
+var WorkflowLineRenderData = class extends import_core7.EntityData {
+  constructor(entity) {
+    super(entity);
+    this.syncContributions();
+  }
+  getDefaultData() {
+    return {
+      version: "",
+      contributions: /* @__PURE__ */ new Map(),
+      position: {
+        from: { x: 0, y: 0 },
+        to: { x: 0, y: 0 }
+      }
+    };
+  }
+  get renderVersion() {
+    return this.data.version;
+  }
+  get position() {
+    return this.data.position;
+  }
+  get path() {
+    return this.currentLine?.path ?? "";
+  }
+  calcDistance(pos) {
+    return this.currentLine?.calcDistance(pos) ?? Number.MAX_SAFE_INTEGER;
+  }
+  get bounds() {
+    return this.currentLine?.bounds ?? new import_utils7.Rectangle();
+  }
+  /**
+   * 更新数据
+   * WARNING: 这个方法，必须在 requestAnimationFrame / useLayoutEffect 中调用，否则会引起浏览器强制重排
+   */
+  update() {
+    this.syncContributions();
+    const oldVersion = this.data.version;
+    this.updatePosition();
+    const newVersion = this.data.version;
+    if (oldVersion === newVersion) {
+      return;
+    }
+    this.data.version = newVersion;
+    this.currentLine?.update({
+      fromPos: this.data.position.from,
+      toPos: this.data.position.to
+    });
+  }
+  get lineType() {
+    return this.entity.renderType ?? this.entity.linesManager.lineType;
+  }
+  /**
+   * 更新版本
+   * 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.version = [
+      this.lineType,
+      this.data.position.from.x,
+      this.data.position.from.y,
+      this.data.position.to.x,
+      this.data.position.to.y
+    ].join("-");
+  }
+  get currentLine() {
+    return this.data.contributions.get(this.lineType);
+  }
+  syncContributions() {
+    if (this.entity.linesManager.contributionFactories.length === this.data.contributions.size) {
+      return;
+    }
+    this.entity.linesManager.contributionFactories.forEach((factory) => {
+      this.registerContribution(factory);
+    });
+  }
+  registerContribution(contributionFactory) {
+    if (this.data.contributions.has(contributionFactory.type)) {
+      return;
+    }
+    const contribution = new contributionFactory(this.entity);
+    this.data.contributions.set(contributionFactory.type, contribution);
+  }
+};
+WorkflowLineRenderData.type = "WorkflowLineRenderData";
+
 // src/entities/workflow-line-entity.ts
 var LINE_HOVER_DISTANCE = 8;
 var POINT_RADIUS = 10;
-var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core6.Entity {
+var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity {
   constructor(opts) {
     super(opts);
     this._processing = false;
@@ -846,10 +731,6 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core6.Entity
     this.info = {
       from: ""
     };
-    /**
-     * 贝塞尔线条版本
-     */
-    this._bezierVersion = "";
     this.document = opts.document;
     this.linesManager = opts.linesManager;
     this.initInfo({
@@ -975,59 +856,17 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core6.Entity
       this.fireChange();
     }
   }
-  /**
-   * 创建贝塞尔线条
-   * @param fromPos 前置节点位置
-   * @param toPos 后置节点位置
-   * @returns 贝塞尔线条数据
-   */
-  createBezier(fromPos, toPos) {
-    const controls = this.vertical ? getBezierVerticalControlPoints(fromPos, toPos) : getBezierHorizontalControlPoints(fromPos, toPos);
-    const bezier = new import_bezier_js.Bezier([fromPos, ...controls, toPos]);
-    const bbox = bezier.bbox();
-    const bboxBounds = new import_utils8.Rectangle(
-      bbox.x.min,
-      bbox.y.min,
-      bbox.x.max - bbox.x.min,
-      bbox.y.max - bbox.y.min
-    );
-    const foldPoints = FoldLine.getPoints({
-      source: {
-        x: fromPos.x + POINT_RADIUS,
-        y: fromPos.y
-      },
-      target: {
-        x: toPos.x - POINT_RADIUS,
-        y: toPos.y
-      }
-    });
-    const foldPath = FoldLine.getSmoothStepPath(foldPoints);
-    this._bezier = {
-      fromPos,
-      toPos,
-      bezier,
-      bbox: bboxBounds,
-      controls,
-      foldPath,
-      foldPoints,
-      foldBounds: FoldLine.getBounds(foldPoints)
-    };
-    return this._bezier;
-  }
   /**
    * 获取线条的边框位置大小
    */
   get bounds() {
-    return this.bezier.bbox;
+    return this.getData(WorkflowLineRenderData).bounds;
   }
   /**
    * 获取点和线最接近的距离
    */
-  getHoverDist(pos, lineType = 0 /* BEZIER */) {
-    if (lineType === 0 /* BEZIER */) {
-      return import_utils8.Point.getDistance(pos, this.bezier.bezier.project(pos));
-    }
-    return FoldLine.getFoldLineToPointDistance(this.bezier.foldPoints, pos);
+  getHoverDist(pos) {
+    return this.getData(WorkflowLineRenderData).calcDistance(pos);
   }
   get fromPort() {
     return this.from.getData(WorkflowNodePortsData).getPortEntityByKey("output", this.info.fromPort);
@@ -1042,37 +881,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core6.Entity
    * 获取线条真实的输入输出节点坐标
    */
   get position() {
-    const { bezier } = this;
-    return {
-      from: bezier.fromPos,
-      to: bezier.toPos
-    };
-  }
-  /**
-   * 获取贝塞尔数据
-   * 根据两边节点的位置信息创建贝塞尔曲线
-   */
-  get bezier() {
-    if (!this._bezier) {
-      this.refreshBezier();
-    }
-    return this._bezier;
-  }
-  refreshBezier() {
-    const fromPos = this.from.getData(WorkflowNodePortsData).getOutputPoint(this.info.fromPort);
-    const toPos = this.info.drawingTo || this.to.getData(WorkflowNodePortsData).getInputPoint(this.info.toPort);
-    const bezierVersion = [fromPos.x, fromPos.y, toPos.x, toPos.y].join("-");
-    if (this._bezier && this._bezierVersion === bezierVersion) {
-      return;
-    }
-    this._bezierVersion = bezierVersion;
-    this._bezier = this.createBezier(fromPos, toPos);
-  }
-  /**
-   * 可以用于判断线条点位信息是否变化
-   */
-  get bezierDataVersion() {
-    return this._bezierVersion;
+    return this.getData(WorkflowLineRenderData).position;
   }
   /** 是否反转箭头 */
   get reverse() {
@@ -1094,17 +903,17 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core6.Entity
   get vertical() {
     return this.linesManager.isVerticalLine(this);
   }
+  /** 获取线条渲染器类型 */
+  get renderType() {
+    return this.linesManager.setLineRenderType(this);
+  }
+  /** 获取线条样式 */
+  get className() {
+    return this.linesManager.setLineClassName(this) ?? "";
+  }
   get color() {
     return this.linesManager.getLineColor(this);
   }
-  // get defaultToPos(): IPoint {
-  //   const fromPos = this.from.getData(TransformComponent)!.toBounds.center;
-  //
-  //   return {
-  //     x: fromPos.x + DEFAULT_LINE_LENGTH,
-  //     y: fromPos.y,
-  //   };
-  // }
   /**
    * 初始化线条
    * @param info 线条信息
@@ -1136,15 +945,6 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core6.Entity
     }
     return _WorkflowLineEntity.portInfoToLineId(line) === this.id;
   }
-  /**
-   * 框选 贝塞尔曲线
-   * TODO 这个方法可能有性能问题，后续看看有没有更好的方式
-   * @param rect
-   */
-  intersectsRectangle(rect) {
-    const dots = this.bezier.bezier.getLUT(50);
-    return dots.some((dot) => rect.contains(dot.x, dot.y));
-  }
   canRemove(newLineInfo) {
     return this.linesManager.canRemove(this, newLineInfo);
   }
@@ -1245,12 +1045,12 @@ var WorkflowSelectService = class {
   async selectNodeAndScrollToView(node, fitView2) {
     this.selectNodeAndFocus(node);
     const DELAY_TIME = 30;
-    await (0, import_utils6.delay)(DELAY_TIME);
+    await (0, import_utils4.delay)(DELAY_TIME);
     const scrollConfig = {
       entities: [node]
     };
     if (fitView2) {
-      const bounds = import_utils9.Rectangle.enlarge([node.getData(import_core7.TransformData).bounds]).pad(
+      const bounds = import_utils9.Rectangle.enlarge([node.getData(import_core9.TransformData).bounds]).pad(
         30,
         30
       );
@@ -1268,10 +1068,10 @@ var WorkflowSelectService = class {
   }
 };
 __decorateClass([
-  (0, import_inversify.inject)(import_core7.SelectionService)
+  (0, import_inversify.inject)(import_core9.SelectionService)
 ], WorkflowSelectService.prototype, "selectionService", 2);
 __decorateClass([
-  (0, import_inversify.inject)(import_core7.Playground)
+  (0, import_inversify.inject)(import_core9.Playground)
 ], WorkflowSelectService.prototype, "playground", 2);
 WorkflowSelectService = __decorateClass([
   (0, import_inversify.injectable)()
@@ -1279,7 +1079,7 @@ WorkflowSelectService = __decorateClass([
 
 // src/service/workflow-hover-service.ts
 var import_inversify2 = require("inversify");
-var import_core8 = require("@flowgram.ai/core");
+var import_core10 = require("@flowgram.ai/core");
 var import_utils11 = require("@flowgram.ai/utils");
 var WorkflowHoverService = class {
   constructor() {
@@ -1329,7 +1129,7 @@ var WorkflowHoverService = class {
   }
 };
 __decorateClass([
-  (0, import_inversify2.inject)(import_core8.EntityManager)
+  (0, import_inversify2.inject)(import_core10.EntityManager)
 ], WorkflowHoverService.prototype, "entityManager", 2);
 WorkflowHoverService = __decorateClass([
   (0, import_inversify2.injectable)()
@@ -1338,22 +1138,22 @@ WorkflowHoverService = __decorateClass([
 // src/service/workflow-drag-service.ts
 var import_nanoid3 = require("nanoid");
 var import_inversify6 = require("inversify");
-var import_utils17 = require("@flowgram.ai/utils");
+var import_utils16 = require("@flowgram.ai/utils");
 var import_document7 = require("@flowgram.ai/document");
 var import_document8 = require("@flowgram.ai/document");
-var import_core14 = require("@flowgram.ai/core");
+var import_core15 = require("@flowgram.ai/core");
 
 // src/workflow-lines-manager.ts
 var import_lodash_es3 = require("lodash-es");
 var import_inversify3 = require("inversify");
-var import_utils13 = require("@flowgram.ai/utils");
+var import_utils12 = require("@flowgram.ai/utils");
 var import_document4 = require("@flowgram.ai/document");
-var import_core11 = require("@flowgram.ai/core");
+var import_core12 = require("@flowgram.ai/core");
 
 // src/workflow-document-option.ts
 var import_form_core2 = require("@flowgram.ai/form-core");
 var import_document3 = require("@flowgram.ai/document");
-var import_core9 = require("@flowgram.ai/core");
+var import_core11 = require("@flowgram.ai/core");
 
 // src/utils/flow-node-form-data.ts
 var import_form_core = require("@flowgram.ai/form-core");
@@ -1378,7 +1178,7 @@ var WorkflowDocumentOptionsDefault = {
     if (nodeError) {
       throw nodeError;
     }
-    const transform = node.getData(import_core9.TransformData);
+    const transform = node.getData(import_core11.TransformData);
     let formJSON = toFormJSON(node);
     const metaData = {};
     const nodeMeta = node.getNodeMeta();
@@ -1401,6 +1201,21 @@ var WorkflowDocumentOptionsDefault = {
   }
 };
 
+// src/typings/workflow-line.ts
+var LineType = /* @__PURE__ */ ((LineType2) => {
+  LineType2[LineType2["BEZIER"] = 0] = "BEZIER";
+  LineType2[LineType2["LINE_CHART"] = 1] = "LINE_CHART";
+  return LineType2;
+})(LineType || {});
+var LineColors = /* @__PURE__ */ ((LineColors2) => {
+  LineColors2["HIDDEN"] = "transparent";
+  LineColors2["DEFUALT"] = "#4d53e8";
+  LineColors2["DRAWING"] = "#5DD6E3";
+  LineColors2["HOVER"] = "#37d0ff";
+  LineColors2["ERROR"] = "red";
+  return LineColors2;
+})(LineColors || {});
+
 // src/typings/workflow-json.ts
 var WorkflowContentChangeType = /* @__PURE__ */ ((WorkflowContentChangeType2) => {
   WorkflowContentChangeType2["ADD_NODE"] = "ADD_NODE";
@@ -1416,133 +1231,14 @@ var WorkflowContentChangeType = /* @__PURE__ */ ((WorkflowContentChangeType2) =>
 // src/typings/index.ts
 var URLParams = Symbol("");
 
-// src/entity-datas/workflow-node-lines-data.ts
-var import_utils12 = require("@flowgram.ai/utils");
-var import_core10 = require("@flowgram.ai/core");
-var _WorkflowNodeLinesData = class _WorkflowNodeLinesData extends import_core10.EntityData {
-  getDefaultData() {
-    return {
-      inputLines: [],
-      outputLines: []
-    };
-  }
-  constructor(entity) {
-    super(entity);
-    this.entity = entity;
-    this.toDispose.push(
-      import_utils12.Disposable.create(() => {
-        this.inputLines.slice().forEach((line) => line.dispose());
-        this.outputLines.slice().forEach((line) => line.dispose());
-      })
-    );
-  }
-  /**
-   * 输入线条
-   */
-  get inputLines() {
-    return this.data.inputLines;
-  }
-  /**
-   * 输出线条
-   */
-  get outputLines() {
-    return this.data.outputLines;
-  }
-  /**
-   * 输入节点
-   */
-  get inputNodes() {
-    return this.inputLines.map((l) => l.from).filter(Boolean);
-  }
-  /**
-   * 所有输入节点
-   */
-  get allInputNodes() {
-    const nodeSet = /* @__PURE__ */ new Set();
-    const handleNode = (node) => {
-      if (nodeSet.has(node)) {
-        return;
-      }
-      nodeSet.add(node);
-      const { inputNodes } = node.getData(_WorkflowNodeLinesData);
-      if (!inputNodes || !inputNodes.length) {
-        return;
-      }
-      inputNodes.forEach((inputNode) => {
-        if (inputNode?.parent === node || node?.parent === inputNode) {
-          return;
-        }
-        handleNode(inputNode);
-      });
-    };
-    handleNode(this.entity);
-    nodeSet.delete(this.entity);
-    return Array.from(nodeSet);
-  }
-  /**
-   * 输出节点
-   */
-  get outputNodes() {
-    return this.outputLines.map((l) => l.to).filter(Boolean);
-  }
-  /**
-   * 输入输出节点
-   */
-  get allOutputNodes() {
-    const nodeSet = /* @__PURE__ */ new Set();
-    const handleNode = (node) => {
-      if (nodeSet.has(node)) {
-        return;
-      }
-      nodeSet.add(node);
-      const { outputNodes } = node.getData(_WorkflowNodeLinesData);
-      if (!outputNodes || !outputNodes.length) {
-        return;
-      }
-      outputNodes.forEach((outputNode) => {
-        if (outputNode?.parent === node || node?.parent === outputNode) {
-          return;
-        }
-        handleNode(outputNode);
-      });
-    };
-    handleNode(this.entity);
-    nodeSet.delete(this.entity);
-    return Array.from(nodeSet);
-  }
-  addLine(line) {
-    if (line.from === this.entity) {
-      this.outputLines.push(line);
-    } else {
-      this.inputLines.push(line);
-    }
-    this.fireChange();
-  }
-  removeLine(line) {
-    const { inputLines, outputLines } = this;
-    const inputIndex = inputLines.indexOf(line);
-    const outputIndex = outputLines.indexOf(line);
-    if (inputIndex !== -1) {
-      inputLines.splice(inputIndex, 1);
-      this.fireChange();
-    }
-    if (outputIndex !== -1) {
-      outputLines.splice(outputIndex, 1);
-      this.fireChange();
-    }
-  }
-};
-_WorkflowNodeLinesData.type = "WorkflowNodeLinesData";
-var WorkflowNodeLinesData = _WorkflowNodeLinesData;
-
 // src/workflow-lines-manager.ts
 var WorkflowLinesManager = class {
   constructor() {
-    this.toDispose = new import_utils13.DisposableCollection();
+    this.toDispose = new import_utils12.DisposableCollection();
     // 线条类型
     this._lineType = 0 /* BEZIER */;
-    this.onAvailableLinesChangeEmitter = new import_utils13.Emitter();
-    this.onForceUpdateEmitter = new import_utils13.Emitter();
+    this.onAvailableLinesChangeEmitter = new import_utils12.Emitter();
+    this.onForceUpdateEmitter = new import_utils12.Emitter();
     /**
      * 有效的线条被添加或者删除时候触发，未连上的线条不算
      */
@@ -1551,6 +1247,7 @@ var WorkflowLinesManager = class {
      * 强制渲染 lines
      */
     this.onForceUpdate = this.onForceUpdateEmitter.event;
+    this.contributionFactories = [];
     /**
      * 是否在调整线条
      */
@@ -1589,7 +1286,12 @@ var WorkflowLinesManager = class {
     }
     if (newType !== this._lineType) {
       this._lineType = newType;
-      this.entityManager.fireEntityChanged(WorkflowLineEntity.type);
+      this.getAllLines().forEach((line) => {
+        line.getData(WorkflowLineRenderData).update();
+      });
+      window.requestAnimationFrame(() => {
+        this.entityManager.fireEntityChanged(WorkflowLineEntity.type);
+      });
     }
     return this._lineType;
   }
@@ -1639,6 +1341,7 @@ var WorkflowLinesManager = class {
       to,
       drawingTo
     });
+    this.registerData(line);
     fromNode.addLine(line);
     toNode?.addLine(line);
     line.onDispose(() => {
@@ -1650,7 +1353,7 @@ var WorkflowLinesManager = class {
       line.validate();
     });
     line.toDispose.push(
-      import_utils13.Disposable.create(() => {
+      import_utils12.Disposable.create(() => {
         if (available) {
           this.onAvailableLinesChangeEmitter.fire({
             type: "DELETE_LINE" /* DELETE_LINE */,
@@ -1679,7 +1382,7 @@ var WorkflowLinesManager = class {
   getCloseInLineFromMousePos(mousePos, minDistance = LINE_HOVER_DISTANCE) {
     let targetLine, targetLineDist;
     this.getAllLines().forEach((line) => {
-      const dist = line.getHoverDist(mousePos, this.lineType);
+      const dist = line.getHoverDist(mousePos);
       if (dist <= minDistance && (!targetLineDist || targetLineDist >= dist)) {
         targetLineDist = dist;
         targetLine = line;
@@ -1729,6 +1432,18 @@ var WorkflowLinesManager = class {
     }
     return false;
   }
+  setLineRenderType(line) {
+    if (this.options.setLineRenderType) {
+      return this.options.setLineRenderType(line);
+    }
+    return void 0;
+  }
+  setLineClassName(line) {
+    if (this.options.setLineClassName) {
+      return this.options.setLineClassName(line);
+    }
+    return void 0;
+  }
   getLineColor(line) {
     if (line.isHidden) {
       return this.lineColor.hidden;
@@ -1785,7 +1500,7 @@ var WorkflowLinesManager = class {
     const allPorts = this.entityManager.getEntities(WorkflowPortEntity).filter((port) => port.node.flowNodeType !== "root");
     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(import_core11.TransformData).contains(pos.x, pos.y));
+      const targetNode = this.document.getAllNodes().slice().reverse().filter((node) => targetPort.node?.parent?.id !== node.id).find((node) => node.getData(import_core12.TransformData).contains(pos.x, pos.y));
       if (targetNode && targetNode !== targetPort.node) {
         return;
       }
@@ -1800,7 +1515,7 @@ var WorkflowLinesManager = class {
     const allNodes = this.document.getAllNodes();
     const containNodes = [];
     const { selection } = this.selectService;
-    const zoom = this.entityManager.getEntity(import_core11.PlaygroundConfigEntity)?.config?.zoom || 1;
+    const zoom = this.entityManager.getEntity(import_core12.PlaygroundConfigEntity)?.config?.zoom || 1;
     allNodes.forEach((node) => {
       const { bounds } = node.getData(import_document4.FlowNodeTransformData);
       if (bounds.clone().pad(4 / zoom).contains(pos.x, pos.y)) {
@@ -1817,6 +1532,13 @@ var WorkflowLinesManager = class {
     }
     return (0, import_lodash_es3.last)(containNodes);
   }
+  registerContribution(factory) {
+    this.contributionFactories.push(factory);
+    return this;
+  }
+  registerData(line) {
+    line.addData(WorkflowLineRenderData);
+  }
 };
 __decorateClass([
   (0, import_inversify3.inject)(WorkflowHoverService)
@@ -1825,7 +1547,7 @@ __decorateClass([
   (0, import_inversify3.inject)(WorkflowSelectService)
 ], WorkflowLinesManager.prototype, "selectService", 2);
 __decorateClass([
-  (0, import_inversify3.inject)(import_core11.EntityManager)
+  (0, import_inversify3.inject)(import_core12.EntityManager)
 ], WorkflowLinesManager.prototype, "entityManager", 2);
 __decorateClass([
   (0, import_inversify3.inject)(WorkflowDocumentOptions)
@@ -1837,16 +1559,16 @@ WorkflowLinesManager = __decorateClass([
 // src/workflow-document.ts
 var import_nanoid2 = require("nanoid");
 var import_inversify5 = require("inversify");
-var import_utils15 = require("@flowgram.ai/utils");
+var import_utils14 = require("@flowgram.ai/utils");
 var import_form_core3 = require("@flowgram.ai/form-core");
 var import_document6 = require("@flowgram.ai/document");
-var import_core13 = require("@flowgram.ai/core");
+var import_core14 = require("@flowgram.ai/core");
 
 // src/layout/free-layout.ts
 var import_inversify4 = require("inversify");
 var import_document5 = require("@flowgram.ai/document");
-var import_core12 = require("@flowgram.ai/core");
-var import_utils14 = require("@flowgram.ai/utils");
+var import_core13 = require("@flowgram.ai/core");
+var import_utils13 = require("@flowgram.ai/utils");
 var FREE_LAYOUT_KEY = "free-layout";
 var FreeLayout = class {
   constructor() {
@@ -1891,18 +1613,18 @@ var FreeLayout = class {
     if (padding) {
       return typeof padding === "function" ? padding(transform) : padding;
     }
-    return import_utils14.PaddingSchema.empty();
+    return import_utils13.PaddingSchema.empty();
   }
   /**
    * 默认滚动到 fitview 区域
    * @param contentSize
    */
   getInitScroll(contentSize) {
-    const bounds = import_utils14.Rectangle.enlarge(
-      this.document.getAllNodes().map((node) => node.getData(import_core12.TransformData).bounds)
+    const bounds = import_utils13.Rectangle.enlarge(
+      this.document.getAllNodes().map((node) => node.getData(import_core13.TransformData).bounds)
     ).pad(30, 30);
     const viewport = this.playgroundConfig.getViewport(false);
-    const zoom = import_utils14.SizeSchema.fixSize(bounds, viewport);
+    const zoom = import_utils13.SizeSchema.fixSize(bounds, viewport);
     return {
       scrollX: (bounds.x + bounds.width / 2) * zoom - this.playgroundConfig.config.width / 2,
       scrollY: (bounds.y + bounds.height / 2) * zoom - this.playgroundConfig.config.height / 2
@@ -1912,13 +1634,13 @@ var FreeLayout = class {
    * 获取默认输入点
    */
   getDefaultInputPoint(node) {
-    return node.getData(import_core12.TransformData).bounds.leftCenter;
+    return node.getData(import_core13.TransformData).bounds.leftCenter;
   }
   /**
    * 获取默认输出点
    */
   getDefaultOutputPoint(node) {
-    return node.getData(import_core12.TransformData).bounds.rightCenter;
+    return node.getData(import_core13.TransformData).bounds.rightCenter;
   }
   /**
    * 水平中心点
@@ -1928,7 +1650,7 @@ var FreeLayout = class {
   }
 };
 __decorateClass([
-  (0, import_inversify4.inject)(import_core12.PlaygroundConfigEntity)
+  (0, import_inversify4.inject)(import_core13.PlaygroundConfigEntity)
 ], FreeLayout.prototype, "playgroundConfig", 2);
 __decorateClass([
   (0, import_inversify4.inject)(import_document5.FlowDocumentProvider)
@@ -1943,10 +1665,10 @@ var WorkflowDocumentProvider = Symbol("WorkflowDocumentProvider");
 var WorkflowDocument = class extends import_document6.FlowDocument {
   constructor() {
     super(...arguments);
-    this._onContentChangeEmitter = new import_utils15.Emitter();
-    this.onLoadedEmitter = new import_utils15.Emitter();
+    this._onContentChangeEmitter = new import_utils14.Emitter();
+    this.onLoadedEmitter = new import_utils14.Emitter();
     this.onContentChange = this._onContentChangeEmitter.event;
-    this._onReloadEmitter = new import_utils15.Emitter();
+    this._onReloadEmitter = new import_utils14.Emitter();
     this.onReload = this._onReloadEmitter.event;
     this.disposed = false;
     /**
@@ -1986,7 +1708,7 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
     this._loading = true;
     this.clear();
     this.fromJSON(json);
-    await (0, import_utils6.delay)(delayTime);
+    await (0, import_utils4.delay)(delayTime);
     this._loading = false;
     this._onReloadEmitter.fire(this);
   }
@@ -2042,7 +1764,7 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
     if (!position) {
       position = this.getNodeDefaultPosition(json.type);
     }
-    node.getData(import_core13.TransformData).update({
+    node.getData(import_core14.TransformData).update({
       position
     });
     if (formMeta && formData) {
@@ -2055,7 +1777,7 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
         });
       });
     }
-    const positionData = node.getData(import_core13.PositionData);
+    const positionData = node.getData(import_core14.PositionData);
     positionData.onDataChange(() => {
       this.fireContentChange({
         type: "MOVE_NODE" /* MOVE_NODE */,
@@ -2071,7 +1793,7 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
         toJSON: () => this.toNodeJSON(node)
       });
       node.toDispose.push(
-        import_utils15.Disposable.create(() => {
+        import_utils14.Disposable.create(() => {
           this.fireContentChange({
             type: "DELETE_NODE" /* DELETE_NODE */,
             entity: node,
@@ -2080,7 +1802,7 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
         })
       );
       node.toDispose.push(
-        import_utils15.Disposable.create(() => {
+        import_utils14.Disposable.create(() => {
           if (!node.parent || node.parent.flowNodeType === import_document6.FlowNodeBaseType.ROOT) {
             return;
           }
@@ -2101,7 +1823,7 @@ var WorkflowDocument = class extends import_document6.FlowDocument {
       );
     }
     if (subCanvas) {
-      const canvasTransform = subCanvas.canvasNode.getData(import_core13.TransformData);
+      const canvasTransform = subCanvas.canvasNode.getData(import_core14.TransformData);
       canvasTransform.update({
         position: subCanvas.parentNode.getNodeMeta()?.canvasPosition
       });
@@ -2524,10 +2246,10 @@ __decorateClass([
   (0, import_inversify5.inject)(WorkflowLinesManager)
 ], WorkflowDocument.prototype, "linesManager", 2);
 __decorateClass([
-  (0, import_inversify5.inject)(import_core13.PlaygroundConfigEntity)
+  (0, import_inversify5.inject)(import_core14.PlaygroundConfigEntity)
 ], WorkflowDocument.prototype, "playgroundConfig", 2);
 __decorateClass([
-  (0, import_core13.injectPlaygroundContext)()
+  (0, import_core14.injectPlaygroundContext)()
 ], WorkflowDocument.prototype, "playgroundContext", 2);
 __decorateClass([
   (0, import_inversify5.inject)(WorkflowDocumentOptions)
@@ -2557,12 +2279,12 @@ function checkDragSuccess(time, e, originLine) {
 }
 var WorkflowDragService = class {
   constructor() {
-    this._onDragLineEventEmitter = new import_utils17.Emitter();
+    this._onDragLineEventEmitter = new import_utils16.Emitter();
     this.onDragLineEventChange = this._onDragLineEventEmitter.event;
     this.isDragging = false;
-    this._nodesDragEmitter = new import_utils17.Emitter();
+    this._nodesDragEmitter = new import_utils16.Emitter();
     this.onNodesDrag = this._nodesDragEmitter.event;
-    this._toDispose = new import_utils17.DisposableCollection();
+    this._toDispose = new import_utils16.DisposableCollection();
     this._droppableTransforms = [];
     this.posAdjusters = /* @__PURE__ */ new Set();
     this._onDragLineEndCallbacks = /* @__PURE__ */ new Map();
@@ -2589,12 +2311,12 @@ var WorkflowDragService = class {
     const { altKey } = event;
     let startPosition = this.getNodesPosition(selectedNodes);
     let startPositions = selectedNodes.map((node) => {
-      const transform = node.getData(import_core14.TransformData);
+      const transform = node.getData(import_core15.TransformData);
       return { x: transform.position.x, y: transform.position.y };
     });
     let dragSuccess = false;
     const startTime = Date.now();
-    const dragger = new import_core14.PlaygroundDrag({
+    const dragger = new import_core15.PlaygroundDrag({
       onDragStart: () => {
         this.isDragging = true;
       },
@@ -2609,7 +2331,7 @@ var WorkflowDragService = class {
                   selectedNodes = newNodes;
                   startPosition = this.getNodesPosition(tryCopyNodes);
                   startPositions = tryCopyNodes.filter((n) => !n.getNodeMeta().copyDisable).map((node) => {
-                    const transform = node.getData(import_core14.TransformData);
+                    const transform = node.getData(import_core15.TransformData);
                     return {
                       x: transform.position.x,
                       y: transform.position.y
@@ -2626,7 +2348,7 @@ var WorkflowDragService = class {
           startPosition
         });
         selectedNodes.forEach((node, index) => {
-          const transform = node.getData(import_core14.TransformData);
+          const transform = node.getData(import_core15.TransformData);
           const nodeStartPosition = startPositions[index];
           const newPosition = {
             x: nodeStartPosition.x + offset.x,
@@ -2684,14 +2406,14 @@ var WorkflowDragService = class {
   async startDragCard(type, event, data, cloneNode) {
     let domNode;
     let startPos = { x: 0, y: 0 };
-    const deferred = new import_utils17.PromiseDeferred();
-    const dragger = new import_core14.PlaygroundDrag({
+    const deferred = new import_utils16.PromiseDeferred();
+    const dragger = new import_core15.PlaygroundDrag({
       onDragStart: (e) => {
         const targetNode = event.currentTarget;
         domNode = cloneNode ? cloneNode(e) : targetNode.cloneNode(true);
         const bounds = targetNode.getBoundingClientRect();
         startPos = { x: bounds.left, y: bounds.top };
-        import_utils17.domUtils.setStyle(domNode, {
+        import_utils16.domUtils.setStyle(domNode, {
           zIndex: 1e3,
           position: "absolute",
           left: startPos.x,
@@ -2709,17 +2431,17 @@ var WorkflowDragService = class {
         domNode.style.left = `${left}px`;
         domNode.style.top = `${right}px`;
         const { x, y } = this.playgroundConfig.getPosFromMouseEvent(e);
-        const draggingRect = new import_utils17.Rectangle(x, y, 170, 90);
+        const draggingRect = new import_utils16.Rectangle(x, y, 170, 90);
         const collisionTransform = this._droppableTransforms.find((transform) => {
           const { bounds, entity } = transform;
           const padding = this.document.layout.getPadding(entity);
-          const transformRect = new import_utils17.Rectangle(
+          const transformRect = new import_utils16.Rectangle(
             bounds.x + padding.left + padding.right,
             bounds.y,
             bounds.width,
             bounds.height
           );
-          return import_utils17.Rectangle.intersects(draggingRect, transformRect);
+          return import_utils16.Rectangle.intersects(draggingRect, transformRect);
         });
         this.updateDropNode(collisionTransform?.entity);
       },
@@ -2735,7 +2457,7 @@ var WorkflowDragService = class {
           domNode.style.left = `${startPos.x}px`;
           domNode.style.top = `${startPos.y}px`;
           const TIMEOUT = 200;
-          await (0, import_utils17.delay)(TIMEOUT);
+          await (0, import_utils16.delay)(TIMEOUT);
           domNode.remove();
           deferred.resolve();
         }
@@ -2756,7 +2478,7 @@ var WorkflowDragService = class {
     }
     const isParentEmpty = !containerNode.children || containerNode.children.length === 0;
     const parentPadding = this.document.layout.getPadding(containerNode);
-    const parentTransform = containerNode.getData(import_core14.TransformData);
+    const parentTransform = containerNode.getData(import_core15.TransformData);
     if (isParentEmpty && resetEmptyPos) {
       return {
         x: 0,
@@ -2823,7 +2545,7 @@ var WorkflowDragService = class {
    * 获取节点整体位置
    */
   getNodesPosition(nodes) {
-    const selectedBounds = import_utils17.Rectangle.enlarge(
+    const selectedBounds = import_utils16.Rectangle.enlarge(
       nodes.map((n) => n.getData(import_document7.FlowNodeTransformData).bounds)
     );
     const position = {
@@ -2910,12 +2632,12 @@ var WorkflowDragService = class {
       return { dragSuccess: false, newLine: void 0 };
     }
     const config = this.playgroundConfig;
-    const deferred = new import_utils17.PromiseDeferred();
+    const deferred = new import_utils16.PromiseDeferred();
     const preCursor = config.cursor;
     let line, toPort, toNode, lineErrorReset = false;
     const startTime = Date.now();
     let dragSuccess = false;
-    const dragger = new import_core14.PlaygroundDrag({
+    const dragger = new import_core15.PlaygroundDrag({
       onDrag: (e) => {
         if (!line && checkDragSuccess(Date.now() - startTime, e, originLine)) {
           if (originLine) {
@@ -3065,7 +2787,7 @@ var WorkflowDragService = class {
   }
 };
 __decorateClass([
-  (0, import_inversify6.inject)(import_core14.PlaygroundConfigEntity)
+  (0, import_inversify6.inject)(import_core15.PlaygroundConfigEntity)
 ], WorkflowDragService.prototype, "playgroundConfig", 2);
 __decorateClass([
   (0, import_inversify6.inject)(WorkflowHoverService)
@@ -3077,7 +2799,7 @@ __decorateClass([
   (0, import_inversify6.inject)(WorkflowLinesManager)
 ], WorkflowDragService.prototype, "linesManager", 2);
 __decorateClass([
-  (0, import_inversify6.inject)(import_core14.CommandService)
+  (0, import_inversify6.inject)(import_core15.CommandService)
 ], WorkflowDragService.prototype, "commandService", 2);
 __decorateClass([
   (0, import_inversify6.inject)(WorkflowSelectService)
@@ -3094,17 +2816,17 @@ WorkflowDragService = __decorateClass([
 
 // src/service/workflow-reset-layout-service.ts
 var import_inversify7 = require("inversify");
-var import_core16 = require("@flowgram.ai/core");
 var import_core17 = require("@flowgram.ai/core");
-var import_utils18 = require("@flowgram.ai/utils");
+var import_core18 = require("@flowgram.ai/core");
+var import_utils17 = require("@flowgram.ai/utils");
 
 // src/utils/layout-to-positions.ts
 var import_document9 = require("@flowgram.ai/document");
-var import_core15 = require("@flowgram.ai/core");
+var import_core16 = require("@flowgram.ai/core");
 var layoutToPositions = async (nodes, nodePositionMap) => {
   const newNodePositionMap = {};
   nodes.forEach((node) => {
-    const transform = node.getData(import_core15.TransformData);
+    const transform = node.getData(import_core16.TransformData);
     const nodeTransform = node.getData(import_document9.FlowNodeTransformData);
     newNodePositionMap[node.id] = {
       x: transform.position.x,
@@ -3112,13 +2834,13 @@ var layoutToPositions = async (nodes, nodePositionMap) => {
     };
   });
   return new Promise((resolve) => {
-    (0, import_core15.startTween)({
+    (0, import_core16.startTween)({
       from: { d: 0 },
       to: { d: 100 },
       duration: 300,
       onUpdate: (v) => {
         nodes.forEach((node) => {
-          const transform = node.getData(import_core15.TransformData);
+          const transform = node.getData(import_core16.TransformData);
           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) {
@@ -3145,12 +2867,12 @@ var layoutToPositions = async (nodes, nodePositionMap) => {
 // src/service/workflow-reset-layout-service.ts
 var WorkflowResetLayoutService = class {
   constructor() {
-    this._resetLayoutEmitter = new import_utils18.Emitter();
+    this._resetLayoutEmitter = new import_utils17.Emitter();
     /**
      * reset layout事件
      */
     this.onResetLayout = this._resetLayoutEmitter.event;
-    this._toDispose = new import_utils18.DisposableCollection();
+    this._toDispose = new import_utils17.DisposableCollection();
   }
   init() {
     this._toDispose.push(this._resetLayoutEmitter);
@@ -3187,13 +2909,13 @@ var WorkflowResetLayoutService = class {
   }
 };
 __decorateClass([
-  (0, import_inversify7.inject)(import_core16.PlaygroundConfigEntity)
+  (0, import_inversify7.inject)(import_core17.PlaygroundConfigEntity)
 ], WorkflowResetLayoutService.prototype, "_config", 2);
 __decorateClass([
   (0, import_inversify7.inject)(WorkflowDocument)
 ], WorkflowResetLayoutService.prototype, "_document", 2);
 __decorateClass([
-  (0, import_inversify7.inject)(import_core17.EntityManager)
+  (0, import_inversify7.inject)(import_core18.EntityManager)
 ], WorkflowResetLayoutService.prototype, "_entityManager", 2);
 __decorateClass([
   (0, import_inversify7.postConstruct)()
@@ -3204,10 +2926,10 @@ WorkflowResetLayoutService = __decorateClass([
 
 // src/hooks/use-playground-readonly-state.ts
 var import_react = require("react");
-var import_core18 = require("@flowgram.ai/core");
+var import_core19 = require("@flowgram.ai/core");
 function usePlaygroundReadonlyState(listenChange) {
-  const playground = (0, import_core18.usePlayground)();
-  const refresh = (0, import_core18.useRefresh)();
+  const playground = (0, import_core19.usePlayground)();
+  const refresh = (0, import_core19.useRefresh)();
   (0, import_react.useEffect)(() => {
     let dispose = void 0;
     if (listenChange) {
@@ -3223,12 +2945,12 @@ function checkTargetDraggable(el) {
   return el && el.tagName !== "INPUT" && el.tagName !== "TEXTAREA" && !el.closest(".flow-canvas-not-draggable");
 }
 function useNodeRender(nodeFromProps) {
-  const node = nodeFromProps || (0, import_react2.useContext)(import_core19.PlaygroundEntityContext);
+  const node = nodeFromProps || (0, import_react2.useContext)(import_core20.PlaygroundEntityContext);
   const renderData = node.getData(import_document10.FlowNodeRenderData);
   const portsData = node.getData(WorkflowNodePortsData);
   const readonly = usePlaygroundReadonlyState();
-  const dragService = (0, import_core19.useService)(WorkflowDragService);
-  const selectionService = (0, import_core19.useService)(WorkflowSelectService);
+  const dragService = (0, import_core20.useService)(WorkflowDragService);
+  const selectionService = (0, import_core20.useService)(WorkflowSelectService);
   const isDragging = (0, import_react2.useRef)(false);
   const nodeRef = (0, import_react2.useRef)(null);
   const [linkingNodeId, setLinkingNodeId] = (0, import_react2.useState)("");
@@ -3279,7 +3001,7 @@ function useNodeRender(nodeFromProps) {
     [node]
   );
   const deleteNode = (0, import_react2.useCallback)(() => node.dispose(), [node]);
-  (0, import_core19.useListenEvents)(selectionService.onSelectionChanged, portsData.onDataChange);
+  (0, import_core20.useListenEvents)(selectionService.onSelectionChanged, portsData.onDataChange);
   const isFirefox = navigator?.userAgent?.includes?.("Firefox");
   const onFocus = (0, import_react2.useCallback)(() => {
     if (isFirefox) {
@@ -3337,23 +3059,23 @@ function useNodeRender(nodeFromProps) {
 
 // src/hooks/use-current-dom-node.ts
 var import_document11 = require("@flowgram.ai/document");
-var import_core20 = require("@flowgram.ai/core");
+var import_core21 = require("@flowgram.ai/core");
 function useCurrentDomNode() {
-  const entity = (0, import_core20.useEntityFromContext)();
+  const entity = (0, import_core21.useEntityFromContext)();
   const renderData = entity.getData(import_document11.FlowNodeRenderData);
   return renderData.node;
 }
 
 // src/hooks/use-current-entity.ts
-var import_core21 = require("@flowgram.ai/core");
+var import_core22 = require("@flowgram.ai/core");
 function useCurrentEntity() {
-  return (0, import_core21.useEntityFromContext)();
+  return (0, import_core22.useEntityFromContext)();
 }
 
 // src/hooks/use-workflow-document.ts
-var import_core22 = require("@flowgram.ai/core");
+var import_core23 = require("@flowgram.ai/core");
 function useWorkflowDocument() {
-  return (0, import_core22.useService)(WorkflowDocument);
+  return (0, import_core23.useService)(WorkflowDocument);
 }
 
 // src/constants.ts
@@ -3371,7 +3093,7 @@ var InteractiveType = /* @__PURE__ */ ((InteractiveType2) => {
 // src/workflow-document-container-module.ts
 var import_inversify9 = require("inversify");
 var import_document13 = require("@flowgram.ai/document");
-var import_utils20 = require("@flowgram.ai/utils");
+var import_utils19 = require("@flowgram.ai/utils");
 
 // src/workflow-document-contribution.ts
 var import_inversify8 = require("inversify");
@@ -3414,7 +3136,7 @@ var WorkflowDocumentContainerModule = new import_inversify9.ContainerModule(
     bind(WorkflowHoverService).toSelf().inSingletonScope();
     bind(WorkflowResetLayoutService).toSelf().inSingletonScope();
     bind(URLParams).toDynamicValue(() => getUrlParams()).inSingletonScope();
-    (0, import_utils20.bindContributions)(bind, WorkflowDocumentContribution, [import_document13.FlowDocumentContribution]);
+    (0, import_utils19.bindContributions)(bind, WorkflowDocumentContribution, [import_document13.FlowDocumentContribution]);
     bind(WorkflowDocumentOptions).toConstantValue({
       ...WorkflowDocumentOptionsDefault
     });
@@ -3422,11 +3144,84 @@ var WorkflowDocumentContainerModule = new import_inversify9.ContainerModule(
     bind(WorkflowDocumentProvider).toDynamicValue((ctx) => () => ctx.container.get(WorkflowDocument)).inSingletonScope();
   }
 );
+
+// src/utils/simple-line.ts
+var import_utils20 = require("@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 import_utils20.Point.getDistance(pos, this.projectPointOnLine(pos, start, end));
+  }
+  get bounds() {
+    if (!this.data) {
+      return new import_utils20.Rectangle();
+    }
+    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 = import_utils20.Rectangle.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";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  BezierControlType,
   EditorCursorState,
-  FoldLine,
   InteractiveType,
   LINE_HOVER_DISTANCE,
   LineColors,
@@ -3445,6 +3240,7 @@ var WorkflowDocumentContainerModule = new import_inversify9.ContainerModule(
   WorkflowDragService,
   WorkflowHoverService,
   WorkflowLineEntity,
+  WorkflowLineRenderData,
   WorkflowLinesManager,
   WorkflowNodeEntity,
   WorkflowNodeLinesData,
@@ -3452,6 +3248,7 @@ var WorkflowDocumentContainerModule = new import_inversify9.ContainerModule(
   WorkflowPortEntity,
   WorkflowResetLayoutService,
   WorkflowSelectService,
+  WorkflowSimpleLineContribution,
   bindConfigEntity,
   compose,
   composeAsync,
@@ -3459,8 +3256,6 @@ var WorkflowDocumentContainerModule = new import_inversify9.ContainerModule(
   domReactToBounds,
   fitView,
   getAntiOverlapPosition,
-  getBezierHorizontalControlPoints,
-  getBezierVerticalControlPoints,
   getPortEntityId,
   nanoid,
   useConfigEntity,