react-design-editor 0.0.37 → 0.0.41

package/lib/handlers/FiberHandler.d.ts

@@ -0,0 +1,6 @@
+import CustomHandler from './CustomHandler';
+declare class FiberHandler extends CustomHandler {
+    protected initialze(): void;
+    private mousedown;
+}
+export default FiberHandler;

package/lib/handlers/FiberHandler.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const CustomHandler_1 = __importDefault(require("./CustomHandler"));
+class FiberHandler extends CustomHandler_1.default {
+    initialze() {
+        this.handler.canvas.on('mouse:down', this.mousedown);
+    }
+    mousedown(opt) {
+        const { subTargets } = opt;
+        if (subTargets.length) {
+            const target = subTargets[0];
+            console.log(target);
+            if (target.type === 'container') {
+            }
+            else if (target.type === 'coreContainer') {
+            }
+        }
+    }
+}
+exports.default = FiberHandler;

package/lib/handlers/GridHandler.d.ts

@@ -0,0 +1,19 @@
+import { fabric } from 'fabric';
+import Handler from './Handler';
+import { FabricObject } from '../utils';
+declare class GridHandler {
+    handler?: Handler;
+    constructor(handler: Handler);
+    /**
+     * Init grid
+     *
+     */
+    initialize: () => void;
+    /**
+     * Set coords in grid
+     * @param {(FabricObject | fabric.ActiveSelection)} target
+     * @returns
+     */
+    setCoords: (target: FabricObject | fabric.ActiveSelection) => void;
+}
+export default GridHandler;

package/lib/handlers/GridHandler.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+class GridHandler {
+    constructor(handler) {
+        /**
+         * Init grid
+         *
+         */
+        this.initialize = () => {
+            const { grid, lineColor, borderColor, enabled } = this.handler.gridOption;
+            if (enabled && grid) {
+                const width = 5000;
+                const gridLength = width / grid;
+                const lineOptions = {
+                    stroke: lineColor,
+                    selectable: false,
+                    evented: false,
+                    id: 'grid',
+                };
+                for (let i = 0; i < gridLength; i++) {
+                    const distance = i * grid;
+                    const fhorizontal = new fabric_1.fabric.Line([distance, -width, distance, width], lineOptions);
+                    const shorizontal = new fabric_1.fabric.Line([distance - width, -width, distance - width, width], lineOptions);
+                    this.handler.canvas.add(fhorizontal);
+                    this.handler.canvas.add(shorizontal);
+                    const fvertical = new fabric_1.fabric.Line([-width, distance - width, width, distance - width], lineOptions);
+                    const svertical = new fabric_1.fabric.Line([-width, distance, width, distance], lineOptions);
+                    this.handler.canvas.add(fvertical);
+                    this.handler.canvas.add(svertical);
+                    if (i % 5 === 0) {
+                        fhorizontal.set({ stroke: borderColor });
+                        shorizontal.set({ stroke: borderColor });
+                        fvertical.set({ stroke: borderColor });
+                        svertical.set({ stroke: borderColor });
+                    }
+                }
+            }
+        };
+        /**
+         * Set coords in grid
+         * @param {(FabricObject | fabric.ActiveSelection)} target
+         * @returns
+         */
+        this.setCoords = (target) => {
+            const { gridOption: { enabled, grid, snapToGrid }, } = this.handler;
+            if (enabled && grid && snapToGrid) {
+                if (target.type === 'activeSelection') {
+                    const activeSelection = target;
+                    activeSelection.set({
+                        left: Math.round(target.left / grid) * grid,
+                        top: Math.round(target.top / grid) * grid,
+                    });
+                    activeSelection.setCoords();
+                    activeSelection.getObjects().forEach((obj) => {
+                        if (obj.superType === 'node') {
+                            const left = target.left + obj.left + target.width / 2;
+                            const top = target.top + obj.top + target.height / 2;
+                            this.handler.portHandler.setCoords({ ...obj, left, top });
+                        }
+                    });
+                    return;
+                }
+                const obj = target;
+                obj.set({
+                    left: Math.round(target.left / grid) * grid,
+                    top: Math.round(target.top / grid) * grid,
+                });
+                target.setCoords();
+                this.handler.portHandler.setCoords(target);
+            }
+        };
+        this.handler = handler;
+        this.initialize();
+    }
+}
+exports.default = GridHandler;

