feat(frontend): scrollbar annotations

1 files changed, 103 insertions, 3 deletions

diff --git a/subprojects/frontend/src/editor/scrollbarViewPlugin.ts b/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
index 2882f02e..c95e581d 100644
--- a/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
+++ b/subprojects/frontend/src/editor/scrollbarViewPlugin.ts
@@ -2,6 +2,7 @@ import { type PluginValue, ViewPlugin } from '@codemirror/view';
 import { reaction } from 'mobx';
 
 import type EditorStore from './EditorStore';
+import findOccurrences from './findOccurrences';
 
 export const HOLDER_CLASS = 'cm-scroller-holder';
 export const THUMB_CLASS = 'cm-scroller-thumb';
@@ -10,8 +11,13 @@ export const THUMB_X_CLASS = 'cm-scroller-thumb-x';
 export const THUMB_ACTIVE_CLASS = 'active';
 export const GUTTER_DECORATION_CLASS = 'cm-scroller-gutter-decoration';
 export const TOP_DECORATION_CLASS = 'cm-scroller-top-decoration';
+export const ANNOTATION_SELECTION_CLASS = 'cm-scroller-selection';
+export const ANNOTATION_DIAGNOSTIC_CLASS = 'cm-scroller-diagnostic';
+export const ANNOTATION_OCCURRENCE_CLASS = 'cm-scroller-occurrence';
 export const SHADOW_WIDTH = 10;
 export const SCROLLBAR_WIDTH = 12;
+export const ANNOTATION_WIDTH = SCROLLBAR_WIDTH / 2;
+export const MIN_ANNOTATION_HEIGHT = 1;
 
 export default function scrollbarViewPlugin(
   editorStore: EditorStore,
@@ -94,6 +100,84 @@ export default function scrollbarViewPlugin(
     let gutters: Element | undefined;
 
     let requested = false;
+    let rebuildRequested = false;
+
+    const annotations: HTMLDivElement[] = [];
+
+    function rebuildAnnotations(trackYHeight: number) {
+      const annotationOverlayHeight = Math.min(
+        view.contentHeight,
+        trackYHeight,
+      );
+      const lineHeight = annotationOverlayHeight / editorStore.state.doc.lines;
+
+      let i = 0;
+
+      function getOrCreateAnnotation(
+        from: number,
+        to?: number,
+      ): HTMLDivElement {
+        const startLine = editorStore.state.doc.lineAt(from).number;
+        const endLine =
+          to === undefined
+            ? startLine
+            : editorStore.state.doc.lineAt(to).number;
+        const top = (startLine - 1) * lineHeight;
+        const height = Math.max(
+          MIN_ANNOTATION_HEIGHT,
+          Math.max(1, endLine - startLine) * lineHeight,
+        );
+
+        let annotation: HTMLDivElement;
+        if (i < annotations.length) {
+          annotation = annotations[i];
+        } else {
+          annotation = ownerDocument.createElement('div');
+          annotations.push(annotation);
+          holder.appendChild(annotation);
+        }
+        i += 1;
+
+        annotation.style.top = `${top}px`;
+        annotation.style.height = `${height}px`;
+
+        return annotation;
+      }
+
+      editorStore.state.selection.ranges.forEach(({ head }) => {
+        const selectionAnnotation = getOrCreateAnnotation(head);
+        selectionAnnotation.className = ANNOTATION_SELECTION_CLASS;
+        selectionAnnotation.style.width = `${SCROLLBAR_WIDTH}px`;
+      });
+
+      const diagnosticsIter = editorStore.diagnostics.iter();
+      while (diagnosticsIter.value !== null) {
+        const diagnosticAnnotation = getOrCreateAnnotation(
+          diagnosticsIter.from,
+          diagnosticsIter.to,
+        );
+        diagnosticAnnotation.className = `${ANNOTATION_DIAGNOSTIC_CLASS} ${ANNOTATION_DIAGNOSTIC_CLASS}-${diagnosticsIter.value.severity}`;
+        diagnosticAnnotation.style.width = `${ANNOTATION_WIDTH}px`;
+        diagnosticsIter.next();
+      }
+
+      const occurrences = editorStore.state.field(findOccurrences);
+      const occurrencesIter = occurrences.iter();
+      while (occurrencesIter.value !== null) {
+        const occurrenceAnnotation = getOrCreateAnnotation(
+          occurrencesIter.from,
+          occurrencesIter.to,
+        );
+        occurrenceAnnotation.className = ANNOTATION_OCCURRENCE_CLASS;
+        occurrenceAnnotation.style.width = `${ANNOTATION_WIDTH}px`;
+        occurrenceAnnotation.style.right = `${ANNOTATION_WIDTH}px`;
+        occurrencesIter.next();
+      }
+
+      annotations
+        .splice(i)
+        .forEach((staleAnnotation) => holder.removeChild(staleAnnotation));
+    }
 
     function update() {
       requested = false;
@@ -148,6 +232,11 @@ export default function scrollbarViewPlugin(
         0,
         Math.min(scrollTop, SHADOW_WIDTH),
       )}px`;
+
+      if (rebuildRequested) {
+        rebuildAnnotations(trackYHeight);
+        rebuildRequested = false;
+      }
     }
 
     function requestUpdate() {
@@ -157,16 +246,27 @@ export default function scrollbarViewPlugin(
       }
     }
 
-    observer = new ResizeObserver(requestUpdate);
+    function requestRebuild() {
+      requestUpdate();
+      rebuildRequested = true;
+    }
+
+    observer = new ResizeObserver(requestRebuild);
     observer.observe(scrollDOM);
 
     scrollDOM.addEventListener('scroll', requestUpdate);
 
-    requestUpdate();
+    requestRebuild();
+
+    const disposeRebuildReaction = reaction(
+      () => editorStore.diagnostics,
+      requestRebuild,
+    );
 
     return {
-      update: requestUpdate,
+      update: requestRebuild,
       destroy() {
+        disposeRebuildReaction();
         disposePanelReaction();
         observer?.disconnect();
         scrollDOM.removeEventListener('scroll', requestUpdate);