zoom stuff

2 files changed, 45 insertions, 8 deletions

diff --git a/src/graph.js b/src/graph.js
index 640b42e..f7afe27 100644
--- a/src/graph.js
+++ b/src/graph.js
@@ -102,9 +102,50 @@ export default function buildGraph(db, handlers) {
     })
     .onNodeClick(handlers.click);
 
+  const initialZoom = () => {
+    const distance = 20000;
+    let angle = 0;
+    graph.cameraPosition(
+      {
+        x: distance * Math.sin(angle),
+        z: distance * Math.cos(angle),
+      },
+      { x: 0, y: 0, z: 0 },
+      0
+    );
+    setTimeout(() => zoomOut(1000));
+  };
+
+  const zoomOut = (duration = 1000) => {
+    const distance = 415;
+    let angle = 0;
+    graph.cameraPosition(
+      {
+        x: distance * Math.sin(angle),
+        z: distance * Math.cos(angle),
+      },
+      { x: 0, y: 0, z: 0 },
+      duration
+    );
+  };
+
+  const zoomIn = () => {
+    const distance = 200;
+    let angle = 0;
+    graph.cameraPosition(
+      {
+        x: distance * Math.sin(angle),
+        z: distance * Math.cos(angle),
+      },
+      { x: 0, y: 0, z: 0 },
+      1000
+    );
+  };
+
   const handleSelect = (category) => {
     if (!category) {
       graph.graphData(data);
+      zoomOut();
       return;
     }
     const { nodes, links } = data;
@@ -128,17 +169,13 @@ export default function buildGraph(db, handlers) {
     });
     console.log(selectedData);
     graph.graphData(selectedData);
+    zoomIn();
   };
 
   // graph.d3Force("charge").strength(-150);
 
   // camera orbit
-  const distance = 415;
-  let angle = 0;
-  graph.cameraPosition({
-    x: distance * Math.sin(angle),
-    z: distance * Math.cos(angle),
-  });
+  initialZoom();
 
   return {
     onSelect: handleSelect,
diff --git a/src/views/Detail.js b/src/views/Detail.js
index 0a756c9..ec0f37c 100644
--- a/src/views/Detail.js
+++ b/src/views/Detail.js
@@ -38,8 +38,8 @@ export default function Detail({ node, visible, onClose }) {
         <div className="buttons close">
           <img src="/assets/img/close.svg" onClick={onClose} />
         </div>
-        {node.type === "video" ? (
-          "video"
+        {data.type === "video" ? (
+          "Video TBD"
         ) : (
           <Gallery images={data.images} visible={visible} />
         )}