react-design-editor 0.0.37 → 0.0.41

package/lib/handlers/EventHandler.js

@@ -0,0 +1,880 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const animejs_1 = __importDefault(require("animejs"));
+const fabric_1 = require("fabric");
+const constants_1 = require("../constants");
+/**
+ * Event Handler Class
+ * @author salgum1114
+ * @class EventHandler
+ */
+class EventHandler {
+    constructor(handler) {
+        /**
+         * Detach event on document
+         *
+         */
+        this.destroy = () => {
+            if (this.handler.editable) {
+                this.handler.canvas.off({
+                    'object:modified': this.modified,
+                    'object:scaling': this.scaling,
+                    'object:moving': this.moving,
+                    'object:moved': this.moved,
+                    'object:rotating': this.rotating,
+                    'mouse:wheel': this.mousewheel,
+                    'mouse:down': this.mousedown,
+                    'mouse:move': this.mousemove,
+                    'mouse:up': this.mouseup,
+                    'selection:cleared': this.selection,
+                    'selection:created': this.selection,
+                    'selection:updated': this.selection,
+                });
+            }
+            else {
+                this.handler.canvas.off({
+                    'mouse:down': this.mousedown,
+                    'mouse:move': this.mousemove,
+                    'mouse:out': this.mouseout,
+                    'mouse:up': this.mouseup,
+                    'mouse:wheel': this.mousewheel,
+                });
+                this.handler.getObjects().forEach(object => {
+                    object.off('mousedown', this.handler.eventHandler.object.mousedown);
+                    if (object.anime) {
+                        animejs_1.default.remove(object);
+                    }
+                });
+            }
+            this.handler.canvas.wrapperEl.removeEventListener('keydown', this.keydown);
+            this.handler.canvas.wrapperEl.removeEventListener('keyup', this.keyup);
+            this.handler.canvas.wrapperEl.removeEventListener('mousedown', this.onmousedown);
+            this.handler.canvas.wrapperEl.removeEventListener('contextmenu', this.contextmenu);
+            if (this.handler.keyEvent.clipboard) {
+                this.handler.canvas.wrapperEl.removeEventListener('paste', this.paste);
+            }
+        };
+        /**
+         * Individual object event
+         *
+         */
+        this.object = {
+            /**
+             * Mouse down event on object
+             * @param {FabricEvent} opt
+             */
+            mousedown: (opt) => {
+                const { target } = opt;
+                if (target && target.link && target.link.enabled) {
+                    const { onClick } = this.handler;
+                    if (onClick) {
+                        onClick(this.handler.canvas, target);
+                    }
+                }
+            },
+            /**
+             * Mouse double click event on object
+             * @param {FabricEvent} opt
+             */
+            mousedblclick: (opt) => {
+                const { target } = opt;
+                if (target) {
+                    const { onDblClick } = this.handler;
+                    if (onDblClick) {
+                        onDblClick(this.handler.canvas, target);
+                    }
+                }
+            },
+        };
+        /**
+         * Modified event object
+         *
+         * @param {FabricEvent} opt
+         * @returns
+         */
+        this.modified = (opt) => {
+            const { target } = opt;
+            if (!target) {
+                return;
+            }
+            if (target.type === 'circle' && target.parentId) {
+                return;
+            }
+            const { onModified } = this.handler;
+            if (onModified) {
+                onModified(target);
+            }
+        };
+        /**
+         * Moving event object
+         *
+         * @param {FabricEvent} opt
+         * @returns
+         */
+        this.moving = (opt) => {
+            const { target } = opt;
+            if (this.handler.interactionMode === 'crop') {
+                this.handler.cropHandler.moving(opt);
+            }
+            else {
+                if (this.handler.editable && this.handler.guidelineOption.enabled) {
+                    this.handler.guidelineHandler.movingGuidelines(target);
+                }
+                if (target.type === 'activeSelection') {
+                    const activeSelection = target;
+                    activeSelection.getObjects().forEach((obj) => {
+                        const left = target.left + obj.left + target.width / 2;
+                        const top = target.top + obj.top + target.height / 2;
+                        if (obj.superType === 'node') {
+                            this.handler.portHandler.setCoords({ ...obj, left, top });
+                        }
+                        else if (obj.superType === 'element') {
+                            const { id } = obj;
+                            const el = this.handler.elementHandler.findById(id);
+                            // TODO... Element object incorrect position
+                            this.handler.elementHandler.setPositionByOrigin(el, obj, left, top);
+                        }
+                    });
+                    return;
+                }
+                if (target.superType === 'node') {
+                    this.handler.portHandler.setCoords(target);
+                }
+                else if (target.superType === 'element') {
+                    const { id } = target;
+                    const el = this.handler.elementHandler.findById(id);
+                    this.handler.elementHandler.setPosition(el, target);
+                }
+            }
+        };
+        /**
+         * Moved event object
+         *
+         * @param {FabricEvent} opt
+         */
+        this.moved = (opt) => {
+            const { target } = opt;
+            this.handler.gridHandler.setCoords(target);
+            if (!this.handler.transactionHandler.active) {
+                this.handler.transactionHandler.save('moved');
+            }
+            if (target.superType === 'element') {
+                const { id } = target;
+                const el = this.handler.elementHandler.findById(id);
+                this.handler.elementHandler.setPosition(el, target);
+            }
+        };
+        /**
+         * Scaling event object
+         *
+         * @param {FabricEvent} opt
+         */
+        this.scaling = (opt) => {
+            const { target } = opt;
+            if (this.handler.interactionMode === 'crop') {
+                this.handler.cropHandler.resize(opt);
+            }
+            // TODO...this.handler.guidelineHandler.scalingGuidelines(target);
+            if (target.superType === 'element') {
+                const { id, width, height } = target;
+                const el = this.handler.elementHandler.findById(id);
+                // update the element
+                this.handler.elementHandler.setScaleOrAngle(el, target);
+                this.handler.elementHandler.setSize(el, target);
+                this.handler.elementHandler.setPosition(el, target);
+                const video = target;
+                if (video.type === 'video' && video.player) {
+                    video.player.setPlayerSize(width, height);
+                }
+            }
+        };
+        /**
+         * Scaled event object
+         *
+         * @param {FabricEvent} opt
+         */
+        this.scaled = (_opt) => {
+            if (!this.handler.transactionHandler.active) {
+                this.handler.transactionHandler.save('scaled');
+            }
+        };
+        /**
+         * Rotating event object
+         *
+         * @param {FabricEvent} opt
+         */
+        this.rotating = (opt) => {
+            const { target } = opt;
+            if (target.superType === 'element') {
+                const { id } = target;
+                const el = this.handler.elementHandler.findById(id);
+                // update the element
+                this.handler.elementHandler.setScaleOrAngle(el, target);
+            }
+        };
+        /**
+         * Rotated event object
+         *
+         * @param {FabricEvent} opt
+         */
+        this.rotated = (_opt) => {
+            if (!this.handler.transactionHandler.active) {
+                this.handler.transactionHandler.save('rotated');
+            }
+        };
+        /**
+         * Moing object at keyboard arrow key down event
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.arrowmoving = (e) => {
+            const activeObject = this.handler.canvas.getActiveObject();
+            if (!activeObject) {
+                return false;
+            }
+            if (activeObject.id === 'workarea') {
+                return false;
+            }
+            if (e.code === constants_1.code.ARROW_UP) {
+                activeObject.set('top', activeObject.top - 2);
+                activeObject.setCoords();
+                this.handler.canvas.renderAll();
+                return true;
+            }
+            else if (e.code === constants_1.code.ARROW_DOWN) {
+                activeObject.set('top', activeObject.top + 2);
+                activeObject.setCoords();
+                this.handler.canvas.renderAll();
+                return true;
+            }
+            else if (e.code === constants_1.code.ARROW_LEFT) {
+                activeObject.set('left', activeObject.left - 2);
+                activeObject.setCoords();
+                this.handler.canvas.renderAll();
+                return true;
+            }
+            else if (e.code === constants_1.code.ARROW_RIGHT) {
+                activeObject.set('left', activeObject.left + 2);
+                activeObject.setCoords();
+                this.handler.canvas.renderAll();
+                return true;
+            }
+            if (this.handler.onModified) {
+                this.handler.onModified(activeObject);
+            }
+            return true;
+        };
+        /**
+         * Zoom at mouse wheel event
+         *
+         * @param {FabricEvent<WheelEvent>} opt
+         * @returns
+         */
+        this.mousewheel = (opt) => {
+            const event = opt;
+            const { zoomEnabled } = this.handler;
+            if (!zoomEnabled) {
+                return;
+            }
+            const delta = event.e.deltaY;
+            let zoomRatio = this.handler.canvas.getZoom();
+            if (delta > 0) {
+                zoomRatio -= 0.05;
+            }
+            else {
+                zoomRatio += 0.05;
+            }
+            this.handler.zoomHandler.zoomToPoint(new fabric_1.fabric.Point(this.handler.canvas.getWidth() / 2, this.handler.canvas.getHeight() / 2), zoomRatio);
+            event.e.preventDefault();
+            event.e.stopPropagation();
+        };
+        /**
+         * Mouse down event on object
+         *
+         * @param {FabricEvent<MouseEvent>} opt
+         * @returns
+         */
+        this.mousedown = (opt) => {
+            const event = opt;
+            const { editable } = this.handler;
+            if (event.e.altKey && editable && !this.handler.interactionHandler.isDrawingMode()) {
+                this.handler.interactionHandler.grab();
+                this.panning = true;
+                return;
+            }
+            if (this.handler.interactionMode === 'grab') {
+                this.panning = true;
+                return;
+            }
+            const { target } = event;
+            if (editable) {
+                if (this.handler.prevTarget && this.handler.prevTarget.superType === 'link') {
+                    this.handler.prevTarget.set({
+                        stroke: this.handler.prevTarget.originStroke,
+                    });
+                }
+                if (target && target.type === 'fromPort') {
+                    this.handler.linkHandler.init(target);
+                    return;
+                }
+                if (target &&
+                    this.handler.interactionMode === 'link' &&
+                    (target.type === 'toPort' || target.superType === 'node')) {
+                    let toPort;
+                    if (target.superType === 'node') {
+                        toPort = target.toPort;
+                    }
+                    else {
+                        toPort = target;
+                    }
+                    this.handler.linkHandler.generate(toPort);
+                    return;
+                }
+                this.handler.guidelineHandler.viewportTransform = this.handler.canvas.viewportTransform;
+                this.handler.guidelineHandler.zoom = this.handler.canvas.getZoom();
+                if (this.handler.interactionMode === 'selection') {
+                    if (target && target.superType === 'link') {
+                        target.set({
+                            stroke: target.selectFill || 'green',
+                        });
+                    }
+                    this.handler.prevTarget = target;
+                    return;
+                }
+                if (this.handler.interactionMode === 'polygon') {
+                    if (target && this.handler.pointArray.length && target.id === this.handler.pointArray[0].id) {
+                        this.handler.drawingHandler.polygon.generate(this.handler.pointArray);
+                    }
+                    else {
+                        this.handler.drawingHandler.polygon.addPoint(event);
+                    }
+                }
+                else if (this.handler.interactionMode === 'line') {
+                    if (this.handler.pointArray.length && this.handler.activeLine) {
+                        this.handler.drawingHandler.line.generate(event);
+                    }
+                    else {
+                        this.handler.drawingHandler.line.addPoint(event);
+                    }
+                }
+                else if (this.handler.interactionMode === 'arrow') {
+                    if (this.handler.pointArray.length && this.handler.activeLine) {
+                        this.handler.drawingHandler.arrow.generate(event);
+                    }
+                    else {
+                        this.handler.drawingHandler.arrow.addPoint(event);
+                    }
+                }
+            }
+        };
+        /**
+         * Mouse move event on canvas
+         *
+         * @param {FabricEvent<MouseEvent>} opt
+         * @returns
+         */
+        this.mousemove = (opt) => {
+            const event = opt;
+            if (this.handler.interactionMode === 'grab' && this.panning) {
+                this.handler.interactionHandler.moving(event.e);
+                this.handler.canvas.requestRenderAll();
+            }
+            if (!this.handler.editable && event.target) {
+                if (event.target.superType === 'element') {
+                    return;
+                }
+                if (event.target.id !== 'workarea') {
+                    if (event.target !== this.handler.target) {
+                        this.handler.tooltipHandler.show(event.target);
+                    }
+                }
+                else {
+                    this.handler.tooltipHandler.hide(event.target);
+                }
+            }
+            if (this.handler.interactionMode === 'polygon') {
+                if (this.handler.activeLine && this.handler.activeLine.class === 'line') {
+                    const pointer = this.handler.canvas.getPointer(event.e);
+                    this.handler.activeLine.set({ x2: pointer.x, y2: pointer.y });
+                    const points = this.handler.activeShape.get('points');
+                    points[this.handler.pointArray.length] = {
+                        x: pointer.x,
+                        y: pointer.y,
+                    };
+                    this.handler.activeShape.set({
+                        points,
+                    });
+                    this.handler.canvas.requestRenderAll();
+                }
+            }
+            else if (this.handler.interactionMode === 'line') {
+                if (this.handler.activeLine && this.handler.activeLine.class === 'line') {
+                    const pointer = this.handler.canvas.getPointer(event.e);
+                    this.handler.activeLine.set({ x2: pointer.x, y2: pointer.y });
+                }
+                this.handler.canvas.requestRenderAll();
+            }
+            else if (this.handler.interactionMode === 'arrow') {
+                if (this.handler.activeLine && this.handler.activeLine.class === 'line') {
+                    const pointer = this.handler.canvas.getPointer(event.e);
+                    this.handler.activeLine.set({ x2: pointer.x, y2: pointer.y });
+                }
+                this.handler.canvas.requestRenderAll();
+            }
+            else if (this.handler.interactionMode === 'link') {
+                if (this.handler.activeLine && this.handler.activeLine.class === 'line') {
+                    const pointer = this.handler.canvas.getPointer(event.e);
+                    this.handler.activeLine.set({ x2: pointer.x, y2: pointer.y });
+                }
+                this.handler.canvas.requestRenderAll();
+            }
+            return;
+        };
+        /**
+         * Mouse up event on canvas
+         *
+         * @param {FabricEvent<MouseEvent>} opt
+         * @returns
+         */
+        this.mouseup = (opt) => {
+            const event = opt;
+            if (this.handler.interactionMode === 'grab') {
+                this.panning = false;
+                return;
+            }
+            const { target, e } = event;
+            if (this.handler.interactionMode === 'selection') {
+                if (target && e.shiftKey && target.superType === 'node') {
+                    const node = target;
+                    this.handler.canvas.discardActiveObject();
+                    const nodes = [];
+                    this.handler.nodeHandler.getNodePath(node, nodes);
+                    const activeSelection = new fabric_1.fabric.ActiveSelection(nodes, {
+                        canvas: this.handler.canvas,
+                        ...this.handler.activeSelectionOption,
+                    });
+                    this.handler.canvas.setActiveObject(activeSelection);
+                    this.handler.canvas.requestRenderAll();
+                }
+            }
+            if (this.handler.editable && this.handler.guidelineOption.enabled) {
+                this.handler.guidelineHandler.verticalLines.length = 0;
+                this.handler.guidelineHandler.horizontalLines.length = 0;
+            }
+            this.handler.canvas.renderAll();
+        };
+        /**
+         * Mouse out event on canvas
+         *
+         * @param {FabricEvent<MouseEvent>} opt
+         */
+        this.mouseout = (opt) => {
+            const event = opt;
+            if (!event.target) {
+                this.handler.tooltipHandler.hide();
+            }
+        };
+        /**
+         * Selection event event on canvas
+         *
+         * @param {FabricEvent} opt
+         */
+        this.selection = (opt) => {
+            const { onSelect, activeSelectionOption } = this.handler;
+            const target = opt.target;
+            if (target && target.type === 'activeSelection') {
+                target.set({
+                    ...activeSelectionOption,
+                });
+            }
+            if (onSelect) {
+                onSelect(target);
+            }
+        };
+        /**
+         * Called resize event on canvas
+         *
+         * @param {number} nextWidth
+         * @param {number} nextHeight
+         * @returns
+         */
+        this.resize = (nextWidth, nextHeight) => {
+            this.handler.canvas.setWidth(nextWidth).setHeight(nextHeight);
+            this.handler.canvas.setBackgroundColor(this.handler.canvasOption.backgroundColor, this.handler.canvas.renderAll.bind(this.handler.canvas));
+            if (!this.handler.workarea) {
+                return;
+            }
+            const diffWidth = nextWidth / 2 - this.handler.width / 2;
+            const diffHeight = nextHeight / 2 - this.handler.height / 2;
+            this.handler.width = nextWidth;
+            this.handler.height = nextHeight;
+            if (this.handler.workarea.layout === 'fixed') {
+                this.handler.canvas.centerObject(this.handler.workarea);
+                this.handler.workarea.setCoords();
+                if (this.handler.gridOption.enabled) {
+                    return;
+                }
+                this.handler.canvas.getObjects().forEach((obj) => {
+                    if (obj.id !== 'workarea') {
+                        const left = obj.left + diffWidth;
+                        const top = obj.top + diffHeight;
+                        obj.set({
+                            left,
+                            top,
+                        });
+                        obj.setCoords();
+                        if (obj.superType === 'element') {
+                            const { id } = obj;
+                            const el = this.handler.elementHandler.findById(id);
+                            // update the element
+                            this.handler.elementHandler.setPosition(el, obj);
+                        }
+                    }
+                });
+                this.handler.canvas.requestRenderAll();
+                return;
+            }
+            if (this.handler.workarea.layout === 'responsive') {
+                const { scaleX } = this.handler.workareaHandler.calculateScale();
+                const center = this.handler.canvas.getCenter();
+                const deltaPoint = new fabric_1.fabric.Point(diffWidth, diffHeight);
+                this.handler.canvas.relativePan(deltaPoint);
+                this.handler.zoomHandler.zoomToPoint(new fabric_1.fabric.Point(center.left, center.top), scaleX);
+                return;
+            }
+            const scaleX = nextWidth / this.handler.workarea.width;
+            const scaleY = nextHeight / this.handler.workarea.height;
+            const diffScaleX = nextWidth / (this.handler.workarea.width * this.handler.workarea.scaleX);
+            const diffScaleY = nextHeight / (this.handler.workarea.height * this.handler.workarea.scaleY);
+            this.handler.workarea.set({
+                scaleX,
+                scaleY,
+            });
+            this.handler.canvas.getObjects().forEach((obj) => {
+                const { id } = obj;
+                if (obj.id !== 'workarea') {
+                    const left = obj.left * diffScaleX;
+                    const top = obj.top * diffScaleY;
+                    const newScaleX = obj.scaleX * diffScaleX;
+                    const newScaleY = obj.scaleY * diffScaleY;
+                    obj.set({
+                        scaleX: newScaleX,
+                        scaleY: newScaleY,
+                        left,
+                        top,
+                    });
+                    obj.setCoords();
+                    if (obj.superType === 'element') {
+                        const video = obj;
+                        const { width, height } = obj;
+                        const el = this.handler.elementHandler.findById(id);
+                        this.handler.elementHandler.setSize(el, obj);
+                        if (video.player) {
+                            video.player.setPlayerSize(width, height);
+                        }
+                        this.handler.elementHandler.setPosition(el, obj);
+                    }
+                }
+            });
+            this.handler.canvas.renderAll();
+        };
+        /**
+         * Paste event on canvas
+         *
+         * @param {ClipboardEvent} e
+         * @returns
+         */
+        this.paste = async (e) => {
+            if (this.handler.canvas.wrapperEl !== document.activeElement) {
+                return false;
+            }
+            if (e.preventDefault) {
+                e.preventDefault();
+            }
+            if (e.stopPropagation) {
+                e.stopPropagation();
+            }
+            const clipboardData = e.clipboardData;
+            if (clipboardData.types.length) {
+                clipboardData.types.forEach((clipboardType) => {
+                    if (clipboardType === 'text/plain') {
+                        const textPlain = clipboardData.getData('text/plain');
+                        try {
+                            const objects = JSON.parse(textPlain);
+                            const { gridOption: { grid = 10 }, isCut, } = this.handler;
+                            const padding = isCut ? 0 : grid;
+                            if (objects && Array.isArray(objects)) {
+                                const filteredObjects = objects.filter(obj => obj !== null);
+                                if (filteredObjects.length === 1) {
+                                    const obj = filteredObjects[0];
+                                    if (typeof obj.cloneable !== 'undefined' && !obj.cloneable) {
+                                        return;
+                                    }
+                                    obj.left = obj.properties.left + padding;
+                                    obj.top = obj.properties.top + padding;
+                                    const createdObj = this.handler.add(obj, false, true);
+                                    this.handler.canvas.setActiveObject(createdObj);
+                                    this.handler.canvas.requestRenderAll();
+                                }
+                                else {
+                                    const nodes = [];
+                                    const targets = [];
+                                    objects.forEach(obj => {
+                                        if (!obj) {
+                                            return;
+                                        }
+                                        if (obj.superType === 'link') {
+                                            obj.fromNodeId = nodes[obj.fromNodeIndex].id;
+                                            obj.toNodeId = nodes[obj.toNodeIndex].id;
+                                        }
+                                        else {
+                                            obj.left = obj.properties.left + padding;
+                                            obj.top = obj.properties.top + padding;
+                                        }
+                                        const createdObj = this.handler.add(obj, false, true);
+                                        if (obj.superType === 'node') {
+                                            nodes.push(createdObj);
+                                        }
+                                        else {
+                                            targets.push(createdObj);
+                                        }
+                                    });
+                                    const activeSelection = new fabric_1.fabric.ActiveSelection(nodes.length ? nodes : targets, {
+                                        canvas: this.handler.canvas,
+                                        ...this.handler.activeSelectionOption,
+                                    });
+                                    this.handler.canvas.setActiveObject(activeSelection);
+                                    this.handler.canvas.requestRenderAll();
+                                }
+                                if (!this.handler.transactionHandler.active) {
+                                    this.handler.transactionHandler.save('paste');
+                                }
+                                this.handler.isCut = false;
+                                this.handler.copy();
+                            }
+                        }
+                        catch (error) {
+                            console.error(error);
+                            // const item = {
+                            //     id: uuv4id(),
+                            //     type: 'textbox',
+                            //     text: textPlain,
+                            // };
+                            // this.handler.add(item, true);
+                        }
+                    }
+                    else if (clipboardType === 'text/html') {
+                        // Todo ...
+                        // const textHtml = clipboardData.getData('text/html');
+                        // console.log(textHtml);
+                    }
+                    else if (clipboardType === 'Files') {
+                        // Array.from(clipboardData.files).forEach((file) => {
+                        //     const { type } = file;
+                        //     if (type === 'image/png' || type === 'image/jpeg' || type === 'image/jpg') {
+                        //         const item = {
+                        //             id: uuid(),
+                        //             type: 'image',
+                        //             file,
+                        //             superType: 'image',
+                        //         };
+                        //         this.handler.add(item, true);
+                        //     } else {
+                        //         console.error('Not supported file type');
+                        //     }
+                        // });
+                    }
+                });
+            }
+            return true;
+        };
+        /**
+         * Keydown event on document
+         *
+         * @param {KeyboardEvent} e
+         */
+        this.keydown = (e) => {
+            const { keyEvent, editable } = this.handler;
+            if (!Object.keys(keyEvent).length) {
+                return;
+            }
+            const { clipboard, grab } = keyEvent;
+            if (this.handler.interactionHandler.isDrawingMode()) {
+                if (this.handler.shortcutHandler.isEscape(e)) {
+                    if (this.handler.interactionMode === 'polygon') {
+                        this.handler.drawingHandler.polygon.finish();
+                    }
+                    else if (this.handler.interactionMode === 'line') {
+                        this.handler.drawingHandler.line.finish();
+                    }
+                    else if (this.handler.interactionMode === 'arrow') {
+                        this.handler.drawingHandler.arrow.finish();
+                    }
+                    else if (this.handler.interactionMode === 'link') {
+                        this.handler.linkHandler.finish();
+                    }
+                }
+                return;
+            }
+            if (this.handler.shortcutHandler.isW(e) && grab) {
+                this.code = e.code;
+                this.handler.interactionHandler.grab();
+                return;
+            }
+            if (e.altKey && editable && grab) {
+                this.handler.interactionHandler.grab();
+                return;
+            }
+            if (this.handler.shortcutHandler.isEscape(e)) {
+                if (this.handler.interactionMode === 'selection') {
+                    this.handler.canvas.discardActiveObject();
+                    this.handler.canvas.renderAll();
+                }
+                this.handler.tooltipHandler.hide();
+            }
+            if (this.handler.canvas.wrapperEl !== document.activeElement) {
+                return;
+            }
+            if (editable) {
+                if (this.handler.shortcutHandler.isQ(e)) {
+                    this.code = e.code;
+                }
+                else if (this.handler.shortcutHandler.isDelete(e)) {
+                    this.handler.remove();
+                }
+                else if (this.handler.shortcutHandler.isArrow(e)) {
+                    this.arrowmoving(e);
+                }
+                else if (this.handler.shortcutHandler.isCtrlA(e)) {
+                    e.preventDefault();
+                    this.handler.selectAll();
+                }
+                else if (this.handler.shortcutHandler.isCtrlC(e)) {
+                    e.preventDefault();
+                    this.handler.copy();
+                }
+                else if (this.handler.shortcutHandler.isCtrlV(e) && !clipboard) {
+                    e.preventDefault();
+                    this.handler.paste();
+                }
+                else if (this.handler.shortcutHandler.isCtrlX(e)) {
+                    e.preventDefault();
+                    this.handler.cut();
+                }
+                else if (this.handler.shortcutHandler.isCtrlZ(e)) {
+                    e.preventDefault();
+                    this.handler.transactionHandler.undo();
+                }
+                else if (this.handler.shortcutHandler.isCtrlY(e)) {
+                    e.preventDefault();
+                    this.handler.transactionHandler.redo();
+                }
+                else if (this.handler.shortcutHandler.isPlus(e)) {
+                    e.preventDefault();
+                    this.handler.zoomHandler.zoomIn();
+                }
+                else if (this.handler.shortcutHandler.isMinus(e)) {
+                    e.preventDefault();
+                    this.handler.zoomHandler.zoomOut();
+                }
+                else if (this.handler.shortcutHandler.isO(e)) {
+                    e.preventDefault();
+                    this.handler.zoomHandler.zoomOneToOne();
+                }
+                else if (this.handler.shortcutHandler.isP(e)) {
+                    e.preventDefault();
+                    this.handler.zoomHandler.zoomToFit();
+                }
+                return;
+            }
+            return;
+        };
+        /**
+         * Key up event on canvas
+         *
+         * @param {KeyboardEvent} _e
+         */
+        this.keyup = (e) => {
+            if (this.handler.interactionHandler.isDrawingMode()) {
+                return;
+            }
+            if (!this.handler.shortcutHandler.isW(e)) {
+                this.handler.interactionHandler.selection();
+            }
+        };
+        /**
+         * Context menu event on canvas
+         *
+         * @param {MouseEvent} e
+         */
+        this.contextmenu = (e) => {
+            e.preventDefault();
+            const { editable, onContext } = this.handler;
+            if (editable && onContext) {
+                const target = this.handler.canvas.findTarget(e, false);
+                if (target && target.type !== 'activeSelection') {
+                    this.handler.select(target);
+                }
+                this.handler.contextmenuHandler.show(e, target);
+            }
+        };
+        /**
+         * Mouse down event on canvas
+         *
+         * @param {MouseEvent} _e
+         */
+        this.onmousedown = (_e) => {
+            this.handler.contextmenuHandler.hide();
+        };
+        this.handler = handler;
+        this.initialize();
+    }
+    /**
+     * Attch event on document
+     *
+     */
+    initialize() {
+        if (this.handler.editable) {
+            // @ts-ignore
+            this.handler.canvas.on({
+                'object:modified': this.modified,
+                'object:scaling': this.scaling,
+                'object:scaled': this.scaled,
+                'object:moving': this.moving,
+                'object:moved': this.moved,
+                'object:rotating': this.rotating,
+                'object:rotated': this.rotated,
+                'mouse:wheel': this.mousewheel,
+                'mouse:down': this.mousedown,
+                'mouse:move': this.mousemove,
+                'mouse:up': this.mouseup,
+                'selection:cleared': this.selection,
+                'selection:created': this.selection,
+                'selection:updated': this.selection,
+            });
+        }
+        else {
+            // @ts-ignore
+            this.handler.canvas.on({
+                'mouse:down': this.mousedown,
+                'mouse:move': this.mousemove,
+                'mouse:out': this.mouseout,
+                'mouse:up': this.mouseup,
+                'mouse:wheel': this.mousewheel,
+            });
+        }
+        this.handler.canvas.wrapperEl.tabIndex = 1000;
+        this.handler.canvas.wrapperEl.addEventListener('keydown', this.keydown, false);
+        this.handler.canvas.wrapperEl.addEventListener('keyup', this.keyup, false);
+        this.handler.canvas.wrapperEl.addEventListener('mousedown', this.onmousedown, false);
+        this.handler.canvas.wrapperEl.addEventListener('contextmenu', this.contextmenu, false);
+        if (this.handler.keyEvent.clipboard) {
+            document.addEventListener('paste', this.paste, false);
+        }
+    }
+}
+exports.default = EventHandler;