chore: handle the case that refContents is undefined

josdejong · Sep 28, 2023 · f00acd6 · f00acd6
1 parent 0a87b9b
commit f00acd6
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 42 deletions.
diff --git a/src/lib/components/modes/tablemode/TableMode.svelte b/src/lib/components/modes/tablemode/TableMode.svelte
@@ -181,7 +181,7 @@
   })
 
   let refJsonEditor: HTMLDivElement
-  let refContents: HTMLDivElement
+  let refContents: HTMLDivElement | undefined
   let refHiddenInput: HTMLInputElement
 
   createFocusTracker({
@@ -241,15 +241,8 @@
     defaultItemHeight
   )
 
-  // $: debug('visibleSection', visibleSection, { viewPortHeight }) // TODO: cleanup
-
   $: refreshScrollTop(json)
 
-  // TODO: cleanup
-  // $: {
-  //   debug('scrollTop', scrollTop, refContents?.scrollTop, refContents?.scrollHeight)
-  // }
-
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   function refreshScrollTop(_json: JSONValue | undefined) {
     // When the contents go from lots of items and scrollable contents to only a few items and
@@ -804,12 +797,16 @@
 
     debug('scrollTo', { path, top, scrollTop, elem })
 
+    if (!refContents) {
+      return Promise.resolve()
+    }
+
     const viewPortRect = refContents.getBoundingClientRect()
     if (elem && !scrollToWhenVisible) {
       const elemRect = elem.getBoundingClientRect()
       if (elemRect.bottom > viewPortRect.top && elemRect.top < viewPortRect.bottom) {
         // element is fully or partially visible, don't scroll to it
-        return
+        return Promise.resolve()
       }
     }
 
@@ -862,6 +859,10 @@
   }
 
   function scrollToVertical(path: JSONPath) {
+    if (!refContents) {
+      return
+    }
+
     const { rowIndex } = toTableCellPosition(path, columns)
     const top = calculateAbsolutePosition(path, columns, itemHeightsCache, defaultItemHeight)
     const bottom = top + (itemHeightsCache[rowIndex] || defaultItemHeight)
@@ -884,19 +885,21 @@
 
   function scrollToHorizontal(path: JSONPath) {
     const elem = findElement(path)
-    if (elem) {
-      const viewPortRect = refContents.getBoundingClientRect()
-      const elemRect = elem.getBoundingClientRect() // TODO: scroll to column instead of item (is always rendered)
+    if (!elem || !refContents) {
+      return
+    }
 
-      if (elemRect.right > viewPortRect.right) {
-        const diff = elemRect.right - viewPortRect.right
-        refContents.scrollLeft += diff
-      }
+    const viewPortRect = refContents.getBoundingClientRect()
+    const elemRect = elem.getBoundingClientRect() // TODO: scroll to column instead of item (is always rendered)
 
-      if (elemRect.left < viewPortRect.left) {
-        const diff = viewPortRect.left - elemRect.left
-        refContents.scrollLeft -= diff
-      }
+    if (elemRect.right > viewPortRect.right) {
+      const diff = elemRect.right - viewPortRect.right
+      refContents.scrollLeft += diff
+    }
+
+    if (elemRect.left < viewPortRect.left) {
+      const diff = viewPortRect.left - elemRect.left
+      refContents.scrollLeft -= diff
     }
   }
 

diff --git a/src/lib/components/modes/treemode/TreeMode.svelte b/src/lib/components/modes/treemode/TreeMode.svelte
@@ -170,7 +170,7 @@
   const { openAbsolutePopup, closeAbsolutePopup } =
     getContext<AbsolutePopupContext>('absolute-popup')
 
-  let refContents: HTMLDivElement
+  let refContents: HTMLDivElement | undefined
   let refHiddenInput: HTMLInputElement
   let refJsonEditor: HTMLDivElement
   let hasFocus = false
@@ -1337,31 +1337,32 @@
     await tick() // await rerender
 
     const elem = findElement(path)
-    if (elem) {
-      debug('scrollTo', { path, elem, refContents })
-
-      const viewPortRect = refContents.getBoundingClientRect()
-      const elemRect = elem.getBoundingClientRect()
-      if (!scrollToWhenVisible) {
-        if (elemRect.bottom > viewPortRect.top && elemRect.top < viewPortRect.bottom) {
-          // element is fully or partially visible, don't scroll to it
-          return Promise.resolve()
-        }
-      }
 
-      const offset = -(viewPortRect.height / 4)
+    debug('scrollTo', { path, elem, refContents })
 
-      return new Promise<void>((resolve) => {
-        jump(elem, {
-          container: refContents,
-          offset,
-          duration: SCROLL_DURATION,
-          callback: () => resolve()
-        })
-      })
-    } else {
+    if (!elem || !refContents) {
       return Promise.resolve()
     }
+
+    const viewPortRect = refContents.getBoundingClientRect()
+    const elemRect = elem.getBoundingClientRect()
+    if (!scrollToWhenVisible) {
+      if (elemRect.bottom > viewPortRect.top && elemRect.top < viewPortRect.bottom) {
+        // element is fully or partially visible, don't scroll to it
+        return Promise.resolve()
+      }
+    }
+
+    const offset = -(viewPortRect.height / 4)
+
+    return new Promise<void>((resolve) => {
+      jump(elem, {
+        container: refContents,
+        offset,
+        duration: SCROLL_DURATION,
+        callback: () => resolve()
+      })
+    })
   }
 
   /**