@flowgram.ai/free-lines-plugin 0.1.0-alpha.13 → 0.1.0-alpha.14

package/dist/esm/index.js

@@ -295,9 +295,7 @@ 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"
-})`
+var LineStyle = styled2.div`
   position: absolute;
 
   @keyframes flowingDash {
@@ -348,12 +346,12 @@ var LineSVG = (props) => {
   const { position, reverse, hideArrow, vertical } = line;
   const renderData = line.getData(WorkflowLineRenderData);
   const { bounds, path: bezierPath } = renderData;
-  const toRelative = (p) => ({
+  const toRelative2 = (p) => ({
     x: p.x - bounds.x + PADDING,
     y: p.y - bounds.y + PADDING
   });
-  const fromPos = toRelative(position.from);
-  const toPos = toRelative(position.to);
+  const fromPos = toRelative2(position.from);
+  const toPos = toRelative2(position.to);
   const arrowToPos = position.to.location === "top" ? { x: toPos.x, y: toPos.y - POINT_RADIUS } : { x: toPos.x - POINT_RADIUS, y: toPos.y };
   const arrowFromPos = position.from.location === "bottom" ? { x: fromPos.x, y: fromPos.y + POINT_RADIUS + LINE_OFFSET } : { x: fromPos.x + POINT_RADIUS + LINE_OFFSET, y: fromPos.y };
   const strokeWidth = selected ? line.uiState.strokeWidthSelected ?? STROKE_WIDTH_SLECTED : line.uiState.strokeWidth ?? STROKE_WIDTH;
@@ -367,17 +365,15 @@ var LineSVG = (props) => {
       fill: "none",
       stroke: `url(#${strokeID})`,
       strokeWidth,
-      style: line.uiState.style,
-      className: clsx(
-        line.className,
-        line.processing || line.flowing ? "dashed-line flowing-line" : ""
-      )
+      className: line.processing || line.flowing ? "dashed-line flowing-line" : ""
     }
   );
   return /* @__PURE__ */ React4.createElement(
     LineStyle,
     {
+      className: clsx("gedit-flow-activity-edge", line.className),
       style: {
+        ...line.uiState.style,
         left: bounds.x - PADDING,
         top: bounds.y - PADDING,
         position: "absolute"
@@ -564,7 +560,23 @@ import { Bezier } from "bezier-js";
 import { Point, Rectangle } from "@flowgram.ai/utils";
 import { LineType } from "@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
+  };
+}
+
 // 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;
@@ -619,7 +631,11 @@ function getBezierControlPoints(fromPos, toPos, curvature = 0.25) {
     y2: fromPos.y,
     curvature
   });
-  return [fromControl, toControl];
+  const center = getBezierEdgeCenter(fromPos, toPos, fromControl, toControl);
+  return {
+    controls: [fromControl, toControl],
+    center
+  };
 }
 
 // src/contributions/bezier/index.ts
@@ -638,15 +654,22 @@ var WorkflowBezierLineContribution = class {
   }
   get bounds() {
     if (!this.data) {
-      return new Rectangle();
+      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 = getBezierControlPoints(fromPos, toPos, this.entity.uiState.curvature);
+    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(
@@ -655,6 +678,7 @@ var WorkflowBezierLineContribution = class {
       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,
@@ -662,19 +686,20 @@ var WorkflowBezierLineContribution = class {
       bezier,
       bbox: bboxBounds,
       controls,
-      path
+      path,
+      center: {
+        ...center,
+        labelX: centerPoint.x,
+        labelY: centerPoint.y
+      }
     };
     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 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 = 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 };
@@ -686,9 +711,6 @@ WorkflowBezierLineContribution.type = LineType.BEZIER;
 
 // src/contributions/fold/index.ts
 import { Rectangle as Rectangle3 } from "@flowgram.ai/utils";
-import {
-  POINT_RADIUS as POINT_RADIUS2
-} from "@flowgram.ai/free-layout-core";
 import { LineType as LineType2 } from "@flowgram.ai/free-layout-core";
 
 // src/contributions/fold/fold-line.ts
@@ -743,10 +765,7 @@ var FoldLine;
     top: { x: 0, y: -1 },
     bottom: { x: 0, y: 1 }
   };
-  function getPoints({
-    source,
-    target
-  }) {
+  function getPoints({ source, target }) {
     const sourceDir = handleDirections[source.location];
     const targetDir = handleDirections[target.location];
     const sourceGapped = {
@@ -828,7 +847,13 @@ var FoldLine;
       { x: targetGapped.x, y: targetGapped.y },
       target
     ];
-    return pathPoints;
+    return {
+      points: pathPoints,
+      center: {
+        x: centerX,
+        y: centerY
+      }
+    };
   }
   FoldLine2.getPoints = getPoints;
   function getBend(a, b, c) {
@@ -922,17 +947,21 @@ var WorkflowFoldLineContribution = class {
     }
     return this.data.bbox;
   }
+  get center() {
+    return this.data?.center;
+  }
   update(params) {
     const { fromPos, toPos } = params;
+    const shrink = this.entity.uiState.shrink;
     const sourceOffset = {
-      x: fromPos.location === "bottom" ? 0 : POINT_RADIUS2,
-      y: fromPos.location === "bottom" ? POINT_RADIUS2 : 0
+      x: fromPos.location === "bottom" ? 0 : shrink,
+      y: fromPos.location === "bottom" ? shrink : 0
     };
     const targetOffset = {
-      x: toPos.location === "top" ? 0 : -POINT_RADIUS2,
-      y: toPos.location === "top" ? -POINT_RADIUS2 : 0
+      x: toPos.location === "top" ? 0 : -shrink,
+      y: toPos.location === "top" ? -shrink : 0
     };
-    const points = FoldLine.getPoints({
+    const { points, center } = FoldLine.getPoints({
       source: {
         x: fromPos.x + sourceOffset.x,
         y: fromPos.y + sourceOffset.y,
@@ -945,15 +974,19 @@ var WorkflowFoldLineContribution = class {
       }
     });
     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 adjustedPoints = points.map((p) => toRelative(p, bbox));
     const path = FoldLine.getSmoothStepPath(adjustedPoints);
+    const relativeCenter = toRelative(center, bbox);
     this.data = {
       points,
       path,
-      bbox
+      bbox,
+      center: {
+        x: center.x,
+        y: center.y,
+        labelX: relativeCenter.x,
+        labelY: relativeCenter.y
+      }
     };
   }
 };
@@ -962,7 +995,8 @@ WorkflowFoldLineContribution.type = LineType2.LINE_CHART;
 // src/contributions/straight/index.ts
 import { Point as Point3, Rectangle as Rectangle4 } from "@flowgram.ai/utils";
 import {
-  POINT_RADIUS as POINT_RADIUS3
+  getLineCenter,
+  LineType as LineType3
 } from "@flowgram.ai/free-layout-core";
 
 // src/contributions/straight/point-on-line.ts
@@ -1004,15 +1038,19 @@ var WorkflowStraightLineContribution = class {
     }
     return this.data.bbox;
   }
+  get center() {
+    return this.data?.center;
+  }
   update(params) {
     const { fromPos, toPos } = params;
+    const shrink = this.entity.uiState.shrink;
     const sourceOffset = {
-      x: fromPos.location === "bottom" ? 0 : POINT_RADIUS3,
-      y: fromPos.location === "bottom" ? POINT_RADIUS3 : 0
+      x: fromPos.location === "bottom" ? 0 : shrink,
+      y: fromPos.location === "bottom" ? shrink : 0
     };
     const targetOffset = {
-      x: toPos.location === "top" ? 0 : -POINT_RADIUS3,
-      y: toPos.location === "top" ? -POINT_RADIUS3 : 0
+      x: toPos.location === "top" ? 0 : -shrink,
+      y: toPos.location === "top" ? -shrink : 0
     };
     const points = [
       {
@@ -1033,100 +1071,12 @@ var WorkflowStraightLineContribution = class {
     this.data = {
       points,
       path,
-      bbox
-    };
-  }
-};
-WorkflowStraightLineContribution.type = "WorkflowStraightLineContribution";
-
-// src/contributions/arc/index.ts
-import { Point as Point4, Rectangle as Rectangle5 } from "@flowgram.ai/utils";
-import {
-  POINT_RADIUS as POINT_RADIUS4
-} 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 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 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 Rectangle5(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
+      bbox,
+      center: getLineCenter(fromPos, toPos, bbox, LINE_PADDING)
     };
-    return `M ${startRel.x} ${startRel.y} A ${distance / 2} ${distance / 2} 0 0 1 ${endRel.x} ${endRel.y}`;
   }
 };
-WorkflowArkLineContribution.type = "WorkflowArkLineContribution";
+WorkflowStraightLineContribution.type = LineType3.STRAIGHT;
 
 // src/create-free-lines-plugin.ts
 var createFreeLinesPlugin = definePluginCreator({
@@ -1138,7 +1088,7 @@ var createFreeLinesPlugin = definePluginCreator({
   },
   onReady: (ctx, opts) => {
     const linesManager = ctx.container.get(WorkflowLinesManager2);
-    linesManager.registerContribution(WorkflowBezierLineContribution).registerContribution(WorkflowFoldLineContribution);
+    linesManager.registerContribution(WorkflowBezierLineContribution).registerContribution(WorkflowFoldLineContribution).registerContribution(WorkflowStraightLineContribution);
     if (opts.contributions) {
       opts.contributions.forEach((contribution) => {
         linesManager.registerContribution(contribution);
@@ -1153,7 +1103,6 @@ export {
   LINE_OFFSET,
   LINE_PADDING,
   WorkflowLinesLayer as LinesLayer,
-  WorkflowArkLineContribution,
   WorkflowBezierLineContribution,
   WorkflowFoldLineContribution,
   WorkflowLinesLayer,