fix(workflow): resolve batch node copy error by using clipboard service (#2555)

Author: louisyoungx

frontend/packages/common/flowgram-adapter/free-layout-editor/src/index.ts

@@ -60,6 +60,7 @@ export {
   WorkflowResetLayoutService,
   WorkflowDocumentProvider,
   POINT_RADIUS,
+  usePlaygroundContainer,
   WorkflowLineRenderData,
   usePlaygroundReadonlyState,
   type WorkflowEdgeJSON,

frontend/packages/workflow/playground/src/form-extensions/components/node-header/index.tsx

@@ -30,6 +30,7 @@ import classnames from 'classnames';
 import {
   useEntityFromContext,
   useService,
+  usePlaygroundContainer,
 } from '@flowgram-adapter/free-layout-editor';
 import {
   type WorkflowNodeEntity,
@@ -166,10 +167,21 @@ export const NodeHeader: React.FC<NodeHeaderProps> = ({
     }, 10);
   };
 
-  const handleCopy = (_, e: MouseEvent) => {
-    e.stopPropagation();
-    editService.copyNode(node);
-  };
+  const container = usePlaygroundContainer();
+  const handleCopy = useCallback(
+    async (_: unknown, e: MouseEvent) => {
+      e.stopPropagation();
+      const {
+        WorkflowCopyShortcutsContribution,
+        WorkflowPasteShortcutsContribution,
+      } = await import('@/shortcuts');
+      const copyService = container.get(WorkflowCopyShortcutsContribution);
+      const pasteService = container.get(WorkflowPasteShortcutsContribution);
+      const data = await copyService.toData([node]);
+      pasteService.apply(data);
+    },
+    [container, node],
+  );
 
   const handleDecapsulate = (_, e: MouseEvent) => {
     e.stopPropagation();

frontend/packages/workflow/playground/src/shortcuts/contributions/paste/index.ts

@@ -126,6 +126,33 @@ export class WorkflowPasteShortcutsContribution
     });
     return nodes;
   }
+  /** Apply clipboard data */
+  public async apply(
+    data: WorkflowClipboardData,
+  ): Promise<WorkflowNodeEntity[]> {
+    const { source, json: rawJSON } = data;
+    const json = generateUniqueWorkflow({
+      json: rawJSON,
+      isUniqueId: (id: string) => !this.entityManager.getEntityById(id),
+    });
+
+    // You need to initialize the node data before rebuilding the node
+    await this.saveService.initNodeData(json.nodes as WorkflowNodeJSON[]);
+
+    const titleCache: string[] = [];
+    const offset = this.calcPasteOffset(data.bounds);
+    const container = this.getSelectedContainer();
+    const nodes = await this.render({
+      json,
+      source,
+      titleCache,
+      offset,
+      parent: container,
+      toContainer: container,
+    });
+    this.selectNodes(nodes);
+    return nodes;
+  }
   /** Handling replication events */
   private async handle(
     _event: KeyboardEvent,
@@ -161,33 +188,6 @@ export class WorkflowPasteShortcutsContribution
       return;
     }
   }
-  /** Apply clipboard data */
-  private async apply(
-    data: WorkflowClipboardData,
-  ): Promise<WorkflowNodeEntity[]> {
-    const { source, json: rawJSON } = data;
-    const json = generateUniqueWorkflow({
-      json: rawJSON,
-      isUniqueId: (id: string) => !this.entityManager.getEntityById(id),
-    });
-
-    // You need to initialize the node data before rebuilding the node
-    await this.saveService.initNodeData(json.nodes as WorkflowNodeJSON[]);
-
-    const titleCache: string[] = [];
-    const offset = this.calcPasteOffset(data.bounds);
-    const container = this.getSelectedContainer();
-    const nodes = await this.render({
-      json,
-      source,
-      titleCache,
-      offset,
-      parent: container,
-      toContainer: container,
-    });
-    this.selectNodes(nodes);
-    return nodes;
-  }
   /** Calculate Paste Offset */
   private calcPasteOffset(boundsData: WorkflowClipboardRect): IPoint {
     const { x, y, width, height } = boundsData;