@flowgram.ai/renderer 0.5.1 → 0.5.3

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";
@@ -2360,6 +2354,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
@@ -2400,19 +2395,20 @@ 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) {
@@ -2420,7 +2416,7 @@ var FlowDragLayer = class extends Layer7 {
         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.service.isDragBranch;
+        const isBranch = this.flowDragService.isDragBranch;
         const draggingRect = new Rectangle8(
           dragBlockX,
           dragBlockY,
@@ -2440,7 +2436,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
@@ -2452,37 +2448,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)) {
@@ -2496,17 +2500,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 = {
@@ -2514,7 +2526,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() {
@@ -2526,19 +2538,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
     );
   }
 };
@@ -2547,7 +2573,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);