Add auto scroll on dragging, Closes #102

index.html

@@ -806,7 +806,7 @@
       clearOnRender: 0,
 
       storageManager:{
-        autoload: 1,
+        autoload: 0,
         storeComponents: 1,
         storeStyles: 1,
       },

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}

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() {
+  getFrameOffset(force = 0) {
-    if(!this.frmOff)
+    if(!this.frmOff || force)
       this.frmOff = this.offset(this.frame.el);
     return this.frmOff;
   },

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