@flowgram.ai/renderer 0.5.2 → 0.5.4

package/dist/esm/index.js

@@ -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,15 +381,10 @@ 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 clientRect = this.playgroundConfigEntity.playgroundDomNode.getBoundingClientRect();
@@ -2332,6 +2325,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";
@@ -2454,17 +2448,12 @@ 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})`;
         if (!this.disableDragScroll) {
-          this.flowDragConfigEntity.scrollDirection(
-            event,
-            this.containerRef.current,
-            dragBlockX,
-            dragBlockY
-          );
+          this.flowDragConfigEntity.scrollDirection(event, dragBlockX, dragBlockY);
         }
       }
     }
@@ -2475,7 +2464,11 @@ var FlowDragLayer = class extends Layer7 {
       const activatedNodeId = this.flowDragService.dropNodeId;
       if (activatedNodeId) {
         if (this.flowDragService.isDragBranch) {
-          this.flowDragService.dropBranch();
+          if (this.dragJSON) {
+            await this.flowDragService.dropCreateNode(this.dragJSON, this.onCreateNode);
+          } else {
+            this.flowDragService.dropBranch();
+          }
         } else {
           if (this.dragJSON) {
             await this.flowDragService.dropCreateNode(this.dragJSON, this.onCreateNode);
@@ -2487,6 +2480,7 @@ var FlowDragLayer = class extends Layer7 {
       }
       this.flowRenderStateEntity.setNodeDroppingId("");
       this.flowRenderStateEntity.setDragLabelSide();
+      this.flowRenderStateEntity.setIsBranch(false);
       this.dragStartEntity = void 0;
       this.dragEntities = [];
       this.flowDragConfigEntity.stopAllScroll();
@@ -2504,13 +2498,20 @@ var FlowDragLayer = class extends Layer7 {
    * 开始拖拽事件
    * @param e
    */
-  async startDrag(e, { dragStartEntity: startEntityFromProps, dragEntities, dragJSON, onCreateNode }, options) {
+  async startDrag(e, {
+    dragStartEntity: startEntityFromProps,
+    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 type = startEntityFromProps?.flowNodeType || dragJSON?.type;
@@ -2540,23 +2541,30 @@ var FlowDragLayer = class extends Layer7 {
       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()
-      },
+    return ReactDOM2.createPortal(
       /* @__PURE__ */ React15.createElement(
-        DragComp,
+        "div",
         {
-          dragJSON: this.dragJSON,
-          dragStart: this.dragStartEntity,
-          dragNodes: this.dragEntities
-        }
-      )
+          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
     );
   }
 };