react-design-editor 0.0.37 → 0.0.41

package/lib/handlers/InteractionHandler.js

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

package/lib/handlers/LinkHandler.d.ts

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

package/lib/handlers/LinkHandler.js

@@ -0,0 +1,247 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const warning_1 = __importDefault(require("warning"));
+const objects_1 = require("../objects");
+/**
+ * Link Handler Class
+ * @author salgum1114
+ * @class LinkHandler
+ */
+class LinkHandler {
+    constructor(handler) {
+        this.port = null;
+        /**
+         * On source port click, start link
+         * @param {PortObject} port
+         */
+        this.init = (port) => {
+            if (this.isDrawing()) {
+                return;
+            }
+            if (this.isConnected(port)) {
+                return;
+            }
+            this.port = port;
+            this.port.set({
+                fill: port.selectFill,
+            });
+            this.handler.interactionHandler.linking();
+            const { left, top, nodeId, id } = port;
+            const fromPort = { left, top, id };
+            const toPort = { left, top };
+            const fromNode = this.handler.objectMap[nodeId];
+            this.handler.activeLine = new objects_1.CurvedLink(fromNode, fromPort, null, toPort, {
+                strokeWidth: 4,
+                fill: '#999999',
+                stroke: '#999999',
+                class: 'line',
+                originX: 'center',
+                originY: 'center',
+                selectable: false,
+                hasBorders: false,
+                hasControls: false,
+                evented: false,
+            });
+            this.handler.canvas.add(this.handler.activeLine);
+        };
+        /**
+         * End drawing link.
+         */
+        this.finish = (link) => {
+            if (!link) {
+                this.port.set({
+                    fill: this.port.originFill,
+                });
+            }
+            this.handler.interactionHandler.selection();
+            this.handler.canvas.remove(this.handler.activeLine);
+            this.handler.activeLine = null;
+            this.handler.canvas.renderAll();
+        };
+        /**
+         * On dest port click, finish link
+         * @param {PortObject} port
+         */
+        this.generate = (port) => {
+            if (!port) {
+                warning_1.default(!port, 'Does not exist target port.');
+                return;
+            }
+            if (this.isDuplicate(port)) {
+                return;
+            }
+            if (this.isSameNode(port)) {
+                return;
+            }
+            const link = {
+                type: 'curvedLink',
+                fromNodeId: this.handler.activeLine.fromNode.id,
+                fromPortId: this.handler.activeLine.fromPort.id,
+                toNodeId: port.nodeId,
+                toPortId: port.id,
+            };
+            const createdLink = this.create(link);
+            this.finish(createdLink);
+            // TODO...
+            // Save transactions unconditionally
+            if (!this.handler.transactionHandler.active) {
+                this.handler.transactionHandler.save('add');
+            }
+        };
+        /**
+         * Add link in Canvas
+         * @param {LinkOption} link
+         * @param {boolean} [loaded=false]
+         * @returns
+         */
+        this.create = (link, loaded = false) => {
+            const fromNode = this.handler.objectMap[link.fromNodeId];
+            const fromPort = fromNode.fromPort.filter(port => port.id === link.fromPortId || !port.id)[0];
+            const toNode = this.handler.objectMap[link.toNodeId];
+            const { toPort } = toNode;
+            const createdObj = this.handler.fabricObjects[link.type].create(fromNode, fromPort, toNode, toPort, {
+                ...link,
+            });
+            this.handler.canvas.add(createdObj);
+            this.handler.objects = this.handler.getObjects();
+            const { editable } = this.handler;
+            if (this.handler.onAdd && editable && !loaded) {
+                this.handler.onAdd(createdObj);
+            }
+            this.handler.canvas.renderAll();
+            createdObj.setPort(fromNode, fromPort, toNode, toPort);
+            this.handler.portHandler.setCoords(fromNode);
+            this.handler.portHandler.setCoords(toNode);
+            this.handler.canvas.requestRenderAll();
+            return createdObj;
+        };
+        /**
+         * Set coordinate of link
+         * @param {number} x1
+         * @param {number} y1
+         * @param {number} x2
+         * @param {number} y2
+         * @param {LinkObject} link
+         */
+        this.setCoords = (x1, y1, x2, y2, link) => {
+            link.set({
+                x1,
+                y1,
+                x2,
+                y2,
+            });
+            link.setCoords();
+        };
+        /**
+         * When the link is deleted, linked FromNode delete
+         * @param {LinkObject} link
+         */
+        this.removeFrom = (link) => {
+            if (link.fromPort) {
+                let index = -1;
+                if (link.fromPort.links.length) {
+                    link.fromPort.links.some((portLink, i) => {
+                        if (link.id === portLink.id) {
+                            index = i;
+                            return true;
+                        }
+                        return false;
+                    });
+                    if (index > -1) {
+                        link.fromPort.links.splice(index, 1);
+                    }
+                }
+                link.setPortEnabled(link.fromNode, link.fromPort, true);
+            }
+        };
+        /**
+         * When the link is deleted, linked ToNode delete
+         * @param {LinkObject} link
+         */
+        this.removeTo = (link) => {
+            if (link.toNode.toPort.links.length) {
+                let index = -1;
+                link.toNode.toPort.links.some((portLink, i) => {
+                    if (link.id === portLink.id) {
+                        index = i;
+                        return true;
+                    }
+                    return false;
+                });
+                if (index > -1) {
+                    link.toNode.toPort.links.splice(index, 1);
+                }
+                link.setPortEnabled(link.toNode, link.toNode.toPort, true);
+            }
+        };
+        /**
+         * When the link is deleted, linked node delete
+         * @param {LinkObject} link
+         */
+        this.removeAll = (link) => {
+            this.removeFrom(link);
+            this.removeTo(link);
+        };
+        /**
+         * Remove link in canvas
+         * @param {LinkObject} link
+         * @param {string} [type]
+         */
+        this.remove = (link, type) => {
+            if (type === 'from') {
+                this.removeFrom(link);
+            }
+            else if (type === 'to') {
+                this.removeTo(link);
+            }
+            else {
+                this.removeAll(link);
+            }
+            this.handler.canvas.remove(link);
+            this.handler.objects = this.handler.getObjects();
+        };
+        /**
+         * Check if there is a port connected
+         * @param {PortObject} port
+         * @returns
+         */
+        this.isConnected = (port) => {
+            warning_1.default(port.enabled, 'A connected node already exists.');
+            return !port.enabled;
+        };
+        /**
+         * Check if select same node
+         * @param {PortObject} port
+         * @returns
+         */
+        this.isSameNode = (port) => {
+            const validate = port.nodeId === this.handler.activeLine.fromNode.id;
+            warning_1.default(!validate, 'Cannot select the same node.');
+            return validate;
+        };
+        /**
+         * Check if select same node
+         * @param {PortObject} port
+         * @returns
+         */
+        this.isDuplicate = (port) => {
+            const validate = port.links.some(link => link.fromNode.id === this.handler.activeLine.fromNode.id);
+            warning_1.default(!validate, 'Duplicate connections cannot be made.');
+            return validate;
+        };
+        /**
+         * Check if draw the link
+         * @returns
+         */
+        this.isDrawing = () => {
+            const validate = this.handler.interactionMode === 'link' && this.handler.activeLine;
+            warning_1.default(!validate, 'Already drawing links.');
+            return validate;
+        };
+        this.handler = handler;
+    }
+}
+exports.default = LinkHandler;

