feat(context-pads): update instead of add + remove

This reduces some visual noise on context pads and
ensures that each pad remains accessible as long as
it is valid.

lib/features/context-pads/ContextPads.js

@@ -43,6 +43,8 @@ export default function ContextPads(
 
   this._overlaysByElement = new Map();
 
+  this._handlerIdx = 0;
+
   this._handlers = [];
 
   this.registerHandler('bpmn:ExclusiveGateway', ExclusiveGatewayHandler);
@@ -95,8 +97,7 @@ export default function ContextPads(
       element
     } = event;
 
-    this.closeElementContextPads(element);
-    this.openElementContextPads(element);
+    this.updateElementContextPads(element);
   });
 }
 
@@ -110,6 +111,8 @@ export default function ContextPads(
 ContextPads.prototype.registerHandler = function(type, handlerCls) {
   const handler = this._injector.instantiate(handlerCls);
 
+  handler.hash = String(this._handlerIdx++);
+
   this._handlers.push({ handler, type });
 };
 
@@ -132,7 +135,7 @@ ContextPads.prototype.openContextPads = function(parent) {
 
   this._elementRegistry.forEach((element) => {
     if (isAncestor(parent, element)) {
-      this.openElementContextPads(element);
+      this.updateElementContextPads(element);
     }
   });
 };
@@ -150,26 +153,42 @@ ContextPads.prototype.registerContextPad = function(element, overlayId) {
   overlayIds.push(overlayId);
 };
 
-ContextPads.prototype.openElementContextPads = function(element) {
+ContextPads.prototype.updateElementContextPads = function(element) {
+  for (const handler of this.getHandlers(element)) {
+    this._updateElementContextPads(element, handler);
+  }
+};
 
-  const contextPads = [];
+ContextPads.prototype._updateElementContextPads = function(element, handler) {
 
-  for (const handler of this.getHandlers(element)) {
-    const additionalPads = handler.createContextPads(element) || [];
+  const contextPads = (handler.createContextPads(element) || []).filter(p => p);
 
-    contextPads.push(...additionalPads.filter(p => p));
-  }
+  const type = `ts-context-pad---${element.id}---${handler.hash}`;
+
+  const existingOverlays = this._overlays.get({ type });
+
+  const updatedOverlays = [];
 
   for (const contextPad of contextPads) {
-    const position = {
-      top: OFFSET_TOP,
-      left: OFFSET_LEFT
-    };
 
-    const html = domify(contextPad.html);
+    const {
+      element,
+      scopes: _scopes,
+      action: _action,
+      html: _html
+    } = contextPad;
+
+
+    const hash = `${contextPad.element.id}-------${_html}`;
+
+    let existingOverlay = existingOverlays.find(
+      o => o.hash === hash
+    );
+
+    const html = existingOverlay && existingOverlay.html || domify(_html);
 
-    if (contextPad.scopes) {
-      const scopes = contextPad.scopes();
+    if (_scopes) {
+      const scopes = _scopes();
 
       html.dataset.scopeIds = scopes.map(s => s.id).join(',');
 
@@ -178,29 +197,45 @@ ContextPads.prototype.openElementContextPads = function(element) {
       domClasses(html).toggle('hidden', shownScopes.length === 0);
     }
 
-    if ('action' in contextPad) {
+    if (existingOverlay) {
+      updatedOverlays.push(existingOverlay);
+
+      continue;
+    }
+
+    if (_action) {
 
       domEvent.bind(html, 'click', event => {
         event.preventDefault();
 
-        const scopes = contextPad.scopes
-          ? contextPad.scopes().filter(s => this._scopeFilter.isShown(s))
+        const scopes = _scopes
+          ? _scopes().filter(s => this._scopeFilter.isShown(s))
           : null;
 
-        contextPad.action(scopes);
+        _action(scopes);
       });
     }
 
-    const overlayId = this._overlays.add(contextPad.element, 'ts-context-menu', {
-      position: position,
+    const overlayId = this._overlays.add(contextPad.element, type, {
+      position: {
+        top: OFFSET_TOP,
+        left: OFFSET_LEFT
+      },
       html,
+      hash,
       show: {
         minZoom: 0.5
       }
     });
 
     this.registerContextPad(element, overlayId);
   }
+
+  for (const existingOverlay of existingOverlays) {
+    if (!updatedOverlays.includes(existingOverlay)) {
+      this._overlays.remove(existingOverlay.id);
+    }
+  }
 };
 
 ContextPads.prototype.closeContextPads = function() {