npm - plebeiangraphlibrary - Versions diffs - 2.0.1 → 2.1.2 - Mend

plebeiangraphlibrary 2.0.1 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/Build/Core/Edge.d.ts +20 -0
package/Build/Core/Graph.d.ts +114 -0
package/Build/Core/_Node.d.ts +20 -0
package/Build/Core/index.d.ts +3 -0
package/Build/Drawing/Drawing.d.ts +129 -0
package/Build/Drawing/GraphDrawer.d.ts +70 -0
package/Build/Drawing/MeshLineGeometry.d.ts +11 -0
package/Build/Drawing/MeshLineMaterial.d.ts +16 -0
package/Build/Drawing/ThickLine.d.ts +21 -0
package/Build/Drawing/ThreeJSDrawer.d.ts +197 -0
package/Build/Drawing/index.d.ts +3 -0
package/Build/GraphAlgorithms/GraphMethods.d.ts +47 -0
package/Build/GraphAlgorithms/index.d.ts +1 -0
package/Build/HelperClasses/ColorHelper.d.ts +21 -0
package/Build/HelperClasses/GeometryHelpers.d.ts +31 -0
package/Build/HelperClasses/GraphConstructors.d.ts +12 -0
package/Build/HelperClasses/Line.d.ts +12 -0
package/Build/HelperClasses/Point.d.ts +26 -0
package/Build/HelperClasses/Utilities.d.ts +45 -0
package/Build/HelperClasses/index.d.ts +3 -0
package/Build/Hierarchy/KDDistanceStrategy.d.ts +8 -0
package/Build/Hierarchy/KDTree.d.ts +10 -0
package/Build/Hierarchy/buildSimplifiedGraph.d.ts +7 -0
package/Build/Hierarchy/index.d.ts +29 -0
package/Build/Hierarchy/types.d.ts +33 -0
package/Build/MatrixHelpers.d.ts +12 -0
package/Build/Models/ErdosRenyiModel.d.ts +13 -0
package/Build/Models/index.d.ts +1 -0
package/Build/SampleData/DataLoader.d.ts +49 -0
package/Build/SampleData/ZKC.d.ts +5 -0
package/Build/SampleData/ZKC_simulated.d.ts +10 -0
package/Build/SampleData/dwt_1005.d.ts +1008 -0
package/Build/SampleData/index.d.ts +2 -0
package/Build/Shaders/fragmentShader.glsl.d.ts +2 -0
package/Build/Shaders/vertexShader.glsl.d.ts +2 -0
package/Build/Simulation/KamadaKawai3D.d.ts +30 -0
package/Build/Simulation/Octree.d.ts +34 -0
package/Build/Simulation/StressSGD3D.d.ts +45 -0
package/Build/Simulation/index.d.ts +4 -0
package/Build/index.d.ts +40 -0
package/Build/pgl.js +3824 -3389
package/Build/pgl.js.map +1 -1
package/Build/pgl_module.js +20827 -35564
package/Build/pgl_module.js.map +1 -1
package/Examples/10_Adjacency_matrix.html +74 -0
package/Examples/11_Custom_layout.html +89 -0
package/Examples/12_StressSGD_simulation_live.html +80 -0
package/Examples/13_StressSGD_bunny_3d.html +104 -0
package/Examples/4_ToggleActivation.html +1 -1
package/Examples/5_Hierarchy_simple.html +5 -2
package/Examples/9_Simulation_live.html +74 -0
package/Examples/data/bunny.obj +7474 -0
package/Examples/examples.html +27 -2
package/README.md +42 -10
package/package.json +15 -23
package/Build/Textures/Square.png +0 -0
package/Build/pgl.d.ts +0 -703
package/Build/pgl.d.ts.map +0 -1

