Attach viewportX and viewportY to events (#35)

Support all available mouse events and provide them with useful coordinates Resolves #28
dankuck · Sep 20, 2019 · 60fdcc0 · 60fdcc0
1 parent 50d51bc
commit 60fdcc0
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 54 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/src/components/EaselCanvas.vue b/src/components/EaselCanvas.vue
@@ -11,6 +11,11 @@ import EaselParent from '../mixins/EaselParent.js';
 
 export default {
     mixins: [EaselParent],
+    provide() {
+        return {
+            easelCanvas: this,
+        };
+    },
     props: {
         antiAlias: {
             default: true,
@@ -24,6 +29,7 @@ export default {
         return {
             component: null,
             context: null,
+            easelCanvas: this,
         };
     },
     mounted() {
@@ -35,6 +41,7 @@ export default {
         this.resizeHandler = () => this.updateSize();
         window.addEventListener('resize', this.resizeHandler);
         this.updateSize(); // updates anti-alias afterward
+        this.component.enableMouseOver();
     },
     destroyed() {
         easeljs.Touch.disable(this.component);
@@ -117,6 +124,18 @@ export default {
                 return canvas;
             };
         },
+        augmentEvent(event) {
+            const [x, y] = this.translateCoordinates(event.stageX, event.stageY);
+            event.viewportX = x;
+            event.viewportY = y;
+            return event;
+        },
+        translateCoordinates(stageX, stageY) {
+            return [
+                stageX / this.component.scaleX,
+                stageY / this.component.scaleY
+            ];
+        },
     },
 };
 </script>
diff --git a/src/libs/easel-event-binder.js b/src/libs/easel-event-binder.js
@@ -37,12 +37,31 @@ export const eventTypes = [
     'tick',
 ];
 
+const componentDemandsEventType = function (component, eventType) {
+    return Boolean(
+        component.$options._parentListeners
+        && component.$options._parentListeners[eventType]
+    );
+};
+
+const augmentEvent = function (component, event) {
+    event.component = component;
+    if (component.easelCanvas && component.easelCanvas.augmentEvent) {
+        event = component.easelCanvas.augmentEvent(event);
+    }
+    return event;
+};
+
 export default {
-    bindEvents(component, object) {
-        const listenerNames = Object.keys(component.$options._parentListeners || {});
-        const requestedEvents = intersection(eventTypes, listenerNames);
-        requestedEvents.forEach(eventType => {
-            object.addEventListener(eventType, (event) => component.$emit(eventType, event));
+    bindEvents(vueComponent, easelComponent) {
+        eventTypes.forEach(eventType => {
+            if (!componentDemandsEventType(vueComponent, eventType)) {
+                return;
+            }
+            easelComponent.addEventListener(
+                eventType,
+                (event) => vueComponent.$emit(eventType, augmentEvent(vueComponent, event))
+            );
         });
     }
 };
diff --git a/src/mixins/EaselDisplayObject.js b/src/mixins/EaselDisplayObject.js
@@ -14,7 +14,7 @@ import easeljs from '../../easeljs/easel.js';
 const passthroughProps = ['rotation', 'cursor', 'visible', 'name'];
 
 export default {
-    inject: ['easelParent'],
+    inject: ['easelParent', 'easelCanvas'],
     props: {
         x: {},
         y: {},

diff --git a/test/EaselBitmap.spec.js b/test/EaselBitmap.spec.js
@@ -44,6 +44,7 @@ describe('EaselBitmap', function () {
             provide() {
                 return {
                     easelParent: easel,
+                    easelCanvas: easel,
                 };
             },
             data() {

diff --git a/test/EaselCanvas.spec.js b/test/EaselCanvas.spec.js
@@ -277,4 +277,15 @@ describe('EaselCanvas', function () {
         assert(sawDisable, 'did not see disable');
         easeljs.Touch = Touch;
     });
+
+    it('should augment events', function () {
+        window.devicePixelRatio = 2;
+        const {vm, canvas} = buildVm();
+        const event = canvas.augmentEvent({
+            stageX: 100,
+            stageY: 200,
+        });
+        assert(event.viewportX === 50);
+        assert(event.viewportY === 100);
+    });
 });
diff --git a/test/EaselContainer.spec.js b/test/EaselContainer.spec.js
@@ -39,6 +39,7 @@ describe('EaselContainer', function () {
             provide() {
                 return {
                     easelParent: easel,
+                    easelCanvas: easel,
                 };
             },
             data() {

diff --git a/test/EaselSprite.spec.js b/test/EaselSprite.spec.js
@@ -59,6 +59,7 @@ describe('EaselSprite', function () {
                 return {
                     spriteSheet,
                     easelParent: easel,
+                    easelCanvas: easel,
                 };
             },
             data() {

diff --git a/test/EaselText.spec.js b/test/EaselText.spec.js
@@ -60,6 +60,7 @@ describe('EaselText', function () {
             provide() {
                 return {
                     easelParent: easel,
+                    easelCanvas: easel,
                 };
             },
             data() {

diff --git a/test/easel-event-binder.spec.js b/test/easel-event-binder.spec.js
@@ -11,20 +11,22 @@ describe('easel-event-binder.js', function () {
 
     it('should bind all the things', function () {
         const got = {};
-        EaselEventBinder.bindEvents(
-            {
-                $options: {
-                    _parentListeners: fauxParentListeners,
-                },
-                $emit(eventType, event) {
-                    got[eventType] = event;
-                },
+        const vueComponent = {
+            $options: {
+                _parentListeners: fauxParentListeners,
             },
-            {
-                addEventListener(event, handler) {
-                    handler({type: event});
-                },
-            }
+            $emit(eventType, event) {
+                got[eventType] = event;
+            },
+        };
+        const easelComponent = {
+            addEventListener(event, handler) {
+                handler({type: event});
+            },
+        };
+        EaselEventBinder.bindEvents(
+            vueComponent,
+            easelComponent
         );
         eventTypes.forEach(eventType => {
             assert(got[eventType]);
@@ -33,44 +35,74 @@ describe('easel-event-binder.js', function () {
 
     it('should only bind dblclick', function () {
         const got = {};
-        EaselEventBinder.bindEvents(
-            {
-                $options: {
-                    _parentListeners: {
-                        dblclick() {},
-                        NOT_A_REAL_EVENT_TYPE() {},
-                    },
-                },
-                $emit(eventType, event) {
-                    got[eventType] = event;
+        const vueComponent = {
+            $options: {
+                _parentListeners: {
+                    dblclick() {},
+                    NOT_A_REAL_EVENT_TYPE() {},
                 },
             },
-            {
-                addEventListener(event, handler) {
-                    handler({type: event});
-                },
-            }
+            $emit(eventType, event) {
+                got[eventType] = event;
+            },
+        };
+        const easelComponent = {
+            addEventListener(event, handler) {
+                handler({type: event});
+            },
+        };
+        EaselEventBinder.bindEvents(
+            vueComponent,
+            easelComponent
         );
         assert(Object.keys(got).length === 1, 'bound too many things');
         assert(got.dblclick);
     });
 
     it('should not bind', function () {
         const got = {};
-        EaselEventBinder.bindEvents(
-            {
-                $options: {
-                },
-                $emit(eventType, event) {
-                    got[eventType] = event;
-                },
+        const vueComponent = {
+            $options: {
             },
-            {
-                addEventListener(event, handler) {
-                    handler({type: event});
-                },
-            }
+            $emit(eventType, event) {
+                got[eventType] = event;
+            },
+        };
+        const easelComponent = {
+            addEventListener(event, handler) {
+                handler({type: event});
+            },
+        };
+        EaselEventBinder.bindEvents(
+            vueComponent,
+            easelComponent
         );
         assert(Object.keys(got).length === 0, 'bound too many things');
     });
+
+    it('should augment an event via the canvas', function () {
+        const event = {};
+        const easelCanvas = {
+            augmentEvent(event) {
+                event.changed = true;
+                return event;
+            },
+        };
+        const vueComponent = {
+            easelCanvas,
+            $options: {
+                _parentListeners: {
+                    click() {},
+                },
+            },
+            $emit() {},
+        };
+        const easelComponent = {
+            addEventListener(eventType, handler) {
+                handler(event);
+            },
+        };
+        EaselEventBinder.bindEvents(vueComponent, easelComponent);
+        assert(event.changed);
+    });
 });
diff --git a/test/includes/can-cache.js b/test/includes/can-cache.js
@@ -98,6 +98,7 @@ export default function (implementor, provide = {}, propChangers = []) {
                 `,
                 provide() {
                     provide.easelParent = easel;
+                    provide.easelCanvas = easel;
                     return provide;
                 },
                 data() {

diff --git a/test/includes/does-events.js b/test/includes/does-events.js
@@ -30,6 +30,7 @@ export default function (implementor, extra_attributes = '', provide = {}) {
                 `,
                 provide() {
                     provide.easelParent = easel;
+                    provide.easelCanvas = easel;
                     return provide;
                 },
                 data() {

diff --git a/test/includes/is-a-display-object.js b/test/includes/is-a-display-object.js
@@ -62,6 +62,7 @@ export default function (implementor, extra_attributes = '', provide = {}) {
                 `,
                 provide() {
                     provide.easelParent = easel;
+                    provide.easelCanvas = easel;
                     return provide;
                 },
                 data() {

diff --git a/test/includes/is-alignable.js b/test/includes/is-alignable.js
@@ -45,6 +45,7 @@ export default function isAlignable(implementor, {width, height}, extra_attribut
                 provide() {
                     return {
                         easelParent: easel,
+                        easelCanvas: easel,
                     };
                 },
                 data() {

diff --git a/test/includes/is-an-easel-parent.js b/test/includes/is-an-easel-parent.js
@@ -57,6 +57,7 @@ export default function isAnEaselParent(implementor) {
                             removeChild() {
                             },
                         },
+                        easelCanvas: {},
                     };
                 },
                 data() {
-Original file line number
+Diff line change
@@ Expand Up / @@ -57,6 +57,7 @@ export default function isAnEaselParent(implementor) { @@
                                 removeChild() {
                                 },
                             },
+                            easelCanvas: {},
                         };
                     },
                     data() {
@@ Expand Down @@