react-design-editor 0.0.37 → 0.0.41

package/lib/handlers/ShortcutHandler.js

@@ -0,0 +1,151 @@
+"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

@@ -0,0 +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);
+    /**
+     * 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

@@ -0,0 +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) {
+        /**
+         * 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

@@ -0,0 +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);
+    /**
+     * 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;

package/lib/handlers/TransactionHandler.js

@@ -0,0 +1,137 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const throttle_1 = __importDefault(require("lodash/throttle"));
+class TransactionHandler {
+    constructor(handler) {
+        this.active = false;
+        this.state = [];
+        /**
+         * Initialize transaction handler
+         *
+         */
+        this.initialize = () => {
+            this.redos = [];
+            this.undos = [];
+            this.state = [];
+            this.active = false;
+        };
+        /**
+         * Save transaction
+         *
+         * @param {TransactionType} type
+         * @param {*} [canvasJSON]
+         * @param {boolean} [isWorkarea=true]
+         */
+        this.save = (type, canvasJSON, _isWorkarea = true) => {
+            if (!this.handler.keyEvent.transaction) {
+                return;
+            }
+            try {
+                if (this.state) {
+                    const json = JSON.stringify(this.state);
+                    this.redos = [];
+                    this.undos.push({
+                        type,
+                        json,
+                    });
+                }
+                const { objects } = canvasJSON || this.handler.canvas.toJSON(this.handler.propertiesToInclude);
+                this.state = objects.filter(obj => {
+                    if (obj.id === 'workarea') {
+                        return false;
+                    }
+                    else if (obj.id === 'grid') {
+                        return false;
+                    }
+                    else if (obj.superType === 'port') {
+                        return false;
+                    }
+                    return true;
+                });
+            }
+            catch (error) {
+                console.error(error);
+            }
+        };
+        /**
+         * Undo transaction
+         *
+         */
+        this.undo = throttle_1.default(() => {
+            const undo = this.undos.pop();
+            if (!undo) {
+                return;
+            }
+            this.redos.push({
+                type: 'redo',
+                json: JSON.stringify(this.state),
+            });
+            this.replay(undo);
+        }, 100);
+        /**
+         * Redo transaction
+         *
+         */
+        this.redo = throttle_1.default(() => {
+            const redo = this.redos.pop();
+            if (!redo) {
+                return;
+            }
+            this.undos.push({
+                type: 'undo',
+                json: JSON.stringify(this.state),
+            });
+            this.replay(redo);
+        }, 100);
+        /**
+         * Replay transaction
+         *
+         * @param {TransactionEvent} transaction
+         */
+        this.replay = (transaction) => {
+            const objects = JSON.parse(transaction.json);
+            this.state = objects;
+            this.active = true;
+            this.handler.canvas.renderOnAddRemove = false;
+            this.handler.clear();
+            this.handler.canvas.discardActiveObject();
+            fabric_1.fabric.util.enlivenObjects(objects, (enlivenObjects) => {
+                enlivenObjects.forEach(obj => {
+                    const targetIndex = this.handler.canvas._objects.length;
+                    if (obj.superType === 'node') {
+                        this.handler.canvas.insertAt(obj, targetIndex, false);
+                        this.handler.portHandler.create(obj);
+                    }
+                    else if (obj.superType === 'link') {
+                        const link = obj;
+                        this.handler.objects = this.handler.getObjects();
+                        this.handler.linkHandler.create({
+                            type: 'curvedLink',
+                            fromNodeId: link.fromNode?.id,
+                            fromPortId: link.fromPort?.id,
+                            toNodeId: link.toNode?.id,
+                            toPortId: link.toPort?.id,
+                        });
+                    }
+                    else {
+                        this.handler.canvas.insertAt(obj, targetIndex, false);
+                    }
+                });
+                this.handler.canvas.renderOnAddRemove = true;
+                this.active = false;
+                this.handler.canvas.renderAll();
+                this.handler.objects = this.handler.getObjects();
+                if (this.handler.onTransaction) {
+                    this.handler.onTransaction(transaction);
+                }
+            }, null);
+        };
+        this.handler = handler;
+        this.initialize();
+    }
+}
+exports.default = TransactionHandler;

package/lib/handlers/WorkareaHandler.d.ts

@@ -0,0 +1,43 @@
+import { Handler } from '.';
+import { WorkareaLayout, WorkareaObject, FabricImage } from '../utils';
+declare class WorkareaHandler {
+    handler: Handler;
+    constructor(handler: Handler);
+    /**
+     * Initialize workarea
+     *
+     * @author salgum1114
+     */
+    initialize(): void;
+    /**
+     * Set the layout on workarea
+     * @param {WorkareaLayout} layout
+     * @returns
+     */
+    setLayout: (layout: WorkareaLayout) => void;
+    /**
+     * Set the responsive image on Workarea
+     * @param {string | File} [source]
+     * @param {boolean} [loaded]
+     * @returns
+     */
+    setResponsiveImage: (source: string | File, loaded?: boolean) => Promise<WorkareaObject>;
+    /**
+     * Set the image on Workarea
+     * @param {string | File} source
+     * @param {boolean} [loaded=false]
+     * @returns
+     */
+    setImage: (source: string | File, loaded?: boolean) => Promise<WorkareaObject>;
+    /**
+     * Calculate scale to the image
+     *
+     * @param {FabricImage} [image]
+     * @returns
+     */
+    calculateScale: (image?: FabricImage) => {
+        scaleX: number;
+        scaleY: number;
+    };
+}
+export default WorkareaHandler;