total-diagram 0.9.6 → 0.9.7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020-2023 Dariusz Dawidowski
+Copyright (c) 2020-2024 Dariusz Dawidowski
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

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.6
+v0.9.7
 </p>
 
 [![build](https://github.com/dariuszdawidowski/total-diagram/actions/workflows/build.yml/badge.svg)](https://github.com/dariuszdawidowski/total-diagram/actions/workflows/build.yml)
@@ -55,4 +55,5 @@ https://unpkg.com/total-diagram@latest/dist/total-diagram.js
 
 # Authors
 
-Dariusz Dawidowski
+Dariusz Dawidowski\
+Jagoda Dawidowska

package/cypress/e2e/fundamentals.cy.js

@@ -0,0 +1,10 @@
+describe('Fundamentals test', () => {
+    it('passes', () => {
+        // Open website
+        cy.visit('http://127.0.0.1:8080/examples/e2e.html')
+        // Two Nodes
+        cy.get('.total-diagram-node.node').should('have.length', 2)
+        // One links
+        cy.get('.link').should('have.length', 1)
+    })
+})

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

package/cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});

package/dist/total-diagram.js

@@ -1,5 +1,6 @@
-class TotalDiagramNode{constructor(t={}){this.id="id"in t?t.id:crypto.randomUUID(),this.name="name"in t?t.name:null,this.transform={x:"x"in t?t.x:0,y:"y"in t?t.y:0,border:0,zindex:"zindex"in t?t.zindex:0,ox:0,oy:0,w:0,h:0,wmin:64,hmin:64,wmax:1024,hmax:1024,clear:()=>{this.transform.x=0,this.transform.y=0,this.transform.zindex=0,this.element.style.zIndex=0}},this.links={list:[],add:t=>{this.links.list.push(t)},del:t=>{const i=this.links.list.indexOf(t);-1!==i&&this.links.list.splice(i,1)},get:t=>"*"==t?this.links.list:"in"==t?this.links.list.filter((t=>t.end.id==this.id)):"out"==t?this.links.list.filter((t=>t.start.id==this.id)):"string"==typeof t?this.links.list.find((i=>i.id==t)):null,update:()=>{this.links.list.forEach((t=>t.update()))}},this.element=document.createElement("div"),this.element.classList.add("total-diagram-node"),this.element.style.zIndex=this.transform.zindex,this.element.dataset.id=this.id}destructor(){}awake(){}start(){}setSize(t){this.transform.w=t.width,this.transform.h=t.height,"minWidth"in t&&(this.transform.wmin=t.minWidth),"minHeight"in t&&(this.transform.hmin=t.minHeight),"maxWidth"in t&&(this.transform.wmax=t.maxWidth),"maxHeight"in t&&(this.transform.hmax=t.maxHeight),this.transform.border="border"in t?t.border:parseInt(getComputedStyle(this.element,null).getPropertyValue("border-left-width").replace("px",""))||0,this.setOrigin(),this.element.style.width=this.transform.w+"px",this.element.style.height=this.transform.h+"px"}getSize(){return{width:this.transform.w,height:this.transform.h,minWidth:this.transform.wmin,minHeight:this.transform.hmin,maxWidth:this.transform.wmax,maxHeight:this.transform.hmax}}setOrigin(){this.transform.ox=this.transform.w/2,this.transform.oy=this.transform.h/2}setPosition(t){this.transform.x=t.x,this.transform.y=t.y}getPosition(){return{x:this.transform.x,y:this.transform.y}}addPosition(t){this.transform.x+=t.x,this.transform.y+=t.y}subPosition(t){this.transform.x-=t.x,this.transform.y-=t.y}setStyle(t,i=null){null!==i&&(this.element.style[t]=i)}getStyle(t=null){return null!==t?this.element.style[t]:this.element.style}transparent(t){this.element.style.opacity=100==t?null:t/100}animated(t=!0){this.element.style.transition=t?"transform 0.5s ease-in-out":null}serialize(){return{id:this.id,type:this.constructor.name,x:this.transform.x,y:this.transform.y,w:this.transform.w,h:this.transform.h,zindex:this.transform.zindex}}setSortingZ(t){this.transform.zindex=t,this.element.style.zIndex=t}update(){this.element.style.transform=`translate(${this.transform.x-this.transform.ox}px, ${this.transform.y-this.transform.oy}px)`}}
+class AnonymousTraversalSource{constructor(r){this.traversalSourceClass=r}static traversal(r){return new AnonymousTraversalSource(r||GraphTraversalSource)}withLists(r,s){return new this.traversalSourceClass(r,s)}}class GraphTraversalSource{constructor(r,s){this.vertices=r,this.edges=s}V(r=null){return new GraphTraversal(this.vertices,r)}E(r=null){return new GraphTraversal(this.edges,r)}}class GraphTraversal{constructor(r,s=null){if(this.result=null,null==s)this.result=r;else if("object"==typeof s){let t=s;for(;t.parentNode;)"classList"in t&&t.classList.contains("total-diagram-node")&&(this.result=r.find((r=>r.id==t.dataset.id))),t=t.parentNode}else"function"==typeof node?this.result=r.filter((r=>r instanceof node)):"string"==typeof s&&(this.result=r.find((r=>r.id==s)))}hasNext(){return null!=this.result&&"Array"!=this.result.constructor.name}next(){return this.result}toList(){return"Array"!=this.result.constructor.name?[this.result]:this.result}}
+class TotalDiagramNode{constructor(t={}){this.id="id"in t?t.id:crypto.randomUUID(),this.name="name"in t?t.name:null,this.transform={x:"x"in t?t.x:0,y:"y"in t?t.y:0,border:0,zindex:"zindex"in t?t.zindex:0,ox:0,oy:0,w:0,h:0,wmin:64,hmin:64,wmax:1024,hmax:1024,clear:()=>{this.transform.x=0,this.transform.y=0,this.transform.zindex=0,this.element.style.zIndex=0}},this.links={list:[],add:t=>{-1===this.links.list.indexOf(t)&&this.links.list.push(t)},del:t=>{const s=this.links.list.indexOf(t);-1!==s&&this.links.list.splice(s,1)},get:t=>"*"==t?this.links.list:"in"==t?this.links.list.filter((t=>t.end.id==this.id)):"out"==t?this.links.list.filter((t=>t.start.id==this.id)):"string"==typeof t?this.links.list.find((s=>s.id==t)):null,update:()=>{this.links.list.forEach((t=>t.update()))}},this.element=document.createElement("div"),this.element.classList.add("total-diagram-node"),this.element.style.zIndex=this.transform.zindex,this.element.dataset.id=this.id}destructor(){}awake(){}start(){}setSize(t){this.transform.w=t.width,this.transform.h=t.height,"minWidth"in t&&(this.transform.wmin=t.minWidth),"minHeight"in t&&(this.transform.hmin=t.minHeight),"maxWidth"in t&&(this.transform.wmax=t.maxWidth),"maxHeight"in t&&(this.transform.hmax=t.maxHeight),this.transform.w<this.transform.wmin&&(this.transform.w=this.transform.wmin),this.transform.w>this.transform.wmax&&(this.transform.w=this.transform.wmax),this.transform.h<this.transform.hmin&&(this.transform.h=this.transform.hmin),this.transform.h>this.transform.hmax&&(this.transform.h=this.transform.hmax),this.transform.border="border"in t?t.border:parseInt(getComputedStyle(this.element,null).getPropertyValue("border-left-width").replace("px",""))||0,this.setOrigin(),this.element.style.width=this.transform.w+"px",this.element.style.height=this.transform.h+"px"}getSize(){return{width:this.transform.w,height:this.transform.h,minWidth:this.transform.wmin,minHeight:this.transform.hmin,maxWidth:this.transform.wmax,maxHeight:this.transform.hmax}}setOrigin(){this.transform.ox=this.transform.w/2,this.transform.oy=this.transform.h/2}setPosition(t){this.transform.x=t.x,this.transform.y=t.y}getPosition(){return{x:this.transform.x,y:this.transform.y}}addPosition(t){this.transform.x+=t.x,this.transform.y+=t.y}subPosition(t){this.transform.x-=t.x,this.transform.y-=t.y}setStyle(t,s=null){null!==s&&(this.element.style[t]=s)}getStyle(t=null){return null!==t?this.element.style[t]:this.element.style}transparent(t){this.element.style.opacity=100==t?null:t/100}animated(t=!0){this.element.style.transition=t?"transform 0.5s ease-in-out":null}serialize(){return{id:this.id,type:this.constructor.name,x:this.transform.x,y:this.transform.y,w:this.transform.w,h:this.transform.h,zindex:this.transform.zindex}}setSortingZ(t){this.transform.zindex=t,this.element.style.zIndex=t}update(){this.element.style.transform=`translate(${this.transform.x-this.transform.ox}px, ${this.transform.y-this.transform.oy}px)`}}
 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},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}pan(t,s){this.offset.x+=t,this.offset.y+=s,this.update()}zoom(t,s,e,i){let h=this.offset.z;this.offset.z=(this.offset.z-e/i*this.offset.z).clamp(.1,3),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=(this.offset.z*h).clamp(.1,3),o=this.offset.z/o;const n=this.board.getBoundingClientRect(),f=n.width/2+n.left-(t+e)/2,r=n.height/2+n.top-(s+i)/2;this.offset.x+=f*o-f,this.offset.y+=r*o-r,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()}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},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.x+=t,this.offset.y+=s,this.update()}zoom(t,s,i,e){let h=this.offset.z;this.offset.z=Math.max(.1,Math.min(3,this.offset.z-i/e*this.offset.z)),h=this.offset.z/h;const o=this.board.getBoundingClientRect(),n=o.width/2+o.left-t,r=o.height/2+o.top-s;this.offset.x+=n*h-n,this.offset.y+=r*h-r,this.update()}pinchZoom(t,s,i,e,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(),r=n.width/2+n.left-(t+i)/2,f=n.height/2+n.top-(s+e)/2;this.offset.x+=r*o-r,this.offset.y+=f*o-f,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",i="hard",e=null){"smooth"==i&&(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/(e.height+e.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"}}

