react-design-editor 0.0.50 → 0.0.52

package/lib/handlers/InteractionHandler.d.ts

@@ -1,45 +1,45 @@
-import { FabricObject, InteractionMode } from '../utils';
-import Handler from './Handler';
-declare type IReturnType = {
-    selectable?: boolean;
-    evented?: boolean;
-} | boolean;
-declare class InteractionHandler {
-    handler: Handler;
-    constructor(handler: Handler);
-    /**
-     * Change selection mode
-     * @param {(obj: FabricObject) => IReturnType} [callback]
-     */
-    selection: (callback?: (obj: FabricObject) => IReturnType) => void;
-    /**
-     * Change grab mode
-     * @param {(obj: FabricObject) => IReturnType} [callback]
-     */
-    grab: (callback?: (obj: FabricObject) => IReturnType) => void;
-    /**
-     * Change drawing mode
-     * @param {InteractionMode} [type]
-     * @param {(obj: FabricObject) => IReturnType} [callback]
-     */
-    drawing: (type?: InteractionMode, callback?: (obj: FabricObject) => IReturnType) => void;
-    linking: (callback?: (obj: FabricObject) => IReturnType) => void;
-    /**
-     * Moving objects in grap mode
-     * @param {MouseEvent} e
-     */
-    moving: (e: MouseEvent) => void;
-    /**
-     * Whether is drawing mode
-     * @returns
-     */
-    isDrawingMode: () => boolean;
-    /**
-     * Interaction callback
-     *
-     * @param {FabricObject} obj
-     * @param {(obj: FabricObject) => void} [callback]
-     */
-    private interactionCallback;
-}
-export default InteractionHandler;
+import { FabricObject, InteractionMode } from '../utils';
+import Handler from './Handler';
+declare type IReturnType = {
+    selectable?: boolean;
+    evented?: boolean;
+} | boolean;
+declare class InteractionHandler {
+    handler: Handler;
+    constructor(handler: Handler);
+    /**
+     * Change selection mode
+     * @param {(obj: FabricObject) => IReturnType} [callback]
+     */
+    selection: (callback?: (obj: FabricObject) => IReturnType) => void;
+    /**
+     * Change grab mode
+     * @param {(obj: FabricObject) => IReturnType} [callback]
+     */
+    grab: (callback?: (obj: FabricObject) => IReturnType) => void;
+    /**
+     * Change drawing mode
+     * @param {InteractionMode} [type]
+     * @param {(obj: FabricObject) => IReturnType} [callback]
+     */
+    drawing: (type?: InteractionMode, callback?: (obj: FabricObject) => IReturnType) => void;
+    linking: (callback?: (obj: FabricObject) => IReturnType) => void;
+    /**
+     * Moving objects in grap mode
+     * @param {MouseEvent} e
+     */
+    moving: (e: MouseEvent) => void;
+    /**
+     * Whether is drawing mode
+     * @returns
+     */
+    isDrawingMode: () => boolean;
+    /**
+     * Interaction callback
+     *
+     * @param {FabricObject} obj
+     * @param {(obj: FabricObject) => void} [callback]
+     */
+    private interactionCallback;
+}
+export default InteractionHandler;

package/lib/handlers/InteractionHandler.js