package/Examples/10_Adjacency_matrix.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="MasterStyle.css" />
+  <title>Example 10 – Adjacency matrix and power iteration</title>
+</head>
+<body class="example-page">
+  <header class="example-header">
+    <a href="examples.html" class="back-link">← All examples</a>
+    <h1>Example 10 – Adjacency matrix and power iteration</h1>
+    <p class="example-desc">get_adjacency_matrix() + power iteration in the browser. Node size reflects leading eigenvector (larger = higher value).</p>
+    <a href="https://github.com/range-et/PGL/blob/main/Examples/10_Adjacency_matrix.html" class="code-link" target="_blank" rel="noopener">View code</a>
+  </header>
+  <div class="canvas-wrap">
+    <canvas id="displayCanvas" class="displayCanvas"></canvas>
+    <script type="module">
+      import * as PGL from "../Build/pgl_module.js";
+      const G = await PGL.Models.GenerateErdosReyni_n_p(150, 0.04);
+      await G.initialize();
+      G.printData();
+      const { matrix, nodeIds } = G.get_adjacency_matrix();
+      const n = nodeIds.length;
+      const x = new Float32Array(n);
+      for (let i = 0; i < n; i++) x[i] = Math.random();
+      PGL.normalizeVector(x);
+      const out = new Float32Array(n);
+      for (let iter = 0; iter < 20; iter++) {
+        PGL.matrixVectorMultiply(matrix, n, x, out);
+        x.set(out);
+        PGL.normalizeVector(x);
+      }
+      let min = Infinity, max = -Infinity;
+      for (let i = 0; i < n; i++) {
+        if (x[i] < min) min = x[i];
+        if (x[i] > max) max = x[i];
+      }
+      const range = max - min || 1;
+      const sizes = nodeIds.map((_, i) => 0.3 + 0.7 * (x[i] - min) / range);
+      const simulatedPosMap = await PGL.Drawing.SimulateKamadaKawai(G, 3, 2000, 1, 1.2);
+      G.apply_position_map(simulatedPosMap);
+      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 });
+      await graph3d.init();
+      const bounds = 0.08;
+      const nodeVisualElements = PGL.ThreeWrapper.DrawTHREEGraphVertices(G, bounds, sizes, 0xffffff, 1);
+      graph3d.addVisElement(nodeVisualElements);
+      const edgeVisualElements = PGL.ThreeWrapper.DrawTHREEGraphEdgesThin(G, bounds, 0x444444);
+      graph3d.addVisElement(edgeVisualElements);
+      function animate() {
+        requestAnimationFrame(animate);
+        graph3d.rendercall();
+      }
+      animate();
+    </script>
+  </div>
+</body>
+</html>

package/Examples/11_Custom_layout.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="MasterStyle.css" />
+  <title>Example 11 – Custom layout from matrix math</title>
+</head>
+<body class="example-page">
+  <header class="example-header">
+    <a href="examples.html" class="back-link">← All examples</a>
+    <h1>Example 11 – Custom layout from matrix math</h1>
+    <p class="example-desc">Adjacency matrix → power iteration for two vectors → use as X/Z coordinates. Full pipeline: get_adjacency_matrix(), matrixVectorMultiply, apply_position_map.</p>
+    <a href="https://github.com/range-et/PGL/blob/main/Examples/11_Custom_layout.html" class="code-link" target="_blank" rel="noopener">View code</a>
+  </header>
+  <div class="canvas-wrap">
+    <canvas id="displayCanvas" class="displayCanvas"></canvas>
+    <script type="module">
+      import * as PGL from "../Build/pgl_module.js";
+      const G = await PGL.Models.GenerateErdosReyni_n_p(120, 0.05);
+      await G.initialize();
+      G.printData();
+      const { matrix, nodeIds } = G.get_adjacency_matrix();
+      const n = nodeIds.length;
+      const out = new Float32Array(n);
+      function powerIteration(seed) {
+        const x = new Float32Array(n);
+        for (let i = 0; i < n; i++) x[i] = seed(i);
+        PGL.normalizeVector(x);
+        for (let iter = 0; iter < 15; iter++) {
+          PGL.matrixVectorMultiply(matrix, n, x, out);
+          x.set(out);
+          PGL.normalizeVector(x);
+        }
+        return x;
+      }
+      const xCoord = powerIteration(() => Math.random());
+      const zCoord = powerIteration((i) => (i % 2 === 0 ? 1 : -1));
+      let minX = Infinity, maxX = -Infinity, minZ = Infinity, maxZ = -Infinity;
+      for (let i = 0; i < n; i++) {
+        if (xCoord[i] < minX) minX = xCoord[i];
+        if (xCoord[i] > maxX) maxX = xCoord[i];
+        if (zCoord[i] < minZ) minZ = zCoord[i];
+        if (zCoord[i] > maxZ) maxZ = zCoord[i];
+      }
+      const scale = 80;
+      const rx = maxX - minX || 1;
+      const rz = maxZ - minZ || 1;
+      const posMap = new Map();
+      nodeIds.forEach((id, i) => {
+        posMap.set(id, {
+          x: scale * (xCoord[i] - minX) / rx,
+          y: 0,
+          z: scale * (zCoord[i] - minZ) / rz,
+        });
+      });
+      G.apply_position_map(posMap);
+      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 });
+      await graph3d.init();
+      const bounds = 0.1;
+      graph3d.addVisElement(PGL.ThreeWrapper.DrawTHREEGraphVertices(G, bounds, 1, 0xffffff, 1));
+      graph3d.addVisElement(PGL.ThreeWrapper.DrawTHREEGraphEdgesThin(G, bounds, 0xffafcc));
+      function animate() {
+        requestAnimationFrame(animate);
+        graph3d.rendercall();
+      }
+      animate();
+    </script>
+  </div>
+</body>
+</html>

