Add 1-to-many relationship between model and view for CssRules

packages/core/src/css_composer/model/CssRule.ts

@@ -94,7 +94,7 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
   config: CssRuleProperties;
   em?: EditorModel;
   opt: any;
-  view?: CssRuleView;
+  views: CssRuleView[] = [];
   dataVariableListeners: Record<string, DataVariableListenerManager> = {};
 
   defaults() {
@@ -121,7 +121,7 @@ export default class CssRule extends StyleableModel<CssRuleProperties> {
     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<CssRuleProperties> {
 
     return true;
   }
-
-  setView(cssRuleView: CssRuleView) {
-    super.setView(cssRuleView);
-  }
-
-  getView() {
-    return this.view;
-  }
 }

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<CssRule> {
     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 */

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);

packages/core/src/dom_components/view/ComponentView.ts

@@ -304,6 +304,10 @@ TComp> {
     }
   }
 
+  updateStyles() {
+    this.updateStyle();
+  }
+
   /**
    * Update classe attribute
    * @private

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<T extends ObjectHash = any> extends Model<T> {
   em?: EditorModel;
   dataVariableListeners: Record<string, DataVariableListenerManager> = {};
-  view?: ComponentView | CssRuleView;
+  views: StyleableView[] = [];
 
   constructor(attributes: T, options: { em?: EditorModel } = {}) {
     super(attributes, options);
@@ -164,16 +167,23 @@ export default class StyleableModel<T extends ObjectHash = any> extends Model<T>
     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
    */