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

Comparing version 6.5.1 to 6.5.2

dist/@types/DiagramEngine.d.ts

@@ -7,4 +7,3 @@ import { NodeModel } from './entities/node/NodeModel';
 import { MouseEvent } from 'react';
-import { AbstractModelFactory, AbstractReactFactory, BaseModel, CanvasEngine, FactoryBank } from '@projectstorm/react-canvas-core';
-import { CanvasEngineListener, CanvasEngineOptions } from '@projectstorm/react-canvas-core';
+import { AbstractModelFactory, AbstractReactFactory, BaseModel, CanvasEngine, FactoryBank, CanvasEngineListener, CanvasEngineOptions } from '@projectstorm/react-canvas-core';
 import { DiagramModel } from './models/DiagramModel';
@@ -11,0 +10,0 @@ /**

dist/DiagramEngine.js

@@ -208,4 +208,10 @@ "use strict";
                     zoom: zoomFactor,
-                    x: canvasRect.width / 2 - ((nodesRect.getWidth() + (margin * 2)) * zoomFactor) / 2 + margin,
-                    y: canvasRect.height / 2 - ((nodesRect.getHeight() + (margin * 2)) * zoomFactor) / 2 + margin
+                    x: canvasRect.width / 2 -
+                        ((nodesRect.getWidth() + margin * 2) * zoomFactor) / 2 +
+                        margin -
+                        nodesRect.getTopLeft().x,
+                    y: canvasRect.height / 2 -
+                        ((nodesRect.getHeight() + margin * 2) * zoomFactor) / 2 +
+                        margin -
+                        nodesRect.getTopLeft().y
                 };
@@ -212,0 +218,0 @@ };

dist/index.umd.js

 /*! For license information please see index.umd.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()}(self,(function(){return(()=>{"use strict";var e={634:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DiagramEngine=void 0;const o=i(80),r=i(924),s=i(46);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){if(e)return 0===e.length?new r.Rectangle(0,0,0,0):r.Polygon.boundingBoxFromPolygons(e.map((e=>e.getBoundingBox())))}zoomToFitSelectedNodes(e){const t=this.model.getSelectedEntities().filter((e=>e instanceof o.NodeModel));this.zoomToFitNodes({margin:e.margin,maxZoom:e.maxZoom,nodes:t.length>0?t:null})}zoomToFitNodes(e){let t=e||0,i=[],o=null;e&&"object"==typeof e&&(t=e.margin||0,i=e.nodes||[],o=e.maxZoom||null),0===i.length&&(i=this.model.getNodes());const r=this.getBoundingNodesRect(i);if(r){let e=this.canvas.getBoundingClientRect();const i=(t=0)=>{const i=this.canvas.clientWidth/(r.getWidth()+2*t),s=this.canvas.clientHeight/(r.getHeight()+2*t);let n=i<s?i:s;return o&&n>o&&(n=o),{zoom:n,x:e.width/2-(r.getWidth()+2*t)*n/2+t,y:e.height/2-(r.getHeight()+2*t)*n/2+t}};let s=i(0);t&&(s.x<t||s.y<t)&&(s=i(t)),this.model.setZoomLevel(100*s.zoom),this.model.setOffset(s.x,s.y),this.repaintCanvas()}}getMaxNumberPointsPerLink(){return this.maxNumberPointsPerLink}setMaxNumberPointsPerLink(e){this.maxNumberPointsPerLink=e}}t.DiagramEngine=n},848:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.LabelModel=void 0;const o=i(46);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},868:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.LabelWidget=void 0;const o=i(297),r=i(177);var s;!function(e){e.Label=r.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()}(self,(function(){return(()=>{"use strict";var e={634:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DiagramEngine=void 0;const o=i(80),r=i(924),s=i(46);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){if(e)return 0===e.length?new r.Rectangle(0,0,0,0):r.Polygon.boundingBoxFromPolygons(e.map((e=>e.getBoundingBox())))}zoomToFitSelectedNodes(e){const t=this.model.getSelectedEntities().filter((e=>e instanceof o.NodeModel));this.zoomToFitNodes({margin:e.margin,maxZoom:e.maxZoom,nodes:t.length>0?t:null})}zoomToFitNodes(e){let t=e||0,i=[],o=null;e&&"object"==typeof e&&(t=e.margin||0,i=e.nodes||[],o=e.maxZoom||null),0===i.length&&(i=this.model.getNodes());const r=this.getBoundingNodesRect(i);if(r){let e=this.canvas.getBoundingClientRect();const i=(t=0)=>{const i=this.canvas.clientWidth/(r.getWidth()+2*t),s=this.canvas.clientHeight/(r.getHeight()+2*t);let n=i<s?i:s;return o&&n>o&&(n=o),{zoom:n,x:e.width/2-(r.getWidth()+2*t)*n/2+t-r.getTopLeft().x,y:e.height/2-(r.getHeight()+2*t)*n/2+t-r.getTopLeft().y}};let s=i(0);t&&(s.x<t||s.y<t)&&(s=i(t)),this.model.setZoomLevel(100*s.zoom),this.model.setOffset(s.x,s.y),this.repaintCanvas()}}getMaxNumberPointsPerLink(){return this.maxNumberPointsPerLink}setMaxNumberPointsPerLink(e){this.maxNumberPointsPerLink=e}}t.DiagramEngine=n},848:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.LabelModel=void 0;const o=i(46);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},868:(e,t,i)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.LabelWidget=void 0;const o=i(297),r=i(177);var s;!function(e){e.Label=r.default.div`
 		display: inline-block;
@@ -4,0 +4,0 @@ position: absolute;

package.json

 {
 	"name": "@projectstorm/react-diagrams-core",
-	"version": "6.5.1",
+	"version": "6.5.2",
 	"author": "dylanvorster",
@@ -34,4 +34,4 @@ "license": "MIT",
 	"dependencies": {
-		"@projectstorm/geometry": "^6.5.1",
-		"@projectstorm/react-canvas-core": "^6.5.1"
+		"@projectstorm/geometry": "^6.5.2",
+		"@projectstorm/react-canvas-core": "^6.5.2"
 	},
@@ -44,3 +44,3 @@ "peerDependencies": {
 	},
-	"gitHead": "291241cacb7880265fab6c442a7abb2a28b5eefb"
+	"gitHead": "d9bd430f828d308ae0e4e6441f658b455c7d82df"
 }

src/DiagramEngine.ts

@@ -13,5 +13,6 @@ import { NodeModel } from './entities/node/NodeModel';
 	FactoryBank,
-	Toolkit
+	Toolkit,
+	CanvasEngineListener,
+	CanvasEngineOptions
 } from '@projectstorm/react-canvas-core';
-import { CanvasEngineListener, CanvasEngineOptions } from '@projectstorm/react-canvas-core';
 import { DiagramModel } from './models/DiagramModel';
@@ -271,4 +272,12 @@
 					zoom: zoomFactor,
-					x: canvasRect.width / 2 - ((nodesRect.getWidth() +(margin*2)) * zoomFactor) / 2 + margin,
-					y: canvasRect.height / 2 - ((nodesRect.getHeight() + (margin*2)) * zoomFactor) / 2 + margin
+					x:
+						canvasRect.width / 2 -
+						((nodesRect.getWidth() + margin * 2) * zoomFactor) / 2 +
+						margin -
+						nodesRect.getTopLeft().x,
+					y:
+						canvasRect.height / 2 -
+						((nodesRect.getHeight() + margin * 2) * zoomFactor) / 2 +
+						margin -
+						nodesRect.getTopLeft().y
 				};
@@ -275,0 +284,0 @@ };

No alert changes

Improved metrics

Total package byte prevSize

294894

increased by0.15%

Lines of code

3853

increased by0.39%

Dependency changes

• Updated@projectstorm/geometry@^6.5.2

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