grid dnd

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

@@ -7,9 +7,10 @@
 
 import 'vs/css!./gridview';
 import { Orientation } from 'vs/base/browser/ui/sash/sash';
-import { IDisposable } from 'vs/base/common/lifecycle';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { tail2 as tail, equals } from 'vs/base/common/arrays';
 import { orthogonal, IView, GridView, GridBranchNode } from './gridview';
+import { domEvent } from 'vs/base/browser/event';
 
 export { Orientation } from './gridview';
 
@@ -72,18 +73,51 @@ function directionOrientation(direction: Direction): Orientation {
 	return direction === Direction.Up || direction === Direction.Down ? Orientation.VERTICAL : Orientation.HORIZONTAL;
 }
 
+export interface IGridDnd {
+
+}
+
+export interface IGridOptions {
+	dnd?: IGridDnd;
+}
+
+class DndController implements IDisposable {
+
+	private disposables: IDisposable[] = [];
+
+	constructor(container: HTMLElement, gridview: GridView) {
+		domEvent(container, 'dragover')(this.onDragOver, this, this.disposables);
+	}
+
+	private onDragOver(ev: DragEvent) {
+		// find target element
+		console.log('DRAG OVER');
+	}
+
+	dispose(): void {
+		this.disposables = dispose(this.disposables);
+	}
+}
+
 export class Grid<T extends IView> implements IDisposable {
 
 	private gridview: GridView;
 	private views = new Map<T, HTMLElement>();
+	private disposables: IDisposable[] = [];
 
 	get orientation(): Orientation { return this.gridview.orientation; }
 	set orientation(orientation: Orientation) { this.gridview.orientation = orientation; }
 
-	constructor(container: HTMLElement, view: T) {
+	constructor(container: HTMLElement, view: T, options: IGridOptions = {}) {
 		this.gridview = new GridView(container);
+		this.disposables.push(this.gridview);
+
 		this.views.set(view, view.element);
 		this.gridview.addView(view, 0, [0]);
+
+		if (options.dnd) {
+			this.disposables.push(new DndController(container, this.gridview));
+		}
 	}
 
 	layout(width: number, height: number): void {
@@ -180,6 +214,6 @@ export class Grid<T extends IView> implements IDisposable {
 	}
 
 	dispose(): void {
-		this.gridview.dispose();
+		this.disposables = dispose(this.disposables);
 	}
 }

test/grid.html

@@ -38,37 +38,37 @@
 				element.className = 'box';
 				element.style.backgroundColor = `hsl(${Math.round(Math.random() * 360)}, 72%, 72%)`;
 
-				element.addEventListener('dragover', ev => {
-					ev.preventDefault();
+				// element.addEventListener('dragover', ev => {
+				// 	ev.preventDefault();
 
-					if (draggingOver === view) {
-						return;
-					}
+				// 	if (draggingOver === view) {
+				// 		return;
+				// 	}
 
-					if (draggingOver) {
-						draggingOver.element.style.opacity = 1;
-					}
+				// 	if (draggingOver) {
+				// 		draggingOver.element.style.opacity = 1;
+				// 	}
 
-					if (dragging !== view) {
-						element.style.opacity = 0.5;
-					}
+				// 	if (dragging !== view) {
+				// 		element.style.opacity = 0.5;
+				// 	}
 
-					draggingOver = view;
-				});
+				// 	draggingOver = view;
+				// });
 
-				element.addEventListener('drop', ev => {
-					ev.preventDefault();
+				// element.addEventListener('drop', ev => {
+				// 	ev.preventDefault();
 
-					if (draggingOver) {
-						draggingOver.element.style.opacity = 1;
-					}
+				// 	if (draggingOver) {
+				// 		draggingOver.element.style.opacity = 1;
+				// 	}
 
-					if (!dragging) {
-						return;
-					}
+				// 	if (!dragging) {
+				// 		return;
+				// 	}
 
-					grid.swapViews(dragging, view);
-				});
+				// 	grid.swapViews(dragging, view);
+				// });
 
 				let label = document.createElement('div');
 				label.className = 'box-label';
@@ -106,7 +106,7 @@
 			// document.body.appendChild(box);
 
 			const view1 = createView();
-			const grid = new Grid(document.body, view1);
+			const grid = new Grid(document.body, view1, { dnd: {} });
 			const layout = () => grid.layout(document.body.clientWidth, document.body.clientHeight);
 			window.onresize = () => {
 				layout();