@flowgram.ai/free-lines-plugin 0.1.5 → 0.1.7

package/dist/index.js

@@ -38,10 +38,20 @@ var __decorateClass = (decorators, target, key, kind) => {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  BezierControlType: () => BezierControlType,
   LINE_OFFSET: () => LINE_OFFSET,
-  LinesLayer: () => LinesLayer,
+  LINE_PADDING: () => LINE_PADDING,
+  LinesLayer: () => WorkflowLinesLayer,
+  WorkflowArkLineContribution: () => WorkflowArkLineContribution,
+  WorkflowBezierLineContribution: () => WorkflowBezierLineContribution,
+  WorkflowFoldLineContribution: () => WorkflowFoldLineContribution,
+  WorkflowLinesLayer: () => WorkflowLinesLayer,
+  WorkflowManhattanLineContribution: () => WorkflowManhattanLineContribution,
   WorkflowPortRender: () => WorkflowPortRender,
-  createFreeLinesPlugin: () => createFreeLinesPlugin
+  WorkflowStraightLineContribution: () => WorkflowStraightLineContribution,
+  createFreeLinesPlugin: () => createFreeLinesPlugin,
+  getBezierHorizontalControlPoints: () => getBezierHorizontalControlPoints,
+  getBezierVerticalControlPoints: () => getBezierVerticalControlPoints
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -269,27 +279,30 @@ var WorkflowPortRender = (
 
 // src/constants/lines.ts
 var LINE_OFFSET = 6;
+var LINE_PADDING = 12;
 
 // src/create-free-lines-plugin.ts
+var import_free_layout_core12 = require("@flowgram.ai/free-layout-core");
 var import_core3 = require("@flowgram.ai/core");
 
-// src/layer/lines-layer.tsx
+// src/layer/workflow-lines-layer.tsx
 var import_react_dom2 = __toESM(require("react-dom"));
-var import_react7 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_inversify = require("inversify");
 var import_utils = require("@flowgram.ai/utils");
-var import_free_layout_core5 = require("@flowgram.ai/free-layout-core");
+var import_free_layout_core4 = require("@flowgram.ai/free-layout-core");
 var import_core2 = require("@flowgram.ai/core");
 
-// src/components/lines/index.tsx
-var import_react6 = __toESM(require("react"));
-var import_free_layout_core4 = require("@flowgram.ai/free-layout-core");
+// src/components/workflow-line-render/index.tsx
+var import_react5 = require("react");
 
-// src/components/lines/fold-line/index.tsx
+// src/components/workflow-line-render/line-svg.tsx
 var import_react4 = __toESM(require("react"));
+var import_clsx2 = __toESM(require("clsx"));
 var import_free_layout_core2 = require("@flowgram.ai/free-layout-core");
+var import_free_layout_core3 = require("@flowgram.ai/free-layout-core");
 
-// src/components/lines/index.style.ts
+// src/components/workflow-line-render/index.style.ts
 var import_styled_components2 = __toESM(require("styled-components"));
 var LineStyle = import_styled_components2.default.div.attrs({
   className: "gedit-flow-activity-edge"
@@ -302,13 +315,16 @@ var LineStyle = import_styled_components2.default.div.attrs({
     }
   }
 
-  .flowing-line {
+  .dashed-line {
     stroke-dasharray: 8, 5;
+  }
+
+  .flowing-line {
     animation: flowingDash 0.5s linear infinite;
   }
 `;
 
-// src/components/lines/arrow/index.tsx
+// src/components/workflow-line-render/arrow.tsx
 var import_react3 = __toESM(require("react"));
 function ArrowRenderer({
   id,
@@ -334,116 +350,48 @@ function ArrowRenderer({
   );
 }
 
-// src/components/lines/fold-line/index.tsx
-var FoldLineRender = (props) => {
-  const { selected, color, line, children } = props;
-  const { to, from } = line.position;
-  const strokeWidth = selected ? STROKE_WIDTH_SLECTED : STROKE_WIDTH;
-  const arrowToPos = {
-    x: to.x - import_free_layout_core2.POINT_RADIUS,
-    y: to.y
-  };
-  const arrowFromPos = {
-    x: from.x + import_free_layout_core2.POINT_RADIUS + LINE_OFFSET,
-    y: from.y
-  };
-  return /* @__PURE__ */ import_react4.default.createElement(LineStyle, null, children, /* @__PURE__ */ import_react4.default.createElement("svg", { overflow: "visible" }, /* @__PURE__ */ import_react4.default.createElement("defs", null, /* @__PURE__ */ import_react4.default.createElement(
-    "linearGradient",
-    {
-      x1: "0%",
-      y1: "100%",
-      x2: "100%",
-      y2: "100%",
-      id: line.id,
-      gradientUnits: "userSpaceOnUse"
-    },
-    /* @__PURE__ */ import_react4.default.createElement("stop", { stopColor: color, offset: "0%" }),
-    /* @__PURE__ */ import_react4.default.createElement("stop", { stopColor: color, offset: "100%" })
-  )), /* @__PURE__ */ import_react4.default.createElement("g", null, /* @__PURE__ */ import_react4.default.createElement(
-    "path",
-    {
-      d: line.bezier.foldPath,
-      fill: "none",
-      strokeLinecap: "round",
-      stroke: color,
-      strokeWidth,
-      className: line.flowing || line.processing ? "flowing-line" : ""
-    }
-  ), /* @__PURE__ */ import_react4.default.createElement(
-    ArrowRenderer,
-    {
-      id: line.id,
-      reverseArrow: line.reverse,
-      pos: line.reverse ? arrowFromPos : arrowToPos,
-      strokeWidth,
-      hide: line.hideArrow
-    }
-  ))));
-};
-
-// src/components/lines/bezier-line/index.tsx
-var import_react5 = __toESM(require("react"));
-var import_free_layout_core3 = require("@flowgram.ai/free-layout-core");
+// src/components/workflow-line-render/line-svg.tsx
 var PADDING = 12;
-var BezierLineRender = (props) => {
-  const { line, color, fromColor, toColor, selected, children, strokePrefix } = props;
-  const { bbox } = line.bezier;
+var LineSVG = (props) => {
+  const { line, color, selected, children, strokePrefix } = props;
   const { position, reverse, vertical, hideArrow } = line;
+  const renderData = line.getData(import_free_layout_core3.WorkflowLineRenderData);
+  const { bounds, path: bezierPath } = renderData;
   const toRelative = (p) => ({
-    x: p.x - bbox.x + PADDING,
-    y: p.y - bbox.y + PADDING
+    x: p.x - bounds.x + PADDING,
+    y: p.y - bounds.y + PADDING
   });
   const fromPos = toRelative(position.from);
   const toPos = toRelative(position.to);
-  const arrowToPos = vertical ? { x: toPos.x, y: toPos.y - import_free_layout_core3.POINT_RADIUS } : { x: toPos.x - import_free_layout_core3.POINT_RADIUS, y: toPos.y };
-  const arrowFromPos = vertical ? { x: fromPos.x, y: fromPos.y + import_free_layout_core3.POINT_RADIUS + LINE_OFFSET } : { x: fromPos.x + import_free_layout_core3.POINT_RADIUS + LINE_OFFSET, y: fromPos.y };
-  const controls = line.bezier.controls.map((c) => toRelative(c));
-  const getLinearStartColor = () => {
-    if (vertical) {
-      return fromPos.y < arrowToPos.y ? fromColor : toColor;
-    }
-    return fromPos.x < arrowToPos.x ? fromColor : toColor;
-  };
-  const getLinearEndColor = () => {
-    if (vertical) {
-      return fromPos.y < arrowToPos.y ? toColor : fromColor;
-    }
-    return fromPos.x < arrowToPos.x ? toColor : fromColor;
-  };
-  const linearStartColor = getLinearStartColor();
-  const linearEndColor = getLinearEndColor();
-  const getPathData = () => {
-    const controlPoints = controls.map((s) => `${s.x} ${s.y}`).join(",");
-    const curveType = controls.length === 1 ? "S" : "C";
-    if (vertical) {
-      return `M${fromPos.x} ${fromPos.y + import_free_layout_core3.POINT_RADIUS} ${curveType} ${controlPoints}, ${arrowToPos.x} ${arrowToPos.y}`;
-    }
-    return `M${fromPos.x + import_free_layout_core3.POINT_RADIUS} ${fromPos.y} ${curveType} ${controlPoints}, ${arrowToPos.x} ${arrowToPos.y}`;
-  };
-  const pathData = getPathData();
+  const arrowToPos = vertical ? { x: toPos.x, y: toPos.y - import_free_layout_core2.POINT_RADIUS } : { x: toPos.x - import_free_layout_core2.POINT_RADIUS, y: toPos.y };
+  const arrowFromPos = vertical ? { x: fromPos.x, y: fromPos.y + import_free_layout_core2.POINT_RADIUS + LINE_OFFSET } : { x: fromPos.x + import_free_layout_core2.POINT_RADIUS + LINE_OFFSET, y: fromPos.y };
   const strokeWidth = selected ? STROKE_WIDTH_SLECTED : STROKE_WIDTH;
   const strokeID = strokePrefix ? `${strokePrefix}-${line.id}` : line.id;
-  const path = /* @__PURE__ */ import_react5.default.createElement(
+  const path = /* @__PURE__ */ import_react4.default.createElement(
     "path",
     {
-      d: pathData,
+      d: bezierPath,
       fill: "none",
       stroke: `url(#${strokeID})`,
       strokeWidth,
-      className: line.processing || line.flowing ? "flowing-line" : ""
+      className: (0, import_clsx2.default)(
+        line.className,
+        // 显示流动线条的条件：没有自定义线条class，并且线条处于流动或处理中
+        !line.className && (line.processing || line.flowing ? "dashed-line flowing-line" : "")
+      )
     }
   );
-  return /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ import_react4.default.createElement(
     LineStyle,
     {
       style: {
-        left: bbox.x - PADDING,
-        top: bbox.y - PADDING,
+        left: bounds.x - PADDING,
+        top: bounds.y - PADDING,
         position: "absolute"
       }
     },
     children,
-    /* @__PURE__ */ import_react5.default.createElement("svg", { width: bbox.width + PADDING * 2, height: bbox.height + PADDING * 2 }, /* @__PURE__ */ import_react5.default.createElement("defs", null, /* @__PURE__ */ import_react5.default.createElement(
+    /* @__PURE__ */ import_react4.default.createElement("svg", { width: bounds.width + PADDING * 2, height: bounds.height + PADDING * 2 }, /* @__PURE__ */ import_react4.default.createElement("defs", null, /* @__PURE__ */ import_react4.default.createElement(
       "linearGradient",
       {
         x1: vertical ? "100%" : "0%",
@@ -453,9 +401,9 @@ var BezierLineRender = (props) => {
         id: strokeID,
         gradientUnits: "userSpaceOnUse"
       },
-      /* @__PURE__ */ import_react5.default.createElement("stop", { stopColor: color || linearStartColor, offset: "0%" }),
-      /* @__PURE__ */ import_react5.default.createElement("stop", { stopColor: color || linearEndColor, offset: "100%" })
-    )), /* @__PURE__ */ import_react5.default.createElement("g", null, path, /* @__PURE__ */ import_react5.default.createElement(
+      /* @__PURE__ */ import_react4.default.createElement("stop", { stopColor: color, offset: "0%" }),
+      /* @__PURE__ */ import_react4.default.createElement("stop", { stopColor: color, offset: "100%" })
+    )), /* @__PURE__ */ import_react4.default.createElement("g", null, path, /* @__PURE__ */ import_react4.default.createElement(
       ArrowRenderer,
       {
         id: strokeID,
@@ -465,27 +413,21 @@ var BezierLineRender = (props) => {
         vertical,
         hide: hideArrow
       }
-    ), props.showControlPoints ? controls.map((c, i) => /* @__PURE__ */ import_react5.default.createElement("circle", { key: i, cx: c.x, cy: c.y, r: "4", fill: "#ccc" })) : void 0))
+    )))
   );
 };
 
-// src/components/lines/index.tsx
-var LineTypeRender = (props) => {
-  if (props.lineType === import_free_layout_core4.LineType.LINE_CHART) {
-    return /* @__PURE__ */ import_react6.default.createElement(FoldLineRender, { ...props });
-  }
-  return /* @__PURE__ */ import_react6.default.createElement(BezierLineRender, { ...props });
-};
-var LineRender = (0, import_react6.memo)(
-  LineTypeRender,
+// src/components/workflow-line-render/index.tsx
+var WorkflowLineRender = (0, import_react5.memo)(
+  LineSVG,
   (prevProps, nextProps) => prevProps.version === nextProps.version
 );
 
-// src/layer/lines-layer.tsx
-var LinesLayer = class extends import_core2.Layer {
+// src/layer/workflow-lines-layer.tsx
+var WorkflowLinesLayer = class extends import_core2.Layer {
   constructor() {
     super(...arguments);
-    this.layerID = (0, import_free_layout_core5.nanoid)();
+    this.layerID = (0, import_free_layout_core4.nanoid)();
     this.mountedLines = /* @__PURE__ */ new Map();
     this._version = 0;
     /**
@@ -512,14 +454,15 @@ var LinesLayer = class extends import_core2.Layer {
     this.mountedLines.clear();
   }
   render() {
-    const [, forceUpdate] = (0, import_react7.useState)({});
-    (0, import_react7.useLayoutEffect)(() => {
+    const [, forceUpdate] = (0, import_react6.useState)({});
+    (0, import_react6.useLayoutEffect)(() => {
       const updateLines = () => {
         let needsUpdate = false;
         this.lines.forEach((line) => {
-          const oldVersion = line.bezierDataVersion;
-          line.refreshBezier();
-          if (line.bezierDataVersion !== oldVersion) {
+          const renderData = line.getData(import_free_layout_core4.WorkflowLineRenderData);
+          const oldVersion = renderData.renderVersion;
+          renderData.update();
+          if (renderData.renderVersion !== oldVersion) {
             needsUpdate = true;
           }
         });
@@ -531,7 +474,7 @@ var LinesLayer = class extends import_core2.Layer {
       return () => cancelAnimationFrame(rafId);
     }, [this.lines]);
     const lines = this.lines.map((line) => this.renderLine(line));
-    return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, lines);
+    return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, lines);
   }
   // 用来绕过 memo
   bumpVersion() {
@@ -541,10 +484,12 @@ var LinesLayer = class extends import_core2.Layer {
     }
   }
   lineProps(line) {
+    const renderData = line.getData(import_free_layout_core4.WorkflowLineRenderData);
+    const { renderVersion } = renderData;
     const { lineType } = this.workflowDocument.linesManager;
     const selected = this.selectService.isSelected(line.id);
-    const { version: lineVersion, bezierDataVersion, color } = line;
-    const version = `${this._version}:${lineVersion}:${bezierDataVersion}:${lineType}:${color}:${selected}`;
+    const { version: lineVersion, color } = line;
+    const version = `${this._version}:${lineVersion}:${renderVersion}:${color}:${selected}`;
     return {
       key: line.id,
       color: line.color,
@@ -556,8 +501,8 @@ var LinesLayer = class extends import_core2.Layer {
     };
   }
   lineComponent(props) {
-    const RenderInsideLine = this.options.renderInsideLine ?? (() => /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null));
-    return /* @__PURE__ */ import_react7.default.createElement(LineRender, { ...props }, /* @__PURE__ */ import_react7.default.createElement(RenderInsideLine, { ...props }));
+    const RenderInsideLine = this.options.renderInsideLine ?? (() => /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null));
+    return /* @__PURE__ */ import_react6.default.createElement(WorkflowLineRender, { ...props }, /* @__PURE__ */ import_react6.default.createElement(RenderInsideLine, { ...props }));
   }
   renderLine(line) {
     const lineProps = this.lineProps(line);
@@ -590,33 +535,768 @@ var LinesLayer = class extends import_core2.Layer {
     return this.node;
   }
 };
-LinesLayer.type = "WorkflowLinesLayer";
+WorkflowLinesLayer.type = "WorkflowLinesLayer";
 __decorateClass([
-  (0, import_inversify.inject)(import_free_layout_core5.WorkflowHoverService)
-], LinesLayer.prototype, "hoverService", 2);
+  (0, import_inversify.inject)(import_free_layout_core4.WorkflowHoverService)
+], WorkflowLinesLayer.prototype, "hoverService", 2);
 __decorateClass([
-  (0, import_inversify.inject)(import_free_layout_core5.WorkflowSelectService)
-], LinesLayer.prototype, "selectService", 2);
+  (0, import_inversify.inject)(import_free_layout_core4.WorkflowSelectService)
+], WorkflowLinesLayer.prototype, "selectService", 2);
 __decorateClass([
-  (0, import_core2.observeEntities)(import_free_layout_core5.WorkflowLineEntity)
-], LinesLayer.prototype, "lines", 2);
+  (0, import_core2.observeEntities)(import_free_layout_core4.WorkflowLineEntity)
+], WorkflowLinesLayer.prototype, "lines", 2);
 __decorateClass([
-  (0, import_core2.observeEntities)(import_free_layout_core5.WorkflowPortEntity)
-], LinesLayer.prototype, "ports", 2);
+  (0, import_core2.observeEntities)(import_free_layout_core4.WorkflowPortEntity)
+], WorkflowLinesLayer.prototype, "ports", 2);
 __decorateClass([
-  (0, import_core2.observeEntityDatas)(import_free_layout_core5.WorkflowNodeEntity, import_core2.TransformData)
-], LinesLayer.prototype, "trans", 2);
+  (0, import_core2.observeEntityDatas)(import_free_layout_core4.WorkflowNodeEntity, import_core2.TransformData)
+], WorkflowLinesLayer.prototype, "trans", 2);
 __decorateClass([
-  (0, import_inversify.inject)(import_free_layout_core5.WorkflowDocument)
-], LinesLayer.prototype, "workflowDocument", 2);
-LinesLayer = __decorateClass([
+  (0, import_inversify.inject)(import_free_layout_core4.WorkflowDocument)
+], WorkflowLinesLayer.prototype, "workflowDocument", 2);
+WorkflowLinesLayer = __decorateClass([
   (0, import_inversify.injectable)()
-], LinesLayer);
+], WorkflowLinesLayer);
+
+// src/contributions/bezier/bezier-controls.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;
+}
+
+// src/contributions/bezier/index.ts
+var import_bezier_js = require("bezier-js");
+var import_utils3 = require("@flowgram.ai/utils");
+var import_free_layout_core5 = require("@flowgram.ai/free-layout-core");
+var import_free_layout_core6 = require("@flowgram.ai/free-layout-core");
+var WorkflowBezierLineContribution = class {
+  constructor(entity) {
+    this.entity = entity;
+  }
+  get path() {
+    return this.data?.path ?? "";
+  }
+  calcDistance(pos) {
+    if (!this.data) {
+      return Number.MAX_SAFE_INTEGER;
+    }
+    return import_utils3.Point.getDistance(pos, this.data.bezier.project(pos));
+  }
+  get bounds() {
+    if (!this.data) {
+      return new import_utils3.Rectangle();
+    }
+    return this.data.bbox;
+  }
+  update(params) {
+    this.data = this.calcBezier(params.fromPos, params.toPos);
+  }
+  calcBezier(fromPos, toPos) {
+    const controls = this.entity.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_utils3.Rectangle(
+      bbox.x.min,
+      bbox.y.min,
+      bbox.x.max - bbox.x.min,
+      bbox.y.max - bbox.y.min
+    );
+    const path = this.getPath({ bbox: bboxBounds, fromPos, toPos, controls });
+    this.data = {
+      fromPos,
+      toPos,
+      bezier,
+      bbox: bboxBounds,
+      controls,
+      path
+    };
+    return this.data;
+  }
+  getPath(params) {
+    const { bbox } = params;
+    const toRelative = (p) => ({
+      x: p.x - bbox.x + LINE_PADDING,
+      y: p.y - bbox.y + LINE_PADDING
+    });
+    const fromPos = toRelative(params.fromPos);
+    const toPos = toRelative(params.toPos);
+    const controls = params.controls.map((c) => toRelative(c));
+    const renderToPos = this.entity.vertical ? { x: toPos.x, y: toPos.y - import_free_layout_core5.POINT_RADIUS } : { x: toPos.x - import_free_layout_core5.POINT_RADIUS, y: toPos.y };
+    const getPathData = () => {
+      const controlPoints = controls.map((s) => `${s.x} ${s.y}`).join(",");
+      const curveType = controls.length === 1 ? "S" : "C";
+      if (this.entity.vertical) {
+        return `M${fromPos.x} ${fromPos.y + import_free_layout_core5.POINT_RADIUS} ${curveType} ${controlPoints}, ${renderToPos.x} ${renderToPos.y}`;
+      }
+      return `M${fromPos.x + import_free_layout_core5.POINT_RADIUS} ${fromPos.y} ${curveType} ${controlPoints}, ${renderToPos.x} ${renderToPos.y}`;
+    };
+    const path = getPathData();
+    return path;
+  }
+};
+WorkflowBezierLineContribution.type = import_free_layout_core6.LineType.BEZIER;
+
+// src/contributions/fold/index.ts
+var import_utils5 = require("@flowgram.ai/utils");
+var import_free_layout_core7 = require("@flowgram.ai/free-layout-core");
+var import_free_layout_core8 = require("@flowgram.ai/free-layout-core");
+
+// src/contributions/fold/fold-line.ts
+var import_utils4 = 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,
+    vertical = false
+  }) {
+    const sourceDir = vertical ? { x: 0, y: 1 } : { x: 1, y: 0 };
+    const targetDir = vertical ? { x: 0, y: -1 } : { 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 = vertical ? { x: 0, y: sourceGapped.y < targetGapped.y ? 1 : -1 } : 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_utils4.Point.getDistance(a, b) / 2,
+      import_utils4.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_utils4.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_utils4.Point.getDistance(p, pos)));
+  }
+  FoldLine2.getFoldLineToPointDistance = getFoldLineToPointDistance;
+})(FoldLine || (FoldLine = {}));
+
+// src/contributions/fold/index.ts
+var WorkflowFoldLineContribution = class {
+  constructor(entity) {
+    this.entity = entity;
+  }
+  get path() {
+    return this.data?.path ?? "";
+  }
+  calcDistance(pos) {
+    if (!this.data) {
+      return Number.MAX_SAFE_INTEGER;
+    }
+    return FoldLine.getFoldLineToPointDistance(this.data.points, pos);
+  }
+  get bounds() {
+    if (!this.data) {
+      return new import_utils5.Rectangle();
+    }
+    return this.data.bbox;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const { vertical } = this.entity;
+    const sourceOffset = {
+      x: vertical ? 0 : import_free_layout_core7.POINT_RADIUS,
+      y: vertical ? import_free_layout_core7.POINT_RADIUS : 0
+    };
+    const targetOffset = {
+      x: vertical ? 0 : -import_free_layout_core7.POINT_RADIUS,
+      y: vertical ? -import_free_layout_core7.POINT_RADIUS : 0
+    };
+    const points = FoldLine.getPoints({
+      source: {
+        x: fromPos.x + sourceOffset.x,
+        y: fromPos.y + sourceOffset.y
+      },
+      target: {
+        x: toPos.x + targetOffset.x,
+        y: toPos.y + targetOffset.y
+      },
+      vertical
+    });
+    const bbox = FoldLine.getBounds(points);
+    const adjustedPoints = points.map((p) => ({
+      x: p.x - bbox.x + LINE_PADDING,
+      y: p.y - bbox.y + LINE_PADDING
+    }));
+    const path = FoldLine.getSmoothStepPath(adjustedPoints);
+    this.data = {
+      points,
+      path,
+      bbox
+    };
+  }
+};
+WorkflowFoldLineContribution.type = import_free_layout_core8.LineType.LINE_CHART;
+
+// src/contributions/straight/index.ts
+var import_utils6 = require("@flowgram.ai/utils");
+var import_free_layout_core9 = require("@flowgram.ai/free-layout-core");
+
+// src/contributions/straight/point-on-line.ts
+function 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
+  };
+}
+
+// src/contributions/straight/index.ts
+var WorkflowStraightLineContribution = 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_utils6.Point.getDistance(pos, projectPointOnLine(pos, start, end));
+  }
+  get bounds() {
+    if (!this.data) {
+      return new import_utils6.Rectangle();
+    }
+    return this.data.bbox;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const { vertical } = this.entity;
+    const sourceOffset = {
+      x: vertical ? 0 : import_free_layout_core9.POINT_RADIUS,
+      y: vertical ? import_free_layout_core9.POINT_RADIUS : 0
+    };
+    const targetOffset = {
+      x: vertical ? 0 : -import_free_layout_core9.POINT_RADIUS,
+      y: vertical ? -import_free_layout_core9.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_utils6.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
+    };
+  }
+};
+WorkflowStraightLineContribution.type = "WorkflowStraightLineContribution";
+
+// src/contributions/arc/index.ts
+var import_utils7 = require("@flowgram.ai/utils");
+var import_free_layout_core10 = require("@flowgram.ai/free-layout-core");
+var WorkflowArkLineContribution = class {
+  constructor(entity) {
+    this.entity = entity;
+  }
+  get path() {
+    return this.data?.path ?? "";
+  }
+  calcDistance(pos) {
+    if (!this.data) {
+      return Number.MAX_SAFE_INTEGER;
+    }
+    const { fromPos, toPos, bbox } = this.data;
+    if (!bbox.contains(pos.x, pos.y)) {
+      const dx = Math.max(bbox.x - pos.x, 0, pos.x - (bbox.x + bbox.width));
+      const dy = Math.max(bbox.y - pos.y, 0, pos.y - (bbox.y + bbox.height));
+      return Math.sqrt(dx * dx + dy * dy);
+    }
+    const center = {
+      x: (fromPos.x + toPos.x) / 2,
+      y: (fromPos.y + toPos.y) / 2
+    };
+    const radius = import_utils7.Point.getDistance(fromPos, center);
+    const distanceToCenter = import_utils7.Point.getDistance(pos, center);
+    return Math.abs(distanceToCenter - radius);
+  }
+  get bounds() {
+    if (!this.data) {
+      return new import_utils7.Rectangle();
+    }
+    return this.data.bbox;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const { vertical } = this.entity;
+    const sourceOffset = {
+      x: vertical ? 0 : import_free_layout_core10.POINT_RADIUS,
+      y: vertical ? import_free_layout_core10.POINT_RADIUS : 0
+    };
+    const targetOffset = {
+      x: vertical ? 0 : -import_free_layout_core10.POINT_RADIUS,
+      y: vertical ? -import_free_layout_core10.POINT_RADIUS : 0
+    };
+    const start = {
+      x: fromPos.x + sourceOffset.x,
+      y: fromPos.y + sourceOffset.y
+    };
+    const end = {
+      x: toPos.x + targetOffset.x,
+      y: toPos.y + targetOffset.y
+    };
+    const bbox = this.calculateArcBBox(start, end);
+    const path = this.getArcPath(start, end, bbox);
+    this.data = {
+      fromPos: start,
+      toPos: end,
+      path,
+      bbox
+    };
+  }
+  calculateArcBBox(start, end) {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const radius = Math.sqrt(dx * dx + dy * dy) / 2;
+    const centerX = (start.x + end.x) / 2;
+    const centerY = (start.y + end.y) / 2;
+    return new import_utils7.Rectangle(centerX - radius, centerY - radius, radius * 2, radius * 2);
+  }
+  getArcPath(start, end, bbox) {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    const startRel = {
+      x: start.x - bbox.x + LINE_PADDING,
+      y: start.y - bbox.y + LINE_PADDING
+    };
+    const endRel = {
+      x: end.x - bbox.x + LINE_PADDING,
+      y: end.y - bbox.y + LINE_PADDING
+    };
+    return `M ${startRel.x} ${startRel.y} A ${distance / 2} ${distance / 2} 0 0 1 ${endRel.x} ${endRel.y}`;
+  }
+};
+WorkflowArkLineContribution.type = "WorkflowArkLineContribution";
+
+// src/contributions/manhattan/index.ts
+var import_utils8 = require("@flowgram.ai/utils");
+var import_free_layout_core11 = require("@flowgram.ai/free-layout-core");
+var WorkflowManhattanLineContribution = class {
+  constructor(entity) {
+    this.entity = entity;
+  }
+  get path() {
+    return this.data?.path ?? "";
+  }
+  calcDistance(pos) {
+    if (!this.data) {
+      return Number.MAX_SAFE_INTEGER;
+    }
+    return Math.min(
+      ...this.data.points.slice(1).map((point, index) => {
+        const prevPoint = this.data.points[index];
+        return this.getDistanceToLineSegment(pos, prevPoint, point);
+      })
+    );
+  }
+  getDistanceToLineSegment(point, start, end) {
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    if (dx === 0 && dy === 0) {
+      return import_utils8.Point.getDistance(point, start);
+    }
+    const t = ((point.x - start.x) * dx + (point.y - start.y) * dy) / (dx * dx + dy * dy);
+    if (t < 0) return import_utils8.Point.getDistance(point, start);
+    if (t > 1) return import_utils8.Point.getDistance(point, end);
+    const projectionPoint = {
+      x: start.x + t * dx,
+      y: start.y + t * dy
+    };
+    return import_utils8.Point.getDistance(point, projectionPoint);
+  }
+  get bounds() {
+    if (!this.data) {
+      return new import_utils8.Rectangle();
+    }
+    return this.data.bbox;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const { vertical } = this.entity;
+    const sourceOffset = {
+      x: vertical ? 0 : import_free_layout_core11.POINT_RADIUS,
+      y: vertical ? import_free_layout_core11.POINT_RADIUS : 0
+    };
+    const targetOffset = {
+      x: vertical ? 0 : -import_free_layout_core11.POINT_RADIUS,
+      y: vertical ? -import_free_layout_core11.POINT_RADIUS : 0
+    };
+    const points = this.getManhattanPoints({
+      source: {
+        x: fromPos.x + sourceOffset.x,
+        y: fromPos.y + sourceOffset.y
+      },
+      target: {
+        x: toPos.x + targetOffset.x,
+        y: toPos.y + targetOffset.y
+      },
+      vertical
+    });
+    const bbox = import_utils8.Rectangle.createRectangleWithTwoPoints(
+      points.reduce(
+        (min, p) => ({
+          x: Math.min(min.x, p.x),
+          y: Math.min(min.y, p.y)
+        }),
+        points[0]
+      ),
+      points.reduce(
+        (max, p) => ({
+          x: Math.max(max.x, p.x),
+          y: Math.max(max.y, p.y)
+        }),
+        points[0]
+      )
+    );
+    const adjustedPoints = points.map((p) => ({
+      x: p.x - bbox.x + LINE_PADDING,
+      y: p.y - bbox.y + LINE_PADDING
+    }));
+    const path = this.getPathFromPoints(adjustedPoints);
+    this.data = {
+      points,
+      path,
+      bbox
+    };
+  }
+  getManhattanPoints(params) {
+    const { source, target, vertical } = params;
+    const points = [source];
+    if (vertical) {
+      if (source.y !== target.y) {
+        points.push({ x: source.x, y: target.y });
+      }
+      if (source.x !== target.x) {
+        points.push({ x: target.x, y: target.y });
+      }
+    } else {
+      if (source.x !== target.x) {
+        points.push({ x: target.x, y: source.y });
+      }
+      if (source.y !== target.y) {
+        points.push({ x: target.x, y: target.y });
+      }
+    }
+    if (points[points.length - 1] !== target) {
+      points.push(target);
+    }
+    return points;
+  }
+  getPathFromPoints(points) {
+    return points.reduce((path, point, index) => {
+      if (index === 0) {
+        return `M ${point.x} ${point.y}`;
+      }
+      return `${path} L ${point.x} ${point.y}`;
+    }, "");
+  }
+};
+WorkflowManhattanLineContribution.type = "WorkflowManhattanLineContribution";
 
 // src/create-free-lines-plugin.ts
 var createFreeLinesPlugin = (0, import_core3.definePluginCreator)({
   onInit: (ctx, opts) => {
-    ctx.playground.registerLayer(LinesLayer, {
+    ctx.playground.registerLayer(WorkflowLinesLayer, {
       ...opts,
       renderElement: () => {
         if (typeof opts.renderElement === "function") {
@@ -626,13 +1306,35 @@ var createFreeLinesPlugin = (0, import_core3.definePluginCreator)({
         }
       }
     });
+  },
+  onReady: (ctx, opts) => {
+    const linesManager = ctx.container.get(import_free_layout_core12.WorkflowLinesManager);
+    linesManager.registerContribution(WorkflowBezierLineContribution).registerContribution(WorkflowFoldLineContribution);
+    if (opts.contributions) {
+      opts.contributions.forEach((contribution) => {
+        linesManager.registerContribution(contribution);
+      });
+    }
+    if (opts.defaultLineType) {
+      linesManager.switchLineType(opts.defaultLineType);
+    }
   }
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BezierControlType,
   LINE_OFFSET,
+  LINE_PADDING,
   LinesLayer,
+  WorkflowArkLineContribution,
+  WorkflowBezierLineContribution,
+  WorkflowFoldLineContribution,
+  WorkflowLinesLayer,
+  WorkflowManhattanLineContribution,
   WorkflowPortRender,
-  createFreeLinesPlugin
+  WorkflowStraightLineContribution,
+  createFreeLinesPlugin,
+  getBezierHorizontalControlPoints,
+  getBezierVerticalControlPoints
 });
 //# sourceMappingURL=index.js.map