From 92e711005df562a913c1da54f0b5cb316bca77c4 Mon Sep 17 00:00:00 2001
From: Jesus Sanz <jesus@jsanz.dev>
Date: Tue, 20 Aug 2024 17:25:51 +0200
Subject: [PATCH] #144 - Added Copy/Paste Button

- Added SVGs for Copy and Paste buttons
- Created individual components to handle SVGs.
- Created copy-pasted-button
---
 public/icons/copy.svg                         |  1 +
 public/icons/paste.svg                        |  1 +
 .../components/icons/copy-icon.component.tsx  | 15 ++++++
 src/common/components/icons/index.ts          |  2 +
 .../components/icons/paste-icon.component.tsx | 15 ++++++
 src/pods/canvas/canvas.pod.tsx                |  4 +-
 src/pods/canvas/use-clipboard.hook.tsx        |  4 +-
 .../copy-paste-button/copy-paste-button.tsx   | 47 +++++++++++++++++++
 .../components/copy-paste-button/index.ts     |  1 +
 src/pods/toolbar/shortcut/shortcut.const.ts   | 12 +++++
 src/pods/toolbar/toolbar.pod.tsx              |  5 ++
 11 files changed, 103 insertions(+), 4 deletions(-)
 create mode 100644 public/icons/copy.svg
 create mode 100644 public/icons/paste.svg
 create mode 100644 src/common/components/icons/copy-icon.component.tsx
 create mode 100644 src/common/components/icons/paste-icon.component.tsx
 create mode 100644 src/pods/toolbar/components/copy-paste-button/copy-paste-button.tsx
 create mode 100644 src/pods/toolbar/components/copy-paste-button/index.ts

diff --git a/public/icons/copy.svg b/public/icons/copy.svg
new file mode 100644
index 00000000..ac87cdf5
--- /dev/null
+++ b/public/icons/copy.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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>
\ No newline at end of file
diff --git a/public/icons/paste.svg b/public/icons/paste.svg
new file mode 100644
index 00000000..34cfab52
--- /dev/null
+++ b/public/icons/paste.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" 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>
\ No newline at end of file
diff --git a/src/common/components/icons/copy-icon.component.tsx b/src/common/components/icons/copy-icon.component.tsx
new file mode 100644
index 00000000..271d38d8
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/common/components/icons/index.ts b/src/common/components/icons/index.ts
index 67ef2461..2bf628b8 100644
--- a/src/common/components/icons/index.ts
+++ b/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';
diff --git a/src/common/components/icons/paste-icon.component.tsx b/src/common/components/icons/paste-icon.component.tsx
new file mode 100644
index 00000000..9830f1b9
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/src/pods/canvas/canvas.pod.tsx b/src/pods/canvas/canvas.pod.tsx
index c44f7ea3..a646453b 100644
--- a/src/pods/canvas/canvas.pod.tsx
+++ b/src/pods/canvas/canvas.pod.tsx
@@ -88,14 +88,14 @@ export const CanvasPod = () => {
       updateShapePosition(id, { x, y });
     };
 
-  const { copyShape, pasteShapeFromClipboard } = useClipboard();
+  const { copyShapeToClipboard, pasteShapeFromClipboard } = useClipboard();
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       const isCtrlOrCmdPressed = e.ctrlKey || e.metaKey;
 
       if (isCtrlOrCmdPressed && e.key === 'c') {
-        copyShape();
+        copyShapeToClipboard();
       }
       if (isCtrlOrCmdPressed && e.key === 'v') {
         pasteShapeFromClipboard();
diff --git a/src/pods/canvas/use-clipboard.hook.tsx b/src/pods/canvas/use-clipboard.hook.tsx
index 9b93ee1d..f343db17 100644
--- a/src/pods/canvas/use-clipboard.hook.tsx
+++ b/src/pods/canvas/use-clipboard.hook.tsx
@@ -13,7 +13,7 @@ export const useClipboard = () => {
   const clipboardShapeRef = useRef<ShapeModel | null>(null);
   const copyCount = useRef(1);
 
-  const copyShape = () => {
+  const copyShapeToClipboard = () => {
     const selectedShape = findShapeById(selectionInfo.selectedShapeId, shapes);
     if (selectedShape) {
       clipboardShapeRef.current = cloneShape(selectedShape);
@@ -31,5 +31,5 @@ export const useClipboard = () => {
     }
   };
 
-  return { copyShape, pasteShapeFromClipboard };
+  return { copyShapeToClipboard, pasteShapeFromClipboard };
 };
diff --git a/src/pods/toolbar/components/copy-paste-button/copy-paste-button.tsx b/src/pods/toolbar/components/copy-paste-button/copy-paste-button.tsx
new file mode 100644
index 00000000..661e370c
--- /dev/null
+++ b/src/pods/toolbar/components/copy-paste-button/copy-paste-button.tsx
@@ -0,0 +1,47 @@
+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';
+import { useClipboard } from '@/pods/canvas/use-clipboard.hook';
+
+export const CopyButton = () => {
+  const { selectionInfo } = useCanvasContext();
+  const { copyShapeToClipboard, pasteShapeFromClipboard } = useClipboard();
+
+  const handleCopyClick = () => {
+    if (selectionInfo.selectedShapeId) {
+      copyShapeToClipboard();
+    }
+  };
+
+  const handlePasteClick = () => {
+    pasteShapeFromClipboard();
+  };
+
+  return (
+    <div>
+      <ul className={classes.buttonGroup}>
+        <li>
+          <ToolbarButton
+            icon={<CopyIcon />}
+            label="Copy"
+            onClick={handleCopyClick}
+            className={classes.button}
+            disabled={!selectionInfo.selectedShapeId}
+            shortcutOptions={SHORTCUTS.copy}
+          />
+        </li>
+        <li>
+          <ToolbarButton
+            icon={<PasteIcon />}
+            label="Paste"
+            onClick={handlePasteClick}
+            className={classes.button}
+            shortcutOptions={SHORTCUTS.paste}
+          />
+        </li>
+      </ul>
+    </div>
+  );
+};
diff --git a/src/pods/toolbar/components/copy-paste-button/index.ts b/src/pods/toolbar/components/copy-paste-button/index.ts
new file mode 100644
index 00000000..fe96ca75
--- /dev/null
+++ b/src/pods/toolbar/components/copy-paste-button/index.ts
@@ -0,0 +1 @@
+export * from './copy-paste-button';
diff --git a/src/pods/toolbar/shortcut/shortcut.const.ts b/src/pods/toolbar/shortcut/shortcut.const.ts
index 04d49a1d..a4ef320f 100644
--- a/src/pods/toolbar/shortcut/shortcut.const.ts
+++ b/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: ['Ctrl', 'C'],
+    targetKeyLabel: 'Ctrl + C',
+  },
+  paste: {
+    description: 'Paste',
+    id: 'paste-button-shortcut',
+    targetKey: ['Ctrl', 'V'],
+    targetKeyLabel: 'Ctrl + V',
+  },
 };
diff --git a/src/pods/toolbar/toolbar.pod.tsx b/src/pods/toolbar/toolbar.pod.tsx
index 4b10d54c..cc6fc6b4 100644
--- a/src/pods/toolbar/toolbar.pod.tsx
+++ b/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>