How to set viewbox for embed.diagrams.netdraw.io? - Stack Overflow

admin管理员组

文章数量:1122846

In the below example html file I try to set the viewbox to show the full diagram. However, it does not work.

=> How to fix the url or config to properly initialize pan and zoom?

(The layout action influences the view but disabling the layout action. Even with disabled layout action the viewbox does not seem to be applied.)

<style>
    .jp-Cell-outputArea{
       max-height: 900px !important;
       overflow-y: auto;
   }
</style>
<iframe
        id="drawio-iframe"
        frameborder="0"
        style="width:999px;height:500px;"
        src='/?viewbox={"x":0,"y":0,"width":1000,"height":1000}&saveAndExit=0&noSaveBtn=1&noExitBtn=1&proto=json'
></iframe>
<script>
    var loadedXml=false;

    function sendLayoutMessage() {
        // applies a horizontal flow layout

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

    window.addEventListener('message', function(event) {
      if (event && event.data) {
        console.log('event:', event.data);
      }
      if (event.data.includes('configure')) {
        var iframe = document.getElementById('drawio-iframe');
        var config =  JSON.stringify({
            action: 'configure',
            config: {
                defaultGridEnabled: false,
            },
        });
        iframe.contentWindow.postMessage(config, '*');

      }

      if (event.data.includes('init')) {
        if(loadedXml){
            return;
        }
        var iframe = document.getElementById('drawio-iframe');
        var message = JSON.stringify({action:"load", xml: '<mxfile host="app.diagrams"><diagram name="PyPSA Network"><mxGraphModel dx="1000" dy="1000" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0"><root><mxCell id="0" /><mxCell id="1" style="childLayout=flowLayout;flowOrientation=west;" parent="0" /><object id="bus0" label="bus0" carrier="carrier0"><mxCell style="shape=ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry as="geometry" width="80" height="80" /></mxCell></object><object id="bus1" label="bus1" carrier="carrier0"><mxCell style="shape=ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry as="geometry" width="80" height="80" /></mxCell></object><object id="sink" label="sink" bus="bus1" carrier="carrier0" p_set="100.0"><mxCell style="shape=rectangle;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry as="geometry" width="80" height="40" /></mxCell></object><mxCell id="sink_edge" source="bus1" target="sink" edge="1" parent="1"><mxGeometry as="geometry" /></mxCell><object id="my_link" label="my_link" bus0="bus0" bus1="bus1" carrier="carrier0" efficiency="0.5" p_nom="10000000000.0" p_nom_opt="10000000000.0"><mxCell style="shape=triangle;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry as="geometry" width="40" height="40" /></mxCell></object><mxCell id="my_link__bus0__my_link" source="bus0" target="my_link" parent="1" edge="1"><mxGeometry as="geometry" /></mxCell><object id="my_link__my_link__bus1" efficiency="0.5"><mxCell source="my_link" target="bus1" parent="1" edge="1"><mxGeometry as="geometry" /></mxCell></object><object id="source" label="source" bus="bus0" p_nom="10000000000.0" carrier="carrier0" marginal_cost="1.0" p_nom_opt="10000000000.0"><mxCell style="shape=rectangle;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry as="geometry" width="80" height="40" /></mxCell></object><mxCell id="source_edge" edge="1" source="source" target="bus0" parent="1"><mxGeometry as="geometry" /></mxCell></root></mxGraphModel></diagram></mxfile>'});
        //console.log(message)
        iframe.contentWindow.postMessage(message, '*');
        loadedXml=true;

      }

      if (event.data.includes('load')) {
        sendLayoutMessage();

      }

    });
</script>

Related:

• How to reproduce horizontal flow layout as custom layout in embed.diagrams / draw.io?

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

本文标签： How to set viewbox for embeddiagramsnetdrawioStack Overflow