package/examples/1_basic.html

@@ -72,6 +72,7 @@
         </div>
 
         <!-- Total Diagram library -->
+        <script type="text/javascript" src="../gremlin.js"></script>
         <script type="text/javascript" src="../render-node.js"></script>
         <script type="text/javascript" src="../render-link.js"></script>
         <script type="text/javascript" src="../manager-nodes.js"></script>

package/examples/2_node.html

@@ -105,6 +105,7 @@
         </div>
 
         <!-- Total Diagram library -->
+        <script type="text/javascript" src="../gremlin.js"></script>
         <script type="text/javascript" src="../render-node.js"></script>
         <script type="text/javascript" src="../render-link.js"></script>
         <script type="text/javascript" src="../manager-nodes.js"></script>

package/examples/3_link.html

@@ -114,6 +114,7 @@
         </div>
 
         <!-- Total Diagram library -->
+        <script type="text/javascript" src="../gremlin.js"></script>
         <script type="text/javascript" src="../render-node.js"></script>
         <script type="text/javascript" src="../render-link.js"></script>
         <script type="text/javascript" src="../manager-nodes.js"></script>

package/examples/4_navigation.html

@@ -0,0 +1,349 @@
+<!doctype html>
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Total Diagram Demo</title>
+        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+        <meta http-equiv="Pragma" content="no-cache">
+        <meta http-equiv="Expires" content="0">
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <style>
+
+            html, body {
+                width: 100%;    
+                height: 100%;
+                margin: 0;
+            }
+
+            #container {
+                position: relative;
+                margin: 0 auto;
+                display: block;
+                background-color: #060531;
+                width: 100%;
+                min-width: 640px;
+                height: 100%;
+                min-height: 480px;
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                -khtml-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                touch-action: none;
+                overflow: hidden;
+                font-family: Arial, sans-serif;
+            }
+
+            h3, p {
+                color: white;
+                text-align: center;
+            }
+
+            .node {
+                display: flex;
+                flex-direction: column;
+                position: absolute;
+                background-color: white;
+                border-radius: 8px;
+                border-bottom: 10px solid #f19331;
+            }
+
+            .node .titlebar {
+                color: white;
+                background-color: #f19331;
+                width: 100%;
+                height: 35px;
+                line-height: 35px;
+                text-align: center;
+                font-size: 16px;
+                font-weight: bold;
+                border-radius: 8px 8px 0 0;
+            }
+
+            .node .header {
+                color: #222;
+                text-align: left;
+                font-size: 14px;
+                margin: 12px 16px;
+                font-weight: bold;
+            }
+
+            .node .option {
+                color: #222;
+                background-color: #fff5f5;
+                text-align: left;
+                font-size: 14px;
+                margin: 8px 16px 0 16px;
+                padding: 10px;
+                border-radius: 8px;
+            }
+
+            .socket {
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                background-color: #fff5f5;
+                border: 2px solid #f19331;
+                border-radius: 50%;
+            }
+
+            .link {
+                position: absolute;
+                left: 0;
+                top: 0;
+                overflow: visible;
+                z-index: -1;
+            }
+
+            .link path {
+                pointer-events: none;
+                fill: none;
+                stroke: #e88f56;
+                stroke-width: 2;
+            }
+
+        </style>
+    </head>
+    <body>
+        <!-- Main diagram container -->
+        <div id="container">
+            <h3>4: Navigation demo</h3>
+            <p>How to navigate (pan and zoom) using mouse.</p>
+        </div>
+
+        <!-- Total Diagram library -->
+        <script type="text/javascript" src="../gremlin.js"></script>
+        <script type="text/javascript" src="../render-node.js"></script>
+        <script type="text/javascript" src="../render-link.js"></script>
+        <script type="text/javascript" src="../manager-nodes.js"></script>
+        <script type="text/javascript" src="../manager-links.js"></script>
+        <script type="text/javascript" src="../render.js"></script>
+
+        <script>
+
+            // Socket definition
+
+            class SocketPoint {
+
+                constructor(args) {
+
+                    // Store parent
+                    this.parent = args.parent;
+
+                    // Main element
+                    this.element = document.createElement('div');
+                    this.element.classList.add('socket');
+                    args.parent.element.append(this.element);
+
+                    // Position
+                    this.position = args.pos;            
+                    if ('top' in args.pos) this.element.style.top = args.pos.top + 'px';
+                    if ('left' in args.pos) this.element.style.left = args.pos.left + 'px';
+                    if ('right' in args.pos) this.element.style.right = args.pos.right + 'px';
+
+                }
+
+                getWorldPosition() {
+                    let x = 0;
+                    let y = this.parent.transform.y - (this.parent.transform.h / 2) + this.position.top + 5;
+                    if ('left' in this.position) {
+                        x = this.parent.transform.x - (this.parent.transform.w / 2) + this.position.left + 5;
+                    }
+                    else if ('right' in this.position) {
+                        x = this.parent.transform.x + (this.parent.transform.w / 2) + this.position.right + 5;
+                    }
+                    return {x, y};
+                }
+
+            }
+
+            // More advanced node definition
+
+            class NodeMoreAdvanced extends TotalDiagramNode {
+
+                constructor(args) {
+                    super(args);
+
+                    // Class
+                    this.element.classList.add('node');
+
+                    // Title bar
+                    this.titlebar = document.createElement('div');
+                    this.titlebar.classList.add('titlebar');
+                    this.titlebar.innerText = args.title || 'Node';
+                    this.element.append(this.titlebar);
+
+                    // Header
+                    this.header = document.createElement('div');
+                    this.header.classList.add('header');
+                    this.header.innerText = args.header || 'Header';
+                    this.element.append(this.header);
+
+                    // Options
+                    if ('options' in args) {
+                        args.options.forEach(text => {
+                            const option = document.createElement('div');
+                            option.classList.add('option');
+                            option.innerHTML = text;
+                            this.element.append(option);
+                        });
+                    }
+
+                    // Sockets
+                    this.socketIn = new SocketPoint({
+                        parent: this,
+                        pos: {left: -5, top: 11}
+                    });
+                    this.socketOut = new SocketPoint({
+                        parent: this,
+                        pos: {right: -5, top: 11}
+                    });
+
+                    // Size
+                    this.setSize({width: 200, height: 300});
+
+                    // Update
+                    this.update();
+                }
+            }
+
+            // Bezier curve link definition
+
+            class LinkBezier extends TotalDiagramLink {
+
+                constructor(args) {
+                    super(args);
+
+                    // SVG DOM element
+                    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                    this.element.appendChild(this.path);
+
+                    // Curvature
+                    this.curvature = 0.5;
+
+                    // Update
+                    this.update();
+                }
+
+                update() {
+
+                    // Start & end position
+                    const startPos = this.start.socketOut.getWorldPosition();
+                    const endPos = this.end.socketIn.getWorldPosition();
+                    let x1 = 0;
+                    let y1 = 0;
+                    let x2 = 0;
+                    let y2 = 0;
+
+                    // Left -> right
+                    if (this.start.transform.x <= this.end.transform.x) {
+                        x1 = startPos.x;
+                        y1 = startPos.y;
+                        x2 = endPos.x;
+                        y2 = endPos.y;
+                    }
+
+                    // Right -> left
+                    else {
+                        x1 = endPos.x;
+                        y1 = endPos.y;
+                        x2 = startPos.x;
+                        y2 = startPos.y;
+                    }
+
+                    // Calculate & render
+                    const hx1 = x1 + Math.abs(x2 - x1) * this.curvature;
+                    const hx2 = x2 - Math.abs(x2 - x1) * this.curvature;
+                    const angle = Math.atan2(y2 - y1, ((x2 + hx2) / 2) - ((x1 + hx1) / 2));
+                    this.path.setAttribute('d', `M ${x1} ${y1} C ${hx1} ${y1} ${hx2} ${y2} ${x2} ${y2}`);
+                }
+
+            }
+
+
+            function initEvents(render) {
+                const container = document.querySelector('#container');
+                let state = 0;
+
+                container.addEventListener('mousedown', (event) => {
+                    state = 1;
+                } );
+
+                container.addEventListener('mousemove', (event) => {
+                  
+                    if (state == 1) {
+                        render.pan(event.movementX, event.movementY);
+                    }
+                });
+
+                container.addEventListener('mouseup', (event) => {
+                    state = 0;
+                } );
+
+                container.addEventListener('mousewheel', (event) => {
+                    event.preventDefault();
+                    render.zoom(event.pageX, event.pageY, event.deltaY, 1000);
+                } );
+                
+            }
+
+            // Start
+
+            window.onload = function() {
+
+                // Create managers
+                const render = new TotalDiagramRenderHTML5({
+                    container: document.getElementById('container'),
+                    nodes: new TotalDiagramNodesManager(),
+                    links: new TotalDiagramLinksManager()
+                });
+
+                initEvents(render);
+
+                // Create first node
+                const node1 = new NodeMoreAdvanced({
+                    title: 'Node #1',
+                    header: 'Options for node 1:',
+                    options: [
+                        '<b>Option 1:</b> Hello',
+                        '<b>Option 2:</b> World',
+                        '<b>Option 3:</b> Lorem',
+                        '<b>Option 4:</b> Ipsum'
+                    ],
+                    x: -200,
+                    y: -50
+                });
+                render.nodes.add(node1);
+
+                // Create second node
+                const node2 = new NodeMoreAdvanced({
+                    title: 'Node #2',
+                    header: 'Options for node 2:',
+                    options: [
+                        '<b>Option 1:</b> Hello',
+                        '<b>Option 2:</b> World',
+                        '<b>Option 3:</b> Lorem',
+                        '<b>Option 4:</b> Ipsum'
+                    ],
+                    x: 200,
+                    y: 50
+                });
+                render.nodes.add(node2);
+
+                // Create link between them
+                const link1 = new LinkBezier({
+                    start: node1,
+                    end: node2
+                });
+                render.links.add(link1);
+
+                // Move to view central 0,0
+                render.center();
+
+            };
+        </script>
+
+    </body>
+</html>

