Building a honkify extension for bpmn-js

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!