groove-dev 0.16.1 → 0.16.2

package/node_modules/@xterm/xterm/src/browser/decorations/ColorZoneStore.ts

@@ -0,0 +1,117 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { IInternalDecoration } from 'common/services/Services';
+
+export interface IColorZoneStore {
+  readonly zones: IColorZone[];
+  clear(): void;
+  addDecoration(decoration: IInternalDecoration): void;
+  /**
+   * Sets the amount of padding in lines that will be added between zones, if new lines intersect
+   * the padding they will be merged into the same zone.
+   */
+  setPadding(padding: { [position: string]: number }): void;
+}
+
+export interface IColorZone {
+  /** Color in a format supported by canvas' fillStyle. */
+  color: string;
+  position: 'full' | 'left' | 'center' | 'right' | undefined;
+  startBufferLine: number;
+  endBufferLine: number;
+}
+
+interface IMinimalDecorationForColorZone {
+  marker: Pick<IInternalDecoration['marker'], 'line'>;
+  options: Pick<IInternalDecoration['options'], 'overviewRulerOptions'>;
+}
+
+export class ColorZoneStore implements IColorZoneStore {
+  private _zones: IColorZone[] = [];
+
+  // The zone pool is used to keep zone objects from being freed between clearing the color zone
+  // store and fetching the zones. This helps reduce GC pressure since the color zones are
+  // accumulated on potentially every scroll event.
+  private _zonePool: IColorZone[] = [];
+  private _zonePoolIndex = 0;
+
+  private _linePadding: { [position: string]: number } = {
+    full: 0,
+    left: 0,
+    center: 0,
+    right: 0
+  };
+
+  public get zones(): IColorZone[] {
+    // Trim the zone pool to free unused memory
+    this._zonePool.length = Math.min(this._zonePool.length, this._zones.length);
+    return this._zones;
+  }
+
+  public clear(): void {
+    this._zones.length = 0;
+    this._zonePoolIndex = 0;
+  }
+
+  public addDecoration(decoration: IMinimalDecorationForColorZone): void {
+    if (!decoration.options.overviewRulerOptions) {
+      return;
+    }
+    for (const z of this._zones) {
+      if (z.color === decoration.options.overviewRulerOptions.color &&
+          z.position === decoration.options.overviewRulerOptions.position) {
+        if (this._lineIntersectsZone(z, decoration.marker.line)) {
+          return;
+        }
+        if (this._lineAdjacentToZone(z, decoration.marker.line, decoration.options.overviewRulerOptions.position)) {
+          this._addLineToZone(z, decoration.marker.line);
+          return;
+        }
+      }
+    }
+    // Create using zone pool if possible
+    if (this._zonePoolIndex < this._zonePool.length) {
+      this._zonePool[this._zonePoolIndex].color = decoration.options.overviewRulerOptions.color;
+      this._zonePool[this._zonePoolIndex].position = decoration.options.overviewRulerOptions.position;
+      this._zonePool[this._zonePoolIndex].startBufferLine = decoration.marker.line;
+      this._zonePool[this._zonePoolIndex].endBufferLine = decoration.marker.line;
+      this._zones.push(this._zonePool[this._zonePoolIndex++]);
+      return;
+    }
+    // Create
+    this._zones.push({
+      color: decoration.options.overviewRulerOptions.color,
+      position: decoration.options.overviewRulerOptions.position,
+      startBufferLine: decoration.marker.line,
+      endBufferLine: decoration.marker.line
+    });
+    this._zonePool.push(this._zones[this._zones.length - 1]);
+    this._zonePoolIndex++;
+  }
+
+  public setPadding(padding: { [position: string]: number }): void {
+    this._linePadding = padding;
+  }
+
+  private _lineIntersectsZone(zone: IColorZone, line: number): boolean {
+    return (
+      line >= zone.startBufferLine &&
+      line <= zone.endBufferLine
+    );
+  }
+
+  private _lineAdjacentToZone(zone: IColorZone, line: number, position: IColorZone['position']): boolean {
+    return (
+      (line >= zone.startBufferLine - this._linePadding[position || 'full']) &&
+      (line <= zone.endBufferLine + this._linePadding[position || 'full'])
+    );
+  }
+
+  private _addLineToZone(zone: IColorZone, line: number): void {
+    zone.startBufferLine = Math.min(zone.startBufferLine, line);
+    zone.endBufferLine = Math.max(zone.endBufferLine, line);
+  }
+}

