react-design-editor 0.0.37 → 0.0.41

package/lib/handlers/NodeHandler.js

@@ -0,0 +1,274 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+class NodeHandler {
+    constructor(handler) {
+        /**
+         * Get the node path by target object
+         * @param {NodeObject} target
+         * @param {NodeObject[]} [nodes=[]]
+         * @param {string} [direction='init']
+         */
+        this.getNodePath = (target, nodes = [], direction = 'init') => {
+            if (target) {
+                if (direction === 'to' || direction === 'init') {
+                    if (target.toPort) {
+                        target.toPort.links.forEach(link => {
+                            if (link.fromNode) {
+                                nodes.push(link.fromNode);
+                                this.getNodePath(link.fromNode, nodes, 'to');
+                            }
+                        });
+                    }
+                    if (direction === 'init') {
+                        nodes.push(target);
+                    }
+                }
+                if (direction === 'from' || direction === 'init') {
+                    target.fromPort.forEach(port => {
+                        port.links.forEach(link => {
+                            if (link.toNode) {
+                                nodes.push(link.toNode);
+                                this.getNodePath(link.toNode, nodes, 'from');
+                            }
+                        });
+                    });
+                }
+            }
+        };
+        /**
+         * Select the node path
+         * @param {string[]} [path]
+         */
+        this.selectByPath = (path) => {
+            if (!path || !path.length) {
+                return;
+            }
+            const targetObjects = this.handler.objects.filter(object => path.some(id => id === object.id));
+            const nonTargetObjects = this.handler.objects.filter(object => path.some(id => id !== object.id));
+            nonTargetObjects.forEach((object) => {
+                if (object.superType === 'link') {
+                    const { fromNode, toNode } = object;
+                    if (fromNode && toNode) {
+                        const fromIndex = targetObjects.findIndex(obj => obj.id === fromNode.id);
+                        const toIndex = targetObjects.findIndex(obj => obj.id === toNode.id);
+                        if (fromIndex >= 0 && targetObjects[fromIndex] && toIndex >= 0 && targetObjects[toIndex]) {
+                            object.set({
+                                opacity: 1,
+                                shadow: {
+                                    color: object.stroke,
+                                },
+                            });
+                            this.highlightingNode(object, 300);
+                            this.handler.canvas.requestRenderAll();
+                            return;
+                        }
+                    }
+                }
+                object.set({
+                    opacity: 0.2,
+                });
+                if (object.superType === 'node') {
+                    if (object.toPort) {
+                        object.toPort.set({
+                            opacity: 0.2,
+                        });
+                    }
+                    object.fromPort.forEach((port) => {
+                        port.set({
+                            opacity: 0.2,
+                        });
+                    });
+                }
+                if (!object.animating) {
+                    object.set('shadow', {
+                        blur: 0,
+                    });
+                }
+            });
+            targetObjects.forEach((object) => {
+                object.set({
+                    opacity: 1,
+                    shadow: {
+                        color: object.stroke,
+                    },
+                });
+                this.highlightingNode(object, 300);
+                if (object.toPort) {
+                    object.toPort.set({
+                        opacity: 1,
+                    });
+                }
+                if (object.fromPort) {
+                    object.fromPort.forEach((port) => {
+                        port.set({
+                            opacity: 1,
+                        });
+                    });
+                }
+            });
+            this.handler.canvas.requestRenderAll();
+        };
+        /**
+         * Select node by id
+         * @param {string} id
+         */
+        this.selectById = (id) => {
+            this.handler.objects.forEach((object) => {
+                if (id === object.id) {
+                    object.set('shadow', {
+                        color: object.stroke,
+                        blur: 50,
+                    });
+                    return;
+                }
+                else if (id === object.nodeId) {
+                    return;
+                }
+                object.set('shadow', {
+                    blur: 0,
+                });
+            });
+            this.handler.canvas.requestRenderAll();
+        };
+        /**
+         * Deselect nodes
+         */
+        this.deselect = () => {
+            this.handler.objects.forEach((object) => {
+                object.set({
+                    opacity: 1,
+                });
+                if (object.superType === 'node') {
+                    const node = object;
+                    if (node.toPort) {
+                        node.toPort.set({
+                            opacity: 1,
+                        });
+                    }
+                    node.fromPort.forEach(port => {
+                        port.set({
+                            opacity: 1,
+                        });
+                    });
+                }
+                if (!object.animating) {
+                    const node = object;
+                    node.set('shadow', {
+                        blur: 0,
+                    });
+                }
+            });
+            this.handler.canvas.renderAll();
+        };
+        /**
+         * Highlight node path
+         * @param {string[]} [path]
+         */
+        this.highlightingByPath = (path) => {
+            if (!path || !path.length) {
+                return;
+            }
+            const targetObjects = this.handler.objects.filter((obj) => path.some(id => id === obj.id));
+            const nonTargetObjects = this.handler.objects.filter((obj) => path.some(id => id !== obj.id));
+            const lastObject = targetObjects.filter((obj) => obj.id === path[path.length - 1])[0];
+            targetObjects.forEach((object) => {
+                if (lastObject) {
+                    object.set('shadow', {
+                        color: lastObject.stroke,
+                    });
+                }
+                else {
+                    object.set('shadow', {
+                        color: object.stroke,
+                    });
+                }
+                this.highlightingNode(object);
+                this.handler.canvas.requestRenderAll();
+            });
+            nonTargetObjects.forEach((object) => {
+                if (object.superType === 'link') {
+                    const { fromNode, toNode } = object;
+                    if (fromNode && toNode) {
+                        const fromIndex = targetObjects.findIndex((obj) => obj.id === fromNode.id);
+                        const toIndex = targetObjects.findIndex((obj) => obj.id === toNode.id);
+                        if (fromIndex >= 0 && targetObjects[fromIndex] && toIndex >= 0 && targetObjects[toIndex]) {
+                            if (lastObject) {
+                                object.set('shadow', {
+                                    color: lastObject.stroke,
+                                });
+                            }
+                            else {
+                                object.set('shadow', {
+                                    color: object.stroke,
+                                });
+                            }
+                            this.highlightingNode(object);
+                            this.highlightingLink(object, lastObject);
+                            return;
+                        }
+                    }
+                }
+            });
+            this.handler.canvas.requestRenderAll();
+        };
+        /**
+         * Highlight link
+         * @param {FabricObject} object
+         * @param {FabricObject} targetObject
+         * @param {number} [duration=500]
+         */
+        this.highlightingLink = (object, targetObject, duration = 500) => {
+            object.animation = {
+                duration,
+                type: 'flash',
+                stroke: targetObject ? targetObject.stroke : object.stroke,
+                loop: 1,
+                delay: 0,
+            };
+            this.handler.animationHandler.play(object.id, false);
+        };
+        /**
+         * Highlight node
+         *
+         * @param {*} object
+         * @param {number} [duration=500]
+         * @param {number} [minBlur=0]
+         * @param {number} [maxBlur=50]
+         */
+        this.highlightingNode = (object, duration = 500, minBlur = 0, maxBlur = 50) => {
+            const onComplete = () => {
+                if (object.shadow.blur === maxBlur) {
+                    object.animating = true;
+                    object.animate('shadow.blur', minBlur, {
+                        easing: fabric_1.fabric.util.ease.easeInOutQuad,
+                        onChange: (value) => {
+                            object.shadow.blur = value;
+                            this.handler.canvas.requestRenderAll();
+                        },
+                        onComplete: () => {
+                            object.animating = false;
+                            if (object.superType === 'link') {
+                                object.set({
+                                    stroke: object.originStroke,
+                                });
+                            }
+                        },
+                    });
+                }
+            };
+            object.animating = true;
+            object.animate('shadow.blur', maxBlur, {
+                easing: fabric_1.fabric.util.ease.easeInOutQuad,
+                duration,
+                onChange: (value) => {
+                    object.shadow.blur = value;
+                    this.handler.canvas.requestRenderAll();
+                },
+                onComplete,
+            });
+        };
+        this.handler = handler;
+    }
+}
+exports.default = NodeHandler;

