feat(popup-menu): undo and redo toggling markers is reflected in the popup menu

Closes #308

lib/features/replace/BpmnReplace.js

@@ -1,9 +1,7 @@
 'use strict';
 
 var  forEach = require('lodash/collection/forEach'),
-     filter = require('lodash/collection/filter'),
-     is = require('../../util/ModelUtil').is,
-     isExpanded = require('../../util/DiUtil').isExpanded;
+     filter = require('lodash/collection/filter');
 
 var REPLACE_OPTIONS = require ('./ReplaceOptions');
 
@@ -16,8 +14,12 @@ var startEventReplace =  REPLACE_OPTIONS.START_EVENT,
     transactionReplace = REPLACE_OPTIONS.TRANSACTION;
 
 var is = require('../../util/ModelUtil').is,
-    getBusinessObject = require('../../util/ModelUtil').getBusinessObject;
+    getBusinessObject = require('../../util/ModelUtil').getBusinessObject,
+    isExpanded = require('../../util/DiUtil').isExpanded;
 
+var CommandInterceptor = require('diagram-js/lib/command/CommandInterceptor');
+
+var inherits = require('inherits');
 
 /**
  * A replace menu provider that gives users the controls to choose
@@ -28,7 +30,9 @@ var is = require('../../util/ModelUtil').is,
  * @param {PopupMenu} popupMenu
  * @param {Replace} replace
  */
-function BpmnReplace(bpmnFactory, moddle, popupMenu, replace, selection, modeling) {
+function BpmnReplace(bpmnFactory, moddle, popupMenu, replace, selection, modeling, eventBus) {
+
+  CommandInterceptor.call(this, eventBus);
 
   /**
    * Prepares a new business object for the replacement element
@@ -90,37 +94,47 @@ function BpmnReplace(bpmnFactory, moddle, popupMenu, replace, selection, modelin
     return newElement;
   }
 
+  function updateElementProperties(e) {
+    var context = e.context;
+
+    modeling.updateProperties(context.element, context.updatedProperties);
+  }
+
+  this.postExecute([
+    'entries.update',
+  ], updateElementProperties);
+
   var toggleEntries,
       toggledElement;
 
-
   function toggleMi(event, entry) {
-    var loopCharacteristics;
+
+    var loopCharacteristics,
+        updatedEntries = [];
 
     if (entry.active) {
-      popupMenu.update(entry, { active: false });
-      modeling.updateProperties(toggledElement, { loopCharacteristics: undefined });
-      return;
+      loopCharacteristics = undefined;
+
+      updatedEntries.push({ id: entry.id, active: false });
+    } else {
+      forEach(toggleEntries, function(action) {
+        var options = action.options;
+
+        if (entry.id === action.id) {
+          updatedEntries.push({ id: entry.id, active: true });
+
+          loopCharacteristics = moddle.create(options.loopCharacteristics);
+
+          if (options.isSequential) {
+            loopCharacteristics.isSequential = options.isSequential;
+          }
+        } else {
+          updatedEntries.push({ id: action.id, active: false });
+        }
+      });
     }
 
-    forEach(toggleEntries, function(action) {
-      var options = action.options;
-
-      if (entry.id === action.id) {
-        popupMenu.update(action.id, { active: true });
-
-        loopCharacteristics = moddle.create(options.loopCharacteristics);
-
-        if (options.isSequential) {
-          loopCharacteristics.isSequential = options.isSequential;
-        }
-        return;
-      }
-
-      popupMenu.update(action.id, { active: false });
-    });
-
-    modeling.updateProperties(toggledElement, { loopCharacteristics: loopCharacteristics });
+    popupMenu.updateHeaderEntries(updatedEntries, toggledElement, { loopCharacteristics: loopCharacteristics });
   }
 
 
@@ -261,9 +275,11 @@ function BpmnReplace(bpmnFactory, moddle, popupMenu, replace, selection, modelin
     return menuEntries;
   }
 
-
-  // API
-
+  /**
+   * [function description]
+   * @param  {Object} position
+   * @param  {Object} element
+   */
   this.openChooser = function(position, element) {
     var entries = this.getReplaceOptions(element),
         headerEntries;
@@ -275,6 +291,7 @@ function BpmnReplace(bpmnFactory, moddle, popupMenu, replace, selection, modelin
     popupMenu.open(
       {
         className: 'replace-menu',
+        element: element,
         position: position,
         headerEntries: headerEntries,
         entries: entries
@@ -289,6 +306,8 @@ function BpmnReplace(bpmnFactory, moddle, popupMenu, replace, selection, modelin
   this.replaceElement = replaceElement;
 }
 
-BpmnReplace.$inject = [ 'bpmnFactory', 'moddle', 'popupMenu', 'replace', 'selection', 'modeling' ];
+inherits(BpmnReplace, CommandInterceptor);
+
+BpmnReplace.$inject = [ 'bpmnFactory', 'moddle', 'popupMenu', 'replace', 'selection', 'modeling', 'eventBus' ];
 
 module.exports = BpmnReplace;

test/spec/features/popup-menu/PopupMenuSpec.js

@@ -33,6 +33,10 @@ describe('features/popup-menu', function() {
 
   beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
 
+  afterEach(inject(function(popupMenu) {
+    popupMenu.close();
+  }));
+
   describe('active attribute', function(){
 
     it('should be true for parallel marker', inject(function(popupMenu, bpmnReplace, elementRegistry) {