@codingame/monaco-vscode-api 1.83.15 → 1.83.16

package/vscode/src/vs/workbench/services/suggest/browser/simpleSuggestWidget.js

@@ -0,0 +1,428 @@
+import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
+import './media/suggest.css.js';
+import * as dom from 'monaco-editor/esm/vs/base/browser/dom.js';
+import { List } from 'monaco-editor/esm/vs/base/browser/ui/list/listWidget.js';
+import { ResizableHTMLElement } from 'monaco-editor/esm/vs/base/browser/ui/resizable/resizable.js';
+import { SimpleSuggestWidgetItemRenderer } from './simpleSuggestWidgetRenderer.js';
+import { TimeoutTimer } from 'monaco-editor/esm/vs/base/common/async.js';
+import { Emitter } from 'monaco-editor/esm/vs/base/common/event.js';
+import { MutableDisposable, DisposableStore } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
+import { clamp } from 'monaco-editor/esm/vs/base/common/numbers.js';
+import { localizeWithPath } from 'monaco-editor/esm/vs/nls.js';
+import { IInstantiationService } from 'monaco-editor/esm/vs/platform/instantiation/common/instantiation.js';
+import { SuggestWidgetStatus } from 'monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestWidgetStatus.js';
+const $ = dom.$;
+let SimpleSuggestWidget = class SimpleSuggestWidget {
+    get list() { return this._list; }
+    constructor(_container, _persistedSize, options, instantiationService) {
+        this._container = _container;
+        this._persistedSize = _persistedSize;
+        this._state = 0 ;
+        this._forceRenderingAbove = false;
+        this._pendingLayout = ( new MutableDisposable());
+        this._showTimeout = ( new TimeoutTimer());
+        this._disposables = ( new DisposableStore());
+        this._onDidSelect = ( new Emitter());
+        this.onDidSelect = this._onDidSelect.event;
+        this._onDidHide = ( new Emitter());
+        this.onDidHide = this._onDidHide.event;
+        this._onDidShow = ( new Emitter());
+        this.onDidShow = this._onDidShow.event;
+        this.element = ( new ResizableHTMLElement());
+        this.element.domNode.classList.add('workbench-suggest-widget');
+        this._container.appendChild(this.element.domNode);
+        class ResizeState {
+            constructor(persistedSize, currentSize, persistHeight = false, persistWidth = false) {
+                this.persistedSize = persistedSize;
+                this.currentSize = currentSize;
+                this.persistHeight = persistHeight;
+                this.persistWidth = persistWidth;
+            }
+        }
+        let state;
+        this._disposables.add(this.element.onDidWillResize(() => {
+            state = ( new ResizeState(this._persistedSize.restore(), this.element.size));
+        }));
+        this._disposables.add(this.element.onDidResize(e => {
+            this._resize(e.dimension.width, e.dimension.height);
+            if (state) {
+                state.persistHeight = state.persistHeight || !!e.north || !!e.south;
+                state.persistWidth = state.persistWidth || !!e.east || !!e.west;
+            }
+            if (!e.done) {
+                return;
+            }
+            if (state) {
+                const { itemHeight, defaultSize } = this._getLayoutInfo();
+                const threshold = Math.round(itemHeight / 2);
+                let { width, height } = this.element.size;
+                if (!state.persistHeight || Math.abs(state.currentSize.height - height) <= threshold) {
+                    height = state.persistedSize?.height ?? defaultSize.height;
+                }
+                if (!state.persistWidth || Math.abs(state.currentSize.width - width) <= threshold) {
+                    width = state.persistedSize?.width ?? defaultSize.width;
+                }
+                this._persistedSize.store(new dom.Dimension(width, height));
+            }
+            state = undefined;
+        }));
+        const renderer = ( new SimpleSuggestWidgetItemRenderer());
+        this._disposables.add(renderer);
+        this._listElement = dom.append(this.element.domNode, $('.tree'));
+        this._list = ( new List('SuggestWidget', this._listElement, {
+            getHeight: (_element) => this._getLayoutInfo().itemHeight,
+            getTemplateId: (_element) => 'suggestion'
+        }, [renderer], {
+            alwaysConsumeMouseWheel: true,
+            useShadows: false,
+            mouseSupport: false,
+            multipleSelectionSupport: false,
+            accessibilityProvider: {
+                getRole: () => 'option',
+                getWidgetAriaLabel: () => ( localizeWithPath(
+                    'vs/workbench/services/suggest/browser/simpleSuggestWidget',
+                    'suggest',
+                    "Suggest"
+                )),
+                getWidgetRole: () => 'listbox',
+                getAriaLabel: (item) => {
+                    let label = item.completion.label;
+                    if (typeof item.completion.label !== 'string') {
+                        const { detail, description } = item.completion.label;
+                        if (detail && description) {
+                            label = ( localizeWithPath(
+                                'vs/workbench/services/suggest/browser/simpleSuggestWidget',
+                                'label.full',
+                                '{0}{1}, {2}',
+                                label,
+                                detail,
+                                description
+                            ));
+                        }
+                        else if (detail) {
+                            label = ( localizeWithPath(
+                                'vs/workbench/services/suggest/browser/simpleSuggestWidget',
+                                'label.detail',
+                                '{0}{1}',
+                                label,
+                                detail
+                            ));
+                        }
+                        else if (description) {
+                            label = ( localizeWithPath(
+                                'vs/workbench/services/suggest/browser/simpleSuggestWidget',
+                                'label.desc',
+                                '{0}, {1}',
+                                label,
+                                description
+                            ));
+                        }
+                    }
+                    const { detail } = item.completion;
+                    return ( localizeWithPath(
+                        'vs/workbench/services/suggest/browser/simpleSuggestWidget',
+                        'ariaCurrenttSuggestionReadDetails',
+                        '{0}, docs: {1}',
+                        label,
+                        detail
+                    ));
+                },
+            }
+        }));
+        if (options.statusBarMenuId) {
+            this._status = instantiationService.createInstance(SuggestWidgetStatus, this.element.domNode, options.statusBarMenuId);
+            this.element.domNode.classList.toggle('with-status-bar', true);
+        }
+        this._disposables.add(this._list.onMouseDown(e => this._onListMouseDownOrTap(e)));
+        this._disposables.add(this._list.onTap(e => this._onListMouseDownOrTap(e)));
+        this._disposables.add(this._list.onDidChangeSelection(e => this._onListSelection(e)));
+    }
+    dispose() {
+        this._disposables.dispose();
+        this._status?.dispose();
+        this.element.dispose();
+    }
+    showSuggestions(completionModel, selectionIndex, isFrozen, isAuto, cursorPosition) {
+        this._cursorPosition = cursorPosition;
+        if (this._completionModel !== completionModel) {
+            this._completionModel = completionModel;
+        }
+        if (isFrozen && this._state !== 2  && this._state !== 0 ) {
+            this._setState(4 );
+            return;
+        }
+        const visibleCount = this._completionModel.items.length;
+        const isEmpty = visibleCount === 0;
+        if (isEmpty) {
+            this._setState(isAuto ? 0  : 2 );
+            this._completionModel = undefined;
+            return;
+        }
+        try {
+            this._list.splice(0, this._list.length, this._completionModel.items);
+            this._setState(isFrozen ? 4  : 3 );
+            this._list.reveal(selectionIndex, 0);
+            this._list.setFocus([selectionIndex]);
+        }
+        finally {
+        }
+        this._pendingLayout.value = dom.runAtThisOrScheduleAtNextAnimationFrame(() => {
+            this._pendingLayout.clear();
+            this._layout(this.element.size);
+        });
+    }
+    setLineContext(lineContext) {
+        if (this._completionModel) {
+            this._completionModel.lineContext = lineContext;
+        }
+    }
+    _setState(state) {
+        if (this._state === state) {
+            return;
+        }
+        this._state = state;
+        this.element.domNode.classList.toggle('frozen', state === 4 );
+        this.element.domNode.classList.remove('message');
+        switch (state) {
+            case 0 :
+                dom.hide(this._listElement);
+                if (this._status) {
+                    dom.hide(this._status?.element);
+                }
+                this._status?.hide();
+                this._showTimeout.cancel();
+                this.element.domNode.classList.remove('visible');
+                this._list.splice(0, this._list.length);
+                this._cappedHeight = undefined;
+                break;
+            case 1 :
+                this.element.domNode.classList.add('message');
+                dom.hide(this._listElement);
+                if (this._status) {
+                    dom.hide(this._status?.element);
+                }
+                this._show();
+                break;
+            case 2 :
+                this.element.domNode.classList.add('message');
+                dom.hide(this._listElement);
+                if (this._status) {
+                    dom.hide(this._status?.element);
+                }
+                this._show();
+                break;
+            case 3 :
+                dom.show(this._listElement);
+                if (this._status) {
+                    dom.show(this._status?.element);
+                }
+                this._show();
+                break;
+            case 4 :
+                dom.show(this._listElement);
+                if (this._status) {
+                    dom.show(this._status?.element);
+                }
+                this._show();
+                break;
+            case 5 :
+                dom.show(this._listElement);
+                if (this._status) {
+                    dom.show(this._status?.element);
+                }
+                this._show();
+                break;
+        }
+    }
+    _show() {
+        this._status?.show();
+        dom.show(this.element.domNode);
+        this._layout(this._persistedSize.restore());
+        this._showTimeout.cancelAndSet(() => {
+            this.element.domNode.classList.add('visible');
+            this._onDidShow.fire(this);
+        }, 100);
+    }
+    hide() {
+        this._pendingLayout.clear();
+        this._setState(0 );
+        this._onDidHide.fire(this);
+        dom.hide(this.element.domNode);
+        this.element.clearSashHoverState();
+        const dim = this._persistedSize.restore();
+        const minPersistedHeight = Math.ceil(this._getLayoutInfo().itemHeight * 4.3);
+        if (dim && dim.height < minPersistedHeight) {
+            this._persistedSize.store(dim.with(undefined, minPersistedHeight));
+        }
+    }
+    _layout(size) {
+        if (!this._cursorPosition) {
+            return;
+        }
+        const bodyBox = dom.getClientArea(document.body);
+        const info = this._getLayoutInfo();
+        if (!size) {
+            size = info.defaultSize;
+        }
+        let height = size.height;
+        let width = size.width;
+        if (this._status) {
+            this._status.element.style.lineHeight = `${info.itemHeight}px`;
+        }
+        const maxWidth = bodyBox.width - info.borderHeight - 2 * info.horizontalPadding;
+        if (width > maxWidth) {
+            width = maxWidth;
+        }
+        const preferredWidth = this._completionModel ? this._completionModel.stats.pLabelLen * info.typicalHalfwidthCharacterWidth : width;
+        const fullHeight = info.statusBarHeight + this._list.contentHeight + info.borderHeight;
+        const minHeight = info.itemHeight + info.statusBarHeight;
+        const editorBox = dom.getDomNodePagePosition(this._container);
+        const cursorBox = this._cursorPosition;
+        const cursorBottom = editorBox.top + cursorBox.top + cursorBox.height;
+        const maxHeightBelow = Math.min(bodyBox.height - cursorBottom - info.verticalPadding, fullHeight);
+        const availableSpaceAbove = editorBox.top + cursorBox.top - info.verticalPadding;
+        const maxHeightAbove = Math.min(availableSpaceAbove, fullHeight);
+        let maxHeight = Math.min(Math.max(maxHeightAbove, maxHeightBelow) + info.borderHeight, fullHeight);
+        if (height === this._cappedHeight?.capped) {
+            height = this._cappedHeight.wanted;
+        }
+        if (height < minHeight) {
+            height = minHeight;
+        }
+        if (height > maxHeight) {
+            height = maxHeight;
+        }
+        const forceRenderingAboveRequiredSpace = 150;
+        if (height > maxHeightBelow || (this._forceRenderingAbove && availableSpaceAbove > forceRenderingAboveRequiredSpace)) {
+            this._preference = 0 ;
+            this.element.enableSashes(true, true, false, false);
+            maxHeight = maxHeightAbove;
+        }
+        else {
+            this._preference = 1 ;
+            this.element.enableSashes(false, true, true, false);
+            maxHeight = maxHeightBelow;
+        }
+        this.element.preferredSize = new dom.Dimension(preferredWidth, info.defaultSize.height);
+        this.element.maxSize = new dom.Dimension(maxWidth, maxHeight);
+        this.element.minSize = new dom.Dimension(220, minHeight);
+        this._cappedHeight = height === fullHeight
+            ? { wanted: this._cappedHeight?.wanted ?? size.height, capped: height }
+            : undefined;
+        this.element.domNode.style.left = `${this._cursorPosition.left}px`;
+        if (this._preference === 0 ) {
+            this.element.domNode.style.top = `${this._cursorPosition.top - height - info.borderHeight}px`;
+        }
+        else {
+            this.element.domNode.style.top = `${this._cursorPosition.top + this._cursorPosition.height}px`;
+        }
+        this._resize(width, height);
+    }
+    _resize(width, height) {
+        const { width: maxWidth, height: maxHeight } = this.element.maxSize;
+        width = Math.min(maxWidth, width);
+        if (maxHeight) {
+            height = Math.min(maxHeight, height);
+        }
+        const { statusBarHeight } = this._getLayoutInfo();
+        this._list.layout(height - statusBarHeight, width);
+        this._listElement.style.height = `${height - statusBarHeight}px`;
+        this._listElement.style.width = `${width}px`;
+        this._listElement.style.height = `${height}px`;
+        this.element.layout(height, width);
+    }
+    _getLayoutInfo() {
+        const fontInfo = {
+            lineHeight: 20,
+            typicalHalfwidthCharacterWidth: 10
+        };
+        const itemHeight = clamp(fontInfo.lineHeight, 8, 1000);
+        const statusBarHeight = 0;
+        const borderWidth = 1;
+        const borderHeight = 2 * borderWidth;
+        return {
+            itemHeight,
+            statusBarHeight,
+            borderWidth,
+            borderHeight,
+            typicalHalfwidthCharacterWidth: fontInfo.typicalHalfwidthCharacterWidth,
+            verticalPadding: 22,
+            horizontalPadding: 14,
+            defaultSize: new dom.Dimension(430, statusBarHeight + 12 * itemHeight + borderHeight)
+        };
+    }
+    _onListMouseDownOrTap(e) {
+        if (typeof e.element === 'undefined' || typeof e.index === 'undefined') {
+            return;
+        }
+        e.browserEvent.preventDefault();
+        e.browserEvent.stopPropagation();
+        this._select(e.element, e.index);
+    }
+    _onListSelection(e) {
+        if (e.elements.length) {
+            this._select(e.elements[0], e.indexes[0]);
+        }
+    }
+    _select(item, index) {
+        const completionModel = this._completionModel;
+        if (completionModel) {
+            this._onDidSelect.fire({ item, index, model: completionModel });
+        }
+    }
+    selectNext() {
+        this._list.focusNext(1, true);
+        const focus = this._list.getFocus();
+        if (focus.length > 0) {
+            this._list.reveal(focus[0]);
+        }
+        return true;
+    }
+    selectNextPage() {
+        this._list.focusNextPage();
+        const focus = this._list.getFocus();
+        if (focus.length > 0) {
+            this._list.reveal(focus[0]);
+        }
+        return true;
+    }
+    selectPrevious() {
+        this._list.focusPrevious(1, true);
+        const focus = this._list.getFocus();
+        if (focus.length > 0) {
+            this._list.reveal(focus[0]);
+        }
+        return true;
+    }
+    selectPreviousPage() {
+        this._list.focusPreviousPage();
+        const focus = this._list.getFocus();
+        if (focus.length > 0) {
+            this._list.reveal(focus[0]);
+        }
+        return true;
+    }
+    getFocusedItem() {
+        if (this._completionModel) {
+            return {
+                item: this._list.getFocusedElements()[0],
+                index: this._list.getFocus()[0],
+                model: this._completionModel
+            };
+        }
+        return undefined;
+    }
+    forceRenderingAbove() {
+        if (!this._forceRenderingAbove) {
+            this._forceRenderingAbove = true;
+            this._layout(this._persistedSize.restore());
+        }
+    }
+    stopForceRenderingAbove() {
+        this._forceRenderingAbove = false;
+    }
+};
+SimpleSuggestWidget = ( __decorate([
+    ( __param(3, IInstantiationService))
+], SimpleSuggestWidget));
+export { SimpleSuggestWidget };

