react-design-editor 0.0.37 → 0.0.41

package/lib/handlers/CropHandler.js

@@ -0,0 +1,261 @@
+"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/CustomHandler.d.ts

@@ -0,0 +1,7 @@
+import { Handler } from '.';
+declare class CustomHandler {
+    handler: Handler;
+    constructor(handler: Handler);
+    protected initialze(): void;
+}
+export default CustomHandler;

package/lib/handlers/CustomHandler.js

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

package/lib/handlers/DrawingHandler.d.ts

@@ -0,0 +1,28 @@
+import { fabric } from 'fabric';
+import { FabricEvent, FabricObject } from '../utils';
+import Handler from './Handler';
+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

@@ -0,0 +1,318 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const uuidv4_1 = require("uuidv4");
+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: 1,
+                    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: uuidv4_1.uuid(),
+                });
+                if (!this.handler.pointArray.length) {
+                    circle.set({
+                        fill: 'red',
+                    });
+                }
+                const points = [x, y, x, y];
+                const line = new fabric_1.fabric.Line(points, {
+                    strokeWidth: 1,
+                    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 = uuidv4_1.uuid();
+                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: 1,
+                    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 = uuidv4_1.uuid();
+                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: uuidv4_1.uuid(),
+                    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;