plebeiangraphlibrary 2.2.2 → 2.2.3

package/Examples/14_Interaction_click.html

@@ -40,29 +40,35 @@
     </div>
     <canvas id="displayCanvas" class="displayCanvas"></canvas>
   <script type="module">
-    // Opt-in interaction layer: call enableInteraction() to add click/hover support.
-    // Callbacks receive graph details (nodeId, neighbours, position, edge start/end, etc.).
     import * as PGL from "../Build/pgl_module.js";
 
+    // Interaction is 100% opt-in — nothing is registered until you call enableInteraction().
+    // Callbacks receive a details object: { nodeId, data, neighbours, position } for nodes,
+    // { edgeId, start, end, data } for edges.
+
     const G = await PGL.SampleData.LoadZKCSimulated();
-    const width = 800;
-    const height = 700;
     const canvas = document.getElementById("displayCanvas");
     const infoText = document.getElementById("infoText");
 
-    const graph3d = new PGL.GraphDrawer.GraphDrawer3d({ graph: G, width, height, canvas });
+    const graph3d = new PGL.GraphDrawer.GraphDrawer3d({ graph: G, width: 800, height: 700, canvas });
     await graph3d.init();
 
     const bounds = 1;
+
+    // Add visual elements BEFORE enableInteraction.
+    // The interaction layer works by raycasting against objects already in the scene.
+    // If you call enableInteraction first, the raycast has nothing to hit.
+    // Thick edges are easier to pick than thin lines — prefer DrawTHREEGraphEdgesThick
+    // when you need edge click/hover callbacks.
     const nodeVisualElements = PGL.ThreeWrapper.DrawTHREEBoxBasedVertices(G, bounds, 0xffffff, 5);
     const edgeVisualElements = PGL.ThreeWrapper.DrawTHREEGraphEdgesThick(G, bounds, 0xffafcc, 10);
     graph3d.addVisElement(nodeVisualElements);
     graph3d.addVisElement(edgeVisualElements);
 
