From df1ba2b723aca2bf86d7afe9daec3114fa730ac9 Mon Sep 17 00:00:00 2001
From: Mark Street <streetster@gmail.com>
Date: Sat, 21 Sep 2024 22:41:59 +0100
Subject: [PATCH] de-dupe code

---
 frontend/src/components/Diff/Diff.tsx         | 18 +++++++++++++++++-
 .../src/components/Diff/DiffRowAsmDiffer.tsx  | 19 ++-----------------
 .../src/components/Diff/DiffRowObjdiff.tsx    | 19 ++-----------------
 3 files changed, 21 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/Diff/Diff.tsx b/frontend/src/components/Diff/Diff.tsx
index b2108402..d03bcf96 100644
--- a/frontend/src/components/Diff/Diff.tsx
+++ b/frontend/src/components/Diff/Diff.tsx
@@ -1,8 +1,9 @@
 /* eslint css-modules/no-unused-class: off */
 
-import { createContext, CSSProperties, forwardRef, HTMLAttributes, useRef, useState } from "react"
+import { createContext, CSSProperties, forwardRef, HTMLAttributes, MutableRefObject, useRef, useState } from "react"
 
 import { VersionsIcon } from "@primer/octicons-react"
+import { EditorView } from "codemirror"
 import { DiffResult } from "objdiff-wasm"
 import AutoSizer from "react-virtualized-auto-sizer"
 import { FixedSizeList } from "react-window"
@@ -94,6 +95,21 @@ function ThreeWayToggleButton({ enabled, setEnabled }: { enabled: boolean, setEn
     </button>
 }
 
+export function scrollToLineNumber(editorView: MutableRefObject<EditorView>, lineNumber: number) {
+    if (!editorView) {
+        return
+    }
+    if (lineNumber <= editorView.current.state.doc.lines) {
+        // check if the source line <= number of lines
+        // which can be false if pragmas are used to force line numbers
+        const line = editorView.current.state.doc.line(lineNumber)
+        if (line) {
+            const { top } = editorView.current.lineBlockAt(line.to)
+            editorView.current.scrollDOM.scrollTo({ top, behavior: "smooth" })
+        }
+    }
+}
+
 export const PADDING_TOP = 8
 export const PADDING_BOTTOM = 8
 
diff --git a/frontend/src/components/Diff/DiffRowAsmDiffer.tsx b/frontend/src/components/Diff/DiffRowAsmDiffer.tsx
index 7f7e1751..45aa3799 100644
--- a/frontend/src/components/Diff/DiffRowAsmDiffer.tsx
+++ b/frontend/src/components/Diff/DiffRowAsmDiffer.tsx
@@ -11,7 +11,7 @@ import * as api from "@/lib/api"
 
 import { ScrollContext } from "../ScrollContext"
 
-import { PADDING_TOP, SelectedSourceLineContext } from "./Diff"
+import { PADDING_TOP, SelectedSourceLineContext, scrollToLineNumber } from "./Diff"
 import styles from "./Diff.module.scss"
 import { Highlighter } from "./Highlighter"
 
@@ -70,27 +70,12 @@ function DiffCell({ cell, className, highlighter }: {
     if (!cell)
         return <div className={classNames(styles.cell, className)} />
 
-    const scrollToLineNumber = () => {
-        if (!sourceEditor) {
-            return
-        }
-        if (cell.src_line <= sourceEditor.current.state.doc.lines) {
-            // check if the source line <= number of lines
-            // which can be false if pragmas are used to force line numbers
-            const line = sourceEditor.current.state.doc.line(cell.src_line)
-            if (line) {
-                const { top } = sourceEditor.current.lineBlockAt(line.to)
-                sourceEditor.current.scrollDOM.scrollTo({ top, behavior: "smooth" })
-            }
-        }
-    }
-
     return <div
         className={classNames(styles.cell, className, {
             [styles.highlight]: hasLineNo && cell.src_line == selectedSourceLine,
         })}
     >
-        {hasLineNo && <span className={styles.lineNumber}><button onClick={scrollToLineNumber}>{cell.src_line}</button></span>}
+        {hasLineNo && <span className={styles.lineNumber}><button onClick={() => scrollToLineNumber(sourceEditor, cell.src_line)}>{cell.src_line}</button></span>}
         <FormatDiffText texts={cell.text} highlighter={highlighter} />
     </div>
 }
diff --git a/frontend/src/components/Diff/DiffRowObjdiff.tsx b/frontend/src/components/Diff/DiffRowObjdiff.tsx
index 4a411a20..a0a9fffa 100644
--- a/frontend/src/components/Diff/DiffRowObjdiff.tsx
+++ b/frontend/src/components/Diff/DiffRowObjdiff.tsx
@@ -10,7 +10,7 @@ import { areEqual } from "react-window"
 
 import { ScrollContext } from "../ScrollContext"
 
-import { PADDING_TOP, SelectedSourceLineContext } from "./Diff"
+import { PADDING_TOP, SelectedSourceLineContext, scrollToLineNumber } from "./Diff"
 import styles from "./Diff.module.scss"
 import { Highlighter } from "./Highlighter"
 
@@ -148,27 +148,12 @@ function DiffCell({ cell, baseAddress, className, highlighter }: {
         break
     }
 
-    const scrollToLineNumber = () => {
-        if (!sourceEditor) {
-            return
-        }
-        if (cell.instruction.line_number <= sourceEditor.current.state.doc.lines) {
-            // check if the source line <= number of lines
-            // which can be false if pragmas are used to force line numbers
-            const line = sourceEditor.current.state.doc.line(cell.instruction.line_number)
-            if (line) {
-                const { top } = sourceEditor.current.lineBlockAt(line.to)
-                sourceEditor.current.scrollDOM.scrollTo({ top, behavior: "smooth" })
-            }
-        }
-    }
-
     return <div
         className={classNames(styles.cell, classes, {
             [styles.highlight]: hasLineNo && cell.instruction.line_number == selectedSourceLine,
         })}
     >
-        {hasLineNo && <span className={styles.lineNumber}><button onClick={scrollToLineNumber}>{cell.instruction.line_number}</button></span>}
+        {hasLineNo && <span className={styles.lineNumber}><button onClick={() => scrollToLineNumber(sourceEditor, cell.instruction.line_number)}>{cell.instruction.line_number}</button></span>}
         <FormatDiffText insDiff={cell} baseAddress={baseAddress} highlighter={highlighter} />
     </div>
 }