react-design-editor 0.0.31 → 0.0.35

package/lib/handlers/ShortcutHandler.js

@@ -1,150 +1,151 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * Shortcut Handler Class
- *
- * @author salgum1114
- * @class ShortcutHandler
- */
-class ShortcutHandler {
-    constructor(handler) {
-        /**
-         * Whether keydown Escape
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isEscape = (e) => {
-            return e.keyCode === 27 && this.keyEvent.esc;
-        };
-        /**
-         * Whether keydown Q
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isQ = (e) => {
-            return e.keyCode === 81;
-        };
-        /**
-         * Whether keydown W
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isW = (e) => {
-            return e.keyCode === 87;
-        };
-        /**
-         * Whether keydown Delete or Backpsace
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isDelete = (e) => {
-            return (e.keyCode === 8 || e.keyCode === 46 || e.keyCode === 127) && this.keyEvent.del;
-        };
-        /**
-         * Whether keydown Arrow
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isArrow = (e) => {
-            return e.code.includes('Arrow') && this.keyEvent.move;
-        };
-        /**
-         * Whether keydown Ctrl + A
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isCtrlA = (e) => {
-            return e.ctrlKey && e.keyCode === 65 && this.keyEvent.all;
-        };
-        /**
-         * Whether keydown Ctrl + C
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isCtrlC = (e) => {
-            return e.ctrlKey && e.keyCode === 67 && this.keyEvent.copy;
-        };
-        /**
-         * Whether keydown Ctrl + V
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isCtrlV = (e) => {
-            return e.ctrlKey && e.keyCode === 86 && this.keyEvent.paste;
-        };
-        /**
-         * Whether keydown Ctrl + Z
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isCtrlZ = (e) => {
-            return e.ctrlKey && e.keyCode === 90 && this.keyEvent.transaction;
-        };
-        /**
-         * Whether keydown Ctrl + Y
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isCtrlY = (e) => {
-            return e.ctrlKey && e.keyCode === 89 && this.keyEvent.transaction;
-        };
-        /**
-         * Whether keydown Plus Or Equal
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isPlus = (e) => {
-            return e.keyCode === 187 && this.keyEvent.zoom;
-        };
-        /**
-         * Whether keydown Minus
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isMinus = (e) => {
-            return e.keyCode === 189 && this.keyEvent.zoom;
-        };
-        /**
-         * Whether keydown O
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isO = (e) => {
-            return e.keyCode === 79 && this.keyEvent.zoom;
-        };
-        /**
-         * Whether keydown P
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isP = (e) => {
-            return e.keyCode === 80 && this.keyEvent.zoom;
-        };
-        /**
-         * Whether keydown Ctrl + X
-         *
-         * @param {KeyboardEvent} e
-         * @returns
-         */
-        this.isCtrlX = (e) => {
-            return e.ctrlKey && e.keyCode === 88 && this.keyEvent.cut;
-        };
-        this.handler = handler;
-        this.keyEvent = handler.keyEvent;
-    }
-}
-exports.default = ShortcutHandler;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const constants_1 = require("../constants");
+/**
+ * Shortcut Handler Class
+ *
+ * @author salgum1114
+ * @class ShortcutHandler
+ */
+class ShortcutHandler {
+    constructor(handler) {
+        /**
+         * Whether keydown Escape
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isEscape = (e) => {
+            return e.code === constants_1.code.ESCAPE && this.keyEvent.esc;
+        };
+        /**
+         * Whether keydown Q
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isQ = (e) => {
+            return e.code === constants_1.code.KEY_Q;
+        };
+        /**
+         * Whether keydown W
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isW = (e) => {
+            return e.code === constants_1.code.KEY_W;
+        };
+        /**
+         * Whether keydown Delete or Backpsace
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isDelete = (e) => {
+            return (e.code === constants_1.code.BACKSPACE || e.code === constants_1.code.DELETE) && this.keyEvent.del;
+        };
+        /**
+         * Whether keydown Arrow
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isArrow = (e) => {
+            return e.code.includes('Arrow') && this.keyEvent.move;
+        };
+        /**
+         * Whether keydown Ctrl + A
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isCtrlA = (e) => {
+            return (e.ctrlKey || e.metaKey) && e.code === constants_1.code.KEY_A && this.keyEvent.all;
+        };
+        /**
+         * Whether keydown Ctrl + C
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isCtrlC = (e) => {
+            return (e.ctrlKey || e.metaKey) && e.code === constants_1.code.KEY_C && this.keyEvent.copy;
+        };
+        /**
+         * Whether keydown Ctrl + V
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isCtrlV = (e) => {
+            return (e.ctrlKey || e.metaKey) && e.code === constants_1.code.KEY_V && this.keyEvent.paste;
+        };
+        /**
+         * Whether keydown Ctrl + Z
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isCtrlZ = (e) => {
+            return (e.ctrlKey || e.metaKey) && e.code === constants_1.code.KEY_Z && this.keyEvent.transaction;
+        };
+        /**
+         * Whether keydown Ctrl + Y
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isCtrlY = (e) => {
+            return (e.ctrlKey || e.metaKey) && e.code === constants_1.code.KEY_Y && this.keyEvent.transaction;
+        };
+        /**
+         * Whether keydown Plus Or Equal
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isPlus = (e) => {
+            return e.code === constants_1.code.EQUAL && this.keyEvent.zoom;
+        };
+        /**
+         * Whether keydown Minus
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isMinus = (e) => {
+            return e.code === constants_1.code.MINUS && this.keyEvent.zoom;
+        };
+        /**
+         * Whether keydown O
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isO = (e) => {
+            return e.code === constants_1.code.KEY_O && this.keyEvent.zoom;
+        };
+        /**
+         * Whether keydown P
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isP = (e) => {
+            return e.code === constants_1.code.KEY_P && this.keyEvent.zoom;
+        };
+        /**
+         * Whether keydown Ctrl + X
+         *
+         * @param {KeyboardEvent} e
+         * @returns
+         */
+        this.isCtrlX = (e) => {
+            return (e.ctrlKey || e.metaKey) && e.code === constants_1.code.KEY_X && this.keyEvent.cut;
+        };
+        this.handler = handler;
+        this.keyEvent = handler.keyEvent;
+    }
+}
+exports.default = ShortcutHandler;

