@flowgram.ai/renderer 0.1.0-alpha.3 → 0.1.0-alpha.31

package/dist/esm/index.js

@@ -10,12 +10,12 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/entities/flow-drag-entity.tsx
+import { Rectangle } from "@flowgram.ai/utils";
 import {
   FlowTransitionLabelEnum,
   LABEL_SIDE_TYPE
 } from "@flowgram.ai/document";
 import { ConfigEntity, PlaygroundConfigEntity } from "@flowgram.ai/core";
-import { Rectangle } from "@flowgram.ai/utils";
 
 // src/components/utils.tsx
 import {
@@ -45,7 +45,7 @@ var DEFAULT_LINE_ATTRS = {
   strokeLinecap: "round",
   strokeLinejoin: "round"
 };
-var DEFAULT_RADIUS = 16;
+var DEFAULT_RADIUS = DEFAULT_SPACING[DefaultSpacingKey.ROUNDED_LINE_RADIUS];
 var DEFAULT_LABEL_ACTIVATE_HEIGHT = 32;
 function getHorizontalVertices(line, xRadius = 16, yRadius = 20) {
   const { from, to, type } = line || {};
@@ -339,7 +339,6 @@ var FlowDragEntity = class extends ConfigEntity {
         } else {
           this.containerX -= SCROLL_DELTA;
         }
-        this.setDomStyle();
       }
     }, SCROLL_INTERVAL);
     this._scrollXInterval = { interval, origin };
@@ -368,7 +367,6 @@ var FlowDragEntity = class extends ConfigEntity {
         } else {
           this.containerY -= SCROLL_DELTA;
         }
-        this.setDomStyle();
       }
     }, SCROLL_INTERVAL);
     this._scrollYInterval = { interval, origin };
@@ -383,34 +381,30 @@ var FlowDragEntity = class extends ConfigEntity {
     this._stopScrollX();
     this._stopScrollY();
   }
