react-design-editor 0.0.61 → 0.0.62

package/lib/handlers/LinkHandler.d.ts

@@ -1,4 +1,4 @@
-import { LinkObject } from '../objects/Link';
+import { LinkObject } from '../objects';
 import { PortObject } from '../objects/Port';
 import Handler from './Handler';
 export interface LinkOption {
@@ -53,20 +53,11 @@ declare class LinkHandler {
     generate: (port: PortObject) => void;
     /**
      * Add link in Canvas
-     * @param {LinkOption} link
+     * @param {LinkOption} option
      * @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;
+    create: (option: LinkOption, loaded?: boolean) => LinkObject;
     /**
      * When the link is deleted, linked FromNode delete
      * @param {LinkObject} link

package/lib/handlers/LinkHandler.js

@@ -25,15 +25,13 @@ class LinkHandler {
                 return;
             }
             this.port = port;
-            this.port.set({
-                fill: port.selectFill,
-            });
+            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, {
+            this.handler.activeLine = new objects_1.Link(fromNode, fromPort, toPort, toPort, {
                 strokeWidth: 4,
                 fill: '#999999',
                 stroke: '#999999',
@@ -52,9 +50,7 @@ class LinkHandler {
          */
         this.finish = (link) => {
             if (!link) {
-                this.port.set({
-                    fill: this.port.originFill,
-                });
+                this.port.set({ fill: this.port.originFill });
             }
             this.handler.interactionHandler.selection();
             this.handler.canvas.remove(this.handler.activeLine);
@@ -76,15 +72,14 @@ class LinkHandler {
             if (this.isSameNode(port)) {
                 return;
             }
-            const link = {
-                type: 'curvedLink',
+            const link = this.create({
+                type: 'link',
                 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);
+            });
+            this.finish(link);
             // TODO...
             // Save transactions unconditionally
             if (!this.handler.transactionHandler.active) {
@@ -93,47 +88,31 @@ class LinkHandler {
         };
         /**
          * Add link in Canvas
-         * @param {LinkOption} link
+         * @param {LinkOption} option
          * @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];
+        this.create = (option, loaded = false) => {
+            const fromNode = this.handler.objectMap[option.fromNodeId];
+            const fromPort = fromNode.fromPort.filter(port => port.id === option.fromPortId || !port.id)[0];
+            const toNode = this.handler.objectMap[option.toNodeId];
             const { toPort } = toNode;
-            const createdObj = this.handler.fabricObjects[link.type].create(fromNode, fromPort, toNode, toPort, {
-                ...link,
+            const link = this.handler.fabricObjects[option.type].create(fromNode, fromPort, toNode, toPort, {
+                ...option,
             });
-            this.handler.canvas.add(createdObj);
+            this.handler.canvas.add(link);
             this.handler.objects = this.handler.getObjects();
             const { editable } = this.handler;
             if (this.handler.onAdd && editable && !loaded) {
-                this.handler.onAdd(createdObj);
+                this.handler.onAdd(link);
             }
             this.handler.canvas.renderAll();
-            createdObj.setPort(fromNode, fromPort, toNode, toPort);
+            link.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();
+            this.handler.canvas.sendToBack(link);
+            return link;
         };
         /**
          * When the link is deleted, linked FromNode delete

package/lib/handlers/PortHandler.d.ts

@@ -1,5 +1,5 @@
-import Handler from './Handler';
 import { NodeObject } from '../objects/Node';
+import Handler from './Handler';
 declare class PortHandler {
     handler?: Handler;
     constructor(handler: Handler);

package/lib/handlers/PortHandler.js

@@ -17,22 +17,16 @@ class PortHandler {
                         this.handler.activeLine &&
                         this.handler.activeLine.class === 'line') {
                         if (toPort.links.some(link => link.fromNode === this.handler.activeLine.fromNode)) {
-                            toPort.set({
-                                fill: 'red',
-                            });
+                            toPort.set({ fill: 'red' });
                             this.handler.canvas.renderAll();
                             return;
                         }
-                        toPort.set({
-                            fill: 'green',
-                        });
+                        toPort.set({ fill: 'green' });
                         this.handler.canvas.renderAll();
                     }
                 });
                 toPort.on('mouseout', () => {
-                    toPort.set({
-                        fill: toPort.originFill,
-                    });
+                    toPort.set({ fill: toPort.originFill });
                     this.handler.canvas.renderAll();
                 });
                 this.handler.canvas.add(toPort);
@@ -47,29 +41,21 @@ class PortHandler {
                             if (this.handler.interactionMode !== 'link') {
                                 if (port.enabled) {
                                     if (this.handler.activeLine) {
-                                        port.set({
-                                            fill: 'red',
-                                        });
+                                        port.set({ fill: 'red' });
                                         this.handler.canvas.renderAll();
                                         return;
                                     }
-                                    port.set({
-                                        fill: 'green',
-                                    });
+                                    port.set({ fill: 'green' });
                                     this.handler.canvas.renderAll();
                                     return;
                                 }
-                                port.set({
-                                    fill: 'red',
-                                });
+                                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,
-                                });
+                                port.set({ fill: port.enabled ? port.originFill : port.hoverFill });
                             }
                             this.handler.canvas.renderAll();
                         });
@@ -90,14 +76,12 @@ class PortHandler {
                     left: target.left + target.width / 2,
                     top: target.top,
                 };
-                target.toPort.set({
-                    ...toCoords,
-                });
+                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);
+                        link.update({ left: fromPort.left, top: fromPort.top }, { left: toCoords.left, top: toCoords.top });
                     });
                 }
             }
@@ -109,14 +93,12 @@ class PortHandler {
                 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.set({ left, top });
                     port.setCoords();
                     if (port.links.length) {
+                        console.log(port.links);
                         port.links.forEach(link => {
-                            this.handler.linkHandler.setCoords(left, top, link.toNode.toPort.left, link.toNode.toPort.top, link);
+                            link.update({ left, top }, { left: link.toNode.toPort.left, top: link.toNode.toPort.top });
                         });
                     }
                 });

package/lib/handlers/ShortcutHandler.d.ts

@@ -1,5 +1,5 @@
-import Handler from './Handler';
 import { KeyEvent } from '../utils';
+import Handler from './Handler';
 /**
  * Shortcut Handler Class
  *

package/lib/handlers/TransactionHandler.js

@@ -44,9 +44,6 @@ class TransactionHandler {
                     if (obj.id === 'workarea') {
                         return false;
                     }
-                    else if (obj.id === 'grid') {
-                        return false;
-                    }
                     else if (obj.superType === 'port') {
                         return false;
                     }
@@ -94,6 +91,7 @@ class TransactionHandler {
          */
         this.replay = (transaction) => {
             const objects = JSON.parse(transaction.json);
+            console.log(objects);
             this.state = objects;
             this.active = true;
             this.handler.canvas.renderOnAddRemove = false;
@@ -103,28 +101,23 @@ class TransactionHandler {
                 enlivenObjects.forEach(obj => {
                     const targetIndex = this.handler.canvas._objects.length;
                     if (obj.superType === 'node') {
-                        this.handler.canvas.insertAt(obj, targetIndex, false);
-                        this.handler.portHandler.create(obj);
+                        const node = obj;
+                        this.handler.canvas.insertAt(node, targetIndex, false);
+                        this.handler.portHandler.create(node);
+                        this.handler.portHandler.setCoords(node);
                     }
                     else if (obj.superType === 'link') {
-                        const link = obj;
-                        this.handler.objects = this.handler.getObjects();
-                        this.handler.linkHandler.create({
-                            type: 'curvedLink',
-                            fromNodeId: link.fromNode?.id,
-                            fromPortId: link.fromPort?.id,
-                            toNodeId: link.toNode?.id,
-                            toPortId: link.toPort?.id,
-                        });
+                        this.handler.canvas.insertAt(obj, targetIndex, false);
                     }
                     else {
                         this.handler.canvas.insertAt(obj, targetIndex, false);
                     }
                 });
+                this.handler.objects = this.handler.getObjects();
+                1;
                 this.handler.canvas.renderOnAddRemove = true;
                 this.active = false;
                 this.handler.canvas.renderAll();
-                this.handler.objects = this.handler.getObjects();
                 if (this.handler.onTransaction) {
                     this.handler.onTransaction(transaction);
                 }

package/lib/handlers/ZoomHandler.d.ts

@@ -1,6 +1,6 @@
 import { fabric } from 'fabric';
 import { FabricObject } from '../utils';
-import Handler from './Handler';
+import type Handler from './Handler';
 declare class ZoomHandler {
     handler?: Handler;
     private _zoomStep?;

package/lib/handlers/index.d.ts

@@ -1,23 +1,3 @@
-export { default as Handler } from './Handler';
-export { default as ImageHandler } from './ImageHandler';
-export { default as ChartHandler } from './ChartHandler';
-export { default as ElementHandler } from './ElementHandler';
-export { default as CropHandler } from './CropHandler';
-export { default as AnimationHandler } from './AnimationHandler';
-export { default as ContextmenuHandler } from './ContextmenuHandler';
-export { default as TooltipHandler } from './TooltipHandler';
-export { default as TransactionHandler } from './TransactionHandler';
-export { default as ZoomHandler } from './ZoomHandler';
-export { default as WorkareaHandler } from './WorkareaHandler';
-export { default as InteractionHandler } from './InteractionHandler';
-export { default as GridHandler } from './GridHandler';
-export { default as PortHandler } from './PortHandler';
-export { default as LinkHandler } from './LinkHandler';
-export { default as NodeHandler } from './NodeHandler';
-export { default as AlignmentHandler } from './AlignmentHandler';
-export { default as GuidelineHandler } from './GuidelineHandler';
-export { default as EventHandler } from './EventHandler';
-export { default as DrawingHandler } from './DrawingHandler';
-export { default as ShortcutHandler } from './ShortcutHandler';
-export { default as FiberHandler } from './FiberHandler';
+export { default as AbstractHandler } from './AbstractHandler';
 export { default as CustomHandler } from './CustomHandler';
+export { default as Handler } from './Handler';

package/lib/handlers/index.js

@@ -3,50 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomHandler = exports.FiberHandler = exports.ShortcutHandler = exports.DrawingHandler = exports.EventHandler = exports.GuidelineHandler = exports.AlignmentHandler = exports.NodeHandler = exports.LinkHandler = exports.PortHandler = exports.GridHandler = exports.InteractionHandler = exports.WorkareaHandler = exports.ZoomHandler = exports.TransactionHandler = exports.TooltipHandler = exports.ContextmenuHandler = exports.AnimationHandler = exports.CropHandler = exports.ElementHandler = exports.ChartHandler = exports.ImageHandler = exports.Handler = void 0;
-var Handler_1 = require("./Handler");
-Object.defineProperty(exports, "Handler", { enumerable: true, get: function () { return __importDefault(Handler_1).default; } });
-var ImageHandler_1 = require("./ImageHandler");
-Object.defineProperty(exports, "ImageHandler", { enumerable: true, get: function () { return __importDefault(ImageHandler_1).default; } });
-var ChartHandler_1 = require("./ChartHandler");
-Object.defineProperty(exports, "ChartHandler", { enumerable: true, get: function () { return __importDefault(ChartHandler_1).default; } });
-var ElementHandler_1 = require("./ElementHandler");
-Object.defineProperty(exports, "ElementHandler", { enumerable: true, get: function () { return __importDefault(ElementHandler_1).default; } });
-var CropHandler_1 = require("./CropHandler");
-Object.defineProperty(exports, "CropHandler", { enumerable: true, get: function () { return __importDefault(CropHandler_1).default; } });
-var AnimationHandler_1 = require("./AnimationHandler");
-Object.defineProperty(exports, "AnimationHandler", { enumerable: true, get: function () { return __importDefault(AnimationHandler_1).default; } });
-var ContextmenuHandler_1 = require("./ContextmenuHandler");
-Object.defineProperty(exports, "ContextmenuHandler", { enumerable: true, get: function () { return __importDefault(ContextmenuHandler_1).default; } });
-var TooltipHandler_1 = require("./TooltipHandler");
-Object.defineProperty(exports, "TooltipHandler", { enumerable: true, get: function () { return __importDefault(TooltipHandler_1).default; } });
-var TransactionHandler_1 = require("./TransactionHandler");
-Object.defineProperty(exports, "TransactionHandler", { enumerable: true, get: function () { return __importDefault(TransactionHandler_1).default; } });
-var ZoomHandler_1 = require("./ZoomHandler");
-Object.defineProperty(exports, "ZoomHandler", { enumerable: true, get: function () { return __importDefault(ZoomHandler_1).default; } });
-var WorkareaHandler_1 = require("./WorkareaHandler");
-Object.defineProperty(exports, "WorkareaHandler", { enumerable: true, get: function () { return __importDefault(WorkareaHandler_1).default; } });
-var InteractionHandler_1 = require("./InteractionHandler");
-Object.defineProperty(exports, "InteractionHandler", { enumerable: true, get: function () { return __importDefault(InteractionHandler_1).default; } });
-var GridHandler_1 = require("./GridHandler");
-Object.defineProperty(exports, "GridHandler", { enumerable: true, get: function () { return __importDefault(GridHandler_1).default; } });
-var PortHandler_1 = require("./PortHandler");
-Object.defineProperty(exports, "PortHandler", { enumerable: true, get: function () { return __importDefault(PortHandler_1).default; } });
-var LinkHandler_1 = require("./LinkHandler");
-Object.defineProperty(exports, "LinkHandler", { enumerable: true, get: function () { return __importDefault(LinkHandler_1).default; } });
-var NodeHandler_1 = require("./NodeHandler");
-Object.defineProperty(exports, "NodeHandler", { enumerable: true, get: function () { return __importDefault(NodeHandler_1).default; } });
-var AlignmentHandler_1 = require("./AlignmentHandler");
-Object.defineProperty(exports, "AlignmentHandler", { enumerable: true, get: function () { return __importDefault(AlignmentHandler_1).default; } });
-var GuidelineHandler_1 = require("./GuidelineHandler");
-Object.defineProperty(exports, "GuidelineHandler", { enumerable: true, get: function () { return __importDefault(GuidelineHandler_1).default; } });
-var EventHandler_1 = require("./EventHandler");
-Object.defineProperty(exports, "EventHandler", { enumerable: true, get: function () { return __importDefault(EventHandler_1).default; } });
-var DrawingHandler_1 = require("./DrawingHandler");
-Object.defineProperty(exports, "DrawingHandler", { enumerable: true, get: function () { return __importDefault(DrawingHandler_1).default; } });
-var ShortcutHandler_1 = require("./ShortcutHandler");
-Object.defineProperty(exports, "ShortcutHandler", { enumerable: true, get: function () { return __importDefault(ShortcutHandler_1).default; } });
-var FiberHandler_1 = require("./FiberHandler");
-Object.defineProperty(exports, "FiberHandler", { enumerable: true, get: function () { return __importDefault(FiberHandler_1).default; } });
+exports.Handler = exports.CustomHandler = exports.AbstractHandler = void 0;
+var AbstractHandler_1 = require("./AbstractHandler");
+Object.defineProperty(exports, "AbstractHandler", { enumerable: true, get: function () { return __importDefault(AbstractHandler_1).default; } });
 var CustomHandler_1 = require("./CustomHandler");
 Object.defineProperty(exports, "CustomHandler", { enumerable: true, get: function () { return __importDefault(CustomHandler_1).default; } });
+var Handler_1 = require("./Handler");
+Object.defineProperty(exports, "Handler", { enumerable: true, get: function () { return __importDefault(Handler_1).default; } });

package/lib/objects/LineLink.d.ts

@@ -0,0 +1,15 @@
+import { fabric } from 'fabric';
+import { FabricObject } from '../utils';
+import { NodeObject } from './Node';
+import { PortObject } from './Port';
+export interface LineLinkObject extends FabricObject<fabric.Line> {
+    fromNode?: NodeObject;
+    toNode?: NodeObject;
+    fromPort?: PortObject;
+    toPort?: PortObject;
+    fromPortIndex?: number;
+    setPort?: (fromNode: NodeObject, fromPort: PortObject, toNode: NodeObject, toPort: PortObject) => void;
+    setPortEnabled?: (node: NodeObject, port: PortObject, enabled: boolean) => void;
+}
+declare const LineLink: any;
+export default LineLink;

package/lib/objects/LineLink.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fabric_1 = require("fabric");
+const uuid_1 = require("uuid");
+const Node_1 = require("./Node");
+const LineLink = fabric_1.fabric.util.createClass(fabric_1.fabric.Line, {
+    type: 'lineLink',
+    superType: 'link',
+    initialize(fromNode, fromPort, toNode, toPort, options) {
+        options = options || {};
+        const coords = [fromPort.left, fromPort.top, toPort.left, toPort.top];
+        Object.assign(options, {
+            strokeWidth: 4,
+            id: options.id || (0, uuid_1.v4)(),
+            originX: 'center',
+            originY: 'center',
+            lockScalingX: true,
+            lockScalingY: true,
+            lockRotation: true,
+            hasRotatingPoint: false,
+            hasControls: false,
+            hasBorders: false,
+            perPixelTargetFind: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            selectable: false,
+            fromNode,
+            fromPort,
+            toNode,
+            toPort,
+            hoverCursor: 'pointer',
+        });
+        this.callSuper('initialize', coords, options);
+    },
+    setPort(fromNode, fromPort, _toNode, toPort) {
+        if (fromNode.type === 'BroadcastNode') {
+            fromPort = fromNode.fromPort[0];
+        }
+        fromPort.links.push(this);
+        toPort.links.push(this);
+        this.setPortEnabled(fromNode, fromPort, false);
+    },
+    setPortEnabled(node, port, enabled) {
+        if (node.descriptor.outPortType !== Node_1.OUT_PORT_TYPE.BROADCAST) {
+            port.set({
+                enabled,
+                fill: enabled ? port.originFill : port.selectFill,
+            });
+        }
+        else {
+            if (node.toPort.id === port.id) {
+                return;
+            }
+            port.links.forEach((link, index) => {
+                link.set({
+                    fromPort: port,
+                    fromPortIndex: index,
+                });
+            });
+            node.set({
+                configuration: {
+                    outputCount: port.links.length,
+                },
+            });
+        }
+    },
+    toObject() {
+        return fabric_1.fabric.util.object.extend(this.callSuper('toObject'), {
+            id: this.get('id'),
+            name: this.get('name'),
+            superType: this.get('superType'),
+            configuration: this.get('configuration'),
+            fromNode: this.get('fromNode'),
+            fromPort: this.get('fromPort'),
+            toNode: this.get('toNode'),
+            toPort: this.get('toPort'),
+        });
+    },
+    _render(ctx) {
+        this.callSuper('_render', ctx);
+        ctx.save();
+        const xDiff = this.x2 - this.x1;
+        const yDiff = this.y2 - this.y1;
+        const angle = Math.atan2(yDiff, xDiff);
+        ctx.translate((this.x2 - this.x1) / 2, (this.y2 - this.y1) / 2);
+        ctx.rotate(angle);
+        ctx.beginPath();
+        if (this.arrow) {
+            // Move 5px in front of line to start the arrow so it does not have the square line end showing in front (0,0)
+            ctx.moveTo(5, 0);
+            ctx.lineTo(-5, 5);
+            ctx.lineTo(-5, -5);
+        }
+        ctx.closePath();
+        ctx.lineWidth = this.strokeWidth;
+        ctx.fillStyle = this.stroke;
+        ctx.fill();
+        ctx.restore();
+    },
+});
+LineLink.fromObject = (options, callback) => {
+    const { fromNode, fromPort, toNode, toPort } = options;
+    return callback(new LineLink(fromNode, fromPort, toNode, toPort, options));
+};
+// @ts-ignore
+window.fabric.LineLink = LineLink;
+exports.default = LineLink;

package/lib/objects/Link.d.ts

@@ -2,7 +2,13 @@ import { fabric } from 'fabric';
 import { FabricObject } from '../utils';
 import { NodeObject } from './Node';
 import { PortObject } from './Port';
-export interface LinkObject extends FabricObject<fabric.Line> {
+export interface LinkedNodePropeties {
+    left: number;
+    top: number;
+    width?: number;
+    height?: number;
+}
+export interface LinkObject extends FabricObject<fabric.Path> {
     fromNode?: NodeObject;
     toNode?: NodeObject;
     fromPort?: PortObject;
@@ -10,6 +16,7 @@ export interface LinkObject extends FabricObject<fabric.Line> {
     fromPortIndex?: number;
     setPort?: (fromNode: NodeObject, fromPort: PortObject, toNode: NodeObject, toPort: PortObject) => void;
     setPortEnabled?: (node: NodeObject, port: PortObject, enabled: boolean) => void;
+    update?: (fromPort: Partial<PortObject>, toPort: Partial<PortObject>) => void;
 }
 declare const Link: any;
 export default Link;