@xterm/xterm 6.1.0-beta.21 → 6.1.0-beta.211

package/src/browser/scrollable/scrollableElementOptions.ts

@@ -0,0 +1,161 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ScrollbarVisibility } from './scrollable';
+
+export interface IScrollableElementCreationOptions {
+  /**
+   * The scrollable element should not do any DOM mutations until renderNow() is called.
+   * Defaults to false.
+   */
+  lazyRender?: boolean;
+  /**
+   * CSS Class name for the scrollable element.
+   */
+  className?: string;
+  /**
+   * Drop subtle horizontal and vertical shadows.
+   * Defaults to false.
+   */
+  useShadows?: boolean;
+  /**
+   * Handle mouse wheel (listen to mouse wheel scrolling).
+   * Defaults to true
+   */
+  handleMouseWheel?: boolean;
+  /**
+   * If mouse wheel is handled, make mouse wheel scrolling smooth.
+   * Defaults to true.
+   */
+  mouseWheelSmoothScroll?: boolean;
+  /**
+   * Flip axes. Treat vertical scrolling like horizontal and vice-versa.
+   * Defaults to false.
+   */
+  flipAxes?: boolean;
+  /**
+   * If enabled, will scroll horizontally when scrolling vertical.
+   * Defaults to false.
+   */
+  scrollYToX?: boolean;
+  /**
+   * Consume all mouse wheel events if a scrollbar is needed (i.e. scrollSize > size).
+   * Defaults to false.
+   */
+  consumeMouseWheelIfScrollbarIsNeeded?: boolean;
+  /**
+   * Always consume mouse wheel events, even when scrolling is no longer possible.
+   * Defaults to false.
+   */
+  alwaysConsumeMouseWheel?: boolean;
+  /**
+   * A multiplier to be used on the `deltaX` and `deltaY` of mouse wheel scroll events.
+   * Defaults to 1.
+   */
+  mouseWheelScrollSensitivity?: number;
+  /**
+   * FastScrolling mulitplier speed when pressing `Alt`
+   * Defaults to 5.
+   */
+  fastScrollSensitivity?: number;
+  /**
+   * Whether the scrollable will only scroll along the predominant axis when scrolling both
+   * vertically and horizontally at the same time.
+   * Prevents horizontal drift when scrolling vertically on a trackpad.
+   * Defaults to true.
+   */
+  scrollPredominantAxis?: boolean;
+  /**
+   * The dom node events should be bound to.
+   * If no listenOnDomNode is provided, the constructor dom node is used.
+   */
+  listenOnDomNode?: HTMLElement;
+  /**
+   * Control the visibility of the horizontal scrollbar.
+   * Accepted values: 'auto' (on mouse over), 'visible' (always visible), 'hidden' (never visible)
+   * Defaults to 'auto'.
+   */
+  horizontal?: ScrollbarVisibility;
+  /**
+   * Height (in px) of the horizontal scrollbar.
+   * Defaults to 10.
+   */
+  horizontalScrollbarSize?: number;
+  /**
+   * Height (in px) of the horizontal scrollbar slider.
+   * Defaults to `horizontalScrollbarSize`
+   */
+  horizontalSliderSize?: number;
+  /**
+   * Render arrows (left/right) for the horizontal scrollbar.
+   * Defaults to false.
+   */
+  horizontalHasArrows?: boolean;
+  /**
+   * Control the visibility of the vertical scrollbar.
+   * Accepted values: 'auto' (on mouse over), 'visible' (always visible), 'hidden' (never visible)
+   * Defaults to 'auto'.
+   */
+  vertical?: ScrollbarVisibility;
+  /**
+   * Width (in px) of the vertical scrollbar.
+   * Defaults to 10.
+   */
+  verticalScrollbarSize?: number;
+  /**
+   * Width (in px) of the vertical scrollbar slider.
+   * Defaults to `verticalScrollbarSize`
+   */
+  verticalSliderSize?: number;
+  /**
+   * Render arrows (top/bottom) for the vertical scrollbar.
+   * Defaults to false.
+   */
+  verticalHasArrows?: boolean;
+  /**
+   * Scroll gutter clicks move by page vs. jump to position.
+   * Defaults to false.
+   */
+  scrollByPage?: boolean;
+}
+
+export interface IScrollableElementChangeOptions {
+  handleMouseWheel?: boolean;
+  mouseWheelScrollSensitivity?: number;
+  fastScrollSensitivity?: number;
+  scrollPredominantAxis?: boolean;
+  horizontal?: ScrollbarVisibility;
+  horizontalScrollbarSize?: number;
+  horizontalHasArrows?: boolean;
+  vertical?: ScrollbarVisibility;
+  verticalScrollbarSize?: number;
+  verticalHasArrows?: boolean;
+  scrollByPage?: boolean;
+}
+
+export interface IScrollableElementResolvedOptions {
+  lazyRender: boolean;
+  className: string;
+  useShadows: boolean;
+  handleMouseWheel: boolean;
+  flipAxes: boolean;
+  scrollYToX: boolean;
+  consumeMouseWheelIfScrollbarIsNeeded: boolean;
+  alwaysConsumeMouseWheel: boolean;
+  mouseWheelScrollSensitivity: number;
+  fastScrollSensitivity: number;
+  scrollPredominantAxis: boolean;
+  mouseWheelSmoothScroll: boolean;
+  listenOnDomNode: HTMLElement | null;
+  horizontal: ScrollbarVisibility;
+  horizontalScrollbarSize: number;
+  horizontalSliderSize: number;
+  horizontalHasArrows: boolean;
+  vertical: ScrollbarVisibility;
+  verticalScrollbarSize: number;
+  verticalSliderSize: number;
+  verticalHasArrows: boolean;
+  scrollByPage: boolean;
+}

