total-diagram 0.9.2

package/.github/workflows/build.yml

@@ -0,0 +1,25 @@
+name: Build
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16.x"
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build --if-present

package/.github/workflows/deploy.yml

@@ -0,0 +1,29 @@
+name: Deploy
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v3
+
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16.x"
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build --if-present
+
+      - name: Publish
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020-2023 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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+<p align="center">
+<img src="https://raw.githubusercontent.com/dariuszdawidowski/total-diagram/main/total-diagram-logo.png">
+</p>
+<h1 align="center">
+Total Diagram
+</h1>
+<p align="center">
+Simple, powerful, extensible and fast JavaScript/ES8 diagram renderer for web browsers.
+<p>
+<p align="center">
+v 0.9.2
+<p>
+
+[![build](https://github.com/dariuszdawidowski/total-diagram/actions/workflows/build.yml/badge.svg)](https://github.com/dariuszdawidowski/total-diagram/actions/workflows/build.yml)
+[![license](https://img.shields.io/github/license/dariuszdawidowski/total-diagram?color=9cf)](./LICENSE)
+
+# About
+
+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 self-explanatory demo.html.
+
+# Features
+
+- Vanilla JavaScript/ES8
+- No dependencies
+
+# Build minified bundle file
+
+```bash
+npm install
+npm run build
+```
+Note: This is browser-centric vanilla JavaScript library, npm is only used to minify and bundle files into one.

package/build.js

@@ -0,0 +1,23 @@
+/**
+ * Build script
+ */
+
+const fs = require('fs');
+const ejs = require('ejs');
+const { readFile } = require('fs').promises;
+const { minify } = require('terser');
+
+const minjs = async (filePath) => {
+    try {
+        const inputCode = await readFile(filePath, 'utf8');
+        const minifiedCode = (await minify(inputCode)).code;
+        return minifiedCode;
+    }
+    catch (error) {
+        console.error(`Error minifying js ${filePath}:`, error);
+        return null;
+    }
+};
+
+ejs.render(fs.readFileSync('total-diagram.js.ejs', 'utf8'), { minjs }, { async: true })
+.then(output => fs.writeFileSync('total-diagram.js', output, 'utf8'));

package/demo.html

@@ -0,0 +1,155 @@
+<!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;
+            }
+
+            .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"></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.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);
+
+                // Move to view central 0,0
+                render.center();
+
+            };
+        </script>
+
+    </body>
+</html>

package/link.js

@@ -0,0 +1,82 @@
+/***************************************************************************************************
+ *                                                                                                 *
+ *                            Total Diagram Link                                                   *
+ *  \___________________u..   Base class for diagram link                                          *
+ *  (  ________________  .-`  MIT License                                                          *
+ *   ''                ''     Copyright (c) 2020-2023 Dariusz Dawidowski                           *
+ *                                                                                                 *
+ **************************************************************************************************/
+
+class TotalDiagramLink {
+
+    /**
+     * Constructor
+     * @param args.start <TotalDiagramNode>: Start node
+     * @param args.end <TotalDiagramNode>: End node
+     */
+
+    constructor(args) {
+
+        // ID
+        this.id = 'id' in args ? args.id : crypto.randomUUID();
+
+        // Start Node
+        this.start = args.start;
+        this.start.addLink(this);
+
+        // End Node
+        this.end = args.end;
+        this.end.addLink(this);
+
+        // SVG DOM element
+        this.element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        this.element.classList.add('link');
+
+        // Copy ID onto DOM element
+        this.element.dataset.id = this.id;
+
+    }
+
+    /**
+     * Destructor
+     */
+
+    destructor() {
+        // Remove references in related nodes
+        if (this.start) this.start.delLink(this);
+        if (this.end) this.end.delLink(this);
+    }
+
+    /**
+     * Serialization
+     */
+
+    serialize() {
+        return {
+            'id': this.id,
+            'type': this.constructor.name,
+            'start': this.start.id,
+            'end': this.end.id,
+        };
+    }
+
+    /**
+     * Make link transparent
+     */
+
+    transparent(percent) {
+        if (percent == 100)
+            this.element.style.opacity = null;
+        else
+            this.element.style.opacity = percent / 100;
+    }
+
+    /**
+     * Update position
+     */
+
+    update() {
+        /*** Overload ***/
+    }
+
+}

package/links.js

@@ -0,0 +1,103 @@
+/***************************************************************************************************
+ *                                                                                                 *
+ *       ___     ___          Total Diagram Links Manager                                          *
+ *      (o,o)   (-,-)         Create, delete and find links between nodes on the board.            *
+ *     /)''')   ('''(\        MIT License                                                          *
+ *  -----m-m-----m-m-----     Copyright (c) 2020-2023 Dariusz Dawidowski                           *
+ *                                                                                                 *
+ **************************************************************************************************/
+
+class TotalDiagramLinksManager {
+
+    /**
+     * Constructor
+     */
+
+    constructor() {
+
+        // Main manager reference
+        this.render = null;
+
+        // Array for all links
+        this.list = [];
+
+    }
+
+    /**
+     * Add a link between two nodes
+     * @param link <TotalDiagramLink>: Link object
+     */
+
+    add(link) {
+
+        // Check if nodes exists
+        if (!link.start || !link.end) return null;
+
+        // Store link
+        this.list.push(link);
+
+        // Add to DOM
+        this.render.board.append(link.element);
+
+    }
+
+    /**
+     * Del link from board
+     * @param link <TotalDiagramLink>: Link object
+     */
+
+    del(link) {
+
+        if (link != '*') {
+            // Local link's destructor
+            link.destructor();
+
+            // Remove from DOM
+            link.element.remove()
+
+            // Remove from list
+            const index = this.list.indexOf(link);
+            if (index !== -1) this.list.splice(index, 1);
+        }
+
+        // Remove all links
+        else {
+            this.list.length = 0;
+        }
+
+    }
+
+    /**
+     * Get link(s)
+     */
+
+    get(link = 0, node2 = null) {
+
+        // Find link betwen two nodes
+        if (node2) {
+            for (const link1 of link.links.get()) {
+                for (const link2 of node2.links.get()) {
+                    if (link1.id == link2.id) return link1;
+                }
+            }
+            return null;
+        }
+
+        // All links
+        else if (link === 0) return this.list;
+
+        // Find one link by giving ID
+        else if (typeof(link) == 'string') return this.list.find(n => n.element.dataset.id == link);
+
+        // Find all links type by giving class
+        else if (typeof(link) == 'function') return this.list.filter(l => l instanceof link);
+
+        // Find one link by giving DOM element
+        else if (typeof(link) == 'object' && 'dataset' in link) return this.get(link.dataset.id);
+
+        // Not found
+        return null;
+
+    }
+
+}

package/node.js

@@ -0,0 +1,297 @@
+/***************************************************************************************************
+ *                                                                                                 *
+ *         /\_/\              Total Diagram Node                                                   *
+ *        (=^o^=)/\           Base class for diagram node                                          *
+ *         (___)__/           MIT License                                                          *
+ *     ~~~~~~~~~~~~~~~        Copyright (c) 2020-2023 Dariusz Dawidowski                           *
+ *                                                                                                 *
+ **************************************************************************************************/
+
+class TotalDiagramNode {
+
+    /**
+     * Constructor
+     */
+
+    constructor(args = {}) {
+
+        // ID
+        this.id = 'id' in args ? args.id : crypto.randomUUID();
+
+        // Human readable name
+        this.name = 'name' in args ? args.name : null;
+
+        // Position, origin, dimensions
+        this.transform = {
+            // Global x position
+            x: 'x' in args ? args.x : 0,
+            // Global y position
+            y: 'y' in args ? args.y : 0,
+
+            // Border size
+            border: 0,
+
+            // Z-Sorting
+            zindex: 'zindex' in args ? args.zindex : 0,
+
+            // Local center x position
+            ox: 0,
+            // Local center y position
+            oy: 0,
+
+            // Width of boundings
+            w: 0,
+            // Height of boundings
+            h: 0,
+            // Min width of boundings
+            wmin: 64,
+            // Min height of boundings
+            hmin: 64,
+            // Max width of boundings
+            wmax: 1024,
+            // Max height of boundings
+            hmax: 1024,
+
+            // Identity
+            clear: () => {
+                this.transform.x = 0;
+                this.transform.y = 0;
+                this.transform.zindex = 0;
+                this.element.style.zIndex = 0;
+            }
+
+        };
+
+        // Links
+        this.links = {
+
+            list: [], // [TotalDiagramLink, ...]
+
+            // Assign to link
+            add: (link) => {
+                this.links.list.push(link);
+            },
+
+            // Unassign from a link
+            del: (link) => {
+                const index = this.links.list.indexOf(link);
+                if (index !== -1) this.links.list.splice(index, 1);
+            },
+
+            // Get assigned link
+            get: (id = null) => {
+                // All links
+                if (id === null) return this.links.list;
+
+                // Find one link by ID
+                else if (typeof(id) == 'string') {
+                    return this.links.list.find(l => l.id == id);
+                }
+
+                return null;
+            },
+
+            // Update assigned links
+            update: () => {
+                this.links.list.forEach(link => link.update());
+            }
+
+        };
+
+        // Node DOM element
+        this.element = document.createElement('div');
+        this.element.classList.add('total-diagram-node');
+        this.element.style.zIndex = this.transform.zindex;
+
+        // Set or generate ID
+        this.element.dataset.id = this.id;
+
+    }
+
+    /**
+     * Destructor
+     */
+
+    destructor() {
+        /* Overload */
+    }
+
+    /**
+     * Init after node is added into DOM tree
+     */
+
+    awake() {
+        /* Overload */
+    }
+
+    /**
+     * Init after all scene is created and updated once
+     */
+
+    start() {
+        /* Overload */
+    }
+
+    /**
+     * Size 
+     * {width: <Number>, height: <Number>, minWidth: <Number>, minHeight: <Number>, maxWidth: <Number>, maxHeight: <Number>, border: [Number]}
+     */
+
+    setSize(size) {
+        this.transform.w = size.width;
+        this.transform.h = size.height;
+        if ('minWidth' in size) this.transform.wmin = size.minWidth;
+        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;
+        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
+        };
+    }
+
+    /**
+     * Set origin (local center point of node)
+     * Override this to make different origin than middle point
+     */
+
+    setOrigin() {
+        this.transform.ox = this.transform.w / 2;
+        this.transform.oy = this.transform.h / 2;
+    }
+
+    /**
+     * Set position
+     * transform {x: float, y: float}
+     */
+
+    setPosition(transform) {
+        this.transform.x = transform.x;
+        this.transform.y = transform.y;
+    }
+
+    /**
+     * Get position
+     * transform {x: float, y: float}
+     */
+
+    getPosition() {
+        return {x: this.transform.x, y: this.transform.y};
+    }
+
+    /**
+     * Change position
+     * transform {x: float, y: float}
+     */
+
+    addPosition(transform) {
+        this.transform.x += transform.x;
+        this.transform.y += transform.y;
+    }
+
+    /**
+     * Change position
+     * transform {x: float, y: float}
+     */
+
+    subPosition(transform) {
+        this.transform.x -= transform.x;
+        this.transform.y -= transform.y;
+    }
+
+    /**
+     * Add link
+     * link: TotalDiagramLink object
+     */
+
+    addLink(link) {
+        this.links.add(link);
+    }
+
+    /**
+     * Delete link
+     * link: TotalDiagramLink object
+     */
+
+    delLink(link) {
+        this.links.del(link);
+    }
+
+    /**
+     * Style
+     */
+
+    setStyle(key, value = null) {
+        if (value !== null) this.element.style[key] = value;
+    }
+
+    getStyle(key = null) {
+        if (key !== null) return this.element.style[key];
+        else return this.element.style;
+    }
+
+    /**
+     * Make node transparent
+     */
+
+    transparent(percent) {
+        if (percent == 100)
+            this.element.style.opacity = null;
+        else
+            this.element.style.opacity = percent / 100;
+    }
+
+    /**
+     * Enable/disable smooth css animation
+     */
+
+    animated(state = true) {
+        this.element.style.transition = state ? 'transform 0.5s ease-in-out' : null;
+    }
+
+    /**
+     * Serialization
+     */
+
+    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
+        };
+    }
+
+    /**
+     * Set z-index
+     */
+
+    setSortingZ(zindex) {
+        this.transform.zindex = zindex;
+        this.element.style.zIndex = zindex;
+    }
+
+    /**
+     * Update (everyframe when something is changed e.g. move)
+     */
+
+    update() {
+        // Calculate position (PYQt6 doesn't support separate css translate yet)
+        this.element.style.transform = `translate(${this.transform.x - this.transform.ox}px, ${this.transform.y - this.transform.oy}px)`;
+    }
+
+}