package/lib/handlers/GuidelineHandler.d.ts

@@ -0,0 +1,61 @@
+import { FabricEvent, FabricObject } from '../utils';
+import Handler from './Handler';
+declare class GuidelineHandler {
+    handler: Handler;
+    verticalLines: {
+        x?: number;
+        y1?: number;
+        y2?: number;
+    }[];
+    horizontalLines: {
+        y?: number;
+        x1?: number;
+        x2?: number;
+    }[];
+    ctx: CanvasRenderingContext2D;
+    viewportTransform: number[];
+    aligningLineOffset: number;
+    aligningLineMargin: number;
+    aligningLineWidth: number;
+    aligningLineColor: string;
+    zoom: number;
+    constructor(handler: Handler);
+    /**
+     * Initialize guideline handler
+     *
+     */
+    initialize(): void;
+    /**
+     * Destroy guideline handler
+     *
+     * @author salgum1114
+     */
+    destroy(): void;
+    /**
+     * Before the render
+     *
+     * @param {FabricEvent} _opt
+     */
+    beforeRender: (_opt: FabricEvent) => void;
+    /**
+     * After the render
+     *
+     * @param {FabricEvent} _opt
+     */
+    afterRender: (_opt: FabricEvent) => void;
+    drawVerticalLine: (coords: {
+        x?: number;
+        y1?: number;
+        y2?: number;
+    }) => void;
+    drawHorizontalLine: (coords: {
+        y?: number;
+        x1?: number;
+        x2?: number;
+    }) => void;
+    drawLine: (x1: number, y1: number, x2: number, y2: number) => void;
+    isInRange: (v1: number, v2: number) => boolean;
+    movingGuidelines: (target: FabricObject) => void;
+    scalingGuidelines: (_target: FabricObject) => void;
+}
+export default GuidelineHandler;

package/lib/handlers/GuidelineHandler.js

