Refresh canvas on iframe window resize.

src/canvas/index.ts

@@ -40,7 +40,7 @@ import Canvas from './model/Canvas';
 import CanvasSpot, { CanvasSpotBuiltInTypes, CanvasSpotProps } from './model/CanvasSpot';
 import CanvasSpots from './model/CanvasSpots';
 import Frame from './model/Frame';
-import { CanvasEvents, ToWorldOption } from './types';
+import { CanvasEvents, CanvasRefreshOptions, ToWorldOption } from './types';
 import CanvasView, { FitViewportOptions } from './view/CanvasView';
 import FrameView from './view/FrameView';
 
@@ -834,6 +834,24 @@ export default class CanvasModule extends Module<CanvasConfig> {
     return this.canvasView?.getRectToScreen(boxRect);
   }
 
+  /**
+   * Update canvas for spots/tools positioning.
+   * @param {Object} [opts] Options.
+   * @param {Object} [opts.spots=false] Update the position of spots.
+   */
+  refresh(opts: CanvasRefreshOptions = {}) {
+    const { em, events, canvasView } = this;
+    canvasView?.clearOff();
+
+    if (opts.spots || opts.all) {
+      this.refreshSpots();
+      em.trigger('canvas:updateTools'); // this should be deprecated
+    }
+
+    em.set('canvasOffset', this.getOffset()); // this should be deprecated
+    em.trigger(events.refresh, opts);
+  }
+
   refreshSpots() {
     this.spots.refresh();
   }

src/canvas/types.ts

@@ -10,6 +10,14 @@ export interface GetBoxRectOptions extends ToScreenOption {
   local?: boolean;
 }
 
