@flowgram.ai/renderer 0.1.26 → 0.1.27

package/dist/index.js

@@ -1069,34 +1069,48 @@ var import_lodash4 = require("lodash");
 var import_inversify5 = require("inversify");
 var import_utils12 = require("@flowgram.ai/utils");
 var import_document9 = require("@flowgram.ai/document");
-var import_core8 = require("@flowgram.ai/core");
+var import_core9 = require("@flowgram.ai/core");
 
-// src/components/MarkerArrow.tsx
+// src/components/LinesRenderer.tsx
+var import_react7 = __toESM(require("react"));
+var import_utils11 = require("@flowgram.ai/utils");
+var import_document7 = require("@flowgram.ai/document");
+var import_document8 = require("@flowgram.ai/document");
+
+// src/components/StraightLine.tsx
 var import_react2 = __toESM(require("react"));
-var MARK_ARROW_ID = "line-marker-arrow";
-var MARK_ARROW_URL = `url(#${MARK_ARROW_ID})`;
-function MarkerArrow() {
-  const { baseColor } = useBaseColor();
-  return /* @__PURE__ */ import_react2.default.createElement("marker", { id: MARK_ARROW_ID, markerWidth: "11", markerHeight: "14", refX: "10", refY: "7", orient: "auto" }, /* @__PURE__ */ import_react2.default.createElement(
+function StraightLine(props) {
+  const { from, to, activated, style } = props;
+  const { baseColor, baseActivatedColor } = useBaseColor();
+  return /* @__PURE__ */ import_react2.default.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
+var import_react5 = __toESM(require("react"));
+var import_lodash3 = require("lodash");
+var import_utils9 = require("@flowgram.ai/utils");
+var import_core8 = require("@flowgram.ai/core");
+
+// src/components/MarkerArrow.tsx
 var import_react3 = __toESM(require("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__ */ import_react3.default.createElement(
     "marker",
     {
-      id: MARK_ACTIVATED_ARROW_ID,
+      "data-line-id": props.id,
+      id: props.id || MARK_ARROW_ID,
       markerWidth: "11",
       markerHeight: "14",
       refX: "10",
@@ -1107,40 +1121,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
-var import_react7 = __toESM(require("react"));
-var import_utils11 = require("@flowgram.ai/utils");
-var import_document7 = require("@flowgram.ai/document");
-var import_document8 = require("@flowgram.ai/document");
+var MarkerArrow_default = MarkerArrow;
 
-// src/components/StraightLine.tsx
+// src/components/MarkerActivatedArrow.tsx
 var import_react4 = __toESM(require("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__ */ import_react4.default.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__ */ import_react4.default.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
-var import_react5 = __toESM(require("react"));
-var import_lodash3 = require("lodash");
-var import_utils9 = require("@flowgram.ai/utils");
+function MarkerDefs(props) {
+  const renderRegistry = (0, import_core8.useService)(FlowRendererRegistry);
+  const ArrowRenderer = renderRegistry?.tryToGetRendererComponent(
+    props.activated ? "marker-active-arrow" /* MARKER_ACTIVATE_ARROW */ : "marker-arrow" /* MARKER_ARROW */
+  );
+  if (ArrowRenderer) {
+    return /* @__PURE__ */ import_react5.default.createElement(ArrowRenderer.renderer, { ...props });
+  }
+  if (props.activated) {
+    return /* @__PURE__ */ import_react5.default.createElement("defs", null, /* @__PURE__ */ import_react5.default.createElement(MarkerActivatedArrow_default, { id: props.id }));
+  }
+  return /* @__PURE__ */ import_react5.default.createElement("defs", null, /* @__PURE__ */ import_react5.default.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 || {};
@@ -1190,18 +1218,20 @@ function RoundedTurningLine(props) {
     return null;
   }
   const pathStr = `M ${from.x} ${from.y} ${middleStr} L ${to.x} ${to.y}`;
-  return /* @__PURE__ */ import_react5.default.createElement(
+  const markerId = activated ? `${MARK_ACTIVATED_ARROW_ID}${props.lineId}` : `${MARK_ARROW_ID}${props.lineId}`;
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, arrow ? /* @__PURE__ */ import_react5.default.createElement(MarkerDefs, { id: markerId, activated }) : null, /* @__PURE__ */ import_react5.default.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;
 
@@ -1217,7 +1247,7 @@ function CustomLine(props) {
     return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null);
   }
   const Component = renderer.renderer;
-  return /* @__PURE__ */ import_react6.default.createElement(Component, { ...line });
+  return /* @__PURE__ */ import_react6.default.createElement(Component, { lineId: props.lineId, ...line });
 }
 var CustomLine_default = CustomLine;
 
@@ -1235,7 +1265,15 @@ function createLines(props) {
     const draggingLineActivated = line.type === import_document7.FlowTransitionLineEnum.DRAGGING_LINE && data.entity?.id === dragService.dropNodeId && line.side === dragService.labelSide;
     switch (line.type) {
       case import_document7.FlowTransitionLineEnum.STRAIGHT_LINE:
-        return /* @__PURE__ */ import_react7.default.createElement(StraightLine_default, { key: `${data.entity.id}${index}`, activated: lineActivated, ...line });
+        return /* @__PURE__ */ import_react7.default.createElement(
+          StraightLine_default,
+          {
+            key: `${data.entity.id}_${index}`,
+            lineId: data.entity.id,
+            activated: lineActivated,
+            ...line
+          }
+        );
       case import_document7.FlowTransitionLineEnum.DIVERGE_LINE:
       case import_document7.FlowTransitionLineEnum.DRAGGING_LINE:
       case import_document7.FlowTransitionLineEnum.MERGE_LINE:
@@ -1243,7 +1281,8 @@ function createLines(props) {
         return /* @__PURE__ */ import_react7.default.createElement(
           RoundedTurningLine_default,
           {
-            key: `${data.entity.id}${index}`,
+            key: `${data.entity.id}_${index}`,
+            lineId: data.entity.id,
             isHorizontal: !isVertical,
             activated: lineActivated || draggingLineActivated,
             ...line,
@@ -1256,7 +1295,8 @@ function createLines(props) {
         return /* @__PURE__ */ import_react7.default.createElement(
           CustomLine_default,
           {
-            key: `${data.entity.id}${index}`,
+            key: `${data.entity.id}_${index}`,
+            lineId: data.entity.id,
             ...line,
             rendererRegistry
           }
@@ -1276,7 +1316,7 @@ function createLines(props) {
 }
 
 // src/layers/flow-lines-layer.tsx
-var FlowLinesLayer = class extends import_core8.Layer {
+var FlowLinesLayer = class extends import_core9.Layer {
   constructor() {
     super(...arguments);
     this.node = import_utils12.domUtils.createDivWithClass("gedit-flow-lines-layer");
@@ -1320,14 +1360,6 @@ var FlowLinesLayer = class extends import_core8.Layer {
       (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 ? import_react8.default.createElement(arrowRenderer.renderer) : null;
-    const activateArrow = activateArrowRenderer ? import_react8.default.createElement(activateArrowRenderer.renderer) : null;
     return /* @__PURE__ */ import_react8.default.createElement(
       "svg",
       {
@@ -1338,7 +1370,6 @@ var FlowLinesLayer = class extends import_core8.Layer {
         viewBox: this.viewBox,
         xmlns: "http://www.w3.org/2000/svg"
       },
-      /* @__PURE__ */ import_react8.default.createElement("defs", null, arrowRenderer ? arrow : /* @__PURE__ */ import_react8.default.createElement(MarkerArrow_default, null), activateArrow ? activateArrow : /* @__PURE__ */ import_react8.default.createElement(MarkerActivatedArrow_default, null)),
       resultLines
     );
   }
@@ -1353,13 +1384,13 @@ __decorateClass([
   (0, import_inversify5.inject)(FlowRendererRegistry)
 ], FlowLinesLayer.prototype, "rendererRegistry", 2);
 __decorateClass([
-  (0, import_core8.observeEntity)(import_document9.FlowDocumentTransformerEntity)
+  (0, import_core9.observeEntity)(import_document9.FlowDocumentTransformerEntity)
 ], FlowLinesLayer.prototype, "documentTransformer", 2);
 __decorateClass([
-  (0, import_core8.observeEntity)(import_document9.FlowRendererStateEntity)
+  (0, import_core9.observeEntity)(import_document9.FlowRendererStateEntity)
 ], FlowLinesLayer.prototype, "flowRenderState", 2);
 __decorateClass([
-  (0, import_core8.observeEntityDatas)(import_document9.FlowNodeEntity, import_document9.FlowNodeTransitionData)
+  (0, import_core9.observeEntityDatas)(import_document9.FlowNodeEntity, import_document9.FlowNodeTransitionData)
 ], FlowLinesLayer.prototype, "_transitions", 2);
 FlowLinesLayer = __decorateClass([
   (0, import_inversify5.injectable)()
@@ -1371,7 +1402,7 @@ var import_lodash5 = require("lodash");
 var import_inversify6 = require("inversify");
 var import_utils16 = require("@flowgram.ai/utils");
 var import_document15 = require("@flowgram.ai/document");
-var import_core11 = require("@flowgram.ai/core");
+var import_core12 = require("@flowgram.ai/core");
 
 // src/components/LabelsRenderer.tsx
 var import_react13 = __toESM(require("react"));
@@ -1440,7 +1471,7 @@ function Collapse(props) {
 // src/components/Adder.tsx
 var import_react10 = __toESM(require("react"));
 var import_document11 = require("@flowgram.ai/document");
-var import_core9 = require("@flowgram.ai/core");
+var import_core10 = require("@flowgram.ai/core");
 var getFlowRenderKey = (node, { dragService }) => {
   if (dragService && dragService.dragging && dragService.isDroppableNode(node)) {
     if (dragService.dropNodeId === node.id) {
@@ -1462,7 +1493,7 @@ function Adder(props) {
   const handleMouseEnter = (0, import_react10.useCallback)(() => setHoverActivated(true), []);
   const handleMouseLeave = (0, import_react10.useCallback)(() => setHoverActivated(false), []);
   const node = data.entity;
-  const dragService = (0, import_core9.useService)(import_document11.FlowDragService);
+  const dragService = (0, import_core10.useService)(import_document11.FlowDragService);
   const flowRenderKey = getFlowRenderKey(node, { dragService });
   const adder = rendererRegistry.getRendererComponent(flowRenderKey);
   const from = node;
@@ -1570,7 +1601,7 @@ function CollapseAdder(props) {
 // src/components/BranchDraggableRenderer.tsx
 var import_react12 = __toESM(require("react"));
 var import_document13 = require("@flowgram.ai/document");
-var import_core10 = require("@flowgram.ai/core");
+var import_core11 = require("@flowgram.ai/core");
 var getFlowRenderKey2 = (node, { dragService, side }) => {
   if (dragService.isDragBranch && side && dragService.labelSide === side && dragService.isDroppableBranch(node, side)) {
     if (dragService.dropNodeId === node.id) {
@@ -1583,7 +1614,7 @@ var getFlowRenderKey2 = (node, { dragService, side }) => {
 function BranchDraggableRenderer(props) {
   const { data, rendererRegistry, side, ...restProps } = props;
   const node = data.entity;
-  const dragService = (0, import_core10.useService)(import_document13.FlowDragService);
+  const dragService = (0, import_core11.useService)(import_document13.FlowDragService);
   const flowRenderKey = getFlowRenderKey2(node, { side, dragService });
   if (!flowRenderKey) {
     return null;
@@ -1635,16 +1666,48 @@ function createLabels(labelProps) {
     let child = null;
     switch (type) {
       case import_document14.FlowTransitionLabelEnum.BRANCH_DRAGGING_LABEL:
-        child = /* @__PURE__ */ import_react13.default.createElement(BranchDraggableRenderer, { rendererRegistry, data, ...props });
+        child = /* @__PURE__ */ import_react13.default.createElement(
+          BranchDraggableRenderer,
+          {
+            labelId: label.labelId || labelProps.data.entity.id,
+            rendererRegistry,
+            data,
+            ...props
+          }
+        );
         break;
       case import_document14.FlowTransitionLabelEnum.ADDER_LABEL:
-        child = /* @__PURE__ */ import_react13.default.createElement(Adder, { rendererRegistry, data, ...props });
+        child = /* @__PURE__ */ import_react13.default.createElement(
+          Adder,
+          {
+            labelId: label.labelId || labelProps.data.entity.id,
+            rendererRegistry,
+            data,
+            ...props
+          }
+        );
         break;
       case import_document14.FlowTransitionLabelEnum.COLLAPSE_LABEL:
-        child = /* @__PURE__ */ import_react13.default.createElement(Collapse, { rendererRegistry, data, ...props });
+        child = /* @__PURE__ */ import_react13.default.createElement(
+          Collapse,
+          {
+            labelId: label.labelId || labelProps.data.entity.id,
+            rendererRegistry,
+            data,
+            ...props
+          }
+        );
         break;
       case import_document14.FlowTransitionLabelEnum.COLLAPSE_ADDER_LABEL:
-        child = /* @__PURE__ */ import_react13.default.createElement(CollapseAdder, { rendererRegistry, data, ...props });
+        child = /* @__PURE__ */ import_react13.default.createElement(
+          CollapseAdder,
+          {
+            labelId: label.labelId || labelProps.data.entity.id,
+            rendererRegistry,
+            data,
+            ...props
+          }
+        );
         break;
       case import_document14.FlowTransitionLabelEnum.TEXT_LABEL:
         if (!renderKey) {
@@ -1654,6 +1717,7 @@ function createLabels(labelProps) {
         child = /* @__PURE__ */ import_react13.default.createElement(
           "div",
           {
+            "data-label-id": label.labelId || labelProps.data.entity.id,
             style: {
               ...TEXT_LABEL_STYLE,
               ...props?.style,
@@ -1674,6 +1738,7 @@ function createLabels(labelProps) {
             renderer.renderer,
             {
               node: data.entity,
+              labelId: label.labelId || labelProps.data.entity.id,
               ...props
             }
           );
@@ -1689,6 +1754,7 @@ function createLabels(labelProps) {
       "div",
       {
         key: `${data.entity.id}${index}`,
+        "data-label-id": label.labelId || labelProps.data.entity.id,
         style: {
           position: "absolute",
           left: offsetX,
@@ -1707,7 +1773,7 @@ function createLabels(labelProps) {
 }
 
 // src/layers/flow-labels-layer.tsx
-var FlowLabelsLayer = class extends import_core11.Layer {
+var FlowLabelsLayer = class extends import_core12.Layer {
   constructor() {
     super(...arguments);
     this.node = import_utils16.domUtils.createDivWithClass("gedit-flow-labels-layer");
@@ -1762,13 +1828,13 @@ __decorateClass([
   (0, import_inversify6.inject)(FlowRendererRegistry)
 ], FlowLabelsLayer.prototype, "rendererRegistry", 2);
 __decorateClass([
-  (0, import_core11.observeEntity)(import_document15.FlowDocumentTransformerEntity)
+  (0, import_core12.observeEntity)(import_document15.FlowDocumentTransformerEntity)
 ], FlowLabelsLayer.prototype, "documentTransformer", 2);
 __decorateClass([
-  (0, import_core11.observeEntity)(import_document15.FlowRendererStateEntity)
+  (0, import_core12.observeEntity)(import_document15.FlowRendererStateEntity)
 ], FlowLabelsLayer.prototype, "flowRenderState", 2);
 __decorateClass([
-  (0, import_core11.observeEntityDatas)(import_document15.FlowNodeEntity, import_document15.FlowNodeTransitionData)
+  (0, import_core12.observeEntityDatas)(import_document15.FlowNodeEntity, import_document15.FlowNodeTransitionData)
 ], FlowLabelsLayer.prototype, "_transitions", 2);
 FlowLabelsLayer = __decorateClass([
   (0, import_inversify6.injectable)()
@@ -1778,7 +1844,7 @@ FlowLabelsLayer = __decorateClass([
 var import_inversify7 = require("inversify");
 var import_utils18 = require("@flowgram.ai/utils");
 var import_document16 = require("@flowgram.ai/document");
-var import_core12 = require("@flowgram.ai/core");
+var import_core13 = require("@flowgram.ai/core");
 
 // src/utils/scroll-limit.ts
 var import_utils17 = require("@flowgram.ai/utils");
@@ -1824,7 +1890,7 @@ function randomColor(percent) {
   const random = () => Math.floor(Math.random() * max);
   return `rgb(${rgb === 0 ? random() : 0}, ${rgb === 1 ? random() : 0}, ${rgb === 2 ? random() : 0})`;
 }
-var FlowDebugLayer = class extends import_core12.Layer {
+var FlowDebugLayer = class extends import_core13.Layer {
   constructor() {
     super(...arguments);
     this.node = document.createElement("div");
@@ -1987,10 +2053,10 @@ __decorateClass([
   (0, import_inversify7.inject)(import_document16.FlowDocument)
 ], FlowDebugLayer.prototype, "document", 2);
 __decorateClass([
-  (0, import_core12.observeEntity)(import_document16.FlowDocumentTransformerEntity)
+  (0, import_core13.observeEntity)(import_document16.FlowDocumentTransformerEntity)
 ], FlowDebugLayer.prototype, "documentTransformer", 2);
 __decorateClass([
-  (0, import_core12.observeEntityDatas)(import_document16.FlowNodeEntity, import_document16.FlowNodeTransformData)
+  (0, import_core13.observeEntityDatas)(import_document16.FlowNodeEntity, import_document16.FlowNodeTransformData)
 ], FlowDebugLayer.prototype, "_transforms", 2);
 FlowDebugLayer = __decorateClass([
   (0, import_inversify7.injectable)()
@@ -1999,12 +2065,12 @@ FlowDebugLayer = __decorateClass([
 // src/layers/flow-scroll-bar-layer.tsx
 var import_inversify8 = require("inversify");
 var import_document17 = require("@flowgram.ai/document");
-var import_core13 = require("@flowgram.ai/core");
+var import_core14 = require("@flowgram.ai/core");
 var import_utils20 = require("@flowgram.ai/utils");
 var BORDER_WIDTH = 2;
 var BLOCK_OFFSET = 11;
 var SCROLL_BAR_WIDTH = "7px";
-var FlowScrollBarLayer = class extends import_core13.Layer {
+var FlowScrollBarLayer = class extends import_core14.Layer {
   constructor() {
     super(...arguments);
     // @observeEntity(FlowDocumentTransformerEntity) readonly documentTransformer: FlowDocumentTransformerEntity
@@ -2024,7 +2090,7 @@ var FlowScrollBarLayer = class extends import_core13.Layer {
     this.initialScrollX = 0;
     // 初始 y 轴滚动距离
     this.initialScrollY = 0;
-    this.bottomGrabDragger = new import_core13.PlaygroundDrag({
+    this.bottomGrabDragger = new import_core14.PlaygroundDrag({
       onDragStart: (e) => {
         this.config.updateCursor("grabbing");
         this.sum = 0;
@@ -2044,7 +2110,7 @@ var FlowScrollBarLayer = class extends import_core13.Layer {
         this.config.updateCursor("default");
       }
     });
-    this.rightGrabDragger = new import_core13.PlaygroundDrag({
+    this.rightGrabDragger = new import_core14.PlaygroundDrag({
       onDragStart: (e) => {
         this.config.updateCursor("grabbing");
         this.sum = 0;
@@ -2239,7 +2305,7 @@ __decorateClass([
   (0, import_inversify8.optional)()
 ], FlowScrollBarLayer.prototype, "flowDocument", 2);
 __decorateClass([
-  (0, import_core13.observeEntity)(import_core13.PlaygroundConfigEntity)
+  (0, import_core14.observeEntity)(import_core14.PlaygroundConfigEntity)
 ], FlowScrollBarLayer.prototype, "playgroundConfigEntity", 2);
 FlowScrollBarLayer = __decorateClass([
   (0, import_inversify8.injectable)()
@@ -2250,12 +2316,12 @@ var import_react15 = __toESM(require("react"));
 var import_inversify9 = require("inversify");
 var import_utils22 = require("@flowgram.ai/utils");
 var import_document18 = require("@flowgram.ai/document");
-var import_core14 = require("@flowgram.ai/core");
 var import_core15 = require("@flowgram.ai/core");
+var import_core16 = require("@flowgram.ai/core");
 var DRAG_OFFSET = 10;
 var DEFAULT_DRAG_OFFSET_X = 8;
 var DEFAULT_DRAG_OFFSET_Y = 8;
-var FlowDragLayer = class extends import_core14.Layer {
+var FlowDragLayer = class extends import_core15.Layer {
   constructor() {
     super(...arguments);
     this.dragOffset = {
@@ -2264,7 +2330,7 @@ var FlowDragLayer = class extends import_core14.Layer {
     };
     this.containerRef = import_react15.default.createRef();
     this.draggingNodeMask = document.createElement("div");
-    this._dragger = new import_core15.PlaygroundDrag({
+    this._dragger = new import_core16.PlaygroundDrag({
       onDrag: (e) => {
         this.handleMouseMove(e);
       },
@@ -2295,7 +2361,7 @@ var FlowDragLayer = class extends import_core14.Layer {
   }
   isGrab() {
     const currentState = this.editorStateConfig.getCurrentState();
-    return currentState === import_core14.EditorState.STATE_GRAB;
+    return currentState === import_core15.EditorState.STATE_GRAB;
   }
   setDraggingStatus(status) {
     if (this.service.nodeDragIdsWithChildren.length) {
@@ -2446,22 +2512,22 @@ __decorateClass([
   (0, import_inversify9.inject)(import_document18.FlowDragService)
 ], FlowDragLayer.prototype, "service", 2);
 __decorateClass([
-  (0, import_core14.observeEntityDatas)(import_document18.FlowNodeEntity, import_document18.FlowNodeTransformData)
+  (0, import_core15.observeEntityDatas)(import_document18.FlowNodeEntity, import_document18.FlowNodeTransformData)
 ], FlowDragLayer.prototype, "transforms", 2);
 __decorateClass([
-  (0, import_core14.observeEntity)(import_core14.EditorStateConfigEntity)
+  (0, import_core15.observeEntity)(import_core15.EditorStateConfigEntity)
 ], FlowDragLayer.prototype, "editorStateConfig", 2);
 __decorateClass([
-  (0, import_core14.observeEntity)(import_core14.PlaygroundConfigEntity)
+  (0, import_core15.observeEntity)(import_core15.PlaygroundConfigEntity)
 ], FlowDragLayer.prototype, "playgroundConfigEntity", 2);
 __decorateClass([
-  (0, import_core14.observeEntity)(FlowDragEntity)
+  (0, import_core15.observeEntity)(FlowDragEntity)
 ], FlowDragLayer.prototype, "flowDragConfigEntity", 2);
 __decorateClass([
-  (0, import_core14.observeEntity)(import_document18.FlowRendererStateEntity)
+  (0, import_core15.observeEntity)(import_document18.FlowRendererStateEntity)
 ], FlowDragLayer.prototype, "flowRenderStateEntity", 2);
 __decorateClass([
-  (0, import_core14.observeEntity)(FlowSelectConfigEntity)
+  (0, import_core15.observeEntity)(FlowSelectConfigEntity)
 ], FlowDragLayer.prototype, "selectConfigEntity", 2);
 __decorateClass([
   (0, import_inversify9.inject)(FlowRendererRegistry)
@@ -2474,8 +2540,8 @@ FlowDragLayer = __decorateClass([
 var import_inversify10 = require("inversify");
 var import_utils23 = require("@flowgram.ai/utils");
 var import_document19 = require("@flowgram.ai/document");
-var import_core16 = require("@flowgram.ai/core");
-var FlowSelectorBoxLayer = class extends import_core16.Layer {
+var import_core17 = require("@flowgram.ai/core");
+var FlowSelectorBoxLayer = class extends import_core17.Layer {
   constructor() {
     super(...arguments);
     this.node = import_utils23.domUtils.createDivWithClass("gedit-selector-box-layer");
@@ -2490,7 +2556,7 @@ var FlowSelectorBoxLayer = class extends import_core16.Layer {
     /**
      * 拖动选择框
      */
-    this.selectboxDragger = new import_core16.PlaygroundDrag({
+    this.selectboxDragger = new import_core17.PlaygroundDrag({
       onDragStart: (e) => {
         this.selectConfigEntity.clearSelectedNodes();
         const mousePos = this.playgroundConfigEntity.getPosFromMouseEvent(e);
@@ -2545,20 +2611,20 @@ var FlowSelectorBoxLayer = class extends import_core16.Layer {
           return;
         }
         const currentState = this.editorStateConfig.getCurrentState();
-        if (currentState === import_core16.EditorState.STATE_MOUSE_FRIENDLY_SELECT) {
+        if (currentState === import_core17.EditorState.STATE_MOUSE_FRIENDLY_SELECT) {
           this.selectConfigEntity.clearSelectedNodes();
         }
         this.selectboxDragger.start(e.clientX, e.clientY, this.config);
         return true;
       },
-      import_core16.PipelineLayerPriority.BASE_LAYER
+      import_core17.PipelineLayerPriority.BASE_LAYER
     );
   }
   isEnabled() {
     const currentState = this.editorStateConfig.getCurrentState();
-    const isMouseFriendly = currentState === import_core16.EditorState.STATE_MOUSE_FRIENDLY_SELECT;
+    const isMouseFriendly = currentState === import_core17.EditorState.STATE_MOUSE_FRIENDLY_SELECT;
     return !this.config.disabled && !this.config.readonly && // 鼠标友好模式下，需要按下 shift 启动框选
-    (isMouseFriendly && this.editorStateConfig.isPressingShift || currentState === import_core16.EditorState.STATE_SELECT) && !this.selectorBoxConfigEntity.disabled;
+    (isMouseFriendly && this.editorStateConfig.isPressingShift || currentState === import_core17.EditorState.STATE_SELECT) && !this.selectorBoxConfigEntity.disabled;
   }
   /**
    * Destroy
@@ -2614,22 +2680,22 @@ __decorateClass([
   (0, import_inversify10.inject)(import_document19.FlowDocument)
 ], FlowSelectorBoxLayer.prototype, "flowDocument", 2);
 __decorateClass([
-  (0, import_inversify10.inject)(import_core16.ContextMenuService)
+  (0, import_inversify10.inject)(import_core17.ContextMenuService)
 ], FlowSelectorBoxLayer.prototype, "contextMenuService", 2);
 __decorateClass([
-  (0, import_core16.observeEntity)(import_core16.PlaygroundConfigEntity)
+  (0, import_core17.observeEntity)(import_core17.PlaygroundConfigEntity)
 ], FlowSelectorBoxLayer.prototype, "playgroundConfigEntity", 2);
 __decorateClass([
-  (0, import_inversify10.inject)(import_core16.SelectionService)
+  (0, import_inversify10.inject)(import_core17.SelectionService)
 ], FlowSelectorBoxLayer.prototype, "selectionService", 2);
 __decorateClass([
-  (0, import_core16.observeEntity)(SelectorBoxConfigEntity)
+  (0, import_core17.observeEntity)(SelectorBoxConfigEntity)
 ], FlowSelectorBoxLayer.prototype, "selectorBoxConfigEntity", 2);
 __decorateClass([
-  (0, import_core16.observeEntity)(FlowSelectConfigEntity)
+  (0, import_core17.observeEntity)(FlowSelectConfigEntity)
 ], FlowSelectorBoxLayer.prototype, "selectConfigEntity", 2);
 __decorateClass([
-  (0, import_core16.observeEntity)(import_core16.EditorStateConfigEntity)
+  (0, import_core17.observeEntity)(import_core17.EditorStateConfigEntity)
 ], FlowSelectorBoxLayer.prototype, "editorStateConfig", 2);
 FlowSelectorBoxLayer = __decorateClass([
   (0, import_inversify10.injectable)()
@@ -2640,8 +2706,8 @@ var import_react16 = __toESM(require("react"));
 var import_inversify11 = require("inversify");
 var import_utils24 = require("@flowgram.ai/utils");
 var import_document20 = require("@flowgram.ai/document");
-var import_core17 = require("@flowgram.ai/core");
-var FlowSelectorBoundsLayer = class extends import_core17.Layer {
+var import_core18 = require("@flowgram.ai/core");
+var FlowSelectorBoundsLayer = class extends import_core18.Layer {
   constructor() {
     super(...arguments);
     this.node = import_utils24.domUtils.createDivWithClass("gedit-selector-bounds-layer");
@@ -2669,7 +2735,7 @@ var FlowSelectorBoundsLayer = class extends import_core17.Layer {
   }
   isEnabled() {
     const currentState = this.editorStateConfig.getCurrentState();
-    return currentState === import_core17.EditorState.STATE_SELECT;
+    return currentState === import_core18.EditorState.STATE_SELECT;
   }
   // /**
   //  * 渲染工具栏
@@ -2758,22 +2824,22 @@ __decorateClass([
   (0, import_inversify11.inject)(FlowRendererRegistry)
 ], FlowSelectorBoundsLayer.prototype, "rendererRegistry", 2);
 __decorateClass([
-  (0, import_inversify11.inject)(import_core17.CommandRegistry)
+  (0, import_inversify11.inject)(import_core18.CommandRegistry)
 ], FlowSelectorBoundsLayer.prototype, "commandRegistry", 2);
 __decorateClass([
-  (0, import_core17.observeEntity)(FlowSelectConfigEntity)
+  (0, import_core18.observeEntity)(FlowSelectConfigEntity)
 ], FlowSelectorBoundsLayer.prototype, "flowSelectConfigEntity", 2);
 __decorateClass([
-  (0, import_core17.observeEntity)(import_core17.EditorStateConfigEntity)
+  (0, import_core18.observeEntity)(import_core18.EditorStateConfigEntity)
 ], FlowSelectorBoundsLayer.prototype, "editorStateConfig", 2);
 __decorateClass([
-  (0, import_core17.observeEntity)(SelectorBoxConfigEntity)
+  (0, import_core18.observeEntity)(SelectorBoxConfigEntity)
 ], FlowSelectorBoundsLayer.prototype, "selectorBoxConfigEntity", 2);
 __decorateClass([
-  (0, import_core17.observeEntityDatas)(import_document20.FlowNodeEntity, import_document20.FlowNodeRenderData)
+  (0, import_core18.observeEntityDatas)(import_document20.FlowNodeEntity, import_document20.FlowNodeRenderData)
 ], FlowSelectorBoundsLayer.prototype, "renderStates", 2);
 __decorateClass([
-  (0, import_core17.observeEntityDatas)(import_document20.FlowNodeEntity, import_document20.FlowNodeTransformData)
+  (0, import_core18.observeEntityDatas)(import_document20.FlowNodeEntity, import_document20.FlowNodeTransformData)
 ], FlowSelectorBoundsLayer.prototype, "_transforms", 2);
 FlowSelectorBoundsLayer = __decorateClass([
   (0, import_inversify11.injectable)()
@@ -2782,9 +2848,9 @@ FlowSelectorBoundsLayer = __decorateClass([
 // src/layers/flow-context-menu-layer.tsx
 var import_react17 = __toESM(require("react"));
 var import_inversify12 = require("inversify");
-var import_core18 = require("@flowgram.ai/core");
+var import_core19 = require("@flowgram.ai/core");
 var import_utils25 = require("@flowgram.ai/utils");
-var FlowContextMenuLayer = class extends import_core18.Layer {
+var FlowContextMenuLayer = class extends import_core19.Layer {
   constructor() {
     super(...arguments);
     this.node = import_utils25.domUtils.createDivWithClass("gedit-context-menu-layer");
@@ -2792,7 +2858,7 @@ var FlowContextMenuLayer = class extends import_core18.Layer {
   }
   isEnabled() {
     const currentState = this.editorStateConfig.getCurrentState();
-    return !this.config.disabled && !this.config.readonly && currentState === import_core18.EditorState.STATE_SELECT && !this.selectorBoxConfigEntity.disabled;
+    return !this.config.disabled && !this.config.readonly && currentState === import_core19.EditorState.STATE_SELECT && !this.selectorBoxConfigEntity.disabled;
   }
   onReady() {
     this.node.style.zIndex = "30";
@@ -2815,7 +2881,7 @@ var FlowContextMenuLayer = class extends import_core18.Layer {
           this.node.style.left = `${dragBlockX}px`;
           this.node.style.top = `${dragBlockY}px`;
         },
-        import_core18.PipelineLayerPriority.BASE_LAYER
+        import_core19.PipelineLayerPriority.BASE_LAYER
       ),
       this.listenPlaygroundEvent("mousedown", () => {
         this.nodeRef.current?.setVisible(false);
@@ -2863,28 +2929,28 @@ var FlowContextMenuLayer = class extends import_core18.Layer {
   }
 };
 __decorateClass([
-  (0, import_inversify12.inject)(import_core18.CommandRegistry)
+  (0, import_inversify12.inject)(import_core19.CommandRegistry)
 ], FlowContextMenuLayer.prototype, "commandRegistry", 2);
 __decorateClass([
   (0, import_inversify12.inject)(FlowRendererRegistry)
 ], FlowContextMenuLayer.prototype, "rendererRegistry", 2);
 __decorateClass([
-  (0, import_inversify12.inject)(import_core18.ContextMenuService)
+  (0, import_inversify12.inject)(import_core19.ContextMenuService)
 ], FlowContextMenuLayer.prototype, "contextMenuService", 2);
 __decorateClass([
-  (0, import_core18.observeEntity)(FlowSelectConfigEntity)
+  (0, import_core19.observeEntity)(FlowSelectConfigEntity)
 ], FlowContextMenuLayer.prototype, "flowSelectConfigEntity", 2);
 __decorateClass([
-  (0, import_inversify12.inject)(import_core18.SelectionService)
+  (0, import_inversify12.inject)(import_core19.SelectionService)
 ], FlowContextMenuLayer.prototype, "selectionService", 2);
 __decorateClass([
-  (0, import_core18.observeEntity)(import_core18.PlaygroundConfigEntity)
+  (0, import_core19.observeEntity)(import_core19.PlaygroundConfigEntity)
 ], FlowContextMenuLayer.prototype, "playgroundConfigEntity", 2);
 __decorateClass([
-  (0, import_core18.observeEntity)(import_core18.EditorStateConfigEntity)
+  (0, import_core19.observeEntity)(import_core19.EditorStateConfigEntity)
 ], FlowContextMenuLayer.prototype, "editorStateConfig", 2);
 __decorateClass([
-  (0, import_core18.observeEntity)(SelectorBoxConfigEntity)
+  (0, import_core19.observeEntity)(SelectorBoxConfigEntity)
 ], FlowContextMenuLayer.prototype, "selectorBoxConfigEntity", 2);
 FlowContextMenuLayer = __decorateClass([
   (0, import_inversify12.injectable)()
@@ -2893,8 +2959,8 @@ FlowContextMenuLayer = __decorateClass([
 // src/layers/flow-scroll-limit-layer.tsx
 var import_inversify13 = require("inversify");
 var import_document21 = require("@flowgram.ai/document");
-var import_core19 = require("@flowgram.ai/core");
-var FlowScrollLimitLayer = class extends import_core19.Layer {
+var import_core20 = require("@flowgram.ai/core");
+var FlowScrollLimitLayer = class extends import_core20.Layer {
   getInitScroll() {
     return this.document.layout.getInitScroll(this.pipelineNode.getBoundingClientRect());
   }