package/vscode/src/vs/workbench/services/suggest/browser/simpleSuggestWidgetRenderer.js

@@ -0,0 +1,83 @@
+import { append, $, show } from 'monaco-editor/esm/vs/base/browser/dom.js';
+import { IconLabel } from 'monaco-editor/esm/vs/base/browser/ui/iconLabel/iconLabel.js';
+import { Codicon } from 'monaco-editor/esm/vs/base/common/codicons.js';
+import { Emitter } from 'monaco-editor/esm/vs/base/common/event.js';
+import { createMatches } from 'monaco-editor/esm/vs/base/common/filters.js';
+import { DisposableStore } from 'monaco-editor/esm/vs/base/common/lifecycle.js';
+import { ThemeIcon } from 'monaco-editor/esm/vs/base/common/themables.js';
+function getAriaId(index) {
+    return `simple-suggest-aria-id:${index}`;
+}
+class SimpleSuggestWidgetItemRenderer {
+    constructor() {
+        this._onDidToggleDetails = ( new Emitter());
+        this.onDidToggleDetails = this._onDidToggleDetails.event;
+        this.templateId = 'suggestion';
+    }
+    dispose() {
+        this._onDidToggleDetails.dispose();
+    }
+    renderTemplate(container) {
+        const disposables = ( new DisposableStore());
+        const root = container;
+        root.classList.add('show-file-icons');
+        const icon = append(container, $('.icon'));
+        const colorspan = append(icon, $('span.colorspan'));
+        const text = append(container, $('.contents'));
+        const main = append(text, $('.main'));
+        const iconContainer = append(main, $('.icon-label.codicon'));
+        const left = append(main, $('span.left'));
+        const right = append(main, $('span.right'));
+        const iconLabel = ( new IconLabel(left, { supportHighlights: true, supportIcons: true }));
+        disposables.add(iconLabel);
+        const parametersLabel = append(left, $('span.signature-label'));
+        const qualifierLabel = append(left, $('span.qualifier-label'));
+        const detailsLabel = append(right, $('span.details-label'));
+        const configureFont = () => {
+            const fontFamily = 'Hack';
+            const fontFeatureSettings = '';
+            const fontSize = '12';
+            const lineHeight = '20';
+            const fontWeight = 'normal';
+            const letterSpacing = '0';
+            const fontSizePx = `${fontSize}px`;
+            const lineHeightPx = `${lineHeight}px`;
+            const letterSpacingPx = `${letterSpacing}px`;
+            root.style.fontSize = fontSizePx;
+            root.style.fontWeight = fontWeight;
+            root.style.letterSpacing = letterSpacingPx;
+            main.style.fontFamily = fontFamily;
+            main.style.fontFeatureSettings = fontFeatureSettings;
+            main.style.lineHeight = lineHeightPx;
+            icon.style.height = lineHeightPx;
+            icon.style.width = lineHeightPx;
+        };
+        configureFont();
+        return { root, left, right, icon, colorspan, iconLabel, iconContainer, parametersLabel, qualifierLabel, detailsLabel, disposables };
+    }
+    renderElement(element, index, data) {
+        const { completion } = element;
+        data.root.id = getAriaId(index);
+        data.colorspan.style.backgroundColor = '';
+        const labelOptions = {
+            labelEscapeNewLines: true,
+            matches: createMatches(element.score)
+        };
+        data.icon.className = 'icon hide';
+        data.iconContainer.className = '';
+        data.iconContainer.classList.add('suggest-icon', ...ThemeIcon.asClassNameArray(completion.icon || Codicon.symbolText));
+        data.iconLabel.setLabel(completion.label, undefined, labelOptions);
+        data.parametersLabel.textContent = '';
+        data.detailsLabel.textContent = stripNewLines(completion.detail || '');
+        data.root.classList.add('string-label');
+        show(data.detailsLabel);
+        data.right.classList.remove('can-expand-details');
+    }
+    disposeTemplate(templateData) {
+        templateData.disposables.dispose();
+    }
+}
+function stripNewLines(str) {
+    return str.replace(/\r\n|\r|\n/g, '');
+}
+export { SimpleSuggestWidgetItemRenderer, getAriaId };