getCoordsRelativeToElement: use getBoundingClientRect and clientX/Y.

src/Types.ts

@@ -245,7 +245,7 @@ export interface ILinkifierAccessor {
 }
 
 export interface IMouseHelper {
-  getCoords(event: { pageX: number, pageY: number }, element: HTMLElement, charMeasure: ICharMeasure, colCount: number, rowCount: number, isSelection?: boolean): [number, number];
+  getCoords(event: { clientX: number, clientY: number }, element: HTMLElement, charMeasure: ICharMeasure, colCount: number, rowCount: number, isSelection?: boolean): [number, number];
   getRawByteCoords(event: MouseEvent, element: HTMLElement, charMeasure: ICharMeasure, colCount: number, rowCount: number): { x: number, y: number };
 }
 

src/utils/MouseHelper.test.ts

@@ -37,34 +37,28 @@ describe('MouseHelper.getCoords', () => {
   describe('when charMeasure is not initialized', () => {
     it('should return null', () => {
       charMeasure = new MockCharMeasure();
-      assert.equal(mouseHelper.getCoords({ pageX: 0, pageY: 0 }, document.createElement('div'), charMeasure, 10, 10), null);
-    });
-  });
-
-  describe('when pageX/pageY are not supported', () => {
-    it('should return null', () => {
-      assert.equal(mouseHelper.getCoords({ pageX: undefined, pageY: undefined }, document.createElement('div'), charMeasure, 10, 10), null);
+      assert.equal(mouseHelper.getCoords({ clientX: 0, clientY: 0 }, document.createElement('div'), charMeasure, 10, 10), null);
     });
   });
 
   it('should return the cell that was clicked', () => {
     let coords: [number, number];
-    coords = mouseHelper.getCoords({ pageX: CHAR_WIDTH / 2, pageY: CHAR_HEIGHT / 2 }, document.createElement('div'), charMeasure, 10, 10);
+    coords = mouseHelper.getCoords({ clientX: CHAR_WIDTH / 2, clientY: CHAR_HEIGHT / 2 }, document.createElement('div'), charMeasure, 10, 10);
     assert.deepEqual(coords, [1, 1]);
-    coords = mouseHelper.getCoords({ pageX: CHAR_WIDTH, pageY: CHAR_HEIGHT }, document.createElement('div'), charMeasure, 10, 10);
+    coords = mouseHelper.getCoords({ clientX: CHAR_WIDTH, clientY: CHAR_HEIGHT }, document.createElement('div'), charMeasure, 10, 10);
     assert.deepEqual(coords, [1, 1]);
-    coords = mouseHelper.getCoords({ pageX: CHAR_WIDTH, pageY: CHAR_HEIGHT + 1 }, document.createElement('div'), charMeasure, 10, 10);
+    coords = mouseHelper.getCoords({ clientX: CHAR_WIDTH, clientY: CHAR_HEIGHT + 1 }, document.createElement('div'), charMeasure, 10, 10);
     assert.deepEqual(coords, [1, 2]);
-    coords = mouseHelper.getCoords({ pageX: CHAR_WIDTH + 1, pageY: CHAR_HEIGHT }, document.createElement('div'), charMeasure, 10, 10);
+    coords = mouseHelper.getCoords({ clientX: CHAR_WIDTH + 1, clientY: CHAR_HEIGHT }, document.createElement('div'), charMeasure, 10, 10);
     assert.deepEqual(coords, [2, 1]);
   });
 
   it('should ensure the coordinates are returned within the terminal bounds', () => {
     let coords: [number, number];
-    coords = mouseHelper.getCoords({ pageX: -1, pageY: -1 }, document.createElement('div'), charMeasure, 10, 10);
+    coords = mouseHelper.getCoords({ clientX: -1, clientY: -1 }, document.createElement('div'), charMeasure, 10, 10);
     assert.deepEqual(coords, [1, 1]);
     // Event are double the cols/rows
-    coords = mouseHelper.getCoords({ pageX: CHAR_WIDTH * 20, pageY: CHAR_HEIGHT * 20 }, document.createElement('div'), charMeasure, 10, 10);
+    coords = mouseHelper.getCoords({ clientX: CHAR_WIDTH * 20, clientY: CHAR_HEIGHT * 20 }, document.createElement('div'), charMeasure, 10, 10);
     assert.deepEqual(coords, [10, 10], 'coordinates should never come back as larger than the terminal');
   });
 });

src/utils/MouseHelper.ts

@@ -3,40 +3,19 @@
  * @license MIT
  */
 
-import { ICharMeasure } from '../Types';
+import { ICharMeasure, IMouseHelper } from '../Types';
 import { IRenderer } from '../renderer/Types';
 
-export class MouseHelper {
+export class MouseHelper implements IMouseHelper {
   constructor(private _renderer: IRenderer) {}
 
   public setRenderer(renderer: IRenderer): void {
     this._renderer = renderer;
   }
 
-  public static getCoordsRelativeToElement(event: {pageX: number, pageY: number}, element: HTMLElement): [number, number] {
-    // Ignore browsers that don't support MouseEvent.pageX
-    if (event.pageX === null || event.pageX === undefined) {
-      return null;
-    }
-
-    const originalElement = element;
-    let x = event.pageX;
-    let y = event.pageY;
-
-    // Converts the coordinates from being relative to the document to being
-    // relative to the terminal.
-    while (element) {
-      x -= element.offsetLeft;
-      y -= element.offsetTop;
-      element = <HTMLElement>element.offsetParent;
-    }
-    element = originalElement;
-    while (element && element !== element.ownerDocument.body) {
-      x += element.scrollLeft;
-      y += element.scrollTop;
-      element = <HTMLElement>element.parentElement;
-    }
-    return [x, y];
+  public static getCoordsRelativeToElement(event: {clientX: number, clientY: number}, element: HTMLElement): [number, number] {
+    const rect = element.getBoundingClientRect();
+    return [event.clientX - rect.left, event.clientY - rect.top];
   }
 
   /**
@@ -52,7 +31,7 @@ export class MouseHelper {
    * 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.
    */
-  public getCoords(event: {pageX: number, pageY: number}, element: HTMLElement, charMeasure: ICharMeasure, colCount: number, rowCount: number, isSelection?: boolean): [number, number] {
+  public getCoords(event: {clientX: number, clientY: number}, element: HTMLElement, charMeasure: ICharMeasure, colCount: number, rowCount: number, isSelection?: boolean): [number, number] {
     // Coordinates cannot be measured if charMeasure has not been initialized
     if (!charMeasure.width || !charMeasure.height) {
       return null;