Implemented Selection Indicators For Data Editor
- Fixed an issue where the start and end offsets where not indicated
when the user is clicking and dragging over byte data.
Closes #760
diff --git a/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataLineFeed.svelte b/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataLineFeed.svelte
index 93188c3..3dc252b 100644
--- a/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataLineFeed.svelte
+++ b/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataLineFeed.svelte
@@ -59,7 +59,7 @@
type CSSThemeClass,
} from '../../../utilities/colorScheme'
import {
- activeSelectionHighlights,
+ selectionHighlights,
searchResultsHighlights,
updateSearchResultsHighlights,
} from '../../../utilities/highlights'
@@ -205,7 +205,7 @@
}
$: byteElementWidth = byteDivWidthFromRadix(dataRadix)
$: {
- activeSelection = $activeSelectionHighlights
+ activeSelection = $selectionHighlights
searchResults = $searchResultsHighlights
}
@@ -483,14 +483,15 @@
{#each viewportLine.bytes as byte}
<DataValue
{byte}
- isSelected={activeSelection[byte.offset]}
+ isSelected={activeSelection[byte.offset] === 1}
+ possibleSelection={activeSelection[byte.offset] === 2}
isSearchResult={searchResults[byte.offset] >>
activeSelection[byte.offset]}
id={'physical'}
radix={dataRadix}
width={byteElementWidth}
disabled={byte.offset > viewportData.length}
- selectionData={$selectionDataStore}
+ bind:selectionData={$selectionDataStore}
on:mouseup={mouseup}
on:mousedown={mousedown}
/>
@@ -504,14 +505,15 @@
{#each viewportLine.bytes as byte}
<DataValue
{byte}
- isSelected={activeSelection[byte.offset]}
+ isSelected={activeSelection[byte.offset] === 1}
+ possibleSelection={activeSelection[byte.offset] === 2}
isSearchResult={searchResults[byte.offset] >>
activeSelection[byte.offset]}
id={'logical'}
radix={dataRadix}
width={byteElementWidth}
disabled={byte.offset > viewportData.length}
- selectionData={$selectionDataStore}
+ bind:selectionData={$selectionDataStore}
on:mouseup={mouseup}
on:mousedown={mousedown}
/>
diff --git a/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataValue.svelte b/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataValue.svelte
index d6f2f71..fdcc1c8 100644
--- a/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataValue.svelte
+++ b/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataValue.svelte
@@ -25,6 +25,7 @@
import type { SelectionData_t } from '../../../stores'
import type { ByteDivWidth } from '../../../utilities/display'
import type { RadixValues } from '../../../stores/configuration'
+ import { selectionHighlightMask } from '../../../utilities/highlights'
export let id: ViewportDataType
export let byte: ByteValue
@@ -32,7 +33,8 @@
export let radix: RadixValues
export let disabled = false
export let width: ByteDivWidth = '20px'
- export let isSelected = 0
+ export let isSelected = false
+ export let possibleSelection = false
export let isSearchResult = 0
const eventDispatcher = createEventDispatcher()
@@ -40,8 +42,11 @@
let consideredForSelection = false
let makingSelection = false
- $: makingSelection =
- selectionData.startOffset >= 0 && selectionData.active === false
+ $: {
+ makingSelection =
+ selectionData.startOffset >= 0 && selectionData.active === false
+ $selectionHighlightMask = makingSelection === true ? 1 : 0
+ }
function mouse_enter_handle(event: MouseEvent) {
if (!makingSelection) return
@@ -72,6 +77,7 @@
class="byte"
class:isSelected
class:isSearchResult
+ class:possibleSelection
class:selecting={consideredForSelection}
id={id + '-' + byte.offset.toString()}
style:width
@@ -88,6 +94,7 @@
class="byte"
class:isSelected
class:isSearchResult
+ class:possibleSelection
class:selecting={consideredForSelection}
id={id + '-' + byte.offset.toString()}
style:width={'20px'}
@@ -115,6 +122,11 @@
text-align: center;
transition: all 0.25s;
}
+ div.byte.isSelected,
+ div.byte.isSearchResult,
+ div.byte.possibleSelection {
+ border-radius: 5px;
+ }
div.byte.isSelected {
background-color: var(--color-secondary-light);
color: var(--color-secondary-darkest);
@@ -123,7 +135,7 @@
background-color: var(--color-tertiary-light);
color: var(--color-secondary-darkest);
}
- div.byte.selecting {
+ div.byte.possibleSelection {
border-color: var(--color-secondary-light);
}
div.byte:hover {
diff --git a/src/svelte/src/utilities/highlights.ts b/src/svelte/src/utilities/highlights.ts
index 85543f4..51966b0 100644
--- a/src/svelte/src/utilities/highlights.ts
+++ b/src/svelte/src/utilities/highlights.ts
@@ -18,7 +18,8 @@
import { derived, get, readable, writable } from 'svelte/store'
import { selectionDataStore } from '../stores'
-let activeSelectionHighlightLUT = new Uint8Array(1024)
+let selectionHighlightLUT = new Uint8Array(1024)
+export let selectionHighlightMask = writable(0)
let searchResultsHighlightLUT = new Uint8Array(1024).fill(0)
@@ -29,17 +30,22 @@
SearchResult = 4,
}
-export const activeSelectionHighlights = derived(
- [selectionDataStore],
- ([$selectionData]) => {
- const start = $selectionData.startOffset
- const end = $selectionData.originalEndOffset
+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++) {
- activeSelectionHighlightLUT[i] = i >= start && i <= end ? 1 : 0
+ selectionHighlightLUT[i] =
+ i >= start && i <= end ? 1 << $selectionHighlightMask : 0
}
- return activeSelectionHighlightLUT
+ return selectionHighlightLUT
}
)
