dev-resources.site
for different kinds of informations.
Building a honkify extension for bpmn-js
Published at
10/3/2019
Categories
webdev
bpmn
bpmnio
javascript
Author
Niklas Kiefer
Something for the fun department: Yesterday I found this amazing project, which replaces any link on a page with a duck "honk": honkify.js. This inspired me to build a simple bpmn-js extension which adds this honk on several modeling operations, e.g. adding, moving or removing BPMN shapes from the canvas:
/// Honk.js
import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
import inherits from 'inherits';
import showToast from 'show-toast';
export default function Honk(injector) {
injector.invoke(CommandInterceptor, this);
const audio = new Audio(
'https://res.cloudinary.com/jlengstorf/video/upload/q_auto/v1569957993/honk-sound.mp3',
);
function _honk(context) {
console.log('honk fired.', context);
// honk
audio.play();
// show toast
showToast({
str: 'Honk 🦆🦆🦆!',
time: 500,
position: 'top'
});
return false;
}
this.execute([
'shape.create',
'shape.move',
'shape.delete'
], _honk);
}
Honk.$inject = [
'injector'
];
inherits(Honk, CommandInterceptor);
I put the results in a small GitHub project, which everyone can simply install via npm
and directly integrate into their bpmn-io application.
This fun example showcases how easy it is to build extensions for the bpmn-io toolkit. Also, have a look at the bpmn-js-nyan-cat for another little example of how to bring joy in your modeling application.
Enjoy!
Articles
9 articles in total
use-spinner - Show loading spinners for your asynchronous calls
read article
New version of postit-js got published
read article
Thinking Backward - or: searching for the Big Why
read article
Creating the unknown - What and what not to build in efficient prototypes
read article
Creating Demos with Svelte - Lessons Learned
read article
A Lightweight React Library for creating clickable Prototypes
read article
Building a honkify extension for bpmn-js
currently reading
VS Code Extension - Render Process Diagrams with bpmn.io
read article
render-bpmn: Upload and Display BPMN | CMMN | DMN Diagrams on Github
read article
Featured ones: