@batchfy/codemirror-minimap 0.1.0

package/dist/index.js

@@ -0,0 +1,1163 @@
+import { Facet, combineConfig, StateField } from '@codemirror/state';
+import { EditorView, ViewPlugin } from '@codemirror/view';
+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';
+
+const Scale = {
+  // Multiply the number of canvas pixels
+  PixelMultiplier: 2,
+  // Downscale the editor contents by this ratio
+  SizeRatio: 4,
+  // Maximum width of the minimap in pixels
+  MaxWidth: 120
+};
+const Config = Facet.define({
+  combine: (c) => {
+    const configs = [];
+    for (const config of c) {
+      if (!config) {
+        continue;
+      }
+      const { create, gutters, ...rest } = config;
+      configs.push({
+        ...rest,
+        enabled: true,
+        gutters: gutters ? gutters.filter((v) => Object.keys(v).length > 0) : void 0
+      });
+    }
+    return combineConfig(configs, {
+      enabled: configs.length > 0,
+      displayText: "characters",
+      eventHandlers: {},
+      showOverlay: "always",
+      gutters: [],
+      autohide: false,
+      width: Scale.MaxWidth,
+      hideScrollbar: true
+    });
+  }
+});
+
+const Theme$1 = 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 {
+    constructor(view) {
+      this.view = view;
+      if (view.state.facet(Config).enabled) {
+        this.create(view);
+      }
+    }
+    view;
+    container;
+    dom;
+    _isDragging = false;
+    _dragStartY;
+    // 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.
+    boundMouseDown = this.onMouseDown.bind(this);
+    boundMouseUp = this.onMouseUp.bind(this);
+    boundMouseMove = this.onMouseMove.bind(this);
+    create(view) {
+      this.container = crelt("div", {
+        class: "cm-minimap-overlay-container"
+      });
+      this.dom = crelt("div", { class: "cm-minimap-overlay" });
+      this.container.appendChild(this.dom);
+      this.container.addEventListener("mousedown", this.boundMouseDown);
+      window.addEventListener("mouseup", this.boundMouseUp);
+      window.addEventListener("mousemove", this.boundMouseMove);
+      const inner = view.dom.querySelector(".cm-minimap-inner");
+      if (inner) {
+        inner.appendChild(this.container);
+      }
+      this.computeShowOverlay();
+      this.computeHeight();
+      this.computeTop();
+    }
+    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) {
+      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();
+        }
+      }
+    }
+    computeHeight() {
+      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";
+      }
+    }
+    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");
+      }
+    }
+    onMouseDown(event) {
+      if (!this.container) {
+        return;
+      }
+      if (event.button === 2) {
+        return;
+      }
+      const { clientY, target } = event;
+      if (target === this.dom) {
+        this._dragStartY = event.clientY;
+        this._isDragging = true;
+        this.container.classList.add("cm-minimap-overlay-active");
+        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;
+    }
+    onMouseUp(_event) {
+      if (this._isDragging && this.container) {
+        this._dragStartY = void 0;
+        this._isDragging = false;
+        this.container.classList.remove("cm-minimap-overlay-active");
+      }
+    }
+    onMouseMove(event) {
+      if (!this._isDragging || !this.dom) {
+        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;
+      }
+      if (atBottom && movingDown || atBottom && event.clientY > canvasAbsBot) {
+        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";
+    }
+    destroy() {
+      this.remove();
+    }
+  },
+  {
+    eventHandlers: {
+      scroll() {
+        requestAnimationFrame(() => this.computeTop());
+      }
+    }
+  }
+);
+const Overlay = [Theme$1, OverlayView];
+
+class LineBasedState {
+  map;
+  view;
+  constructor(view) {
+    this.map = /* @__PURE__ */ new Map();
+    this.view = view;
+  }
+  get(lineNumber) {
+    return this.map.get(lineNumber);
+  }
+  set(lineNumber, value) {
+    this.map.set(lineNumber, value);
+  }
+}
+
+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) {
+    super(view);
+  }
+  shouldUpdate(update) {
+    if (!update.state.facet(Config).enabled) {
+      return false;
+    }
+    if (update.docChanged) {
+      return true;
+    }
+    for (const tr of update.transactions) {
+      for (const ef of tr.effects) {
+        if (ef.is(setDiagnosticsEffect)) {
+          return true;
+        }
+      }
+    }
+    if (foldsChanged(update.transactions)) {
+      return true;
+    }
+    if (this.count === void 0) {
+      return true;
+    }
+    return false;
+  }
+  update(update) {
+    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) => {
+      const lineStart = this.findLine(from, lines);
+      const lineEnd = this.findLine(to, lines);
+      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);
+      }
+    });
+  }
+  drawLine(ctx, lineNumber) {
+    const { context, lineHeight, offsetX, offsetY } = ctx;
+    const severity = this.get(lineNumber);
+    if (!severity) {
+      return;
+    }
+    context.globalAlpha = 0.65;
+    context.beginPath();
+    context.rect(
+      offsetX,
+      offsetY,
+      context.canvas.width - offsetX,
+      lineHeight
+    );
+    context.fillStyle = this.color(severity);
+    context.fill();
+    context.globalAlpha = 1;
+  }
+  /**
+   * Given a position and a set of line ranges, return
+   * the line number the position falls within
+   */
+  findLine(pos, 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;
+    });
+    return index + 1;
+  }
+  /**
+   * Colors from @codemirror/lint
+   * https://github.com/codemirror/lint/blob/e0671b43c02e72766ad1afe1579b7032fdcdb6c1/src/lint.ts#L597
+   */
+  color(severity) {
+    return severity === "error" ? "#d11" : severity === "warning" ? "orange" : "#999";
+  }
+  /** Sorts severity from most to least severe */
+  sort(a, b) {
+    return this.score(b) - this.score(a);
+  }
+  /** Assigns a score to severity, with most severe being the highest */
+  score(s) {
+    switch (s) {
+      case "error": {
+        return 3;
+      }
+      case "warning": {
+        return 2;
+      }
+      default: {
+        return 1;
+      }
+    }
+  }
+}
+function diagnostics(view) {
+  return new DiagnosticState(view);
+}
+
+class SelectionState extends LineBasedState {
+  _drawInfo;
+  _themeClasses;
+  constructor(view) {
+    super(view);
+    this.getDrawInfo();
+    this._themeClasses = view.dom.classList.value;
+  }
+  shouldUpdate(update) {
+    if (!update.state.facet(Config).enabled) {
+      return false;
+    }
+    if (update.docChanged) {
+      return true;
+    }
+    if (update.selectionSet) {
+      return true;
+    }
+    if (this._themeClasses !== this.view.dom.classList.value) {
+      return true;
+    }
+    if (foldsChanged(update.transactions)) {
+      return true;
+    }
+    return false;
+  }
+  update(update) {
+    if (!this.shouldUpdate(update)) {
+      return;
+    }
+    this.map.clear();
+    if (this._themeClasses !== this.view.dom.classList.value) {
+      this._drawInfo = void 0;
+      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 selections2 = [];
+      let offset = 0;
+      for (const span of line) {
+        do {
+          if (selectionIndex >= ranges.length) {
+            continue;
+          }
+          if (span.to < ranges[selectionIndex].from) {
+            continue;
+          }
+          if (ranges[selectionIndex].from === ranges[selectionIndex].to) {
+            selectionIndex++;
+            continue;
+          }
+          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 = selections2.slice(-1)[0];
+          if (lastSelection && lastSelection.to === selection.from) {
+            let { to } = selection;
+            if (span.folded && selection.extends) {
+              to = selection.from + 1;
+            } else if (span.folded && !selection.extends) {
+              to = lastSelection.to;
+            }
+            selections2[selections2.length - 1] = {
+              ...lastSelection,
+              to,
+              extends: selection.extends
+            };
+          } else if (!span.folded) {
+            selections2.push(selection);
+          }
+          if (selection.extends) {
+            break;
+          }
+          selectionIndex++;
+        } while (selectionIndex < ranges.length && span.to >= ranges[selectionIndex].from);
+        offset += span.folded ? 1 : span.to - span.from;
+      }
+      if (selections2.length === 0) {
+        continue;
+      }
+      const lineNumber = index + 1;
+      this.map.set(lineNumber, selections2);
+    }
+  }
+  drawLine(ctx, lineNumber) {
+    const {
+      context,
+      lineHeight,
+      charWidth,
+      offsetX: startOffsetX,
+      offsetY
+    } = ctx;
+    const selections2 = this.get(lineNumber);
+    if (!selections2) {
+      return;
+    }
+    for (const selection of selections2) {
+      const offsetX = startOffsetX + selection.from * charWidth;
+      const textWidth = (selection.to - selection.from) * charWidth;
+      const fullWidth = context.canvas.width - offsetX;
+      if (selection.extends) {
+        context.globalAlpha = 0.65;
+        context.beginPath();
+        context.rect(offsetX, offsetY, fullWidth, lineHeight);
+        context.fillStyle = this.getDrawInfo().backgroundColor;
+        context.fill();
+      }
+      context.globalAlpha = 1;
+      context.beginPath();
+      context.rect(offsetX, offsetY, textWidth, lineHeight);
+      context.fillStyle = this.getDrawInfo().backgroundColor;
+      context.fill();
+    }
+  }
+  getDrawInfo() {
+    if (this._drawInfo) {
+      return this._drawInfo;
+    }
+    const mockToken = document.createElement("span");
+    mockToken.setAttribute("class", "cm-selectionBackground");
+    this.view.dom.appendChild(mockToken);
+    const style = window.getComputedStyle(mockToken);
+    const result = { backgroundColor: style.backgroundColor };
+    this._drawInfo = result;
+    this.view.dom.removeChild(mockToken);
+    return result;
+  }
+}
+function selections(view) {
+  return new SelectionState(view);
+}
+
+const NON_WHITESPACE = /\S+/g;
+class TextState extends LineBasedState {
+  _previousTree;
+  _displayText;
+  _fontInfoMap = /* @__PURE__ */ new Map();
+  _themeClasses;
+  _highlightingCallbackId;
+  _charWidthCache;
+  /**
+   * Font metrics are derived from `getComputedStyle`, which is only correct
+   * once the fonts they describe have actually loaded. A web font that
+   * resolves after the first render would otherwise leave every cached
+   * measurement stale for the lifetime of the view.
+   */
+  onFontsLoaded = () => {
+    this._fontInfoMap.clear();
+    this._charWidthCache = void 0;
+  };
+  constructor(view) {
+    super(view);
+    this._themeClasses = new Set(view.dom.classList.values());
+    document.fonts?.addEventListener("loadingdone", this.onFontsLoaded);
+    if (view.state.facet(Config).enabled) {
+      this.updateImpl(view.state);
+    }
+  }
+  destroy() {
+    document.fonts?.removeEventListener("loadingdone", this.onFontsLoaded);
+  }
+  shouldUpdate(update, themeChanged) {
+    if (update.docChanged) {
+      return true;
+    }
+    if (update.state.facet(Config) !== update.startState.facet(Config)) {
+      return true;
+    }
+    if (themeChanged) {
+      return true;
+    }
+    if (foldsChanged(update.transactions)) {
+      return true;
+    }
+    return false;
+  }
+  update(update) {
+    const themeChanged = this.themeChanged();
+    if (!this.shouldUpdate(update, themeChanged)) {
+      return;
+    }
+    if (this._highlightingCallbackId) {
+      if (typeof window.requestIdleCallback !== "undefined") {
+        cancelIdleCallback(this._highlightingCallbackId);
+      } else {
+        clearTimeout(this._highlightingCallbackId);
+      }
+    }
+    this.updateImpl(update.state, update.changes, themeChanged);
+  }
+  updateImpl(state, changes, themeChanged = true) {
+    this.map.clear();
+    this._displayText = state.facet(Config).displayText;
+    if (themeChanged) {
+      this._fontInfoMap.clear();
+      this._charWidthCache = void 0;
+    }
+    let treeFragments = void 0;
+    if (this._previousTree && changes) {
+      const previousFragments = TreeFragment.addTree(this._previousTree);
+      const changedRanges = [];
+      changes.iterChangedRanges(
+        (fromA, toA, fromB, toB) => changedRanges.push({ fromA, toA, fromB, toB })
+      );
+      treeFragments = TreeFragment.applyChanges(
+        previousFragments,
+        changedRanges
+      );
+    }
+    const docToString = state.doc.toString();
+    const parser = state.facet(language)?.parser;
+    const tree = parser ? parser.parse(docToString, treeFragments) : void 0;
+    this._previousTree = tree;
+    const highlighter = {
+      style: (tags) => highlightingFor(state, tags)
+    };
+    let highlights = [];
+    if (tree) {
+      const vpLineTop = state.doc.lineAt(this.view.viewport.from).number;
+      const vpLineBottom = state.doc.lineAt(this.view.viewport.to).number;
+      const vpLineCount = vpLineBottom - vpLineTop;
+      const vpScroll = vpLineTop / (state.doc.lines - vpLineCount);
+      const { SizeRatio, PixelMultiplier } = Scale;
+      const mmLineCount = vpLineCount * SizeRatio * PixelMultiplier;
+      const mmLineRatio = vpScroll * mmLineCount;
+      const mmLineTop = Math.max(1, Math.floor(vpLineTop - mmLineRatio));
+      const mmLineBottom = Math.min(
+        vpLineBottom + Math.floor(mmLineCount - mmLineRatio),
+        state.doc.lines
+      );
+      highlightTree(
+        tree,
+        highlighter,
+        (from, to, tags) => {
+          highlights.push({ from, to, tags });
+        },
+        state.doc.line(mmLineTop).from,
+        state.doc.line(mmLineBottom).to
+      );
+    }
+    this.updateMapImpl(state, highlights, docToString);
+    highlights = [];
+    const highlightingCallback = () => {
+      if (tree) {
+        highlightTree(tree, highlighter, (from, to, tags) => {
+          highlights.push({ from, to, tags });
+        });
+        this.updateMapImpl(state, highlights, docToString);
+        this._highlightingCallbackId = void 0;
+      }
+    };
+    this._highlightingCallbackId = typeof window.requestIdleCallback !== "undefined" ? requestIdleCallback(highlightingCallback) : setTimeout(highlightingCallback);
+  }
+  updateMapImpl(state, highlights, docToString) {
+    this.map.clear();
+    const highlightsIterator = highlights.values();
+    let highlightPtr = highlightsIterator.next();
+    for (const [index, line] of state.field(LinesState).entries()) {
+      const spans = [];
+      for (const span of line) {
+        if (span.from === span.to) {
+          continue;
+        }
+        if (span.folded) {
+          spans.push({ text: "\u2026", tags: "" });
+          continue;
+        }
+        let position = span.from;
+        while (!highlightPtr.done && highlightPtr.value.from < span.to) {
+          const { from, to, tags } = highlightPtr.value;
+          if (to < position) {
+            highlightPtr = highlightsIterator.next();
+            continue;
+          }
+          if (from > position) {
+            spans.push({
+              text: docToString.slice(position, from),
+              tags: ""
+            });
+          }
+          const start = Math.max(from, span.from);
+          const end = Math.min(to, span.to);
+          spans.push({ text: docToString.slice(start, end), tags });
+          position = end;
+          if (to > end) {
+            break;
+          }
+          highlightPtr = highlightsIterator.next();
+        }
+        if (position !== span.to) {
+          spans.push({
+            text: docToString.slice(position, span.to),
+            tags: ""
+          });
+        }
+      }
+      const lineNumber = index + 1;
+      this.map.set(lineNumber, spans);
+    }
+  }
+  measure(context) {
+    const { color, font, lineHeight } = this.getFontInfo("");
+    context.textBaseline = "ideographic";
+    context.fillStyle = color;
+    context.font = font;
+    if (this._charWidthCache?.font !== font) {
+      this._charWidthCache = {
+        font,
+        charWidth: context.measureText("_").width
+      };
+    }
+    return { charWidth: this._charWidthCache.charWidth, lineHeight };
+  }
+  drawLine(ctx, lineNumber) {
+    const line = this.get(lineNumber);
+    if (!line) {
+      return;
+    }
+    let { context, charWidth, lineHeight, offsetX, offsetY } = ctx;
+    let prevInfo;
+    context.textBaseline = "ideographic";
+    for (const span of line) {
+      const info = this.getFontInfo(span.tags);
+      if (!prevInfo || prevInfo.color !== info.color) {
+        context.fillStyle = info.color;
+      }
+      if (!prevInfo || prevInfo.font !== info.font) {
+        context.font = info.font;
+      }
+      prevInfo = info;
+      lineHeight = Math.max(lineHeight, info.lineHeight);
+      switch (this._displayText) {
+        case "characters": {
+          context.fillText(span.text, offsetX, offsetY + lineHeight);
+          offsetX += span.text.length * charWidth;
+          break;
+        }
+        case "blocks": {
+          NON_WHITESPACE.lastIndex = 0;
+          let start;
+          while ((start = NON_WHITESPACE.exec(span.text)) !== null) {
+            const startX = offsetX + start.index * charWidth;
+            let width = (NON_WHITESPACE.lastIndex - start.index) * charWidth;
+            if (startX > context.canvas.width) {
+              break;
+            }
+            if (startX + width > context.canvas.width) {
+              width = context.canvas.width - startX;
+            }
+            const yBuffer = 2 / Scale.SizeRatio;
+            const height = lineHeight - yBuffer;
+            context.fillStyle = info.color;
+            context.globalAlpha = 0.65;
+            context.beginPath();
+            context.rect(startX, offsetY, width, height);
+            context.fill();
+          }
+          context.globalAlpha = 1;
+          offsetX += span.text.length * charWidth;
+          break;
+        }
+      }
+    }
+  }
+  getFontInfo(tags) {
+    const cached = this._fontInfoMap.get(tags);
+    if (cached) {
+      return cached;
+    }
+    const mockToken = crelt("span", { class: tags });
+    const mockLine = crelt(
+      "div",
+      { class: "cm-line", style: "display: none" },
+      mockToken
+    );
+    this.view.contentDOM.appendChild(mockLine);
+    const style = window.getComputedStyle(mockToken);
+    const lineHeight = parseFloat(style.lineHeight) / Scale.SizeRatio;
+    const result = {
+      color: style.color,
+      font: `${style.fontStyle} ${style.fontWeight} ${lineHeight}px ${style.fontFamily}`,
+      lineHeight
+    };
+    this._fontInfoMap.set(tags, result);
+    this.view.contentDOM.removeChild(mockLine);
+    return result;
+  }
+  themeChanged() {
+    const previous = this._themeClasses;
+    const now = new Set(this.view.dom.classList.values());
+    this._themeClasses = now;
+    if (!previous) {
+      return true;
+    }
+    previous.delete("cm-focused");
+    now.delete("cm-focused");
+    if (previous.size !== now.size) {
+      return true;
+    }
+    let containsAll = true;
+    previous.forEach((theme) => {
+      if (!now.has(theme)) {
+        containsAll = false;
+      }
+    });
+    return !containsAll;
+  }
+}
+function text(view) {
+  return new TextState(view);
+}
+
+const GUTTER_WIDTH = 4;
+function drawLineGutter(gutter, ctx, lineNumber) {
+  const color = gutter[lineNumber];
+  if (!color) {
+    return;
+  }
+  ctx.context.fillStyle = color;
+  ctx.context.globalAlpha = 1;
+  ctx.context.beginPath();
+  ctx.context.rect(ctx.offsetX, ctx.offsetY, GUTTER_WIDTH, ctx.lineHeight);
+  ctx.context.fill();
+}
+
+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,
+    transition: "opacity 0.3s"
+  },
+  "& .cm-minimap-autohide:hover": {
+    opacity: 1
+  },
+  "& .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 {
+    constructor(view) {
+      this.view = view;
+      this.text = text(view);
+      this.selection = selections(view);
+      this.diagnostic = diagnostics(view);
+      if (view.state.facet(showMinimap)) {
+        this.create(view);
+      }
+    }
+    view;
+    dom;
+    inner;
+    canvas;
+    text;
+    selection;
+    diagnostic;
+    create(view) {
+      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);
+      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");
+      }
+    }
+    remove() {
+      this.view.scrollDOM.classList.remove(HIDE_SCROLLBAR_CLASS);
+      if (this.dom) {
+        this.dom.remove();
+      }
+    }
+    update(update) {
+      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() {
+      const maxWidth = this.view.state.facet(Config).width;
+      const editorWidth = this.view.dom.clientWidth;
+      if (editorWidth <= maxWidth * WIDTH_RATIO) {
+        return maxWidth * (editorWidth / (maxWidth * WIDTH_RATIO));
+      }
+      return maxWidth;
+    }
+    render() {
+      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";
+      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);
+      }
+      context.globalAlpha = 1;
+      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) {
+          drawContext.offsetX += 2;
+          for (const gutter of gutters) {
+            drawLineGutter(gutter, drawContext, i + 1);
+            drawContext.offsetX += GUTTER_WIDTH;
+          }
+          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();
+    }
+    canvasStartAndEndIndex(context, lineHeight) {
+      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
+      };
+    }
+    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 };
+      });
+    }
+  }
+);
+const showMinimap = Facet.define({
+  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 };
+//# sourceMappingURL=index.js.map