@flowgram.ai/free-lines-plugin 0.1.0-alpha.2

package/dist/esm/index.js

@@ -0,0 +1,1305 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/components/workflow-port-render/index.tsx
+import ReactDOM from "react-dom";
+import React2, { useEffect, useState } from "react";
+import classNames from "clsx";
+import {
+  WorkflowHoverService,
+  usePlaygroundReadonlyState,
+  WorkflowLinesManager
+} from "@flowgram.ai/free-layout-core";
+import { useService } from "@flowgram.ai/core";
+
+// src/constants/points.ts
+var STROKE_WIDTH_SLECTED = 3;
+var STROKE_WIDTH = 2;
+var PORT_BG_CLASS_NAME = "workflow-port-bg";
+
+// src/components/workflow-port-render/style.ts
+import styled from "styled-components";
+var WorkflowPointStyle = styled.div`
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin-top: -10px;
+  margin-left: -10px;
+  left: 50%;
+  top: 50%;
+  position: absolute;
+  // 非 hover 状态下的样式
+  border: none;
+
+  & > .symbol {
+    opacity: 0;
+  }
+
+  .bg-circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    background-color: #fff;
+    transform: scale(0.5);
+    transition: all 0.2s linear 0s;
+  }
+
+  .bg {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: #9197F1;
+    transform: scale(0.4, 0.4);
+    transition: all 0.2s linear 0s;
+
+    &.hasError {
+      background: red;
+    }
+
+    .symbol {
+      position: absolute;
+      width: 14px;
+      height: 14px;
+      opacity: 0;
+      pointer-events: none;
+      color: #fff;
+      transition: opacity 0.2s linear 0s;
+
+      & > svg {
+        width: 14px;
+        height: 14px;
+      }
+    }
+
+    .focus-circle {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 8px;
+      height: 8px;
+      opacity: 0;
+      background: #9197f1;
+      border-radius: 50%;
+      transition: opacity 0.2s linear 0s;
+    }
+  }
+
+  &.linked .bg:not(.hasError) {
+    background: #4d53e8;
+  }
+
+  &.hovered .bg:not(.hasError) {
+    border: none;
+    cursor: crosshair;
+    transform: scale(1, 1);
+    background: #4d53e8;
+
+    & > .symbol {
+      opacity: 1;
+    }
+  }
+
+  .cross-hair {
+    position: relative;
+    left: 2px;
+    top: 2px;
+
+    &::after,
+    &::before {
+      content: '';
+      background: #fff;
+      border-radius: 2px;
+      position: absolute;
+    }
+
+    &::after {
+      left: 4px;
+      width: 2px;
+      height: 6px;
+      box-shadow: 0 4px #fff;
+    }
+
+    &::before {
+      top: 4px;
+      width: 6px;
+      height: 2px;
+      box-shadow: 4px 0 #fff;
+    }
+`;
+
+// src/components/workflow-port-render/cross-hair.tsx
+import React from "react";
+function CrossHair() {
+  return /* @__PURE__ */ React.createElement("div", { className: "symbol" }, /* @__PURE__ */ React.createElement("div", { className: "cross-hair" }));
+}
+
+// src/components/workflow-port-render/index.tsx
+var WorkflowPortRender = (
+  // eslint-disable-next-line react/display-name
+  React2.memo((props) => {
+    const hoverService = useService(WorkflowHoverService);
+    const linesManager = useService(WorkflowLinesManager);
+    const { entity, onClick } = props;
+    const { portType, relativePosition, disabled } = entity;
+    const [targetElement, setTargetElement] = useState(entity.targetElement);
+    const [posX, updatePosX] = useState(relativePosition.x);
+    const [posY, updatePosY] = useState(relativePosition.y);
+    const [hovered, setHovered] = useState(false);
+    const [linked, setLinked] = useState(Boolean(entity?.lines?.length));
+    const [hasError, setHasError] = useState(props.entity.hasError);
+    const readonly = usePlaygroundReadonlyState();
+    useEffect(() => {
+      entity.validate();
+      setHasError(entity.hasError);
+      const dispose = entity.onEntityChange(() => {
+        if (entity.targetElement) {
+          if (entity.targetElement !== targetElement) {
+            setTargetElement(entity.targetElement);
+          }
+          return;
+        }
+        const newPos = entity.relativePosition;
+        updatePosX(Math.round(newPos.x));
+        updatePosY(Math.round(newPos.y));
+      });
+      const dispose2 = hoverService.onHoveredChange((id) => {
+        setHovered(hoverService.isHovered(entity.id));
+      });
+      const dispose3 = entity.onErrorChanged(() => {
+        setHasError(entity.hasError);
+      });
+      const dispose4 = linesManager.onAvailableLinesChange(() => {
+        setTimeout(() => {
+          if (linesManager.disposed || entity.disposed) return;
+          setLinked(Boolean(entity.lines.length));
+        }, 0);
+      });
+      return () => {
+        dispose.dispose();
+        dispose2.dispose();
+        dispose3.dispose();
+        dispose4.dispose();
+      };
+    }, [hoverService, entity, targetElement]);
+    const className = classNames(props.className || "", {
+      hovered: !readonly && hovered && !disabled && portType !== "input",
+      // 有线条链接的时候深蓝色小圆点
+      linked
+    });
+    const content = /* @__PURE__ */ React2.createElement(
+      WorkflowPointStyle,
+      {
+        className,
+        style: targetElement ? props.style : { ...props.style, left: posX, top: posY },
+        onClick,
+        "data-port-entity-id": entity.id,
+        "data-port-entity-type": entity.portType,
+        "data-testid": "sdk.workflow.canvas.node.port"
+      },
+      /* @__PURE__ */ React2.createElement("div", { className: classNames("bg-circle", "workflow-bg-circle") }),
+      /* @__PURE__ */ React2.createElement(
+        "div",
+        {
+          className: classNames({
+            bg: true,
+            [PORT_BG_CLASS_NAME]: true,
+            "workflow-point-bg": true,
+            hasError
+          })
+        },
+        /* @__PURE__ */ React2.createElement(CrossHair, null)
+      ),
+      /* @__PURE__ */ React2.createElement("div", { className: "focus-circle" })
+    );
+    if (targetElement) {
+      return ReactDOM.createPortal(content, targetElement);
+    }
+    return content;
+  })
+);
+
+// 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/workflow-lines-layer.tsx
+import ReactDOM2 from "react-dom";
+import React5, { useLayoutEffect, useState as useState2 } from "react";
+import { inject, injectable } from "inversify";
+import { domUtils } from "@flowgram.ai/utils";
+import { StackingContextManager } from "@flowgram.ai/free-stack-plugin";
+import {
+  nanoid,
+  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/workflow-line-render/index.tsx
+import { memo } from "react";
+
+// 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/workflow-line-render/index.style.ts
+import styled2 from "styled-components";
+var LineStyle = styled2.div.attrs({
+  className: "gedit-flow-activity-edge"
+})`
+  position: absolute;
+
+  @keyframes flowingDash {
+    to {
+      stroke-dashoffset: -13;
+    }
+  }
+
+  .dashed-line {
+    stroke-dasharray: 8, 5;
+  }
+
+  .flowing-line {
+    animation: flowingDash 0.5s linear infinite;
+  }
+`;
+
+// src/components/workflow-line-render/arrow.tsx
+import React3 from "react";
+function ArrowRenderer({
+  id,
+  pos,
+  reverseArrow,
+  strokeWidth,
+  vertical,
+  hide
+}) {
+  if (hide) {
+    return null;
+  }
+  const arrowPath = vertical ? reverseArrow ? `M ${pos.x - LINE_OFFSET},${pos.y} L ${pos.x},${pos.y - LINE_OFFSET} L ${pos.x + LINE_OFFSET},${pos.y}` : `M ${pos.x - LINE_OFFSET},${pos.y - LINE_OFFSET} L ${pos.x},${pos.y} L ${pos.x + LINE_OFFSET},${pos.y - LINE_OFFSET}` : reverseArrow ? `M ${pos.x},${pos.y + LINE_OFFSET} L ${pos.x - LINE_OFFSET},${pos.y} L ${pos.x},${pos.y - LINE_OFFSET}` : `M ${pos.x - LINE_OFFSET},${pos.y - LINE_OFFSET} L ${pos.x},${pos.y} L ${pos.x - LINE_OFFSET},${pos.y + LINE_OFFSET}`;
+  return /* @__PURE__ */ React3.createElement(
+    "path",
+    {
+      d: arrowPath,
+      strokeLinecap: "round",
+      stroke: `url(#${id})`,
+      fill: "none",
+      strokeWidth
+    }
+  );
+}
+
+// src/components/workflow-line-render/line-svg.tsx
+var PADDING = 12;
+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 - 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_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__ */ React4.createElement(
+    "path",
+    {
+      d: bezierPath,
+      fill: "none",
+      stroke: `url(#${strokeID})`,
+      strokeWidth,
+      className: clsx(
+        line.className,
+        // 显示流动线条的条件：没有自定义线条class，并且线条处于流动或处理中
+        !line.className && (line.processing || line.flowing ? "dashed-line flowing-line" : "")
+      )
+    }
+  );
+  return /* @__PURE__ */ React4.createElement(
+    LineStyle,
+    {
+      style: {
+        left: bounds.x - PADDING,
+        top: bounds.y - PADDING,
+        position: "absolute"
+      }
+    },
+    children,
+    /* @__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%",
+        y1: vertical ? "0%" : "100%",
+        x2: "100%",
+        y2: "100%",
+        id: strokeID,
+        gradientUnits: "userSpaceOnUse"
+      },
+      /* @__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,
+        reverseArrow: reverse,
+        pos: reverse ? arrowFromPos : arrowToPos,
+        strokeWidth,
+        vertical,
+        hide: hideArrow
+      }
+    )))
+  );
+};
+
+// src/components/workflow-line-render/index.tsx
+var WorkflowLineRender = memo(
+  LineSVG,
+  (prevProps, nextProps) => prevProps.version === nextProps.version
+);
+
+// src/layer/workflow-lines-layer.tsx
+var WorkflowLinesLayer = class extends Layer {
+  constructor() {
+    super(...arguments);
+    this.layerID = nanoid();
+    this.mountedLines = /* @__PURE__ */ new Map();
+    this._version = 0;
+    /**
+     * 节点线条
+     */
+    this.node = domUtils.createDivWithClass("gedit-playground-layer gedit-flow-lines-layer");
+  }
+  onZoom(scale) {
+    this.node.style.transform = `scale(${scale})`;
+  }
+  onReady() {
+    this.pipelineNode.appendChild(this.node);
+    this.toDispose.pushAll([
+      this.selectService.onSelectionChanged(() => this.render()),
+      this.hoverService.onHoveredChange(() => this.render()),
+      this.workflowDocument.linesManager.onForceUpdate(() => {
+        this.mountedLines.clear();
+        this.bumpVersion();
+        this.render();
+      })
+    ]);
+  }
+  dispose() {
+    this.mountedLines.clear();
+  }
+  render() {
+    const [, forceUpdate] = useState2({});
+    useLayoutEffect(() => {
+      const updateLines = () => {
+        let needsUpdate = false;
+        this.lines.forEach((line) => {
+          const renderData = line.getData(WorkflowLineRenderData2);
+          const oldVersion = renderData.renderVersion;
+          renderData.update();
+          if (renderData.renderVersion !== oldVersion) {
+            needsUpdate = true;
+          }
+        });
+        if (needsUpdate) {
+          forceUpdate({});
+        }
+      };
+      const rafId = requestAnimationFrame(updateLines);
+      return () => cancelAnimationFrame(rafId);
+    }, [this.lines]);
+    const lines = this.lines.map((line) => this.renderLine(line));
+    return /* @__PURE__ */ React5.createElement(React5.Fragment, null, lines);
+  }
+  // 用来绕过 memo
+  bumpVersion() {
+    this._version = this._version + 1;
+    if (this._version === Number.MAX_SAFE_INTEGER) {
+      this._version = 0;
+    }
+  }
+  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, color } = line;
+    const version = `${this._version}:${lineVersion}:${renderVersion}:${color}:${selected}`;
+    return {
+      key: line.id,
+      color: line.color,
+      selected,
+      line,
+      lineType,
+      version,
+      strokePrefix: this.layerID
+    };
+  }
+  lineComponent(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);
+    const cache = this.mountedLines.get(line.id);
+    const isCached = cache !== void 0;
+    const { portal: cachedPortal, version: cachedVersion } = cache ?? {};
+    if (isCached && cachedVersion === lineProps.version) {
+      return cachedPortal;
+    }
+    if (!isCached) {
+      this.renderElement.appendChild(line.node);
+      line.onDispose(() => {
+        this.mountedLines.delete(line.id);
+        line.node.remove();
+      });
+    }
+    const portal = ReactDOM2.createPortal(this.lineComponent(lineProps), line.node);
+    this.mountedLines.set(line.id, { line, portal, version: lineProps.version });
+    return portal;
+  }
+  get renderElement() {
+    return this.stackContext.node;
+  }
+};
+WorkflowLinesLayer.type = "WorkflowLinesLayer";
+__decorateClass([
+  inject(WorkflowHoverService2)
+], WorkflowLinesLayer.prototype, "hoverService", 2);
+__decorateClass([
+  inject(WorkflowSelectService)
+], WorkflowLinesLayer.prototype, "selectService", 2);
+__decorateClass([
+  inject(StackingContextManager)
+], WorkflowLinesLayer.prototype, "stackContext", 2);
+__decorateClass([
+  observeEntities(WorkflowLineEntity)
+], WorkflowLinesLayer.prototype, "lines", 2);
+__decorateClass([
+  observeEntities(WorkflowPortEntity)
+], WorkflowLinesLayer.prototype, "ports", 2);
+__decorateClass([
+  observeEntityDatas(WorkflowNodeEntity, TransformData)
+], WorkflowLinesLayer.prototype, "trans", 2);
+__decorateClass([
+  inject(WorkflowDocument)
+], WorkflowLinesLayer.prototype, "workflowDocument", 2);
+WorkflowLinesLayer = __decorateClass([
+  injectable()
+], 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(WorkflowLinesLayer, {
+      ...opts
+    });
+  },
+  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,
+  LINE_PADDING,
+  WorkflowLinesLayer as LinesLayer,
+  WorkflowArkLineContribution,
+  WorkflowBezierLineContribution,
+  WorkflowFoldLineContribution,
+  WorkflowLinesLayer,
+  WorkflowManhattanLineContribution,
+  WorkflowPortRender,
+  WorkflowStraightLineContribution,
+  createFreeLinesPlugin,
+  getBezierHorizontalControlPoints,
+  getBezierVerticalControlPoints
+};
+//# sourceMappingURL=index.js.map