react-design-editor 0.0.37 → 0.0.41

package/lib/handlers/ElementHandler.d.ts

@@ -0,0 +1,80 @@
+import { fabric } from 'fabric';
+import Handler from './Handler';
+import { VideoObject } from '../objects/Video';
+import { ChartObject } from '../objects/Chart';
+import { IframeObject } from '../objects/Iframe';
+import { ElementObject } from '../objects/Element';
+export declare type ElementType = 'container' | 'script' | 'style';
+export declare type ElementObjectType = VideoObject | ChartObject | IframeObject | ElementObject;
+export interface ElementCode {
+    html?: string;
+    css?: string;
+    js?: string;
+}
+declare class ElementHandler {
+    handler?: Handler;
+    constructor(handler: Handler);
+    /**
+     * Set element by id
+     * @param {string} id
+     * @param {*} source
+     * @returns {void}
+     */
+    setById: (id: string, source: any) => void;
+    /**
+     * Set element
+     * @param {ElementObjectType} obj
+     * @param {*} source
+     */
+    set: (obj: ElementObjectType, source: any) => void;
+    /**
+     * Find element by id with type
+     * @param {string} id
+     * @param {ElementType} [type='container']
+     * @returns
+     */
+    findById: (id: string, type?: ElementType) => HTMLElement;
+    /**
+     * Remove element
+     * @param {HTMLElement} el
+     * @returns
+     */
+    remove: (el: HTMLElement) => void;
+    /**
+     * Remove element by id
+     * @param {string} id
+     */
+    removeById: (id: string) => void;
+    /**
+     * Remove element by ids
+     * @param {string[]} ids
+     */
+    removeByIds: (ids: string[]) => void;
+    /**
+     * Set position
+     * @param {HTMLElement} el
+     * @param {number} left
+     * @param {number} top
+     * @returns
+     */
+    setPosition: (el: HTMLElement, obj: fabric.Object) => void;
+    setPositionByOrigin: (el: HTMLElement, obj: fabric.Object, left: number, top: number) => void;
+    /**
+     * Set size
+     * @param {HTMLElement} el
+     * @param {number} width
+     * @param {number} height
+     * @returns
+     */
+    setSize: (el: HTMLElement, obj: fabric.Object) => void;
+    /**
+     * Set scale or angle
+     * @param {HTMLElement} el
+     * @param {number} scaleX
+     * @param {number} scaleY
+     * @param {number} angle
+     * @returns
+     */
+    setScaleOrAngle: (el: HTMLElement, obj: fabric.Object) => void;
+}
+export default ElementHandler;

package/lib/handlers/ElementHandler.js

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class ElementHandler {
+    constructor(handler) {
+        /**
+         * Set element by id
+         * @param {string} id
+         * @param {*} source
+         * @returns {void}
+         */
+        this.setById = (id, source) => {
+            const obj = this.handler.findById(id);
+            if (!obj) {
+                return;
+            }
+            this.set(obj, source);
+        };
+        /**
+         * Set element
+         * @param {ElementObjectType} obj
+         * @param {*} source
+         */
+        this.set = (obj, source) => {
+            obj.setSource(source);
+        };
+        /**
+         * Find element by id with type
+         * @param {string} id
+         * @param {ElementType} [type='container']
+         * @returns
+         */
+        this.findById = (id, type = 'container') => {
+            return document.getElementById(`${id}_${type}`);
+        };
+        /**
+         * Remove element
+         * @param {HTMLElement} el
+         * @returns
+         */
+        this.remove = (el) => {
+            if (!el) {
+                return;
+            }
+            this.handler.container.removeChild(el);
+        };
+        /**
+         * Remove element by id
+         * @param {string} id
+         */
+        this.removeById = (id) => {
+            const el = this.findById(id);
+            const scriptEl = this.findById(id, 'script');
+            const styleEl = this.findById(id, 'style');
+            if (el) {
+                if (el.remove) {
+                    el.remove();
+                }
+                else {
+                    this.remove(el);
+                }
+            }
+            if (scriptEl) {
+                if (scriptEl.remove) {
+                    scriptEl.remove();
+                }
+                else {
+                    document.head.removeChild(scriptEl);
+                }
+            }
+            if (styleEl) {
+                if (styleEl.remove) {
+                    styleEl.remove();
+                }
+                else {
+                    document.head.removeChild(styleEl);
+                }
+            }
+        };
+        /**
+         * Remove element by ids
+         * @param {string[]} ids
+         */
+        this.removeByIds = (ids) => {
+            ids.forEach(id => {
+                this.removeById(id);
+            });
+        };
+        /**
+         * Set position
+         * @param {HTMLElement} el
+         * @param {number} left
+         * @param {number} top
+         * @returns
+         */
+        this.setPosition = (el, obj) => {
+            if (!el) {
+                return;
+            }
+            obj.setCoords();
+            const zoom = this.handler.canvas.getZoom();
+            const { scaleX, scaleY, width, height } = obj;
+            const { left, top } = obj.getBoundingRect(false);
+            const padLeft = ((width * scaleX * zoom) - width) / 2;
+            const padTop = ((height * scaleY * zoom) - height) / 2;
+            el.style.left = `${left + padLeft}px`;
+            el.style.top = `${top + padTop}px`;
+        };
+        this.setPositionByOrigin = (el, obj, left, top) => {
+            if (!el) {
+                return;
+            }
+            obj.setCoords();
+            const zoom = this.handler.canvas.getZoom();
+            const { scaleX, scaleY, width, height } = obj;
+            const padLeft = ((width * scaleX * zoom) - width) / 2;
+            const padTop = ((height * scaleY * zoom) - height) / 2;
+            el.style.left = `${left + padLeft}px`;
+            el.style.top = `${top + padTop}px`;
+        };
+        /**
+         * Set size
+         * @param {HTMLElement} el
+         * @param {number} width
+         * @param {number} height
+         * @returns
+         */
+        this.setSize = (el, obj) => {
+            if (!el) {
+                return;
+            }
+            const { width, height } = obj;
+            el.style.width = `${width}px`;
+            el.style.height = `${height}px`;
+        };
+        /**
+         * Set scale or angle
+         * @param {HTMLElement} el
+         * @param {number} scaleX
+         * @param {number} scaleY
+         * @param {number} angle
+         * @returns
+         */
+        this.setScaleOrAngle = (el, obj) => {
+            if (!el) {
+                return;
+            }
+            const zoom = this.handler.canvas.getZoom();
+            const { scaleX, scaleY, angle } = obj;
+            el.style.transform = `rotate(${angle}deg) scale(${scaleX * zoom}, ${scaleY * zoom})`;
+        };
+        this.handler = handler;
+    }
+}
+exports.default = ElementHandler;

