@batchfy/codemirror-minimap 0.1.0 → 0.1.1

package/src/Overlay.ts

@@ -1,5 +1,12 @@
 import { EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
-import { Config, Scale } from "./Config.js";
+import { Config } from "./Config.js";
+import {
+    readGeometry,
+    rowAtOverlayTop,
+    rowAtY,
+    scrollToRow,
+    type StableGeometry,
+} from "./geometry.js";
 import crelt from "crelt";
 
 const Theme = EditorView.theme({
@@ -8,6 +15,10 @@ const Theme = EditorView.theme({
         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",
@@ -27,6 +38,7 @@ const Theme = EditorView.theme({
             top: 0,
             width: "100%",
             transition: "top 0s ease-in 0ms",
+            cursor: "grab",
             "&:hover": {
                 opacity: "0.3",
             },
@@ -37,20 +49,41 @@ const Theme = EditorView.theme({
             transition: "visibility 0s linear 0ms, opacity 300ms",
             "& .cm-minimap-overlay": {
                 opacity: "0.4",
+                cursor: "grabbing",
             },
         },
     },
 });
 
-const SCALE = Scale.PixelMultiplier * Scale.SizeRatio;
-
 const OverlayView = ViewPlugin.fromClass(
     class {
         private container: HTMLElement | undefined;
         private dom: HTMLElement | undefined;
 
         private _isDragging: boolean = false;
-        private _dragStartY: number | undefined;
+        /**
+         * 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.
+         */
+        private _dragAnchor: number | undefined;
+        /** The last position the pointer reported, waiting for a frame. */
+        private _dragPointerY: number | undefined;
+        private _dragFrame: number | undefined;
+        /**
+         * 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.
+         */
+        private _dragGeometry: StableGeometry | undefined;
 
         // Bound once so that removeEventListener sees the same reference that
         // addEventListener was given; `.bind` at call time yields a new
@@ -85,11 +118,16 @@ const OverlayView = ViewPlugin.fromClass(
 
             // Initially set overlay configuration styles, height, top
             this.computeShowOverlay();
-            this.computeHeight();
-            this.computeTop();
+            this.position();
         }
 
         private remove() {
+            // A minimap turned off or torn down mid-drag would otherwise leave
+            // the whole page holding the dragging cursor.
+            if (this._isDragging) {
+                this.endDrag();
+            }
+
             if (this.container) {
                 this.container.removeEventListener(
                     "mousedown",
@@ -115,41 +153,38 @@ const OverlayView = ViewPlugin.fromClass(
             }
 
             if (now) {
+                // Anything that reaches an update may have changed the size of
+                // the editor, the length of the document or the height of a
+                // row, so a drag in progress measures them again.
+                this._dragGeometry = undefined;
+
                 this.computeShowOverlay();
 
-                if (update.geometryChanged) {
-                    this.computeHeight();
-                    this.computeTop();
-                }
+                // Unconditionally, and not just on `geometryChanged`: the rows
+                // are redrawn on every update, and an overlay that skipped one
+                // would be left marking rows that have since moved under it.
+                // The renderer runs first and measures the same update, so this
+                // reads that measurement rather than taking its own.
+                this.position(update);
             }
         }
 
-        public 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.
+         */
+        public position(token?: object) {
             if (!this.dom) {
                 return;
             }
 
-            const height = this.view.dom.clientHeight / SCALE;
-            this.dom.style.height = height + "px";
-        }
-
-        public 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";
         }
 
         public computeShowOverlay() {
@@ -185,123 +220,121 @@ const OverlayView = ViewPlugin.fromClass(
                 return;
             }
 
+            /**
+             * The minimap sits inside the scroller alongside `.cm-content`, so
+             * a mousedown on it starts a native text selection that runs on for
+             * as long as the button is held — which is what leaves the pointer
+             * showing a caret through the whole drag, and what puts a selection
+             * in the document that nobody asked for. Neither gesture here has
+             * anything to do with selecting: one jumps, one drags.
+             */
+            event.preventDefault();
+
             // If target is the overlay start dragging
             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");
+
+                // The pointer spends most of a drag off the overlay, and some
+                // of it off the minimap altogether, where the rule on the
+                // overlay no longer reaches it.
+                document.body.style.cursor = "grabbing";
                 return;
             }
 
-            // Updates the scroll position of the EditorView based on the
-            // position of the MouseEvent on the minimap canvas
-            const { clientHeight, scrollHeight, scrollTop } =
-                this.view.scrollDOM;
-            const targetTop = (target as HTMLElement).getBoundingClientRect()
-                .top;
-            const deltaY = (clientY - targetTop) * SCALE;
-
-            const scrollRatio = scrollTop / (scrollHeight - clientHeight);
-            const visibleRange = clientHeight * SCALE - clientHeight;
-            const visibleTop = visibleRange * scrollRatio;
+            // A click anywhere else on the minimap centres the row underneath it
+            const geometry = readGeometry(this.view);
+            const y = clientY - this.container.getBoundingClientRect().top;
 
-            const top = Math.max(0, scrollTop - visibleTop);
-            this.view.scrollDOM.scrollTop = top + deltaY - clientHeight / 2;
+            scrollToRow(
+                this.view,
+                rowAtY(geometry, y),
+                this.view.scrollDOM.clientHeight / 2,
+            );
         }
 
         private onMouseUp(_event: MouseEvent) {
             // Stop dragging on mouseup
-            if (this._isDragging && this.container) {
-                this._dragStartY = undefined;
-                this._isDragging = false;
-                this.container.classList.remove("cm-minimap-overlay-active");
+            if (this._isDragging) {
+                this.endDrag();
             }
         }
 
-        private onMouseMove(event: MouseEvent) {
-            if (!this._isDragging || !this.dom) {
-                return;
+        private endDrag() {
+            if (this._dragFrame !== undefined) {
+                cancelAnimationFrame(this._dragFrame);
+                this._dragFrame = undefined;
             }
 
-            event.preventDefault();
-            event.stopPropagation();
+            this._dragAnchor = undefined;
+            this._dragPointerY = undefined;
+            this._dragGeometry = undefined;
+            this._isDragging = false;
+            this.container?.classList.remove("cm-minimap-overlay-active");
+            document.body.style.removeProperty("cursor");
+        }
 
-            // Without an existing position, we're just beginning to drag.
-            if (!this._dragStartY) {
-                this._dragStartY = event.clientY;
+        private onMouseMove(event: MouseEvent) {
+            if (!this._isDragging || this._dragAnchor === undefined) {
                 return;
             }
 
-            const deltaY = event.clientY - this._dragStartY;
-            const movingUp = deltaY < 0;
-            const movingDown = deltaY > 0;
-
-            // Update drag position for the next tick
-            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;
+            event.preventDefault();
+            event.stopPropagation();
 
-            const atTop = scrollPosition === 0;
-            const atBottom =
-                Math.round(scrollPosition) >=
-                Math.round(contentHeight - editorHeight);
+            this._dragPointerY = event.clientY;
 
-            // We allow over-dragging past the top/bottom, but the overlay just sticks
-            // to the top or bottom of its range. These checks prevent us from immediately
-            // moving the overlay when the drag changes direction. We should wait until
-            // the cursor has returned to, and begun to pass the bottom/top of the range
-            if (
-                (atTop && movingUp) ||
-                (atTop && event.clientY < canvasAbsTop)
-            ) {
-                return;
+            /**
+             * At most one move per frame. A trackpad reports positions faster
+             * than the screen can show them, and acting on each one means
+             * reading the layout back immediately after the last one wrote to
+             * it — the reading is what costs, and none of the extra readings
+             * can reach the screen anyway.
+             */
+            if (this._dragFrame === undefined) {
+                this._dragFrame = requestAnimationFrame(() => {
+                    this._dragFrame = undefined;
+                    this.dragToPointer();
+                });
             }
+        }
+
+        private dragToPointer() {
             if (
-                (atBottom && movingDown) ||
-                (atBottom && event.clientY > canvasAbsBot)
+                !this._isDragging ||
+                this._dragAnchor === undefined ||
+                this._dragPointerY === undefined ||
+                !this.container ||
+                !this.dom
             ) {
                 return;
             }
 
-            // Set view scroll directly
-            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;
+            this._dragGeometry ??= readGeometry(this.view);
 
             /**
-             * ScrollPosOverflowing is calculated by:
-             * - Calculating the offset (change) relative to the total height of the container
-             * - Multiplying by the maximum scrollTop position for the scroller
-             * - The maximum scrollTop position for the scroller is the total scroll height minus the client height
+             * The overlay's drawn height, rather than a freshly computed one:
+             * the anchor was taken against what is on the screen, the two rows
+             * a frame of lag can cost are invisible at this scale, and reading
+             * it is a single box where computing it means bisecting the height
+             * map twice.
              */
-            const relativeToMax = change / maxTopOverflowing;
-            const scrollPosOverflowing =
-                (scrollHeight - clientHeight) * relativeToMax;
-
-            const scrollPosNonOverflowing = change * SCALE;
-            this.view.scrollDOM.scrollTop = Math.max(
-                scrollPosOverflowing,
-                scrollPosNonOverflowing,
-            );
+            const overlayHeight = this.dom.getBoundingClientRect().height;
+            const containerTop = this.container.getBoundingClientRect().top;
 
-            // view.scrollDOM truncates if out of bounds. We need to mimic that behavior here with min/max guard
-            const top = Math.min(
-                Math.max(0, change),
-                Math.min(maxTopOverflowing, maxTopNonOverflowing),
-            );
-            this.dom.style.top = top + "px";
+            const top =
+                this._dragPointerY -
+                this._dragAnchor * overlayHeight -
+                containerTop;
+
+            scrollToRow(this.view, rowAtOverlayTop(this._dragGeometry, top));
         }
 
         public destroy() {
@@ -310,8 +343,8 @@ const OverlayView = ViewPlugin.fromClass(
     },
     {
         eventHandlers: {
-            scroll() {
-                requestAnimationFrame(() => this.computeTop());
+            scroll(event) {
+                requestAnimationFrame(() => this.position(event));
             },
         },
     },