total-diagram 0.9.2 → 0.9.4

package/README.md

@@ -6,19 +6,21 @@ Total Diagram
 </h1>
 <p align="center">
 Simple, powerful, extensible and fast JavaScript/ES8 diagram renderer for web browsers.
-<p>
+</p>
 <p align="center">
-v 0.9.2
-<p>
+v0.9.4
+</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)
 [![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.
+
+For more details look into 'examples/' directory. You can find self-explanatory tutorials there.
 
 # Features
 
@@ -31,4 +33,12 @@ For more details look into self-explanatory demo.html.
 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('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/{demo.html → examples/1_basic.html}

@@ -63,11 +63,11 @@
         <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 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/{links.js → manager-links.js}

@@ -71,21 +71,21 @@ class TotalDiagramLinksManager {
      * Get link(s)
      */
 
-    get(link = 0, node2 = null) {
+    get(link, node2 = null) {
+
+        // All links
+        if (link == '*') return this.list;
 
         // Find link betwen two nodes
-        if (node2) {
-            for (const link1 of link.links.get()) {
-                for (const link2 of node2.links.get()) {
+        else 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);
 

package/{nodes.js → manager-nodes.js}

@@ -50,8 +50,8 @@ class TotalDiagramNodesManager {
         // Single node
         if (node != '*') {
 
-            // First delete associated links on the copy of links list
-            let linksToDelete = node.links.get().slice();
+            // First delete associated links
+            let linksToDelete = node.links.get('*');
             while (linksToDelete.length) {
                 const link = linksToDelete.pop();
                 this.render.links.del(link);
@@ -79,10 +79,13 @@ class TotalDiagramNodesManager {
      * Get nodes from scene
      */
 
-    get(node = 0) {
+    get(node) {
+
+        // All nodes
+        if (node == '*') return this.list;
 
         // Find one node by giving DOM element
-        if (node != null && typeof(node) == 'object') {
+        else if (node != null && typeof(node) == 'object') {
             // Traverse DOM
             let target = node;
             while (target.parentNode) {
@@ -94,9 +97,6 @@ class TotalDiagramNodesManager {
             }
         }
 
-        // 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);
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "total-diagram",
-	"version": "0.9.2",
+	"version": "0.9.4",
 	"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}

@@ -79,9 +79,10 @@ class TotalDiagramNode {
             },
 
             // Get assigned link
-            get: (id = null) => {
+            get: (id) => {
+
                 // All links
-                if (id === null) return this.links.list;
+                if (id == '*') return this.links.list;
 
                 // Find one link by ID
                 else if (typeof(id) == 'string') {
@@ -145,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') %>