Rotating elements

Developers Modeler
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,