Initial scroll drag implementation

This commit is contained in:
Daniel Imms
2017-05-23 11:20:55 -07:00
parent c4762e7228
commit 0dc3dd0336
2 changed files with 105 additions and 33 deletions
+29 -25
View File
@@ -4,6 +4,25 @@
import { CharMeasure } from './CharMeasure';
export function getCoordsRelativeToElement(event: MouseEvent, element: HTMLElement): [number, number] {
// Ignore browsers that don't support MouseEvent.pageX
if (event.pageX == null) {
return null;
}
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 && element !== self.document.documentElement) {
x -= element.offsetLeft;
y -= element.offsetTop;
element = 'offsetParent' in element ? <HTMLElement>element.offsetParent : <HTMLElement>element.parentElement;
}
return [x, y];
}
/**
* 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
@@ -12,29 +31,18 @@ import { CharMeasure } from './CharMeasure';
* @param rowContainer The terminal's row container.
* @param charMeasure The char measure object used to determine character sizes.
*/
export function getCoords(event: MouseEvent, rowContainer: HTMLElement, charMeasure: CharMeasure): [number, number] {
// Ignore browsers that don't support MouseEvent.pageX
if (event.pageX == null) {
return null;
}
let x = event.pageX;
let y = event.pageY;
let el = rowContainer;
// Converts the coordinates from being relative to the document to being
// relative to the terminal.
while (el && el !== self.document.documentElement) {
x -= el.offsetLeft;
y -= el.offsetTop;
el = 'offsetParent' in el ? <HTMLElement>el.offsetParent : <HTMLElement>el.parentElement;
}
export function getCoords(event: MouseEvent, rowContainer: HTMLElement, charMeasure: CharMeasure, colCount: number, rowCount: number): [number, number] {
const coords = getCoordsRelativeToElement(event, rowContainer);
// Convert to cols/rows
x = Math.ceil(x / charMeasure.width);
y = Math.ceil(y / charMeasure.height);
coords[0] = Math.ceil(coords[0] / charMeasure.width);
coords[1] = Math.ceil(coords[1] / charMeasure.height);
return [x, y];
// Ensure coordinates are within the terminal viewport.
coords[0] = Math.min(Math.max(coords[0], 1), colCount + 1);
coords[1] = Math.min(Math.max(coords[1], 1), rowCount + 1);
return coords;
}
/**
@@ -48,14 +56,10 @@ export function getCoords(event: MouseEvent, rowContainer: HTMLElement, charMeas
* @param rowCount The number of rows in the terminal.
*/
export function getRawByteCoords(event: MouseEvent, rowContainer: HTMLElement, charMeasure: CharMeasure, colCount: number, rowCount: number): { x: number, y: number } {
const coords = getCoords(event, rowContainer, charMeasure);
const coords = getCoords(event, rowContainer, charMeasure, colCount, rowCount);
let x = coords[0];
let y = coords[1];
// Ensure coordinates are within the terminal viewport.
x = Math.min(Math.max(x, 0), colCount);
y = Math.min(Math.max(y, 0), rowCount);
// xterm sends raw bytes and starts at 32 (SP) for each.
x += 32;
y += 32;