@flowgram-vue/free-lines-plugin 0.2.0

package/dist/index.js

@@ -0,0 +1,1013 @@
+import { defineComponent, h, shallowRef, watch, onBeforeUnmount, Teleport, provide, Fragment } from 'vue';
+import classNames from 'clsx';
+import { WorkflowHoverService, WorkflowLinesManager, usePlaygroundReadonlyState, WorkflowLineRenderData, WorkflowSelectService, WorkflowLineEntity, WorkflowPortEntity, WorkflowNodeEntity, WorkflowDocument, LineType, nanoid, getLineCenter } from '@flowgram-vue/free-layout-core';
+import { useService, MouseTouchEvent, PlaygroundVueContainerKey, PlaygroundVueRefKey, Playground, PlaygroundContainerFactory, observeEntities, observeEntityDatas, TransformData, definePluginCreator, Layer } from '@flowgram-vue/core';
+import { inject, injectable } from 'inversify';
+import { Point, domUtils, Rectangle } from '@flowgram-vue/utils';
+import { FlowRendererKey, FlowRendererRegistry } from '@flowgram-vue/renderer';
+import { StackingContextManager } from '@flowgram-vue/free-stack-plugin';
+import { Bezier } from 'bezier-js';
+
+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/constants/points.ts
+var STROKE_WIDTH_SLECTED = 3;
+var STROKE_WIDTH = 2;
+var PORT_BG_CLASS_NAME = "workflow-port-bg";
+var CrossHair = defineComponent({
+  name: "CrossHair",
+  setup() {
+    return () => h("div", { class: "symbol" }, [h("div", { class: "cross-hair" })]);
+  }
+});
+var cross_hair_default = CrossHair;
+
+// src/components/workflow-port-render/index.ts
+var WorkflowPortRender = defineComponent({
+  name: "WorkflowPortRender",
+  props: {
+    entity: { type: Object, required: true },
+    className: { type: String, default: "" },
+    style: { type: Object },
+    onClick: {
+      type: Function
+    },
+    primaryColor: { type: String },
+    secondaryColor: { type: String },
+    errorColor: { type: String },
+    backgroundColor: { type: String }
+  },
+  setup(props) {
+    const hoverService = useService(WorkflowHoverService);
+    const linesManager = useService(WorkflowLinesManager);
+    const targetElement = shallowRef(props.entity.targetElement);
+    const posX = shallowRef(props.entity.relativePosition.x);
+    const posY = shallowRef(props.entity.relativePosition.y);
+    const hovered = shallowRef(false);
+    const linked = shallowRef(Boolean(props.entity?.lines?.length));
+    const hasError = shallowRef(props.entity.hasError);
+    const readonly = usePlaygroundReadonlyState();
+    let disposers = [];
+    const bindEntity = () => {
+      disposers.forEach((dispose) => dispose.dispose());
+      disposers = [];
+      const { entity } = props;
+      entity.validate();
+      hasError.value = entity.hasError;
+      disposers.push(
+        entity.onEntityChange(() => {
+          if (entity.targetElement) {
+            if (entity.targetElement !== targetElement.value) {
+              targetElement.value = entity.targetElement;
+            }
+            return;
+          }
+          const newPos = entity.relativePosition;
+          posX.value = Math.round(newPos.x);
+          posY.value = Math.round(newPos.y);
+        }),
+        hoverService.onHoveredChange(() => {
+          hovered.value = hoverService.isHovered(entity.id);
+        }),
+        entity.onErrorChanged(() => {
+          hasError.value = entity.hasError;
+        }),
+        linesManager.onAvailableLinesChange(() => {
+          setTimeout(() => {
+            if (linesManager.disposed || entity.disposed) return;
+            linked.value = Boolean(entity.lines.length);
+          }, 0);
+        })
+      );
+    };
+    watch(
+      () => [props.entity, targetElement.value],
+      () => bindEntity(),
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      disposers.forEach((dispose) => dispose.dispose());
+    });
+    return () => {
+      const { entity, onClick } = props;
+      const { disabled } = entity;
+      const className = classNames("workflow-port-render", props.className || "", {
+        hovered: !readonly.value && hovered.value && !disabled,
+        linked: linked.value
+      });
+      const colorStyles = {};
+      if (props.primaryColor) {
+        colorStyles["--g-workflow-port-color-primary"] = props.primaryColor;
+      }
+      if (props.secondaryColor) {
+        colorStyles["--g-workflow-port-color-secondary"] = props.secondaryColor;
+      }
+      if (props.errorColor) {
+        colorStyles["--g-workflow-port-color-error"] = props.errorColor;
+      }
+      if (props.backgroundColor) {
+        colorStyles["--g-workflow-port-color-background"] = props.backgroundColor;
+      }
+      const combinedStyle = targetElement.value ? { ...props.style, ...colorStyles } : { ...props.style, ...colorStyles, left: `${posX.value}px`, top: `${posY.value}px` };
+      const content = h(
+        "div",
+        {
+          class: className,
+          style: combinedStyle,
+          onClick: (e) => onClick?.(e, entity),
+          onTouchstart: (e) => {
+            if (!onClick) {
+              return;
+            }
+            MouseTouchEvent.onTouched(e, (mouseEvent) => {
+              onClick(mouseEvent, entity);
+            });
+          },
+          "data-port-entity-id": entity.id,
+          "data-port-entity-type": entity.portType,
+          "data-testid": "sdk.workflow.canvas.node.port"
+        },
+        [
+          h("div", { class: classNames("bg-circle", "workflow-bg-circle") }),
+          h(
+            "div",
+            {
+              class: classNames({
+                bg: true,
+                [PORT_BG_CLASS_NAME]: true,
+                "workflow-point-bg": true,
+                hasError: hasError.value
+              })
+            },
+            [h(cross_hair_default)]
+          ),
+          h("div", { class: "focus-circle" })
+        ]
+      );
+      if (targetElement.value) {
+        return h(Teleport, { to: targetElement.value }, [content]);
+      }
+      return content;
+    };
+  }
+});
+
+// src/constants/lines.ts
+var LINE_OFFSET = 6;
+var LINE_PADDING = 12;
+var LayerVueProvide = defineComponent({
+  name: "LayerVueProvide",
+  props: {
+    factory: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const factory = props.factory;
+    provide(PlaygroundVueContainerKey, factory);
+    try {
+      provide(PlaygroundVueRefKey, factory.get(Playground));
+    } catch {
+    }
+  },
+  render() {
+    return this.$slots.default?.();
+  }
+});
+function wrapLayerRender(factory, children) {
+  return h(LayerVueProvide, { factory }, () => children);
+}
+
+// src/contributions/utils.ts
+function toRelative(p, bbox) {
+  return {
+    x: p.x - bbox.x + LINE_PADDING,
+    y: p.y - bbox.y + LINE_PADDING
+  };
+}
+function getShrinkOffset(location, shrink) {
+  switch (location) {
+    case "left":
+      return { x: -shrink, y: 0 };
+    case "right":
+      return { x: shrink, y: 0 };
+    case "bottom":
+      return { x: 0, y: shrink };
+    case "top":
+      return { x: 0, y: -shrink };
+  }
+}
+function posWithShrink(pos, location, shrink) {
+  const offset = getShrinkOffset(location, shrink);
+  return {
+    x: pos.x + offset.x,
+    y: pos.y + offset.y
+  };
+}
+function getArrowPath(pos, location) {
+  switch (location) {
+    case "left":
+      return `M ${pos.x - LINE_OFFSET},${pos.y - LINE_OFFSET} L ${pos.x},${pos.y} L ${pos.x - LINE_OFFSET},${pos.y + LINE_OFFSET}`;
+    case "right":
+      return `M ${pos.x + LINE_OFFSET},${pos.y + LINE_OFFSET} L ${pos.x},${pos.y} L ${pos.x + LINE_OFFSET},${pos.y - LINE_OFFSET}`;
+    case "bottom":
+      return `M ${pos.x - LINE_OFFSET},${pos.y + LINE_OFFSET} L ${pos.x},${pos.y} L ${pos.x + LINE_OFFSET},${pos.y + LINE_OFFSET}`;
+    case "top":
+      return `M ${pos.x - LINE_OFFSET},${pos.y - LINE_OFFSET} L ${pos.x},${pos.y} L ${pos.x + LINE_OFFSET},${pos.y - LINE_OFFSET}`;
+  }
+}
+var ArrowRenderer = defineComponent({
+  name: "ArrowRenderer",
+  props: {
+    id: { type: String, required: true },
+    pos: { type: Object, required: true },
+    location: { type: String, required: true },
+    strokeWidth: { type: Number, required: true },
+    hide: { type: Boolean, default: false },
+    line: { type: Object, required: true }
+  },
+  setup(props) {
+    return () => {
+      if (props.hide) {
+        return null;
+      }
+      const arrowPath = getArrowPath(props.pos, props.location);
+      return h("path", {
+        d: arrowPath,
+        "stroke-linecap": "round",
+        stroke: `url(#${props.id})`,
+        fill: "none",
+        "stroke-width": props.strokeWidth
+      });
+    };
+  }
+});
+
+// src/components/workflow-line-render/line-svg.ts
+var PADDING = 12;
+var LineSVG = defineComponent({
+  name: "LineSVG",
+  props: {
+    color: { type: String },
+    selected: { type: Boolean, default: false },
+    hovered: { type: Boolean, default: false },
+    line: { type: Object, required: true },
+    lineType: { type: [String, Number] },
+    version: { type: String, required: true },
+    strokePrefix: { type: String },
+    rendererRegistry: {
+      type: Object
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      const { line, color, selected, strokePrefix, rendererRegistry } = props;
+      const { position, reverse, hideArrow, vertical } = line;
+      const renderData = line.getData(WorkflowLineRenderData);
+      const { bounds, path: bezierPath } = renderData;
+      const toRelative2 = (p) => ({
+        x: p.x - bounds.x + PADDING,
+        y: p.y - bounds.y + PADDING
+      });
+      const fromPos = toRelative2(position.from);
+      const toPos = toRelative2(position.to);
+      const arrowToPos = posWithShrink(toPos, position.to.location, line.uiState.shrink);
+      const arrowFromPos = posWithShrink(
+        fromPos,
+        position.from.location,
+        line.uiState.shrink
+      );
+      const strokeWidth = selected ? line.uiState.strokeWidthSelected ?? STROKE_WIDTH_SLECTED : line.uiState.strokeWidth ?? STROKE_WIDTH;
+      const strokeID = strokePrefix ? `${strokePrefix}-${line.id}` : line.id;
+      const CustomArrowRenderer = rendererRegistry?.tryToGetRendererComponent(
+        FlowRendererKey.ARROW_RENDERER
+      )?.renderer;
+      const ArrowComponent = CustomArrowRenderer || ArrowRenderer;
+      const pathNode = h("path", {
+        d: bezierPath,
+        fill: "none",
+        stroke: `url(#${strokeID})`,
+        "stroke-width": strokeWidth,
+        class: line.processing || line.flowing ? "dashed-line flowing-line" : ""
+      });
+      return h(
+        "div",
+        {
+          class: classNames("gedit-flow-activity-edge", line.className),
+          style: {
+            ...line.uiState.style,
+            left: `${bounds.x - PADDING}px`,
+            top: `${bounds.y - PADDING}px`,
+            position: "absolute"
+          }
+        },
+        [
+          slots.default?.(),
+          h(
+            "svg",
+            {
+              width: bounds.width + PADDING * 2,
+              height: bounds.height + PADDING * 2
+            },
+            [
+              h("defs", null, [
+                h(
+                  "linearGradient",
+                  {
+                    x1: vertical ? "100%" : "0%",
+                    y1: vertical ? "0%" : "100%",
+                    x2: "100%",
+                    y2: "100%",
+                    id: strokeID,
+                    gradientUnits: "userSpaceOnUse"
+                  },
+                  [
+                    h("stop", { "stop-color": color, offset: "0%" }),
+                    h("stop", { "stop-color": color, offset: "100%" })
+                  ]
+                )
+              ]),
+              h("g", null, [
+                pathNode,
+                h(ArrowComponent, {
+                  id: strokeID,
+                  pos: reverse ? arrowFromPos : arrowToPos,
+                  strokeWidth,
+                  location: reverse ? position.from.location : position.to.location,
+                  hide: hideArrow,
+                  line
+                })
+              ])
+            ]
+          )
+        ]
+      );
+    };
+  }
+});
+
+// src/layer/workflow-lines-layer.ts
+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() {
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = void 0;
+    }
+    this.mountedLines.clear();
+  }
+  render() {
+    this.scheduleLineRenderUpdate();
+    const lines = this.lines.map((line) => this.renderLine(line));
+    return wrapLayerRender(this.playgroundContainer, h(Fragment, null, lines));
+  }
+  scheduleLineRenderUpdate() {
+    if (this.rafId != null) {
+      cancelAnimationFrame(this.rafId);
+    }
+    this.rafId = requestAnimationFrame(() => {
+      this.rafId = void 0;
+      let needsUpdate = false;
+      this.lines.forEach((line) => {
+        const renderData = line.getData(WorkflowLineRenderData);
+        const oldVersion = renderData.renderVersion;
+        renderData.update();
+        if (renderData.renderVersion !== oldVersion) {
+          needsUpdate = true;
+        }
+      });
+      if (needsUpdate) {
+        this.render();
+      }
+    });
+  }
+  // 用来绕过 memo
+  bumpVersion() {
+    this._version = this._version + 1;
+    if (this._version === Number.MAX_SAFE_INTEGER) {
+      this._version = 0;
+    }
+  }
+  lineProps(line) {
+    const { lineType } = this.workflowDocument.linesManager;
+    const selected = this.selectService.isSelected(line.id);
+    const hovered = this.hoverService.isHovered(line.id);
+    const version = this.lineVersion(line);
+    const oldProps = {
+      key: line.id,
+      color: line.color,
+      selected,
+      hovered,
+      line,
+      lineType,
+      version,
+      strokePrefix: this.layerID,
+      rendererRegistry: this.rendererRegistry
+    };
+    return this.options.customLineProps ? this.options.customLineProps(line, oldProps) : oldProps;
+  }
+  lineVersion(line) {
+    const renderData = line.getData(WorkflowLineRenderData);
+    const { renderVersion } = renderData;
+    const selected = this.selectService.isSelected(line.id);
+    const hovered = this.hoverService.isHovered(line.id);
+    const { version: lineVersion, color } = line;
+    const version = `v:${this._version},lv:${lineVersion},rv:${renderVersion},c:${color},s:${selected ? "T" : "F"},h:${hovered ? "T" : "F"}`;
+    return version;
+  }
+  lineComponent(props) {
+    const RenderInsideLine = this.options.renderInsideLine;
+    const RenderLine = this.options.renderLine ?? LineSVG;
+    const inside = RenderInsideLine ? h(RenderInsideLine, props) : null;
+    return h(RenderLine, props, () => inside);
+  }
+  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 = h(Teleport, { to: line.node, key: line.id }, [this.lineComponent(lineProps)]);
+    this.mountedLines.set(line.id, { line, portal, version: lineProps.version });
+    return portal;
+  }
+  get renderElement() {
+    return this.stackContext.node;
+  }
+};
+WorkflowLinesLayer.type = "WorkflowLinesLayer";
+__decorateClass([
+  inject(WorkflowHoverService)
+], WorkflowLinesLayer.prototype, "hoverService", 2);
+__decorateClass([
+  inject(WorkflowSelectService)
+], WorkflowLinesLayer.prototype, "selectService", 2);
+__decorateClass([
+  inject(StackingContextManager)
+], WorkflowLinesLayer.prototype, "stackContext", 2);
+__decorateClass([
+  inject(FlowRendererRegistry)
+], WorkflowLinesLayer.prototype, "rendererRegistry", 2);
+__decorateClass([
+  inject(PlaygroundContainerFactory)
+], WorkflowLinesLayer.prototype, "playgroundContainer", 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
+function getBezierEdgeCenter(fromPos, toPos, fromControl, toControl) {
+  const x = fromPos.x * 0.125 + fromControl.x * 0.375 + toControl.x * 0.375 + toPos.x * 0.125;
+  const y = fromPos.y * 0.125 + fromControl.y * 0.375 + toControl.y * 0.375 + toPos.y * 0.125;
+  return {
+    x,
+    y
+  };
+}
+function getControlOffset(distance, curvature) {
+  if (distance >= 0) {
+    return 0.5 * distance;
+  }
+  return curvature * 25 * Math.sqrt(-distance);
+}
+function getControlWithCurvature({
+  location,
+  x1,
+  y1,
+  x2,
+  y2,
+  curvature
+}) {
+  switch (location) {
+    case "left":
+      return {
+        x: x1 - getControlOffset(x1 - x2, curvature),
+        y: y1
+      };
+    case "right":
+      return {
+        x: x1 + getControlOffset(x2 - x1, curvature),
+        y: y1
+      };
+    case "top":
+      return {
+        x: x1,
+        y: y1 - getControlOffset(y1 - y2, curvature)
+      };
+    case "bottom":
+      return {
+        x: x1,
+        y: y1 + getControlOffset(y2 - y1, curvature)
+      };
+  }
+}
+function getBezierControlPoints(fromPos, toPos, curvature = 0.25) {
+  const fromControl = getControlWithCurvature({
+    location: fromPos.location,
+    x1: fromPos.x,
+    y1: fromPos.y,
+    x2: toPos.x,
+    y2: toPos.y,
+    curvature
+  });
+  const toControl = getControlWithCurvature({
+    location: toPos.location,
+    x1: toPos.x,
+    y1: toPos.y,
+    x2: fromPos.x,
+    y2: fromPos.y,
+    curvature
+  });
+  const center = getBezierEdgeCenter(fromPos, toPos, fromControl, toControl);
+  return {
+    controls: [fromControl, toControl],
+    center
+  };
+}
+
+// src/contributions/bezier/index.ts
+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 Rectangle.EMPTY;
+    }
+    return this.data.bbox;
+  }
+  get center() {
+    return this.data?.center;
+  }
+  update(params) {
+    this.data = this.calcBezier(params.fromPos, params.toPos);
+  }
+  calcBezier(fromPos, toPos) {
+    const { controls, center } = getBezierControlPoints(
+      fromPos,
+      toPos,
+      this.entity.uiState.curvature
+    );
+    const bezier = new Bezier([fromPos, ...controls, toPos]);
+    const bbox = bezier.bbox();
+    const bboxBounds = new Rectangle(
+      bbox.x.min,
+      bbox.y.min,
+      bbox.x.max - bbox.x.min,
+      bbox.y.max - bbox.y.min
+    );
+    const centerPoint = toRelative(center, bboxBounds);
+    const path = this.getPath({ bbox: bboxBounds, fromPos, toPos, controls });
+    this.data = {
+      fromPos,
+      toPos,
+      bezier,
+      bbox: bboxBounds,
+      controls,
+      path,
+      center: {
+        ...center,
+        labelX: centerPoint.x,
+        labelY: centerPoint.y
+      }
+    };
+    return this.data;
+  }
+  getPath(params) {
+    const { bbox } = params;
+    const fromPos = toRelative(params.fromPos, bbox);
+    const toPos = toRelative(params.toPos, bbox);
+    const controls = params.controls.map((c) => toRelative(c, bbox));
+    const shrink = this.entity.uiState.shrink;
+    const renderFromPos = posWithShrink(fromPos, params.fromPos.location, shrink);
+    const renderToPos = posWithShrink(toPos, params.toPos.location, shrink);
+    const controlPoints = controls.map((s) => `${s.x} ${s.y}`).join(",");
+    return `M${renderFromPos.x} ${renderFromPos.y} C ${controlPoints}, ${renderToPos.x} ${renderToPos.y}`;
+  }
+};
+WorkflowBezierLineContribution.type = LineType.BEZIER;
+var getPointToSegmentDistance = (point, segStart, segEnd) => {
+  const { x: px, y: py } = point;
+  const { x: x1, y: y1 } = segStart;
+  const { x: x2, y: y2 } = segEnd;
+  const A = px - x1;
+  const B = py - y1;
+  const C = x2 - x1;
+  const D = y2 - y1;
+  const dot = A * C + B * D;
+  const lenSq = C * C + D * D;
+  const param = lenSq === 0 ? -1 : dot / lenSq;
+  let xx;
+  let yy;
+  if (param < 0) {
+    xx = x1;
+    yy = y1;
+  } else if (param > 1) {
+    xx = x2;
+    yy = y2;
+  } else {
+    xx = x1 + param * C;
+    yy = y1 + param * D;
+  }
+  const dx = px - xx;
+  const dy = py - yy;
+  return Math.sqrt(dx * dx + dy * dy);
+};
+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 }) => {
+    if (source.location === "left" || source.location === "right") {
+      return source.x < target.x ? { x: 1, y: 0 } : { x: -1, y: 0 };
+    }
+    return source.y < target.y ? { x: 0, y: 1 } : { x: 0, y: -1 };
+  };
+  const handleDirections = {
+    left: { x: -1, y: 0 },
+    right: { x: 1, y: 0 },
+    top: { x: 0, y: -1 },
+    bottom: { x: 0, y: 1 }
+  };
+  function getPoints({ source, target }) {
+    const sourceDir = handleDirections[source.location];
+    const targetDir = handleDirections[target.location];
+    const sourceGapped = {
+      x: source.x + sourceDir.x * OFFSET,
+      y: source.y + sourceDir.y * OFFSET,
+      location: source.location
+    };
+    const targetGapped = {
+      x: target.x + targetDir.x * OFFSET,
+      y: target.y + targetDir.y * OFFSET,
+      location: target.location
+    };
+    const dir = getDirection({
+      source: sourceGapped,
+      target: targetGapped
+    });
+    const dirAccessor = dir.x !== 0 ? "x" : "y";
+    const currDir = dir[dirAccessor];
+    let points = [];
+    let centerX, centerY;
+    const [defaultCenterX, defaultCenterY] = getEdgeCenter({
+      source,
+      target
+    });
+    if (sourceDir[dirAccessor] * targetDir[dirAccessor] === -1) {
+      centerX = defaultCenterX;
+      centerY = defaultCenterY;
+      const verticalSplit = [
+        { x: centerX, y: sourceGapped.y },
+        { x: centerX, y: targetGapped.y }
+      ];
+      const horizontalSplit = [
+        { x: sourceGapped.x, y: centerY },
+        { x: targetGapped.x, y: centerY }
+      ];
+      if (sourceDir[dirAccessor] === currDir) {
+        points = dirAccessor === "x" ? verticalSplit : horizontalSplit;
+      } else {
+        points = dirAccessor === "x" ? horizontalSplit : verticalSplit;
+      }
+    } else {
+      const sourceTarget = [{ x: sourceGapped.x, y: targetGapped.y }];
+      const targetSource = [{ x: targetGapped.x, y: sourceGapped.y }];
+      if (dirAccessor === "x") {
+        points = sourceDir.x === currDir ? targetSource : sourceTarget;
+      } else {
+        points = sourceDir.y === currDir ? sourceTarget : targetSource;
+      }
+      const dirAccessorOpposite = dirAccessor === "x" ? "y" : "x";
+      const isSameDir = sourceDir[dirAccessor] === targetDir[dirAccessorOpposite];
+      const sourceGtTargetOppo = sourceGapped[dirAccessorOpposite] > targetGapped[dirAccessorOpposite];
+      const sourceLtTargetOppo = sourceGapped[dirAccessorOpposite] < targetGapped[dirAccessorOpposite];
+      const flipSourceTarget = sourceDir[dirAccessor] === 1 && (!isSameDir && sourceGtTargetOppo || isSameDir && sourceLtTargetOppo) || sourceDir[dirAccessor] !== 1 && (!isSameDir && sourceLtTargetOppo || isSameDir && sourceGtTargetOppo);
+      if (flipSourceTarget) {
+        points = dirAccessor === "x" ? sourceTarget : targetSource;
+      }
+      const sourceGapPoint = { x: sourceGapped.x, y: sourceGapped.y };
+      const targetGapPoint = { x: targetGapped.x, y: targetGapped.y };
+      const maxXDistance = Math.max(
+        Math.abs(sourceGapPoint.x - points[0].x),
+        Math.abs(targetGapPoint.x - points[0].x)
+      );
+      const maxYDistance = Math.max(
+        Math.abs(sourceGapPoint.y - points[0].y),
+        Math.abs(targetGapPoint.y - points[0].y)
+      );
+      if (maxXDistance >= maxYDistance) {
+        centerX = (sourceGapPoint.x + targetGapPoint.x) / 2;
+        centerY = points[0].y;
+      } else {
+        centerX = points[0].x;
+        centerY = (sourceGapPoint.y + targetGapPoint.y) / 2;
+      }
+    }
+    const pathPoints = [
+      source,
+      { x: sourceGapped.x, y: sourceGapped.y },
+      ...points,
+      { x: targetGapped.x, y: targetGapped.y },
+      target
+    ];
+    return {
+      points: pathPoints,
+      center: {
+        x: centerX,
+        y: centerY
+      }
+    };
+  }
+  FoldLine2.getPoints = getPoints;
+  function getBend(a, b, c) {
+    const bendSize = Math.min(
+      Point.getDistance(a, b) / 2,
+      Point.getDistance(b, c) / 2,
+      EDGE_RADIUS
+    );
+    const { x, y } = b;
+    if (a.x === x && x === c.x || a.y === y && y === c.y) {
+      return `L${x} ${y}`;
+    }
+    if (a.y === y) {
+      const xDir2 = a.x < c.x ? -1 : 1;
+      const yDir2 = a.y < c.y ? 1 : -1;
+      return `L ${x + bendSize * xDir2},${y}Q ${x},${y} ${x},${y + bendSize * yDir2}`;
+    }
+    const xDir = a.x < c.x ? 1 : -1;
+    const yDir = a.y < c.y ? -1 : 1;
+    return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
+  }
+  function getSmoothStepPath(points) {
+    const path = points.reduce((res, p, i) => {
+      let segment = "";
+      if (i > 0 && i < points.length - 1) {
+        segment = getBend(points[i - 1], p, points[i + 1]);
+      } else {
+        segment = `${i === 0 ? "M" : "L"}${p.x} ${p.y}`;
+      }
+      res += segment;
+      return res;
+    }, "");
+    return path;
+  }
+  FoldLine2.getSmoothStepPath = getSmoothStepPath;
+  function getBounds(points) {
+    const xList = points.map((p) => p.x);
+    const yList = points.map((p) => p.y);
+    const left = Math.min(...xList);
+    const right = Math.max(...xList);
+    const top = Math.min(...yList);
+    const bottom = Math.max(...yList);
+    return Rectangle.createRectangleWithTwoPoints(
+      {
+        x: left,
+        y: top
+      },
+      {
+        x: right,
+        y: bottom
+      }
+    );
+  }
+  FoldLine2.getBounds = getBounds;
+  FoldLine2.getFoldLineToPointDistance = (points, pos) => {
+    if (points.length === 0) {
+      return Infinity;
+    }
+    if (points.length === 1) {
+      return Point.getDistance(points[0], pos);
+    }
+    const lines = [];
+    for (let i = 0; i < points.length - 1; i++) {
+      lines.push([points[i], points[i + 1]]);
+    }
+    const distances = lines.map((line) => {
+      const [p1, p2] = line;
+      return getPointToSegmentDistance(pos, p1, p2);
+    });
+    return Math.min(...distances);
+  };
+})(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 Rectangle();
+    }
+    return this.data.bbox;
+  }
+  get center() {
+    return this.data?.center;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const shrink = this.entity.uiState.shrink;
+    const source = posWithShrink(fromPos, fromPos.location, shrink);
+    const target = posWithShrink(toPos, toPos.location, shrink);
+    const { points, center } = FoldLine.getPoints({
+      source: {
+        ...source,
+        location: fromPos.location
+      },
+      target: {
+        ...target,
+        location: toPos.location
+      }
+    });
+    const bbox = FoldLine.getBounds(points);
+    const adjustedPoints = points.map((p) => toRelative(p, bbox));
+    const path = FoldLine.getSmoothStepPath(adjustedPoints);
+    const relativeCenter = toRelative(center, bbox);
+    this.data = {
+      points,
+      path,
+      bbox,
+      center: {
+        x: center.x,
+        y: center.y,
+        labelX: relativeCenter.x,
+        labelY: relativeCenter.y
+      }
+    };
+  }
+};
+WorkflowFoldLineContribution.type = LineType.LINE_CHART;
+
+// 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 Point.getDistance(pos, projectPointOnLine(pos, start, end));
+  }
+  get bounds() {
+    if (!this.data) {
+      return new Rectangle();
+    }
+    return this.data.bbox;
+  }
+  get center() {
+    return this.data?.center;
+  }
+  update(params) {
+    const { fromPos, toPos } = params;
+    const shrink = this.entity.uiState.shrink;
+    const source = posWithShrink(fromPos, fromPos.location, shrink);
+    const target = posWithShrink(toPos, toPos.location, shrink);
+    const points = [source, target];
+    const bbox = 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,
+      center: getLineCenter(fromPos, toPos, bbox, LINE_PADDING)
+    };
+  }
+};
+WorkflowStraightLineContribution.type = LineType.STRAIGHT;
+
+// src/create-free-lines-plugin.ts
+var createFreeLinesPlugin = definePluginCreator({
+  singleton: true,
+  onInit: (ctx, opts) => {
+    ctx.playground.registerLayer(WorkflowLinesLayer, {
+      ...opts
+    });
+    if (opts.defaultLineUIState) {
+      ctx.container.get(WorkflowLinesManager).setDefaultUIState(opts.defaultLineUIState);
+    }
+  },
+  onReady: (ctx, opts) => {
+    const linesManager = ctx.container.get(WorkflowLinesManager);
+    linesManager.registerContribution(WorkflowBezierLineContribution).registerContribution(WorkflowFoldLineContribution).registerContribution(WorkflowStraightLineContribution);
+    if (opts.contributions) {
+      opts.contributions.forEach((contribution) => {
+        linesManager.registerContribution(contribution);
+      });
+    }
+    if (opts.defaultLineType) {
+      linesManager.switchLineType(opts.defaultLineType);
+    }
+  }
+});
+
+export { LINE_OFFSET, LINE_PADDING, WorkflowLinesLayer as LinesLayer, WorkflowBezierLineContribution, WorkflowFoldLineContribution, WorkflowLinesLayer, WorkflowPortRender, WorkflowStraightLineContribution, createFreeLinesPlugin };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map