react-design-editor 0.0.37 → 0.0.38

package/lib/handlers/AnimationHandler.js

@@ -0,0 +1,323 @@
+"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"));
+class AnimationHandler {
+    constructor(handler) {
+        /**
+         * Play the animation
+         * @param {string} id
+         * @param {boolean} [hasControls]
+         * @returns
+         */
+        this.play = (id, hasControls) => {
+            const findObject = this.handler.findById(id);
+            if (!findObject) {
+                return;
+            }
+            if (findObject.anime) {
+                findObject.anime.restart();
+                return;
+            }
+            if (findObject.animation.type === 'none') {
+                return;
+            }
+            const instance = this.getAnime(findObject, hasControls);
+            if (instance) {
+                findObject.set('anime', instance);
+                findObject.set({
+                    hasControls: false,
+                    lockMovementX: true,
+                    lockMovementY: true,
+                    hoverCursor: 'pointer',
+                });
+                this.handler.canvas.requestRenderAll();
+                instance.play();
+            }
+        };
+        /**
+         * Pause the animation
+         * @param {string} id
+         * @returns
+         */
+        this.pause = (id) => {
+            const findObject = this.handler.findById(id);
+            if (!findObject) {
+                return;
+            }
+            findObject.anime.pause();
+        };
+        /**
+         * Stop the animation
+         * @param {string} id
+         * @param {boolean} [hasControls=true]
+         * @returns
+         */
+        this.stop = (id, hasControls = true) => {
+            const findObject = this.handler.findById(id);
+            if (!findObject) {
+                return;
+            }
+            this.resetAnimation(findObject, hasControls);
+        };
+        /**
+         * Restart the animation
+         * @param {string} id
+         * @returns
+         */
+        this.restart = (id) => {
+            const findObject = this.handler.findById(id);
+            if (!findObject) {
+                return;
+            }
+            if (!findObject.anime) {
+                return;
+            }
+            this.stop(id);
+            this.play(id);
+        };
+        /**
+         * Reset animation
+         *
+         * @param {FabricObject} obj
+         * @param {boolean} [hasControls=true]
+         * @returns
+         */
+        this.resetAnimation = (obj, hasControls = true) => {
+            if (!obj.anime) {
+                return;
+            }
+            let option;
+            if (this.handler.editable) {
+                option = {
+                    anime: null,
+                    hasControls,
+                    lockMovementX: !hasControls,
+                    lockMovementY: !hasControls,
+                    hoverCursor: hasControls ? 'move' : 'pointer',
+                };
+            }
+            else {
+                option = {
+                    anime: null,
+                    hasControls: false,
+                    lockMovementX: true,
+                    lockMovementY: true,
+                    hoverCursor: 'pointer',
+                };
+            }
+            animejs_1.default.remove(obj);
+            const { type } = obj.animation;
+            if (type === 'fade') {
+                Object.assign(option, {
+                    opacity: obj.originOpacity,
+                    originOpacity: null,
+                });
+            }
+            else if (type === 'bounce') {
+                if (obj.animation.bounce === 'vertical') {
+                    Object.assign(option, {
+                        top: obj.originTop,
+                        originTop: null,
+                    });
+                }
+                else {
+                    Object.assign(option, {
+                        left: obj.originLeft,
+                        originLeft: null,
+                    });
+                }
+            }
+            else if (type === 'shake') {
+                if (obj.animation.shake === 'vertical') {
+                    Object.assign(option, {
+                        top: obj.originTop,
+                        originTop: null,
+                    });
+                }
+                else {
+                    Object.assign(option, {
+                        left: obj.originLeft,
+                        originLeft: null,
+                    });
+                }
+            }
+            else if (type === 'scaling') {
+                Object.assign(option, {
+                    scaleX: obj.originScaleX,
+                    scaleY: obj.originScaleY,
+                    originScaleX: null,
+                    originScaleY: null,
+                });
+            }
+            else if (type === 'rotation') {
+                Object.assign(option, {
+                    angle: obj.originAngle,
+                    rotation: obj.originAngle,
+                    left: obj.originLeft,
+                    top: obj.originTop,
+                    originLeft: null,
+                    originTop: null,
+                    originAngle: null,
+                });
+            }
+            else if (type === 'flash') {
+                Object.assign(option, {
+                    fill: obj.originFill,
+                    stroke: obj.originStroke,
+                    originFill: null,
+                    originStroke: null,
+                });
+            }
+            else {
+                console.warn('Not supported type.');
+            }
+            obj.set(option);
+            this.handler.canvas.renderAll();
+        };
+        /**
+         * Get animation option
+         *
+         * @param {FabricObject} obj
+         * @param {boolean} [hasControls]
+         * @returns
+         */
+        this.getAnime = (obj, hasControls) => {
+            const { delay = 0, duration = 100, autoplay = true, loop = true, type, ...other } = obj.animation;
+            const option = {
+                targets: obj,
+                delay,
+                loop,
+                autoplay,
+                duration,
+                direction: 'alternate',
+                begin: () => {
+                    obj.set({
+                        hasControls: false,
+                        lockMovementX: true,
+                        lockMovementY: true,
+                        hoverCursor: 'pointer',
+                    });
+                    this.handler.canvas.requestRenderAll();
+                },
+                update: (instance) => {
+                    if (type === 'flash') {
+                        // I don't know why it works. Magic code...
+                        const fill = instance.animations[0].currentValue;
+                        const stroke = instance.animations[1].currentValue;
+                        obj.set('fill', '');
+                        obj.set('fill', fill);
+                        obj.set('stroke', stroke);
+                    }
+                    else if (type === 'rotation') {
+                        let angle = instance.animations[0].currentValue;
+                        if (typeof angle === 'string') {
+                            angle = parseInt(angle, 10);
+                        }
+                        obj.rotate(angle);
+                        this.handler.canvas.requestRenderAll();
+                        return;
+                    }
+                    obj.setCoords();
+                    this.handler.canvas.requestRenderAll();
+                },
+                complete: () => {
+                    this.resetAnimation(obj, hasControls);
+                },
+            };
+            if (type === 'fade') {
+                const { opacity = 0 } = other;
+                obj.set('originOpacity', obj.opacity);
+                Object.assign(option, {
+                    opacity,
+                    easing: 'easeInQuad',
+                });
+            }
+            else if (type === 'bounce') {
+                const { offset = 1 } = other;
+                if (other.bounce === 'vertical') {
+                    obj.set('originTop', obj.top);
+                    Object.assign(option, {
+                        top: obj.top + offset,
+                        easing: 'easeInQuad',
+                    });
+                }
+                else {
+                    obj.set('originLeft', obj.left);
+                    Object.assign(option, {
+                        left: obj.left + offset,
+                        easing: 'easeInQuad',
+                    });
+                }
+            }
+            else if (type === 'shake') {
+                const { offset = 1 } = other;
+                if (other.shake === 'vertical') {
+                    obj.set('originTop', obj.top);
+                    Object.assign(option, {
+                        top: obj.top + offset,
+                        delay: 0,
+                        elasticity: 1000,
+                        duration: 500,
+                    });
+                }
+                else {
+                    obj.set('originLeft', obj.left);
+                    Object.assign(option, {
+                        left: obj.left + offset,
+                        delay: 0,
+                        elasticity: 1000,
+                        duration: 500,
+                    });
+                }
+            }
+            else if (type === 'scaling') {
+                const { scale = 2 } = other;
+                obj.set('originScaleX', obj.scaleX);
+                obj.set('originScaleY', obj.scaleY);
+                obj.set({
+                    originScaleX: obj.scaleX,
+                    originScaleY: obj.scaleY,
+                });
+                const scaleX = obj.scaleX * scale;
+                const scaleY = obj.scaleY * scale;
+                Object.assign(option, {
+                    scaleX,
+                    scaleY,
+                    easing: 'easeInQuad',
+                });
+            }
+            else if (type === 'rotation') {
+                const { angle = 360 } = other;
+                obj.set('rotation', obj.angle);
+                obj.set('originAngle', obj.angle);
+                obj.set('originLeft', obj.left);
+                obj.set('originTop', obj.top);
+                Object.assign(option, {
+                    rotation: angle,
+                    easing: 'linear',
+                    direction: 'normal',
+                });
+            }
+            else if (type === 'flash') {
+                const { fill = obj.fill, stroke = obj.stroke } = other;
+                obj.set('originFill', obj.fill);
+                obj.set('originStroke', obj.stroke);
+                Object.assign(option, {
+                    fill,
+                    stroke,
+                    easing: 'easeInQuad',
+                });
+            }
+            else {
+                console.warn('Not supported type.');
+                return null;
+            }
+            return animejs_1.default(option);
+        };
+        this.handler = handler;
+    }
+}
+exports.default = AnimationHandler;

