@batchfy/codemirror-minimap 0.1.0

package/src/index.ts

@@ -0,0 +1,368 @@
+import { Facet } from "@codemirror/state";
+import { EditorView, ViewPlugin, ViewUpdate } from "@codemirror/view";
+import { Overlay } from "./Overlay.js";
+import { Config, Options, Scale } from "./Config.js";
+import { DiagnosticState, diagnostics } from "./diagnostics.js";
+import { SelectionState, selections } from "./selections.js";
+import { TextState, text } from "./text.js";
+import { LinesState } from "./LinesState.js";
+import crelt from "crelt";
+import { GUTTER_WIDTH, drawLineGutter } from "./Gutters.js";
+
+const Theme = EditorView.theme({
+    "&": {
+        height: "100%",
+        overflowY: "auto",
+    },
+    "& .cm-minimap-gutter": {
+        borderRight: 0,
+        flexShrink: 0,
+        left: "unset",
+        position: "sticky",
+        right: 0,
+        top: 0,
+    },
+    "& .cm-minimap-autohide": {
+        opacity: 0.0,
+        transition: "opacity 0.3s",
+    },
+    "& .cm-minimap-autohide:hover": {
+        opacity: 1.0,
+    },
+    "& .cm-minimap-inner": {
+        height: "100%",
+        position: "absolute",
+        right: 0,
+        top: 0,
+        overflowY: "hidden",
+        "& canvas": {
+            display: "block",
+        },
+    },
+    "& .cm-minimap-box-shadow": {
+        boxShadow: "12px 0px 20px 5px #6c6c6c",
+    },
+    // Suppresses the scrollbar's appearance only; the scroller keeps its
+    // overflow, so wheel, trackpad, keyboard and programmatic scrolling all
+    // continue to work.
+    // Lives on the scroller rather than the editor root: `themeChanged`
+    // fingerprints the root's class list, so toggling a class there would read
+    // as a theme change and needlessly drop the font metric cache.
+    "& .cm-scroller.cm-minimap-hide-scrollbar": {
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": {
+            display: "none",
+        },
+    },
+});
+
+const HIDE_SCROLLBAR_CLASS = "cm-minimap-hide-scrollbar";
+
+const WIDTH_RATIO = 6;
+
+const minimapClass = ViewPlugin.fromClass(
+    class {
+        private dom: HTMLElement | undefined;
+        private inner: HTMLElement | undefined;
+        private canvas: HTMLCanvasElement | undefined;
+
+        public text: TextState;
+        public selection: SelectionState;
+        public diagnostic: DiagnosticState;
+
+        public constructor(private view: EditorView) {
+            this.text = text(view);
+            this.selection = selections(view);
+            this.diagnostic = diagnostics(view);
+
+            if (view.state.facet(showMinimap)) {
+                this.create(view);
+            }
+        }
+
+        private create(view: EditorView) {
+            const config = view.state.facet(showMinimap);
+            if (!config) {
+                throw Error("Expected nonnull");
+            }
+
+            this.inner = crelt("div", { class: "cm-minimap-inner" });
+            this.canvas = crelt("canvas");
+
+            this.dom = config.create(view).dom;
+            this.dom.classList.add("cm-gutters");
+            this.dom.classList.add("cm-minimap-gutter");
+
+            this.inner.appendChild(this.canvas);
+            this.dom.appendChild(this.inner);
+
+            // For now let's keep this same behavior. We might want to change
+            // this in the future and have the extension figure out how to mount.
+            // Or expose some more generic right gutter api and use that
+            this.view.scrollDOM.insertBefore(
+                this.dom,
+                this.view.contentDOM.nextSibling,
+            );
+
+            for (const key in this.view.state.facet(Config).eventHandlers) {
+                const handler =
+                    this.view.state.facet(Config).eventHandlers[key];
+                if (handler) {
+                    this.dom.addEventListener(key, (e) =>
+                        handler(e, this.view),
+                    );
+                }
+            }
+
+            if (config.autohide) {
+                this.dom.classList.add("cm-minimap-autohide");
+            }
+        }
+
+        private remove() {
+            this.view.scrollDOM.classList.remove(HIDE_SCROLLBAR_CLASS);
+
+            if (this.dom) {
+                this.dom.remove();
+            }
+        }
+
+        update(update: ViewUpdate) {
+            const prev = update.startState.facet(showMinimap);
+            const now = update.state.facet(showMinimap);
+
+            if (prev && !now) {
+                this.remove();
+                return;
+            }
+
+            if (!prev && now) {
+                this.create(update.view);
+            }
+
+            if (now) {
+                this.text.update(update);
+                this.selection.update(update);
+                this.diagnostic.update(update);
+                this.render();
+            }
+        }
+
+        getWidth(): number {
+            const maxWidth = this.view.state.facet(Config).width;
+            const editorWidth = this.view.dom.clientWidth;
+
+            // Shrink proportionally rather than letting the minimap take over
+            // a narrow editor.
+            if (editorWidth <= maxWidth * WIDTH_RATIO) {
+                return maxWidth * (editorWidth / (maxWidth * WIDTH_RATIO));
+            }
+
+            return maxWidth;
+        }
+
+        render() {
+            // If we don't have elements to draw to exit early
+            if (!this.dom || !this.canvas || !this.inner) {
+                return;
+            }
+
+            this.updateBoxShadow();
+            this.view.scrollDOM.classList.toggle(
+                HIDE_SCROLLBAR_CLASS,
+                this.view.state.facet(Config).hideScrollbar,
+            );
+
+            const width = this.getWidth();
+            const domHeight = this.view.dom.getBoundingClientRect().height;
+
+            this.dom.style.width = width + "px";
+            this.canvas.style.maxWidth = width + "px";
+            this.inner.style.minHeight = domHeight + "px";
+            this.canvas.style.height = domHeight + "px";
+
+            /**
+             * Assigning to `width`/`height` reallocates the backing buffer and
+             * resets every canvas property, so only do it on an actual size
+             * change. The reset doubles as the clear when it does happen.
+             */
+            const canvasWidth = width * Scale.PixelMultiplier;
+            const canvasHeight = domHeight * Scale.PixelMultiplier;
+            const resized =
+                this.canvas.width !== canvasWidth ||
+                this.canvas.height !== canvasHeight;
+
+            if (resized) {
+                this.canvas.width = canvasWidth;
+                this.canvas.height = canvasHeight;
+            }
+
+            const context = this.canvas.getContext("2d");
+            if (!context) {
+                return;
+            }
+
+            if (!resized) {
+                context.clearRect(0, 0, canvasWidth, canvasHeight);
+            }
+
+            /**
+             * Draw layers leave `globalAlpha` faded behind them. Resizing used
+             * to reset it as a side effect of reallocating the canvas; now that
+             * the resize is conditional, reset it explicitly instead.
+             */
+            context.globalAlpha = 1;
+
+            /* We need to get the correct font dimensions before this to measure characters */
+            const { charWidth, lineHeight } = this.text.measure(context);
+
+            let { startIndex, endIndex, offsetY } = this.canvasStartAndEndIndex(
+                context,
+                lineHeight,
+            );
+
+            const gutters = this.view.state.facet(Config).gutters;
+            const lineCount = this.view.state.field(LinesState).length;
+
+            for (let i = startIndex; i < endIndex; i++) {
+                if (i >= lineCount) break;
+
+                const drawContext = {
+                    offsetX: 0,
+                    offsetY,
+                    context,
+                    lineHeight,
+                    charWidth,
+                };
+
+                if (gutters.length) {
+                    /* Small leading buffer */
+                    drawContext.offsetX += 2;
+
+                    for (const gutter of gutters) {
+                        drawLineGutter(gutter, drawContext, i + 1);
+                        drawContext.offsetX += GUTTER_WIDTH;
+                    }
+
+                    /* Small trailing buffer */
+                    drawContext.offsetX += 2;
+                }
+
+                this.text.drawLine(drawContext, i + 1);
+                this.selection.drawLine(drawContext, i + 1);
+                this.diagnostic.drawLine(drawContext, i + 1);
+
+                offsetY += lineHeight;
+            }
+
+            context.restore();
+        }
+
+        private canvasStartAndEndIndex(
+            context: CanvasRenderingContext2D,
+            lineHeight: number,
+        ) {
+            const { top: rawTop, bottom: rawBottom } =
+                this.view.documentPadding;
+            const pTop = rawTop / Scale.SizeRatio;
+            const pBottom = rawBottom / 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 lineCount = this.view.state.field(LinesState).length;
+            const totalHeight = pTop + pBottom + lineCount * lineHeight;
+
+            const canvasTop = Math.max(
+                0,
+                scrollPercent * (totalHeight - canvasHeight),
+            );
+            const offsetY = Math.max(0, pTop - canvasTop);
+
+            const startIndex = Math.round(
+                Math.max(0, canvasTop - pTop) / lineHeight,
+            );
+            const spaceForLines = Math.round(
+                (canvasHeight - offsetY) / lineHeight,
+            );
+
+            return {
+                startIndex,
+                endIndex: startIndex + spaceForLines,
+                offsetY,
+            };
+        }
+
+        private updateBoxShadow() {
+            if (!this.canvas) {
+                return;
+            }
+
+            const { clientWidth, scrollWidth, scrollLeft } =
+                this.view.scrollDOM;
+
+            if (clientWidth + scrollLeft < scrollWidth) {
+                this.canvas.classList.add("cm-minimap-box-shadow");
+            } else {
+                this.canvas.classList.remove("cm-minimap-box-shadow");
+            }
+        }
+
+        destroy() {
+            this.text.destroy();
+            this.remove();
+        }
+    },
+    {
+        eventHandlers: {
+            scroll() {
+                requestAnimationFrame(() => this.render());
+            },
+        },
+        provide: (plugin) => {
+            return EditorView.scrollMargins.of((view) => {
+                const width = view.plugin(plugin)?.getWidth();
+                if (!width) {
+                    return null;
+                }
+
+                return { right: width };
+            });
+        },
+    },
+);
+
+export interface MinimapConfig extends Omit<Options, "enabled"> {
+    /**
+     * A function that creates the element that contains the minimap
+     */
+    create: (view: EditorView) => { dom: HTMLElement };
+}
+
+/**
+ * Facet used to show a minimap in the right gutter of the editor using the
+ * provided configuration.
+ *
+ * If you return `null`, a minimap will not be shown.
+ */
+const showMinimap = Facet.define<MinimapConfig | null, MinimapConfig | null>({
+    combine: (c) => c.find((o) => o !== null) ?? null,
+    enables: (f) => {
+        return [
+            [
+                Config.compute([f], (s) => s.facet(f)),
+                Theme,
+                LinesState,
+                minimapClass, // TODO, codemirror-ify this one better
+                Overlay,
+            ],
+        ];
+    },
+});
+
+export { showMinimap };

