react-design-editor 0.0.33 → 0.0.37

package/lib/handlers/ShortcutHandler.js

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

package/lib/handlers/TooltipHandler.d.ts

@@ -1,33 +0,0 @@
-/// <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: ((target?: FabricObject) => Promise<void>) & import("lodash").Cancelable;
-    /**
-     * Hide tooltip
-     * @param {fabric.Object} [_target]
-     */
-    hide: ((_target?: fabric.Object) => void) & import("lodash").Cancelable;
-}
-export default TooltipHandler;

package/lib/handlers/TooltipHandler.js

@@ -1,91 +0,0 @@
-"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,59 +0,0 @@
-/// <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: (() => void) & import("lodash").Cancelable;
-    /**
-     * Redo transaction
-     *
-     */
-    redo: (() => void) & import("lodash").Cancelable;
-    /**
-     * Replay transaction
-     *
-     * @param {TransactionEvent} transaction
-     */
-    replay: (transaction: TransactionEvent) => void;
-}
-export default TransactionHandler;

package/lib/handlers/TransactionHandler.js

@@ -1,139 +0,0 @@
-"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;
-        if (this.handler.editable) {
-            this.initialize();
-        }
-    }
-}
-exports.default = TransactionHandler;

package/lib/handlers/WorkareaHandler.d.ts

@@ -1,43 +0,0 @@
-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;