@xterm/xterm 6.1.0-beta.22 → 6.1.0-beta.220

package/src/browser/scrollable/fastDomNode.ts

@@ -0,0 +1,126 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+export class FastDomNode<T extends HTMLElement> {
+
+  private _width: string = '';
+  private _height: string = '';
+  private _top: string = '';
+  private _left: string = '';
+  private _bottom: string = '';
+  private _right: string = '';
+  private _className: string = '';
+  private _position: string = '';
+  private _layerHint: boolean = false;
+  private _contain: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint' = 'none';
+
+  constructor(
+    public readonly domNode: T
+  ) { }
+
+  public setWidth(_width: number | string): void {
+    const width = numberAsPixels(_width);
+    if (this._width === width) {
+      return;
+    }
+    this._width = width;
+    this.domNode.style.width = this._width;
+  }
+
+  public setHeight(_height: number | string): void {
+    const height = numberAsPixels(_height);
+    if (this._height === height) {
+      return;
+    }
+    this._height = height;
+    this.domNode.style.height = this._height;
+  }
+
+  public setTop(_top: number | string): void {
+    const top = numberAsPixels(_top);
+    if (this._top === top) {
+      return;
+    }
+    this._top = top;
+    this.domNode.style.top = this._top;
+  }
+
+  public setLeft(_left: number | string): void {
+    const left = numberAsPixels(_left);
+    if (this._left === left) {
+      return;
+    }
+    this._left = left;
+    this.domNode.style.left = this._left;
+  }
+
+  public setBottom(_bottom: number | string): void {
+    const bottom = numberAsPixels(_bottom);
+    if (this._bottom === bottom) {
+      return;
+    }
+    this._bottom = bottom;
+    this.domNode.style.bottom = this._bottom;
+  }
+
+  public setRight(_right: number | string): void {
+    const right = numberAsPixels(_right);
+    if (this._right === right) {
+      return;
+    }
+    this._right = right;
+    this.domNode.style.right = this._right;
+  }
+
+  public setClassName(className: string): void {
+    if (this._className === className) {
+      return;
+    }
+    this._className = className;
+    this.domNode.className = this._className;
+  }
+
+  public toggleClassName(className: string, shouldHaveIt?: boolean): void {
+    this.domNode.classList.toggle(className, shouldHaveIt);
+    this._className = this.domNode.className;
+  }
+
+  public setPosition(position: string): void {
+    if (this._position === position) {
+      return;
+    }
+    this._position = position;
+    this.domNode.style.position = this._position;
+  }
+
+  public setLayerHinting(layerHint: boolean): void {
+    if (this._layerHint === layerHint) {
+      return;
+    }
+    this._layerHint = layerHint;
+    if (layerHint) {
+      this.domNode.style.transform = 'translate3d(0px, 0px, 0px)';
+    } else {
+      this.domNode.style.transform = '';
+    }
+  }
+
+  public setContain(contain: 'none' | 'strict' | 'content' | 'size' | 'layout' | 'style' | 'paint'): void {
+    if (this._contain === contain) {
+      return;
+    }
+    this._contain = contain;
+    this.domNode.style.contain = this._contain;
+  }
+
+  public setAttribute(name: string, value: string): void {
+    this.domNode.setAttribute(name, value);
+  }
+
+}
+
+function numberAsPixels(value: number | string): string {
+  return (typeof value === 'number' ? `${value}px` : value);
+}

package/src/browser/scrollable/globalPointerMoveMonitor.ts

