coderaph 0.1.0

package/src/web/graph.js

@@ -0,0 +1,245 @@
+/**
+ * 3D Force-Directed Layout Engine
+ *
+ * Simulates a physical system where nodes repel each other,
+ * edges act as springs, and a centering force pulls everything
+ * toward the origin. Positions are mutated directly on the
+ * node objects passed to the constructor.
+ */
+
+const DEFAULT_REPULSION = 500;
+const DEFAULT_ATTRACTION = 0.02;
+const DEFAULT_IDEAL_DISTANCE = 30;
+const CENTER_STRENGTH = 0.01;
+const DAMPING_FACTOR = 0.9;
+const STABLE_ENERGY_THRESHOLD = 0.5;
+
+export class ForceGraph {
+  /**
+   * @param {Array<{id: string}>} nodes - node objects, will get x,y,z,vx,vy,vz props added
+   * @param {Array<{source: string, target: string}>} edges
+   */
+  /**
+   * @param {Array<{id: string}>} nodes - node objects, will get x,y,z,vx,vy,vz props added
+   * @param {Array<{source: string, target: string}>} edges
+   * @param {boolean} [is2D=false] - if true, constrain layout to z=0 plane
+   */
+  constructor(nodes, edges, is2D = false) {
+    this.nodes = nodes;
+    this.edges = edges;
+    this.is2D = is2D;
+
+    // Build id -> node lookup
+    /** @type {Map<string, object>} */
+    this.nodeMap = new Map();
+    for (const node of nodes) {
+      this.nodeMap.set(node.id, node);
+    }
+
+    // Build adjacency map for O(1) edge access
+    // Each node id maps to an array of connected node ids
+    /** @type {Map<string, string[]>} */
+    this.adjacency = new Map();
+    for (const node of nodes) {
+      this.adjacency.set(node.id, []);
+    }
+    for (const edge of edges) {
+      this.adjacency.get(edge.source)?.push(edge.target);
+      this.adjacency.get(edge.target)?.push(edge.source);
+    }
+
+    // Pinned nodes: id -> {x, y, z}
+    /** @type {Map<string, {x: number, y: number, z: number}>} */
+    this.pinned = new Map();
+
+    // Tunable parameters
+    this.repulsion = DEFAULT_REPULSION;
+    this.attraction = DEFAULT_ATTRACTION;
+    this.idealDistance = DEFAULT_IDEAL_DISTANCE;
+
+    // Total kinetic energy from last tick
+    this._energy = Infinity;
+
+    // Initialize node positions on a sphere surface
+    this._initPositions();
+  }
+
+  /**
+   * Distribute nodes randomly on a sphere surface.
+   * Radius = sqrt(nodes.length) * 10
+   */
+  _initPositions() {
+    const radius = Math.sqrt(this.nodes.length) * 10;
+
+    for (const node of this.nodes) {
+      if (this.is2D) {
+        // Circle distribution on z=0 plane
+        const theta = Math.random() * 2 * Math.PI;
+        node.x = radius * Math.cos(theta);
+        node.y = radius * Math.sin(theta);
+        node.z = 0;
+      } else {
+        // Random point on sphere using spherical coordinates
+        const theta = Math.random() * 2 * Math.PI;
+        const phi = Math.acos(2 * Math.random() - 1);
+        node.x = radius * Math.sin(phi) * Math.cos(theta);
+        node.y = radius * Math.sin(phi) * Math.sin(theta);
+        node.z = radius * Math.cos(phi);
+      }
+      node.vx = 0;
+      node.vy = 0;
+      node.vz = 0;
+    }
+  }
+
+  /** Run one simulation step. Call this in requestAnimationFrame. */
+  tick() {
+    const nodes = this.nodes;
+    const len = nodes.length;
+
+    // 1. Repulsion (all pairs, O(n^2))
+    for (let i = 0; i < len; i++) {
+      const a = nodes[i];
+      for (let j = i + 1; j < len; j++) {
+        const b = nodes[j];
+        const dx = a.x - b.x;
+        const dy = a.y - b.y;
+        const dz = a.z - b.z;
+        const distSq = dx * dx + dy * dy + dz * dz + 0.01;
+        const force = this.repulsion / distSq;
+        const dist = Math.sqrt(distSq);
+        const fx = (dx / dist) * force;
+        const fy = (dy / dist) * force;
+        const fz = (dz / dist) * force;
+
+        a.vx += fx;
+        a.vy += fy;
+        a.vz += fz;
+        b.vx -= fx;
+        b.vy -= fy;
+        b.vz -= fz;
+      }
+    }
+
+    // 2. Attraction (connected pairs via edges)
+    for (const edge of this.edges) {
+      const a = this.nodeMap.get(edge.source);
+      const b = this.nodeMap.get(edge.target);
+      if (!a || !b) continue;
+
+      const dx = b.x - a.x;
+      const dy = b.y - a.y;
+      const dz = b.z - a.z;
+      const dist = Math.sqrt(dx * dx + dy * dy + dz * dz + 0.01);
+      const force = (dist - this.idealDistance) * this.attraction;
+      const fx = (dx / dist) * force;
+      const fy = (dy / dist) * force;
+      const fz = (dz / dist) * force;
+
+      a.vx += fx;
+      a.vy += fy;
+      a.vz += fz;
+      b.vx -= fx;
+      b.vy -= fy;
+      b.vz -= fz;
+    }
+
+    // 3. Centering force + 4. Damping + 5. Position update
+    let energy = 0;
+
+    for (const node of nodes) {
+      // Centering
+      node.vx += -CENTER_STRENGTH * node.x;
+      node.vy += -CENTER_STRENGTH * node.y;
+      node.vz += -CENTER_STRENGTH * node.z;
+
+      // Damping
+      node.vx *= DAMPING_FACTOR;
+      node.vy *= DAMPING_FACTOR;
+      node.vz *= DAMPING_FACTOR;
+
+      // Handle pinned nodes
+      const pin = this.pinned.get(node.id);
+      if (pin) {
+        node.x = pin.x;
+        node.y = pin.y;
+        node.z = pin.z;
+        node.vx = 0;
+        node.vy = 0;
+        node.vz = 0;
+      } else {
+        // Position update
+        node.x += node.vx;
+        node.y += node.vy;
+        node.z += node.vz;
+      }
+
+      energy += node.vx * node.vx + node.vy * node.vy + node.vz * node.vz;
+    }
+
+    // 2D constraint: flatten z axis
+    if (this.is2D) {
+      for (const node of nodes) {
+        node.z = 0;
+        node.vz = 0;
+      }
+    }
+
+    this._energy = energy;
+  }
+
+  /** @returns {boolean} true if simulation has converged */
+  isStable() {
+    return this._energy < STABLE_ENERGY_THRESHOLD;
+  }
+
+  /** Restart simulation (e.g., after drag) */
+  reheat() {
+    for (const node of this.nodes) {
+      // Add random velocity to break out of local minima
+      node.vx += (Math.random() - 0.5) * 2;
+      node.vy += (Math.random() - 0.5) * 2;
+      node.vz += this.is2D ? 0 : (Math.random() - 0.5) * 2;
+    }
+    this._energy = Infinity;
+  }
+
+  /** Switch between 2D and 3D mode at runtime */
+  setIs2D(val) {
+    this.is2D = val;
+    if (val) {
+      for (const node of this.nodes) {
+        node.z = 0;
+        node.vz = 0;
+      }
+    }
+    this.reheat();
+  }
+
+  /**
+   * Pin a node at a fixed position.
+   * @param {string} id
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
+   */
+  pinNode(id, x, y, z) {
+    const node = this.nodeMap.get(id);
+    if (!node) return;
+    this.pinned.set(id, { x, y, z });
+    node.x = x;
+    node.y = y;
+    node.z = z;
+    node.vx = 0;
+    node.vy = 0;
+    node.vz = 0;
+  }
+
+  /**
+   * Unpin a node, allowing it to move freely again.
+   * @param {string} id
+   */
+  unpinNode(id) {
+    this.pinned.delete(id);
+  }
+}

