Initial scroll drag implementation
This commit is contained in:
+29
-25
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user