@@ -1,164 +1,168 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const fabric_1 = require("fabric");
-class InteractionHandler {
-    constructor(handler) {
-        /**
-         * Change selection mode
-         * @param {(obj: FabricObject) => IReturnType} [callback]
-         */
-        this.selection = (callback) => {
-            if (this.handler.interactionMode === 'selection') {
-                return;
-            }
-            this.handler.interactionMode = 'selection';
-            if (typeof this.handler.canvasOption.selection === 'undefined') {
-                this.handler.canvas.selection = true;
-            }
-            else {
-                this.handler.canvas.selection = this.handler.canvasOption.selection;
-            }
-            this.handler.canvas.defaultCursor = 'default';
-            this.handler.workarea.hoverCursor = 'default';
-            this.handler.getObjects().forEach(obj => {
-                if (callback) {
-                    this.interactionCallback(obj, callback);
-                }
-                else {
-                    // When typeof selection is ActiveSelection, ignoring selectable, because link position left: 0, top: 0
-                    if (obj.superType === 'link' || obj.superType === 'port') {
-                        obj.selectable = false;
-                        obj.evented = true;
-                        obj.hoverCursor = 'pointer';
-                        return;
-                    }
-                    if (this.handler.editable) {
-                        obj.hoverCursor = 'move';
-                    }
-                    else {
-                        obj.hoverCursor = 'pointer';
-                    }
-                    obj.selectable = true;
-                    obj.evented = true;
-                }
-            });
-            this.handler.canvas.renderAll();
-        };
-        /**
-         * Change grab mode
-         * @param {(obj: FabricObject) => IReturnType} [callback]
-         */
-        this.grab = (callback) => {
-            if (this.handler.interactionMode === 'grab') {
-                return;
-            }
-            this.handler.interactionMode = 'grab';
-            this.handler.canvas.selection = false;
-            this.handler.canvas.defaultCursor = 'grab';
-            this.handler.workarea.hoverCursor = 'grab';
-            this.handler.getObjects().forEach(obj => {
-                if (callback) {
-                    this.interactionCallback(obj, callback);
-                }
-                else {
-                    obj.selectable = false;
-                    obj.evented = this.handler.editable ? false : true;
-                }
-            });
-            this.handler.canvas.renderAll();
-        };
-        /**
-         * Change drawing mode
-         * @param {InteractionMode} [type]
-         * @param {(obj: FabricObject) => IReturnType} [callback]
-         */
-        this.drawing = (type, callback) => {
-            if (this.isDrawingMode()) {
-                return;
-            }
-            this.handler.interactionMode = type;
-            this.handler.canvas.selection = false;
-            this.handler.canvas.defaultCursor = 'pointer';
-            this.handler.workarea.hoverCursor = 'pointer';
-            this.handler.getObjects().forEach(obj => {
-                if (callback) {
-                    this.interactionCallback(obj, callback);
-                }
-                else {
-                    obj.selectable = false;
-                    obj.evented = this.handler.editable ? false : true;
-                }
-            });
-            this.handler.canvas.renderAll();
-        };
-        this.linking = (callback) => {
-            if (this.isDrawingMode()) {
-                return;
-            }
-            this.handler.interactionMode = 'link';
-            this.handler.canvas.selection = false;
-            this.handler.canvas.defaultCursor = 'default';
-            this.handler.workarea.hoverCursor = 'default';
-            this.handler.getObjects().forEach(obj => {
-                if (callback) {
-                    this.interactionCallback(obj, callback);
-                }
-                else {
-                    if (obj.superType === 'node' || obj.superType === 'port') {
-                        obj.hoverCursor = 'pointer';
-                        obj.selectable = false;
-                        obj.evented = true;
-                        return;
-                    }
-                    obj.selectable = false;
-                    obj.evented = this.handler.editable ? false : true;
-                }
-            });
-            this.handler.canvas.renderAll();
-        };
-        /**
-         * Moving objects in grap mode
-         * @param {MouseEvent} e
-         */
-        this.moving = (e) => {
-            if (this.isDrawingMode()) {
-                return;
-            }
-            const delta = new fabric_1.fabric.Point(e.movementX, e.movementY);
-            this.handler.canvas.relativePan(delta);
-            this.handler.canvas.requestRenderAll();
-            this.handler.objects.forEach(obj => {
-                if (obj.superType === 'element') {
-                    const { id } = obj;
-                    const el = this.handler.elementHandler.findById(id);
-                    // update the element
-                    this.handler.elementHandler.setPosition(el, obj);
-                }
-            });
-        };
-        /**
-         * Whether is drawing mode
-         * @returns
-         */
-        this.isDrawingMode = () => {
-            return (this.handler.interactionMode === 'link' ||
-                this.handler.interactionMode === 'arrow' ||
-                this.handler.interactionMode === 'line' ||
-                this.handler.interactionMode === 'polygon');
-        };
-        /**
-         * Interaction callback
-         *
-         * @param {FabricObject} obj
-         * @param {(obj: FabricObject) => void} [callback]
-         */
-        this.interactionCallback = (obj, callback) => {
-            callback(obj);
-        };
-        this.handler = handler;
-        if (this.handler.editable) {
-            this.selection();
-        }
-    }
-}
-exports.default = InteractionHandler;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+class InteractionHandler {
+    constructor(handler) {
+        /**
+         * Change selection mode
+         * @param {(obj: FabricObject) => IReturnType} [callback]
+         */
+        this.selection = (callback) => {
+            if (this.handler.interactionMode === 'selection') {
+                return;
+            }
+            this.handler.interactionMode = 'selection';
+            if (typeof this.handler.canvasOption.selection === 'undefined') {
+                this.handler.canvas.selection = true;
+            }
+            else {
+                this.handler.canvas.selection = this.handler.canvasOption.selection;
+            }
+            this.handler.canvas.defaultCursor = 'default';
+            this.handler.workarea.hoverCursor = 'default';
+            this.handler.getObjects().forEach(obj => {
+                if (callback) {
+                    this.interactionCallback(obj, callback);
+                }
+                else {
+                    // When typeof selection is ActiveSelection, ignoring selectable, because link position left: 0, top: 0
+                    if (obj.superType === 'link' || obj.superType === 'port') {
+                        obj.selectable = false;
+                        obj.evented = true;
+                        obj.hoverCursor = 'pointer';
+                        return;
+                    }
+                    if (this.handler.editable) {
+                        obj.hoverCursor = 'move';
+                    }
+                    else {
+                        obj.hoverCursor = 'pointer';
+                    }
+                    obj.selectable = true;
+                    obj.evented = true;
+                }
+            });
+            this.handler.canvas.renderAll();
+            this.handler.onInteraction?.('selection');
+        };
+        /**
+         * Change grab mode
+         * @param {(obj: FabricObject) => IReturnType} [callback]
+         */
+        this.grab = (callback) => {
+            if (this.handler.interactionMode === 'grab') {
+                return;
+            }
+            this.handler.interactionMode = 'grab';
+            this.handler.canvas.selection = false;
+            this.handler.canvas.defaultCursor = 'grab';
+            this.handler.workarea.hoverCursor = 'grab';
+            this.handler.getObjects().forEach(obj => {
+                if (callback) {
+                    this.interactionCallback(obj, callback);
+                }
+                else {
+                    obj.selectable = false;
+                    obj.evented = this.handler.editable ? false : true;
+                }
+            });
+            this.handler.canvas.renderAll();
+            this.handler.onInteraction?.('grab');
+        };
+        /**
+         * Change drawing mode
+         * @param {InteractionMode} [type]
+         * @param {(obj: FabricObject) => IReturnType} [callback]
+         */
+        this.drawing = (type, callback) => {
+            if (this.isDrawingMode()) {
+                return;
+            }
+            this.handler.interactionMode = type;
+            this.handler.canvas.selection = false;
+            this.handler.canvas.defaultCursor = 'pointer';
+            this.handler.workarea.hoverCursor = 'pointer';
+            this.handler.getObjects().forEach(obj => {
+                if (callback) {
+                    this.interactionCallback(obj, callback);
+                }
+                else {
+                    obj.selectable = false;
+                    obj.evented = this.handler.editable ? false : true;
+                }
+            });
+            this.handler.canvas.renderAll();
+            this.handler.onInteraction?.(type);
+        };
+        this.linking = (callback) => {
+            if (this.isDrawingMode()) {
+                return;
+            }
+            this.handler.interactionMode = 'link';
+            this.handler.canvas.selection = false;
+            this.handler.canvas.defaultCursor = 'default';
+            this.handler.workarea.hoverCursor = 'default';
+            this.handler.getObjects().forEach(obj => {
+                if (callback) {
+                    this.interactionCallback(obj, callback);
+                }
+                else {
+                    if (obj.superType === 'node' || obj.superType === 'port') {
+                        obj.hoverCursor = 'pointer';
+                        obj.selectable = false;
+                        obj.evented = true;
+                        return;
+                    }
+                    obj.selectable = false;
+                    obj.evented = this.handler.editable ? false : true;
+                }
+            });
+            this.handler.canvas.renderAll();
+            this.handler.onInteraction?.('link');
+        };
+        /**
+         * Moving objects in grap mode
+         * @param {MouseEvent} e
+         */
+        this.moving = (e) => {
+            if (this.isDrawingMode()) {
+                return;
+            }
+            const delta = new fabric_1.fabric.Point(e.movementX, e.movementY);
+            this.handler.canvas.relativePan(delta);
+            this.handler.canvas.requestRenderAll();
+            this.handler.objects.forEach(obj => {
+                if (obj.superType === 'element') {
+                    const { id } = obj;
+                    const el = this.handler.elementHandler.findById(id);
+                    // update the element
+                    this.handler.elementHandler.setPosition(el, obj);
+                }
+            });
+        };
+        /**
+         * Whether is drawing mode
+         * @returns
+         */
+        this.isDrawingMode = () => {
+            return (this.handler.interactionMode === 'link' ||
+                this.handler.interactionMode === 'arrow' ||
+                this.handler.interactionMode === 'line' ||
+                this.handler.interactionMode === 'polygon');
+        };
+        /**
+         * Interaction callback
+         *
+         * @param {FabricObject} obj
+         * @param {(obj: FabricObject) => void} [callback]
+         */
+        this.interactionCallback = (obj, callback) => {
+            callback(obj);
+        };
+        this.handler = handler;
+        if (this.handler.editable) {
+            this.selection();
+        }
+    }
+}
+exports.default = InteractionHandler;

