I would like to programmatically trigger a layout operation for diagrams.net.
I would like to use the horizontal flow layout that is available in the ui and as style:
style="childLayout=flowLayout;flowOrientation=west;"
However, for the api there is no type mxFHorizontalFlowLayout
.
=> How to reproduce the horizontal flow layout specified as style, based on the supported layout types?
=> Or how can I trigger an update of the layout, based on the already specified style? (Unfortunately, draw.io does not apply the style automatically but only after manual edits.)
I tried to use mxHierarchicalLayout but I get different results.
/* available layouts:
https://www.drawio.com/doc/faq/apply-layouts#custom-layouts
0 : "mxHierarchicalLayout"
1 : "mxCircleLayout"
2 : "mxCompactTreeLayout"
3 : "mxEdgeLabelLayout"
4 : "mxFastOrganicLayout"
5 : "mxParallelEdgeLayout"
6 : "mxPartitionLayout"
7 : "mxRadialTreeLayout"
8 : "mxStackLayout
*/
function sendLayoutMessage() {{
// tries to apply a horizontal flow layout
console.log('layout');
var iframe = document.getElementById('drawio-iframe');
var layoutMessage = JSON.stringify({{
action: 'layout',
layouts: [
{{
"layout": "mxHierarchicalLayout",
"config": {{
"orientation": "west",
"intraCellSpacing": 0.1,
"interRankCellSpacing": 0.1,
"interHierarchySpacing": 0.1,
"parallelEdgeSpacing": 0.1
}}
}}
]
}});
iframe.contentWindow.postMessage(layoutMessage, '*');
}}