Merge branch 'dev' into dev

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/navigator/index.ts

@@ -367,7 +367,7 @@ export default class LayerManager extends Module<LayerManagerConfig> {
   __isLayerable(cmp: Component): boolean {
     const tag = cmp.get('tagName');
     const hideText = this.config.hideTextnode;
-    const isValid = !hideText || (!cmp.is('textnode') && tag !== 'br');
+    const isValid = !hideText || (!cmp.isInstanceOf('textnode') && tag !== 'br');
 
     return isValid && cmp.get('layerable')!;
   }

src/navigator/view/ItemView.ts

@@ -4,7 +4,6 @@ import Component from '../../dom_components/model/Component';
 import ComponentView from '../../dom_components/view/ComponentView';
 import EditorModel from '../../editor/model/Editor';
 import { isEnterKey, isEscKey } from '../../utils/dom';
-import { getModel } from '../../utils/mixins';
 import LayerManager from '../index';
 import ItemsView from './ItemsView';
 import { getOnComponentDrag, getOnComponentDragEnd, getOnComponentDragStart } from '../../commands';
@@ -96,8 +95,8 @@ export default class ItemView extends View {
     return this.config.stylePrefix;
   }
 
-  opt: any;
-  module: any;
+  opt: ItemViewProps;
+  module: LayerManager;
   config: any;
   sorter: any;
   /** @ts-ignore */
@@ -357,7 +356,7 @@ export default class ItemView extends View {
     const countEl = itemEl.find('[data-count]');
 
     title[count ? 'removeClass' : 'addClass'](clsNoChild);
-    countEl.html(count || '');
+    countEl.html(`${count || ''}`);
     !count && module.setOpen(model, false);
   }
 

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();
     }
   }

src/utils/dom.ts

@@ -37,10 +37,7 @@ export const attrUp = (el?: HTMLElement, attrs: ObjectAny = {}) =>
   el && el.setAttribute && each(attrs, (value, key) => el.setAttribute(key, value));
 
 export const isVisible = (el?: HTMLElement) => {
-  if (!el || !(el instanceof HTMLElement)) {
-    return false;
-  }
-  return el && !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+  return el && !!(el.offsetWidth || el.offsetHeight || el.getClientRects?.().length);
 };
 
 export const empty = (node: HTMLElement) => {