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

@graphty/layout 1.1.1 → 1.2.0

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

package/.env.example +11 -0
package/CHANGELOG.md +7 -0
package/DEPLOYMENT.md +59 -0
package/README.md +53 -0
package/dist/layout-helpers.js +2 -1
package/dist/layout-helpers.js.map +1 -1
package/dist/layout.d.ts +2 -2
package/dist/layout.js +38 -14
package/dist/layout.js.map +1 -1
package/examples/3d-force-directed.html +611 -0
package/examples/3d-kamada-kawai.html +394 -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 +13 -1
package/examples/bipartite-layout.html +13 -1
package/examples/circular-layout.html +14 -2
package/examples/forceatlas2-layout.html +13 -1
package/examples/index.html +75 -0
package/examples/kamada-kawai-layout.html +13 -1
package/examples/multipartite-layout.html +13 -41
package/examples/planar-layout.html +13 -1
package/examples/random-layout.html +13 -1
package/examples/shell-layout.html +13 -1
package/examples/spectral-layout.html +13 -1
package/examples/spiral-layout.html +13 -1
package/examples/spring-layout.html +14 -2
package/layout-helpers.ts +2 -1
package/layout.ts +39 -13
package/package.json +5 -2
package/test/circular-layout.test.ts +145 -3
package/test/kamada-kawai-layout.test.ts +273 -1
package/vite.config.js +36 -0

package/examples/3d-force-directed.html ADDED Viewed

