Update Frame position

src/canvas/index.js

@@ -578,6 +578,10 @@ export default () => {
      */
     getFrameWrapperEl() {
       return CanvasView.frame.getWrapper();
+    },
+
+    getFrames() {
+      return canvas.get('frames').map(item => item);
     }
   };
 };

src/canvas/model/Canvas.js

@@ -1,9 +1,11 @@
 import Backbone from 'backbone';
 import Frame from './Frame';
+import Frames from './Frames';
 
 export default Backbone.Model.extend({
   defaults: {
     frame: '',
+    frames: '',
     wrapper: '',
     rulers: false,
     zoom: 100,
@@ -17,6 +19,7 @@ export default Backbone.Model.extend({
     styles.forEach(style => frame.addLink(style));
     scripts.forEach(script => frame.addScript(script));
     this.set('frame', frame);
+    this.set('frames', new Frames([frame]));
     this.listenTo(this, 'change:zoom', this.onZoomChange);
   },
 

src/canvas/model/Frame.js

@@ -6,6 +6,8 @@ export default Backbone.Model.extend({
     width: '',
     height: '',
     head: '',
+    x: 0,
+    y: 0,
     attributes: {}
   },
 

src/canvas/model/Frames.js

@@ -0,0 +1,4 @@
+import Backbone from 'backbone';
+import model from './Frame';
+
+export default Backbone.Collection.extend({ model });

src/canvas/view/FrameView.js

@@ -14,11 +14,23 @@ export default Backbone.View.extend({
 
   initialize(o) {
     bindAll(this, 'updateOffset');
+    const { model } = this;
     this.config = o.config || {};
     this.ppfx = this.config.pStylePrefix || '';
     this.em = this.config.em;
-    this.listenTo(this.model, 'change:head', this.updateHead);
+    this.listenTo(model, 'change:head', this.updateHead);
+    this.listenTo(model, 'change:x change:y', this.updatePos);
     this.listenTo(this.em, 'change:device', this.updateDim);
+    this.updatePos();
+  },
+
+  updatePos() {
+    const { model, el } = this;
+    const { x, y } = model.attributes;
+    const { style } = el;
+    style.left = isNaN(x) ? x : `${x}px`;
+    style.top = isNaN(y) ? y : `${y}px`;
+    this.updateOffset();
   },
 
   /**
@@ -53,8 +65,10 @@ export default Backbone.View.extend({
   },
 
   updateOffset() {
-    const em = this.em;
-    const offset = em.get('Canvas').getOffset();
+    const { em } = this;
+    const cv = em.get('Canvas');
+    if (!cv) return;
+    const offset = cv.getOffset();
     em.set('canvasOffset', offset);
     em.runDefault({ preserveSelected: 1 });
     this.$el.off(motionsEv, this.updateOffset);