fix: display collapsed items sections as selected

josdejong · Aug 20, 2021 · f276863 · f276863
1 parent 652e3ac
commit f276863
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git a/src/lib/components/controls/navigationBar/NavigationBar.svelte b/src/lib/components/controls/navigationBar/NavigationBar.svelte
@@ -28,9 +28,8 @@
   function scrollToLastItem() {
     setTimeout(() => {
       const lastItem = refNavigationBar && refNavigationBar.querySelector('div:last-child')
-      // console.log('lastItem', lastItem)
       if (lastItem && lastItem.scrollIntoView) {
-        debug('scroll to lastItem', path)
+        // debug('scroll to lastItem', path)
         lastItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
       }
     })

diff --git a/src/lib/components/modes/treemode/CollapsedItems.svelte b/src/lib/components/modes/treemode/CollapsedItems.svelte
@@ -3,11 +3,13 @@
 <script>
   import { INDENTATION_WIDTH } from '../../../constants.js'
   import { getExpandItemsSections } from '../../../logic/expandItemsSections.js'
+  import { compileJSONPointer } from 'immutable-json-patch'
 
   export let visibleSections
   export let sectionIndex
   export let total
   export let path
+  export let selection
 
   /** @type {function (path: Path, section: Section)} */
   export let onExpandSection
@@ -17,6 +19,11 @@
   $: startIndex = visibleSection.end
   $: endIndex = visibleSections[sectionIndex + 1] ? visibleSections[sectionIndex + 1].start : total
 
+  $: selected =
+    selection && selection.pathsMap
+      ? selection.pathsMap[compileJSONPointer(path.concat(startIndex))] === true
+      : false
+
   $: expandItemsSections = getExpandItemsSections(startIndex, endIndex)
 
   // TODO: this is duplicated from the same function in JSONNode
@@ -33,6 +40,7 @@
 
 <div
   class="collapsed-items"
+  class:selected
   on:mousemove={handleMouseMove}
   style={getIndentationStyle(path.length + 2)}
 >

diff --git a/src/lib/components/modes/treemode/JSONNode.svelte b/src/lib/components/modes/treemode/JSONNode.svelte
@@ -388,6 +388,7 @@
               total={value.length}
               {path}
               {onExpandSection}
+              {selection}
             />
           {/if}
         {/each}

diff --git a/src/lib/components/modes/treemode/json-node-selected-mixin.scss b/src/lib/components/modes/treemode/json-node-selected-mixin.scss
@@ -29,6 +29,7 @@
     background-color: $selection-background;
   }
 
+  :global(.collapsed-items.selected),
   &.selected :global(.collapsed-items),
   &.selected-value :global(.collapsed-items) {
     // TODO: this css is copied from CollapsedItems.scss. Figure out how to reuse this smartly with CSS or SASS
-Original file line number
+Diff line change
@@ Expand Up / @@ -388,6 +388,7 @@ @@
                   total={value.length}
                   {path}
                   {onExpandSection}
+                  {selection}
                 />
               {/if}
             {/each}
@@ Expand Down @@