@flowgram.ai/free-container-plugin 0.2.27 → 0.2.29

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
+import * as _flowgram_ai_free_layout_core from '@flowgram.ai/free-layout-core';
 import { WorkflowNodeEntity } from '@flowgram.ai/free-layout-core';
+import * as _flowgram_ai_document from '@flowgram.ai/document';
 import { FlowNodeTransformData } from '@flowgram.ai/document';
 import * as _flowgram_ai_core from '@flowgram.ai/core';
 import React, { FC, CSSProperties, ReactNode } from 'react';
@@ -70,12 +72,8 @@ declare class NodeIntoContainerService {
     private listenDragToContainer;
     /** 监听节点拖拽出容器 */
     private dragOutContainer;
-    /** 获取重叠位置 */
-    private getCollisionTransform;
     /** 设置放置节点高亮 */
     private setDropNode;
-    /** 获取容器节点transforms */
-    private getContainerTransforms;
     /** 放置节点到容器 */
     private dropNodeToContainer;
     /** 拖拽节点 */
@@ -89,16 +87,6 @@ declare class NodeIntoContainerService {
     private isParent;
     /** 将节点移入容器 */
     private moveIntoContainer;
-    /**
-     * 如果存在容器节点，且传入鼠标坐标，需要用容器的坐标减去传入的鼠标坐标
-     */
-    private adjustSubNodePosition;
-    private isContainer;
-    /** 判断点是否在矩形内 */
-    private isPointInRect;
-    /** 判断两个矩形是否相交 */
-    private isRectIntersects;
-    private nextFrame;
 }
 
 declare const createContainerNodePlugin: _flowgram_ai_core.PluginCreator<WorkflowContainerPluginOptions>;
@@ -162,4 +150,26 @@ interface SubCanvasTipsProps {
 }
 declare const SubCanvasTips: ({ tipText, neverRemindText }: SubCanvasTipsProps) => React.JSX.Element | null;
 
-export { type NodeIntoContainerEvent, NodeIntoContainerService, type NodeIntoContainerState, NodeIntoContainerType, type NodeSize, SubCanvasBackground, SubCanvasBorder, SubCanvasRender, SubCanvasTips, type WorkflowContainerPluginOptions, createContainerNodePlugin, useNodeSize, useSyncNodeRenderSize };
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+declare const ContainerUtils: {
+    nextFrame: () => Promise<void>;
+    isContainer: (node?: _flowgram_ai_free_layout_core.WorkflowNodeEntity) => boolean;
+    adjustSubNodePosition: (params: {
+        targetNode: _flowgram_ai_free_layout_core.WorkflowNodeEntity;
+        containerNode: _flowgram_ai_free_layout_core.WorkflowNodeEntity;
+        containerPadding: _flowgram_ai_utils.PaddingSchema;
+    }) => _flowgram_ai_utils.IPoint;
+    getContainerTransforms: (allNodes: _flowgram_ai_free_layout_core.WorkflowNodeEntity[]) => _flowgram_ai_document.FlowNodeTransformData[];
+    getCollisionTransform: (params: {
+        transforms: _flowgram_ai_document.FlowNodeTransformData[];
+        targetRect?: _flowgram_ai_utils.Rectangle;
+        targetPoint?: _flowgram_ai_utils.PositionSchema;
+        withPadding?: boolean;
+        document: _flowgram_ai_free_layout_core.WorkflowDocument;
+    }) => _flowgram_ai_document.FlowNodeTransformData | undefined;
+};
+
+export { ContainerUtils, type NodeIntoContainerEvent, NodeIntoContainerService, type NodeIntoContainerState, NodeIntoContainerType, type NodeSize, SubCanvasBackground, SubCanvasBorder, SubCanvasRender, SubCanvasTips, type WorkflowContainerPluginOptions, createContainerNodePlugin, useNodeSize, useSyncNodeRenderSize };

package/dist/index.js

@@ -38,6 +38,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ContainerUtils: () => ContainerUtils,
   NodeIntoContainerService: () => NodeIntoContainerService,
   NodeIntoContainerType: () => NodeIntoContainerType,
   SubCanvasBackground: () => SubCanvasBackground,
@@ -60,15 +61,109 @@ var NodeIntoContainerType = /* @__PURE__ */ ((NodeIntoContainerType2) => {
 // src/node-into-container/service.ts
 var import_lodash = require("lodash");
 var import_inversify = require("inversify");
-var import_utils = require("@flowgram.ai/utils");
+var import_utils2 = require("@flowgram.ai/utils");
 var import_free_layout_core = require("@flowgram.ai/free-layout-core");
 var import_free_history_plugin = require("@flowgram.ai/free-history-plugin");
-var import_document = require("@flowgram.ai/document");
+var import_document2 = require("@flowgram.ai/document");
 var import_core = require("@flowgram.ai/core");
+
+// src/utils/next-frame.ts
+var nextFrame = async () => {
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+};
+
+// src/utils/is-container.ts
+var isContainer = (node) => node?.getNodeMeta().isContainer ?? false;
+
+// src/utils/get-container-transforms.ts
+var getContainerTransforms = (allNodes) => allNodes.filter((node) => {
+  if (node.originParent) {
+    return node.getNodeMeta().selectable && node.originParent.getNodeMeta().selectable;
+  }
+  return node.getNodeMeta().selectable;
+}).filter((node) => isContainer(node)).sort((a, b) => {
+  const aIndex = a.renderData.stackIndex;
+  const bIndex = b.renderData.stackIndex;
+  return bIndex - aIndex;
+}).map((node) => node.transform);
+
+// src/utils/get-collision-transform.ts
+var import_utils = require("@flowgram.ai/utils");
+
+// src/utils/is-rect-intersects.ts
+var isRectIntersects = (rectA, rectB) => {
+  const hasHorizontalOverlap = rectA.right > rectB.left && rectA.left < rectB.right;
+  const hasVerticalOverlap = rectA.bottom > rectB.top && rectA.top < rectB.bottom;
+  return hasHorizontalOverlap && hasVerticalOverlap;
+};
+
+// src/utils/is-point-in-rect.ts
+var isPointInRect = (point, rect) => point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
+
+// src/utils/get-collision-transform.ts
+var getCollisionTransform = (params) => {
+  const { targetRect, targetPoint, transforms, withPadding = false, document } = params;
+  const collisionTransform = transforms.find((transform) => {
+    const { bounds, entity } = transform;
+    const padding = withPadding ? document.layout.getPadding(entity) : { left: 0, right: 0 };
+    const transformRect = new import_utils.Rectangle(
+      bounds.x + padding.left + padding.right,
+      bounds.y,
+      bounds.width,
+      bounds.height
+    );
+    if (targetRect) {
+      return isRectIntersects(targetRect, transformRect);
+    }
+    if (targetPoint) {
+      return isPointInRect(targetPoint, transformRect);
+    }
+    return false;
+  });
+  return collisionTransform;
+};
+
+// src/utils/adjust-sub-node-position.ts
+var import_document = require("@flowgram.ai/document");
+var adjustSubNodePosition = (params) => {
+  const { targetNode, containerNode, containerPadding } = params;
+  if (containerNode.flowNodeType === import_document.FlowNodeBaseType.ROOT) {
+    return targetNode.transform.position;
+  }
+  const nodeWorldTransform = targetNode.transform.transform.worldTransform;
+  const containerWorldTransform = containerNode.transform.transform.worldTransform;
+  const nodePosition = {
+    x: nodeWorldTransform.tx,
+    y: nodeWorldTransform.ty
+  };
+  const isParentEmpty = !containerNode.children || containerNode.children.length === 0;
+  if (isParentEmpty) {
+    return {
+      x: 0,
+      y: containerPadding.top
+    };
+  } else {
+    return {
+      x: nodePosition.x - containerWorldTransform.tx,
+      y: nodePosition.y - containerWorldTransform.ty
+    };
+  }
+};
+
+// src/utils/index.ts
+var ContainerUtils = {
+  nextFrame,
+  isContainer,
+  adjustSubNodePosition,
+  getContainerTransforms,
+  getCollisionTransform
+};
+
+// src/node-into-container/service.ts
 var NodeIntoContainerService = class {
   constructor() {
-    this.emitter = new import_utils.Emitter();
-    this.toDispose = new import_utils.DisposableCollection();
+    this.emitter = new import_utils2.Emitter();
+    this.toDispose = new import_utils2.DisposableCollection();
     this.on = this.emitter.event;
   }
   init() {
@@ -88,14 +183,14 @@ var NodeIntoContainerService = class {
     const parentNode = node.parent;
     const containerNode = parentNode?.parent;
     const nodeJSON = this.document.toNodeJSON(node);
-    if (!parentNode || !containerNode || !this.isContainer(parentNode) || !nodeJSON.meta?.position) {
+    if (!parentNode || !containerNode || !ContainerUtils.isContainer(parentNode) || !nodeJSON.meta?.position) {
       return;
     }
     const parentTransform = parentNode.getData(import_core.TransformData);
     this.operationService.moveNode(node, {
       parent: containerNode
     });
-    await this.nextFrame();
+    await ContainerUtils.nextFrame();
     parentTransform.fireChange();
     this.operationService.updateNodePosition(node, {
       x: parentTransform.position.x + nodeJSON.meta.position.x,
@@ -112,7 +207,7 @@ var NodeIntoContainerService = class {
   canMoveOutContainer(node) {
     const parentNode = node.parent;
     const containerNode = parentNode?.parent;
-    if (!parentNode || !containerNode || !this.isContainer(parentNode)) {
+    if (!parentNode || !containerNode || !ContainerUtils.isContainer(parentNode)) {
       return false;
     }
     const canDrop = this.dragService.canDropToNode({
@@ -135,7 +230,7 @@ var NodeIntoContainerService = class {
     if (dragNode.parent === sourceParent) {
       return;
     }
-    if (dragNode.parent?.flowNodeType === import_document.FlowNodeBaseType.GROUP || sourceParent?.flowNodeType === import_document.FlowNodeBaseType.GROUP) {
+    if (dragNode.parent?.flowNodeType === import_document2.FlowNodeBaseType.GROUP || sourceParent?.flowNodeType === import_document2.FlowNodeBaseType.GROUP) {
       return;
     }
     await this.removeNodeLines(dragNode);
@@ -149,7 +244,7 @@ var NodeIntoContainerService = class {
       }
       line.dispose();
     });
-    await this.nextFrame();
+    await ContainerUtils.nextFrame();
   }
   /** 初始化状态 */
   initState() {
@@ -177,7 +272,7 @@ var NodeIntoContainerService = class {
         }
         this.historyService.startTransaction();
         this.state.isDraggingNode = true;
-        this.state.transforms = this.getContainerTransforms();
+        this.state.transforms = ContainerUtils.getContainerTransforms(this.document.getAllNodes());
         this.state.dragNode = this.selectService.selectedNodes[0];
         this.state.dropNode = void 0;
         this.state.sourceParent = this.state.dragNode?.parent;
@@ -215,38 +310,16 @@ var NodeIntoContainerService = class {
     this.moveOutContainer({ node: dragNode });
     this.state.isSkipEvent = true;
     event.dragger.stop(event.dragEvent.clientX, event.dragEvent.clientY);
-    await this.nextFrame();
+    await ContainerUtils.nextFrame();
     this.dragService.startDragSelectedNodes(event.triggerEvent);
   }
-  /** 获取重叠位置 */
-  getCollisionTransform(params) {
-    const { targetRect, targetPoint, transforms, withPadding = false } = params;
-    const collisionTransform = transforms.find((transform) => {
-      const { bounds, entity } = transform;
-      const padding = withPadding ? this.document.layout.getPadding(entity) : { left: 0, right: 0 };
-      const transformRect = new import_utils.Rectangle(
-        bounds.x + padding.left + padding.right,
-        bounds.y,
-        bounds.width,
-        bounds.height
-      );
-      if (targetRect) {
-        return this.isRectIntersects(targetRect, transformRect);
-      }
-      if (targetPoint) {
-        return this.isPointInRect(targetPoint, transformRect);
-      }
-      return false;
-    });
-    return collisionTransform;
-  }
   /** 设置放置节点高亮 */
   setDropNode(dropNode) {
     if (this.state.dropNode === dropNode) {
       return;
     }
     if (this.state.dropNode) {
-      const renderData2 = this.state.dropNode.getData(import_document.FlowNodeRenderData);
+      const renderData2 = this.state.dropNode.getData(import_document2.FlowNodeRenderData);
       const renderDom2 = renderData2.node?.children?.[0];
       if (renderDom2) {
         renderDom2.classList.remove("selected");
@@ -256,25 +329,12 @@ var NodeIntoContainerService = class {
     if (!dropNode) {
       return;
     }
-    const renderData = dropNode.getData(import_document.FlowNodeRenderData);
+    const renderData = dropNode.getData(import_document2.FlowNodeRenderData);
     const renderDom = renderData.node?.children?.[0];
     if (renderDom) {
       renderDom.classList.add("selected");
     }
   }
-  /** 获取容器节点transforms */
-  getContainerTransforms() {
-    return this.document.getAllNodes().filter((node) => {
-      if (node.originParent) {
-        return node.getNodeMeta().selectable && node.originParent.getNodeMeta().selectable;
-      }
-      return node.getNodeMeta().selectable;
-    }).filter((node) => this.isContainer(node)).sort((a, b) => {
-      const aIndex = a.renderData.stackIndex;
-      const bIndex = b.renderData.stackIndex;
-      return bIndex - aIndex;
-    }).map((node) => node.transform);
-  }
   /** 放置节点到容器 */
   async dropNodeToContainer() {
     const { dropNode, dragNode, isDraggingNode } = this.state;
@@ -296,9 +356,10 @@ var NodeIntoContainerService = class {
     const availableTransforms = transforms.filter(
       (transform) => transform.entity.id !== dragNode.id
     );
-    const collisionTransform = this.getCollisionTransform({
+    const collisionTransform = ContainerUtils.getCollisionTransform({
       targetPoint: mousePos,
-      transforms: availableTransforms
+      transforms: availableTransforms,
+      document: this.document
     });
     const dropNode = collisionTransform?.entity;
     const canDrop = this.canDropToContainer({
@@ -317,7 +378,7 @@ var NodeIntoContainerService = class {
     if (!dropNode || !isDropContainer || this.isParent(dragNode, dropNode)) {
       return false;
     }
-    if (dragNode.flowNodeType === import_document.FlowNodeBaseType.GROUP && dropNode.flowNodeType !== import_document.FlowNodeBaseType.GROUP) {
+    if (dragNode.flowNodeType === import_document2.FlowNodeBaseType.GROUP && dropNode.flowNodeType !== import_document2.FlowNodeBaseType.GROUP) {
       return false;
     }
     const canDrop = this.dragService.canDropToNode({
@@ -349,8 +410,14 @@ var NodeIntoContainerService = class {
     this.operationService.moveNode(node, {
       parent: containerNode
     });
-    this.operationService.updateNodePosition(node, this.adjustSubNodePosition(node, containerNode));
-    await this.nextFrame();
+    const containerPadding = this.document.layout.getPadding(containerNode);
+    const position = ContainerUtils.adjustSubNodePosition({
+      targetNode: node,
+      containerNode,
+      containerPadding
+    });
+    this.operationService.updateNodePosition(node, position);
+    await ContainerUtils.nextFrame();
     this.emitter.fire({
       type: "in" /* In */,
       node,
@@ -358,49 +425,6 @@ var NodeIntoContainerService = class {
       targetContainer: containerNode
     });
   }
-  /**
-   * 如果存在容器节点，且传入鼠标坐标，需要用容器的坐标减去传入的鼠标坐标
-   */
-  adjustSubNodePosition(targetNode, containerNode) {
-    if (containerNode.flowNodeType === import_document.FlowNodeBaseType.ROOT) {
-      return targetNode.transform.position;
-    }
-    const nodeWorldTransform = targetNode.transform.transform.worldTransform;
-    const containerWorldTransform = containerNode.transform.transform.worldTransform;
-    const nodePosition = {
-      x: nodeWorldTransform.tx,
-      y: nodeWorldTransform.ty
-    };
-    const isParentEmpty = !containerNode.children || containerNode.children.length === 0;
-    const containerPadding = this.document.layout.getPadding(containerNode);
-    if (isParentEmpty) {
-      return {
-        x: 0,
-        y: containerPadding.top
-      };
-    } else {
-      return {
-        x: nodePosition.x - containerWorldTransform.tx,
-        y: nodePosition.y - containerWorldTransform.ty
-      };
-    }
-  }
-  isContainer(node) {
-    return node?.getNodeMeta().isContainer ?? false;
-  }
-  /** 判断点是否在矩形内 */
-  isPointInRect(point, rect) {
-    return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
-  }
-  /** 判断两个矩形是否相交 */
-  isRectIntersects(rectA, rectB) {
-    const hasHorizontalOverlap = rectA.right > rectB.left && rectA.left < rectB.right;
-    const hasVerticalOverlap = rectA.bottom > rectB.top && rectA.top < rectB.bottom;
-    return hasHorizontalOverlap && hasVerticalOverlap;
-  }
-  async nextFrame() {
-    await new Promise((resolve) => requestAnimationFrame(resolve));
-  }
 };
 __decorateClass([
   (0, import_inversify.inject)(import_free_layout_core.WorkflowDragService)
@@ -449,12 +473,12 @@ var createContainerNodePlugin = (0, import_core2.definePluginCreator)({
 // src/sub-canvas/hooks/use-node-size.ts
 var import_react = require("react");
 var import_free_layout_core2 = require("@flowgram.ai/free-layout-core");
-var import_document2 = require("@flowgram.ai/document");
+var import_document3 = require("@flowgram.ai/document");
 var useNodeSize = () => {
   const node = (0, import_free_layout_core2.useCurrentEntity)();
   const nodeMeta = node.getNodeMeta();
-  const { size = { width: 300, height: 200 }, isContainer } = nodeMeta;
-  const transform = node.getData(import_document2.FlowNodeTransformData);
+  const { size = { width: 300, height: 200 }, isContainer: isContainer2 } = nodeMeta;
+  const transform = node.getData(import_document3.FlowNodeTransformData);
   const [width, setWidth] = (0, import_react.useState)(size.width);
   const [height, setHeight] = (0, import_react.useState)(size.height);
   const updatePorts = () => {
@@ -480,7 +504,7 @@ var useNodeSize = () => {
   (0, import_react.useEffect)(() => {
     updateSize();
   }, []);
-  if (!isContainer) {
+  if (!isContainer2) {
     return;
   }
   return {
@@ -856,6 +880,7 @@ var SubCanvasRender = ({
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ContainerUtils,
   NodeIntoContainerService,
   NodeIntoContainerType,
   SubCanvasBackground,