@flowgram.ai/renderer 0.5.2 → 0.5.3

package/dist/index.d.mts

@@ -26,7 +26,6 @@ interface CollisionRetType {
 declare class FlowDragEntity extends ConfigEntity<FlowDragEntityConfig> {
     private playgroundConfigEntity;
     static type: string;
-    private containerDom;
     private containerX;
     private containerY;
     private _scrollXInterval;
@@ -41,8 +40,7 @@ declare class FlowDragEntity extends ConfigEntity<FlowDragEntityConfig> {
     private _startScrollY;
     private _stopScrollY;
     stopAllScroll(): void;
-    setDomStyle(): void;
-    scrollDirection(e: MouseEvent, containerDom: HTMLDivElement, x: number, y: number): ScrollDirection | undefined;
+    scrollDirection(e: MouseEvent, x: number, y: number): ScrollDirection | undefined;
     dispose(): void;
 }
 
@@ -494,7 +492,10 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     private disableDragScroll;
     private dragJSON?;
     private onCreateNode?;
-    private dragOffset;
+    dragOffset: {
+        x: number;
+        y: number;
+    };
     get transitions(): FlowNodeTransitionData[];
     readonly rendererRegistry: FlowRendererRegistry;
     get dragStartEntity(): FlowNodeEntity | undefined;
@@ -517,13 +518,14 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     startDrag(e: {
         clientX: number;
         clientY: number;
-    }, { dragStartEntity: startEntityFromProps, dragEntities, dragJSON, onCreateNode }: StartDragProps, options?: {
+    }, { dragStartEntity: startEntityFromProps, dragEntities, dragJSON, isBranch, onCreateNode, }: StartDragProps, options?: {
         dragOffsetX?: number;
         dragOffsetY?: number;
         disableDragScroll?: boolean;
     }): Promise<void>;
     onReady(): void;
-    render(): React.JSX.Element;
+    dispose(): void;
+    render(): React.ReactPortal;
 }
 
 interface FlowSelectorBoxOptions extends LayerOptions {

package/dist/index.d.ts

@@ -26,7 +26,6 @@ interface CollisionRetType {
 declare class FlowDragEntity extends ConfigEntity<FlowDragEntityConfig> {
     private playgroundConfigEntity;
     static type: string;
-    private containerDom;
     private containerX;
     private containerY;
     private _scrollXInterval;
@@ -41,8 +40,7 @@ declare class FlowDragEntity extends ConfigEntity<FlowDragEntityConfig> {
     private _startScrollY;
     private _stopScrollY;
     stopAllScroll(): void;
-    setDomStyle(): void;
-    scrollDirection(e: MouseEvent, containerDom: HTMLDivElement, x: number, y: number): ScrollDirection | undefined;
+    scrollDirection(e: MouseEvent, x: number, y: number): ScrollDirection | undefined;
     dispose(): void;
 }
 
@@ -494,7 +492,10 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     private disableDragScroll;
     private dragJSON?;
     private onCreateNode?;
-    private dragOffset;
+    dragOffset: {
+        x: number;
+        y: number;
+    };
     get transitions(): FlowNodeTransitionData[];
     readonly rendererRegistry: FlowRendererRegistry;
     get dragStartEntity(): FlowNodeEntity | undefined;
@@ -517,13 +518,14 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     startDrag(e: {
         clientX: number;
         clientY: number;
-    }, { dragStartEntity: startEntityFromProps, dragEntities, dragJSON, onCreateNode }: StartDragProps, options?: {
+    }, { dragStartEntity: startEntityFromProps, dragEntities, dragJSON, isBranch, onCreateNode, }: StartDragProps, options?: {
         dragOffsetX?: number;
         dragOffsetY?: number;
         disableDragScroll?: boolean;
     }): Promise<void>;
     onReady(): void;
-    render(): React.JSX.Element;
+    dispose(): void;
+    render(): React.ReactPortal;
 }
 
 interface FlowSelectorBoxOptions extends LayerOptions {

package/dist/index.js

@@ -389,7 +389,6 @@ var FlowDragEntity = class extends import_core2.ConfigEntity {
         } else {
           this.containerX -= SCROLL_DELTA;
         }
-        this.setDomStyle();
       }
     }, SCROLL_INTERVAL);
     this._scrollXInterval = { interval, origin };
@@ -418,7 +417,6 @@ var FlowDragEntity = class extends import_core2.ConfigEntity {
         } else {
           this.containerY -= SCROLL_DELTA;
         }
-        this.setDomStyle();
       }
     }, SCROLL_INTERVAL);
     this._scrollYInterval = { interval, origin };
@@ -433,15 +431,10 @@ 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 clientRect = this.playgroundConfigEntity.playgroundDomNode.getBoundingClientRect();
@@ -2325,6 +2318,7 @@ FlowScrollBarLayer = __decorateClass([
 ], 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");
@@ -2431,17 +2425,12 @@ var FlowDragLayer = class extends import_core15.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})`;
         if (!this.disableDragScroll) {
-          this.flowDragConfigEntity.scrollDirection(
-            event,
-            this.containerRef.current,
-            dragBlockX,
-            dragBlockY
-          );
+          this.flowDragConfigEntity.scrollDirection(event, dragBlockX, dragBlockY);
         }
       }
     }
@@ -2452,7 +2441,11 @@ var FlowDragLayer = class extends import_core15.Layer {
       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);
@@ -2464,6 +2457,7 @@ var FlowDragLayer = class extends import_core15.Layer {
       }
       this.flowRenderStateEntity.setNodeDroppingId("");
       this.flowRenderStateEntity.setDragLabelSide();
+      this.flowRenderStateEntity.setIsBranch(false);
       this.dragStartEntity = void 0;
       this.dragEntities = [];
       this.flowDragConfigEntity.stopAllScroll();
@@ -2481,13 +2475,20 @@ var FlowDragLayer = class extends import_core15.Layer {
    * 开始拖拽事件
    * @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;
@@ -2517,23 +2518,30 @@ var FlowDragLayer = class extends import_core15.Layer {
       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()
-      },
+    return import_react_dom2.default.createPortal(
       /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement(
+          DragComp,
+          {
+            dragJSON: this.dragJSON,
+            dragStart: this.dragStartEntity,
+            dragNodes: this.dragEntities
+          }
+        )
+      ),
+      document.body
     );
   }
 };