Merge pull request #241 from Lemoncode/#140-Add-Copy-Paste-Buttons

#140 - Added Copy/Paste Button

src/common/components/icons/copy-icon.component.tsx

@@ -0,0 +1,15 @@
+export const CopyIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M216 32H88a8 8 0 0 0-8 8v40H40a8 8 0 0 0-8 8v128a8 8 0 0 0 8 8h128a8 8 0 0 0 8-8v-40h40a8 8 0 0 0 8-8V40a8 8 0 0 0-8-8m-56 176H48V96h112Zm48-48h-32V88a8 8 0 0 0-8-8H96V48h112Z"
+      />
+    </svg>
+  );
+};

src/common/components/icons/index.ts

@@ -6,3 +6,5 @@ export * from './send-to-back-icon.component';
 export * from './linkedin-icon.component';
 export * from './x-icon.component';
 export * from './quickmock-logo.component';
+export * from './copy-icon.component';
+export * from './paste-icon.component';

src/common/components/icons/paste-icon.component.tsx

@@ -0,0 +1,15 @@
+export const PasteIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="1.2em"
+      height="1.2em"
+      viewBox="0 0 256 256"
+    >
+      <path
+        fill="currentColor"
+        d="M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z"
+      />
+    </svg>
+  );
+};

src/core/providers/canvas/canvas.model.ts

@@ -38,7 +38,6 @@ export interface CanvasContextModel {
   scale: number;
   clearCanvas: () => void;
   setScale: React.Dispatch<React.SetStateAction<number>>;
-  pasteShape: (shape: ShapeModel) => void;
   addNewShape: (
     type: ShapeType,
     x: number,
@@ -54,6 +53,10 @@ export interface CanvasContextModel {
   canRedo: () => boolean;
   doUndo: () => void;
   doRedo: () => void;
+  canCopy: boolean;
+  canPaste: boolean;
+  copyShapeToClipboard: () => void;
+  pasteShapeFromClipboard: () => void;
 }
 
 export interface DocumentModel {

src/core/providers/canvas/canvas.provider.tsx

@@ -9,6 +9,7 @@ import { createDefaultDocumentModel, DocumentModel } from './canvas.model';
 import { v4 as uuidv4 } from 'uuid';
 import Konva from 'konva';
 import { removeShapeFromList } from './canvas.business';
+import { useClipboard } from './use-clipboard.hook';
 
 interface Props {
   children: React.ReactNode;
@@ -37,6 +38,18 @@ export const CanvasProvider: React.FC<Props> = props => {
 
   const selectionInfo = useSelection(document, setDocument);
 
+  const pasteShape = (shape: ShapeModel) => {
+    shape.id = uuidv4();
+
+    setDocument(prevDocument => ({
+      ...prevDocument,
+      shapes: [...prevDocument.shapes, shape],
+    }));
+  };
+
+  const { copyShapeToClipboard, pasteShapeFromClipboard, canCopy, canPaste } =
+    useClipboard(pasteShape, document.shapes, selectionInfo);
+
   const clearCanvas = () => {
     setDocument({ shapes: [] });
   };
@@ -51,15 +64,6 @@ export const CanvasProvider: React.FC<Props> = props => {
     }));
   };
 
-  const pasteShape = (shape: ShapeModel) => {
-    shape.id = uuidv4();
-
-    setDocument(prevDocument => ({
-      ...prevDocument,
-      shapes: [...prevDocument.shapes, shape],
-    }));
-  };
-
   // TODO: instenad of x,y use Coord and reduce the number of arguments
   const addNewShape = (
     type: ShapeType,
@@ -130,13 +134,16 @@ export const CanvasProvider: React.FC<Props> = props => {
         clearCanvas,
         selectionInfo,
         addNewShape,
-        pasteShape,
         updateShapeSizeAndPosition,
         updateShapePosition,
         canUndo,
         canRedo,
         doUndo,
         doRedo,
+        canCopy,
+        canPaste,
+        copyShapeToClipboard,
+        pasteShapeFromClipboard,
         stageRef,
         deleteSelectedShape,
       }}

src/core/providers/canvas/use-clipboard.hook.tsx

@@ -0,0 +1,50 @@
+import { useMemo, useRef, useState } from 'react';
+import { ShapeModel } from '@/core/model';
+import {
+  adjustShapePosition,
+  cloneShape,
+  findShapeById,
+  validateShape,
+} from '../../../pods/canvas/clipboard.utils';
+
+export const useClipboard = (
+  pasteShape: (shape: ShapeModel) => void,
+  shapes: ShapeModel[],
+  selectionInfo: { selectedShapeId: string | null }
+) => {
+  const [clipboardShape, setClipboardShape] = useState<ShapeModel | null>(null);
+  const clipboardShapeRef = useRef<ShapeModel | null>(null);
+  const copyCount = useRef(1);
+
+  const copyShapeToClipboard = () => {
+    const selectedShape = findShapeById(
+      selectionInfo.selectedShapeId ?? '',
+      shapes
+    );
+    if (selectedShape) {
+      clipboardShapeRef.current = cloneShape(selectedShape);
+      setClipboardShape(clipboardShapeRef.current);
+      copyCount.current = 1;
+    }
+  };
+
+  const pasteShapeFromClipboard = () => {
+    if (clipboardShapeRef.current) {
+      const newShape: ShapeModel = cloneShape(clipboardShapeRef.current);
+      validateShape(newShape);
+      adjustShapePosition(newShape, copyCount.current);
+      pasteShape(newShape);
+      copyCount.current++;
+    }
+  };
+
+  const canCopy: boolean = useMemo(() => {
+    return !!selectionInfo.selectedShapeId;
+  }, [selectionInfo.selectedShapeId]);
+
+  const canPaste: boolean = useMemo(() => {
+    return clipboardShapeRef.current !== null;
+  }, [clipboardShape]);
+
+  return { copyShapeToClipboard, pasteShapeFromClipboard, canCopy, canPaste };
+};

src/pods/canvas/canvas.pod.tsx

@@ -8,7 +8,6 @@ import { useDropShape } from './use-drop-shape.hook';
 import { useMonitorShape } from './use-monitor-shape.hook';
 import classes from './canvas.pod.module.css';
 import { EditableComponent } from '@/common/components/inline-edit';
-import { useClipboard } from './use-clipboard.hook';
 import { useSnapIn } from './use-snapin.hook';
 import { ShapeType } from '@/core/model';
 import { useDropImageFromDesktop } from './use-drop-image-from-desktop';
@@ -25,6 +24,10 @@ export const CanvasPod = () => {
     updateShapeSizeAndPosition,
     updateShapePosition,
     stageRef,
+    canCopy,
+    canPaste,
+    copyShapeToClipboard,
+    pasteShapeFromClipboard,
   } = useCanvasContext();
 
   const {
@@ -88,27 +91,6 @@ export const CanvasPod = () => {
       updateShapePosition(id, { x, y });
     };
 
-  const { copyShape, pasteShapeFromClipboard } = useClipboard();
-
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      const isCtrlOrCmdPressed = e.ctrlKey || e.metaKey;
-
-      if (isCtrlOrCmdPressed && e.key === 'c') {
-        copyShape();
-      }
-      if (isCtrlOrCmdPressed && e.key === 'v') {
-        pasteShapeFromClipboard();
-      }
-    };
-
-    window.addEventListener('keydown', handleKeyDown);
-
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [selectedShapeId]);
-
   {
     /* TODO: add other animation for isDraggerOver */
   }

src/pods/toolbar/components/copy-paste-button/copy-paste-button.tsx

@@ -0,0 +1,49 @@
+import { CopyIcon, PasteIcon } from '@/common/components/icons';
+import { ToolbarButton } from '../toolbar-button';
+import classes from '@/pods/toolbar/toolbar.pod.module.css';
+import { useCanvasContext } from '@/core/providers';
+import { SHORTCUTS } from '../../shortcut/shortcut.const';
+
+export const CopyButton = () => {
+  const { canCopy, canPaste, copyShapeToClipboard, pasteShapeFromClipboard } =
+    useCanvasContext();
+
+  const handleCopyClick = () => {
+    if (canCopy) {
+      copyShapeToClipboard();
+    }
+  };
+
+  const handlePasteClick = () => {
+    if (canPaste) {
+      pasteShapeFromClipboard();
+    }
+  };
+
+  return (
+    <div>
+      <ul className={classes.buttonGroup}>
+        <li>
+          <ToolbarButton
+            icon={<CopyIcon />}
+            label="Copy"
+            onClick={handleCopyClick}
+            className={classes.button}
+            disabled={!canCopy}
+            shortcutOptions={SHORTCUTS.copy}
+          />
+        </li>
+        <li>
+          <ToolbarButton
+            icon={<PasteIcon />}
+            label="Paste"
+            onClick={handlePasteClick}
+            className={classes.button}
+            disabled={!canPaste} // Disable the button if the clipboard is not filled
+            shortcutOptions={SHORTCUTS.paste}
+          />
+        </li>
+      </ul>
+    </div>
+  );
+};

src/pods/toolbar/components/copy-paste-button/index.ts

@@ -0,0 +1 @@
+export * from './copy-paste-button';

src/pods/toolbar/shortcut/shortcut.const.ts

@@ -11,4 +11,16 @@ export const SHORTCUTS: Shortcut = {
     targetKey: ['Backspace'],
     targetKeyLabel: 'Backspace',
   },
+  copy: {
+    description: 'Copy',
+    id: 'copy-button-shortcut',
+    targetKey: ['c'],
+    targetKeyLabel: 'Ctrl + C',
+  },
+  paste: {
+    description: 'Paste',
+    id: 'paste-button-shortcut',
+    targetKey: ['v'],
+    targetKeyLabel: 'Ctrl + V',
+  },
 };