package/src/browser/scrollable/scrollbarArrow.ts

@@ -0,0 +1,110 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { GlobalPointerMoveMonitor } from './globalPointerMoveMonitor';
+import { Widget } from './widget';
+import { TimeoutTimer } from 'common/Async';
+import * as dom from '../Dom';
+
+export interface IScrollbarArrowOptions {
+  handleActivate: () => void;
+  className: string;
+  // icon: ThemeIcon;
+
+  bgWidth: number;
+  bgHeight: number;
+
+  top?: number;
+  left?: number;
+  bottom?: number;
+  right?: number;
+}
+
+export class ScrollbarArrow extends Widget {
+
+  private _handleActivate: () => void;
+  public bgDomNode: HTMLElement;
+  public domNode: HTMLElement;
+  private _pointerdownRepeatTimer: dom.WindowIntervalTimer;
+  private _pointerdownScheduleRepeatTimer: TimeoutTimer;
+  private _pointerMoveMonitor: GlobalPointerMoveMonitor;
+
+  constructor(opts: IScrollbarArrowOptions) {
+    super();
+    this._handleActivate = opts.handleActivate;
+
+    this.bgDomNode = document.createElement('div');
+    this.bgDomNode.className = 'xterm-arrow-background';
+    this.bgDomNode.style.position = 'absolute';
+    this.bgDomNode.style.width = opts.bgWidth + 'px';
+    this.bgDomNode.style.height = opts.bgHeight + 'px';
+    if (typeof opts.top !== 'undefined') {
+      this.bgDomNode.style.top = '0px';
+    }
+    if (typeof opts.left !== 'undefined') {
+      this.bgDomNode.style.left = '0px';
+    }
+    if (typeof opts.bottom !== 'undefined') {
+      this.bgDomNode.style.bottom = '0px';
+    }
+    if (typeof opts.right !== 'undefined') {
+      this.bgDomNode.style.right = '0px';
+    }
+
+    this.domNode = document.createElement('div');
+    this.domNode.className = opts.className;
+    // this.domNode.classList.add(...ThemeIcon.asClassNameArray(opts.icon));
+
+    this.domNode.style.position = 'absolute';
+    const arrowSize = Math.min(opts.bgWidth, opts.bgHeight);
+    this.domNode.style.width = arrowSize + 'px';
+    this.domNode.style.height = arrowSize + 'px';
+    if (typeof opts.top !== 'undefined') {
+      this.domNode.style.top = opts.top + 'px';
+    }
+    if (typeof opts.left !== 'undefined') {
+      this.domNode.style.left = opts.left + 'px';
+    }
+    if (typeof opts.bottom !== 'undefined') {
+      this.domNode.style.bottom = opts.bottom + 'px';
+    }
+    if (typeof opts.right !== 'undefined') {
+      this.domNode.style.right = opts.right + 'px';
+    }
+
+    this._pointerMoveMonitor = this._register(new GlobalPointerMoveMonitor());
+    this._register(dom.addStandardDisposableListener(this.bgDomNode, dom.eventType.POINTER_DOWN, (e) => this._arrowPointerDown(e)));
+    this._register(dom.addStandardDisposableListener(this.domNode, dom.eventType.POINTER_DOWN, (e) => this._arrowPointerDown(e)));
+
+    this._pointerdownRepeatTimer = this._register(new dom.WindowIntervalTimer());
+    this._pointerdownScheduleRepeatTimer = this._register(new TimeoutTimer());
+  }
+
+  private _arrowPointerDown(e: PointerEvent): void {
+    if (!e.target || !(e.target instanceof Element)) {
+      return;
+    }
+    const scheduleRepeater = (): void => {
+      this._pointerdownRepeatTimer.cancelAndSet(() => this._handleActivate(), 1000 / 24, dom.getWindow(e));
+    };
+
+    this._handleActivate();
+    this._pointerdownRepeatTimer.cancel();
+    this._pointerdownScheduleRepeatTimer.cancelAndSet(scheduleRepeater, 200);
+
+    this._pointerMoveMonitor.startMonitoring(
+      e.target,
+      e.pointerId,
+      e.buttons,
+      (pointerMoveData) => { /* Intentional empty */ },
+      () => {
+        this._pointerdownRepeatTimer.cancel();
+        this._pointerdownScheduleRepeatTimer.cancel();
+      }
+    );
+
+    e.preventDefault();
+  }
+}