@@ -0,0 +1,611 @@
+<!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 Force-Directed Layouts - @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;
+      max-width: 250px;
+    }
+    button {
+      display: block;
+      margin: 5px 0;
+      padding: 5px 10px;
+      cursor: pointer;
+      width: 100%;
+    }
+    label {
+      display: block;
+      margin: 8px 0;
+    }
+    select, input[type="range"] {
+      width: 100%;
+    }
+    .algorithm-params {
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px solid #555;
+    }
+  </style>
+</head>
+<body>
+  <div id="container"></div>
+  <div id="info">
+    <h2>3D Force-Directed Layouts</h2>
+    <p>Compare different force-directed algorithms in 3D</p>
+    <p>Drag to rotate • Scroll to zoom</p>
+  </div>
+  <div id="controls">
+    <label>
+      Algorithm:
+      <select id="algorithm">
+        <option value="spring">Spring Layout</option>
+        <option value="forceatlas2">ForceAtlas2</option>
+        <option value="arf">ARF Layout</option>
+      </select>
+    </label>
+    <label>
+      Graph Type:
+      <select id="graphType">
+        <option value="random">Random Graph</option>
+        <option value="scalefree">Scale-Free Graph</option>
+        <option value="complete">Complete Graph</option>
+        <option value="bipartite">Bipartite Graph</option>
+        <option value="grid">Grid Graph</option>
+      </select>
+    </label>
+    <label>
+      Node Count: <span id="nodeCountLabel">25</span>
+      <input type="range" id="nodeCount" min="10" max="50" value="25">
+    </label>
+    <button id="regenerate">Generate New Graph</button>
+    <div class="algorithm-params">
+      <h4>Algorithm Parameters</h4>
+      <label>
+        Iterations: <span id="iterationsLabel">50</span>
+        <input type="range" id="iterations" min="10" max="200" value="50">
+      </label>
+      <label id="springConstantControl">
+        Spring Constant: <span id="springLabel">1</span>
+        <input type="range" id="springConstant" min="0.1" max="5" step="0.1" value="1">
+      </label>
+      <label id="gravityControl">
+        Gravity: <span id="gravityLabel">1</span>
+        <input type="range" id="gravity" min="0" max="10" step="0.5" value="1">
+      </label>
+      <label id="attractionControl">
+        Attraction: <span id="attractionLabel">0.1</span>
+        <input type="range" id="attraction" min="0" max="1" step="0.05" value="0.1">
+      </label>
+    </div>
+    <label>
+      <input type="checkbox" id="showParticles"> Show Force Particles
+    </label>
+    <label>
+      <input type="checkbox" id="animateLayout" checked> Animate Transition
+    </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">
+    console.log('Script starting...');
+    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 {
+      springLayout,
+      forceatlas2Layout,
+      arfLayout,
+      randomGraph,
+      scaleFreeGraph,
+      completeGraph,
+      bipartiteGraph,
+      gridGraph
+    } from './layout.js';
+    console.log('All modules imported successfully');
+    console.log('Layout functions available:', {
+      springLayout: typeof springLayout,
+      randomGraph: typeof randomGraph
+    });
+    // Test graph generation
+    console.log('Testing graph generation...');
+    const testGraph = randomGraph(5, 0.5, 42);
+    console.log('Test graph created:', {
+      nodes: testGraph.nodes(),
+      edges: testGraph.edges(),
+      nodeCount: testGraph.nodes().length,
+      edgeCount: testGraph.edges().length
+    });
+    // Test layout function
+    console.log('Testing spring layout...');
+    const testPositions = springLayout(testGraph, 1, null, null, 10, 1, [0, 0, 0], 3);
+    console.log('Test layout positions:', testPositions);
+    console.log('Number of positioned nodes:', Object.keys(testPositions).length);
+    try {
+    // Three.js setup
+    console.log('Setting up Three.js scene...');
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x0a0a0a);
+    scene.fog = new THREE.Fog(0x0a0a0a, 500, 1500);
+    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.4);
+    scene.add(ambientLight);
+    const pointLight1 = new THREE.PointLight(0xff0044, 1, 500);
+    pointLight1.position.set(200, 200, 200);
+    scene.add(pointLight1);
+    const pointLight2 = new THREE.PointLight(0x0044ff, 1, 500);
+    pointLight2.position.set(-200, -200, -200);
+    scene.add(pointLight2);
+    // Graph visualization
+    let nodeGroup = new THREE.Group();
+    let edgeGroup = new THREE.Group();
+    let particleGroup = new THREE.Group();
+    scene.add(nodeGroup);
+    scene.add(edgeGroup);
+    scene.add(particleGroup);
+    console.log('Three.js setup complete');
+    // Animation state
+    let currentPositions = {};
+    let targetPositions = {};
+    let animationProgress = 0;
+    let isAnimating = false;
+    // Create graph based on type
+    function createGraph(type, nodeCount) {
+      console.log(`Creating graph: type=${type}, nodeCount=${nodeCount}`);
+      let graph;
+      switch (type) {
+        case 'random':
+          graph = randomGraph(nodeCount, 0.15, Date.now());
+          break;
+        case 'scalefree':
+          graph = scaleFreeGraph(nodeCount, 2, Date.now());
+          break;
+        case 'complete':
+          graph = completeGraph(Math.min(nodeCount, 10)); // Limit complete graph size
+          break;
+        case 'bipartite':
+          const n1 = Math.floor(nodeCount / 2);
+          const n2 = nodeCount - n1;
+          graph = bipartiteGraph(n1, n2, 0.3, Date.now());
+          break;
+        case 'grid':
+          const size = Math.floor(Math.sqrt(nodeCount));
+          graph = gridGraph(size, size);
+          break;
+        default:
+          graph = randomGraph(nodeCount, 0.15, Date.now());
+      }
+      console.log(`Graph created:`, {
+        nodes: graph.nodes?.()?.length || 'no nodes method',
+        edges: graph.edges?.()?.length || 'no edges method',
+        nodesList: graph.nodes?.() || 'no nodes',
+        edgesList: graph.edges?.() || 'no edges'
+      });
+      return graph;
+    }
+    // Get layout based on algorithm
+    function getLayout(algorithm, graph, params) {
+      console.log(`Getting layout: algorithm=${algorithm}, params=`, params);
+      const center = [0, 0, 0];
+      const dim = 3;
+      let positions;
+      switch (algorithm) {
+        case 'spring':
+          console.log('Calling springLayout with params:', {
+            springConstant: params.springConstant,
+            iterations: params.iterations,
+            center,
+            dim
+          });
+          positions = springLayout(
+            graph,
+            params.springConstant,
+            null,
+            null,
+            params.iterations,
+            1,
+            center,
+            dim
+          );
+          break;
+        case 'forceatlas2':
+          positions = forceatlas2Layout(
+            graph,
+            null,
+            params.iterations,
+            1.0,
+            2.0,
+            params.gravity,
+            false,
+            false,
+            null,
+            null,
+            null,
+            false,
+            false,
+            null,
+            dim
+          );
+          break;
+        case 'arf':
+          positions = arfLayout(
+            graph,
+            null,
+            1,
+            1.1,
+            params.iterations
+          );
+          break;
+        default:
+          positions = springLayout(graph, 1, null, null, 50, 1, center, dim);
+      }
+      console.log('Layout positions generated:', positions);
+      console.log('Number of positioned nodes:', Object.keys(positions).length);
+      return positions;
+    }
+    // Create force particles
+    function createForceParticles(positions) {
+      particleGroup.clear();
+      if (!document.getElementById('showParticles').checked) return;
+      const particleGeometry = new THREE.SphereGeometry(2, 8, 8);
+      const particleMaterial = new THREE.MeshBasicMaterial({
+        color: 0xffff00,
+        transparent: true,
+        opacity: 0.6
+      });
+      const scale = 200; // Same scale as nodes
+      Object.values(positions).forEach(pos => {
+        for (let i = 0; i < 3; i++) {
+          const particle = new THREE.Mesh(particleGeometry, particleMaterial);
+          const offset = (Math.random() - 0.5) * 50;
+          particle.position.set(
+            pos[0] * scale + offset,
+            pos[1] * scale + offset,
+            pos[2] * scale + offset
+          );
+          particleGroup.add(particle);
+        }
+      });
+    }
+    // Visualize graph
+    function visualizeGraph(graph, positions, animate = true) {
+      console.log('Visualizing graph with positions:', positions);
+      const nodes = graph.nodes();
+      const edges = graph.edges();
+      console.log(`Visualizing: ${nodes.length} nodes, ${edges.length} edges`);
+      // Store target positions
+      targetPositions = { ...positions };
+      // Initialize current positions if needed
+      if (Object.keys(currentPositions).length === 0 || !animate) {
+        currentPositions = { ...targetPositions };
+        updateVisualization(graph, currentPositions);
+      } else {
+        // Start animation
+        animationProgress = 0;
+        isAnimating = true;
+      }
+      createForceParticles(positions);
+    }
+    // Update visualization with current positions
+    function updateVisualization(graph, positions) {
+      console.log('updateVisualization called with positions:', positions);
+      // Clear previous visualization
+      nodeGroup.clear();
+      edgeGroup.clear();
+      const nodes = graph.nodes();
+      const edges = graph.edges();
+      const nodeMeshes = {};
+      console.log(`Creating visualization for ${nodes.length} nodes and ${edges.length} edges`);
+      // Calculate node sizes based on degree
+      const degrees = {};
+      nodes.forEach(node => degrees[node] = 0);
+      edges.forEach(([u, v]) => {
+        degrees[u]++;
+        degrees[v]++;
+      });
+      const maxDegree = Math.max(...Object.values(degrees), 1);
+      // Create nodes
+      nodes.forEach((node, i) => {
+        const degree = degrees[node];
+        const size = 5 + (degree / maxDegree) * 15;
+        const geometry = new THREE.SphereGeometry(size, 32, 16);
+        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,
+          shininess: 100
+        });
+        const mesh = new THREE.Mesh(geometry, material);
+        const pos = positions[node] || [0, 0, 0];
+        // Scale up positions for better visibility in 3D space
+        const scale = 200;
+        const scaledPos = [pos[0] * scale, pos[1] * scale, pos[2] * scale];
+        console.log(`Node ${node} positioned at [${pos[0]}, ${pos[1]}, ${pos[2]}] -> scaled to [${scaledPos[0]}, ${scaledPos[1]}, ${scaledPos[2]}]`);
+        mesh.position.set(scaledPos[0], scaledPos[1], scaledPos[2]);
+        nodeGroup.add(mesh);
+        nodeMeshes[node] = mesh;
+      });
+      console.log(`Added ${nodeGroup.children.length} node meshes to scene`);
+      // Create edges
+      const scale = 200; // Same scale as nodes
+      edges.forEach(([source, target]) => {
+        const sourcePos = positions[source] || [0, 0, 0];
+        const targetPos = positions[target] || [0, 0, 0];
+        const points = [
+          new THREE.Vector3(sourcePos[0] * scale, sourcePos[1] * scale, sourcePos[2] * scale),
+          new THREE.Vector3(targetPos[0] * scale, targetPos[1] * scale, targetPos[2] * scale)
+        ];
+        const geometry = new THREE.BufferGeometry().setFromPoints(points);
+        const material = new THREE.LineBasicMaterial({
+          color: 0x4466ff,
+          transparent: true,
+          opacity: 0.4
+        });
+        const line = new THREE.Line(geometry, material);
+        edgeGroup.add(line);
+      });
+    }
+    // Initial setup
+    let currentGraph = createGraph('random', 25);
+    let currentAlgorithm = 'spring';
+    // Controls
+    const algorithmSelect = document.getElementById('algorithm');
+    const graphTypeSelect = document.getElementById('graphType');
+    const nodeCountSlider = document.getElementById('nodeCount');
+    const iterationsSlider = document.getElementById('iterations');
+    const springConstantSlider = document.getElementById('springConstant');
+    const gravitySlider = document.getElementById('gravity');
+    const attractionSlider = document.getElementById('attraction');
+    const animateCheckbox = document.getElementById('animateLayout');
+    // Update parameter visibility based on algorithm
+    function updateParameterVisibility() {
+      const algorithm = algorithmSelect.value;
+      document.getElementById('springConstantControl').style.display =
+        (algorithm === 'spring' || algorithm === 'arf') ? 'block' : 'none';
+      document.getElementById('gravityControl').style.display =
+        algorithm === 'forceatlas2' ? 'block' : 'none';
+      document.getElementById('attractionControl').style.display =
+        algorithm === 'arf' ? 'block' : 'none';
+    }
+    // Event listeners
+    algorithmSelect.addEventListener('change', () => {
+      currentAlgorithm = algorithmSelect.value;
+      updateParameterVisibility();
+      applyLayout();
+    });
+    nodeCountSlider.addEventListener('input', (e) => {
+      document.getElementById('nodeCountLabel').textContent = e.target.value;
+    });
+    iterationsSlider.addEventListener('input', (e) => {
+      document.getElementById('iterationsLabel').textContent = e.target.value;
+    });
+    springConstantSlider.addEventListener('input', (e) => {
+      document.getElementById('springLabel').textContent = e.target.value;
+    });
+    gravitySlider.addEventListener('input', (e) => {
+      document.getElementById('gravityLabel').textContent = e.target.value;
+    });
+    attractionSlider.addEventListener('input', (e) => {
+      document.getElementById('attractionLabel').textContent = e.target.value;
+    });
+    document.getElementById('regenerate').addEventListener('click', () => {
+      const type = graphTypeSelect.value;
+      const nodeCount = parseInt(nodeCountSlider.value);
+      currentGraph = createGraph(type, nodeCount);
+      applyLayout();
+    });
+    document.getElementById('showParticles').addEventListener('change', () => {
+      if (!document.getElementById('showParticles').checked) {
+        particleGroup.clear();
+      } else {
+        createForceParticles(targetPositions);
+      }
+    });
+    // Apply layout with current parameters
+    function applyLayout() {
+      const params = {
+        iterations: parseInt(iterationsSlider.value),
+        springConstant: parseFloat(springConstantSlider.value),
+        gravity: parseFloat(gravitySlider.value),
+        attraction: parseFloat(attractionSlider.value)
+      };
+      const positions = getLayout(currentAlgorithm, currentGraph, params);
+      visualizeGraph(currentGraph, positions, animateCheckbox.checked);
+    }
+    // Smooth position interpolation
+    function lerp(start, end, t) {
+      return start + (end - start) * t;
+    }
+    function easeInOutCubic(t) {
+      return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+    }
+    // Animation loop
+    function animate() {
+      requestAnimationFrame(animate);
+      // Animate layout transition
+      if (isAnimating && animateCheckbox.checked) {
+        animationProgress += 0.02;
+        if (animationProgress >= 1) {
+          animationProgress = 1;
+          isAnimating = false;
+          currentPositions = { ...targetPositions };
+        }
+        const t = easeInOutCubic(animationProgress);
+        const interpolatedPositions = {};
+        for (const node in targetPositions) {
+          const current = currentPositions[node] || [0, 0, 0];
+          const target = targetPositions[node];
+          interpolatedPositions[node] = [
+            lerp(current[0], target[0], t),
+            lerp(current[1], target[1], t),
+            lerp(current[2], target[2], t)
+          ];
+        }
+        updateVisualization(currentGraph, interpolatedPositions);
+      }
+      // Animate particles
+      particleGroup.children.forEach((particle, i) => {
+        particle.position.y += Math.sin(Date.now() * 0.001 + i) * 0.5;
+        particle.material.opacity = 0.3 + Math.sin(Date.now() * 0.002 + i) * 0.3;
+      });
+      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);
+    });
+    // Initialize
+    console.log('Initializing application...');
+    updateParameterVisibility();
+    console.log('About to call applyLayout()...');
+    applyLayout();
+    console.log('Starting animation loop...');
+    animate();
+    } catch (error) {
+      console.error('Error during setup:', error);
+      console.error('Error stack:', error.stack);
+      // Show error on page
+      const errorDiv = document.createElement('div');
+      errorDiv.style.cssText = 'position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(255,0,0,0.9); color: white; padding: 20px; border-radius: 10px; z-index: 1000; max-width: 80%; text-align: center;';
+      errorDiv.innerHTML = '<h3>Error Loading 3D Demo</h3><p>' + error.message + '</p><p style="font-size: 12px;">' + error.stack + '</p>';
+      document.body.appendChild(errorDiv);
+    }
+  </script>
+</body>
+</html>