diff --git a/src/vs/base/browser/ui/grid/grid.ts b/src/vs/base/browser/ui/grid/grid.ts new file mode 100644 index 00000000000..5fed2decfaa --- /dev/null +++ b/src/vs/base/browser/ui/grid/grid.ts @@ -0,0 +1,161 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +'use strict'; + +import 'vs/css!./gridview'; +import { Orientation } from 'vs/base/browser/ui/sash/sash'; +import { IDisposable } from 'vs/base/common/lifecycle'; +import { tail2 as tail } from 'vs/base/common/arrays'; +import { orthogonal, IView, GridView, GridBranchNode } from './gridview'; + +export { Orientation } from './gridview'; + +export function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Direction): number[] { + const orientation = location.length % 2 === 0 + ? orthogonal(rootOrientation) + : rootOrientation; + + const sameDimension = (orientation === Orientation.HORIZONTAL && (direction === Direction.Left || direction === Direction.Right)) + || (orientation === Orientation.VERTICAL && (direction === Direction.Up || direction === Direction.Down)); + + if (sameDimension) { + let [rest, index] = tail(location); + + if (direction === Direction.Right || direction === Direction.Down) { + index += 1; + } + + return [...rest, index]; + } else { + const index = (direction === Direction.Right || direction === Direction.Down) ? 1 : 0; + return [...location, index]; + } +} + +function indexInParent(element: HTMLElement): number { + const parentElement = element.parentElement; + let el = parentElement.firstElementChild; + let index = 0; + + while (el !== element && el !== parentElement.lastElementChild) { + el = el.nextElementSibling; + index++; + } + + return index; +} + +/** + * This will break as soon as DOM structures of the Splitview or Gridview change. + */ +function getGridLocation(element: HTMLElement): number[] { + if (/\bmonaco-grid-view\b/.test(element.parentElement.className)) { + return []; + } + + const index = indexInParent(element.parentElement); + const ancestor = element.parentElement.parentElement.parentElement.parentElement; + return [...getGridLocation(ancestor), index]; +} + +export enum Direction { + Up, + Down, + Left, + Right +} + +function directionOrientation(direction: Direction): Orientation { + return direction === Direction.Up || direction === Direction.Down ? Orientation.VERTICAL : Orientation.HORIZONTAL; +} + +export class Grid implements IDisposable { + + private gridview: GridView; + private views = new Map(); + + get orientation(): Orientation { return this.gridview.orientation; } + set orientation(orientation: Orientation) { this.gridview.orientation = orientation; } + + constructor(container: HTMLElement, view: T) { + this.gridview = new GridView(container); + this._addView(view, 0, [0]); + } + + splitView(view: T, direction: Direction, newView: T, size: number): void { + if (this.views.has(newView)) { + throw new Error('Can\'t add same view twice'); + } + + const orientation = directionOrientation(direction); + + if (this.views.size === 1 && this.orientation !== orientation) { + this.orientation = orientation; + } + + const referenceLocation = this.getViewLocation(view); + const location = getRelativeLocation(this.gridview.orientation, referenceLocation, direction); + + this._addView(newView, size, location); + } + + private _addView(view: T, size: number, location: number[]): void { + this.views.set(view, view.element); + this.gridview.addView(view, size, location); + } + + removeView(view: T): void { + if (this.views.size === 1) { + throw new Error('Can\'t remove last view'); + } + + if (!this.views.has(view)) { + throw new Error('View not found'); + } + + const location = this.getViewLocation(view); + this.gridview.removeView(location); + this.views.delete(view); + } + + layout(width: number, height: number): void { + this.gridview.layout(width, height); + } + + swapViews(from: T, to: T): void { + const fromLocation = this.getViewLocation(from); + const toLocation = this.getViewLocation(to); + return this.gridview.swapViews(fromLocation, toLocation); + } + + resizeView(view: T, size: number): void { + const location = this.getViewLocation(view); + return this.gridview.resizeView(location, size); + } + + getViewSize(view: T): number { + const location = this.getViewLocation(view); + return this.gridview.getViewSize(location); + } + + getViews(): GridBranchNode { + return this.gridview.getViews(); + } + + private getViewLocation(view: T): number[] { + const element = this.views.get(view); + + if (!element) { + throw new Error('View not found'); + } + + return getGridLocation(element); + } + + dispose(): void { + this.gridview.dispose(); + } +} diff --git a/src/vs/base/browser/ui/grid/gridview.ts b/src/vs/base/browser/ui/grid/gridview.ts index 18cec9fd238..75016937430 100644 --- a/src/vs/base/browser/ui/grid/gridview.ts +++ b/src/vs/base/browser/ui/grid/gridview.ts @@ -11,6 +11,9 @@ import { Orientation } from 'vs/base/browser/ui/sash/sash'; import { SplitView, IView as ISplitView } from 'vs/base/browser/ui/splitview/splitview'; import { empty as EmptyDisposable, IDisposable } from 'vs/base/common/lifecycle'; import { $, append } from 'vs/base/browser/dom'; +import { tail2 as tail } from 'vs/base/common/arrays'; + +export { Orientation } from 'vs/base/browser/ui/sash/sash'; export interface IView { readonly element: HTMLElement; @@ -38,7 +41,7 @@ TODO: - implement serialization/deserialization util */ -function orthogonal(orientation: Orientation): Orientation { +export function orthogonal(orientation: Orientation): Orientation { return orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL; } @@ -62,14 +65,6 @@ export interface IGrid { getViews(): GridBranchNode; } -function tail(arr: T[]): [T[], T] { - if (arr.length === 0) { - throw new Error('Invalid tail call'); - } - - return [arr.slice(0, arr.length - 1), arr[arr.length - 1]]; -} - class BranchNode implements ISplitView, IDisposable { readonly element: HTMLElement; @@ -502,151 +497,4 @@ export class GridView implements IGrid, IDisposable { dispose(): void { this.root.dispose(); } -} - -export function getRelativeLocation(rootOrientation: Orientation, location: number[], direction: Direction): number[] { - const orientation = location.length % 2 === 0 - ? orthogonal(rootOrientation) - : rootOrientation; - - const sameDimension = (orientation === Orientation.HORIZONTAL && (direction === Direction.Left || direction === Direction.Right)) - || (orientation === Orientation.VERTICAL && (direction === Direction.Up || direction === Direction.Down)); - - if (sameDimension) { - let [rest, index] = tail(location); - - if (direction === Direction.Right || direction === Direction.Down) { - index += 1; - } - - return [...rest, index]; - } else { - const index = (direction === Direction.Right || direction === Direction.Down) ? 1 : 0; - return [...location, index]; - } -} - -function indexInParent(element: HTMLElement): number { - const parentElement = element.parentElement; - let el = parentElement.firstElementChild; - let index = 0; - - while (el !== element && el !== parentElement.lastElementChild) { - el = el.nextElementSibling; - index++; - } - - return index; -} - -/** - * This will break as soon as DOM structures of the Splitview or Gridview change. - */ -function getGridLocation(element: HTMLElement): number[] { - if (/\bmonaco-grid-view\b/.test(element.parentElement.className)) { - return []; - } - - const index = indexInParent(element.parentElement); - const ancestor = element.parentElement.parentElement.parentElement.parentElement; - return [...getGridLocation(ancestor), index]; -} - -export enum Direction { - Up, - Down, - Left, - Right -} - -function directionOrientation(direction: Direction): Orientation { - return direction === Direction.Up || direction === Direction.Down ? Orientation.VERTICAL : Orientation.HORIZONTAL; -} - -export class GridWidget implements IDisposable { - - private gridview: GridView; - private views = new Map(); - - get orientation(): Orientation { return this.gridview.orientation; } - set orientation(orientation: Orientation) { this.gridview.orientation = orientation; } - - constructor(container: HTMLElement, view: T) { - this.gridview = new GridView(container); - this._addView(view, 0, [0]); - } - - splitView(view: T, direction: Direction, newView: T, size: number): void { - if (this.views.has(newView)) { - throw new Error('Can\'t add same view twice'); - } - - const orientation = directionOrientation(direction); - - if (this.views.size === 1 && this.orientation !== orientation) { - this.orientation = orientation; - } - - const referenceLocation = this.getViewLocation(view); - const location = getRelativeLocation(this.gridview.orientation, referenceLocation, direction); - - this._addView(newView, size, location); - } - - private _addView(view: T, size: number, location: number[]): void { - this.views.set(view, view.element); - this.gridview.addView(view, size, location); - } - - removeView(view: T): void { - if (this.views.size === 1) { - throw new Error('Can\'t remove last view'); - } - - if (!this.views.has(view)) { - throw new Error('View not found'); - } - - const location = this.getViewLocation(view); - this.gridview.removeView(location); - this.views.delete(view); - } - - layout(width: number, height: number): void { - this.gridview.layout(width, height); - } - - swapViews(from: T, to: T): void { - const fromLocation = this.getViewLocation(from); - const toLocation = this.getViewLocation(to); - return this.gridview.swapViews(fromLocation, toLocation); - } - - resizeView(view: T, size: number): void { - const location = this.getViewLocation(view); - return this.gridview.resizeView(location, size); - } - - getViewSize(view: T): number { - const location = this.getViewLocation(view); - return this.gridview.getViewSize(location); - } - - getViews(): GridBranchNode { - return this.gridview.getViews(); - } - - private getViewLocation(view: T): number[] { - const element = this.views.get(view); - - if (!element) { - throw new Error('View not found'); - } - - return getGridLocation(element); - } - - dispose(): void { - this.gridview.dispose(); - } -} +} \ No newline at end of file diff --git a/src/vs/base/common/arrays.ts b/src/vs/base/common/arrays.ts index 7f3672e1b4a..f9ddfdc71aa 100644 --- a/src/vs/base/common/arrays.ts +++ b/src/vs/base/common/arrays.ts @@ -16,6 +16,14 @@ export function tail(array: T[], n: number = 0): T { return array[array.length - (1 + n)]; } +export function tail2(arr: T[]): [T[], T] { + if (arr.length === 0) { + throw new Error('Invalid tail call'); + } + + return [arr.slice(0, arr.length - 1), arr[arr.length - 1]]; +} + export function equals(one: T[], other: T[], itemEquals: (a: T, b: T) => boolean = (a, b) => a === b): boolean { if (one.length !== other.length) { return false; diff --git a/src/vs/base/test/browser/ui/grid/grid.test.ts b/src/vs/base/test/browser/ui/grid/grid.test.ts new file mode 100644 index 00000000000..213771d0438 --- /dev/null +++ b/src/vs/base/test/browser/ui/grid/grid.test.ts @@ -0,0 +1,87 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import * as assert from 'assert'; +import { Direction, Grid, getRelativeLocation, Orientation } from 'vs/base/browser/ui/grid/grid'; +import { TestView } from './util'; + +suite('Grid', function () { + let container: HTMLElement; + + setup(function () { + container = document.createElement('div'); + container.style.position = 'absolute'; + container.style.width = `${800}px`; + container.style.height = `${600}px`; + }); + + teardown(function () { + container = null; + }); + + test('getRelativeLocation', function () { + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Up), [0]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Down), [1]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Left), [0, 0]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Right), [0, 1]); + + assert.deepEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Up), [0, 0]); + assert.deepEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Down), [0, 1]); + assert.deepEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Left), [0]); + assert.deepEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Right), [1]); + + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Up), [4]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Down), [5]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Left), [4, 0]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Right), [4, 1]); + + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Up), [0, 0, 0]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Down), [0, 0, 1]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Left), [0, 0]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Right), [0, 1]); + + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Up), [1, 2, 0]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Down), [1, 2, 1]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Left), [1, 2]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Right), [1, 3]); + + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Up), [1, 2, 3]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Down), [1, 2, 4]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Left), [1, 2, 3, 0]); + assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Right), [1, 2, 3, 1]); + }); + + test('empty', function () { + const view1 = new TestView(100, Number.MAX_VALUE, 100, Number.MAX_VALUE); + const gridview = new Grid(container, view1); + gridview.layout(800, 600); + + assert.deepEqual(view1.size, [800, 600]); + }); + + test('two views vertically', function () { + const view1 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE); + const grid = new Grid(container, view1); + grid.layout(800, 600); + assert.deepEqual(view1.size, [800, 600]); + + const view2 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE); + grid.splitView(view1, Direction.Up, view2, 200); + assert.deepEqual(view1.size, [800, 400]); + assert.deepEqual(view2.size, [800, 200]); + }); + + test('two views horizontally', function () { + const view1 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE); + const grid = new Grid(container, view1); + grid.layout(800, 600); + assert.deepEqual(view1.size, [800, 600]); + + const view2 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE); + grid.splitView(view1, Direction.Right, view2, 300); + assert.deepEqual(view1.size, [500, 600]); + assert.deepEqual(view2.size, [300, 600]); + }); +}); \ No newline at end of file diff --git a/src/vs/base/test/browser/ui/grid/gridview.test.ts b/src/vs/base/test/browser/ui/grid/gridview.test.ts index b9dad15abfe..7b763b34feb 100644 --- a/src/vs/base/test/browser/ui/grid/gridview.test.ts +++ b/src/vs/base/test/browser/ui/grid/gridview.test.ts @@ -4,82 +4,8 @@ *--------------------------------------------------------------------------------------------*/ import * as assert from 'assert'; -import { Emitter } from 'vs/base/common/event'; -import { GridView, IView, GridNode, GridBranchNode, getRelativeLocation, Direction, GridWidget } from 'vs/base/browser/ui/grid/gridview'; -import { Orientation } from 'vs/base/browser/ui/sash/sash'; - -class TestView implements IView { - - private _onDidChange = new Emitter<{ width: number; height: number; }>(); - readonly onDidChange = this._onDidChange.event; - - get minimumWidth(): number { return this._minimumWidth; } - set minimumWidth(size: number) { this._minimumWidth = size; this._onDidChange.fire(); } - - get maximumWidth(): number { return this._maximumWidth; } - set maximumWidth(size: number) { this._maximumWidth = size; this._onDidChange.fire(); } - - get minimumHeight(): number { return this._minimumHeight; } - set minimumHeight(size: number) { this._minimumHeight = size; this._onDidChange.fire(); } - - get maximumHeight(): number { return this._maximumHeight; } - set maximumHeight(size: number) { this._maximumHeight = size; this._onDidChange.fire(); } - - private _element: HTMLElement = document.createElement('div'); - get element(): HTMLElement { this._onDidGetElement.fire(); return this._element; } - - private _onDidGetElement = new Emitter(); - readonly onDidGetElement = this._onDidGetElement.event; - - private _width = 0; - get width(): number { return this._width; } - - private _height = 0; - get height(): number { return this._height; } - - get size(): [number, number] { return [this.width, this.height]; } - - private _onDidLayout = new Emitter<{ width: number; height: number; }>(); - readonly onDidLayout = this._onDidLayout.event; - - private _onDidFocus = new Emitter(); - readonly onDidFocus = this._onDidFocus.event; - - constructor( - private _minimumWidth: number, - private _maximumWidth: number, - private _minimumHeight: number, - private _maximumHeight: number - ) { - assert(_minimumWidth <= _maximumWidth, 'gridview view minimum width must be <= maximum width'); - assert(_minimumHeight <= _maximumHeight, 'gridview view minimum height must be <= maximum height'); - } - - layout(width: number, height: number): void { - this._width = width; - this._height = height; - this._onDidLayout.fire({ width, height }); - } - - focus(): void { - this._onDidFocus.fire(); - } - - dispose(): void { - this._onDidChange.dispose(); - this._onDidGetElement.dispose(); - this._onDidLayout.dispose(); - this._onDidFocus.dispose(); - } -} - -function nodesToArrays(node: GridNode): any { - if (node instanceof GridBranchNode) { - return node.children.map(nodesToArrays); - } else { - return node.view; - } -} +import { GridView, IView } from 'vs/base/browser/ui/grid/gridview'; +import { nodesToArrays, TestView } from './util'; suite('Gridview', function () { let container: HTMLElement; @@ -95,38 +21,6 @@ suite('Gridview', function () { container = null; }); - test('getRelativeLocation', function () { - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Up), [0]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Down), [1]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Left), [0, 0]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0], Direction.Right), [0, 1]); - - assert.deepEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Up), [0, 0]); - assert.deepEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Down), [0, 1]); - assert.deepEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Left), [0]); - assert.deepEqual(getRelativeLocation(Orientation.HORIZONTAL, [0], Direction.Right), [1]); - - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Up), [4]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Down), [5]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Left), [4, 0]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [4], Direction.Right), [4, 1]); - - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Up), [0, 0, 0]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Down), [0, 0, 1]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Left), [0, 0]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [0, 0], Direction.Right), [0, 1]); - - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Up), [1, 2, 0]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Down), [1, 2, 1]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Left), [1, 2]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2], Direction.Right), [1, 3]); - - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Up), [1, 2, 3]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Down), [1, 2, 4]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Left), [1, 2, 3, 0]); - assert.deepEqual(getRelativeLocation(Orientation.VERTICAL, [1, 2, 3], Direction.Right), [1, 2, 3, 1]); - }); - test('empty gridview is empty', function () { const gridview = new GridView(container); assert.deepEqual(gridview.getViews(), { children: [] }); @@ -213,51 +107,4 @@ suite('Gridview', function () { gridview.dispose(); }); -}); - -suite('GridWidget', function () { - let container: HTMLElement; - - setup(function () { - container = document.createElement('div'); - container.style.position = 'absolute'; - container.style.width = `${800}px`; - container.style.height = `${600}px`; - }); - - teardown(function () { - container = null; - }); - - test('empty', function () { - const view1 = new TestView(100, Number.MAX_VALUE, 100, Number.MAX_VALUE); - const gridview = new GridWidget(container, view1); - gridview.layout(800, 600); - - assert.deepEqual(view1.size, [800, 600]); - }); - - test('two views vertically', function () { - const view1 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE); - const grid = new GridWidget(container, view1); - grid.layout(800, 600); - assert.deepEqual(view1.size, [800, 600]); - - const view2 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE); - grid.splitView(view1, Direction.Up, view2, 200); - assert.deepEqual(view1.size, [800, 400]); - assert.deepEqual(view2.size, [800, 200]); - }); - - test('two views horizontally', function () { - const view1 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE); - const grid = new GridWidget(container, view1); - grid.layout(800, 600); - assert.deepEqual(view1.size, [800, 600]); - - const view2 = new TestView(50, Number.MAX_VALUE, 50, Number.MAX_VALUE); - grid.splitView(view1, Direction.Right, view2, 300); - assert.deepEqual(view1.size, [500, 600]); - assert.deepEqual(view2.size, [300, 600]); - }); }); \ No newline at end of file diff --git a/src/vs/base/test/browser/ui/grid/util.ts b/src/vs/base/test/browser/ui/grid/util.ts new file mode 100644 index 00000000000..17ce7c776db --- /dev/null +++ b/src/vs/base/test/browser/ui/grid/util.ts @@ -0,0 +1,81 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import * as assert from 'assert'; +import { Emitter, Event } from 'vs/base/common/event'; +import { IView, GridNode, GridBranchNode, } from 'vs/base/browser/ui/grid/gridview'; + +export class TestView implements IView { + + private _onDidChange = new Emitter<{ width: number; height: number; }>(); + readonly onDidChange = this._onDidChange.event; + + get minimumWidth(): number { return this._minimumWidth; } + set minimumWidth(size: number) { this._minimumWidth = size; this._onDidChange.fire(); } + + get maximumWidth(): number { return this._maximumWidth; } + set maximumWidth(size: number) { this._maximumWidth = size; this._onDidChange.fire(); } + + get minimumHeight(): number { return this._minimumHeight; } + set minimumHeight(size: number) { this._minimumHeight = size; this._onDidChange.fire(); } + + get maximumHeight(): number { return this._maximumHeight; } + set maximumHeight(size: number) { this._maximumHeight = size; this._onDidChange.fire(); } + + private _element: HTMLElement = document.createElement('div'); + get element(): HTMLElement { this._onDidGetElement.fire(); return this._element; } + + private _onDidGetElement = new Emitter(); + readonly onDidGetElement = this._onDidGetElement.event; + + private _width = 0; + get width(): number { return this._width; } + + private _height = 0; + get height(): number { return this._height; } + + get size(): [number, number] { return [this.width, this.height]; } + + private _onDidLayout = new Emitter<{ width: number; height: number; }>(); + readonly onDidLayout: Event<{ width: number; height: number; }> = this._onDidLayout.event; + + private _onDidFocus = new Emitter(); + readonly onDidFocus: Event = this._onDidFocus.event; + + constructor( + private _minimumWidth: number, + private _maximumWidth: number, + private _minimumHeight: number, + private _maximumHeight: number + ) { + assert(_minimumWidth <= _maximumWidth, 'gridview view minimum width must be <= maximum width'); + assert(_minimumHeight <= _maximumHeight, 'gridview view minimum height must be <= maximum height'); + } + + layout(width: number, height: number): void { + this._width = width; + this._height = height; + this._onDidLayout.fire({ width, height }); + } + + focus(): void { + this._onDidFocus.fire(); + } + + dispose(): void { + this._onDidChange.dispose(); + this._onDidGetElement.dispose(); + this._onDidLayout.dispose(); + this._onDidFocus.dispose(); + } +} + +export function nodesToArrays(node: GridNode): any { + if (node instanceof GridBranchNode) { + return node.children.map(nodesToArrays); + } else { + return node.view; + } +} \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts b/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts index 9a1159974b9..5c2b6a3dc8f 100644 --- a/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts +++ b/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts @@ -14,7 +14,7 @@ import { Event, Emitter, once } from 'vs/base/common/event'; import { contrastBorder } from 'vs/platform/theme/common/colorRegistry'; import { INextEditorGroupsService, Direction, CopyKind } from 'vs/workbench/services/editor/common/nextEditorGroupsService'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; -import { GridWidget, Direction as GridViewDirection } from 'vs/base/browser/ui/grid/gridview'; +import { Grid, Direction as GridViewDirection } from 'vs/base/browser/ui/grid/grid'; import { NextEditorGroupView, IGroupsAccessor } from 'vs/workbench/browser/parts/editor2/nextEditorGroupView'; import { GroupIdentifier, EditorOptions, TextEditorOptions } from 'vs/workbench/common/editor'; import { values } from 'vs/base/common/map'; @@ -53,7 +53,7 @@ export class NextEditorPart extends Part implements INextEditorGroupsService { private mostRecentActiveGroups: GroupIdentifier[] = []; private gridContainer: HTMLElement; - private gridWidget: GridWidget; + private gridWidget: Grid; constructor( id: string, @@ -205,7 +205,7 @@ export class NextEditorPart extends Part implements INextEditorGroupsService { // Grid widget const initialGroup = this.doCreateGroupView(); - this.gridWidget = this._register(new GridWidget(this.gridContainer, initialGroup)); // TODO@grid restore UI state + this.gridWidget = this._register(new Grid(this.gridContainer, initialGroup)); // TODO@grid restore UI state // Set group active this.doSetGroupActive(initialGroup); diff --git a/test/grid.html b/test/grid.html index 45795b2b155..e87cb596d1a 100644 --- a/test/grid.html +++ b/test/grid.html @@ -27,7 +27,7 @@ _debug(grid.gridview.root); } - require(['vs/base/browser/ui/grid/gridview', 'vs/base/common/event'], ({ GridWidget, Direction }, { Event }) => { + require(['vs/base/browser/ui/grid/grid', 'vs/base/common/event'], ({ Grid, Direction }, { Event }) => { let dragging; let draggingOver; @@ -106,7 +106,7 @@ // document.body.appendChild(box); const view1 = createView(); - const grid = new GridWidget(document.body, view1); + const grid = new Grid(document.body, view1); const layout = () => grid.layout(document.body.clientWidth, document.body.clientHeight); window.onresize = () => { layout();