From 070c3ef84879de5f8280b5c0657af0d710fe14ab Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Thu, 23 May 2024 20:19:21 +0200
Subject: [PATCH] Width & Height are props, and movement-paths animate in

---
 src/Viz.svelte | 114 ++++++++++++++++++++++++++++++++++++-------------
 src/main.ts    |   7 +++
 2 files changed, 91 insertions(+), 30 deletions(-)

diff --git a/src/Viz.svelte b/src/Viz.svelte
index 98b8495..8c5e275 100644
--- a/src/Viz.svelte
+++ b/src/Viz.svelte
@@ -1,11 +1,39 @@
 <script lang="ts">
     import parsed_requests from "/data/parsed_requests.json";
 
-    $: console.log(parsed_requests);
+    import { draw } from "svelte/transition";
 
-    // TODO: pass these from main.ts (or vice versaas)
-    const width = 2160;
-    const height = 3840;
+    // these are passed from main.ts (or vice versaas)
+    export let width = 0;
+    export let height = 0;
+
+    const node_positions_percentages = {
+        APM: [13.829853909464873, 11.277305564859935],
+        IWO: [82.20349794238683, 92.52914963452248],
+        BC: [13.829853909464873, 10.235638898193269],
+        ARTIS: [37.36555349794344, 14.373622178489617],
+        BHBPU: [18.895388888889407, 8.009932889956616],
+        CEDLA: [32.88047119341627, 21.36735134591498],
+        UBGW: [7.420491769548115, 13.544746441851984],
+        IVIR: [33.838187242798554, 17.768099884380575],
+        OTM: [80.81460905349795, 93.83123296785581],
+        JB: [34.30115020576152, 19.538933217713907],
+        REC: [32.38571810699577, 16.229534855698518],
+        AMC: [81.82347530864213, 90.12737486852306],
+        PCHH: [10.320697530863542, 3.927002725110166],
+        BETA: [78.14333127572034, 26.257884003417413],
+        UBB: [10.198269547325893, 16.40932977518532],
+    };
+
+    const node_positions = Object.fromEntries(
+            Object.entries(node_positions_percentages).map(([k, p]) => [
+                k,
+                [(p[0] / 100) * width, (p[1] / 100) * height],
+            ]),
+        );
+
+
+    $: console.log(parsed_requests);
 
     // preprocess data
     const nodes = parsed_requests.nodes;
@@ -16,29 +44,31 @@
     const valid_nodes = nodes
         .filter((n) => n.lat && n.lon)
         .map((node) => {
-            // const { x: x1, y: y1 } = latLonToOffsets(node.lat, node.lon, 100000, 100000)
-            const { x: x1, y: y1 } = latLonToOffsets(
-                node.lat,
-                node.lon,
-                100000,
-                100000,
-            );
-            console.log(x1, y1);
-            const x2 = inverse_lerp(1358, 1380, x1);
-            const y2 = inverse_lerp(32862, 32900, y1);
+            node["x"] = node_positions[node.code][0];
+            node["y"] = node_positions[node.code][1];
+            // const { x: x1, y: y1 } = latLonToOffsets(
+            //     node.lat,
+            //     node.lon,
+            //     100000,
+            //     100000,
+            // );
+            // console.log(x1, y1);
+            // const x2 = inverse_lerp(1358, 1380, x1);
+            // const y2 = inverse_lerp(32862, 32900, y1);
 
-            const margin = 200;
-            const x = x2 * (width - 2 * margin) + margin;
-            const y = y2 * (height - 2 * margin) + margin;
-            // console.log(x2, y2)
-            // console.log(node)
+            // const margin = 200;
+            // const x = x2 * (width - 2 * margin) + margin;
+            // const y = y2 * (height - 2 * margin) + margin;
+            // // console.log(x2, y2)
+            // // console.log(node)
 
-            node["x"] = x;
-            node["y"] = y;
+            // node["x"] = x;
+            // node["y"] = y;
             return node;
         });
 
     // create an index to access the node objects by their name
+
     const nodeMap = Object.fromEntries(valid_nodes.map((d) => [d["name"], d]));
     const edgeIndexBarcode = buildIndex(edges, "Barcode");
     // console.log(edgeIndexBarcode);
@@ -56,7 +86,7 @@
             return l;
         });
 
-    function degreesToRadians(degrees) {
+    function degreesToRadians(degrees: number) {
         return (degrees * Math.PI) / 180;
     }
 
@@ -76,7 +106,7 @@
         return { x, y };
     }
 
-    function lerp(X, Y, t) {
+    function lerp(X: number, Y: number, t: number) {
         return X * t + Y * (1 - t);
     }
 
@@ -148,7 +178,7 @@
 
         // find radius of arc based on distance between points
         // add a jitter to spread out the lines when links are stacked
-        const dr = Math.sqrt(dx * dx + dy * dy) * (0.7 + Math.random() * 0.6);
+        const dr = Math.sqrt(dx * dx + dy * dy) * (0.7 + Math.random() * 0.5);
 
         // "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y
         return `M ${m.sourceX},${m.sourceY} A ${dr},${dr} 0 0,1   ${m.targetX},${m.targetY}`;
@@ -156,7 +186,30 @@
 
     console.log(movements);
 
-    let drawn_movements = movements;
+    let drawn_movements = movements; //.filter((m, i) => i < 100);
+
+    import { onMount, onDestroy } from "svelte";
+    let paused = false;
+    onMount(() => {
+        let interval = null;
+        
+        interval = setInterval(() => {
+            if (paused) {
+                return;
+            }
+            // TODO: change scene
+            // timeElapsed += 1;
+
+            // if (remainingTime === 0) {
+            // 	clearInterval(interval);
+            // 	deleteTimer();
+            // }
+        }, 10000);
+
+        return () => {
+            clearInterval(interval);
+        }
+    });
 </script>
 
 <h1>library of <span id="motiontitle">motions</span></h1>
@@ -169,7 +222,10 @@
 <svg {width} {height}>
     <g id="movements">
         {#each drawn_movements as m}
-            <path d={get_path_d(m)}></path>
+            <path
+                in:draw|global={{ duration: 5000 + Math.random() * 10000 }}
+                d={get_path_d(m)}
+            ></path>
         {/each}
     </g>
     <g id="libraries">
@@ -177,14 +233,12 @@
             <g id={node.code} transform="translate({node.x}, {node.y})">
                 <circle r="5"></circle>
                 <circle r="20"></circle>
-                <text class="nodeTitle" y="4" x="35">{node.name}</text>
+                <text class="nodeTitle" y="13" x="35">{node.name}</text>
             </g>
         {/each}
     </g>
 </svg>
 
-
-
 <style>
     #about {
         position: absolute;
@@ -204,7 +258,7 @@
         stroke-width: 10;
     }
     path {
-        stroke: #bc89ff10;
+        stroke: #bc89ff15;
         stroke-width: 2px;
         fill: none;
     }
diff --git a/src/main.ts b/src/main.ts
index f1e023f..d7ef3fc 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,7 +7,14 @@ document.getElementById('canvas')!.style.width = `${width}px`;
 document.getElementById('canvas')!.style.height = `${height}px`;
 
 const app = new Viz({
+  // see https://svelte.dev/docs/client-side-component-api
   target: document.getElementById('viz')!,
+  props: {
+    width: width,
+    height: height
+  },
+  // intro: true,
 })
 
+
 export default app