1 files changed, 120 insertions, 0 deletions
diff --git a/src/graph.js b/src/graph.js
new file mode 100644
index 0000000..fdac979
--- /dev/null
+++ b/src/graph.js
@@ -0,0 +1,120 @@
+import * as THREE from "three";
+import ForceGraph3D from "3d-force-graph";
+import SpriteText from "three-spritetext";
+import { union } from "./utils/set_utils.js";
+
+const IMG_SCALE = 20;
+
+export default function buildGraph(db, handlers) {
+  const linkable = {};
+  const groups = {};
+  const data = { nodes: [], links: [] };
+
+  // console.log(db);
+
+  /**
+   * load nodes and links
+   */
+
+  db.page.forEach((item, index) => {
+    const node = {
+      title: item.title,
+      id: index,
+      data: item,
+      groups: [],
+    };
+    data.nodes.push(node);
+    for (let tagIndex = 0; tagIndex < 8; tagIndex += 1) {
+      const group = item["tag_" + tagIndex];
+      if (!group) continue;
+      group -= 1;
+      node.groups.push(group);
+      if (group in groups) {
+        groups[group].push(index);
+      } else {
+        groups[group] = [index];
+      }
+      if (group in linkable) {
+        data.links.push({
+          source: choice(linkable[group]),
+          // source: linkable[group][0],
+          target: index,
+        });
+        // option: don't link to the root node more than once
+        // if (window.location.hash === "#dense" && linkable[group][0]) {
+        if (linkable[group][0]) {
+          linkable[group].push(index);
+        } else {
+          linkable[group] = [index];
+        }
+      } else {
+        linkable[group] = [index];
+      }
+    }
+  });
+
+  /**
+   * find common links
+   */
+
+  data.links.forEach((link) => {
+    const a = data.nodes[link.source];
+    const b = data.nodes[link.target];
+
+    !a.links && (a.links = []);
+    !b.links && (b.links = []);
+    a.links.push(link);
+    b.links.push(link);
+  });
+
+  const highlightNodes = new Set();
+  const highlightLinks = new Set();
+  let selectedNode = null;
+
+  /** build group */
+
+  let graph = ForceGraph3D();
+  graph(document.querySelector("#graph"))
+    .graphData(data)
+    .showNavInfo(false)
+    .nodeLabel((node) => node.title)
+    .nodeThreeObject((node) => {
+      let sprite;
+      if (node.data.thumbnail?.uri) {
+        const imgTexture = new THREE.TextureLoader().load(
+          node.data.thumbnail.uri
+        );
+        // console.log(imgTexture);
+        const aspect = node.data.thumbnail.width / node.data.thumbnail.height;
+        const material = new THREE.SpriteMaterial({ map: imgTexture });
+        sprite = new THREE.Sprite(material);
+        sprite.scale.set(IMG_SCALE, IMG_SCALE / aspect);
+        return sprite;
+      } else {
+        sprite = new SpriteText(
+          node.title.split(/[ :]+/).slice(0, 3).join(" ")
+        );
+        sprite.material.depthWrite = false; // make sprite background transparent
+        sprite.color = "#888888"; // colors[node.groups[0]]; // node.groups.length - 1]];
+        sprite.textHeight = 4;
+        return sprite;
+      }
+    })
+    .onNodeClick(handlers.click);
+
+  // graph.d3Force("charge").strength(-150);
+
+  // camera orbit
+  const distance = 250;
+  let angle = 0;
+  graph.cameraPosition({
+    x: distance * Math.sin(angle),
+    z: distance * Math.cos(angle),
+  });
+
+  // stars();
+}
+
+const randint = (limit) => Math.floor(Math.random() * limit);
+const choice = (list) => list[randint(list.length)];
+const commonGroups = (a, b) => union(a.groups, b.groups);