react-design-editor 0.0.33 → 0.0.37

package/lib/handlers/CropHandler.js

@@ -1,261 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const fabric_1 = require("fabric");
-class CropHandler {
-    constructor(handler) {
-        /**
-         * Validate crop type
-         *
-         * @returns
-         */
-        this.validType = () => {
-            const activeObject = this.handler.canvas.getActiveObject();
-            if (!activeObject) {
-                return false;
-            }
-            if (activeObject.type === 'image') {
-                return true;
-            }
-            return false;
-        };
-        /**
-         * Start crop image
-         *
-         */
-        this.start = () => {
-            if (this.validType()) {
-                this.handler.interactionMode = 'crop';
-                this.cropObject = this.handler.canvas.getActiveObject();
-                const { left, top } = this.cropObject;
-                this.cropRect = new fabric_1.fabric.Rect({
-                    width: this.cropObject.width,
-                    height: this.cropObject.height,
-                    scaleX: this.cropObject.scaleX,
-                    scaleY: this.cropObject.scaleY,
-                    originX: 'left',
-                    originY: 'top',
-                    left,
-                    top,
-                    hasRotatingPoint: false,
-                    fill: 'rgba(0, 0, 0, 0.2)',
-                });
-                this.handler.canvas.add(this.cropRect);
-                this.handler.canvas.setActiveObject(this.cropRect);
-                this.cropObject.selectable = false;
-                this.cropObject.evented = false;
-                this.handler.canvas.renderAll();
-            }
-        };
-        /**
-         * Finish crop image
-         *
-         */
-        this.finish = () => {
-            const { left, top, width, height, scaleX, scaleY } = this.cropRect;
-            const croppedImg = this.cropObject.toDataURL({
-                left: left - this.cropObject.left,
-                top: top - this.cropObject.top,
-                width: width * scaleX,
-                height: height * scaleY,
-            });
-            this.handler.setImage(this.cropObject, croppedImg);
-            this.cancel();
-        };
-        /**
-         * Cancel crop
-         *
-         */
-        this.cancel = () => {
-            this.handler.interactionMode = 'selection';
-            this.cropObject.selectable = true;
-            this.cropObject.evented = true;
-            this.handler.canvas.setActiveObject(this.cropObject);
-            this.handler.canvas.remove(this.cropRect);
-            this.cropRect = null;
-            this.cropObject = null;
-            this.handler.canvas.renderAll();
-        };
-        /**
-         * Resize crop
-         *
-         * @param {FabricEvent} opt
-         */
-        this.resize = (opt) => {
-            const { target, transform: { original, corner }, } = opt;
-            const { left, top, width, height, scaleX, scaleY } = target;
-            const { left: cropLeft, top: cropTop, width: cropWidth, height: cropHeight, scaleX: cropScaleX, scaleY: cropScaleY, } = this.cropObject;
-            if (corner === 'tl') {
-                if (Math.round(cropLeft) > Math.round(left)) {
-                    // left
-                    const originRight = Math.round(cropLeft + cropWidth);
-                    const targetRight = Math.round(target.getBoundingRect().left + target.getBoundingRect().width);
-                    const diffRightRatio = 1 - (originRight - targetRight) / cropWidth;
-                    target.set({
-                        left: cropLeft,
-                        scaleX: diffRightRatio > 1 ? 1 : diffRightRatio,
-                    });
-                }
-                if (Math.round(cropTop) > Math.round(top)) {
-                    // top
-                    const originBottom = Math.round(cropTop + cropHeight);
-                    const targetBottom = Math.round(target.getBoundingRect().top + target.getBoundingRect().height);
-                    const diffBottomRatio = 1 - (originBottom - targetBottom) / cropHeight;
-                    target.set({
-                        top: cropTop,
-                        scaleY: diffBottomRatio > 1 ? 1 : diffBottomRatio,
-                    });
-                }
-            }
-            else if (corner === 'bl') {
-                if (Math.round(cropLeft) > Math.round(left)) {
-                    // left
-                    const originRight = Math.round(cropLeft + cropWidth);
-                    const targetRight = Math.round(target.getBoundingRect().left + target.getBoundingRect().width);
-                    const diffRightRatio = 1 - (originRight - targetRight) / cropWidth;
-                    target.set({
-                        left: cropLeft,
-                        scaleX: diffRightRatio > 1 ? 1 : diffRightRatio,
-                    });
-                }
-                if (Math.round(cropTop + cropHeight * cropScaleY) < Math.round(top + height * scaleY)) {
-                    // bottom
-                    const diffTopRatio = 1 - (original.top - cropTop) / cropHeight;
-                    target.set({
-                        top: original.top,
-                        scaleY: diffTopRatio > 1 ? 1 : diffTopRatio,
-                    });
-                }
-            }
-            else if (corner === 'tr') {
-                if (Math.round(cropLeft + cropWidth * cropScaleX) < Math.round(left + width * scaleX)) {
-                    // right
-                    const diffLeftRatio = 1 - (original.left - cropLeft) / cropWidth;
-                    target.set({
-                        left: original.left,
-                        scaleX: diffLeftRatio > 1 ? 1 : diffLeftRatio,
-                    });
-                }
-                if (Math.round(cropTop) > Math.round(top)) {
-                    // top
-                    const originBottom = Math.round(cropTop + cropHeight);
-                    const targetBottom = Math.round(target.getBoundingRect().top + target.getBoundingRect().height);
-                    const diffBottomRatio = 1 - (originBottom - targetBottom) / cropHeight;
-                    target.set({
-                        top: cropTop,
-                        scaleY: diffBottomRatio > 1 ? 1 : diffBottomRatio,
-                    });
-                }
-            }
-            else if (corner === 'br') {
-                if (Math.round(cropLeft + cropWidth * cropScaleX) < Math.round(left + width * scaleX)) {
-                    // right
-                    const diffLeftRatio = 1 - (original.left - cropLeft) / cropWidth;
-                    target.set({
-                        left: original.left,
-                        scaleX: diffLeftRatio > 1 ? 1 : diffLeftRatio,
-                    });
-                }
-                if (Math.round(cropTop + cropHeight * cropScaleY) < Math.round(top + height * scaleY)) {
-                    // bottom
-                    const diffTopRatio = 1 - (original.top - cropTop) / cropHeight;
-                    target.set({
-                        top: original.top,
-                        scaleY: diffTopRatio > 1 ? 1 : diffTopRatio,
-                    });
-                }
-            }
-            else if (corner === 'ml') {
-                if (Math.round(cropLeft) > Math.round(left)) {
-                    // left
-                    const originRight = Math.round(cropLeft + cropWidth);
-                    const targetRight = Math.round(target.getBoundingRect().left + target.getBoundingRect().width);
-                    const diffRightRatio = 1 - (originRight - targetRight) / cropWidth;
-                    target.set({
-                        left: cropLeft,
-                        scaleX: diffRightRatio > 1 ? 1 : diffRightRatio,
-                    });
-                }
-            }
-            else if (corner === 'mt') {
-                if (Math.round(cropTop) > Math.round(top)) {
-                    // top
-                    const originBottom = Math.round(cropTop + cropHeight);
-                    const targetBottom = Math.round(target.getBoundingRect().top + target.getBoundingRect().height);
-                    const diffBottomRatio = 1 - (originBottom - targetBottom) / cropHeight;
-                    target.set({
-                        top: cropTop,
-                        scaleY: diffBottomRatio > 1 ? 1 : diffBottomRatio,
-                    });
-                }
-            }
-            else if (corner === 'mb') {
-                if (Math.round(cropTop + cropHeight * cropScaleY) < Math.round(top + height * scaleY)) {
-                    // bottom
-                    const diffTopRatio = 1 - (original.top - cropTop) / cropHeight;
-                    target.set({
-                        top: original.top,
-                        scaleY: diffTopRatio > 1 ? 1 : diffTopRatio,
-                    });
-                }
-            }
-            else if (corner === 'mr') {
-                if (Math.round(cropLeft + cropWidth * cropScaleX) < Math.round(left + width * scaleX)) {
-                    // right
-                    const diffLeftRatio = 1 - (original.left - cropLeft) / cropWidth;
-                    target.set({
-                        left: original.left,
-                        scaleX: diffLeftRatio > 1 ? 1 : diffLeftRatio,
-                    });
-                }
-            }
-        };
-        /**
-         * Resize crop
-         *
-         * @param {FabricEvent} opt
-         */
-        this.moving = (opt) => {
-            const { target } = opt;
-            const { left, top, width, height, scaleX, scaleY } = target;
-            const { left: cropLeft, top: cropTop, width: cropWidth, height: cropHeight, } = this.cropObject.getBoundingRect();
-            const movedTop = () => {
-                if (Math.round(cropTop) >= Math.round(top)) {
-                    target.set({
-                        top: cropTop,
-                    });
-                }
-                else if (Math.round(cropTop + cropHeight) <= Math.round(top + height * scaleY)) {
-                    target.set({
-                        top: cropTop + cropHeight - height * scaleY,
-                    });
-                }
-            };
-            if (Math.round(cropLeft) >= Math.round(left)) {
-                target.set({
-                    left: Math.max(left, cropLeft),
-                });
-                movedTop();
-            }
-            else if (Math.round(cropLeft + cropWidth) <= Math.round(left + width * scaleX)) {
-                target.set({
-                    left: cropLeft + cropWidth - width * scaleX,
-                });
-                movedTop();
-            }
-            else if (Math.round(cropTop) >= Math.round(top)) {
-                target.set({
-                    top: cropTop,
-                });
-            }
-            else if (Math.round(cropTop + cropHeight) <= Math.round(top + height * scaleY)) {
-                target.set({
-                    top: cropTop + cropHeight - height * scaleY,
-                });
-            }
-        };
-        this.handler = handler;
-        this.cropRect = null;
-        this.cropObject = null;
-    }
-}
-exports.default = CropHandler;

