You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@daffodil.apache.org by sh...@apache.org on 2023/03/23 12:44:39 UTC
[daffodil-vscode] branch main updated: Implement management for selected data.
This is an automated email from the ASF dual-hosted git repository.
shanedell pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/daffodil-vscode.git
The following commit(s) were added to refs/heads/main by this push:
new 85ea375 Implement management for selected data.
85ea375 is described below
commit 85ea375eb75953bc4737a6056318bc67d4b5d736
Author: Robert Strickland <st...@gmail.com>
AuthorDate: Wed Mar 22 13:29:21 2023 -0500
Implement management for selected data.
- Notation added while in single edit byte mode to notify that user of
the main editor selection area being disabled and to press ESC to
close the single edit byte window, due to the `X` button in that window
being `delete` byte instead of close
- Svelte store added for simple lookup of whether selection data is
populated even with no content within the editor area. (Multiple byte
edit mode).
- Button added to clear the selection data
Closes #512
---
src/svelte/src/components/dataEditor.svelte | 68 +++++++++++++++++++++++++----
src/svelte/src/stores/index.ts | 28 ++++++++++--
2 files changed, 84 insertions(+), 12 deletions(-)
diff --git a/src/svelte/src/components/dataEditor.svelte b/src/svelte/src/components/dataEditor.svelte
index 5a99634..5a2b7ac 100644
--- a/src/svelte/src/components/dataEditor.svelte
+++ b/src/svelte/src/components/dataEditor.svelte
@@ -76,6 +76,7 @@ limitations under the License.
headerHidden,
originalDataSegment,
editedByteIsOriginalByte,
+ selectionActive,
} from '../stores'
import {
radixOpt,
@@ -411,6 +412,8 @@ limitations under the License.
selected.id === 'logical'
? Math.floor(selectionEnd / 2)
: selectionOffsetsByRadix[$displayRadix].end
+
+ $selectionActive = true
}
/**
@@ -661,6 +664,7 @@ limitations under the License.
$selectionOriginalEnd = 0
$cursorPos = 0
$editorSelection = ''
+ $selectionActive = false
$editedDataSegment = new Uint8Array(0)
}
@@ -999,14 +1003,35 @@ limitations under the License.
{@html logicalOffsetText}
</span>
</div>
- <div class="measure">
+ <div class="measure selection">
{#if $editMode === 'full'}
+ {#if $selectionActive}
+ <div
+ class="clear-selection"
+ title="Clear selection data"
+ on:click={clearDataDisplays}
+ on:keypress={clearDataDisplays}
+ >
+ ✖
+ </div>
+ <!-- on:keypress is needed to silence warning from Svelte A11y, see below
+ == (!) Plugin svelte: A11y: visible, non-interactive elements with an on:click event must be accompanied by an on:keydown, on:keyup, or on:keypress event. ==
+ -->
+ {:else}
+ <div class="clear-selection" />
+ {/if}
<div>
- <span id="selected_offsets">{selectionOffsetText}</span>
- {#if $cursorPos}
- <span> | cursor: {$cursorPos}</span>
- {/if}
- <span id="editor_offsets" />
+ {selectionOffsetText}{#if $cursorPos} | cursor: {$cursorPos} {/if}
+ </div>
+ {:else}
+ <div>
+ <sub
+ ><i
+ >The pop-up, single byte, edit window is available upon byte
+ selection, press ESC to close.<br />The edit window below is
+ deactivated in single byte edit mode.</i
+ ></sub
+ >
</div>
{/if}
</div>
@@ -1185,7 +1210,7 @@ limitations under the License.
</legend>
<div class="contentControls" id="content_controls">
<!-- Commitable was not reactable to selection data zeroing -->
- {#if $commitable && $selectionOriginalEnd + 1 - $selectionStartOffset > 0}
+ {#if $commitable}
<button id="commit_btn" on:click={commitChanges}>Commit</button>
{:else}
<button id="commit_btn" disabled>Commit</button>
@@ -1601,8 +1626,8 @@ limitations under the License.
min-width: 200px;
}
fieldset.search-replace {
- min-width: 200pt;
- max-width: 250pt;
+ width: 215pt;
+ overflow: scroll;
}
input,
@@ -1668,9 +1693,34 @@ limitations under the License.
display: flex;
}
+ .dataEditor div.measure.selection {
+ flex-direction: row;
+ }
+
+ .dataEditor div.measure.selection sub {
+ opacity: 0.6;
+ }
+
.dataEditor div.measure span {
align-self: flex-end;
}
+ .dataEditor div.measure div {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .dataEditor div.measure div.clear-selection {
+ width: 20pt;
+ font-size: 11pt;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.25s;
+ }
+
+ .dataEditor div.measure div.clear-selection:hover {
+ font-size: 14pt;
+ }
.dataEditor div.contentControls .grid-container-two-columns {
display: flex;
diff --git a/src/svelte/src/stores/index.ts b/src/svelte/src/stores/index.ts
index 5b8d1fe..c7fb196 100644
--- a/src/svelte/src/stores/index.ts
+++ b/src/svelte/src/stores/index.ts
@@ -50,6 +50,7 @@ export const viewportData = writable(new Uint8Array(0))
export const editorSelection = writable('')
export const selectionEndOffset = writable(0)
export const selectionOriginalEnd = writable(0)
+export const selectionActive = writable(false)
export const editorEncoding = writable('latin1')
export const selectionStartOffset = writable(0)
export const rawEditorSelectionTxt = writable('')
@@ -61,6 +62,7 @@ export const replacing = writable(false)
export const replacementsCount = writable(0)
export const searchIndex = writable(0)
export const headerHidden = writable(false)
+
export const editByte = derived(
[
displayRadix,
@@ -177,6 +179,7 @@ export const commitable = derived(
selectionOriginalEnd,
selectionEndOffset,
selectionSize,
+ editMode,
editedByteIsOriginalByte,
],
([
@@ -187,9 +190,11 @@ export const commitable = derived(
$selectionOriginalEnd,
$selectionEndOffset,
$selectionSize,
+ $editMode,
$editedByteIsOriginalByte,
]) => {
- if (!$requestable || $editedByteIsOriginalByte) return false
+ if (!$requestable || ($editedByteIsOriginalByte && $editMode === 'simple'))
+ return false
const originalLength = $selectionOriginalEnd - $selectionStartOffset
const editedLength = $selectionEndOffset - $selectionStartOffset
@@ -198,6 +203,7 @@ export const commitable = derived(
if ($viewportData[i + $selectionStartOffset] !== $selectedFileData[i])
return true
}
+
return false
}
)
@@ -217,11 +223,27 @@ export const searchable = derived(
)
export const replaceable = derived(
- [replaceData, editorEncoding, searchable, replacing],
- ([$replaceData, $editorEncoding, $searchable, $replacing]) => {
+ [replaceData, editorEncoding, searchable, replacing, selectionActive],
+ ([
+ $replaceData,
+ $editorEncoding,
+ $searchable,
+ $replacing,
+ $selectionActive,
+ ]) => {
if ($replaceData.length <= 0 || !$searchable || $replacing) {
+ replaceErrMsg.update(() => {
+ return ''
+ })
return false
}
+ if ($selectionActive) {
+ replaceErrMsg.update(() => {
+ return 'Cannot replace with selected data'
+ })
+ return false
+ }
+
const ret = validEncodingStr($replaceData, $editorEncoding)
replaceErrMsg.update(() => {
return ret.errMsg