Scroll to source line on diff click

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
 

frontend/src/components/Diff/DiffRowAsmDiffer.tsx

@@ -1,14 +1,17 @@
 /* eslint css-modules/no-unused-class: off */
 
-import { CSSProperties, memo, useContext } from "react"
+import { CSSProperties, MutableRefObject, memo, useContext } from "react"
 
 import classNames from "classnames"
+import { EditorView } from "codemirror"
 import memoize from "memoize-one"
 import { areEqual } from "react-window"
 
 import * as api from "@/lib/api"
 
-import { PADDING_TOP, SelectedSourceLineContext } from "./Diff"
+import { ScrollContext } from "../ScrollContext"
+
+import { PADDING_TOP, SelectedSourceLineContext, scrollToLineNumber } from "./Diff"
 import styles from "./Diff.module.scss"
 import { Highlighter } from "./Highlighter"
 
@@ -61,6 +64,7 @@ function DiffCell({ cell, className, highlighter }: {
  highlighter: Highlighter
 }) {
  const selectedSourceLine = useContext(SelectedSourceLineContext)
+ const sourceEditor = useContext<MutableRefObject<EditorView>>(ScrollContext)
  const hasLineNo = typeof cell?.src_line != "undefined"
 
  if (!cell)
@@ -71,7 +75,7 @@ function DiffCell({ cell, className, highlighter }: {
  [styles.highlight]: hasLineNo && cell.src_line == selectedSourceLine,
  })}
  >
- {hasLineNo && <span className={styles.lineNumber}>{cell.src_line}</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>
 }

frontend/src/components/Diff/DiffRowObjdiff.tsx

@@ -1,13 +1,16 @@
 /* eslint css-modules/no-unused-class: off */
 
-import { CSSProperties, memo, useContext } from "react"
+import { CSSProperties, MutableRefObject, memo, useContext } from "react"
 
 import classNames from "classnames"
+import { EditorView } from "codemirror"
 import memoize from "memoize-one"
 import { DiffKind, DiffResult, FunctionDiff, InstructionDiff, ObjectDiff, displayDiff, oneof } from "objdiff-wasm"
 import { areEqual } from "react-window"
 
-import { PADDING_TOP, SelectedSourceLineContext } from "./Diff"
+import { ScrollContext } from "../ScrollContext"
+
+import { PADDING_TOP, SelectedSourceLineContext, scrollToLineNumber } from "./Diff"
 import styles from "./Diff.module.scss"
 import { Highlighter } from "./Highlighter"
 
@@ -123,6 +126,7 @@ function DiffCell({ cell, baseAddress, className, highlighter }: {
  highlighter?: Highlighter
 }) {
  const selectedSourceLine = useContext(SelectedSourceLineContext)
+ const sourceEditor = useContext<MutableRefObject<EditorView>>(ScrollContext)
  const hasLineNo = typeof cell?.instruction?.line_number != "undefined"
 
  if (!cell)
@@ -149,7 +153,7 @@ function DiffCell({ cell, baseAddress, className, highlighter }: {
  [styles.highlight]: hasLineNo && cell.instruction.line_number == selectedSourceLine,
  })}
  >
- {hasLineNo && <span className={styles.lineNumber}>{cell.instruction.line_number}</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>
 }

frontend/src/components/Scratch/Scratch.tsx

@@ -16,6 +16,7 @@ import CompilationPanel from "../Diff/CompilationPanel"
 import CodeMirror from "../Editor/CodeMirror"
 import ErrorBoundary from "../ErrorBoundary"
 import ScoreBadge, { calculateScorePercent } from "../ScoreBadge"
+import { ScrollContext } from "../ScrollContext"
 import { Tab, TabCloseButton } from "../Tabs"
 
 import useLanguageServer from "./hooks/useLanguageServer"
@@ -338,11 +339,13 @@ export default function Scratch({
  {matchProgressBarEnabledSetting && <div className={styles.progressbar}><ScratchProgressBar matchPercent={matchPercent} /></div>}
  </ErrorBoundary>
  <ErrorBoundary>
- {layout && <CustomLayout
- layout={layout}
- onChange={setLayout}
- renderTab={renderTab}
- />}
+ {layout && <ScrollContext.Provider value={sourceEditor}>
+ <CustomLayout
+ layout={layout}
+ onChange={setLayout}
+ renderTab={renderTab}
+ />
+ </ScrollContext.Provider>}
  </ErrorBoundary>
  {offlineOverlay}
  </div>

frontend/src/components/ScrollContext.tsx

@@ -0,0 +1,3 @@
+import { createContext } from "react"
+
+export const ScrollContext = createContext(null)