@flowgram.ai/renderer 0.5.1 → 0.5.3

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';
@@ -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;
 }
 
@@ -455,23 +453,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,7 +489,13 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     protected flowRenderStateEntity: FlowRendererStateEntity;
     protected selectConfigEntity: FlowSelectConfigEntity;
     private initialPosition;
-    private dragOffset;
+    private disableDragScroll;
+    private dragJSON?;
+    private onCreateNode?;
+    dragOffset: {
+        x: number;
+        y: number;
+    };
     get transitions(): FlowNodeTransitionData[];
     readonly rendererRegistry: FlowRendererRegistry;
     get dragStartEntity(): FlowNodeEntity | undefined;
@@ -493,7 +509,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,15 +518,14 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     startDrag(e: {
         clientX: number;
         clientY: number;
-    }, { dragStartEntity: startEntityFromProps, dragEntities, }: {
-        dragStartEntity: FlowNodeEntity;
-        dragEntities?: FlowNodeEntity[];
-    }, 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

@@ -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';
@@ -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;
 }
 
@@ -455,23 +453,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,7 +489,13 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     protected flowRenderStateEntity: FlowRendererStateEntity;
     protected selectConfigEntity: FlowSelectConfigEntity;
     private initialPosition;
-    private dragOffset;
+    private disableDragScroll;
+    private dragJSON?;
+    private onCreateNode?;
+    dragOffset: {
+        x: number;
+        y: number;
+    };
     get transitions(): FlowNodeTransitionData[];
     readonly rendererRegistry: FlowRendererRegistry;
     get dragStartEntity(): FlowNodeEntity | undefined;
@@ -493,7 +509,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,15 +518,14 @@ declare class FlowDragLayer extends Layer<FlowDragOptions> {
     startDrag(e: {
         clientX: number;
         clientY: number;
-    }, { dragStartEntity: startEntityFromProps, dragEntities, }: {
-        dragStartEntity: FlowNodeEntity;
-        dragEntities?: FlowNodeEntity[];
-    }, 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");
@@ -2337,6 +2331,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 +2372,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 +2393,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 +2413,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
@@ -2429,37 +2425,45 @@ 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})`;
-        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)) {
@@ -2473,17 +2477,25 @@ var FlowDragLayer = class extends import_core15.Layer {
    */
   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 === 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 +2503,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,19 +2515,33 @@ 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));
     }
   }
+  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()
-      },
-      /* @__PURE__ */ import_react15.default.createElement(DragComp, { dragStart: this.dragStartEntity, dragNodes: this.dragEntities })
+    return import_react_dom2.default.createPortal(
+      /* @__PURE__ */ import_react15.default.createElement(
+        "div",
+        {
+          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
     );
   }
 };
@@ -2524,7 +2550,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);