From 52ff2a4d5e1dbff93729974b722c5172b213bced Mon Sep 17 00:00:00 2001 From: mohamed yahia Date: Wed, 25 Jun 2025 16:52:16 +0300 Subject: [PATCH 1/2] Add skip resolve (#6547) * Add skip resolve option to traits * Add skip resolve to get Attributes * add ts docs for the new trait option --- packages/core/src/dom_components/model/Component.ts | 8 ++++++-- packages/core/src/trait_manager/model/Trait.ts | 4 +++- packages/core/src/trait_manager/types.ts | 7 +++++++ 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/core/src/dom_components/model/Component.ts b/packages/core/src/dom_components/model/Component.ts index 437918e44..fa0cace32 100644 --- a/packages/core/src/dom_components/model/Component.ts +++ b/packages/core/src/dom_components/model/Component.ts @@ -867,10 +867,14 @@ export default class Component extends StyleableModel { * Return all component's attributes * @return {Object} */ - getAttributes(opts: { noClass?: boolean; noStyle?: boolean } = {}) { + getAttributes(opts: { noClass?: boolean; noStyle?: boolean; skipResolve?: boolean } = {}) { const { em } = this; const classes: string[] = []; - const attributes = { ...this.get('attributes') }; + const dynamicValues = opts.skipResolve ? this.dataResolverWatchers.getDynamicAttributesDefs() : {}; + const attributes = { + ...this.get('attributes'), + ...dynamicValues, + }; const sm = em?.Selectors; const id = this.getId(); diff --git a/packages/core/src/trait_manager/model/Trait.ts b/packages/core/src/trait_manager/model/Trait.ts index f5dd1c278..e0069d87f 100644 --- a/packages/core/src/trait_manager/model/Trait.ts +++ b/packages/core/src/trait_manager/model/Trait.ts @@ -266,6 +266,7 @@ export default class Trait extends Model { const getValue = this.get('getValue'); let value; + const skipResolve = opts.skipResolve; if (getValue) { value = getValue({ editor: em?.getEditor()!, @@ -274,8 +275,9 @@ export default class Trait extends Model { }); } else if (this.changeProp) { value = component.get(name); + if (skipResolve) value = component.dataResolverWatchers.getPropsDefsOrValues({ [name]: value })[name]; } else { - value = component.getAttributes()[name]; + value = component.getAttributes({ skipResolve })[name]; } if (opts.useType) { diff --git a/packages/core/src/trait_manager/types.ts b/packages/core/src/trait_manager/types.ts index ff4378e5c..9f84639c0 100644 --- a/packages/core/src/trait_manager/types.ts +++ b/packages/core/src/trait_manager/types.ts @@ -162,6 +162,13 @@ export interface TraitGetValueOptions { * @default false */ useType?: boolean; + + /** + * If false, return the value + * If true and the value is a data resolver, return the data resolver props + * @default false + */ + skipResolve?: boolean; } export interface TraitOption { From b6f5ee94d66576c5460aa71a166bdf1f8ba16dfb Mon Sep 17 00:00:00 2001 From: mohamed yahia Date: Wed, 25 Jun 2025 18:23:20 +0300 Subject: [PATCH 2/2] Add types.ts for device manager (#6550) --- packages/core/src/canvas/model/Canvas.ts | 4 +- packages/core/src/device_manager/index.ts | 26 ++-------- packages/core/src/device_manager/types.ts | 62 +++++++++++++++++++++++ 3 files changed, 68 insertions(+), 24 deletions(-) create mode 100644 packages/core/src/device_manager/types.ts diff --git a/packages/core/src/canvas/model/Canvas.ts b/packages/core/src/canvas/model/Canvas.ts index a6f50f0f6..8745418e6 100644 --- a/packages/core/src/canvas/model/Canvas.ts +++ b/packages/core/src/canvas/model/Canvas.ts @@ -1,7 +1,7 @@ import CanvasModule from '..'; import { ModuleModel } from '../../abstract'; import { Coordinates, CoordinatesTypes, DEFAULT_COORDS, ObjectAny } from '../../common'; -import { evUpdate as evDeviceUpdate } from '../../device_manager'; +import DeviceEvents from '../../device_manager/types'; import Page from '../../pages/model/Page'; import PagesEvents from '../../pages/types'; import Frame from './Frame'; @@ -33,7 +33,7 @@ export default class Canvas extends ModuleModel { this.on('change:zoom', this.onZoomChange); this.on('change:x change:y', this.onCoordsChange); this.on('change:pointer change:pointerScreen', this.onPointerChange); - this.listenTo(em, `change:device ${evDeviceUpdate}`, this.updateDevice); + this.listenTo(em, `change:device ${DeviceEvents.update}`, this.updateDevice); this.listenTo(em, PagesEvents.select, this._pageUpdated); } diff --git a/packages/core/src/device_manager/index.ts b/packages/core/src/device_manager/index.ts index a0d1a3668..f7b26772f 100644 --- a/packages/core/src/device_manager/index.ts +++ b/packages/core/src/device_manager/index.ts @@ -39,32 +39,14 @@ import defConfig, { DeviceManagerConfig } from './config/config'; import Device, { DeviceProperties } from './model/Device'; import Devices from './model/Devices'; import DevicesView from './view/DevicesView'; - -export const evAll = 'device'; -export const evPfx = `${evAll}:`; -export const evSelect = `${evPfx}select`; -export const evSelectBefore = `${evSelect}:before`; -export const evUpdate = `${evPfx}update`; -export const evAdd = `${evPfx}add`; -export const evAddBefore = `${evAdd}:before`; -export const evRemove = `${evPfx}remove`; -export const evRemoveBefore = `${evRemove}:before`; -const chnSel = 'change:device'; -const deviceEvents = { - all: evAll, - select: evSelect, - update: evUpdate, - add: evAdd, - remove: evRemove, - removeBefore: evRemoveBefore, -}; +import DeviceEvents from './types'; export default class DeviceManager extends ItemManagerModule< DeviceManagerConfig & { appendTo?: HTMLElement | string }, Devices > { devices: Devices; - events!: typeof deviceEvents; + events!: typeof DeviceEvents; view?: DevicesView; Device = Device; @@ -74,11 +56,11 @@ export default class DeviceManager extends ItemManagerModule< storageKey = ''; constructor(em: EditorModel) { - super(em, 'DeviceManager', new Devices(), deviceEvents, defConfig()); + super(em, 'DeviceManager', new Devices(), DeviceEvents, defConfig()); this.devices = this.all; this.config.devices?.forEach((device) => this.add(device, { silent: true })); this.select(this.config.default || this.devices.at(0)); - em.on(chnSel, this._onSelect, this); + em.on('change:device', this._onSelect, this); return this; } diff --git a/packages/core/src/device_manager/types.ts b/packages/core/src/device_manager/types.ts new file mode 100644 index 000000000..6bdabeaeb --- /dev/null +++ b/packages/core/src/device_manager/types.ts @@ -0,0 +1,62 @@ +/**{START_EVENTS}*/ +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}) => { ... }); + */ + 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}) => { ... }); + */ + 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}) => { ... }); + */ + 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}) => { ... }); + */ + update = 'device:update', + + /** + * @event `device` Catch-all event for all the events mentioned above. + * @example + * editor.on('device', ({ event, model, ... }) => { ... }); + */ + all = 'device', +} +/**{END_EVENTS}*/ + +// This is necessary to prevent the TS documentation generator from breaking. +export default DeviceEvents;