package/nodes.js

@@ -0,0 +1,111 @@
+/***************************************************************************************************
+ *                                                                                                 *
+ *          ____(__)          Total Diagram Nodes Manager                                          *
+ *         /|    oo           Create, delete and find nodes on the board.                          *
+ *        * | _ (..)-*        MIT License                                                          *
+ *   v      || ||      v      Copyright (c) 2020-2023 Dariusz Dawidowski                           *
+ *   '' '   ^^ ^^     ' ''                                                                         *
+ **************************************************************************************************/
+
+class TotalDiagramNodesManager {
+
+    /**
+     * Constructor
+     */
+
+    constructor() {
+
+        // Main manager reference
+        this.render = null;
+
+        // Array for all nodes
+        this.list = [];
+
+    }
+
+    /**
+     * Add node to scene
+     * @param node <TotalDiagramNode>: Node object
+     */
+
+    add(node) {
+
+        // Add to list
+        this.list.push(node);
+
+        // Add to DOM
+        this.render.board.append(node.element);
+
+        // Call node awake function sice it's added into DOM tree
+        node.awake();
+
+    }
+
+    /**
+     * Del object from scene
+     */
+
+    del(node) {
+
+        // Single node
+        if (node != '*') {
+
+            // First delete associated links on the copy of links list
+            let linksToDelete = node.links.get().slice();
+            while (linksToDelete.length) {
+                const link = linksToDelete.pop();
+                this.render.links.del(link);
+            }
+
+            // Local node's destructor
+            node.destructor();
+
+            // Remove from DOM
+            node.element.remove();
+
+            // Remove from list
+            const index = this.list.indexOf(node);
+            if (index !== -1) this.list.splice(index, 1);
+        }
+
+        // Clear all on the list
+        else if (node == '*') {
+            this.list.length = 0;
+        }
+
+    }
+
+    /**
+     * Get nodes from scene
+     */
+
+    get(node = 0) {
+
+        // Find one node by giving DOM element
+        if (node != null && typeof(node) == 'object') {
+            // Traverse DOM
+            let target = node;
+            while (target.parentNode) {
+                if ('classList' in target && target.classList.contains('total-diagram-node')) {
+                    // Found node
+                    return this.get(target.dataset.id);
+                }
+                target = target.parentNode;
+            }
+        }
+
+        // All nodes
+        else if (node === 0) return this.list;
+
+        // Find all nodes type by giving class
+        else if (typeof(node) == 'function') return this.list.filter(n => n instanceof node);
+
+        // Find one node by giving ID
+        else if (typeof(node) == 'string') return this.list.find(n => n.id == node);
+
+        // Not found
+        return null;
+
+    }
+
+}

