feat(replace): persist colors when replacing an element

Related to #640

lib/features/modeling/ElementFactory.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var assign = require('lodash/object/assign'),
+    forEach = require('lodash/collection/forEach'),
     inherits = require('inherits');
 
 var is = require('../../util/ModelUtil').is;
@@ -74,26 +75,27 @@ ElementFactory.prototype.createBpmnElement = function(elementType, attrs) {
     }
   }
 
-  if (attrs.processRef) {
+  if (attrs.colors) {
-    businessObject.processRef = attrs.processRef;
+    assign(businessObject.di, attrs.colors);
+
+    delete attrs.colors;
   }
 
+  this.setAttrs(businessObject, attrs, [
+    'processRef',
+    'isInterrupting',
+    'associationDirection',
+    'isForCompensation'
+  ]);
+
   if (attrs.isExpanded) {
-    businessObject.di.isExpanded = attrs.isExpanded;
+    this.setAttr(businessObject.di, attrs, 'isExpanded');
   }
 
   if (is(businessObject, 'bpmn:ExclusiveGateway')) {
     businessObject.di.isMarkerVisible = true;
   }
 
-  if (attrs.isInterrupting === false) {
-    businessObject.isInterrupting = false;
-  }
-
-  if (attrs.associationDirection) {
-    businessObject.associationDirection = attrs.associationDirection;
-  }
-
   var eventDefinitions,
       newEventDefinition;
 
@@ -105,10 +107,8 @@ ElementFactory.prototype.createBpmnElement = function(elementType, attrs) {
 
     newEventDefinition.$parent = businessObject;
     businessObject.eventDefinitions = eventDefinitions;
-  }
 
-  if (attrs.isForCompensation) {
+    delete attrs.eventDefinitionType;
-    businessObject.isForCompensation = true;
   }
 
   size = this._getDefaultSize(businessObject);
@@ -122,6 +122,23 @@ ElementFactory.prototype.createBpmnElement = function(elementType, attrs) {
 };
 
 
+ElementFactory.prototype.setAttrs = function(element, attrs, properties) {
+
+  forEach(properties, function(property) {
+    if (attrs[property] !== undefined) {
+      this.setAttr(element, attrs, property);
+    }
+  }, this);
+};
+
+
+ElementFactory.prototype.setAttr = function(element, attrs, property) {
+  element[property] = attrs[property];
+
+  delete attrs[property];
+};
+
+
 ElementFactory.prototype._getDefaultSize = function(semantic) {
 
   if (is(semantic, 'bpmn:SubProcess')) {

lib/features/replace/BpmnReplace.js

@@ -176,6 +176,10 @@ function BpmnReplace(bpmnFactory, replace, selection, modeling, eventBus) {
       newBusinessObject.default = oldBusinessObject.default;
     }
 
+    if ('fill' in oldBusinessObject.di || 'stroke' in oldBusinessObject.di) {
+      assign(newElement, { colors: pick(oldBusinessObject.di, [ 'fill', 'stroke' ]) });
+    }
+
     newElement = replace.replaceElement(element, newElement, hints);
 
     if (hints.select !== false) {

test/spec/features/replace/BpmnReplaceSpec.js

@@ -1266,4 +1266,37 @@ describe('features/replace - bpmn replace', function() {
 
   });
 
+
+  describe('colors', function() {
+
+    var diagramXML = require('../../../fixtures/bpmn/features/replace/01_replace.bpmn');
+
+    beforeEach(bootstrapModeler(diagramXML, { modules: testModules }));
+
+    it('should maintain colors', inject(function(elementRegistry, bpmnReplace, modeling) {
+
+      // given
+      var task = elementRegistry.get('Task_1');
+      var newElementData =  {
+            type: 'bpmn:UserTask'
+          },
+          fill = '#BBDEFB',
+          stroke = '#1E88E5';
+
+      modeling.setColor(task, { fill: fill, stroke: stroke });
+
+      // when
+      var newElement = bpmnReplace.replaceElement(task, newElementData);
+
+      // then
+      var businessObject = newElement.businessObject;
+
+      expect(businessObject.di.fill).to.equal(fill);
+      expect(businessObject.di.stroke).to.equal(stroke);
+
+      expect(newElement.colors).to.not.exist;
+    }));
+
+  });
+
 });