package/src/linebasedstate.ts

@@ -0,0 +1,21 @@
+import { EditorView } from "@codemirror/view";
+
+// TODO: renamed this file because something's weird with codemirror build
+
+export abstract class LineBasedState<TValue> {
+    protected map: Map<number, TValue>;
+    protected view: EditorView;
+
+    public constructor(view: EditorView) {
+        this.map = new Map();
+        this.view = view;
+    }
+
+    public get(lineNumber: number): TValue | undefined {
+        return this.map.get(lineNumber);
+    }
+
+    protected set(lineNumber: number, value: TValue) {
+        this.map.set(lineNumber, value);
+    }
+}

package/src/selections.ts

@@ -0,0 +1,212 @@
+import { LineBasedState } from "./linebasedstate.js";
+import { EditorView, ViewUpdate } from "@codemirror/view";
+import { LinesState, foldsChanged } from "./LinesState.js";
+import { DrawContext } from "./types.js";
+import { Config } from "./Config.js";
+
+type Selection = { from: number; to: number; extends: boolean };
+type DrawInfo = { backgroundColor: string };
+
+export class SelectionState extends LineBasedState<Array<Selection>> {
+    private _drawInfo: DrawInfo | undefined;
+    private _themeClasses: string;
+
+    public constructor(view: EditorView) {
+        super(view);
+
+        this.getDrawInfo();
+        this._themeClasses = view.dom.classList.value;
+    }
+
+    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 selection changed
+        if (update.selectionSet) {
+            return true;
+        }
+
+        // If the theme changed
+        if (this._themeClasses !== this.view.dom.classList.value) {
+            return true;
+        }
+
+        // If the folds changed
+        if (foldsChanged(update.transactions)) {
+            return true;
+        }
+
+        return false;
+    }
+
+    public update(update: ViewUpdate) {
+        if (!this.shouldUpdate(update)) {
+            return;
+        }
+
+        this.map.clear();
+
+        /* If class list has changed, clear and recalculate the selection style */
+        if (this._themeClasses !== this.view.dom.classList.value) {
+            this._drawInfo = undefined;
+            this._themeClasses = this.view.dom.classList.value;
+        }
+
+        const { ranges } = update.state.selection;
+
+        let selectionIndex = 0;
+        for (const [index, line] of update.state.field(LinesState).entries()) {
+            const selections: Array<Selection> = [];
+
+            let offset = 0;
+            for (const span of line) {
+                do {
+                    // We've already processed all selections
+                    if (selectionIndex >= ranges.length) {
+                        continue;
+                    }
+
+                    // The next selection begins after this span
+                    if (span.to < ranges[selectionIndex].from) {
+                        continue;
+                    }
+
+                    // Ignore 0-length selections
+                    if (
+                        ranges[selectionIndex].from ===
+                        ranges[selectionIndex].to
+                    ) {
+                        selectionIndex++;
+                        continue;
+                    }
+
+                    // Build the selection for the current span
+                    const range = ranges[selectionIndex];
+                    const selection = {
+                        from:
+                            offset +
+                            Math.max(span.from, range.from) -
+                            span.from,
+                        to: offset + Math.min(span.to, range.to) - span.from,
+                        extends: range.to > span.to,
+                    };
+
+                    const lastSelection = selections.slice(-1)[0];
+                    if (lastSelection && lastSelection.to === selection.from) {
+                        // The selection in this span may just be a continuation of the
+                        // selection in the previous span
+
+                        // Adjust `to` depending on if we're in a folded span
+                        let { to } = selection;
+                        if (span.folded && selection.extends) {
+                            to = selection.from + 1;
+                        } else if (span.folded && !selection.extends) {
+                            to = lastSelection.to;
+                        }
+
+                        selections[selections.length - 1] = {
+                            ...lastSelection,
+                            to,
+                            extends: selection.extends,
+                        };
+                    } else if (!span.folded) {
+                        // It's a new selection; if we're not in a folded span we
+                        // should push it onto the stack
+                        selections.push(selection);
+                    }
+
+                    // If the selection doesn't end in this span, break out of the loop
+                    if (selection.extends) {
+                        break;
+                    }
+
+                    // Otherwise, move to the next selection
+                    selectionIndex++;
+                } while (
+                    selectionIndex < ranges.length &&
+                    span.to >= ranges[selectionIndex].from
+                );
+
+                offset += span.folded ? 1 : span.to - span.from;
+            }
+
+            // If we don't have any selections on this line, we don't need to store anything
+            if (selections.length === 0) {
+                continue;
+            }
+
+            // Lines are indexed beginning at 1 instead of 0
+            const lineNumber = index + 1;
+            this.map.set(lineNumber, selections);
+        }
+    }
+
+    public drawLine(ctx: DrawContext, lineNumber: number) {
+        const {
+            context,
+            lineHeight,
+            charWidth,
+            offsetX: startOffsetX,
+            offsetY,
+        } = ctx;
+        const selections = this.get(lineNumber);
+        if (!selections) {
+            return;
+        }
+
+        for (const selection of selections) {
+            const offsetX = startOffsetX + selection.from * charWidth;
+            const textWidth = (selection.to - selection.from) * charWidth;
+            const fullWidth = context.canvas.width - offsetX;
+
+            if (selection.extends) {
+                // Draw the full width rectangle in the background
+                context.globalAlpha = 0.65;
+                context.beginPath();
+                context.rect(offsetX, offsetY, fullWidth, lineHeight);
+                context.fillStyle = this.getDrawInfo().backgroundColor;
+                context.fill();
+            }
+
+            // Draw text selection rectangle in the foreground
+            context.globalAlpha = 1;
+            context.beginPath();
+            context.rect(offsetX, offsetY, textWidth, lineHeight);
+            context.fillStyle = this.getDrawInfo().backgroundColor;
+            context.fill();
+        }
+    }
+
+    private getDrawInfo(): DrawInfo {
+        if (this._drawInfo) {
+            return this._drawInfo;
+        }
+
+        // Create a mock selection
+        const mockToken = document.createElement("span");
+        mockToken.setAttribute("class", "cm-selectionBackground");
+        this.view.dom.appendChild(mockToken);
+
+        // Get style information
+        const style = window.getComputedStyle(mockToken);
+        const result = { backgroundColor: style.backgroundColor };
+
+        // Store the result for the next update
+        this._drawInfo = result;
+        this.view.dom.removeChild(mockToken);
+
+        return result;
+    }
+}
+
+export function selections(view: EditorView): SelectionState {
+    return new SelectionState(view);
+}