package/lib/handlers/ChartHandler.d.ts

@@ -0,0 +1,8 @@
+import * as echarts from 'echarts';
+import Handler from './Handler';
+declare class ChartHandler {
+    handler?: Handler;
+    instance?: echarts.ECharts;
+    constructor(handler: Handler);
+}
+export default ChartHandler;

package/lib/handlers/ChartHandler.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class ChartHandler {
+    constructor(handler) {
+        this.handler = handler;
+    }
+}
+exports.default = ChartHandler;

package/lib/handlers/ContextmenuHandler.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="lodash" />
+import { Handler } from '.';
+declare class ContextmenuHandler {
+    handler: Handler;
+    contextmenuEl: HTMLDivElement;
+    constructor(handler: Handler);
+    /**
+     * Initialize contextmenu
+     *
+     */
+    initialize(): void;
+    /**
+     * Destroy contextmenu
+     *
+     */
+    destory(): void;
+    /**
+     * Show context menu
+     *
+     */
+    show: import("lodash").DebouncedFunc<(e: any, target: any) => Promise<void>>;
+    /**
+     * Hide context menu
+     *
+     */
+    hide: import("lodash").DebouncedFunc<() => void>;
+}
+export default ContextmenuHandler;

package/lib/handlers/ContextmenuHandler.js

