total-diagram 0.9.3 → 0.9.5

package/README.md

@@ -6,10 +6,10 @@ Total Diagram
 </h1>
 <p align="center">
 Simple, powerful, extensible and fast JavaScript/ES8 diagram renderer for web browsers.
-<p>
+</p>
 <p align="center">
-v0.9.3
-<p>
+v0.9.5
+</p>
 
 [![build](https://github.com/dariuszdawidowski/total-diagram/actions/workflows/build.yml/badge.svg)](https://github.com/dariuszdawidowski/total-diagram/actions/workflows/build.yml)
 [![npm](https://img.shields.io/npm/v/total-diagram)](https://www.npmjs.com/package/total-diagram)
@@ -20,7 +20,11 @@ v0.9.3
 A library for rendering diagrams consisting of nodes and links.
 Designed for simplicity, it can be the basis for creating a diagramming application or data representation on a website.
 
-For more details look into examples/ directory. You can find self-explanatory tutorials there.
+<img src="./total-diagram-showcase.png" alt="" />
+
+# Quick Start
+
+For more details look into 'examples/' directory. You can find self-explanatory tutorials there.
 
 # Features
 
@@ -33,4 +37,12 @@ For more details look into examples/ directory. You can find self-explanatory tu
 npm install
 npm run build
 ```
-Note: This is browser-centric vanilla JavaScript library, npm is only used to minify and bundle files into one.
+Note: This is browser-centric vanilla JavaScript library, npm is only used to minify and bundle files.
+
+# Load from CDN
+
+https://unpkg.com/total-diagram@latest/dist/total-diagram.js
+
+# Authors
+
+Dariusz Dawidowski

package/build.js

@@ -1,10 +1,14 @@
 /**
- * Build script
+ * Build script v6-custom
  */
 
+const files = [
+    { src: 'total-diagram.js.ejs', dst: 'total-diagram.js' },
+];
+
 const fs = require('fs');
-const ejs = require('ejs');
 const { readFile } = require('fs').promises;
+const ejs = require('ejs');
 const { minify } = require('terser');
 
 const minjs = async (filePath) => {
@@ -19,5 +23,11 @@ const minjs = async (filePath) => {
     }
 };
 
-ejs.render(fs.readFileSync('total-diagram.js.ejs', 'utf8'), { minjs }, { async: true })
-.then(output => fs.writeFileSync('dist/total-diagram.js', output, 'utf8'));
+if (!fs.existsSync('dist')) fs.mkdirSync('dist');
+
+files.forEach((file) => {
+
+    ejs.render(fs.readFileSync(file.src, 'utf8'), { minjs }, {async: true})
+        .then(output => fs.writeFileSync('dist/' + file.dst, output, 'utf8'));
+
+});

package/dist/total-diagram.js

@@ -1,4 +1,4 @@
-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:"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),"border"in t&&(this.transform.border=t.border),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}addLink(t){this.links.add(t)}delLink(t){this.links.del(t)}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 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:"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}addLink(t){this.links.add(t)}delLink(t){this.links.del(t)}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 TotalDiagramNodesManager{constructor(){this.render=null,this.list=[]}add(t){this.list.push(t),this.render.board.append(t.element),t.awake()}del(t){if("*"!=t){let e=t.links.get("*");for(;e.length;){const t=e.pop();this.render.links.del(t)}t.destructor(),t.element.remove();const i=this.list.indexOf(t);-1!==i&&this.list.splice(i,1)}else"*"==t&&(this.list.length=0)}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.addLink(this),this.end=t.end,this.end.addLink(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.delLink(this),this.end&&this.end.delLink(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)}del(t){if("*"!=t){t.destructor(),t.element.remove();const e=this.list.indexOf(t);-1!==e&&this.list.splice(e,1)}else this.list.length=0}get(t,e=null){if("*"==t)return this.list;if(e){for(const i of t.links.get("*"))for(const t of e.links.get("*"))if(i.id==t.id)return i;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}}

package/examples/1_basic.html

@@ -33,6 +33,12 @@
                 user-select: none;
                 touch-action: none;
                 overflow: hidden;
+                font-family: Arial, sans-serif;
+            }
+
+            h3, p {
+                color: white;
+                text-align: center;
             }
 
             .node {
@@ -60,13 +66,16 @@
     </head>
     <body>
         <!-- Main diagram container -->
-        <div id="container"></div>
+        <div id="container">
+            <h3>1: Basic demo</h3>
+            <p>How to create two nodes and link them.</p>
+        </div>
 
         <!-- Total Diagram library -->
-        <script type="text/javascript" src="../node.js"></script>
-        <script type="text/javascript" src="../link.js"></script>
-        <script type="text/javascript" src="../nodes.js"></script>
-        <script type="text/javascript" src="../links.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>

package/examples/2_node.html

@@ -0,0 +1,235 @@
+<!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;
+            }
+
+            .link {
+                position: absolute;
+                left: 0;
+                top: 0;
+                overflow: visible;
+                z-index: -1;
+            }
+
+            .link line {
+                pointer-events: none;
+                fill: #e88f56;
+                stroke: #e88f56;
+                stroke-width: 2;
+            }
+
+        </style>
+    </head>
+    <body>
+        <!-- Main diagram container -->
+        <div id="container">
+            <h3>2: Node demo</h3>
+            <p>How to make and style custom nodes.</p>
+        </div>
+
+        <!-- Total Diagram library -->
+        <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>
+
+            // 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);
+                        });
+                    }
+
+                    // Size
+                    this.setSize({width: 200, height: 300});
+
+                    // 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 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 LinkLine({
+                    start: node1,
+                    end: node2
+                });
+                render.links.add(link1);
+
+                // Move to view central 0,0
+                render.center();
+
+            };
+        </script>
+
+    </body>
+</html>

package/examples/3_link.html

@@ -0,0 +1,319 @@
+<!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>3: Link demo</h3>
+            <p>How to make custom and stylized link connected to node's socket.</p>
+        </div>
+
+        <!-- Total Diagram library -->
+        <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}`);
+                }
+
+            }
+
+            // 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 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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "total-diagram",
-	"version": "0.9.3",
+	"version": "0.9.5",
 	"description": "Simple, powerful, extensible and fast JavaScript/ES8 diagram renderer for web browsers.",
 	"license": "MIT",
 	"scripts": {
@@ -9,9 +9,9 @@
 		"start": "npm-run-all build"
 	},
 	"devDependencies": {
-		"ejs": "^3.1.9",
-		"fs": "^0.0.1-security",
 		"npm-run-all": "^4.1.5",
+		"fs": "^0.0.1-security",
+		"ejs": "^3.1.9",
 		"terser": "^5.17.3"
 	}
 }

