1 files changed, 25 insertions, 15 deletions
diff --git a/src/graph.js b/src/graph.js
index 075eb97..57779a3 100644
--- a/src/graph.js
+++ b/src/graph.js
@@ -2,7 +2,7 @@ import * as THREE from "three";
 import ForceGraph3D from "3d-force-graph";
 import SpriteText from "three-spritetext";
 import { union } from "./utils/set_utils.js";
-import { randint, choice, pad } from "./utils/index.js";
+import { randint, choice, pad, isDesktop } from "./utils/index.js";
 import { addSkyGradient } from "./sky.js";
 
 const IMG_SCALE = 16;
@@ -85,6 +85,7 @@ export default function buildGraph({ db, handlers }) {
   const highlightNodes = new Set();
   const highlightLinks = new Set();
   let selectedNode = null;
+  let textures = [];
   let objects = [];
 
   /** build group */
@@ -93,9 +94,10 @@ export default function buildGraph({ db, handlers }) {
   graph(document.querySelector("#graph"))
     .graphData(data)
     .showNavInfo(false)
+    .enableNodeDrag(isDesktop)
     .nodeLabel((node) => node.title)
     .nodeThreeObject((node) => {
-      let sprite, material, texture, video;
+      let sprite, material, texture;
       let catNumber = node.id + 1;
       // if (catNumber !== 48) return null;
       // 3D object
@@ -122,21 +124,11 @@ export default function buildGraph({ db, handlers }) {
       }
       // Videos and images
       else if (node.data.thumbnail?.uri) {
-        // Video thumbs
         const isVideo = node.data.thumbnail.type === "video";
-        if (isVideo) {
-          video = document.createElement("video");
-          video.src = node.data.thumbnail.uri;
-          video.muted = true;
-          video.loop = true;
-          video.autoplay = true;
-          video.play();
-          texture = new THREE.VideoTexture(video);
-        }
-        // Image thumbs
-        else {
-          texture = new THREE.TextureLoader().load(node.data.thumbnail.uri);
+        if (!(catNumber in textures)) {
+          textures[catNumber] = createTexture(node);
         }
+        texture = textures[catNumber];
         const aspect = node.data.thumbnail.width / node.data.thumbnail.height;
         material = new THREE.SpriteMaterial({ map: texture });
         sprite = new THREE.Sprite(material);
@@ -191,6 +183,24 @@ export default function buildGraph({ db, handlers }) {
   // graph.renderer().setClearColor(0x000000, 0);
   addSkyGradient(graph.scene());
 
+  const createTexture = (node) => {
+    // Video thumbs
+    const isVideo = node.data.thumbnail.type === "video";
+    if (isVideo) {
+      const video = document.createElement("video");
+      video.src = node.data.thumbnail.uri;
+      video.muted = true;
+      video.loop = true;
+      video.autoplay = true;
+      video.play();
+      return new THREE.VideoTexture(video);
+    }
+    // Image thumbs
+    else {
+      return new THREE.TextureLoader().load(node.data.thumbnail.uri);
+    }
+  };
+
   const reorient = () => {
     const quaternion = graph.camera().quaternion;
     objects.forEach(reorientObject(quaternion));