package/node_modules/@xterm/xterm/src/browser/decorations/OverviewRulerRenderer.ts

@@ -0,0 +1,214 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ColorZoneStore, IColorZone, IColorZoneStore } from 'browser/decorations/ColorZoneStore';
+import { ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+
+const enum Constants {
+  OVERVIEW_RULER_BORDER_WIDTH = 1
+}
+
+// Helper objects to avoid excessive calculation and garbage collection during rendering. These are
+// static values for each render and can be accessed using the decoration position as the key.
+const drawHeight = {
+  full: 0,
+  left: 0,
+  center: 0,
+  right: 0
+};
+const drawWidth = {
+  full: 0,
+  left: 0,
+  center: 0,
+  right: 0
+};
+const drawX = {
+  full: 0,
+  left: 0,
+  center: 0,
+  right: 0
+};
+
+export class OverviewRulerRenderer extends Disposable {
+  private readonly _canvas: HTMLCanvasElement;
+  private readonly _ctx: CanvasRenderingContext2D;
+  private readonly _colorZoneStore: IColorZoneStore = new ColorZoneStore();
+  private get _width(): number {
+    return this._optionsService.options.overviewRuler?.width || 0;
+  }
+  private _animationFrame: number | undefined;
+
+  private _shouldUpdateDimensions: boolean | undefined = true;
+  private _shouldUpdateAnchor: boolean | undefined = true;
+  private _lastKnownBufferLength: number = 0;
+
+  private _containerHeight: number | undefined;
+
+  constructor(
+    private readonly _viewportElement: HTMLElement,
+    private readonly _screenElement: HTMLElement,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @IDecorationService private readonly _decorationService: IDecorationService,
+    @IRenderService private readonly _renderService: IRenderService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @IThemeService private readonly _themeService: IThemeService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService
+  ) {
+    super();
+    this._canvas = this._coreBrowserService.mainDocument.createElement('canvas');
+    this._canvas.classList.add('xterm-decoration-overview-ruler');
+    this._refreshCanvasDimensions();
+    this._viewportElement.parentElement?.insertBefore(this._canvas, this._viewportElement);
+    this._register(toDisposable(() => this._canvas?.remove()));
+
+    const ctx = this._canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Ctx cannot be null');
+    } else {
+      this._ctx = ctx;
+    }
+
+    this._register(this._decorationService.onDecorationRegistered(() => this._queueRefresh(undefined, true)));
+    this._register(this._decorationService.onDecorationRemoved(() => this._queueRefresh(undefined, true)));
+
+    this._register(this._renderService.onRenderedViewportChange(() => this._queueRefresh()));
+    this._register(this._bufferService.buffers.onBufferActivate(() => {
+      this._canvas!.style.display = this._bufferService.buffer === this._bufferService.buffers.alt ? 'none' : 'block';
+    }));
+    this._register(this._bufferService.onScroll(() => {
+      if (this._lastKnownBufferLength !== this._bufferService.buffers.normal.lines.length) {
+        this._refreshDrawHeightConstants();
+        this._refreshColorZonePadding();
+      }
+    }));
+
+    // Container height changed
+    this._register(this._renderService.onRender((): void => {
+      if (!this._containerHeight || this._containerHeight !== this._screenElement.clientHeight) {
+        this._queueRefresh(true);
+        this._containerHeight = this._screenElement.clientHeight;
+      }
+    }));
+
+    this._register(this._coreBrowserService.onDprChange(() => this._queueRefresh(true)));
+    this._register(this._optionsService.onSpecificOptionChange('overviewRuler', () => this._queueRefresh(true)));
+    this._register(this._themeService.onChangeColors(() => this._queueRefresh()));
+    this._queueRefresh(true);
+  }
+
+  private _refreshDrawConstants(): void {
+    // width
+    const outerWidth = Math.floor((this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH) / 3);
+    const innerWidth = Math.ceil((this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH) / 3);
+    drawWidth.full = this._canvas.width;
+    drawWidth.left = outerWidth;
+    drawWidth.center = innerWidth;
+    drawWidth.right = outerWidth;
+    // height
+    this._refreshDrawHeightConstants();
+    // x
+    drawX.full = Constants.OVERVIEW_RULER_BORDER_WIDTH;
+    drawX.left = Constants.OVERVIEW_RULER_BORDER_WIDTH;
+    drawX.center = Constants.OVERVIEW_RULER_BORDER_WIDTH + drawWidth.left;
+    drawX.right = Constants.OVERVIEW_RULER_BORDER_WIDTH + drawWidth.left + drawWidth.center;
+  }
+
+  private _refreshDrawHeightConstants(): void {
+    drawHeight.full = Math.round(2 * this._coreBrowserService.dpr);
+    // Calculate actual pixels per line
+    const pixelsPerLine = this._canvas.height / this._bufferService.buffer.lines.length;
+    // Clamp actual pixels within a range
+    const nonFullHeight = Math.round(Math.max(Math.min(pixelsPerLine, 12), 6) * this._coreBrowserService.dpr);
+    drawHeight.left = nonFullHeight;
+    drawHeight.center = nonFullHeight;
+    drawHeight.right = nonFullHeight;
+  }
+
+  private _refreshColorZonePadding(): void {
+    this._colorZoneStore.setPadding({
+      full: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.full),
+      left: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.left),
+      center: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.center),
+      right: Math.floor(this._bufferService.buffers.active.lines.length / (this._canvas.height - 1) * drawHeight.right)
+    });
+    this._lastKnownBufferLength = this._bufferService.buffers.normal.lines.length;
+  }
+
+  private _refreshCanvasDimensions(): void {
+    this._canvas.style.width = `${this._width}px`;
+    this._canvas.width = Math.round(this._width * this._coreBrowserService.dpr);
+    this._canvas.style.height = `${this._screenElement.clientHeight}px`;
+    this._canvas.height = Math.round(this._screenElement.clientHeight * this._coreBrowserService.dpr);
+    this._refreshDrawConstants();
+    this._refreshColorZonePadding();
+  }
+
+  private _refreshDecorations(): void {
+    if (this._shouldUpdateDimensions) {
+      this._refreshCanvasDimensions();
+    }
+    this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
+    this._colorZoneStore.clear();
+    for (const decoration of this._decorationService.decorations) {
+      this._colorZoneStore.addDecoration(decoration);
+    }
+    this._ctx.lineWidth = 1;
+    this._renderRulerOutline();
+    const zones = this._colorZoneStore.zones;
+    for (const zone of zones) {
+      if (zone.position !== 'full') {
+        this._renderColorZone(zone);
+      }
+    }
+    for (const zone of zones) {
+      if (zone.position === 'full') {
+        this._renderColorZone(zone);
+      }
+    }
+    this._shouldUpdateDimensions = false;
+    this._shouldUpdateAnchor = false;
+  }
+
+  private _renderRulerOutline(): void {
+    this._ctx.fillStyle = this._themeService.colors.overviewRulerBorder.css;
+    this._ctx.fillRect(0, 0, Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height);
+    if (this._optionsService.rawOptions.overviewRuler.showTopBorder) {
+      this._ctx.fillRect(Constants.OVERVIEW_RULER_BORDER_WIDTH, 0, this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH, Constants.OVERVIEW_RULER_BORDER_WIDTH);
+    }
+    if (this._optionsService.rawOptions.overviewRuler.showBottomBorder) {
+      this._ctx.fillRect(Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height - Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height);
+    }
+  }
+
+  private _renderColorZone(zone: IColorZone): void {
+    this._ctx.fillStyle = zone.color;
+    this._ctx.fillRect(
+      /* x */ drawX[zone.position || 'full'],
+      /* y */ Math.round(
+        (this._canvas.height - 1) * // -1 to ensure at least 2px are allowed for decoration on last line
+        (zone.startBufferLine / this._bufferService.buffers.active.lines.length) - drawHeight[zone.position || 'full'] / 2
+      ),
+      /* w */ drawWidth[zone.position || 'full'],
+      /* h */ Math.round(
+        (this._canvas.height - 1) * // -1 to ensure at least 2px are allowed for decoration on last line
+        ((zone.endBufferLine - zone.startBufferLine) / this._bufferService.buffers.active.lines.length) + drawHeight[zone.position || 'full']
+      )
+    );
+  }
+
+  private _queueRefresh(updateCanvasDimensions?: boolean, updateAnchor?: boolean): void {
+    this._shouldUpdateDimensions = updateCanvasDimensions || this._shouldUpdateDimensions;
+    this._shouldUpdateAnchor = updateAnchor || this._shouldUpdateAnchor;
+    if (this._animationFrame !== undefined) {
+      return;
+    }
+    this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
+      this._refreshDecorations();
+      this._animationFrame = undefined;
+    });
+  }
+}

