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

package/dist/index.js

@@ -36,8 +36,8 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   FlowContextMenuLayer: () => FlowContextMenuLayer,
   FlowDebugLayer: () => FlowDebugLayer,
   FlowDragEntity: () => FlowDragEntity,
@@ -62,14 +62,15 @@ __export(src_exports, {
   MARK_ARROW_ID: () => MARK_ARROW_ID,
   ScrollBarEvents: () => ScrollBarEvents,
   SelectorBoxConfigEntity: () => SelectorBoxConfigEntity,
+  createLines: () => createLines,
   useBaseColor: () => useBaseColor
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/entities/flow-drag-entity.tsx
+var import_utils = require("@flowgram.ai/utils");
 var import_document3 = require("@flowgram.ai/document");
 var import_core2 = require("@flowgram.ai/core");
-var import_utils = require("@flowgram.ai/utils");
 
 // src/components/utils.tsx
 var import_document2 = require("@flowgram.ai/document");
@@ -94,7 +95,7 @@ var DEFAULT_LINE_ATTRS = {
   strokeLinecap: "round",
   strokeLinejoin: "round"
 };
-var DEFAULT_RADIUS = 16;
+var DEFAULT_RADIUS = import_document2.DEFAULT_SPACING[import_document2.DefaultSpacingKey.ROUNDED_LINE_RADIUS];
 var DEFAULT_LABEL_ACTIVATE_HEIGHT = 32;
 function getHorizontalVertices(line, xRadius = 16, yRadius = 20) {
   const { from, to, type } = line || {};
@@ -388,7 +389,6 @@ var FlowDragEntity = class extends import_core2.ConfigEntity {
         } else {
           this.containerX -= SCROLL_DELTA;
         }
-        this.setDomStyle();
       }
     }, SCROLL_INTERVAL);
     this._scrollXInterval = { interval, origin };
@@ -417,7 +417,6 @@ var FlowDragEntity = class extends import_core2.ConfigEntity {
         } else {
           this.containerY -= SCROLL_DELTA;
         }
-        this.setDomStyle();
       }
     }, SCROLL_INTERVAL);
     this._scrollYInterval = { interval, origin };
@@ -432,34 +431,30 @@ var FlowDragEntity = class extends import_core2.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 */;
@@ -479,7 +474,7 @@ var import_core3 = require("@flowgram.ai/core");
 var import_utils3 = require("@flowgram.ai/utils");
 
 // src/utils/find-selected-nodes.ts