package/Examples/12_StressSGD_simulation_live.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="MasterStyle.css" />
+  <title>Example 12 – Stress SGD live simulation</title>
+</head>
+<body class="example-page">
+  <header class="example-header">
+    <a href="examples.html" class="back-link">← All examples</a>
+    <h1>Example 12 – Stress SGD live simulation</h1>
+    <p class="example-desc">Time-based 3D stress layout by stochastic gradient descent (arXiv:1710.04626). Uses createStressSGD3D, step(dt), and mutable vertices.</p>
+    <a href="https://github.com/range-et/PGL/blob/main/Examples/12_StressSGD_simulation_live.html" class="code-link" target="_blank" rel="noopener">View code</a>
+  </header>
+  <div class="canvas-wrap">
+    <canvas id="displayCanvas" class="displayCanvas"></canvas>
+    <script type="module">
+      import * as PGL from "../Build/pgl_module.js";
+      // DWT 1005 graph from the paper (1005 nodes). dimensions: 3 = full 3D layout (like Example 9).
+      const G = await PGL.SampleData.LoadDwt1005();
+      G.printData();
+      // Faithful s_gd2 port: epoch-based, Fisher-Yates shuffle, [0,1] init
+      const simulation = await PGL.createStressSGD3D(G, {
+        dimensions: 2,
+        simulationBound: 1,
+        epochsPerStep: 1,
+        tMax: 80,
+        eps: 0.01,
+        scaleBound: 1200, // scale output for visibility (not in reference)
+      });
+      // Keep graph and simulation in sync: apply positions then rebuild edge geometry from graph
+      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,
+      });
+      await graph3d.init();
+      const bounds = 0.1;
+      const { group, updatePositions } = PGL.ThreeWrapper.DrawTHREEGraphVerticesMutable(G, bounds, 1, 0xffffff, 1);
+      graph3d.addVisElement(group);
+      const { group: edgeGroup, updateEdges } = PGL.ThreeWrapper.DrawTHREEGraphEdgesThinMutable(G, bounds, 0xffafcc);
+      graph3d.addVisElement(edgeGroup);
+      let lastTime = performance.now();
+      function animate() {
+        requestAnimationFrame(animate);
+        const now = performance.now();
+        const dt = (now - lastTime) / 1000;
+        lastTime = now;
+        simulation.step(dt);
+        // 1) Push simulation positions into graph so edge geometry uses same positions
+        G.apply_position_map(simulation.getPositionMap());
+        const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);
+        G.apply_edge_pos_maps(lmap);
+        // 2) Update Three.js vertex and edge geometry from same data
+        updatePositions(simulation.getPositions());
+        updateEdges();
+        graph3d.rendercall();
+      }
+      animate();
+    </script>
+  </div>
+</body>
+</html>

