react-design-editor 0.0.31 → 0.0.35

package/lib/CanvasObject.js

@@ -1,89 +1,96 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCanvasObject = void 0;
-const fabric_1 = require("fabric");
-const objects_1 = require("./objects");
-exports.createCanvasObject = (objectSchema) => objectSchema;
-const CanvasObject = {
-    group: {
-        create: ({ objects, ...option }) => new fabric_1.fabric.Group(objects, option),
-    },
-    'i-text': {
-        create: ({ text, ...option }) => new fabric_1.fabric.IText(text, option),
-    },
-    textbox: {
-        create: ({ text, ...option }) => new fabric_1.fabric.Textbox(text, option),
-    },
-    triangle: {
-        create: (option) => new fabric_1.fabric.Triangle(option),
-    },
-    circle: {
-        create: (option) => new fabric_1.fabric.Circle(option),
-    },
-    rect: {
-        create: (option) => new fabric_1.fabric.Rect(option),
-    },
-    cube: {
-        create: (option) => new objects_1.Cube(option),
-    },
-    image: {
-        create: ({ element = new Image(), ...option }) => new fabric_1.fabric.Image(element, {
-            ...option,
-            crossOrigin: 'anonymous',
-        }),
-    },
-    polygon: {
-        create: ({ points, ...option }) => new fabric_1.fabric.Polygon(points, {
-            ...option,
-            perPixelTargetFind: true,
-        }),
-    },
-    line: {
-        create: ({ points, ...option }) => new objects_1.Line(points, option),
-    },
-    arrow: {
-        create: ({ points, ...option }) => new objects_1.Arrow(points, option),
-    },
-    chart: {
-        create: (option) => new objects_1.Chart(option.chartOption || {
-            xAxis: {},
-            yAxis: {},
-            series: [
-                {
-                    type: 'line',
-                    data: [
-                        [0, 1],
-                        [1, 2],
-                        [2, 3],
-                        [3, 4],
-                    ],
-                },
-            ],
-        }, option),
-    },
-    element: {
-        create: ({ code, ...option }) => new objects_1.Element(code, option),
-    },
-    iframe: {
-        create: ({ src, ...option }) => new objects_1.Iframe(src, option),
-    },
-    video: {
-        create: ({ src, file, ...option }) => new objects_1.Video(src || file, option),
-    },
-    gif: {
-        create: (option) => new objects_1.Gif(option),
-    },
-    node: {
-        create: (option) => new objects_1.Node(option),
-    },
-    link: {
-        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.Link(fromNode, fromPort, toNode, toPort, option),
-    },
-    curvedLink: {
-        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.CurvedLink(fromNode, fromPort, toNode, toPort, option),
-    },
-    orthogonalLink: {
-        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.OrthogonalLink(fromNode, fromPort, toNode, toPort, option),
-    },
-};
-exports.default = CanvasObject;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCanvasObject = void 0;
+const fabric_1 = require("fabric");
+const objects_1 = require("./objects");
+const Svg_1 = __importDefault(require("./objects/Svg"));
+exports.createCanvasObject = (objectSchema) => objectSchema;
+const CanvasObject = {
+    group: {
+        create: ({ objects, ...option }) => new fabric_1.fabric.Group(objects, option),
+    },
+    'i-text': {
+        create: ({ text, ...option }) => new fabric_1.fabric.IText(text, option),
+    },
+    textbox: {
+        create: ({ text, ...option }) => new fabric_1.fabric.Textbox(text, option),
+    },
+    triangle: {
+        create: (option) => new fabric_1.fabric.Triangle(option),
+    },
+    circle: {
+        create: (option) => new fabric_1.fabric.Circle(option),
+    },
+    rect: {
+        create: (option) => new fabric_1.fabric.Rect(option),
+    },
+    cube: {
+        create: (option) => new objects_1.Cube(option),
+    },
+    image: {
+        create: ({ element = new Image(), ...option }) => new fabric_1.fabric.Image(element, {
+            ...option,
+            crossOrigin: 'anonymous',
+        }),
+    },
+    polygon: {
+        create: ({ points, ...option }) => new fabric_1.fabric.Polygon(points, {
+            ...option,
+            perPixelTargetFind: true,
+        }),
+    },
+    line: {
+        create: ({ points, ...option }) => new objects_1.Line(points, option),
+    },
+    arrow: {
+        create: ({ points, ...option }) => new objects_1.Arrow(points, option),
+    },
+    chart: {
+        create: (option) => new objects_1.Chart(option.chartOption || {
+            xAxis: {},
+            yAxis: {},
+            series: [
+                {
+                    type: 'line',
+                    data: [
+                        [0, 1],
+                        [1, 2],
+                        [2, 3],
+                        [3, 4],
+                    ],
+                },
+            ],
+        }, option),
+    },
+    element: {
+        create: ({ code, ...option }) => new objects_1.Element(code, option),
+    },
+    iframe: {
+        create: ({ src, ...option }) => new objects_1.Iframe(src, option),
+    },
+    video: {
+        create: ({ src, file, ...option }) => new objects_1.Video(src || file, option),
+    },
+    gif: {
+        create: (option) => new objects_1.Gif(option),
+    },
+    node: {
+        create: (option) => new objects_1.Node(option),
+    },
+    link: {
+        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.Link(fromNode, fromPort, toNode, toPort, option),
+    },
+    curvedLink: {
+        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.CurvedLink(fromNode, fromPort, toNode, toPort, option),
+    },
+    orthogonalLink: {
+        create: (fromNode, fromPort, toNode, toPort, option) => new objects_1.OrthogonalLink(fromNode, fromPort, toNode, toPort, option),
+    },
+    svg: {
+        create: (option) => new Svg_1.default(option),
+    },
+};
+exports.default = CanvasObject;

