pinussilvestruspostit-js
Create post-it brainstorming boards - built with diagram-js.
Checkout the Demo or the Experiments Page to get some inspiration.
Features
- Create resizable Post-its on the Canvas (squared and circled) via
- Palette
- Double Click (latest element type will be respected)
- Change the color of Post-its
- Create simple Text Boxes on the Canvas
- Create grouping frame elements on the Canvas
- Add external image resources on the Canvas
Installation
Install the package to include it into your web application
$ npm install postit-js-core --saveUsage
To get started, create a postit-js instance and render a post-it board into your web application
import 'postit-js-core/assets/postit-js.css';
import PostItModeler from 'postit-js-core/lib/Modeler';
let xml; // my post-it xml
const modeler = new PostItModeler({
container: '#canvas',
keyboard: {
bindTo: window,
}
});
modeler.importXML(xml).then(function() {
console.log('board rendered');
}).catch(function(error) {
console.error('could not import postit board', err);
});For using postit-js inside your web application you'll need a source code bundler, e.g. webpack. Checkout the example for getting inspiration.
Development Setup
Spin up the application for development, all strings attached:
$ npm install
$ cd example
$ npm install
$ npm run devExtensions
Since diagram-js and also this project is extendable by design, there exist a couple of great community maintained extensions
drag-drop-images- Drag and drop image files on the boardselection-organizer- Organize and distribute groups of elementsproperties-panel- Properties panel for post-it elements
License
MIT
Contains parts of (bpmn-io) released under the bpmn.io license.