package/lib/handlers/TooltipHandler.d.ts

@@ -1,24 +1,33 @@
-/// <reference types="lodash" />
-import Handler from './Handler';
-import { FabricObject } from '../utils';
-declare class TooltipHandler {
-    handler: Handler;
-    tooltipEl: HTMLDivElement;
-    target?: fabric.Object;
-    constructor(handler: Handler);
-    /**
-     * Init tooltip
-     */
-    init: () => void;
-    /**
-     * Show tooltip
-     * @param {FabricObject} [target]
-     */
-    show: ((target?: FabricObject) => Promise<void>) & import("lodash").Cancelable;
-    /**
-     * Hide tooltip
-     * @param {fabric.Object} [_target]
-     */
-    hide: ((_target?: fabric.Object) => void) & import("lodash").Cancelable;
-}
-export default TooltipHandler;
+/// <reference types="lodash" />
+import Handler from './Handler';
+import { FabricObject } from '../utils';
+declare class TooltipHandler {
+    handler: Handler;
+    tooltipEl: HTMLDivElement;
+    target?: fabric.Object;
+    constructor(handler: Handler);
+    /**
+     * Initialize tooltip
+     *
+     * @author salgum1114
+     */
+    initialize(): void;
+    /**
+     * Destroy tooltip
+     *
+     * @author salgum1114
+     */
+    destroy(): void;
+    /**
+     * Show tooltip
+     *
+     * @param {FabricObject} [target]
+     */
+    show: import("lodash").DebouncedFunc<(target?: FabricObject) => Promise<void>>;
+    /**
+     * Hide tooltip
+     * @param {fabric.Object} [_target]
+     */
+    hide: import("lodash").DebouncedFunc<(_target?: fabric.Object) => void>;
+}
+export default TooltipHandler;

package/lib/handlers/TooltipHandler.js

