Support dragging on child nodes

dojo · Aug 23, 2017 · 7db2806 · 7db2806
1 parent 15509ff
commit 7db2806
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 6 deletions.
diff --git a/src/meta/Drag.ts b/src/meta/Drag.ts
@@ -65,10 +65,20 @@ class DragController {
 	private _nodeMap = new WeakMap<HTMLElement, NodeData>();
 	private _dragging: HTMLElement | undefined = undefined;
 
+	private _getData(target: HTMLElement): { state: NodeData, target: HTMLElement } | undefined {
+		if (this._nodeMap.has(target)) {
+			return { state: this._nodeMap.get(target)!, target };
+		}
+		if (target.parentElement) {
+			return this._getData(target.parentElement);
+		}
+	}
+
 	private _onDragStart = (e: MouseEvent & TouchEvent) => {
-		const state = this._nodeMap.get(e.target as HTMLElement);
-		if (state) {
-			this._dragging = e.target as HTMLElement;
+		const data = this._getData(e.target as HTMLElement);
+		if (data) {
+			const { state, target } = data;
+			this._dragging = target;
 			state.dragResults.isDragging = true;
 			state.last = state.start = getPosition(e);
 			state.dragResults.delta = { x: 0, y: 0 };

diff --git a/tests/unit/meta/Drag.ts b/tests/unit/meta/Drag.ts
@@ -24,7 +24,7 @@ const emptyResults: DragResults = {
 };
 
 registerSuite({
-	name: 'meta/Drag',
+	name: 'support/meta/Drag',
 
 	beforeEach() {
 		rAF = stub(global, 'requestAnimationFrame');
@@ -353,7 +353,7 @@ registerSuite({
 		document.body.removeChild(div);
 	},
 
-	'dragging on not a drag node'() {
+	'dragging where descendent is target'() {
 		const dragResults: DragResults[] = [];
 
 		class TestWidget extends ProjectorMixin(ThemeableMixin(WidgetBase)) {
@@ -413,10 +413,93 @@ registerSuite({
 
 		resolveRAF();
 
+		assert.deepEqual(dragResults, [
+			emptyResults,
+			emptyResults,
+			{
+				delta: { x: 0, y: 0 },
+				isDragging: true
+			}, {
+				delta: { x: 10, y: 5 },
+				isDragging: true
+			}, {
+				delta: { x: -5, y: -10 },
+				isDragging: false
+			}
+		], 'dragging should be attributed to parent node');
+
+		widget.destroy();
+		document.body.removeChild(div);
+	},
+
+	'non draggable node'() {
+		const dragResults: DragResults[] = [];
+
+		class TestWidget extends ProjectorMixin(ThemeableMixin(WidgetBase)) {
+			render() {
+				dragResults.push(this.meta(Drag).get('child2'));
+				return v('div', {
+					key: 'root',
+					styles: {
+						width: '100px',
+						height: '100px'
+					}
+				}, [
+					v('div', {
+						innerHTML: 'Hello World',
+						key: 'child1'
+					}),
+					v('div', {
+						innerHTML: 'Hello Wolrd',
+						key: 'child2'
+					})
+				]);
+			}
+		}
+
+		const div = document.createElement('div');
+
+		document.body.appendChild(div);
+
+		const widget = new TestWidget();
+		widget.append(div);
+
+		resolveRAF();
+
+		sendEvent(div.firstChild!.firstChild as Element, 'mousedown', {
+			eventInit: {
+				bubbles: true,
+				pageX: 100,
+				pageY: 50
+			}
+		});
+
+		resolveRAF();
+
+		sendEvent(div.firstChild!.firstChild as Element, 'mousemove', {
+			eventInit: {
+				bubbles: true,
+				pageX: 110,
+				pageY: 55
+			}
+		});
+
+		resolveRAF();
+
+		sendEvent(div.firstChild!.firstChild as Element, 'mouseup', {
+			eventInit: {
+				bubbles: true,
+				pageX: 105,
+				pageY: 45
+			}
+		});
+
+		resolveRAF();
+
 		assert.deepEqual(dragResults, [
 			emptyResults,
 			emptyResults
-		], 'there should not be drag information');
+		], 'there should be no drag results');
 
 		widget.destroy();
 		document.body.removeChild(div);