aframevr / aframe-inspector

:mag: Visual inspector tool for A-Frame. Hit *<ctrl> + <alt> + i* on any A-Frame scene.
https://aframe.io/aframe-inspector/examples/
MIT License
654 stars 201 forks source link

'Save' doesn't really save attributes changed in Inspector view #477

Closed bobchao closed 7 years ago

bobchao commented 7 years ago

Steps

  1. Visit https://parallel-beef.glitch.me/ and press Ctrl-Alt-I
  2. Change the color of a-box from #4CC3D9 to #ff0b00 from the inspector view
  3. Save (Export to HTML) the scene and check the code

Expect

The attribute "color" of a-box is #ff0b00, just like what we saw in the Inspector.

Actual result

Nothing changed, the color is still #4CC3D9 in the downloaded HTML file.

Note

If you hit Add a New Entity, modify the attributes of the new entity then save the scene, the new entity will be shows up in the exported HTML, with only blank attributes like this:

<a-entity position="" rotation="" scale="" visible="" id="yourid"></a-entity>

However the id does saved correctly.

bobchao commented 7 years ago

Some note:

https://github.com/aframevr/aframe-inspector/blob/master/src/lib/exporter.js#L51

Tried change the attributes directly from Developer Tools, then do generateHTML in the console. The attributes was correctly changed in the returned result.

bobchao commented 7 years ago

Oh well I found the answer from the FAQ, should check it earlier...

https://aframe.io/docs/0.5.0/introduction/faq.html#why-is-the-html-not-updating-when-i-check-the-browser-inspector

To improve performance, A-Frame does not update the HTML to save on stringification operations. Use the debug component or .flushToDOM methods if you need to sync to the DOM.

So maybe we should call flushToDOM right before save the scene.

bobchao commented 7 years ago

Proposed a simple change