Merge pull request #94 from easyops-cn/zhendong/fix

feat(): draw-canvas添加canvas.copy、canvas.paste事件用于实现快捷键复制粘贴节点功能 ref CU…

Author: weareoutman

bricks/diagram/src/draw-canvas/index.spec.tsx

@@ -1602,4 +1602,56 @@ describe("eo-draw-canvas", () => {
       document.body.removeChild(element);
     });
   });
+
+  test("copy and paste ", async () => {
+    const element = document.createElement("eo-draw-canvas") as EoDrawCanvas;
+    element.defaultNodeBricks = [{ useBrick: { brick: "div" } }];
+    element.cells = [
+      {
+        type: "node",
+        id: "a",
+        view: {
+          x: 20,
+          y: 20,
+        },
+      },
+      {
+        type: "node",
+        id: "b",
+        view: {
+          x: 20,
+          y: 320,
+        },
+      },
+    ] as NodeBrickCell[];
+
+    const onCanvasCopy = jest.fn();
+    const onCanvasPaste = jest.fn();
+    element.addEventListener("canvas.copy", () => onCanvasCopy());
+
+    element.addEventListener("canvas.paste", () => onCanvasPaste());
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+
+    await act(() => new Promise((resolve) => setTimeout(resolve, 1)));
+
+    fireEvent.keyDown(element.shadowRoot!.querySelector("svg")!, {
+      key: "c",
+      ctrlKey: true,
+    });
+
+    expect(onCanvasCopy).toBeCalledTimes(1);
+
+    fireEvent.keyDown(element.shadowRoot!.querySelector("svg")!, {
+      key: "v",
+      ctrlKey: true,
+    });
+    expect(onCanvasPaste).toBeCalledTimes(1);
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+  });
 });

bricks/diagram/src/draw-canvas/index.tsx

@@ -469,6 +469,20 @@ class EoDrawCanvas extends ReactNextElement implements EoDrawCanvasProps {
     });
   };
 
+  @event({ type: "canvas.copy" })
+  accessor #canvasCopy!: EventEmitter<void>;
+
+  #handleCanvasCopy = () => {
+    this.#canvasCopy.emit();
+  };
+
+  @event({ type: "canvas.paste" })
+  accessor #canvasPaste!: EventEmitter<void>;
+
+  #handleCanvasPaste = () => {
+    this.#canvasPaste.emit();
+  };
+
   @method()
   async dropNode({
     id,
@@ -720,6 +734,8 @@ class EoDrawCanvas extends ReactNextElement implements EoDrawCanvasProps {
         onScaleChange={this.#handleScaleChange}
         onEdgeViewChange={this.#handleEdgeViewChange}
         onDecoratorViewChange={this.#handleDecoratorViewChange}
+        onCanvasCopy={this.#handleCanvasCopy}
+        onCanvasPaste={this.#handleCanvasPaste}
       />
     );
   }
@@ -742,6 +758,8 @@ export interface EoDrawCanvasComponentProps extends EoDrawCanvasProps {
   onContainerContainerChange(detail: MoveCellPayload[]): void;
   onScaleChange(scale: number): void;
   onCanvasContextMenu(detail: PositionTuple): void;
+  onCanvasCopy(): void;
+  onCanvasPaste(): void;
 }
 
 export interface DrawCanvasRef {
@@ -808,6 +826,8 @@ function LegacyEoDrawCanvasComponent(
     onEdgeViewChange,
     onDecoratorViewChange,
     onCanvasContextMenu,
+    onCanvasCopy,
+    onCanvasPaste,
   }: EoDrawCanvasComponentProps,
   ref: React.Ref<DrawCanvasRef>
 ) {
@@ -1388,6 +1408,24 @@ function LegacyEoDrawCanvasComponent(
     },
     [onCanvasContextMenu, onSwitchActiveTarget]
   );
+  // istanbul ignore next
+  const handleCanvasKeyDown = useCallback(
+    (event: React.KeyboardEvent<SVGElement>) => {
+      const modKey = /Mac|iPod|iPhone|iPad/.test(navigator.platform)
+        ? "metaKey"
+        : "ctrlKey";
+      if (event[modKey]) {
+        if (event.key === "c") {
+          onCanvasCopy();
+          event.preventDefault();
+        } else if (event.key === "v") {
+          onCanvasPaste();
+          event.preventDefault();
+        }
+      }
+    },
+    [onCanvasCopy, onCanvasPaste]
+  );
   useEffect(() => {
     const root = rootRef.current;
     if (!root || dragBehavior !== "lasso") {
@@ -1440,6 +1478,7 @@ function LegacyEoDrawCanvasComponent(
   return (
     <HoverStateContext.Provider value={hoverStateContextValue}>
       <svg
+        onKeyDown={handleCanvasKeyDown}
         onContextMenu={handleCanvasContextMenu}
         width="100%"
         height="100%"