Finding out where eventBus action was called from

Developers Modeler
1

Hi,

I have implemented Modeler with EventBus shape.added action which sends API requests. Now I was wondering is it possible to see where “shape.added” action was called from? My goal for this is to separate calls made from “redo” -keyboard shortcut and drag-and-drop action from palette.

2

Do I understand it correctly that you want to react to cases when a shape is added by the user but not as an effect of redo action? If so, the CommandInterceptor class should be your friend. Instead of having an EventBus listener, you could use that class to react to a command being executed. Have a look at how it can be implemented in this thread.

If you have any follow-up questions, please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart:

3

Hi @barmac!

Solution made in linked thread was just what I was looking for!

I’ll share my solution here in case someone else needs it in the future.

import Modeler from "bpmn-js/lib/Modeler";
import CommandInterceptor from "diagram-js/lib/command/CommandInterceptor.js";

import "bpmn-js/dist/assets/diagram-js.css";
import "bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css";

import "./styles.css";

import diagram from "./diagram.bpmn";

class CustomInterceptor extends CommandInterceptor {
  constructor(eventBus, modeling) {
    super(eventBus);

    this.postExecuted(
      "shape.create",
      (context) => {
        // Shape was created by user!
        console.log(context.shape);
      },
      true
    );
  }
}

CommandInterceptor.$inject = ["eventBus", "modeling"];

const container = document.getElementById("container");

const modeler = new Modeler({
  container,
  keyboard: {
    bindTo: document
  },
  additionalModules: [
    {
      __init__: ["CustomInterceptor"],
      CustomInterceptor: ["type", CustomInterceptor]
    }
  ]
});

modeler
  .importXML(diagram)
  .then(({ warnings }) => {
    if (warnings.length) {
      console.log(warnings);
    }

    const canvas = modeler.get("canvas");

    canvas.zoom("fit-viewport");
  })
  .catch((err) => {
    console.log(err);
  });
2 Likes
4

I am happy that you were able to figure it out yourself :slight_smile: Thanks for sharing the solution!