@codingame/monaco-vscode-api 2.1.4 → 2.2.0-next.1

package/vscode/src/vs/workbench/contrib/comments/browser/commentThreadRangeDecorator.js

@@ -0,0 +1,107 @@
+import { Disposable, dispose } from '../../../../base/common/lifecycle.js';
+import { CommentThreadCollapsibleState } from '../../../../editor/common/languages.js';
+import { ModelDecorationOptions } from '../../../../editor/common/model/textModel.js';
+class CommentThreadRangeDecoration {
+    get id() {
+        return this._decorationId;
+    }
+    set id(id) {
+        this._decorationId = id;
+    }
+    constructor(range, options) {
+        this.range = range;
+        this.options = options;
+    }
+}
+class CommentThreadRangeDecorator extends Disposable {
+    static { this.description = 'comment-thread-range-decorator'; }
+    constructor(commentService) {
+        super();
+        this.decorationIds = [];
+        this.activeDecorationIds = [];
+        this.threadCollapseStateListeners = [];
+        const decorationOptions = {
+            description: CommentThreadRangeDecorator.description,
+            isWholeLine: false,
+            zIndex: 20,
+            className: 'comment-thread-range',
+            shouldFillLineOnLineBreak: true
+        };
+        this.decorationOptions = ModelDecorationOptions.createDynamic(decorationOptions);
+        const activeDecorationOptions = {
+            description: CommentThreadRangeDecorator.description,
+            isWholeLine: false,
+            zIndex: 20,
+            className: 'comment-thread-range-current',
+            shouldFillLineOnLineBreak: true
+        };
+        this.activeDecorationOptions = ModelDecorationOptions.createDynamic(activeDecorationOptions);
+        this._register(commentService.onDidChangeCurrentCommentThread(thread => {
+            this.updateCurrent(thread);
+        }));
+        this._register(commentService.onDidUpdateCommentThreads(() => {
+            this.updateCurrent(undefined);
+        }));
+    }
+    updateCurrent(thread) {
+        if (!this.editor || (thread?.resource && (thread.resource?.toString() !== this.editor.getModel()?.uri.toString()))) {
+            return;
+        }
+        this.currentThreadCollapseStateListener?.dispose();
+        const newDecoration = [];
+        if (thread) {
+            const range = thread.range;
+            if (range && !((range.startLineNumber === range.endLineNumber) && (range.startColumn === range.endColumn))) {
+                if (thread.collapsibleState === CommentThreadCollapsibleState.Expanded) {
+                    this.currentThreadCollapseStateListener = thread.onDidChangeCollapsibleState(state => {
+                        if (state === CommentThreadCollapsibleState.Collapsed) {
+                            this.updateCurrent(undefined);
+                        }
+                    });
+                    newDecoration.push(( new CommentThreadRangeDecoration(range, this.activeDecorationOptions)));
+                }
+            }
+        }
+        this.editor.changeDecorations((changeAccessor) => {
+            this.activeDecorationIds = changeAccessor.deltaDecorations(this.activeDecorationIds, newDecoration);
+            newDecoration.forEach((decoration, index) => decoration.id = this.decorationIds[index]);
+        });
+    }
+    update(editor, commentInfos) {
+        const model = editor?.getModel();
+        if (!editor || !model) {
+            return;
+        }
+        dispose(this.threadCollapseStateListeners);
+        this.editor = editor;
+        const commentThreadRangeDecorations = [];
+        for (const info of commentInfos) {
+            info.threads.forEach(thread => {
+                if (thread.isDisposed) {
+                    return;
+                }
+                const range = thread.range;
+                if (!range || (range.startLineNumber === range.endLineNumber) && (range.startColumn === range.endColumn)) {
+                    return;
+                }
+                this.threadCollapseStateListeners.push(thread.onDidChangeCollapsibleState(() => {
+                    this.update(editor, commentInfos);
+                }));
+                if (thread.collapsibleState === CommentThreadCollapsibleState.Collapsed) {
+                    return;
+                }
+                commentThreadRangeDecorations.push(( new CommentThreadRangeDecoration(range, this.decorationOptions)));
+            });
+        }
+        editor.changeDecorations((changeAccessor) => {
+            this.decorationIds = changeAccessor.deltaDecorations(this.decorationIds, commentThreadRangeDecorations);
+            commentThreadRangeDecorations.forEach((decoration, index) => decoration.id = this.decorationIds[index]);
+        });
+    }
+    dispose() {
+        dispose(this.threadCollapseStateListeners);
+        this.currentThreadCollapseStateListener?.dispose();
+        super.dispose();
+    }
+}
+export { CommentThreadRangeDecorator };

