fix: debounce minimap rendering

Related to #96

Author: Skaiir

lib/Minimap.js

@@ -56,6 +56,9 @@ export default function Minimap(
   this._elementRegistry = elementRegistry;
   this._eventBus = eventBus;
   this._injector = injector;
+  this._config = config || {};
+  this._updateTimeout = null;
+  this._firstTimeoutStart = null;
 
   this._state = {
     isOpen: undefined,
@@ -73,7 +76,7 @@ export default function Minimap(
 
   this._init();
 
-  this.toggle((config && config.open) || false);
+  this.toggle(this._config.open || false);
 
   function centerViewbox(point) {
 
@@ -89,7 +92,7 @@ export default function Minimap(
 
     setViewboxCenteredAroundPoint(diagramPoint, self._canvas);
 
-    self._update();
+    self._requestUpdate();
   }
 
   function mousedown(center) {
@@ -198,7 +201,7 @@ export default function Minimap(
         centerViewbox(event);
       }
 
-      self._update();
+      self._requestUpdate();
 
       // end dragging
       assign(self._state, {
@@ -281,7 +284,7 @@ export default function Minimap(
 
       setViewboxCenteredAroundPoint(diagramPoint, self._canvas);
 
-      self._update();
+      self._requestUpdate();
     }
   });
 
@@ -298,7 +301,7 @@ export default function Minimap(
 
     self._addElement(element);
 
-    self._update();
+    self._requestUpdate();
   });
 
   // remove shape on shape/connection removed
@@ -307,7 +310,7 @@ export default function Minimap(
 
     self._removeElement(element);
 
-    self._update();
+    self._requestUpdate();
   });
 
   // update on elements changed
@@ -318,7 +321,7 @@ export default function Minimap(
       self._updateElement(element);
     });
 
-    self._update();
+    self._requestUpdate();
   });
 
   // update on element ID update
@@ -332,7 +335,7 @@ export default function Minimap(
   // update on viewbox changed
   eventBus.on('canvas.viewbox.changed', function() {
     if (!self._state.isDragging) {
-      self._update();
+      self._requestUpdate();
     }
   });
 
@@ -341,7 +344,7 @@ export default function Minimap(
     // only update if present in DOM
     if (document.body.contains(self._parent)) {
       if (!self._state.isDragging) {
-        self._update();
+        self._requestUpdate();
       }
 
       self._state._svgClientRect = self._svg.getBoundingClientRect();
@@ -358,7 +361,7 @@ export default function Minimap(
       self._addElement(el);
     });
 
-    self._update();
+    self._requestUpdate();
   });
 
 }
@@ -435,7 +438,44 @@ Minimap.prototype._init = function() {
   this._parent.appendChild(overlay);
 };
 
+Minimap.prototype._requestUpdate = function() {
+  const {
+    debounceDelay = 100,
+    debounceSkipDelay = 2000
+  } = this._config;
+
+  const now = Date.now();
+
+  if (this._firstTimeoutStart === null) {
+    this._firstTimeoutStart = now;
+  }
+
+  // if we've been debouncing for a while already, force update
+  if (now - this._firstTimeoutStart >= debounceSkipDelay) {
+    return this._update();
+  }
+
+  // clear previous timeout
+  if (this._updateTimeout) {
+    clearTimeout(this._updateTimeout);
+  }
+
+  // fire debounced update
+  this._firstTimeoutStart = this._firstTimeoutStart || now;
+  this._updateTimeout = setTimeout(() => {
+    this._update();
+  }, debounceDelay);
+};
+
 Minimap.prototype._update = function() {
+
+  // if update was forced, clear any timeouts
+  if (this._updateTimeout) {
+    clearTimeout(this._updateTimeout);
+    this._firstTimeoutStart = null;
+    this._updateTimeout = null;
+  }
+
   var viewbox = this._canvas.viewbox(),
       innerViewbox = viewbox.inner,
       outerViewbox = viewbox.outer;
@@ -536,7 +576,7 @@ Minimap.prototype.open = function() {
 
   domAttr(this._toggle, 'title', translate('Close minimap'));
 
-  this._update();
+  this._requestUpdate();
 
   this._eventBus.fire('minimap.toggle', { open: true });
 };