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

Comparing version 6.0.2 to 6.1.1

dist/@types/DiagramEngine.d.ts

@@ -49,4 +49,10 @@ import { NodeModel } from './entities/node/NodeModel';
     };
+    /**
+     * Get nodes bounding box coordinates with or without margin
+     * @returns rectangle points in node layer coordinates
+     */
+    getBoundingNodesRect(nodes: NodeModel[], margin?: number): Rectangle;
+    zoomToFitNodes(margin?: number): void;
     getMaxNumberPointsPerLink(): number;
     setMaxNumberPointsPerLink(max: number): void;
 }

dist/es/DiagramEngine.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const NodeModel_1 = require("./entities/node/NodeModel");
 const geometry_1 = require("@projectstorm/geometry");
@@ -161,2 +162,60 @@ const react_canvas_core_1 = require("@projectstorm/react-canvas-core");
     }
+    /**
+     * Get nodes bounding box coordinates with or without margin
+     * @returns rectangle points in node layer coordinates
+     */
+    getBoundingNodesRect(nodes, margin) {
+        if (nodes) {
+            if (nodes.length === 0) {
+                return new geometry_1.Rectangle(0, 0, 0, 0);
+            }
+            let boundingBox = geometry_1.Polygon.boundingBoxFromPolygons(nodes.map(node => node.getBoundingBox()));
+            if (margin) {
+                return new geometry_1.Rectangle(boundingBox.getTopLeft().x - margin, boundingBox.getTopLeft().y - margin, boundingBox.getWidth() + 2 * margin, boundingBox.getHeight() + 2 * margin);
+            }
+            return boundingBox;
+        }
+    }
+    zoomToFitNodes(margin) {
+        let nodesRect; // nodes bounding rectangle
+        let selectedNodes = this.model
+            .getSelectedEntities()
+            .filter(entity => entity instanceof NodeModel_1.NodeModel)
+            .map(node => node);
+        // no node selected
+        if (selectedNodes.length == 0) {
+            let allNodes = this.model
+                .getSelectionEntities()
+                .filter(entity => entity instanceof NodeModel_1.NodeModel)
+                .map(node => node);
+            // get nodes bounding box with margin
+            nodesRect = this.getBoundingNodesRect(allNodes, margin);
+        }
+        else {
+            // get nodes bounding box with margin
+            nodesRect = this.getBoundingNodesRect(selectedNodes, margin);
+        }
+        if (nodesRect) {
+            // there is something we should zoom on
+            let canvasRect = this.canvas.getBoundingClientRect();
+            let canvasTopLeftPoint = {
+                x: canvasRect.left,
+                y: canvasRect.top
+            };
+            let nodeLayerTopLeftPoint = {
+                x: canvasTopLeftPoint.x + this.getModel().getOffsetX(),
+                y: canvasTopLeftPoint.y + this.getModel().getOffsetY()
+            };
+            const xFactor = this.canvas.clientWidth / nodesRect.getWidth();
+            const yFactor = this.canvas.clientHeight / nodesRect.getHeight();
+            const zoomFactor = xFactor < yFactor ? xFactor : yFactor;
+            this.model.setZoomLevel(zoomFactor * 100);
+            let nodesRectTopLeftPoint = {
+                x: nodeLayerTopLeftPoint.x + nodesRect.getTopLeft().x * zoomFactor,
+                y: nodeLayerTopLeftPoint.y + nodesRect.getTopLeft().y * zoomFactor
+            };
+            this.model.setOffset(this.model.getOffsetX() + canvasTopLeftPoint.x - nodesRectTopLeftPoint.x, this.model.getOffsetY() + canvasTopLeftPoint.y - nodesRectTopLeftPoint.y);
+            this.repaintCanvas();
+        }
+    }
     getMaxNumberPointsPerLink() {
@@ -163,0 +222,0 @@ return this.maxNumberPointsPerLink;

dist/es/entities/label/LabelModel.js

@@ -6,3 +6,3 @@ "use strict";
     constructor(options) {
-        super(Object.assign({}, options, { offsetX: options.offsetX || 0, offsetY: options.offsetY || 0 }));
+        super(Object.assign(Object.assign({}, options), { offsetX: options.offsetX || 0, offsetY: options.offsetY || 0 }));
     }
@@ -15,3 +15,3 @@ deserialize(event) {
     serialize() {
-        return Object.assign({}, super.serialize(), { offsetX: this.options.offsetX, offsetY: this.options.offsetY });
+        return Object.assign(Object.assign({}, super.serialize()), { offsetX: this.options.offsetX, offsetY: this.options.offsetY });
     }
@@ -18,0 +18,0 @@ }

dist/es/entities/link/LinkModel.js

@@ -49,3 +49,3 @@ "use strict";
             });
