Fix pages load (#6551)

* Ensure the load of pages is passing via the add method.

* Add `canvas:frame:unload` event

* Up ts device events

packages/core/src/canvas/model/Canvas.ts

@@ -52,7 +52,10 @@ export default class Canvas extends ModuleModel<CanvasModule> {
     const { em } = this;
     em.setSelected();
     em.get('readyCanvas') && em.stopDefault(); // We have to stop before changing current frames
-    prev?.getFrames().map((frame) => frame.disable());
+    prev?.getFrames().map((frame) => {
+      frame.disable();
+      frame._emitUnload();
+    });
     this.set('frames', page.getFrames());
     this.updateDevice({ frame: page.getMainFrame() });
   }

packages/core/src/canvas/model/Frame.ts

@@ -8,6 +8,7 @@ import { createId, isComponent, isObject } from '../../utils/mixins';
 import FrameView from '../view/FrameView';
 import Frames from './Frames';
 import { CssRuleJSON } from '../../css_composer/model/CssRule';
+import CanvasEvents from '../types';
 
 const keyAutoW = '__aw';
 const keyAutoH = '__ah';
@@ -230,6 +231,14 @@ export default class Frame extends ModuleModel<CanvasModule> {
     this.em.trigger('frame:updated', { frame: this, ...data });
   }
 
+  _emitUnload() {
+    this._emitWithEditor(CanvasEvents.frameUnload, { frame: this });
+  }
+
+  _emitWithEditor(event: string, data?: Record<string, any>) {
+    [this.em, this].forEach((item) => item?.trigger(event, data));
+  }
+
   hasAutoHeight() {
     const { height } = this.attributes;
 

packages/core/src/canvas/types.ts

@@ -149,6 +149,15 @@ export enum CanvasEvents {
    * });
    */
   frameLoadBody = 'canvas:frame:load:body',
+
+  /**
+   * @event `canvas:frame:unload` Frame is unloading from the canvas.
+   * @example
+   * editor.on('canvas:frame:unload', ({ frame }) => {
+   *  console.log('Unloading frame', frame);
+   * });
+   */
+  frameUnload = 'canvas:frame:unload',
 }
 /**{END_EVENTS}*/
 

packages/core/src/device_manager/types.ts

@@ -3,49 +3,31 @@ export enum DeviceEvents {
   /**
    * @event `device:add` New device added to the collection. The `Device` is passed as an argument.
    * @example
-   * editor.on('device:add', ({device}) => { ... });
+   * editor.on('device:add', (device) => { ... });
    */
   add = 'device:add',
-
-  /**
-   * @event `device:add:before` Event triggered before a new device is added.
-   * @example
-   * editor.on('device:add:before', ({device}) => { ... });
-   */
   addBefore = 'device:add:before',
 
   /**
    * @event `device:remove` Device removed from the collection. The `Device` is passed as an argument.
    * @example
-   * editor.on('device:remove', ({device}) => { ... });
+   * editor.on('device:remove', (device) => { ... });
    */
   remove = 'device:remove',
-
-  /**
-   * @event `device:remove:before` Event triggered before a device is removed.
-   * @example
-   * editor.on('device:remove:before', ({device}) => { ... });
-   */
   removeBefore = 'device:remove:before',
 
   /**
    * @event `device:select` A new device is selected. The `Device` is passed as an argument.
    * @example
-   * editor.on('device:select', ({device}) => { ... });
+   * editor.on('device:select', (device) => { ... });
    */
   select = 'device:select',
-
-  /**
-   * @event `device:select:before` Event triggered before a new device is selected.
-   * @example
-   * editor.on('device:select:before', ({device}) => { ... });
-   */
   selectBefore = 'device:select:before',
 
   /**
    * @event `device:update` Device updated. The `Device` and the object containing changes are passed as arguments.
    * @example
-   * editor.on('device:update', ({device}) => { ... });
+   * editor.on('device:update', (device) => { ... });
    */
   update = 'device:update',
 

packages/core/src/dom_components/model/Components.ts

@@ -314,7 +314,9 @@ Component> {
     if (isString(models)) {
       models = this.parseString(models, opt)!;
     } else if (isArray(models)) {
-      models.forEach((item: string, index: number) => {
+      // Avoid "Cannot assign to read only property '0' of object '[object Array]'
+      models = [...models];
+      (models as any).forEach((item: string, index: number) => {
         if (isString(item)) {
           const nodes = this.parseString(item, opt);
           (models as any)[index] = isArray(nodes) && !nodes.length ? null : nodes;

packages/core/src/pages/index.ts

@@ -77,7 +77,7 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
     bindAll(this, '_onPageChange');
     const model = new ModuleModel(this, { _undo: true });
     this.model = model;
-    this.pages.on('reset', (coll) => coll.at(0) && this.select(coll.at(0)));
+    this.pages.on('reset', this.__onReset, this);
     this.pages.on('all', this.__onChange, this);
     model.on(chnSel, this._onPageChange);
   }
@@ -88,6 +88,11 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
     em.trigger(events.all, { event, page, options });
   }
 
+  __onReset() {
+    const firstPage = this.pages.at(0);
+    firstPage && this.select(firstPage);
+  }
+
   onLoad() {
     const { pages, config, em } = this;
     const opt = { silent: true };
@@ -272,7 +277,14 @@ export default class PageManager extends ItemManagerModule<PageManagerConfig, Pa
   }
 
   load(data: any) {
-    const result = this.loadProjectData(data, { all: this.pages, reset: true });
+    const result = this.loadProjectData(data, {
+      all: this.pages,
+      reset: true,
+      onResult: (result: PageProperties[], opts: AddOptions) => {
+        result.forEach((pageProps) => this.add(pageProps, opts));
+        this.__onReset();
+      },
+    });
     this.pages.forEach((page) => page.getFrames().initRefs());
     return result;
   }