https://github.com/bpmn-io/bpmn-js-color-picker

A simple color picker for your BPMN elements.
https://github.com/bpmn-io/bpmn-js-color-picker

bpmn-js

Last synced: 3 months ago
JSON representation

A simple color picker for your BPMN elements.

• Host: GitHub
• URL: https://github.com/bpmn-io/bpmn-js-color-picker
• Owner: bpmn-io
• License: mit
• Created: 2016-09-16T16:42:01.000Z (over 8 years ago)
• Default Branch: main
• Last Pushed: 2024-04-08T09:51:46.000Z (10 months ago)
• Last Synced: 2024-04-14T11:10:10.077Z (10 months ago)
• Topics: bpmn-js
• Language: JavaScript
• Homepage:
• Size: 892 KB
• Stars: 21
• Watchers: 10
• Forks: 13
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-bpmn-io - bpmn-js-color-picker - Color your BPMN elements via the context pad (Extensions)

README

        
# bpmn-js Color Picker

[![CI](https://github.com/bpmn-io/bpmn-js-color-picker/actions/workflows/CI.yml/badge.svg)](https://github.com/bpmn-io/bpmn-js-color-picker/actions/workflows/CI.yml)

This [bpmn-js](https://github.com/bpmn-io/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](https://github.com/bpmn-miwg/bpmn-in-color).

![bpmn-js color picker in action](./resources/screenshot.png)

## Features

* Add color picker to the context pad

* Color single and multiple elements

* Serialize colors to BPMN 2.0

* Render colors (built-in `[email protected]+`)

## Use Extension

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

```

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

```

Extend your BPMN modeler with colors:

```javascript

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](./colors/color-picker.css) stylesheets:

```html

```

## Build Demo

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

```

npm start

```

## Useful Resources

* [Introduction to bpmn-js](https://bpmn.io/toolkit/bpmn-js/walkthrough/)

* [Colors are here](https://bpmn.io/blog/posts/2016-colors-bpmn-js.html)