Search code examples
javascriptrotationdiagrammingdraw2d-js

draw2d touch (js) rotate ports and bounding box with figure

It seems that draw2d rotates only the inner content of a figure when I rotate it. For example using this function;

         function rotate (angle, figure){
            if(!isNaN(parseFloat(angle)) && isFinite(angle)){
                figure.setRotationAngle(angle%360);
            }

with say, 60 as angle value, makes the following rotation on a label with 4 hybrid ports:

Before Rotation

After Rotation

How can I properly rotate a figure with every component of it? You know, with ports and everything.

Solution

  • There is a small hack that i have done in order to rotate the content part. If you look at the rotated element in the DOM, it will have an attribute named "transform" with value "matrix('some values')". Something like this : transform="matrix(0.5,-0.866025404,0.866025404,0.5,217.9572965841818,726.3312936065454)" Now with this part, what you can do is that whenever your rotation code is called, you can copy the transform attribute from the selected figure and add it to the content part.then It will behave like the rotated element. example