package/{node.js → render-node.js}

@@ -146,6 +146,7 @@ class TotalDiagramNode {
         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;
         this.setOrigin();
         this.element.style.width = this.transform.w + 'px';
         this.element.style.height = this.transform.h + 'px';

package/render.js

@@ -64,6 +64,8 @@ class TotalDiagramRenderHTML5 {
 
     /**
      * Perform pan
+     * @param deltaX: change x
+     * @param deltaY: change y
      */
 
     pan(deltaX, deltaY) {
@@ -74,6 +76,10 @@ class TotalDiagramRenderHTML5 {
 
     /**
      * Perform zoom
+     * @param x: x position
+     * @param y: y position
+     * @param deltaZ: zoom change
+     * @param factorZ: multplier
      */
 
     zoom(x, y, deltaZ, factorZ) {
@@ -92,6 +98,11 @@ class TotalDiagramRenderHTML5 {
 
     /**
      * Perform mobile zoom
+     * @param x1: finger 1 x position
+     * @param y1: finger 1 y position
+     * @param x2: finger 2 x position
+     * @param y2: finger 2 y position
+     * @param deltaZ: zoom change
      */
 
     pinchZoom(x1, y1, x2, y2, deltaZ) {
@@ -110,7 +121,7 @@ class TotalDiagramRenderHTML5 {
 
     /**
      * Convert window coordinates to world
-     * {x: ..., y: ...}
+     * @param coords {x: <Number>, y: <Number>}
      */
 
     screen2World(coords) {
@@ -122,7 +133,7 @@ class TotalDiagramRenderHTML5 {
 
     /**
      * Convert world coordinates to window
-     * {x: ..., y: ...}
+     * @param coords {x: <Number>, y: <Number>}
      */
 
     world2Screen(coords) {
@@ -134,9 +145,9 @@ class TotalDiagramRenderHTML5 {
 
     /**
      * Reset to origin
-     * z: 'none' (don't zoom) | 'reset': standard zoom | 'focus': zoom to node size
-     * animation: 'hard' | 'smooth'
-     * rect: {width, height: dimensions of the focus target}
+     * @param z: 'none' (don't zoom) | 'reset': standard zoom | 'focus': zoom to node size
+     * @param animation: 'hard' | 'smooth'
+     * @param rect: {width, height: dimensions of the focus target}
      */
 
     center(coords = {x: 0, y: 0}, z = 'none', animation = 'hard', rect = null) {
@@ -178,11 +189,11 @@ class TotalDiagramRenderHTML5 {
 
     /**
      * Render update
+     * Note: use 'transform' since PYQt6 doesn't support separate 'translate' and 'scale' yet
      */
 
     update() {
         // Calculate board's position
-        // Note: using 'transform' since PYQt6 doesn't support new css 'translate' and 'scale' yet
         this.board.style.transform = `translate(${this.offset.x}px, ${this.offset.y}px) scale(${this.offset.z})`;
     }
 

package/total-diagram.js.ejs

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