Avoid huge repaint on toggleSortCursor in Sorter. Fixes #595

Author: artf

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

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