diff --git a/src/canvas/index.ts b/src/canvas/index.ts index e1097a582..164221c93 100644 --- a/src/canvas/index.ts +++ b/src/canvas/index.ts @@ -655,6 +655,19 @@ export default class CanvasModule extends Module { return { x, y }; } + /** + * Get canvas pointer position coordinates. + * @returns {Object} Object containing pointer coordinates + * @private + * @example + * const worldPointer = canvas.getPointer(); + * const screenPointer = canvas.getPointer(true); + */ + getPointer(screen?: boolean): Coordinates { + const { pointer, pointerScreen } = this.canvas.attributes; + return screen ? pointerScreen : pointer; + } + getZoomDecimal() { return this.getZoom() / 100; } diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts index d800130bb..6993847b1 100644 --- a/src/canvas/model/Canvas.ts +++ b/src/canvas/model/Canvas.ts @@ -31,6 +31,7 @@ export default class Canvas extends ModuleModel { this.set('frames', new Frames(module)); this.on('change:zoom', this.onZoomChange); this.on('change:x change:y', this.onCoordsChange); + this.on('change:pointer change:pointerScreen', this.onPointerChange); this.listenTo(em, `change:device ${evDeviceUpdate}`, this.updateDevice); this.listenTo(em, evPageSelect, this._pageUpdated); } @@ -78,6 +79,11 @@ export default class Canvas extends ModuleModel { em.trigger(module.events.coords); } + onPointerChange() { + const { em, module } = this; + em.trigger(module.events.pointer); + } + getPointerCoords(type: CoordinatesTypes = CoordinatesTypes.World): Coordinates { const { pointer, pointerScreen } = this.attributes; return type === CoordinatesTypes.World ? pointer : pointerScreen; diff --git a/src/canvas/types.ts b/src/canvas/types.ts index 0a3d0f098..931948411 100644 --- a/src/canvas/types.ts +++ b/src/canvas/types.ts @@ -79,5 +79,14 @@ export enum CanvasEvents { * }); */ zoom = 'canvas:zoom', + + /** + * @event `canvas:pointer` Canvas pointer updated. + * @example + * editor.on('canvas:pointer', () => { + * console.log('Canvas pointer updated:', editor.Canvas.getPointer()); + * }); + */ + pointer = 'canvas:pointer', } /**{END_EVENTS}*/ diff --git a/src/canvas/view/CanvasView.ts b/src/canvas/view/CanvasView.ts index d01498ee4..e78c1cced 100644 --- a/src/canvas/view/CanvasView.ts +++ b/src/canvas/view/CanvasView.ts @@ -201,7 +201,6 @@ export default class CanvasView extends ModuleView { onWheel(ev: WheelEvent) { const { module, config } = this; if (config.infiniteCanvas) { - navigator.maxTouchPoints && this.onPointer(ev); this.preventDefault(ev); const { deltaX, deltaY } = ev; const zoom = module.getZoomDecimal(); @@ -222,6 +221,7 @@ export default class CanvasView extends ModuleView { const y = pointerY - (pointerY - coords.y) * zoomDelta; module.setCoords(x, y); } else { + this.onPointer(ev); module.setCoords(coords.x - deltaX, coords.y - deltaY); } }