sgr_pixels mouse report

src/browser/Terminal.ts

@@ -645,7 +645,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     // send event to CoreMouseService
     function sendEvent(ev: MouseEvent | WheelEvent): boolean {
       // get mouse coordinates
-      const pos = self._mouseService!.getRawByteCoords(ev, self.screenElement!, self.cols, self.rows);
+      const pos = self._mouseService!.getMouseReportCoords(ev, self.screenElement!, self.cols, self.rows);
       if (!pos) {
         return false;
       }
@@ -699,8 +699,10 @@ export class Terminal extends CoreTerminal implements ITerminal {
       }
 
       return self.coreMouseService.triggerMouseEvent({
-        col: pos.x - 33, // FIXME: why -33 here?
-        row: pos.y - 33,
+        col: pos.col,
+        row: pos.row,
+        x: pos.x,
+        y: pos.y,
         button: but,
         action,
         ctrl: ev.ctrlKey,

src/browser/TestUtils.test.ts

@@ -359,7 +359,7 @@ export class MockMouseService implements IMouseService {
     throw new Error('Not implemented');
   }
 
-  public getRawByteCoords(event: MouseEvent, element: HTMLElement, colCount: number, rowCount: number): { x: number, y: number } | undefined {
+  public getMouseReportCoords(event: MouseEvent, element: HTMLElement, colCount: number, rowCount: number): { col: number, row: number, x: number, y: number } | undefined {
     throw new Error('Not implemented');
   }
 }

src/browser/input/Mouse.ts

@@ -48,17 +48,3 @@ export function getCoords(window: Pick<Window, 'getComputedStyle'>, event: {clie
 
   return coords;
 }
-
-/**
- * Gets coordinates within the terminal for a particular mouse event, wrapping
- * them to the bounds of the terminal and adding 32 to both the x and y values
- * as expected by xterm.
- */
-export function getRawByteCoords(coords: [number, number] | undefined): { x: number, y: number } | undefined {
-  if (!coords) {
-    return undefined;
-  }
-
-  // xterm sends raw bytes and starts at 32 (SP) for each.
-  return { x: coords[0] + 32, y: coords[1] + 32 };
-}

src/browser/services/MouseService.ts

@@ -4,7 +4,7 @@
  */
 
 import { ICharSizeService, IRenderService, IMouseService } from './Services';
-import { getCoords, getRawByteCoords } from 'browser/input/Mouse';
+import { getCoords, getCoordsRelativeToElement } from 'browser/input/Mouse';
 
 export class MouseService implements IMouseService {
   public serviceBrand: undefined;
@@ -29,8 +29,31 @@ export class MouseService implements IMouseService {
     );
   }
 
-  public getRawByteCoords(event: MouseEvent, element: HTMLElement, colCount: number, rowCount: number): { x: number, y: number } | undefined {
-    const coords = this.getCoords(event, element, colCount, rowCount);
-    return getRawByteCoords(coords);
+  public getMouseReportCoords(event: MouseEvent, element: HTMLElement, colCount: number, rowCount: number): { col: number, row: number, x: number, y: number } | undefined {
+    const pixelCoords = getCoordsRelativeToElement(window, event, element);
+
+    // due to rounding issue in zoom state pixel values might be negative at the edges
+    // simply ignore the event effectively narrowing the active mouse area
+    if (pixelCoords[0] < 0 || pixelCoords[1] < 0) {
+      return undefined;
+    }
+    // also ignore if we exceed real pixel area
+    if (pixelCoords[0] >= this._renderService.dimensions.canvasWidth || pixelCoords[1] >= this._renderService.dimensions.canvasHeight) {
+      return undefined;
+    }
+
+    pixelCoords[0] = Math.round(pixelCoords[0]);
+    pixelCoords[1] = Math.round(pixelCoords[1]);
+
+    const cellCoords = this.getCoords(event, element, colCount, rowCount);
+    if (!cellCoords) {
+      return undefined;
+    }
+    return {
+      col: cellCoords[0] - 1,
+      row: cellCoords[1] - 1,
+      x: pixelCoords[0],
+      y: pixelCoords[1]
+    };
   }
 }

src/browser/services/Services.ts

@@ -35,7 +35,7 @@ export interface IMouseService {
   serviceBrand: undefined;
 
   getCoords(event: {clientX: number, clientY: number}, element: HTMLElement, colCount: number, rowCount: number, isSelection?: boolean): [number, number] | undefined;
-  getRawByteCoords(event: MouseEvent, element: HTMLElement, colCount: number, rowCount: number): { x: number, y: number } | undefined;
+  getMouseReportCoords(event: MouseEvent, element: HTMLElement, colCount: number, rowCount: number): { col: number, row: number, x: number, y: number } | undefined;
 }
 
 export const IRenderService = createDecorator<IRenderService>('RenderService');