@codingame/monaco-vscode-api 1.85.6 → 2.0.0-v2.1

package/vscode/src/vs/base/browser/ui/sash/sash.js

@@ -0,0 +1,373 @@
+import { __decorate } from '../../../../../../../external/tslib/tslib.es6.js';
+import { append, $, EventHelper, createStyleSheet, getWindow } from '../../dom.js';
+import { DomEmitter } from '../../event.js';
+import { Gesture, EventType } from '../../touch.js';
+import { Delayer } from '../../../common/async.js';
+import { memoize } from '../../../common/decorators.js';
+import { Emitter } from '../../../common/event.js';
+import { Disposable, DisposableStore, toDisposable } from '../../../common/lifecycle.js';
+import { isMacintosh } from '../../../common/platform.js';
+import './sash.css.js';
+const DEBUG = false;
+var OrthogonalEdge;
+( (function(OrthogonalEdge) {
+    OrthogonalEdge["North"] = "north";
+    OrthogonalEdge["South"] = "south";
+    OrthogonalEdge["East"] = "east";
+    OrthogonalEdge["West"] = "west";
+})(OrthogonalEdge || (OrthogonalEdge = {})));
+let globalSize = 4;
+const onDidChangeGlobalSize = ( new Emitter());
+let globalHoverDelay = 300;
+const onDidChangeHoverDelay = ( new Emitter());
+class MouseEventFactory {
+    constructor(el) {
+        this.el = el;
+        this.disposables = ( new DisposableStore());
+    }
+    get onPointerMove() {
+        return this.disposables.add(( new DomEmitter(getWindow(this.el), 'mousemove'))).event;
+    }
+    get onPointerUp() {
+        return this.disposables.add(( new DomEmitter(getWindow(this.el), 'mouseup'))).event;
+    }
+    dispose() {
+        this.disposables.dispose();
+    }
+}
+MouseEventFactory.__decorator = ( __decorate([
+    memoize
+], MouseEventFactory.prototype, "onPointerMove", null));
+MouseEventFactory.__decorator = ( __decorate([
+    memoize
+], MouseEventFactory.prototype, "onPointerUp", null));
+class GestureEventFactory {
+    get onPointerMove() {
+        return this.disposables.add(( new DomEmitter(this.el, EventType.Change))).event;
+    }
+    get onPointerUp() {
+        return this.disposables.add(( new DomEmitter(this.el, EventType.End))).event;
+    }
+    constructor(el) {
+        this.el = el;
+        this.disposables = ( new DisposableStore());
+    }
+    dispose() {
+        this.disposables.dispose();
+    }
+}
+GestureEventFactory.__decorator = ( __decorate([
+    memoize
+], GestureEventFactory.prototype, "onPointerMove", null));
+GestureEventFactory.__decorator = ( __decorate([
+    memoize
+], GestureEventFactory.prototype, "onPointerUp", null));
+class OrthogonalPointerEventFactory {
+    get onPointerMove() {
+        return this.factory.onPointerMove;
+    }
+    get onPointerUp() {
+        return this.factory.onPointerUp;
+    }
+    constructor(factory) {
+        this.factory = factory;
+    }
+    dispose() {
+    }
+}
+OrthogonalPointerEventFactory.__decorator = ( __decorate([
+    memoize
+], OrthogonalPointerEventFactory.prototype, "onPointerMove", null));
+OrthogonalPointerEventFactory.__decorator = ( __decorate([
+    memoize
+], OrthogonalPointerEventFactory.prototype, "onPointerUp", null));
+const PointerEventsDisabledCssClass = 'pointer-events-disabled';
+class Sash extends Disposable {
+    get state() { return this._state; }
+    get orthogonalStartSash() { return this._orthogonalStartSash; }
+    get orthogonalEndSash() { return this._orthogonalEndSash; }
+    set state(state) {
+        if (this._state === state) {
+            return;
+        }
+        this.el.classList.toggle('disabled', state === 0 );
+        this.el.classList.toggle('minimum', state === 1 );
+        this.el.classList.toggle('maximum', state === 2 );
+        this._state = state;
+        this.onDidEnablementChange.fire(state);
+    }
+    set orthogonalStartSash(sash) {
+        if (this._orthogonalStartSash === sash) {
+            return;
+        }
+        this.orthogonalStartDragHandleDisposables.clear();
+        this.orthogonalStartSashDisposables.clear();
+        if (sash) {
+            const onChange = (state) => {
+                this.orthogonalStartDragHandleDisposables.clear();
+                if (state !== 0 ) {
+                    this._orthogonalStartDragHandle = append(this.el, $('.orthogonal-drag-handle.start'));
+                    this.orthogonalStartDragHandleDisposables.add(toDisposable(() => this._orthogonalStartDragHandle.remove()));
+                    this.orthogonalStartDragHandleDisposables.add(( new DomEmitter(this._orthogonalStartDragHandle, 'mouseenter'))).event(() => Sash.onMouseEnter(sash), undefined, this.orthogonalStartDragHandleDisposables);
+                    this.orthogonalStartDragHandleDisposables.add(( new DomEmitter(this._orthogonalStartDragHandle, 'mouseleave'))).event(() => Sash.onMouseLeave(sash), undefined, this.orthogonalStartDragHandleDisposables);
+                }
+            };
+            this.orthogonalStartSashDisposables.add(sash.onDidEnablementChange.event(onChange, this));
+            onChange(sash.state);
+        }
+        this._orthogonalStartSash = sash;
+    }
+    set orthogonalEndSash(sash) {
+        if (this._orthogonalEndSash === sash) {
+            return;
+        }
+        this.orthogonalEndDragHandleDisposables.clear();
+        this.orthogonalEndSashDisposables.clear();
+        if (sash) {
+            const onChange = (state) => {
+                this.orthogonalEndDragHandleDisposables.clear();
+                if (state !== 0 ) {
+                    this._orthogonalEndDragHandle = append(this.el, $('.orthogonal-drag-handle.end'));
+                    this.orthogonalEndDragHandleDisposables.add(toDisposable(() => this._orthogonalEndDragHandle.remove()));
+                    this.orthogonalEndDragHandleDisposables.add(( new DomEmitter(this._orthogonalEndDragHandle, 'mouseenter'))).event(() => Sash.onMouseEnter(sash), undefined, this.orthogonalEndDragHandleDisposables);
+                    this.orthogonalEndDragHandleDisposables.add(( new DomEmitter(this._orthogonalEndDragHandle, 'mouseleave'))).event(() => Sash.onMouseLeave(sash), undefined, this.orthogonalEndDragHandleDisposables);
+                }
+            };
+            this.orthogonalEndSashDisposables.add(sash.onDidEnablementChange.event(onChange, this));
+            onChange(sash.state);
+        }
+        this._orthogonalEndSash = sash;
+    }
+    constructor(container, layoutProvider, options) {
+        super();
+        this.hoverDelay = globalHoverDelay;
+        this.hoverDelayer = this._register(( new Delayer(this.hoverDelay)));
+        this._state = 3 ;
+        this.onDidEnablementChange = this._register(( new Emitter()));
+        this._onDidStart = this._register(( new Emitter()));
+        this._onDidChange = this._register(( new Emitter()));
+        this._onDidReset = this._register(( new Emitter()));
+        this._onDidEnd = this._register(( new Emitter()));
+        this.orthogonalStartSashDisposables = this._register(( new DisposableStore()));
+        this.orthogonalStartDragHandleDisposables = this._register(( new DisposableStore()));
+        this.orthogonalEndSashDisposables = this._register(( new DisposableStore()));
+        this.orthogonalEndDragHandleDisposables = this._register(( new DisposableStore()));
+        this.onDidStart = this._onDidStart.event;
+        this.onDidChange = this._onDidChange.event;
+        this.onDidReset = this._onDidReset.event;
+        this.onDidEnd = this._onDidEnd.event;
+        this.linkedSash = undefined;
+        this.el = append(container, $('.monaco-sash'));
+        if (options.orthogonalEdge) {
+            this.el.classList.add(`orthogonal-edge-${options.orthogonalEdge}`);
+        }
+        if (isMacintosh) {
+            this.el.classList.add('mac');
+        }
+        const onMouseDown = this._register(( new DomEmitter(this.el, 'mousedown'))).event;
+        this._register(onMouseDown(e => this.onPointerStart(e, ( new MouseEventFactory(container))), this));
+        const onMouseDoubleClick = this._register(( new DomEmitter(this.el, 'dblclick'))).event;
+        this._register(onMouseDoubleClick(this.onPointerDoublePress, this));
+        const onMouseEnter = this._register(( new DomEmitter(this.el, 'mouseenter'))).event;
+        this._register(onMouseEnter(() => Sash.onMouseEnter(this)));
+        const onMouseLeave = this._register(( new DomEmitter(this.el, 'mouseleave'))).event;
+        this._register(onMouseLeave(() => Sash.onMouseLeave(this)));
+        this._register(Gesture.addTarget(this.el));
+        const onTouchStart = this._register(( new DomEmitter(this.el, EventType.Start))).event;
+        this._register(onTouchStart(e => this.onPointerStart(e, ( new GestureEventFactory(this.el))), this));
+        const onTap = this._register(( new DomEmitter(this.el, EventType.Tap))).event;
+        let doubleTapTimeout = undefined;
+        this._register(onTap(event => {
+            if (doubleTapTimeout) {
+                clearTimeout(doubleTapTimeout);
+                doubleTapTimeout = undefined;
+                this.onPointerDoublePress(event);
+                return;
+            }
+            clearTimeout(doubleTapTimeout);
+            doubleTapTimeout = setTimeout(() => doubleTapTimeout = undefined, 250);
+        }, this));
+        if (typeof options.size === 'number') {
+            this.size = options.size;
+            if (options.orientation === 0 ) {
+                this.el.style.width = `${this.size}px`;
+            }
+            else {
+                this.el.style.height = `${this.size}px`;
+            }
+        }
+        else {
+            this.size = globalSize;
+            this._register(onDidChangeGlobalSize.event(size => {
+                this.size = size;
+                this.layout();
+            }));
+        }
+        this._register(onDidChangeHoverDelay.event(delay => this.hoverDelay = delay));
+        this.layoutProvider = layoutProvider;
+        this.orthogonalStartSash = options.orthogonalStartSash;
+        this.orthogonalEndSash = options.orthogonalEndSash;
+        this.orientation = options.orientation || 0 ;
+        if (this.orientation === 1 ) {
+            this.el.classList.add('horizontal');
+            this.el.classList.remove('vertical');
+        }
+        else {
+            this.el.classList.remove('horizontal');
+            this.el.classList.add('vertical');
+        }
+        this.el.classList.toggle('debug', DEBUG);
+        this.layout();
+    }
+    onPointerStart(event, pointerEventFactory) {
+        EventHelper.stop(event);
+        let isMultisashResize = false;
+        if (!event.__orthogonalSashEvent) {
+            const orthogonalSash = this.getOrthogonalSash(event);
+            if (orthogonalSash) {
+                isMultisashResize = true;
+                event.__orthogonalSashEvent = true;
+                orthogonalSash.onPointerStart(event, ( new OrthogonalPointerEventFactory(pointerEventFactory)));
+            }
+        }
+        if (this.linkedSash && !event.__linkedSashEvent) {
+            event.__linkedSashEvent = true;
+            this.linkedSash.onPointerStart(event, ( new OrthogonalPointerEventFactory(pointerEventFactory)));
+        }
+        if (!this.state) {
+            return;
+        }
+        const iframes = this.el.ownerDocument.getElementsByTagName('iframe');
+        for (const iframe of iframes) {
+            iframe.classList.add(PointerEventsDisabledCssClass);
+        }
+        const startX = event.pageX;
+        const startY = event.pageY;
+        const altKey = event.altKey;
+        const startEvent = { startX, currentX: startX, startY, currentY: startY, altKey };
+        this.el.classList.add('active');
+        this._onDidStart.fire(startEvent);
+        const style = createStyleSheet(this.el);
+        const updateStyle = () => {
+            let cursor = '';
+            if (isMultisashResize) {
+                cursor = 'all-scroll';
+            }
+            else if (this.orientation === 1 ) {
+                if (this.state === 1 ) {
+                    cursor = 's-resize';
+                }
+                else if (this.state === 2 ) {
+                    cursor = 'n-resize';
+                }
+                else {
+                    cursor = isMacintosh ? 'row-resize' : 'ns-resize';
+                }
+            }
+            else {
+                if (this.state === 1 ) {
+                    cursor = 'e-resize';
+                }
+                else if (this.state === 2 ) {
+                    cursor = 'w-resize';
+                }
+                else {
+                    cursor = isMacintosh ? 'col-resize' : 'ew-resize';
+                }
+            }
+            style.textContent = `* { cursor: ${cursor} !important; }`;
+        };
+        const disposables = ( new DisposableStore());
+        updateStyle();
+        if (!isMultisashResize) {
+            this.onDidEnablementChange.event(updateStyle, null, disposables);
+        }
+        const onPointerMove = (e) => {
+            EventHelper.stop(e, false);
+            const event = { startX, currentX: e.pageX, startY, currentY: e.pageY, altKey };
+            this._onDidChange.fire(event);
+        };
+        const onPointerUp = (e) => {
+            EventHelper.stop(e, false);
+            this.el.removeChild(style);
+            this.el.classList.remove('active');
+            this._onDidEnd.fire();
+            disposables.dispose();
+            for (const iframe of iframes) {
+                iframe.classList.remove(PointerEventsDisabledCssClass);
+            }
+        };
+        pointerEventFactory.onPointerMove(onPointerMove, null, disposables);
+        pointerEventFactory.onPointerUp(onPointerUp, null, disposables);
+        disposables.add(pointerEventFactory);
+    }
+    onPointerDoublePress(e) {
+        const orthogonalSash = this.getOrthogonalSash(e);
+        if (orthogonalSash) {
+            orthogonalSash._onDidReset.fire();
+        }
+        if (this.linkedSash) {
+            this.linkedSash._onDidReset.fire();
+        }
+        this._onDidReset.fire();
+    }
+    static onMouseEnter(sash, fromLinkedSash = false) {
+        if (sash.el.classList.contains('active')) {
+            sash.hoverDelayer.cancel();
+            sash.el.classList.add('hover');
+        }
+        else {
+            sash.hoverDelayer.trigger(() => sash.el.classList.add('hover'), sash.hoverDelay).then(undefined, () => { });
+        }
+        if (!fromLinkedSash && sash.linkedSash) {
+            Sash.onMouseEnter(sash.linkedSash, true);
+        }
+    }
+    static onMouseLeave(sash, fromLinkedSash = false) {
+        sash.hoverDelayer.cancel();
+        sash.el.classList.remove('hover');
+        if (!fromLinkedSash && sash.linkedSash) {
+            Sash.onMouseLeave(sash.linkedSash, true);
+        }
+    }
+    clearSashHoverState() {
+        Sash.onMouseLeave(this);
+    }
+    layout() {
+        if (this.orientation === 0 ) {
+            const verticalProvider = this.layoutProvider;
+            this.el.style.left = verticalProvider.getVerticalSashLeft(this) - (this.size / 2) + 'px';
+            if (verticalProvider.getVerticalSashTop) {
+                this.el.style.top = verticalProvider.getVerticalSashTop(this) + 'px';
+            }
+            if (verticalProvider.getVerticalSashHeight) {
+                this.el.style.height = verticalProvider.getVerticalSashHeight(this) + 'px';
+            }
+        }
+        else {
+            const horizontalProvider = this.layoutProvider;
+            this.el.style.top = horizontalProvider.getHorizontalSashTop(this) - (this.size / 2) + 'px';
+            if (horizontalProvider.getHorizontalSashLeft) {
+                this.el.style.left = horizontalProvider.getHorizontalSashLeft(this) + 'px';
+            }
+            if (horizontalProvider.getHorizontalSashWidth) {
+                this.el.style.width = horizontalProvider.getHorizontalSashWidth(this) + 'px';
+            }
+        }
+    }
+    getOrthogonalSash(e) {
+        const target = e.initialTarget ?? e.target;
+        if (!target || !(target instanceof HTMLElement)) {
+            return undefined;
+        }
+        if (target.classList.contains('orthogonal-drag-handle')) {
+            return target.classList.contains('start') ? this.orthogonalStartSash : this.orthogonalEndSash;
+        }
+        return undefined;
+    }
+    dispose() {
+        super.dispose();
+        this.el.remove();
+    }
+}
+export { OrthogonalEdge, Sash };

