diff --git a/src/meta/Drag.ts b/src/meta/Drag.ts index 6270c888..fcd59553 100644 --- a/src/meta/Drag.ts +++ b/src/meta/Drag.ts @@ -39,11 +39,8 @@ const emptyResults = Object.freeze({ * Return the x/y position for an event * @param e The MouseEvent or TouchEvent */ -function getPosition(e: MouseEvent & TouchEvent): Position { - return e.type.match(/^touch/) ? { - x: e.changedTouches[0].screenX, - y: e.changedTouches[0].screenY - } : { +function getPosition(e: PointerEvent): Position { + return { x: e.pageX, y: e.pageY }; @@ -74,7 +71,7 @@ class DragController { } } - private _onDragStart = (e: MouseEvent & TouchEvent) => { + private _onDragStart = (e: PointerEvent) => { const data = this._getData(e.target as HTMLElement); if (data) { const { state, target } = data; @@ -86,7 +83,7 @@ class DragController { } // else, we are ignoring the event } - private _onDrag = (e: MouseEvent & TouchEvent) => { + private _onDrag = (e: PointerEvent) => { const { _dragging } = this; if (!_dragging) { return; @@ -98,7 +95,7 @@ class DragController { state.invalidate(); } - private _onDragStop = (e: MouseEvent & TouchEvent) => { + private _onDragStop = (e: PointerEvent) => { const { _dragging } = this; if (!_dragging) { return; @@ -116,12 +113,9 @@ class DragController { constructor() { const win: Window = global.window; - win.addEventListener('mousedown', this._onDragStart); - win.addEventListener('mousemove', this._onDrag, true); - win.addEventListener('mouseup', this._onDragStop, true); - win.addEventListener('touchstart', this._onDragStart); - win.addEventListener('touchmove', this._onDrag, true); - win.addEventListener('touchend', this._onDragStop, true); + win.addEventListener('pointerdown', this._onDragStart); + win.addEventListener('pointermove', this._onDrag, true); + win.addEventListener('pointerup', this._onDragStop, true); } public get(node: HTMLElement, invalidate: () => void): DragResults { @@ -163,9 +157,7 @@ export default class Drag extends Base { private boundInvalidate = this.invalidate.bind(this); public get(key: string): Readonly { - this.requireNode(key); - - const node = this.nodes.get(key); + const node = this.getNode(key); // if we don't have a reference to the node yet, return an empty set of results if (!node) { diff --git a/tests/unit/meta/Drag.ts b/tests/unit/meta/Drag.ts index febdff1c..bace2d34 100644 --- a/tests/unit/meta/Drag.ts +++ b/tests/unit/meta/Drag.ts @@ -62,7 +62,7 @@ registerSuite({ document.body.removeChild(div); }, - 'mouse dragging a node'() { + 'pointer dragging a node'() { const dragResults: DragResults[] = []; class TestWidget extends ProjectorMixin(ThemeableMixin(WidgetBase)) { @@ -88,7 +88,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild as Element, 'mousedown', { + sendEvent(div.firstChild as Element, 'pointerdown', { eventInit: { bubbles: true, pageX: 100, @@ -98,7 +98,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild as Element, 'mousemove', { + sendEvent(div.firstChild as Element, 'pointermove', { eventInit: { bubbles: true, pageX: 110, @@ -108,7 +108,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild as Element, 'mouseup', { + sendEvent(div.firstChild as Element, 'pointerup', { eventInit: { bubbles: true, pageX: 105, @@ -137,78 +137,6 @@ registerSuite({ document.body.removeChild(div); }, - 'touch dragging a node'() { - const dragResults: DragResults[] = []; - - class TestWidget extends ProjectorMixin(ThemeableMixin(WidgetBase)) { - render() { - dragResults.push(this.meta(Drag).get('root')); - return v('div', { - innerHTML: 'hello world', - key: 'root', - styles: { - width: '100px', - height: '100px' - } - }); - } - } - - const div = document.createElement('div'); - - document.body.appendChild(div); - - const widget = new TestWidget(); - widget.append(div); - - resolveRAF(); - - sendEvent(div.firstChild as Element, 'touchstart', { - eventInit: { - bubbles: true, - changedTouches: [ { screenX: 100, screenY: 50 } ] - } - }); - - resolveRAF(); - - sendEvent(div.firstChild as Element, 'touchmove', { - eventInit: { - bubbles: true, - changedTouches: [ { screenX: 110, screenY: 55 } ] - } - }); - - resolveRAF(); - - sendEvent(div.firstChild as Element, 'touchend', { - eventInit: { - bubbles: true, - changedTouches: [ { screenX: 105, screenY: 45 } ] - } - }); - - 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 - } - ], 'the stack of should represent a drag state'); - - widget.destroy(); - document.body.removeChild(div); - }, - 'delta should be culmative between renders'() { const dragResults: DragResults[] = []; @@ -235,7 +163,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild as Element, 'mousedown', { + sendEvent(div.firstChild as Element, 'pointerdown', { eventInit: { bubbles: true, pageX: 100, @@ -245,7 +173,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild as Element, 'mousemove', { + sendEvent(div.firstChild as Element, 'pointermove', { eventInit: { bubbles: true, pageX: 105, @@ -253,7 +181,7 @@ registerSuite({ } }); - sendEvent(div.firstChild as Element, 'mousemove', { + sendEvent(div.firstChild as Element, 'pointermove', { eventInit: { bubbles: true, pageX: 110, @@ -261,7 +189,7 @@ registerSuite({ } }); - sendEvent(div.firstChild as Element, 'mousemove', { + sendEvent(div.firstChild as Element, 'pointermove', { eventInit: { bubbles: true, pageX: 115, @@ -271,7 +199,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild as Element, 'mouseup', { + sendEvent(div.firstChild as Element, 'pointerup', { eventInit: { bubbles: true, pageX: 120, @@ -326,19 +254,21 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild as Element, 'touchmove', { + sendEvent(div.firstChild as Element, 'pointermove', { eventInit: { bubbles: true, - changedTouches: [ { screenX: 110, screenY: 55 } ] + pageX: 115, + pageY: 65 } }); resolveRAF(); - sendEvent(div.firstChild as Element, 'touchend', { + sendEvent(div.firstChild as Element, 'pointerup', { eventInit: { bubbles: true, - changedTouches: [ { screenX: 105, screenY: 45 } ] + pageX: 120, + pageY: 70 } }); @@ -383,7 +313,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild!.firstChild as Element, 'mousedown', { + sendEvent(div.firstChild!.firstChild as Element, 'pointerdown', { eventInit: { bubbles: true, pageX: 100, @@ -393,7 +323,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild!.firstChild as Element, 'mousemove', { + sendEvent(div.firstChild!.firstChild as Element, 'pointermove', { eventInit: { bubbles: true, pageX: 110, @@ -403,7 +333,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild!.firstChild as Element, 'mouseup', { + sendEvent(div.firstChild!.firstChild as Element, 'pointerup', { eventInit: { bubbles: true, pageX: 105, @@ -466,7 +396,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild!.firstChild as Element, 'mousedown', { + sendEvent(div.firstChild!.firstChild as Element, 'pointerdown', { eventInit: { bubbles: true, pageX: 100, @@ -476,7 +406,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild!.firstChild as Element, 'mousemove', { + sendEvent(div.firstChild!.firstChild as Element, 'pointermove', { eventInit: { bubbles: true, pageX: 110, @@ -486,7 +416,7 @@ registerSuite({ resolveRAF(); - sendEvent(div.firstChild!.firstChild as Element, 'mouseup', { + sendEvent(div.firstChild!.firstChild as Element, 'pointerup', { eventInit: { bubbles: true, pageX: 105,