npm - @graphty/layout - Versions diffs - 1.1.1 → 1.2.1 - Mend

@graphty/layout 1.1.1 → 1.2.1

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 (100) hide show

package/.env.example +11 -0
package/.github/workflows/ci.yml +3 -7
package/CHANGELOG.md +14 -0
package/DEPLOYMENT.md +59 -0
package/README.md +54 -1
package/dist/vitest.config.js +2 -2
package/dist/vitest.config.js.map +1 -1
package/examples/3d-force-directed.html +611 -0
package/examples/3d-kamada-kawai.html +379 -0
package/examples/3d-layout-comparison.html +448 -0
package/examples/3d-spherical-layout.html +319 -0
package/examples/arf-layout.html +13 -1
package/examples/bfs-layout.html +38 -32
package/examples/bipartite-layout.html +16 -4
package/examples/circular-layout.html +14 -2
package/examples/forceatlas2-layout.html +118 -151
package/examples/index.html +75 -0
package/examples/kamada-kawai-layout.html +13 -1
package/{dist → examples}/layout-helpers.js +58 -29
package/examples/multipartite-layout.html +44 -54
package/examples/planar-layout.html +13 -1
package/examples/random-layout.html +13 -1
package/examples/shell-layout.html +16 -2
package/examples/spectral-layout.html +13 -1
package/examples/spiral-layout.html +13 -1
package/examples/spring-layout.html +15 -13
package/package.json +6 -3
package/src/algorithms/index.ts +6 -0
package/src/algorithms/optimization/index.ts +12 -0
package/src/algorithms/optimization/kamada-kawai-solver.ts +231 -0
package/src/algorithms/optimization/lbfgs.ts +68 -0
package/src/algorithms/optimization/line-search.ts +50 -0
package/src/algorithms/optimization/types.ts +8 -0
package/src/algorithms/planarity/check.ts +38 -0
package/src/algorithms/planarity/embedding.ts +216 -0
package/src/algorithms/planarity/index.ts +12 -0
package/src/algorithms/planarity/lr-test.ts +70 -0
package/src/algorithms/planarity/special-graphs.ts +126 -0
package/src/generators/basic.ts +93 -0
package/src/generators/bipartite.ts +45 -0
package/src/generators/grid.ts +42 -0
package/src/generators/index.ts +15 -0
package/src/generators/random.ts +39 -0
package/src/generators/scale-free.ts +72 -0
package/src/index.ts +18 -0
package/src/layouts/basic/index.ts +5 -0
package/src/layouts/basic/random.ts +32 -0
package/src/layouts/force-directed/arf.ts +130 -0
package/src/layouts/force-directed/forceatlas2.ts +407 -0
package/src/layouts/force-directed/fruchterman-reingold.ts +164 -0
package/src/layouts/force-directed/index.ts +9 -0
package/src/layouts/force-directed/kamada-kawai.ts +112 -0
package/src/layouts/force-directed/spring.ts +35 -0
package/src/layouts/geometric/circular.ts +77 -0
package/src/layouts/geometric/index.ts +7 -0
package/src/layouts/geometric/shell.ts +80 -0
package/src/layouts/geometric/spiral.ts +93 -0
package/src/layouts/hierarchical/bfs.ts +81 -0
package/src/layouts/hierarchical/bipartite.ts +94 -0
package/src/layouts/hierarchical/index.ts +7 -0
package/src/layouts/hierarchical/multipartite.ts +88 -0
package/src/layouts/index.ts +9 -0
package/src/layouts/specialized/index.ts +6 -0
package/src/layouts/specialized/planar.ts +65 -0
package/src/layouts/specialized/spectral.ts +128 -0
package/src/types/embedding.ts +11 -0
package/src/types/graph.ts +13 -0
package/src/types/index.ts +7 -0
package/src/types/layout.ts +9 -0
package/src/utils/graph.ts +77 -0
package/src/utils/index.ts +9 -0
package/src/utils/numpy.ts +108 -0
package/src/utils/params.ts +26 -0
package/src/utils/random.ts +53 -0
package/src/utils/rescale.ts +137 -0
package/test/arf-layout.test.ts +1 -1
package/test/bfs-layout.test.ts +1 -1
package/test/bipartite-layout.test.ts +1 -1
package/test/circular-layout.test.ts +145 -3
package/test/forceatlas2-layout.test.ts +1 -1
package/test/fruchterman-reingold-layout.test.ts +1 -1
package/test/graph-generators.test.ts +1 -1
package/test/kamada-kawai-layout.test.ts +273 -1
package/test/multipartite-layout.test.ts +1 -1
package/test/planar-layout.test.ts +1 -1
package/test/random-layout.test.ts +1 -1
package/test/rescale-layout.test.ts +1 -1
package/test/shell-layout.test.ts +1 -1
package/test/spectral-layout.test.ts +1 -1
package/test/spiral-layout.test.ts +1 -1
package/test/spring-layout.test.ts +1 -1
package/vite.config.js +36 -0
package/vitest.config.ts +2 -2
package/dist/layout-helpers.d.ts +0 -123
package/dist/layout-helpers.js.map +0 -1
package/dist/layout.d.ts +0 -275
package/dist/layout.js +0 -2280
package/dist/layout.js.map +0 -1
package/layout-helpers.ts +0 -559
package/layout.ts +0 -2867