@@ -0,0 +1,90 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as dom from '../Dom';
+import { DisposableStore, IDisposable, toDisposable } from 'common/Lifecycle';
+
+type PointerMoveCallback = (event: PointerEvent) => void;
+type OnStopCallback = () => void;
+
+export class GlobalPointerMoveMonitor implements IDisposable {
+
+  private readonly _hooks = new DisposableStore();
+  private _pointerMoveCallback: PointerMoveCallback | null = null;
+  private _onStopCallback: OnStopCallback | null = null;
+
+  public dispose(): void {
+    this.stopMonitoring(false);
+    this._hooks.dispose();
+  }
+
+  public stopMonitoring(invokeStopCallback: boolean): void {
+    if (!this.isMonitoring()) {
+      return;
+    }
+
+    this._hooks.clear();
+    this._pointerMoveCallback = null;
+    const onStopCallback = this._onStopCallback;
+    this._onStopCallback = null;
+
+    if (invokeStopCallback && onStopCallback) {
+      onStopCallback();
+    }
+  }
+
+  public isMonitoring(): boolean {
+    return !!this._pointerMoveCallback;
+  }
+
+  public startMonitoring(
+    initialElement: Element,
+    pointerId: number,
+    initialButtons: number,
+    pointerMoveCallback: PointerMoveCallback,
+    onStopCallback: OnStopCallback
+  ): void {
+    if (this.isMonitoring()) {
+      this.stopMonitoring(false);
+    }
+    this._pointerMoveCallback = pointerMoveCallback;
+    this._onStopCallback = onStopCallback;
+
+    let eventSource: Element | Window = initialElement;
+
+    try {
+      initialElement.setPointerCapture(pointerId);
+      this._hooks.add(toDisposable(() => {
+        try {
+          initialElement.releasePointerCapture(pointerId);
+        } catch {
+          // ignore
+        }
+      }));
+    } catch {
+      eventSource = dom.getWindow(initialElement);
+    }
+
+    this._hooks.add(dom.addDisposableListener(
+      eventSource,
+      dom.eventType.POINTER_MOVE,
+      (e) => {
+        if (e.buttons !== initialButtons) {
+          this.stopMonitoring(true);
+          return;
+        }
+
+        e.preventDefault();
+        this._pointerMoveCallback!(e);
+      }
+    ));
+
+    this._hooks.add(dom.addDisposableListener(
+      eventSource,
+      dom.eventType.POINTER_UP,
+      (e: PointerEvent) => this.stopMonitoring(true)
+    ));
+  }
+}

package/src/browser/scrollable/horizontalScrollbar.ts

