bpmn-js Color Picker

This bpmn-js extension adds a simple color picker to an elements context pad. Colors are serialized to BPMN 2.0 according to the BPMN in Color proposal.

Features

• Add color picker to the context pad
• Color single and multiple elements
• Serialize colors to BPMN 2.0
• Render colors (built-in bpmn-js@8.7+)

Use Extension

Fetch bpmn-js-color-picker as a dependency:

npm install bpmn-js-color-picker --save

Extend your BPMN modeler with colors:

import BpmnModeler from 'bpmn-js/lib/Modeler';

import BpmnColorPickerModule from 'bpmn-js-color-picker';

const modeler = new BpmnModeler({
  additionalModules: [
    BpmnColorPickerModule
  ]
});

Add diagram-js, bpmn-font and color picker stylesheets:

<link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/diagram-js.css" />
<link rel="stylesheet" href="https://unpkg.com/bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css" />
<link rel="stylesheet" href="https://unpkg.com/bpmn-js-color-picker/colors/color-picker.css" />

Build Demo

To run the live demo in the ./example directory (as shown in the screenshot above) execute:

npm start

Useful Resources

• Introduction to bpmn-js
• Colors are here

Changelog

All notable changes to bpmn-js-color-picker are documented here. We use semantic versioning for releases.

Unreleased

_Note: Yet to be released changes appear here._

0.7.1

• FIX: correct positioning of color picker (#40)

0.7.0

• FEAT: sentence-case labels (325dd81)
• FEAT: use imageHtml for icon rendering (36b39a9)
• FEAT: add module export

0.6.1

• CHORE: add LICENSE

0.6.0

• FEAT: allow icon hover styling (#24, #27)
• FEAT: respect default renderer fill and stoke color (#26)

0.5.0

• FEAT: improve default color contrast (#9)
• FEAT: integrate with new popup menu (#10)
• FEAT: integrate with multi-element context pad (#13)
• FEAT: dynamically generate entry colors (#12)
• FEAT: be able to provide custom colors (#11)
• DEPS: update to bpmn-js@11

0.4.0

• FEAT: simplify color picker
• FEAT: translate color picker entries

...

Check git log for earlier history.