package/package.json

@@ -0,0 +1,17 @@
+{
+	"name": "total-diagram",
+	"version": "0.9.2",
+	"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"
+	},
+	"devDependencies": {
+		"ejs": "^3.1.9",
+		"fs": "^0.0.1-security",
+		"npm-run-all": "^4.1.5",
+		"terser": "^5.17.3"
+	}
+}

package/render.js

@@ -0,0 +1,199 @@
+/***************************************************************************************************
+ *                                                                                                 *
+ *            ,;   )          Total Diagram Render HTML5                                           *
+ *       _o_ _;   (           One manager to rule them all                                         *
+ *    (c(   )/   ____         MIT License                                                          *
+ *      |___|    \__/)        Copyright (c) 2020-2023 Dariusz Dawidowski                           *
+ *                                                                                                 *
+ **************************************************************************************************/
+
+class TotalDiagramRenderHTML5 {
+
+    /**
+     * Constructor
+     * @param args.container <HTMLElement>: DOM container for rendering
+     * @param args.nodes <TotalDiagramNodesManager>: Nodes manager
+     * @param args.links <TotalDiagramLinksManager>: Links manager
+     */
+
+    constructor(args) {
+
+        // Container
+        this.container = args.container;
+
+        // Create 0x0 main object to attach nodes/links to follow transforms
+        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);
+
+        // Board dimensions
+        this.size = this.container.getBoundingClientRect();
+        this.size.center = {x: this.size.width / 2, y: this.size.height / 2};
+
+        // Board margins
+        this.margin = {
+            left: this.size.left - document.documentElement.scrollLeft,
+            top: this.size.top - document.documentElement.scrollTop,
+        };
+
+        // Board current pan offset (x,y) and zoom (z)
+        this.offset = {
+            x: 0,
+            y: 0,
+            z: 1
+        };
+        
+        // Window resize callback
+        window.addEventListener('resize', () => {
+            this.size = this.container.getBoundingClientRect();
+            this.size.center = {x: this.size.width / 2, y: this.size.height / 2};
+        });
+
+        // Nodes
+        this.nodes = args.nodes;
+        this.nodes.render = this;
+
+        // Link
+        this.links = args.links;
+        this.links.render = this;
+    }
+
+    /**
+     * Perform pan
+     */
+
+    pan(deltaX, deltaY) {
+        this.offset.x += deltaX;
+        this.offset.y += deltaY;
+        this.update();
+    }
+
+    /**
+     * Perform zoom
+     */
+
+    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);
+        deltaZoom = this.offset.z / deltaZoom;
+
+        const boundingRect = this.board.getBoundingClientRect();
+        const ox = boundingRect.width / 2 + boundingRect.left - x;
+        const oy = boundingRect.height / 2 + boundingRect.top - y;
+
+        this.offset.x += ox * deltaZoom - ox;
+        this.offset.y += oy * deltaZoom - oy;
+        this.update();
+    }
+
+    /**
+     * Perform mobile zoom
+     */
+
+    pinchZoom(x1, y1, x2, y2, deltaZ) {
+        let deltaZoom = this.offset.z;
+        this.offset.z = (this.offset.z * deltaZ).clamp(0.1, 3.0);
+        deltaZoom = this.offset.z / deltaZoom;
+
+        const boundingRect = this.board.getBoundingClientRect();
+        const ox = boundingRect.width / 2 + boundingRect.left - ((x1 + x2) / 2);
+        const oy = boundingRect.height / 2 + boundingRect.top - ((y1 + y2) / 2);
+
+        this.offset.x += ox * deltaZoom - ox;
+        this.offset.y += oy * deltaZoom - oy;
+        this.update();
+    }
+
+    /**
+     * Convert window coordinates to world
+     * {x: ..., y: ...}
+     */
+
+    screen2World(coords) {
+        return {
+            x: Math.round( (((coords.x - this.offset.x) / this.offset.z) - this.margin.left) ),
+            y: Math.round( (((coords.y - this.offset.y) / this.offset.z) - this.margin.top) ),
+        };
+    }
+
+    /**
+     * Convert world coordinates to window
+     * {x: ..., y: ...}
+     */
+
+    world2Screen(coords) {
+        return {
+            x: Math.round( ((this.offset.x + (coords.x * this.offset.z)) - this.margin.left) ),
+            y: Math.round( ((this.offset.y + (coords.y * this.offset.z)) - this.margin.top) ),
+        };
+    }
+
+    /**
+     * 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}
+     */
+
+    center(coords = {x: 0, y: 0}, z = 'none', animation = 'hard', rect = null) {
+
+        // Animation
+        if (animation == 'smooth') {
+            this.board.style.transition = 'transform 1s';
+            setInterval(() => { this.board.style.removeProperty('transition'); }, 1000);
+        }
+
+        // Zoom
+        if (z == 'reset') this.offset.z = 1;
+        else if (z == 'focus') this.offset.z = ((this.size.height) / (rect.height + rect.margin));
+
+        // Render
+        this.offset.x = (-coords.x * this.offset.z) + this.size.center.x;
+        this.offset.y = (-coords.y * this.offset.z) + this.size.center.y;
+        this.update();
+    }
+
+    /**
+     * Reset zoom
+     */
+
+    centerZoom() {
+        this.offset.z = 1;
+        this.update();
+    }
+
+    /**
+     * Delete all nodes and links and clear DOM
+     */
+
+    clear() {
+        this.board.innerHTML = '';
+        this.links.del('*');
+        this.nodes.del('*');
+    }
+
+    /**
+     * Render update
+     */
+
+    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})`;
+    }
+
+    /**
+     * Hack to force redraw window
+     */
+
+    redraw() {
+        this.container.style.display = 'none';
+        const trick = this.container.offsetHeight;
+        this.container.style.display = 'block';
+    }
+
+}

package/total-diagram.js.ejs

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