From 8ccbdca9a5e7c0f0632732be4d653dd0d4c573ac Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Thu, 28 Jul 2016 15:12:21 +0200 Subject: [PATCH] Add canvas offset updating --- src/block_manager/view/BlocksView.js | 22 +++++++++++++++------- src/canvas/view/CanvasView.js | 1 + src/canvas/view/FrameView.js | 10 ++++++++++ src/commands/view/CommandAbstract.js | 4 ++-- src/commands/view/OpenStyleManager.js | 1 - src/commands/view/SelectComponent.js | 5 ++++- src/commands/view/SelectPosition.js | 16 +--------------- src/utils/Sorter.js | 19 +++++++++++++++++-- styles/css/main.css | 3 ++- styles/scss/main.scss | 1 + 10 files changed, 53 insertions(+), 29 deletions(-) diff --git a/src/block_manager/view/BlocksView.js b/src/block_manager/view/BlocksView.js index 56046ffe4..f3b1dbeec 100644 --- a/src/block_manager/view/BlocksView.js +++ b/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 sorter = new utils.Sorter({ + var canvas = this.canvas; + 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 diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 6cb8c4ed0..f140c6fad 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -49,6 +49,7 @@ function(Backbone, FrameView) { body.append(''); 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 diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index 5d286f804..7e9a9acb4 100644 --- a/src/canvas/view/FrameView.js +++ b/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(){ diff --git a/src/commands/view/CommandAbstract.js b/src/commands/view/CommandAbstract.js index 163081996..0364d774a 100644 --- a/src/commands/view/CommandAbstract.js +++ b/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, - left: rect.left + document.body.scrollLeft + top: rect.top + el.ownerDocument.body.scrollTop, + left: rect.left + el.ownerDocument.body.scrollLeft }; }, diff --git a/src/commands/view/OpenStyleManager.js b/src/commands/view/OpenStyleManager.js index d2a0e8c34..a3c481bb2 100644 --- a/src/commands/view/OpenStyleManager.js +++ b/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 diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index 3cb524410..a199f448d 100644 --- a/src/commands/view/SelectComponent.js +++ b/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; diff --git a/src/commands/view/SelectPosition.js b/src/commands/view/SelectPosition.js index ee5f353e6..603144bb3 100644 --- a/src/commands/view/SelectPosition.js +++ b/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(); diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index 1a3255aba..49535c819 100644 --- a/src/utils/Sorter.js +++ b/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; }, /** diff --git a/styles/css/main.css b/styles/css/main.css index 0a6f4c05d..9cb23f1ee 100644 --- a/styles/css/main.css +++ b/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 { diff --git a/styles/scss/main.scss b/styles/scss/main.scss index 57c1047d7..35ed14ac4 100644 --- a/styles/scss/main.scss +++ b/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{