@flowgram.ai/free-layout-core 0.1.0-alpha.11 → 0.1.0-alpha.12

package/dist/index.d.mts

@@ -2,8 +2,8 @@ import { PlaygroundConfigEntity, CommandService, PlaygroundDragEvent, EntityData
 export { bindConfigEntity, useConfigEntity, useEntities, useEntityDataFromContext, useEntityFromContext, useListenEvents, usePlayground, usePlaygroundContainer, usePlaygroundContext, usePlaygroundLatest, useRefresh, useService } from '@flowgram.ai/core';
 import { NodeFormProps } from '@flowgram.ai/node';
 import { FlowOperationBaseService, FlowNodeType, FlowOperationBaseServiceImpl, FlowNodeEntityOrId, FlowNodeEntity } from '@flowgram.ai/document';
-import { W as WorkflowHoverService, a as WorkflowDocument, b as WorkflowLinesManager, c as WorkflowSelectService, d as WorkflowDocumentOptions, L as LineEventProps, N as NodesDragEvent, e as WorkflowNodeJSON, f as WorkflowPortEntity, g as WorkflowLineEntity, O as OnDragLineEnd, h as WorkflowPorts, i as WorkflowPortType, j as WorkflowPort, k as LineRenderType, l as WorkflowLineRenderContribution, m as LinePosition } from './workflow-line-entity-SJhFU8K_.mjs';
-export { K as HoverPosition, C as LINE_HOVER_DISTANCE, v as LineColor, w as LineColors, u as LineType, z as NodesDragEndEvent, y as NodesDragStartEvent, A as NodesDraggingEvent, P as POINT_RADIUS, H as PORT_SIZE, o as WORKFLOW_LINE_ENTITY, M as WorkfloEntityHoverable, s as WorkflowContentChangeEvent, r as WorkflowContentChangeType, R as WorkflowDocumentOptionsDefault, Q as WorkflowDocumentProvider, J as WorkflowEntityHoverable, q as WorkflowJSON, E as WorkflowLineEntityOpts, F as WorkflowLineInfo, D as WorkflowLinePortInfo, x as WorkflowLineRenderContributionFactory, G as WorkflowLineUIState, t as WorkflowNodeMeta, I as WorkflowPortEntityOpts, p as domReactToBounds, n as getPortEntityId, B as onDragLineEndParams } from './workflow-line-entity-SJhFU8K_.mjs';
+import { W as WorkflowHoverService, a as WorkflowDocument, b as WorkflowLinesManager, c as WorkflowSelectService, d as WorkflowDocumentOptions, L as LineEventProps, N as NodesDragEvent, e as WorkflowNodeJSON, f as WorkflowPortEntity, g as WorkflowLineEntity, O as OnDragLineEnd, h as WorkflowJSON, i as WorkflowPorts, j as WorkflowPortType, k as WorkflowPort, l as LineRenderType, m as WorkflowLineRenderContribution, n as LinePosition } from './workflow-line-entity-Iq1OHmuK.mjs';
+export { K as HoverPosition, C as LINE_HOVER_DISTANCE, v as LineColor, w as LineColors, u as LineType, z as NodesDragEndEvent, y as NodesDragStartEvent, A as NodesDraggingEvent, P as POINT_RADIUS, H as PORT_SIZE, p as WORKFLOW_LINE_ENTITY, M as WorkfloEntityHoverable, s as WorkflowContentChangeEvent, r as WorkflowContentChangeType, R as WorkflowDocumentOptionsDefault, Q as WorkflowDocumentProvider, J as WorkflowEntityHoverable, E as WorkflowLineEntityOpts, F as WorkflowLineInfo, D as WorkflowLinePortInfo, x as WorkflowLineRenderContributionFactory, G as WorkflowLineUIState, t as WorkflowNodeMeta, I as WorkflowPortEntityOpts, q as domReactToBounds, o as getPortEntityId, B as onDragLineEndParams } from './workflow-line-entity-Iq1OHmuK.mjs';
 import { W as WorkflowNodeEntity } from './workflow-sub-canvas-IQzlYvPD.mjs';
 export { a as WorkflowSubCanvas } from './workflow-sub-canvas-IQzlYvPD.mjs';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
@@ -323,6 +323,13 @@ declare function useWorkflowDocument(): WorkflowDocument;
  */
 declare function usePlaygroundReadonlyState(listenChange?: boolean): boolean;
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare const buildGroupJSON: (json: WorkflowJSON) => WorkflowJSON;
+
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
@@ -474,6 +481,7 @@ declare class WorkflowNodeLinesData extends EntityData<WorkflowNodeLines> {
      * 输出线条
      */
     get outputLines(): WorkflowLineEntity[];
+    get allLines(): WorkflowLineEntity[];
     /**
      * 输入节点
      */
@@ -562,4 +570,4 @@ declare class WorkflowSimpleLineContribution implements WorkflowLineRenderContri
     private projectPointOnLine;
 }
 
-export { EditorCursorState, InteractiveType, LineEventProps, LinePosition, LineRenderType, NodePostionUpdateEvent, type NodeRenderReturnType, NodesDragEvent, OnDragLineEnd, type PositionMap, type StraightData, WorkflowCommands, WorkflowDocument, WorkflowDocumentContainerModule, WorkflowDocumentOptions, WorkflowDragService, WorkflowHoverService, WorkflowLineEntity, WorkflowLineRenderContribution, WorkflowLineRenderData, type WorkflowLineRenderDataSchema, WorkflowLinesManager, WorkflowNodeEntity, WorkflowNodeJSON, type WorkflowNodeLines, WorkflowNodeLinesData, WorkflowNodePortsData, WorkflowOperationBaseService, WorkflowOperationBaseServiceImpl, WorkflowPort, WorkflowPortEntity, WorkflowPortType, WorkflowPorts, WorkflowResetLayoutService, WorkflowSelectService, WorkflowSimpleLineContribution, fitView, getAntiOverlapPosition, nanoid, useCurrentDomNode, useCurrentEntity, useNodeRender, usePlaygroundReadonlyState, useWorkflowDocument };
+export { EditorCursorState, InteractiveType, LineEventProps, LinePosition, LineRenderType, NodePostionUpdateEvent, type NodeRenderReturnType, NodesDragEvent, OnDragLineEnd, type PositionMap, type StraightData, WorkflowCommands, WorkflowDocument, WorkflowDocumentContainerModule, WorkflowDocumentOptions, WorkflowDragService, WorkflowHoverService, WorkflowJSON, WorkflowLineEntity, WorkflowLineRenderContribution, WorkflowLineRenderData, type WorkflowLineRenderDataSchema, WorkflowLinesManager, WorkflowNodeEntity, WorkflowNodeJSON, type WorkflowNodeLines, WorkflowNodeLinesData, WorkflowNodePortsData, WorkflowOperationBaseService, WorkflowOperationBaseServiceImpl, WorkflowPort, WorkflowPortEntity, WorkflowPortType, WorkflowPorts, WorkflowResetLayoutService, WorkflowSelectService, WorkflowSimpleLineContribution, buildGroupJSON, fitView, getAntiOverlapPosition, nanoid, useCurrentDomNode, useCurrentEntity, useNodeRender, usePlaygroundReadonlyState, useWorkflowDocument };

package/dist/index.d.ts

@@ -2,8 +2,8 @@ import { PlaygroundConfigEntity, CommandService, PlaygroundDragEvent, EntityData
 export { bindConfigEntity, useConfigEntity, useEntities, useEntityDataFromContext, useEntityFromContext, useListenEvents, usePlayground, usePlaygroundContainer, usePlaygroundContext, usePlaygroundLatest, useRefresh, useService } from '@flowgram.ai/core';
 import { NodeFormProps } from '@flowgram.ai/node';
 import { FlowOperationBaseService, FlowNodeType, FlowOperationBaseServiceImpl, FlowNodeEntityOrId, FlowNodeEntity } from '@flowgram.ai/document';
-import { W as WorkflowHoverService, a as WorkflowDocument, b as WorkflowLinesManager, c as WorkflowSelectService, d as WorkflowDocumentOptions, L as LineEventProps, N as NodesDragEvent, e as WorkflowNodeJSON, f as WorkflowPortEntity, g as WorkflowLineEntity, O as OnDragLineEnd, h as WorkflowPorts, i as WorkflowPortType, j as WorkflowPort, k as LineRenderType, l as WorkflowLineRenderContribution, m as LinePosition } from './workflow-line-entity-Z4omkx2m.js';
-export { K as HoverPosition, C as LINE_HOVER_DISTANCE, v as LineColor, w as LineColors, u as LineType, z as NodesDragEndEvent, y as NodesDragStartEvent, A as NodesDraggingEvent, P as POINT_RADIUS, H as PORT_SIZE, o as WORKFLOW_LINE_ENTITY, M as WorkfloEntityHoverable, s as WorkflowContentChangeEvent, r as WorkflowContentChangeType, R as WorkflowDocumentOptionsDefault, Q as WorkflowDocumentProvider, J as WorkflowEntityHoverable, q as WorkflowJSON, E as WorkflowLineEntityOpts, F as WorkflowLineInfo, D as WorkflowLinePortInfo, x as WorkflowLineRenderContributionFactory, G as WorkflowLineUIState, t as WorkflowNodeMeta, I as WorkflowPortEntityOpts, p as domReactToBounds, n as getPortEntityId, B as onDragLineEndParams } from './workflow-line-entity-Z4omkx2m.js';
+import { W as WorkflowHoverService, a as WorkflowDocument, b as WorkflowLinesManager, c as WorkflowSelectService, d as WorkflowDocumentOptions, L as LineEventProps, N as NodesDragEvent, e as WorkflowNodeJSON, f as WorkflowPortEntity, g as WorkflowLineEntity, O as OnDragLineEnd, h as WorkflowJSON, i as WorkflowPorts, j as WorkflowPortType, k as WorkflowPort, l as LineRenderType, m as WorkflowLineRenderContribution, n as LinePosition } from './workflow-line-entity-LhmV98jq.js';
+export { K as HoverPosition, C as LINE_HOVER_DISTANCE, v as LineColor, w as LineColors, u as LineType, z as NodesDragEndEvent, y as NodesDragStartEvent, A as NodesDraggingEvent, P as POINT_RADIUS, H as PORT_SIZE, p as WORKFLOW_LINE_ENTITY, M as WorkfloEntityHoverable, s as WorkflowContentChangeEvent, r as WorkflowContentChangeType, R as WorkflowDocumentOptionsDefault, Q as WorkflowDocumentProvider, J as WorkflowEntityHoverable, E as WorkflowLineEntityOpts, F as WorkflowLineInfo, D as WorkflowLinePortInfo, x as WorkflowLineRenderContributionFactory, G as WorkflowLineUIState, t as WorkflowNodeMeta, I as WorkflowPortEntityOpts, q as domReactToBounds, o as getPortEntityId, B as onDragLineEndParams } from './workflow-line-entity-LhmV98jq.js';
 import { W as WorkflowNodeEntity } from './workflow-sub-canvas-IQzlYvPD.js';
 export { a as WorkflowSubCanvas } from './workflow-sub-canvas-IQzlYvPD.js';
 import * as _flowgram_ai_utils from '@flowgram.ai/utils';
@@ -323,6 +323,13 @@ declare function useWorkflowDocument(): WorkflowDocument;
  */
 declare function usePlaygroundReadonlyState(listenChange?: boolean): boolean;
 
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+declare const buildGroupJSON: (json: WorkflowJSON) => WorkflowJSON;
+
 /**
  * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
  * SPDX-License-Identifier: MIT
@@ -474,6 +481,7 @@ declare class WorkflowNodeLinesData extends EntityData<WorkflowNodeLines> {
      * 输出线条
      */
     get outputLines(): WorkflowLineEntity[];
+    get allLines(): WorkflowLineEntity[];
     /**
      * 输入节点
      */
@@ -562,4 +570,4 @@ declare class WorkflowSimpleLineContribution implements WorkflowLineRenderContri
     private projectPointOnLine;
 }
 
-export { EditorCursorState, InteractiveType, LineEventProps, LinePosition, LineRenderType, NodePostionUpdateEvent, type NodeRenderReturnType, NodesDragEvent, OnDragLineEnd, type PositionMap, type StraightData, WorkflowCommands, WorkflowDocument, WorkflowDocumentContainerModule, WorkflowDocumentOptions, WorkflowDragService, WorkflowHoverService, WorkflowLineEntity, WorkflowLineRenderContribution, WorkflowLineRenderData, type WorkflowLineRenderDataSchema, WorkflowLinesManager, WorkflowNodeEntity, WorkflowNodeJSON, type WorkflowNodeLines, WorkflowNodeLinesData, WorkflowNodePortsData, WorkflowOperationBaseService, WorkflowOperationBaseServiceImpl, WorkflowPort, WorkflowPortEntity, WorkflowPortType, WorkflowPorts, WorkflowResetLayoutService, WorkflowSelectService, WorkflowSimpleLineContribution, fitView, getAntiOverlapPosition, nanoid, useCurrentDomNode, useCurrentEntity, useNodeRender, usePlaygroundReadonlyState, useWorkflowDocument };
+export { EditorCursorState, InteractiveType, LineEventProps, LinePosition, LineRenderType, NodePostionUpdateEvent, type NodeRenderReturnType, NodesDragEvent, OnDragLineEnd, type PositionMap, type StraightData, WorkflowCommands, WorkflowDocument, WorkflowDocumentContainerModule, WorkflowDocumentOptions, WorkflowDragService, WorkflowHoverService, WorkflowJSON, WorkflowLineEntity, WorkflowLineRenderContribution, WorkflowLineRenderData, type WorkflowLineRenderDataSchema, WorkflowLinesManager, WorkflowNodeEntity, WorkflowNodeJSON, type WorkflowNodeLines, WorkflowNodeLinesData, WorkflowNodePortsData, WorkflowOperationBaseService, WorkflowOperationBaseServiceImpl, WorkflowPort, WorkflowPortEntity, WorkflowPortType, WorkflowPorts, WorkflowResetLayoutService, WorkflowSelectService, WorkflowSimpleLineContribution, buildGroupJSON, fitView, getAntiOverlapPosition, nanoid, useCurrentDomNode, useCurrentEntity, useNodeRender, usePlaygroundReadonlyState, useWorkflowDocument };

package/dist/index.js

@@ -59,6 +59,7 @@ __export(src_exports, {
   WorkflowSelectService: () => WorkflowSelectService,
   WorkflowSimpleLineContribution: () => WorkflowSimpleLineContribution,
   bindConfigEntity: () => import_core3.bindConfigEntity,
+  buildGroupJSON: () => buildGroupJSON,
   compose: () => import_utils.compose,
   composeAsync: () => import_utils.composeAsync,
   delay: () => import_utils4.delay,
@@ -105,7 +106,7 @@ var import_core25 = require("@flowgram.ai/core");
 var import_react2 = require("react");
 var import_reactive = require("@flowgram.ai/reactive");
 var import_node = require("@flowgram.ai/node");
-var import_document12 = require("@flowgram.ai/document");
+var import_document13 = require("@flowgram.ai/document");
 var import_core21 = require("@flowgram.ai/core");
 
 // src/service/workflow-select-service.ts
@@ -117,6 +118,34 @@ var import_utils9 = require("@flowgram.ai/utils");
 var import_core3 = require("@flowgram.ai/core");
 var import_utils4 = require("@flowgram.ai/utils");
 
+// src/utils/build-group-json.ts
+var import_document = require("@flowgram.ai/document");
+var buildGroupJSON = (json) => {
+  const { nodes, edges } = json;
+  const groupJSONs = nodes.filter(
+    (nodeJSON) => nodeJSON.type === import_document.FlowNodeBaseType.GROUP
+  );
+  const nodeJSONMap = new Map(nodes.map((n) => [n.id, n]));
+  const groupNodeJSONs = groupJSONs.map((groupJSON) => {
+    const groupBlocks = (groupJSON.data.blockIDs ?? []).map((blockID) => nodeJSONMap.get(blockID)).filter(Boolean);
+    const groupEdges = edges?.filter(
+      (edge) => groupBlocks.some((block) => block.id === edge.sourceNodeID || block.id === edge.targetNodeID)
+    );
+    const groupNodeJSON = {
+      ...groupJSON,
+      blocks: groupBlocks,
+      edges: groupEdges
+    };
+    return groupNodeJSON;
+  });
+  const groupBlockSet = new Set(groupJSONs.map((groupJSON) => groupJSON.data.blockIDs).flat());
+  const processedNodes = nodes.filter((nodeJSON) => !groupBlockSet.has(nodeJSON.id)).concat(groupNodeJSONs);
+  return {
+    nodes: processedNodes,
+    edges
+  };
+};
+
 // src/utils/nanoid.ts
 var import_nanoid = require("nanoid");
 function nanoid(n) {
@@ -170,8 +199,8 @@ function domReactToBounds(react) {
 }
 
 // src/entities/workflow-node-entity.ts
-var import_document = require("@flowgram.ai/document");
-var WorkflowNodeEntity = import_document.FlowNodeEntity;
+var import_document2 = require("@flowgram.ai/document");
+var WorkflowNodeEntity = import_document2.FlowNodeEntity;
 
 // src/entities/workflow-line-entity.ts
 var import_lodash_es2 = require("lodash-es");
@@ -180,12 +209,12 @@ var import_core8 = require("@flowgram.ai/core");
 
 // src/entity-datas/workflow-node-ports-data.ts
 var import_lodash_es = require("lodash-es");
-var import_document3 = require("@flowgram.ai/document");
+var import_document4 = require("@flowgram.ai/document");
 var import_core5 = require("@flowgram.ai/core");
 
 // src/entities/workflow-port-entity.ts
 var import_utils5 = require("@flowgram.ai/utils");
-var import_document2 = require("@flowgram.ai/document");
+var import_document3 = require("@flowgram.ai/document");
 var import_core4 = require("@flowgram.ai/core");
 var PORT_SIZE = 24;
 var WorkflowPortEntity = class extends import_core4.Entity {
@@ -214,15 +243,16 @@ var WorkflowPortEntity = class extends import_core4.Entity {
   }
   // 设置连线的错误态，外部应使用 validate 进行更新
   set hasError(hasError) {
-    this._hasError = hasError;
-    this._onErrorChangedEmitter.fire();
+    if (hasError !== this._hasError) {
+      this._hasError = hasError;
+      this._onErrorChangedEmitter.fire();
+    }
   }
   validate() {
     const anyLineHasError = this.allLines.some((line) => {
       if (line.disposed || line.isHidden) {
         return false;
       }
-      line.validateSelf();
       return line.hasError;
     });
     const isPortHasError = this.node.document.isErrorPort(this);
@@ -233,7 +263,7 @@ var WorkflowPortEntity = class extends import_core4.Entity {
   }
   get point() {
     const { targetElement } = this;
-    const { bounds } = this.node.getData(import_document2.FlowNodeTransformData);
+    const { bounds } = this.node.getData(import_document3.FlowNodeTransformData);
     if (targetElement) {
       const pos = domReactToBounds(targetElement.getBoundingClientRect()).center;
       return this.entityManager.getEntity(import_core4.PlaygroundConfigEntity).getPosFromMouseEvent({
@@ -262,7 +292,7 @@ var WorkflowPortEntity = class extends import_core4.Entity {
    */
   get relativePosition() {
     const { point } = this;
-    const { bounds } = this.node.getData(import_document2.FlowNodeTransformData);
+    const { bounds } = this.node.getData(import_document3.FlowNodeTransformData);
     return {
       x: point.x - bounds.x,
       y: point.y - bounds.y
@@ -372,7 +402,7 @@ var WorkflowNodePortsData = class extends import_core5.EntityData {
    * 动态计算点位，通过 dom 的 data-port-key
    */
   updateDynamicPorts() {
-    const domNode = this.entity.getData(import_document3.FlowNodeRenderData).node;
+    const domNode = this.entity.getData(import_document4.FlowNodeRenderData).node;
     const elements = domNode.querySelectorAll("[data-port-id]");
     const staticPorts = this._staticPorts;
     const dynamicPorts = [];
@@ -416,7 +446,6 @@ var WorkflowNodePortsData = class extends import_core5.EntityData {
       port.allLines.forEach((line) => {
         line.validate();
       });
-      port.validate();
     });
   }
   /**
@@ -547,6 +576,9 @@ var _WorkflowNodeLinesData = class _WorkflowNodeLinesData extends import_core6.E
   get outputLines() {
     return this.data.outputLines;
   }
+  get allLines() {
+    return this.data.inputLines.concat(this.data.outputLines);
+  }
   /**
    * 输入节点
    */
@@ -762,6 +794,14 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
     if (opts.drawingTo) {
       this.isDrawing = true;
     }
+    this.onEntityChange(() => {
+      this.fromPort?.validate();
+      this.toPort?.validate();
+    });
+    this.onDispose(() => {
+      this.fromPort?.validate();
+      this.toPort?.validate();
+    });
   }
   /**
    * 转成线条 id
@@ -867,6 +907,7 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
     if (this.toPort === toPort) {
       return;
     }
+    const prePort = this.toPort;
     if (toPort && toPort.portType === "input" && this.linesManager.canAddLine(this.fromPort, toPort, true)) {
       const { node, portID } = toPort;
       this._to = node;
@@ -879,6 +920,9 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
       this.info.to = void 0;
       this.info.toPort = "";
     }
+    if (prePort) {
+      prePort.validate();
+    }
     this.fireChange();
   }
   /**
@@ -992,11 +1036,12 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
   }
   // 校验连线是否为错误态
   validate() {
-    const { fromPort, toPort } = this;
     this.validateSelf();
-    fromPort?.validate();
-    toPort?.validate();
   }
+  /**
+   * use `validate` instead
+   * @deprecated
+   */
   validateSelf() {
     const { fromPort, toPort } = this;
     if (fromPort) {
@@ -1215,20 +1260,20 @@ WorkflowHoverService = __decorateClass([
 var import_nanoid3 = require("nanoid");
 var import_inversify6 = require("inversify");
 var import_utils16 = require("@flowgram.ai/utils");
-var import_document8 = require("@flowgram.ai/document");
 var import_document9 = require("@flowgram.ai/document");
+var import_document10 = require("@flowgram.ai/document");
 var import_core15 = require("@flowgram.ai/core");
 
 // src/workflow-lines-manager.ts
 var import_lodash_es3 = require("lodash-es");
 var import_inversify3 = require("inversify");
 var import_utils12 = require("@flowgram.ai/utils");
-var import_document5 = require("@flowgram.ai/document");
+var import_document6 = require("@flowgram.ai/document");
 var import_core12 = require("@flowgram.ai/core");
 
 // src/workflow-document-option.ts
 var import_form_core2 = require("@flowgram.ai/form-core");
-var import_document4 = require("@flowgram.ai/document");
+var import_document5 = require("@flowgram.ai/document");
 var import_core11 = require("@flowgram.ai/core");
 
 // src/utils/flow-node-form-data.ts
@@ -1320,7 +1365,7 @@ var WorkflowDocumentOptionsDefault = {
     const nodeMeta = node.getNodeMeta();
     const subCanvas = nodeMeta.subCanvas?.(node);
     if (subCanvas?.isCanvas === false) {
-      const canvasNodeTransform = subCanvas.canvasNode.getData(import_document4.FlowNodeTransformData);
+      const canvasNodeTransform = subCanvas.canvasNode.getData(import_document5.FlowNodeTransformData);
       const { x, y } = canvasNodeTransform.transform.position;
       metaData.canvasPosition = { x, y };
     }
@@ -1457,7 +1502,6 @@ var WorkflowLinesManager = class {
       }
       fromNode.removeLine(line);
       toNode?.removeLine(line);
-      line.validate();
     });
     line.onDispose(() => {
       if (available) {
@@ -1652,7 +1696,7 @@ var WorkflowLinesManager = class {
     const allNodes = this.getSortedNodes();
     const zoom = this.entityManager.getEntity(import_core12.PlaygroundConfigEntity)?.config?.zoom || 1;
     const containNodes = allNodes.map((node) => {
-      const { bounds } = node.getData(import_document5.FlowNodeTransformData);
+      const { bounds } = node.getData(import_document6.FlowNodeTransformData);
       if (bounds.clone().pad(4 / zoom).contains(pos.x, pos.y)) {
         return node;
       }
@@ -1660,7 +1704,7 @@ var WorkflowLinesManager = class {
     return containNodes;
   }
   getNodeIndex(node) {
-    const nodeRenderData = node.getData(import_document5.FlowNodeRenderData);
+    const nodeRenderData = node.getData(import_document6.FlowNodeRenderData);
     return nodeRenderData.stackIndex;
   }
 };
@@ -1685,13 +1729,13 @@ var import_nanoid2 = require("nanoid");
 var import_inversify5 = require("inversify");
 var import_utils14 = require("@flowgram.ai/utils");
 var import_form_core3 = require("@flowgram.ai/form-core");
-var import_document7 = require("@flowgram.ai/document");
+var import_document8 = require("@flowgram.ai/document");
 var import_core14 = require("@flowgram.ai/core");
 
 // src/layout/free-layout.ts
 var import_inversify4 = require("inversify");
 var import_utils13 = require("@flowgram.ai/utils");
-var import_document6 = require("@flowgram.ai/document");
+var import_document7 = require("@flowgram.ai/document");
 var import_core13 = require("@flowgram.ai/core");
 var FREE_LAYOUT_KEY = "free-layout";
 var FreeLayout = class {
@@ -1705,12 +1749,12 @@ var FreeLayout = class {
    * 更新布局
    */
   update() {
-    if (this.document.root.getData(import_document6.FlowNodeTransformData)?.localDirty) {
+    if (this.document.root.getData(import_document7.FlowNodeTransformData)?.localDirty) {
       this.document.root.clearMemoGlobal();
     }
   }
   syncTransform(node) {
-    const transform = node.getData(import_document6.FlowNodeTransformData);
+    const transform = node.getData(import_document7.FlowNodeTransformData);
     if (!transform.localDirty) {
       return;
     }
@@ -1724,7 +1768,7 @@ var FreeLayout = class {
     }
     node.parent.clearMemoGlobal();
     node.parent.clearMemoLocal();
-    const parentTransform = node.parent.getData(import_document6.FlowNodeTransformData);
+    const parentTransform = node.parent.getData(import_document7.FlowNodeTransformData);
     parentTransform.transform.fireChange();
   }
   /**
@@ -1748,7 +1792,7 @@ var FreeLayout = class {
    */
   getPadding(node) {
     const { padding } = node.getNodeMeta();
-    const transform = node.getData(import_document6.FlowNodeTransformData);
+    const transform = node.getData(import_document7.FlowNodeTransformData);
     if (padding) {
       return typeof padding === "function" ? padding(transform) : padding;
     }
@@ -1816,7 +1860,7 @@ __decorateClass([
   (0, import_inversify4.inject)(import_core13.PlaygroundConfigEntity)
 ], FreeLayout.prototype, "playgroundConfig", 2);
 __decorateClass([
-  (0, import_inversify4.inject)(import_document6.FlowDocumentProvider)
+  (0, import_inversify4.inject)(import_document7.FlowDocumentProvider)
 ], FreeLayout.prototype, "documentProvider", 2);
 FreeLayout = __decorateClass([
   (0, import_inversify4.injectable)()
@@ -1825,7 +1869,7 @@ FreeLayout = __decorateClass([
 // src/workflow-document.ts
 var nanoid2 = (0, import_nanoid2.customAlphabet)("1234567890", 5);
 var WorkflowDocumentProvider = Symbol("WorkflowDocumentProvider");
-var WorkflowDocument = class extends import_document7.FlowDocument {
+var WorkflowDocument = class extends import_document8.FlowDocument {
   constructor() {
     super(...arguments);
     this._onContentChangeEmitter = new import_utils14.Emitter();
@@ -1922,7 +1966,7 @@ var WorkflowDocument = class extends import_document7.FlowDocument {
     const { formMeta } = registry;
     const meta = node.getNodeMeta();
     const formData = getFlowNodeFormData(node);
-    const transform = node.getData(import_document7.FlowNodeTransformData);
+    const transform = node.getData(import_document8.FlowNodeTransformData);
     const freeLayout = this.layout;
     if (!isExistedNode) {
       transform.onDataChange(() => {
@@ -1964,10 +2008,10 @@ var WorkflowDocument = class extends import_document7.FlowDocument {
         toJSON: () => this.toNodeJSON(node)
       });
       node.onDispose(() => {
-        if (!node.parent || node.parent.flowNodeType === import_document7.FlowNodeBaseType.ROOT) {
+        if (!node.parent || node.parent.flowNodeType === import_document8.FlowNodeBaseType.ROOT) {
           return;
         }
-        const parentTransform = node.parent.getData(import_document7.FlowNodeTransformData);
+        const parentTransform = node.parent.getData(import_document8.FlowNodeTransformData);
         parentTransform.fireChange();
       });
       let lastDeleteNodeData;
@@ -2132,10 +2176,10 @@ var WorkflowDocument = class extends import_document7.FlowDocument {
     );
   }
   getAllNodes() {
-    return this.entityManager.getEntities(WorkflowNodeEntity).filter((n) => n.id !== import_document7.FlowNodeBaseType.ROOT);
+    return this.entityManager.getEntities(WorkflowNodeEntity).filter((n) => n.id !== import_document8.FlowNodeBaseType.ROOT);
   }
   getAllPorts() {
-    return this.entityManager.getEntities(WorkflowPortEntity).filter((p) => p.node.id !== import_document7.FlowNodeBaseType.ROOT);
+    return this.entityManager.getEntities(WorkflowPortEntity).filter((p) => p.node.id !== import_document8.FlowNodeBaseType.ROOT);
   }
   /**
    * 获取画布中的非游离节点
@@ -2290,10 +2334,11 @@ var WorkflowDocument = class extends import_document7.FlowDocument {
    */
   toJSON() {
     const rootJSON = this.toNodeJSON(this.root);
-    return {
+    const json = {
       nodes: rootJSON.blocks ?? [],
       edges: rootJSON.edges ?? []
     };
+    return json;
   }
   dispose() {
     super.dispose();
@@ -2305,10 +2350,11 @@ var WorkflowDocument = class extends import_document7.FlowDocument {
   renderJSON(json, options) {
     const { parent = this.root, isClone = false } = options ?? {};
     const containerID = this.getNodeSubCanvas(parent)?.canvasNode.id ?? parent.id;
-    const nodes = json.nodes.map(
+    const processedJSON = buildGroupJSON(json);
+    const nodes = processedJSON.nodes.map(
       (nodeJSON) => this.createWorkflowNode(nodeJSON, isClone, containerID)
     );
-    const edges = json.edges.map((edge) => this.createWorkflowLine(edge, containerID)).filter(Boolean);
+    const edges = processedJSON.edges.map((edge) => this.createWorkflowLine(edge, containerID)).filter(Boolean);
     return { nodes, edges };
   }
   getNodeSubCanvas(node) {
@@ -2318,13 +2364,19 @@ var WorkflowDocument = class extends import_document7.FlowDocument {
     return subCanvas;
   }
   getNodeChildren(node) {
-    if (!node) return [];
+    if (!node || node.flowNodeType === import_document8.FlowNodeBaseType.GROUP) return [];
     const subCanvas = this.getNodeSubCanvas(node);
-    const childrenWithCanvas = subCanvas ? subCanvas.canvasNode.collapsedChildren : node.collapsedChildren;
-    const children = childrenWithCanvas.filter((child) => {
+    const realChildren = subCanvas ? subCanvas.canvasNode.blocks : node.blocks;
+    const childrenWithoutSubCanvas = realChildren.filter((child) => {
       const childMeta = child.getNodeMeta();
       return !childMeta.subCanvas?.(node)?.isCanvas;
     }).filter(Boolean);
+    const children = childrenWithoutSubCanvas.map((child) => {
+      if (child.flowNodeType === import_document8.FlowNodeBaseType.GROUP) {
+        return [child, ...child.blocks];
+      }
+      return child;
+    }).flat();
     return children;
   }
   toLineJSON(line) {
@@ -2456,7 +2508,7 @@ var WorkflowDragService = class {
     }
     this.isDragging = true;
     const sameParent = this.childrenOfContainer(selectedNodes);
-    if (sameParent && sameParent.flowNodeType !== import_document9.FlowNodeBaseType.ROOT) {
+    if (sameParent && sameParent.flowNodeType !== import_document10.FlowNodeBaseType.ROOT) {
       selectedNodes = [sameParent];
     }
     let startPosition = this.getNodesPosition(selectedNodes);
@@ -2626,7 +2678,7 @@ var WorkflowDragService = class {
     if (!mousePos) {
       return { x: 0, y: 0 };
     }
-    if (!subNodeType || !containerNode || containerNode.flowNodeType === import_document9.FlowNodeBaseType.ROOT) {
+    if (!subNodeType || !containerNode || containerNode.flowNodeType === import_document10.FlowNodeBaseType.ROOT) {
       return mousePos;
     }
     const isParentEmpty = !containerNode.children || containerNode.children.length === 0;
@@ -2712,7 +2764,7 @@ var WorkflowDragService = class {
     return offset;
   }
   updateDroppableTransforms() {
-    this._droppableTransforms = this.document.getRenderDatas(import_document8.FlowNodeTransformData, false).filter((transform) => {
+    this._droppableTransforms = this.document.getRenderDatas(import_document9.FlowNodeTransformData, false).filter((transform) => {
       const { entity } = transform;
       if (entity.originParent) {
         return this.nodeSelectable(entity) && this.nodeSelectable(entity.originParent);
@@ -2729,7 +2781,7 @@ var WorkflowDragService = class {
    */
   getNodesPosition(nodes) {
     const selectedBounds = import_utils16.Rectangle.enlarge(
-      nodes.map((n) => n.getData(import_document8.FlowNodeTransformData).bounds)
+      nodes.map((n) => n.getData(import_document9.FlowNodeTransformData).bounds)
     );
     const position = {
       x: selectedBounds.x,
@@ -3009,7 +3061,7 @@ __decorateClass([
   (0, import_inversify6.inject)(WorkflowSelectService)
 ], WorkflowDragService.prototype, "selectService", 2);
 __decorateClass([
-  (0, import_inversify6.inject)(import_document8.FlowOperationBaseService)
+  (0, import_inversify6.inject)(import_document9.FlowOperationBaseService)
 ], WorkflowDragService.prototype, "operationService", 2);
 __decorateClass([
   (0, import_inversify6.inject)(WorkflowDocumentOptions)
@@ -3028,13 +3080,13 @@ var import_core18 = require("@flowgram.ai/core");
 var import_utils17 = require("@flowgram.ai/utils");
 
 // src/utils/layout-to-positions.ts
-var import_document10 = require("@flowgram.ai/document");
+var import_document11 = require("@flowgram.ai/document");
 var import_core16 = require("@flowgram.ai/core");
 var layoutToPositions = async (nodes, nodePositionMap) => {
   const newNodePositionMap = {};
   nodes.forEach((node) => {
     const transform = node.getData(import_core16.TransformData);
-    const nodeTransform = node.getData(import_document10.FlowNodeTransformData);
+    const nodeTransform = node.getData(import_document11.FlowNodeTransformData);
     newNodePositionMap[node.id] = {
       x: transform.position.x,
       y: transform.position.y + nodeTransform.bounds.height / 2
@@ -3130,9 +3182,9 @@ WorkflowResetLayoutService = __decorateClass([
 // src/service/workflow-operation-base-service.ts
 var import_inversify8 = require("inversify");
 var import_utils19 = require("@flowgram.ai/utils");
-var import_document11 = require("@flowgram.ai/document");
+var import_document12 = require("@flowgram.ai/document");
 var import_core19 = require("@flowgram.ai/core");
-var WorkflowOperationBaseServiceImpl = class extends import_document11.FlowOperationBaseServiceImpl {
+var WorkflowOperationBaseServiceImpl = class extends import_document12.FlowOperationBaseServiceImpl {
   constructor() {
     super(...arguments);
     this.onNodePostionUpdateEmitter = new import_utils19.Emitter();
@@ -3184,7 +3236,7 @@ function checkTargetDraggable(el) {
 }
 function useNodeRender(nodeFromProps) {
   const node = nodeFromProps || (0, import_react2.useContext)(import_core21.PlaygroundEntityContext);
-  const renderData = node.getData(import_document12.FlowNodeRenderData);
+  const renderData = node.getData(import_document13.FlowNodeRenderData);
   const portsData = node.getData(WorkflowNodePortsData);
   const readonly = usePlaygroundReadonlyState();
   const dragService = (0, import_core21.useService)(WorkflowDragService);
@@ -3351,11 +3403,11 @@ function useNodeRender(nodeFromProps) {
 }
 
 // src/hooks/use-current-dom-node.ts
-var import_document13 = require("@flowgram.ai/document");
+var import_document14 = require("@flowgram.ai/document");
 var import_core22 = require("@flowgram.ai/core");
 function useCurrentDomNode() {
   const entity = (0, import_core22.useEntityFromContext)();
-  const renderData = entity.getData(import_document13.FlowNodeRenderData);
+  const renderData = entity.getData(import_document14.FlowNodeRenderData);
   return renderData.node;
 }
 
@@ -3386,16 +3438,16 @@ var InteractiveType = /* @__PURE__ */ ((InteractiveType2) => {
 // src/workflow-document-container-module.ts
 var import_inversify10 = require("inversify");
 var import_utils20 = require("@flowgram.ai/utils");
-var import_document15 = require("@flowgram.ai/document");
+var import_document16 = require("@flowgram.ai/document");
 
 // src/workflow-document-contribution.ts
 var import_inversify9 = require("inversify");
-var import_document14 = require("@flowgram.ai/document");
+var import_document15 = require("@flowgram.ai/document");
 var WorkflowDocumentContribution = class {
   registerDocument(document2) {
     document2.registerNodeDatas(
-      import_document14.FlowNodeTransformData,
-      import_document14.FlowNodeRenderData,
+      import_document15.FlowNodeTransformData,
+      import_document15.FlowNodeRenderData,
       WorkflowNodePortsData,
       WorkflowNodeLinesData
     );
@@ -3430,11 +3482,11 @@ var WorkflowDocumentContainerModule = new import_inversify10.ContainerModule(
     bind(WorkflowResetLayoutService).toSelf().inSingletonScope();
     bind(WorkflowOperationBaseService).to(WorkflowOperationBaseServiceImpl).inSingletonScope();
     bind(URLParams).toDynamicValue(() => getUrlParams()).inSingletonScope();
-    (0, import_utils20.bindContributions)(bind, WorkflowDocumentContribution, [import_document15.FlowDocumentContribution]);
+    (0, import_utils20.bindContributions)(bind, WorkflowDocumentContribution, [import_document16.FlowDocumentContribution]);
     bind(WorkflowDocumentOptions).toConstantValue({
       ...WorkflowDocumentOptionsDefault
     });
-    rebind(import_document15.FlowDocument).toService(WorkflowDocument);
+    rebind(import_document16.FlowDocument).toService(WorkflowDocument);
     bind(WorkflowDocumentProvider).toDynamicValue((ctx) => () => ctx.container.get(WorkflowDocument)).inSingletonScope();
   }
 );
@@ -3546,6 +3598,7 @@ WorkflowSimpleLineContribution.type = "WorkflowSimpleLineContribution";
   WorkflowSelectService,
   WorkflowSimpleLineContribution,
   bindConfigEntity,
+  buildGroupJSON,
   compose,
   composeAsync,
   delay,