@@ -0,0 +1,65 @@
+"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 ContextmenuHandler {
+    constructor(handler) {
+        /**
+         * Show context menu
+         *
+         */
+        this.show = debounce_1.default(async (e, target) => {
+            const { onContext } = this.handler;
+            while (this.contextmenuEl.hasChildNodes()) {
+                this.contextmenuEl.removeChild(this.contextmenuEl.firstChild);
+            }
+            const contextmenu = document.createElement('div');
+            contextmenu.className = 'rde-contextmenu-right';
+            const element = await onContext(this.contextmenuEl, e, target);
+            if (!element) {
+                return;
+            }
+            contextmenu.innerHTML = element;
+            this.contextmenuEl.appendChild(contextmenu);
+            react_dom_1.default.render(element, contextmenu);
+            this.contextmenuEl.classList.remove('contextmenu-hidden');
+            const { clientX: left, clientY: top } = e;
+            this.contextmenuEl.style.left = `${left}px`;
+            this.contextmenuEl.style.top = `${top}px`;
+        }, 100);
+        /**
+         * Hide context menu
+         *
+         */
+        this.hide = debounce_1.default(() => {
+            if (this.contextmenuEl) {
+                this.contextmenuEl.classList.add('contextmenu-hidden');
+            }
+        }, 100);
+        this.handler = handler;
+        this.initialize();
+    }
+    /**
+     * Initialize contextmenu
+     *
+     */
+    initialize() {
+        this.contextmenuEl = document.createElement('div');
+        this.contextmenuEl.id = `${this.handler.id}_contextmenu`;
+        this.contextmenuEl.className = 'rde-contextmenu contextmenu-hidden';
+        document.body.appendChild(this.contextmenuEl);
+    }
+    /**
+     * Destroy contextmenu
+     *
+     */
+    destory() {
+        if (this.contextmenuEl) {
+            document.body.removeChild(this.contextmenuEl);
+        }
+    }
+}
+exports.default = ContextmenuHandler;

package/lib/handlers/CropHandler.d.ts

@@ -0,0 +1,43 @@
+import { fabric } from 'fabric';
+import { Handler } from '.';
+import { FabricImage } from '../utils';
+declare class CropHandler {
+    handler: Handler;
+    cropRect: fabric.Rect;
+    cropObject: FabricImage;
+    constructor(handler: Handler);
+    /**
+     * Validate crop type
+     *
+     * @returns
+     */
+    validType: () => boolean;
+    /**
+     * Start crop image
+     *
+     */
+    start: () => void;
+    /**
+     * Finish crop image
+     *
+     */
+    finish: () => void;
+    /**
+     * Cancel crop
+     *
+     */
+    cancel: () => void;
+    /**
+     * Resize crop
+     *
+     * @param {FabricEvent} opt
+     */
+    resize: (opt: fabric.IEvent) => void;
+    /**
+     * Resize crop
+     *
+     * @param {FabricEvent} opt
+     */
+    moving: (opt: fabric.IEvent) => void;
+}
+export default CropHandler;