move resourceTreeNode and dataLength to stores

frontend/src/App.svelte

@@ -43,7 +43,12 @@
   import ProjectManagerView from "./project/ProjectManagerView.svelte";
 
   import { printConsoleArt } from "./console-art.js";
-  import { selected, selectedResource, settings } from "./stores.js";
+  import {
+    selected,
+    selectedResource,
+    settings,
+    dataLength,
+  } from "./stores.js";
   import { keyEventToString, shortcuts } from "./keyboard.js";
 
   import { writable } from "svelte/store";
@@ -57,20 +62,19 @@
     useAssemblyView = false,
     useTextView = false,
     rootResourceLoadPromise = new Promise((resolve) => {}),
-    resourceNodeDataMap = {},
     resources = {};
-  let carouselSelection,
-    currentResource,
-    rootResource,
-    modifierView,
-    bottomLeftPane;
+  let currentResource, rootResource, modifierView, bottomLeftPane;
 
   // TODO: Move to settings
   let riddleAnswered = JSON.parse(window.localStorage.getItem("riddleSolved"));
   if (riddleAnswered === null || riddleAnswered === undefined) {
     riddleAnswered = false;
   }
 
+  $: dataLenPromise.then((r) => {
+    $dataLength = r;
+  });
+
   $: if ($selected !== undefined) {
     currentResource = resources[$selected];
     if (currentResource === undefined) {
@@ -177,13 +181,11 @@ Answer by running riddle.answer('your answer here') from the console.`);
               this="{modifierView}"
               dataLenPromise="{dataLenPromise}"
               bind:modifierView="{modifierView}"
-              bind:resourceNodeDataMap="{resourceNodeDataMap}"
             />
           {:else}
             <ResourceTreeView
               rootResource="{rootResource}"
               bind:bottomLeftPane="{bottomLeftPane}"
-              bind:resourceNodeDataMap="{resourceNodeDataMap}"
               bind:modifierView="{modifierView}"
               bind:showProjectManager="{showProjectManager}"
               bind:showRootResource="{showRootResource}"
@@ -211,7 +213,6 @@ Answer by running riddle.answer('your answer here') from the console.`);
             dataLenPromise="{dataLenPromise}"
             resources="{resources}"
             scrollY="{hexScrollY}"
-            bind:resourceNodeDataMap="{resourceNodeDataMap}"
           />
         {/if}
         <!-- 
@@ -242,7 +243,6 @@ Answer by running riddle.answer('your answer here') from the console.`);
     bind:showProjectManager="{showProjectManager}"
     bind:resources="{resources}"
     bind:rootResource="{rootResource}"
-    bind:resourceNodeDataMap="{resourceNodeDataMap}"
   />
 {/if}
 

frontend/src/hex/ByteclassView.svelte

@@ -29,11 +29,11 @@
 
   import { hexToByteArray } from "../helpers.js";
   import { screenHeight } from "./stores.js";
-  import { selectedResource, settings } from "../stores.js";
+  import { selectedResource, settings, dataLength } from "../stores.js";
 
   import { onMount } from "svelte";
 
-  export let dataLength, currentPosition;
+  export let currentPosition;
   let data = undefined;
 
   $: colorArray = [
@@ -129,9 +129,9 @@
       // Offset Y by 0.5 because of: https://stackoverflow.com/a/48970774
       context.strokeRect(
         0,
-        Math.ceil((currentPosition / dataLength) * canvas.height) - 0.5,
+        Math.ceil((currentPosition / $dataLength) * canvas.height) - 0.5,
         alignment,
-        Math.ceil(($screenHeight / dataLength) * canvas.height)
+        Math.ceil(($screenHeight / $dataLength) * canvas.height)
       );
     }
   }
@@ -143,7 +143,8 @@
     on:mousedown="{(e) => {
       currentPosition =
         Math.floor(
-          Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) / alignment
+          Math.floor($dataLength * (e.offsetY / canvas.offsetHeight)) /
+            alignment
         ) * alignment;
       clicking = true;
     }}"
@@ -157,7 +158,7 @@
       if (clicking) {
         currentPosition =
           Math.floor(
-            Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) /
+            Math.floor($dataLength * (e.offsetY / canvas.offsetHeight)) /
               alignment
           ) * alignment;
         clicking = true;

frontend/src/hex/EntropyView.svelte

@@ -29,10 +29,10 @@
 
   import { screenHeight } from "./stores.js";
   import { hexToByteArray } from "../helpers.js";
-  import { selectedResource, settings } from "../stores.js";
+  import { selectedResource, settings, dataLength } from "../stores.js";
 
   import { onMount } from "svelte";
-  export let dataLength, currentPosition;
+  export let currentPosition;
   let data = undefined;
 
   $: bgcolors = hexToByteArray($settings.background.slice(1));
@@ -109,9 +109,9 @@
       // Offset Y by 0.5 because of: https://stackoverflow.com/a/48970774
       context.strokeRect(
         0,
-        Math.ceil((currentPosition / dataLength) * canvas.height) - 0.5,
+        Math.ceil((currentPosition / $dataLength) * canvas.height) - 0.5,
         alignment,
-        Math.ceil(($screenHeight / dataLength) * canvas.height)
+        Math.ceil(($screenHeight / $dataLength) * canvas.height)
       );
     }
 
@@ -128,7 +128,7 @@
     on:mousedown="{(e) => {
       currentPosition =
         Math.floor(
-          Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) / 16
+          Math.floor($dataLength * (e.offsetY / canvas.offsetHeight)) / 16
         ) * 16;
       clicking = true;
     }}"
@@ -142,7 +142,7 @@
       if (clicking) {
         currentPosition =
           Math.floor(
-            Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) / 16
+            Math.floor($dataLength * (e.offsetY / canvas.offsetHeight)) / 16
           ) * 16;
         clicking = true;
       }