Restrict movement of label

Hi Everyone,

My project is heavily dependent on bpmn.js. When I add a notation I should be able to move the notation which is the expected behaviour. But should restrict movement of label attached to it.

I tried returning false from ‘shape.move’ etc but it is not working. Please provide a solution.

Can you share the code that is not working?

I tried this way…

this.eventBus.on('commandStack.elements.move.canExecute', (e) => {
  return false;
});

this.eventBus.on('commandStack.shape.move.preExecute', (e) => {
  return false;
});

this.eventBus.on('element.mousemove', (e) => {
  return false;
});

this.eventBus.on('shape.move.end', (e) => {
  return false;
});

this.eventBus.on('commandStack.executed', (e) => {
	if (e.command === 'shape.move') {
		return false;
	}
});

Tried all of the above but no use. Can you please suggest some solution.

Tried adding as rule and it worked. Thanks for your support.

Glad to hear this! Mind you sharing your solution that other people can benefit from it?

bpmn-js has a concept that takes care of what is allowed and what is not. Instead of using the event bus (which also works) I’d recommend you use rules for this purpose. Here’s an example: https://github.com/bpmn-io/bpmn-js-examples/tree/master/custom-modeling-rules

this.addRule(‘elements.move’, HIGH_PRIORITY, function (context) {
console.log ('elements move ', context);
if (context.shapes[0].type === ‘label’)
return false;
});

Here is the code. This is draft version need to improve a lot :slight_smile:

This only works if the first shape is a label.

Maybe try

import { some } from 'min-dash'; // you can also use lodash's version

function isExternalLabel(element) {
  return !!element.labelTarget; // duck typing
}

this.addRule('elements.move', HIGH_PRIORITY, ({ elements }) => {
  return !some(elements, isExternalLabel);
});

Yes if there is any label we should restrict the movement of that.
Thanks for suggestion. Will be definetely using ‘some’.

Thanks a lot for your support.