package/src/browser/scrollable/scrollbarState.ts

@@ -0,0 +1,246 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/**
+ * The minimal size of the slider (such that it can still be clickable).
+ * The slider is artificially enlarged to keep it usable.
+ */
+const MINIMUM_SLIDER_SIZE = 20;
+
+interface IScrollbarStateComputedValues {
+  computedAvailableSize: number;
+  computedIsNeeded: boolean;
+  computedSliderSize: number;
+  computedSliderRatio: number;
+  computedSliderPosition: number;
+}
+
+export class ScrollbarState {
+
+  /**
+   * For the vertical scrollbar: the width.
+   * For the horizontal scrollbar: the height.
+   */
+  private _scrollbarSize: number;
+
+  /**
+   * For the vertical scrollbar: the height of the pair horizontal scrollbar.
+   * For the horizontal scrollbar: the width of the pair vertical scrollbar.
+   */
+  private _oppositeScrollbarSize: number;
+
+  /**
+   * For the vertical scrollbar: the height of the scrollbar's arrows.
+   * For the horizontal scrollbar: the width of the scrollbar's arrows.
+   */
+  private _arrowSize: number;
+
+  // --- variables
+  /**
+   * For the vertical scrollbar: the viewport height.
+   * For the horizontal scrollbar: the viewport width.
+   */
+  private _visibleSize: number;
+
+  /**
+   * For the vertical scrollbar: the scroll height.
+   * For the horizontal scrollbar: the scroll width.
+   */
+  private _scrollSize: number;
+
+  /**
+   * For the vertical scrollbar: the scroll top.
+   * For the horizontal scrollbar: the scroll left.
+   */
+  private _scrollPosition: number;
+
+  // --- computed variables
+
+  /**
+   * `visibleSize` - `oppositeScrollbarSize`
+   */
+  private _computedAvailableSize: number;
+  /**
+   * (`scrollSize` > 0 && `scrollSize` > `visibleSize`)
+   */
+  private _computedIsNeeded: boolean;
+
+  private _computedSliderSize: number;
+  private _computedSliderRatio: number;
+  private _computedSliderPosition: number;
+
+  constructor(arrowSize: number, scrollbarSize: number, oppositeScrollbarSize: number, visibleSize: number, scrollSize: number, scrollPosition: number) {
+    this._scrollbarSize = Math.round(scrollbarSize);
+    this._oppositeScrollbarSize = Math.round(oppositeScrollbarSize);
+    this._arrowSize = Math.round(arrowSize);
+
+    this._visibleSize = visibleSize;
+    this._scrollSize = scrollSize;
+    this._scrollPosition = scrollPosition;
+
+    this._computedAvailableSize = 0;
+    this._computedIsNeeded = false;
+    this._computedSliderSize = 0;
+    this._computedSliderRatio = 0;
+    this._computedSliderPosition = 0;
+
+    this._refreshComputedValues();
+  }
+
+  public clone(): ScrollbarState {
+    return new ScrollbarState(this._arrowSize, this._scrollbarSize, this._oppositeScrollbarSize, this._visibleSize, this._scrollSize, this._scrollPosition);
+  }
+
+  public setVisibleSize(visibleSize: number): boolean {
+    const iVisibleSize = Math.round(visibleSize);
+    if (this._visibleSize !== iVisibleSize) {
+      this._visibleSize = iVisibleSize;
+      this._refreshComputedValues();
+      return true;
+    }
+    return false;
+  }
+
+  public setScrollSize(scrollSize: number): boolean {
+    const iScrollSize = Math.round(scrollSize);
+    if (this._scrollSize !== iScrollSize) {
+      this._scrollSize = iScrollSize;
+      this._refreshComputedValues();
+      return true;
+    }
+    return false;
+  }
+
+  public setScrollPosition(scrollPosition: number): boolean {
+    const iScrollPosition = Math.round(scrollPosition);
+    if (this._scrollPosition !== iScrollPosition) {
+      this._scrollPosition = iScrollPosition;
+      this._refreshComputedValues();
+      return true;
+    }
+    return false;
+  }
+
+  public setScrollbarSize(scrollbarSize: number): void {
+    this._scrollbarSize = Math.round(scrollbarSize);
+  }
+
+  public setArrowSize(arrowSize: number): void {
+    const iArrowSize = Math.round(arrowSize);
+    if (this._arrowSize !== iArrowSize) {
+      this._arrowSize = iArrowSize;
+      this._refreshComputedValues();
+    }
+  }
+
+  public setOppositeScrollbarSize(oppositeScrollbarSize: number): void {
+    this._oppositeScrollbarSize = Math.round(oppositeScrollbarSize);
+  }
+
+  private static _computeValues(
+    oppositeScrollbarSize: number,
+    arrowSize: number,
+    visibleSize: number,
+    scrollSize: number,
+    scrollPosition: number
+  ): IScrollbarStateComputedValues {
+    const computedAvailableSize = Math.max(0, visibleSize - oppositeScrollbarSize);
+    const computedRepresentableSize = Math.max(0, computedAvailableSize - 2 * arrowSize);
+    const computedIsNeeded = (scrollSize > 0 && scrollSize > visibleSize);
+
+    if (!computedIsNeeded) {
+      return {
+        computedAvailableSize: Math.round(computedAvailableSize),
+        computedIsNeeded: computedIsNeeded,
+        computedSliderSize: Math.round(computedRepresentableSize),
+        computedSliderRatio: 0,
+        computedSliderPosition: 0,
+      };
+    }
+
+    const computedSliderSize = Math.round(Math.max(MINIMUM_SLIDER_SIZE, Math.floor(visibleSize * computedRepresentableSize / scrollSize)));
+
+    const computedSliderRatio = (computedRepresentableSize - computedSliderSize) / (scrollSize - visibleSize);
+    const computedSliderPosition = (scrollPosition * computedSliderRatio);
+
+    return {
+      computedAvailableSize: Math.round(computedAvailableSize),
+      computedIsNeeded: computedIsNeeded,
+      computedSliderSize: Math.round(computedSliderSize),
+      computedSliderRatio: computedSliderRatio,
+      computedSliderPosition: Math.round(computedSliderPosition),
+    };
+  }
+
+  private _refreshComputedValues(): void {
+    const r = ScrollbarState._computeValues(this._oppositeScrollbarSize, this._arrowSize, this._visibleSize, this._scrollSize, this._scrollPosition);
+    this._computedAvailableSize = r.computedAvailableSize;
+    this._computedIsNeeded = r.computedIsNeeded;
+    this._computedSliderSize = r.computedSliderSize;
+    this._computedSliderRatio = r.computedSliderRatio;
+    this._computedSliderPosition = r.computedSliderPosition;
+  }
+
+  public getArrowSize(): number {
+    return this._arrowSize;
+  }
+
+  public getScrollPosition(): number {
+    return this._scrollPosition;
+  }
+
+  public getRectangleLargeSize(): number {
+    return this._computedAvailableSize;
+  }
+
+  public getRectangleSmallSize(): number {
+    return this._scrollbarSize;
+  }
+
+  public isNeeded(): boolean {
+    return this._computedIsNeeded;
+  }
+
+  public getSliderSize(): number {
+    return this._computedSliderSize;
+  }
+
+  public getSliderPosition(): number {
+    return this._computedSliderPosition;
+  }
+
+  public getDesiredScrollPositionFromOffset(offset: number): number {
+    if (!this._computedIsNeeded) {
+      return 0;
+    }
+
+    const desiredSliderPosition = offset - this._arrowSize - this._computedSliderSize / 2;
+    return Math.round(desiredSliderPosition / this._computedSliderRatio);
+  }
+
+  public getDesiredScrollPositionFromOffsetPaged(offset: number): number {
+    if (!this._computedIsNeeded) {
+      return 0;
+    }
+
+    const correctedOffset = offset - this._arrowSize;
+    let desiredScrollPosition = this._scrollPosition;
+    if (correctedOffset < this._computedSliderPosition) {
+      desiredScrollPosition -= this._visibleSize;
+    } else {
+      desiredScrollPosition += this._visibleSize;
+    }
+    return desiredScrollPosition;
+  }
+
+  public getDesiredScrollPositionFromDelta(delta: number): number {
+    if (!this._computedIsNeeded) {
+      return 0;
+    }
+
+    const desiredSliderPosition = this._computedSliderPosition + delta;
+    return Math.round(desiredSliderPosition / this._computedSliderRatio);
+  }
+}

