feat: icon shows element colors

colors/ColorContextPadProvider.js

@@ -1,7 +1,4 @@
-const colorImageSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor">
-  <path d="m12.5 5.5.3-.4 3.6-3.6c.5-.5 1.3-.5 1.7 0l1 1c.5.4.5 1.2 0 1.7l-3.6 3.6-.4.2v.2c0 1.4.6 2 1 2.7v.6l-1.7 1.6c-.2.2-.4.2-.6 0L7.3 6.6a.4.4 0 0 1 0-.6l.3-.3.5-.5.8-.8c.2-.2.4-.1.6 0 .9.5 1.5 1.1 3 1.1zm-9.9 6 4.2-4.2 6.3 6.3-4.2 4.2c-.3.3-.9.3-1.2 0l-.8-.8-.9-.8-2.3-2.9" />
-</svg>`;
-
+import { getDi } from 'bpmn-js/lib/draw/BpmnRenderUtil';
 
 export default function ColorContextPadProvider(contextPad, popupMenu, canvas, translate) {
 
@@ -44,7 +41,7 @@ ColorContextPadProvider.prototype._createPopupAction = function(elements) {
       group: 'edit',
       className: 'bpmn-icon-color',
       title: translate('Set Color'),
-      html: `<div class="entry">${colorImageSvg}</div>`,
+      html: `<div class="entry">${getSvg(elements)}</div>`,
       action: {
         click: (event, element) => {
 
@@ -69,6 +66,34 @@ ColorContextPadProvider.prototype._createPopupAction = function(elements) {
 
 // helpers //////////////////////
 
+const WHITE = '#ffffff',
+      BLACK = '#161616';
+
+function getColors(element) {
+  const di = getDi(element);
+
+  return {
+    fill: di.get('fill') || WHITE,
+    stroke: di.get('stroke') || BLACK
+  }
+}
+
+function getSvg(elements) {
+  if (elements.length === 1) {
+    const { fill, stroke } = getColors(elements[ 0 ]);
+
+    return `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <circle cx="8" cy="8" r="7" fill="${ fill }" stroke="${ stroke }" stroke-width="2" />
+    </svg>
+    `
+  }
+
+  return `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="8" cy="8" r="7" fill="${ WHITE }" stroke="${ BLACK } stroke-width="2" />
+  </svg>
+  `
+}
+
 function getStartPosition(canvas, contextPad, elements) {
 
   var Y_OFFSET = 5;