@@ -0,0 +1,85 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { AbstractScrollbar, ISimplifiedPointerEvent, IScrollbarHost } from './abstractScrollbar';
+import { IScrollableElementResolvedOptions } from './scrollableElementOptions';
+import { ScrollbarState } from './scrollbarState';
+import { INewScrollPosition, Scrollable, ScrollbarVisibility, IScrollEvent } from './scrollable';
+
+export class HorizontalScrollbar extends AbstractScrollbar {
+
+  constructor(scrollable: Scrollable, options: IScrollableElementResolvedOptions, host: IScrollbarHost) {
+    const scrollDimensions = scrollable.getScrollDimensions();
+    const scrollPosition = scrollable.getCurrentScrollPosition();
+    super({
+      lazyRender: options.lazyRender,
+      host: host,
+      scrollbarState: new ScrollbarState(
+        (options.horizontalHasArrows ? options.horizontalScrollbarSize : 0),
+        (options.horizontal === ScrollbarVisibility.HIDDEN ? 0 : options.horizontalScrollbarSize),
+        (options.vertical === ScrollbarVisibility.HIDDEN ? 0 : options.verticalScrollbarSize),
+        scrollDimensions.width,
+        scrollDimensions.scrollWidth,
+        scrollPosition.scrollLeft
+      ),
+      visibility: options.horizontal,
+      extraScrollbarClassName: 'xterm-horizontal',
+      scrollable: scrollable,
+      scrollByPage: options.scrollByPage
+    });
+
+    if (options.horizontalHasArrows) {
+      throw new Error('horizontalHasArrows is not supported in xterm.js');
+    }
+
+    this._createSlider(Math.floor((options.horizontalScrollbarSize - options.horizontalSliderSize) / 2), 0, undefined, options.horizontalSliderSize);
+  }
+
+  protected _updateSlider(sliderSize: number, sliderPosition: number): void {
+    this.slider.setWidth(sliderSize);
+    this.slider.setLeft(sliderPosition);
+  }
+
+  protected _renderDomNode(largeSize: number, smallSize: number): void {
+    this.domNode.setWidth(largeSize);
+    this.domNode.setHeight(smallSize);
+    this.domNode.setLeft(0);
+    this.domNode.setBottom(0);
+  }
+
+  public handleScroll(e: IScrollEvent): boolean {
+    this._shouldRender = this._handleElementScrollSize(e.scrollWidth) || this._shouldRender;
+    this._shouldRender = this._handleElementScrollPosition(e.scrollLeft) || this._shouldRender;
+    this._shouldRender = this._handleElementSize(e.width) || this._shouldRender;
+    return this._shouldRender;
+  }
+
+  protected _pointerDownRelativePosition(offsetX: number, offsetY: number): number {
+    return offsetX;
+  }
+
+  protected _sliderPointerPosition(e: ISimplifiedPointerEvent): number {
+    return e.pageX;
+  }
+
+  protected _sliderOrthogonalPointerPosition(e: ISimplifiedPointerEvent): number {
+    return e.pageY;
+  }
+
+  protected _updateScrollbarSize(size: number): void {
+    this.slider.setHeight(size);
+  }
+
+  public writeScrollPosition(target: INewScrollPosition, scrollPosition: number): void {
+    target.scrollLeft = scrollPosition;
+  }
+
+  public updateOptions(options: IScrollableElementResolvedOptions): void {
+    this.updateScrollbarSize(options.horizontal === ScrollbarVisibility.HIDDEN ? 0 : options.horizontalScrollbarSize);
+    this._scrollbarState.setOppositeScrollbarSize(options.vertical === ScrollbarVisibility.HIDDEN ? 0 : options.verticalScrollbarSize);
+    this._visibilityController.setVisibility(options.horizontal);
+    this._scrollByPage = options.scrollByPage;
+  }
+}

package/src/browser/scrollable/mouseEvent.ts

