[salgum1114#209] Change code in keydown event

Author: salgum1114

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-design-editor",
-	"version": "0.0.33",
+	"version": "0.0.34",
 	"description": "Design Editor Tools with React.js + ant.design + fabric.js",
 	"main": "dist/react-design-editor.min.js",
 	"typings": "lib/index.d.ts",

src/components/canvas/constants/code.ts

@@ -0,0 +1,19 @@
+export const ESCAPE = 'Escape';
+export const DELETE = 'Delete';
+export const BACKSPACE = 'Backspace';
+export const EQUAL = 'Equal';
+export const MINUS = 'Minus';
+export const KEY_A = 'KeyA';
+export const KEY_Q = 'KeyQ';
+export const KEY_W = 'KeyW';
+export const KEY_C = 'KeyC';
+export const KEY_V = 'KeyV';
+export const KEY_Z = 'KeyZ';
+export const KEY_Y = 'KeyY';
+export const KEY_O = 'KeyO';
+export const KEY_P = 'KeyP';
+export const KEY_X = 'KeyX';
+export const ARROW_UP = 'ArrowUp';
+export const ARROW_DOWN = 'ArrowDown';
+export const ARROW_LEFT = 'ArrowLeft';
+export const ARROW_RIGHT = 'ArrowRight';

src/components/canvas/constants/index.ts

@@ -1,3 +1,4 @@
 import * as defaults from './defaults';
+import * as code from './code';
 
-export { defaults };
+export { defaults, code };

src/components/canvas/handlers/EventHandler.ts

@@ -5,6 +5,7 @@ import Handler from './Handler';
 import { FabricObject, FabricEvent } from '../utils';
 import { VideoObject } from '../objects/Video';
 import { NodeObject } from '../objects/Node';
+import { code } from '../constants';
 
 /**
  * Event Handler Class
@@ -13,7 +14,7 @@ import { NodeObject } from '../objects/Node';
  */
 class EventHandler {
 	handler: Handler;
-	keyCode: number;
+	code: string;
 	panning: boolean;
 
 	constructor(handler: Handler) {
@@ -293,22 +294,22 @@ class EventHandler {
 		if (activeObject.id === 'workarea') {
 			return false;
 		}
-		if (e.keyCode === 38) {
+		if (e.code === code.ARROW_UP) {
 			activeObject.set('top', activeObject.top - 2);
 			activeObject.setCoords();
 			this.handler.canvas.renderAll();
 			return true;
-		} else if (e.keyCode === 40) {
+		} else if (e.code === code.ARROW_DOWN) {
 			activeObject.set('top', activeObject.top + 2);
 			activeObject.setCoords();
 			this.handler.canvas.renderAll();
 			return true;
-		} else if (e.keyCode === 37) {
+		} else if (e.code === code.ARROW_LEFT) {
 			activeObject.set('left', activeObject.left - 2);
 			activeObject.setCoords();
 			this.handler.canvas.renderAll();
 			return true;
-		} else if (e.keyCode === 39) {
+		} else if (e.code === code.ARROW_RIGHT) {
 			activeObject.set('left', activeObject.left + 2);
 			activeObject.setCoords();
 			this.handler.canvas.renderAll();
@@ -644,7 +645,7 @@ class EventHandler {
 	 * @param {ClipboardEvent} e
 	 * @returns
 	 */
-	public paste = (e: ClipboardEvent) => {
+	public paste = async (e: ClipboardEvent) => {
 		if (this.handler.canvas.wrapperEl !== document.activeElement) {
 			return false;
 		}
@@ -772,7 +773,7 @@ class EventHandler {
 			return;
 		}
 		if (this.handler.shortcutHandler.isW(e)) {
-			this.keyCode = e.keyCode;
+			this.code = e.code;
 			this.handler.interactionHandler.grab();
 			return;
 		}
@@ -792,7 +793,7 @@ class EventHandler {
 		}
 		if (editable) {
 			if (this.handler.shortcutHandler.isQ(e)) {
-				this.keyCode = e.keyCode;
+				this.code = e.code;
 			} else if (this.handler.shortcutHandler.isDelete(e)) {
 				this.handler.remove();
 			} else if (this.handler.shortcutHandler.isArrow(e)) {

src/components/canvas/handlers/Handler.ts

@@ -285,6 +285,12 @@ class Handler implements HandlerOptions {
 
 	private isRequsetAnimFrame = false;
 	private requestFrame: any;
+	/**
+	 * Copied object
+	 *
+	 * @private
+	 * @type {*}
+	 */
 	private clipboard: any;
 
 	constructor(options: HandlerOptions) {