@@ -0,0 +1,315 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+class GuidelineHandler {
+    constructor(handler) {
+        this.aligningLineOffset = 5;
+        this.aligningLineMargin = 4;
+        this.aligningLineWidth = 1;
+        this.aligningLineColor = 'rgb(255, 0, 0)';
+        this.zoom = 1;
+        /**
+         * Before the render
+         *
+         * @param {FabricEvent} _opt
+         */
+        this.beforeRender = (_opt) => {
+            this.handler.canvas.clearContext(this.handler.guidelineHandler.ctx);
+        };
+        /**
+         * After the render
+         *
+         * @param {FabricEvent} _opt
+         */
+        this.afterRender = (_opt) => {
+            for (let i = this.handler.guidelineHandler.verticalLines.length; i--;) {
+                this.handler.guidelineHandler.drawVerticalLine(this.handler.guidelineHandler.verticalLines[i]);
+            }
+            for (let i = this.handler.guidelineHandler.horizontalLines.length; i--;) {
+                this.handler.guidelineHandler.drawHorizontalLine(this.handler.guidelineHandler.horizontalLines[i]);
+            }
+            this.handler.guidelineHandler.verticalLines.length = 0;
+            this.handler.guidelineHandler.horizontalLines.length = 0;
+        };
+        this.drawVerticalLine = (coords) => {
+            this.drawLine(coords.x + 0.5, coords.y1 > coords.y2 ? coords.y2 : coords.y1, coords.x + 0.5, coords.y2 > coords.y1 ? coords.y2 : coords.y1);
+        };
+        this.drawHorizontalLine = (coords) => {
+            this.drawLine(coords.x1 > coords.x2 ? coords.x2 : coords.x1, coords.y + 0.5, coords.x2 > coords.x1 ? coords.x2 : coords.x1, coords.y + 0.5);
+        };
+        this.drawLine = (x1, y1, x2, y2) => {
+            const { ctx, aligningLineWidth, aligningLineColor, viewportTransform, zoom } = this;
+            ctx.save();
+            ctx.lineWidth = aligningLineWidth;
+            ctx.strokeStyle = aligningLineColor;
+            ctx.beginPath();
+            ctx.moveTo(x1 * zoom + viewportTransform[4], y1 * zoom + viewportTransform[5]);
+            ctx.lineTo(x2 * zoom + viewportTransform[4], y2 * zoom + viewportTransform[5]);
+            ctx.stroke();
+            ctx.restore();
+        };
+        this.isInRange = (v1, v2) => {
+            const { aligningLineMargin } = this;
+            v1 = Math.round(v1);
+            v2 = Math.round(v2);
+            for (let i = v1 - aligningLineMargin, len = v1 + aligningLineMargin; i <= len; i++) {
+                if (i === v2) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        this.movingGuidelines = (target) => {
+            const canvasObjects = this.handler.canvas.getObjects();
+            const activeObjectCenter = target.getCenterPoint();
+            const activeObjectLeft = activeObjectCenter.x;
+            const activeObjectTop = activeObjectCenter.y;
+            const activeObjectBoundingRect = target.getBoundingRect();
+            const activeObjectHeight = activeObjectBoundingRect.height / this.viewportTransform[3];
+            const activeObjectWidth = activeObjectBoundingRect.width / this.viewportTransform[0];
+            let horizontalInTheRange = false;
+            let verticalInTheRange = false;
+            const { _currentTransform: transform } = this.handler.canvas;
+            if (!transform) {
+                return;
+            }
+            // It should be trivial to DRY this up by encapsulating (repeating) creation of x1, x2, y1, and y2 into functions,
+            // but we're not doing it here for perf. reasons -- as this a function that's invoked on every mouse move
+            for (let i = canvasObjects.length; i--;) {
+                if (canvasObjects[i] === target ||
+                    canvasObjects[i].superType === 'port' ||
+                    canvasObjects[i].superType === 'link' ||
+                    !canvasObjects[i].evented) {
+                    continue;
+                }
+                const objectCenter = canvasObjects[i].getCenterPoint();
+                const objectLeft = objectCenter.x;
+                const objectTop = objectCenter.y;
+                const objectBoundingRect = canvasObjects[i].getBoundingRect();
+                const objectHeight = objectBoundingRect.height / this.viewportTransform[3];
+                const objectWidth = objectBoundingRect.width / this.viewportTransform[0];
+                // snap by the horizontal center line
+                if (this.isInRange(objectLeft, activeObjectLeft)) {
+                    verticalInTheRange = true;
+                    if (canvasObjects[i].id === 'workarea') {
+                        const y1 = -5000;
+                        const y2 = 5000;
+                        this.verticalLines.push({
+                            x: objectLeft,
+                            y1,
+                            y2,
+                        });
+                    }
+                    else {
+                        this.verticalLines.push({
+                            x: objectLeft,
+                            y1: objectTop < activeObjectTop
+                                ? objectTop - objectHeight / 2 - this.aligningLineOffset
+                                : objectTop + objectHeight / 2 + this.aligningLineOffset,
+                            y2: activeObjectTop > objectTop
+                                ? activeObjectTop + activeObjectHeight / 2 + this.aligningLineOffset
+                                : activeObjectTop - activeObjectHeight / 2 - this.aligningLineOffset,
+                        });
+                    }
+                    target.setPositionByOrigin(new fabric_1.fabric.Point(objectLeft, activeObjectTop), 'center', 'center');
+                }
+                // snap by the left edge
+                if (this.isInRange(objectLeft - objectWidth / 2, activeObjectLeft - activeObjectWidth / 2)) {
+                    verticalInTheRange = true;
+                    if (canvasObjects[i].id === 'workarea') {
+                        const workarea = canvasObjects[i];
+                        const y1 = -5000;
+                        const y2 = 5000;
+                        let x = objectLeft - objectWidth / 2;
+                        if (workarea.layout === 'fullscreen') {
+                            x = 0;
+                        }
+                        this.verticalLines.push({
+                            x,
+                            y1,
+                            y2,
+                        });
+                    }
+                    else {
+                        this.verticalLines.push({
+                            x: objectLeft - objectWidth / 2,
+                            y1: objectTop < activeObjectTop
+                                ? objectTop - objectHeight / 2 - this.aligningLineOffset
+                                : objectTop + objectHeight / 2 + this.aligningLineOffset,
+                            y2: activeObjectTop > objectTop
+                                ? activeObjectTop + activeObjectHeight / 2 + this.aligningLineOffset
+                                : activeObjectTop - activeObjectHeight / 2 - this.aligningLineOffset,
+                        });
+                    }
+                    target.setPositionByOrigin(new fabric_1.fabric.Point(objectLeft - objectWidth / 2 + activeObjectWidth / 2, activeObjectTop), 'center', 'center');
+                }
+                // snap by the right edge
+                if (this.isInRange(objectLeft + objectWidth / 2, activeObjectLeft + activeObjectWidth / 2)) {
+                    verticalInTheRange = true;
+                    if (canvasObjects[i].id === 'workarea') {
+                        const workarea = canvasObjects[i];
+                        const y1 = -5000;
+                        const y2 = 5000;
+                        let x = objectLeft + objectWidth / 2;
+                        if (workarea.layout === 'fullscreen') {
+                            x = this.handler.canvas.getWidth();
+                        }
+                        this.verticalLines.push({
+                            x,
+                            y1,
+                            y2,
+                        });
+                    }
+                    else {
+                        this.verticalLines.push({
+                            x: objectLeft + objectWidth / 2,
+                            y1: objectTop < activeObjectTop
+                                ? objectTop - objectHeight / 2 - this.aligningLineOffset
+                                : objectTop + objectHeight / 2 + this.aligningLineOffset,
+                            y2: activeObjectTop > objectTop
+                                ? activeObjectTop + activeObjectHeight / 2 + this.aligningLineOffset
+                                : activeObjectTop - activeObjectHeight / 2 - this.aligningLineOffset,
+                        });
+                    }
+                    target.setPositionByOrigin(new fabric_1.fabric.Point(objectLeft + objectWidth / 2 - activeObjectWidth / 2, activeObjectTop), 'center', 'center');
+                }
+                // snap by the vertical center line
+                if (this.isInRange(objectTop, activeObjectTop)) {
+                    horizontalInTheRange = true;
+                    if (canvasObjects[i].id === 'workarea') {
+                        const x1 = -5000;
+                        const x2 = 5000;
+                        this.horizontalLines.push({
+                            y: objectTop,
+                            x1,
+                            x2,
+                        });
+                    }
+                    else {
+                        this.horizontalLines.push({
+                            y: objectTop,
+                            x1: objectLeft < activeObjectLeft
+                                ? objectLeft - objectWidth / 2 - this.aligningLineOffset
+                                : objectLeft + objectWidth / 2 + this.aligningLineOffset,
+                            x2: activeObjectLeft > objectLeft
+                                ? activeObjectLeft + activeObjectWidth / 2 + this.aligningLineOffset
+                                : activeObjectLeft - activeObjectWidth / 2 - this.aligningLineOffset,
+                        });
+                    }
+                    target.setPositionByOrigin(new fabric_1.fabric.Point(activeObjectLeft, objectTop), 'center', 'center');
+                }
+                // snap by the top edge
+                if (this.isInRange(objectTop - objectHeight / 2, activeObjectTop - activeObjectHeight / 2)) {
+                    horizontalInTheRange = true;
+                    if (canvasObjects[i].id === 'workarea') {
+                        const workarea = canvasObjects[i];
+                        const x1 = -5000;
+                        const x2 = 5000;
+                        let y = objectTop - objectHeight / 2;
+                        if (workarea.layout === 'fullscreen') {
+                            y = 0;
+                        }
+                        this.horizontalLines.push({
+                            y,
+                            x1,
+                            x2,
+                        });
+                    }
+                    else {
+                        this.horizontalLines.push({
+                            y: objectTop - objectHeight / 2,
+                            x1: objectLeft < activeObjectLeft
+                                ? objectLeft - objectWidth / 2 - this.aligningLineOffset
+                                : objectLeft + objectWidth / 2 + this.aligningLineOffset,
+                            x2: activeObjectLeft > objectLeft
+                                ? activeObjectLeft + activeObjectWidth / 2 + this.aligningLineOffset
+                                : activeObjectLeft - activeObjectWidth / 2 - this.aligningLineOffset,
+                        });
+                    }
+                    target.setPositionByOrigin(new fabric_1.fabric.Point(activeObjectLeft, objectTop - objectHeight / 2 + activeObjectHeight / 2), 'center', 'center');
+                }
+                // snap by the bottom edge
+                if (this.isInRange(objectTop + objectHeight / 2, activeObjectTop + activeObjectHeight / 2)) {
+                    horizontalInTheRange = true;
+                    if (canvasObjects[i].id === 'workarea') {
+                        const workarea = canvasObjects[i];
+                        const x1 = -5000;
+                        const x2 = 5000;
+                        let y = objectTop + objectHeight / 2;
+                        if (workarea.layout === 'fullscreen') {
+                            y = this.handler.canvas.getHeight();
+                        }
+                        this.horizontalLines.push({
+                            y,
+                            x1,
+                            x2,
+                        });
+                    }
+                    else {
+                        this.horizontalLines.push({
+                            y: objectTop + objectHeight / 2,
+                            x1: objectLeft < activeObjectLeft
+                                ? objectLeft - objectWidth / 2 - this.aligningLineOffset
+                                : objectLeft + objectWidth / 2 + this.aligningLineOffset,
+                            x2: activeObjectLeft > objectLeft
+                                ? activeObjectLeft + activeObjectWidth / 2 + this.aligningLineOffset
+                                : activeObjectLeft - activeObjectWidth / 2 - this.aligningLineOffset,
+                        });
+                    }
+                    target.setPositionByOrigin(new fabric_1.fabric.Point(activeObjectLeft, objectTop + objectHeight / 2 - activeObjectHeight / 2), 'center', 'center');
+                }
+            }
+            if (!horizontalInTheRange) {
+                this.horizontalLines.length = 0;
+            }
+            if (!verticalInTheRange) {
+                this.verticalLines.length = 0;
+            }
+        };
+        this.scalingGuidelines = (_target) => {
+            // TODO... object scaling guideline
+        };
+        this.handler = handler;
+        this.initialize();
+    }
+    /**
+     * Initialize guideline handler
+     *
+     */
+    initialize() {
+        if (this.handler.guidelineOption.enabled) {
+            // @ts-ignore
+            this.handler.canvas.on({
+                'before:render': this.beforeRender,
+                'after:render': this.afterRender,
+            });
+        }
+        else {
+            this.handler.canvas.off({
+                'before:render': this.beforeRender,
+                'after:render': this.afterRender,
+            });
+        }
+        this.ctx = this.handler.canvas.getSelectionContext();
+        this.aligningLineOffset = 5;
+        this.aligningLineMargin = 4;
+        this.aligningLineWidth = 1;
+        this.aligningLineColor = 'rgb(255, 0, 0)';
+        this.viewportTransform = this.handler.canvas.viewportTransform;
+        this.zoom = 1;
+        this.verticalLines = [];
+        this.horizontalLines = [];
+    }
+    /**
+     * Destroy guideline handler
+     *
+     * @author salgum1114
+     */
+    destroy() {
+        this.handler.canvas.off({
+            'before:render': this.beforeRender,
+            'after:render': this.afterRender,
+        });
+    }
+}
+exports.default = GuidelineHandler;