Added the BPR setting icon to Settings fieldset

ctc-oss · Sep 28, 2023 · 4bd33db · 4bd33db
1 parent aa7c77f
commit 4bd33db
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 83 deletions.
diff --git a/src/svelte/src/components/DataDisplays/CustomByteDisplay/BinaryData.ts b/src/svelte/src/components/DataDisplays/CustomByteDisplay/BinaryData.ts
@@ -17,15 +17,15 @@
 
 import { SimpleWritable } from '../../../stores/localStore'
 import {
-  NUM_LINES_DISPLAYED,
   type BytesPerRow,
   type RadixValues,
-  VIEWPORT_CAPACITY_MAX,
+  data_dislay_line_amount,
 } from '../../../stores/configuration'
 import {
   radixBytePad,
   viewport_offset_to_line_num,
 } from '../../../utilities/display'
+import { get } from 'svelte/store'
 
 export const BYTE_ACTION_DIV_OFFSET: number = 24
 
@@ -112,15 +112,17 @@ export class ViewportDataStore_t extends SimpleWritable<ViewportData_t> {
   public upperFetchBoundary(bytesPerRow: BytesPerRow): number {
     const store = this.storeData()
     const boundary =
-      store.fileOffset + store.length - NUM_LINES_DISPLAYED * bytesPerRow
+      store.fileOffset +
+      store.length -
+      get(data_dislay_line_amount) * bytesPerRow
 
     return boundary
   }
 
   public lineTopMax(bytesPerRow: BytesPerRow): number {
     const vpMaxOffset = Math.max(
       0,
-      this.storeData().length - NUM_LINES_DISPLAYED * bytesPerRow
+      this.storeData().length - get(data_dislay_line_amount) * bytesPerRow
     )
     const vpLineTopMax = viewport_offset_to_line_num(
       vpMaxOffset + this.storeData().fileOffset,

diff --git a/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataLineFeed.svelte b/src/svelte/src/components/DataDisplays/CustomByteDisplay/DataLineFeed.svelte
@@ -30,10 +30,11 @@ limitations under the License.
     dataFeedLineTop,
     seekOffsetInput,
     tooltipsEnabled,
+    viewport,
   } from '../../../stores'
   import {
     EditByteModes,
-    NUM_LINES_DISPLAYED,
+    data_dislay_line_amount,
     type RadixValues,
     EditActionRestrictions,
     VIEWPORT_SCROLL_INCREMENT,
@@ -93,7 +94,7 @@ limitations under the License.
       if (fetchBound > $fileMetrics.computedSize)
         return (
           ($fileMetrics.computedSize / $bytesPerRow) * $bytesPerRow -
-          NUM_LINES_DISPLAYED * $bytesPerRow
+          $data_dislay_line_amount * $bytesPerRow
         )
 
       return fetchBound
@@ -127,15 +128,15 @@ limitations under the License.
   }
   const INCREMENT_SEGMENT = () => {
     $seekOffsetInput = line_num_to_file_offset(
-      $dataFeedLineTop + NUM_LINES_DISPLAYED,
+      $dataFeedLineTop + $data_dislay_line_amount,
       viewportData.fileOffset,
       $bytesPerRow
     ).toString(addressRadix)
     eventDispatcher('seek')
   }
   const DECREMENT_SEGMENT = () => {
     $seekOffsetInput = line_num_to_file_offset(
-      $dataFeedLineTop - NUM_LINES_DISPLAYED,
+      $dataFeedLineTop - $data_dislay_line_amount,
       viewportData.fileOffset,
       $bytesPerRow
     ).toString(addressRadix)
@@ -180,7 +181,7 @@ limitations under the License.
     INCREMENT = 1,
   }
 
-  let height = `calc(${NUM_LINES_DISPLAYED} * 20)px`
+  let height = `calc(${$data_dislay_line_amount} * 20)px`
   let viewportLines: Array<ViewportLineData> = []
   let viewportDataContainer: HTMLDivElement
   let selectedByteElement: HTMLDivElement
@@ -200,9 +201,9 @@ limitations under the License.
   $: {
     totalLinesPerFilesize = Math.ceil($fileMetrics.computedSize / $bytesPerRow)
     totalLinesPerViewport = Math.ceil(viewportData.data.length / $bytesPerRow)
-    lineTopMaxFile = Math.max(totalLinesPerFilesize - NUM_LINES_DISPLAYED, 0)
+    lineTopMaxFile = Math.max(totalLinesPerFilesize - $data_dislay_line_amount, 0)
     lineTopMaxViewport = Math.max(
-      totalLinesPerViewport - NUM_LINES_DISPLAYED,
+      totalLinesPerViewport - $data_dislay_line_amount,
       0
     )
 
@@ -252,7 +253,7 @@ limitations under the License.
     startIndex: number,
     dataRadix: RadixValues,
     addressRadix: RadixValues,
-    endIndex: number = startIndex + (NUM_LINES_DISPLAYED - 1)
+    endIndex: number = startIndex + ($data_dislay_line_amount - 1)
   ): Array<ViewportLineData> {
     let ret = []
     for (let i = startIndex; i <= endIndex; i++) {
@@ -443,7 +444,7 @@ limitations under the License.
         ($fileMetrics.computedSize * (percentageTraversed / 100.0)) /
           $bytesPerRow
       ) * $bytesPerRow
-    const firstPageThreshold = $bytesPerRow * NUM_LINES_DISPLAYED
+    const firstPageThreshold = $bytesPerRow * $data_dislay_line_amount
     const lastPageThreshold = $fileMetrics.computedSize - firstPageThreshold
     if (offset <= firstPageThreshold) {
       // scroll to the top because we are somewhere in the first page
@@ -569,7 +570,7 @@ limitations under the License.
       selectionActive={$selectionDataStore.active}
       currentLine={$dataFeedLineTop}
       fileOffset={viewportData.fileOffset}
-      maxDisplayLines={NUM_LINES_DISPLAYED}
+      maxDisplayLines={$data_dislay_line_amount}
       bind:percentageTraversed
       on:indicatorClicked={handleClickedIndicator}
     />
@@ -589,7 +590,7 @@ limitations under the License.
         fn={INCREMENT_SEGMENT}
         disabledBy={disableIncrement}
         width="30pt"
-        description="Increment offset by {NUM_LINES_DISPLAYED *
+        description="Increment offset by {$data_dislay_line_amount *
           $bytesPerRow} bytes"
         tooltipAlwaysEnabled={true}
       >
@@ -623,7 +624,7 @@ limitations under the License.
         fn={DECREMENT_SEGMENT}
         disabledBy={disableDecrement}
         width="30pt"
-        description="Decrement offset by {NUM_LINES_DISPLAYED *
+        description="Decrement offset by {$data_dislay_line_amount *
           $bytesPerRow} bytes"
         tooltipAlwaysEnabled={true}
       >
@@ -645,15 +646,16 @@ limitations under the License.
       <span class="separator" />
       <Button
         fn={() => { 
-            update_num_lines_displayed(NUM_LINES_DISPLAYED+1) 
+            update_num_lines_displayed($data_dislay_line_amount+1) 
             viewportLines = generate_line_data(
               $dataFeedLineTop,
               dataRadix,
               addressRadix
               )
           }
         }
-        description={"Increment display lines (" + (NUM_LINES_DISPLAYED+1) + ")"}
+        disabledBy={ ($data_dislay_line_amount*$bytesPerRow >= 512) }
+        description={"Increment display lines (" + ($data_dislay_line_amount+1) + ")"}
         tooltipAlwaysEnabled={true}
         width="30pt"
       >
@@ -663,60 +665,23 @@ limitations under the License.
       </Button>
       <Button
         fn={() => { 
-            update_num_lines_displayed(NUM_LINES_DISPLAYED-1) 
+            update_num_lines_displayed($data_dislay_line_amount-1) 
             viewportLines = generate_line_data(
               $dataFeedLineTop,
               dataRadix,
               addressRadix
               )
           }
         }
-        description={"Decrement display lines (" + (NUM_LINES_DISPLAYED-1) + ")"}
+        disabledBy={$data_dislay_line_amount === 1}
+        description={"Decrement display lines (" + ($data_dislay_line_amount-1) + ")"}
         tooltipAlwaysEnabled={true}
         width="30pt"
       >
         <span slot="left" class="btn-icon material-symbols-outlined">
           playlist_remove
         </span>
       </Button>
-      <span class="separator" />
-      <span class="BPREdit">
-        <Button
-          fn={() => { editingBPR = editingBPR ? false : true }
-          }
-          description={"Set bytes per row"}
-          tooltipAlwaysEnabled={true}
-          fixedWidth="30pt"
-        >
-          <span slot="left" class="btn-icon material-symbols-outlined">
-            power_input
-          </span>
-          <span slot="right" class="btn-icon material-symbols-outlined">{editingBPR ? "chevron_left":"chevron_right"}</span>
-        </Button>
-        {#if editingBPR}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <span 
-          class="submit-bpr-input"
-          on:click={(e)=>{
-            $bytesPerRow = 8
-          }}
-        >8</span>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <span 
-          class="submit-bpr-input"
-          on:click={(e)=>{
-            $bytesPerRow = 16
-          }}
-        >16</span>
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <span 
-          class="submit-bpr-input"
-          on:click={(e)=>{
-            $bytesPerRow = 24
-          }}
-        >24</span>
-        {/if}
-      </span>
     </FlexContainer>
   </FlexContainer>
 </div>

diff --git a/src/svelte/src/components/Icons/ExpandableIcon.svelte b/src/svelte/src/components/Icons/ExpandableIcon.svelte
@@ -16,8 +16,10 @@ limitations under the License.
 -->
 
 <script lang='ts'>
+  import Tooltip from "../layouts/Tooltip.svelte"
 
     export let dimension: number = 20
+    export let configItems = []
     const defaultDimension = 20
     const minDimension = 15
     const maxDimension = 30
@@ -58,11 +60,7 @@ limitations under the License.
     >
         <slot name="icon" />
     </span>
-    {#if selectionsDisplay}
-    <span class="configurations">
-        <slot />
-    </span>
-    {/if}
+    <slot name="configurations-list" />
 </span>
 
 <style lang="scss">
@@ -78,4 +76,10 @@ limitations under the License.
         border-radius: 4px;
         padding: 2px;
     }
+    span.configurations {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+        min-width: 85px;
+    }
 </style>