@@ -0,0 +1,292 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as platform from 'common/Platform';
+
+interface IWindowChainElement {
+  readonly window: WeakRef<Window>;
+  readonly iframeElement: Element | null;
+}
+
+const sameOriginWindowChainCache = new WeakMap<Window, IWindowChainElement[] | null>();
+
+function getParentWindowIfSameOrigin(w: Window): Window | null {
+  if (!w.parent || w.parent === w) {
+    return null;
+  }
+
+  try {
+    const location = w.location;
+    const parentLocation = w.parent.location;
+    if (location.origin !== 'null' && parentLocation.origin !== 'null' && location.origin !== parentLocation.origin) {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+
+  return w.parent;
+}
+
+class IframeUtils {
+
+  private static _getSameOriginWindowChain(targetWindow: Window): IWindowChainElement[] {
+    let windowChainCache = sameOriginWindowChainCache.get(targetWindow);
+    if (!windowChainCache) {
+      windowChainCache = [];
+      sameOriginWindowChainCache.set(targetWindow, windowChainCache);
+      let w: Window | null = targetWindow;
+      let parent: Window | null;
+      do {
+        parent = getParentWindowIfSameOrigin(w);
+        if (parent) {
+          windowChainCache.push({
+            window: new WeakRef(w),
+            iframeElement: w.frameElement ?? null
+          });
+        } else {
+          windowChainCache.push({
+            window: new WeakRef(w),
+            iframeElement: null
+          });
+        }
+        w = parent;
+      } while (w);
+    }
+    return windowChainCache.slice(0);
+  }
+
+  public static getPositionOfChildWindowRelativeToAncestorWindow(childWindow: Window, ancestorWindow: Window | null): { top: number, left: number } {
+
+    if (!ancestorWindow || childWindow === ancestorWindow) {
+      return {
+        top: 0,
+        left: 0
+      };
+    }
+
+    let top = 0;
+    let left = 0;
+
+    const windowChain = this._getSameOriginWindowChain(childWindow);
+
+    for (const windowChainEl of windowChain) {
+      const windowInChain = windowChainEl.window.deref();
+      top += windowInChain?.scrollY ?? 0;
+      left += windowInChain?.scrollX ?? 0;
+
+      if (windowInChain === ancestorWindow) {
+        break;
+      }
+
+      if (!windowChainEl.iframeElement) {
+        break;
+      }
+
+      const boundingRect = windowChainEl.iframeElement.getBoundingClientRect();
+      top += boundingRect.top;
+      left += boundingRect.left;
+    }
+
+    return {
+      top: top,
+      left: left
+    };
+  }
+}
+
+export interface IMouseEvent {
+  readonly browserEvent: MouseEvent;
+  readonly leftButton: boolean;
+  readonly middleButton: boolean;
+  readonly rightButton: boolean;
+  readonly buttons: number;
+  readonly target: HTMLElement;
+  readonly detail: number;
+  readonly posx: number;
+  readonly posy: number;
+  readonly ctrlKey: boolean;
+  readonly shiftKey: boolean;
+  readonly altKey: boolean;
+  readonly metaKey: boolean;
+  readonly timestamp: number;
+
+  preventDefault(): void;
+  stopPropagation(): void;
+}
+
+export class StandardMouseEvent implements IMouseEvent {
+
+  public readonly browserEvent: MouseEvent;
+
+  public readonly leftButton: boolean;
+  public readonly middleButton: boolean;
+  public readonly rightButton: boolean;
+  public readonly buttons: number;
+  public readonly target: HTMLElement;
+  public detail: number;
+  public readonly posx: number;
+  public readonly posy: number;
+  public readonly ctrlKey: boolean;
+  public readonly shiftKey: boolean;
+  public readonly altKey: boolean;
+  public readonly metaKey: boolean;
+  public readonly timestamp: number;
+
+  constructor(targetWindow: Window, e: MouseEvent) {
+    this.timestamp = Date.now();
+    this.browserEvent = e;
+    this.leftButton = e.button === 0;
+    this.middleButton = e.button === 1;
+    this.rightButton = e.button === 2;
+    this.buttons = e.buttons;
+
+    this.target = e.target as HTMLElement;
+
+    this.detail = e.detail ?? 1;
+    if (e.type === 'dblclick') {
+      this.detail = 2;
+    }
+    this.ctrlKey = e.ctrlKey;
+    this.shiftKey = e.shiftKey;
+    this.altKey = e.altKey;
+    this.metaKey = e.metaKey;
+
+    if (typeof e.pageX === 'number') {
+      this.posx = e.pageX;
+      this.posy = e.pageY;
+    } else {
+      this.posx = e.clientX + this.target.ownerDocument.body.scrollLeft + this.target.ownerDocument.documentElement.scrollLeft;
+      this.posy = e.clientY + this.target.ownerDocument.body.scrollTop + this.target.ownerDocument.documentElement.scrollTop;
+    }
+
+    const iframeOffsets = IframeUtils.getPositionOfChildWindowRelativeToAncestorWindow(targetWindow, e.view);
+    this.posx -= iframeOffsets.left;
+    this.posy -= iframeOffsets.top;
+  }
+
+  public preventDefault(): void {
+    this.browserEvent.preventDefault();
+  }
+
+  public stopPropagation(): void {
+    this.browserEvent.stopPropagation();
+  }
+}
+
+export interface IMouseWheelEvent extends MouseEvent {
+  readonly wheelDelta: number;
+  readonly wheelDeltaX: number;
+  readonly wheelDeltaY: number;
+
+  readonly deltaX: number;
+  readonly deltaY: number;
+  readonly deltaZ: number;
+  readonly deltaMode: number;
+}
+
+interface IWebKitMouseWheelEvent {
+  wheelDeltaY: number;
+  wheelDeltaX: number;
+}
+
+interface IGeckoMouseWheelEvent {
+  HORIZONTAL_AXIS: number;
+  VERTICAL_AXIS: number;
+  axis: number;
+  detail: number;
+}
+
+export class StandardWheelEvent {
+
+  public readonly browserEvent: IMouseWheelEvent | null;
+  public readonly deltaY: number;
+  public readonly deltaX: number;
+  public readonly target: Node | null;
+
+  constructor(e: IMouseWheelEvent | null, deltaX: number = 0, deltaY: number = 0) {
+
+    this.browserEvent = e ?? null;
+    this.target = e ? (e.target ?? (e as any).targetNode ?? e.srcElement ?? null) : null;
+
+    this.deltaY = deltaY;
+    this.deltaX = deltaX;
+
+    let shouldFactorDPR: boolean = false;
+    if (platform.isChrome) {
+      const chromeVersionMatch = navigator.userAgent.match(/Chrome\/(\d+)/);
+      const chromeMajorVersion = chromeVersionMatch ? parseInt(chromeVersionMatch[1]) : 123;
+      shouldFactorDPR = chromeMajorVersion <= 122;
+    }
+
+    if (e) {
+      const e1 = e as IWebKitMouseWheelEvent as any;
+      const e2 = e as unknown as IGeckoMouseWheelEvent;
+      const devicePixelRatio = e.view?.devicePixelRatio ?? 1;
+
+      if (typeof e1.wheelDeltaY !== 'undefined') {
+        if (shouldFactorDPR) {
+          this.deltaY = e1.wheelDeltaY / (120 * devicePixelRatio);
+        } else {
+          this.deltaY = e1.wheelDeltaY / 120;
+        }
+      } else if (typeof e2.VERTICAL_AXIS !== 'undefined' && e2.axis === e2.VERTICAL_AXIS) {
+        this.deltaY = -e2.detail / 3;
+      } else if (e.type === 'wheel') {
+        const ev = e as unknown as WheelEvent;
+
+        if (ev.deltaMode === ev.DOM_DELTA_LINE) {
+          if (platform.isFirefox && !platform.isMac) {
+            this.deltaY = -e.deltaY / 3;
+          } else {
+            this.deltaY = -e.deltaY;
+          }
+        } else {
+          this.deltaY = -e.deltaY / 40;
+        }
+      }
+
+      if (typeof e1.wheelDeltaX !== 'undefined') {
+        if (platform.isSafari && platform.isWindows) {
+          this.deltaX = -(e1.wheelDeltaX / 120);
+        } else if (shouldFactorDPR) {
+          this.deltaX = e1.wheelDeltaX / (120 * devicePixelRatio);
+        } else {
+          this.deltaX = e1.wheelDeltaX / 120;
+        }
+      } else if (typeof e2.HORIZONTAL_AXIS !== 'undefined' && e2.axis === e2.HORIZONTAL_AXIS) {
+        this.deltaX = -e.detail / 3;
+      } else if (e.type === 'wheel') {
+        const ev = e as unknown as WheelEvent;
+
+        if (ev.deltaMode === ev.DOM_DELTA_LINE) {
+          if (platform.isFirefox && !platform.isMac) {
+            this.deltaX = -e.deltaX / 3;
+          } else {
+            this.deltaX = -e.deltaX;
+          }
+        } else {
+          this.deltaX = -e.deltaX / 40;
+        }
+      }
+
+      if (this.deltaY === 0 && this.deltaX === 0 && e.wheelDelta) {
+        if (shouldFactorDPR) {
+          this.deltaY = e.wheelDelta / (120 * devicePixelRatio);
+        } else {
+          this.deltaY = e.wheelDelta / 120;
+        }
+      }
+    }
+  }
+
+  public preventDefault(): void {
+    this.browserEvent?.preventDefault();
+  }
+
+  public stopPropagation(): void {
+    this.browserEvent?.stopPropagation();
+  }
+}