src/utils/Mouse.ts

   1 /**
   2  * @license MIT
   3  */
   4
   5 import { CharMeasure } from './CharMeasure';
   6
   7 export function getCoordsRelativeToElement(event: MouseEvent, element: HTMLElement): [number, number] {
   8   // Ignore browsers that don't support MouseEvent.pageX
   9   if (event.pageX == null) {
  10     return null;
  11   }
  12
  13   let x = event.pageX;
  14   let y = event.pageY;
  15
  16   // Converts the coordinates from being relative to the document to being
  17   // relative to the terminal.
  18   while (element && element !== self.document.documentElement) {
  19     x -= element.offsetLeft;
  20     y -= element.offsetTop;
  21     element = 'offsetParent' in element ? <HTMLElement>element.offsetParent : <HTMLElement>element.parentElement;
  22   }
  23   return [x, y];
  24 }
  25
  26 /**
  27  * Gets coordinates within the terminal for a particular mouse event. The result
  28  * is returned as an array in the form [x, y] instead of an object as it's a
  29  * little faster and this function is used in some low level code.
  30  * @param event The mouse event.
  31  * @param rowContainer The terminal's row container.
  32  * @param charMeasure The char measure object used to determine character sizes.
  33  * @param colCount The number of columns in the terminal.
  34  * @param rowCount The number of rows n the terminal.
  35  * @param isSelection Whether the request is for the selection or not. This will
  36  * apply an offset to the x value such that the left half of the cell will
  37  * select that cell and the right half will select the next cell.
  38  */
  39 export function getCoords(event: MouseEvent, rowContainer: HTMLElement, charMeasure: CharMeasure, colCount: number, rowCount: number, isSelection?: boolean): [number, number] {
  40   const coords = getCoordsRelativeToElement(event, rowContainer);
  41
  42   // Convert to cols/rows.
  43   coords[0] = Math.ceil((coords[0] + (isSelection ? charMeasure.width / 2 : 0)) / charMeasure.width);
  44   coords[1] = Math.ceil(coords[1] / charMeasure.height);
  45
  46   // Ensure coordinates are within the terminal viewport.
  47   coords[0] = Math.min(Math.max(coords[0], 1), colCount + 1);
  48   coords[1] = Math.min(Math.max(coords[1], 1), rowCount + 1);
  49
  50   return coords;
  51 }
  52
  53 /**
  54  * Gets coordinates within the terminal for a particular mouse event, wrapping
  55  * them to the bounds of the terminal and adding 32 to both the x and y values
  56  * as expected by xterm.
  57  * @param event The mouse event.
  58  * @param rowContainer The terminal's row container.
  59  * @param charMeasure The char measure object used to determine character sizes.
  60  * @param colCount The number of columns in the terminal.
  61  * @param rowCount The number of rows in the terminal.
  62  */
  63 export function getRawByteCoords(event: MouseEvent, rowContainer: HTMLElement, charMeasure: CharMeasure, colCount: number, rowCount: number): { x: number, y: number } {
  64   const coords = getCoords(event, rowContainer, charMeasure, colCount, rowCount);
  65   let x = coords[0];
  66   let y = coords[1];
  67
  68   // xterm sends raw bytes and starts at 32 (SP) for each.
  69   x += 32;
  70   y += 32;
  71
  72   return { x, y };
  73 }