@flowgram.ai/renderer 0.1.26 → 0.1.28

package/dist/esm/index.js

@@ -1049,32 +1049,49 @@ import {
 } from "@flowgram.ai/document";
 import { Layer as Layer3, observeEntity as observeEntity3, observeEntityDatas as observeEntityDatas3 } from "@flowgram.ai/core";
 
-// src/components/MarkerArrow.tsx
+// src/components/LinesRenderer.tsx
+import React7 from "react";
+import { Rectangle as Rectangle4 } from "@flowgram.ai/utils";
+import {
+  FlowTransitionLineEnum as FlowTransitionLineEnum2,
+  DefaultSpacingKey as DefaultSpacingKey2
+} from "@flowgram.ai/document";
+import { getDefaultSpacing } from "@flowgram.ai/document";
+
+// src/components/StraightLine.tsx
 import React2 from "react";
-var MARK_ARROW_ID = "line-marker-arrow";
-var MARK_ARROW_URL = `url(#${MARK_ARROW_ID})`;
-function MarkerArrow() {
-  const { baseColor } = useBaseColor();
-  return /* @__PURE__ */ React2.createElement("marker", { id: MARK_ARROW_ID, markerWidth: "11", markerHeight: "14", refX: "10", refY: "7", orient: "auto" }, /* @__PURE__ */ React2.createElement(
+function StraightLine(props) {
+  const { from, to, activated, style } = props;
+  const { baseColor, baseActivatedColor } = useBaseColor();
+  return /* @__PURE__ */ React2.createElement(
     "path",
     {
-      d: "M9.6 5.2C10.8 6.1 10.8 7.9 9.6 8.8L3.6 13.3C2.11672 14.4125 0 13.3541 0 11.5L0 2.5C0 0.645898 2.11672 -0.412461 3.6 0.7L9.6 5.2Z",
-      fill: baseColor
+      "data-line-id": props.lineId,
+      d: `M ${from.x} ${from.y} L ${to.x} ${to.y}`,
+      ...DEFAULT_LINE_ATTRS,
+      stroke: activated ? baseActivatedColor : baseColor,
+      style
     }
-  ));
+  );
 }
-var MarkerArrow_default = MarkerArrow;
+var StraightLine_default = StraightLine;
 
-// src/components/MarkerActivatedArrow.tsx
+// src/components/RoundedTurningLine.tsx
+import React5, { useMemo } from "react";
+import { isNil as isNil2 } from "lodash";
+import { Point } from "@flowgram.ai/utils";
+import { useService as useService2 } from "@flowgram.ai/core";
+
+// src/components/MarkerArrow.tsx
 import React3 from "react";
-var MARK_ACTIVATED_ARROW_ID = "line-marker-arrow-activated";
-var MARK_ACTIVATED_ARROW_URL = `url(#${MARK_ACTIVATED_ARROW_ID})`;
-function MarkerActivatedArrow() {
-  const { baseActivatedColor } = useBaseColor();
+var MARK_ARROW_ID = "$marker_arrow$";
+function MarkerArrow(props) {
+  const { baseColor } = useBaseColor();
   return /* @__PURE__ */ React3.createElement(
     "marker",
     {
-      id: MARK_ACTIVATED_ARROW_ID,
+      "data-line-id": props.id,
+      id: props.id || MARK_ARROW_ID,
       markerWidth: "11",
       markerHeight: "14",
       refX: "10",
@@ -1085,43 +1102,54 @@ function MarkerActivatedArrow() {
       "path",
       {
         d: "M9.6 5.2C10.8 6.1 10.8 7.9 9.6 8.8L3.6 13.3C2.11672 14.4125 0 13.3541 0 11.5L0 2.5C0 0.645898 2.11672 -0.412461 3.6 0.7L9.6 5.2Z",
-        fill: baseActivatedColor
+        fill: baseColor
       }
     )
   );
 }
-var MarkerActivatedArrow_default = MarkerActivatedArrow;
-
-// src/components/LinesRenderer.tsx
-import React7 from "react";
-import { Rectangle as Rectangle4 } from "@flowgram.ai/utils";
-import {
-  FlowTransitionLineEnum as FlowTransitionLineEnum2,
-  DefaultSpacingKey as DefaultSpacingKey2
-} from "@flowgram.ai/document";
-import { getDefaultSpacing } from "@flowgram.ai/document";
+var MarkerArrow_default = MarkerArrow;
 
-// src/components/StraightLine.tsx
+// src/components/MarkerActivatedArrow.tsx
 import React4 from "react";
-function StraightLine(props) {
-  const { from, to, activated, style } = props;
-  const { baseColor, baseActivatedColor } = useBaseColor();
+var MARK_ACTIVATED_ARROW_ID = "$marker_arrow_activated$";
+function MarkerActivatedArrow(props) {
+  const { baseActivatedColor } = useBaseColor();
   return /* @__PURE__ */ React4.createElement(
-    "path",
+    "marker",
     {
-      d: `M ${from.x} ${from.y} L ${to.x} ${to.y}`,
-      ...DEFAULT_LINE_ATTRS,
-      stroke: activated ? baseActivatedColor : baseColor,
-      style
-    }
+      "data-line-id": props.id,
+      id: props.id || MARK_ACTIVATED_ARROW_ID,
+      markerWidth: "11",
+      markerHeight: "14",
+      refX: "10",
+      refY: "7",
+      orient: "auto"
+    },
+    /* @__PURE__ */ React4.createElement(
+      "path",
+      {
+        d: "M9.6 5.2C10.8 6.1 10.8 7.9 9.6 8.8L3.6 13.3C2.11672 14.4125 0 13.3541 0 11.5L0 2.5C0 0.645898 2.11672 -0.412461 3.6 0.7L9.6 5.2Z",
+        fill: baseActivatedColor
+      }
+    )
   );
 }
-var StraightLine_default = StraightLine;
+var MarkerActivatedArrow_default = MarkerActivatedArrow;
 
 // src/components/RoundedTurningLine.tsx
-import React5, { useMemo } from "react";
-import { isNil as isNil2 } from "lodash";
-import { Point } from "@flowgram.ai/utils";
+function MarkerDefs(props) {
+  const renderRegistry = useService2(FlowRendererRegistry);
+  const ArrowRenderer = renderRegistry?.tryToGetRendererComponent(
+    props.activated ? "marker-active-arrow" /* MARKER_ACTIVATE_ARROW */ : "marker-arrow" /* MARKER_ARROW */
+  );
+  if (ArrowRenderer) {
+    return /* @__PURE__ */ React5.createElement(ArrowRenderer.renderer, { ...props });
+  }
+  if (props.activated) {
+    return /* @__PURE__ */ React5.createElement("defs", null, /* @__PURE__ */ React5.createElement(MarkerActivatedArrow_default, { id: props.id }));
+  }
+  return /* @__PURE__ */ React5.createElement("defs", null, /* @__PURE__ */ React5.createElement(MarkerArrow_default, { id: props.id }));
+}
 function RoundedTurningLine(props) {
   const { vertices, radius = DEFAULT_RADIUS, hide, xRadius, yRadius, ...line } = props;
   const { from, to, arrow, activated, style } = line || {};
@@ -1171,18 +1199,20 @@ function RoundedTurningLine(props) {
     return null;
   }
   const pathStr = `M ${from.x} ${from.y} ${middleStr} L ${to.x} ${to.y}`;
-  return /* @__PURE__ */ React5.createElement(
+  const markerId = activated ? `${MARK_ACTIVATED_ARROW_ID}${props.lineId}` : `${MARK_ARROW_ID}${props.lineId}`;
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, arrow ? /* @__PURE__ */ React5.createElement(MarkerDefs, { id: markerId, activated }) : null, /* @__PURE__ */ React5.createElement(
     "path",
     {
+      "data-line-id": props.lineId,
       d: pathStr,
       ...DEFAULT_LINE_ATTRS,
       stroke: activated ? baseActivatedColor : baseColor,
       ...arrow ? {
-        markerEnd: activated ? MARK_ACTIVATED_ARROW_URL : MARK_ARROW_URL
+        markerEnd: `url(#${markerId})`
       } : {},
       style
     }
-  );
+  ));
 }
 var RoundedTurningLine_default = RoundedTurningLine;
 
@@ -1198,7 +1228,7 @@ function CustomLine(props) {
     return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
   }
   const Component = renderer.renderer;
-  return /* @__PURE__ */ React6.createElement(Component, { ...line });
+  return /* @__PURE__ */ React6.createElement(Component, { lineId: props.lineId, ...line });
 }
 var CustomLine_default = CustomLine;
 
@@ -1216,7 +1246,15 @@ function createLines(props) {
     const draggingLineActivated = line.type === FlowTransitionLineEnum2.DRAGGING_LINE && data.entity?.id === dragService.dropNodeId && line.side === dragService.labelSide;
     switch (line.type) {
       case FlowTransitionLineEnum2.STRAIGHT_LINE:
-        return /* @__PURE__ */ React7.createElement(StraightLine_default, { key: `${data.entity.id}${index}`, activated: lineActivated, ...line });
+        return /* @__PURE__ */ React7.createElement(
+          StraightLine_default,
+          {
+            key: `${data.entity.id}_${index}`,
+            lineId: data.entity.id,
+            activated: lineActivated,
+            ...line
+          }
+        );
       case FlowTransitionLineEnum2.DIVERGE_LINE:
       case FlowTransitionLineEnum2.DRAGGING_LINE:
       case FlowTransitionLineEnum2.MERGE_LINE:
@@ -1224,7 +1262,8 @@ function createLines(props) {
         return /* @__PURE__ */ React7.createElement(
           RoundedTurningLine_default,
           {
-            key: `${data.entity.id}${index}`,
+            key: `${data.entity.id}_${index}`,
+            lineId: data.entity.id,
             isHorizontal: !isVertical,
             activated: lineActivated || draggingLineActivated,
             ...line,
@@ -1237,7 +1276,8 @@ function createLines(props) {
         return /* @__PURE__ */ React7.createElement(
           CustomLine_default,
           {
-            key: `${data.entity.id}${index}`,
+            key: `${data.entity.id}_${index}`,
+            lineId: data.entity.id,
             ...line,
             rendererRegistry
           }
@@ -1301,14 +1341,6 @@ var FlowLinesLayer = class extends Layer3 {
       (line) => line.props.activated ? "activateLines" : "normalLines"
     );
     const resultLines = [...normalLines, ...activateLines];
-    const arrowRenderer = this.rendererRegistry.tryToGetRendererComponent(
-      "marker-arrow" /* MARKER_ARROW */
-    );
-    const activateArrowRenderer = this.rendererRegistry.tryToGetRendererComponent(
-      "marker-active-arrow" /* MARKER_ACTIVATE_ARROW */
-    );
-    const arrow = arrowRenderer ? React8.createElement(arrowRenderer.renderer) : null;
-    const activateArrow = activateArrowRenderer ? React8.createElement(activateArrowRenderer.renderer) : null;
     return /* @__PURE__ */ React8.createElement(
       "svg",
       {
@@ -1319,7 +1351,6 @@ var FlowLinesLayer = class extends Layer3 {
         viewBox: this.viewBox,
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ React8.createElement("defs", null, arrowRenderer ? arrow : /* @__PURE__ */ React8.createElement(MarkerArrow_default, null), activateArrow ? activateArrow : /* @__PURE__ */ React8.createElement(MarkerActivatedArrow_default, null)),
       resultLines
     );
   }
@@ -1435,7 +1466,7 @@ import React10, { useCallback as useCallback2, useState as useState2 } from "rea
 import {
   FlowDragService as FlowDragService3
 } from "@flowgram.ai/document";
-import { useService as useService2 } from "@flowgram.ai/core";
+import { useService as useService3 } from "@flowgram.ai/core";
 var getFlowRenderKey = (node, { dragService }) => {
   if (dragService && dragService.dragging && dragService.isDroppableNode(node)) {
     if (dragService.dropNodeId === node.id) {
@@ -1457,7 +1488,7 @@ function Adder(props) {
   const handleMouseEnter = useCallback2(() => setHoverActivated(true), []);
   const handleMouseLeave = useCallback2(() => setHoverActivated(false), []);
   const node = data.entity;
-  const dragService = useService2(FlowDragService3);
+  const dragService = useService3(FlowDragService3);
   const flowRenderKey = getFlowRenderKey(node, { dragService });
   const adder = rendererRegistry.getRendererComponent(flowRenderKey);
   const from = node;
@@ -1567,7 +1598,7 @@ import React12 from "react";
 import {
   FlowDragService as FlowDragService4
 } from "@flowgram.ai/document";
-import { useService as useService3 } from "@flowgram.ai/core";
+import { useService as useService4 } from "@flowgram.ai/core";
 var getFlowRenderKey2 = (node, { dragService, side }) => {
   if (dragService.isDragBranch && side && dragService.labelSide === side && dragService.isDroppableBranch(node, side)) {
     if (dragService.dropNodeId === node.id) {
@@ -1580,7 +1611,7 @@ var getFlowRenderKey2 = (node, { dragService, side }) => {
 function BranchDraggableRenderer(props) {
   const { data, rendererRegistry, side, ...restProps } = props;
   const node = data.entity;
-  const dragService = useService3(FlowDragService4);
+  const dragService = useService4(FlowDragService4);
   const flowRenderKey = getFlowRenderKey2(node, { side, dragService });
   if (!flowRenderKey) {
     return null;
@@ -1632,16 +1663,48 @@ function createLabels(labelProps) {
     let child = null;
     switch (type) {
       case FlowTransitionLabelEnum2.BRANCH_DRAGGING_LABEL:
-        child = /* @__PURE__ */ React13.createElement(BranchDraggableRenderer, { rendererRegistry, data, ...props });
+        child = /* @__PURE__ */ React13.createElement(
+          BranchDraggableRenderer,
+          {
+            labelId: label.labelId || labelProps.data.entity.id,
+            rendererRegistry,
+            data,
+            ...props
+          }
+        );
         break;
       case FlowTransitionLabelEnum2.ADDER_LABEL:
-        child = /* @__PURE__ */ React13.createElement(Adder, { rendererRegistry, data, ...props });
+        child = /* @__PURE__ */ React13.createElement(
+          Adder,
+          {
+            labelId: label.labelId || labelProps.data.entity.id,
+            rendererRegistry,
+            data,
+            ...props
+          }
+        );
         break;
       case FlowTransitionLabelEnum2.COLLAPSE_LABEL:
-        child = /* @__PURE__ */ React13.createElement(Collapse, { rendererRegistry, data, ...props });
+        child = /* @__PURE__ */ React13.createElement(
+          Collapse,
+          {
+            labelId: label.labelId || labelProps.data.entity.id,
+            rendererRegistry,
+            data,
+            ...props
+          }
+        );
         break;
       case FlowTransitionLabelEnum2.COLLAPSE_ADDER_LABEL:
-        child = /* @__PURE__ */ React13.createElement(CollapseAdder, { rendererRegistry, data, ...props });
+        child = /* @__PURE__ */ React13.createElement(
+          CollapseAdder,
+          {
+            labelId: label.labelId || labelProps.data.entity.id,
+            rendererRegistry,
+            data,
+            ...props
+          }
+        );
         break;
       case FlowTransitionLabelEnum2.TEXT_LABEL:
         if (!renderKey) {
@@ -1651,6 +1714,7 @@ function createLabels(labelProps) {
         child = /* @__PURE__ */ React13.createElement(
           "div",
           {
+            "data-label-id": label.labelId || labelProps.data.entity.id,
             style: {
               ...TEXT_LABEL_STYLE,
               ...props?.style,
@@ -1671,6 +1735,7 @@ function createLabels(labelProps) {
             renderer.renderer,
             {
               node: data.entity,
+              labelId: label.labelId || labelProps.data.entity.id,
               ...props
             }
           );
@@ -1686,6 +1751,7 @@ function createLabels(labelProps) {
       "div",
       {
         key: `${data.entity.id}${index}`,
+        "data-label-id": label.labelId || labelProps.data.entity.id,
         style: {
           position: "absolute",
           left: offsetX,