Refactor the GUI hex view and pane components (redballoonsecurity#427)

--------- Co-authored-by: Dan Pesce <[email protected]> Co-authored-by: Jacob Strieb <[email protected]>
ANogin · May 30, 2024 · af5bf50 · af5bf50
1 parent 4f80d75
commit af5bf50
Show file tree

Hide file tree

Showing 22 changed files with 417 additions and 438 deletions.
diff --git a/disassemblers/ofrak_angr/ofrak_angr_test/assets/hello.x64.elf b/disassemblers/ofrak_angr/ofrak_angr_test/assets/hello.x64.elf
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
@@ -32,14 +32,9 @@
   import AssemblyView from "./views/AssemblyView.svelte";
   import AttributesView from "./views/AttributesView.svelte";
   import AudioPlayer from "./utils/AudioPlayer.svelte";
-  import ByteclassView from "./views/ByteclassView.svelte";
-  import CarouselSelector from "./utils/CarouselSelector.svelte";
-  import EntropyView from "./views/EntropyView.svelte";
   import Gamepad from "./utils/Gamepad.svelte";
-  import HexView from "./views/HexView.svelte";
-  import JumpToOffset from "./utils/JumpToOffset.svelte";
+  import HexView from "./hex/HexView.svelte";
   import LoadingAnimation from "./utils/LoadingAnimation.svelte";
-  import MagnitudeView from "./views/MagnitudeView.svelte";
   import Pane from "./utils/Pane.svelte";
   import ResourceTreeView from "./resource/ResourceTreeView.svelte";
   import Split from "./utils/Split.svelte";
@@ -206,11 +201,7 @@ Answer by running riddle.answer('your answer here') from the console.`);
           {/if}
         </Pane>
       </Split>
-      <Pane
-        slot="second"
-        scrollY="{hexScrollY}"
-        displayMinimap="{currentResource && !useAssemblyView && !useTextView}"
-      >
+      <Pane slot="second" scrollY="{hexScrollY}">
         {#if useAssemblyView}
           <AssemblyView />
         {:else if useTextView}
@@ -227,25 +218,6 @@ Answer by running riddle.answer('your answer here') from the console.`);
           Named slot must be outside {#if} because of: 
           https://github.com/sveltejs/svelte/issues/5604 
         -->
-        <svelte:fragment slot="minimap">
-          <JumpToOffset
-            dataLenPromise="{dataLenPromise}"
-            scrollY="{hexScrollY}"
-          />
-          {#if carouselSelection === "Entropy"}
-            <EntropyView scrollY="{hexScrollY}" />
-          {:else if carouselSelection === "Byteclass"}
-            <ByteclassView scrollY="{hexScrollY}" />
-          {:else if carouselSelection === "Magnitude"}
-            <MagnitudeView scrollY="{hexScrollY}" />
-          {/if}
-          <div class="carousel">
-            <CarouselSelector
-              options="{['Magnitude', 'Entropy', 'Byteclass']}"
-              bind:selectedString="{carouselSelection}"
-            />
-          </div>
-        </svelte:fragment>
       </Pane>
     </Split>
   {/await}

diff --git a/frontend/src/views/ByteclassView.svelte → frontend/src/hex/ByteclassView.svelte b/frontend/src/views/ByteclassView.svelte → frontend/src/hex/ByteclassView.svelte
@@ -28,11 +28,12 @@
   import LoadingTextVertical from "../utils/LoadingTextVertical.svelte";
 
   import { hexToByteArray } from "../helpers.js";
+  import { screenHeight } from "./stores.js";
   import { selectedResource, settings } from "../stores.js";
 
   import { onMount } from "svelte";
 
-  export let scrollY;
+  export let dataLength, currentPosition;
   let data = undefined;
 
   $: colorArray = [
@@ -124,17 +125,13 @@
 
     context.strokeStyle = "red";
     context.lineWidth = Math.ceil(canvas.height / 512);
-    if (
-      data !== undefined &&
-      data.length > alignment * 3 &&
-      $scrollY.viewHeight !== 1
-    ) {
+    if (data !== undefined && data.length > alignment * 3) {
       // Offset Y by 0.5 because of: https://stackoverflow.com/a/48970774
       context.strokeRect(
         0,
-        Math.ceil($scrollY.top * canvas.height) - 0.5,
+        Math.ceil((currentPosition / dataLength) * canvas.height) - 0.5,
         alignment,
-        Math.ceil(($scrollY.viewHeight * canvas.height) / 2)
+        Math.ceil(($screenHeight / dataLength) * canvas.height)
       );
     }
   }
@@ -144,11 +141,11 @@
   <canvas
     bind:this="{canvas}"
     on:mousedown="{(e) => {
-      if ($scrollY.viewHeight < 1) {
-        $scrollY.top = e.offsetY / canvas.offsetHeight;
-        $scrollY.top = Math.max(Math.min($scrollY.top, 1), 0);
-        clicking = true;
-      }
+      currentPosition =
+        Math.floor(
+          Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) / alignment
+        ) * alignment;
+      clicking = true;
     }}"
     on:mouseup="{(e) => {
       clicking = false;
