Refactor editor

src/canvas/index.js

@@ -124,8 +124,8 @@ export default () => {
       return CanvasView.el;
     },
 
-    getFrame() {
-      return canvas.get('frame');
+    getFrame(index) {
+      return index ? this.getFrames()[index] : canvas.get('frame');
     },
 
     /**

src/canvas/model/Canvas.js

@@ -16,7 +16,9 @@ export default Backbone.Model.extend({
   initialize(config = {}) {
     const { em } = config;
     const { styles = [], scripts = [] } = config;
-    const frame = new Frame({}, config);
+    const root = em && em.getWrapper();
+    const css = em && em.getStyle();
+    const frame = new Frame({ root, styles: css }, config);
     styles.forEach(style => frame.addLink(style));
     scripts.forEach(script => frame.addScript(script));
     this.em = em;

src/editor/index.js

@@ -131,148 +131,6 @@ export default (config = {}) => {
      */
     editor: em,
 
-    /**
-     * @property {I18n}
-     * @private
-     */
-    I18n: em.get('I18n'),
-
-    /**
-     * @property {DomComponents}
-     * @private
-     */
-    DomComponents: em.get('DomComponents'),
-    Components: em.get('DomComponents'),
-
-    /**
-     * @property {LayerManager}
-     * @private
-     */
-    LayerManager: em.get('LayerManager'),
-    Layers: em.get('LayerManager'),
-
-    /**
-     * @property {CssComposer}
-     * @private
-     */
-    CssComposer: em.get('CssComposer'),
-    Css: em.get('CssComposer'),
-
-    /**
-     * @property {StorageManager}
-     * @private
-     */
-    StorageManager: em.get('StorageManager'),
-    Storage: em.get('StorageManager'),
-
-    /**
-     * @property {AssetManager}
-     * @private
-     */
-    AssetManager: em.get('AssetManager'),
-    Assets: em.get('AssetManager'),
-
-    /**
-     * @property {BlockManager}
-     * @private
-     */
-    BlockManager: em.get('BlockManager'),
-    Blocks: em.get('BlockManager'),
-
-    /**
-     * @property {TraitManager}
-     * @private
-     */
-    TraitManager: em.get('TraitManager'),
-    Traits: em.get('TraitManager'),
-
-    /**
-     * @property {SelectorManager}
-     * @private
-     */
-    SelectorManager: em.get('SelectorManager'),
-    Selectors: em.get('SelectorManager'),
-
-    /**
-     * @property {CodeManager}
-     * @private
-     */
-    CodeManager: em.get('CodeManager'),
-
-    /**
-     * @property {Commands}
-     * @private
-     */
-    Commands: em.get('Commands'),
-
-    /**
-     * @property {Keymaps}
-     * @private
-     */
-    Keymaps: em.get('Keymaps'),
-
-    /**
-     * @property {Modal}
-     * @private
-     */
-    Modal: em.get('Modal'),
-
-    /**
-     * @property {Panels}
-     * @private
-     */
-    Panels: em.get('Panels'),
-
-    /**
-     * @property {StyleManager}
-     * @private
-     */
-    StyleManager: em.get('StyleManager'),
-    Styles: em.get('StyleManager'),
-
-    /**
-     * @property {Canvas}
-     * @private
-     */
-    Canvas: em.get('Canvas'),
-
-    /**
-     * @property {UndoManager}
-     * @private
-     */
-    UndoManager: em.get('UndoManager'),
-
-    /**
-     * @property {DeviceManager}
-     * @private
-     */
-    DeviceManager: em.get('DeviceManager'),
-    Devices: em.get('DeviceManager'),
-
-    /**
-     * @property {RichTextEditor}
-     * @private
-     */
-    RichTextEditor: em.get('RichTextEditor'),
-
-    /**
-     * @property {Parser}
-     * @private
-     */
-    Parser: em.get('Parser'),
-
-    /**
-     * @property {Utils}
-     * @private
-     */
-    Utils: em.get('Utils'),
-
-    /**
-     * @property {Utils}
-     * @private
-     */
-    Config: em.get('Config'),
-
     /**
      * Initialize editor model
      * @return {this}
@@ -281,6 +139,47 @@ export default (config = {}) => {
     init(opts = {}) {
       em.init(this, { ...c, ...opts });
 
+      [
+        'I18n',
+        'Utils',
+        'Config',
+        'Commands',
+        'Keymaps',
+        'Modal',
+        'Panels',
+        'Canvas',
+        'Parser',
+        'CodeManager',
+        'UndoManager',
+        'RichTextEditor',
+        'DomComponents',
+        ['Components', 'DomComponents'],
+        'LayerManager',
+        ['Layers', 'LayerManager'],
+        'CssComposer',
+        ['Css', 'CssComposer'],
+        'StorageManager',
+        ['Storage', 'StorageManager'],
+        'AssetManager',
+        ['Assets', 'AssetManager'],
+        'BlockManager',
+        ['Blocks', 'BlockManager'],
+        'TraitManager',
+        ['Traits', 'TraitManager'],
+        'SelectorManager',
+        ['Selectors', 'SelectorManager'],
+        'StyleManager',
+        ['Styles', 'StyleManager'],
+        'DeviceManager',
+        ['Devices', 'DeviceManager']
+      ].forEach(prop => {
+        if (Array.isArray(prop)) {
+          this[prop[0]] = em.get(prop[1]);
+        } else {
+          this[prop] = em.get(prop);
+        }
+      });
+
       // Do post render stuff after the iframe is loaded otherwise it'll
       // be empty during tests
       em.on('loaded', () => {

test/specs/editor/index.js

@@ -24,4 +24,36 @@ describe('Editor', () => {
     expect(allKeys.length).toBe(1);
     expect(allKeys[0]).toBe('wrapper');
   });
+
+  test('Has no CSS rules', () => {
+    const all = editor.Css.getAll();
+    expect(all.length).toBe(0);
+  });
+
+  test('Has one default frame', () => {
+    const all = editor.Canvas.getFrames();
+    expect(all.length).toBe(1);
+  });
+
+  test('The default frame has the same main component and css', () => {
+    const wrapper = editor.getWrapper();
+    const style = editor.getStyle();
+    const frame = editor.Canvas.getFrame();
+    expect(wrapper).toBe(frame.get('root'));
+    expect(style).toBe(frame.get('styles'));
+  });
+
+  //   test('Components are added to the default frame', () => {
+  //     const wrapper = editor.getWrapper();
+  //     const component = wrapper.append('<div>Component</div>');
+  //     const frame = editor.Canvas.getFrame();
+  //     console.log('WRAPPER', wrapper.components().length);
+  //     console.log('ROOT', frame.get('root').components().length);
+  //     expect(wrapper).toBe(frame.get('root'));
+  //   });
+
+  //   test('New component correctly added', () => {
+  //     const all = editor.Css.getAll();
+  //     expect(all.length).toBe(0);
+  //   });
 });