Implemented Categorical Byte Highlighting

Closes apache#784
ctc-oss · Oct 11, 2023 · 8c54b3b · 8c54b3b
1 parent 0a1a6c6
commit 8c54b3b
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 62 deletions.
diff --git a/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataLineFeed.svelte b/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataLineFeed.svelte
@@ -62,10 +62,11 @@ limitations under the License.
     type CSSThemeClass,
   } from '../../../utilities/colorScheme'
   import {
-    selectionHighlights,
     searchResultsHighlights,
     updateSearchResultsHighlights,
     searchResultsUpdated,
+    viewportByteIndicatorsLUT,
+    CATEGORY_ONE_MASK,
   } from '../../../utilities/highlights'
   import { bytesPerRow } from '../../../stores'
   export let awaitViewportSeek: boolean
@@ -214,14 +215,17 @@ limitations under the License.
     lineTopFileOffset = $dataFeedLineTop * $bytesPerRow
   }
 
+  let categoryOneIndicators: Uint8Array
   $: {
-    activeSelection = $selectionHighlights
+    activeSelection = $viewportByteIndicatorsLUT
     searchResults = $searchResultsHighlights
+  }
+
+  $: {
     if (
-      (viewportData.fileOffset >= 0 &&
-        !awaitViewportSeek &&
-        $dataFeedLineTop >= 0) ||
-      $searchResultsUpdated
+      viewportData.fileOffset >= 0 &&
+      !awaitViewportSeek &&
+      $dataFeedLineTop >= 0
     ) {
       if (
         viewportLines.length !== 0 &&
@@ -495,6 +499,11 @@ limitations under the License.
         break
     }
   })