@@ -157,15 +154,13 @@
       clicking = false;
     }}"
     on:mousemove="{(e) => {
-      if (clicking && $scrollY.viewHeight < 1) {
-        $scrollY.top = e.offsetY / canvas.offsetHeight;
-        $scrollY.top = Math.max(Math.min($scrollY.top, 1), 0);
-      }
-    }}"
-    on:wheel="{(e) => {
-      if ($scrollY.viewHeight < 1) {
-        $scrollY.top += e.deltaY * 0.0001;
-        $scrollY.top = Math.max(Math.min($scrollY.top, 1), 0);
+      if (clicking) {
+        currentPosition =
+          Math.floor(
+            Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) /
+              alignment
+          ) * alignment;
+        clicking = true;
       }
     }}"
   >

diff --git a/frontend/src/views/EntropyView.svelte → frontend/src/hex/EntropyView.svelte b/frontend/src/views/EntropyView.svelte → frontend/src/hex/EntropyView.svelte
@@ -27,12 +27,12 @@
 <script>
   import LoadingTextVertical from "../utils/LoadingTextVertical.svelte";
 
+  import { screenHeight } from "./stores.js";
   import { hexToByteArray } from "../helpers.js";
   import { selectedResource, settings } from "../stores.js";
 
   import { onMount } from "svelte";
-
-  export let scrollY;
+  export let dataLength, currentPosition;
   let data = undefined;
 
   $: bgcolors = hexToByteArray($settings.background.slice(1));
@@ -105,17 +105,13 @@
 
     context.strokeStyle = "red";
     context.lineWidth = Math.ceil(canvas.height / 512);
-    if (
-      data !== undefined &&
-      data.length > alignment * 3 &&
-      $scrollY.viewHeight !== 1
-    ) {
+    if (data !== undefined && data.length > alignment * 3) {
       // Offset Y by 0.5 because of: https://stackoverflow.com/a/48970774
       context.strokeRect(
         0,
-        Math.ceil($scrollY.top * canvas.height) - 0.5,
+        Math.ceil((currentPosition / dataLength) * canvas.height) - 0.5,
         alignment,
-        Math.ceil(($scrollY.viewHeight * canvas.height) / 2)
+        Math.ceil(($screenHeight / dataLength) * canvas.height)
       );
     }
 
@@ -130,11 +126,11 @@
   <canvas
     bind:this="{canvas}"
     on:mousedown="{(e) => {
-      if ($scrollY.viewHeight < 1) {
-        $scrollY.top = e.offsetY / canvas.offsetHeight;
-        $scrollY.top = Math.max(Math.min($scrollY.top, 1), 0);
-        clicking = true;
-      }
+      currentPosition =
+        Math.floor(
+          Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) / 16
+        ) * 16;
+      clicking = true;
     }}"
     on:mouseup="{(e) => {
       clicking = false;
@@ -143,15 +139,12 @@
       clicking = false;
     }}"
     on:mousemove="{(e) => {
-      if (clicking && $scrollY.viewHeight < 1) {
-        $scrollY.top = e.offsetY / canvas.offsetHeight;
-        $scrollY.top = Math.max(Math.min($scrollY.top, 1), 0);
-      }
-    }}"
-    on:wheel="{(e) => {
-      if ($scrollY.viewHeight < 1) {
-        $scrollY.top += e.deltaY * 0.0001;
-        $scrollY.top = Math.max(Math.min($scrollY.top, 1), 0);
+      if (clicking) {
+        currentPosition =
+          Math.floor(
+            Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) / 16
+          ) * 16;
+        clicking = true;
       }
     }}"
   >