package/examples/3d-spherical-layout.html ADDED Viewed

@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>3D Spherical Layout - @graphty/layout</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: Arial, sans-serif;
+      overflow: hidden;
+    }
+    #container {
+      width: 100vw;
+      height: 100vh;
+    }
+    #info {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      color: white;
+      background: rgba(0, 0, 0, 0.7);
+      padding: 10px;
+      border-radius: 5px;
+    }
+    #controls {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background: rgba(0, 0, 0, 0.7);
+      padding: 10px;
+      border-radius: 5px;
+      color: white;
+    }
+    button {
+      display: block;
+      margin: 5px 0;
+      padding: 5px 10px;
+      cursor: pointer;
+    }
+    label {
+      display: block;
+      margin: 5px 0;
+    }
+  </style>
+</head>
+<body>
+  <div id="container"></div>
+  <div id="info">
+    <h2>3D Spherical Layout</h2>
+    <p>Nodes distributed evenly on a sphere using Fibonacci spiral</p>
+    <p>Drag to rotate • Scroll to zoom</p>
+  </div>
+  <div id="controls">
+    <label>
+      Graph Type:
+      <select id="graphType">
+        <option value="complete">Complete Graph</option>
+        <option value="cycle">Cycle Graph</option>
+        <option value="star">Star Graph</option>
+        <option value="wheel">Wheel Graph</option>
+        <option value="grid">Grid Graph</option>
+        <option value="random">Random Graph</option>
+      </select>
+    </label>
+    <label>
+      Node Count: <span id="nodeCountLabel">20</span>
+      <input type="range" id="nodeCount" min="5" max="50" value="20">
+    </label>
+    <label>
+      Sphere Radius: <span id="radiusLabel">200</span>
+      <input type="range" id="radius" min="50" max="300" value="200">
+    </label>
+    <button id="regenerate">Regenerate Graph</button>
+    <label>
+      <input type="checkbox" id="showSphere" checked> Show Sphere
+    </label>
+    <label>
+      <input type="checkbox" id="animateRotation" checked> Auto Rotate
+    </label>
+  </div>
+  <!-- Import map for module resolution -->
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/three@0.157.0/build/three.module.js",
+        "three/addons/": "https://unpkg.com/three@0.157.0/examples/jsm/"
+      }
+    }
+  </script>
+  <script type="module">
+    import * as THREE from 'https://unpkg.com/three@0.157.0/build/three.module.js';
+    import { OrbitControls } from 'https://unpkg.com/three@0.157.0/examples/jsm/controls/OrbitControls.js';
+    import {
+      circularLayout,
+      completeGraph,
+      cycleGraph,
+      starGraph,
+      wheelGraph,
+      gridGraph,
+      randomGraph
+    } from './layout.js';
+    // Three.js setup
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x0a0a0a);
+    const camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      2000
+    );
+    camera.position.set(400, 300, 500);
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.getElementById('container').appendChild(renderer.domElement);
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+    // Lighting
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+    scene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.4);
+    directionalLight.position.set(1, 1, 1);
+    scene.add(directionalLight);
+    // Graph visualization
+    let nodeGroup = new THREE.Group();
+    let edgeGroup = new THREE.Group();
+    let sphereMesh = null;
+    scene.add(nodeGroup);
+    scene.add(edgeGroup);
+    // Create sphere mesh
+    function createSphereMesh(radius) {
+      const geometry = new THREE.SphereGeometry(radius, 32, 32);
+      const material = new THREE.MeshBasicMaterial({
+        color: 0x444444,
+        wireframe: true,
+        transparent: true,
+        opacity: 0.2
+      });
+      return new THREE.Mesh(geometry, material);
+    }
+    // Create graph based on type
+    function createGraph(type, nodeCount) {
+      switch (type) {
+        case 'complete':
+          return completeGraph(nodeCount);
+        case 'cycle':
+          return cycleGraph(nodeCount);
+        case 'star':
+          return starGraph(nodeCount);
+        case 'wheel':
+          return wheelGraph(nodeCount);
+        case 'grid':
+          const size = Math.floor(Math.sqrt(nodeCount));
+          return gridGraph(size, size);
+        case 'random':
+          return randomGraph(nodeCount, 0.3, Date.now());
+        default:
+          return completeGraph(nodeCount);
+      }
+    }
+    // Visualize graph in 3D
+    function visualizeGraph(graph, radius) {
+      // Clear previous visualization
+      nodeGroup.clear();
+      edgeGroup.clear();
+      // Get 3D spherical layout
+      const positions = circularLayout(graph, radius, [0, 0, 0], 3);
+      // Create nodes
+      const nodeGeometry = new THREE.SphereGeometry(8, 16, 16);
+      const nodes = graph.nodes();
+      const nodeMeshes = {};
+      nodes.forEach((node, i) => {
+        const color = new THREE.Color();
+        color.setHSL(i / nodes.length, 0.7, 0.5);
+        const material = new THREE.MeshPhongMaterial({
+          color: color,
+          emissive: color,
+          emissiveIntensity: 0.3
+        });
+        const mesh = new THREE.Mesh(nodeGeometry, material);
+        const [x, y, z] = positions[node];
+        mesh.position.set(x, y, z);
+        nodeGroup.add(mesh);
+        nodeMeshes[node] = mesh;
+      });
+      // Create edges
+      const edges = graph.edges();
+      edges.forEach(([source, target]) => {
+        const sourcePos = positions[source];
+        const targetPos = positions[target];
+        const points = [
+          new THREE.Vector3(sourcePos[0], sourcePos[1], sourcePos[2]),
+          new THREE.Vector3(targetPos[0], targetPos[1], targetPos[2])
+        ];
+        const geometry = new THREE.BufferGeometry().setFromPoints(points);
+        const material = new THREE.LineBasicMaterial({
+          color: 0x4444ff,
+          transparent: true,
+          opacity: 0.6
+        });
+        const line = new THREE.Line(geometry, material);
+        edgeGroup.add(line);
+      });
+    }
+    // Initial graph
+    let currentGraph = createGraph('complete', 20);
+    visualizeGraph(currentGraph, 200);
+    // Add sphere
+    sphereMesh = createSphereMesh(200);
+    scene.add(sphereMesh);
+    // Controls
+    const graphTypeSelect = document.getElementById('graphType');
+    const nodeCountSlider = document.getElementById('nodeCount');
+    const nodeCountLabel = document.getElementById('nodeCountLabel');
+    const radiusSlider = document.getElementById('radius');
+    const radiusLabel = document.getElementById('radiusLabel');
+    const regenerateBtn = document.getElementById('regenerate');
+    const showSphereCheckbox = document.getElementById('showSphere');
+    const animateCheckbox = document.getElementById('animateRotation');
+    nodeCountSlider.addEventListener('input', (e) => {
+      nodeCountLabel.textContent = e.target.value;
+    });
+    radiusSlider.addEventListener('input', (e) => {
+      radiusLabel.textContent = e.target.value;
+      const radius = parseInt(e.target.value);
+      visualizeGraph(currentGraph, radius);
+      if (sphereMesh) {
+        scene.remove(sphereMesh);
+        sphereMesh = createSphereMesh(radius);
+        sphereMesh.visible = showSphereCheckbox.checked;
+        scene.add(sphereMesh);
+      }
+    });
+    regenerateBtn.addEventListener('click', () => {
+      const type = graphTypeSelect.value;
+      const nodeCount = parseInt(nodeCountSlider.value);
+      const radius = parseInt(radiusSlider.value);
+      currentGraph = createGraph(type, nodeCount);
+      visualizeGraph(currentGraph, radius);
+    });
+    graphTypeSelect.addEventListener('change', () => {
+      regenerateBtn.click();
+    });
+    showSphereCheckbox.addEventListener('change', (e) => {
+      if (sphereMesh) {
+        sphereMesh.visible = e.target.checked;
+      }
+    });
+    // Animation
+    function animate() {
+      requestAnimationFrame(animate);
+      if (animateCheckbox.checked) {
+        nodeGroup.rotation.y += 0.002;
+        edgeGroup.rotation.y += 0.002;
+        if (sphereMesh) {
+          sphereMesh.rotation.y += 0.002;
+        }
+      }
+      controls.update();
+      renderer.render(scene, camera);
+    }
+    // Handle window resize
+    window.addEventListener('resize', () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+    animate();
+  </script>
+</body>
+</html>

package/examples/arf-layout.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>ARF Layout Test</title>
@@ -178,7 +190,7 @@
     </div>
     <script type="module">
-        import { arfLayout } from '../dist/layout.js';
+        import { arfLayout } from "./layout.js";
         let currentGraph = null;
         let currentSeed = Math.floor(Math.random() * 1000);

package/examples/bfs-layout.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>BFS Layout Test</title>
@@ -157,61 +169,55 @@
     </div>
     <script type="module">
-        import {
-            bfsLayout,
-            starGraph,
-            gridGraph,
-            randomGraph,
-            scaleFreeGraph,
-            findBestRoot
-        } from '../dist/layout.js';
+        import { bfsLayout, scaleFreeGraph, randomGraph, gridGraph, starGraph } from "./layout.js";
         let currentGraph = null;
         let bestRoot = null;
         function generateGraph(type, numNodes) {
+            let graph;
             switch(type) {
                 case 'tree':
                     // Generate tree-like structure using scale-free with low m
-                    return scaleFreeGraph(numNodes, 1, Date.now());
+                    graph = scaleFreeGraph(numNodes, 1, Date.now());
+                    break;
                 case 'connected':
                     // Generate connected random graph
-                    return randomGraph(numNodes, 0.15, Date.now());
+                    graph = randomGraph(numNodes, 0.15, Date.now());
+                    break;
                 case 'grid':
                     // Create grid
                     const size = Math.ceil(Math.sqrt(numNodes));
-                    return gridGraph(size, size);
+                    const gridG = gridGraph(size, size);
+                    // Convert string node IDs to numbers for consistency
+                    const nodeMap = new Map();
+                    gridG.nodes().forEach((node, i) => nodeMap.set(node, i));
+                    graph = {
+                        nodes: () => Array.from({length: gridG.nodes().length}, (_, i) => i),
+                        edges: () => gridG.edges().map(([u, v]) => [nodeMap.get(u), nodeMap.get(v)])
+                    };
+                    break;
                 case 'star':
-                    return starGraph(numNodes);
-                default:
-                    return randomGraph(numNodes, 0.2, Date.now());
-                            edges.push([i, i + gridSize]);
-                        }
-                    }
+                    graph = starGraph(numNodes);
                     break;
-                case 'star':
-                    // Star with center at node 0
-                    for (let i = 1; i < numNodes; i++) {
-                        edges.push([0, i]);
-                    }
+                default:
+                    graph = randomGraph(numNodes, 0.2, Date.now());
                     break;
             }
