Add getPointerCoords to canvas

src/canvas/model/Canvas.ts

@@ -1,9 +1,10 @@
+import CanvasModule from '..';
 import { ModuleModel } from '../../abstract';
-import { evPageSelect } from '../../pages';
+import { Coordinates, CoordinatesTypes, DEFAULT_COORDS } from '../../common';
 import { evUpdate as evDeviceUpdate } from '../../device_manager';
-import Frames from './Frames';
+import { evPageSelect } from '../../pages';
 import Page from '../../pages/model/Page';
-import CanvasModule from '..';
+import Frames from './Frames';
 
 export default class Canvas extends ModuleModel<CanvasModule> {
   defaults() {
@@ -18,6 +19,8 @@ export default class Canvas extends ModuleModel<CanvasModule> {
       scripts: [],
       // Styles to apply on all frames
       styles: [],
+      pointer: DEFAULT_COORDS,
+      pointerScreen: DEFAULT_COORDS,
     };
   }
 
@@ -68,4 +71,9 @@ export default class Canvas extends ModuleModel<CanvasModule> {
     zoom < 1 && this.set('zoom', 1);
     em.trigger(module.events.zoom);
   }
+
+  getPointerCoords(type: CoordinatesTypes = CoordinatesTypes.World): Coordinates {
+    const { pointer, pointerScreen } = this.attributes;
+    return type === CoordinatesTypes.World ? pointer : pointerScreen;
+  }
 }

src/canvas/view/CanvasView.ts

@@ -1,7 +1,7 @@
 import { bindAll, isNumber } from 'underscore';
 import { ToWorldOption } from '..';
 import { ModuleView } from '../../abstract';
-import { BoxRect, Coordinates, ElementRect } from '../../common';
+import { BoxRect, Coordinates, CoordinatesTypes, ElementRect } from '../../common';
 import Component from '../../dom_components/model/Component';
 import ComponentView from '../../dom_components/view/ComponentView';
 import {
@@ -212,7 +212,7 @@ export default class CanvasView extends ModuleView<Canvas> {
         module.setZoom(newZoom * 100);
 
         // Update coordinates based on pointer
-        const pointer = this.model.get('pointerScreen');
+        const pointer = this.model.getPointerCoords(CoordinatesTypes.Screen);
         const canvasRect = this.getCanvasOffset();
         const pointerX = pointer.x - canvasRect.width / 2;
         const pointerY = pointer.y - canvasRect.height / 2;

src/common/index.ts

@@ -63,3 +63,19 @@ export class View<T extends Model | undefined = Model, E extends Element = HTMLE
 export type PickMatching<T, V> = { [K in keyof T as T[K] extends V ? K : never]: T[K] };
 
 export type ExtractMethods<T> = PickMatching<T, Function>;
+
+export enum CoordinatesTypes {
+  Screen = 'screen',
+  World = 'world',
+}
+
+export const DEFAULT_COORDS: Coordinates = {
+  x: 0,
+  y: 0,
+};
+
+export const DEFAULT_BOXRECT: BoxRect = {
+  ...DEFAULT_COORDS,
+  width: 0,
+  height: 0,
+};