mirror of
https://github.com/microsoft/vscode.git
synced 2026-09-27 10:37:38 +01:00
the Grid
This commit is contained in:
Joao Moreno
@@ -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<T extends IView> implements IDisposable {
|
||||
|
||||
private gridview: GridView;
|
||||
private views = new Map<T, HTMLElement>();
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
@@ -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<T>(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<T extends IView> implements IDisposable {
|
||||
|
||||
private gridview: GridView;
|
||||
private views = new Map<T, HTMLElement>();
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -16,6 +16,14 @@ export function tail<T>(array: T[], n: number = 0): T {
|
||||
return array[array.length - (1 + n)];
|
||||
}
|
||||
|
||||
export function tail2<T>(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<T>(one: T[], other: T[], itemEquals: (a: T, b: T) => boolean = (a, b) => a === b): boolean {
|
||||
if (one.length !== other.length) {
|
||||
return false;
|
||||
|
||||
@@ -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]);
|
||||
});
|
||||
});
|
||||
@@ -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<void>();
|
||||
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<void>();
|
||||
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]);
|
||||
});
|
||||
});
|
||||
@@ -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<void>();
|
||||
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<void>();
|
||||
readonly onDidFocus: Event<void> = 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;
|
||||
}
|
||||
}
|
||||
@@ -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<NextEditorGroupView>;
|
||||
private gridWidget: Grid<NextEditorGroupView>;
|
||||
|
||||
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);
|
||||
|
||||
+2
-2
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user