diff --git a/src/vs/base/browser/ui/grid/gridview.ts b/src/vs/base/browser/ui/grid/gridview.ts index 4abdb7144f611d684ebad8824791977cfa570d75..b021e40073a424a862ae45507c543fa74c25b1ad 100644 --- a/src/vs/base/browser/ui/grid/gridview.ts +++ b/src/vs/base/browser/ui/grid/gridview.ts @@ -69,10 +69,12 @@ function tail(arr: T[]): [T[], T] { abstract class AbstractNode implements ISplitView { - abstract minimumSize: number; - abstract maximumSize: number; + readonly orientation: Orientation; + + abstract readonly minimumSize: number; + abstract readonly maximumSize: number; + abstract readonly onDidChange: Event; - abstract onDidChange: Event; abstract render(container: HTMLElement): void; private _size: number | undefined; @@ -81,7 +83,8 @@ abstract class AbstractNode implements ISplitView { private _orthogonalSize: number | undefined; get orthogonalSize(): number | undefined { return this._orthogonalSize; } - constructor(size?: number, orthogonalSize?: number) { + constructor(orientation: Orientation, size?: number, orthogonalSize?: number) { + this.orientation = orientation; this._size = size; this._orthogonalSize = orthogonalSize; } @@ -101,7 +104,6 @@ class BranchNode extends AbstractNode { readonly children: Node[]; private splitview: SplitView; - readonly orientation: Orientation; get minimumSize(): number { let result = 0; @@ -140,9 +142,8 @@ class BranchNode extends AbstractNode { private onDidChangeDisposable: IDisposable; constructor(orientation: Orientation, size?: number, orthogonalSize?: number) { - super(size, orthogonalSize); + super(orientation, size, orthogonalSize); - this.orientation = orientation; this._onDidChange = new Emitter(); this.children = []; this.onDidChangeDisposable = EmptyDisposable; @@ -224,12 +225,22 @@ class BranchNode extends AbstractNode { class LeafNode extends AbstractNode { - constructor(readonly view: T, orthogonalSize: number) { - super(undefined, orthogonalSize); + constructor(readonly view: T, orientation: Orientation, orthogonalSize: number) { + super(orientation, undefined, orthogonalSize); + } + + get minimumSize(): number { + return this.orientation === Orientation.HORIZONTAL + ? this.view.minimumHeight + : this.view.minimumWidth; + } + + get maximumSize(): number { + return this.orientation === Orientation.HORIZONTAL + ? this.view.maximumHeight + : this.view.maximumWidth; } - get minimumSize(): number { return /* this.view.minimumSize */ 20; } - get maximumSize(): number { return /* this.view.maximumSize */ Number.MAX_VALUE; } get onDidChange(): Event { return this.view.onDidChange; } render(container: HTMLElement): void { @@ -238,7 +249,12 @@ class LeafNode extends AbstractNode { layout(size: number): void { super.layout(size); - return this.view.layout(size, void 0); + + const [width, height] = this.orientation === Orientation.HORIZONTAL + ? [this.orthogonalSize, this.size] + : [this.size, this.orthogonalSize]; + + return this.view.layout(width, height); } } @@ -259,7 +275,7 @@ export class GridView implements IGrid, IDisposable { const [pathToParent, parent] = this.getNode(rest); if (parent instanceof BranchNode) { - const node = new LeafNode(view, parent.size); + const node = new LeafNode(view, orthogonal(parent.orientation), parent.size); parent.addChild(node, size, index); } else { const [, grandParent] = tail(pathToParent); @@ -272,10 +288,10 @@ export class GridView implements IGrid, IDisposable { grandParent.addChild(newParent, parent.size, parentIndex); newParent.layout(parent.orthogonalSize); - const newSibling = new LeafNode(parent.view, parent.size); + const newSibling = new LeafNode(parent.view, grandParent.orientation, parent.size); newParent.addChild(newSibling, Number.MAX_VALUE, 0); - const node = new LeafNode(view, parent.size); + const node = new LeafNode(view, grandParent.orientation, parent.size); newParent.addChild(node, size, index); } } diff --git a/test/grid.html b/test/grid.html index 0512e11e306cb3142220051010627d9c1467ceb9..447e7c30411f988534778cdd8394eacdb1268e3a 100644 --- a/test/grid.html +++ b/test/grid.html @@ -42,11 +42,13 @@ let element; return { ID: `${id}`, - minimumSize: 20, - maximumSize: Number.POSITIVE_INFINITY, + minimumWidth: 20, + maximumWidth: Number.POSITIVE_INFINITY, + minimumHeight: 20, + maximumHeight: Number.POSITIVE_INFINITY, onDidChange: Event.None, - layout(size) { - element.textContent = `hello${id} (${size})` + layout(width, height) { + element.textContent = `hello${id} (${width}, ${height})` }, render(el) { element = el;