Working on new viewport using flex display, not grid

ctc-oss · Oct 3, 2023 · eb97395 · eb97395
1 parent 6bfa11e
commit eb97395
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 7 deletions.
diff --git a/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataLineFeed.svelte b/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataLineFeed.svelte
@@ -31,6 +31,7 @@ limitations under the License.
     seekOffsetInput,
     tooltipsEnabled,
     viewport,
+    visableViewports,
   } from '../../../stores'
   import {
     EditByteModes,
@@ -540,6 +541,7 @@ limitations under the License.
           />
         {/each}
       </div>
+      {#if $visableViewports === 'logical' || $visableViewports === 'all'}
       <div
         class="byte-line"
         id="logical-line-{i.toString(16).padStart(2, '0')}"
@@ -561,6 +563,7 @@ limitations under the License.
           />
         {/each}
       </div>
+      {/if}
     </div>
   {/each}
 
@@ -726,7 +729,7 @@ limitations under the License.
   div.container div.line {
     display: flex;
     flex-direction: row;
-    width: 100%;
+    width: fit-content;
     height: 24px;
   }
   div.container div.line div {

diff --git a/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte b/src/svelte/src/components/DataDisplays/Header/DisplayHeader.svelte
@@ -25,7 +25,7 @@ limitations under the License.
     seekOffsetSearchType,
     selectionSize,
     bytesPerRow,
-    viewport,
+    viewport,visableViewports
   } from '../../../stores'
   import {
     EditByteModes,
@@ -128,7 +128,9 @@ limitations under the License.
 
 <div class={$UIThemeCSSClass + ' hd'}>Address</div>
 <div class={$UIThemeCSSClass + ' hd'}>Physical</div>
-<div class={$UIThemeCSSClass + ' hd'}>Logical</div>
+{#if $visableViewports === 'logical' || $visableViewports === 'all'}
+<div class={$UIThemeCSSClass + ' hd logical'}>Logical</div>
+{/if}
 <div class={$UIThemeCSSClass + ' hd'}>Edit</div>
 <div class={$UIThemeCSSClass + ' measure'} style="align-items: center;">
   <select
@@ -159,11 +161,14 @@ limitations under the License.
   {/if}
 </div>
 
-<div class={$UIThemeCSSClass + ' measure logical-viewport-header'}>
+
+{#if $visableViewports === 'logical' || $visableViewports === 'all'}
+<div class={$UIThemeCSSClass + ' measure logical logical-viewport-header'}>
   {#each offsetLine as offset}
     <div class="logical-addr-seg">{offset}</div>
   {/each}
 </div>
+{/if}
 
 <div class={$UIThemeCSSClass + ' measure selection'}>
   {#if $selectionDataStore.active && $editMode !== EditByteModes.Single}

diff --git a/src/svelte/src/components/Icons/ViewportVisibilityIcon.svelte b/src/svelte/src/components/Icons/ViewportVisibilityIcon.svelte
@@ -19,14 +19,12 @@ limitations under the License.
   import { writable } from "svelte/store"
   import Tooltip from "../layouts/Tooltip.svelte"
   import ExpandableIcon from "./ExpandableIcon.svelte"
-  import { bytesPerRow } from "../../stores"
+  import { bytesPerRow, visableViewports } from "../../stores"
 
     export let dimension: number = 20
     const defaultDimension = 20
     const minDimension = 15
     const maxDimension = 30
-    type VisibleViewports = 'physical' | 'logical' | 'all'
-    const visableViewports = writable('all' as VisibleViewports)
 
     let width  = valid_dimensions()
     let height = valid_dimensions()

diff --git a/src/svelte/src/components/dataEditor.svelte b/src/svelte/src/components/dataEditor.svelte
@@ -50,6 +50,7 @@ limitations under the License.
     EditByteModes,
     VIEWPORT_SCROLL_INCREMENT,
     type BytesPerRow,
+    ADDRESS_RADIX_OPTIONS,
   } from '../stores/configuration'
   import ServerMetrics from './ServerMetrics/ServerMetrics.svelte'
   import {
@@ -62,6 +63,9 @@ limitations under the License.
   } from './DataDisplays/CustomByteDisplay/BinaryData'
   import { byte_count_divisible_offset } from '../utilities/display'
   import { clearSearchResultsHighlights } from '../utilities/highlights'
+  import DataLineFeed from './DataDisplays/CustomByteDisplay/DataLineFeed.svelte'
+  import DataViewports from './DataDisplays/DataViewports.svelte'
+  import DisplayHeader from './DataDisplays/Header/DisplayHeader.svelte'
 
   $: $UIThemeCSSClass = $darkUITheme ? CSSThemeClass.Dark : CSSThemeClass.Light
 
@@ -323,10 +327,58 @@ limitations under the License.
 
   <hr />
   <ServerMetrics />
+
+  <div class="testEditor">
+    <div class="headers">
+        <div class="hdr address-header" style:width=110px>
+          <div>Address</div>
+          <select
+            class={$UIThemeCSSClass + ' address_type'}
+            id="address_numbering"
+          >
+            {#each ADDRESS_RADIX_OPTIONS as { name, value }}
+              <option {value}>{name}</option>
+            {/each}
+          </select>
+        </div>
+        <div class="hdr physical-header" style:width=355.5px>
+          <div>Physical</div>
+        </div>
+        <div class="hdr logical-header" style:width=355.5px>
+          <div>Logical</div>
+        </div>
+    </div>
+    <DataViewports
+      on:clearDataDisplays={clearDataDisplays}
+      on:scrolledToTop
+      on:scrolledToEnd
+      on:applyChanges={custom_apply_changes}
+      on:handleEditorEvent={handleEditorEvent}
+      on:scrollBoundary
+      on:traverse-file={traversalEventHandler}
+      on:seek={seekEventHandler}
+    />
+  </div>
 </body>
 
 <!-- svelte-ignore css-unused-selector -->
 <style lang="scss">
+
+  div.testEditor {
+    display: flex;
+    flex-direction: column;
+    width: fit-content;
+  }
+  div.testEditor > div.headers {
+    display: flex;
+    flex-direction: row;
+  }
+  div.hdr {
+    height: 25pt;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
   div.test {
     display: flex;
     flex-wrap: wrap;

diff --git a/src/svelte/src/stores/index.ts b/src/svelte/src/stores/index.ts
@@ -147,6 +147,8 @@ export const sizeHumanReadable = writable(false)
 // tracks the start and end offsets of the current selection
 export const selectionDataStore = new SelectionData()
 
+export type VisibleViewports = 'physical' | 'logical' | 'all'
+export const visableViewports = writable('all' as VisibleViewports)
 // Can the user's selection derive both edit modes?
 export const regularSizedFile = derived(fileMetrics, ($fileMetrics) => {
   return $fileMetrics.computedSize >= 2