-            p.deserialize(Object.assign({}, event, { data: point }));
+            p.deserialize(Object.assign(Object.assign({}, event), { data: point }));
             return p;
@@ -56,3 +56,3 @@ });
             let labelOb = event.engine.getFactoryForLabel(label.type).generateModel({});
-            labelOb.deserialize(Object.assign({}, event, { data: label }));
+            labelOb.deserialize(Object.assign(Object.assign({}, event), { data: label }));
             this.addLabel(labelOb);
@@ -80,3 +80,3 @@ });
     serialize() {
-        return 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();
@@ -83,0 +83,0 @@ }), labels: _.map(this.labels, label => {

dist/es/entities/link/LinkWidget.js

@@ -31,2 +31,4 @@ "use strict";
         this.targetListener && this.targetListener.deregister();
+        if (!this.props.link.getTargetPort())
+            return;
         this.targetListener = this.props.link.getTargetPort().registerListener({
@@ -40,2 +42,4 @@ reportInitialPosition: (event) => {
         this.sourceListener && this.sourceListener.deregister();
+        if (!this.props.link.getSourcePort())
+            return;
         this.sourceListener = this.props.link.getSourcePort().registerListener({
@@ -42,0 +46,0 @@ reportInitialPosition: (event) => {

dist/es/entities/link/PointModel.js

@@ -6,3 +6,3 @@ "use strict";
     constructor(options) {
-        super(Object.assign({}, options, { type: 'point' }));
+        super(Object.assign(Object.assign({}, options), { type: 'point' }));
         this.parent = options.link;
@@ -9,0 +9,0 @@ }

dist/es/entities/node/NodeModel.js

@@ -29,3 +29,3 @@ "use strict";
             let portOb = event.engine.getFactoryForPort(port.type).generateModel({});
-            portOb.deserialize(Object.assign({}, event, { data: port }));
+            portOb.deserialize(Object.assign(Object.assign({}, event), { data: port }));
             // the links need these
@@ -37,3 +37,3 @@ event.registerModel(portOb);
     serialize() {
-        return Object.assign({}, super.serialize(), { ports: _.map(this.ports, port => {
+        return Object.assign(Object.assign({}, super.serialize()), { ports: _.map(this.ports, port => {
                 return port.serialize();
@@ -40,0 +40,0 @@ }) });

dist/es/entities/node/NodeWidget.js

@@ -27,2 +27,4 @@ "use strict";
         this.ob = null;
+        this.listener.deregister();
+        this.listener = null;
     }
@@ -29,0 +31,0 @@ componentDidUpdate(prevProps, prevState, snapshot) {

dist/es/entities/port/PortModel.js

@@ -26,3 +26,3 @@ "use strict";
     serialize() {
-        return 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();
@@ -29,0 +29,0 @@ }) });

dist/index.js

@@ -1,2 +0,3 @@
-!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(r){if(t[r])return t[r].exports;var s=t[r]={i:r,l:!1,exports:{}};return e[r].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=e,i.c=t,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},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 r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)i.d(r,s,function(t){return e[t]}.bind(null,s));return r},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){e.exports=require("@emotion/styled")},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(1),s=i(3),o=i(0);!function(e){e.TOP="top",e.LEFT="left",e.BOTTOM="bottom",e.RIGHT="right"}(t.PortModelAlignment||(t.PortModelAlignment={}));t.PortModel=class 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({},super.serialize(),{name:this.options.name,alignment:this.options.alignment,parentNode:this.parent.getID(),links:r.map(this.links,e=>e.getID())})}setPosition(e,t){let i=this.position;super.setPosition(e,t),r.forEach(this.getLinks(),r=>{let s=r.getPointForPort(this);s.setPosition(s.getX()+e-i.x,s.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(r.isFinite(this.options.maximumLinks)){var e=r.size(this.links);if(1===this.options.maximumLinks&&e>=1)return r.values(this.links)[0];if(e>=this.options.maximumLinks)return null}return null}reportPosition(){r.forEach(this.getLinks(),e=>{e.getPointForPort(this).setPosition(this.getCenter())}),this.fireEvent({entity:this},"reportInitialPosition")}getCenter(){return new s.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()}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(7),s=i(1),o=i(3),n=i(0);t.LinkModel=class extends n.BaseModel{constructor(e){super(e),this.points=[new r.PointModel({link:this}),new r.PointModel({link:this})],this.sourcePort=null,this.targetPort=null,this.renderedPaths=[],this.labels=[]}getBoundingBox(){return o.Polygon.boundingBoxFromPoints(s.map(this.points,e=>e.getPosition()))}getSelectionEntities(){return this.getTargetPort()&&this.getSourcePort()?super.getSelectionEntities().concat(s.slice(this.points,1,this.points.length-1)):this.getSourcePort()?this.getTargetPort()?super.getSelectionEntities().concat(this.points):super.getSelectionEntities().concat(s.slice(this.points,1,this.points.length)):super.getSelectionEntities().concat(s.slice(this.points,0,this.points.length-1))}deserialize(e){super.deserialize(e),this.points=s.map(e.data.points||[],t=>{var i=new r.PointModel({link:this,position:new o.Point(t.x,t.y)});return i.deserialize(Object.assign({},e,{data:t})),i}),s.forEach(e.data.labels||[],t=>{let i=e.engine.getFactoryForLabel(t.type).generateModel({});i.deserialize(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({},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:s.map(this.points,e=>e.serialize()),labels:s.map(this.labels,e=>e.serialize())})}doClone(e={},t){t.setPoints(s.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){s.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 r.PointModel({link:this,position:new o.Point(e,t)})}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(0);t.PointModel=class extends r.BasePositionModel{constructor(e){super(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()}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(1),s=i(3),o=i(0);t.NodeModel=class extends o.BasePositionModel{constructor(e){super(e),this.ports={},this.width=0,this.height=0}getBoundingBox(){return new s.Rectangle(this.getPosition(),this.width,this.height)}setPosition(e,t){let i=this.position;super.setPosition(e,t),r.forEach(this.ports,r=>{r.setPosition(r.getX()+e-i.x,r.getY()+t-i.y)})}deserialize(e){super.deserialize(e),r.forEach(e.data.ports,t=>{let i=e.engine.getFactoryForPort(t.type).generateModel({});i.deserialize(Object.assign({},e,{data:t})),e.registerModel(i),this.addPort(i)})}serialize(){return Object.assign({},super.serialize(),{ports:r.map(this.ports,e=>e.serialize())})}doClone(e={},t){t.ports={},r.forEach(this.ports,i=>{t.addPort(i.clone(e))})}remove(){super.remove(),r.forEach(this.ports,e=>{r.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 r.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}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(0),s=i(8);t.NodeLayerModel=class extends r.LayerModel{constructor(){super({type:"diagram-nodes",isSvg:!1,transformed:!0})}addModel(e){if(!(e instanceof s.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()}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(0),s=i(6);t.LinkLayerModel=class extends r.LayerModel{constructor(){super({type:"diagram-links",isSvg:!0,transformed:!0})}addModel(e){if(!(e instanceof s.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()}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(2),s=i(1),o=i(20),n=i(0);t.LinkWidget=class extends r.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.targetListener=this.props.link.getTargetPort().registerListener({reportInitialPosition:e=>{this.forceUpdate()}})}installSource(){this.sourceListener&&this.sourceListener.deregister(),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?null:e.getTargetPort()&&!e.getTargetPort().reportedPosition?null:r.createElement(n.PeformanceWidget,{model:this.props.link,serialized:this.props.link.serialize()},()=>r.createElement("g",{"data-linkid":this.props.link.getID()},this.props.diagramEngine.generateWidgetForLink(e),s.map(this.props.link.getLabels(),(e,t)=>r.createElement(o.LabelWidget,{key:e.getID(),engine:this.props.diagramEngine,label:e,index:t}))))}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(2),s=i(4),o=i(1),n=i(11);var a;!function(e){e.Container=s.default.div``}(a||(a={}));t.LinkLayerWidget=class extends r.Component{render(){return r.createElement(r.Fragment,null,o.map(this.props.layer.getLinks(),e=>r.createElement(n.LinkWidget,{key:e.getID(),link:e,diagramEngine:this.props.engine})))}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(2),s=i(4),o=i(1),n=i(14);var a;!function(e){e.Container=s.default.div``}(a||(a={}));t.NodeLayerWidget=class extends r.Component{render(){return r.createElement(r.Fragment,null,o.map(this.props.layer.getNodes(),e=>r.createElement(n.NodeWidget,{key:e.getID(),diagramEngine:this.props.engine,node:e})))}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(2),s=i(1),o=i(0),n=i(4),a=i(22);var l;!function(e){e.Node=n.default.div`
+/*! 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`
 		position: absolute;
@@ -8,10 +9,9 @@ -webkit-touch-callout: none; /* iOS Safari */
 		pointer-events: all;
-	`}(l||(l={}));t.NodeWidget=class extends r.Component{constructor(e){super(e),this.ref=r.createRef()}componentWillUnmount(){this.ob.disconnect(),this.ob=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}),s.forEach(this.props.node.getPorts(),e=>{e.updateCoords(this.props.diagramEngine.getPortCoords(e))})}),this.ob.observe(this.ref.current),this.installSelectionListener()}render(){return r.createElement(o.PeformanceWidget,{model:this.props.node,serialized:this.props.node.serialize()},()=>r.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)))}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(0),s=i(5);t.DragNewLinkState=class extends r.AbstractDisplacementState{constructor(e={}){super({name:"drag-new-link"}),this.config=Object.assign({allowLooseLinks:!0,allowLinksFromLockedPorts:!1},e),this.registerAction(new r.Action({type:r.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 r.Action({type:r.InputType.MOUSE_UP,fire:e=>{const t=this.engine.getMouseElement(e.event);if(t instanceof s.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(),r=this.link.getSourcePort().getPosition();return e>=r.x&&e<=r.x+i.width&&t>=r.y&&t<=r.y+i.height}fireMouseMoved(e){const t=this.port.getPosition(),i=this.engine.getModel().getZoomLevel()/100,r=this.engine.getModel().getOffsetX()/i,s=this.engine.getModel().getOffsetY()/i,o=this.initialXRelative/i,n=this.initialYRelative/i,a=t.x-r+(o-t.x)+e.virtualDisplacementX,l=t.y-s+(n-t.y)+e.virtualDisplacementY;this.link.getLastPoint().setPosition(a,l),this.engine.repaintCanvas()}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(0),s=i(1),o=i(7),n=i(5);t.DragDiagramItemsState=class extends r.MoveItemsState{constructor(){super(),this.registerAction(new r.Action({type:r.InputType.MOUSE_UP,fire:e=>{const t=this.engine.getMouseElement(e.event);t instanceof n.PortModel&&s.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())}})}}))}}},function(e,t,i){"use strict";function r(e){for(var i in e)t.hasOwnProperty(i)||(t[i]=e[i])}Object.defineProperty(t,"__esModule",{value:!0}),r(i(18)),r(i(19)),r(i(6)),r(i(7)),r(i(11)),r(i(10)),r(i(12)),r(i(21)),r(i(9)),r(i(13)),r(i(23)),r(i(8)),r(i(14)),r(i(5)),r(i(24)),r(i(25)),r(i(16)),r(i(15)),r(i(26))},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(1),s=i(6),o=i(8),n=i(0),a=i(9),l=i(10);t.DiagramModel=class 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 r.filter(this.layers,e=>e instanceof l.LinkLayerModel)}getNodeLayers(){return r.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 r.forEach(e,e=>{e instanceof s.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){r.some(this.getLinkLayers(),t=>t.removeModel(e))&&this.fireEvent({link:e,isCreated:!1},"linksUpdated")}removeNode(e){r.some(this.getNodeLayers(),t=>t.removeModel(e))&&this.fireEvent({node:e,isCreated:!1},"nodesUpdated")}getLinks(){return r.flatMap(this.getLinkLayers(),e=>r.values(e.getModels()))}getNodes(){return r.flatMap(this.getNodeLayers(),e=>r.values(e.getModels()))}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(0);t.LabelModel=class extends r.BaseModel{constructor(e){super(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({},super.serialize(),{offsetX:this.options.offsetX,offsetY:this.options.offsetY})}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(2),s=i(4);var o;!function(e){e.Label=s.default.div`
+	`}(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`
 		display: inline-block;
 		position: absolute;
-	`,e.Foreign=s.default.foreignObject`
+	`,e.Foreign=r.default.foreignObject`
 		pointer-events: none;
 		overflow: visible;
-	`}(o||(o={}));t.LabelWidget=class extends r.Component{constructor(e){super(e),this.findPathAndRelativePositionToRenderLabel=e=>{const t=this.props.label.getParent(),i=t.getRenderedPath().map(e=>e.getTotalLength());let r=i.reduce((e,t)=>e+t,0)*(e/(t.getLabels().length+1)),s=0;for(;s<t.getRenderedPath().length;){if(r-i[s]<0)return{path:t.getRenderedPath()[s],position:r};r-=i[s],s++}},this.calculateLabelPosition=()=>{const e=this.findPathAndRelativePositionToRenderLabel(this.props.index+1);if(!e)return;const{path:t,position:i}=e,r=this.ref.current.offsetWidth,s=this.ref.current.offsetHeight,o=t.getPointAtLength(i),n=o.x-r/2+this.props.label.getOptions().offsetX,a=o.y-s/2+this.props.label.getOptions().offsetY;this.ref.current.style.transform=`translate(${n}px, ${a}px)`},this.ref=r.createRef()}componentDidUpdate(){window.requestAnimationFrame(this.calculateLabelPosition)}componentDidMount(){window.requestAnimationFrame(this.calculateLabelPosition)}render(){const e=this.props.engine.getCanvas();return r.createElement(o.Foreign,{key:this.props.label.getID(),width:e.offsetWidth,height:e.offsetHeight},r.createElement(o.Label,{ref:this.ref},this.props.engine.getFactoryForLabel(this.props.label).generateReactWidget({model:this.props.label})))}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(2),s=i(0),o=i(10),n=i(12);t.LinkLayerFactory=class extends s.AbstractReactFactory{constructor(){super("diagram-links")}generateModel(e){return new o.LinkLayerModel}generateReactWidget(e){return r.createElement(n.LinkLayerWidget,{layer:e.model,engine:this.engine})}}},function(e,t){e.exports=require("resize-observer-polyfill")},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(2),s=i(0),o=i(9),n=i(13);t.NodeLayerFactory=class extends s.AbstractReactFactory{constructor(){super("diagram-nodes")}generateModel(e){return new o.NodeLayerModel}generateReactWidget(e){return r.createElement(n.NodeLayerWidget,{layer:e.model,engine:this.engine})}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(2),s=i(1),o=i(0);t.PortWidget=class extends r.Component{constructor(e){super(e),this.ref=r.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(){return o.Toolkit.TESTING?{"data-links":s.keys(this.props.port.getNode().getPort(this.props.port.getName()).links).join(",")}:{}}render(){return r.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)}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(0),s=i(5),o=i(15),n=i(16);t.DefaultDiagramState=class extends r.State{constructor(){super({name:"default-diagrams"}),this.childStates=[new r.SelectingState],this.dragCanvas=new r.DragCanvasState,this.dragNewLink=new o.DragNewLinkState,this.dragItems=new n.DragDiagramItemsState,this.registerAction(new r.Action({type:r.InputType.MOUSE_DOWN,fire:e=>{const t=this.engine.getActionEventBus().getModelForEvent(e);t?t instanceof s.PortModel?this.transitionWithEvent(this.dragNewLink,e):this.transitionWithEvent(this.dragItems,e):this.transitionWithEvent(this.dragCanvas,e)}}))}}},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0});const r=i(3),s=i(0);t.DiagramEngine=class 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,r=s.Toolkit.closest(t,".port[data-name]");if(r){var o=s.Toolkit.closest(t,".node[data-nodeid]");return i.getNode(o.getAttribute("data-nodeid")).getPort(r.getAttribute("data-name"))}return(r=s.Toolkit.closest(t,".point[data-id]"))?i.getLink(r.getAttribute("data-linkid")).getPointModel(r.getAttribute("data-id")):(r=s.Toolkit.closest(t,"[data-linkid]"))?i.getLink(r.getAttribute("data-linkid")):(r=s.Toolkit.closest(t,".node[data-nodeid]"))?i.getNode(r.getAttribute("data-nodeid")):null}
-//!-------------- FACTORIES ------------
-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}}getMaxNumberPointsPerLink(){return this.maxNumberPointsPerLink}setMaxNumberPointsPerLink(e){this.maxNumberPointsPerLink=e}}}])});
+	`}(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}])}));
+//# sourceMappingURL=index.js.map

package.json

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

src/DiagramEngine.ts

@@ -5,3 +5,3 @@ import { NodeModel } from './entities/node/NodeModel';
 import { LabelModel } from './entities/label/LabelModel';
-import { Point, Rectangle } from '@projectstorm/geometry';
+import { Point, Rectangle, Polygon } from '@projectstorm/geometry';
 import { MouseEvent } from 'react';
@@ -214,2 +214,77 @@ import {
 
+	/**
+	 * Get nodes bounding box coordinates with or without margin
+	 * @returns rectangle points in node layer coordinates
+	 */
+	getBoundingNodesRect(nodes: NodeModel[], margin?: number): Rectangle {
+		if (nodes) {
+			if (nodes.length === 0) {
+				return new Rectangle(0, 0, 0, 0);
+			}
+
+			let boundingBox = Polygon.boundingBoxFromPolygons(nodes.map(node => node.getBoundingBox()));
+			if (margin) {
+				return new Rectangle(
+					boundingBox.getTopLeft().x - margin,
+					boundingBox.getTopLeft().y - margin,
+					boundingBox.getWidth() + 2 * margin,
+					boundingBox.getHeight() + 2 * margin
+				);
+			}
+			return boundingBox;
+		}
+	}
+
+	zoomToFitNodes(margin?: number) {
+		let nodesRect; // nodes bounding rectangle
+		let selectedNodes = this.model
+			.getSelectedEntities()
+			.filter(entity => entity instanceof NodeModel)
+			.map(node => node) as NodeModel[];
+
+		// no node selected
+		if (selectedNodes.length == 0) {
+			let allNodes = this.model
+				.getSelectionEntities()
+				.filter(entity => entity instanceof NodeModel)
+				.map(node => node) as NodeModel[];
+
+			// get nodes bounding box with margin
+			nodesRect = this.getBoundingNodesRect(allNodes, margin);
+		} else {
+			// get nodes bounding box with margin
+			nodesRect = this.getBoundingNodesRect(selectedNodes, margin);
+		}
+
+		if (nodesRect) {
+			// there is something we should zoom on
+			let canvasRect = this.canvas.getBoundingClientRect();
+			let canvasTopLeftPoint = {
+				x: canvasRect.left,
+				y: canvasRect.top
+			};
+			let nodeLayerTopLeftPoint = {
+				x: canvasTopLeftPoint.x + this.getModel().getOffsetX(),
+				y: canvasTopLeftPoint.y + this.getModel().getOffsetY()
+			};
+
+			const xFactor = this.canvas.clientWidth / nodesRect.getWidth();
+			const yFactor = this.canvas.clientHeight / nodesRect.getHeight();
+			const zoomFactor = xFactor < yFactor ? xFactor : yFactor;
+
+			this.model.setZoomLevel(zoomFactor * 100);
+
+			let nodesRectTopLeftPoint = {
+				x: nodeLayerTopLeftPoint.x + nodesRect.getTopLeft().x * zoomFactor,
+				y: nodeLayerTopLeftPoint.y + nodesRect.getTopLeft().y * zoomFactor
+			};
+
+			this.model.setOffset(
+				this.model.getOffsetX() + canvasTopLeftPoint.x - nodesRectTopLeftPoint.x,
+				this.model.getOffsetY() + canvasTopLeftPoint.y - nodesRectTopLeftPoint.y
+			);
+			this.repaintCanvas();
+		}
+	}
+
 	getMaxNumberPointsPerLink(): number {
@@ -216,0 +291,0 @@ return this.maxNumberPointsPerLink;

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

295985

increased by51.92%

Number of package files

91

increased by2.25%

Lines of code

3782

increased by4.19%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low license alerts

1

increased byInfinity%

License quality

80

decreased by-20%

Dependency changes

• Updated@projectstorm/geometry@^6.1.1

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