package/Examples/13_StressSGD_bunny_3d.html ADDED Viewed

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="MasterStyle.css" />
+  <title>Example 13 – Stress SGD 3D (Stanford Bunny mesh)</title>
+</head>
+<body class="example-page">
+  <header class="example-header">
+    <a href="examples.html" class="back-link">← All examples</a>
+    <h1>Example 13 – Stress SGD 3D (Stanford Bunny mesh)</h1>
+    <p class="example-desc">3D stress layout from a mesh: graph = mesh vertices + edges, initial positions = mesh positions. Layout refines in 3D so the shape stays bunny-like (no collapse to a line). Based on IEEE TVCG “Graph Drawing by Stochastic Gradient Descent” and Stanford Bunny OBJ.</p>
+    <a href="https://github.com/range-et/PGL/blob/main/Examples/13_StressSGD_bunny_3d.html" class="code-link" target="_blank" rel="noopener">View code</a>
+  </header>
+  <div class="canvas-wrap">
+    <canvas id="displayCanvas" class="displayCanvas"></canvas>
+    <p id="status" style="position:absolute;left:12px;top:60px;color:#fff;font-size:12px;pointer-events:none;"></p>
+    <script type="module">
+      import * as PGL from "../Build/pgl_module.js";
+      const status = document.getElementById("status");
+      function setStatus(msg) {
+        if (status) status.textContent = msg;
+      }
+      // Stanford Bunny OBJ: load from local copy (no CORS). Mesh → graph: vertices = nodes, face edges = graph edges.
+      setStatus("Loading bunny.obj…");
+      let objText;
+      try {
+        // Prefer local copy (Examples/data/bunny.obj) so it works without CORS
+        const response = await fetch("data/bunny.obj");
+        if (!response.ok) throw new Error(response.statusText);
+        objText = await response.text();
+      } catch (e) {
+        setStatus("Could not load data/bunny.obj. Serve Examples from a local server (e.g. from repo root: npx serve ., then open Examples/13_StressSGD_bunny_3d.html). " + (e && e.message ? e.message : ""));
+        throw e;
+      }
+      setStatus("Building graph from mesh…");
+      const { graph: G, positions: meshPositions } = await PGL.SampleData.LoadGraphFromObjText(objText);
+      await G.initialize();
+      G.printData();
+      // Scale mesh positions into a comfortable range (bunny is ~0.1 units); then we'll use scaleBound to hold size
+      const scale = 4000;
+      const initialPositions = new Float32Array(meshPositions.length);
+      for (let i = 0; i < meshPositions.length; i++) initialPositions[i] = meshPositions[i] * scale;
+      setStatus("Computing all-pairs distances (one-time, may take a few seconds)…");
+      const simulation = await PGL.createStressSGD3D(G, {
+        dimensions: 3,
+        initialPositions,
+        epochsPerStep: 1,
+        tMax: 100,
+        eps: 0.01,
+        scaleBound: 1200,
+        initialPreservation: 0.15, // blend toward mesh shape so bunny stays 3D
+      });
+      setStatus("");
+      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,
+      });
+      await graph3d.init();
+      const bounds = 0.1;
+      const { group, updatePositions } = PGL.ThreeWrapper.DrawTHREEGraphVerticesMutable(G, bounds, 0.8, 0xffffff, 1);
+      graph3d.addVisElement(group);
+      const { group: edgeGroup, updateEdges } = PGL.ThreeWrapper.DrawTHREEGraphEdgesThinMutable(G, bounds, 0x88aacc);
+      graph3d.addVisElement(edgeGroup);
+      let lastTime = performance.now();
+      function animate() {
+        requestAnimationFrame(animate);
+        const now = performance.now();
+        const dt = (now - lastTime) / 1000;
+        lastTime = now;
+        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();
+        graph3d.rendercall();
+      }
+      animate();
+    </script>
+  </div>
+</body>
+</html>

package/Examples/4_ToggleActivation.html CHANGED Viewed

@@ -32,7 +32,7 @@
         // now in this case we shall use the Kamada Kawai algorithm to initilaize all the positions
         // this essentially spreads them out a little