-  setDomStyle() {
-    this.containerDom.style.left = `${this.containerX}px`;
-    this.containerDom.style.top = `${this.containerY}px`;
-  }
-  scrollDirection(e, containerDom, x, y) {
+  scrollDirection(e, x, y) {
     const playgroundConfig = this.playgroundConfigEntity.config;
     const currentScrollX = playgroundConfig.scrollX;
     const currentScrollY = playgroundConfig.scrollY;
-    this.containerDom = containerDom;
     this.containerX = x;
     this.containerY = y;
-    const mouseToBottom = playgroundConfig.height + playgroundConfig.clientY - e.clientY;
+    const clientRect = this.playgroundConfigEntity.playgroundDomNode.getBoundingClientRect();
+    const mouseToBottom = playgroundConfig.height + clientRect.y - e.clientY;
     if (mouseToBottom < SCROLL_BOUNDING) {
       this._startScrollY(currentScrollY, true);
       return 1 /* BOTTOM */;
     }
-    const mouseToTop = e.clientY - playgroundConfig.clientY;
+    const mouseToTop = e.clientY - clientRect.y;
     if (mouseToTop < SCROLL_BOUNDING) {
       this._startScrollY(currentScrollY, false);
       return 0 /* TOP */;
     }
     this._stopScrollY();
-    const mouseToRight = playgroundConfig.width + playgroundConfig.clientX - e.clientX;
+    const mouseToRight = playgroundConfig.width + clientRect.x - e.clientX;
     if (mouseToRight < SCROLL_BOUNDING) {
       this._startScrollX(currentScrollX, true);
       return 3 /* RIGHT */;
     }
-    const mouseToLeft = e.clientX - playgroundConfig.clientX;
+    const mouseToLeft = e.clientX - clientRect.x;
     if (mouseToLeft < SCROLL_BOUNDING + EDITOR_LEFT_BAR_WIDTH) {
       this._startScrollX(currentScrollX, false);
       return 2 /* LEFT */;
@@ -433,7 +427,7 @@ import { ConfigEntity as ConfigEntity2 } from "@flowgram.ai/core";
 import { Compare, Rectangle as Rectangle2 } from "@flowgram.ai/utils";
 
 // src/utils/find-selected-nodes.ts
-import { uniq } from "lodash";
+import { uniq } from "lodash-es";
 function getNodePath(node) {
   const path = [node];
   node = node.parent;
@@ -626,10 +620,16 @@ import { injectable } from "inversify";
 import { Disposable } from "@flowgram.ai/utils";
 
 // src/utils/element.ts
-import { isNil } from "lodash";
+import { isNil } from "lodash-es";
 var isHidden = (dom) => {
+  if (!dom || isNil(dom?.offsetParent)) {
+    return true;
+  }
   const style = window.getComputedStyle(dom);
-  return isNil(dom?.offsetParent) || style?.display === "none";
+  if (style?.display === "none") {
+    return true;
+  }
+  return false;
 };
 var isRectInit = (rect) => {
   if (!rect) {
@@ -698,7 +698,9 @@ var FlowNodesTransformLayer = class extends Layer {
         const append = () => {
           if (resizeDispose) return;
           this.renderElement.appendChild(node);
-          resizeDispose = this.resizeObserver.observe(node, transform);
+          if (!entity.getNodeMeta().autoResizeDisable) {
+            resizeDispose = this.resizeObserver.observe(node, transform);
+          }
         };
         const dispose = () => {
           if (!resizeDispose) return;
@@ -713,7 +715,9 @@ var FlowNodesTransformLayer = class extends Layer {
           dispose,
           updateBounds: () => {
             const { bounds } = transform;
-            if (node.style.left !== `${bounds.x}px` || node.style.top !== `${bounds.y}px`) {
+            const rawX = parseFloat(node.style.left);
+            const rawY = parseFloat(node.style.top);
+            if (!this.isCoordEqual(rawX, bounds.x) || !this.isCoordEqual(rawY, bounds.y)) {
               node.style.left = `${bounds.x}px`;
               node.style.top = `${bounds.y}px`;
             }
@@ -736,6 +740,10 @@ var FlowNodesTransformLayer = class extends Layer {
     this.renderCache.dispose();
     super.dispose();
   }
+  isCoordEqual(a, b) {
+    const browserCoordEpsilon = 0.05;
+    return Math.abs(a - b) < browserCoordEpsilon;
+  }
   onReady() {
     this.node.style.zIndex = "10";
   }
@@ -828,6 +836,10 @@ var FlowRendererKey = /* @__PURE__ */ ((FlowRendererKey2) => {
   FlowRendererKey2["SELECTOR_BOX_POPOVER"] = "selector-box-popover";
   FlowRendererKey2["CONTEXT_MENU_POPOVER"] = "context-menu-popover";
   FlowRendererKey2["SUB_CANVAS"] = "sub-canvas";
+  FlowRendererKey2["SLOT_ADDER"] = "slot-adder";
+  FlowRendererKey2["SLOT_LABEL"] = "slot-label";
+  FlowRendererKey2["SLOT_COLLAPSE"] = "slot-collapse";
+  FlowRendererKey2["ARROW_RENDERER"] = "arrow-renderer";
   FlowRendererKey2["MARKER_ARROW"] = "marker-arrow";
   FlowRendererKey2["MARKER_ACTIVATE_ARROW"] = "marker-active-arrow";
   return FlowRendererKey2;
@@ -875,7 +887,7 @@ var FlowRendererRegistry = class {
     });
   }
   getText(textKey) {
-    return I18n.t(textKey, { disableReturnKey: true }) || this.textMap.get(textKey);
+    return I18n.t(textKey, { defaultValue: "" }) || this.textMap.get(textKey);
   }
   /**
    * TODO: support memo
@@ -929,7 +941,7 @@ var FlowNodesContentLayer = class extends Layer2 {
         const PortalRenderer = this.getPortalRenderer(data);
         function Portal() {
           React.useEffect(() => {
-            if (node.clientWidth && node.clientHeight) {
+            if (!entity.getNodeMeta().autoResizeDisable && node.clientWidth && node.clientHeight) {
               const transform = entity.getData(FlowNodeTransformData4);
               if (transform)
                 transform.size = {
@@ -937,7 +949,7 @@ var FlowNodesContentLayer = class extends Layer2 {
                   height: node.clientHeight
                 };
             }
-          }, []);
+          }, [entity, node]);
           return ReactDOM.createPortal(
             /* @__PURE__ */ React.createElement(PlaygroundEntityContext.Provider, { value: entity }, /* @__PURE__ */ React.createElement(
               PortalRenderer,
@@ -1024,7 +1036,7 @@ FlowNodesContentLayer = __decorateClass([
 
 // src/layers/flow-lines-layer.tsx
 import React8 from "react";
-import { groupBy, throttle } from "lodash";
+import { groupBy, throttle } from "lodash-es";
 import { inject as inject4, injectable as injectable5 } from "inversify";
 import { domUtils as domUtils3 } from "@flowgram.ai/utils";
 import {
@@ -1037,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-es";
+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",
@@ -1073,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 || {};
@@ -1149,6 +1189,10 @@ function RoundedTurningLine(props) {
         const moveY = isNil2(point.moveY) ? ry : point.moveY;
         outPoint.y += to.y < point.y ? -moveY : +moveY;
       }
+      if (point.radiusOverflow === "truncate") {
+        rx = radiusX;
+        ry = radiusY;
+      }
       const crossProduct = (point.x - inPoint.x) * (outPoint.y - inPoint.y) - (point.y - inPoint.y) * (outPoint.x - inPoint.x);
       const isClockWise = crossProduct > 0;
       return `L ${inPoint.x} ${inPoint.y} A ${rx} ${ry} 0 0 ${isClockWise ? 1 : 0} ${outPoint.x} ${outPoint.y}`;
@@ -1159,18 +1203,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;
 
@@ -1186,7 +1232,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;
 
@@ -1194,17 +1240,26 @@ var CustomLine_default = CustomLine;
 function createLines(props) {
   const { data, rendererRegistry, linesSave, dragService } = props;
   const { lines, entity } = data || {};
+  const radius = getDefaultSpacing(entity, DefaultSpacingKey2.ROUNDED_LINE_RADIUS);
   const xRadius = getDefaultSpacing(entity, DefaultSpacingKey2.ROUNDED_LINE_X_RADIUS);
   const yRadius = getDefaultSpacing(entity, DefaultSpacingKey2.ROUNDED_LINE_Y_RADIUS);
   const renderLine = (line, index) => {
     const { renderData } = data;
     const { isVertical } = data.entity;
     const { lineActivated } = renderData || {};
-    const draggingLineHide = line.type === FlowTransitionLineEnum2.DRAGGING_LINE && !dragService.isDroppableBranch(data.entity, line.side);
-    const draggingLineActivated = line.type === FlowTransitionLineEnum2.DRAGGING_LINE && data.entity?.id === dragService.dropNodeId && line.side === dragService.labelSide;
+    const draggingLineHide = (line.type === FlowTransitionLineEnum2.DRAGGING_LINE || line.isDraggingLine) && !dragService.isDroppableBranch(data.entity, line.side);
+    const draggingLineActivated = (line.type === FlowTransitionLineEnum2.DRAGGING_LINE || line.isDraggingLine) && 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:
@@ -1212,9 +1267,11 @@ 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,
+            radius,
             ...line,
             xRadius,
             yRadius,
@@ -1225,7 +1282,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
           }
@@ -1289,14 +1347,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",
       {
@@ -1307,7 +1357,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
     );
   }
@@ -1336,7 +1385,7 @@ FlowLinesLayer = __decorateClass([
 
 // src/layers/flow-labels-layer.tsx
 import React14 from "react";
-import { throttle as throttle2 } from "lodash";
+import { throttle as throttle2 } from "lodash-es";
 import { inject as inject5, injectable as injectable6 } from "inversify";
 import { domUtils as domUtils4 } from "@flowgram.ai/utils";
 import {
@@ -1423,7 +1472,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) {
@@ -1445,7 +1494,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;
@@ -1555,7 +1604,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) {
@@ -1568,7 +1617,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;
@@ -1614,22 +1663,54 @@ function createLabels(labelProps) {
   const { labels, renderData } = data || {};
   const { activated } = renderData || {};
   const renderLabel = (label, index) => {
-    const { offset, renderKey, props, rotate, type } = label || {};
+    const { offset, renderKey, props, rotate, origin, type } = label || {};
     const offsetX = offset.x;
     const offsetY = offset.y;
     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) {
@@ -1639,6 +1720,7 @@ function createLabels(labelProps) {
         child = /* @__PURE__ */ React13.createElement(
           "div",
           {
+            "data-label-id": label.labelId || labelProps.data.entity.id,
             style: {
               ...TEXT_LABEL_STYLE,
               ...props?.style,
@@ -1659,6 +1741,7 @@ function createLabels(labelProps) {
             renderer.renderer,
             {
               node: data.entity,
+              labelId: label.labelId || labelProps.data.entity.id,
               ...props
             }
           );
@@ -1670,15 +1753,18 @@ function createLabels(labelProps) {
       default:
         break;
     }
+    const originX = typeof origin?.[0] === "number" ? origin?.[0] : 0.5;
+    const originY = typeof origin?.[1] === "number" ? origin?.[1] : 0.5;
     return /* @__PURE__ */ React13.createElement(
       "div",
       {
         key: `${data.entity.id}${index}`,
+        "data-label-id": label.labelId || labelProps.data.entity.id,
         style: {
           position: "absolute",
           left: offsetX,
           top: offsetY,
-          transform: "translate(-50%, -50%)"
+          transform: `translate(-${originX * 100}%, -${originY * 100}%)`
         }
       },
       child
@@ -2241,6 +2327,7 @@ FlowScrollBarLayer = __decorateClass([
 ], FlowScrollBarLayer);
 
 // src/layers/flow-drag-layer.tsx
+import ReactDOM2 from "react-dom";
 import React15 from "react";
 import { inject as inject8, injectable as injectable9 } from "inversify";
 import { Rectangle as Rectangle8 } from "@flowgram.ai/utils";
@@ -2269,6 +2356,7 @@ var DEFAULT_DRAG_OFFSET_Y = 8;
 var FlowDragLayer = class extends Layer7 {
   constructor() {
     super(...arguments);
+    this.disableDragScroll = false;
     this.dragOffset = {
       x: DEFAULT_DRAG_OFFSET_X,
       y: DEFAULT_DRAG_OFFSET_Y
@@ -2309,26 +2397,28 @@ var FlowDragLayer = class extends Layer7 {
     return currentState === EditorState.STATE_GRAB;
   }
   setDraggingStatus(status) {
-    if (this.service.nodeDragIdsWithChildren.length) {
-      this.service.nodeDragIdsWithChildren.forEach((_id) => {
+    if (this.flowDragService.nodeDragIdsWithChildren.length) {
+      this.flowDragService.nodeDragIdsWithChildren.forEach((_id) => {
         const node = this.entityManager.getEntityById(_id);
         const data = node?.getData(FlowNodeRenderData5);
         data.dragging = status;
       });
     }
+    this.flowRenderStateEntity.setDragging(status);
   }
   dragEnable(e) {
     return Math.abs(e.clientX - this.initialPosition.x) > DRAG_OFFSET || Math.abs(e.clientY - this.initialPosition.y) > DRAG_OFFSET;
   }
   handleMouseMove(event) {
-    if (this.dragStartEntity && this.dragEnable(event)) {
+    if ((this.dragJSON || this.dragStartEntity) && this.dragEnable(event)) {
       this.setDraggingStatus(true);
       const scale = this.playgroundConfigEntity.finalScale;
       if (this.containerRef.current) {
         const dragNode = this.containerRef.current.children?.[0];
-        const dragBlockX = event.clientX - (this.pipelineNode.offsetLeft || 0) - this.playgroundConfigEntity.config.clientX - (dragNode.clientWidth - this.dragOffset.x) * scale;
-        const dragBlockY = event.clientY - (this.pipelineNode.offsetTop || 0) - this.playgroundConfigEntity.config.clientY - (dragNode.clientHeight - this.dragOffset.y) * scale;
-        const isBranch = this.service.isDragBranch;
+        const clientBounds = this.playgroundConfigEntity.getClientBounds();
+        const dragBlockX = event.clientX - (this.pipelineNode.offsetLeft || 0) - clientBounds.x - (dragNode.clientWidth - this.dragOffset.x) * scale;
+        const dragBlockY = event.clientY - (this.pipelineNode.offsetTop || 0) - clientBounds.y - (dragNode.clientHeight - this.dragOffset.y) * scale;
+        const isBranch = this.flowDragService.isDragBranch;
         const draggingRect = new Rectangle8(
           dragBlockX,
           dragBlockY,
@@ -2348,7 +2438,7 @@ var FlowDragLayer = class extends Layer7 {
           side = labelOffsetType;
           return hasCollision;
         });
-        if (collisionTransition && (isBranch ? this.service.isDroppableBranch(collisionTransition.entity, side) : this.service.isDroppableNode(collisionTransition.entity)) && (!this.options.canDrop || this.options.canDrop({
+        if (collisionTransition && (isBranch ? this.flowDragService.isDroppableBranch(collisionTransition.entity, side) : this.flowDragService.isDroppableNode(collisionTransition.entity)) && (!this.options.canDrop || this.options.canDrop({
           dragNodes: this.dragEntities,
           dropNode: collisionTransition.entity,
           isBranch
@@ -2360,37 +2450,45 @@ var FlowDragLayer = class extends Layer7 {
         this.flowRenderStateEntity.setDragLabelSide(side);
         this.containerRef.current.style.visibility = "visible";
         this.pipelineNode.parentElement.appendChild(this.draggingNodeMask);
-        this.containerRef.current.style.left = `${dragBlockX}px`;
-        this.containerRef.current.style.top = `${dragBlockY}px`;
+        this.containerRef.current.style.left = `${dragBlockX + this.pipelineNode.offsetLeft + clientBounds.x + window.scrollX}px`;
+        this.containerRef.current.style.top = `${dragBlockY + this.pipelineNode.offsetTop + clientBounds.y + window.scrollY}px`;
         this.containerRef.current.style.transformOrigin = "top left";
         this.containerRef.current.style.transform = `scale(${scale})`;
-        this.flowDragConfigEntity.scrollDirection(
-          event,
-          this.containerRef.current,
-          dragBlockX,
-          dragBlockY
-        );
+        if (!this.disableDragScroll) {
+          this.flowDragConfigEntity.scrollDirection(event, dragBlockX, dragBlockY);
+        }
       }
     }
   }
-  handleMouseUp() {
+  async handleMouseUp() {
     this.setDraggingStatus(false);
-    if (this.dragStartEntity) {
-      const activatedNodeId = this.service.dropNodeId;
+    if (this.dragStartEntity || this.dragJSON) {
+      const activatedNodeId = this.flowDragService.dropNodeId;
       if (activatedNodeId) {
-        if (this.service.isDragBranch) {
-          this.service.dropBranch();
+        if (this.flowDragService.isDragBranch) {
+          if (this.dragJSON) {
+            await this.flowDragService.dropCreateNode(this.dragJSON, this.onCreateNode);
+          } else {
+            this.flowDragService.dropBranch();
+          }
         } else {
-          this.service.dropNode();
+          if (this.dragJSON) {
+            await this.flowDragService.dropCreateNode(this.dragJSON, this.onCreateNode);
+          } else {
+            this.flowDragService.dropNode();
+          }
           this.selectConfigEntity.clearSelectedNodes();
         }
       }
       this.flowRenderStateEntity.setNodeDroppingId("");
       this.flowRenderStateEntity.setDragLabelSide();
+      this.flowRenderStateEntity.setIsBranch(false);
       this.dragStartEntity = void 0;
       this.dragEntities = [];
       this.flowDragConfigEntity.stopAllScroll();
     }
+    this.disableDragScroll = false;
+    this.dragJSON = void 0;
     if (this.containerRef.current) {
       this.containerRef.current.style.visibility = "hidden";
       if (this.pipelineNode.parentElement.contains(this.draggingNodeMask)) {
@@ -2404,17 +2502,25 @@ var FlowDragLayer = class extends Layer7 {
    */
   async startDrag(e, {
     dragStartEntity: startEntityFromProps,
-    dragEntities
+    dragEntities,
+    dragJSON,
+    isBranch,
+    onCreateNode
   }, options) {
     if (this.isGrab() || this.config.disabled || this.config.readonly) {
       return;
     }
+    this.disableDragScroll = Boolean(options?.disableDragScroll);
+    this.dragJSON = dragJSON;
+    this.onCreateNode = onCreateNode;
+    this.flowRenderStateEntity.setIsBranch(Boolean(isBranch));
     this.dragOffset.x = options?.dragOffsetX || DEFAULT_DRAG_OFFSET_X;
     this.dragOffset.y = options?.dragOffsetY || DEFAULT_DRAG_OFFSET_Y;
-    const isIcon = startEntityFromProps.flowNodeType === FlowNodeBaseType.BLOCK_ICON;
-    const isOrderIcon = startEntityFromProps.flowNodeType === FlowNodeBaseType.BLOCK_ORDER_ICON;
+    const type = startEntityFromProps?.flowNodeType || dragJSON?.type;
+    const isIcon = type === FlowNodeBaseType.BLOCK_ICON;
+    const isOrderIcon = type === FlowNodeBaseType.BLOCK_ORDER_ICON;
     const dragStartEntity = isIcon || isOrderIcon ? startEntityFromProps.parent : startEntityFromProps;
-    if (!dragStartEntity.getData(FlowNodeRenderData5).draggable) {
+    if (dragStartEntity && !dragStartEntity.getData(FlowNodeRenderData5).draggable) {
       return;
     }
     this.initialPosition = {
@@ -2422,7 +2528,7 @@ var FlowDragLayer = class extends Layer7 {
       y: e.clientY
     };
     this.dragStartEntity = dragStartEntity;
-    this.dragEntities = dragEntities || [this.dragStartEntity];
+    this.dragEntities = dragEntities || (this.dragStartEntity ? [this.dragStartEntity] : []);
     return this._dragger.start(e.clientX, e.clientY);
   }
   onReady() {
@@ -2434,19 +2540,33 @@ var FlowDragLayer = class extends Layer7 {
     this.draggingNodeMask.style.cursor = "pointer";
     this.dragNodeComp = this.rendererRegistry.getRendererComponent("drag-node" /* DRAG_NODE */);
     if (this.options.onDrop) {
-      this.toDispose.push(this.service.onDrop(this.options.onDrop));
+      this.toDispose.push(this.flowDragService.onDrop(this.options.onDrop));
     }
   }
+  dispose() {
+    this._dragger.dispose();
+    super.dispose();
+  }
   render() {
     const DragComp = this.dragNodeComp.renderer;
-    return /* @__PURE__ */ React15.createElement(
-      "div",
-      {
-        ref: this.containerRef,
-        style: { position: "absolute", zIndex: 99999, visibility: "hidden" },
-        onMouseEnter: (e) => e.stopPropagation()
-      },
-      /* @__PURE__ */ React15.createElement(DragComp, { dragStart: this.dragStartEntity, dragNodes: this.dragEntities })
+    return ReactDOM2.createPortal(
+      /* @__PURE__ */ React15.createElement(
+        "div",
+        {
+          ref: this.containerRef,
+          style: { position: "absolute", zIndex: 99999, visibility: "hidden" },
+          onMouseEnter: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ React15.createElement(
+          DragComp,
+          {
+            dragJSON: this.dragJSON,
+            dragStart: this.dragStartEntity,
+            dragNodes: this.dragEntities
+          }
+        )
+      ),
+      document.body
     );
   }
 };
@@ -2455,7 +2575,7 @@ __decorateClass([
 ], FlowDragLayer.prototype, "document", 2);
 __decorateClass([
   inject8(FlowDragService5)
-], FlowDragLayer.prototype, "service", 2);
+], FlowDragLayer.prototype, "flowDragService", 2);
 __decorateClass([
   observeEntityDatas6(FlowNodeEntity6, FlowNodeTransformData7)
 ], FlowDragLayer.prototype, "transforms", 2);
@@ -2659,11 +2779,8 @@ FlowSelectorBoxLayer = __decorateClass([
 // src/layers/flow-selector-bounds-layer.tsx
 import React16 from "react";
 import { inject as inject10, injectable as injectable11 } from "inversify";
-import {
-  FlowNodeEntity as FlowNodeEntity8,
-  FlowNodeRenderData as FlowNodeRenderData6,
-  FlowNodeTransformData as FlowNodeTransformData9
-} from "@flowgram.ai/document";
+import { domUtils as domUtils8 } from "@flowgram.ai/utils";
+import { FlowNodeEntity as FlowNodeEntity8, FlowNodeRenderData as FlowNodeRenderData6, FlowNodeTransformData as FlowNodeTransformData9 } from "@flowgram.ai/document";
 import {
   CommandRegistry,
   EditorState as EditorState3,
@@ -2672,7 +2789,6 @@ import {
   observeEntity as observeEntity9,
   observeEntityDatas as observeEntityDatas7
 } from "@flowgram.ai/core";
-import { domUtils as domUtils8 } from "@flowgram.ai/utils";
 var FlowSelectorBoundsLayer = class extends Layer9 {
   constructor() {
     super(...arguments);
@@ -2688,7 +2804,9 @@ var FlowSelectorBoundsLayer = class extends Layer9 {
     if (this.options.backgroundClassName) {
       this.selectBoundsBackground.classList.add(this.options.backgroundClassName);
     }
-    const selectorBoundsLayer = domUtils8.createDivWithClass("gedit-playground-layer");
+    const selectorBoundsLayer = domUtils8.createDivWithClass(
+      "gedit-selector-bounds-background-layer gedit-playground-layer"
+    );
     selectorBoundsLayer.appendChild(this.selectBoundsBackground);
     this.pipelineNode.insertBefore(selectorBoundsLayer, firstChild);
   }
@@ -2729,6 +2847,7 @@ var FlowSelectorBoundsLayer = class extends Layer9 {
   render() {
     const {
       ignoreOneSelect,
+      ignoreChildrenLength,
       SelectorBoxPopover: SelectorBoxPopoverFromOpts,
       disableBackground,
       CustomBoundsRenderer
@@ -2739,7 +2858,7 @@ var FlowSelectorBoundsLayer = class extends Layer9 {
     const isDragging = !this.selectorBoxConfigEntity.isStart;
     if (bounds.width === 0 || bounds.height === 0 || // 选中单个的时候不显示
     ignoreOneSelect && selectedNodes.length === 1 && // 选中的节点不包含多个子节点
-    selectedNodes[0].childrenLength <= 1) {
+    (ignoreChildrenLength || selectedNodes[0].childrenLength <= 1)) {
       domUtils8.setStyle(bg, {
         display: "none"
       });
@@ -2813,6 +2932,7 @@ FlowSelectorBoundsLayer = __decorateClass([
 // src/layers/flow-context-menu-layer.tsx
 import React17 from "react";
 import { inject as inject11, injectable as injectable12 } from "inversify";
+import { domUtils as domUtils9 } from "@flowgram.ai/utils";
 import {
   CommandRegistry as CommandRegistry2,
   ContextMenuService as ContextMenuService2,
@@ -2824,7 +2944,6 @@ import {
   PlaygroundConfigEntity as PlaygroundConfigEntity5,
   SelectionService as SelectionService2
 } from "@flowgram.ai/core";
-import { domUtils as domUtils9 } from "@flowgram.ai/utils";
 var FlowContextMenuLayer = class extends Layer10 {
   constructor() {
     super(...arguments);
@@ -2851,8 +2970,9 @@ var FlowContextMenuLayer = class extends Layer10 {
           e.stopPropagation();
           e.preventDefault();
           this.nodeRef.current?.setVisible(true);
-          const dragBlockX = e.clientX - (this.pipelineNode.offsetLeft || 0) - this.playgroundConfigEntity.config.clientX;
-          const dragBlockY = e.clientY - (this.pipelineNode.offsetTop || 0) - this.playgroundConfigEntity.config.clientY;
+          const clientBounds = this.playgroundConfigEntity.getClientBounds();
+          const dragBlockX = e.clientX - (this.pipelineNode.offsetLeft || 0) - clientBounds.x;
+          const dragBlockY = e.clientY - (this.pipelineNode.offsetTop || 0) - clientBounds.y;
           this.node.style.left = `${dragBlockX}px`;
           this.node.style.top = `${dragBlockY}px`;
         },
@@ -2990,6 +3110,7 @@ export {
   MARK_ARROW_ID,
   ScrollBarEvents,
   SelectorBoxConfigEntity,
+  createLines,
   useBaseColor
 };
 //# sourceMappingURL=index.js.map