@flowgram.ai/free-lines-plugin 0.4.8 → 0.4.10

package/dist/index.js

@@ -299,17 +299,17 @@ var LINE_OFFSET = 6;
 var LINE_PADDING = 12;
 
 // src/create-free-lines-plugin.ts
-var import_free_layout_core8 = require("@flowgram.ai/free-layout-core");
+var import_free_layout_core7 = require("@flowgram.ai/free-layout-core");
 var import_core3 = require("@flowgram.ai/core");
 
 // src/layer/workflow-lines-layer.tsx
 var import_react_dom2 = __toESM(require("react-dom"));
 var import_react6 = __toESM(require("react"));
 var import_inversify = require("inversify");
-var import_utils = require("@flowgram.ai/utils");
+var import_utils2 = require("@flowgram.ai/utils");
 var import_renderer = require("@flowgram.ai/renderer");
 var import_free_stack_plugin = require("@flowgram.ai/free-stack-plugin");
-var import_free_layout_core4 = require("@flowgram.ai/free-layout-core");
+var import_free_layout_core3 = require("@flowgram.ai/free-layout-core");
 var import_core2 = require("@flowgram.ai/core");
 
 // src/components/workflow-line-render/index.tsx
@@ -319,7 +319,33 @@ var import_react5 = require("react");
 var import_react4 = __toESM(require("react"));
 var import_clsx2 = __toESM(require("clsx"));
 var import_free_layout_core2 = require("@flowgram.ai/free-layout-core");
-var import_free_layout_core3 = require("@flowgram.ai/free-layout-core");
+
+// src/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
+  };
+}
 
 // src/components/workflow-line-render/index.style.ts
 var import_styled_components2 = __toESM(require("styled-components"));
