bpmn-js-color-picker - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

colors/ColorContextPadProvider.js

@@ -1,4 +0,2 @@
-const colorImageSvg = '<svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg">' +
-  '<path d="m1660 108-395 397-108 107-196-56-205-57-3 4-165 164 394 394 393 393 165-164v-1l3-3-57-204-51-181 113-113 395-396zM471 786l-366 366 393 393 394 395 366-367-393-394Z" />' +
-'</svg>';
+const colorImageSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><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>';
 
@@ -28,16 +26,30 @@ const colorImageUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(colorImageSvg);
 ColorContextPadProvider.prototype.getContextPadEntries = function(element) {
-  var self = this;
+  return this._createPopupAction([ element ]);
+};
 
-  var actions = {
+
+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;
+
+  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),
             cursor: {
@@ -50,3 +62,3 @@ x: event.x,
           // open new color-picker popup
-          self._popupMenu.open(element, 'color-picker', position);
+          popupMenu.open(elements, 'color-picker', position);
         }
@@ -57,3 +69,2 @@ }
 
-  return actions;
 };
@@ -64,3 +75,3 @@
 
-function getStartPosition(canvas, contextPad, element) {
+function getStartPosition(canvas, contextPad, elements) {
 
@@ -70,3 +81,3 @@ var Y_OFFSET = 5;
   var diagramContainer = canvas.getContainer(),
-      pad = contextPad.getPad(element).html;
+      pad = contextPad.getPad(elements).html;
 
@@ -73,0 +84,0 @@ var diagramRect = diagramContainer.getBoundingClientRect(),

colors/ColorPopupProvider.js

@@ -1,2 +0,33 @@
-export default function ColorPopupProvider(popupMenu, modeling, translate) {
+import {
+  domify
+} from 'min-dom';
+
+const COLORS = [ {
+  label: 'Default',
+  fill: undefined,
+  stroke: undefined
+}, {
+  label: 'Blue',
+  fill: '#BBDEFB',
+  stroke: '#0D4372'
+}, {
+  label: 'Orange',
+  fill: '#FFE0B2',
+  stroke: '#6B3C00'
+}, {
+  label: 'Green',
+  fill: '#C8E6C9',
+  stroke: '#205022'
+}, {
+  label: 'Red',
+  fill: '#FFCDD2',
+  stroke: '#831311'
+}, {
+  label: 'Purple',
+  fill: '#E1BEE7',
+  stroke: '#5B176D'
+} ];
+
+
+export default function ColorPopupProvider(config, popupMenu, modeling, translate) {
   this._popupMenu = popupMenu;
@@ -6,2 +37,4 @@ this._modeling = modeling;
 
+  this._colors = config && config.colors || COLORS;
+
   this._popupMenu.registerProvider('color-picker', this);
@@ -12,2 +45,3 @@ }
 ColorPopupProvider.$inject = [
+  'config.colorPicker',
   'popupMenu',
@@ -19,37 +53,21 @@ 'modeling',
 
-ColorPopupProvider.prototype.getEntries = function(element) {
+ColorPopupProvider.prototype.getEntries = function(elements) {
   var self = this;
 
-  var colors = [{
-    label: 'Default',
-    fill: undefined,
-    stroke: undefined
-  }, {
-    label: 'Blue',
-    fill: '#BBDEFB',
-    stroke: '#1E88E5'
-  }, {
-    label: 'Orange',
-    fill: '#FFE0B2',
-    stroke: '#FB8C00'
-  }, {
-    label: 'Green',
-    fill: '#C8E6C9',
-    stroke: '#43A047'
-  }, {
-    label: 'Red',
-    fill: '#FFCDD2',
-    stroke: '#E53935'
-  }, {
-    label: 'Purple',
-    fill: '#E1BEE7',
-    stroke: '#8E24AA'
-  }];
+  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)"></rect>
+    </svg>
+  `);
 
-  var entries = colors.map(function(color) {
+  var entries = this._colors.map(function(color) {
+
+    colorIcon.style.setProperty('--fill-color', color.fill || 'white');
+    colorIcon.style.setProperty('--stroke-color', color.stroke || 'rgb(34, 36, 42)');
+
     return {
       title: self._translate(color.label),
       id: color.label.toLowerCase() + '-color',
-      className: 'color-icon-' + color.label.toLowerCase(),
-      action: createAction(self._modeling, element, color)
+      imageUrl: `data:image/svg+xml;utf8,${ encodeURIComponent(colorIcon.outerHTML) }`,
+      action: createAction(self._modeling, elements, color)
     };
@@ -56,0 +74,0 @@ });

package.json

 {
   "name": "bpmn-js-color-picker",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A color picker for bpmn-js",
   "scripts": {
     "dev": "npm start",
-    "all": "run-s lint",
+    "all": "run-s lint test",
     "start": "webpack serve --open",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "test": "echo 'no tests ;-)'"
   },
@@ -23,6 +24,6 @@ "repository": "https://github.com/bpmn-io/bpmn-js-color-picker.git",
   "devDependencies": {
-    "bpmn-js": "^8.7.1",
+    "bpmn-js": "^11.0.4",
     "copy-webpack-plugin": "^9.0.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-bpmn-io": "^0.12.0",
+    "eslint": "^8.29.0",
+    "eslint-plugin-bpmn-io": "^0.16.0",
     "npm-run-all": "^4.1.2",
@@ -34,7 +35,6 @@ "webpack": "^5.51.0",
   "dependencies": {
-    "min-dom": "^3.1.3",
-    "tiny-svg": "^2.2.2"
+    "min-dom": "^4.0.3"
   },
   "peerDependencies": {
-    "bpmn-js": ">= 5"
+    "bpmn-js": ">= 11"
   },
@@ -41,0 +41,0 @@ "files": [

README.md

@@ -12,3 +12,4 @@ # bpmn-js Color Picker
 
-* Add color picker to an elements context pad
+* Add color picker to the context pad
+* Color single and multiple elements
 * Serialize colors to BPMN 2.0
@@ -15,0 +16,0 @@ * Render colors (built-in `bpmn-js@8.7+`)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

2

decreased by-33.33%

Number of lines in readme file

62

increased by1.64%

Worsened metrics

Total package byte prevSize

7465

decreased by-2.48%

Number of package files

7

decreased by-12.5%

Lines of code

144

decreased by-10.56%

Number of low quality alerts

3

increased by50%

Dependency changes

• - Removedtiny-svg@^2.2.2

• - Removedcomponent-event@0.1.4(transitive)

• - Removedindexof@0.0.1(transitive)

• - Removedmatches-selector@1.2.0(transitive)

• - Removedmin-dash@3.8.1(transitive)

• - Removedmin-dom@3.2.1(transitive)

• - Removedtiny-svg@2.2.4(transitive)

• Updatedmin-dom@^4.0.3