package/vscode/src/vs/workbench/contrib/comments/browser/commentThreadZoneWidget.js

@@ -0,0 +1,395 @@
+import { __decorate, __param } from '../../../../../../../external/tslib/tslib.es6.js';
+import { Color } from '../../../../base/common/color.js';
+import { Emitter } from '../../../../base/common/event.js';
+import { DisposableStore } from '../../../../base/common/lifecycle.js';
+import { Range } from '../../../../editor/common/core/range.js';
+import { CommentThreadCollapsibleState } from '../../../../editor/common/languages.js';
+import { ZoneWidget } from '../../../../editor/contrib/zoneWidget/browser/zoneWidget.js';
+import { IContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
+import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
+import { IThemeService } from '../../../../platform/theme/common/themeService.js';
+import { CommentGlyphWidget } from './commentGlyphWidget.js';
+import { ICommentService } from './commentService.js';
+import { EDITOR_FONT_DEFAULTS } from '../../../../editor/common/config/editorOptions.js';
+import { ServiceCollection } from '../../../../platform/instantiation/common/serviceCollection.js';
+import { CommentThreadWidget } from './commentThreadWidget.js';
+import { commentThreadStateColorVar, commentThreadStateBackgroundColorVar, getCommentThreadStateBorderColor } from './commentColors.js';
+import { peekViewBorder } from '../../../../editor/contrib/peekView/browser/peekView.js';
+import { IConfigurationService } from '../../../../platform/configuration/common/configuration.js';
+import { StableEditorScrollState } from '../../../../editor/browser/stableEditorScroll.js';
+function getCommentThreadWidgetStateColor(thread, theme) {
+    return getCommentThreadStateBorderColor(thread, theme) ?? theme.getColor(peekViewBorder);
+}
+function parseMouseDownInfoFromEvent(e) {
+    const range = e.target.range;
+    if (!range) {
+        return null;
+    }
+    if (!e.event.leftButton) {
+        return null;
+    }
+    if (e.target.type !== 4 ) {
+        return null;
+    }
+    const data = e.target.detail;
+    const gutterOffsetX = data.offsetX - data.glyphMarginWidth - data.lineNumbersWidth - data.glyphMarginLeft;
+    if (gutterOffsetX > 20) {
+        return null;
+    }
+    return { lineNumber: range.startLineNumber };
+}
+function isMouseUpEventDragFromMouseDown(mouseDownInfo, e) {
+    if (!mouseDownInfo) {
+        return null;
+    }
+    const { lineNumber } = mouseDownInfo;
+    const range = e.target.range;
+    if (!range) {
+        return null;
+    }
+    return lineNumber;
+}
+let ReviewZoneWidget = class ReviewZoneWidget extends ZoneWidget {
+    get owner() {
+        return this._owner;
+    }
+    get commentThread() {
+        return this._commentThread;
+    }
+    get expanded() {
+        return this._isExpanded;
+    }
+    constructor(editor, _owner, _commentThread, _pendingComment, _pendingEdits, instantiationService, themeService, commentService, contextKeyService, configurationService) {
+        super(editor, { keepEditorSelection: true, isAccessible: true });
+        this._owner = _owner;
+        this._commentThread = _commentThread;
+        this._pendingComment = _pendingComment;
+        this._pendingEdits = _pendingEdits;
+        this.themeService = themeService;
+        this.commentService = commentService;
+        this.configurationService = configurationService;
+        this._onDidClose = ( new Emitter());
+        this._onDidCreateThread = ( new Emitter());
+        this._globalToDispose = ( new DisposableStore());
+        this._commentThreadDisposables = [];
+        this._contextKeyService = contextKeyService.createScoped(this.domNode);
+        this._scopedInstantiationService = instantiationService.createChild(( new ServiceCollection([IContextKeyService, this._contextKeyService])));
+        const controller = this.commentService.getCommentController(this._owner);
+        if (controller) {
+            this._commentOptions = controller.options;
+        }
+        this._initialCollapsibleState = _pendingComment ? CommentThreadCollapsibleState.Expanded : _commentThread.initialCollapsibleState;
+        _commentThread.initialCollapsibleState = this._initialCollapsibleState;
+        this._isExpanded = this._initialCollapsibleState === CommentThreadCollapsibleState.Expanded;
+        this._commentThreadDisposables = [];
+        this.create();
+        this._globalToDispose.add(this.themeService.onDidColorThemeChange(this._applyTheme, this));
+        this._globalToDispose.add(this.editor.onDidChangeConfiguration(e => {
+            if (e.hasChanged(50 )) {
+                this._applyTheme(this.themeService.getColorTheme());
+            }
+        }));
+        this._applyTheme(this.themeService.getColorTheme());
+    }
+    get onDidClose() {
+        return this._onDidClose.event;
+    }
+    get onDidCreateThread() {
+        return this._onDidCreateThread.event;
+    }
+    getPosition() {
+        if (this.position) {
+            return this.position;
+        }
+        if (this._commentGlyph) {
+            return this._commentGlyph.getPosition().position ?? undefined;
+        }
+        return undefined;
+    }
+    revealRange() {
+    }
+    reveal(commentUniqueId, focus = false) {
+        if (!this._isExpanded) {
+            this.show(this.arrowPosition(this._commentThread.range), 2);
+        }
+        if (commentUniqueId !== undefined) {
+            const height = this.editor.getLayoutInfo().height;
+            const coords = this._commentThreadWidget.getCommentCoords(commentUniqueId);
+            if (coords) {
+                let scrollTop = 1;
+                if (this._commentThread.range) {
+                    const commentThreadCoords = coords.thread;
+                    const commentCoords = coords.comment;
+                    scrollTop = this.editor.getTopForLineNumber(this._commentThread.range.startLineNumber) - height / 2 + commentCoords.top - commentThreadCoords.top;
+                }
+                this.editor.setScrollTop(scrollTop);
+                if (focus) {
+                    this._commentThreadWidget.focus();
+                }
+                return;
+            }
+        }
+        this.editor.revealRangeInCenter(this._commentThread.range ?? ( new Range(1, 1, 1, 1)));
+        if (focus) {
+            this._commentThreadWidget.focus();
+        }
+    }
+    getPendingComments() {
+        return {
+            newComment: this._commentThreadWidget.getPendingComment(),
+            edits: this._commentThreadWidget.getPendingEdits()
+        };
+    }
+    setPendingComment(comment) {
+        this._pendingComment = comment;
+        this.expand();
+        this._commentThreadWidget.setPendingComment(comment);
+    }
+    _fillContainer(container) {
+        this.setCssClass('review-widget');
+        this._commentThreadWidget = this._scopedInstantiationService.createInstance(CommentThreadWidget, container, this.editor, this._owner, this.editor.getModel().uri, this._contextKeyService, this._scopedInstantiationService, this._commentThread, this._pendingComment, this._pendingEdits, { editor: this.editor, codeBlockFontSize: '', codeBlockFontFamily: this.configurationService.getValue('editor').fontFamily || EDITOR_FONT_DEFAULTS.fontFamily }, this._commentOptions, {
+            actionRunner: async () => {
+                if (!this._commentThread.comments || !this._commentThread.comments.length) {
+                    const newPosition = this.getPosition();
+                    if (newPosition) {
+                        const originalRange = this._commentThread.range;
+                        if (!originalRange) {
+                            return;
+                        }
+                        let range;
+                        if (newPosition.lineNumber !== originalRange.endLineNumber) {
+                            const distance = newPosition.lineNumber - originalRange.endLineNumber;
+                            range = ( new Range(
+                                originalRange.startLineNumber + distance,
+                                originalRange.startColumn,
+                                originalRange.endLineNumber + distance,
+                                originalRange.endColumn
+                            ));
+                        }
+                        else {
+                            range = ( new Range(
+                                originalRange.startLineNumber,
+                                originalRange.startColumn,
+                                originalRange.endLineNumber,
+                                originalRange.endColumn
+                            ));
+                        }
+                        await this.commentService.updateCommentThreadTemplate(this.owner, this._commentThread.commentThreadHandle, range);
+                    }
+                }
+            },
+            collapse: () => {
+                this.collapse();
+            }
+        });
+        this._disposables.add(this._commentThreadWidget);
+    }
+    arrowPosition(range) {
+        if (!range) {
+            return undefined;
+        }
+        return { lineNumber: range.endLineNumber, column: range.endLineNumber === range.startLineNumber ? (range.startColumn + range.endColumn + 1) / 2 : 1 };
+    }
+    deleteCommentThread() {
+        this.dispose();
+        this.commentService.disposeCommentThread(this.owner, this._commentThread.threadId);
+    }
+    collapse() {
+        this._commentThread.collapsibleState = CommentThreadCollapsibleState.Collapsed;
+    }
+    expand() {
+        this._commentThread.collapsibleState = CommentThreadCollapsibleState.Expanded;
+    }
+    getGlyphPosition() {
+        if (this._commentGlyph) {
+            return this._commentGlyph.getPosition().position.lineNumber;
+        }
+        return 0;
+    }
+    toggleExpand() {
+        if (this._isExpanded) {
+            this._commentThread.collapsibleState = CommentThreadCollapsibleState.Collapsed;
+        }
+        else {
+            this._commentThread.collapsibleState = CommentThreadCollapsibleState.Expanded;
+        }
+    }
+    async update(commentThread) {
+        if (this._commentThread !== commentThread) {
+            this._commentThreadDisposables.forEach(disposable => disposable.dispose());
+            this._commentThread = commentThread;
+            this._commentThreadDisposables = [];
+            this.bindCommentThreadListeners();
+        }
+        this._commentThreadWidget.updateCommentThread(commentThread);
+        const lineNumber = this._commentThread.range?.endLineNumber ?? 1;
+        let shouldMoveWidget = false;
+        if (this._commentGlyph) {
+            this._commentGlyph.setThreadState(commentThread.state);
+            if (this._commentGlyph.getPosition().position.lineNumber !== lineNumber) {
+                shouldMoveWidget = true;
+                this._commentGlyph.setLineNumber(lineNumber);
+            }
+        }
+        if ((shouldMoveWidget && this._isExpanded) || (this._commentThread.collapsibleState === CommentThreadCollapsibleState.Expanded && !this._isExpanded)) {
+            this.show(this.arrowPosition(this._commentThread.range), 2);
+        }
+        else if (this._commentThread.collapsibleState !== CommentThreadCollapsibleState.Expanded) {
+            this.hide();
+        }
+    }
+    _onWidth(widthInPixel) {
+        this._commentThreadWidget.layout(widthInPixel);
+    }
+    _doLayout(heightInPixel, widthInPixel) {
+        this._commentThreadWidget.layout(widthInPixel);
+    }
+    display(range) {
+        if (range) {
+            this._commentGlyph = ( new CommentGlyphWidget(this.editor, range?.endLineNumber ?? -1));
+            this._commentGlyph.setThreadState(this._commentThread.state);
+        }
+        this._commentThreadWidget.display(this.editor.getOption(66 ));
+        this._disposables.add(this._commentThreadWidget.onDidResize(dimension => {
+            this._refresh(dimension);
+        }));
+        if ((this._commentThread.collapsibleState === CommentThreadCollapsibleState.Expanded) || (range === undefined)) {
+            this.show(this.arrowPosition(range), 2);
+        }
+        if (this._commentThread.canReply && this._commentThread.isTemplate && (!this._commentThread.comments || (this._commentThread.comments.length === 0))) {
+            this.reveal();
+        }
+        this.bindCommentThreadListeners();
+    }
+    bindCommentThreadListeners() {
+        this._commentThreadDisposables.push(this._commentThread.onDidChangeComments(async (_) => {
+            await this.update(this._commentThread);
+        }));
+        this._commentThreadDisposables.push(this._commentThread.onDidChangeRange(range => {
+            const lineNumber = this._commentThread.range?.startLineNumber ?? 1;
+            let shouldMoveWidget = false;
+            if (this._commentGlyph) {
+                if (this._commentGlyph.getPosition().position.lineNumber !== lineNumber) {
+                    shouldMoveWidget = true;
+                    this._commentGlyph.setLineNumber(lineNumber);
+                }
+            }
+            if (shouldMoveWidget && this._isExpanded) {
+                this.show(this.arrowPosition(this._commentThread.range), 2);
+            }
+        }));
+        this._commentThreadDisposables.push(this._commentThread.onDidChangeCollapsibleState(state => {
+            if (state === CommentThreadCollapsibleState.Expanded && !this._isExpanded) {
+                this.show(this.arrowPosition(this._commentThread.range), 2);
+                return;
+            }
+            if (state === CommentThreadCollapsibleState.Collapsed && this._isExpanded) {
+                this.hide();
+                return;
+            }
+        }));
+        if (this._initialCollapsibleState === undefined) {
+            const onDidChangeInitialCollapsibleState = this._commentThread.onDidChangeInitialCollapsibleState(state => {
+                this._initialCollapsibleState = state;
+                this._commentThread.collapsibleState = this._initialCollapsibleState;
+                onDidChangeInitialCollapsibleState.dispose();
+            });
+            this._commentThreadDisposables.push(onDidChangeInitialCollapsibleState);
+        }
+        this._commentThreadDisposables.push(this._commentThread.onDidChangeState(() => {
+            const borderColor = getCommentThreadWidgetStateColor(this._commentThread.state, this.themeService.getColorTheme()) || Color.transparent;
+            this.style({
+                frameColor: borderColor,
+                arrowColor: borderColor,
+            });
+            this.container?.style.setProperty(commentThreadStateColorVar, `${borderColor}`);
+            this.container?.style.setProperty(commentThreadStateBackgroundColorVar, `${( borderColor.transparent(.1))}`);
+        }));
+    }
+    async submitComment() {
+        return this._commentThreadWidget.submitComment();
+    }
+    _refresh(dimensions) {
+        if (dimensions.height === 0 && dimensions.width === 0) {
+            this.commentThread.collapsibleState = CommentThreadCollapsibleState.Collapsed;
+            return;
+        }
+        if (this._isExpanded) {
+            this._commentThreadWidget.layout();
+            const headHeight = Math.ceil(this.editor.getOption(66 ) * 1.2);
+            const lineHeight = this.editor.getOption(66 );
+            const arrowHeight = Math.round(lineHeight / 3);
+            const frameThickness = Math.round(lineHeight / 9) * 2;
+            const computedLinesNumber = Math.ceil(((headHeight + dimensions.height + arrowHeight + frameThickness + 8) ) / lineHeight);
+            if (this._viewZone?.heightInLines === computedLinesNumber) {
+                return;
+            }
+            const currentPosition = this.getPosition();
+            if (this._viewZone && currentPosition && currentPosition.lineNumber !== this._viewZone.afterLineNumber && this._viewZone.afterLineNumber !== 0) {
+                this._viewZone.afterLineNumber = currentPosition.lineNumber;
+            }
+            if (!this._commentThread.comments || !this._commentThread.comments.length) {
+                this._commentThreadWidget.focusCommentEditor();
+            }
+            const capture = StableEditorScrollState.capture(this.editor);
+            this._relayout(computedLinesNumber);
+            capture.restore(this.editor);
+        }
+    }
+    _applyTheme(theme) {
+        const borderColor = getCommentThreadWidgetStateColor(this._commentThread.state, this.themeService.getColorTheme()) || Color.transparent;
+        this.style({
+            arrowColor: borderColor,
+            frameColor: borderColor
+        });
+        const fontInfo = this.editor.getOption(50 );
+        this._commentThreadWidget.applyTheme(theme, fontInfo);
+    }
+    show(rangeOrPos, heightInLines) {
+        const glyphPosition = this._commentGlyph?.getPosition();
+        let range = Range.isIRange(rangeOrPos) ? rangeOrPos : (rangeOrPos ? Range.fromPositions(rangeOrPos) : undefined);
+        if (glyphPosition?.position && range && glyphPosition.position.lineNumber !== range.endLineNumber) {
+            const distance = glyphPosition.position.lineNumber - range.endLineNumber;
+            range = ( new Range(
+                range.startLineNumber + distance,
+                range.startColumn,
+                range.endLineNumber + distance,
+                range.endColumn
+            ));
+        }
+        this._isExpanded = true;
+        super.show(range ?? ( new Range(0, 0, 0, 0)), heightInLines);
+        this._commentThread.collapsibleState = CommentThreadCollapsibleState.Expanded;
+        this._refresh(this._commentThreadWidget.getDimensions());
+    }
+    hide() {
+        if (this._isExpanded) {
+            this._isExpanded = false;
+            if (this.editor.hasWidgetFocus()) {
+                this.editor.focus();
+            }
+            if (!this._commentThread.comments || !this._commentThread.comments.length) {
+                this.deleteCommentThread();
+            }
+        }
+        super.hide();
+    }
+    dispose() {
+        super.dispose();
+        if (this._commentGlyph) {
+            this._commentGlyph.dispose();
+            this._commentGlyph = undefined;
+        }
+        this._globalToDispose.dispose();
+        this._commentThreadDisposables.forEach(global => global.dispose());
+        this._onDidClose.fire(undefined);
+    }
+};
+ReviewZoneWidget = ( __decorate([
+    ( __param(5, IInstantiationService)),
+    ( __param(6, IThemeService)),
+    ( __param(7, ICommentService)),
+    ( __param(8, IContextKeyService)),
+    ( __param(9, IConfigurationService))
+], ReviewZoneWidget));
+export { ReviewZoneWidget, isMouseUpEventDragFromMouseDown, parseMouseDownInfoFromEvent };

package/vscode/src/vs/workbench/contrib/comments/browser/comments.js

@@ -0,0 +1,3 @@
+import { RawContextKey } from '../../../../platform/contextkey/common/contextkey.js';
+const CommentsViewFilterFocusContextKey = ( new RawContextKey('commentsFilterFocus', false));
+export { CommentsViewFilterFocusContextKey };