@@ -343,18 +369,23 @@ var LineStyle = import_styled_components2.default.div`
 
 // src/components/workflow-line-render/arrow.tsx
 var import_react3 = __toESM(require("react"));
-function ArrowRenderer({
-  id,
-  pos,
-  reverseArrow,
-  strokeWidth,
-  vertical,
-  hide
-}) {
+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}`;
+  }
+}
+function ArrowRenderer({ id, pos, strokeWidth, location, 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}`;
+  const arrowPath = getArrowPath(pos, location);
   return /* @__PURE__ */ import_react3.default.createElement(
     "path",
     {
@@ -372,7 +403,7 @@ var PADDING = 12;
 var LineSVG = (props) => {
   const { line, color, selected, children, strokePrefix, rendererRegistry } = props;
   const { position, reverse, hideArrow, vertical } = line;
-  const renderData = line.getData(import_free_layout_core3.WorkflowLineRenderData);
+  const renderData = line.getData(import_free_layout_core2.WorkflowLineRenderData);
   const { bounds, path: bezierPath } = renderData;
   const toRelative2 = (p) => ({
     x: p.x - bounds.x + PADDING,
@@ -380,8 +411,8 @@ var LineSVG = (props) => {
   });
   const fromPos = toRelative2(position.from);
   const toPos = toRelative2(position.to);
-  const arrowToPos = position.to.location === "top" ? { x: toPos.x, y: toPos.y - import_free_layout_core2.POINT_RADIUS } : { x: toPos.x - import_free_layout_core2.POINT_RADIUS, y: toPos.y };
-  const arrowFromPos = position.from.location === "bottom" ? { x: fromPos.x, y: fromPos.y + import_free_layout_core2.POINT_RADIUS + LINE_OFFSET } : { x: fromPos.x + import_free_layout_core2.POINT_RADIUS + LINE_OFFSET, y: fromPos.y };
+  const 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("arrow-renderer")?.renderer;
@@ -424,10 +455,9 @@ var LineSVG = (props) => {
       ArrowComponent,
       {
         id: strokeID,
-        reverseArrow: reverse,
         pos: reverse ? arrowFromPos : arrowToPos,
         strokeWidth,
-        vertical,
+        location: reverse ? position.from.location : position.to.location,
         hide: hideArrow,
         line
       }
@@ -445,13 +475,13 @@ var WorkflowLineRender = (0, import_react5.memo)(
 var WorkflowLinesLayer = class extends import_core2.Layer {
   constructor() {
     super(...arguments);
-    this.layerID = (0, import_free_layout_core4.nanoid)();
+    this.layerID = (0, import_free_layout_core3.nanoid)();
     this.mountedLines = /* @__PURE__ */ new Map();
     this._version = 0;
     /**
      * 节点线条
      */
-    this.node = import_utils.domUtils.createDivWithClass("gedit-playground-layer gedit-flow-lines-layer");
+    this.node = import_utils2.domUtils.createDivWithClass("gedit-playground-layer gedit-flow-lines-layer");
   }
   onZoom(scale) {
     this.node.style.transform = `scale(${scale})`;
@@ -477,7 +507,7 @@ var WorkflowLinesLayer = class extends import_core2.Layer {
       const updateLines = () => {
         let needsUpdate = false;
         this.lines.forEach((line) => {
-          const renderData = line.getData(import_free_layout_core4.WorkflowLineRenderData);
+          const renderData = line.getData(import_free_layout_core3.WorkflowLineRenderData);
           const oldVersion = renderData.renderVersion;
           renderData.update();
           if (renderData.renderVersion !== oldVersion) {
@@ -519,7 +549,7 @@ var WorkflowLinesLayer = class extends import_core2.Layer {
     };
   }
   lineVersion(line) {
-    const renderData = line.getData(import_free_layout_core4.WorkflowLineRenderData);
+    const renderData = line.getData(import_free_layout_core3.WorkflowLineRenderData);
     const { renderVersion } = renderData;
     const selected = this.selectService.isSelected(line.id);
     const hovered = this.hoverService.isHovered(line.id);
@@ -556,10 +586,10 @@ var WorkflowLinesLayer = class extends import_core2.Layer {
 };
 WorkflowLinesLayer.type = "WorkflowLinesLayer";
 __decorateClass([
-  (0, import_inversify.inject)(import_free_layout_core4.WorkflowHoverService)
+  (0, import_inversify.inject)(import_free_layout_core3.WorkflowHoverService)
 ], WorkflowLinesLayer.prototype, "hoverService", 2);
 __decorateClass([
-  (0, import_inversify.inject)(import_free_layout_core4.WorkflowSelectService)
+  (0, import_inversify.inject)(import_free_layout_core3.WorkflowSelectService)
 ], WorkflowLinesLayer.prototype, "selectService", 2);
 __decorateClass([
   (0, import_inversify.inject)(import_free_stack_plugin.StackingContextManager)
@@ -568,16 +598,16 @@ __decorateClass([
   (0, import_inversify.inject)(import_renderer.FlowRendererRegistry)
 ], WorkflowLinesLayer.prototype, "rendererRegistry", 2);
 __decorateClass([
-  (0, import_core2.observeEntities)(import_free_layout_core4.WorkflowLineEntity)
+  (0, import_core2.observeEntities)(import_free_layout_core3.WorkflowLineEntity)
 ], WorkflowLinesLayer.prototype, "lines", 2);
 __decorateClass([
-  (0, import_core2.observeEntities)(import_free_layout_core4.WorkflowPortEntity)
+  (0, import_core2.observeEntities)(import_free_layout_core3.WorkflowPortEntity)
 ], WorkflowLinesLayer.prototype, "ports", 2);
 __decorateClass([
-  (0, import_core2.observeEntityDatas)(import_free_layout_core4.WorkflowNodeEntity, import_core2.TransformData)
+  (0, import_core2.observeEntityDatas)(import_free_layout_core3.WorkflowNodeEntity, import_core2.TransformData)
 ], WorkflowLinesLayer.prototype, "trans", 2);
 __decorateClass([
-  (0, import_inversify.inject)(import_free_layout_core4.WorkflowDocument)
+  (0, import_inversify.inject)(import_free_layout_core3.WorkflowDocument)
 ], WorkflowLinesLayer.prototype, "workflowDocument", 2);
 WorkflowLinesLayer = __decorateClass([
   (0, import_inversify.injectable)()
@@ -585,16 +615,8 @@ WorkflowLinesLayer = __decorateClass([
 
 // src/contributions/bezier/index.ts
 var import_bezier_js = require("bezier-js");
-var import_utils2 = require("@flowgram.ai/utils");
-var import_free_layout_core5 = require("@flowgram.ai/free-layout-core");
-
-// src/contributions/utils.ts
-function toRelative(p, bbox) {
-  return {
-    x: p.x - bbox.x + LINE_PADDING,
-    y: p.y - bbox.y + LINE_PADDING
-  };
-}
+var import_utils3 = require("@flowgram.ai/utils");
+var import_free_layout_core4 = require("@flowgram.ai/free-layout-core");
 
 // src/contributions/bezier/bezier-controls.ts
 function getBezierEdgeCenter(fromPos, toPos, fromControl, toControl) {
@@ -678,11 +700,11 @@ var WorkflowBezierLineContribution = class {
     if (!this.data) {
       return Number.MAX_SAFE_INTEGER;
     }
-    return import_utils2.Point.getDistance(pos, this.data.bezier.project(pos));
+    return import_utils3.Point.getDistance(pos, this.data.bezier.project(pos));
   }
   get bounds() {
     if (!this.data) {
-      return import_utils2.Rectangle.EMPTY;
+      return import_utils3.Rectangle.EMPTY;
     }
     return this.data.bbox;
   }
@@ -700,7 +722,7 @@ var WorkflowBezierLineContribution = class {
     );
     const bezier = new import_bezier_js.Bezier([fromPos, ...controls, toPos]);
     const bbox = bezier.bbox();
-    const bboxBounds = new import_utils2.Rectangle(
+    const bboxBounds = new import_utils3.Rectangle(
       bbox.x.min,
       bbox.y.min,
       bbox.x.max - bbox.x.min,
@@ -729,20 +751,20 @@ var WorkflowBezierLineContribution = class {
     const toPos = toRelative(params.toPos, bbox);
     const controls = params.controls.map((c) => toRelative(c, bbox));
     const shrink = this.entity.uiState.shrink;
-    const renderFromPos = params.fromPos.location === "bottom" ? { x: fromPos.x, y: fromPos.y + shrink } : { x: fromPos.x + shrink, y: fromPos.y };
-    const renderToPos = params.toPos.location === "top" ? { x: toPos.x, y: toPos.y - shrink } : { x: toPos.x - shrink, y: toPos.y };
+    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 = import_free_layout_core5.LineType.BEZIER;
+WorkflowBezierLineContribution.type = import_free_layout_core4.LineType.BEZIER;
 
 // src/contributions/fold/index.ts
-var import_utils5 = require("@flowgram.ai/utils");
-var import_free_layout_core6 = require("@flowgram.ai/free-layout-core");
+var import_utils6 = require("@flowgram.ai/utils");
+var import_free_layout_core5 = require("@flowgram.ai/free-layout-core");
 
 // src/contributions/fold/fold-line.ts
-var import_utils4 = require("@flowgram.ai/utils");
+var import_utils5 = require("@flowgram.ai/utils");
 var getPointToSegmentDistance = (point, segStart, segEnd) => {
   const { x: px, y: py } = point;
   const { x: x1, y: y1 } = segStart;
@@ -886,8 +908,8 @@ var FoldLine;
   FoldLine2.getPoints = getPoints;
   function getBend(a, b, c) {
     const bendSize = Math.min(
-      import_utils4.Point.getDistance(a, b) / 2,
-      import_utils4.Point.getDistance(b, c) / 2,
+      import_utils5.Point.getDistance(a, b) / 2,
+      import_utils5.Point.getDistance(b, c) / 2,
       EDGE_RADIUS
     );
     const { x, y } = b;
@@ -924,7 +946,7 @@ var FoldLine;
     const right = Math.max(...xList);
     const top = Math.min(...yList);
     const bottom = Math.max(...yList);
-    return import_utils4.Rectangle.createRectangleWithTwoPoints(
+    return import_utils5.Rectangle.createRectangleWithTwoPoints(
       {
         x: left,
         y: top
@@ -941,7 +963,7 @@ var FoldLine;
       return Infinity;
     }
     if (points.length === 1) {
-      return import_utils4.Point.getDistance(points[0], pos);
+      return import_utils5.Point.getDistance(points[0], pos);
     }
     const lines = [];
     for (let i = 0; i < points.length - 1; i++) {
@@ -971,7 +993,7 @@ var WorkflowFoldLineContribution = class {
   }
   get bounds() {
     if (!this.data) {
-      return new import_utils5.Rectangle();
+      return new import_utils6.Rectangle();
     }
     return this.data.bbox;
   }
@@ -981,23 +1003,15 @@ var WorkflowFoldLineContribution = class {
   update(params) {
     const { fromPos, toPos } = params;
     const shrink = this.entity.uiState.shrink;
-    const sourceOffset = {
-      x: fromPos.location === "bottom" ? 0 : shrink,
-      y: fromPos.location === "bottom" ? shrink : 0
-    };
-    const targetOffset = {
-      x: toPos.location === "top" ? 0 : -shrink,
-      y: toPos.location === "top" ? -shrink : 0
-    };
+    const source = posWithShrink(fromPos, fromPos.location, shrink);
+    const target = posWithShrink(toPos, toPos.location, shrink);
     const { points, center } = FoldLine.getPoints({
       source: {
-        x: fromPos.x + sourceOffset.x,
-        y: fromPos.y + sourceOffset.y,
+        ...source,
         location: fromPos.location
       },
       target: {
-        x: toPos.x + targetOffset.x,
-        y: toPos.y + targetOffset.y,
+        ...target,
         location: toPos.location
       }
     });
@@ -1018,11 +1032,11 @@ var WorkflowFoldLineContribution = class {
     };
   }
 };
-WorkflowFoldLineContribution.type = import_free_layout_core6.LineType.LINE_CHART;
+WorkflowFoldLineContribution.type = import_free_layout_core5.LineType.LINE_CHART;
 
 // src/contributions/straight/index.ts
-var import_utils7 = require("@flowgram.ai/utils");
-var import_free_layout_core7 = require("@flowgram.ai/free-layout-core");
+var import_utils8 = require("@flowgram.ai/utils");
+var import_free_layout_core6 = require("@flowgram.ai/free-layout-core");
 
 // src/contributions/straight/point-on-line.ts
 function projectPointOnLine(point, lineStart, lineEnd) {
@@ -1055,11 +1069,11 @@ var WorkflowStraightLineContribution = class {
       return Number.MAX_SAFE_INTEGER;
     }
     const [start, end] = this.data.points;
-    return import_utils7.Point.getDistance(pos, projectPointOnLine(pos, start, end));
+    return import_utils8.Point.getDistance(pos, projectPointOnLine(pos, start, end));
   }
   get bounds() {
     if (!this.data) {
-      return new import_utils7.Rectangle();
+      return new import_utils8.Rectangle();
     }
     return this.data.bbox;
   }
@@ -1069,25 +1083,10 @@ var WorkflowStraightLineContribution = class {
   update(params) {
     const { fromPos, toPos } = params;
     const shrink = this.entity.uiState.shrink;
-    const sourceOffset = {
-      x: fromPos.location === "bottom" ? 0 : shrink,
-      y: fromPos.location === "bottom" ? shrink : 0
-    };
-    const targetOffset = {
-      x: toPos.location === "top" ? 0 : -shrink,
-      y: toPos.location === "top" ? -shrink : 0
-    };
-    const points = [
-      {
-        x: fromPos.x + sourceOffset.x,
-        y: fromPos.y + sourceOffset.y
-      },
-      {
-        x: toPos.x + targetOffset.x,
-        y: toPos.y + targetOffset.y
-      }
-    ];
-    const bbox = import_utils7.Rectangle.createRectangleWithTwoPoints(points[0], points[1]);
+    const source = posWithShrink(fromPos, fromPos.location, shrink);
+    const target = posWithShrink(toPos, toPos.location, shrink);
+    const points = [source, target];
+    const bbox = import_utils8.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
@@ -1097,11 +1096,11 @@ var WorkflowStraightLineContribution = class {
       points,
       path,
       bbox,
-      center: (0, import_free_layout_core7.getLineCenter)(fromPos, toPos, bbox, LINE_PADDING)
+      center: (0, import_free_layout_core6.getLineCenter)(fromPos, toPos, bbox, LINE_PADDING)
     };
   }
 };
-WorkflowStraightLineContribution.type = import_free_layout_core7.LineType.STRAIGHT;
+WorkflowStraightLineContribution.type = import_free_layout_core6.LineType.STRAIGHT;
 
 // src/create-free-lines-plugin.ts
 var createFreeLinesPlugin = (0, import_core3.definePluginCreator)({
@@ -1112,7 +1111,7 @@ var createFreeLinesPlugin = (0, import_core3.definePluginCreator)({
     });
   },
   onReady: (ctx, opts) => {
-    const linesManager = ctx.container.get(import_free_layout_core8.WorkflowLinesManager);
+    const linesManager = ctx.container.get(import_free_layout_core7.WorkflowLinesManager);
     linesManager.registerContribution(WorkflowBezierLineContribution).registerContribution(WorkflowFoldLineContribution).registerContribution(WorkflowStraightLineContribution);
     if (opts.contributions) {
       opts.contributions.forEach((contribution) => {