@flowgram.ai/renderer 0.5.1 → 0.5.2

package/dist/esm/index.js

@@ -2360,6 +2360,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 +2401,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 +2422,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 +2442,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
@@ -2456,24 +2458,30 @@ var FlowDragLayer = class extends Layer7 {
         this.containerRef.current.style.top = `${dragBlockY}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,
+            this.containerRef.current,
+            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) {
+          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();
         }
       }
@@ -2483,6 +2491,8 @@ var FlowDragLayer = class extends Layer7 {
       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)) {
@@ -2494,19 +2504,20 @@ var FlowDragLayer = class extends Layer7 {
    * 开始拖拽事件
    * @param e
    */
-  async startDrag(e, {
-    dragStartEntity: startEntityFromProps,
-    dragEntities
-  }, options) {
+  async startDrag(e, { dragStartEntity: startEntityFromProps, dragEntities, dragJSON, onCreateNode }, options) {
     if (this.isGrab() || this.config.disabled || this.config.readonly) {
       return;
     }
+    this.disableDragScroll = Boolean(options?.disableDragScroll);
+    this.dragJSON = dragJSON;
+    this.onCreateNode = onCreateNode;
     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 +2525,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,7 +2537,7 @@ 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));
     }
   }
   render() {
@@ -2538,7 +2549,14 @@ var FlowDragLayer = class extends Layer7 {
         style: { position: "absolute", zIndex: 99999, visibility: "hidden" },
         onMouseEnter: (e) => e.stopPropagation()
       },
-      /* @__PURE__ */ React15.createElement(DragComp, { dragStart: this.dragStartEntity, dragNodes: this.dragEntities })
+      /* @__PURE__ */ React15.createElement(
+        DragComp,
+        {
+          dragJSON: this.dragJSON,
+          dragStart: this.dragStartEntity,
+          dragNodes: this.dragEntities
+        }
+      )
     );
   }
 };
@@ -2547,7 +2565,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);