Add addFrame method in canvas

src/canvas/index.js

@@ -583,6 +583,40 @@ export default () => {
 
     getFrames() {
       return canvas.get('frames').map(item => item);
+    },
+
+    /**
+     * Add new frame to canvas
+     * @param {Object} props Frame properties
+     * @example
+     *
+        editor.Canvas.addFrame({
+          name: 'Mobile home page',
+          x: 100, // Position in canvas
+          y: 100,
+          width: 500, // Frame dimensions
+          height: 600,
+          // device: 'DEVICE-ID',
+          components: [
+            '<h1 class="testh">Title frame</h1>',
+            '<p class="testp">Paragraph frame</p>',
+          ],
+          styles: `
+            .testh { color: red; }
+            .testp { color: blue; }
+          `,
+        });
+     */
+    addFrame(props = {}, opts = {}) {
+      return canvas.get('frames').add(
+        {
+          ...props
+        },
+        {
+          ...opts,
+          em: this.em
+        }
+      );
     }
   };
 };

src/canvas/model/Frame.js

@@ -11,14 +11,29 @@ export default Backbone.Model.extend({
     x: 0,
     y: 0,
     root: 0,
+    components: 0,
     styles: 0,
     attributes: {}
   },
 
-  initialize() {
-    const { root, styles } = this.attributes;
+  initialize(props, opts = {}) {
+    console.log(props, opts);
+    const { root, styles, components } = this.attributes;
     this.set('head', []);
-    !root && this.set('root', new Component({ type: 'wrapper' }));
+    !root &&
+      this.set(
+        'root',
+        new Component(
+          {
+            type: 'wrapper',
+            components: components || []
+          },
+          {
+            em: opts.em,
+            frame: this
+          }
+        )
+      );
     !styles && this.set('styles', new CssRules());
   },
 

src/canvas/view/FramesView.js

@@ -3,6 +3,7 @@ import FrameWrapView from './FrameWrapView';
 
 export default DomainViews.extend({
   itemView: FrameWrapView,
+  autoAdd: 1,
 
   init() {
     this.listenTo(this.collection, 'reset', this.render);

src/dom_components/model/Component.js

@@ -171,6 +171,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       opt.em = em;
       this.opt = opt;
       this.em = em;
+      this.frame = opt.frame;
       this.config = opt.config || {};
       this.set('attributes', {
         ...(this.defaults.attributes || {}),

src/dom_components/model/Components.js

@@ -13,7 +13,7 @@ export default Backbone.Collection.extend({
 
     this.model = (attrs, options) => {
       var model;
-      var df = opt.componentTypes;
+      const df = opt.em.get('DomComponents').componentTypes;
       options.em = opt.em;
       options.config = opt.config;
       options.componentTypes = df;
@@ -46,9 +46,10 @@ export default Backbone.Collection.extend({
     const { em } = this;
     const cssc = em.get('CssComposer');
     const parsed = em.get('Parser').parseHtml(value);
+    const domc = em.get('DomComponents');
     // We need this to avoid duplicate IDs
     if (!Component) Component = require('./Component').default;
-    Component.checkId(parsed.html, parsed.css, this.opt.domc.componentsById);
+    Component.checkId(parsed.html, parsed.css, domc.componentsById);
 
     if (parsed.css && cssc && !opt.temporary) {
       cssc.addCollection(parsed.css, {

src/domain_abstract/view/DomainViews.js

@@ -9,8 +9,13 @@ export default Backbone.View.extend({
 
   itemType: 'type',
 
+  autoAdd: 0,
+
   initialize(opts = {}, config) {
     this.config = config || opts.config || {};
+
+    this.autoAdd && this.listenTo(this.collection, 'add', this.addTo);
+
     this.init();
   },