package/lib/handlers/DrawingHandler.d.ts

@@ -1,28 +0,0 @@
-import { fabric } from 'fabric';
-import Handler from './Handler';
-import { FabricEvent, FabricObject } from '../utils';
-declare class DrawingHandler {
-    handler: Handler;
-    constructor(handler: Handler);
-    polygon: {
-        init: () => void;
-        finish: () => void;
-        addPoint: (opt: FabricEvent) => void;
-        generate: (pointArray: FabricObject<fabric.Circle>[]) => void;
-    };
-    line: {
-        init: () => void;
-        finish: () => void;
-        addPoint: (opt: FabricEvent) => void;
-        generate: (opt: FabricEvent) => void;
-    };
-    arrow: {
-        init: () => void;
-        finish: () => void;
-        addPoint: (opt: FabricEvent) => void;
-        generate: (opt: FabricEvent) => void;
-    };
-    orthogonal: {};
-    curve: {};
-}
-export default DrawingHandler;

package/lib/handlers/DrawingHandler.js

@@ -1,318 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const fabric_1 = require("fabric");
-const uuid_1 = require("uuid");
-const objects_1 = require("../objects");
-class DrawingHandler {
-    constructor(handler) {
-        this.polygon = {
-            init: () => {
-                this.handler.interactionHandler.drawing('polygon');
-                this.handler.pointArray = [];
-                this.handler.lineArray = [];
-                this.handler.activeLine = null;
-                this.handler.activeShape = null;
-            },
-            finish: () => {
-                this.handler.pointArray.forEach(point => {
-                    this.handler.canvas.remove(point);
-                });
-                this.handler.lineArray.forEach(line => {
-                    this.handler.canvas.remove(line);
-                });
-                this.handler.canvas.remove(this.handler.activeLine);
-                this.handler.canvas.remove(this.handler.activeShape);
-                this.handler.pointArray = [];
-                this.handler.lineArray = [];
-                this.handler.activeLine = null;
-                this.handler.activeShape = null;
-                this.handler.canvas.renderAll();
-                this.handler.interactionHandler.selection();
-            },
-            addPoint: (opt) => {
-                const { e, absolutePointer } = opt;
-                const { x, y } = absolutePointer;
-                const circle = new fabric_1.fabric.Circle({
-                    radius: 3,
-                    fill: '#ffffff',
-                    stroke: '#333333',
-                    strokeWidth: 0.5,
-                    left: x,
-                    top: y,
-                    selectable: false,
-                    hasBorders: false,
-                    hasControls: false,
-                    originX: 'center',
-                    originY: 'center',
-                    hoverCursor: 'pointer',
-                });
-                circle.set({
-                    id: uuid_1.v4(),
-                });
-                if (!this.handler.pointArray.length) {
-                    circle.set({
-                        fill: 'red',
-                    });
-                }
-                const points = [x, y, x, y];
-                const line = new fabric_1.fabric.Line(points, {
-                    strokeWidth: 2,
-                    fill: '#999999',
-                    stroke: '#999999',
-                    originX: 'center',
-                    originY: 'center',
-                    selectable: false,
-                    hasBorders: false,
-                    hasControls: false,
-                    evented: false,
-                });
-                line.set({
-                    class: 'line',
-                });
-                if (this.handler.activeShape) {
-                    const position = this.handler.canvas.getPointer(e);
-                    const activeShapePoints = this.handler.activeShape.get('points');
-                    activeShapePoints.push({
-                        x: position.x,
-                        y: position.y,
-                    });
-                    const polygon = new fabric_1.fabric.Polygon(activeShapePoints, {
-                        stroke: '#333333',
-                        strokeWidth: 1,
-                        fill: '#cccccc',
-                        opacity: 0.1,
-                        selectable: false,
-                        hasBorders: false,
-                        hasControls: false,
-                        evented: false,
-                    });
-                    this.handler.canvas.remove(this.handler.activeShape);
-                    this.handler.canvas.add(polygon);
-                    this.handler.activeShape = polygon;
-                    this.handler.canvas.renderAll();
-                }
-                else {
-                    const polyPoint = [{ x, y }];
-                    const polygon = new fabric_1.fabric.Polygon(polyPoint, {
-                        stroke: '#333333',
-                        strokeWidth: 1,
-                        fill: '#cccccc',
-                        opacity: 0.1,
-                        selectable: false,
-                        hasBorders: false,
-                        hasControls: false,
-                        evented: false,
-                    });
-                    this.handler.activeShape = polygon;
-                    this.handler.canvas.add(polygon);
-                }
-                this.handler.activeLine = line;
-                this.handler.pointArray.push(circle);
-                this.handler.lineArray.push(line);
-                this.handler.canvas.add(line);
-                this.handler.canvas.add(circle);
-            },
-            generate: (pointArray) => {
-                const points = [];
-                const id = uuid_1.v4();
-                pointArray.forEach(point => {
-                    points.push({
-                        x: point.left,
-                        y: point.top,
-                    });
-                    this.handler.canvas.remove(point);
-                });
-                this.handler.lineArray.forEach(line => {
-                    this.handler.canvas.remove(line);
-                });
-                this.handler.canvas.remove(this.handler.activeShape).remove(this.handler.activeLine);
-                const option = {
-                    id,
-                    points,
-                    type: 'polygon',
-                    stroke: 'rgba(0, 0, 0, 1)',
-                    strokeWidth: 3,
-                    fill: 'rgba(0, 0, 0, 0.25)',
-                    opacity: 1,
-                    objectCaching: !this.handler.editable,
-                    name: 'New polygon',
-                    superType: 'drawing',
-                };
-                this.handler.add(option, false);
-                this.handler.pointArray = [];
-                this.handler.activeLine = null;
-                this.handler.activeShape = null;
-                this.handler.interactionHandler.selection();
-            },
-        };
-        this.line = {
-            init: () => {
-                this.handler.interactionHandler.drawing('line');
-                this.handler.pointArray = [];
-                this.handler.activeLine = null;
-            },
-            finish: () => {
-                this.handler.pointArray.forEach(point => {
-                    this.handler.canvas.remove(point);
-                });
-                this.handler.canvas.remove(this.handler.activeLine);
-                this.handler.pointArray = [];
-                this.handler.activeLine = null;
-                this.handler.canvas.renderAll();
-                this.handler.interactionHandler.selection();
-            },
-            addPoint: (opt) => {
-                const { absolutePointer } = opt;
-                const { x, y } = absolutePointer;
-                const circle = new fabric_1.fabric.Circle({
-                    radius: 3,
-                    fill: '#ffffff',
-                    stroke: '#333333',
-                    strokeWidth: 0.5,
-                    left: x,
-                    top: y,
-                    selectable: false,
-                    hasBorders: false,
-                    hasControls: false,
-                    originX: 'center',
-                    originY: 'center',
-                    hoverCursor: 'pointer',
-                });
-                if (!this.handler.pointArray.length) {
-                    circle.set({
-                        fill: 'red',
-                    });
-                }
-                const points = [x, y, x, y];
-                this.handler.activeLine = new objects_1.Line(points, {
-                    strokeWidth: 2,
-                    fill: '#999999',
-                    stroke: '#999999',
-                    originX: 'center',
-                    originY: 'center',
-                    selectable: false,
-                    hasBorders: false,
-                    hasControls: false,
-                    evented: false,
-                });
-                this.handler.activeLine.set({
-                    class: 'line',
-                });
-                this.handler.pointArray.push(circle);
-                this.handler.canvas.add(this.handler.activeLine);
-                this.handler.canvas.add(circle);
-            },
-            generate: (opt) => {
-                const { absolutePointer } = opt;
-                const { x, y } = absolutePointer;
-                let points = [];
-                const id = uuid_1.v4();
-                this.handler.pointArray.forEach(point => {
-                    points = points.concat(point.left, point.top, x, y);
-                    this.handler.canvas.remove(point);
-                });
-                this.handler.canvas.remove(this.handler.activeLine);
-                const option = {
-                    id,
-                    points,
-                    type: 'line',
-                    stroke: 'rgba(0, 0, 0, 1)',
-                    strokeWidth: 3,
-                    opacity: 1,
-                    objectCaching: !this.handler.editable,
-                    name: 'New line',
-                    superType: 'drawing',
-                };
-                this.handler.add(option, false);
-                this.handler.pointArray = [];
-                this.handler.activeLine = null;
-                this.handler.interactionHandler.selection();
-            },
-        };
-        this.arrow = {
-            init: () => {
-                this.handler.interactionHandler.drawing('arrow');
-                this.handler.pointArray = [];
-                this.handler.activeLine = null;
-            },
-            finish: () => {
-                this.handler.pointArray.forEach(point => {
-                    this.handler.canvas.remove(point);
-                });
-                this.handler.canvas.remove(this.handler.activeLine);
-                this.handler.pointArray = [];
-                this.handler.activeLine = null;
-                this.handler.canvas.renderAll();
-                this.handler.interactionHandler.selection();
-            },
-            addPoint: (opt) => {
-                const { absolutePointer } = opt;
-                const { x, y } = absolutePointer;
-                const circle = new fabric_1.fabric.Circle({
-                    radius: 3,
-                    fill: '#ffffff',
-                    stroke: '#333333',
-                    strokeWidth: 0.5,
-                    left: x,
-                    top: y,
-                    selectable: false,
-                    hasBorders: false,
-                    hasControls: false,
-                    originX: 'center',
-                    originY: 'center',
-                    hoverCursor: 'pointer',
-                });
-                if (!this.handler.pointArray.length) {
-                    circle.set({
-                        fill: 'red',
-                    });
-                }
-                const points = [x, y, x, y];
-                this.handler.activeLine = new objects_1.Arrow(points, {
-                    strokeWidth: 2,
-                    fill: '#999999',
-                    stroke: '#999999',
-                    class: 'line',
-                    originX: 'center',
-                    originY: 'center',
-                    selectable: false,
-                    hasBorders: false,
-                    hasControls: false,
-                    evented: false,
-                });
-                this.handler.pointArray.push(circle);
-                this.handler.canvas.add(this.handler.activeLine);
-                this.handler.canvas.add(circle);
-            },
-            generate: (opt) => {
-                const { absolutePointer } = opt;
-                const { x, y } = absolutePointer;
-                let points = [];
-                this.handler.pointArray.forEach(point => {
-                    points = points.concat(point.left, point.top, x, y);
-                    this.handler.canvas.remove(point);
-                });
-                this.handler.canvas.remove(this.handler.activeLine);
-                const option = {
-                    id: uuid_1.v4(),
-                    points,
-                    type: 'arrow',
-                    stroke: 'rgba(0, 0, 0, 1)',
-                    strokeWidth: 3,
-                    opacity: 1,
-                    objectCaching: !this.handler.editable,
-                    name: 'New line',
-                    superType: 'drawing',
-                };
-                this.handler.add(option, false);
-                this.handler.pointArray = [];
-                this.handler.activeLine = null;
-                this.handler.interactionHandler.selection();
-            },
-        };
-        this.orthogonal = {};
-        this.curve = {};
-        this.handler = handler;
-    }
-}
-exports.default = DrawingHandler;

package/lib/handlers/ElementHandler.d.ts

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