package/lib/handlers/LinkHandler.d.ts

@@ -1,115 +1,115 @@
-import { LinkObject } from '../objects/Link';
-import { PortObject } from '../objects/Port';
-import Handler from './Handler';
-export interface LinkOption {
-    /**
-     * Link Type
-     * @type {string}
-     */
-    type: string;
-    /**
-     * FromNode id of Link
-     * @type {string}
-     */
-    fromNodeId?: string;
-    /**
-     * FromPort id of Link
-     * @type {string}
-     */
-    fromPortId?: string;
-    /**
-     * ToNode id of Link
-     * @type {string}
-     */
-    toNodeId?: string;
-    /**
-     * ToPort id of Link
-     * @type {string}
-     */
-    toPortId?: string;
-}
-/**
- * Link Handler Class
- * @author salgum1114
- * @class LinkHandler
- */
-declare class LinkHandler {
-    private port;
-    handler: Handler;
-    constructor(handler: Handler);
-    /**
-     * On source port click, start link
-     * @param {PortObject} port
-     */
-    init: (port: PortObject) => void;
-    /**
-     * End drawing link.
-     */
-    finish: (link?: LinkObject) => void;
-    /**
-     * On dest port click, finish link
-     * @param {PortObject} port
-     */
-    generate: (port: PortObject) => void;
-    /**
-     * Add link in Canvas
-     * @param {LinkOption} link
-     * @param {boolean} [loaded=false]
-     * @returns
-     */
-    create: (link: LinkOption, loaded?: boolean) => LinkObject;
-    /**
-     * Set coordinate of link
-     * @param {number} x1
-     * @param {number} y1
-     * @param {number} x2
-     * @param {number} y2
-     * @param {LinkObject} link
-     */
-    setCoords: (x1: number, y1: number, x2: number, y2: number, link: LinkObject) => void;
-    /**
-     * When the link is deleted, linked FromNode delete
-     * @param {LinkObject} link
-     */
-    removeFrom: (link: LinkObject) => void;
-    /**
-     * When the link is deleted, linked ToNode delete
-     * @param {LinkObject} link
-     */
-    removeTo: (link: LinkObject) => void;
-    /**
-     * When the link is deleted, linked node delete
-     * @param {LinkObject} link
-     */
-    removeAll: (link: LinkObject) => void;
-    /**
-     * Remove link in canvas
-     * @param {LinkObject} link
-     * @param {string} [type]
-     */
-    remove: (link: LinkObject, type?: string) => void;
-    /**
-     * Check if there is a port connected
-     * @param {PortObject} port
-     * @returns
-     */
-    isConnected: (port: PortObject) => boolean;
-    /**
-     * Check if select same node
-     * @param {PortObject} port
-     * @returns
-     */
-    isSameNode: (port: PortObject) => boolean;
-    /**
-     * Check if select same node
-     * @param {PortObject} port
-     * @returns
-     */
-    isDuplicate: (port: PortObject) => boolean;
-    /**
-     * Check if draw the link
-     * @returns
-     */
-    isDrawing: () => any;
-}
-export default LinkHandler;
+import { LinkObject } from '../objects/Link';
+import { PortObject } from '../objects/Port';
+import Handler from './Handler';
+export interface LinkOption {
+    /**
+     * Link Type
+     * @type {string}
+     */
+    type: string;
+    /**
+     * FromNode id of Link
+     * @type {string}
+     */
+    fromNodeId?: string;
+    /**
+     * FromPort id of Link
+     * @type {string}
+     */
+    fromPortId?: string;
+    /**
+     * ToNode id of Link
+     * @type {string}
+     */
+    toNodeId?: string;
+    /**
+     * ToPort id of Link
+     * @type {string}
+     */
+    toPortId?: string;
+}
+/**
+ * Link Handler Class
+ * @author salgum1114
+ * @class LinkHandler
+ */
+declare class LinkHandler {
+    private port;
+    handler: Handler;
+    constructor(handler: Handler);
+    /**
+     * On source port click, start link
+     * @param {PortObject} port
+     */
+    init: (port: PortObject) => void;
+    /**
+     * End drawing link.
+     */
+    finish: (link?: LinkObject) => void;
+    /**
+     * On dest port click, finish link
+     * @param {PortObject} port
+     */
+    generate: (port: PortObject) => void;
+    /**
+     * Add link in Canvas
+     * @param {LinkOption} link
+     * @param {boolean} [loaded=false]
+     * @returns
+     */
+    create: (link: LinkOption, loaded?: boolean) => LinkObject;
+    /**
+     * Set coordinate of link
+     * @param {number} x1
+     * @param {number} y1
+     * @param {number} x2
+     * @param {number} y2
+     * @param {LinkObject} link
+     */
+    setCoords: (x1: number, y1: number, x2: number, y2: number, link: LinkObject) => void;
+    /**
+     * When the link is deleted, linked FromNode delete
+     * @param {LinkObject} link
+     */
+    removeFrom: (link: LinkObject) => void;
+    /**
+     * When the link is deleted, linked ToNode delete
+     * @param {LinkObject} link
+     */
+    removeTo: (link: LinkObject) => void;
+    /**
+     * When the link is deleted, linked node delete
+     * @param {LinkObject} link
+     */
+    removeAll: (link: LinkObject) => void;
+    /**
+     * Remove link in canvas
+     * @param {LinkObject} link
+     * @param {string} [type]
+     */
+    remove: (link: LinkObject, type?: string) => void;
+    /**
+     * Check if there is a port connected
+     * @param {PortObject} port
+     * @returns
+     */
+    isConnected: (port: PortObject) => boolean;
+    /**
+     * Check if select same node
+     * @param {PortObject} port
+     * @returns
+     */
+    isSameNode: (port: PortObject) => boolean;
+    /**
+     * Check if select same node
+     * @param {PortObject} port
+     * @returns
+     */
+    isDuplicate: (port: PortObject) => boolean;
+    /**
+     * Check if draw the link
+     * @returns
+     */
+    isDrawing: () => any;
+}
+export default LinkHandler;