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)