-            return {
-                nodes: () => nodes,
-                edges: () => edges,
-                // Simplified implementation to get neighbors
-                getNeighbors: function(node) {
-                    return edges
-                        .filter(([s, t]) => s === node || t === node)
-                        .map(([s, t]) => s === node ? t : s);
-                }
+            // Add getNeighbors method to the graph
+            graph.getNeighbors = function(node) {
+                const edges = this.edges();
+                return edges
+                    .filter(([s, t]) => s === node || t === node)
+                    .map(([s, t]) => s === node ? t : s);
             };
+            return graph;
         }
         function updateStartNodeOptions() {

package/examples/bipartite-layout.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Bipartite Layout Test</title>
@@ -153,9 +165,9 @@
         import {
             bipartiteLayout,
             bipartiteGraph,
-            detectBipartite,
             randomGraph
-        } from '../dist/layout.js';
+        } from "./layout.js";
+        import { detectBipartite } from "./layout-helpers.js";
         let currentGraph = null;
         let detectedBipartite = null;
@@ -323,7 +335,7 @@
             document.getElementById('alignment').onchange = null;
         }
-        window.generateMixedGraph = function() {
+        window.generateMixedGraph = async function() {
             const totalNodes = parseInt(document.getElementById('set-a-size').value) +
                                parseInt(document.getElementById('set-b-size').value);
             const edgeDensity = parseFloat(document.getElementById('edge-density').value);
@@ -348,7 +360,7 @@
                 `;
             } else {
                 // Not bipartite - show with spring layout instead
-                const { springLayout } = await import('../dist/layout.js');
+                const { springLayout } = await import('./layout.js');
                 const positions = springLayout(currentGraph);
                 visualizeGraph(currentGraph, positions);

package/examples/circular-layout.html CHANGED Viewed

@@ -1,6 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <!-- Eruda Mobile Console -->
+  <script src="https://cdn.jsdelivr.net/npm/eruda@3/eruda.min.js"></script>
+  <script>
+    // Initialize Eruda console for mobile debugging
+    if (typeof eruda !== "undefined") {
+      eruda.init();
+      // Auto-show on mobile devices
+      if (/mobile|android|ios|iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase())) {
+        eruda.show();
+      }
+    }
+  </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Circular Layout Test</title>
@@ -142,7 +154,7 @@
             cycleGraph,
             wheelGraph,
             randomGraph
-        } from '../dist/layout.js';
+        } from "./layout.js";
         let currentGraph = null;
@@ -277,4 +289,4 @@
         newGraph();
     </script>
 </body>
-</html>
+</html>