From 5df58532dcbc0a2563758ef9c9ed60f069608807 Mon Sep 17 00:00:00 2001
From: cha0s <git@cha0s.io>
Date: Thu, 23 May 2019 04:52:27 -0500
Subject: [PATCH] refactor: use input normalizer

---
 packages/graphics/stage.js | 66 ++++++++++----------------------------
 1 file changed, 17 insertions(+), 49 deletions(-)

diff --git a/packages/graphics/stage.js b/packages/graphics/stage.js
index afa0d0e..a24a8a9 100644
--- a/packages/graphics/stage.js
+++ b/packages/graphics/stage.js
@@ -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;
   }