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

package/dist/esm/index.js

@@ -8,7 +8,7 @@ import {
 import {
   LineColors,
   LineType
-} from "./chunk-KAL7YCC2.js";
+} from "./chunk-PT4ZVDZZ.js";
 import {
   __decorateClass
 } from "./chunk-EUXUH3YW.js";
@@ -57,321 +57,12 @@ import {
   SelectionService,
   TransformData as TransformData4
 } from "@flowgram.ai/core";
-import { Rectangle as Rectangle7, SizeSchema } from "@flowgram.ai/utils";
+import { Rectangle as Rectangle6, SizeSchema } from "@flowgram.ai/utils";
 
 // src/utils/index.ts
 import { bindConfigEntity } from "@flowgram.ai/core";
 import { delay } from "@flowgram.ai/utils";
 
-// src/utils/fold-line.ts
-import { Point, Rectangle } from "@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(
-      Point.getDistance(a, b) / 2,
-      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 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) => Point.getDistance(p, pos)));
-  }
-  FoldLine2.getFoldLineToPointDistance = getFoldLineToPointDistance;
-})(FoldLine || (FoldLine = {}));
-
-// src/utils/bezier.ts
-import { Rectangle as Rectangle2 } from "@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 = Rectangle2.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 = Rectangle2.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;
-}
-
 // src/utils/nanoid.ts
 import { nanoid as nanoidOrigin } from "nanoid";
 function nanoid(n) {
@@ -383,9 +74,9 @@ import { compose, composeAsync } from "@flowgram.ai/utils";
 
 // src/utils/fit-view.ts
 import { TransformData } from "@flowgram.ai/core";
-import { Rectangle as Rectangle3 } from "@flowgram.ai/utils";
+import { Rectangle } from "@flowgram.ai/utils";
 var fitView = (doc, playgroundConfig, easing = true) => {
-  const bounds = Rectangle3.enlarge(
+  const bounds = Rectangle.enlarge(
     doc.getAllNodes().map((node) => node.getData(TransformData).bounds)
   );
   return playgroundConfig.fitView(bounds, easing, 30);
@@ -417,11 +108,11 @@ function getAntiOverlapPosition(doc, position, containerNode) {
 }
 
 // src/utils/statics.ts
-import { Rectangle as Rectangle4 } from "@flowgram.ai/utils";
+import { Rectangle as Rectangle2 } from "@flowgram.ai/utils";
 var getPortEntityId = (node, portType, portID = "") => `port_${portType}_${node.id}_${portID}`;
 var WORKFLOW_LINE_ENTITY = "WorkflowLineEntity";
 function domReactToBounds(react) {
-  return new Rectangle4(react.x, react.y, react.width, react.height);
+  return new Rectangle2(react.x, react.y, react.width, react.height);
 }
 
 // src/entities/workflow-node-entity.ts
@@ -430,8 +121,7 @@ var WorkflowNodeEntity = FlowNodeEntity;
 
 // src/entities/workflow-line-entity.ts
 import { isEqual as isEqual2 } from "lodash-es";
-import { Bezier } from "bezier-js";
-import { domUtils, Point as Point2, Rectangle as Rectangle6 } from "@flowgram.ai/utils";
+import { domUtils } from "@flowgram.ai/utils";
 import { Entity as Entity2 } from "@flowgram.ai/core";
 
 // src/entity-datas/workflow-node-ports-data.ts
@@ -440,7 +130,7 @@ import { FlowNodeRenderData } from "@flowgram.ai/document";
 import { EntityData, SizeData } from "@flowgram.ai/core";
 
 // src/entities/workflow-port-entity.ts
-import { Rectangle as Rectangle5, Emitter } from "@flowgram.ai/utils";
+import { Rectangle as Rectangle3, Emitter } from "@flowgram.ai/utils";
 import {
   Entity,
   PlaygroundConfigEntity,
@@ -511,7 +201,7 @@ var WorkflowPortEntity = class extends Entity {
   get bounds() {
     const { point } = this;
     const halfSize = PORT_SIZE / 2;
-    return new Rectangle5(point.x - halfSize, point.y - halfSize, PORT_SIZE, PORT_SIZE);
+    return new Rectangle3(point.x - halfSize, point.y - halfSize, PORT_SIZE, PORT_SIZE);
   }
   isHovered(x, y) {
     return this.bounds.contains(x, y);
@@ -767,6 +457,218 @@ var WorkflowNodePortsData = class extends EntityData {
 };
 WorkflowNodePortsData.type = "WorkflowNodePortsData";
 
+// src/entity-datas/workflow-node-lines-data.ts
+import { Disposable } from "@flowgram.ai/utils";
+import { EntityData as EntityData2 } from "@flowgram.ai/core";
+var _WorkflowNodeLinesData = class _WorkflowNodeLinesData extends EntityData2 {
+  getDefaultData() {
+    return {
+      inputLines: [],
+      outputLines: []
+    };
+  }
+  constructor(entity) {
+    super(entity);
+    this.entity = entity;
+    this.toDispose.push(
+      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
+import { Rectangle as Rectangle4 } from "@flowgram.ai/utils";
+import { EntityData as EntityData3 } from "@flowgram.ai/core";
+var WorkflowLineRenderData = class extends EntityData3 {
+  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 Rectangle4();
+  }
+  /**
+   * 更新数据
+   * 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;
@@ -781,10 +683,6 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     this.info = {
       from: ""
     };
-    /**
-     * 贝塞尔线条版本
-     */
-    this._bezierVersion = "";
     this.document = opts.document;
     this.linesManager = opts.linesManager;
     this.initInfo({
@@ -910,59 +808,17 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
       this.fireChange();
     }
   }
-  /**
-   * 创建贝塞尔线条
-   * @param fromPos 前置节点位置
-   * @param toPos 后置节点位置
-   * @returns 贝塞尔线条数据
-   */
-  createBezier(fromPos, toPos) {
-    const controls = this.vertical ? getBezierVerticalControlPoints(fromPos, toPos) : getBezierHorizontalControlPoints(fromPos, toPos);
-    const bezier = new Bezier([fromPos, ...controls, toPos]);
-    const bbox = bezier.bbox();
-    const bboxBounds = new Rectangle6(
-      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 Point2.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);
@@ -977,37 +833,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
    * 获取线条真实的输入输出节点坐标
    */
   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() {
@@ -1029,17 +855,17 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
   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 线条信息
@@ -1071,15 +897,6 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends Entity2 {
     }
     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);
   }
@@ -1185,7 +1002,7 @@ var WorkflowSelectService = class {
       entities: [node]
     };
     if (fitView2) {
-      const bounds = Rectangle7.enlarge([node.getData(TransformData4).bounds]).pad(
+      const bounds = Rectangle6.enlarge([node.getData(TransformData4).bounds]).pad(
         30,
         30
       );
@@ -1278,7 +1095,7 @@ import {
   PromiseDeferred,
   Emitter as Emitter5,
   DisposableCollection as DisposableCollection2,
-  Rectangle as Rectangle9,
+  Rectangle as Rectangle8,
   delay as delay2
 } from "@flowgram.ai/utils";
 import {
@@ -1351,125 +1168,6 @@ var WorkflowDocumentOptionsDefault = {
   }
 };
 
-// src/entity-datas/workflow-node-lines-data.ts
-import { Disposable } from "@flowgram.ai/utils";
-import { EntityData as EntityData2 } from "@flowgram.ai/core";
-var _WorkflowNodeLinesData = class _WorkflowNodeLinesData extends EntityData2 {
-  getDefaultData() {
-    return {
-      inputLines: [],
-      outputLines: []
-    };
-  }
-  constructor(entity) {
-    super(entity);
-    this.entity = entity;
-    this.toDispose.push(
-      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() {
@@ -1486,6 +1184,7 @@ var WorkflowLinesManager = class {
      * 强制渲染 lines
      */
     this.onForceUpdate = this.onForceUpdateEmitter.event;
+    this.contributionFactories = [];
     /**
      * 是否在调整线条
      */
@@ -1524,7 +1223,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;
   }
@@ -1574,6 +1278,7 @@ var WorkflowLinesManager = class {
       to,
       drawingTo
     });
+    this.registerData(line);
     fromNode.addLine(line);
     toNode?.addLine(line);
     line.onDispose(() => {
@@ -1614,7 +1319,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;
@@ -1664,6 +1369,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;
@@ -1752,6 +1469,13 @@ var WorkflowLinesManager = class {
     }
     return last(containNodes);
   }
+  registerContribution(factory) {
+    this.contributionFactories.push(factory);
+    return this;
+  }
+  registerData(line) {
+    line.addData(WorkflowLineRenderData);
+  }
 };
 __decorateClass([
   inject3(WorkflowHoverService)
@@ -1791,7 +1515,7 @@ import {
 import { PlaygroundConfigEntity as PlaygroundConfigEntity3, TransformData as TransformData7 } from "@flowgram.ai/core";
 import {
   PaddingSchema,
-  Rectangle as Rectangle8,
+  Rectangle as Rectangle7,
   SizeSchema as SizeSchema2
 } from "@flowgram.ai/utils";
 var FREE_LAYOUT_KEY = "free-layout";
@@ -1845,7 +1569,7 @@ var FreeLayout = class {
    * @param contentSize
    */
   getInitScroll(contentSize) {
-    const bounds = Rectangle8.enlarge(
+    const bounds = Rectangle7.enlarge(
       this.document.getAllNodes().map((node) => node.getData(TransformData7).bounds)
     ).pad(30, 30);
     const viewport = this.playgroundConfig.getViewport(false);
@@ -2656,17 +2380,17 @@ var WorkflowDragService = class {
         domNode.style.left = `${left}px`;
         domNode.style.top = `${right}px`;
         const { x, y } = this.playgroundConfig.getPosFromMouseEvent(e);
-        const draggingRect = new Rectangle9(x, y, 170, 90);
+        const draggingRect = new Rectangle8(x, y, 170, 90);
         const collisionTransform = this._droppableTransforms.find((transform) => {
           const { bounds, entity } = transform;
           const padding = this.document.layout.getPadding(entity);
-          const transformRect = new Rectangle9(
+          const transformRect = new Rectangle8(
             bounds.x + padding.left + padding.right,
             bounds.y,
             bounds.width,
             bounds.height
           );
-          return Rectangle9.intersects(draggingRect, transformRect);
+          return Rectangle8.intersects(draggingRect, transformRect);
         });
         this.updateDropNode(collisionTransform?.entity);
       },
@@ -2770,7 +2494,7 @@ var WorkflowDragService = class {
    * 获取节点整体位置
    */
   getNodesPosition(nodes) {
-    const selectedBounds = Rectangle9.enlarge(
+    const selectedBounds = Rectangle8.enlarge(
       nodes.map((n) => n.getData(FlowNodeTransformData5).bounds)
     );
     const position = {
@@ -3372,10 +3096,83 @@ 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 {
-  BezierControlType,
   EditorCursorState,
-  FoldLine,
   InteractiveType,
   LINE_HOVER_DISTANCE,
   LineColors,
@@ -3394,6 +3191,7 @@ export {
   WorkflowDragService,
   WorkflowHoverService,
   WorkflowLineEntity,
+  WorkflowLineRenderData,
   WorkflowLinesManager,
   WorkflowNodeEntity,
   WorkflowNodeLinesData,
@@ -3401,6 +3199,7 @@ export {
   WorkflowPortEntity,
   WorkflowResetLayoutService,
   WorkflowSelectService,
+  WorkflowSimpleLineContribution,
   bindConfigEntity,
   compose,
   composeAsync,
@@ -3408,8 +3207,6 @@ export {
   domReactToBounds,
   fitView,
   getAntiOverlapPosition,
-  getBezierHorizontalControlPoints,
-  getBezierVerticalControlPoints,
   getPortEntityId,
   nanoid,
   useConfigEntity,