@@ -1,78 +1,91 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_dom_1 = __importDefault(require("react-dom"));
-const debounce_1 = __importDefault(require("lodash/debounce"));
-class TooltipHandler {
-    constructor(handler) {
-        /**
-         * Init tooltip
-         */
-        this.init = () => {
-            this.tooltipEl = document.createElement('div');
-            this.tooltipEl.id = `${this.handler.id}_tooltip`;
-            this.tooltipEl.className = 'rde-tooltip tooltip-hidden';
-            document.body.appendChild(this.tooltipEl);
-        };
-        /**
-         * Show tooltip
-         * @param {FabricObject} [target]
-         */
-        this.show = debounce_1.default(async (target) => {
-            if (target.tooltip && target.tooltip.enabled) {
-                while (this.tooltipEl.hasChildNodes()) {
-                    this.tooltipEl.removeChild(this.tooltipEl.firstChild);
-                }
-                const tooltip = document.createElement('div');
-                tooltip.className = 'rde-tooltip-right';
-                let element = target.name;
-                const { onTooltip } = this.handler;
-                if (onTooltip) {
-                    element = await onTooltip(this.tooltipEl, target);
-                    if (!element) {
-                        return;
-                    }
-                }
-                tooltip.innerHTML = element;
-                this.tooltipEl.appendChild(tooltip);
-                react_dom_1.default.render(element, tooltip);
-                this.tooltipEl.classList.remove('tooltip-hidden');
-                const zoom = this.handler.canvas.getZoom();
-                const { clientHeight } = this.tooltipEl;
-                const { width, height, scaleX, scaleY } = target;
-                const { left, top } = target.getBoundingRect();
-                const { _offset: offset } = this.handler.canvas.calcOffset();
-                const objWidthDiff = (width * scaleX) * zoom;
-                const objHeightDiff = (((height * scaleY) * zoom) / 2) - (clientHeight / 2);
-                const calcLeft = offset.left + left + objWidthDiff;
-                const calcTop = offset.top + top + objHeightDiff;
-                if (document.body.clientWidth <= (calcLeft + this.tooltipEl.offsetWidth)) {
-                    this.tooltipEl.style.left = `${left + offset.left - this.tooltipEl.offsetWidth}px`;
-                    tooltip.className = 'rde-tooltip-left';
-                }
-                else {
-                    this.tooltipEl.style.left = `${calcLeft}px`;
-                }
-                this.tooltipEl.style.top = `${calcTop}px`;
-                this.handler.target = target;
-            }
-        }, 100);
-        /**
-         * Hide tooltip
-         * @param {fabric.Object} [_target]
-         */
-        this.hide = debounce_1.default((_target) => {
-            this.handler.target = null;
-            if (this.tooltipEl) {
-                this.tooltipEl.classList.add('tooltip-hidden');
-            }
-        }, 100);
-        this.handler = handler;
-        if (!handler.editable) {
-            this.init();
-        }
-    }
-}
-exports.default = TooltipHandler;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_dom_1 = __importDefault(require("react-dom"));
+const debounce_1 = __importDefault(require("lodash/debounce"));
+class TooltipHandler {
+    constructor(handler) {
+        /**
+         * Show tooltip
+         *
+         * @param {FabricObject} [target]
+         */
+        this.show = debounce_1.default(async (target) => {
+            if (target.tooltip && target.tooltip.enabled) {
+                while (this.tooltipEl.hasChildNodes()) {
+                    this.tooltipEl.removeChild(this.tooltipEl.firstChild);
+                }
+                const tooltip = document.createElement('div');
+                tooltip.className = 'rde-tooltip-right';
+                let element = target.name;
+                const { onTooltip } = this.handler;
+                if (onTooltip) {
+                    element = await onTooltip(this.tooltipEl, target);
+                    if (!element) {
+                        return;
+                    }
+                }
+                tooltip.innerHTML = element;
+                this.tooltipEl.appendChild(tooltip);
+                react_dom_1.default.render(element, tooltip);
+                this.tooltipEl.classList.remove('tooltip-hidden');
+                const zoom = this.handler.canvas.getZoom();
+                const { clientHeight } = this.tooltipEl;
+                const { width, height, scaleX, scaleY } = target;
+                const { left, top } = target.getBoundingRect();
+                const { _offset: offset } = this.handler.canvas.calcOffset();
+                const objWidthDiff = width * scaleX * zoom;
+                const objHeightDiff = (height * scaleY * zoom) / 2 - clientHeight / 2;
+                const calcLeft = offset.left + left + objWidthDiff;
+                const calcTop = offset.top + top + objHeightDiff;
+                if (document.body.clientWidth <= calcLeft + this.tooltipEl.offsetWidth) {
+                    this.tooltipEl.style.left = `${left + offset.left - this.tooltipEl.offsetWidth}px`;
+                    tooltip.className = 'rde-tooltip-left';
+                }
+                else {
+                    this.tooltipEl.style.left = `${calcLeft}px`;
+                }
+                this.tooltipEl.style.top = `${calcTop}px`;
+                this.handler.target = target;
+            }
+        }, 100);
+        /**
+         * Hide tooltip
+         * @param {fabric.Object} [_target]
+         */
+        this.hide = debounce_1.default((_target) => {
+            this.handler.target = null;
+            if (this.tooltipEl) {
+                this.tooltipEl.classList.add('tooltip-hidden');
+            }
+        }, 100);
+        this.handler = handler;
+        if (!handler.editable) {
+            this.initialize();
+        }
+    }
+    /**
+     * Initialize tooltip
+     *
+     * @author salgum1114
+     */
+    initialize() {
+        this.tooltipEl = document.createElement('div');
+        this.tooltipEl.id = `${this.handler.id}_tooltip`;
+        this.tooltipEl.className = 'rde-tooltip tooltip-hidden';
+        document.body.appendChild(this.tooltipEl);
+    }
+    /**
+     * Destroy tooltip
+     *
+     * @author salgum1114
+     */
+    destroy() {
+        if (this.tooltipEl) {
+            document.body.removeChild(this.tooltipEl);
+        }
+    }
+}
+exports.default = TooltipHandler;