-        const simulatedPosMap = await PGL.Drawing.SimulateKamadaKawai(G, 3, 500, 1, 1.5);
+        const simulatedPosMap = await PGL.Drawing.SimulateKamadaKawai(G, 3, 5000, 1, 1.5);
         G.apply_position_map(simulatedPosMap);
         // get the line map associated
         const lmap = PGL.Drawing.DrawEdgeLinesDivisions(G, 1);

package/Examples/5_Hierarchy_simple.html CHANGED Viewed

@@ -13,7 +13,7 @@
   <header class="example-header">
     <a href="examples.html" class="back-link">← All examples</a>
     <h1>Example 5 – Hierarchy</h1>
-    <p class="example-desc">3D KD-tree clustering: nodes within a distance threshold merge into super-nodes at centroids. Simplified graph with thick edges.</p>
+    <p class="example-desc">Simplify a graph by merging nearby nodes into super-nodes. Nodes within 25 units in 3D are grouped; each group becomes one node at its center (centroid), and edges between groups are merged. You get fewer nodes and edges while keeping the overall structure — useful for LOD or flow-map style “zoomed out” views.</p>
     <a href="https://github.com/range-et/PGL/blob/main/Examples/5_Hierarchy_simple.html" class="code-link" target="_blank" rel="noopener">View code</a>
   </header>
   <div class="canvas-wrap">
@@ -21,12 +21,15 @@
   <script type="module">
     import * as PGL from "../Build/pgl_module.js";
+    // 1) Load original graph (many nodes)
     const original = await PGL.SampleData.LoadZKCSimulated();
     original.printData();
+    // 2) Cluster by 3D distance: nodes within distanceThreshold are merged into one super-node per cluster (at centroid). Edges between clusters are aggregated.
     const simplified = await PGL.Hierarchy.clusterByDistance(original, { distanceThreshold: 25 });
-    simplified.printData();
+    simplified.printData(); // fewer nodes than original
+    // 3) Draw the simplified graph (boxes at cluster centers, thick edges between clusters)
     const lmap = PGL.Drawing.DrawEdgeLinesDivisions(simplified, 1);
     simplified.apply_edge_pos_maps(lmap);

package/Examples/9_Simulation_live.html ADDED Viewed

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="MasterStyle.css" />
+  <title>Example 9 – Live 3D simulation</title>
+</head>
+<body class="example-page">
+  <header class="example-header">
+    <a href="examples.html" class="back-link">← All examples</a>
+    <h1>Example 9 – Live 3D simulation</h1>
+    <p class="example-desc">Time-based 3D Kamada–Kawai: layout evolves in real time. Uses createKamadaKawai3D, step(dt), and mutable vertices.</p>
+    <a href="https://github.com/range-et/PGL/blob/main/Examples/9_Simulation_live.html" class="code-link" target="_blank" rel="noopener">View code</a>
+  </header>
+  <div class="canvas-wrap">
+    <canvas id="displayCanvas" class="displayCanvas"></canvas>
+    <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)
+      const G = await PGL.SampleData.LoadDwt1005();
+      G.printData();
+      const simulation = PGL.createKamadaKawai3D(G, {
+        simulationBound: 800,
+        cohesionValue: 1,
+        repulsionValue: 1,
+        iterationsPerStep: 1,
+      });
+      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,
+      });
+      await graph3d.init();
+      const bounds = 0.1;
+      const { group, updatePositions } = PGL.ThreeWrapper.DrawTHREEGraphVerticesMutable(G, bounds, 1, 0xffffff, 1);
+      graph3d.addVisElement(group);
+      const { group: edgeGroup, updateEdges } = PGL.ThreeWrapper.DrawTHREEGraphEdgesThinMutable(G, bounds, 0xffafcc);
+      graph3d.addVisElement(edgeGroup);
+      let lastTime = performance.now();
+      function animate() {
+        requestAnimationFrame(animate);
+        const now = performance.now();
+        const dt = (now - lastTime) / 1000;
+        lastTime = now;
+        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();
+        graph3d.rendercall();
+      }
+      animate();
+    </script>
+  </div>
+</body>
+</html>