Skip to content
This repository has been archived by the owner on Jul 30, 2018. It is now read-only.

Commit

Permalink
Use PointerEvents
Browse files Browse the repository at this point in the history
  • Loading branch information
@kitsonk
kitsonk committed Sep 20, 2017
1 parent ba7afc7 commit ddc825d
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 108 deletions.
26 changes: 9 additions & 17 deletions src/meta/Drag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -98,7 +95,7 @@ class DragController {
state.invalidate();
}

private _onDragStop = (e: MouseEvent & TouchEvent) => {
private _onDragStop = (e: PointerEvent) => {
const { _dragging } = this;
if (!_dragging) {
return;
Expand All @@ -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 {
Expand Down Expand Up @@ -163,9 +157,7 @@ export default class Drag extends Base {
private boundInvalidate = this.invalidate.bind(this);

public get(key: string): Readonly<DragResults> {
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) {
Expand Down
112 changes: 21 additions & 91 deletions tests/unit/meta/Drag.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand All @@ -88,7 +88,7 @@ registerSuite({

resolveRAF();

sendEvent(div.firstChild as Element, 'mousedown', {
sendEvent(div.firstChild as Element, 'pointerdown', {
eventInit: {
bubbles: true,
pageX: 100,
Expand All @@ -98,7 +98,7 @@ registerSuite({

resolveRAF();

sendEvent(div.firstChild as Element, 'mousemove', {
sendEvent(div.firstChild as Element, 'pointermove', {
eventInit: {
bubbles: true,
pageX: 110,
Expand All @@ -108,7 +108,7 @@ registerSuite({

resolveRAF();

sendEvent(div.firstChild as Element, 'mouseup', {
sendEvent(div.firstChild as Element, 'pointerup', {
eventInit: {
bubbles: true,
pageX: 105,
Expand Down Expand Up @@ -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[] = [];

Expand All @@ -235,7 +163,7 @@ registerSuite({

resolveRAF();

sendEvent(div.firstChild as Element, 'mousedown', {
sendEvent(div.firstChild as Element, 'pointerdown', {
eventInit: {
bubbles: true,
pageX: 100,
Expand All @@ -245,23 +173,23 @@ registerSuite({

resolveRAF();

sendEvent(div.firstChild as Element, 'mousemove', {
sendEvent(div.firstChild as Element, 'pointermove', {
eventInit: {
bubbles: true,
pageX: 105,
pageY: 55
}
});

sendEvent(div.firstChild as Element, 'mousemove', {
sendEvent(div.firstChild as Element, 'pointermove', {
eventInit: {
bubbles: true,
pageX: 110,
pageY: 60
}
});

sendEvent(div.firstChild as Element, 'mousemove', {
sendEvent(div.firstChild as Element, 'pointermove', {
eventInit: {
bubbles: true,
pageX: 115,
Expand All @@ -271,7 +199,7 @@ registerSuite({

resolveRAF();

sendEvent(div.firstChild as Element, 'mouseup', {
sendEvent(div.firstChild as Element, 'pointerup', {
eventInit: {
bubbles: true,
pageX: 120,
Expand Down Expand Up @@ -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
}
});

Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down

0 comments on commit ddc825d

Please sign in to comment.