-    // Enable opt-in interaction — pass graph and callbacks
     graph3d.enableInteraction({
       graph: G,
       onNodeClick: (d) => {
+        // d.neighbours is an array of neighbour node IDs
         infoText.innerHTML = `Node <b>${d.nodeId}</b><br>Neighbours: ${d.neighbours.length}<br>Position: (${d.position?.x?.toFixed(2) ?? "?"}, ${d.position?.y?.toFixed(2) ?? "?"}, ${d.position?.z?.toFixed(2) ?? "?"})`;
       },
       onEdgeClick: (d) => {

package/Examples/16_Interaction_details.html

@@ -40,19 +40,20 @@
     </div>
     <canvas id="displayCanvas" class="displayCanvas"></canvas>
   <script type="module">
-    // Rich interaction: use NodePickDetails to drive visual feedback.
-    // ChangeTheVertexColours highlights neighbour nodes by node ID.
     import * as PGL from "../Build/pgl_module.js";
 
+    // This example combines hover interaction with dynamic vertex coloring.
+    // onNodeHover fires with a NodePickDetails object when entering a node,
+    // and with null when the cursor leaves — use the null case to reset colors.
+
     const G = await PGL.SampleData.LoadZKCSimulated();
-    const width = 800;
-    const height = 700;
     const canvas = document.getElementById("displayCanvas");
     const infoText = document.getElementById("infoText");
 
-    const graph3d = new PGL.GraphDrawer.GraphDrawer3d({ graph: G, width, height, canvas });
+    const graph3d = new PGL.GraphDrawer.GraphDrawer3d({ graph: G, width: 800, height: 700, canvas });
     await graph3d.init();
 
+    // Disable camera auto-rotation so hover targets stay stable.
     graph3d.controls.autoRotate = false;
 
     const bounds = 1;
@@ -62,19 +63,27 @@
     graph3d.addVisElement(nodeVisualElements);
     graph3d.addVisElement(edgeVisualElements);
 
+    // IMPORTANT: ChangeTheVertexColours and ResetVertexColors take the inner
+    // instanced mesh, NOT the Group returned by the draw call.
+    // Always pass nodeVisualElements.children[0] — passing nodeVisualElements
+    // directly will silently do nothing.
+    const nodeMesh = nodeVisualElements.children[0];
     const HIGHLIGHT_COLOR = 0xff4444;
 
     graph3d.enableInteraction({
       graph: G,
       hoverEnabled: true,
       onNodeHover: (d) => {
-        PGL.ThreeWrapper.ResetVertexColors(nodeVisualElements.children[0]);
+        // Reset all node colors before applying a new highlight each frame.
+        PGL.ThreeWrapper.ResetVertexColors(nodeMesh);
         if (d) {
+          // d.neighbours is the array of neighbour node IDs — color them directly.
           if (d.neighbours.length > 0) {
-            PGL.ThreeWrapper.ChangeTheVertexColours(nodeVisualElements.children[0], d.neighbours, HIGHLIGHT_COLOR);
+            PGL.ThreeWrapper.ChangeTheVertexColours(nodeMesh, d.neighbours, HIGHLIGHT_COLOR);
           }
           infoText.innerHTML = `Node <b>${d.nodeId}</b><br>Degree: ${d.neighbours.length}<br>Neighbours highlighted in red`;
         } else {
+          // d is null when the pointer leaves a node — colors already reset above.
           infoText.innerHTML = "Hover a node";
         }
       },

package/Examples/1_ZKC_simple.html

@@ -19,61 +19,47 @@
   <div class="canvas-wrap">
   <canvas id="displayCanvas" class="displayCanvas"></canvas>
   <script type="module">
-    // import the library
     import * as PGL from "../Build/pgl_module.js";
 
-    // construct a simple ZKC graph
-    // this graph is pre initialized (Since it is simulated in this case)
+    // STEP 1 — Load the graph.
+    // LoadZKCSimulated returns the Zachary Karate Club graph with positions already
+    // computed (Kamada-Kawai), so you can skip the layout step entirely.
+    // Use LoadZKC() instead if you want to run your own layout.
     const zkcSimulated = await PGL.SampleData.LoadZKCSimulated();
-    // console log this to see how this data is stored 
-    console.log(zkcSimulated);
-    // also as a reference just see how this data is stored 
-    zkcSimulated.printData();
+    zkcSimulated.printData(); // logs node/edge counts to console — useful for debugging
 
-    // set the width and height 
-    const width = 800;
-    const heigth = 700;
-
-    // pass in the graph and the canvas into the drawing object to draw it
-    // first get the canvas element
+    // STEP 2 — Create the renderer and attach it to the canvas element.
     const canvas = document.getElementById("displayCanvas");
-    // then create a graph drawer object
-    // to do that first make a options object
-    const graphDrawerOptions = {
+    const graph3d = new PGL.GraphDrawer.GraphDrawer3d({
       graph: zkcSimulated,
-      width: width,
-      height: heigth,
-      canvas: canvas
-    };
-    // then create the visualization window
-    // with those settings
-    const graph3d = new PGL.GraphDrawer.GraphDrawer3d(graphDrawerOptions);
-    // initialize this object before adding things to it 
+      width: 800,
+      height: 700,
+      canvas: canvas,
+    });
+
+    // STEP 3 — Initialize (async). Sets up the Three.js scene, camera, and
+    // WebGL renderer. Must complete before you add any geometry.
     await graph3d.init();
 
-    // Create the 3d elements for the graph
-    // first describe a global scaling factor
-    const bounds = 1
-    // first create all the node elements
+    // STEP 4 — Create visual geometry and add it to the scene.
+    // `bounds` is a global scale factor applied to all positions.
+    // DrawTHREEBoxBasedVertices uses box meshes (no texture file required).
+    // DrawTHREEGraphVertices uses billboard sprites but needs ./Textures/Square.png.
+    const bounds = 1;
     const nodeVisualElements = PGL.ThreeWrapper.DrawTHREEBoxBasedVertices(zkcSimulated, bounds, 0xffffff, 5);
-    // add the node elements to the scene
     graph3d.addVisElement(nodeVisualElements);
-    // then create the edge elements 
+
     const edgeVisualElements = PGL.ThreeWrapper.DrawTHREEGraphEdgesThick(zkcSimulated, bounds, 0xffafcc, 10);
     graph3d.addVisElement(edgeVisualElements);
 
-    // then there are two last steps for a 3d graph
-    // this is done so that other 3d objects can be added in later
-    // since the base library is three.js all standard three js things are possible
-    // now moving on to the two steps :
-    // make an animation function
+    // STEP 5 — Start the animation loop.
+    // graph3d.rendercall() advances OrbitControls (auto-rotate, damping) and
+    // renders the frame. You can add your own per-frame logic here too — this is
+    // a standard Three.js render loop.
     function animate() {
       requestAnimationFrame(animate);
       graph3d.rendercall();
     }
-
-    // append the graph renderer to the container
-    // and then drawing render calls
     animate();
   </script>
   </div>

package/Examples/9_Simulation_live.html

@@ -21,32 +21,36 @@
     <script type="module">
       import * as PGL from "../Build/pgl_module.js";
 
-      // DWT 1005 graph from the paper (same as Example 12's 2D stress dataset)
+      // DWT-1005: a 1005-node structural engineering graph. Loaded pre-initialized.
       const G = await PGL.SampleData.LoadDwt1005();
       G.printData();
 
+      // createKamadaKawai3D returns a simulation object with step(dt) / getPositions().
+      // It does NOT run the layout immediately — positions evolve frame-by-frame in the
+      // animation loop. This lets you watch the graph "settle" in real time.
       const simulation = PGL.createKamadaKawai3D(G, {
-        simulationBound: 800,
-        cohesionValue: 1,
-        repulsionValue: 1,
-        iterationsPerStep: 1,
+        simulationBound: 800,   // world-space radius the layout tries to fit within
+        cohesionValue: 1,       // spring attraction strength
+        repulsionValue: 1,      // node repulsion strength
+        iterationsPerStep: 1,   // layout steps computed per call to step() — increase for faster convergence
       });
+
+      // Apply initial positions to the graph before drawing so the draw calls
+      // have valid geometry to start from (otherwise nodes all stack at the origin).
       G.apply_position_map(simulation.getPositionMap());
       const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);
       G.apply_edge_pos_maps(lmap);
 
-      const width = 800;
-      const height = 700;
       const canvas = document.getElementById("displayCanvas");
-      const graph3d = new PGL.GraphDrawer.GraphDrawer3d({
-        graph: G,
-        width,
-        height,
-        canvas,
-      });
+      const graph3d = new PGL.GraphDrawer.GraphDrawer3d({ graph: G, width: 800, height: 700, canvas });
       await graph3d.init();
 
       const bounds = 0.1;
+
+      // KEY DECISION — use Mutable variants for any animation.
+      // Static variants (DrawTHREEBoxBasedVertices etc.) bake geometry at creation time
+      // and cannot be updated. Mutable variants return updatePositions() and updateEdges()
+      // functions that push new positions to the GPU each frame without recreating geometry.
       const { group, updatePositions } = PGL.ThreeWrapper.DrawTHREEGraphVerticesMutable(G, bounds, 1, 0xffffff, 1);
       graph3d.addVisElement(group);
       const { group: edgeGroup, updateEdges } = PGL.ThreeWrapper.DrawTHREEGraphEdgesThinMutable(G, bounds, 0xffafcc);
@@ -56,14 +60,18 @@
       function animate() {
         requestAnimationFrame(animate);
         const now = performance.now();
-        const dt = (now - lastTime) / 1000;
+        const dt = (now - lastTime) / 1000; // delta time in seconds
         lastTime = now;
+
+        // Advance the layout by one step, then write the new positions back to
+        // the graph and push them to the GPU via the mutable updater functions.
         simulation.step(dt);
         G.apply_position_map(simulation.getPositionMap());
         const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);
         G.apply_edge_pos_maps(lmap);
-        updatePositions(simulation.getPositions());
-        updateEdges();
+        updatePositions(simulation.getPositions()); // Float32Array [x0,y0,z0, x1,y1,z1, ...]
+        updateEdges();                               // recomputes edge line geometry from node positions
+
         graph3d.rendercall();
       }
       animate();

package/README.md

@@ -14,6 +14,51 @@ It can be a bit confusing especially when working with Nodes/Edges/Vertices/Line
 Lastly, there are a few helper classes like points and lines. Points are essentially vectors and are used for displacement and also for describing a place in relation to the global coordinate system. Line are an array of points that get translated into lines using one of the visualization methods. Points can have different visualizations like boxes, billboarded planes and cylinders etc.
 
 
+## Quick Start: The 5-Step Pipeline
+
+Every PGL visualization follows the same five steps **in this order**. Getting the order wrong is the most common source of silent bugs.
+
+```
+Step 1 — Load or build a Graph
+         PGL.SampleData.LoadZKCSimulated()   ← positions already baked in (fastest start)
+         PGL.SampleData.LoadZKC()            ← raw graph, you must run a layout first
+         GenerateErdosReyni_n_p(n, p) + await G.initialize()  ← manual build
+
+Step 2 — Create the renderer
+         new PGL.GraphDrawer.GraphDrawer3d({ graph, canvas, width, height })
+
+Step 3 — Initialize (async — must complete before anything else)
+         await graph3d.init()
+
+Step 4 — Draw visual elements and add them to the scene
+         const nodes = PGL.ThreeWrapper.DrawTHREEBoxBasedVertices(G, bounds, 0xffffff, 5)
+         graph3d.addVisElement(nodes)
+         const edges = PGL.ThreeWrapper.DrawTHREEGraphEdgesThick(G, bounds, 0xffafcc, 10)
+         graph3d.addVisElement(edges)
+         // If you need interaction, call enableInteraction() here — after addVisElement
+         graph3d.enableInteraction({ graph: G, onNodeClick: (d) => console.log(d) })
+
+Step 5 — Start the animation loop
+         function animate() { requestAnimationFrame(animate); graph3d.rendercall(); }
+         animate()
+```
+
+**Static vs. Mutable — choose before drawing:**
+
+| Scenario | Use these draw calls | Returns |
+|---|---|---|
+| Fixed layout (no animation needed) | `DrawTHREEBoxBasedVertices`, `DrawTHREEGraphEdgesThick` | `THREE.Group` — pass directly to `addVisElement` |
+| Live simulation, drag-to-reposition | `DrawTHREEBoxBasedVerticesMutable`, `DrawTHREEGraphEdgesThinMutable` | `{ group, updatePositions(), updateEdges() }` — call updaters each frame |
+
+Mutable variants return an `updatePositions(posArray)` and `updateEdges()` function. Call both each frame *before* `rendercall()`.
+
+**When do I need to call `await G.initialize()`?**
+
+- `LoadZKCSimulated()`, `LoadZKC()`, `LoadDwt1005()`, `Graph.create()` → **auto-initialized, skip this step**
+- `GenerateErdosReyni_n_p()` or building a graph manually with `add_node` / `add_edge` → **you must call `await G.initialize()` yourself** before drawing or running algorithms
+
+---
+
 ## Documentation
 
 The documentation for the package is available at [documentation](https://www.plebeiangraphlibrary.com/). You can also generate API docs locally with:
@@ -180,6 +225,230 @@ async function createVisualization() {
 createVisualization();
 ```
 
+## Cookbook: Copy-Paste Recipes
+
+Each recipe below is self-contained and runnable. They assume you have imported the library as `import * as PGL from "plebeiangraphlibrary"` and have a `<canvas id="displayCanvas">` element in the page.
+
+---
+
+### Recipe 1 — Load your own graph from a plain edge list
+
+PGL supports the same space-separated edge list format used by [(sgd)²](https://github.com/jxz12/s_gd2). Each line is `nodeA nodeB`, one edge per line.
+
+```javascript
+const edgeListText = `
+0 1
+0 2
+1 2
+2 3
+3 4
+`.trim();
+
+const G = await PGL.SampleData.LoadGraphFromEdgeListText(edgeListText);
+// G is already initialized and has random starting positions.
+// Run a layout before drawing (positions are random without it):
+const posMap = PGL.Drawing.SimulateKamadaKawai(G, 50, 200);
+G.apply_position_map(posMap);
+const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);
+G.apply_edge_pos_maps(lmap);
+```
+
+---
+
+### Recipe 2 — Build a graph programmatically and run a layout
+
+```javascript
+import * as PGL from "plebeiangraphlibrary";
+
+const G = new PGL.Graph();
+
+// add_node(id, { pos: PointLike, ...yourData })
+G.add_node(0, { pos: { x: 0, y: 0, z: 0 } });
+G.add_node(1, { pos: { x: 0, y: 0, z: 0 } });
+G.add_node(2, { pos: { x: 0, y: 0, z: 0 } });
+G.add_edge(0, 1);
+G.add_edge(1, 2);
+G.add_edge(2, 0);
+
+// Manual builds require an explicit initialize() call — loaders handle this automatically
+await G.initialize();
+
+// Now run a layout to compute real positions
+const posMap = PGL.Drawing.SimulateKamadaKawai(G, 100, 200);
+G.apply_position_map(posMap);
+const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);
+G.apply_edge_pos_maps(lmap);
+
+// Then draw normally (steps 2–5 of the pipeline)
+```
+
+---
+
+### Recipe 3 — Color nodes by a data property
+
+Nodes are drawn as an instanced mesh. `ChangeTheVertexColours` takes the **inner mesh** (`.children[0]`), not the Group.
+
+```javascript
+const G = await PGL.SampleData.LoadZKCSimulated();
+// ... (pipeline steps 2–4) ...
+
+const nodeGroup = PGL.ThreeWrapper.DrawTHREEBoxBasedVertices(G, 1, 0xffffff, 5);
+graph3d.addVisElement(nodeGroup);
+
+// Color specific nodes red — pass the inner mesh, not the Group
+const mesh = nodeGroup.children[0];
+const redNodeIds = [0, 3, 7, 12];
+PGL.ThreeWrapper.ChangeTheVertexColours(mesh, redNodeIds, 0xff4444);
+
+// To reset all colors back to white:
+// PGL.ThreeWrapper.ResetVertexColors(mesh);
+```
+
+To color nodes by a data property (e.g. a "community" field you stored in `node.data`):
+
+```javascript
+const communityColors = { 0: 0xff6b6b, 1: 0x4ecdc4, 2: 0xffe66d, 3: 0xa8e6cf };
+for (const [community, color] of Object.entries(communityColors)) {
+  const ids = [...G.nodes.entries()]
+    .filter(([, n]) => n.data?.community === Number(community))
+    .map(([id]) => id);
+  PGL.ThreeWrapper.ChangeTheVertexColours(mesh, ids, color);
+}
+```
+
+---
+
+### Recipe 4 — Tooltip on hover (HTML overlay)
+
+```javascript
+const G = await PGL.SampleData.LoadZKCSimulated();
+const canvas = document.getElementById("displayCanvas");
+
+const graph3d = new PGL.GraphDrawer.GraphDrawer3d({ graph: G, width: 800, height: 700, canvas });
+await graph3d.init();
+
+graph3d.controls.autoRotate = false; // disable rotation so hover is stable
+
+const nodeGroup = PGL.ThreeWrapper.DrawTHREEBoxBasedVertices(G, 1, 0xffffff, 5);
+graph3d.addVisElement(nodeGroup);
+graph3d.addVisElement(PGL.ThreeWrapper.DrawTHREEGraphEdgesThick(G, 1, 0xffafcc, 10));
+
+// Create a tooltip div in your HTML: <div id="tooltip" style="position:absolute;display:none;..."></div>
+const tooltip = document.getElementById("tooltip");
+
+// enableInteraction must come after addVisElement
+graph3d.enableInteraction({
+  graph: G,
+  onNodeHover: (d) => {
+    if (d) {
+      tooltip.style.display = "block";
+      tooltip.textContent = `Node ${d.nodeId} — ${d.neighbours.length} neighbours`;
+    } else {
+      tooltip.style.display = "none";
+    }
+  },
+});
+
+function animate() { requestAnimationFrame(animate); graph3d.rendercall(); }
+animate();
+```
+
+---
+
+### Recipe 5 — Highlight a node's neighbours on click
+
+```javascript
+const G = await PGL.SampleData.LoadZKCSimulated();
+const canvas = document.getElementById("displayCanvas");
+
+const graph3d = new PGL.GraphDrawer.GraphDrawer3d({ graph: G, width: 800, height: 700, canvas });
+await graph3d.init();
+
+const nodeGroup = PGL.ThreeWrapper.DrawTHREEBoxBasedVertices(G, 1, 0xffffff, 5);
+graph3d.addVisElement(nodeGroup);
+graph3d.addVisElement(PGL.ThreeWrapper.DrawTHREEGraphEdgesThick(G, 1, 0x555555, 10));
+
+const mesh = nodeGroup.children[0]; // inner instanced mesh
+
+graph3d.enableInteraction({
+  graph: G,
+  onNodeClick: (d) => {
+    PGL.ThreeWrapper.ResetVertexColors(mesh);            // clear previous highlight
+    PGL.ThreeWrapper.ChangeTheVertexColours(mesh, [d.nodeId], 0xffdd00);   // clicked node = yellow
+    PGL.ThreeWrapper.ChangeTheVertexColours(mesh, d.neighbours, 0xff4444); // neighbours = red
+  },
+});
+
+function animate() { requestAnimationFrame(animate); graph3d.rendercall(); }
+animate();
+```
+
+---
+
+### Recipe 6 — Live layout simulation (Kamada–Kawai)
+
+Use `createKamadaKawai3D` + mutable draw calls so the geometry updates each frame without recreating it.
+
+```javascript
+const G = await PGL.SampleData.LoadDwt1005();
+
+const simulation = PGL.createKamadaKawai3D(G, {
+  simulationBound: 500,
+  cohesionValue: 1,
+  repulsionValue: 1,
+  iterationsPerStep: 1,
+});
+
+// Apply initial positions so the draw calls have something to start from
+G.apply_position_map(simulation.getPositionMap());
+const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);
+G.apply_edge_pos_maps(lmap);
+
+const canvas = document.getElementById("displayCanvas");
+const graph3d = new PGL.GraphDrawer.GraphDrawer3d({ graph: G, width: 800, height: 700, canvas });
+await graph3d.init();
+
+// Mutable variants return updater functions — required for animation
+const { group, updatePositions } = PGL.ThreeWrapper.DrawTHREEGraphVerticesMutable(G, 0.1, 1, 0xffffff, 1);
+const { group: edgeGroup, updateEdges } = PGL.ThreeWrapper.DrawTHREEGraphEdgesThinMutable(G, 0.1, 0xffafcc);
+graph3d.addVisElement(group);
+graph3d.addVisElement(edgeGroup);
+
+let lastTime = performance.now();
+function animate() {
+  requestAnimationFrame(animate);
+  const now = performance.now();
+  simulation.step((now - lastTime) / 1000); // advance the layout
+  lastTime = now;
+
+  G.apply_position_map(simulation.getPositionMap());
+  const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);
+  G.apply_edge_pos_maps(lmap);
+  updatePositions(simulation.getPositions()); // push new positions to GPU
+  updateEdges();                               // recompute edge geometry
+  graph3d.rendercall();
+}
+animate();
+```
+
+---
+
+## Common Mistakes
+
+These are the issues that trip up most new users and AI-generated code. Check this list first when something doesn't render or a callback never fires.
+
+| Mistake | Symptom | Fix |
+|---|---|---|
+| Passing the `Group` to `ChangeTheVertexColours` | Colors don't change | Pass `nodeVisualElements.children[0]` — the function needs the inner instanced mesh, not the outer Group. Same for `ResetVertexColors`. |
+| Forgetting `await G.initialize()` after manually building a graph | BFS, Dijkstra, and layout return empty/wrong results | `GenerateErdosReyni_n_p` and manual `add_node` / `add_edge` loops do **not** auto-initialize. Always call `await G.initialize()` before running any algorithm or draw call. |
+| Calling `initialize()` without `await` | Race condition — adjacency lists are half-built | It is async. Always `await G.initialize()`. |
+| Using `DrawTHREEGraphVertices` in a bundler project (Vite, Parcel, Webpack) | Nodes invisible — texture `./Textures/Square.png` fails to load silently | Copy `Examples/Textures/` to your project's public folder, or use `DrawTHREEBoxBasedVertices` which needs no texture. |
+| Calling `enableInteraction()` before `addVisElement()` | Callbacks never fire | The interaction layer raycasts against objects already in the scene. Always add all visual elements first, then call `enableInteraction()`. |
+| Expecting `Dijkstra` to use edge weights | Shortest path looks wrong on weighted graphs | `Dijkstra` in PGL returns **hop counts** (unweighted BFS). There is no weighted shortest-path solver — use hop counts or implement your own on top of `get_adjacency()`. |
+| Using a static draw call then trying to update positions | Node positions don't move in the animation loop | Static variants (`DrawTHREEBoxBasedVertices`, `DrawTHREEGraphEdgesThick`) bake geometry at creation. For live updates use the `Mutable` variants and call `updatePositions()` / `updateEdges()` each frame. |
+
+---
+
 ## Testing
 
 - **Unit tests:** `npm run test:unit` (Vitest; tests Utilities, Graph, Simulation, matrix helpers).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plebeiangraphlibrary",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "A NetworkX like package for graphs in javascript",
   "source": "./Src/index.ts",
   "main": "./Build/pgl.js",