Adjust frames loading order

src/canvas/view/CanvasView.js

@@ -8,7 +8,6 @@ import {
   isTextNode,
   getElRect
 } from 'utils/mixins';
-import FrameView from './FrameView';
 import FramesView from './FramesView';
 
 const $ = Backbone.$;
@@ -31,6 +30,7 @@ export default Backbone.View.extend({
     bindAll(this, 'clearOff', 'onKeyPress');
     on(window, 'scroll resize', this.clearOff);
     const { model } = this;
+    const frames = model.get('frames');
     this.config = o.config || {};
     this.em = this.config.em || {};
     this.pfx = this.config.stylePrefix || '';
@@ -38,7 +38,7 @@ export default Backbone.View.extend({
     this.className = this.config.stylePrefix + 'canvas';
     const { em, config } = this;
     this.frames = new FramesView({
-      collection: model.get('frames'),
+      collection: frames,
       config: {
         ...config,
         canvasView: this,
@@ -48,6 +48,7 @@ export default Backbone.View.extend({
     this.listenTo(em, 'change:canvasOffset', this.clearOff);
     this.listenTo(em, 'component:selected', this.checkSelected);
     this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames);
+    this.listenTo(frames, 'loaded:all', () => em.trigger('loaded'));
     this.toggleListeners(1);
   },
 
@@ -355,7 +356,6 @@ export default Backbone.View.extend({
     // Render all frames
     const frms = model.get('frames');
     frms.listenToLoad();
-    frms.on('loaded:all', () => em.trigger('loaded'));
     frames.render();
     em.setCurrentFrame(frms.at(0).view);
     $frames.append(frames.el);

src/canvas/view/FrameWrapView.js

@@ -35,8 +35,9 @@ export default Backbone.View.extend({
     this.ppfx = config.pStylePrefix || '';
     this.frame = new FrameView({ model, config });
     this.classAnim = `${this.ppfx}frame-wrapper--anim`;
+    this.listenTo(model, 'loaded', this.frameLoaded);
     this.listenTo(model, 'change:x change:y', this.updatePos);
-    this.listenTo(model, 'loaded change:width change:height', this.updateDim);
+    this.listenTo(model, 'change:width change:height', this.updateSize);
     this.updatePos();
     this.setupDragger();
   },
@@ -93,11 +94,15 @@ export default Backbone.View.extend({
     md && this.updateOffset();
   },
 
+  updateSize: debounce(function() {
+    this.updateDim();
+  }),
+
   /**
    * Update dimensions of the frame
    * @private
    */
-  updateDim: debounce(function() {
+  updateDim() {
     const { em, el, $el, model, classAnim } = this;
     const { width, height } = model.attributes;
     const { style } = el;
@@ -125,7 +130,7 @@ export default Backbone.View.extend({
     // component hover during the animation
     em.stopDefault({ preserveSelected: 1 });
     noChanges ? this.updateOffset() : $el.one(motionsEv, this.updateOffset);
-  }),
+  },
 
   onScroll() {
     const { frame, em } = this;
@@ -139,6 +144,7 @@ export default Backbone.View.extend({
   frameLoaded() {
     const { frame } = this;
     frame.getWindow().onscroll = this.onScroll;
+    this.updateDim();
   },
 
   render() {
@@ -212,7 +218,6 @@ export default Backbone.View.extend({
         remove: this.remove,
         startDrag: this.startDrag
       });
-    model.on('loaded', this.frameLoaded);
     return this;
   }
 });