mirror of
https://github.com/Microsoft/vscode
synced 2024-08-27 21:09:43 +00:00
Add contentWidth/onDidChangeContentWidth to ListView, adopt in debugHover (#183479)
* Add contentWidth/onDidChangeContentWidth to ListView, adopt in debugHover For #173980 * cleanup
This commit is contained in:
parent
0977318801
commit
2dfb838f49
|
@ -219,7 +219,9 @@ export interface IListView<T> extends ISpliceable<T>, IDisposable {
|
|||
readonly scrollableElementDomNode: HTMLElement;
|
||||
readonly length: number;
|
||||
readonly contentHeight: number;
|
||||
readonly contentWidth: number;
|
||||
readonly onDidChangeContentHeight: Event<number>;
|
||||
readonly onDidChangeContentWidth: Event<number>;
|
||||
readonly renderHeight: number;
|
||||
readonly scrollHeight: number;
|
||||
readonly firstVisibleIndex: number;
|
||||
|
@ -310,8 +312,11 @@ export class ListView<T> implements IListView<T> {
|
|||
private readonly disposables: DisposableStore = new DisposableStore();
|
||||
|
||||
private readonly _onDidChangeContentHeight = new Emitter<number>();
|
||||
private readonly _onDidChangeContentWidth = new Emitter<number>();
|
||||
readonly onDidChangeContentHeight: Event<number> = Event.latch(this._onDidChangeContentHeight.event, undefined, this.disposables);
|
||||
readonly onDidChangeContentWidth: Event<number> = Event.latch(this._onDidChangeContentWidth.event, undefined, this.disposables);
|
||||
get contentHeight(): number { return this.rangeMap.size; }
|
||||
get contentWidth(): number { return this.scrollWidth ?? 0; }
|
||||
|
||||
get onDidScroll(): Event<ScrollEvent> { return this.scrollableElement.onScroll; }
|
||||
get onWillScroll(): Event<ScrollEvent> { return this.scrollableElement.onWillScroll; }
|
||||
|
@ -689,6 +694,7 @@ export class ListView<T> implements IListView<T> {
|
|||
|
||||
this.scrollWidth = scrollWidth;
|
||||
this.scrollableElement.setScrollDimensions({ scrollWidth: scrollWidth === 0 ? 0 : (scrollWidth + 10) });
|
||||
this._onDidChangeContentWidth.fire(this.scrollWidth);
|
||||
}
|
||||
|
||||
updateWidth(index: number): void {
|
||||
|
@ -702,6 +708,7 @@ export class ListView<T> implements IListView<T> {
|
|||
if (typeof item.width !== 'undefined' && item.width > this.scrollWidth) {
|
||||
this.scrollWidth = item.width;
|
||||
this.scrollableElement.setScrollDimensions({ scrollWidth: this.scrollWidth + 10 });
|
||||
this._onDidChangeContentWidth.fire(this.scrollWidth);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -1506,10 +1506,18 @@ export class List<T> implements ISpliceable<T>, IDisposable {
|
|||
return this.view.contentHeight;
|
||||
}
|
||||
|
||||
get contentWidth(): number {
|
||||
return this.view.contentWidth;
|
||||
}
|
||||
|
||||
get onDidChangeContentHeight(): Event<number> {
|
||||
return this.view.onDidChangeContentHeight;
|
||||
}
|
||||
|
||||
get onDidChangeContentWidth(): Event<number> {
|
||||
return this.view.onDidChangeContentWidth;
|
||||
}
|
||||
|
||||
get scrollTop(): number {
|
||||
return this.view.getScrollTop();
|
||||
}
|
||||
|
|
|
@ -1706,10 +1706,18 @@ export abstract class AbstractTree<T, TFilterData, TRef> implements IDisposable
|
|||
return this.view.contentHeight;
|
||||
}
|
||||
|
||||
get contentWidth(): number {
|
||||
return this.view.contentWidth;
|
||||
}
|
||||
|
||||
get onDidChangeContentHeight(): Event<number> {
|
||||
return this.view.onDidChangeContentHeight;
|
||||
}
|
||||
|
||||
get onDidChangeContentWidth(): Event<number> {
|
||||
return this.view.onDidChangeContentWidth;
|
||||
}
|
||||
|
||||
get scrollTop(): number {
|
||||
return this.view.scrollTop;
|
||||
}
|
||||
|
|
|
@ -438,10 +438,18 @@ export class AsyncDataTree<TInput, T, TFilterData = void> implements IDisposable
|
|||
return this.tree.contentHeight;
|
||||
}
|
||||
|
||||
get contentWidth(): number {
|
||||
return this.tree.contentWidth;
|
||||
}
|
||||
|
||||
get onDidChangeContentHeight(): Event<number> {
|
||||
return this.tree.onDidChangeContentHeight;
|
||||
}
|
||||
|
||||
get onDidChangeContentWidth(): Event<number> {
|
||||
return this.tree.onDidChangeContentWidth;
|
||||
}
|
||||
|
||||
get scrollTop(): number {
|
||||
return this.tree.scrollTop;
|
||||
}
|
||||
|
|
|
@ -112,7 +112,6 @@ export class DebugHoverWidget implements IContentWidget {
|
|||
private create(): void {
|
||||
this.domNode = $('.debug-hover-widget');
|
||||
this.complexValueContainer = dom.append(this.domNode, $('.complex-value'));
|
||||
this.complexValueContainer.style.visibility = 'hidden';
|
||||
this.complexValueTitle = dom.append(this.complexValueContainer, $('.title'));
|
||||
this.treeContainer = dom.append(this.complexValueContainer, $('.debug-hover-tree'));
|
||||
this.treeContainer.setAttribute('role', 'tree');
|
||||
|
@ -150,6 +149,12 @@ export class DebugHoverWidget implements IContentWidget {
|
|||
this.layoutTreeAndContainer();
|
||||
}
|
||||
}));
|
||||
this.toDispose.push(this.tree.onDidChangeContentWidth(() => {
|
||||
if (!this.isUpdatingTree) {
|
||||
// Don't do a layout in the middle of the async setInput
|
||||
this.layoutTreeAndContainer();
|
||||
}
|
||||
}));
|
||||
|
||||
this.registerListeners();
|
||||
this.editor.addContentWidget(this);
|
||||
|
@ -295,12 +300,7 @@ export class DebugHoverWidget implements IContentWidget {
|
|||
const scrollBarHeight = 10;
|
||||
const treeHeight = Math.min(Math.max(266, this.editor.getLayoutInfo().height * 0.55), this.tree.contentHeight + scrollBarHeight);
|
||||
|
||||
// Reset to a smaller width, if it was previously rendered wide
|
||||
this.tree.layout(treeHeight, 400);
|
||||
|
||||
// const titleWidth = this.complexValueTitle.clientWidth;
|
||||
const realTreeWidth = this.tree.getHTMLElement().offsetWidth;
|
||||
// const contentWidth = Math.max(titleWidth, realTreeWidth);
|
||||
const realTreeWidth = this.tree.contentWidth;
|
||||
const treeWidth = clamp(realTreeWidth, 400, 550);
|
||||
this.tree.layout(treeHeight, treeWidth);
|
||||
this.treeContainer.style.height = `${treeHeight}px`;
|
||||
|
@ -315,14 +315,7 @@ export class DebugHoverWidget implements IContentWidget {
|
|||
|
||||
// Do this in beforeRender once the content widget is no longer display=none so that its elements' sizes will be measured correctly.
|
||||
this.isUpdatingTree = true;
|
||||
this.tree.setInput(expression).then(() => {
|
||||
dom.scheduleAtNextAnimationFrame(() => {
|
||||
// Wait for scrollWidth to update after a frame
|
||||
this.layoutTree();
|
||||
this.editor.layoutContentWidget(this);
|
||||
this.complexValueContainer.style.visibility = '';
|
||||
});
|
||||
}).finally(() => {
|
||||
this.tree.setInput(expression).finally(() => {
|
||||
this.isUpdatingTree = false;
|
||||
});
|
||||
}
|
||||
|
@ -339,7 +332,6 @@ export class DebugHoverWidget implements IContentWidget {
|
|||
|
||||
|
||||
hide(): void {
|
||||
this.complexValueContainer.style.visibility = 'hidden';
|
||||
if (this.showCancellationSource) {
|
||||
this.showCancellationSource.cancel();
|
||||
this.showCancellationSource = undefined;
|
||||
|
|
Loading…
Reference in a new issue