From 3ca70a68a46f3a4f5f245ec2d83d1105ee5d10be Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 26 Jun 2025 11:22:29 +0400 Subject: [PATCH] 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 | 5 +++- packages/core/src/canvas/model/Frame.ts | 9 +++++++ packages/core/src/canvas/types.ts | 9 +++++++ packages/core/src/device_manager/types.ts | 26 +++---------------- .../src/dom_components/model/Components.ts | 4 ++- packages/core/src/pages/index.ts | 16 ++++++++++-- 6 files changed, 43 insertions(+), 26 deletions(-) diff --git a/packages/core/src/canvas/model/Canvas.ts b/packages/core/src/canvas/model/Canvas.ts index 8745418e6..effa34d92 100644 --- a/packages/core/src/canvas/model/Canvas.ts +++ b/packages/core/src/canvas/model/Canvas.ts @@ -52,7 +52,10 @@ export default class Canvas extends ModuleModel { 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() }); } diff --git a/packages/core/src/canvas/model/Frame.ts b/packages/core/src/canvas/model/Frame.ts index 65cb87e42..bccbdf630 100644 --- a/packages/core/src/canvas/model/Frame.ts +++ b/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 { this.em.trigger('frame:updated', { frame: this, ...data }); } + _emitUnload() { + this._emitWithEditor(CanvasEvents.frameUnload, { frame: this }); + } + + _emitWithEditor(event: string, data?: Record) { + [this.em, this].forEach((item) => item?.trigger(event, data)); + } + hasAutoHeight() { const { height } = this.attributes; diff --git a/packages/core/src/canvas/types.ts b/packages/core/src/canvas/types.ts index c64e33d95..bd1a6bb28 100644 --- a/packages/core/src/canvas/types.ts +++ b/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}*/ diff --git a/packages/core/src/device_manager/types.ts b/packages/core/src/device_manager/types.ts index 6bdabeaeb..e9d0aa7fb 100644 --- a/packages/core/src/device_manager/types.ts +++ b/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', diff --git a/packages/core/src/dom_components/model/Components.ts b/packages/core/src/dom_components/model/Components.ts index 932e78fc8..23f645f8a 100644 --- a/packages/core/src/dom_components/model/Components.ts +++ b/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; diff --git a/packages/core/src/pages/index.ts b/packages/core/src/pages/index.ts index ebb13495e..7e278b6db 100644 --- a/packages/core/src/pages/index.ts +++ b/packages/core/src/pages/index.ts @@ -77,7 +77,7 @@ export default class PageManager extends ItemManagerModule 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 { + result.forEach((pageProps) => this.add(pageProps, opts)); + this.__onReset(); + }, + }); this.pages.forEach((page) => page.getFrames().initRefs()); return result; }