Profile cover photo
Profile photo
Mike Thomson
Electrical & Computer Engineer
Electrical & Computer Engineer
About
Mike's posts

The embedded version, using JSON action: "export" message, when using format: "png" the response from draw.io has stopped returning the respective format: "png" attribute.

When exporting as SVG, any clipart (non-vector based) seems to not get embedded in the SVG, but rather uses an xlink URL to point to the image src online. This obviously won't work for offline images. It also causes cross-domain problems when included on a web page, as most browsers will block that sort of thing. It would be nice ("feature request") if the image source for the applicable clipart could actually be embedded withing the SVG instead of linking to an external resource. Is there already some way to do this? Maybe this can be an option when exporting?

Post has attachment
Choosing "export > SVG" from the menu at the draw.io website yields different output than when using the embedded editor with 'action': 'export', 'format': 'svg' JSON message. The draw.io website output appears correct, while the embedded editor's output appears incorrect.
Photo

Post has attachment
Created WP plugin that interacts with draw.io, added it a few days ago:
https://wordpress.org/plugins/drawit/

Using the embed mode and exporting an image as PNG (using json message passing), if the diagram is less than 150px tall, then it exports a PNG image that is padded on the bottom to make it 150px tall. This occurs whether I am editing a diagram or creating a new one.

Now that embed mode supports JSON message passing, a feature I have really been antsy for is being able to send a message saying something like: {download: "<format>"} where <format> is the download type requested (like "xml", "png", "svg", etc.) and it returns the diagram in that format in base64 encoding like: {content: "<base64 data>"}. This would mimic the "Export As..." menu item from the non-embedded editor.

Post has attachment
When using the embedded editor via an iframe, if the XML that is passed to the draw.io iframe for editing has attribute grid="0", it does make the grid go away when editing, but the grid checkbox option still shows up as being checked even though the grid is not present. The checkbox should be cleared.

Here is the XML for this example:
<?xml version="1.0"?>
<mxGraphModel dx="621" dy="624" grid="0" gridSize="10" guides="1" tooltips="1" connect="1" fold="1" page="0" pageScale="1" pageWidth="826" pageHeight="1169" style="default-style2" math="0" pan="1" zoom="1" resize="1" fit="1" nav="0" border="0" links="1"><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="2" value="" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="10" y="10" width="120" height="60" as="geometry"/></mxCell><mxCell id="3" value="" style="ellipse;whiteSpace=wrap;html=1;" vertex="1" parent="1"><mxGeometry x="190" y="10" width="80" height="80" as="geometry"/></mxCell></root></mxGraphModel>
Photo

Post has attachment
When using read-only iframes to display a diagram, the zoom +/- and [1:1] buttons are wrapped by an element that has light gray 1px borders on the bottom and on the right. When printing a web page that has a diagram with these zoom buttons, the typical setting for users' browsers is to not print background graphics - this means that the buttons disappear (good), but that the bottom and right borders are still visible (bad). Can these bottom and right borders get replaced so that they disappear during print, so it will be consistent with the rest of it?

Probably the best way to ensure consistency is to put another wrapper element around the existing one, with a background color that is the same as the light gray and 1px padding on the bottom and right so that the background shows through and appears as a border during normal web page viewing but disappears during printing. Thanks.
Photo

Post has attachment
Using read-only iframes (parameter chrome=0) and with XML parameter page=0 to make it scale to the diagram size (instead of page size), the zoom +/- and [1:1] buttons cover the upper-left portion of the diagram. It would be great if these control buttons were not visible until mouse "hover" over the diagram occurs. Perhaps you could add a new parameter to make the tool buttons only appear on hover over? This is easily achieved with the following CSS for the draw.io iframe page in your grapheditor.css:

body .geToolbarContainer {
visibility: hidden;
}
body:hover .geToolbarContainer {
visibility: visible;
}
Photo

I've been working with showing read-only content from draw.io via an iframe (using parameter chrome=0). The problem with iframes is it is difficult to determine the size of the iframe contents since this is cross-domain. I know the size of the original image, but when the browser window size is smaller, causing the iframe contents to be displayed at a fraction of the original size, it would be nice to know what the new size of the iframe contents are so I won't have blank white space after the diagram inside the iframe (e.g., I can use javascript or something to change the iframe size to match the contents). This is important for any site that is designed to be size-responsive. This would also be important for any general-purpose functionality where the exact dimensions or aspect ratio might not be known beforehand, so the site can correctly adjust the height of the iframe.

I think a great way to alleviate this issue would be to extend the existing ajax postMessage "ready" message system between the parent and the draw.io iframe so as to include json-encoded requests for properties/metadata and json-encoded responses back from the draw.io iframe. For example, the parent could send a request with an array of properties like "height", "aspect_ratio", etc and get the values back to adjust the iframe accordingly.

These feature update would remain backward-compatible with the existing feature set since it would only require adding functionality for new commands sent from the parent to the draw.io iframe.
Wait while more posts are being loaded