소스 검색

fix(demo): group node copy paste (#876)

Louis Young 3 달 전
부모
커밋
aa7a5b4e54
1개의 변경된 파일32개의 추가작업 그리고 3개의 파일을 삭제
  1. 32 3
      apps/demo-free-layout/src/shortcuts/copy/index.ts

+ 32 - 3
apps/demo-free-layout/src/shortcuts/copy/index.ts

@@ -4,6 +4,7 @@
  */
 
 import {
+  FlowNodeBaseType,
   FreeLayoutPluginContext,
   PlaygroundConfigEntity,
   Rectangle,
@@ -161,17 +162,33 @@ export class CopyShortcut implements ShortcutsHandler {
    * get JSON representation of nodes - 获取节点的JSON表示
    */
   private getNodeJSONs(nodes: WorkflowNodeEntity[]): WorkflowNodeJSON[] {
-    const nodeJSONs = nodes.map((node) => this.document.toNodeJSON(node));
+    const nodeJSONs = nodes.map((node) =>
+      node.flowNodeType === FlowNodeBaseType.GROUP
+        ? this.getGroupNodeJSON(node)
+        : this.document.toNodeJSON(node)
+    );
     return nodeJSONs.filter(Boolean);
   }
 
+  /**
+   * get JSON representation of group node - 获取分组节点的JSON
+   */
+  private getGroupNodeJSON(node: WorkflowNodeEntity): WorkflowNodeJSON {
+    const rawJSON = this.document.toNodeJSON(node);
+    return {
+      ...rawJSON,
+      blocks: node.blocks.map((block) => this.document.toNodeJSON(block)),
+    };
+  }
+
   /**
    * get edges of all nodes - 获取所有节点的边
    */
   private getEdgeJSONs(nodes: WorkflowNodeEntity[]): WorkflowEdgeJSON[] {
     const lineSet = new Set<WorkflowLineEntity>();
-    const nodeIdSet = new Set(nodes.map((n) => n.id));
-    nodes.forEach((node) => {
+    const expandedNodes = this.expandGroupNodes(nodes);
+    const nodeIdSet = new Set(expandedNodes.map((n) => n.id));
+    expandedNodes.forEach((node) => {
       const linesData = node.lines;
       const lines = [...linesData.inputLines, ...linesData.outputLines];
       lines.forEach((line) => {
@@ -188,6 +205,18 @@ export class CopyShortcut implements ShortcutsHandler {
     return Array.from(lineSet).map((line) => line.toJSON());
   }
 
+  /**
+   * expand group nodes - 展开分组子节点
+   */
+  private expandGroupNodes(nodes: WorkflowNodeEntity[]): WorkflowNodeEntity[] {
+    return nodes.flatMap((node) => {
+      if (node.flowNodeType === FlowNodeBaseType.GROUP) {
+        return [node, ...node.blocks];
+      }
+      return node;
+    });
+  }
+
   /**
    * get bounding rectangle of all nodes - 获取所有节点的边界矩形
    */