fix(replace-preview): change type of visualReplacements from array to object

Closes #368

lib/features/replace-preview/BpmnReplacePreview.js

@@ -5,8 +5,7 @@ var CommandInterceptor = require('diagram-js/lib/command/CommandInterceptor');
 var inherits = require('inherits');
 
 var assign = require('lodash/object/assign'),
-    forEach = require('lodash/collection/forEach'),
-    includes = require('lodash/collection/includes');
+    forEach = require('lodash/collection/forEach');
 
 var LOW_PRIORITY = 250;
 
@@ -32,7 +31,7 @@ function BpmnReplacePreview(eventBus, elementRegistry, elementFactory, canvas, m
       };
 
       // if the visual of the element is already replaced
-      if (includes(context.visualReplacements, id)) {
+      if (context.visualReplacements[id]) {
         return;
       }
 
@@ -55,10 +54,7 @@ function BpmnReplacePreview(eventBus, elementRegistry, elementFactory, canvas, m
       // clone the gfx of the temporary shape and add it to the drag group
       var dragger = moveVisuals.addDragger(context, tempShape);
 
-      context.visualReplacements.push({
-        id: id,
-        dragger: dragger
-      });
+      context.visualReplacements[id] = dragger;
 
       canvas.removeShape(tempShape);
     });
@@ -73,21 +69,18 @@ function BpmnReplacePreview(eventBus, elementRegistry, elementFactory, canvas, m
 
     var visualReplacements = context.visualReplacements;
 
-    forEach(visualReplacements, function(element) {
+    forEach(visualReplacements, function(dragger, id) {
 
-      var originalGfx = context.dragGroup.select('[data-element-id=' + element.id + ']'),
-          idx;
+      var originalGfx = context.dragGroup.select('[data-element-id=' + id + ']');
 
       if (originalGfx) {
         originalGfx.attr({ display: 'inline' });
       }
 
-      element.dragger.remove();
+      dragger.remove();
 
-      idx = visualReplacements.indexOf(element.id);
-
-      if (idx !== -1) {
-        visualReplacements.splice(idx, 1);
+      if (visualReplacements[id]) {
+        delete visualReplacements[id];
       }
     });
   }
@@ -98,7 +91,7 @@ function BpmnReplacePreview(eventBus, elementRegistry, elementFactory, canvas, m
         canExecute = context.canExecute;
 
     if (!context.visualReplacements) {
-      context.visualReplacements = [];
+      context.visualReplacements = {};
     }
 
     if (canExecute.replacements) {

test/spec/features/replace-preview/BpmnReplacePreviewSpec.js

@@ -83,6 +83,40 @@ describe('features/replace-preview', function() {
   }));
 
 
+  it('should add dragger to context.visualReplacements once', inject(function(dragging) {
+
+    // when
+    moveShape(startEvent_1, rootElement, { x: 275, y: 120 });
+    moveShape(startEvent_1, rootElement, { x: 280, y: 120 });
+    moveShape(startEvent_1, rootElement, { x: 285, y: 120 });
+
+    // then
+    var visualReplacements = dragging.active().data.context.visualReplacements;
+
+    expect(visualReplacements[startEvent_1.id]).to.exist;
+    expect(Object.keys(visualReplacements).length).to.equal(1);
+
+  }));
+
+
+  it('should remove dragger from context.visualReplacements', inject(function(elementRegistry, dragging) {
+
+    // given
+    var subProcess_2 = elementRegistry.get('SubProcess_2');
+
+    // when
+    moveShape(startEvent_1, rootElement, { x: 275, y: 120 });
+    moveShape(startEvent_1, rootElement, { x: 280, y: 120 });
+    moveShape(startEvent_1, subProcess_2, { x: 350, y: 120 });
+
+    // then
+    var visualReplacements = dragging.active().data.context.visualReplacements;
+
+    expect(visualReplacements).to.be.empty;
+
+  }));
+
+
   it('should hide the replaced visual',
     inject(function(dragging) {