react-design-editor 0.0.33 → 0.0.37

package/lib/handlers/AlignmentHandler.js

@@ -1,58 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-class AlignmentHandler {
-    constructor(handler) {
-        /**
-         * Align left at selection
-         */
-        this.left = () => {
-            const activeObject = this.handler.canvas.getActiveObject();
-            if (activeObject && activeObject.type === 'activeSelection') {
-                const activeSelection = activeObject;
-                const activeObjectLeft = -(activeObject.width / 2);
-                activeSelection.forEachObject(obj => {
-                    obj.set({
-                        left: activeObjectLeft,
-                    });
-                    obj.setCoords();
-                    this.handler.canvas.renderAll();
-                });
-            }
-        };
-        /**
-         * Align center at selection
-         */
-        this.center = () => {
-            const activeObject = this.handler.canvas.getActiveObject();
-            if (activeObject && activeObject.type === 'activeSelection') {
-                const activeSelection = activeObject;
-                activeSelection.forEachObject(obj => {
-                    obj.set({
-                        left: 0 - ((obj.width * obj.scaleX) / 2),
-                    });
-                    obj.setCoords();
-                    this.handler.canvas.renderAll();
-                });
-            }
-        };
-        /**
-         * Align right at selection
-         */
-        this.right = () => {
-            const activeObject = this.handler.canvas.getActiveObject();
-            if (activeObject && activeObject.type === 'activeSelection') {
-                const activeSelection = activeObject;
-                const activeObjectLeft = (activeObject.width / 2);
-                activeSelection.forEachObject(obj => {
-                    obj.set({
-                        left: activeObjectLeft - (obj.width * obj.scaleX),
-                    });
-                    obj.setCoords();
-                    this.handler.canvas.renderAll();
-                });
-            }
-        };
-        this.handler = handler;
-    }
-}
-exports.default = AlignmentHandler;

package/lib/handlers/AnimationHandler.d.ts

@@ -1,50 +0,0 @@
-import anime from 'animejs';
-import { Handler } from '.';
-import { FabricObject } from '../utils';
-declare class AnimationHandler {
-    handler: Handler;
-    constructor(handler: Handler);
-    /**
-     * Play the animation
-     * @param {string} id
-     * @param {boolean} [hasControls]
-     * @returns
-     */
-    play: (id: string, hasControls?: boolean) => void;
-    /**
-     * Pause the animation
-     * @param {string} id
-     * @returns
-     */
-    pause: (id: string) => void;
-    /**
-     * Stop the animation
-     * @param {string} id
-     * @param {boolean} [hasControls=true]
-     * @returns
-     */
-    stop: (id: string, hasControls?: boolean) => void;
-    /**
-     * Restart the animation
-     * @param {string} id
-     * @returns
-     */
-    restart: (id: string) => void;
-    /**
-     * Reset animation
-     *
-     * @param {FabricObject} obj
-     * @param {boolean} [hasControls=true]
-     * @returns
-     */
-    resetAnimation: (obj: FabricObject, hasControls?: boolean) => void;
-    /**
-     * Get animation option
-     *
-     * @param {FabricObject} obj
-     * @param {boolean} [hasControls]
-     * @returns
-     */
-    getAnime: (obj: FabricObject, hasControls?: boolean) => anime.AnimeInstance;
-}
-export default AnimationHandler;

package/lib/handlers/AnimationHandler.js

@@ -1,320 +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 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,
-                    origniStroke: 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: (e) => {
-                    if (type === 'flash') {
-                        // I don't know why it works. Magic code...
-                        const fill = e.animations[0].currentValue;
-                        const stroke = e.animations[1].currentValue;
-                        obj.set('fill', '');
-                        obj.set('fill', fill);
-                        obj.set('stroke', stroke);
-                    }
-                    else if (type === 'rotation') {
-                        const angle = e.animations[0].currentValue;
-                        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

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

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

package/lib/handlers/ContextmenuHandler.d.ts

@@ -1,28 +0,0 @@
-/// <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: ((e: any, target: any) => Promise<void>) & import("lodash").Cancelable;
-    /**
-     * Hide context menu
-     *
-     */
-    hide: (() => void) & import("lodash").Cancelable;
-}
-export default ContextmenuHandler;

package/lib/handlers/ContextmenuHandler.js

@@ -1,65 +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 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

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