feat: support coloring multiple elements

Closes #13

colors/ColorContextPadProvider.js

@@ -25,34 +25,47 @@ ColorContextPadProvider.$inject = [
 
 
 ColorContextPadProvider.prototype.getContextPadEntries = function(element) {
-  var self = this;
+  return this._createPopupAction([ element ]);
+};
+
+
+ColorContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
+
+  return this._createPopupAction(elements);
+};
+
+ColorContextPadProvider.prototype._createPopupAction = function(elements) {
+
+  const canvas = this._canvas;
+  const translate = this._translate;
+  const contextPad = this._contextPad;
+  const popupMenu = this._popupMenu;
 
-  var actions = {
+  return {
     'set-color': {
       group: 'edit',
       className: 'bpmn-icon-color',
-      title: self._translate('Set Color'),
+      title: translate('Set Color'),
       imageUrl: colorImageUrl,
       action: {
-        click: function(event, element) {
+        click: (event, element) => {
 
           // get start popup draw start position
           var position = {
-            ...getStartPosition(self._canvas, self._contextPad, element),
+            ...getStartPosition(canvas, contextPad, elements[0]),
             cursor: {
               x: event.x,
               y: event.y
             }
           };
 
           // open new color-picker popup
-          self._popupMenu.open(element, 'color-picker', position);
+          popupMenu.open(elements, 'color-picker', position);
         }
       }
     }
   };
 
-  return actions;
 };
 
 

colors/ColorPopupProvider.js

@@ -44,7 +44,7 @@ ColorPopupProvider.$inject = [
 ];
 
 
-ColorPopupProvider.prototype.getEntries = function(element) {
+ColorPopupProvider.prototype.getEntries = function(elements) {
   var self = this;
 
   var entries = this._colors.map(function(color) {
@@ -53,7 +53,7 @@ ColorPopupProvider.prototype.getEntries = function(element) {
       title: self._translate(color.label),
       id: color.label.toLowerCase() + '-color',
       className: 'color-icon-' + color.label.toLowerCase(),
-      action: createAction(self._modeling, element, color)
+      action: createAction(self._modeling, elements, color)
     };
   });