@batchfy/codemirror-minimap 0.1.0

package/src/LinesState.ts

@@ -0,0 +1,96 @@
+import { foldEffect, foldedRanges, unfoldEffect } from "@codemirror/language";
+import { StateField, EditorState, Transaction } from "@codemirror/state";
+import { Config } from "./Config.js";
+
+type Span = { from: number; to: number; folded: boolean };
+type Line = Array<Span>;
+type Lines = Array<Line>;
+
+function computeLinesState(state: EditorState): Lines {
+    if (!state.facet(Config).enabled) {
+        return [];
+    }
+
+    const lines: 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;
+
+        // Iterate through folded ranges until we're at or past the current line
+        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 the last range is folded, we extend the folded range
+            if (lastRange && lastRange.folded) {
+                lastRange.to = foldTo;
+            }
+
+            // If we popped the last range, add it back
+            if (lastRange) {
+                lastLine.push(lastRange);
+            }
+
+            // If we didn't have a previous range, or the previous range wasn't folded add a new range
+            if (!lastRange || !lastRange.folded) {
+                lastLine.push({ from: foldFrom, to: foldTo, folded: true });
+            }
+
+            // If the line doesn't end in a fold, we add another token for the unfolded section
+            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<Lines>({
+    create: (state) => computeLinesState(state),
+    update: (current, tr) => {
+        if (foldsChanged([tr]) || tr.docChanged) {
+            return computeLinesState(tr.state);
+        }
+
+        return current;
+    },
+});
+
+/** Returns if the folds have changed in this update */
+function foldsChanged(transactions: readonly Transaction[]): boolean {
+    return transactions.some((tr) =>
+        tr.effects.some((ef) => ef.is(foldEffect) || ef.is(unfoldEffect)),
+    );
+}
+
+export { foldsChanged, LinesState };
+export type { Lines };

package/src/Overlay.ts

@@ -0,0 +1,320 @@
+import { EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
+import { Config, Scale } from "./Config.js";
+import crelt from "crelt";
+
+const Theme = EditorView.theme({
+    ".cm-minimap-overlay-container": {
+        position: "absolute",
+        top: 0,
+        height: "100%",
+        width: "100%",
+        "&.cm-minimap-overlay-mouse-over": {
+            opacity: 0,
+            transition: "visibility 0s linear 300ms, opacity 300ms",
+        },
+        "&.cm-minimap-overlay-mouse-over:hover": {
+            opacity: 1,
+            transition: "visibility 0s linear 0ms, opacity 300ms",
+        },
+        "&.cm-minimap-overlay-off": {
+            display: "none",
+        },
+        "& .cm-minimap-overlay": {
+            background: "rgb(121, 121, 121)",
+            opacity: "0.2",
+            position: "absolute",
+            right: 0,
+            top: 0,
+            width: "100%",
+            transition: "top 0s ease-in 0ms",
+            "&:hover": {
+                opacity: "0.3",
+            },
+        },
+        "&.cm-minimap-overlay-active": {
+            opacity: 1,
+            visibility: "visible",
+            transition: "visibility 0s linear 0ms, opacity 300ms",
+            "& .cm-minimap-overlay": {
+                opacity: "0.4",
+            },
+        },
+    },
+});
+
+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;
+
+        // 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.
+        private readonly boundMouseDown = this.onMouseDown.bind(this);
+        private readonly boundMouseUp = this.onMouseUp.bind(this);
+        private readonly boundMouseMove = this.onMouseMove.bind(this);
+
+        public constructor(private view: EditorView) {
+            if (view.state.facet(Config).enabled) {
+                this.create(view);
+            }
+        }
+
+        private create(view: EditorView) {
+            this.container = crelt("div", {
+                class: "cm-minimap-overlay-container",
+            });
+            this.dom = crelt("div", { class: "cm-minimap-overlay" });
+            this.container.appendChild(this.dom);
+
+            // Attach event listeners for overlay
+            this.container.addEventListener("mousedown", this.boundMouseDown);
+            window.addEventListener("mouseup", this.boundMouseUp);
+            window.addEventListener("mousemove", this.boundMouseMove);
+
+            // Attach the overlay elements to the minimap
+            const inner = view.dom.querySelector(".cm-minimap-inner");
+            if (inner) {
+                inner.appendChild(this.container);
+            }
+
+            // Initially set overlay configuration styles, height, top
+            this.computeShowOverlay();
+            this.computeHeight();
+            this.computeTop();
+        }
+
+        private remove() {
+            if (this.container) {
+                this.container.removeEventListener(
+                    "mousedown",
+                    this.boundMouseDown,
+                );
+                window.removeEventListener("mouseup", this.boundMouseUp);
+                window.removeEventListener("mousemove", this.boundMouseMove);
+                this.container.remove();
+            }
+        }
+
+        update(update: ViewUpdate) {
+            const prev = update.startState.facet(Config).enabled;
+            const now = update.state.facet(Config).enabled;
+
+            if (prev && !now) {
+                this.remove();
+                return;
+            }
+
+            if (!prev && now) {
+                this.create(update.view);
+            }
+
+            if (now) {
+                this.computeShowOverlay();
+
+                if (update.geometryChanged) {
+                    this.computeHeight();
+                    this.computeTop();
+                }
+            }
+        }
+
+        public computeHeight() {
+            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";
+            }
+        }
+
+        public computeShowOverlay() {
+            if (!this.container) {
+                return;
+            }
+
+            const { showOverlay } = this.view.state.facet(Config);
+
+            if (showOverlay === "mouse-over") {
+                this.container.classList.add("cm-minimap-overlay-mouse-over");
+            } else {
+                this.container.classList.remove(
+                    "cm-minimap-overlay-mouse-over",
+                );
+            }
+
+            const { clientHeight, scrollHeight } = this.view.scrollDOM;
+            if (clientHeight === scrollHeight) {
+                this.container.classList.add("cm-minimap-overlay-off");
+            } else {
+                this.container.classList.remove("cm-minimap-overlay-off");
+            }
+        }
+
+        private onMouseDown(event: MouseEvent) {
+            if (!this.container) {
+                return;
+            }
+
+            // Ignore right click
+            if (event.button === 2) {
+                return;
+            }
+
+            // If target is the overlay start dragging
+            const { clientY, target } = event;
+            if (target === this.dom) {
+                this._dragStartY = event.clientY;
+                this._isDragging = true;
+                this.container.classList.add("cm-minimap-overlay-active");
+                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;
+
+            const top = Math.max(0, scrollTop - visibleTop);
+            this.view.scrollDOM.scrollTop = top + deltaY - 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");
+            }
+        }
+
+        private onMouseMove(event: MouseEvent) {
+            if (!this._isDragging || !this.dom) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            // Without an existing position, we're just beginning to drag.
+            if (!this._dragStartY) {
+                this._dragStartY = event.clientY;
+                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;
+
+            const atTop = scrollPosition === 0;
+            const atBottom =
+                Math.round(scrollPosition) >=
+                Math.round(contentHeight - editorHeight);
+
+            // 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;
+            }
+            if (
+                (atBottom && movingDown) ||
+                (atBottom && event.clientY > canvasAbsBot)
+            ) {
+                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;
+
+            /**
+             * 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
+             */
+            const relativeToMax = change / maxTopOverflowing;
+            const scrollPosOverflowing =
+                (scrollHeight - clientHeight) * relativeToMax;
+
+            const scrollPosNonOverflowing = change * SCALE;
+            this.view.scrollDOM.scrollTop = Math.max(
+                scrollPosOverflowing,
+                scrollPosNonOverflowing,
+            );
+
+            // 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";
+        }
+
+        public destroy() {
+            this.remove();
+        }
+    },
+    {
+        eventHandlers: {
+            scroll() {
+                requestAnimationFrame(() => this.computeTop());
+            },
+        },
+    },
+);
+
+export const Overlay = [Theme, OverlayView];

