cha0s/avocado-old
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: use input normalizer

Browse Source
This commit is contained in:
cha0s 2019-05-23 04:52:27 -05:00
parent 4f060857cf
commit 5df58532dc
1 changed files with 17 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/graphics/stage.js
View File

@ -1,4 +1,5 @@
import {compose, Property} from '@avocado/core';
import {InputNormalizer} from '@avocado/input';
import {Vector} from '@avocado/math';
import {Container} from './container';
@ -40,18 +41,12 @@ export class Stage extends decorate(Container) {
// Event handlers.
this.onWindowResize = this.onWindowResize.bind(this);
window.addEventListener('resize', this.onWindowResize);
this.onPointerDown = this.onPointerDown.bind(this);
for (const start of ['pointerdown', 'touchstart']) {
this.element.addEventListener(start, this.onPointerDown);
}
this.onPointerMove = this.onPointerMove.bind(this);
for (const move of ['pointermove', 'touchmove']) {
this.element.addEventListener(move, this.onPointerMove);
}
this.onPointerUp = this.onPointerUp.bind(this);
for (const end of ['pointerup', 'touchend']) {
this.element.addEventListener(end, this.onPointerUp);
}
// Normalize input.
this.inputNormalizer = new InputNormalizer();
this.inputNormalizer.listen(this.element);
this.inputNormalizer.on('pointerDown', this.onPointerDown, this);
this.inputNormalizer.on('pointerMove', this.onPointerMove, this);
this.inputNormalizer.on('pointerUp', this.onPointerUp, this);
// Put the renderer and UI in the container element, and mark it
// focusable.
this.element.appendChild(this.renderer.element);
@ -91,15 +86,10 @@ export class Stage extends decorate(Container) {
if (this.parent) {
this.parent.removeChild(this.renderer.element);
}
for (const start of ['pointerdown', 'touchstart']) {
this.element.removeEventListener(start, this.onPointerDown);
}
for (const move of ['pointermove', 'touchmove']) {
this.element.removeEventListener(move, this.onPointerMove);
}
for (const end of ['pointerup', 'touchend']) {
this.element.removeEventListener(end, this.onPointerUp);
}
this.inputNormalizer.off('pointerDown', this.onPointerDown, this);
this.inputNormalizer.off('pointerMove', this.onPointerMove, this);
this.inputNormalizer.off('pointerUp', this.onPointerUp, this);
this.inputNormalizer.destroy();
}
get displaySize() {
@ -139,18 +129,18 @@ export class Stage extends decorate(Container) {
}
onPointerDown(event) {
const stageEvent = this.stageEventFromNativeEvent(event);
this.emit('pointerDown', stageEvent);
event.position = this.transformCanvasPosition(event.position);
this.emit('pointerDown', event);
}
onPointerMove(event) {
const stageEvent = this.stageEventFromNativeEvent(event);
this.emit('pointerMove', stageEvent);
event.position = this.transformCanvasPosition(event.position);
this.emit('pointerMove', event);
}
onPointerUp(event) {
const stageEvent = this.stageEventFromNativeEvent(event);
this.emit('pointerUp', stageEvent);
event.position = this.transformCanvasPosition(event.position);
this.emit('pointerUp', event);
}
onWindowResize() {
@ -214,15 +204,6 @@ export class Stage extends decorate(Container) {
this._uiResolve();
}
stageEventFromNativeEvent(event) {
event = event || window.event;
const position = this.transformEventPosition(event);
const stageEvent = new StageEvent();
stageEvent._position = position;
stageEvent._target = event.target;
return stageEvent;
}
transformCanvasPosition(position) {
const rect = this.renderer.element.getBoundingClientRect();
const topLeft = [rect.x, rect.y];
@ -233,19 +214,6 @@ export class Stage extends decorate(Container) {
);
}
transformEventPosition(event) {
let position;
if (window.PointerEvent && event instanceof window.PointerEvent) {
position = [event.clientX, event.clientY];
}
else if (window.TouchEvent && event instanceof window.TouchEvent) {
const touches = event.changedTouches;
const touch = touches[0];
position = [touch.clientX, touch.clientY];
}
return this.transformCanvasPosition(position);
}
get transformRatio() {
return this._transformRatio;
}