package/vscode/src/vs/base/browser/ui/scrollbar/abstractScrollbar.js

@@ -0,0 +1,191 @@
+import { addDisposableListener, EventType, getDomNodePagePosition } from '../../dom.js';
+import { createFastDomNode } from '../../fastDomNode.js';
+import { GlobalPointerMoveMonitor } from '../../globalPointerMoveMonitor.js';
+import { ScrollbarArrow } from './scrollbarArrow.js';
+import { ScrollbarVisibilityController } from './scrollbarVisibilityController.js';
+import { Widget } from '../widget.js';
+import { isWindows } from '../../../common/platform.js';
+const POINTER_DRAG_RESET_DISTANCE = 140;
+class AbstractScrollbar extends Widget {
+    constructor(opts) {
+        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,
+            'visible scrollbar ' + opts.extraScrollbarClassName,
+            'invisible scrollbar ' + opts.extraScrollbarClassName
+        )));
+        this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+        this._pointerMoveMonitor = this._register(( new GlobalPointerMoveMonitor()));
+        this._shouldRender = true;
+        this.domNode = createFastDomNode(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(addDisposableListener(this.domNode.domNode, EventType.POINTER_DOWN, (e) => this._domNodePointerDown(e)));
+    }
+    _createArrow(opts) {
+        const arrow = this._register(( new ScrollbarArrow(opts)));
+        this.domNode.domNode.appendChild(arrow.bgDomNode);
+        this.domNode.domNode.appendChild(arrow.domNode);
+    }
+    _createSlider(top, left, width, height) {
+        this.slider = createFastDomNode(document.createElement('div'));
+        this.slider.setClassName('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(addDisposableListener(this.slider.domNode, EventType.POINTER_DOWN, (e) => {
+            if (e.button === 0) {
+                e.preventDefault();
+                this._sliderPointerDown(e);
+            }
+        }));
+        this.onclick(this.slider.domNode, e => {
+            if (e.leftButton) {
+                e.stopPropagation();
+            }
+        });
+    }
+    _onElementSize(visibleSize) {
+        if (this._scrollbarState.setVisibleSize(visibleSize)) {
+            this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+            this._shouldRender = true;
+            if (!this._lazyRender) {
+                this.render();
+            }
+        }
+        return this._shouldRender;
+    }
+    _onElementScrollSize(elementScrollSize) {
+        if (this._scrollbarState.setScrollSize(elementScrollSize)) {
+            this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+            this._shouldRender = true;
+            if (!this._lazyRender) {
+                this.render();
+            }
+        }
+        return this._shouldRender;
+    }
+    _onElementScrollPosition(elementScrollPosition) {
+        if (this._scrollbarState.setScrollPosition(elementScrollPosition)) {
+            this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
+            this._shouldRender = true;
+            if (!this._lazyRender) {
+                this.render();
+            }
+        }
+        return this._shouldRender;
+    }
+    beginReveal() {
+        this._visibilityController.setShouldBeVisible(true);
+    }
+    beginHide() {
+        this._visibilityController.setShouldBeVisible(false);
+    }
+    render() {
+        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());
+    }
+    _domNodePointerDown(e) {
+        if (e.target !== this.domNode.domNode) {
+            return;
+        }
+        this._onPointerDown(e);
+    }
+    delegatePointerDown(e) {
+        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._onPointerDown(e);
+        }
+    }
+    _onPointerDown(e) {
+        let offsetX;
+        let offsetY;
+        if (e.target === this.domNode.domNode && typeof e.offsetX === 'number' && typeof e.offsetY === 'number') {
+            offsetX = e.offsetX;
+            offsetY = e.offsetY;
+        }
+        else {
+            const domNodePosition = 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);
+        }
+    }
+    _sliderPointerDown(e) {
+        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('active', true);
+        this._pointerMoveMonitor.startMonitoring(e.target, e.pointerId, e.buttons, (pointerMoveData) => {
+            const pointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(pointerMoveData);
+            const pointerOrthogonalDelta = Math.abs(pointerOrthogonalPosition - initialPointerOrthogonalPosition);
+            if (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('active', false);
+            this._host.onDragEnd();
+        });
+        this._host.onDragStart();
+    }
+    _setDesiredScrollPositionNow(_desiredScrollPosition) {
+        const desiredScrollPosition = {};
+        this.writeScrollPosition(desiredScrollPosition, _desiredScrollPosition);
+        this._scrollable.setScrollPositionNow(desiredScrollPosition);
+    }
+    updateScrollbarSize(scrollbarSize) {
+        this._updateScrollbarSize(scrollbarSize);
+        this._scrollbarState.setScrollbarSize(scrollbarSize);
+        this._shouldRender = true;
+        if (!this._lazyRender) {
+            this.render();
+        }
+    }
+    isNeeded() {
+        return this._scrollbarState.isNeeded();
+    }
+}
+export { AbstractScrollbar };