package/lib/handlers/TransactionHandler.d.ts

@@ -1,54 +1,59 @@
-/// <reference types="lodash" />
-import Handler from './Handler';
-import { FabricObject } from '../utils';
-export declare type TransactionType = 'add' | 'remove' | 'moved' | 'scaled' | 'rotated' | 'skewed' | 'group' | 'ungroup' | 'paste' | 'bringForward' | 'bringToFront' | 'sendBackwards' | 'sendToBack' | 'redo' | 'undo';
-export interface TransactionTransform {
-    scaleX?: number;
-    scaleY?: number;
-    skewX?: number;
-    skewY?: number;
-    angle?: number;
-    left?: number;
-    top?: number;
-    flipX?: number;
-    flipY?: number;
-    originX?: string;
-    originY?: string;
-}
-export interface TransactionEvent {
-    json: string;
-    type: TransactionType;
-}
-declare class TransactionHandler {
-    handler: Handler;
-    redos: TransactionEvent[];
-    undos: TransactionEvent[];
-    active: boolean;
-    state: FabricObject[];
-    constructor(handler: Handler);
-    /**
-     * Init transaction
-     */
-    init: () => void;
-    /**
-     * Save transaction
-     * @param {TransactionType} type
-     * @param {*} [canvasJSON]
-     * @param {boolean} [isWorkarea=true]
-     */
-    save: (type: TransactionType, canvasJSON?: any, _isWorkarea?: boolean) => void;
-    /**
-     * Undo transaction
-     */
-    undo: (() => void) & import("lodash").Cancelable;
-    /**
-     * Redo transaction
-     */
-    redo: (() => void) & import("lodash").Cancelable;
-    /**
-     * Replay transaction
-     * @param {TransactionEvent} transaction
-     */
-    replay: (transaction: TransactionEvent) => void;
-}
-export default TransactionHandler;
+/// <reference types="lodash" />
+import Handler from './Handler';
+import { FabricObject } from '../utils';
+export declare type TransactionType = 'add' | 'remove' | 'moved' | 'scaled' | 'rotated' | 'skewed' | 'group' | 'ungroup' | 'paste' | 'bringForward' | 'bringToFront' | 'sendBackwards' | 'sendToBack' | 'redo' | 'undo';
+export interface TransactionTransform {
+    scaleX?: number;
+    scaleY?: number;
+    skewX?: number;
+    skewY?: number;
+    angle?: number;
+    left?: number;
+    top?: number;
+    flipX?: number;
+    flipY?: number;
+    originX?: string;
+    originY?: string;
+}
+export interface TransactionEvent {
+    json: string;
+    type: TransactionType;
+}
+declare class TransactionHandler {
+    handler: Handler;
+    redos: TransactionEvent[];
+    undos: TransactionEvent[];
+    active: boolean;
+    state: FabricObject[];
+    constructor(handler: Handler);
+    /**
+     * Initialize transaction handler
+     *
+     */
+    initialize: () => void;
+    /**
+     * Save transaction
+     *
+     * @param {TransactionType} type
+     * @param {*} [canvasJSON]
+     * @param {boolean} [isWorkarea=true]
+     */
+    save: (type: TransactionType, canvasJSON?: any, _isWorkarea?: boolean) => void;
+    /**
+     * Undo transaction
+     *
+     */
+    undo: import("lodash").DebouncedFunc<() => void>;
+    /**
+     * Redo transaction
+     *
+     */
+    redo: import("lodash").DebouncedFunc<() => void>;
+    /**
+     * Replay transaction
+     *
+     * @param {TransactionEvent} transaction
+     */
+    replay: (transaction: TransactionEvent) => void;
+}
+export default TransactionHandler;