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

package/dist/esm/index.js

@@ -237,13 +237,15 @@ var WorkflowPortRender = (
 
 // src/constants/lines.ts
 var LINE_OFFSET = 6;
+var LINE_PADDING = 12;
 
 // src/create-free-lines-plugin.ts
+import { WorkflowLinesManager as WorkflowLinesManager2 } from "@flowgram.ai/free-layout-core";
 import { definePluginCreator } from "@flowgram.ai/core";
 
-// src/layer/lines-layer.tsx
+// src/layer/workflow-lines-layer.tsx
 import ReactDOM2 from "react-dom";
-import React7, { useLayoutEffect, useState as useState2 } from "react";
+import React5, { useLayoutEffect, useState as useState2 } from "react";
 import { inject, injectable } from "inversify";
 import { domUtils } from "@flowgram.ai/utils";
 import {
@@ -251,21 +253,23 @@ import {
   WorkflowDocument,
   WorkflowHoverService as WorkflowHoverService2,
   WorkflowLineEntity,
+  WorkflowLineRenderData as WorkflowLineRenderData2,
   WorkflowNodeEntity,
   WorkflowPortEntity,
   WorkflowSelectService
 } from "@flowgram.ai/free-layout-core";
 import { Layer, observeEntities, observeEntityDatas, TransformData } from "@flowgram.ai/core";
 
-// src/components/lines/index.tsx
-import React6, { memo } from "react";
-import { LineType } from "@flowgram.ai/free-layout-core";
+// src/components/workflow-line-render/index.tsx
+import { memo } from "react";
 
-// src/components/lines/fold-line/index.tsx
+// src/components/workflow-line-render/line-svg.tsx
 import React4 from "react";
+import clsx from "clsx";
 import { POINT_RADIUS } from "@flowgram.ai/free-layout-core";
+import { WorkflowLineRenderData } from "@flowgram.ai/free-layout-core";
 
-// src/components/lines/index.style.ts
+// src/components/workflow-line-render/index.style.ts
 import styled2 from "styled-components";
 var LineStyle = styled2.div.attrs({
   className: "gedit-flow-activity-edge"
@@ -278,13 +282,16 @@ var LineStyle = styled2.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
 import React3 from "react";
 function ArrowRenderer({
   id,
@@ -310,116 +317,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 - POINT_RADIUS,
-    y: to.y
-  };
-  const arrowFromPos = {
-    x: from.x + POINT_RADIUS + LINE_OFFSET,
-    y: from.y
-  };
-  return /* @__PURE__ */ React4.createElement(LineStyle, null, children, /* @__PURE__ */ React4.createElement("svg", { overflow: "visible" }, /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement(
-    "linearGradient",
-    {
-      x1: "0%",
-      y1: "100%",
-      x2: "100%",
-      y2: "100%",
-      id: line.id,
-      gradientUnits: "userSpaceOnUse"
-    },
-    /* @__PURE__ */ React4.createElement("stop", { stopColor: color, offset: "0%" }),
-    /* @__PURE__ */ React4.createElement("stop", { stopColor: color, offset: "100%" })
-  )), /* @__PURE__ */ React4.createElement("g", null, /* @__PURE__ */ React4.createElement(
-    "path",
-    {
-      d: line.bezier.foldPath,
-      fill: "none",
-      strokeLinecap: "round",
-      stroke: color,
-      strokeWidth,
-      className: line.flowing || line.processing ? "flowing-line" : ""
-    }
-  ), /* @__PURE__ */ React4.createElement(
-    ArrowRenderer,
-    {
-      id: line.id,
-      reverseArrow: line.reverse,
-      pos: line.reverse ? arrowFromPos : arrowToPos,
-      strokeWidth,
-      hide: line.hideArrow
-    }
-  ))));
-};
-
-// src/components/lines/bezier-line/index.tsx
-import React5 from "react";
-import { POINT_RADIUS as POINT_RADIUS2 } from "@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(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 - POINT_RADIUS2 } : { x: toPos.x - POINT_RADIUS2, y: toPos.y };
-  const arrowFromPos = vertical ? { x: fromPos.x, y: fromPos.y + POINT_RADIUS2 + LINE_OFFSET } : { x: fromPos.x + POINT_RADIUS2 + 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 + POINT_RADIUS2} ${curveType} ${controlPoints}, ${arrowToPos.x} ${arrowToPos.y}`;
-    }
-    return `M${fromPos.x + POINT_RADIUS2} ${fromPos.y} ${curveType} ${controlPoints}, ${arrowToPos.x} ${arrowToPos.y}`;
-  };
-  const pathData = getPathData();
+  const arrowToPos = vertical ? { x: toPos.x, y: toPos.y - POINT_RADIUS } : { x: toPos.x - POINT_RADIUS, y: toPos.y };
+  const arrowFromPos = vertical ? { x: fromPos.x, y: fromPos.y + POINT_RADIUS + LINE_OFFSET } : { x: fromPos.x + 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__ */ React5.createElement(
+  const path = /* @__PURE__ */ React4.createElement(
     "path",
     {
-      d: pathData,
+      d: bezierPath,
       fill: "none",
       stroke: `url(#${strokeID})`,
       strokeWidth,
-      className: line.processing || line.flowing ? "flowing-line" : ""
+      className: clsx(
+        line.className,
+        // 显示流动线条的条件：没有自定义线条class，并且线条处于流动或处理中
+        !line.className && (line.processing || line.flowing ? "dashed-line flowing-line" : "")
+      )
     }
   );
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React4.createElement(
     LineStyle,
     {
       style: {
-        left: bbox.x - PADDING,
-        top: bbox.y - PADDING,
+        left: bounds.x - PADDING,
+        top: bounds.y - PADDING,
         position: "absolute"
       }
     },
     children,
-    /* @__PURE__ */ React5.createElement("svg", { width: bbox.width + PADDING * 2, height: bbox.height + PADDING * 2 }, /* @__PURE__ */ React5.createElement("defs", null, /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React4.createElement("svg", { width: bounds.width + PADDING * 2, height: bounds.height + PADDING * 2 }, /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement(
       "linearGradient",
       {
         x1: vertical ? "100%" : "0%",
@@ -429,9 +368,9 @@ var BezierLineRender = (props) => {
         id: strokeID,
         gradientUnits: "userSpaceOnUse"
       },
-      /* @__PURE__ */ React5.createElement("stop", { stopColor: color || linearStartColor, offset: "0%" }),
-      /* @__PURE__ */ React5.createElement("stop", { stopColor: color || linearEndColor, offset: "100%" })
-    )), /* @__PURE__ */ React5.createElement("g", null, path, /* @__PURE__ */ React5.createElement(
+      /* @__PURE__ */ React4.createElement("stop", { stopColor: color, offset: "0%" }),
+      /* @__PURE__ */ React4.createElement("stop", { stopColor: color, offset: "100%" })
+    )), /* @__PURE__ */ React4.createElement("g", null, path, /* @__PURE__ */ React4.createElement(
       ArrowRenderer,
       {
         id: strokeID,
@@ -441,24 +380,18 @@ var BezierLineRender = (props) => {
         vertical,
         hide: hideArrow
       }
-    ), props.showControlPoints ? controls.map((c, i) => /* @__PURE__ */ React5.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 === LineType.LINE_CHART) {
-    return /* @__PURE__ */ React6.createElement(FoldLineRender, { ...props });
-  }
-  return /* @__PURE__ */ React6.createElement(BezierLineRender, { ...props });
-};
-var LineRender = memo(
-  LineTypeRender,
+// src/components/workflow-line-render/index.tsx
+var WorkflowLineRender = memo(
+  LineSVG,
   (prevProps, nextProps) => prevProps.version === nextProps.version
 );
 
-// src/layer/lines-layer.tsx
-var LinesLayer = class extends Layer {
+// src/layer/workflow-lines-layer.tsx
+var WorkflowLinesLayer = class extends Layer {
   constructor() {
     super(...arguments);
     this.layerID = nanoid();
@@ -493,9 +426,10 @@ var LinesLayer = class extends Layer {
       const updateLines = () => {
         let needsUpdate = false;
         this.lines.forEach((line) => {
-          const oldVersion = line.bezierDataVersion;
-          line.refreshBezier();
-          if (line.bezierDataVersion !== oldVersion) {
+          const renderData = line.getData(WorkflowLineRenderData2);
+          const oldVersion = renderData.renderVersion;
+          renderData.update();
+          if (renderData.renderVersion !== oldVersion) {
             needsUpdate = true;
           }
         });
@@ -507,7 +441,7 @@ var LinesLayer = class extends Layer {
       return () => cancelAnimationFrame(rafId);
     }, [this.lines]);
     const lines = this.lines.map((line) => this.renderLine(line));
-    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, lines);
+    return /* @__PURE__ */ React5.createElement(React5.Fragment, null, lines);
   }
   // 用来绕过 memo
   bumpVersion() {
@@ -517,10 +451,12 @@ var LinesLayer = class extends Layer {
     }
   }
   lineProps(line) {
+    const renderData = line.getData(WorkflowLineRenderData2);
+    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,
@@ -532,8 +468,8 @@ var LinesLayer = class extends Layer {
     };
   }
   lineComponent(props) {
-    const RenderInsideLine = this.options.renderInsideLine ?? (() => /* @__PURE__ */ React7.createElement(React7.Fragment, null));
-    return /* @__PURE__ */ React7.createElement(LineRender, { ...props }, /* @__PURE__ */ React7.createElement(RenderInsideLine, { ...props }));
+    const RenderInsideLine = this.options.renderInsideLine ?? (() => /* @__PURE__ */ React5.createElement(React5.Fragment, null));
+    return /* @__PURE__ */ React5.createElement(WorkflowLineRender, { ...props }, /* @__PURE__ */ React5.createElement(RenderInsideLine, { ...props }));
   }
   renderLine(line) {
     const lineProps = this.lineProps(line);
@@ -566,33 +502,778 @@ var LinesLayer = class extends Layer {
     return this.node;
   }
 };
-LinesLayer.type = "WorkflowLinesLayer";
+WorkflowLinesLayer.type = "WorkflowLinesLayer";
 __decorateClass([
   inject(WorkflowHoverService2)
-], LinesLayer.prototype, "hoverService", 2);
+], WorkflowLinesLayer.prototype, "hoverService", 2);
 __decorateClass([
   inject(WorkflowSelectService)
-], LinesLayer.prototype, "selectService", 2);
+], WorkflowLinesLayer.prototype, "selectService", 2);
 __decorateClass([
   observeEntities(WorkflowLineEntity)
-], LinesLayer.prototype, "lines", 2);
+], WorkflowLinesLayer.prototype, "lines", 2);
 __decorateClass([
   observeEntities(WorkflowPortEntity)
-], LinesLayer.prototype, "ports", 2);
+], WorkflowLinesLayer.prototype, "ports", 2);
 __decorateClass([
   observeEntityDatas(WorkflowNodeEntity, TransformData)
-], LinesLayer.prototype, "trans", 2);
+], WorkflowLinesLayer.prototype, "trans", 2);
 __decorateClass([
   inject(WorkflowDocument)
-], LinesLayer.prototype, "workflowDocument", 2);
-LinesLayer = __decorateClass([
+], WorkflowLinesLayer.prototype, "workflowDocument", 2);
+WorkflowLinesLayer = __decorateClass([
   injectable()
-], LinesLayer);
+], WorkflowLinesLayer);
+
+// src/contributions/bezier/bezier-controls.ts
+import { Rectangle } 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 = 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 = 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
+import { Bezier } from "bezier-js";
+import { Point, Rectangle as Rectangle2 } from "@flowgram.ai/utils";
+import {
+  POINT_RADIUS as POINT_RADIUS2
+} from "@flowgram.ai/free-layout-core";
+import { LineType } from "@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 Point.getDistance(pos, this.data.bezier.project(pos));
+  }
+  get bounds() {
+    if (!this.data) {
+      return new Rectangle2();
+    }
+    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 Bezier([fromPos, ...controls, toPos]);
+    const bbox = bezier.bbox();
+    const bboxBounds = new Rectangle2(
+      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 - POINT_RADIUS2 } : { x: toPos.x - POINT_RADIUS2, 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 + POINT_RADIUS2} ${curveType} ${controlPoints}, ${renderToPos.x} ${renderToPos.y}`;
+      }
+      return `M${fromPos.x + POINT_RADIUS2} ${fromPos.y} ${curveType} ${controlPoints}, ${renderToPos.x} ${renderToPos.y}`;
+    };
+    const path = getPathData();
+    return path;
+  }
+};
+WorkflowBezierLineContribution.type = LineType.BEZIER;
+
+// src/contributions/fold/index.ts
+import { Rectangle as Rectangle4 } from "@flowgram.ai/utils";
+import {
+  POINT_RADIUS as POINT_RADIUS3
+} from "@flowgram.ai/free-layout-core";
+import { LineType as LineType2 } from "@flowgram.ai/free-layout-core";
+
+// src/contributions/fold/fold-line.ts
+import { Point as Point2, Rectangle as Rectangle3 } 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,
+    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(
+      Point2.getDistance(a, b) / 2,
+      Point2.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 Rectangle3.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) => Point2.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 Rectangle4();
+    }
+    return this.data.bbox;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const { vertical } = this.entity;
+    const sourceOffset = {
+      x: vertical ? 0 : POINT_RADIUS3,
+      y: vertical ? POINT_RADIUS3 : 0
+    };
+    const targetOffset = {
+      x: vertical ? 0 : -POINT_RADIUS3,
+      y: vertical ? -POINT_RADIUS3 : 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 = LineType2.LINE_CHART;
+
+// src/contributions/straight/index.ts
+import { Point as Point3, Rectangle as Rectangle5 } from "@flowgram.ai/utils";
+import {
+  POINT_RADIUS as POINT_RADIUS4
+} from "@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 Point3.getDistance(pos, projectPointOnLine(pos, start, end));
+  }
+  get bounds() {
+    if (!this.data) {
+      return new Rectangle5();
+    }
+    return this.data.bbox;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const { vertical } = this.entity;
+    const sourceOffset = {
+      x: vertical ? 0 : POINT_RADIUS4,
+      y: vertical ? POINT_RADIUS4 : 0
+    };
+    const targetOffset = {
+      x: vertical ? 0 : -POINT_RADIUS4,
+      y: vertical ? -POINT_RADIUS4 : 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 = Rectangle5.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
+import { Point as Point4, Rectangle as Rectangle6 } from "@flowgram.ai/utils";
+import {
+  POINT_RADIUS as POINT_RADIUS5
+} from "@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 = Point4.getDistance(fromPos, center);
+    const distanceToCenter = Point4.getDistance(pos, center);
+    return Math.abs(distanceToCenter - radius);
+  }
+  get bounds() {
+    if (!this.data) {
+      return new Rectangle6();
+    }
+    return this.data.bbox;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const { vertical } = this.entity;
+    const sourceOffset = {
+      x: vertical ? 0 : POINT_RADIUS5,
+      y: vertical ? POINT_RADIUS5 : 0
+    };
+    const targetOffset = {
+      x: vertical ? 0 : -POINT_RADIUS5,
+      y: vertical ? -POINT_RADIUS5 : 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 Rectangle6(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
+import { Point as Point5, Rectangle as Rectangle7 } from "@flowgram.ai/utils";
+import {
+  POINT_RADIUS as POINT_RADIUS6
+} from "@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 Point5.getDistance(point, start);
+    }
+    const t = ((point.x - start.x) * dx + (point.y - start.y) * dy) / (dx * dx + dy * dy);
+    if (t < 0) return Point5.getDistance(point, start);
+    if (t > 1) return Point5.getDistance(point, end);
+    const projectionPoint = {
+      x: start.x + t * dx,
+      y: start.y + t * dy
+    };
+    return Point5.getDistance(point, projectionPoint);
+  }
+  get bounds() {
+    if (!this.data) {
+      return new Rectangle7();
+    }
+    return this.data.bbox;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const { vertical } = this.entity;
+    const sourceOffset = {
+      x: vertical ? 0 : POINT_RADIUS6,
+      y: vertical ? POINT_RADIUS6 : 0
+    };
+    const targetOffset = {
+      x: vertical ? 0 : -POINT_RADIUS6,
+      y: vertical ? -POINT_RADIUS6 : 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 = Rectangle7.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 = definePluginCreator({
   onInit: (ctx, opts) => {
-    ctx.playground.registerLayer(LinesLayer, {
+    ctx.playground.registerLayer(WorkflowLinesLayer, {
       ...opts,
       renderElement: () => {
         if (typeof opts.renderElement === "function") {
@@ -602,12 +1283,34 @@ var createFreeLinesPlugin = definePluginCreator({
         }
       }
     });
+  },
+  onReady: (ctx, opts) => {
+    const linesManager = ctx.container.get(WorkflowLinesManager2);
+    linesManager.registerContribution(WorkflowBezierLineContribution).registerContribution(WorkflowFoldLineContribution);
+    if (opts.contributions) {
+      opts.contributions.forEach((contribution) => {
+        linesManager.registerContribution(contribution);
+      });
+    }
+    if (opts.defaultLineType) {
+      linesManager.switchLineType(opts.defaultLineType);
+    }
   }
 });
 export {
+  BezierControlType,
   LINE_OFFSET,
-  LinesLayer,
+  LINE_PADDING,
+  WorkflowLinesLayer as LinesLayer,
+  WorkflowArkLineContribution,
+  WorkflowBezierLineContribution,
+  WorkflowFoldLineContribution,
+  WorkflowLinesLayer,
+  WorkflowManhattanLineContribution,
   WorkflowPortRender,
-  createFreeLinesPlugin
+  WorkflowStraightLineContribution,
+  createFreeLinesPlugin,
+  getBezierHorizontalControlPoints,
+  getBezierVerticalControlPoints
 };
 //# sourceMappingURL=index.js.map