-var import_lodash = require("lodash");
+var import_lodash_es = require("lodash-es");
 function getNodePath(node) {
   const path = [node];
   node = node.parent;
@@ -502,13 +497,13 @@ function findSelectedNodes(nodes) {
   let index = 0;
   let selectedItems = [];
   while (index < minLength) {
-    selectedItems = (0, import_lodash.uniq)(nodePathList.map((p) => p[index]));
+    selectedItems = (0, import_lodash_es.uniq)(nodePathList.map((p) => p[index]));
     if (selectedItems.length > 1) {
       break;
     }
     index += 1;
   }
-  return (0, import_lodash.uniq)(selectedItems.map((item) => findRealEntity(item)));
+  return (0, import_lodash_es.uniq)(selectedItems.map((item) => findRealEntity(item)));
 }
 
 // src/entities/flow-select-config-entity.tsx
@@ -665,10 +660,16 @@ var import_inversify = require("inversify");
 var import_utils5 = require("@flowgram.ai/utils");
 
 // src/utils/element.ts
-var import_lodash2 = require("lodash");
+var import_lodash_es2 = require("lodash-es");
 var isHidden = (dom) => {
+  if (!dom || (0, import_lodash_es2.isNil)(dom?.offsetParent)) {
+    return true;
+  }
   const style = window.getComputedStyle(dom);
-  return (0, import_lodash2.isNil)(dom?.offsetParent) || style?.display === "none";
+  if (style?.display === "none") {
+    return true;
+  }
+  return false;
 };
 var isRectInit = (rect) => {
   if (!rect) {
@@ -737,7 +738,9 @@ var FlowNodesTransformLayer = class extends import_core5.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;
@@ -752,7 +755,9 @@ var FlowNodesTransformLayer = class extends import_core5.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`;
             }
@@ -775,6 +780,10 @@ var FlowNodesTransformLayer = class extends import_core5.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";
   }
@@ -856,6 +865,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;
@@ -903,7 +916,7 @@ var FlowRendererRegistry = class {
     });
   }
   getText(textKey) {
-    return import_i18n.I18n.t(textKey, { disableReturnKey: true }) || this.textMap.get(textKey);
+    return import_i18n.I18n.t(textKey, { defaultValue: "" }) || this.textMap.get(textKey);
   }
   /**
    * TODO: support memo
@@ -957,7 +970,7 @@ var FlowNodesContentLayer = class extends import_core7.Layer {
         const PortalRenderer = this.getPortalRenderer(data);
         function Portal() {
           import_react.default.useEffect(() => {
-            if (node.clientWidth && node.clientHeight) {
+            if (!entity.getNodeMeta().autoResizeDisable && node.clientWidth && node.clientHeight) {
               const transform = entity.getData(import_document6.FlowNodeTransformData);
               if (transform)
                 transform.size = {
@@ -965,7 +978,7 @@ var FlowNodesContentLayer = class extends import_core7.Layer {
                   height: node.clientHeight
                 };
             }
-          }, []);
+          }, [entity, node]);
           return import_react_dom.default.createPortal(
             /* @__PURE__ */ import_react.default.createElement(import_core7.PlaygroundEntityContext.Provider, { value: entity }, /* @__PURE__ */ import_react.default.createElement(
               PortalRenderer,
@@ -1052,38 +1065,52 @@ FlowNodesContentLayer = __decorateClass([
 
 // src/layers/flow-lines-layer.tsx
 var import_react8 = __toESM(require("react"));
-var import_lodash4 = require("lodash");
+var import_lodash_es4 = require("lodash-es");
 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_lodash_es3 = require("lodash-es");
+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",
@@ -1094,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 || {};
@@ -1147,26 +1188,30 @@ function RoundedTurningLine(props) {
       }
       const inPoint = new import_utils9.Point().copyFrom(point);
       const outPoint = new import_utils9.Point().copyFrom(point);
-      const radiusX = (0, import_lodash3.isNil)(point.radiusX) ? radius : point.radiusX;
-      const radiusY = (0, import_lodash3.isNil)(point.radiusY) ? radius : point.radiusY;
+      const radiusX = (0, import_lodash_es3.isNil)(point.radiusX) ? radius : point.radiusX;
+      const radiusY = (0, import_lodash_es3.isNil)(point.radiusY) ? radius : point.radiusY;
       let rx = radiusX;
       let ry = radiusY;
       if (isRightAngleX) {
         ry = Math.min(prevDelta.y, radiusY);
-        const moveY = (0, import_lodash3.isNil)(point.moveY) ? ry : point.moveY;
+        const moveY = (0, import_lodash_es3.isNil)(point.moveY) ? ry : point.moveY;
         inPoint.y += from.y < point.y ? -moveY : +moveY;
         rx = Math.min(nextDelta.x, radiusX);
-        const moveX = (0, import_lodash3.isNil)(point.moveX) ? rx : point.moveX;
+        const moveX = (0, import_lodash_es3.isNil)(point.moveX) ? rx : point.moveX;
         outPoint.x += to.x < point.x ? -moveX : +moveX;
       }
       if (isRightAngleY) {
         rx = Math.min(prevDelta.x, radiusX);
-        const moveX = (0, import_lodash3.isNil)(point.moveX) ? rx : point.moveX;
+        const moveX = (0, import_lodash_es3.isNil)(point.moveX) ? rx : point.moveX;
         inPoint.x += from.x < point.x ? -moveX : +moveX;
         ry = Math.min(nextDelta.y, radiusY);
-        const moveY = (0, import_lodash3.isNil)(point.moveY) ? ry : point.moveY;
+        const moveY = (0, import_lodash_es3.isNil)(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}`;
@@ -1177,18 +1222,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;
 
@@ -1204,7 +1251,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;
 
@@ -1212,17 +1259,26 @@ var CustomLine_default = CustomLine;
 function createLines(props) {
   const { data, rendererRegistry, linesSave, dragService } = props;
   const { lines, entity } = data || {};
+  const radius = (0, import_document8.getDefaultSpacing)(entity, import_document7.DefaultSpacingKey.ROUNDED_LINE_RADIUS);
   const xRadius = (0, import_document8.getDefaultSpacing)(entity, import_document7.DefaultSpacingKey.ROUNDED_LINE_X_RADIUS);
   const yRadius = (0, import_document8.getDefaultSpacing)(entity, import_document7.DefaultSpacingKey.ROUNDED_LINE_Y_RADIUS);
   const renderLine = (line, index) => {
     const { renderData } = data;
     const { isVertical } = data.entity;
     const { lineActivated } = renderData || {};
-    const draggingLineHide = line.type === import_document7.FlowTransitionLineEnum.DRAGGING_LINE && !dragService.isDroppableBranch(data.entity, line.side);
-    const draggingLineActivated = line.type === import_document7.FlowTransitionLineEnum.DRAGGING_LINE && data.entity?.id === dragService.dropNodeId && line.side === dragService.labelSide;
+    const draggingLineHide = (line.type === import_document7.FlowTransitionLineEnum.DRAGGING_LINE || line.isDraggingLine) && !dragService.isDroppableBranch(data.entity, line.side);
+    const draggingLineActivated = (line.type === import_document7.FlowTransitionLineEnum.DRAGGING_LINE || line.isDraggingLine) && 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:
@@ -1230,9 +1286,11 @@ 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,
+            radius,
             ...line,
             xRadius,
             yRadius,
@@ -1243,7 +1301,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
           }
@@ -1263,14 +1322,14 @@ 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");
     /**
      * 可视区域变化
      */
-    this.onViewportChange = (0, import_lodash4.throttle)(() => {
+    this.onViewportChange = (0, import_lodash_es4.throttle)(() => {
       this.render();
     }, 100);
   }
@@ -1302,19 +1361,11 @@ var FlowLinesLayer = class extends import_core8.Layer {
         dragService: this.dragService
       });
     });
-    const { activateLines = [], normalLines = [] } = (0, import_lodash4.groupBy)(
+    const { activateLines = [], normalLines = [] } = (0, import_lodash_es4.groupBy)(
       allLines,
       (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",
       {
@@ -1325,7 +1376,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
     );
   }
@@ -1340,13 +1390,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)()
@@ -1354,11 +1404,11 @@ FlowLinesLayer = __decorateClass([
 
 // src/layers/flow-labels-layer.tsx
 var import_react14 = __toESM(require("react"));
-var import_lodash5 = require("lodash");
+var import_lodash_es5 = require("lodash-es");
 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"));
@@ -1427,7 +1477,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) {
@@ -1449,7 +1499,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;
@@ -1557,7 +1607,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) {
@@ -1570,7 +1620,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;
@@ -1616,22 +1666,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 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) {
@@ -1641,6 +1723,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,
@@ -1661,6 +1744,7 @@ function createLabels(labelProps) {
             renderer.renderer,
             {
               node: data.entity,
+              labelId: label.labelId || labelProps.data.entity.id,
               ...props
             }
           );
@@ -1672,15 +1756,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__ */ import_react13.default.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
@@ -1694,14 +1781,14 @@ 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");
     /**
      * 可视区域变化
      */
-    this.onViewportChange = (0, import_lodash5.throttle)(() => {
+    this.onViewportChange = (0, import_lodash_es5.throttle)(() => {
       this.render();
     }, 100);
   }
@@ -1749,13 +1836,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)()
@@ -1765,7 +1852,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");
@@ -1811,7 +1898,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");
@@ -1974,10 +2061,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)()
@@ -1986,12 +2073,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
@@ -2011,7 +2098,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;
@@ -2031,7 +2118,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;
@@ -2226,32 +2313,34 @@ __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)()
 ], FlowScrollBarLayer);
 
 // src/layers/flow-drag-layer.tsx
+var import_react_dom2 = __toESM(require("react-dom"));
 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.disableDragScroll = false;
     this.dragOffset = {
       x: DEFAULT_DRAG_OFFSET_X,
       y: DEFAULT_DRAG_OFFSET_Y
     };
     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);
       },
