@flowgram.ai/renderer 0.5.0 → 0.5.2

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
-import { Rectangle, Disposable, CacheOriginItem, ScrollSchema } from '@flowgram.ai/utils';
-import { LABEL_SIDE_TYPE, FlowNodeTransitionData, FlowNodeEntity, FlowNodeTransformData, FlowDocument, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity } from '@flowgram.ai/document';
+import { Rectangle, Disposable, CacheOriginItem, Xor, ScrollSchema } from '@flowgram.ai/utils';
+import { LABEL_SIDE_TYPE, FlowNodeTransitionData, FlowNodeEntity, FlowNodeTransformData, FlowDocument, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity, FlowNodeJSON } from '@flowgram.ai/document';
 import { ConfigEntity, EntityOpts, PlaygroundDragEvent, PositionSchema, SizeSchema, Layer, PipelineRegistry, LayerRegistry, PlaygroundConfigEntity, PlaygroundDrag, EditorStateConfigEntity, LayerOptions, ContextMenuService, SelectionService, PlaygroundConfig, CommandRegistry } from '@flowgram.ai/core';
 import React from 'react';
 import { throttle } from 'lodash-es';
@@ -455,23 +455,35 @@ declare class FlowScrollBarLayer extends Layer<ScrollBarOptions> {
  * SPDX-License-Identifier: MIT
  */
 
+type StartDragProps = {
+    dragEntities?: FlowNodeEntity[];
+} & Xor<{
+    dragStartEntity: FlowNodeEntity;
+}, {
+    dragJSON: FlowNodeJSON;
+    isBranch?: boolean;
+    onCreateNode: (json: FlowNodeJSON, dropEntity: FlowNodeEntity) => Promise<FlowNodeEntity>;
+}>;
 interface FlowDragOptions {
     onDrop?: (opts: {
         dragNodes: FlowNodeEntity[];
         dropNode: FlowNodeEntity;
     }) => void;
     canDrop?: (opts: {
-        dragNodes: FlowNodeEntity[];
         dropNode: FlowNodeEntity;
         isBranch?: boolean;
-    }) => boolean;
+    } & Xor<{
+        dragNodes: FlowNodeEntity[];
+    }, {
+        dragJSON: FlowNodeJSON;
+    }>) => boolean;
 }
 /**
  * 监听节点的激活状态
  */
 declare class FlowDragLayer extends Layer<FlowDragOptions> {
     readonly document: FlowDocument;
-    readonly service: FlowDragService;
+    readonly flowDragService: FlowDragService;
     transforms: FlowNodeTransformData[];
     protected editorStateConfig: EditorStateConfigEntity;
     protected playgroundConfigEntity: PlaygroundConfigEntity;
@@ -479,6 +491,9 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     protected flowRenderStateEntity: FlowRendererStateEntity;
     protected selectConfigEntity: FlowSelectConfigEntity;
     private initialPosition;
+    private disableDragScroll;
+    private dragJSON?;
+    private onCreateNode?;
     private dragOffset;
     get transitions(): FlowNodeTransitionData[];
     readonly rendererRegistry: FlowRendererRegistry;
@@ -493,7 +508,7 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     setDraggingStatus(status: boolean): void;
     dragEnable(e: MouseEvent): boolean;
     handleMouseMove(event: MouseEvent): void;
-    handleMouseUp(): void;
+    handleMouseUp(): Promise<void>;
     protected _dragger: PlaygroundDrag<undefined>;
     /**
      * 开始拖拽事件
@@ -502,12 +517,10 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     startDrag(e: {
         clientX: number;
         clientY: number;
-    }, { dragStartEntity: startEntityFromProps, dragEntities, }: {
-        dragStartEntity: FlowNodeEntity;
-        dragEntities?: FlowNodeEntity[];
-    }, options?: {
+    }, { dragStartEntity: startEntityFromProps, dragEntities, dragJSON, onCreateNode }: StartDragProps, options?: {
         dragOffsetX?: number;
         dragOffsetY?: number;
+        disableDragScroll?: boolean;
     }): Promise<void>;
     onReady(): void;
     render(): React.JSX.Element;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
-import { Rectangle, Disposable, CacheOriginItem, ScrollSchema } from '@flowgram.ai/utils';
-import { LABEL_SIDE_TYPE, FlowNodeTransitionData, FlowNodeEntity, FlowNodeTransformData, FlowDocument, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity } from '@flowgram.ai/document';
+import { Rectangle, Disposable, CacheOriginItem, Xor, ScrollSchema } from '@flowgram.ai/utils';
+import { LABEL_SIDE_TYPE, FlowNodeTransitionData, FlowNodeEntity, FlowNodeTransformData, FlowDocument, FlowDocumentTransformerEntity, FlowNodeRenderData, FlowDragService, FlowRendererStateEntity, FlowNodeJSON } from '@flowgram.ai/document';
 import { ConfigEntity, EntityOpts, PlaygroundDragEvent, PositionSchema, SizeSchema, Layer, PipelineRegistry, LayerRegistry, PlaygroundConfigEntity, PlaygroundDrag, EditorStateConfigEntity, LayerOptions, ContextMenuService, SelectionService, PlaygroundConfig, CommandRegistry } from '@flowgram.ai/core';
 import React from 'react';
 import { throttle } from 'lodash-es';
@@ -455,23 +455,35 @@ declare class FlowScrollBarLayer extends Layer<ScrollBarOptions> {
  * SPDX-License-Identifier: MIT
  */
 
+type StartDragProps = {
+    dragEntities?: FlowNodeEntity[];
+} & Xor<{
+    dragStartEntity: FlowNodeEntity;
+}, {
+    dragJSON: FlowNodeJSON;
+    isBranch?: boolean;
+    onCreateNode: (json: FlowNodeJSON, dropEntity: FlowNodeEntity) => Promise<FlowNodeEntity>;
+}>;
 interface FlowDragOptions {
     onDrop?: (opts: {
         dragNodes: FlowNodeEntity[];
         dropNode: FlowNodeEntity;
     }) => void;
     canDrop?: (opts: {
-        dragNodes: FlowNodeEntity[];
         dropNode: FlowNodeEntity;
         isBranch?: boolean;
-    }) => boolean;
+    } & Xor<{
+        dragNodes: FlowNodeEntity[];
+    }, {
+        dragJSON: FlowNodeJSON;
+    }>) => boolean;
 }
 /**
  * 监听节点的激活状态
  */
 declare class FlowDragLayer extends Layer<FlowDragOptions> {
     readonly document: FlowDocument;
-    readonly service: FlowDragService;
+    readonly flowDragService: FlowDragService;
     transforms: FlowNodeTransformData[];
     protected editorStateConfig: EditorStateConfigEntity;
     protected playgroundConfigEntity: PlaygroundConfigEntity;
@@ -479,6 +491,9 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     protected flowRenderStateEntity: FlowRendererStateEntity;
     protected selectConfigEntity: FlowSelectConfigEntity;
     private initialPosition;
+    private disableDragScroll;
+    private dragJSON?;
+    private onCreateNode?;
     private dragOffset;
     get transitions(): FlowNodeTransitionData[];
     readonly rendererRegistry: FlowRendererRegistry;
@@ -493,7 +508,7 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     setDraggingStatus(status: boolean): void;
     dragEnable(e: MouseEvent): boolean;
     handleMouseMove(event: MouseEvent): void;
-    handleMouseUp(): void;
+    handleMouseUp(): Promise<void>;
     protected _dragger: PlaygroundDrag<undefined>;
     /**
      * 开始拖拽事件
@@ -502,12 +517,10 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     startDrag(e: {
         clientX: number;
         clientY: number;
-    }, { dragStartEntity: startEntityFromProps, dragEntities, }: {
-        dragStartEntity: FlowNodeEntity;
-        dragEntities?: FlowNodeEntity[];
-    }, options?: {
+    }, { dragStartEntity: startEntityFromProps, dragEntities, dragJSON, onCreateNode }: StartDragProps, options?: {
         dragOffsetX?: number;
         dragOffsetY?: number;
+        disableDragScroll?: boolean;
     }): Promise<void>;
     onReady(): void;
     render(): React.JSX.Element;

package/dist/index.js

@@ -2337,6 +2337,7 @@ var DEFAULT_DRAG_OFFSET_Y = 8;
 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
@@ -2377,19 +2378,20 @@ var FlowDragLayer = class extends import_core15.Layer {
     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) {
@@ -2397,7 +2399,7 @@ var FlowDragLayer = class extends import_core15.Layer {
         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 import_utils22.Rectangle(
           dragBlockX,
           dragBlockY,
@@ -2417,7 +2419,7 @@ var FlowDragLayer = class extends import_core15.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
@@ -2433,24 +2435,30 @@ var FlowDragLayer = class extends import_core15.Layer {
         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();
         }
       }
@@ -2460,6 +2468,8 @@ var FlowDragLayer = class extends import_core15.Layer {
       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)) {
@@ -2471,19 +2481,20 @@ var FlowDragLayer = class extends import_core15.Layer {
    * 开始拖拽事件
    * @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 === 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 = {
@@ -2491,7 +2502,7 @@ var FlowDragLayer = class extends import_core15.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() {
@@ -2503,7 +2514,7 @@ var FlowDragLayer = class extends import_core15.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));
     }
   }
   render() {
@@ -2515,7 +2526,14 @@ var FlowDragLayer = class extends import_core15.Layer {
         style: { position: "absolute", zIndex: 99999, visibility: "hidden" },
         onMouseEnter: (e) => e.stopPropagation()
       },
-      /* @__PURE__ */ import_react15.default.createElement(DragComp, { dragStart: this.dragStartEntity, dragNodes: this.dragEntities })
+      /* @__PURE__ */ import_react15.default.createElement(
+        DragComp,
+        {
+          dragJSON: this.dragJSON,
+          dragStart: this.dragStartEntity,
+          dragNodes: this.dragEntities
+        }
+      )
     );
   }
 };
@@ -2524,7 +2542,7 @@ __decorateClass([
 ], FlowDragLayer.prototype, "document", 2);
 __decorateClass([
   (0, import_inversify9.inject)(import_document18.FlowDragService)
-], FlowDragLayer.prototype, "service", 2);
+], FlowDragLayer.prototype, "flowDragService", 2);
 __decorateClass([
   (0, import_core15.observeEntityDatas)(import_document18.FlowNodeEntity, import_document18.FlowNodeTransformData)
 ], FlowDragLayer.prototype, "transforms", 2);