javascript - How to send layout action to embed.diagrams.net? - Stack Overflow

admin管理员组

文章数量:1333451

I use embed mode of diagrams and try to post a layout action. However, the layout event does not occur in the lifecycle.

=> How to correctly send the layout action to initialize the layout for my xml content?

• I tried to send the message after ready event but got

  INFO Error undefined undefined undefined Error: Not a diagram file (error on line 1 at column 1: Start tag expected, '<' not found)

=> After ready event, the message seems to be expected as xml, not as json.

• I also tried to enable the layout action similar to the configure action with layout=1 as url parameter. But there does not seem such an url parameter.

  window.addEventListener('message', function(event) { //...
  if (event.data.includes('layout')) { var iframe = document.getElementById('drawio-iframe'); console.log('layout'); var layoutMessage = JSON.stringify({ action: 'layout', layouts: [ { type: 'horizontalFlow', animate: true } ] }); iframe.contentWindow.postMessage(layoutMessage, '*');

  })

Related:

• How to automatically apply flow layout when opening xml file in draw.io / diagrams?
• How to reproduce horizontal flow layout as custom layout?

I use embed mode of diagrams and try to post a layout action. However, the layout event does not occur in the lifecycle.

=> How to correctly send the layout action to initialize the layout for my xml content?

• I tried to send the message after ready event but got

  INFO Error undefined undefined undefined Error: Not a diagram file (error on line 1 at column 1: Start tag expected, '<' not found)

=> After ready event, the message seems to be expected as xml, not as json.

• I also tried to enable the layout action similar to the configure action with layout=1 as url parameter. But there does not seem such an url parameter.

  window.addEventListener('message', function(event) { //...
  if (event.data.includes('layout')) { var iframe = document.getElementById('drawio-iframe'); console.log('layout'); var layoutMessage = JSON.stringify({ action: 'layout', layouts: [ { type: 'horizontalFlow', animate: true } ] }); iframe.contentWindow.postMessage(layoutMessage, '*');

  })

Related:

• https://www.drawio/doc/faq/embed-mode
• How to automatically apply flow layout when opening xml file in draw.io / diagrams?
• How to reproduce horizontal flow layout as custom layout?

• javascript
• draw.io
• diagrams

Share Improve this question Follow edited Nov 20, 2024 at 17:36 Stefan asked Nov 20, 2024 at 15:12 StefanStefan 12.4k99 gold badges7777 silver badges137137 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Just found out, that there are several modes for the protocol used by diagrams. That can be confusing for beginners.

In order to send layout actions, one needs to enable the json protocal first, using the url attribute proto=json. Then the event lifecycle changes and instead of a "ready" event, an "init" event occurs.

After that "init" event it is possible to send load and layout actions.

function sendLayoutMessage() {{
            // applies a horizontal flow layout
            
            /* available layouts:
        https://www.drawio/doc/faq/apply-layouts#custom-layouts

        0 : "mxHierarchicalLayout"
        1 : "mxCircleLayout"
        2 : "mxCompactTreeLayout"
        3 : "mxEdgeLabelLayout"
        4 : "mxFastOrganicLayout"
        5 : "mxParallelEdgeLayout"
        6 : "mxPartitionLayout"
        7 : "mxRadialTreeLayout"
        8 : "mxStackLayout
        */
        
            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, '*');
        }}

Related follow-up question:

How to reproduce horizontal flow layout as custom layout?

本文标签： javascriptHow to send layout action to embeddiagramsnetStack Overflow