Hide global tools on autoscrolling

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

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);

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) {

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();
   }),