package/lib/constants/code.d.ts

@@ -0,0 +1,19 @@
+export declare const ESCAPE = "Escape";
+export declare const DELETE = "Delete";
+export declare const BACKSPACE = "Backspace";
+export declare const EQUAL = "Equal";
+export declare const MINUS = "Minus";
+export declare const KEY_A = "KeyA";
+export declare const KEY_Q = "KeyQ";
+export declare const KEY_W = "KeyW";
+export declare const KEY_C = "KeyC";
+export declare const KEY_V = "KeyV";
+export declare const KEY_Z = "KeyZ";
+export declare const KEY_Y = "KeyY";
+export declare const KEY_O = "KeyO";
+export declare const KEY_P = "KeyP";
+export declare const KEY_X = "KeyX";
+export declare const ARROW_UP = "ArrowUp";
+export declare const ARROW_DOWN = "ArrowDown";
+export declare const ARROW_LEFT = "ArrowLeft";
+export declare const ARROW_RIGHT = "ArrowRight";

package/lib/constants/code.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ARROW_RIGHT = exports.ARROW_LEFT = exports.ARROW_DOWN = exports.ARROW_UP = exports.KEY_X = exports.KEY_P = exports.KEY_O = exports.KEY_Y = exports.KEY_Z = exports.KEY_V = exports.KEY_C = exports.KEY_W = exports.KEY_Q = exports.KEY_A = exports.MINUS = exports.EQUAL = exports.BACKSPACE = exports.DELETE = exports.ESCAPE = void 0;
+exports.ESCAPE = 'Escape';
+exports.DELETE = 'Delete';
+exports.BACKSPACE = 'Backspace';
+exports.EQUAL = 'Equal';
+exports.MINUS = 'Minus';
+exports.KEY_A = 'KeyA';
+exports.KEY_Q = 'KeyQ';
+exports.KEY_W = 'KeyW';
+exports.KEY_C = 'KeyC';
+exports.KEY_V = 'KeyV';
+exports.KEY_Z = 'KeyZ';
+exports.KEY_Y = 'KeyY';
+exports.KEY_O = 'KeyO';
+exports.KEY_P = 'KeyP';
+exports.KEY_X = 'KeyX';
+exports.ARROW_UP = 'ArrowUp';
+exports.ARROW_DOWN = 'ArrowDown';
+exports.ARROW_LEFT = 'ArrowLeft';
+exports.ARROW_RIGHT = 'ArrowRight';

package/lib/constants/defaults.d.ts

@@ -0,0 +1,38 @@
+import { FabricObjectOption, WorkareaObject } from '../utils';
+export declare const canvasOption: {
+    preserveObjectStacking: boolean;
+    width: number;
+    height: number;
+    selection: boolean;
+    defaultCursor: string;
+    backgroundColor: string;
+};
+export declare const keyEvent: {
+    move: boolean;
+    all: boolean;
+    copy: boolean;
+    paste: boolean;
+    esc: boolean;
+    del: boolean;
+    clipboard: boolean;
+    transaction: boolean;
+    zoom: boolean;
+    cut: boolean;
+    grab: boolean;
+};
+export declare const gridOption: {
+    enabled: boolean;
+    grid: number;
+    snapToGrid: boolean;
+    lineColor: string;
+    borderColor: string;
+};
+export declare const workareaOption: Partial<WorkareaObject>;
+export declare const objectOption: Partial<FabricObjectOption>;
+export declare const guidelineOption: {
+    enabled: boolean;
+};
+export declare const activeSelectionOption: {
+    hasControls: boolean;
+};
+export declare const propertiesToInclude: string[];

