Add canvas offset updating

src/block_manager/view/BlocksView.js

@@ -12,6 +12,8 @@ function(Backbone, BlockView) {
       this.tac = 'test-tac';
       this.config.getSorter = this.getSorter;
       this.config.dragHelper = this.dragHelper;
+      //this.listenTo(this.em, 'change:device', this.updateOffset);
+      this.canvas = this.em.get('Canvas');
     },
 
     /**
@@ -23,8 +25,8 @@ function(Backbone, BlockView) {
         return;
       if(!this.sorter){
         var utils = this.em.get('Utils');
-        var canvas = this.em.get('Canvas');
+        var canvas = this.canvas;
-        var sorter = new utils.Sorter({
+        this.sorter = new utils.Sorter({
           container: canvas.getBody(),
           placer: canvas.getPlacerEl(),
           containerSel: '*',
@@ -36,15 +38,21 @@ function(Backbone, BlockView) {
           direction: 'a',
           wmargin: 1,
           nested: 1,
+          em: this.em
         });
-        var offDim = canvas.getOffset();
-        sorter.offTop = offDim.top;
-        sorter.offLeft = offDim.left;
-        this.sorter = sorter;
       }
       return this.sorter;
     },
-
+/*
+    updateOffset: function(){
+      if(!this.sorter)
+        return;
+      var sorter = this.sorter;
+      var offDim = this.canvas.getOffset();
+      sorter.offTop = offDim.top;
+      sorter.offLeft = offDim.left;
+    },
+*/
     /**
      * Callback when block is on drag
      * @private

src/canvas/view/CanvasView.js

@@ -49,6 +49,7 @@ function(Backbone, FrameView) {
         	body.append('<style>' + frameCss + protCss + '</style>');
         this.config.em.trigger('loaded');
         this.frame.el.contentWindow.onscroll = this.onFrameScroll;
+        this.frame.udpateOffset();
 
         // When the iframe is focused the event dispatcher is not the same so
         // I need to delegate all events to the parent document

src/canvas/view/FrameView.js

@@ -12,9 +12,11 @@ function(Backbone) {
     },
 
     initialize: function(o) {
+      _.bindAll(this, 'udpateOffset');
       this.config = o.config || {};
       this.ppfx = this.config.pStylePrefix || '';
       this.em = this.config.em;
+      this.motionsEv = 'transitionend oTransitionEnd transitionend webkitTransitionEnd';
       this.listenTo(this.em, 'change:device', this.updateWidth);
     },
 
@@ -25,6 +27,14 @@ function(Backbone) {
     updateWidth: function(model){
       var device = this.em.getDeviceModel();
       this.el.style.width = device ? device.get('width') : '';
+      this.udpateOffset();
+      this.$el.on(this.motionsEv, this.udpateOffset);
+    },
+
+    udpateOffset: function(){
+      var offset = this.em.get('Canvas').getOffset();
+      this.em.set('canvasOffset', offset);
+      this.$el.off(this.motionsEv, this.udpateOffset);
     },
 
     getBody: function(){

src/commands/view/CommandAbstract.js

@@ -86,8 +86,8 @@ define(['backbone'],
       offset: function(el){
         var rect = el.getBoundingClientRect();
         return {
-          top: rect.top + document.body.scrollTop,
+          top: rect.top + el.ownerDocument.body.scrollTop,
-          left: rect.left + document.body.scrollLeft
+          left: rect.left + el.ownerDocument.body.scrollLeft
         };
       },
 

src/commands/view/OpenStyleManager.js

@@ -22,7 +22,6 @@ define(['StyleManager'], function(StyleManager) {
 					if(dvm && config.showDevices){
 						var devicePanel = panels.addPanel({ id: 'devices-c'});
 						devicePanel.set('appendContent', dvm.render()).trigger('change:appendContent');
-						//this.$cn2.append(dvm.render());
 					}
 
 					// Class Manager container

src/commands/view/SelectComponent.js

@@ -6,7 +6,8 @@ define(function() {
 		return {
 
 			init: function(o){
-				_.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress');
+				_.bindAll(this, 'onHover', 'onOut', 'onClick', 'onKeyPress', 'clearOff');
+				this.trEvents = 'transitionend oTransitionEnd transitionend webkitTransitionEnd';
 			},
 
 
@@ -20,6 +21,7 @@ define(function() {
 					key('⌘+v, ctrl+v', this.pasteComp);
 				}
 				this.listenTo(this.em.editor, 'change:device', this.clearOff);
+				$(this.frameEl).on(this.trEvents, this.clearOff);
 			},
 
 			/**
@@ -289,6 +291,7 @@ define(function() {
 
 			stop: function() {
 				this.stopListening(this.em.editor, 'change:device', this.clearOff);
+				$(this.frameEl).off(this.trEvents, this.clearOff);
 				if(!this.selEl)
 					this.selEl = $(this.getCanvasBody()).find('*');
 			  this.frameOff = this.canvasOff = this.adjScroll = null;

src/commands/view/SelectPosition.js

@@ -21,10 +21,8 @@ define(function() {
 						document: doc,
 						wmargin: 1,
 						nested: 1,
+						em: this.editorModel,
 					});
-				var offDim = this.getOffsetDim();
-				this.sorter.offTop = offDim.top;
-				this.sorter.offLeft = offDim.left;
 				this.sorter.startSort(trg);
 			},
 
@@ -36,7 +34,6 @@ define(function() {
 			getOffsetDim: function() {
 				var frameOff = this.offset(this.canvas.getFrameEl());
 				var canvasOff = this.offset(this.canvas.getElement());
-				var bodyEl = this.getCanvasBody();
 				var top = frameOff.top - canvasOff.top;
 				var left = frameOff.left - canvasOff.left;
 				return { top: top, left: left };
@@ -67,19 +64,9 @@ define(function() {
 			 * @private
 			 */
 			enable: function() {
-				this.frameEl.contentWindow.onscroll = this.onFrameScroll.bind(this);
 				this.startSelectPosition();
 			},
 
