Rotating elements

Developers Modeler
1

Hi,

I’m new here. I tried to search for the answer but I couldn’t find anything about it. Is there a way to implement custom rotation of the shapes placed on the canvas?

For example let’s say the canvas has an image and the image is sometimes at an angle. I want to place the shapes on the canvas and then rotate them by hand to match the orientation of the background image. Is this something that’s doable?

Tnx in advance for your help.
D

2

Hello!

Sadly rotating elements are not supported by default. There’s a way to rotate them though, if you’re willing to fork diagram-js and hack it : )

You need to inject these methods into lib/model/index.js in diagram-js project:

Shape.prototype.getGraphics = function() {
  return elementRegistry.getGraphics(this.id);
}

Shape.prototype.setPosition = function(x, y) {
  this.x = x;
  this.y = y;
  this.handleTransform();
}

Shape.prototype.setRotation = function(degrees) {
  this.rotation = degrees;
  this.handleTransform();
}

Shape.prototype.handleTransform = function() {
  var svg = elementRegistry.getGraphics(this.id);
  svg.setAttribute('transform', 'translate('+this.x+', '+this.y+') rotate('+this.rotation+' '+this.width/2+' '+this.height/2+')');
}

Then you could use setRotation/setPosition APIs to set the rotation/position of given shape from its center. However this is just a hack and might cause (will probably cause) other undesired behaviors,

3

Hey @oguzeroglu

thank you so much for getting back to me with this. Sounds good I’ll give it a shot and see if I can live with the side-effects.

Tnx again :slight_smile:

1 Like