package/src/web/index.html

@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Coderaph</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div id="ui">
+    <div id="search-bar">
+      <input type="text" id="search-input" placeholder="Search symbols or files...">
+      <div id="search-nav" class="hidden">
+        <button id="search-prev">&lt;</button>
+        <span id="search-count"></span>
+        <button id="search-next">&gt;</button>
+      </div>
+    </div>
+    <div id="toolbar">
+      <button id="view-toggle" data-mode="file">File View</button>
+      <button id="settings-btn">Settings</button>
+    </div>
+    <div id="info-panel" class="hidden">
+      <h3 id="info-name"></h3>
+      <p id="info-kind"></p>
+      <p id="info-file"></p>
+      <button id="info-close">&times;</button>
+    </div>
+    <div id="settings-panel" class="hidden">
+      <h3>Settings <button id="settings-close">&times;</button></h3>
+      <label>Theme
+        <select id="setting-theme"><option value="dark" selected>Dark</option><option value="light">Light</option></select>
+      </label>
+      <label>Dimension
+        <select id="setting-dimension"><option value="3d" selected>3D</option><option value="2d">2D</option></select>
+      </label>
+      <label>Node Size <span id="val-node-size">1.0</span>
+        <input type="range" id="setting-node-size" min="0.3" max="3" step="0.1" value="1.0">
+      </label>
+      <label>Edge Thickness <span id="val-edge-thickness">1.0</span>
+        <input type="range" id="setting-edge-thickness" min="0.5" max="5" step="0.5" value="1.0">
+      </label>
+      <label>Node Distance <span id="val-node-distance">30</span>
+        <input type="range" id="setting-node-distance" min="10" max="100" step="5" value="30">
+      </label>
+      <label>Font Size <span id="val-font-size">10</span>px
+        <input type="range" id="setting-font-size" min="6" max="20" step="1" value="10">
+      </label>
+      <label>Show Labels
+        <input type="checkbox" id="setting-labels" checked>
+      </label>
+      <label>Show Arrows
+        <input type="checkbox" id="setting-arrows">
+      </label>
+    </div>
+    <div id="filter-panel">
+      <details open>
+        <summary>Filter</summary>
+        <div id="filter-kinds">
+          <label><input type="checkbox" data-kind="class" checked> Class</label>
+          <label><input type="checkbox" data-kind="function" checked> Function</label>
+          <label><input type="checkbox" data-kind="interface" checked> Interface</label>
+          <label><input type="checkbox" data-kind="type" checked> Type</label>
+          <label><input type="checkbox" data-kind="enum" checked> Enum</label>
+          <label><input type="checkbox" data-kind="variable" checked> Variable</label>
+        </div>
+        <input type="text" id="filter-path" placeholder="Filter by path...">
+      </details>
+    </div>
+    <div id="group-panel">
+      <details>
+        <summary>Group</summary>
+        <div id="group-list"></div>
+        <button id="group-add">새 그룹</button>
+      </details>
+    </div>
+    <div id="legend"></div>
+  </div>
+  <div id="tooltip" class="hidden"></div>
+  <div id="labels-container"></div>
+  <canvas id="canvas"></canvas>
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js",
+      "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
+    }
+  }
+  </script>
+  <script type="module" src="app.js"></script>
+  <script type="module" src="controls.js"></script>
+</body>
+</html>

