@batchfy/codemirror-minimap 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,8 +1,8 @@
 import { Facet, combineConfig, StateField } from '@codemirror/state';
 import { EditorView, ViewPlugin } from '@codemirror/view';
+import { foldEffect, unfoldEffect, foldedRanges, language, highlightingFor } from '@codemirror/language';
 import crelt from 'crelt';
 import { setDiagnosticsEffect, diagnosticCount, forEachDiagnostic } from '@codemirror/lint';
-import { foldEffect, unfoldEffect, foldedRanges, language, highlightingFor } from '@codemirror/language';
 import { highlightTree } from '@lezer/highlight';
 import { TreeFragment } from '@lezer/common';
 
@@ -41,12 +41,224 @@ const Config = Facet.define({
   }
 });
 
+function computeLinesState(state) {
+  if (!state.facet(Config).enabled) {
+    return [];
+  }
+  const lines = [];
+  const lineCursor = state.doc.iterLines();
+  const foldedRangeCursor = foldedRanges(state).iter();
+  let textOffset = 0;
+  lineCursor.next();
+  while (!lineCursor.done) {
+    const lineText = lineCursor.value;
+    const from = textOffset;
+    const to = from + lineText.length;
+    while (foldedRangeCursor.value && foldedRangeCursor.to < from) {
+      foldedRangeCursor.next();
+    }
+    const { from: foldFrom, to: foldTo } = foldedRangeCursor;
+    const lineStartInFold = from >= foldFrom && from < foldTo;
+    const lineEndsInFold = to > foldFrom && to <= foldTo;
+    if (lineStartInFold) {
+      const lastLine = lines.pop() ?? [];
+      const lastRange = lastLine.pop();
+      if (lastRange && lastRange.folded) {
+        lastRange.to = foldTo;
+      }
+      if (lastRange) {
+        lastLine.push(lastRange);
+      }
+      if (!lastRange || !lastRange.folded) {
+        lastLine.push({ from: foldFrom, to: foldTo, folded: true });
+      }
+      if (!lineEndsInFold) {
+        lastLine.push({ from: foldTo, to, folded: false });
+      }
+      lines.push(lastLine);
+    } else if (lineEndsInFold) {
+      lines.push([
+        { from, to: foldFrom, folded: false },
+        { from: foldFrom, to: foldTo, folded: true }
+      ]);
+    } else {
+      lines.push([{ from, to, folded: false }]);
+    }
+    textOffset = to + 1;
+    lineCursor.next();
+  }
+  return lines;
+}
+const LinesState = StateField.define({
+  create: (state) => computeLinesState(state),
+  update: (current, tr) => {
+    if (foldsChanged([tr]) || tr.docChanged) {
+      return computeLinesState(tr.state);
+    }
+    return current;
+  }
+});
+function foldsChanged(transactions) {
+  return transactions.some(
+    (tr) => tr.effects.some((ef) => ef.is(foldEffect) || ef.is(unfoldEffect))
+  );
+}
+
+const SCALE = Scale.PixelMultiplier * Scale.SizeRatio;
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+function computeLayout(input) {
+  const { rowCount, lineHeight, paddingTop, paddingBottom, height } = input;
+  const lastRow = Math.max(0, rowCount - 1);
+  const first = clamp(input.firstVisibleRow, 0, lastRow);
+  const last = clamp(input.lastVisibleRow, first, lastRow);
+  const visibleRows2 = last - first + 1;
+  const contentHeight = paddingTop + paddingBottom + rowCount * lineHeight;
+  const overlayHeight = Math.min(height, visibleRows2 * lineHeight);
+  const rowTop = paddingTop + first * lineHeight;
+  const scrollableRows = Math.max(0, rowCount - input.rowsPerScreen);
+  const progress = scrollableRows <= 0 ? 0 : clamp(first / scrollableRows, 0, 1);
+  const maxScroll = Math.max(0, contentHeight - height);
+  const scrollTop = clamp(
+    maxScroll * progress,
+    Math.max(0, rowTop - (height - overlayHeight)),
+    Math.min(maxScroll, rowTop)
+  );
+  const overlayTravel = Math.max(
+    0,
+    Math.min(height, contentHeight) - paddingTop - paddingBottom - input.rowsPerScreen * lineHeight
+  );
+  return {
+    contentHeight,
+    scrollTop,
+    overlayTop: rowTop - scrollTop,
+    overlayHeight,
+    rowCount,
+    scrollableRows,
+    overlayTravel
+  };
+}
+const rowHeights = /* @__PURE__ */ new WeakMap();
+function setRowHeight(view, canvasLineHeight) {
+  const lineHeight = canvasLineHeight / Scale.PixelMultiplier;
+  if (rowHeights.get(view) !== lineHeight) {
+    rowHeights.set(view, lineHeight);
+    measured.delete(view);
+  }
+}
+function rowAtPos(lines, pos) {
+  let low = 0;
+  let high = lines.length - 1;
+  while (low < high) {
+    const mid = Math.ceil((low + high) / 2);
+    const line = lines[mid];
+    if (line && line.length && line[0].from <= pos) {
+      low = mid;
+    } else {
+      high = mid - 1;
+    }
+  }
+  return Math.max(0, low);
+}
+function lineBlockAtHeight(view, height) {
+  const { doc } = view.state;
+  let low = 1;
+  let high = doc.lines;
+  while (low < high) {
+    const mid = Math.floor((low + high) / 2);
+    if (view.lineBlockAt(doc.line(mid).from).bottom <= height) {
+      low = mid + 1;
+    } else {
+      high = mid;
+    }
+  }
+  return view.lineBlockAt(doc.line(low).from);
+}
+function visibleRows(view) {
+  const lines = view.state.field(LinesState);
+  const { top, bottom } = view.scrollDOM.getBoundingClientRect();
+  const documentTop = view.documentTop;
+  return {
+    first: rowAtPos(lines, lineBlockAtHeight(view, top - documentTop).from),
+    last: rowAtPos(lines, lineBlockAtHeight(view, bottom - documentTop).to)
+  };
+}
+const measured = /* @__PURE__ */ new WeakMap();
+function readGeometry(view, token) {
+  if (token) {
+    const previous = measured.get(view);
+    if (previous && previous.token === token) {
+      return previous.geometry;
+    }
+  }
+  const geometry = measureGeometry(view);
+  if (token) {
+    measured.set(view, { token, geometry });
+  }
+  return geometry;
+}
+function measureGeometry(view) {
+  const lineHeight = rowHeights.get(view) || view.defaultLineHeight / SCALE || 0;
+  const paddingTop = view.documentPadding.top / SCALE;
+  const paddingBottom = view.documentPadding.bottom / SCALE;
+  const height = view.dom.getBoundingClientRect().height;
+  const { first, last } = visibleRows(view);
+  const layout = computeLayout({
+    rowCount: view.state.field(LinesState).length,
+    lineHeight,
+    paddingTop,
+    paddingBottom,
+    height,
+    firstVisibleRow: first,
+    lastVisibleRow: last,
+    rowsPerScreen: view.defaultLineHeight ? view.scrollDOM.clientHeight / view.defaultLineHeight : 0
+  });
+  return { ...layout, lineHeight, paddingTop, paddingBottom, height };
+}
+function rowAtY(geometry, y) {
+  if (geometry.lineHeight <= 0) {
+    return 0;
+  }
+  const offset = geometry.scrollTop + y - geometry.paddingTop;
+  return Math.floor(offset / geometry.lineHeight);
+}
+function rowAtOverlayTop(geometry, overlayTop) {
+  if (geometry.overlayTravel <= 0 || geometry.scrollableRows <= 0 || geometry.lineHeight <= 0) {
+    return 0;
+  }
+  const offset = overlayTop - geometry.paddingTop;
+  if (offset >= geometry.overlayTravel) {
+    return clamp(
+      geometry.scrollableRows + (offset - geometry.overlayTravel) / geometry.lineHeight,
+      0,
+      Math.max(0, geometry.rowCount - 1)
+    );
+  }
+  const progress = clamp(offset / geometry.overlayTravel, 0, 1);
+  return progress * geometry.scrollableRows;
+}
+function scrollToRow(view, row, offset = 0) {
+  const lines = view.state.field(LinesState);
+  const wanted = clamp(row, 0, lines.length - 1);
+  const index = Math.floor(wanted);
+  const line = lines[index];
+  if (!line || !line.length) {
+    return;
+  }
+  const block = view.lineBlockAt(line[0].from);
+  const withinRow = (wanted - index) * block.height;
+  view.scrollDOM.scrollTop = view.documentPadding.top + block.top + withinRow - offset;
+}
+
 const Theme$1 = EditorView.theme({
   ".cm-minimap-overlay-container": {
     position: "absolute",
     top: 0,
     height: "100%",
     width: "100%",
+    // The minimap is a sibling of `.cm-content` inside the scroller, so
+    // without this it inherits the caret the editor shows over text. It is
+    // not text: clicking it jumps, and the overlay is dragged.
+    cursor: "default",
     "&.cm-minimap-overlay-mouse-over": {
       opacity: 0,
       transition: "visibility 0s linear 300ms, opacity 300ms"
@@ -66,6 +278,7 @@ const Theme$1 = EditorView.theme({
       top: 0,
       width: "100%",
       transition: "top 0s ease-in 0ms",
+      cursor: "grab",
       "&:hover": {
         opacity: "0.3"
       }
@@ -75,12 +288,12 @@ const Theme$1 = EditorView.theme({
       visibility: "visible",
       transition: "visibility 0s linear 0ms, opacity 300ms",
       "& .cm-minimap-overlay": {
-        opacity: "0.4"
+        opacity: "0.4",
+        cursor: "grabbing"
       }
     }
   }
 });
-const SCALE = Scale.PixelMultiplier * Scale.SizeRatio;
 const OverlayView = ViewPlugin.fromClass(
   class {
     constructor(view) {
@@ -93,7 +306,29 @@ const OverlayView = ViewPlugin.fromClass(
     container;
     dom;
     _isDragging = false;
-    _dragStartY;
+    /**
+     * Where inside the overlay the drag took hold of it, as a fraction of
+     * its height rather than a count of pixels down from its top.
+     *
+     * The overlay is sized to the lines on screen, so it shrinks as a drag
+     * carries it from a screen of code into one of wrapped prose. A pixel
+     * offset taken when it was tall goes on pointing at where its middle
+     * used to be, which by the end of the document is somewhere below its
+     * bottom edge — and the pointer would have to leave the minimap, often
+     * the window, to put the overlay where it belongs. A fraction shrinks
+     * with it and stays under the thumb.
+     */
+    _dragAnchor;
+    /** The last position the pointer reported, waiting for a frame. */
+    _dragPointerY;
+    _dragFrame;
+    /**
+     * Measured when the drag starts and kept for its duration. None of it
+     * moves as the document scrolls, and `update` drops it so that anything
+     * which does move it — an edit, a resize, a change of theme — is
+     * measured again.
+     */
+    _dragGeometry;
     // Bound once so that removeEventListener sees the same reference that
     // addEventListener was given; `.bind` at call time yields a new
     // function each call and the listener would never be detached.
@@ -114,10 +349,12 @@ const OverlayView = ViewPlugin.fromClass(
         inner.appendChild(this.container);
       }
       this.computeShowOverlay();
-      this.computeHeight();
-      this.computeTop();
+      this.position();
     }
     remove() {
+      if (this._isDragging) {
+        this.endDrag();
+      }
       if (this.container) {
         this.container.removeEventListener(
           "mousedown",
@@ -139,33 +376,26 @@ const OverlayView = ViewPlugin.fromClass(
         this.create(update.view);
       }
       if (now) {
+        this._dragGeometry = void 0;
         this.computeShowOverlay();
-        if (update.geometryChanged) {
-          this.computeHeight();
-          this.computeTop();
-        }
+        this.position(update);
       }
     }
-    computeHeight() {
+    /**
+     * Covers the rows the editor is showing. The renderer scrolls its rows
+     * to the position the same geometry prescribes, so the overlay lands on
+     * the drawn content whatever the document does with wrapping or folds.
+     */
+    position(token) {
       if (!this.dom) {
         return;
       }
-      const height = this.view.dom.clientHeight / SCALE;
-      this.dom.style.height = height + "px";
-    }
-    computeTop() {
-      if (!this._isDragging && this.dom) {
-        const { clientHeight, scrollHeight, scrollTop } = this.view.scrollDOM;
-        const maxScrollTop = scrollHeight - clientHeight;
-        const topForNonOverflowing = scrollTop / SCALE;
-        const height = clientHeight / SCALE;
-        const maxTop = clientHeight - height;
-        let scrollRatio = scrollTop / maxScrollTop;
-        if (isNaN(scrollRatio)) scrollRatio = 0;
-        const topForOverflowing = maxTop * scrollRatio;
-        const top = Math.min(topForOverflowing, topForNonOverflowing);
-        this.dom.style.top = top + "px";
-      }
+      const { overlayTop, overlayHeight } = readGeometry(
+        this.view,
+        token
+      );
+      this.dom.style.top = overlayTop + "px";
+      this.dom.style.height = overlayHeight + "px";
     }
     computeShowOverlay() {
       if (!this.container) {
@@ -193,75 +423,64 @@ const OverlayView = ViewPlugin.fromClass(
       if (event.button === 2) {
         return;
       }
+      event.preventDefault();
       const { clientY, target } = event;
-      if (target === this.dom) {
-        this._dragStartY = event.clientY;
+      if (target === this.dom && this.dom) {
+        const grabbed = this.dom.getBoundingClientRect();
+        this._dragAnchor = grabbed.height > 0 ? (clientY - grabbed.top) / grabbed.height : 0;
         this._isDragging = true;
         this.container.classList.add("cm-minimap-overlay-active");
+        document.body.style.cursor = "grabbing";
         return;
       }
-      const { clientHeight, scrollHeight, scrollTop } = this.view.scrollDOM;
-      const targetTop = target.getBoundingClientRect().top;
-      const deltaY = (clientY - targetTop) * SCALE;
-      const scrollRatio = scrollTop / (scrollHeight - clientHeight);
-      const visibleRange = clientHeight * SCALE - clientHeight;
-      const visibleTop = visibleRange * scrollRatio;
-      const top = Math.max(0, scrollTop - visibleTop);
-      this.view.scrollDOM.scrollTop = top + deltaY - clientHeight / 2;
+      const geometry = readGeometry(this.view);
+      const y = clientY - this.container.getBoundingClientRect().top;
+      scrollToRow(
+        this.view,
+        rowAtY(geometry, y),
+        this.view.scrollDOM.clientHeight / 2
+      );
     }
     onMouseUp(_event) {
-      if (this._isDragging && this.container) {
-        this._dragStartY = void 0;
-        this._isDragging = false;
-        this.container.classList.remove("cm-minimap-overlay-active");
+      if (this._isDragging) {
+        this.endDrag();
       }
     }
+    endDrag() {
+      if (this._dragFrame !== void 0) {
+        cancelAnimationFrame(this._dragFrame);
+        this._dragFrame = void 0;
+      }
+      this._dragAnchor = void 0;
+      this._dragPointerY = void 0;
+      this._dragGeometry = void 0;
+      this._isDragging = false;
+      this.container?.classList.remove("cm-minimap-overlay-active");
+      document.body.style.removeProperty("cursor");
+    }
     onMouseMove(event) {
-      if (!this._isDragging || !this.dom) {
+      if (!this._isDragging || this._dragAnchor === void 0) {
         return;
       }
       event.preventDefault();
       event.stopPropagation();
-      if (!this._dragStartY) {
-        this._dragStartY = event.clientY;
-        return;
-      }
-      const deltaY = event.clientY - this._dragStartY;
-      const movingUp = deltaY < 0;
-      const movingDown = deltaY > 0;
-      this._dragStartY = event.clientY;
-      const canvasHeight = this.dom.getBoundingClientRect().height;
-      const canvasAbsTop = this.dom.getBoundingClientRect().y;
-      const canvasAbsBot = canvasAbsTop + canvasHeight;
-      const canvasRelTopDouble = parseFloat(this.dom.style.top);
-      const scrollPosition = this.view.scrollDOM.scrollTop;
-      const editorHeight = this.view.scrollDOM.clientHeight;
-      const contentHeight = this.view.scrollDOM.scrollHeight;
-      const atTop = scrollPosition === 0;
-      const atBottom = Math.round(scrollPosition) >= Math.round(contentHeight - editorHeight);
-      if (atTop && movingUp || atTop && event.clientY < canvasAbsTop) {
-        return;
+      this._dragPointerY = event.clientY;
+      if (this._dragFrame === void 0) {
+        this._dragFrame = requestAnimationFrame(() => {
+          this._dragFrame = void 0;
+          this.dragToPointer();
+        });
       }
-      if (atBottom && movingDown || atBottom && event.clientY > canvasAbsBot) {
+    }
+    dragToPointer() {
+      if (!this._isDragging || this._dragAnchor === void 0 || this._dragPointerY === void 0 || !this.container || !this.dom) {
         return;
       }
-      const scrollHeight = this.view.scrollDOM.scrollHeight;
-      const clientHeight = this.view.scrollDOM.clientHeight;
-      const maxTopNonOverflowing = (scrollHeight - clientHeight) / SCALE;
-      const maxTopOverflowing = clientHeight - clientHeight / SCALE;
-      const change = canvasRelTopDouble + deltaY;
-      const relativeToMax = change / maxTopOverflowing;
-      const scrollPosOverflowing = (scrollHeight - clientHeight) * relativeToMax;
-      const scrollPosNonOverflowing = change * SCALE;
-      this.view.scrollDOM.scrollTop = Math.max(
-        scrollPosOverflowing,
-        scrollPosNonOverflowing
-      );
-      const top = Math.min(
-        Math.max(0, change),
-        Math.min(maxTopOverflowing, maxTopNonOverflowing)
-      );
-      this.dom.style.top = top + "px";
+      this._dragGeometry ??= readGeometry(this.view);
+      const overlayHeight = this.dom.getBoundingClientRect().height;
+      const containerTop = this.container.getBoundingClientRect().top;
+      const top = this._dragPointerY - this._dragAnchor * overlayHeight - containerTop;
+      scrollToRow(this.view, rowAtOverlayTop(this._dragGeometry, top));
     }
     destroy() {
       this.remove();
@@ -269,8 +488,8 @@ const OverlayView = ViewPlugin.fromClass(
   },
   {
     eventHandlers: {
-      scroll() {
-        requestAnimationFrame(() => this.computeTop());
+      scroll(event) {
+        requestAnimationFrame(() => this.position(event));
       }
     }
   }
@@ -292,69 +511,6 @@ class LineBasedState {
   }
 }
 
-function computeLinesState(state) {
-  if (!state.facet(Config).enabled) {
-    return [];
-  }
-  const lines = [];
-  const lineCursor = state.doc.iterLines();
-  const foldedRangeCursor = foldedRanges(state).iter();
-  let textOffset = 0;
-  lineCursor.next();
-  while (!lineCursor.done) {
-    const lineText = lineCursor.value;
-    const from = textOffset;
-    const to = from + lineText.length;
-    while (foldedRangeCursor.value && foldedRangeCursor.to < from) {
-      foldedRangeCursor.next();
-    }
-    const { from: foldFrom, to: foldTo } = foldedRangeCursor;
-    const lineStartInFold = from >= foldFrom && from < foldTo;
-    const lineEndsInFold = to > foldFrom && to <= foldTo;
-    if (lineStartInFold) {
-      const lastLine = lines.pop() ?? [];
-      const lastRange = lastLine.pop();
-      if (lastRange && lastRange.folded) {
-        lastRange.to = foldTo;
-      }
-      if (lastRange) {
-        lastLine.push(lastRange);
-      }
-      if (!lastRange || !lastRange.folded) {
-        lastLine.push({ from: foldFrom, to: foldTo, folded: true });
-      }
-      if (!lineEndsInFold) {
-        lastLine.push({ from: foldTo, to, folded: false });
-      }
-      lines.push(lastLine);
-    } else if (lineEndsInFold) {
-      lines.push([
-        { from, to: foldFrom, folded: false },
-        { from: foldFrom, to: foldTo, folded: true }
-      ]);
-    } else {
-      lines.push([{ from, to, folded: false }]);
-    }
-    textOffset = to + 1;
-    lineCursor.next();
-  }
-  return lines;
-}
-const LinesState = StateField.define({
-  create: (state) => computeLinesState(state),
-  update: (current, tr) => {
-    if (foldsChanged([tr]) || tr.docChanged) {
-      return computeLinesState(tr.state);
-    }
-    return current;
-  }
-});
-function foldsChanged(transactions) {
-  return transactions.some(
-    (tr) => tr.effects.some((ef) => ef.is(foldEffect) || ef.is(unfoldEffect))
-  );
-}
-
 class DiagnosticState extends LineBasedState {
   count = void 0;
   constructor(view) {
@@ -1009,7 +1165,7 @@ const minimapClass = ViewPlugin.fromClass(
         this.text.update(update);
         this.selection.update(update);
         this.diagnostic.update(update);
-        this.render();
+        this.render(update);
       }
     }
     getWidth() {
@@ -1020,7 +1176,12 @@ const minimapClass = ViewPlugin.fromClass(
       }
       return maxWidth;
     }
-    render() {
+    /**
+     * `token` names the moment being drawn, and is passed on to
+     * `readGeometry` so that the overlay, which draws the same moment,
+     * measures it only once between them.
+     */
+    render(token) {
       if (!this.dom || !this.canvas || !this.inner) {
         return;
       }
@@ -1051,9 +1212,11 @@ const minimapClass = ViewPlugin.fromClass(
       }
       context.globalAlpha = 1;
       const { charWidth, lineHeight } = this.text.measure(context);
+      setRowHeight(this.view, lineHeight);
       let { startIndex, endIndex, offsetY } = this.canvasStartAndEndIndex(
         context,
-        lineHeight
+        lineHeight,
+        token
       );
       const gutters = this.view.state.facet(Config).gutters;
       const lineCount = this.view.state.field(LinesState).length;
@@ -1081,27 +1244,19 @@ const minimapClass = ViewPlugin.fromClass(
       }
       context.restore();
     }
-    canvasStartAndEndIndex(context, lineHeight) {
-      const { top: rawTop, bottom: rawBottom } = this.view.documentPadding;
-      const pTop = rawTop / Scale.SizeRatio;
-      const pBottom = rawBottom / Scale.SizeRatio;
+    canvasStartAndEndIndex(context, lineHeight, token) {
+      const pTop = this.view.documentPadding.top / Scale.SizeRatio;
       const canvasHeight = context.canvas.height;
-      const { clientHeight, scrollHeight, scrollTop } = this.view.scrollDOM;
-      let scrollPercent = scrollTop / (scrollHeight - clientHeight);
-      if (isNaN(scrollPercent)) {
-        scrollPercent = 0;
+      const canvasTop = readGeometry(this.view, token).scrollTop * Scale.PixelMultiplier;
+      if (lineHeight <= 0) {
+        return { startIndex: 0, endIndex: 0, offsetY: 0 };
       }
-      const lineCount = this.view.state.field(LinesState).length;
-      const totalHeight = pTop + pBottom + lineCount * lineHeight;
-      const canvasTop = Math.max(
+      const startIndex = Math.max(
         0,
-        scrollPercent * (totalHeight - canvasHeight)
-      );
-      const offsetY = Math.max(0, pTop - canvasTop);
-      const startIndex = Math.round(
-        Math.max(0, canvasTop - pTop) / lineHeight
+        Math.floor((canvasTop - pTop) / lineHeight)
       );
-      const spaceForLines = Math.round(
+      const offsetY = pTop + startIndex * lineHeight - canvasTop;
+      const spaceForLines = Math.ceil(
         (canvasHeight - offsetY) / lineHeight
       );
       return {
@@ -1128,8 +1283,8 @@ const minimapClass = ViewPlugin.fromClass(
   },
   {
     eventHandlers: {
-      scroll() {
-        requestAnimationFrame(() => this.render());
+      scroll(event) {
+        requestAnimationFrame(() => this.render(event));
       }
     },
     provide: (plugin) => {