@projectstorm/react-diagrams-core - npm Package Compare versions

Comparing version 6.1.1 to 6.2.0

dist/@types/entities/link-layer/LinkLayerFactory.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { AbstractReactFactory, GenerateModelEvent, GenerateWidgetEvent } from '@projectstorm/react-canvas-core';
@@ -3,0 +2,0 @@ import { DiagramEngine } from '../../DiagramEngine';

dist/@types/entities/node-layer/NodeLayerFactory.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="react" />
 import { AbstractReactFactory, GenerateModelEvent, GenerateWidgetEvent } from '@projectstorm/react-canvas-core';
@@ -3,0 +2,0 @@ import { DiagramEngine } from '../../DiagramEngine';

dist/@types/states/DragNewLinkState.d.ts

 import { AbstractDisplacementState, AbstractDisplacementStateEvent } from '@projectstorm/react-canvas-core';
 import { PortModel } from '../entities/port/PortModel';
-import { MouseEvent } from 'react';
 import { LinkModel } from '../entities/link/LinkModel';
@@ -23,7 +22,2 @@ import { DiagramEngine } from '../DiagramEngine';
     /**
-     * Checks whether the mouse event appears to happen in proximity of the link's source port
-     * @param event
-     */
-    isNearbySourcePort({ clientX, clientY }: MouseEvent): boolean;
-    /**
      * Calculates the link's far-end point position on mouse move.
@@ -30,0 +24,0 @@ * In order to be as precise as possible the mouse initialXRelative & initialYRelative are taken into account as well

dist/es/DiagramEngine.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiagramEngine = void 0;
 const NodeModel_1 = require("./entities/node/NodeModel");
@@ -20,6 +21,6 @@ const geometry_1 = require("@projectstorm/geometry");
             factory.registerListener({
-                factoryAdded: event => {
+                factoryAdded: (event) => {
                     event.factory.setDiagramEngine(this);
                 },
-                factoryRemoved: event => {
+                factoryRemoved: (event) => {
                     event.factory.setDiagramEngine(null);
@@ -172,3 +173,3 @@ }
             }
-            let boundingBox = geometry_1.Polygon.boundingBoxFromPolygons(nodes.map(node => node.getBoundingBox()));
+            let boundingBox = geometry_1.Polygon.boundingBoxFromPolygons(nodes.map((node) => node.getBoundingBox()));
             if (margin) {
@@ -184,4 +185,4 @@ return new geometry_1.Rectangle(boundingBox.getTopLeft().x - margin, boundingBox.getTopLeft().y - margin, boundingBox.getWidth() + 2 * margin, boundingBox.getHeight() + 2 * margin);
             .getSelectedEntities()
-            .filter(entity => entity instanceof NodeModel_1.NodeModel)
-            .map(node => node);
+            .filter((entity) => entity instanceof NodeModel_1.NodeModel)
+            .map((node) => node);
         // no node selected
@@ -191,4 +192,4 @@ if (selectedNodes.length == 0) {
                 .getSelectionEntities()
-                .filter(entity => entity instanceof NodeModel_1.NodeModel)
-                .map(node => node);
+                .filter((entity) => entity instanceof NodeModel_1.NodeModel)
+                .map((node) => node);
             // get nodes bounding box with margin
@@ -195,0 +196,0 @@ nodesRect = this.getBoundingNodesRect(allNodes, margin);

dist/es/entities/label/LabelModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelModel = void 0;
 const react_canvas_core_1 = require("@projectstorm/react-canvas-core");
@@ -4,0 +5,0 @@ class LabelModel extends react_canvas_core_1.BaseModel {

dist/es/entities/label/LabelWidget.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LabelWidget = void 0;
 const React = require("react");
@@ -22,3 +23,3 @@ const styled_1 = require("@emotion/styled");
             const link = this.props.label.getParent();
-            const lengths = link.getRenderedPath().map(path => path.getTotalLength());
+            const lengths = link.getRenderedPath().map((path) => path.getTotalLength());
             // calculate the point where we want to display the label
@@ -25,0 +26,0 @@ let labelPosition = lengths.reduce((previousValue, currentValue) => previousValue + currentValue, 0) *

dist/es/entities/link-layer/LinkLayerFactory.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkLayerFactory = void 0;
 const React = require("react");
@@ -4,0 +5,0 @@ const react_canvas_core_1 = require("@projectstorm/react-canvas-core");

dist/es/entities/link-layer/LinkLayerModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkLayerModel = void 0;
 const react_canvas_core_1 = require("@projectstorm/react-canvas-core");
@@ -4,0 +5,0 @@ const LinkModel_1 = require("../link/LinkModel");

dist/es/entities/link-layer/LinkLayerWidget.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkLayerWidget = void 0;
 const React = require("react");
@@ -13,4 +14,5 @@ const styled_1 = require("@emotion/styled");
     render() {
-        return (React.createElement(React.Fragment, null, //only perform these actions when we have a diagram
-        _.map(this.props.layer.getLinks(), link => {
+        return (React.createElement(React.Fragment, null, 
+        //only perform these actions when we have a diagram
+        _.map(this.props.layer.getLinks(), (link) => {
             return React.createElement(LinkWidget_1.LinkWidget, { key: link.getID(), link: link, diagramEngine: this.props.engine });
@@ -17,0 +19,0 @@ })));

dist/es/entities/link/LinkModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkModel = void 0;
 const PointModel_1 = require("./PointModel");
@@ -44,3 +45,3 @@ const _ = require("lodash");
         super.deserialize(event);
-        this.points = _.map(event.data.points || [], point => {
+        this.points = _.map(event.data.points || [], (point) => {
             var p = new PointModel_1.PointModel({
@@ -79,5 +80,5 @@ link: this,
     serialize() {
-        return Object.assign(Object.assign({}, super.serialize()), { source: this.sourcePort ? this.sourcePort.getParent().getID() : null, sourcePort: this.sourcePort ? this.sourcePort.getID() : null, target: this.targetPort ? this.targetPort.getParent().getID() : null, targetPort: this.targetPort ? this.targetPort.getID() : null, points: _.map(this.points, point => {
+        return Object.assign(Object.assign({}, super.serialize()), { source: this.sourcePort ? this.sourcePort.getParent().getID() : null, sourcePort: this.sourcePort ? this.sourcePort.getID() : null, target: this.targetPort ? this.targetPort.getParent().getID() : null, targetPort: this.targetPort ? this.targetPort.getID() : null, points: _.map(this.points, (point) => {
                 return point.serialize();
-            }), labels: _.map(this.labels, label => {
+            }), labels: _.map(this.labels, (label) => {
                 return label.serialize();
@@ -193,3 +194,3 @@ }) });
     setPoints(points) {
-        _.forEach(points, point => {
+        _.forEach(points, (point) => {
             point.setParent(this);
@@ -196,0 +197,0 @@ });

dist/es/entities/link/LinkWidget.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkWidget = void 0;
 const React = require("react");
@@ -4,0 +5,0 @@ const _ = require("lodash");

dist/es/entities/link/PointModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointModel = void 0;
 const react_canvas_core_1 = require("@projectstorm/react-canvas-core");
@@ -4,0 +5,0 @@ class PointModel extends react_canvas_core_1.BasePositionModel {

dist/es/entities/node-layer/NodeLayerFactory.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeLayerFactory = void 0;
 const React = require("react");
@@ -4,0 +5,0 @@ const react_canvas_core_1 = require("@projectstorm/react-canvas-core");

dist/es/entities/node-layer/NodeLayerModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeLayerModel = void 0;
 const react_canvas_core_1 = require("@projectstorm/react-canvas-core");
@@ -4,0 +5,0 @@ const NodeModel_1 = require("../node/NodeModel");

dist/es/entities/node-layer/NodeLayerWidget.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeLayerWidget = void 0;
 const React = require("react");
@@ -4,0 +5,0 @@ const styled_1 = require("@emotion/styled");

dist/es/entities/node/NodeModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeModel = void 0;
 const _ = require("lodash");
@@ -20,3 +21,3 @@ const geometry_1 = require("@projectstorm/geometry");
         //also update the port co-ordinates (for make glorious speed)
-        _.forEach(this.ports, port => {
+        _.forEach(this.ports, (port) => {
             port.setPosition(port.getX() + x - old.x, port.getY() + y - old.y);
@@ -37,3 +38,3 @@ });
     serialize() {
-        return Object.assign(Object.assign({}, super.serialize()), { ports: _.map(this.ports, port => {
+        return Object.assign(Object.assign({}, super.serialize()), { ports: _.map(this.ports, (port) => {
                 return port.serialize();
@@ -45,3 +46,3 @@ }) });
         clone.ports = {};
-        _.forEach(this.ports, port => {
+        _.forEach(this.ports, (port) => {
             clone.addPort(port.clone(lookupTable));
@@ -52,4 +53,4 @@ });
         super.remove();
-        _.forEach(this.ports, port => {
-            _.forEach(port.getLinks(), link => {
+        _.forEach(this.ports, (port) => {
+            _.forEach(port.getLinks(), (link) => {
                 link.remove();
@@ -56,0 +57,0 @@ });

dist/es/entities/node/NodeWidget.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeWidget = void 0;
 const React = require("react");
@@ -45,7 +46,7 @@ const _ = require("lodash");
         // @ts-ignore
-        this.ob = new resize_observer_polyfill_1.default(entities => {
+        this.ob = new resize_observer_polyfill_1.default((entities) => {
             const bounds = entities[0].contentRect;
             this.props.node.updateDimensions({ width: bounds.width, height: bounds.height });
             //now mark the links as dirty
-            _.forEach(this.props.node.getPorts(), port => {
+            _.forEach(this.props.node.getPorts(), (port) => {
                 port.updateCoords(this.props.diagramEngine.getPortCoords(port));
@@ -52,0 +53,0 @@ });

dist/es/entities/port/PortModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortModel = exports.PortModelAlignment = void 0;
 const _ = require("lodash");
@@ -26,3 +27,3 @@ const geometry_1 = require("@projectstorm/geometry");
     serialize() {
-        return Object.assign(Object.assign({}, super.serialize()), { name: this.options.name, alignment: this.options.alignment, parentNode: this.parent.getID(), links: _.map(this.links, link => {
+        return Object.assign(Object.assign({}, super.serialize()), { name: this.options.name, alignment: this.options.alignment, parentNode: this.parent.getID(), links: _.map(this.links, (link) => {
                 return link.getID();
@@ -34,3 +35,3 @@ }) });
         super.setPosition(x, y);
-        _.forEach(this.getLinks(), link => {
+        _.forEach(this.getLinks(), (link) => {
             let point = link.getPointForPort(this);
@@ -78,3 +79,3 @@ point.setPosition(point.getX() + x - old.x, point.getY() + y - old.y);
     reportPosition() {
-        _.forEach(this.getLinks(), link => {
+        _.forEach(this.getLinks(), (link) => {
             link.getPointForPort(this).setPosition(this.getCenter());
@@ -81,0 +82,0 @@ });

dist/es/entities/port/PortWidget.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.PortWidget = void 0;
 const React = require("react");
@@ -4,0 +5,0 @@ const _ = require("lodash");

dist/es/index.js

 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !exports.hasOwnProperty(p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./models/DiagramModel"));
-__export(require("./entities/label/LabelModel"));
-__export(require("./entities/link/LinkModel"));
-__export(require("./entities/link/PointModel"));
-__export(require("./entities/link/LinkWidget"));
-__export(require("./entities/link-layer/LinkLayerModel"));
-__export(require("./entities/link-layer/LinkLayerWidget"));
-__export(require("./entities/link-layer/LinkLayerFactory"));
-__export(require("./entities/node-layer/NodeLayerModel"));
-__export(require("./entities/node-layer/NodeLayerWidget"));
-__export(require("./entities/node-layer/NodeLayerFactory"));
-__export(require("./entities/node/NodeModel"));
-__export(require("./entities/node/NodeWidget"));
-__export(require("./entities/port/PortModel"));
-__export(require("./entities/port/PortWidget"));
-__export(require("./states/DefaultDiagramState"));
-__export(require("./states/DragDiagramItemsState"));
-__export(require("./states/DragNewLinkState"));
-__export(require("./DiagramEngine"));
+__exportStar(require("./models/DiagramModel"), exports);
+__exportStar(require("./entities/label/LabelModel"), exports);
+__exportStar(require("./entities/link/LinkModel"), exports);
+__exportStar(require("./entities/link/PointModel"), exports);
+__exportStar(require("./entities/link/LinkWidget"), exports);
+__exportStar(require("./entities/link-layer/LinkLayerModel"), exports);
+__exportStar(require("./entities/link-layer/LinkLayerWidget"), exports);
+__exportStar(require("./entities/link-layer/LinkLayerFactory"), exports);
+__exportStar(require("./entities/node-layer/NodeLayerModel"), exports);
+__exportStar(require("./entities/node-layer/NodeLayerWidget"), exports);
+__exportStar(require("./entities/node-layer/NodeLayerFactory"), exports);
+__exportStar(require("./entities/node/NodeModel"), exports);
+__exportStar(require("./entities/node/NodeWidget"), exports);
+__exportStar(require("./entities/port/PortModel"), exports);
+__exportStar(require("./entities/port/PortWidget"), exports);
+__exportStar(require("./states/DefaultDiagramState"), exports);
+__exportStar(require("./states/DragDiagramItemsState"), exports);
+__exportStar(require("./states/DragNewLinkState"), exports);
+__exportStar(require("./DiagramEngine"), exports);
 //# sourceMappingURL=index.js.map

dist/es/models/DiagramModel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DiagramModel = void 0;
 const _ = require("lodash");
@@ -29,3 +30,3 @@ const LinkModel_1 = require("../entities/link/LinkModel");
     getLinkLayers() {
-        return _.filter(this.layers, layer => {
+        return _.filter(this.layers, (layer) => {
             return layer instanceof LinkLayerModel_1.LinkLayerModel;
@@ -35,3 +36,3 @@ });
     getNodeLayers() {
-        return _.filter(this.layers, layer => {
+        return _.filter(this.layers, (layer) => {
             return layer instanceof NodeLayerModel_1.NodeLayerModel;
@@ -81,3 +82,3 @@ });
     addAll(...models) {
-        _.forEach(models, model => {
+        _.forEach(models, (model) => {
             if (model instanceof LinkModel_1.LinkModel) {
@@ -106,3 +107,3 @@ this.addLink(model);
     removeLink(link) {
-        const removed = _.some(this.getLinkLayers(), layer => {
+        const removed = _.some(this.getLinkLayers(), (layer) => {
             return layer.removeModel(link);
@@ -115,3 +116,3 @@ });
     removeNode(node) {
-        const removed = _.some(this.getNodeLayers(), layer => {
+        const removed = _.some(this.getNodeLayers(), (layer) => {
             return layer.removeModel(node);
@@ -124,3 +125,3 @@ });
     getLinks() {
-        return _.flatMap(this.getLinkLayers(), layer => {
+        return _.flatMap(this.getLinkLayers(), (layer) => {
             return _.values(layer.getModels());
@@ -130,3 +131,3 @@ });
     getNodes() {
-        return _.flatMap(this.getNodeLayers(), layer => {
+        return _.flatMap(this.getNodeLayers(), (layer) => {
             return _.values(layer.getModels());
@@ -133,0 +134,0 @@ });

dist/es/states/DefaultDiagramState.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultDiagramState = void 0;
 const react_canvas_core_1 = require("@projectstorm/react-canvas-core");
@@ -4,0 +5,0 @@ const PortModel_1 = require("../entities/port/PortModel");

dist/es/states/DragDiagramItemsState.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragDiagramItemsState = void 0;
 const react_canvas_core_1 = require("@projectstorm/react-canvas-core");
@@ -15,3 +16,3 @@ const _ = require("lodash");
                 if (item instanceof PortModel_1.PortModel) {
-                    _.forEach(this.initialPositions, position => {
+                    _.forEach(this.initialPositions, (position) => {
                         if (position.item instanceof PointModel_1.PointModel) {
@@ -18,0 +19,0 @@ const link = position.item.getParent();

dist/es/states/DragNewLinkState.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragNewLinkState = void 0;
 const react_canvas_core_1 = require("@projectstorm/react-canvas-core");
@@ -41,4 +42,9 @@ const PortModel_1 = require("../entities/port/PortModel");
                     }
+                    else {
+                        this.link.remove();
+                        this.engine.repaintCanvas();
+                        return;
+                    }
                 }
-                if (this.isNearbySourcePort(event.event) || !this.config.allowLooseLinks) {
+                if (!this.config.allowLooseLinks) {
                     this.link.remove();
@@ -51,13 +57,2 @@ this.engine.repaintCanvas();
     /**
-     * Checks whether the mouse event appears to happen in proximity of the link's source port
-     * @param event
-     */
-    isNearbySourcePort({ clientX, clientY }) {
-        const sourcePort = this.link.getSourcePort();
-        const sourcePortPosition = this.link.getSourcePort().getPosition();
-        return (clientX >= sourcePortPosition.x &&
-            clientX <= sourcePortPosition.x + sourcePort.width &&
-            (clientY >= sourcePortPosition.y && clientY <= sourcePortPosition.y + sourcePort.height));
-    }
-    /**
      * Calculates the link's far-end point position on mouse move.
@@ -64,0 +59,0 @@ * In order to be as precise as possible the mouse initialXRelative & initialYRelative are taken into account as well

dist/index.js

 /*! For license information please see index.js.LICENSE.txt */
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["projectstorm/react-canvas-core"]=t():e["projectstorm/react-canvas-core"]=t()}(window,(function(){return function(e){var t={};function i(s){if(t[s])return t[s].exports;var r=t[s]={i:s,l:!1,exports:{}};return e[s].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=e,i.c=t,i.d=function(e,t,s){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(i.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(s,r,function(t){return e[t]}.bind(null,r));return s},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=17)}([function(e,t){e.exports=require("@projectstorm/react-canvas-core")},function(e,t){e.exports=require("lodash")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@projectstorm/geometry")},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(1),r=i(3),o=i(0);class n extends o.BasePositionModel{constructor(e){super(e),this.ports={},this.width=0,this.height=0}getBoundingBox(){return new r.Rectangle(this.getPosition(),this.width,this.height)}setPosition(e,t){let i=this.position;super.setPosition(e,t),s.forEach(this.ports,s=>{s.setPosition(s.getX()+e-i.x,s.getY()+t-i.y)})}deserialize(e){super.deserialize(e),s.forEach(e.data.ports,t=>{let i=e.engine.getFactoryForPort(t.type).generateModel({});i.deserialize(Object.assign(Object.assign({},e),{data:t})),e.registerModel(i),this.addPort(i)})}serialize(){return Object.assign(Object.assign({},super.serialize()),{ports:s.map(this.ports,e=>e.serialize())})}doClone(e={},t){t.ports={},s.forEach(this.ports,i=>{t.addPort(i.clone(e))})}remove(){super.remove(),s.forEach(this.ports,e=>{s.forEach(e.getLinks(),e=>{e.remove()})})}getPortFromID(e){for(var t in this.ports)if(this.ports[t].getID()===e)return this.ports[t];return null}getLink(e){for(let t in this.ports){const i=this.ports[t].getLinks();if(i[e])return i[e]}}getPort(e){return this.ports[e]}getPorts(){return this.ports}removePort(e){for(let t of s.values(e.getLinks()))t.clearPort(e);this.ports[e.getName()]&&(this.ports[e.getName()].setParent(null),delete this.ports[e.getName()])}addPort(e){return e.setParent(this),this.ports[e.getName()]=e,e}updateDimensions({width:e,height:t}){this.width=e,this.height=t}}t.NodeModel=n},function(e,t){e.exports=require("@emotion/styled")},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(1),r=i(3),o=i(0);!function(e){e.TOP="top",e.LEFT="left",e.BOTTOM="bottom",e.RIGHT="right"}(t.PortModelAlignment||(t.PortModelAlignment={}));class n extends o.BasePositionModel{constructor(e){super(e),this.links={},this.reportedPosition=!1}deserialize(e){super.deserialize(e),this.reportedPosition=!1,this.options.name=e.data.name,this.options.alignment=e.data.alignment}serialize(){return Object.assign(Object.assign({},super.serialize()),{name:this.options.name,alignment:this.options.alignment,parentNode:this.parent.getID(),links:s.map(this.links,e=>e.getID())})}setPosition(e,t){let i=this.position;super.setPosition(e,t),s.forEach(this.getLinks(),s=>{let r=s.getPointForPort(this);r.setPosition(r.getX()+e-i.x,r.getY()+t-i.y)})}doClone(e={},t){t.links={},t.parentNode=this.getParent().clone(e)}getNode(){return this.getParent()}getName(){return this.options.name}getMaximumLinks(){return this.options.maximumLinks}setMaximumLinks(e){this.options.maximumLinks=e}removeLink(e){delete this.links[e.getID()]}addLink(e){this.links[e.getID()]=e}getLinks(){return this.links}createLinkModel(){if(s.isFinite(this.options.maximumLinks)){var e=s.size(this.links);if(1===this.options.maximumLinks&&e>=1)return s.values(this.links)[0];if(e>=this.options.maximumLinks)return null}return null}reportPosition(){s.forEach(this.getLinks(),e=>{e.getPointForPort(this).setPosition(this.getCenter())}),this.fireEvent({entity:this},"reportInitialPosition")}getCenter(){return new r.Point(this.getX()+this.width/2,this.getY()+this.height/2)}updateCoords(e){this.width=e.getWidth(),this.height=e.getHeight(),this.setPosition(e.getTopLeft()),this.reportedPosition=!0,this.reportPosition()}canLinkToPort(e){return!0}isLocked(){return super.isLocked()||this.getParent().isLocked()}}t.PortModel=n},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(8),r=i(1),o=i(3),n=i(0);class a extends n.BaseModel{constructor(e){super(e),this.points=[new s.PointModel({link:this}),new s.PointModel({link:this})],this.sourcePort=null,this.targetPort=null,this.renderedPaths=[],this.labels=[]}getBoundingBox(){return o.Polygon.boundingBoxFromPoints(r.map(this.points,e=>e.getPosition()))}getSelectionEntities(){return this.getTargetPort()&&this.getSourcePort()?super.getSelectionEntities().concat(r.slice(this.points,1,this.points.length-1)):this.getSourcePort()?this.getTargetPort()?super.getSelectionEntities().concat(this.points):super.getSelectionEntities().concat(r.slice(this.points,1,this.points.length)):super.getSelectionEntities().concat(r.slice(this.points,0,this.points.length-1))}deserialize(e){super.deserialize(e),this.points=r.map(e.data.points||[],t=>{var i=new s.PointModel({link:this,position:new o.Point(t.x,t.y)});return i.deserialize(Object.assign(Object.assign({},e),{data:t})),i}),r.forEach(e.data.labels||[],t=>{let i=e.engine.getFactoryForLabel(t.type).generateModel({});i.deserialize(Object.assign(Object.assign({},e),{data:t})),this.addLabel(i)}),e.data.target&&e.getModel(e.data.targetPort).then(e=>{this.setTargetPort(e)}),e.data.source&&e.getModel(e.data.sourcePort).then(e=>{this.setSourcePort(e)})}getRenderedPath(){return this.renderedPaths}setRenderedPaths(e){this.renderedPaths=e}serialize(){return Object.assign(Object.assign({},super.serialize()),{source:this.sourcePort?this.sourcePort.getParent().getID():null,sourcePort:this.sourcePort?this.sourcePort.getID():null,target:this.targetPort?this.targetPort.getParent().getID():null,targetPort:this.targetPort?this.targetPort.getID():null,points:r.map(this.points,e=>e.serialize()),labels:r.map(this.labels,e=>e.serialize())})}doClone(e={},t){t.setPoints(r.map(this.getPoints(),t=>t.clone(e))),this.sourcePort&&t.setSourcePort(this.sourcePort.clone(e)),this.targetPort&&t.setTargetPort(this.targetPort.clone(e))}clearPort(e){this.sourcePort===e?this.setSourcePort(null):this.targetPort===e&&this.setTargetPort(null)}remove(){this.sourcePort&&this.sourcePort.removeLink(this),this.targetPort&&this.targetPort.removeLink(this),super.remove()}isLastPoint(e){return this.getPointIndex(e)===this.points.length-1}getPointIndex(e){return this.points.indexOf(e)}getPointModel(e){for(var t=0;t<this.points.length;t++)if(this.points[t].getID()===e)return this.points[t];return null}getPortForPoint(e){return null!==this.sourcePort&&this.getFirstPoint().getID()===e.getID()?this.sourcePort:null!==this.targetPort&&this.getLastPoint().getID()===e.getID()?this.targetPort:null}getPointForPort(e){return null!==this.sourcePort&&this.sourcePort.getID()===e.getID()?this.getFirstPoint():null!==this.targetPort&&this.targetPort.getID()===e.getID()?this.getLastPoint():null}getFirstPoint(){return this.points[0]}getLastPoint(){return this.points[this.points.length-1]}setSourcePort(e){null!==e&&e.addLink(this),null!==this.sourcePort&&this.sourcePort.removeLink(this),this.sourcePort=e,this.fireEvent({port:e},"sourcePortChanged")}getSourcePort(){return this.sourcePort}getTargetPort(){return this.targetPort}setTargetPort(e){null!==e&&e.addLink(this),null!==this.targetPort&&this.targetPort.removeLink(this),this.targetPort=e,this.fireEvent({port:e},"targetPortChanged")}point(e,t,i=1){return this.addPoint(this.generatePoint(e,t),i)}addLabel(e){e.setParent(this),this.labels.push(e)}getPoints(){return this.points}getLabels(){return this.labels}setPoints(e){r.forEach(e,e=>{e.setParent(this)}),this.points=e}removePoint(e){this.points.splice(this.getPointIndex(e),1)}removePointsBefore(e){this.points.splice(0,this.getPointIndex(e))}removePointsAfter(e){this.points.splice(this.getPointIndex(e)+1)}removeMiddlePoints(){this.points.length>2&&this.points.splice(0,this.points.length-2)}addPoint(e,t=1){return e.setParent(this),this.points.splice(t,0,e),e}generatePoint(e=0,t=0){return new s.PointModel({link:this,position:new o.Point(e,t)})}}t.LinkModel=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(0);class r extends s.BasePositionModel{constructor(e){super(Object.assign(Object.assign({},e),{type:"point"})),this.parent=e.link}isConnectedToPort(){return null!==this.parent.getPortForPoint(this)}getLink(){return this.getParent()}remove(){this.parent&&this.parent.removePoint(this),super.remove()}isLocked(){return super.isLocked()||this.getParent().isLocked()}}t.PointModel=r},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(0),r=i(4);class o extends s.LayerModel{constructor(){super({type:"diagram-nodes",isSvg:!1,transformed:!0})}addModel(e){if(!(e instanceof r.NodeModel))throw new Error("Can only add nodes to this layer");e.registerListener({entityRemoved:()=>{this.getParent().removeNode(e)}}),super.addModel(e)}getChildModelFactoryBank(e){return e.getNodeFactories()}getNodes(){return this.getModels()}}t.NodeLayerModel=o},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(0),r=i(7);class o extends s.LayerModel{constructor(){super({type:"diagram-links",isSvg:!0,transformed:!0})}addModel(e){if(!(e instanceof r.LinkModel))throw new Error("Can only add links to this layer");e.registerListener({entityRemoved:()=>{this.getParent().removeLink(e)}}),super.addModel(e)}getLinks(){return this.getModels()}getChildModelFactoryBank(e){return e.getLinkFactories()}}t.LinkLayerModel=o},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(2),r=i(1),o=i(20),n=i(0);class a extends s.Component{constructor(e){super(e),this.state={sourcePort:null,targetPort:null}}componentWillUnmount(){this.sourceListener&&this.sourceListener.deregister(),this.targetListener&&this.targetListener.deregister()}static getDerivedStateFromProps(e,t){return{sourcePort:e.link.getSourcePort(),targetPort:e.link.getTargetPort()}}installTarget(){this.targetListener&&this.targetListener.deregister(),this.props.link.getTargetPort()&&(this.targetListener=this.props.link.getTargetPort().registerListener({reportInitialPosition:e=>{this.forceUpdate()}}))}installSource(){this.sourceListener&&this.sourceListener.deregister(),this.props.link.getSourcePort()&&(this.sourceListener=this.props.link.getSourcePort().registerListener({reportInitialPosition:e=>{this.forceUpdate()}}))}componentDidUpdate(e,t,i){t.sourcePort!==this.state.sourcePort&&this.installSource(),t.targetPort!==this.state.targetPort&&this.installTarget()}static generateLinePath(e,t){return`M${e.getX()},${e.getY()} L ${t.getX()},${t.getY()}`}componentDidMount(){this.props.link.getSourcePort()&&this.installSource(),this.props.link.getTargetPort()&&this.installTarget()}render(){const{link:e}=this.props;return e.getSourcePort()&&!e.getSourcePort().reportedPosition||e.getTargetPort()&&!e.getTargetPort().reportedPosition?null:s.createElement(n.PeformanceWidget,{model:this.props.link,serialized:this.props.link.serialize()},()=>s.createElement("g",{"data-linkid":this.props.link.getID()},this.props.diagramEngine.generateWidgetForLink(e),r.map(this.props.link.getLabels(),(e,t)=>s.createElement(o.LabelWidget,{key:e.getID(),engine:this.props.diagramEngine,label:e,index:t}))))}}t.LinkWidget=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(2),r=i(5),o=i(1),n=i(11);var a;!function(e){e.Container=r.default.div``}(a||(a={}));class l extends s.Component{render(){return s.createElement(s.Fragment,null,o.map(this.props.layer.getLinks(),e=>s.createElement(n.LinkWidget,{key:e.getID(),link:e,diagramEngine:this.props.engine})))}}t.LinkLayerWidget=l},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(2),r=i(5),o=i(1),n=i(14);var a;!function(e){e.Container=r.default.div``}(a||(a={}));class l extends s.Component{render(){return s.createElement(s.Fragment,null,o.map(this.props.layer.getNodes(),e=>s.createElement(n.NodeWidget,{key:e.getID(),diagramEngine:this.props.engine,node:e})))}}t.NodeLayerWidget=l},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(2),r=i(1),o=i(0),n=i(5),a=i(22);var l;!function(e){e.Node=n.default.div`
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports["projectstorm/react-canvas-core"]=t():e["projectstorm/react-canvas-core"]=t()}(window,(function(){return function(e){var t={};function i(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=e,i.c=t,i.d=function(e,t,o){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(i.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(o,r,function(t){return e[t]}.bind(null,r));return o},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i(i.s=17)}([function(e,t){e.exports=require("@projectstorm/react-canvas-core")},function(e,t){e.exports=require("lodash")},function(e,t){e.exports=require("react")},function(e,t){e.exports=require("@projectstorm/geometry")},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.NodeModel=void 0;const o=i(1),r=i(3),s=i(0);class n extends s.BasePositionModel{constructor(e){super(e),this.ports={},this.width=0,this.height=0}getBoundingBox(){return new r.Rectangle(this.getPosition(),this.width,this.height)}setPosition(e,t){let i=this.position;super.setPosition(e,t),o.forEach(this.ports,o=>{o.setPosition(o.getX()+e-i.x,o.getY()+t-i.y)})}deserialize(e){super.deserialize(e),o.forEach(e.data.ports,t=>{let i=e.engine.getFactoryForPort(t.type).generateModel({});i.deserialize(Object.assign(Object.assign({},e),{data:t})),e.registerModel(i),this.addPort(i)})}serialize(){return Object.assign(Object.assign({},super.serialize()),{ports:o.map(this.ports,e=>e.serialize())})}doClone(e={},t){t.ports={},o.forEach(this.ports,i=>{t.addPort(i.clone(e))})}remove(){super.remove(),o.forEach(this.ports,e=>{o.forEach(e.getLinks(),e=>{e.remove()})})}getPortFromID(e){for(var t in this.ports)if(this.ports[t].getID()===e)return this.ports[t];return null}getLink(e){for(let t in this.ports){const i=this.ports[t].getLinks();if(i[e])return i[e]}}getPort(e){return this.ports[e]}getPorts(){return this.ports}removePort(e){for(let t of o.values(e.getLinks()))t.clearPort(e);this.ports[e.getName()]&&(this.ports[e.getName()].setParent(null),delete this.ports[e.getName()])}addPort(e){return e.setParent(this),this.ports[e.getName()]=e,e}updateDimensions({width:e,height:t}){this.width=e,this.height=t}}t.NodeModel=n},function(e,t){e.exports=require("@emotion/styled")},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.PortModel=t.PortModelAlignment=void 0;const o=i(1),r=i(3),s=i(0);!function(e){e.TOP="top",e.LEFT="left",e.BOTTOM="bottom",e.RIGHT="right"}(t.PortModelAlignment||(t.PortModelAlignment={}));class n extends s.BasePositionModel{constructor(e){super(e),this.links={},this.reportedPosition=!1}deserialize(e){super.deserialize(e),this.reportedPosition=!1,this.options.name=e.data.name,this.options.alignment=e.data.alignment}serialize(){return Object.assign(Object.assign({},super.serialize()),{name:this.options.name,alignment:this.options.alignment,parentNode:this.parent.getID(),links:o.map(this.links,e=>e.getID())})}setPosition(e,t){let i=this.position;super.setPosition(e,t),o.forEach(this.getLinks(),o=>{let r=o.getPointForPort(this);r.setPosition(r.getX()+e-i.x,r.getY()+t-i.y)})}doClone(e={},t){t.links={},t.parentNode=this.getParent().clone(e)}getNode(){return this.getParent()}getName(){return this.options.name}getMaximumLinks(){return this.options.maximumLinks}setMaximumLinks(e){this.options.maximumLinks=e}removeLink(e){delete this.links[e.getID()]}addLink(e){this.links[e.getID()]=e}getLinks(){return this.links}createLinkModel(){if(o.isFinite(this.options.maximumLinks)){var e=o.size(this.links);if(1===this.options.maximumLinks&&e>=1)return o.values(this.links)[0];if(e>=this.options.maximumLinks)return null}return null}reportPosition(){o.forEach(this.getLinks(),e=>{e.getPointForPort(this).setPosition(this.getCenter())}),this.fireEvent({entity:this},"reportInitialPosition")}getCenter(){return new r.Point(this.getX()+this.width/2,this.getY()+this.height/2)}updateCoords(e){this.width=e.getWidth(),this.height=e.getHeight(),this.setPosition(e.getTopLeft()),this.reportedPosition=!0,this.reportPosition()}canLinkToPort(e){return!0}isLocked(){return super.isLocked()||this.getParent().isLocked()}}t.PortModel=n},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LinkModel=void 0;const o=i(8),r=i(1),s=i(3),n=i(0);class a extends n.BaseModel{constructor(e){super(e),this.points=[new o.PointModel({link:this}),new o.PointModel({link:this})],this.sourcePort=null,this.targetPort=null,this.renderedPaths=[],this.labels=[]}getBoundingBox(){return s.Polygon.boundingBoxFromPoints(r.map(this.points,e=>e.getPosition()))}getSelectionEntities(){return this.getTargetPort()&&this.getSourcePort()?super.getSelectionEntities().concat(r.slice(this.points,1,this.points.length-1)):this.getSourcePort()?this.getTargetPort()?super.getSelectionEntities().concat(this.points):super.getSelectionEntities().concat(r.slice(this.points,1,this.points.length)):super.getSelectionEntities().concat(r.slice(this.points,0,this.points.length-1))}deserialize(e){super.deserialize(e),this.points=r.map(e.data.points||[],t=>{var i=new o.PointModel({link:this,position:new s.Point(t.x,t.y)});return i.deserialize(Object.assign(Object.assign({},e),{data:t})),i}),r.forEach(e.data.labels||[],t=>{let i=e.engine.getFactoryForLabel(t.type).generateModel({});i.deserialize(Object.assign(Object.assign({},e),{data:t})),this.addLabel(i)}),e.data.target&&e.getModel(e.data.targetPort).then(e=>{this.setTargetPort(e)}),e.data.source&&e.getModel(e.data.sourcePort).then(e=>{this.setSourcePort(e)})}getRenderedPath(){return this.renderedPaths}setRenderedPaths(e){this.renderedPaths=e}serialize(){return Object.assign(Object.assign({},super.serialize()),{source:this.sourcePort?this.sourcePort.getParent().getID():null,sourcePort:this.sourcePort?this.sourcePort.getID():null,target:this.targetPort?this.targetPort.getParent().getID():null,targetPort:this.targetPort?this.targetPort.getID():null,points:r.map(this.points,e=>e.serialize()),labels:r.map(this.labels,e=>e.serialize())})}doClone(e={},t){t.setPoints(r.map(this.getPoints(),t=>t.clone(e))),this.sourcePort&&t.setSourcePort(this.sourcePort.clone(e)),this.targetPort&&t.setTargetPort(this.targetPort.clone(e))}clearPort(e){this.sourcePort===e?this.setSourcePort(null):this.targetPort===e&&this.setTargetPort(null)}remove(){this.sourcePort&&this.sourcePort.removeLink(this),this.targetPort&&this.targetPort.removeLink(this),super.remove()}isLastPoint(e){return this.getPointIndex(e)===this.points.length-1}getPointIndex(e){return this.points.indexOf(e)}getPointModel(e){for(var t=0;t<this.points.length;t++)if(this.points[t].getID()===e)return this.points[t];return null}getPortForPoint(e){return null!==this.sourcePort&&this.getFirstPoint().getID()===e.getID()?this.sourcePort:null!==this.targetPort&&this.getLastPoint().getID()===e.getID()?this.targetPort:null}getPointForPort(e){return null!==this.sourcePort&&this.sourcePort.getID()===e.getID()?this.getFirstPoint():null!==this.targetPort&&this.targetPort.getID()===e.getID()?this.getLastPoint():null}getFirstPoint(){return this.points[0]}getLastPoint(){return this.points[this.points.length-1]}setSourcePort(e){null!==e&&e.addLink(this),null!==this.sourcePort&&this.sourcePort.removeLink(this),this.sourcePort=e,this.fireEvent({port:e},"sourcePortChanged")}getSourcePort(){return this.sourcePort}getTargetPort(){return this.targetPort}setTargetPort(e){null!==e&&e.addLink(this),null!==this.targetPort&&this.targetPort.removeLink(this),this.targetPort=e,this.fireEvent({port:e},"targetPortChanged")}point(e,t,i=1){return this.addPoint(this.generatePoint(e,t),i)}addLabel(e){e.setParent(this),this.labels.push(e)}getPoints(){return this.points}getLabels(){return this.labels}setPoints(e){r.forEach(e,e=>{e.setParent(this)}),this.points=e}removePoint(e){this.points.splice(this.getPointIndex(e),1)}removePointsBefore(e){this.points.splice(0,this.getPointIndex(e))}removePointsAfter(e){this.points.splice(this.getPointIndex(e)+1)}removeMiddlePoints(){this.points.length>2&&this.points.splice(0,this.points.length-2)}addPoint(e,t=1){return e.setParent(this),this.points.splice(t,0,e),e}generatePoint(e=0,t=0){return new o.PointModel({link:this,position:new s.Point(e,t)})}}t.LinkModel=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.PointModel=void 0;const o=i(0);class r extends o.BasePositionModel{constructor(e){super(Object.assign(Object.assign({},e),{type:"point"})),this.parent=e.link}isConnectedToPort(){return null!==this.parent.getPortForPoint(this)}getLink(){return this.getParent()}remove(){this.parent&&this.parent.removePoint(this),super.remove()}isLocked(){return super.isLocked()||this.getParent().isLocked()}}t.PointModel=r},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.NodeLayerModel=void 0;const o=i(0),r=i(4);class s extends o.LayerModel{constructor(){super({type:"diagram-nodes",isSvg:!1,transformed:!0})}addModel(e){if(!(e instanceof r.NodeModel))throw new Error("Can only add nodes to this layer");e.registerListener({entityRemoved:()=>{this.getParent().removeNode(e)}}),super.addModel(e)}getChildModelFactoryBank(e){return e.getNodeFactories()}getNodes(){return this.getModels()}}t.NodeLayerModel=s},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LinkLayerModel=void 0;const o=i(0),r=i(7);class s extends o.LayerModel{constructor(){super({type:"diagram-links",isSvg:!0,transformed:!0})}addModel(e){if(!(e instanceof r.LinkModel))throw new Error("Can only add links to this layer");e.registerListener({entityRemoved:()=>{this.getParent().removeLink(e)}}),super.addModel(e)}getLinks(){return this.getModels()}getChildModelFactoryBank(e){return e.getLinkFactories()}}t.LinkLayerModel=s},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LinkWidget=void 0;const o=i(2),r=i(1),s=i(20),n=i(0);class a extends o.Component{constructor(e){super(e),this.state={sourcePort:null,targetPort:null}}componentWillUnmount(){this.sourceListener&&this.sourceListener.deregister(),this.targetListener&&this.targetListener.deregister()}static getDerivedStateFromProps(e,t){return{sourcePort:e.link.getSourcePort(),targetPort:e.link.getTargetPort()}}installTarget(){this.targetListener&&this.targetListener.deregister(),this.props.link.getTargetPort()&&(this.targetListener=this.props.link.getTargetPort().registerListener({reportInitialPosition:e=>{this.forceUpdate()}}))}installSource(){this.sourceListener&&this.sourceListener.deregister(),this.props.link.getSourcePort()&&(this.sourceListener=this.props.link.getSourcePort().registerListener({reportInitialPosition:e=>{this.forceUpdate()}}))}componentDidUpdate(e,t,i){t.sourcePort!==this.state.sourcePort&&this.installSource(),t.targetPort!==this.state.targetPort&&this.installTarget()}static generateLinePath(e,t){return`M${e.getX()},${e.getY()} L ${t.getX()},${t.getY()}`}componentDidMount(){this.props.link.getSourcePort()&&this.installSource(),this.props.link.getTargetPort()&&this.installTarget()}render(){const{link:e}=this.props;return e.getSourcePort()&&!e.getSourcePort().reportedPosition||e.getTargetPort()&&!e.getTargetPort().reportedPosition?null:o.createElement(n.PeformanceWidget,{model:this.props.link,serialized:this.props.link.serialize()},()=>o.createElement("g",{"data-linkid":this.props.link.getID()},this.props.diagramEngine.generateWidgetForLink(e),r.map(this.props.link.getLabels(),(e,t)=>o.createElement(s.LabelWidget,{key:e.getID(),engine:this.props.diagramEngine,label:e,index:t}))))}}t.LinkWidget=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LinkLayerWidget=void 0;const o=i(2),r=i(5),s=i(1),n=i(11);var a;!function(e){e.Container=r.default.div``}(a||(a={}));class d extends o.Component{render(){return o.createElement(o.Fragment,null,s.map(this.props.layer.getLinks(),e=>o.createElement(n.LinkWidget,{key:e.getID(),link:e,diagramEngine:this.props.engine})))}}t.LinkLayerWidget=d},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.NodeLayerWidget=void 0;const o=i(2),r=i(5),s=i(1),n=i(14);var a;!function(e){e.Container=r.default.div``}(a||(a={}));class d extends o.Component{render(){return o.createElement(o.Fragment,null,s.map(this.props.layer.getNodes(),e=>o.createElement(n.NodeWidget,{key:e.getID(),diagramEngine:this.props.engine,node:e})))}}t.NodeLayerWidget=d},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.NodeWidget=void 0;const o=i(2),r=i(1),s=i(0),n=i(5),a=i(22);var d;!function(e){e.Node=n.default.div`
 		position: absolute;
@@ -9,3 +9,3 @@ -webkit-touch-callout: none; /* iOS Safari */
 		pointer-events: all;
-	`}(l||(l={}));class d extends s.Component{constructor(e){super(e),this.ref=s.createRef()}componentWillUnmount(){this.ob.disconnect(),this.ob=null,this.listener.deregister(),this.listener=null}componentDidUpdate(e,t,i){this.listener&&this.props.node!==e.node&&(this.listener.deregister(),this.installSelectionListener())}installSelectionListener(){this.listener=this.props.node.registerListener({selectionChanged:e=>{this.forceUpdate()}})}componentDidMount(){this.ob=new a.default(e=>{const t=e[0].contentRect;this.props.node.updateDimensions({width:t.width,height:t.height}),r.forEach(this.props.node.getPorts(),e=>{e.updateCoords(this.props.diagramEngine.getPortCoords(e))})}),this.ob.observe(this.ref.current),this.installSelectionListener()}render(){return s.createElement(o.PeformanceWidget,{model:this.props.node,serialized:this.props.node.serialize()},()=>s.createElement(l.Node,{className:"node",ref:this.ref,"data-nodeid":this.props.node.getID(),style:{top:this.props.node.getY(),left:this.props.node.getX()}},this.props.diagramEngine.generateWidgetForNode(this.props.node)))}}t.NodeWidget=d},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(0),r=i(6);class o extends s.AbstractDisplacementState{constructor(e={}){super({name:"drag-new-link"}),this.config=Object.assign({allowLooseLinks:!0,allowLinksFromLockedPorts:!1},e),this.registerAction(new s.Action({type:s.InputType.MOUSE_DOWN,fire:e=>{this.port=this.engine.getMouseElement(e.event),this.config.allowLinksFromLockedPorts||!this.port.isLocked()?(this.link=this.port.createLinkModel(),this.link?(this.link.setSelected(!0),this.link.setSourcePort(this.port),this.engine.getModel().addLink(this.link),this.port.reportPosition()):this.eject()):this.eject()}})),this.registerAction(new s.Action({type:s.InputType.MOUSE_UP,fire:e=>{const t=this.engine.getMouseElement(e.event);if(t instanceof r.PortModel&&this.port.canLinkToPort(t))return this.link.setTargetPort(t),t.reportPosition(),void this.engine.repaintCanvas();!this.isNearbySourcePort(e.event)&&this.config.allowLooseLinks||(this.link.remove(),this.engine.repaintCanvas())}}))}isNearbySourcePort({clientX:e,clientY:t}){const i=this.link.getSourcePort(),s=this.link.getSourcePort().getPosition();return e>=s.x&&e<=s.x+i.width&&t>=s.y&&t<=s.y+i.height}fireMouseMoved(e){const t=this.port.getPosition(),i=this.engine.getModel().getZoomLevel()/100,s=this.engine.getModel().getOffsetX()/i,r=this.engine.getModel().getOffsetY()/i,o=this.initialXRelative/i,n=this.initialYRelative/i,a=t.x-s+(o-t.x)+e.virtualDisplacementX,l=t.y-r+(n-t.y)+e.virtualDisplacementY;this.link.getLastPoint().setPosition(a,l),this.engine.repaintCanvas()}}t.DragNewLinkState=o},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(0),r=i(1),o=i(8),n=i(6);class a extends s.MoveItemsState{constructor(){super(),this.registerAction(new s.Action({type:s.InputType.MOUSE_UP,fire:e=>{const t=this.engine.getMouseElement(e.event);t instanceof n.PortModel&&r.forEach(this.initialPositions,e=>{if(e.item instanceof o.PointModel){const i=e.item.getParent();if(i.getLastPoint()!==e.item)return;i.getSourcePort().canLinkToPort(t)&&(i.setTargetPort(t),t.reportPosition(),this.engine.repaintCanvas())}})}}))}}t.DragDiagramItemsState=a},function(e,t,i){"use strict";function s(e){for(var i in e)t.hasOwnProperty(i)||(t[i]=e[i])}Object.defineProperty(t,"__esModule",{value:!0}),s(i(18)),s(i(19)),s(i(7)),s(i(8)),s(i(11)),s(i(10)),s(i(12)),s(i(21)),s(i(9)),s(i(13)),s(i(23)),s(i(4)),s(i(14)),s(i(6)),s(i(24)),s(i(25)),s(i(16)),s(i(15)),s(i(26))},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(1),r=i(7),o=i(4),n=i(0),a=i(9),l=i(10);class d extends n.CanvasModel{constructor(e={}){super(e),this.addLayer(new l.LinkLayerModel),this.addLayer(new a.NodeLayerModel)}deserialize(e){this.layers=[],super.deserialize(e)}addLayer(e){super.addLayer(e),e instanceof a.NodeLayerModel&&(this.activeNodeLayer=e),e instanceof l.LinkLayerModel&&(this.activeLinkLayer=e)}getLinkLayers(){return s.filter(this.layers,e=>e instanceof l.LinkLayerModel)}getNodeLayers(){return s.filter(this.layers,e=>e instanceof a.NodeLayerModel)}getActiveNodeLayer(){if(!this.activeNodeLayer){const e=this.getNodeLayers();0===e.length?this.addLayer(new a.NodeLayerModel):this.activeNodeLayer=e[0]}return this.activeNodeLayer}getActiveLinkLayer(){if(!this.activeLinkLayer){const e=this.getLinkLayers();0===e.length?this.addLayer(new a.NodeLayerModel):this.activeLinkLayer=e[0]}return this.activeLinkLayer}getNode(e){for(const t of this.getNodeLayers()){const i=t.getModel(e);if(i)return i}}getLink(e){for(const t of this.getLinkLayers()){const i=t.getModel(e);if(i)return i}}addAll(...e){return s.forEach(e,e=>{e instanceof r.LinkModel?this.addLink(e):e instanceof o.NodeModel&&this.addNode(e)}),e}addLink(e){return this.getActiveLinkLayer().addModel(e),this.fireEvent({link:e,isCreated:!0},"linksUpdated"),e}addNode(e){return this.getActiveNodeLayer().addModel(e),this.fireEvent({node:e,isCreated:!0},"nodesUpdated"),e}removeLink(e){s.some(this.getLinkLayers(),t=>t.removeModel(e))&&this.fireEvent({link:e,isCreated:!1},"linksUpdated")}removeNode(e){s.some(this.getNodeLayers(),t=>t.removeModel(e))&&this.fireEvent({node:e,isCreated:!1},"nodesUpdated")}getLinks(){return s.flatMap(this.getLinkLayers(),e=>s.values(e.getModels()))}getNodes(){return s.flatMap(this.getNodeLayers(),e=>s.values(e.getModels()))}}t.DiagramModel=d},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(0);class r extends s.BaseModel{constructor(e){super(Object.assign(Object.assign({},e),{offsetX:e.offsetX||0,offsetY:e.offsetY||0}))}deserialize(e){super.deserialize(e),this.options.offsetX=e.data.offsetX,this.options.offsetY=e.data.offsetY}serialize(){return Object.assign(Object.assign({},super.serialize()),{offsetX:this.options.offsetX,offsetY:this.options.offsetY})}}t.LabelModel=r},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(2),r=i(5);var o;!function(e){e.Label=r.default.div`
+	`}(d||(d={}));class l extends o.Component{constructor(e){super(e),this.ref=o.createRef()}componentWillUnmount(){this.ob.disconnect(),this.ob=null,this.listener.deregister(),this.listener=null}componentDidUpdate(e,t,i){this.listener&&this.props.node!==e.node&&(this.listener.deregister(),this.installSelectionListener())}installSelectionListener(){this.listener=this.props.node.registerListener({selectionChanged:e=>{this.forceUpdate()}})}componentDidMount(){this.ob=new a.default(e=>{const t=e[0].contentRect;this.props.node.updateDimensions({width:t.width,height:t.height}),r.forEach(this.props.node.getPorts(),e=>{e.updateCoords(this.props.diagramEngine.getPortCoords(e))})}),this.ob.observe(this.ref.current),this.installSelectionListener()}render(){return o.createElement(s.PeformanceWidget,{model:this.props.node,serialized:this.props.node.serialize()},()=>o.createElement(d.Node,{className:"node",ref:this.ref,"data-nodeid":this.props.node.getID(),style:{top:this.props.node.getY(),left:this.props.node.getX()}},this.props.diagramEngine.generateWidgetForNode(this.props.node)))}}t.NodeWidget=l},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.DragNewLinkState=void 0;const o=i(0),r=i(6);class s extends o.AbstractDisplacementState{constructor(e={}){super({name:"drag-new-link"}),this.config=Object.assign({allowLooseLinks:!0,allowLinksFromLockedPorts:!1},e),this.registerAction(new o.Action({type:o.InputType.MOUSE_DOWN,fire:e=>{this.port=this.engine.getMouseElement(e.event),this.config.allowLinksFromLockedPorts||!this.port.isLocked()?(this.link=this.port.createLinkModel(),this.link?(this.link.setSelected(!0),this.link.setSourcePort(this.port),this.engine.getModel().addLink(this.link),this.port.reportPosition()):this.eject()):this.eject()}})),this.registerAction(new o.Action({type:o.InputType.MOUSE_UP,fire:e=>{const t=this.engine.getMouseElement(e.event);if(t instanceof r.PortModel)return this.port.canLinkToPort(t)?(this.link.setTargetPort(t),t.reportPosition(),void this.engine.repaintCanvas()):(this.link.remove(),void this.engine.repaintCanvas());this.config.allowLooseLinks||(this.link.remove(),this.engine.repaintCanvas())}}))}fireMouseMoved(e){const t=this.port.getPosition(),i=this.engine.getModel().getZoomLevel()/100,o=this.engine.getModel().getOffsetX()/i,r=this.engine.getModel().getOffsetY()/i,s=this.initialXRelative/i,n=this.initialYRelative/i,a=t.x-o+(s-t.x)+e.virtualDisplacementX,d=t.y-r+(n-t.y)+e.virtualDisplacementY;this.link.getLastPoint().setPosition(a,d),this.engine.repaintCanvas()}}t.DragNewLinkState=s},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.DragDiagramItemsState=void 0;const o=i(0),r=i(1),s=i(8),n=i(6);class a extends o.MoveItemsState{constructor(){super(),this.registerAction(new o.Action({type:o.InputType.MOUSE_UP,fire:e=>{const t=this.engine.getMouseElement(e.event);t instanceof n.PortModel&&r.forEach(this.initialPositions,e=>{if(e.item instanceof s.PointModel){const i=e.item.getParent();if(i.getLastPoint()!==e.item)return;i.getSourcePort().canLinkToPort(t)&&(i.setTargetPort(t),t.reportPosition(),this.engine.repaintCanvas())}})}}))}}t.DragDiagramItemsState=a},function(e,t,i){"use strict";var o=this&&this.__createBinding||(Object.create?function(e,t,i,o){void 0===o&&(o=i),Object.defineProperty(e,o,{enumerable:!0,get:function(){return t[i]}})}:function(e,t,i,o){void 0===o&&(o=i),e[o]=t[i]}),r=this&&this.__exportStar||function(e,t){for(var i in e)"default"===i||t.hasOwnProperty(i)||o(t,e,i)};Object.defineProperty(t,"__esModule",{value:!0}),r(i(18),t),r(i(19),t),r(i(7),t),r(i(8),t),r(i(11),t),r(i(10),t),r(i(12),t),r(i(21),t),r(i(9),t),r(i(13),t),r(i(23),t),r(i(4),t),r(i(14),t),r(i(6),t),r(i(24),t),r(i(25),t),r(i(16),t),r(i(15),t),r(i(26),t)},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.DiagramModel=void 0;const o=i(1),r=i(7),s=i(4),n=i(0),a=i(9),d=i(10);class l extends n.CanvasModel{constructor(e={}){super(e),this.addLayer(new d.LinkLayerModel),this.addLayer(new a.NodeLayerModel)}deserialize(e){this.layers=[],super.deserialize(e)}addLayer(e){super.addLayer(e),e instanceof a.NodeLayerModel&&(this.activeNodeLayer=e),e instanceof d.LinkLayerModel&&(this.activeLinkLayer=e)}getLinkLayers(){return o.filter(this.layers,e=>e instanceof d.LinkLayerModel)}getNodeLayers(){return o.filter(this.layers,e=>e instanceof a.NodeLayerModel)}getActiveNodeLayer(){if(!this.activeNodeLayer){const e=this.getNodeLayers();0===e.length?this.addLayer(new a.NodeLayerModel):this.activeNodeLayer=e[0]}return this.activeNodeLayer}getActiveLinkLayer(){if(!this.activeLinkLayer){const e=this.getLinkLayers();0===e.length?this.addLayer(new a.NodeLayerModel):this.activeLinkLayer=e[0]}return this.activeLinkLayer}getNode(e){for(const t of this.getNodeLayers()){const i=t.getModel(e);if(i)return i}}getLink(e){for(const t of this.getLinkLayers()){const i=t.getModel(e);if(i)return i}}addAll(...e){return o.forEach(e,e=>{e instanceof r.LinkModel?this.addLink(e):e instanceof s.NodeModel&&this.addNode(e)}),e}addLink(e){return this.getActiveLinkLayer().addModel(e),this.fireEvent({link:e,isCreated:!0},"linksUpdated"),e}addNode(e){return this.getActiveNodeLayer().addModel(e),this.fireEvent({node:e,isCreated:!0},"nodesUpdated"),e}removeLink(e){o.some(this.getLinkLayers(),t=>t.removeModel(e))&&this.fireEvent({link:e,isCreated:!1},"linksUpdated")}removeNode(e){o.some(this.getNodeLayers(),t=>t.removeModel(e))&&this.fireEvent({node:e,isCreated:!1},"nodesUpdated")}getLinks(){return o.flatMap(this.getLinkLayers(),e=>o.values(e.getModels()))}getNodes(){return o.flatMap(this.getNodeLayers(),e=>o.values(e.getModels()))}}t.DiagramModel=l},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LabelModel=void 0;const o=i(0);class r extends o.BaseModel{constructor(e){super(Object.assign(Object.assign({},e),{offsetX:e.offsetX||0,offsetY:e.offsetY||0}))}deserialize(e){super.deserialize(e),this.options.offsetX=e.data.offsetX,this.options.offsetY=e.data.offsetY}serialize(){return Object.assign(Object.assign({},super.serialize()),{offsetX:this.options.offsetX,offsetY:this.options.offsetY})}}t.LabelModel=r},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LabelWidget=void 0;const o=i(2),r=i(5);var s;!function(e){e.Label=r.default.div`
 		display: inline-block;
@@ -16,3 +16,3 @@ position: absolute;
 		overflow: visible;
-	`}(o||(o={}));class n extends s.Component{constructor(e){super(e),this.findPathAndRelativePositionToRenderLabel=e=>{const t=this.props.label.getParent(),i=t.getRenderedPath().map(e=>e.getTotalLength());let s=i.reduce((e,t)=>e+t,0)*(e/(t.getLabels().length+1)),r=0;for(;r<t.getRenderedPath().length;){if(s-i[r]<0)return{path:t.getRenderedPath()[r],position:s};s-=i[r],r++}},this.calculateLabelPosition=()=>{const e=this.findPathAndRelativePositionToRenderLabel(this.props.index+1);if(!e)return;const{path:t,position:i}=e,s=this.ref.current.offsetWidth,r=this.ref.current.offsetHeight,o=t.getPointAtLength(i),n=o.x-s/2+this.props.label.getOptions().offsetX,a=o.y-r/2+this.props.label.getOptions().offsetY;this.ref.current.style.transform=`translate(${n}px, ${a}px)`},this.ref=s.createRef()}componentDidUpdate(){window.requestAnimationFrame(this.calculateLabelPosition)}componentDidMount(){window.requestAnimationFrame(this.calculateLabelPosition)}render(){const e=this.props.engine.getCanvas();return s.createElement(o.Foreign,{key:this.props.label.getID(),width:e.offsetWidth,height:e.offsetHeight},s.createElement(o.Label,{ref:this.ref},this.props.engine.getFactoryForLabel(this.props.label).generateReactWidget({model:this.props.label})))}}t.LabelWidget=n},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(2),r=i(0),o=i(10),n=i(12);class a extends r.AbstractReactFactory{constructor(){super("diagram-links")}generateModel(e){return new o.LinkLayerModel}generateReactWidget(e){return s.createElement(n.LinkLayerWidget,{layer:e.model,engine:this.engine})}}t.LinkLayerFactory=a},function(e,t){e.exports=require("resize-observer-polyfill")},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(2),r=i(0),o=i(9),n=i(13);class a extends r.AbstractReactFactory{constructor(){super("diagram-nodes")}generateModel(e){return new o.NodeLayerModel}generateReactWidget(e){return s.createElement(n.NodeLayerWidget,{layer:e.model,engine:this.engine})}}t.NodeLayerFactory=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(2),r=i(1),o=i(0);class n extends s.Component{constructor(e){super(e),this.ref=s.createRef()}report(){this.props.port.updateCoords(this.props.engine.getPortCoords(this.props.port,this.ref.current))}componentWillUnmount(){this.engineListenerHandle&&this.engineListenerHandle.deregister()}componentDidUpdate(e,t,i){this.props.port.reportedPosition||this.report()}componentDidMount(){this.engineListenerHandle=this.props.engine.registerListener({canvasReady:()=>{this.report()}}),this.props.engine.getCanvas()&&this.report()}getExtraProps(){if(o.Toolkit.TESTING){return{"data-links":r.keys(this.props.port.getNode().getPort(this.props.port.getName()).links).join(",")}}return{}}render(){return s.createElement("div",Object.assign({style:this.props.style,ref:this.ref,className:"port "+(this.props.className||""),"data-name":this.props.port.getName(),"data-nodeid":this.props.port.getNode().getID()},this.getExtraProps()),this.props.children)}}t.PortWidget=n},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(0),r=i(6),o=i(15),n=i(16);class a extends s.State{constructor(){super({name:"default-diagrams"}),this.childStates=[new s.SelectingState],this.dragCanvas=new s.DragCanvasState,this.dragNewLink=new o.DragNewLinkState,this.dragItems=new n.DragDiagramItemsState,this.registerAction(new s.Action({type:s.InputType.MOUSE_DOWN,fire:e=>{const t=this.engine.getActionEventBus().getModelForEvent(e);t?t instanceof r.PortModel?this.transitionWithEvent(this.dragNewLink,e):this.transitionWithEvent(this.dragItems,e):this.transitionWithEvent(this.dragCanvas,e)}}))}}t.DefaultDiagramState=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const s=i(4),r=i(3),o=i(0);class n extends o.CanvasEngine{constructor(e={}){super(e),this.maxNumberPointsPerLink=1e3,this.nodeFactories=new o.FactoryBank,this.linkFactories=new o.FactoryBank,this.portFactories=new o.FactoryBank,this.labelFactories=new o.FactoryBank;const t=e=>{e.registerListener({factoryAdded:e=>{e.factory.setDiagramEngine(this)},factoryRemoved:e=>{e.factory.setDiagramEngine(null)}})};t(this.nodeFactories),t(this.linkFactories),t(this.portFactories),t(this.labelFactories)}getMouseElement(e){var t=e.target,i=this.model,s=o.Toolkit.closest(t,".port[data-name]");if(s){var r=o.Toolkit.closest(t,".node[data-nodeid]");return i.getNode(r.getAttribute("data-nodeid")).getPort(s.getAttribute("data-name"))}return(s=o.Toolkit.closest(t,".point[data-id]"))?i.getLink(s.getAttribute("data-linkid")).getPointModel(s.getAttribute("data-id")):(s=o.Toolkit.closest(t,"[data-linkid]"))?i.getLink(s.getAttribute("data-linkid")):(s=o.Toolkit.closest(t,".node[data-nodeid]"))?i.getNode(s.getAttribute("data-nodeid")):null}getNodeFactories(){return this.nodeFactories}getLinkFactories(){return this.linkFactories}getLabelFactories(){return this.labelFactories}getPortFactories(){return this.portFactories}getFactoryForNode(e){return"string"==typeof e?this.nodeFactories.getFactory(e):this.nodeFactories.getFactory(e.getType())}getFactoryForLink(e){return"string"==typeof e?this.linkFactories.getFactory(e):this.linkFactories.getFactory(e.getType())}getFactoryForLabel(e){return"string"==typeof e?this.labelFactories.getFactory(e):this.labelFactories.getFactory(e.getType())}getFactoryForPort(e){return"string"==typeof e?this.portFactories.getFactory(e):this.portFactories.getFactory(e.getType())}generateWidgetForLink(e){return this.getFactoryForLink(e).generateReactWidget({model:e})}generateWidgetForNode(e){return this.getFactoryForNode(e).generateReactWidget({model:e})}getNodeElement(e){const t=this.canvas.querySelector(`.node[data-nodeid="${e.getID()}"]`);if(null===t)throw new Error("Cannot find Node element with nodeID: ["+e.getID()+"]");return t}getNodePortElement(e){var t=this.canvas.querySelector(`.port[data-name="${e.getName()}"][data-nodeid="${e.getParent().getID()}"]`);if(null===t)throw new Error("Cannot find Node Port element with nodeID: ["+e.getParent().getID()+"] and name: ["+e.getName()+"]");return t}getPortCenter(e){return this.getPortCoords(e).getOrigin()}getPortCoords(e,t){if(!this.canvas)throw new Error("Canvas needs to be set first");t||(t=this.getNodePortElement(e));const i=t.getBoundingClientRect(),s=this.getRelativeMousePoint({clientX:i.left,clientY:i.top}),o=this.model.getZoomLevel()/100;return new r.Rectangle(s.x,s.y,i.width/o,i.height/o)}getNodeDimensions(e){if(!this.canvas)return{width:0,height:0};const t=this.getNodeElement(e).getBoundingClientRect();return{width:t.width,height:t.height}}getBoundingNodesRect(e,t){if(e){if(0===e.length)return new r.Rectangle(0,0,0,0);let i=r.Polygon.boundingBoxFromPolygons(e.map(e=>e.getBoundingBox()));return t?new r.Rectangle(i.getTopLeft().x-t,i.getTopLeft().y-t,i.getWidth()+2*t,i.getHeight()+2*t):i}}zoomToFitNodes(e){let t,i=this.model.getSelectedEntities().filter(e=>e instanceof s.NodeModel).map(e=>e);if(0==i.length){let i=this.model.getSelectionEntities().filter(e=>e instanceof s.NodeModel).map(e=>e);t=this.getBoundingNodesRect(i,e)}else t=this.getBoundingNodesRect(i,e);if(t){let e=this.canvas.getBoundingClientRect(),i={x:e.left,y:e.top},s={x:i.x+this.getModel().getOffsetX(),y:i.y+this.getModel().getOffsetY()};const r=this.canvas.clientWidth/t.getWidth(),o=this.canvas.clientHeight/t.getHeight(),n=r<o?r:o;this.model.setZoomLevel(100*n);let a={x:s.x+t.getTopLeft().x*n,y:s.y+t.getTopLeft().y*n};this.model.setOffset(this.model.getOffsetX()+i.x-a.x,this.model.getOffsetY()+i.y-a.y),this.repaintCanvas()}}getMaxNumberPointsPerLink(){return this.maxNumberPointsPerLink}setMaxNumberPointsPerLink(e){this.maxNumberPointsPerLink=e}}t.DiagramEngine=n}])}));
+	`}(s||(s={}));class n extends o.Component{constructor(e){super(e),this.findPathAndRelativePositionToRenderLabel=e=>{const t=this.props.label.getParent(),i=t.getRenderedPath().map(e=>e.getTotalLength());let o=i.reduce((e,t)=>e+t,0)*(e/(t.getLabels().length+1)),r=0;for(;r<t.getRenderedPath().length;){if(o-i[r]<0)return{path:t.getRenderedPath()[r],position:o};o-=i[r],r++}},this.calculateLabelPosition=()=>{const e=this.findPathAndRelativePositionToRenderLabel(this.props.index+1);if(!e)return;const{path:t,position:i}=e,o=this.ref.current.offsetWidth,r=this.ref.current.offsetHeight,s=t.getPointAtLength(i),n=s.x-o/2+this.props.label.getOptions().offsetX,a=s.y-r/2+this.props.label.getOptions().offsetY;this.ref.current.style.transform=`translate(${n}px, ${a}px)`},this.ref=o.createRef()}componentDidUpdate(){window.requestAnimationFrame(this.calculateLabelPosition)}componentDidMount(){window.requestAnimationFrame(this.calculateLabelPosition)}render(){const e=this.props.engine.getCanvas();return o.createElement(s.Foreign,{key:this.props.label.getID(),width:e.offsetWidth,height:e.offsetHeight},o.createElement(s.Label,{ref:this.ref},this.props.engine.getFactoryForLabel(this.props.label).generateReactWidget({model:this.props.label})))}}t.LabelWidget=n},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.LinkLayerFactory=void 0;const o=i(2),r=i(0),s=i(10),n=i(12);class a extends r.AbstractReactFactory{constructor(){super("diagram-links")}generateModel(e){return new s.LinkLayerModel}generateReactWidget(e){return o.createElement(n.LinkLayerWidget,{layer:e.model,engine:this.engine})}}t.LinkLayerFactory=a},function(e,t){e.exports=require("resize-observer-polyfill")},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.NodeLayerFactory=void 0;const o=i(2),r=i(0),s=i(9),n=i(13);class a extends r.AbstractReactFactory{constructor(){super("diagram-nodes")}generateModel(e){return new s.NodeLayerModel}generateReactWidget(e){return o.createElement(n.NodeLayerWidget,{layer:e.model,engine:this.engine})}}t.NodeLayerFactory=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.PortWidget=void 0;const o=i(2),r=i(1),s=i(0);class n extends o.Component{constructor(e){super(e),this.ref=o.createRef()}report(){this.props.port.updateCoords(this.props.engine.getPortCoords(this.props.port,this.ref.current))}componentWillUnmount(){this.engineListenerHandle&&this.engineListenerHandle.deregister()}componentDidUpdate(e,t,i){this.props.port.reportedPosition||this.report()}componentDidMount(){this.engineListenerHandle=this.props.engine.registerListener({canvasReady:()=>{this.report()}}),this.props.engine.getCanvas()&&this.report()}getExtraProps(){if(s.Toolkit.TESTING){return{"data-links":r.keys(this.props.port.getNode().getPort(this.props.port.getName()).links).join(",")}}return{}}render(){return o.createElement("div",Object.assign({style:this.props.style,ref:this.ref,className:"port "+(this.props.className||""),"data-name":this.props.port.getName(),"data-nodeid":this.props.port.getNode().getID()},this.getExtraProps()),this.props.children)}}t.PortWidget=n},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.DefaultDiagramState=void 0;const o=i(0),r=i(6),s=i(15),n=i(16);class a extends o.State{constructor(){super({name:"default-diagrams"}),this.childStates=[new o.SelectingState],this.dragCanvas=new o.DragCanvasState,this.dragNewLink=new s.DragNewLinkState,this.dragItems=new n.DragDiagramItemsState,this.registerAction(new o.Action({type:o.InputType.MOUSE_DOWN,fire:e=>{const t=this.engine.getActionEventBus().getModelForEvent(e);t?t instanceof r.PortModel?this.transitionWithEvent(this.dragNewLink,e):this.transitionWithEvent(this.dragItems,e):this.transitionWithEvent(this.dragCanvas,e)}}))}}t.DefaultDiagramState=a},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.DiagramEngine=void 0;const o=i(4),r=i(3),s=i(0);class n extends s.CanvasEngine{constructor(e={}){super(e),this.maxNumberPointsPerLink=1e3,this.nodeFactories=new s.FactoryBank,this.linkFactories=new s.FactoryBank,this.portFactories=new s.FactoryBank,this.labelFactories=new s.FactoryBank;const t=e=>{e.registerListener({factoryAdded:e=>{e.factory.setDiagramEngine(this)},factoryRemoved:e=>{e.factory.setDiagramEngine(null)}})};t(this.nodeFactories),t(this.linkFactories),t(this.portFactories),t(this.labelFactories)}getMouseElement(e){var t=e.target,i=this.model,o=s.Toolkit.closest(t,".port[data-name]");if(o){var r=s.Toolkit.closest(t,".node[data-nodeid]");return i.getNode(r.getAttribute("data-nodeid")).getPort(o.getAttribute("data-name"))}return(o=s.Toolkit.closest(t,".point[data-id]"))?i.getLink(o.getAttribute("data-linkid")).getPointModel(o.getAttribute("data-id")):(o=s.Toolkit.closest(t,"[data-linkid]"))?i.getLink(o.getAttribute("data-linkid")):(o=s.Toolkit.closest(t,".node[data-nodeid]"))?i.getNode(o.getAttribute("data-nodeid")):null}getNodeFactories(){return this.nodeFactories}getLinkFactories(){return this.linkFactories}getLabelFactories(){return this.labelFactories}getPortFactories(){return this.portFactories}getFactoryForNode(e){return"string"==typeof e?this.nodeFactories.getFactory(e):this.nodeFactories.getFactory(e.getType())}getFactoryForLink(e){return"string"==typeof e?this.linkFactories.getFactory(e):this.linkFactories.getFactory(e.getType())}getFactoryForLabel(e){return"string"==typeof e?this.labelFactories.getFactory(e):this.labelFactories.getFactory(e.getType())}getFactoryForPort(e){return"string"==typeof e?this.portFactories.getFactory(e):this.portFactories.getFactory(e.getType())}generateWidgetForLink(e){return this.getFactoryForLink(e).generateReactWidget({model:e})}generateWidgetForNode(e){return this.getFactoryForNode(e).generateReactWidget({model:e})}getNodeElement(e){const t=this.canvas.querySelector(`.node[data-nodeid="${e.getID()}"]`);if(null===t)throw new Error("Cannot find Node element with nodeID: ["+e.getID()+"]");return t}getNodePortElement(e){var t=this.canvas.querySelector(`.port[data-name="${e.getName()}"][data-nodeid="${e.getParent().getID()}"]`);if(null===t)throw new Error("Cannot find Node Port element with nodeID: ["+e.getParent().getID()+"] and name: ["+e.getName()+"]");return t}getPortCenter(e){return this.getPortCoords(e).getOrigin()}getPortCoords(e,t){if(!this.canvas)throw new Error("Canvas needs to be set first");t||(t=this.getNodePortElement(e));const i=t.getBoundingClientRect(),o=this.getRelativeMousePoint({clientX:i.left,clientY:i.top}),s=this.model.getZoomLevel()/100;return new r.Rectangle(o.x,o.y,i.width/s,i.height/s)}getNodeDimensions(e){if(!this.canvas)return{width:0,height:0};const t=this.getNodeElement(e).getBoundingClientRect();return{width:t.width,height:t.height}}getBoundingNodesRect(e,t){if(e){if(0===e.length)return new r.Rectangle(0,0,0,0);let i=r.Polygon.boundingBoxFromPolygons(e.map(e=>e.getBoundingBox()));return t?new r.Rectangle(i.getTopLeft().x-t,i.getTopLeft().y-t,i.getWidth()+2*t,i.getHeight()+2*t):i}}zoomToFitNodes(e){let t,i=this.model.getSelectedEntities().filter(e=>e instanceof o.NodeModel).map(e=>e);if(0==i.length){let i=this.model.getSelectionEntities().filter(e=>e instanceof o.NodeModel).map(e=>e);t=this.getBoundingNodesRect(i,e)}else t=this.getBoundingNodesRect(i,e);if(t){let e=this.canvas.getBoundingClientRect(),i={x:e.left,y:e.top},o={x:i.x+this.getModel().getOffsetX(),y:i.y+this.getModel().getOffsetY()};const r=this.canvas.clientWidth/t.getWidth(),s=this.canvas.clientHeight/t.getHeight(),n=r<s?r:s;this.model.setZoomLevel(100*n);let a={x:o.x+t.getTopLeft().x*n,y:o.y+t.getTopLeft().y*n};this.model.setOffset(this.model.getOffsetX()+i.x-a.x,this.model.getOffsetY()+i.y-a.y),this.repaintCanvas()}}getMaxNumberPointsPerLink(){return this.maxNumberPointsPerLink}setMaxNumberPointsPerLink(e){this.maxNumberPointsPerLink=e}}t.DiagramEngine=n}])}));
 //# sourceMappingURL=index.js.map

package.json

 {
 	"name": "@projectstorm/react-diagrams-core",
-	"version": "6.1.1",
+	"version": "6.2.0",
 	"author": "dylanvorster",
@@ -34,4 +34,4 @@ "license": "MIT",
 	"dependencies": {
-		"@projectstorm/geometry": "^6.1.1",
-		"@projectstorm/react-canvas-core": "^6.1.1"
+		"@projectstorm/geometry": "^6.2.0",
+		"@projectstorm/react-canvas-core": "^6.2.0"
 	},
@@ -44,3 +44,3 @@ "peerDependencies": {
 	},
-	"gitHead": "ef822f554008bd18e0e6225ff2f72fd483675574"
+	"gitHead": "c5b24f6e7b0fce76e221b348d3f027e6144ef5cb"
 }

src/DiagramEngine.ts

@@ -41,6 +41,6 @@ import { NodeModel } from './entities/node/NodeModel';
 			factory.registerListener({
-				factoryAdded: event => {
+				factoryAdded: (event) => {
 					event.factory.setDiagramEngine(this);
 				},
-				factoryRemoved: event => {
+				factoryRemoved: (event) => {
 					event.factory.setDiagramEngine(null);
@@ -224,3 +224,3 @@ }
 
-			let boundingBox = Polygon.boundingBoxFromPolygons(nodes.map(node => node.getBoundingBox()));
+			let boundingBox = Polygon.boundingBoxFromPolygons(nodes.map((node) => node.getBoundingBox()));
 			if (margin) {
@@ -242,4 +242,4 @@ return new Rectangle(
 			.getSelectedEntities()
-			.filter(entity => entity instanceof NodeModel)
-			.map(node => node) as NodeModel[];
+			.filter((entity) => entity instanceof NodeModel)
+			.map((node) => node) as NodeModel[];
 
@@ -250,4 +250,4 @@ // no node selected
 				.getSelectionEntities()
-				.filter(entity => entity instanceof NodeModel)
-				.map(node => node) as NodeModel[];
+				.filter((entity) => entity instanceof NodeModel)
+				.map((node) => node) as NodeModel[];
 
@@ -254,0 +254,0 @@ // get nodes bounding box with margin

src/entities/link/LinkModel.ts

@@ -79,3 +79,3 @@ import { PortModel } from '../port/PortModel';
 		super.deserialize(event);
-		this.points = _.map(event.data.points || [], point => {
+		this.points = _.map(event.data.points || [], (point) => {
 			var p = new PointModel({
@@ -131,6 +131,6 @@ link: this,
 			targetPort: this.targetPort ? this.targetPort.getID() : null,
-			points: _.map(this.points, point => {
+			points: _.map(this.points, (point) => {
 				return point.serialize();
 			}),
-			labels: _.map(this.labels, label => {
+			labels: _.map(this.labels, (label) => {
 				return label.serialize();
@@ -267,3 +267,3 @@ })
 	setPoints(points: PointModel[]) {
-		_.forEach(points, point => {
+		_.forEach(points, (point) => {
 			point.setParent(this);
@@ -270,0 +270,0 @@ });

src/entities/node/NodeModel.ts

@@ -49,3 +49,3 @@ import * as _ from 'lodash';
 		//also update the port co-ordinates (for make glorious speed)
-		_.forEach(this.ports, port => {
+		_.forEach(this.ports, (port) => {
 			port.setPosition(port.getX() + x - old.x, port.getY() + y - old.y);
@@ -74,3 +74,3 @@ });
 			...super.serialize(),
-			ports: _.map(this.ports, port => {
+			ports: _.map(this.ports, (port) => {
 				return port.serialize();
@@ -84,3 +84,3 @@ })
 		clone.ports = {};
-		_.forEach(this.ports, port => {
+		_.forEach(this.ports, (port) => {
 			clone.addPort(port.clone(lookupTable));
@@ -92,4 +92,4 @@ });
 		super.remove();
-		_.forEach(this.ports, port => {
-			_.forEach(port.getLinks(), link => {
+		_.forEach(this.ports, (port) => {
+			_.forEach(port.getLinks(), (link) => {
 				link.remove();
@@ -96,0 +96,0 @@ });

src/entities/port/PortModel.ts

@@ -67,3 +67,3 @@ import { NodeModel } from '../node/NodeModel';
 			parentNode: this.parent.getID(),
-			links: _.map(this.links, link => {
+			links: _.map(this.links, (link) => {
 				return link.getID();
@@ -79,3 +79,3 @@ })
 		super.setPosition(x, y);
-		_.forEach(this.getLinks(), link => {
+		_.forEach(this.getLinks(), (link) => {
 			let point = link.getPointForPort(this);
@@ -132,3 +132,3 @@ point.setPosition(point.getX() + x - old.x, point.getY() + y - old.y);
 	reportPosition() {
-		_.forEach(this.getLinks(), link => {
+		_.forEach(this.getLinks(), (link) => {
 			link.getPointForPort(this).setPosition(this.getCenter());
@@ -135,0 +135,0 @@ });

src/models/DiagramModel.ts

@@ -52,3 +52,3 @@ import * as _ from 'lodash';
 	getLinkLayers(): LinkLayerModel[] {
-		return _.filter(this.layers, layer => {
+		return _.filter(this.layers, (layer) => {
 			return layer instanceof LinkLayerModel;
@@ -59,3 +59,3 @@ }) as LinkLayerModel[];
 	getNodeLayers(): NodeLayerModel[] {
-		return _.filter(this.layers, layer => {
+		return _.filter(this.layers, (layer) => {
 			return layer instanceof NodeLayerModel;
@@ -108,3 +108,3 @@ }) as NodeLayerModel[];
 	addAll(...models: BaseModel[]): BaseModel[] {
-		_.forEach(models, model => {
+		_.forEach(models, (model) => {
 			if (model instanceof LinkModel) {
@@ -138,3 +138,3 @@ this.addLink(model);
 	removeLink(link: LinkModel) {
-		const removed = _.some(this.getLinkLayers(), layer => {
+		const removed = _.some(this.getLinkLayers(), (layer) => {
 			return layer.removeModel(link);
@@ -148,3 +148,3 @@ });
 	removeNode(node: NodeModel) {
-		const removed = _.some(this.getNodeLayers(), layer => {
+		const removed = _.some(this.getNodeLayers(), (layer) => {
 			return layer.removeModel(node);
@@ -158,3 +158,3 @@ });
 	getLinks(): LinkModel[] {
-		return _.flatMap(this.getLinkLayers(), layer => {
+		return _.flatMap(this.getLinkLayers(), (layer) => {
 			return _.values(layer.getModels());
@@ -165,3 +165,3 @@ });
 	getNodes(): NodeModel[] {
-		return _.flatMap(this.getNodeLayers(), layer => {
+		return _.flatMap(this.getNodeLayers(), (layer) => {
 			return _.values(layer.getModels());
@@ -168,0 +168,0 @@ });

src/states/DragDiagramItemsState.ts

@@ -18,3 +18,3 @@ import { Action, ActionEvent, InputType, MoveItemsState } from '@projectstorm/react-canvas-core';
 					if (item instanceof PortModel) {
-						_.forEach(this.initialPositions, position => {
+						_.forEach(this.initialPositions, (position) => {
 							if (position.item instanceof PointModel) {
@@ -21,0 +21,0 @@ const link = position.item.getParent() as LinkModel;

src/states/DragNewLinkState.ts

@@ -68,3 +68,2 @@ import {
 					const model = this.engine.getMouseElement(event.event);
-
 					// check to see if we connected to a new port
@@ -77,6 +76,10 @@ if (model instanceof PortModel) {
 							return;
+						} else {
+							this.link.remove();
+							this.engine.repaintCanvas();
+							return;
 						}
 					}
 
-					if (this.isNearbySourcePort(event.event) || !this.config.allowLooseLinks) {
+					if (!this.config.allowLooseLinks) {
 						this.link.remove();
@@ -91,17 +94,2 @@ this.engine.repaintCanvas();
 	/**
-	 * Checks whether the mouse event appears to happen in proximity of the link's source port
-	 * @param event
-	 */
-	isNearbySourcePort({ clientX, clientY }: MouseEvent): boolean {
-		const sourcePort = this.link.getSourcePort();
-		const sourcePortPosition = this.link.getSourcePort().getPosition();
-
-		return (
-			clientX >= sourcePortPosition.x &&
-			clientX <= sourcePortPosition.x + sourcePort.width &&
-			(clientY >= sourcePortPosition.y && clientY <= sourcePortPosition.y + sourcePort.height)
-		);
-	}
-
-	/**
 	 * Calculates the link's far-end point position on mouse move.
@@ -108,0 +96,0 @@ * In order to be as precise as possible the mouse initialXRelative & initialYRelative are taken into account as well

No alert changes

Improved metrics

Total package byte prevSize

296115

increased by0.04%

Lines of code

3792

increased by0.26%

Dependency changes

• Updated@projectstorm/geometry@^6.2.0

• Updated@projectstorm/react-canvas-core@^6.2.0