package/node_modules/@xterm/xterm/src/browser/input/CompositionHelper.ts

@@ -0,0 +1,248 @@
+/**
+ * Copyright (c) 2016 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IRenderService } from 'browser/services/Services';
+import { IBufferService, ICoreService, IOptionsService } from 'common/services/Services';
+import { C0 } from 'common/data/EscapeSequences';
+
+interface IPosition {
+  start: number;
+  end: number;
+}
+
+/**
+ * Encapsulates the logic for handling compositionstart, compositionupdate and compositionend
+ * events, displaying the in-progress composition to the UI and forwarding the final composition
+ * to the handler.
+ */
+export class CompositionHelper {
+  /**
+   * Whether input composition is currently happening, eg. via a mobile keyboard, speech input or
+   * IME. This variable determines whether the compositionText should be displayed on the UI.
+   */
+  private _isComposing: boolean;
+  public get isComposing(): boolean { return this._isComposing; }
+
+  /**
+   * The position within the input textarea's value of the current composition.
+   */
+  private _compositionPosition: IPosition;
+
+  /**
+   * Whether a composition is in the process of being sent, setting this to false will cancel any
+   * in-progress composition.
+   */
+  private _isSendingComposition: boolean;
+
+  /**
+   * Data already sent due to keydown event.
+   */
+  private _dataAlreadySent: string;
+
+  constructor(
+    private readonly _textarea: HTMLTextAreaElement,
+    private readonly _compositionView: HTMLElement,
+    @IBufferService private readonly _bufferService: IBufferService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @ICoreService private readonly _coreService: ICoreService,
+    @IRenderService private readonly _renderService: IRenderService
+  ) {
+    this._isComposing = false;
+    this._isSendingComposition = false;
+    this._compositionPosition = { start: 0, end: 0 };
+    this._dataAlreadySent = '';
+  }
+
+  /**
+   * Handles the compositionstart event, activating the composition view.
+   */
+  public compositionstart(): void {
+    this._isComposing = true;
+    this._compositionPosition.start = this._textarea.value.length;
+    this._compositionView.textContent = '';
+    this._dataAlreadySent = '';
+    this._compositionView.classList.add('active');
+  }
+
+  /**
+   * Handles the compositionupdate event, updating the composition view.
+   * @param ev The event.
+   */
+  public compositionupdate(ev: Pick<CompositionEvent, 'data'>): void {
+    this._compositionView.textContent = ev.data;
+    this.updateCompositionElements();
+    setTimeout(() => {
+      this._compositionPosition.end = this._textarea.value.length;
+    }, 0);
+  }
+
+  /**
+   * Handles the compositionend event, hiding the composition view and sending the composition to
+   * the handler.
+   */
+  public compositionend(): void {
+    this._finalizeComposition(true);
+  }
+
+  /**
+   * Handles the keydown event, routing any necessary events to the CompositionHelper functions.
+   * @param ev The keydown event.
+   * @returns Whether the Terminal should continue processing the keydown event.
+   */
+  public keydown(ev: KeyboardEvent): boolean {
+    if (this._isComposing || this._isSendingComposition) {
+      if (ev.keyCode === 20 || ev.keyCode === 229) {
+        // 20 is CapsLock, 229 is Enter
+        // Continue composing if the keyCode is the "composition character"
+        return false;
+      }
+      if (ev.keyCode === 16 || ev.keyCode === 17 || ev.keyCode === 18) {
+        // Continue composing if the keyCode is a modifier key
+        return false;
+      }
+      // Finish composition immediately. This is mainly here for the case where enter is
+      // pressed and the handler needs to be triggered before the command is executed.
+      this._finalizeComposition(false);
+    }
+
+    if (ev.keyCode === 229) {
+      // If the "composition character" is used but gets to this point it means a non-composition
+      // character (eg. numbers and punctuation) was pressed when the IME was active.
+      this._handleAnyTextareaChanges();
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Finalizes the composition, resuming regular input actions. This is called when a composition
+   * is ending.
+   * @param waitForPropagation Whether to wait for events to propagate before sending
+   *   the input. This should be false if a non-composition keystroke is entered before the
+   *   compositionend event is triggered, such as enter, so that the composition is sent before
+   *   the command is executed.
+   */
+  private _finalizeComposition(waitForPropagation: boolean): void {
+    this._compositionView.classList.remove('active');
+    this._isComposing = false;
+
+    if (!waitForPropagation) {
+      // Cancel any delayed composition send requests and send the input immediately.
+      this._isSendingComposition = false;
+      const input = this._textarea.value.substring(this._compositionPosition.start, this._compositionPosition.end);
+      this._coreService.triggerDataEvent(input, true);
+    } else {
+      // Make a deep copy of the composition position here as a new compositionstart event may
+      // fire before the setTimeout executes.
+      const currentCompositionPosition = {
+        start: this._compositionPosition.start,
+        end: this._compositionPosition.end
+      };
+
+      // Since composition* events happen before the changes take place in the textarea on most
+      // browsers, use a setTimeout with 0ms time to allow the native compositionend event to
+      // complete. This ensures the correct character is retrieved.
+      // This solution was used because:
+      // - The compositionend event's data property is unreliable, at least on Chromium
+      // - The last compositionupdate event's data property does not always accurately describe
+      //   the character, a counter example being Korean where an ending consonsant can move to
+      //   the following character if the following input is a vowel.
+      this._isSendingComposition = true;
+      setTimeout(() => {
+        // Ensure that the input has not already been sent
+        if (this._isSendingComposition) {
+          this._isSendingComposition = false;
+          let input;
+          // Add length of data already sent due to keydown event,
+          // otherwise input characters can be duplicated. (Issue #3191)
+          currentCompositionPosition.start += this._dataAlreadySent.length;
+          if (this._isComposing) {
+            // Use the start position of the new composition to get the string
+            // if a new composition has started.
+            input = this._textarea.value.substring(currentCompositionPosition.start, this._compositionPosition.start);
+          } else {
+            // Don't use the end position here in order to pick up any characters after the
+            // composition has finished, for example when typing a non-composition character
+            // (eg. 2) after a composition character.
+            input = this._textarea.value.substring(currentCompositionPosition.start);
+          }
+          if (input.length > 0) {
+            this._coreService.triggerDataEvent(input, true);
+          }
+        }
+      }, 0);
+    }
+  }
+
+  /**
+   * Apply any changes made to the textarea after the current event chain is allowed to complete.
+   * This should be called when not currently composing but a keydown event with the "composition
+   * character" (229) is triggered, in order to allow non-composition text to be entered when an
+   * IME is active.
+   */
+  private _handleAnyTextareaChanges(): void {
+    const oldValue = this._textarea.value;
+    setTimeout(() => {
+      // Ignore if a composition has started since the timeout
+      if (!this._isComposing) {
+        const newValue = this._textarea.value;
+
+        const diff = newValue.replace(oldValue, '');
+
+        this._dataAlreadySent = diff;
+
+        if (newValue.length > oldValue.length) {
+          this._coreService.triggerDataEvent(diff, true);
+        } else if (newValue.length < oldValue.length) {
+          this._coreService.triggerDataEvent(`${C0.DEL}`, true);
+        } else if ((newValue.length === oldValue.length) && (newValue !== oldValue)) {
+          this._coreService.triggerDataEvent(newValue, true);
+        }
+
+      }
+    }, 0);
+  }
+
+  /**
+   * Positions the composition view on top of the cursor and the textarea just below it (so the
+   * IME helper dialog is positioned correctly).
+   * @param dontRecurse Whether to use setTimeout to recursively trigger another update, this is
+   *   necessary as the IME events across browsers are not consistently triggered.
+   */
+  public updateCompositionElements(dontRecurse?: boolean): void {
+    if (!this._isComposing) {
+      return;
+    }
+
+    if (this._bufferService.buffer.isCursorInViewport) {
+      const cursorX = Math.min(this._bufferService.buffer.x, this._bufferService.cols - 1);
+
+      const cellHeight = this._renderService.dimensions.css.cell.height;
+      const cursorTop = this._bufferService.buffer.y * this._renderService.dimensions.css.cell.height;
+      const cursorLeft = cursorX * this._renderService.dimensions.css.cell.width;
+
+      this._compositionView.style.left = cursorLeft + 'px';
+      this._compositionView.style.top = cursorTop + 'px';
+      this._compositionView.style.height = cellHeight + 'px';
+      this._compositionView.style.lineHeight = cellHeight + 'px';
+      this._compositionView.style.fontFamily = this._optionsService.rawOptions.fontFamily;
+      this._compositionView.style.fontSize = this._optionsService.rawOptions.fontSize + 'px';
+      // Sync the textarea to the exact position of the composition view so the IME knows where the
+      // text is.
+      const compositionViewBounds = this._compositionView.getBoundingClientRect();
+      this._textarea.style.left = cursorLeft + 'px';
+      this._textarea.style.top = cursorTop + 'px';
+      // Ensure the text area is at least 1x1, otherwise certain IMEs may break
+      this._textarea.style.width = Math.max(compositionViewBounds.width, 1) + 'px';
+      this._textarea.style.height = Math.max(compositionViewBounds.height, 1) + 'px';
+      this._textarea.style.lineHeight = compositionViewBounds.height + 'px';
+    }
+
+    if (!dontRecurse) {
+      setTimeout(() => this.updateCompositionElements(true), 0);
+    }
+  }
+}

package/node_modules/@xterm/xterm/src/browser/input/Mouse.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export function getCoordsRelativeToElement(window: Pick<Window, 'getComputedStyle'>, event: {clientX: number, clientY: number}, element: HTMLElement): [number, number] {
+  const rect = element.getBoundingClientRect();
+  const elementStyle = window.getComputedStyle(element);
+  const leftPadding = parseInt(elementStyle.getPropertyValue('padding-left'));
+  const topPadding = parseInt(elementStyle.getPropertyValue('padding-top'));
+  return [
+    event.clientX - rect.left - leftPadding,
+    event.clientY - rect.top - topPadding
+  ];
+}
+
+/**
+ * Gets coordinates within the terminal for a particular mouse event. The result
+ * is returned as an array in the form [x, y] instead of an object as it's a
+ * little faster and this function is used in some low level code.
+ * @param window The window object the element belongs to.
+ * @param event The mouse event.
+ * @param element The terminal's container element.
+ * @param colCount The number of columns in the terminal.
+ * @param rowCount The number of rows n the terminal.
+ * @param hasValidCharSize Whether there is a valid character size available.
+ * @param cssCellWidth The cell width device pixel render dimensions.
+ * @param cssCellHeight The cell height device pixel render dimensions.
+ * @param isSelection Whether the request is for the selection or not. This will
+ * apply an offset to the x value such that the left half of the cell will
+ * select that cell and the right half will select the next cell.
+ */
+export function getCoords(window: Pick<Window, 'getComputedStyle'>, event: Pick<MouseEvent, 'clientX' | 'clientY'>, element: HTMLElement, colCount: number, rowCount: number, hasValidCharSize: boolean, cssCellWidth: number, cssCellHeight: number, isSelection?: boolean): [number, number] | undefined {
+  // Coordinates cannot be measured if there are no valid
+  if (!hasValidCharSize) {
+    return undefined;
+  }
+
+  const coords = getCoordsRelativeToElement(window, event, element);
+  if (!coords) {
+    return undefined;
+  }
+
+  coords[0] = Math.ceil((coords[0] + (isSelection ? cssCellWidth / 2 : 0)) / cssCellWidth);
+  coords[1] = Math.ceil(coords[1] / cssCellHeight);
+
+  // Ensure coordinates are within the terminal viewport. Note that selections
+  // need an addition point of precision to cover the end point (as characters
+  // cover half of one char and half of the next).
+  coords[0] = Math.min(Math.max(coords[0], 1), colCount + (isSelection ? 1 : 0));
+  coords[1] = Math.min(Math.max(coords[1], 1), rowCount);
+
+  return coords;
+}