react-design-editor 0.0.36 → 0.0.37

package/lib/handlers/NodeHandler.js

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

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

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

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