From 1d6a0ab028b03546177596d6b59721ccaa4b03e9 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 30 Jun 2017 01:29:49 +0200
Subject: [PATCH] Add auto scroll on dragging, Closes #102

---
 index.html                    |  2 +-
 src/canvas/index.js           | 57 +++++++++++++++++++++++++++++++++++
 src/canvas/view/CanvasView.js |  8 +++--
 src/utils/Sorter.js           |  2 ++
 4 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index f986d7fe9..7fd9545af 100755
--- a/index.html
+++ b/index.html
@@ -806,7 +806,7 @@
       clearOnRender: 0,
 
       storageManager:{
-        autoload: 1,
+        autoload: 0,
         storeComponents: 1,
         storeStyles: 1,
       },
diff --git a/src/canvas/index.js b/src/canvas/index.js
index cef7a9bb0..47a47eead 100644
--- a/src/canvas/index.js
+++ b/src/canvas/index.js
@@ -4,6 +4,7 @@ module.exports = () => {
   Canvas = require('./model/Canvas'),
   CanvasView = require('./view/CanvasView');
   var canvas;
+  var frameRect;
 
   return {
 
@@ -47,6 +48,9 @@ module.exports = () => {
       if(cm)
         this.setWrapper(cm);
 
+      this.startAutoscroll = this.startAutoscroll.bind(this);
+      this.stopAutoscroll = this.stopAutoscroll.bind(this);
+      this.autoscroll = this.autoscroll.bind(this);
       return this;
     },
 
@@ -313,6 +317,59 @@ module.exports = () => {
       };
     },
 
+    /**
+     * Start autoscroll
+     */
+    startAutoscroll() {
+      this.dragging = 1;
+      let toListen = this.getScrollListeners();
+      frameRect = CanvasView.getFrameOffset(1);
+      toListen.on('mousemove', this.autoscroll);
+      toListen.on('mouseup', this.stopAutoscroll);
+    },
+
+    autoscroll(e) {
+      e.preventDefault();
+      if (this.dragging) {
+        let frameWindow = this.getFrameEl().contentWindow;
+        let actualTop = frameWindow.document.body.scrollTop;
+        let nextTop = actualTop;
+        let clientY = e.clientY;
+        let limitTop = 50;
+        let limitBottom = frameRect.height - limitTop;
+
+        if (clientY < limitTop) {
+          nextTop -= (limitTop - clientY);
+        }
+
+        if (clientY > limitBottom) {
+          nextTop += (clientY - limitBottom);
+        }
+
+        //console.log(`actualTop: ${actualTop} clientY: ${clientY} nextTop: ${nextTop} frameHeigh: ${frameRect.height}`);
+        frameWindow.scrollTo(0, nextTop);
+      }
+    },
+
+    /**
+     * Stop autoscroll
+     */
+    stopAutoscroll() {
+      this.dragging = 0;
+      let toListen = this.getScrollListeners();
+      toListen.off('mousemove', this.autoscroll);
+      toListen.off('mouseup', this.stopAutoscroll);
+    },
+
+    getScrollListeners() {
+      if (!this.scrollListeners) {
+        this.scrollListeners =
+          $(this.getFrameEl().contentWindow, this.getElement());
+      }
+
+      return this.scrollListeners;
+    },
+
     /**
      * Returns wrapper element
      * @return {HTMLElement}
diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js
index 5beedbd31..e2e067f69 100644
--- a/src/canvas/view/CanvasView.js
+++ b/src/canvas/view/CanvasView.js
@@ -156,7 +156,9 @@ module.exports = Backbone.View.extend({
     var docBody = el.ownerDocument.body;
     return {
       top: rect.top + docBody.scrollTop,
-      left: rect.left + docBody.scrollLeft
+      left: rect.left + docBody.scrollLeft,
+      width: rect.width,
+      height: rect.height,
     };
   },
 
@@ -174,8 +176,8 @@ module.exports = Backbone.View.extend({
    * @return {Object}
    * @private
    */
-  getFrameOffset() {
-    if(!this.frmOff)
+  getFrameOffset(force = 0) {
+    if(!this.frmOff || force)
       this.frmOff = this.offset(this.frame.el);
     return this.frmOff;
   },
diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js
index a72f3968a..278f61b81 100644
--- a/src/utils/Sorter.js
+++ b/src/utils/Sorter.js
@@ -81,11 +81,13 @@ module.exports = Backbone.View.extend({
     var sortCls = pfx + 'grabbing';
     var emBody = em ? em.get('Canvas').getBody() : '';
     if(active) {
+      em && em.get('Canvas').startAutoscroll();
       body.className += ' ' + sortCls;
       if(em) {
         emBody.className += ' ' + sortCls;
       }
     } else {
+      em && em.get('Canvas').stopAutoscroll();
       body.className = body.className.replace(sortCls, '').trim();
       if(em) {
         emBody.className = emBody.className.replace(sortCls, '').trim();