jgraph / drawio

draw.io is a JavaScript, client-side editor for general diagramming.
https://www.drawio.com
Other
41.16k stars 7.64k forks source link

Error loading file - d is undefined #2645

Closed darthoggi closed 2 years ago

darthoggi commented 2 years ago

Preflight Checklist

Describe the bug When I open the embedded editor on an SVG containing a certain shape, I get the error "Error loading file - d is undefined".

To Reproduce Create an SVG containing a shape like this: image

Create iframe: var iframe = document.createElement('iframe');

Define function for event listener: var receive = function(evt) {...}

Add event listener: window.addEventListener('message',receive);

Set src to editor url ('/drawio/?embed=1&ui=min&spin=1&proto=json&configure=1&p=svgdata;tips'): iframe.setAttribute('src',editor);

Add iframe to body: document.body.appendChild(iframe);

Load the information within receive function with: iframe.contentWindow.postMessage(JSON.stringify({action: 'load',autosave: 0, descriptor: {format: 'svg', data: loaded_svg.data}}), '*');

Expected behavior No error.

Workaround My workaround was to add if(typeof(d) != "undefined") { } to the function registered to the "mxEvent.CHANGE" listener: (this.editor.graph.model.addListener(mxEvent.CHANGE,mxUtils.bind(this,function(b,d){for(var e=d.getProperty("edit").changes,f=0;f<e.length;f++)if(e[f]instanceof SelectPage||e[f]instanceof RenamePage||e[f]instanceof MovePage||e[f]instanceof mxRootChange){c();break}}));)

Screenshots image image image

Desktop

mararad commented 2 years ago

Hi,

Is it working in other browsers and Incognito?

robwruck commented 2 years ago

Same here.. Test results:

Using the Confluence inline editor which uses https://ac.draw.io/js/app.min.js

davidjgraph commented 2 years ago

Please attach a diagram file that reproduces the error.

darthoggi commented 2 years ago

test drawio test.drawio.txt

Sorry for the delay.

darthoggi commented 2 years ago

I just tried to import the .drawio and there is no error. Also when pasting the SVG-data into an already open drawio-editor there is no error. The error only seems to occur when loading the svg data with "iframe.contentWindow.postMessage(JSON.stringify({action: 'load',autosave: 0, descriptor: {format: 'svg', data: loaded_svg.data}}), '*');" (the process is described in the initial issue description).

davidjgraph commented 2 years ago

When you say "loading the svg data", are you passing SVG graphics to the postMessage call?

darthoggi commented 2 years ago