package/examples/5_traversal.html

@@ -0,0 +1,263 @@
+<!doctype html>
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Total Diagram Demo</title>
+        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+        <meta http-equiv="Pragma" content="no-cache">
+        <meta http-equiv="Expires" content="0">
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <style>
+
+            html, body {
+                width: 100%;    
+                height: 100%;
+                margin: 0;
+            }
+
+            #container {
+                position: relative;
+                margin: 0 auto;
+                display: block;
+                background-color: #060531;
+                width: 100%;
+                min-width: 640px;
+                height: 100%;
+                min-height: 480px;
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                -khtml-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                touch-action: none;
+                overflow: hidden;
+                font-family: Arial, sans-serif;
+            }
+
+            h3, p {
+                color: white;
+                text-align: center;
+            }
+
+            .panel {
+                text-align: center;
+                color: white;
+                margin: 30px auto;
+            }
+
+            .node {
+                display: flex;
+                position: absolute;
+                color: #552603;
+                background-color: #e88f56;
+                border: 2px solid transparent;
+                border-radius: 50%;
+                align-items: center;
+                justify-content: center;
+                font-size: 14px;
+            }
+
+            .node.selected {
+                color: #fbfbfb;;
+                background-color: #eeab81;
+                border: 2px solid #ffc758;
+                box-shadow: 0 0 20px white;
+            }
+
+            .link {
+                position: absolute;
+                left: 0;
+                top: 0;
+                overflow: visible;
+                z-index: -1;
+            }
+
+            .link line {
+                pointer-events: none;
+                fill: #fff;
+                stroke: #fff;
+                stroke-width: 2;
+            }
+
+        </style>
+    </head>
+    <body>
+        <!-- Main diagram container -->
+        <div id="container">
+            <h3>5: Traversal demo</h3>
+            <p>How to use graph travesal query language system to select nodes.</p>
+            <div class="panel">
+                Select mode <select id="mode">
+                    <option>Single</option>
+                    <option>All</option>
+                    <option>Closest siblings</option>
+                    <option>Up to tree</option>
+                    <option>Down to tree</option>
+                </select> and click any node below
+            </div>
+        </div>
+
+        <!-- Total Diagram library -->
+        <script type="text/javascript" src="../gremlin.js"></script>
+        <script type="text/javascript" src="../render-node.js"></script>
+        <script type="text/javascript" src="../render-link.js"></script>
+        <script type="text/javascript" src="../manager-nodes.js"></script>
+        <script type="text/javascript" src="../manager-links.js"></script>
+        <script type="text/javascript" src="../render.js"></script>
+
+        <script>
+
+            // Default node definition
+
+            class NodeBall extends TotalDiagramNode {
+
+                constructor(args) {
+                    super(args);
+
+                    // Class
+                    this.element.classList.add('node');
+
+                    // Size
+                    this.setSize({width: 30, height: 30});
+
+                    // Inner text
+                    if ('text' in args) this.element.innerHTML = args.text;
+
+                    // Update
+                    this.update();
+
+                    // On click event
+                    if ('callback' in args) this.element.addEventListener('click', () => { args.callback(this.id) });
+                }
+            }
+
+            // Default link definition
+
+            class LinkLine extends TotalDiagramLink {
+
+                constructor(args) {
+                    super(args);
+
+                    // SVG DOM element
+                    this.line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+                    this.element.appendChild(this.line);
+
+                    // Update
+                    this.update();
+                }
+
+                update() {
+                    this.line.setAttribute('x1', this.start.transform.x);
+                    this.line.setAttribute('y1', this.start.transform.y);
+                    this.line.setAttribute('x2', this.end.transform.x);
+                    this.line.setAttribute('y2', this.end.transform.y);
+                }
+
+            }
+
+            // Main class
+
+            class Main {
+
+                constructor() {
+
+                    // Create managers
+                    this.render = new TotalDiagramRenderHTML5({
+                        container: document.getElementById('container'),
+                        nodes: new TotalDiagramNodesManager(),
+                        links: new TotalDiagramLinksManager()
+                    });
+
+                    // Create random diagram
+                    this.spawnNodes();
+
+                    // Move to view central 0,0
+                    this.render.center();
+
+                }
+
+                // Spawn
+
+                spawnNodes() {
+
+                    // Random spawn nodes
+                    for (let i = 0; i < 20; i++) {
+
+                        const node = new NodeBall({
+                            x: this.randomRangeInt(-400, 400),
+                            y: this.randomRangeInt(-400, 200),
+                            text: this.randomLetter(),
+                            callback: this.nodeClicked.bind(this)
+                        });
+                        this.render.nodes.add(node);
+
+                    }
+
+                    // Random links
+                    for (let i = 0; i < 20; i++) {
+                        const node1 = this.render.nodes.list[this.randomRangeInt(0, this.render.nodes.list.length - 1)];
+                        const node2 = this.render.nodes.list[this.randomRangeInt(0, this.render.nodes.list.length - 1)];
+                        if (node1.id == node2.id) continue;
+                        const link = new LinkLine({
+                            start: node1,
+                            end: node2
+                        });
+                        this.render.links.add(link);
+                    }
+
+                }
+
+                // Utils
+
+                randomRangeInt(min, max) {
+                    return Math.floor(Math.random() * (max - min + 1)) + min;
+                }
+
+                randomLetter() {
+                    const randomIndex = Math.floor(Math.random() * 26);
+                    const randomLetter = String.fromCharCode(65 + randomIndex);
+                    return randomLetter;
+                }
+
+                // Render nodes
+
+                nodesClear() {
+                    document.querySelectorAll('.node').forEach(node => {
+                        node.classList.remove('selected');
+                    });
+                }
+
+                nodeClicked(id) {
+                    this.nodesClear();
+
+                    const mode = document.querySelector('#mode');
+                    switch (mode.value) {
+                        case 'Single':
+                            const node = this.render.g.V(id).next();
+                            if (node) node.element.classList.add('selected');
+                            break;
+                        case 'All':
+                            for (const node of this.render.g.V().toList()) {
+                                node.element.classList.add('selected');
+                            }
+                            break;
+                    }
+
+                }
+
+            }
+
+            // Start
+
+            window.onload = function() {
+
+                const main = new Main();
+
+            };
+
+        </script>
+
+    </body>
+</html>

