@xterm/xterm 6.1.0-beta.16 → 6.1.0-beta.161

package/src/browser/scrollable/abstractScrollbar.ts

@@ -0,0 +1,300 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { FastDomNode } from './fastDomNode';
+import { GlobalPointerMoveMonitor } from './globalPointerMoveMonitor';
+import { StandardWheelEvent } from './mouseEvent';
+import { ScrollbarArrow, IScrollbarArrowOptions } from './scrollbarArrow';
+import { ScrollbarState } from './scrollbarState';
+import { ScrollbarVisibilityController } from './scrollbarVisibilityController';
+import { Widget } from './widget';
+import * as platform from 'common/Platform';
+import { INewScrollPosition, Scrollable, ScrollbarVisibility } from './scrollable';
+
+/**
+ * The orthogonal distance to the slider at which dragging "resets". This implements "snapping"
+ */
+const POINTER_DRAG_RESET_DISTANCE = 140;
+
+export interface ISimplifiedPointerEvent {
+  buttons: number;
+  pageX: number;
+  pageY: number;
+}
+
+export interface IScrollbarHost {
+  handleMouseWheel(mouseWheelEvent: StandardWheelEvent): void;
+  handleDragStart(): void;
+  handleDragEnd(): void;
+}
+
+interface IAbstractScrollbarOptions {
+  lazyRender: boolean;
+  host: IScrollbarHost;
+  scrollbarState: ScrollbarState;
+  visibility: ScrollbarVisibility;
+  extraScrollbarClassName: string;
+  scrollable: Scrollable;
+  scrollByPage: boolean;
+}
+
+export abstract class AbstractScrollbar extends Widget {
+
+  protected _host: IScrollbarHost;
+  protected _scrollable: Scrollable;
+  protected _scrollByPage: boolean;
+  private _lazyRender: boolean;
+  protected _scrollbarState: ScrollbarState;
+  protected _visibilityController: ScrollbarVisibilityController;
+  private _pointerMoveMonitor: GlobalPointerMoveMonitor;
+
+  public domNode: FastDomNode<HTMLElement>;
+  public slider!: FastDomNode<HTMLElement>;
+
+  protected _shouldRender: boolean;
+
+  constructor(opts: IAbstractScrollbarOptions) {
+    super();
+    this._lazyRender = opts.lazyRender;
+    this._host = opts.host;
+    this._scrollable = opts.scrollable;
+    this._scrollByPage = opts.scrollByPage;
+    this._scrollbarState = opts.scrollbarState;
+    this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'xterm-visible xterm-scrollbar ' + opts.extraScrollbarClassName, 'xterm-invisible xterm-scrollbar ' + opts.extraScrollbarClassName));
+    this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+    this._pointerMoveMonitor = this._register(new GlobalPointerMoveMonitor());
+    this._shouldRender = true;
+    this.domNode = new FastDomNode(document.createElement('div'));
+    this.domNode.setAttribute('role', 'presentation');
+    this.domNode.setAttribute('aria-hidden', 'true');
+
+    this._visibilityController.setDomNode(this.domNode);
+    this.domNode.setPosition('absolute');
+
+    this._register(dom.addDisposableListener(this.domNode.domNode, dom.eventType.POINTER_DOWN, (e: PointerEvent) => this._domNodePointerDown(e)));
+  }
+
+  // ----------------- creation
+
+  /**
+   * Creates the dom node for an arrow & adds it to the container
+   */
+  protected _createArrow(opts: IScrollbarArrowOptions): ScrollbarArrow {
+    const arrow = this._register(new ScrollbarArrow(opts));
+    this.domNode.domNode.appendChild(arrow.bgDomNode);
+    this.domNode.domNode.appendChild(arrow.domNode);
+    return arrow;
+  }
+
+  /**
+   * Creates the slider dom node, adds it to the container & hooks up the events
+   */
+  protected _createSlider(top: number, left: number, width: number | undefined, height: number | undefined): void {
+    this.slider = new FastDomNode(document.createElement('div'));
+    this.slider.setClassName('xterm-slider');
+    this.slider.setPosition('absolute');
+    this.slider.setTop(top);
+    this.slider.setLeft(left);
+    if (typeof width === 'number') {
+      this.slider.setWidth(width);
+    }
+    if (typeof height === 'number') {
+      this.slider.setHeight(height);
+    }
+    this.slider.setLayerHinting(true);
+    this.slider.setContain('strict');
+
+    this.domNode.domNode.appendChild(this.slider.domNode);
+
+    this._register(dom.addDisposableListener(
+      this.slider.domNode,
+      dom.eventType.POINTER_DOWN,
+      (e: PointerEvent) => {
+        if (e.button === 0) {
+          e.preventDefault();
+          this._sliderPointerDown(e);
+        }
+      }
+    ));
+
+    this._onclick(this.slider.domNode, e => {
+      if (e.leftButton) {
+        e.stopPropagation();
+      }
+    });
+  }
+
+  // ----------------- Update state
+
+  protected _handleElementSize(visibleSize: number): boolean {
+    if (this._scrollbarState.setVisibleSize(visibleSize)) {
+      this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+      this._shouldRender = true;
+      if (!this._lazyRender) {
+        this.render();
+      }
+    }
+    return this._shouldRender;
+  }
+
+  protected _handleElementScrollSize(elementScrollSize: number): boolean {
+    if (this._scrollbarState.setScrollSize(elementScrollSize)) {
+      this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+      this._shouldRender = true;
+      if (!this._lazyRender) {
+        this.render();
+      }
+    }
+    return this._shouldRender;
+  }
+
+  protected _handleElementScrollPosition(elementScrollPosition: number): boolean {
+    if (this._scrollbarState.setScrollPosition(elementScrollPosition)) {
+      this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+      this._shouldRender = true;
+      if (!this._lazyRender) {
+        this.render();
+      }
+    }
+    return this._shouldRender;
+  }
+
+  // ----------------- rendering
+
+  public beginReveal(): void {
+    this._visibilityController.setShouldBeVisible(true);
+  }
+
+  public beginHide(): void {
+    this._visibilityController.setShouldBeVisible(false);
+  }
+
+  public render(): void {
+    if (!this._shouldRender) {
+      return;
+    }
+    this._shouldRender = false;
+
+    this._renderDomNode(this._scrollbarState.getRectangleLargeSize(), this._scrollbarState.getRectangleSmallSize());
+    this._updateSlider(this._scrollbarState.getSliderSize(), this._scrollbarState.getArrowSize() + this._scrollbarState.getSliderPosition());
+  }
+  // ----------------- DOM events
+
+  private _domNodePointerDown(e: PointerEvent): void {
+    if (e.target !== this.domNode.domNode) {
+      return;
+    }
+    this._handlePointerDown(e);
+  }
+
+  public delegatePointerDown(e: PointerEvent): void {
+    const domTop = this.domNode.domNode.getClientRects()[0].top;
+    const sliderStart = domTop + this._scrollbarState.getSliderPosition();
+    const sliderStop = domTop + this._scrollbarState.getSliderPosition() + this._scrollbarState.getSliderSize();
+    const pointerPos = this._sliderPointerPosition(e);
+    if (sliderStart <= pointerPos && pointerPos <= sliderStop) {
+      if (e.button === 0) {
+        e.preventDefault();
+        this._sliderPointerDown(e);
+      }
+    } else {
+      this._handlePointerDown(e);
+    }
+  }
+
+  private _handlePointerDown(e: PointerEvent): void {
+    let offsetX: number;
+    let offsetY: number;
+    if (e.target === this.domNode.domNode && typeof e.offsetX === 'number' && typeof e.offsetY === 'number') {
+      offsetX = e.offsetX;
+      offsetY = e.offsetY;
+    } else {
+      const domNodePosition = dom.getDomNodePagePosition(this.domNode.domNode);
+      offsetX = e.pageX - domNodePosition.left;
+      offsetY = e.pageY - domNodePosition.top;
+    }
+
+    const offset = this._pointerDownRelativePosition(offsetX, offsetY);
+    this._setDesiredScrollPositionNow(
+      this._scrollByPage
+        ? this._scrollbarState.getDesiredScrollPositionFromOffsetPaged(offset)
+        : this._scrollbarState.getDesiredScrollPositionFromOffset(offset)
+    );
+
+    if (e.button === 0) {
+      e.preventDefault();
+      this._sliderPointerDown(e);
+    }
+  }
+
+  private _sliderPointerDown(e: PointerEvent): void {
+    if (!e.target || !(e.target instanceof Element)) {
+      return;
+    }
+    const initialPointerPosition = this._sliderPointerPosition(e);
+    const initialPointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(e);
+    const initialScrollbarState = this._scrollbarState.clone();
+    this.slider.toggleClassName('xterm-active', true);
+
+    this._pointerMoveMonitor.startMonitoring(
+      e.target,
+      e.pointerId,
+      e.buttons,
+      (pointerMoveData: PointerEvent) => {
+        const pointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(pointerMoveData);
+        const pointerOrthogonalDelta = Math.abs(pointerOrthogonalPosition - initialPointerOrthogonalPosition);
+
+        if (platform.isWindows && pointerOrthogonalDelta > POINTER_DRAG_RESET_DISTANCE) {
+          this._setDesiredScrollPositionNow(initialScrollbarState.getScrollPosition());
+          return;
+        }
+
+        const pointerPosition = this._sliderPointerPosition(pointerMoveData);
+        const pointerDelta = pointerPosition - initialPointerPosition;
+        this._setDesiredScrollPositionNow(initialScrollbarState.getDesiredScrollPositionFromDelta(pointerDelta));
+      },
+      () => {
+        this.slider.toggleClassName('xterm-active', false);
+        this._host.handleDragEnd();
+      }
+    );
+
+    this._host.handleDragStart();
+  }
+
+  private _setDesiredScrollPositionNow(_desiredScrollPosition: number): void {
+
+    const desiredScrollPosition: INewScrollPosition = {};
+    this.writeScrollPosition(desiredScrollPosition, _desiredScrollPosition);
+
+    this._scrollable.setScrollPositionNow(desiredScrollPosition);
+  }
+
+  public updateScrollbarSize(scrollbarSize: number): void {
+    this._updateScrollbarSize(scrollbarSize);
+    this._scrollbarState.setScrollbarSize(scrollbarSize);
+    this._shouldRender = true;
+    if (!this._lazyRender) {
+      this.render();
+    }
+  }
+
+  public isNeeded(): boolean {
+    return this._scrollbarState.isNeeded();
+  }
+
+  // ----------------- Overwrite these
+
+  protected abstract _renderDomNode(largeSize: number, smallSize: number): void;
+  protected abstract _updateSlider(sliderSize: number, sliderPosition: number): void;
+
+  protected abstract _pointerDownRelativePosition(offsetX: number, offsetY: number): number;
+  protected abstract _sliderPointerPosition(e: ISimplifiedPointerEvent): number;
+  protected abstract _sliderOrthogonalPointerPosition(e: ISimplifiedPointerEvent): number;
+  protected abstract _updateScrollbarSize(size: number): void;
+
+  public abstract writeScrollPosition(target: INewScrollPosition, scrollPosition: number): void;
+}

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;
+  }
+}