+export interface CanvasRefreshOptions {
+  /**
+   * Refresh canvas spots.
+   */
+  spots?: boolean;
+  all?: boolean;
+}
+
 /**{START_EVENTS}*/
 export enum CanvasEvents {
   /**
@@ -101,6 +109,16 @@ export enum CanvasEvents {
    */
   pointer = 'canvas:pointer',
 
+  /**
+   * @event `canvas:refresh` Canvas was refreshed to update elements on top,
+   * like spots/tools (eg. via `editor.Canvas.refresh()` or on frame resize).
+   * @example
+   * editor.on('canvas:refresh', (canvasRefreshOptions) => {
+   *  console.log('Canvas refreshed with options:', canvasRefreshOptions);
+   * });
+   */
+  refresh = 'canvas:refresh',
+
   /**
    * @event `canvas:frame:load` Frame loaded in canvas.
    * The event is triggered right after iframe's `onload`.

src/canvas/view/CanvasView.ts

@@ -95,7 +95,7 @@ export default class CanvasView extends ModuleView<Canvas> {
     this.className = `${pfx}canvas ${ppfx}no-touch-actions${!em.config.customUI ? ` ${pfx}canvas-bg` : ''}`;
     this.clsUnscale = `${pfx}unscale`;
     this._initFrames();
-    this.listenTo(em, 'change:canvasOffset', this.clearOff);
+    this.listenTo(em, events.refresh, this.clearOff);
     this.listenTo(em, 'component:selected', this.checkSelected);
     this.listenTo(em, `${events.coords} ${events.zoom}`, this.updateFrames);
     this.listenTo(model, 'change:frames', this._onFramesUpdate);

src/commands/view/Fullscreen.ts

@@ -72,12 +72,10 @@ export default {
     const pfx = this.enable(targetEl || editor.getContainer());
     this.fsChanged = this.fsChanged.bind(this, pfx);
     document.addEventListener(pfx + 'fullscreenchange', this.fsChanged);
-    editor.trigger('change:canvasOffset');
   },
 
   stop(editor, sender) {
     if (sender && sender.set) sender.set('active', false);
     this.disable();
-    if (editor) editor.trigger('change:canvasOffset');
   },
 } as CommandObject<{ target?: HTMLElement | string }, { [k: string]: any }>;

src/commands/view/SelectComponent.ts

@@ -91,9 +91,9 @@ export default {
     em[method]('change:componentHovered', this.onHovered, this);
     em[method]('component:resize styleable:change component:input', this.updateGlobalPos, this);
     em[method]('component:update:toolbar', this._upToolbar, this);
-    em[method]('change:canvasOffset', this.updateAttached, this);
     em[method]('frame:updated', this.onFrameUpdated, this);
     em[method]('canvas:updateTools', this.onFrameUpdated, this);
+    em[method](em.Canvas.events.refresh, this.updateAttached, this);
     em.Canvas.getFrames().forEach(frame => {
       const { view } = frame;
       const win = view?.getWindow();
@@ -580,7 +580,7 @@ export default {
   },
 
   onFrameResize() {
-    this.canvas.refreshSpots();
+    this.canvas.refresh({ all: true });
   },
 
   updateTools() {

src/dom_components/view/ComponentImageView.ts

@@ -103,7 +103,7 @@ export default class ComponentImageView<TComp extends ComponentImage = Component
 
   onLoad() {
     // Used to update component tools box (eg. toolbar, resizer) once the image is loaded
-    this.em.trigger('change:canvasOffset');
+    this.em.Canvas.refresh({ all: true });
   }
 
   noDrag(ev: Event) {

src/editor/model/Editor.ts

@@ -905,9 +905,7 @@ export default class EditorModel extends Model {
    * @public
    */
   refreshCanvas(opts: any = {}) {
-    this.set('canvasOffset', null);
-    this.set('canvasOffset', this.Canvas.getOffset());
-    opts.tools && this.trigger('canvas:updateTools');
+    this.Canvas.refresh({ spots: opts.tools });
   }
 
   /**

src/panels/view/PanelView.ts

@@ -83,7 +83,7 @@ export default class PanelView extends ModuleView<Panel> {
         avoidContainerUpdate: true,
         prefix: editor.getConfig().stylePrefix,
         onEnd() {
-          em && em.trigger('change:canvasOffset');
+          em.Canvas.refresh({ all: true });
         },
         posFetcher: (el: HTMLElement, { target }: any) => {
           const style = el.style as any;

src/rich_text_editor/index.ts

@@ -46,10 +46,11 @@ import { createEl, cx, on, removeEl } from '../utils/dom';
 import { hasWin, isDef } from '../utils/mixins';
 import defaults, { CustomRTE, RichTextEditorConfig } from './config/config';
 import RichTextEditor, { RichTextEditorAction } from './model/RichTextEditor';
+import CanvasEvents from '../canvas/types';
 
 export type RichTextEditorEvent = 'rte:enable' | 'rte:disable' | 'rte:custom';
 
-const eventsUp = 'change:canvasOffset frame:scroll component:update';
+const eventsUp = `${CanvasEvents.refresh} frame:scroll component:update`;
 
 export const evEnable = 'rte:enable';
 export const evDisable = 'rte:disable';

src/undo_manager/index.ts

@@ -133,7 +133,6 @@ export default class UndoManagerModule extends Module<UndoManagerConfig & { name
     });
 
     this.um.on('undo redo', () => {
-      em.trigger('change:canvasOffset');
       em.getSelectedAll().map(c => c.trigger('rerender:layer'));
     });
     ['undo', 'redo'].forEach(ev => this.um.on(ev, () => em.trigger(ev)));

src/utils/Sorter.ts

@@ -155,9 +155,10 @@ export default class Sorter extends View {
     this.canvasRelative = !!o.canvasRelative;
     this.selectOnEnd = !o.avoidSelectOnEnd;
     this.scale = o.scale;
+    const { em } = this;
 
-    if (this.em && this.em.on) {
-      this.em.on('change:canvasOffset', this.updateOffset);
+    if (em?.on) {
+      em.on(em.Canvas.events.refresh, this.updateOffset);
       this.updateOffset();
     }
   }