total-diagram 0.9.8 → 0.9.9

package/README.md

@@ -8,7 +8,7 @@ Total Diagram
 Simple, powerful, extensible and fast JavaScript/ES8 diagram renderer for web browsers.
 </p>
 <p align="center">
-v0.9.8
+v0.9.9
 </p>
 
 [![build](https://github.com/dariuszdawidowski/total-diagram/actions/workflows/build.yml/badge.svg)](https://github.com/dariuszdawidowski/total-diagram/actions/workflows/build.yml)

package/dist/total-diagram.js

@@ -3,4 +3,4 @@ class TotalDiagramNode{constructor(t={}){this.id="id"in t?t.id:crypto.randomUUID
 class TotalDiagramNodesManager{constructor(){this.render=null,this.list=[]}add(t){this.list.push(t),this.render.board.append(t.element),t.awake();const e=new CustomEvent("broadcast:addnode",{detail:t});this.render.container.dispatchEvent(e)}del(t){if("*"!=t){const e=t.links.get("*");for(;e.length;){const t=e.pop();this.render.links.del(t)}t.destructor(),t.element.remove();const s=this.list.indexOf(t);-1!==s&&this.list.splice(s,1);const n=new CustomEvent("broadcast:delnode",{detail:t});this.render.container.dispatchEvent(n)}else if("*"==t){this.list.forEach((t=>{t.destructor(),t.element.remove()})),this.list.length=0;const t=new CustomEvent("broadcast:delnodes",{detail:"*"});this.render.container.dispatchEvent(t)}}get(t){if("*"==t)return this.list;if(null!=t&&"object"==typeof t){let e=t;for(;e.parentNode;){if("classList"in e&&e.classList.contains("total-diagram-node"))return this.get(e.dataset.id);e=e.parentNode}}else{if("function"==typeof t)return this.list.filter((e=>e instanceof t));if("string"==typeof t)return this.list.find((e=>e.id==t))}return null}}
 class TotalDiagramLink{constructor(t){this.id="id"in t?t.id:crypto.randomUUID(),this.start=t.start,this.start.links.add(this),this.end=t.end,this.end.links.add(this),this.element=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.element.classList.add("link"),this.element.dataset.id=this.id}destructor(){this.start&&this.start.links.del(this),this.end&&this.end.links.del(this)}serialize(){return{id:this.id,type:this.constructor.name,start:this.start.id,end:this.end.id}}transparent(t){this.element.style.opacity=100==t?null:t/100}update(){}}
 class TotalDiagramLinksManager{constructor(){this.render=null,this.list=[]}add(t){if(!t.start||!t.end)return null;this.list.push(t),this.render.board.append(t.element);const e=new CustomEvent("broadcast:addlink",{detail:t});this.render.container.dispatchEvent(e)}del(t){if("*"!=t){t.destructor(),t.element.remove();const e=this.list.indexOf(t);-1!==e&&this.list.splice(e,1);const n=new CustomEvent("broadcast:dellink",{detail:t});this.render.container.dispatchEvent(n)}else{this.list.forEach((t=>{t.destructor(),t.element.remove()})),this.list.length=0;const t=new CustomEvent("broadcast:delnodes",{detail:"*"});this.render.container.dispatchEvent(t)}}get(t,e=null){if("*"==t)return this.list;if(e){for(const n of t.links.get("*"))for(const t of e.links.get("*"))if(n.id==t.id)return n;return null}return"string"==typeof t?this.list.find((e=>e.element.dataset.id==t)):"function"==typeof t?this.list.filter((e=>e instanceof t)):"object"==typeof t&&"dataset"in t?this.get(t.dataset.id):null}}
-class TotalDiagramRenderHTML5{constructor(t){this.container=t.container,this.board=document.createElement("div"),this.board.id="total-diagram-attach",this.board.style.transformOrigin="0px 0px",this.board.style.width=0,this.board.style.height=0,this.board.style.overflow="visible",this.container.appendChild(this.board),this.size=this.container.getBoundingClientRect(),this.size.center={x:this.size.width/2,y:this.size.height/2},this.margin={left:this.size.left-document.documentElement.scrollLeft,top:this.size.top-document.documentElement.scrollTop},this.offset={x:0,y:0,z:1,delta:{x:0,y:0,length:function(){return Math.sqrt(this.x**2+this.y**2)}},timestamp:0,speed:0,add:function(t,s){this.delta.x=t,this.delta.y=s,this.x+=t,this.y+=s,this.calcSpeed()},calcSpeed:function(t=4e3){const s=Date.now();0==this.timestamp&&(this.timestamp=s);const e=s-this.timestamp;this.timestamp=s,this.speed=(this.speed+Math.min(t,this.delta.length()/(e/1e3)))/2}},window.addEventListener("resize",(()=>{this.size=this.container.getBoundingClientRect(),this.size.center={x:this.size.width/2,y:this.size.height/2}})),this.nodes=t.nodes,this.nodes.render=this,this.links=t.links,this.links.render=this;const s=AnonymousTraversalSource.traversal;this.g=s().withLists(this.nodes.list,this.links.list)}pan(t,s){this.offset.add(t,s),this.update()}damp(t=.97,s=300){this.offset.calcSpeed();const e=()=>{this.offset.delta.x*=t,this.offset.delta.y*=t,this.offset.x+=this.offset.delta.x/window.devicePixelRatio,this.offset.y+=this.offset.delta.y/window.devicePixelRatio,this.update(),(Math.abs(this.offset.delta.x)>.1||Math.abs(this.offset.delta.y)>.1)&&requestAnimationFrame(e)};this.offset.speed>s&&e()}zoom(t,s,e,i){this.offset.delta.x=0,this.offset.delta.y=0;let h=this.offset.z;this.offset.z=Math.max(.1,Math.min(3,this.offset.z-e/i*this.offset.z)),h=this.offset.z/h;const o=this.board.getBoundingClientRect(),n=o.width/2+o.left-t,f=o.height/2+o.top-s;this.offset.x+=n*h-n,this.offset.y+=f*h-f,this.update()}pinchZoom(t,s,e,i,h){let o=this.offset.z;this.offset.z=Math.max(.1,Math.min(3,this.offset.z*h)),o=this.offset.z/o;const n=this.board.getBoundingClientRect(),f=n.width/2+n.left-(t+e)/2,a=n.height/2+n.top-(s+i)/2;this.offset.x+=f*o-f,this.offset.y+=a*o-a,this.update()}screen2World(t){return{x:Math.round((t.x-this.offset.x)/this.offset.z-this.margin.left),y:Math.round((t.y-this.offset.y)/this.offset.z-this.margin.top)}}world2Screen(t){return{x:Math.round(this.offset.x+t.x*this.offset.z-this.margin.left),y:Math.round(this.offset.y+t.y*this.offset.z-this.margin.top)}}center(t={x:0,y:0},s="none",e="hard",i=null){"smooth"==e&&(this.board.style.transition="transform 1s",setInterval((()=>{this.board.style.removeProperty("transition")}),1e3)),"reset"==s?this.offset.z=1:"focus"==s&&(this.offset.z=this.size.height/(i.height+i.margin)),this.offset.x=-t.x*this.offset.z+this.size.center.x,this.offset.y=-t.y*this.offset.z+this.size.center.y,this.update()}centerZoom(){this.offset.z=1,this.update()}focusBounds(){const t=this.getBounds(this.nodes.get("*").filter((t=>t.parent==this.nodes.parent))),s={x:this.size.width/t.width,y:this.size.height/t.height,avg:function(){return(this.x+this.y)/2}};this.offset.z=t.isZero()?1:Math.min(Math.max(s.avg(),.3),1),this.offset.x=-t.x*this.offset.z+this.size.center.x,this.offset.y=-t.y*this.offset.z+this.size.center.y,this.update()}getBounds(t){const s={left:1/0,right:-1/0,top:1/0,bottom:-1/0,x:0,y:0,width:0,height:0,isZero:function(){for(let t in this)if("isZero"!==t&&Math.abs(this[t])>Number.EPSILON)return!1;return!0}};return t.forEach((t=>{s.left=Math.min(t.transform.x-t.transform.w/2,s.left),s.top=Math.min(t.transform.y-t.transform.h/2,s.top),s.right=Math.max(t.transform.x+t.transform.w/2,s.right),s.bottom=Math.max(t.transform.y+t.transform.h/2,s.bottom)})),s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left+s.width/2,s.y=s.top+s.height/2,s}clear(){this.board.innerHTML="",this.links.del("*"),this.nodes.del("*")}update(){this.board.style.transform=`translate(${this.offset.x}px, ${this.offset.y}px) scale(${this.offset.z})`}redraw(){this.container.style.display="none";this.container.offsetHeight;this.container.style.display="block"}}
+class TotalDiagramRenderHTML5{constructor(t){this.container=t.container,this.board=document.createElement("div"),this.board.id="total-diagram-attach",this.board.style.transformOrigin="0px 0px",this.board.style.width=0,this.board.style.height=0,this.board.style.overflow="visible",this.container.appendChild(this.board),this.size=this.container.getBoundingClientRect(),this.size.center={x:this.size.width/2,y:this.size.height/2},this.margin={left:this.size.left-document.documentElement.scrollLeft,top:this.size.top-document.documentElement.scrollTop},this.offset={x:0,y:0,z:1,delta:{x:0,y:0,length:function(){return Math.sqrt(this.x**2+this.y**2)}},timestamp:0,speed:0,add:function(t,s){this.delta.x=t,this.delta.y=s,this.x+=t,this.y+=s,this.calcSpeed()},calcSpeed:function(t=4e3){const s=Date.now();0==this.timestamp&&(this.timestamp=s);const e=s-this.timestamp;this.timestamp=s,this.speed=(this.speed+Math.min(t,this.delta.length()/(e/1e3)))/2}},window.addEventListener("resize",(()=>{this.size=this.container.getBoundingClientRect(),this.size.center={x:this.size.width/2,y:this.size.height/2}})),this.nodes=t.nodes,this.nodes.render=this,this.links=t.links,this.links.render=this;const s=AnonymousTraversalSource.traversal;this.g=s().withLists(this.nodes.list,this.links.list)}pan(t,s){this.offset.add(t,s),this.update()}damp(t=.97,s=300){this.offset.calcSpeed();const e=()=>{this.offset.delta.x*=t,this.offset.delta.y*=t,this.offset.x+=this.offset.delta.x/window.devicePixelRatio,this.offset.y+=this.offset.delta.y/window.devicePixelRatio,this.update(),(Math.abs(this.offset.delta.x)>.1||Math.abs(this.offset.delta.y)>.1)&&requestAnimationFrame(e)};this.offset.speed>s&&e()}zoom(t,s,e,i){this.offset.delta.x=0,this.offset.delta.y=0;let h=this.offset.z;this.offset.z=Math.max(.1,Math.min(3,this.offset.z-e/i*this.offset.z)),h=this.offset.z/h;const o=this.board.getBoundingClientRect(),n=o.width/2+o.left-t,f=o.height/2+o.top-s;this.offset.x+=n*h-n,this.offset.y+=f*h-f,this.update()}pinchZoom(t,s,e,i,h){let o=this.offset.z;this.offset.z=Math.max(.1,Math.min(3,this.offset.z*h)),o=this.offset.z/o;const n=this.board.getBoundingClientRect(),f=n.width/2+n.left-(t+e)/2,a=n.height/2+n.top-(s+i)/2;this.offset.x+=f*o-f,this.offset.y+=a*o-a,this.update()}screen2World(t){return{x:Math.round((t.x-this.offset.x)/this.offset.z-this.margin.left),y:Math.round((t.y-this.offset.y)/this.offset.z-this.margin.top)}}world2Screen(t){return{x:Math.round(this.offset.x+t.x*this.offset.z-this.margin.left),y:Math.round(this.offset.y+t.y*this.offset.z-this.margin.top)}}center(t={x:0,y:0},s="none",e="hard",i=null){"smooth"==e&&(this.board.style.transition="transform 1s",setInterval((()=>{this.board.style.removeProperty("transition")}),1e3)),"reset"==s?this.offset.z=1:"focus"==s&&(this.offset.z=this.size.height/(i.height+i.margin)),this.offset.x=-t.x*this.offset.z+this.size.center.x,this.offset.y=-t.y*this.offset.z+this.size.center.y,this.update()}centerZoom(){this.offset.z=1,this.update()}focusBounds(){const t=this.getBounds(this.nodes.get("*").filter((t=>t.parent==this.nodes.parent))),s={x:this.size.width/t.width,y:this.size.height/t.height,avg:function(){return(this.x+this.y)/2}};this.offset.z=t.isZero()?1:Math.min(Math.max(s.avg(),.3),1),this.offset.x=-t.x*this.offset.z+this.size.center.x,this.offset.y=-t.y*this.offset.z+this.size.center.y,this.update()}getBounds(t){const s={left:1/0,right:-1/0,top:1/0,bottom:-1/0,x:0,y:0,width:0,height:0,isZero:function(){for(let t in this)if("isZero"!==t&&Math.abs(this[t])>Number.EPSILON)return!1;return!0}};return t.length?t.forEach((t=>{s.left=Math.min(t.transform.x-t.transform.w/2,s.left),s.top=Math.min(t.transform.y-t.transform.h/2,s.top),s.right=Math.max(t.transform.x+t.transform.w/2,s.right),s.bottom=Math.max(t.transform.y+t.transform.h/2,s.bottom)})):(s.left=0,s.right=0,s.top=0,s.bottom=0),s.width=s.right-s.left,s.height=s.bottom-s.top,s.x=s.left+s.width/2,s.y=s.top+s.height/2,s}clear(){this.board.innerHTML="",this.links.del("*"),this.nodes.del("*")}update(){this.board.style.transform=`translate(${this.offset.x}px, ${this.offset.y}px) scale(${this.offset.z})`}redraw(){this.container.style.display="none";this.container.offsetHeight;this.container.style.display="block"}}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "total-diagram",
-	"version": "0.9.8",
+	"version": "0.9.9",
 	"description": "Simple, powerful, extensible and fast JavaScript/ES8 diagram renderer for web browsers.",
 	"license": "MIT",
 	"scripts": {

package/render.js

@@ -272,12 +272,21 @@ class TotalDiagramRenderHTML5 {
                 return true;
             }
         };
-        nodes.forEach(node => {
-            bbox.left = Math.min(node.transform.x - (node.transform.w / 2), bbox.left);
-            bbox.top = Math.min(node.transform.y - (node.transform.h / 2), bbox.top);
-            bbox.right = Math.max(node.transform.x + (node.transform.w / 2), bbox.right);
-            bbox.bottom = Math.max(node.transform.y + (node.transform.h / 2), bbox.bottom);
-        });
+        if (nodes.length) {
+            nodes.forEach(node => {
+                bbox.left = Math.min(node.transform.x - (node.transform.w / 2), bbox.left);
+                bbox.top = Math.min(node.transform.y - (node.transform.h / 2), bbox.top);
+                bbox.right = Math.max(node.transform.x + (node.transform.w / 2), bbox.right);
+                bbox.bottom = Math.max(node.transform.y + (node.transform.h / 2), bbox.bottom);
+            });
+        }
+        // No nodes
+        else {
+            bbox.left = 0;
+            bbox.right = 0;
+            bbox.top = 0;
+            bbox.bottom = 0;
+        }
         bbox.width = bbox.right - bbox.left;
         bbox.height = bbox.bottom - bbox.top;
         bbox.x = bbox.left + (bbox.width / 2);