-			/**
-			 * On frame scroll callback
-			 * @private
-			 */
-			onFrameScroll: function(e) {
-				this.canvasTool.style.top = '-' + this.bodyEl.scrollTop + 'px';
-				this.canvasTool.style.left = '-' + this.bodyEl.scrollLeft + 'px';
-			},
-
 			/**
 			 * Check if the pointer is near to the float component
 			 * @param {number} index
@@ -107,7 +94,6 @@ define(function() {
 			},
 
 			stop: function() {
-				this.frameEl.contentWindow.onscroll = null;
 				this.stopSelectPosition();
 				this.$wrapper.css('cursor','');
 				this.$wrapper.unbind();

src/utils/Sorter.js

@@ -4,7 +4,7 @@ define(['backbone'],
     return Backbone.View.extend({
 
       initialize: function(opt) {
-        _.bindAll(this,'startSort','onMove','endMove','rollback');
+        _.bindAll(this,'startSort','onMove','endMove','rollback', 'udpateOffset');
         var o = opt || {};
         this.elT = 0;
         this.elL = 0;
@@ -27,10 +27,25 @@ define(['backbone'],
         // Frame offset
         this.wmargin = o.wmargin || 0;
         this.offTop = o.offsetTop || 0;
-        this.offleft = o.offsetLeft || 0;
+        this.offLeft = o.offsetLeft || 0;
         this.document = o.document || document;
         this.dropContent = '';
         this.helper = '';
+        this.em = o.em || '';
+
+        if(this.em && this.em.on){
+          this.em.on('change:canvasOffset', this.udpateOffset);
+          this.udpateOffset();
+        }
+      },
+
+      /**
+       * Triggered when the offset of the editro is changed
+       */
+      udpateOffset: function(){
+        var offset = this.em.get('canvasOffset');
+        this.offTop = offset.top;
+        this.offLeft = offset.left;
       },
 
       /**

styles/css/main.css

@@ -3087,7 +3087,8 @@ ol.example li.placeholder:before {
   .wte-devices-c .wte-device-label {
     flex-grow: 2;
     font-size: 0.7em;
-    text-align: left; }
+    text-align: left;
+    margin-right: 10px; }
   .wte-devices-c .wte-select {
     flex-grow: 20; }
   .wte-devices-c .wte-add-trasp {

styles/scss/main.scss

@@ -625,6 +625,7 @@ $arrowColor:    $mainLhlColor; /*b1b1b1*/
     flex-grow: 2;
     font-size: 0.7em;
     text-align: left;
+    margin-right: 10px;
   }
 
   .#{$app-prefix}select{