package/vscode/src/vs/base/browser/ui/scrollbar/horizontalScrollbar.js

@@ -0,0 +1,92 @@
+import { StandardWheelEvent } from '../../mouseEvent.js';
+import { AbstractScrollbar } from './abstractScrollbar.js';
+import { ARROW_IMG_SIZE } from './scrollbarArrow.js';
+import { ScrollbarState } from './scrollbarState.js';
+import { Codicon } from '../../../common/codicons.js';
+class HorizontalScrollbar extends AbstractScrollbar {
+    constructor(scrollable, options, host) {
+        const scrollDimensions = scrollable.getScrollDimensions();
+        const scrollPosition = scrollable.getCurrentScrollPosition();
+        super({
+            lazyRender: options.lazyRender,
+            host: host,
+            scrollbarState: ( new ScrollbarState(
+                (options.horizontalHasArrows ? options.arrowSize : 0),
+                (options.horizontal === 2  ? 0 : options.horizontalScrollbarSize),
+                (options.vertical === 2  ? 0 : options.verticalScrollbarSize),
+                scrollDimensions.width,
+                scrollDimensions.scrollWidth,
+                scrollPosition.scrollLeft
+            )),
+            visibility: options.horizontal,
+            extraScrollbarClassName: 'horizontal',
+            scrollable: scrollable,
+            scrollByPage: options.scrollByPage
+        });
+        if (options.horizontalHasArrows) {
+            const arrowDelta = (options.arrowSize - ARROW_IMG_SIZE) / 2;
+            const scrollbarDelta = (options.horizontalScrollbarSize - ARROW_IMG_SIZE) / 2;
+            this._createArrow({
+                className: 'scra',
+                icon: Codicon.scrollbarButtonLeft,
+                top: scrollbarDelta,
+                left: arrowDelta,
+                bottom: undefined,
+                right: undefined,
+                bgWidth: options.arrowSize,
+                bgHeight: options.horizontalScrollbarSize,
+                onActivate: () => this._host.onMouseWheel(( new StandardWheelEvent(null, 1, 0))),
+            });
+            this._createArrow({
+                className: 'scra',
+                icon: Codicon.scrollbarButtonRight,
+                top: scrollbarDelta,
+                left: undefined,
+                bottom: undefined,
+                right: arrowDelta,
+                bgWidth: options.arrowSize,
+                bgHeight: options.horizontalScrollbarSize,
+                onActivate: () => this._host.onMouseWheel(( new StandardWheelEvent(null, -1, 0))),
+            });
+        }
+        this._createSlider(Math.floor((options.horizontalScrollbarSize - options.horizontalSliderSize) / 2), 0, undefined, options.horizontalSliderSize);
+    }
+    _updateSlider(sliderSize, sliderPosition) {
+        this.slider.setWidth(sliderSize);
+        this.slider.setLeft(sliderPosition);
+    }
+    _renderDomNode(largeSize, smallSize) {
+        this.domNode.setWidth(largeSize);
+        this.domNode.setHeight(smallSize);
+        this.domNode.setLeft(0);
+        this.domNode.setBottom(0);
+    }
+    onDidScroll(e) {
+        this._shouldRender = this._onElementScrollSize(e.scrollWidth) || this._shouldRender;
+        this._shouldRender = this._onElementScrollPosition(e.scrollLeft) || this._shouldRender;
+        this._shouldRender = this._onElementSize(e.width) || this._shouldRender;
+        return this._shouldRender;
+    }
+    _pointerDownRelativePosition(offsetX, offsetY) {
+        return offsetX;
+    }
+    _sliderPointerPosition(e) {
+        return e.pageX;
+    }
+    _sliderOrthogonalPointerPosition(e) {
+        return e.pageY;
+    }
+    _updateScrollbarSize(size) {
+        this.slider.setHeight(size);
+    }
+    writeScrollPosition(target, scrollPosition) {
+        target.scrollLeft = scrollPosition;
+    }
+    updateOptions(options) {
+        this.updateScrollbarSize(options.horizontal === 2  ? 0 : options.horizontalScrollbarSize);
+        this._scrollbarState.setOppositeScrollbarSize(options.vertical === 2  ? 0 : options.verticalScrollbarSize);
+        this._visibilityController.setVisibility(options.horizontal);
+        this._scrollByPage = options.scrollByPage;
+    }
+}
+export { HorizontalScrollbar };