package/examples/e2e.html

@@ -0,0 +1,193 @@
+<!doctype html>
+
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Total Diagram Demo</title>
+        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+        <meta http-equiv="Pragma" content="no-cache">
+        <meta http-equiv="Expires" content="0">
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <style>
+
+            html, body {
+                width: 100%;    
+                height: 100%;
+                margin: 0;
+            }
+
+            #container {
+                position: relative;
+                margin: 0 auto;
+                display: block;
+                background-color: #060531;
+                width: 100%;
+                min-width: 640px;
+                height: 100%;
+                min-height: 480px;
+                -webkit-touch-callout: none;
+                -webkit-user-select: none;
+                -khtml-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                touch-action: none;
+                overflow: hidden;
+                font-family: Arial, sans-serif;
+            }
+
+            h3, p {
+                color: white;
+                text-align: center;
+            }
+
+            .node {
+                display: flex;
+                position: absolute;
+                background-color: #e88f56;
+            }
+
+            .link {
+                position: absolute;
+                left: 0;
+                top: 0;
+                overflow: visible;
+                z-index: -1;
+            }
+
+            .link line {
+                pointer-events: none;
+                fill: #fff;
+                stroke: #fff;
+                stroke-width: 2;
+            }
+
+        </style>
+    </head>
+    <body>
+        <!-- Main diagram container -->
+        <div id="container">
+            <h3>E2E test</h3>
+            <p>Testing sandbox for Cypress</p>
+            <p>
+                <button id="addNodeButton">add node</button>
+                <button id="delNodeButton">delete node</button>
+                <button id="addLinkButton">add link</button>
+                <button id="delLinkButton">delete link</button>
+            </p>
+        </div>
+
+        <!-- Total Diagram library -->
+        <script type="text/javascript" src="../gremlin.js"></script>
+        <script type="text/javascript" src="../render-node.js"></script>
+        <script type="text/javascript" src="../render-link.js"></script>
+        <script type="text/javascript" src="../manager-nodes.js"></script>
+        <script type="text/javascript" src="../manager-links.js"></script>
+        <script type="text/javascript" src="../render.js"></script>
+
+        <script>
+
+            // Default node definition
+
+            class NodeSquare extends TotalDiagramNode {
+
+                constructor(args) {
+                    super(args);
+
+                    // Class
+                    this.element.classList.add('node');
+
+                    // Size
+                    this.setSize({width: 50, height: 50});
+
+                    // Update
+                    this.update();
+                }
+            }
+
+            // Default link definition
+
+            class LinkLine extends TotalDiagramLink {
+
+                constructor(args) {
+                    super(args);
+
+                    // SVG DOM element
+                    this.line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+                    this.element.appendChild(this.line);
+
+                    // Update
+                    this.update();
+                }
+
+                update() {
+                    this.line.setAttribute('x1', this.start.transform.x);
+                    this.line.setAttribute('y1', this.start.transform.y);
+                    this.line.setAttribute('x2', this.end.transform.x);
+                    this.line.setAttribute('y2', this.end.transform.y);
+                }
+
+            }
+
+            // Start
+
+            window.onload = function() {
+
+                // Create managers
+                const render = new TotalDiagramRenderHTML5({
+                    container: document.getElementById('container'),
+                    nodes: new TotalDiagramNodesManager(),
+                    links: new TotalDiagramLinksManager()
+                });
+
+                // // Create first node
+                // const node1 = new NodeSquare({
+                //     x: -150,
+                //     y: -150
+                // });
+                // render.nodes.add(node1);
+                //
+                // // Create second node
+                // const node2 = new NodeSquare({
+                //     x: 150,
+                //     y: 150
+                // });
+                // render.nodes.add(node2);
+                //
+                // // Create link between them
+                // const link1 = new LinkLine({
+                //     start: node1,
+                //     end: node2
+                // });
+                // render.links.add(link1);
+
+                const addNodeButton = document.querySelector("#addNodeButton");
+                const delNodeButton = document.querySelector("#delNodeButton");
+                const addLinkButton = document.querySelector("#addLinkButton");
+                const delLinkButton = document.querySelector("#delLinkButton");
+
+                addNodeButton.addEventListener('click', () => {
+
+                    console.log("add new node");
+                });
+
+                delNodeButton.addEventListener('click', () => {
+                    console.log("del old node");
+                });
+
+                addLinkButton.addEventListener('click', () => {
+                    console.log("add new lnk");
+                });
+
+                delLinkButton.addEventListener('click', () => {
+                    console.log("del old lnk");
+                });
+
+                // Move to view central 0,0
+                render.center();
+
+            };
+        </script>
+
+    </body>
+</html>

