I have created custom shape that I draged and droped it. Now I rotate it in any direction. When traversing the xml of the graph, I can get rotation of that custom shape. I am going traversing through the graph and creating a new shape by creating '<shape>' xml. I don't know how to rotate the custom shape inside the new shape.
Source XML:
<mxGraphModel>
<root>
<mxCell id="0"/>
<mxCell id="1" parent="0"/>
<mxCell id="2" value="" style="shape=Half Circle;rotation=45;" vertex="1" parent="1">
<mxGeometry x="250" y="120" width="98" height="49" as="geometry"/>
</mxCell>
</root>
</mxGraphModel>
Target Sample XML: (Need to rotate half circle shape)
<shape name="rotatedhalfCircle" h="59" w="108" aspect="fixed" strokewidth="inherit">
<connections></connections>
<background></background>
<foreground>
<fillstroke/>
<include-shape name="Half Circle" x="10" y="10" w="98" h="49"></include-shape>
<stroke/>
</foreground>
</shape>
Code:
var graphModel = editor.graph.getModel();
for (var key in graphModel.cells) {
var cell = graphModel.getCell(key);
var geometry = graphModel.getGeometry(cell);
var styleAttribute = graphModel.getStyle(cell);
if (graphModel.isVertex(cell)) {
if (styleAttribute) {
let styles = styleAttribute.split(';');
for (let i = 0; i < styles.length; i++) {
let shapeAttribute = getStyle('shape', styles[i]);
if (shapeAttribute) {
shapeAttribute = getShape(shapeAttribute);
if (geometry != null) {
let subShape = document.createElement("include-shape");
subShape.setAttribute("name", shapeAttribute);
if (styleAttribute.indexOf("rotation") > 0) {
let rotation = styles[1].split('=')[1];
// TODO: rotate the subShape and get x, y coordinates
}
else {
subShape.setAttribute("x", geometry.x);
subShape.setAttribute("y", geometry.y);
subShape.setAttribute('w', geometry.width);
subShape.setAttribute('h', geometry.height);
}
}
}
}
}
}
}