react-design-editor 0.0.31 → 0.0.35

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

@@ -1,18 +1,19 @@
-import { fabric } from 'fabric';
-import Handler from './Handler';
-import { FabricObject } from '../utils';
-declare class GridHandler {
-    handler?: Handler;
-    constructor(handler: Handler);
-    /**
-     * Init grid
-     */
-    init: () => void;
-    /**
-     * Set coords in grid
-     * @param {(FabricObject | fabric.ActiveSelection)} target
-     * @returns
-     */
-    setCoords: (target: FabricObject | fabric.ActiveSelection) => void;
-}
-export default GridHandler;
+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,75 +1,77 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const fabric_1 = require("fabric");
-class GridHandler {
-    constructor(handler) {
-        /**
-         * Init grid
-         */
-        this.init = () => {
-            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;
-    }
-}
-exports.default = GridHandler;
+"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,39 +1,61 @@
-import Handler from './Handler';
-import { FabricObject } from '../utils';
-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);
-    init: () => 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;
+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;