Yes. <svg xmlns="http://www.w3.org/2000/svg" style="background-color: rgb(245, 245, 245);" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="384px" height="239px" viewBox="-0.5 -0.5 384 239" content="&lt;mxfile host=&quot;embed.diagrams.net&quot; modified=&quot;2022-02-28T11:41:53.180Z&quot; agent=&quot;5.0 (Windows)&quot; etag=&quot;hN2plg2B5se2wW1Ma5g9&quot; version=&quot;16.6.4&quot; type=&quot;embed&quot; pages=&quot;2&quot;&gt;&lt;diagram id=&quot;14058d99-db58-e9f5-3aba-399879c13e25&quot; name=&quot;Page-1&quot;&gt;lVXbcpswEP0aHpvhYhznMRA7TZN0kslMnfZNhjUoFiwjZAf69ZVgFaB2PO2AB+3Z1WovZ2UniIvmVrIqf8QUhOO7aeMEN47ve4vFXH8M0vbIIiAgkzwlowF44b+BQJfQPU+hnhgqRKF4NQUTLEtI1ARjUuL71GyLYnpqxTI4Al4SJo7RNU9VTln48wH/CjzL7cne/KrXbFiyyyTuSzrP8YNVaJ5eXTDrixKtc5bi+wgKlk4QS0TVr4omBmFqa8vW71t9ov2IW0Kp/mXDztvEP8T6NsM0nL/l0d0jPH8hL7VqbT0g1eUhEaXKMcOSieWARl3OYLy6WhpsHhArDXoafAOlWuo12yvUUK4KQVpouHo12y9Ckn6SM7O+acZCS8JxthS6iXcEUO63gAUo2WoDCYIpfpi2mxFrsg+7j61PyPURvksMn82oocTvwBLXuqhxLxOgXeP6/68jxWQG6siRXozyGaCuvadbfe//Sur2MVoX37/Vs5v7cvac2lYfmNiDZexfva93oJKcKl6ZQLrQwki/pll+7Ha/UBvHGvOMRLjFetmbYiftvFmH2O9IswjDM6pOY01O+FsMGv0G0QGk4nrgH9gGxBPWXHEsdV4bVAqLKTWt7bXgmbFRhtIRq6v+6tnyxhA/YqRONBtB2mKBXB6gr5nxpQe+MoUtmsxcnRcJrxP0ri5k5yuq5F3SxaHnqXey5ULEKFB23QhW1+YxjpTEHYw0rhu6l8G5qTB5QHN2Lkh76U5YuSDxfbgLQ4Ly0TUYup/P0YS4A0u1OFx2PamHf5Rg+Qc=&lt;/diagram&gt;&lt;diagram id=&quot;9AJ6mlvyw3cWJQS_3Es2&quot; name=&quot;Page-2&quot;&gt;tZRNT8MwDIZ/TY9Ia7OP7soYcBgINGmIE8oSr4lI6yrLaMevJ13dtWWHMYmd6jx27fq104DN0vLB8lw9oQQTRANZBuwuiKIwjsf+UZF9TSbTsAaJ1ZKCWrDU30BwQHSnJWx7gQ7ROJ33ocAsA+F6jFuLRT9sg6ZfNecJnICl4OaUvmnpFNFwMGgdj6ATRaXjETlS3gQT2CouseggNg/YzCK62krLGZhKvEaXj/fwWbyylRKrNB4l47fpQt3Uye4veeXYgoXM/W/qqE79xc2O9KJe3b4R0LedV6ZEsUsPH3BbKO1gmXNR8cLvjWfKpcafQm+ucZdJkIt1A6gIWAflr6mcaSk86uwXFDAFZ/f+PcoynNJoaDfZmM5FZ9LN+FR3yMQ4LVdyTN0K6A3S8AI92d/1VFDyBDMvTw5W+/JgW/rSoOi83BtdQnPx6rMxMzRoD/XYJhYghOdbZ/ETOp51PBr6bb/ifCb9+YTD683HH9urePB1fmhs/gM=&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><g id="cell-K2ZcsyMBWmNJs4DKn4Qd-1"><ellipse cx="25" cy="25" rx="25" ry="25" fill="#fafafa" stroke="none" pointer-events="all"/><rect x="0" y="0" width="50" height="50" fill="none" stroke="none" pointer-events="all"/><path d="M 38.08 40.38 L 31.77 34.19 L 29.2 36.81 L 27.24 27.37 L 36.75 29.12 L 34.2 31.72 L 40.51 37.9 Z M 23.92 28.37 L 17.74 34.68 L 20.36 37.25 L 10.92 39.21 L 12.67 29.71 L 15.26 32.25 L 21.45 25.95 Z M 12.02 9.57 L 18.33 15.76 L 20.89 13.14 L 22.86 22.58 L 13.35 20.83 L 15.9 18.24 L 9.59 12.05 Z M 25.91 21.51 L 32.1 15.2 L 29.48 12.63 L 38.92 10.67 L 37.17 20.17 L 34.58 17.62 L 28.39 23.94 Z M 25 0 C 11.2 0 0 11.2 0 25 C 0 38.8 11.2 50 25 50 C 38.8 50 50 38.8 50 25 C 50 11.2 38.8 0 25 0 Z M 25 0.63 C 38.46 0.63 49.37 11.54 49.37 25 C 49.37 38.46 38.46 49.37 25 49.37 C 11.54 49.37 0.63 38.46 0.63 25 C 0.63 11.54 11.54 0.63 25 0.63 Z" fill="#005073" stroke="none" pointer-events="all"/></g></g></svg> That should be the data that gets passed.

davidjgraph commented 2 years ago

Pure SVG won't work. For the SVG option it would need to be our SVG+XML format.

darthoggi commented 2 years ago

Thanks for the response. What is the difference between the SVG and SVG+XML format and why am I able to load other SVGs the same way and the SVG above in other Browsers (e.g. Chrome) without error?

alderg commented 2 years ago

Try 17.1.0.