0

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, '*');
    }}

1 Answer 1

0

a) It makes a difference for the layout, if the grid is enabled or not in the mxGraphModel. Disabling the grid by removing the parameter grid="1" helped to reproduce the layout.

b) The flow layout in diagrams.net is implemented based on mxHierarchicalLayout by the script app.min.js with following execution stack:

    mxGraphHandler.prototype.moveCells
    mxGraphModel.prototype.endUpdate
    mxLayoutManager.prototype.beforeUndo
    mxLayoutManager.prototype.executeLayoutForCells
    mxLayoutManager.prototype.layoutCells
    mxLayoutManager.prototype.executeLayout 
    mxHierarchicalLayout.prototype.execute

and following parameters:

    deterministic: true
    interHierarchySpacing: 60
    interRankCellSpacing: 100
    intraCellSpacing: 30
    maintainParentLocation: true
    orientation: "west"
    parallelEdgeSpacing: 10
    parentBorder: 20
    resizeParent: true
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.