package/lib/handlers/PortHandler.d.ts

@@ -0,0 +1,22 @@
+import Handler from './Handler';
+import { NodeObject } from '../objects/Node';
+declare class PortHandler {
+    handler?: Handler;
+    constructor(handler: Handler);
+    /**
+     * Create port
+     * @param {NodeObject} target
+     */
+    create: (target: NodeObject) => void;
+    /**
+     * Set coords port
+     * @param {NodeObject} target
+     */
+    setCoords: (target: NodeObject) => void;
+    /**
+     * Recreate port
+     * @param {NodeObject} target
+     */
+    recreate: (target: NodeObject) => void;
+}
+export default PortHandler;

package/lib/handlers/PortHandler.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+class PortHandler {
+    constructor(handler) {
+        /**
+         * Create port
+         * @param {NodeObject} target
+         */
+        this.create = (target) => {
+            if (!target.createToPort) {
+                return;
+            }
+            const toPort = target.createToPort(target.left + target.width / 2, target.top);
+            if (toPort) {
+                toPort.on('mouseover', () => {
+                    if (this.handler.interactionMode === 'link' &&
+                        this.handler.activeLine &&
+                        this.handler.activeLine.class === 'line') {
+                        if (toPort.links.some(link => link.fromNode === this.handler.activeLine.fromNode)) {
+                            toPort.set({
+                                fill: 'red',
+                            });
+                            this.handler.canvas.renderAll();
+                            return;
+                        }
+                        toPort.set({
+                            fill: 'green',
+                        });
+                        this.handler.canvas.renderAll();
+                    }
+                });
+                toPort.on('mouseout', () => {
+                    toPort.set({
+                        fill: toPort.originFill,
+                    });
+                    this.handler.canvas.renderAll();
+                });
+                this.handler.canvas.add(toPort);
+                toPort.setCoords();
+                this.handler.canvas.bringToFront(toPort);
+            }
+            const fromPort = target.createFromPort(target.left + target.width / 2, target.top + target.height);
+            if (fromPort && fromPort.length) {
+                fromPort.forEach(port => {
+                    if (port) {
+                        port.on('mouseover', () => {
+                            if (this.handler.interactionMode !== 'link') {
+                                if (port.enabled) {
+                                    if (this.handler.activeLine) {
+                                        port.set({
+                                            fill: 'red',
+                                        });
+                                        this.handler.canvas.renderAll();
+                                        return;
+                                    }
+                                    port.set({
+                                        fill: 'green',
+                                    });
+                                    this.handler.canvas.renderAll();
+                                    return;
+                                }
+                                port.set({
+                                    fill: 'red',
+                                });
+                                this.handler.canvas.renderAll();
+                            }
+                        });
+                        port.on('mouseout', () => {
+                            if (this.handler.interactionMode !== 'link') {
+                                port.set({
+                                    fill: port.enabled ? port.originFill : port.hoverFill,
+                                });
+                            }
+                            this.handler.canvas.renderAll();
+                        });
+                        this.handler.canvas.add(port);
+                        port.setCoords();
+                        this.handler.canvas.bringToFront(port);
+                    }
+                });
+            }
+        };
+        /**
+         * Set coords port
+         * @param {NodeObject} target
+         */
+        this.setCoords = (target) => {
+            if (target.toPort) {
+                const toCoords = {
+                    left: target.left + target.width / 2,
+                    top: target.top,
+                };
+                target.toPort.set({
+                    ...toCoords,
+                });
+                target.toPort.setCoords();
+                if (target.toPort.links.length) {
+                    target.toPort.links.forEach(link => {
+                        const fromPort = link.fromNode.fromPort.filter(port => port.id === link.fromPort.id)[0];
+                        this.handler.linkHandler.setCoords(fromPort.left, fromPort.top, toCoords.left, toCoords.top, link);
+                    });
+                }
+            }
+            if (target.fromPort) {
+                const fromCoords = {
+                    left: target.left + target.width / 2,
+                    top: target.top + target.height,
+                };
+                target.fromPort.forEach(port => {
+                    const left = port.leftDiff ? fromCoords.left + port.leftDiff : fromCoords.left;
+                    const top = port.topDiff ? fromCoords.top + port.topDiff : fromCoords.top;
+                    port.set({
+                        left,
+                        top,
+                    });
+                    port.setCoords();
+                    if (port.links.length) {
+                        port.links.forEach(link => {
+                            this.handler.linkHandler.setCoords(left, top, link.toNode.toPort.left, link.toNode.toPort.top, link);
+                        });
+                    }
+                });
+            }
+        };
+        /**
+         * Recreate port
+         * @param {NodeObject} target
+         */
+        this.recreate = (target) => {
+            const { fromPort, toPort } = target;
+            const ports = target.ports;
+            if (ports) {
+                ports.forEach(port => {
+                    target.removeWithUpdate(port);
+                    this.handler.canvas.remove(port.fromPort);
+                });
+            }
+            this.handler.canvas.remove(target.toPort);
+            if (target.toPort) {
+                target.toPort.links.forEach(link => {
+                    this.handler.linkHandler.remove(link, 'from');
+                });
+            }
+            if (target.fromPort) {
+                target.fromPort.forEach((port) => {
+                    if (port.links.length) {
+                        port.links.forEach((link) => {
+                            this.handler.linkHandler.remove(link, 'to');
+                        });
+                    }
+                });
+            }
+            this.create(target);
+            toPort.links.forEach((link) => {
+                link.fromNode = link.fromNode.id;
+                link.fromPort = link.fromPort.id;
+                link.toNode = target.toPort.nodeId;
+                link.toPort = target.toPort.id;
+                this.handler.linkHandler.create(link);
+            });
+            fromPort
+                .filter(op => target.fromPort.some(np => np.id === op.id))
+                .forEach(port => {
+                port.links.forEach((link) => {
+                    if (link.fromPort.id === port.id) {
+                        link.fromNode = port.nodeId;
+                        link.fromPort = port.id;
+                        link.toNode = link.toNode.id;
+                        link.toPort = link.toPort.id;
+                        this.handler.linkHandler.create(link);
+                        this.setCoords(target);
+                    }
+                });
+            });
+        };
+        this.handler = handler;
+    }
+}
+exports.default = PortHandler;

package/lib/handlers/ShortcutHandler.d.ts

@@ -0,0 +1,119 @@
+import Handler from './Handler';
+import { KeyEvent } from '../utils';
+/**
+ * Shortcut Handler Class
+ *
+ * @author salgum1114
+ * @class ShortcutHandler
+ */
+declare class ShortcutHandler {
+    handler: Handler;
+    keyEvent: KeyEvent;
+    constructor(handler: Handler);
+    /**
+     * Whether keydown Escape
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isEscape: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Q
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isQ: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown W
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isW: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Delete or Backpsace
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isDelete: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Arrow
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isArrow: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Ctrl + A
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isCtrlA: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Ctrl + C
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isCtrlC: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Ctrl + V
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isCtrlV: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Ctrl + Z
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isCtrlZ: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Ctrl + Y
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isCtrlY: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Plus Or Equal
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isPlus: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Minus
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isMinus: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown O
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isO: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown P
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isP: (e: KeyboardEvent) => boolean;
+    /**
+     * Whether keydown Ctrl + X
+     *
+     * @param {KeyboardEvent} e
+     * @returns
+     */
+    isCtrlX: (e: KeyboardEvent) => boolean;
+}
+export default ShortcutHandler;