diff --git a/packages/core/src/css_composer/model/CssRule.ts b/packages/core/src/css_composer/model/CssRule.ts index 31e40d0e4..2516e5b9d 100644 --- a/packages/core/src/css_composer/model/CssRule.ts +++ b/packages/core/src/css_composer/model/CssRule.ts @@ -94,7 +94,7 @@ export default class CssRule extends StyleableModel { config: CssRuleProperties; em?: EditorModel; opt: any; - view?: CssRuleView; + views: CssRuleView[] = []; dataVariableListeners: Record = {}; defaults() { @@ -121,7 +121,7 @@ export default class CssRule extends StyleableModel { this.em = opt.em; this.ensureSelectors(null, null, {}); this.on('change', this.__onChange); - super.setStyle(this.get('style')); + this.setStyle(this.get('style')); } __onChange(m: CssRule, opts: any) { @@ -365,12 +365,4 @@ export default class CssRule extends StyleableModel { return true; } - - setView(cssRuleView: CssRuleView) { - super.setView(cssRuleView); - } - - getView() { - return this.view; - } } diff --git a/packages/core/src/css_composer/view/CssRuleView.ts b/packages/core/src/css_composer/view/CssRuleView.ts index 8da154d0e..0a77b287b 100644 --- a/packages/core/src/css_composer/view/CssRuleView.ts +++ b/packages/core/src/css_composer/view/CssRuleView.ts @@ -1,3 +1,4 @@ +import FrameView from '../../canvas/view/FrameView'; import { View } from '../../common'; import CssRule from '../model/CssRule'; @@ -11,6 +12,20 @@ export default class CssRuleView extends View { this.listenTo(model, 'change', this.render); this.listenTo(model, 'destroy remove', this.remove); this.listenTo(model.get('selectors'), 'change', this.render); + model.setView(this); + } + + get frameView(): FrameView { + return this.config.frameView; + } + + remove() { + super.remove(); + return this; + } + + updateStyles() { + this.render(); } /** @ts-ignore */ diff --git a/packages/core/src/css_composer/view/CssRulesView.ts b/packages/core/src/css_composer/view/CssRulesView.ts index a5b9ff095..a63e83ac4 100644 --- a/packages/core/src/css_composer/view/CssRulesView.ts +++ b/packages/core/src/css_composer/view/CssRulesView.ts @@ -82,8 +82,6 @@ export default class CssRulesView extends View { rendered = view.render().el; } - model.setView(view); - const clsName = this.className!; const mediaText = model.get('mediaText'); const defaultBlockId = getBlockId(clsName); diff --git a/packages/core/src/dom_components/view/ComponentView.ts b/packages/core/src/dom_components/view/ComponentView.ts index d4c8711e9..0b17c9560 100644 --- a/packages/core/src/dom_components/view/ComponentView.ts +++ b/packages/core/src/dom_components/view/ComponentView.ts @@ -304,6 +304,10 @@ TComp> { } } + updateStyles() { + this.updateStyle(); + } + /** * Update classe attribute * @private diff --git a/packages/core/src/domain_abstract/model/StyleableModel.ts b/packages/core/src/domain_abstract/model/StyleableModel.ts index 71b5ebfdd..829f5632a 100644 --- a/packages/core/src/domain_abstract/model/StyleableModel.ts +++ b/packages/core/src/domain_abstract/model/StyleableModel.ts @@ -9,6 +9,7 @@ import { DataVariableType } from '../../data_sources/model/DataVariable'; import DataVariableListenerManager from '../../data_sources/model/DataVariableListenerManager'; import CssRuleView from '../../css_composer/view/CssRuleView'; import ComponentView from '../../dom_components/view/ComponentView'; +import Frame from '../../canvas/model/Frame'; export type StyleProps = Record< string, @@ -28,6 +29,8 @@ export type UpdateStyleOptions = SetOptions & { noEvent?: boolean; }; +export type StyleableView = ComponentView | CssRuleView; + const parserHtml = ParserHtml(); export const getLastStyleValue = (value: string | string[]) => { @@ -37,7 +40,7 @@ export const getLastStyleValue = (value: string | string[]) => { export default class StyleableModel extends Model { em?: EditorModel; dataVariableListeners: Record = {}; - view?: ComponentView | CssRuleView; + views: StyleableView[] = []; constructor(attributes: T, options: { em?: EditorModel } = {}) { super(attributes, options); @@ -164,16 +167,23 @@ export default class StyleableModel extends Model this.updateView(); } - setView(view: ComponentView | CssRuleView) { - this.view = view; + getView(frame?: Frame) { + let { views, em } = this; + const frm = frame || em?.getCurrentFrameModel(); + return frm ? views.find((v) => v.frameView === frm.view) : views[0]; } - updateView() { - if (this.view) { - this.view.render(); + setView(view: StyleableView) { + let { views } = this; + if (!views.includes(view)) { + views.push(view); } } + updateView() { + this.views.forEach((view) => view.updateStyles()); + } + /** * Resolve data variables to their actual values */