Eventbus element.changed unlimited calls issue

Developers
1

Hi,

I have caught a event click in eventbus and then tried to change businessobject name. But in the diagram name is not changing. Its working only when I do drag after that. So after investigating, I thought to fire element changed. But it is going to endless loop with events. Can anyone suggest me how I can fire element changed to update name of the element.

var eventBus = bpmnModeler.get('eventBus');

var events = [
	'element.click',
	'element.dblclick',
	'drag.end',
	'drag.out',
	'shape.changed',
	'element.contextmenu'
];

events.forEach(function(event) {
	eventBus.on(event, function(e) {
		if(typeof e.element !== 'undefined'){
		console.log(e.element.type);
		console.log(e.element.businessObject.name);
		e.element.businessObject.name = 'xxxxx';
		eventBus.fire('element.changed', { element: e.element });		
	  }		
	});

	eventBus.on("element.changed", event => {
		event.preventDefault();
		event.stopPropagation();
	});
});
2

Hi Raja,

could you please explain what exactly you are trying to achieve?

If you always want to rename certain elements as part of a certain command, you could use the CommandInterceptor. Please refer to this thread, which is about a very similar use case (set an initial label on element creation).

Best
Max

2 Likes
3

Please never ever do this manually. Try to work with command interceptors as @maxtru already showed.

3 Likes
4

Thanks Guys,

Figured it out, hope the below code helps someone

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

    this.postExecuted(
      "element.updateProperties",
      context => {
        const { element, properties } = context;

        if ("label" in properties) {
          modeling.updateLabel(element, `${properties.label}`);
        }
      },
      true
    );
  }
}

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

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

const bpmnJS = new BpmnJS({
  container,
  keyboard: {
    bindTo: document
  },
  additionalModules: [
    {
      __init__: ["customLabelUpdater"],
      customLabelUpdater: ["type", CustomLabelUpdater]
    }
  ]
});

bpmnJS.importXML(xml, err => {
  if (err) {
    console.error(err);
  }

  const eventBus = bpmnJS.get("eventBus"),
    modeling = bpmnJS.get("modeling");
  eventBus.on("element.click", ({ element }) => { 
    const label = 'ssss';
    modeling.updateProperties(element, {
      label
    });
  });
});
2 Likes
6

Please do not necrobump old topics. Instead link to this thread from new topic.

7