react-design-editor 0.0.32 → 0.0.36

package/lib/handlers/PortHandler.js

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