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!
Top comments (0)