diff --git a/src/canvas/index.js b/src/canvas/index.js index 263aa9fef..0f3f80ded 100644 --- a/src/canvas/index.js +++ b/src/canvas/index.js @@ -351,8 +351,13 @@ module.exports = () => { this.dragging = 1; let toListen = this.getScrollListeners(); frameRect = CanvasView.getFrameOffset(1); - on(toListen, 'mousemove', this.autoscroll); - on(toListen, 'mouseup', this.stopAutoscroll); + + // By detaching those from the stack avoid browsers lags + // Noticeable with "fast" drag of blocks + setTimeout(() => { + on(toListen, 'mousemove', this.autoscroll); + on(toListen, 'mouseup', this.stopAutoscroll); + }, 0); }, autoscroll(e) { diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js index 8305d1913..737a5e8a4 100644 --- a/src/utils/Sorter.js +++ b/src/utils/Sorter.js @@ -89,25 +89,22 @@ module.exports = Backbone.View.extend({ * @param {Boolean} active */ toggleSortCursor(active) { - //console.log('disabled toggleSortCursor'); - //return; var em = this.em; var body = document.body; var pfx = this.ppfx || this.pfx; var sortCls = pfx + 'grabbing'; var emBody = em ? em.get('Canvas').getBody() : ''; - if(active) { + + // Avoid updating body className as it causes a huge repaint + // Noticeable with "fast" drag of blocks + if (active) { em && em.get('Canvas').startAutoscroll(); - body.className += ' ' + sortCls; - if(em) { - emBody.className += ' ' + sortCls; - } + //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(); - } + //body.className = body.className.replace(sortCls, '').trim(); + //if(em) emBody.className = emBody.className.replace(sortCls, '').trim(); } },