package/src/diagnostics.ts

@@ -0,0 +1,171 @@
+import { EditorView, ViewUpdate } from "@codemirror/view";
+import {
+    Diagnostic,
+    diagnosticCount,
+    forEachDiagnostic,
+    setDiagnosticsEffect,
+} from "@codemirror/lint";
+
+import { LineBasedState } from "./linebasedstate.js";
+import { DrawContext } from "./types.js";
+import { Lines, LinesState, foldsChanged } from "./LinesState.js";
+import { Config } from "./Config.js";
+
+type Severity = Diagnostic["severity"];
+
+export class DiagnosticState extends LineBasedState<Severity> {
+    private count: number | undefined = undefined;
+
+    public constructor(view: EditorView) {
+        super(view);
+    }
+
+    private shouldUpdate(update: ViewUpdate) {
+        // If the minimap is disabled
+        if (!update.state.facet(Config).enabled) {
+            return false;
+        }
+
+        // If the doc changed
+        if (update.docChanged) {
+            return true;
+        }
+
+        // If the diagnostics changed
+        for (const tr of update.transactions) {
+            for (const ef of tr.effects) {
+                if (ef.is(setDiagnosticsEffect)) {
+                    return true;
+                }
+            }
+        }
+
+        // If the folds changed
+        if (foldsChanged(update.transactions)) {
+            return true;
+        }
+
+        // If the minimap was previously hidden
+        if (this.count === undefined) {
+            return true;
+        }
+
+        return false;
+    }
+
+    public update(update: ViewUpdate) {
+        if (!this.shouldUpdate(update)) {
+            return;
+        }
+
+        this.map.clear();
+        const lines = update.state.field(LinesState);
+        this.count = diagnosticCount(update.state);
+
+        forEachDiagnostic(update.state, (diagnostic, from, to) => {
+            // Find the start and end lines for the diagnostic
+            const lineStart = this.findLine(from, lines);
+            const lineEnd = this.findLine(to, lines);
+
+            // Populate each line in the range with the highest severity diagnostic
+            let severity = diagnostic.severity;
+            for (let i = lineStart; i <= lineEnd; i++) {
+                const previous = this.get(i);
+                if (previous) {
+                    severity = [severity, previous]
+                        .sort(this.sort.bind(this))
+                        .slice(0, 1)[0];
+                }
+                this.set(i, severity);
+            }
+        });
+    }
+
+    public drawLine(ctx: DrawContext, lineNumber: number) {
+        const { context, lineHeight, offsetX, offsetY } = ctx;
+        const severity = this.get(lineNumber);
+        if (!severity) {
+            return;
+        }
+
+        // Draw the full line width rectangle in the background
+        context.globalAlpha = 0.65;
+        context.beginPath();
+        context.rect(
+            offsetX,
+            offsetY /* TODO Scaling causes anti-aliasing in rectangles */,
+            context.canvas.width - offsetX,
+            lineHeight,
+        );
+        context.fillStyle = this.color(severity);
+        context.fill();
+
+        // Restore full opacity, otherwise every layer drawn after this one --
+        // including the text of every subsequent line -- inherits the fade.
+        context.globalAlpha = 1;
+
+        // Draw diagnostic range rectangle in the foreground
+        // TODO: We need to update the state to have specific ranges
+        // context.globalAlpha = 1;
+        // context.beginPath();
+        // context.rect(offsetX, offsetY, textWidth, lineHeight);
+        // context.fillStyle = this.color(severity);
+        // context.fill();
+    }
+
+    /**
+     * Given a position and a set of line ranges, return
+     * the line number the position falls within
+     */
+    private findLine(pos: number, lines: Lines) {
+        const index = lines.findIndex((spans) => {
+            const start = spans.slice(0, 1)[0];
+            const end = spans.slice(-1)[0];
+
+            if (!start || !end) {
+                return false;
+            }
+
+            return start.from <= pos && pos <= end.to;
+        });
+
+        // Line numbers begin at 1
+        return index + 1;
+    }
+
+    /**
+     * Colors from @codemirror/lint
+     * https://github.com/codemirror/lint/blob/e0671b43c02e72766ad1afe1579b7032fdcdb6c1/src/lint.ts#L597
+     */
+    private color(severity: Severity) {
+        return severity === "error"
+            ? "#d11"
+            : severity === "warning"
+              ? "orange"
+              : "#999";
+    }
+
+    /** Sorts severity from most to least severe */
+    private sort(a: Severity, b: Severity) {
+        return this.score(b) - this.score(a);
+    }
+
+    /** Assigns a score to severity, with most severe being the highest */
+    private score(s: Severity) {
+        switch (s) {
+            case "error": {
+                return 3;
+            }
+            case "warning": {
+                return 2;
+            }
+            default: {
+                return 1;
+            }
+        }
+    }
+}
+
+export function diagnostics(view: EditorView): DiagnosticState {
+    return new DiagnosticState(view);
+}