diff --git a/src/canvas/index.js b/src/canvas/index.js index 7706aba05..63948a520 100644 --- a/src/canvas/index.js +++ b/src/canvas/index.js @@ -38,6 +38,7 @@ import { getPointerEvent, getViewEl } from 'utils/mixins'; +import { debounce } from 'underscore'; import Droppable from 'utils/Droppable'; import defaults from './config/config'; import Canvas from './model/Canvas'; @@ -579,8 +580,11 @@ export default () => { */ startAutoscroll() { this.dragging = 1; - let toListen = this.getScrollListeners(); + const frameEl = this.getFrameEl(); + const toListen = this.getScrollListeners(); frameRect = CanvasView.getFrameOffset(); + this.lastMaxHeight = + getViewEl(frameEl).getWrapper().offsetHeight - frameEl.offsetHeight; // By detaching those from the stack avoid browsers lags // Noticeable with "fast" drag of blocks @@ -601,12 +605,13 @@ export default () => { */ autoscroll() { if (this.dragging) { - let frameWindow = this.getFrameEl().contentWindow; - let actualTop = frameWindow.document.body.scrollTop; + const frameWindow = this.getFrameEl().contentWindow; + const { body } = frameWindow.document; + const actualTop = body.scrollTop; + const clientY = this.lastClientY; + const limitTop = this.getConfig().autoscrollLimit; + const limitBottom = frameRect.height - limitTop; let nextTop = actualTop; - let clientY = this.lastClientY; - let limitTop = this.getConfig().autoscrollLimit; - let limitBottom = frameRect.height - limitTop; if (clientY < limitTop) { nextTop -= limitTop - clientY; @@ -616,11 +621,25 @@ export default () => { nextTop += clientY - limitBottom; } - frameWindow.scrollTo(0, nextTop); + if ( + nextTop !== actualTop && + nextTop > 0 && + nextTop < this.lastMaxHeight + ) { + const toolsEl = this.getGlobalToolsEl(); + toolsEl.style.opacity = 0; + this.showGlobalTools(); + frameWindow.scrollTo(0, nextTop); + } + requestAnimationFrame(this.autoscroll); } }, + showGlobalTools: debounce(function() { + this.getGlobalToolsEl().style.opacity = ''; + }, 50), + /** * Stop autoscroll * @private diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 4799ad8b4..604ae6324 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -38,7 +38,6 @@ export default Backbone.View.extend({ this.className = this.config.stylePrefix + 'canvas'; const { em } = this; this.listenTo(em, 'change:canvasOffset', this.clearOff); - // this.listenTo(em, 'frame:scroll', this.onFrameScroll); this.listenTo(em, 'component:selected', this.checkSelected); this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames); this.toggleListeners(1); diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index 407fa7c47..7127087c7 100644 --- a/src/canvas/view/FrameView.js +++ b/src/canvas/view/FrameView.js @@ -9,7 +9,7 @@ import { createEl, createCustomEvent } from 'utils/dom'; -import { on, off } from 'utils/mixins'; +import { on, setViewEl } from 'utils/mixins'; const motionsEv = 'transitionend oTransitionEnd transitionend webkitTransitionEnd'; @@ -23,7 +23,7 @@ export default Backbone.View.extend({ initialize(o) { bindAll(this, 'updateOffset'); - const { model } = this; + const { model, el } = this; this.config = { ...(o.config || {}), frameView: this @@ -35,6 +35,7 @@ export default Backbone.View.extend({ this.listenTo(model, 'change:width change:height', this.updateDim); this.updatePos(); model.view = this; + setViewEl(el, this); }, updatePos(md) { diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js index c3db1ae68..32321cecd 100644 --- a/src/commands/view/SelectComponent.js +++ b/src/commands/view/SelectComponent.js @@ -695,7 +695,6 @@ export default { * Update attached elements, eg. component toolbar */ updateAttached: debounce(function() { - console.log('updateAttach', arguments); this.updateToolsGlobal(); }),