package/gremlin.js

@@ -0,0 +1,107 @@
+/***************************************************************************************************
+ *        .         .                                                                              *
+ *       / \__***__/ \        Gremlin Light (ultra lightweight version)                            *
+ *      ( I /     \ I )       Graph travesal query language system                                 *
+ *       \_|  O.O  |_/        Syntax inspired by Apache TinkerPop™ Gremlin Query Language          *
+ *          \ ___ /           MIT License                                                          *
+ *          \_V___/           Copyright (c) 2023 Dariusz Dawidowski                                *
+ *                                                                                                 *
+ **************************************************************************************************/
+
+/*
+    Example:
+
+    const traversal = AnonymousTraversalSource.traversal;
+    const g = traversal().withLists(render.nodes.list, render.links.list);
+    const allVertices = g.V().toList();
+    console.log(allVertices);
+
+*/
+
+
+// https://github.com/apache/tinkerpop/blob/master/gremlin-javascript/src/main/javascript/gremlin-javascript/lib/process/anonymous-traversal.js
+
+class AnonymousTraversalSource {
+
+	constructor(traversalSourceClass) {
+	    this.traversalSourceClass = traversalSourceClass;
+	}
+
+    static traversal(traversalSourceClass) {
+        return new AnonymousTraversalSource(traversalSourceClass || GraphTraversalSource);
+    }
+
+    withLists(vertices, edges) {
+    	return new this.traversalSourceClass(vertices, edges);
+    }
+
+}
+
+
+// https://tinkerpop.apache.org/javadocs/current/core/org/apache/tinkerpop/gremlin/process/traversal/dsl/graph/GraphTraversalSource.html
+
+class GraphTraversalSource {
+
+    constructor(vertices, edges) {
+    	this.vertices = vertices;
+    	this.edges = edges;
+    }
+
+	V(query = null) {
+		return new GraphTraversal(this.vertices, query);
+	}
+
+	E(query = null) {
+		return new GraphTraversal(this.edges, query);
+	}
+
+}
+
+
+// https://tinkerpop.apache.org/javadocs/current/full/org/apache/tinkerpop/gremlin/process/traversal/dsl/graph/GraphTraversal.html
+
+class GraphTraversal {
+
+	constructor(list, query = null) {
+
+		// Query result list
+		this.result = null;
+
+        // All
+        if (query == null) this.result = list;
+
+        // Find one node by giving DOM element
+        else if (typeof(query) == 'object') {
+            // Traverse DOM
+            let target = query;
+            while (target.parentNode) {
+                if ('classList' in target && target.classList.contains('total-diagram-node')) {
+                    // Found
+                    this.result = list.find(n => n.id == target.dataset.id);
+                }
+                target = target.parentNode;
+            }
+        }
+
+        // Find by giving class type
+        else if (typeof(node) == 'function') this.result = list.filter(n => n instanceof node);
+
+		// Find by ID string
+        else if (typeof(query) == 'string') this.result = list.find(n => n.id == query);
+
+	}
+
+    hasNext() {
+        return (this.result != null && this.result.constructor.name != 'Array');
+    }
+
+    next() {
+        return this.result;
+    }
+
+	toList() {
+        if (this.result.constructor.name != 'Array') return [this.result];
+        return this.result;
+	}
+
+}

