Update frame props

src/canvas/model/Canvas.js

@@ -14,11 +14,14 @@ export default Backbone.Model.extend({
   initialize(config = {}) {
     const { em } = config;
     const { styles = [], scripts = [] } = config;
-    const root = em && em.getWrapper();
-    const css = em && em.getStyle();
     const mainPage = em.get('Pages').getMain();
     const frames = mainPage.getFrames();
-    const frame = mainPage.getMainFrame() || frames.add({ root, styles: css });
+    const frame =
+      mainPage.getMainFrame() ||
+      frames.add({
+        components: em.getWrapper(),
+        styles: em.getStyle()
+      });
     styles.forEach(style => frame.addLink(style));
     scripts.forEach(script => frame.addScript(script));
     this.em = em;

src/canvas/model/Frame.js

@@ -1,62 +1,46 @@
 import Backbone from 'backbone';
-import Component from 'dom_components/model/Component';
+import Component from 'dom_components/model/ComponentWrapper';
-import CssRules from 'css_composer/model/CssRules';
+import { isComponent, isObject } from 'utils/mixins';
-import { isString } from 'underscore';
 
 export default Backbone.Model.extend({
   defaults: () => ({
+    x: 0,
+    y: 0,
+    attributes: {},
     width: null,
     height: null,
     head: [],
-    x: 0,
+    components: '',
-    y: 0,
+    styles: ''
-    root: 0,
-    components: 0,
-    styles: 0,
-    attributes: {}
   }),
 
   initialize(props, opts = {}) {
     const { config } = opts;
     const { em } = config;
-    const { root, styles, components } = this.attributes;
+    const { styles, components } = this.attributes;
     const conf = em.get('DomComponents').getConfig();
+    const allRules = em.get('CssComposer').getAll();
     this.em = em;
     const modOpts = { em, config: conf, frame: this };
 
-    !root &&
+    if (!isComponent(components)) {
-      this.set(
+      this.set('components', new Component({ components }, modOpts));
-        'root',
+    }
-        new Component(
-          {
-            type: 'wrapper',
-            components: components || []
-          },
-          modOpts
-        )
-      );
-
-    (!styles || isString(styles)) &&
-      this.set('styles', new CssRules(styles, modOpts));
-  },
 
-  /*
+    if (!styles) {
-  frames: [
+      this.set('styles', allRules);
-    {
+    } else if (!isObject(styles)) {
-        components: '<div id="wrapper">...</div>',
+      allRules.add(styles);
-        styles: '#wrapper{...}, .class{...}',
-    }, {
-        component: 'i123', // get reference on render
-        style: 'rules-id' // get reference on render
-    }, {
-        components: '<div id="wrapper2">...</div>',
-        style: 'rules-id', // get reference on render
     }
-]
+  },
-  */
-  getComponent() {},
 
-  getStyle() {},
+  getComponents() {
+    return this.get('components');
+  },
+
+  getStyles() {
+    return this.get('styles');
+  },
 
   disable() {
     this.trigger('disable');

src/canvas/view/FrameView.js

@@ -252,8 +252,8 @@ export default Backbone.View.extend({
 
   renderBody() {
     const { config, model, ppfx } = this;
-    const root = model.get('root');
+    const components = model.getComponents();
-    const styles = model.get('styles');
+    const styles = model.getStyles();
     const { em } = config;
     const doc = this.getDoc();
     const head = this.getHead();
@@ -355,9 +355,9 @@ export default Backbone.View.extend({
     </style>`
     );
     this.root = new ComponentView({
-      model: root,
+      model: components,
       config: {
-        ...root.config,
+        ...components.config,
         frameView: this
       }
     }).render();

src/utils/Droppable.js

@@ -13,7 +13,7 @@ export default class Droppable {
       em
         .get('Canvas')
         .getFrames()
-        .map(frame => frame.get('root').getEl());
+        .map(frame => frame.getComponents().getEl());
     const els = Array.isArray(el) ? el : [el];
     this.el = el;
     this.counter = 0;