package/src/web/style.css

@@ -0,0 +1,102 @@
+:root {
+  --bg: #0a0a0a;
+  --text: #e0e0e0;
+  --text-muted: #aaa;
+  --surface: #1a1a1a;
+  --border: #333;
+  --border-hover: #444;
+  --btn-bg: #222;
+  --btn-hover: #333;
+  --close-color: #888;
+  --close-hover: #e0e0e0;
+}
+[data-theme="light"] {
+  --bg: #f0f0f0;
+  --text: #1a1a1a;
+  --text-muted: #555;
+  --surface: #ffffff;
+  --border: #ccc;
+  --border-hover: #999;
+  --btn-bg: #e8e8e8;
+  --btn-hover: #d0d0d0;
+  --close-color: #888;
+  --close-hover: #333;
+}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { overflow: hidden; background: var(--bg); font-family: system-ui, sans-serif; color: var(--text); }
+#canvas { display: block; width: 100vw; height: 100vh; }
+#ui { position: fixed; top: 0; left: 0; z-index: 10; padding: 12px; pointer-events: none; }
+#ui > * { pointer-events: auto; }
+#search-bar { margin-bottom: 8px; }
+#search-input { width: 280px; padding: 8px 12px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; outline: none; }
+#search-input:focus { border-color: #4488ff; }
+#search-bar { display: flex; align-items: center; gap: 6px; }
+#search-nav { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
+#search-nav.hidden { display: none; }
+#search-nav button { padding: 2px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--btn-bg); color: var(--text); cursor: pointer; font-size: 12px; line-height: 1.4; }
+#search-nav button:hover { background: var(--btn-hover); }
+#toolbar { margin-bottom: 8px; display: flex; gap: 6px; }
+#toolbar button { padding: 6px 14px; border-radius: 4px; border: 1px solid var(--border-hover); background: var(--btn-bg); color: var(--text); cursor: pointer; font-size: 13px; }
+#toolbar button:hover { background: var(--btn-hover); }
+#info-panel { position: fixed; top: 12px; right: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; min-width: 220px; pointer-events: auto; }
+#info-panel.hidden { display: none; }
+#info-panel h3 { margin-bottom: 8px; font-size: 15px; }
+#info-panel p { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
+#info-close { position: absolute; top: 8px; right: 8px; background: none; border: none; color: var(--close-color); cursor: pointer; font-size: 18px; }
+#info-close:hover { color: var(--close-hover); }
+#legend { margin-top: 8px; font-size: 12px; line-height: 1.8; }
+
+/* Filter panel */
+#filter-panel { margin-top: 8px; }
+#filter-panel details { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
+#filter-panel summary { cursor: pointer; font-size: 13px; font-weight: 600; user-select: none; }
+#filter-kinds { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; }
+#filter-kinds label { font-size: 12px; display: flex; align-items: center; gap: 4px; cursor: pointer; }
+#filter-kinds input { accent-color: #4488ff; }
+#filter-path { width: 100%; margin-top: 6px; padding: 5px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--btn-bg); color: var(--text); font-size: 12px; outline: none; }
+#filter-path:focus { border-color: #4488ff; }
+
+/* Group panel */
+#group-panel { margin-top: 8px; }
+#group-panel details { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
+#group-panel summary { cursor: pointer; font-size: 13px; font-weight: 600; user-select: none; }
+.group-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
+.group-query { flex: 1; padding: 5px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--btn-bg); color: var(--text); font-size: 12px; outline: none; }
+.group-query:focus { border-color: #4488ff; }
+.group-query::placeholder { color: var(--text-muted); }
+.group-color-input { position: absolute; visibility: hidden; }
+.group-color { display: inline-block; width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--border); cursor: pointer; }
+.group-remove { background: none; border: none; color: var(--close-color); cursor: pointer; font-size: 16px; padding: 0 2px; }
+.group-remove:hover { color: var(--close-hover); }
+#group-add { width: 100%; margin-top: 6px; padding: 6px; border-radius: 4px; border: 1px solid var(--border); background: rgba(170,102,204,0.15); color: var(--text); cursor: pointer; font-size: 12px; }
+#group-add:hover { background: rgba(170,102,204,0.25); }
+.group-hint { position: absolute; z-index: 25; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font-size: 12px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
+.group-hint div { padding: 3px 6px; cursor: pointer; border-radius: 3px; }
+.group-hint div:hover { background: var(--btn-hover); }
+.group-hint b { font-weight: 600; }
+
+/* Autocomplete dropdown */
+.autocomplete-list { position: absolute; z-index: 30; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; max-height: 180px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.3); font-size: 12px; min-width: 200px; }
+.autocomplete-list.hidden { display: none; }
+.autocomplete-item { padding: 5px 10px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.autocomplete-item:hover, .autocomplete-item.active { background: var(--btn-hover); }
+.autocomplete-item .ac-match { color: #4488ff; font-weight: 600; }
+
+/* Tooltip */
+#tooltip { position: fixed; z-index: 20; padding: 6px 10px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 12px; pointer-events: none; white-space: nowrap; line-height: 1.5; }
+#tooltip.hidden { display: none; }
+
+/* Settings panel */
+#settings-panel { position: fixed; top: 50px; left: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; min-width: 240px; pointer-events: auto; z-index: 15; }
+#settings-panel.hidden { display: none; }
+#settings-panel h3 { margin-bottom: 12px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
+#settings-panel label { display: flex; justify-content: space-between; align-items: center; font-size: 13px; margin-bottom: 8px; gap: 8px; }
+#settings-panel input[type="range"] { width: 110px; accent-color: #4488ff; }
+#settings-panel select { padding: 3px 6px; border-radius: 4px; border: 1px solid var(--border); background: var(--btn-bg); color: var(--text); font-size: 12px; }
+#settings-panel input[type="checkbox"] { accent-color: #4488ff; }
+#settings-close { background: none; border: none; color: var(--close-color); cursor: pointer; font-size: 16px; }
+#settings-close:hover { color: var(--close-hover); }
+
+/* Node labels */
+#labels-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: hidden; }
+.node-label { position: absolute; font-size: 10px; color: var(--text); white-space: nowrap; transform: translate(-50%, -120%); text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg); }