Stop loading old frame and adjust initial rendering

src/canvas/model/Frames.js

@@ -1,4 +1,30 @@
+import { bindAll } from 'underscore';
 import Backbone from 'backbone';
 import model from './Frame';
 
-export default Backbone.Collection.extend({ model });
+export default Backbone.Collection.extend({
+  model,
+
+  initialize() {
+    bindAll(this, 'itemLoaded');
+  },
+
+  itemLoaded() {
+    this.loadedItems++;
+
+    if (this.loadedItems >= this.itemsToLoad) {
+      this.trigger('loaded:all');
+      this.listenToLoadItems(0);
+    }
+  },
+
+  listenToLoad() {
+    this.loadedItems = 0;
+    this.itemsToLoad = this.length;
+    this.listenToLoadItems(1);
+  },
+
+  listenToLoadItems(on) {
+    this.forEach(item => item[on ? 'on' : 'off']('loaded', this.itemLoaded));
+  }
+});

src/canvas/view/CanvasView.js

@@ -42,10 +42,6 @@ export default Backbone.View.extend({
     this.listenTo(em, 'component:selected', this.checkSelected);
     this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames);
     this.toggleListeners(1);
-    this.frame = new FrameView({
-      model: this.model.get('frame'),
-      config: this.config
-    });
   },
 
   checkSelected(component, opts = {}) {
@@ -502,13 +498,13 @@ export default Backbone.View.extend({
         root: wrapper.getWrapper(),
         styles: cssc.getAll()
       });
-      $frames.append(this.frame.render().el);
-      var frame = this.frame;
-      if (this.config.scripts.length === 0) {
-        frame.el.onload = this.renderBody;
-      } else {
-        this.renderScripts(); // will call renderBody later
-      }
+      // $frames.append(this.frame.render().el);
+      // var frame = this.frame;
+      // if (this.config.scripts.length === 0) {
+      //   frame.el.onload = this.renderBody;
+      // } else {
+      //   this.renderScripts(); // will call renderBody later
+      // }
     }
 
     const toolsWrp = $el.find('[data-tools]');
@@ -540,16 +536,20 @@ export default Backbone.View.extend({
     this.el.className = this.className;
 
     // Render all frames
+    const frms = model.get('frames');
     const frames = new FramesView({
-      collection: model.get('frames'),
+      collection: frms,
       config: {
         ...config,
         renderContent: 1,
         canvasView: this
       }
     });
+    frms.listenToLoad();
+    frms.on('loaded:all', () => em.trigger('loaded'));
     frames.render();
     $frames.append(frames.el);
+    this.frame = frms.at(0).view;
 
     return this;
   }

src/canvas/view/FrameView.js

@@ -81,11 +81,11 @@ export default Backbone.View.extend({
         },
         { silent: 1 }
       );
-    this.updateOffset();
     // Prevent fixed highlighting box which appears when on
     // component hover during the animation
     em.stopDefault({ preserveSelected: 1 });
-    noChanges ? this.updateOffset() : $el.on(motionsEv, this.updateOffset);
+    // TODO in updateOffset make use of internal API instead of Canvas
+    // noChanges ? this.updateOffset() : $el.on(motionsEv, this.updateOffset);
   },
 
   updateOffset() {
@@ -288,7 +288,7 @@ export default Backbone.View.extend({
     append(body, new CssRulesView({ collection: styles, config }).render().el);
     append(body, this.getJsContainer());
     // em.trigger('loaded'); // I need to manage only the first one maybe
-    this.updateOffset(); // TOFIX (check if I need it)
+    //this.updateOffset(); // TOFIX (check if I need it)
 
     // Avoid some default behaviours
     on(
@@ -312,6 +312,6 @@ export default Backbone.View.extend({
     );
 
     this.updateDim();
-    this.trigger('loaded');
+    model.trigger('loaded');
   }
 });

src/commands/index.js

@@ -128,18 +128,16 @@ export default () => {
           const nativeDrag = event && event.type == 'dragstart';
           const defComOptions = { preserveSelected: 1 };
           const modes = ['absolute', 'translate'];
+          const mode = sel.get('dmode') || em.get('dmode');
           const hideTlb = () => em.stopDefault(defComOptions);
 
           // Dirty patch to prevent parent selection on drop (in absolute mode)
           em.set('_cmpDrag', 1);
 
           if (!sel || !sel.get('draggable')) {
-            console.warn('The element is not draggable');
-            return;
+            return em.logWarning('The element is not draggable');
           }
 
-          const mode = sel.get('dmode') || em.get('dmode');
-
           // Without setTimeout the ghost image disappears
           nativeDrag ? setTimeout(hideTlb, 0) : hideTlb();
 

src/commands/view/CommandAbstract.js

@@ -23,10 +23,10 @@ export default Backbone.View.extend({
 
     if (this.canvas) {
       this.$canvas = this.$el;
-      this.$wrapper = $(this.getCanvasWrapper());
-      this.frameEl = this.canvas.getFrameEl();
+      // this.$wrapper = $(this.getCanvasWrapper());
+      // this.frameEl = this.canvas.getFrameEl();
       this.canvasTool = this.getCanvasTools();
-      this.bodyEl = this.getCanvasBody();
+      // this.bodyEl = this.getCanvasBody();
     }
 
     this.init(this.config);

src/commands/view/MoveComponent.js

@@ -91,8 +91,9 @@ export default extend({}, SelectPosition, SelectComponent, {
     // Avoid badge showing on move
     this.cacheEl = null;
     const lastModel = models[models.length - 1];
-    const doc = this.frameEl.contentDocument;
-    this.startSelectPosition(lastModel.view.el, doc);
+    const el = lastModel.getEl();
+    const doc = el.ownerDocument;
+    this.startSelectPosition(el, doc);
     this.sorter.draggable = lastModel.get('draggable');
     this.sorter.toMove = models;
     this.sorter.onEndMove = this.onEndMoveFromModel.bind(this);

src/utils/Droppable.js

@@ -2,16 +2,19 @@
   This class makes the canvas droppable
  */
 
-import { on } from 'utils/mixins';
+import { on, off } from 'utils/mixins';
 import { bindAll, indexOf } from 'underscore';
 
 export default class Droppable {
-  constructor(em) {
+  constructor(em, rootEl) {
     this.em = em;
-    const el = em
-      .get('DomComponents')
-      .getWrapper()
-      .getEl();
+    const el =
+      rootEl ||
+      em
+        .get('Canvas')
+        .getFrames()
+        .map(frame => frame.get('root').getEl());
+    const els = Array.isArray(el) ? el : [el];
     this.el = el;
     this.counter = 0;
     bindAll(
@@ -21,14 +24,21 @@ export default class Droppable {
       'handleDrop',
       'handleDragLeave'
     );
-    on(el, 'dragenter', this.handleDragEnter);
-    on(el, 'dragover', this.handleDragOver);
-    on(el, 'drop', this.handleDrop);
-    on(el, 'dragleave', this.handleDragLeave);
+    els.forEach(el => this.toggleEffects(el, 1));
 
     return this;
   }
 
+  toggleEffects(el, enable) {
+    const methods = { on, off };
+    const method = enable ? 'on' : 'off';
+    methods[method](el, 'dragenter', this.handleDragEnter);
+    methods[method](el, 'dragover', this.handleDragOver);
+    methods[method](el, 'drop', this.handleDrop);
+    methods[method](el, 'dragleave', this.handleDragLeave);
+    console.log('enable on', el);
+  }
+
   endDrop(cancel, ev) {
     const { em, dragStop } = this;
     this.counter = 0;