fix: debounce minimap rendering

Related to #96, #81

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) {
 
@@ -298,7 +301,7 @@ export default function Minimap(
 
     self._addElement(element);
 
-    self._update();
+    self._debouncedUpdate();
   });
 
   // remove shape on shape/connection removed
@@ -307,7 +310,7 @@ export default function Minimap(
 
     self._removeElement(element);
 
-    self._update();
+    self._debouncedUpdate();
   });
 
   // update on elements changed
@@ -318,7 +321,7 @@ export default function Minimap(
       self._updateElement(element);
     });
 
-    self._update();
+    self._debouncedUpdate();
   });
 
   // update on element ID update
@@ -435,7 +438,42 @@ Minimap.prototype._init = function() {
   this._parent.appendChild(overlay);
 };
 
+Minimap.prototype._debouncedUpdate = function() {
+
+  const {
+    debounceDelay = 100,
+    debounceSkipDelay = 2000
+  } = this._config;
+
+  const now = Date.now();
+
+  // if we've been debouncing for a while already, force update
+  if (this._firstTimeoutStart && 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._updateTimeout = null;
+  }
+
+  this._firstTimeoutStart = null;
+
   var viewbox = this._canvas.viewbox(),
       innerViewbox = viewbox.inner,
       outerViewbox = viewbox.outer;
@@ -536,6 +574,7 @@ Minimap.prototype.open = function() {
 
   domAttr(this._toggle, 'title', translate('Close minimap'));
 
+  // open forces an update to ensure a viewbox is set and current
   this._update();
 
   this._eventBus.fire('minimap.toggle', { open: true });