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

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,26 +243,27 @@ 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);
     this.hasError = anyLineHasError || isPortHasError;
   }
   isErrorPort() {
-    return this.node.document.isErrorPort(this);
+    return this.node.document.isErrorPort(this, this.hasError);
   }
   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);
+  }
   /**
    * 输入节点
    */
@@ -733,8 +765,16 @@ var POINT_RADIUS = 10;
 var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity {
   constructor(opts) {
     super(opts);
-    this._processing = false;
-    this._hasError = false;
+    this._uiState = {
+      hasError: false,
+      flowing: false,
+      disabled: false,
+      vertical: false,
+      hideArrow: false,
+      reverse: false,
+      highlightColor: "",
+      lockedColor: ""
+    };
     this.stackIndex = 0;
     /**
      * 线条数据
@@ -754,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
@@ -763,6 +811,43 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
     const { from, to, fromPort, toPort } = info;
     return `${from}_${fromPort || ""}-${to || ""}_${toPort || ""}`;
   }
+  /**
+   * 线条的 UI 状态
+   */
+  get uiState() {
+    return this._uiState;
+  }
+  /**
+   * 更新线条的 ui 状态
+   * @param newState
+   */
+  updateUIState(newState) {
+    let changed = false;
+    Object.keys(newState).forEach((key) => {
+      const value = newState[key];
+      if (this._uiState[key] !== value) {
+        this._uiState[key] = value;
+        changed = true;
+      }
+    });
+    if (changed) {
+      this.fireChange();
+    }
+  }
+  /**
+   * 线条的扩展数据
+   */
+  get lineData() {
+    return this._lineData;
+  }
+  /**
+   * 更新线条扩展数据
+   * @param data
+   */
+  set lineData(data) {
+    this._lineData = data;
+    this.fireChange();
+  }
   /**
    * 获取线条的前置节点
    */
@@ -784,29 +869,30 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
   }
   /**
    * 获取是否 testrun processing
+   * @deprecated  use `uiState.flowing` instead
    */
   get processing() {
-    return this._processing;
+    return this._uiState.flowing;
   }
   /**
    * 设置 testrun processing 状态
+   * @deprecated  use `uiState.flowing` instead
    */
   set processing(status) {
-    if (this._processing !== status) {
-      this._processing = status;
+    if (this._uiState.flowing !== status) {
+      this._uiState.flowing = status;
       this.fireChange();
     }
   }
   // 获取连线是否为错误态
   get hasError() {
-    return this._hasError;
+    return this.uiState.hasError;
   }
   // 设置连线的错误态
   set hasError(hasError) {
-    if (this._hasError !== hasError) {
-      this._hasError = hasError;
-      this.fireChange();
-    }
+    this.updateUIState({
+      hasError
+    });
     if (this._node) {
       this._node.dataset.hasError = this.hasError ? "true" : "false";
     }
@@ -821,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;
@@ -833,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();
   }
   /**
@@ -859,13 +949,20 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
     return this.info.drawingTo;
   }
   get highlightColor() {
-    return this.info.highlightColor || "";
+    return this.uiState.highlightColor || "";
   }
-  set highlightColor(color) {
-    if (this.info.highlightColor !== color) {
-      this.info.highlightColor = color;
-      this.fireChange();
-    }
+  set highlightColor(highlightColor) {
+    this.updateUIState({
+      highlightColor
+    });
+  }
+  get lockedColor() {
+    return this.uiState.lockedColor;
+  }
+  set lockedColor(lockedColor) {
+    this.updateUIState({
+      lockedColor
+    });
   }
   /**
    * 获取线条的边框位置大小
@@ -896,23 +993,23 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
   }
   /** 是否反转箭头 */
   get reverse() {
-    return this.linesManager.isReverseLine(this);
+    return this.linesManager.isReverseLine(this, this.uiState.reverse);
   }
   /** 是否隐藏箭头 */
   get hideArrow() {
-    return this.linesManager.isHideArrowLine(this);
+    return this.linesManager.isHideArrowLine(this, this.uiState.hideArrow);
   }
   /** 是否流动 */
   get flowing() {
-    return this.linesManager.isFlowingLine(this);
+    return this.linesManager.isFlowingLine(this, this.uiState.flowing);
   }
   /** 是否禁用 */
   get disabled() {
-    return this.linesManager.isDisabledLine(this);
+    return this.linesManager.isDisabledLine(this, this.uiState.disabled);
   }
   /** 是否竖向 */
   get vertical() {
-    return this.linesManager.isVerticalLine(this);
+    return this.linesManager.isVerticalLine(this, this.uiState.vertical);
   }
   /** 获取线条渲染器类型 */
   get renderType() {
@@ -939,15 +1036,16 @@ 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) {
-      this.hasError = this.linesManager.isErrorLine(fromPort, toPort);
+      this.hasError = this.linesManager.isErrorLine(fromPort, toPort, this.uiState.hasError);
     }
   }
   is(line) {
@@ -978,6 +1076,9 @@ var _WorkflowLineEntity = class _WorkflowLineEntity extends import_core8.Entity
       sourcePortID: this.info.fromPort,
       targetPortID: this.info.toPort
     };
+    if (this._lineData !== void 0) {
+      json.data = this._lineData;
+    }
     if (!json.sourcePortID) {
       delete json.sourcePortID;
     }
@@ -1159,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
@@ -1264,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 };
     }