package/lib/handlers/NodeHandler.d.ts

@@ -0,0 +1,50 @@
+import Handler from './Handler';
+import { FabricObject } from '../utils';
+import { NodeObject } from '../objects/Node';
+declare class NodeHandler {
+    handler: Handler;
+    constructor(handler: Handler);
+    /**
+     * Get the node path by target object
+     * @param {NodeObject} target
+     * @param {NodeObject[]} [nodes=[]]
+     * @param {string} [direction='init']
+     */
+    getNodePath: (target: NodeObject, nodes?: NodeObject[], direction?: string) => void;
+    /**
+     * Select the node path
+     * @param {string[]} [path]
+     */
+    selectByPath: (path?: string[]) => void;
+    /**
+     * Select node by id
+     * @param {string} id
+     */
+    selectById: (id: string) => void;
+    /**
+     * Deselect nodes
+     */
+    deselect: () => void;
+    /**
+     * Highlight node path
+     * @param {string[]} [path]
+     */
+    highlightingByPath: (path?: string[]) => void;
+    /**
+     * Highlight link
+     * @param {FabricObject} object
+     * @param {FabricObject} targetObject
+     * @param {number} [duration=500]
+     */
+    highlightingLink: (object: FabricObject, targetObject: FabricObject, duration?: number) => void;
+    /**
+     * Highlight node
+     *
+     * @param {*} object
+     * @param {number} [duration=500]
+     * @param {number} [minBlur=0]
+     * @param {number} [maxBlur=50]
+     */
+    highlightingNode: (object: any, duration?: number, minBlur?: number, maxBlur?: number) => void;
+}
+export default NodeHandler;