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