New canvas events

src/canvas/model/Canvas.ts

@@ -26,7 +26,7 @@ export default class Canvas extends ModuleModel<CanvasModule> {
     const { scripts, styles } = config;
     super(module, { scripts, styles });
     this.set('frames', new Frames(module));
-    this.listenTo(this, 'change:zoom', this.onZoomChange);
+    this.on('change:zoom', this.onZoomChange);
     this.listenTo(em, `change:device ${evDeviceUpdate}`, this.updateDevice);
     this.listenTo(em, evPageSelect, this._pageUpdated);
   }
@@ -63,7 +63,9 @@ export default class Canvas extends ModuleModel<CanvasModule> {
   }
 
   onZoomChange() {
+    const { em, module } = this;
     const zoom = this.get('zoom');
     zoom < 1 && this.set('zoom', 1);
+    em.trigger(module.events.zoom);
   }
 }

src/canvas/types.ts

@@ -52,4 +52,38 @@ export enum CanvasEvents {
    * });
    */
   spotRemove = 'canvas:spot:remove',
+  /**
+   * Canvas viewport updated (eg. zoom or coordinates).
+   * @example
+   * editor.on('canvas:viewport', () => {
+   *  const { Canvas } = editor;
+   *  console.log('Canvas, zoom:', Canvas.getZoom(), 'coords:', Canvas.getCoords());
+   * });
+   */
+  viewport = 'canvas:viewport',
+  /**
+   * Canvas viewport update started (eg. zooming or panning)
+   * @example
+   * editor.on('canvas:viewport:start', () => {
+   *  console.log('viewport update started')
+   * });
+   */
+  viewportStart = 'canvas:viewport:start',
+  /**
+   * Canvas viewport update ended.
+   * This event is debounced on 300ms from the `canvas:viewport:start`.
+   * @example
+   * editor.on('canvas:viewport:end', () => {
+   *  console.log('viewport updated ended')
+   * });
+   */
+  viewportEnd = 'canvas:viewport:end',
+  /**
+   * Canvas zoom updated.
+   * @example
+   * editor.on('canvas:zoom', () => {
+   *  console.log('New canvas zoom:', editor.Canvas.getZoom());
+   * });
+   */
+  zoom = 'canvas:zoom',
 }

src/canvas/view/CanvasView.ts

@@ -179,14 +179,20 @@ export default class CanvasView extends ModuleView<Canvas> {
   }
 
   updateFrames(ev: Event) {
-    const { em } = this;
+    const { em, module } = this;
+    const { events } = module;
     const defOpts = { preserveSelected: 1 };
     this.updateFramesArea();
     this.clearOff();
     em.stopDefault(defOpts);
     em.trigger('canvas:update', ev);
-    this.timerZoom && clearTimeout(this.timerZoom);
-    this.timerZoom = setTimeout(() => em.runDefault(defOpts), 300) as any;
+    em.trigger(events.viewport);
+    this.timerZoom ? clearTimeout(this.timerZoom) : em.trigger(events.viewportStart);
+    this.timerZoom = setTimeout(() => {
+      em.runDefault(defOpts);
+      em.trigger(events.viewportEnd);
+      delete this.timerZoom;
+    }, 300) as any;
   }
 
   updateFramesArea() {