+
+  function mouseover_handler(e: Event) {
+    const target = e.target as HTMLDivElement
+    console.log(target.getAttribute('offset'))
+  }
 </script>
 
 {#if $selectionDataStore.active && $editMode == EditByteModes.Single}
@@ -508,7 +517,7 @@ limitations under the License.
   {/key}
 {/if}
 
-<div class="container" style:height id={CONTAINER_ID}>
+<div class="container" style:height id={CONTAINER_ID} on:mouseover={mouseover_handler}>
   {#each viewportLines as viewportLine, i}
     <div class={`line ${viewportLine.highlight} ${themeClass}`}>
       <div class="address" id="address">
@@ -523,17 +532,13 @@ limitations under the License.
         {#each viewportLine.bytes as byte}
           <DataValue
             {byte}
-            isSelected={activeSelection[byte.offset] === 1}
-            possibleSelection={activeSelection[byte.offset] === 2}
-            isSearchResult={searchResults[byte.offset] >>
-              activeSelection[byte.offset]}
             id={'physical'}
+            categoryOneIndicator={$viewportByteIndicatorsLUT[byte.offset] &
+              CATEGORY_ONE_MASK}
             radix={dataRadix}
             width={byteElementWidth}
             disabled={byte.value === -1}
             bind:selectionData={$selectionDataStore}
-            on:mouseup={mouseup}
-            on:mousedown={mousedown}
           />
         {/each}
       </div>
@@ -546,17 +551,13 @@ limitations under the License.
         {#each viewportLine.bytes as byte}
           <DataValue
             {byte}
-            isSelected={activeSelection[byte.offset] === 1}
-            possibleSelection={activeSelection[byte.offset] === 2}
-            isSearchResult={searchResults[byte.offset] >>
-              activeSelection[byte.offset]}
+            categoryOneIndicator={$viewportByteIndicatorsLUT[byte.offset] &
+              CATEGORY_ONE_MASK}
             id={'logical'}
             radix={dataRadix}
             width={byteElementWidth}
             disabled={byte.value === -1}
             bind:selectionData={$selectionDataStore}
-            on:mouseup={mouseup}
-            on:mousedown={mousedown}
           />
         {/each}
       </div>

diff --git a/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataValue.svelte b/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataValue.svelte
@@ -25,8 +25,9 @@ limitations under the License.
   import type { SelectionData_t } from '../../../stores'
   import type { ByteDivWidth } from '../../../utilities/display'
   import type { RadixValues } from '../../../stores/configuration'
-  import { selectionHighlightMask } from '../../../utilities/highlights'
+  import { CategoryOneIndicators } from '../../../utilities/highlights'
 
+  export let categoryOneIndicator: number
   export let id: ViewportDataType
   export let byte: ByteValue
   export let selectionData: SelectionData_t
@@ -44,7 +45,6 @@ limitations under the License.
   $: {
     makingSelection =
       selectionData.startOffset >= 0 && selectionData.active === false
-    $selectionHighlightMask = makingSelection === true ? 1 : 0
   }
 
   function mouse_enter_handle(event: MouseEvent) {
@@ -78,33 +78,21 @@ limitations under the License.
 {:else if id === 'physical'}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class="byte"
-    class:isSelected
-    class:isSearchResult
-    class:possibleSelection
+    class={'byte ' + CategoryOneIndicators[categoryOneIndicator]}
     id={id + '-' + byte.offset.toString()}
     style:width
-    on:mouseup={mouse_event_handle}
-    on:mousedown={mouse_event_handle}
-    on:mouseenter={mouse_enter_handle}
-    on:mouseleave={mouse_leave_handle}
+    offset={byte.offset}
   >
     {byte.text}
   </div>
 {:else}
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class="byte"
-    class:isSelected
-    class:isSearchResult
-    class:possibleSelection
+    class={'byte ' + CategoryOneIndicators[categoryOneIndicator]}
     id={id + '-' + byte.offset.toString()}
     style:width={'20px'}
     class:latin1Undefined={latin1Undefined(byte.value)}
-    on:mouseup={mouse_event_handle}
-    on:mousedown={mouse_event_handle}
-    on:mouseenter={mouse_enter_handle}
-    on:mouseleave={mouse_leave_handle}
+    offset={byte.offset}
   >
     {latin1Undefined(byte.value) ? '' : String.fromCharCode(byte.value)}
   </div>
@@ -126,12 +114,12 @@ limitations under the License.
     text-align: center;
     transition: all 0.25s;
   }
-  div.byte.isSelected,
+  div.byte.selected,
   div.byte.isSearchResult,
   div.byte.possibleSelection {
     border-radius: 5px;
   }
-  div.byte.isSelected {
+  div.byte.selected {
     background-color: var(--color-secondary-light);
     color: var(--color-secondary-darkest);
   }

diff --git a/src/svelte/src/utilities/highlights.ts b/src/svelte/src/utilities/highlights.ts
@@ -15,11 +15,9 @@
  * limitations under the License.
  */
 
-import { derived, readable, writable } from 'svelte/store'
+import { derived, get, readable, readonly, writable } from 'svelte/store'
 import { selectionDataStore } from '../stores'
-
-let selectionHighlightLUT = new Uint8Array(1024)
-export let selectionHighlightMask = writable(0)
+import { VIEWPORT_CAPACITY_MAX } from '../stores/configuration'
 
 let searchResultsHighlightLUT = new Uint8Array(1024).fill(0)
 
@@ -30,25 +28,6 @@ export enum HightlightCategoryMasks {
   SearchResult = 4,
 }
 
-export const selectionHighlights = derived(
-  [selectionDataStore, selectionHighlightMask],
-  ([$selectionData, $selectionHighlightMask]) => {
-    let start = $selectionData.startOffset
-    let end =
-      $selectionHighlightMask === 0
-        ? $selectionData.originalEndOffset
-        : $selectionData.endOffset
-    if (start > end && end > -1) [start, end] = [end, start]
-
-    for (let i = 0; i < 1024; i++) {
-      selectionHighlightLUT[i] =
-        i >= start && i <= end ? 1 << $selectionHighlightMask : 0
-    }
-
-    return selectionHighlightLUT
-  }
-)
-
 export const searchResultsHighlights = readable(searchResultsHighlightLUT)
 export const searchResultsUpdated = writable(false)
 export function updateSearchResultsHighlights(
@@ -74,3 +53,66 @@ export function updateSearchResultsHighlights(
 export function clearSearchResultsHighlights() {
   searchResultsHighlightLUT.fill(0)
 }
+
+export const CATEGORY_ONE_MASK = 0x0f
+export const CATEGORY_TWO_MASK = 0xf0
+export enum IndicatorCategoryShift {
+  CategoryOne = 0,
+  CategoryTwo = 4,
+}
+
+enum CategoryOneIndications {
+  None = 0,
+  MakingSelection = 1,
+  Selected = 2,
+}
+export const CategoryOneIndicators = [
+  'cat1_none',
+  'possibleSelection',
+  'selected',
+]
+
+enum CategoryTwoIndications {
+  None = 0,
+  IsSearchResult = 1,
+  IsReplaceResult = 2,
+}
+
+let ViewportByteIndicatorsLUT = new Uint8Array(VIEWPORT_CAPACITY_MAX)
+
+export const viewportByteIndicatorsLUT = derived(
+  selectionDataStore,
+  ($selectionData) => {
+    let start = $selectionData.startOffset
+    let end = $selectionData.endOffset
+    if (start > end && end > -1) [start, end] = [end, start]
+
+    for (let i = 0; i < VIEWPORT_CAPACITY_MAX; i++) {
+      ViewportByteIndicatorsLUT[i] =
+        i >= start && i <= end
+          ? CategoryOneIndications.Selected & CATEGORY_ONE_MASK
+          : CategoryOneIndications.None & CATEGORY_ONE_MASK
+    }
+
+    return ViewportByteIndicatorsLUT
+  }
+)
+export const viewportByteIndicators = readable(ViewportByteIndicatorsLUT)
+
+export function byte_category_value(
+  viewportIndex: number,
+  category: IndicatorCategoryShift
+): number {
+  let ret: number = get(viewportByteIndicators)[viewportIndex]
+
+  switch (category) {
+    case IndicatorCategoryShift.CategoryOne:
+      ret &= CATEGORY_ONE_MASK
+      break
+    case IndicatorCategoryShift.CategoryTwo:
+      ret &= CATEGORY_TWO_MASK
+      break
+  }
+
+  return ret
+}