feat(hotkey):

package.json

@@ -8,6 +8,7 @@
     "antd": "^5.11.0",
     "fabric": "^5.3.0",
     "fontfaceobserver": "^2.3.0",
+    "hotkeys-js": "^3.12.0",
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/editor/controller.ts

@@ -2,6 +2,7 @@
 
 import { fabric } from 'fabric';
 import { ROTATE_SVG, ROTATE_CURSOR, COPY_SVG, DEL_SVG } from '@/assets/icon';
+import { pasteObject, removeObject } from '@/utils/helper';
 
 const ROTATE_IMG = document.createElement('img');
 ROTATE_IMG.src = ROTATE_SVG;
@@ -67,22 +68,13 @@ function renderSvgIcon(icon) {
 const handleCopyObject = (eventData, transform) => {
   const target = transform.target;
   const canvas = target.canvas;
-  target.clone((cloned) => {
-    cloned.left += 100;
-    cloned.top += 100;
-    canvas.add(cloned);
-    canvas.setActiveObject(cloned);
-    canvas.fire('fabritor:clone', { target: cloned });
-  });
-  return true;
+  pasteObject(target, canvas);
 }
 
 const handleDelObject = (eventData, transform) => {
   const target = transform.target;
   const canvas = target.canvas;
-  canvas.remove(target);
-  canvas.requestRenderAll();
-  canvas.fire('fabritor:del', { target: null });
+  removeObject(target, canvas);
   return true;
 }
 

src/editor/hotkey.ts

@@ -0,0 +1,20 @@
+import hotkeys from 'hotkeys-js';
+import { copyObjecy, pasteObject, removeObject } from '@/utils/helper';
+let _clipboard;
+export default function initHotKey (canvas) {
+  // @ts-ignore
+  hotkeys('ctrl+c,command+c', async (event) => {
+    event.preventDefault();
+    _clipboard = await copyObjecy(canvas);
+  });
+  hotkeys('ctrl+v,command+v', (event) => {
+    event.preventDefault();
+    if (_clipboard) {
+      pasteObject(_clipboard, canvas);
+    }
+  });
+  hotkeys('delete,del,backspace', (event) => {
+    event.preventDefault();
+    removeObject(canvas.getActiveObject(), canvas);
+  });
+}

src/editor/image.ts

@@ -1,5 +1,4 @@
 import { fabric } from 'fabric';
-import { IMAGE_DEFAULT_CONFIG } from '../utils/constants';
 import { uuid } from '@/utils';
 import { getGlobalEditor } from '@/utils/global';
 

src/editor/index.tsx

@@ -6,6 +6,7 @@ import { initObjectPrototype } from './object';
 import { throttle } from 'lodash-es';
 import { loadFont } from '@/utils';
 import { initAligningGuidelines, initCenteringGuidelines } from './guide-lines';
+import initHotKey from './hotkey';
 
 const SKETCH_ID = 'fabritor-sketch';
 export default class Editor {
@@ -28,6 +29,7 @@ export default class Editor {
     this._initSketch();
     this._initEvents();
     this._initGuidelines();
+    initHotKey(this.canvas);
   }
 
   private _initObject () {

src/utils/helper.ts

@@ -15,4 +15,52 @@ export const calcCanvasZoomLevel = (
 
   level = Number(level.toFixed(2));
   return level;
+}
+
+export const copyObjecy = async (canvas) => {
+  // clone what are you copying since you
+  // may want copy and paste on different moment.
+  // and you do not want the changes happened
+  // later to reflect on the copy.
+  return new Promise((resolve) => {
+    const object = canvas.getActiveObject();
+    if (!object) return Promise.resolve(null);
+    return object.clone((cloned) => {
+      resolve(cloned);
+    });
+  });
+}
+export const pasteObject = (target, canvas) => {
+  // clone again, so you can do multiple copies.
+ target.clone((cloned) => {
+  canvas.discardActiveObject();
+  cloned.set({
+   left: cloned.left + 50,
+   top: cloned.top + 50,
+   evented: true,
+  });
+  if (cloned.type === 'activeSelection') {
+   // active selection needs a reference to the canvas.
+   cloned.canvas = canvas;
+   cloned.forEachObject((obj) => {
+    canvas.add(obj);
+   });
+   // this should solve the unselectability
+   cloned.setCoords();
+  } else {
+   canvas.add(cloned);
+  }
+  // target.top += 50;
+  // target.left += 50;
+  canvas.setActiveObject(cloned);
+  canvas.requestRenderAll();
+    canvas.fire('fabritor:clone', { target: cloned });
+ });
+}
+export const removeObject = (target, canvas) => {
+  if (!target) return;
+  canvas.remove(target);
+  canvas.requestRenderAll();
+  canvas.fire('fabritor:del', { target: null });
+  return true;
 }

yarn.lock

@@ -3749,6 +3749,11 @@ hosted-git-info@^4.0.1:
   dependencies:
     lru-cache "^6.0.0"
 
+hotkeys-js@^3.12.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.12.0.tgz#5534a7ffdba923df489ffbd876b991979beb2c77"
+  integrity sha512-Z+N573ycUKIGwFYS3ID1RzMJiGmtWMGKMiaNLyJS8B1ei+MllF4ZYmKS2T0kMWBktOz+WZLVNikftEgnukOrXg==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.npmmirror.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"