move: first steps

src/vs/base/browser/ui/grid/gridview.ts

@@ -27,8 +27,6 @@ TODO:
 - GridView.orientation setter/getter
 - implement move
 
-- create grid wrapper which lets you talk only abut views, not locations
-	- GridView.getLocation(HTMLElement)
 - create grid wrapper which automatically sizes the new views
 
 - NEW: 	add a color to show a border where the sash is, similar to how other
@@ -142,16 +140,14 @@ class BranchNode implements ISplitView, IDisposable {
 		this.onDidChildrenChange();
 	}
 
-	removeChild(index: number): Node {
+	removeChild(index: number): void {
 		if (index < 0 || index >= this.children.length) {
 			throw new Error('Invalid index');
 		}
 
-		const child = this.children[index];
 		this.splitview.removeView(index);
 		this.children.splice(index, 1);
 		this.onDidChildrenChange();
-		return child;
 	}
 
 	resizeChild(index: number, size: number): void {
@@ -288,7 +284,7 @@ export class GridView implements IGrid, IDisposable {
 		}
 	}
 
-	removeView(location: number[]): void {
+	removeView(location: number[]): IView {
 		const [rest, index] = tail(location);
 		const [pathToParent, parent] = this.getNode(rest);
 
@@ -296,6 +292,12 @@ export class GridView implements IGrid, IDisposable {
 			throw new Error('Invalid location');
 		}
 
+		const node = parent.children[index];
+
+		if (!(node instanceof LeafNode)) {
+			throw new Error('Invalid location');
+		}
+
 		parent.removeChild(index);
 
 		if (parent.children.length === 0) {
@@ -303,15 +305,18 @@ export class GridView implements IGrid, IDisposable {
 		}
 
 		if (parent.children.length > 1) {
-			return;
+			return node.view;
 		}
 
 		const [, grandParent] = tail(pathToParent);
 		const [, parentIndex] = tail(rest);
 
-		const sibling = parent.removeChild(0);
+		const sibling = parent.children[0];
+		parent.removeChild(0);
 		grandParent.removeChild(parentIndex);
 		grandParent.addChild(sibling, 20, parentIndex);
+
+		return node.view;
 	}
 
 	layout(width: number, height: number): void {
@@ -320,7 +325,9 @@ export class GridView implements IGrid, IDisposable {
 	}
 
 	moveView(from: number[], to: number[]): void {
-		throw new Error('Method not implemented.');
+		const size = this.getViewSize(from);
+		const view = this.removeView(from);
+		this.addView(view, size, to);
 	}
 
 	resizeView(location: number[], size: number): void {

test/grid.html

@@ -28,16 +28,32 @@
 		}
 
 		require(['vs/base/browser/ui/grid/gridview', 'vs/base/common/event'], ({ SplitGridView, Direction }, { Event }) => {
+			const views = new Map();
+
 			function createView() {
-				let id = ++count;
+				let id = `${++count}`;
 
 				let element = document.createElement('div');
-				element.style.width = '100%';
-				element.style.height = '100%';
+				element.className = 'box';
 				element.style.backgroundColor = `hsl(${Math.round(Math.random() * 360)}, 72%, 72%)`;
-				element.textContent = `hello${id}`;
 
-				return {
+				element.addEventListener('dragover', ev => ev.preventDefault());
+				element.addEventListener('drop', ev => {
+					ev.preventDefault();
+
+					const from = views.get(ev.dataTransfer.getData('text'));
+					grid.moveView(from, view);
+				});
+
+				let label = document.createElement('div');
+				label.className = 'box-label';
+				label.draggable = true;
+				element.appendChild(label);
+				label.textContent = `hello${id}`;
+
+				label.addEventListener('dragstart', ev => ev.dataTransfer.setData('text', id));
+
+				const view = {
 					ID: `hello${id}`,
 					element,
 					minimumWidth: 100,
@@ -46,9 +62,12 @@
 					maximumHeight: Number.POSITIVE_INFINITY,
 					onDidChange: Event.None,
 					layout(width, height) {
-						element.textContent = `hello${id} (${width}, ${height})`
+						label.textContent = `hello${id} (${width}, ${height})`
 					}
-				};
+				}
+
+				views.set(id, view);
+				return view;
 			}
 
 			const view1 = createView();
@@ -104,30 +123,21 @@
 			margin: 0;
 		}
 
-		.node {
+		.box {
+			display: flex;
 			width: 100%;
 			height: 100%;
-			box-sizing: border-box;
-			display: flex;
-			align-items: center;
 			justify-content: center;
+			align-items: center;
 		}
 
-		.action {
-			display: inline-block;
-			width: 16px;
-			height: 16px;
-			border: 1px solid #3c3c3c;
-			text-align: center;
-			line-height: 16px;
-			border-radius: 3px;
-		}
-
-		.action:hover {
+		.box-label {
+			background: rgba(255, 255, 255, 0.5);
 			cursor: pointer;
-			background-color: #ffffff54;
 		}
 
+		/* Borders */
+
 		.split-view-view {
 			position: relative;
 		}