From 15dfc217b81142907beccac95388fcbd2cbdad4e Mon Sep 17 00:00:00 2001 From: mohamedsalem401 Date: Wed, 4 Jun 2025 12:10:23 +0300 Subject: [PATCH] Add watcher init to styleableModel and refactor styleableModel --- .../core/src/css_composer/model/CssRule.ts | 4 +- .../ComponentDataCollection.ts | 2 +- .../domain_abstract/model/StyleableModel.ts | 81 +++++-------------- 3 files changed, 21 insertions(+), 66 deletions(-) diff --git a/packages/core/src/css_composer/model/CssRule.ts b/packages/core/src/css_composer/model/CssRule.ts index 2579eba49..338349b4c 100644 --- a/packages/core/src/css_composer/model/CssRule.ts +++ b/packages/core/src/css_composer/model/CssRule.ts @@ -113,7 +113,7 @@ export default class CssRule extends StyleableModel { } constructor(props: CssRuleProperties, opt: any = {}) { - super(props); + super(props, { em: opt.em }); this.config = props || {}; this.opt = opt; this.em = opt.em; @@ -319,7 +319,7 @@ export default class CssRule extends StyleableModel { if (isEmpty(obj.style)) delete obj.style; } - return obj; + return { ...obj, style: this.dataResolverWatchers.getStylesDefsOrValues(obj.style) }; } /** diff --git a/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts b/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts index 0435b76f2..18895e11e 100644 --- a/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts +++ b/packages/core/src/data_sources/model/data_collection/ComponentDataCollection.ts @@ -16,7 +16,7 @@ import { DataCollectionStateMap, } from './types'; import { detachSymbolInstance, getSymbolInstances } from '../../../dom_components/model/SymbolUtils'; -import { updateFromWatcher } from '../../../dom_components/model/ComponentDataResolverWatchers'; +import { updateFromWatcher } from '../../../dom_components/model/ModelDataResolverWatchers'; import { ModelDestroyOptions } from 'backbone'; import Components from '../../../dom_components/model/Components'; diff --git a/packages/core/src/domain_abstract/model/StyleableModel.ts b/packages/core/src/domain_abstract/model/StyleableModel.ts index fcf5fa952..340fed021 100644 --- a/packages/core/src/domain_abstract/model/StyleableModel.ts +++ b/packages/core/src/domain_abstract/model/StyleableModel.ts @@ -17,10 +17,13 @@ import { isDataResolverProps, } from '../../data_sources/utils'; import { DataResolver } from '../../data_sources/types'; +import { ModelDataResolverWatchers } from '../../dom_components/model/ModelDataResolverWatchers'; +import { DataCollectionStateMap } from '../../data_sources/model/data_collection/types'; +import { DynamicWatchersOptions } from '../../dom_components/model/ModelResolverWatcher'; export type StyleProps = Record; -export interface UpdateStyleOptions extends SetOptions { +export interface UpdateStyleOptions extends SetOptions, DynamicWatchersOptions { partial?: boolean; addStyle?: StyleProps; inline?: boolean; @@ -38,10 +41,15 @@ export const getLastStyleValue = (value: string | string[]) => { export default class StyleableModel extends Model { em?: EditorModel; views: StyleableView[] = []; - styleResolverListeners: Record = {}; + dataResolverWatchers: ModelDataResolverWatchers; + collectionsStateMap: DataCollectionStateMap = {}; constructor(attributes: T, options: { em?: EditorModel } = {}) { - super(attributes, options); + const em = options.em!; + const dataResolverWatchers = new ModelDataResolverWatchers(undefined, { em }); + super(attributes, { ...options, dataResolverWatchers }); + dataResolverWatchers.bindModel(this); + this.dataResolverWatchers = dataResolverWatchers; this.em = options.em; } @@ -68,15 +76,12 @@ export default class StyleableModel extends Model * @return {Object} */ getStyle(prop?: string | ObjectAny, opts: { skipResolve?: boolean } = {}): StyleProps { - const style = this.get('style') || {}; - const result: ObjectAny = { ...style }; - - if (this.em && !opts.skipResolve) { - const resolvedStyle = this.getResolvedStyles({ ...result }); - // @ts-ignore - return prop && isString(prop) ? resolvedStyle[prop] : resolvedStyle; + const style: ObjectAny = this.get('style') || {}; + if (!opts.skipResolve) { + return prop && isString(prop) ? { ...style }[prop] : { ...style }; } + const result: ObjectAny = { ...style, ...this.dataResolverWatchers.getDynamicStylesDefs() }; return prop && isString(prop) ? result[prop] : result; } @@ -101,28 +106,16 @@ export default class StyleableModel extends Model } const propNew = { ...prop }; - const newStyle = { ...propNew }; + let newStyle = { ...propNew }; keys(newStyle).forEach((key) => { // Remove empty style properties - if (newStyle[key] === '') { + if (newStyle[key] === '' || key === '__p') { delete newStyle[key]; return; } - - const styleValue = newStyle[key]; - if (isDataResolverProps(styleValue)) { - const dataResolver = getDataResolverInstance(styleValue, { - em: this.em!, - collectionsStateMap: {}, - }); - - if (dataResolver) { - newStyle[key] = dataResolver; - this.listenToDataResolver(dataResolver, key); - } - } }); + newStyle = this.dataResolverWatchers.setStyles(newStyle, opts); this.set('style', newStyle, opts as any); @@ -146,19 +139,6 @@ export default class StyleableModel extends Model return newStyle; } - listenToDataResolver(resolver: DataResolver, styleProp: string) { - const resolverListener = this.styleResolverListeners[styleProp]; - if (resolverListener) { - resolverListener.listenToResolver(); - } else { - this.styleResolverListeners[styleProp] = new DataResolverListener({ - em: this.em!, - resolver, - onUpdate: () => this.updateView(), - }); - } - } - getView(frame?: Frame) { let { views, em } = this; const frm = frame || em?.getCurrentFrameModel(); @@ -179,31 +159,6 @@ export default class StyleableModel extends Model this.views.forEach((view) => view.updateStyles()); } - getResolvedStyles(style: StyleProps): StyleProps { - const resultStyle = { ...style }; - - keys(resultStyle).forEach((key) => { - const styleValue = resultStyle[key]; - - if (typeof styleValue === 'string' || Array.isArray(styleValue)) { - return; - } - - if (isDataResolverProps(styleValue)) { - resultStyle[key] = getDataResolverInstanceValue(styleValue, { - em: this.em!, - collectionsStateMap: {}, - }); - } - - if (isDataResolver(styleValue)) { - resultStyle[key] = styleValue.getDataValue(); - } - }); - - return resultStyle; - } - /** * Add style property * @param {Object|string} prop