package/package.json

@@ -1,17 +1,19 @@
 {
 	"name": "total-diagram",
-	"version": "0.9.6",
+	"version": "0.9.7",
 	"description": "Simple, powerful, extensible and fast JavaScript/ES8 diagram renderer for web browsers.",
 	"license": "MIT",
 	"scripts": {
 		"build:bundle": "node build.js",
 		"build": "npm-run-all build:bundle",
-		"start": "npm-run-all build"
+		"start": "npm-run-all build",
+		"test": "cypress open"
 	},
 	"devDependencies": {
-		"npm-run-all": "^4.1.5",
-		"fs": "^0.0.1-security",
+		"cypress": "^13.0.0",
 		"ejs": "^3.1.9",
+		"fs": "^0.0.1-security",
+		"npm-run-all": "^4.1.5",
 		"terser": "^5.17.3"
 	}
 }

package/render-node.js

@@ -65,11 +65,14 @@ class TotalDiagramNode {
         // Links
         this.links = {
 
-            list: [], // [TotalDiagramLink, ...]
+            // List of links [TotalDiagramLink, ...]
+            list: [],
 
             // Assign to link
             add: (link) => {
-                this.links.list.push(link);
+                // Maybe already added during blossoming
+                const index = this.links.list.indexOf(link);
+                if (index === -1) this.links.list.push(link);
             },
 
             // Unassign from a link
@@ -151,8 +154,16 @@ class TotalDiagramNode {
         if ('minHeight' in size) this.transform.hmin = size.minHeight;
         if ('maxWidth' in size) this.transform.wmax = size.maxWidth;
         if ('maxHeight' in size) this.transform.hmax = size.maxHeight;
-        if ('border' in size) this.transform.border = size.border;
-        else this.transform.border = parseInt(getComputedStyle(this.element, null).getPropertyValue('border-left-width').replace('px', '')) || 0;
+        if (this.transform.w < this.transform.wmin) this.transform.w = this.transform.wmin;
+        if (this.transform.w > this.transform.wmax) this.transform.w = this.transform.wmax;
+        if (this.transform.h < this.transform.hmin) this.transform.h = this.transform.hmin;
+        if (this.transform.h > this.transform.hmax) this.transform.h = this.transform.hmax;
+        if ('border' in size) {
+            this.transform.border = size.border;
+        }
+        else {
+            this.transform.border = parseInt(getComputedStyle(this.element, null).getPropertyValue('border-left-width').replace('px', '')) || 0;
+        }
         this.setOrigin();
         this.element.style.width = this.transform.w + 'px';
         this.element.style.height = this.transform.h + 'px';

package/render.js

@@ -30,11 +30,11 @@ class TotalDiagramRenderHTML5 {
         this.board.style.overflow = 'visible';
         this.container.appendChild(this.board);
 
-        // Board dimensions
+        // Render area window dimensions
         this.size = this.container.getBoundingClientRect();
         this.size.center = {x: this.size.width / 2, y: this.size.height / 2};
 
-        // Board margins
+        // Render area window margins
         this.margin = {
             left: this.size.left - document.documentElement.scrollLeft,
             top: this.size.top - document.documentElement.scrollTop,
@@ -60,6 +60,11 @@ class TotalDiagramRenderHTML5 {
         // Link
         this.links = args.links;
         this.links.render = this;
+
+        // Gremlin
+        const traversal = AnonymousTraversalSource.traversal;
+        this.g = traversal().withLists(this.nodes.list, this.links.list);
+
     }
 
     /**
@@ -84,7 +89,7 @@ class TotalDiagramRenderHTML5 {
 
     zoom(x, y, deltaZ, factorZ) {
         let deltaZoom = this.offset.z;
-        this.offset.z = (this.offset.z - (deltaZ / factorZ) * this.offset.z).clamp(0.1, 3.0);
+        this.offset.z = Math.max(0.1, Math.min(3.0, this.offset.z - (deltaZ / factorZ) * this.offset.z));
         deltaZoom = this.offset.z / deltaZoom;
 
         const boundingRect = this.board.getBoundingClientRect();
@@ -107,7 +112,7 @@ class TotalDiagramRenderHTML5 {
 
     pinchZoom(x1, y1, x2, y2, deltaZ) {
         let deltaZoom = this.offset.z;
-        this.offset.z = (this.offset.z * deltaZ).clamp(0.1, 3.0);
+        this.offset.z = Math.max(0.1,Math.min(3.0, this.offset.z * deltaZ));
         deltaZoom = this.offset.z / deltaZoom;
 
         const boundingRect = this.board.getBoundingClientRect();
@@ -177,6 +182,60 @@ class TotalDiagramRenderHTML5 {
         this.update();
     }
 
+    /**
+     * Focus on content
+     */
+
+    focusBounds() {
+        const bbox = this.getBounds(this.nodes.get('*').filter(node => node.parent == this.nodes.parent));
+        const scale = {
+            x: this.size.width / bbox.width,
+            y: this.size.height / bbox.height,
+            avg: function() {
+                return (this.x + this.y) / 2;
+            }
+        };
+        this.offset.z = bbox.isZero() ? 1 : Math.min(Math.max(scale.avg(), 0.3), 1.0);
+        this.offset.x = (-bbox.x * this.offset.z) + this.size.center.x;
+        this.offset.y = (-bbox.y * this.offset.z) + this.size.center.y;
+        this.update();
+    }
+
+    /**
+     * Calculate bound box
+     * nodes: all given nodes
+     */
+
+    getBounds(nodes) {
+        const bbox = {
+            left: Infinity,   // -x world coords
+            right: -Infinity,  // +x world coords
+            top: Infinity,    // -y world coords
+            bottom: -Infinity, // +y world coords
+            x: 0,      // center x (world coords)
+            y: 0,      // center y (world coords)
+            width: 0,  // size x
+            height: 0, // size y
+            isZero: function() {
+                for (let key in this) {
+                    if (key !== 'isZero' && Math.abs(this[key]) > Number.EPSILON) return false;
+                }
+                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);
+        });
+        bbox.width = bbox.right - bbox.left;
+        bbox.height = bbox.bottom - bbox.top;
+        bbox.x = bbox.left + (bbox.width / 2);
+        bbox.y = bbox.top + (bbox.height / 2);
+        return bbox;
+    }
+
     /**
      * Delete all nodes and links and clear DOM
      */

package/total-diagram.js.ejs

@@ -1,3 +1,4 @@
+<%- await minjs('gremlin.js') %>
 <%- await minjs('render-node.js') %>
 <%- await minjs('manager-nodes.js') %>
 <%- await minjs('render-link.js') %>