package/lib/constants/defaults.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.propertiesToInclude = exports.activeSelectionOption = exports.guidelineOption = exports.objectOption = exports.workareaOption = exports.gridOption = exports.keyEvent = exports.canvasOption = void 0;
+exports.canvasOption = {
+    preserveObjectStacking: true,
+    width: 300,
+    height: 150,
+    selection: true,
+    defaultCursor: 'default',
+    backgroundColor: '#f3f3f3',
+};
+exports.keyEvent = {
+    move: true,
+    all: true,
+    copy: true,
+    paste: true,
+    esc: true,
+    del: true,
+    clipboard: false,
+    transaction: true,
+    zoom: true,
+    cut: true,
+    grab: true,
+};
+exports.gridOption = {
+    enabled: false,
+    grid: 10,
+    snapToGrid: false,
+    lineColor: '#ebebeb',
+    borderColor: '#cccccc',
+};
+exports.workareaOption = {
+    width: 600,
+    height: 400,
+    workareaWidth: 600,
+    workareaHeight: 400,
+    lockScalingX: true,
+    lockScalingY: true,
+    scaleX: 1,
+    scaleY: 1,
+    backgroundColor: '#fff',
+    hasBorders: false,
+    hasControls: false,
+    selectable: false,
+    lockMovementX: true,
+    lockMovementY: true,
+    hoverCursor: 'default',
+    name: '',
+    id: 'workarea',
+    type: 'image',
+    layout: 'fixed',
+    link: {},
+    tooltip: {
+        enabled: false,
+    },
+    isElement: false,
+};
+exports.objectOption = {
+    rotation: 0,
+    centeredRotation: true,
+    strokeUniform: true,
+};
+exports.guidelineOption = {
+    enabled: true,
+};
+exports.activeSelectionOption = {
+    hasControls: true,
+};
+exports.propertiesToInclude = ['id', 'name', 'locked', 'editable'];

package/lib/constants/index.d.ts

@@ -0,0 +1,3 @@
+import * as defaults from './defaults';
+import * as code from './code';
+export { defaults, code };

package/lib/constants/index.js

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.code = exports.defaults = void 0;
+const defaults = __importStar(require("./defaults"));
+exports.defaults = defaults;
+const code = __importStar(require("./code"));
+exports.code = code;

package/lib/handlers/AlignmentHandler.d.ts

@@ -1,18 +1,18 @@
-import Handler from './Handler';
-declare class AlignmentHandler {
-    handler: Handler;
-    constructor(handler: Handler);
-    /**
-     * Align left at selection
-     */
-    left: () => void;
-    /**
-     * Align center at selection
-     */
-    center: () => void;
-    /**
-     * Align right at selection
-     */
-    right: () => void;
-}
-export default AlignmentHandler;
+import Handler from './Handler';
+declare class AlignmentHandler {
+    handler: Handler;
+    constructor(handler: Handler);
+    /**
+     * Align left at selection
+     */
+    left: () => void;
+    /**
+     * Align center at selection
+     */
+    center: () => void;
+    /**
+     * Align right at selection
+     */
+    right: () => void;
+}
+export default AlignmentHandler;

package/lib/handlers/AlignmentHandler.js