package/vscode/src/vs/base/browser/ui/scrollbar/media/scrollbars.css.js

@@ -0,0 +1,4 @@
+import n from '../../../../../../../../external/rollup-plugin-styles/dist/runtime/inject-css.js';
+var css = ".monaco-scrollable-element>.scrollbar>.scra{cursor:pointer;font-size:11px!important}.monaco-scrollable-element>.visible{background:transparent;opacity:1;transition:opacity .1s linear;z-index:11}.monaco-scrollable-element>.invisible{opacity:0;pointer-events:none}.monaco-scrollable-element>.invisible.fade{transition:opacity .8s linear}.monaco-scrollable-element>.shadow{display:none;position:absolute}.monaco-scrollable-element>.shadow.top{box-shadow:var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset;display:block;height:3px;left:3px;top:0;width:100%}.monaco-scrollable-element>.shadow.left{box-shadow:var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset;display:block;height:100%;left:0;top:3px;width:3px}.monaco-scrollable-element>.shadow.top-left-corner{display:block;height:3px;left:0;top:0;width:3px}.monaco-scrollable-element>.shadow.top.left{box-shadow:var(--vscode-scrollbar-shadow) 6px 0 6px -6px inset}.monaco-scrollable-element>.scrollbar>.slider{background:var(--vscode-scrollbarSlider-background)}.monaco-scrollable-element>.scrollbar>.slider:hover{background:var(--vscode-scrollbarSlider-hoverBackground)}.monaco-scrollable-element>.scrollbar>.slider.active{background:var(--vscode-scrollbarSlider-activeBackground)}";
+n(css,{});
+export { css, css as default };