Adjust label when connection has modified

Hello,

I’ve found labels keep in the initial places when related connections changed. I’d like to suggest the following code for adjusting labels automatically. Label will be moved next to arithmetical center of connection’s line.

eventBus.on(['commandStack.connection.updateWaypoints.executed'],1000,function(e){
	adjustSequenceLabel(e.context.connection);
});
			
eventBus.on(['shape.move.end'],1000,function(e){
	for(var i in e.context.shapes){
		for(var j in e.context.shapes[i].incoming){
			adjustSequenceLabel(e.context.shapes[i].incoming[j]);
		}
		for(var j in e.context.shapes[i].outgoing){
			adjustSequenceLabel(e.context.shapes[i].outgoing[j]);
		}
	}
});
			
function adjustSequenceLabel(sequence){
	var center = getSequenceCenter(sequence);
	var q = sequence.label;
	modeling.moveShape(q,{x:center.x-q.x-q.width/2,y:center.y-q.y});
}
		
function getSequenceCenter(e){
	if(!e.waypoints){return}
	var c = e.waypoints[0];
	var lengths = [];
	for(var i = 1; i < e.waypoints.length;i++){
		var d = e.waypoints[i];
		lengths.push(Math.sqrt ( Math.pow(d.x-c.x,2) + Math.pow(d.y-c.y,2) ))
		c = d;
	}
	var length = 0;
	for(var i in lengths){ length += lengths[i] }

	var cut = length/2;
	var length = 0;
	for(var i in lengths){
		length += lengths[i];
		if(length > cut){
			length = cut + lengths[i] - length;
			var la = length / (lengths[i] - length);
			return {
				x: (e.waypoints[i].x + e.waypoints[i*1+1].x*la)/(1+la),
				y: (e.waypoints[i].y + e.waypoints[i*1+1].y*la)/(1+la)
			}
		}
	}
	return {x:0,y:0};
}

Hi @tujger,

Thank you for the proposal. Feel free to create a pull request with proposed changes.
Worth thinking about undo/redo behavior as part of the change, as well.

Many thanks,
Vladimir

Unfortunately, i haven’t enough time to do it. But i don’t mind if somebody would do.

For reference - mentioned post in the related issue.

Hi Vladimir,

  • Could you help me to do this (step by step)? I just be a new, and i don’t understand what you say.

Regards,
Hung

Hi,

This has been now fixed/implemented under this ticket.

Cheers,
Vladimir

Hi Vladimir,

  • How do i get it? I’m a new, i just a little knowledge about this.

Regards,
Hung

Please update the version of bpmn-js you used before to at least 0.16.2.

Could you be specific on what you are struggling with?

Cheers,
Vladimir

Hi Vladimir,

  • Now, i’m using version 0.13. And how do i get it without update version?

Regards,
Hung

Hi Vladimir,

  • Thank you very much, i will try it.

Cheers,
Hung

Sure, welcome :wink: