Disable command palette and other questions

Developers
1

Hi - new to bpmn-js and using it from Angular.

I’m wanting to create a basic workflow diagram with limited user interaction. Users will be able to move elements but not create new ones or connections (I’ll do this programmatically).

A few questions:

  1. How can I disable the command palette when a user clicks on an element?
  2. I’ve hidden the main palette (which prevents users from adding new items) through a display: none in my css. Is there a better way?
  3. If I retained the main command palette, how do I remove standard items from it? I’ve seen examples to add new custom items, but haven’t figured out how to remove the standard ones.
  4. When users move items, I want to capture the coordinates of the element so I can record those for use when I next render the element. How can I do that?
  5. I’ve seen an example of some form of auto layout using the code below. There can I find documentation for this and are there other options? (e.g. can I make connections route via the shortest path?)

const connections = elementRegistry.filter((element) => element.waypoints);
connections.forEach((connection) => {
modeling.updateWaypoints(connection, [getMid(connection.source), getMid(connection.target)]);
modeling.layoutConnection(connection, {

            connectionStart: getMid(connection.source),
            connectionEnd: getMid(connection.target),
        });
    });

Thanks in advance!
Craig

2

Thanks for your questions, I’ll try to give answers to all of them

  1. How can I disable the command palette when a user clicks on an element?
  2. I’ve hidden the main palette (which prevents users from adding new items) through a display: none in my css. Is there a better way?

If you want to completely remove palette and context pad, you can do this by overriding the modules. Cf. to this forum thread for further instructions.

  1. If I retained the main command palette, how do I remove standard items from it? I’ve seen examples to add new custom items, but haven’t figured out how to remove the standard ones.

Depending on your use case, you can override the existing entries by your custom provider. See this example for the context pad, the same pattern can be applied to the palette.

class CustomContextPadProvider {
  constructor(contextPad) {
    contextPad.registerProvider(this);
  }

  getContextPadEntries(element) {
    return function (entries) {
      delete entries["append.end-event"];

      return entries;
    };
  }
}
  1. When users move items, I want to capture the coordinates of the element so I can record those for use when I next render the element. How can I do that?

There a couple of events to listen for when shapes are moved

const eventBus = bpmnJS.get("eventBus");

eventBus.on([
  'create.move',
  'create.end',
  'shape.move.move',
  'shape.move.end'
], function(event) {
   console.log(event.shape);
});

I’ve seen an example of some form of auto layout using the code below. There can I find documentation for this and are there other options? (e.g. can I make connections route via the shortest path?)

Basically we try to layout the connections on a best-effort base via Manhattan layout with some BPMN specific behaviors on top. If you want something different, you’ll have to create a custom layouter to do so.

In general, let’s try to keep discussions for separate questions in separate threads.

3

Thanks Niklas, that was useful. I’ll submit more questions in separate threads.