package/src/browser/scrollable/scrollbarVisibilityController.ts

@@ -0,0 +1,113 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { FastDomNode } from './fastDomNode';
+import { TimeoutTimer } from 'common/Async';
+import { Disposable } from 'common/Lifecycle';
+import { ScrollbarVisibility } from './scrollable';
+
+export class ScrollbarVisibilityController extends Disposable {
+  private _visibility: ScrollbarVisibility;
+  private _visibleClassName: string;
+  private _invisibleClassName: string;
+  private _domNode: FastDomNode<HTMLElement> | null;
+  private _rawShouldBeVisible: boolean;
+  private _shouldBeVisible: boolean;
+  private _isNeeded: boolean;
+  private _isVisible: boolean;
+  private _revealTimer: TimeoutTimer;
+
+  constructor(visibility: ScrollbarVisibility, visibleClassName: string, invisibleClassName: string) {
+    super();
+    this._visibility = visibility;
+    this._visibleClassName = visibleClassName;
+    this._invisibleClassName = invisibleClassName;
+    this._domNode = null;
+    this._isVisible = false;
+    this._isNeeded = false;
+    this._rawShouldBeVisible = false;
+    this._shouldBeVisible = false;
+    this._revealTimer = this._register(new TimeoutTimer());
+  }
+
+  public setVisibility(visibility: ScrollbarVisibility): void {
+    if (this._visibility !== visibility) {
+      this._visibility = visibility;
+      this._updateShouldBeVisible();
+    }
+  }
+
+  public setShouldBeVisible(rawShouldBeVisible: boolean): void {
+    this._rawShouldBeVisible = rawShouldBeVisible;
+    this._updateShouldBeVisible();
+  }
+
+  private _applyVisibilitySetting(): boolean {
+    if (this._visibility === ScrollbarVisibility.HIDDEN) {
+      return false;
+    }
+    if (this._visibility === ScrollbarVisibility.VISIBLE) {
+      return true;
+    }
+    return this._rawShouldBeVisible;
+  }
+
+  private _updateShouldBeVisible(): void {
+    const shouldBeVisible = this._applyVisibilitySetting();
+
+    if (this._shouldBeVisible !== shouldBeVisible) {
+      this._shouldBeVisible = shouldBeVisible;
+      this.ensureVisibility();
+    }
+  }
+
+  public setIsNeeded(isNeeded: boolean): void {
+    if (this._isNeeded !== isNeeded) {
+      this._isNeeded = isNeeded;
+      this.ensureVisibility();
+    }
+  }
+
+  public setDomNode(domNode: FastDomNode<HTMLElement>): void {
+    this._domNode = domNode;
+    this._domNode.setClassName(this._invisibleClassName);
+
+    this.setShouldBeVisible(false);
+  }
+
+  public ensureVisibility(): void {
+
+    if (!this._isNeeded) {
+      this._hide(false);
+      return;
+    }
+
+    if (this._shouldBeVisible) {
+      this._reveal();
+    } else {
+      this._hide(true);
+    }
+  }
+
+  private _reveal(): void {
+    if (this._isVisible) {
+      return;
+    }
+    this._isVisible = true;
+
+    this._revealTimer.setIfNotSet(() => {
+      this._domNode?.setClassName(this._visibleClassName);
+    }, 0);
+  }
+
+  private _hide(withFadeAway: boolean): void {
+    this._revealTimer.cancel();
+    if (!this._isVisible) {
+      return;
+    }
+    this._isVisible = false;
+    this._domNode?.setClassName(this._invisibleClassName + (withFadeAway ? ' xterm-fade' : ''));
+  }
+}