@@ -1,58 +1,58 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-class AlignmentHandler {
-    constructor(handler) {
-        /**
-         * Align left at selection
-         */
-        this.left = () => {
-            const activeObject = this.handler.canvas.getActiveObject();
-            if (activeObject && activeObject.type === 'activeSelection') {
-                const activeSelection = activeObject;
-                const activeObjectLeft = -(activeObject.width / 2);
-                activeSelection.forEachObject(obj => {
-                    obj.set({
-                        left: activeObjectLeft,
-                    });
-                    obj.setCoords();
-                    this.handler.canvas.renderAll();
-                });
-            }
-        };
-        /**
-         * Align center at selection
-         */
-        this.center = () => {
-            const activeObject = this.handler.canvas.getActiveObject();
-            if (activeObject && activeObject.type === 'activeSelection') {
-                const activeSelection = activeObject;
-                activeSelection.forEachObject(obj => {
-                    obj.set({
-                        left: 0 - ((obj.width * obj.scaleX) / 2),
-                    });
-                    obj.setCoords();
-                    this.handler.canvas.renderAll();
-                });
-            }
-        };
-        /**
-         * Align right at selection
-         */
-        this.right = () => {
-            const activeObject = this.handler.canvas.getActiveObject();
-            if (activeObject && activeObject.type === 'activeSelection') {
-                const activeSelection = activeObject;
-                const activeObjectLeft = (activeObject.width / 2);
-                activeSelection.forEachObject(obj => {
-                    obj.set({
-                        left: activeObjectLeft - (obj.width * obj.scaleX),
-                    });
-                    obj.setCoords();
-                    this.handler.canvas.renderAll();
-                });
-            }
-        };
-        this.handler = handler;
-    }
-}
-exports.default = AlignmentHandler;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class AlignmentHandler {
+    constructor(handler) {
+        /**
+         * Align left at selection
+         */
+        this.left = () => {
+            const activeObject = this.handler.canvas.getActiveObject();
+            if (activeObject && activeObject.type === 'activeSelection') {
+                const activeSelection = activeObject;
+                const activeObjectLeft = -(activeObject.width / 2);
+                activeSelection.forEachObject(obj => {
+                    obj.set({
+                        left: activeObjectLeft,
+                    });
+                    obj.setCoords();
+                    this.handler.canvas.renderAll();
+                });
+            }
+        };
+        /**
+         * Align center at selection
+         */
+        this.center = () => {
+            const activeObject = this.handler.canvas.getActiveObject();
+            if (activeObject && activeObject.type === 'activeSelection') {
+                const activeSelection = activeObject;
+                activeSelection.forEachObject(obj => {
+                    obj.set({
+                        left: 0 - ((obj.width * obj.scaleX) / 2),
+                    });
+                    obj.setCoords();
+                    this.handler.canvas.renderAll();
+                });
+            }
+        };
+        /**
+         * Align right at selection
+         */
+        this.right = () => {
+            const activeObject = this.handler.canvas.getActiveObject();
+            if (activeObject && activeObject.type === 'activeSelection') {
+                const activeSelection = activeObject;
+                const activeObjectLeft = (activeObject.width / 2);
+                activeSelection.forEachObject(obj => {
+                    obj.set({
+                        left: activeObjectLeft - (obj.width * obj.scaleX),
+                    });
+                    obj.setCoords();
+                    this.handler.canvas.renderAll();
+                });
+            }
+        };
+        this.handler = handler;
+    }
+}
+exports.default = AlignmentHandler;

package/lib/handlers/AnimationHandler.d.ts

@@ -1,48 +1,50 @@
-import anime from 'animejs';
-import { Handler } from '.';
-import { FabricObject } from '../utils';
-declare class AnimationHandler {
-    handler: Handler;
-    constructor(handler: Handler);
-    /**
-     * Play the animation
-     * @param {string} id
-     * @param {boolean} [hasControls]
-     * @returns
-     */
-    play: (id: string, hasControls?: boolean) => void;
-    /**
-     * Pause the animation
-     * @param {string} id
-     * @returns
-     */
-    pause: (id: string) => void;
-    /**
-     * Stop the animation
-     * @param {string} id
-     * @param {boolean} [hasControls=true]
-     * @returns
-     */
-    stop: (id: string, hasControls?: boolean) => void;
-    /**
-     * Restart the animation
-     * @param {string} id
-     * @returns
-     */
-    restart: (id: string) => void;
-    /**
-     * Init animation
-     * @param {FabricObject} obj
-     * @param {boolean} [hasControls=true]
-     * @returns
-     */
-    initAnimation: (obj: FabricObject, hasControls?: boolean) => void;
-    /**
-     * Get animation option
-     * @param {FabricObject} obj
-     * @param {boolean} [hasControls]
-     * @returns
-     */
-    getAnimation: (obj: FabricObject, hasControls?: boolean) => anime.AnimeInstance;
-}
-export default AnimationHandler;
+import anime from 'animejs';
+import { Handler } from '.';
+import { FabricObject } from '../utils';
+declare class AnimationHandler {
+    handler: Handler;
+    constructor(handler: Handler);
+    /**
+     * Play the animation
+     * @param {string} id
+     * @param {boolean} [hasControls]
+     * @returns
+     */
+    play: (id: string, hasControls?: boolean) => void;
+    /**
+     * Pause the animation
+     * @param {string} id
+     * @returns
+     */
+    pause: (id: string) => void;
+    /**
+     * Stop the animation
+     * @param {string} id
+     * @param {boolean} [hasControls=true]
+     * @returns
+     */
+    stop: (id: string, hasControls?: boolean) => void;
+    /**
+     * Restart the animation
+     * @param {string} id
+     * @returns
+     */
+    restart: (id: string) => void;
+    /**
+     * Reset animation
+     *
+     * @param {FabricObject} obj
+     * @param {boolean} [hasControls=true]
+     * @returns
+     */
+    resetAnimation: (obj: FabricObject, hasControls?: boolean) => void;
+    /**
+     * Get animation option
+     *
+     * @param {FabricObject} obj
+     * @param {boolean} [hasControls]
+     * @returns
+     */
+    getAnime: (obj: FabricObject, hasControls?: boolean) => anime.AnimeInstance;
+}
+export default AnimationHandler;