scroll to line numbers and nearest

jplag · Jul 19, 2024 · a8ac0bb · a8ac0bb
1 parent 570efab
commit a8ac0bb
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 11 deletions.
diff --git a/report-viewer/src/components/fileDisplaying/CodeLine.vue b/report-viewer/src/components/fileDisplaying/CodeLine.vue
@@ -57,14 +57,6 @@ function matchSelected(match?: MatchInSingleFile) {
 
 const lineRef = ref<HTMLElement | null>(null)
 
-function scrollTo() {
-  if (lineRef.value) {
-    lineRef.value.scrollIntoView({ block: 'center' })
-  }
-}
-
-defineExpose({ scrollTo })
-
 interface TextPart {
   line: string
   match?: MatchInSingleFile

diff --git a/report-viewer/src/components/fileDisplaying/CodePanel.vue b/report-viewer/src/components/fileDisplaying/CodePanel.vue
@@ -30,6 +30,7 @@
             v-for="(_, index) in codeLines"
             :key="index"
             class="col-span-1 col-start-1 row-span-1 text-right"
+            ref="lineRefs"
             :style="{
               gridRowStart: index + 1
             }"
@@ -40,7 +41,6 @@
           <CodeLine
             v-for="(line, index) in codeLines"
             :key="index"
-            ref="lineRefs"
             :line="line.line"
             :lineNumber="index + 1"
             :matches="line.matches"
@@ -94,7 +94,7 @@ const props = defineProps({
 const emit = defineEmits(['matchSelected'])
 
 const collapsed = ref(true)
-const lineRefs = ref<(typeof CodeLine)[]>([])
+const lineRefs = ref<HTMLElement[]>([])
 
 const codeLines: Ref<{ line: string; matches: MatchInSingleFile[] }[]> = computed(() =>
   highlight(props.file.data, props.highlightLanguage).map((line, index) => {
@@ -116,7 +116,7 @@ function matchSelected(match: Match) {
 function scrollTo(lineNumber: number) {
   collapsed.value = false
   nextTick(function () {
-    lineRefs.value[lineNumber - 1].scrollTo()
+    lineRefs.value[lineNumber - 1].scrollIntoView({ block: 'nearest' })
   })
 }