src/pods/toolbar/shortcut/shortcut.hook.tsx

@@ -9,12 +9,14 @@ export interface ShortcutHookProps {
 export const useShortcut = ({ targetKey, callback }: ShortcutHookProps) => {
   const handleKeyPress = (event: KeyboardEvent) => {
     const isAltKeyPressed = event.getModifierState('Alt');
-    const isCtrlKeyPressed = event.getModifierState('Control');
+    //const isCtrlKeyPressed = event.getModifierState('Control');
+    const isCtrlOrCmdPressed = event.ctrlKey || event.metaKey;
 
     if (
       (isWindowsOrLinux() && isAltKeyPressed) ||
-      (isMacOS() && isCtrlKeyPressed)
+      (isMacOS() && isCtrlOrCmdPressed)
     ) {
+      console.log('event.key', event.key);
       if (targetKey.includes(event.key)) {
         event.preventDefault();
         callback();

src/pods/toolbar/toolbar.pod.tsx

@@ -1,4 +1,6 @@
 import { DeleteButton } from './components/delete-button';
+import { CopyButton } from './components/copy-paste-button';
+import { PasteButton } from './components/paste-button';
 import {
   ZoomInButton,
   ZoomOutButton,
@@ -36,6 +38,9 @@ export const ToolbarPod: React.FC = () => {
         <li>
           <RedoButton />
         </li>
+        <li>
+          <CopyButton />
+        </li>
         <li>
           <DeleteButton />
         </li>