feat: carbonize

bpmn-io · Aug 9, 2023 · 7b57a45 · 7b57a45
1 parent b44dad0
commit 7b57a45
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/colors/ColorContextPadProvider.js b/colors/ColorContextPadProvider.js
@@ -55,7 +55,10 @@ ColorContextPadProvider.prototype._createPopupAction = function(elements) {
           };
 
           // open new color-picker popup
-          popupMenu.open(elements, 'color-picker', position);
+          popupMenu.open(elements, 'color-picker', position, {
+            orientation: 'horizontal',
+            separators: true
+          });
         }
       }
     }
@@ -82,34 +85,30 @@ 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">
+    return `<svg width="24" height="24" 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">
+  return `<svg width="24" height="24" 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) {
+  const pad = contextPad.getPad(elements).html;
 
-  var Y_OFFSET = 5;
+  console.log(pad);
 
-  var diagramContainer = canvas.getContainer(),
-      pad = contextPad.getPad(elements).html;
+  const padRect = pad.getBoundingClientRect();
 
-  var diagramRect = diagramContainer.getBoundingClientRect(),
-      padRect = pad.getBoundingClientRect();
+  console.log(padRect);
 
-  var top = padRect.top - diagramRect.top;
-  var left = padRect.left - diagramRect.left;
-
-  var pos = {
-    x: left,
-    y: top + padRect.height + Y_OFFSET
+  const pos = {
+    x: padRect.left,
+    y: padRect.top - 5
   };
 
   return pos;

diff --git a/colors/ColorPopupProvider.js b/colors/ColorPopupProvider.js
@@ -55,8 +55,8 @@ ColorPopupProvider.prototype.getEntries = function(elements) {
   var self = this;
 
   var colorIcon = domify(`
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="100%">
-      <rect rx="2" x="1" y="1" width="22" height="22" fill="var(--fill-color)" stroke="var(--stroke-color)" style="stroke-width:2"></rect>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="100%">
+      <circle cx="8" cy="8" r="7" fill="var(--fill-color)" stroke="var(--stroke-color)" stroke-width="2" />
     </svg>
   `);
 
@@ -66,6 +66,15 @@ ColorPopupProvider.prototype.getEntries = function(elements) {
     colorIcon.style.setProperty('--stroke-color', color.stroke || self._defaultStrokeColor);
 
     return {
+      group: color.label === 'Default'
+        ? {
+          id: 'default',
+          name: 'Default'
+        }
+        : {
+          id: 'custom',
+          name: 'Custom'
+        },
       title: self._translate(color.label),
       id: color.label.toLowerCase() + '-color',
       imageUrl: `data:image/svg+xml;utf8,${ encodeURIComponent(colorIcon.outerHTML) }`,