@@ -2282,29 +2371,31 @@ 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) {
-      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(import_document18.FlowNodeRenderData);
         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 import_utils22.Rectangle(
           dragBlockX,
           dragBlockY,
@@ -2324,7 +2415,7 @@ var FlowDragLayer = class extends import_core14.Layer {
           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
@@ -2336,37 +2427,45 @@ var FlowDragLayer = class extends import_core14.Layer {
         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)) {
@@ -2380,17 +2479,25 @@ var FlowDragLayer = class extends import_core14.Layer {
    */
   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 === import_document18.FlowNodeBaseType.BLOCK_ICON;
-    const isOrderIcon = startEntityFromProps.flowNodeType === import_document18.FlowNodeBaseType.BLOCK_ORDER_ICON;
+    const type = startEntityFromProps?.flowNodeType || dragJSON?.type;
+    const isIcon = type === import_document18.FlowNodeBaseType.BLOCK_ICON;
+    const isOrderIcon = type === import_document18.FlowNodeBaseType.BLOCK_ORDER_ICON;
     const dragStartEntity = isIcon || isOrderIcon ? startEntityFromProps.parent : startEntityFromProps;
-    if (!dragStartEntity.getData(import_document18.FlowNodeRenderData).draggable) {
+    if (dragStartEntity && !dragStartEntity.getData(import_document18.FlowNodeRenderData).draggable) {
       return;
     }
     this.initialPosition = {
@@ -2398,7 +2505,7 @@ var FlowDragLayer = class extends import_core14.Layer {
       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() {
@@ -2410,19 +2517,33 @@ var FlowDragLayer = class extends import_core14.Layer {
     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__ */ import_react15.default.createElement(
-      "div",
-      {
-        ref: this.containerRef,
-        style: { position: "absolute", zIndex: 99999, visibility: "hidden" },
-        onMouseEnter: (e) => e.stopPropagation()
-      },
-      /* @__PURE__ */ import_react15.default.createElement(DragComp, { dragStart: this.dragStartEntity, dragNodes: this.dragEntities })
+    return import_react_dom2.default.createPortal(
+      /* @__PURE__ */ import_react15.default.createElement(
+        "div",
+        {
+          ref: this.containerRef,
+          style: { position: "absolute", zIndex: 99999, visibility: "hidden" },
+          onMouseEnter: (e) => e.stopPropagation()
+        },
+        /* @__PURE__ */ import_react15.default.createElement(
+          DragComp,
+          {
+            dragJSON: this.dragJSON,
+            dragStart: this.dragStartEntity,
+            dragNodes: this.dragEntities
+          }
+        )
+      ),
+      document.body
     );
   }
 };
@@ -2431,24 +2552,24 @@ __decorateClass([
 ], FlowDragLayer.prototype, "document", 2);
 __decorateClass([
   (0, import_inversify9.inject)(import_document18.FlowDragService)
-], FlowDragLayer.prototype, "service", 2);
+], FlowDragLayer.prototype, "flowDragService", 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)
@@ -2461,8 +2582,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");
@@ -2477,7 +2598,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);
@@ -2532,20 +2653,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
@@ -2601,22 +2722,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)()
@@ -2625,10 +2746,10 @@ FlowSelectorBoxLayer = __decorateClass([
 // src/layers/flow-selector-bounds-layer.tsx
 var import_react16 = __toESM(require("react"));
 var import_inversify11 = require("inversify");
-var import_document20 = require("@flowgram.ai/document");
-var import_core17 = require("@flowgram.ai/core");
 var import_utils24 = require("@flowgram.ai/utils");
-var FlowSelectorBoundsLayer = class extends import_core17.Layer {
+var import_document20 = require("@flowgram.ai/document");
+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");
@@ -2643,7 +2764,9 @@ var FlowSelectorBoundsLayer = class extends import_core17.Layer {
     if (this.options.backgroundClassName) {
       this.selectBoundsBackground.classList.add(this.options.backgroundClassName);
     }
-    const selectorBoundsLayer = import_utils24.domUtils.createDivWithClass("gedit-playground-layer");
+    const selectorBoundsLayer = import_utils24.domUtils.createDivWithClass(
+      "gedit-selector-bounds-background-layer gedit-playground-layer"
+    );
     selectorBoundsLayer.appendChild(this.selectBoundsBackground);
     this.pipelineNode.insertBefore(selectorBoundsLayer, firstChild);
   }
@@ -2656,7 +2779,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;
   }
   // /**
   //  * 渲染工具栏
@@ -2684,6 +2807,7 @@ var FlowSelectorBoundsLayer = class extends import_core17.Layer {
   render() {
     const {
       ignoreOneSelect,
+      ignoreChildrenLength,
       SelectorBoxPopover: SelectorBoxPopoverFromOpts,
       disableBackground,
       CustomBoundsRenderer
@@ -2694,7 +2818,7 @@ var FlowSelectorBoundsLayer = class extends import_core17.Layer {
     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)) {
       import_utils24.domUtils.setStyle(bg, {
         display: "none"
       });
@@ -2744,22 +2868,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)()
@@ -2768,9 +2892,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_utils25 = require("@flowgram.ai/utils");
-var FlowContextMenuLayer = class extends import_core18.Layer {
+var import_core19 = require("@flowgram.ai/core");
+var FlowContextMenuLayer = class extends import_core19.Layer {
   constructor() {
     super(...arguments);
     this.node = import_utils25.domUtils.createDivWithClass("gedit-context-menu-layer");
@@ -2778,7 +2902,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";
@@ -2796,12 +2920,13 @@ var FlowContextMenuLayer = class extends import_core18.Layer {
           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`;
         },
-        import_core18.PipelineLayerPriority.BASE_LAYER
+        import_core19.PipelineLayerPriority.BASE_LAYER
       ),
       this.listenPlaygroundEvent("mousedown", () => {
         this.nodeRef.current?.setVisible(false);
@@ -2849,28 +2974,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)()
@@ -2879,8 +3004,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());
   }
@@ -2936,6 +3061,7 @@ var FlowRendererContainerModule = new import_inversify14.ContainerModule((bind)
   MARK_ARROW_ID,
   ScrollBarEvents,
   SelectorBoxConfigEntity,
+  createLines,
   useBaseColor
 });
 //# sourceMappingURL=index.js.map