package/lib/handlers/EventHandler.d.ts

@@ -0,0 +1,170 @@
+import { FabricEvent } from '../utils';
+import Handler from './Handler';
+/**
+ * Event Handler Class
+ * @author salgum1114
+ * @class EventHandler
+ */
+declare class EventHandler {
+    handler: Handler;
+    code: string;
+    panning: boolean;
+    constructor(handler: Handler);
+    /**
+     * Attch event on document
+     *
+     */
+    initialize(): void;
+    /**
+     * Detach event on document
+     *
+     */
+    destroy: () => void;
+    /**
+     * Individual object event
+     *
+     */
+    object: {
+        /**
+         * Mouse down event on object
+         * @param {FabricEvent} opt
+         */
+        mousedown: (opt: FabricEvent) => void;
+        /**
+         * Mouse double click event on object
+         * @param {FabricEvent} opt
+         */
+        mousedblclick: (opt: FabricEvent) => void;
+    };
+    /**
+     * Modified event object
+     *
+     * @param {FabricEvent} opt
+     * @returns
+     */
+    modified: (opt: FabricEvent) => void;
+    /**
+     * Moving event object
+     *
+     * @param {FabricEvent} opt
+     * @returns
+     */
+    moving: (opt: FabricEvent) => void;
+    /**
+     * Moved event object
+     *
+     * @param {FabricEvent} opt
+     */
+    moved: (opt: FabricEvent) => void;
+    /**
+     * Scaling event object
+     *
+     * @param {FabricEvent} opt
+     */
+    scaling: (opt: FabricEvent) => void;
+    /**
+     * Scaled event object
+     *
+     * @param {FabricEvent} opt
+     */
+    scaled: (_opt: FabricEvent) => void;
+    /**
+     * Rotating event object
+     *
+     * @param {FabricEvent} opt
+     */
+    rotating: (opt: FabricEvent) => void;
+    /**
+     * Rotated event object
+     *
+     * @param {FabricEvent} opt
+     */
+    rotated: (_opt: FabricEvent) => void;
+    /**
+     * Moing object at keyboard arrow key down event
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    arrowmoving: (e: KeyboardEvent) => boolean;
+    /**
+     * Zoom at mouse wheel event
+     *
+     * @param {FabricEvent<WheelEvent>} opt
+     * @returns
+     */
+    mousewheel: (opt: FabricEvent) => void;
+    /**
+     * Mouse down event on object
+     *
+     * @param {FabricEvent<MouseEvent>} opt
+     * @returns
+     */
+    mousedown: (opt: FabricEvent) => void;
+    /**
+     * Mouse move event on canvas
+     *
+     * @param {FabricEvent<MouseEvent>} opt
+     * @returns
+     */
+    mousemove: (opt: FabricEvent) => void;
+    /**
+     * Mouse up event on canvas
+     *
+     * @param {FabricEvent<MouseEvent>} opt
+     * @returns
+     */
+    mouseup: (opt: FabricEvent) => void;
+    /**
+     * Mouse out event on canvas
+     *
+     * @param {FabricEvent<MouseEvent>} opt
+     */
+    mouseout: (opt: FabricEvent) => void;
+    /**
+     * Selection event event on canvas
+     *
+     * @param {FabricEvent} opt
+     */
+    selection: (opt: FabricEvent) => void;
+    /**
+     * Called resize event on canvas
+     *
+     * @param {number} nextWidth
+     * @param {number} nextHeight
+     * @returns
+     */
+    resize: (nextWidth: number, nextHeight: number) => void;
+    /**
+     * Paste event on canvas
+     *
+     * @param {ClipboardEvent} e
+     * @returns
+     */
+    paste: (e: ClipboardEvent) => Promise<boolean>;
+    /**
+     * Keydown event on document
+     *
+     * @param {KeyboardEvent} e
+     */
+    keydown: (e: KeyboardEvent) => void;
+    /**
+     * Key up event on canvas
+     *
+     * @param {KeyboardEvent} _e
+     */
+    keyup: (e: KeyboardEvent) => void;
+    /**
+     * Context menu event on canvas
+     *
+     * @param {MouseEvent} e
+     */
+    contextmenu: (e: MouseEvent) => void;
+    /**
+     * Mouse down event on canvas
+     *
+     * @param {MouseEvent} _e
+     */
+    onmousedown: (_e: MouseEvent) => void;
+}
+export default EventHandler;