react-design-editor 0.0.36 → 0.0.37

package/lib/handlers/FiberHandler.d.ts

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

package/lib/handlers/FiberHandler.js

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

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

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

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

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