@@ -1401,7 +1502,6 @@ var WorkflowLinesManager = class {
       }
       fromNode.removeLine(line);
       toNode?.removeLine(line);
-      line.validate();
     });
     line.onDispose(() => {
       if (available) {
@@ -1445,41 +1545,41 @@ var WorkflowLinesManager = class {
   get disposed() {
     return this.toDispose.disposed;
   }
-  isErrorLine(fromPort, toPort) {
+  isErrorLine(fromPort, toPort, defaultValue) {
     if (this.options.isErrorLine) {
       return this.options.isErrorLine(fromPort, toPort, this);
     }
-    return false;
+    return !!defaultValue;
   }
-  isReverseLine(line) {
+  isReverseLine(line, defaultValue = false) {
     if (this.options.isReverseLine) {
       return this.options.isReverseLine(line);
     }
-    return false;
+    return defaultValue;
   }
-  isHideArrowLine(line) {
+  isHideArrowLine(line, defaultValue = false) {
     if (this.options.isHideArrowLine) {
       return this.options.isHideArrowLine(line);
     }
-    return false;
+    return defaultValue;
   }
-  isFlowingLine(line) {
+  isFlowingLine(line, defaultValue = false) {
     if (this.options.isFlowingLine) {
       return this.options.isFlowingLine(line);
     }
-    return false;
+    return defaultValue;
   }
-  isDisabledLine(line) {
+  isDisabledLine(line, defaultValue = false) {
     if (this.options.isDisabledLine) {
       return this.options.isDisabledLine(line);
     }
-    return false;
+    return defaultValue;
   }
-  isVerticalLine(line) {
+  isVerticalLine(line, defaultValue = false) {
     if (this.options.isVerticalLine) {
       return this.options.isVerticalLine(line);
     }
-    return false;
+    return defaultValue;
   }
   setLineRenderType(line) {
     if (this.options.setLineRenderType) {
@@ -1497,6 +1597,9 @@ var WorkflowLinesManager = class {
     if (line.isHidden) {
       return this.lineColor.hidden;
     }
+    if (line.lockedColor) {
+      return line.lockedColor;
+    }
     if (line.hasError) {
       return this.lineColor.error;
     }
@@ -1593,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;
       }
@@ -1601,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;
   }
 };
@@ -1626,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 {
@@ -1646,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;
     }
@@ -1665,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();
   }
   /**
@@ -1689,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;
     }
@@ -1757,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)()
@@ -1766,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();
@@ -1863,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(() => {
@@ -1905,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;
@@ -2073,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);
   }
   /**
    * 获取画布中的非游离节点
@@ -2220,21 +2323,22 @@ var WorkflowDocument = class extends import_document7.FlowDocument {
   /**
    * 判断端口是否为错误态
    */
-  isErrorPort(port) {
+  isErrorPort(port, defaultValue = false) {
     if (typeof this.options.isErrorPort === "function") {
       return this.options.isErrorPort(port);
     }
-    return false;
+    return defaultValue;
   }
   /**
    * 导出数据
    */
   toJSON() {
     const rootJSON = this.toNodeJSON(this.root);
-    return {
+    const json = {
       nodes: rootJSON.blocks ?? [],
       edges: rootJSON.edges ?? []
     };
+    return json;
   }
   dispose() {
     super.dispose();
@@ -2246,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) {
@@ -2259,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) {
@@ -2397,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);
@@ -2567,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;
@@ -2653,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);
@@ -2670,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,
@@ -2778,7 +2889,7 @@ var WorkflowDragService = class {
             return;
           }
           config.updateCursor("grab");
-          line.highlightColor = this.linesManager.lineColor.drawing;
+          line.highlightColor = originLine?.lockedColor || this.linesManager.lineColor.drawing;
           this.hoverService.updateHoveredKey("");
         }
         if (!line) {
@@ -2800,7 +2911,7 @@ var WorkflowDragService = class {
         this._onDragLineEventEmitter.fire({
           type: "onDrag"
         });
-        this.setLineColor(line, this.linesManager.lineColor.drawing);
+        this.setLineColor(line, originLine?.lockedColor || this.linesManager.lineColor.drawing);
         if (toNode && this.canBuildContainerLine(toNode, dragPos)) {
           toPort = this.getNearestPort(toNode, dragPos);
           const { hasError } = this.handleDragOnNode(toNode, fromPort, line, toPort, originLine);
@@ -2950,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)
@@ -2969,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
@@ -3071,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();
@@ -3125,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);
@@ -3292,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;
 }
 
@@ -3327,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
     );
@@ -3371,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();
   }
 );
@@ -3487,6 +3598,7 @@ WorkflowSimpleLineContribution.type = "WorkflowSimpleLineContribution";
   WorkflowSelectService,
   WorkflowSimpleLineContribution,
   bindConfigEntity,
+  buildGroupJSON,
   compose,
   composeAsync,
   delay,