aframevr/aframe-inspector

:mag: Visual inspector tool for A-Frame. Hit *<ctrl> + <alt> + i* on any A-Frame scene.

aframe-inspector's Issues

Consider making the Scene options more prevalent

if right now, all we have is "Save to HTML" and "Copy to clipboard" - can we pull those out of a drop-down menu and make them more visible? We have the horizontal real estate.

Clicking on inputs can trigger accidentally rewrite values (due to horizontal stepping)

I just clicked on the field for the rotation X value, and it changed to -0.02 because I must've dragged my mouse a bit on mousedown.

Hover entities

Implement hover event over each instance on the scene, both using cursor or mouse.
It should highlight the object (using a different color or shape than the selected status) and show some simple attributes on top, like for example ID or entity type.

Ability to pan editor camera

The editing camera is locked around the scene origin. It's hard to edit anything in detail without being able to pan around when zoomed in.

Consider moving entity delete button into attributes panel.

(this is where I was looking for it)

Didn't catch it at the bottom of the scene graph.

Open to other placement suggestions as well.

Change treatment of Common › Type: A-ENTITY → `<a-entity>`

can we tagName.toLowerCase()?

Add Github deploy script

To have a distributable version

Enable keyboard navigation to cycle through the scenegraph list

to make things easy, you could have a radio form field for each item

Exported scenes issues

• shouldn't contain A-Frame injected CSS (i.e., <style type="text/css" data-href="src/style/aframe.css">).
• offer an option to possibly rewrite the URLs to be absolute (if I exported a scene from http://dev.fernandojsg.com/aframe-editor/example/, then <script src="js/aframe.js"> should be written as <script src="http://dev.fernandojsg.com/aframe-editor/example/js/aframe.js">). I know this gets tricky. Because some people will be using the editor to inspect, edit, and fork others' scenes - while others will use it to quickly tweak their scenes
• remove the injected Editor script (i.e., <script src="../build/aframe-editor.js"></script>)
• remove the injected React elements from the Editor (and the <a download>)

Use `<label>`s where appropriate

To improve usability and ease of use with bigger clicker targets (and the keyboard navigation you get for free with tabindex) - and of course for accessibility too.

Examples:

Add helper for positional audio

Probably something like a wireframe speaker

Editing one transform accidentally rewrites other transforms

1. Create an <a-entity>
2. Set position to 2.00 2.00 2.00.
3. Set rotation to 0.01 0.00 0.00.
4. Notice position has changed to 2.00 2.00 0.00 and rotation to 0.0 0.00 0.00.

I noticed a ton of weirdness such as with this. And now when I did it again, the rotation Z value became 0.02. Weird!

Introduce a keyboard shortcut to toggle the Editor

If the Editor is opened and no form field or anything is focussed, perhaps just pressing Esc or e or whatever should dismiss the Editor.

And when I'm in non-Editor mode, I should be able to easily invoke the Editor by pressing option + e or something (again, when only document.activeElement is not a form field, contexteditable, etc.).

Cursor donut should be hidden?

Not sure if this is expected? Or if you should be able to edit the cursor as part of the controls?

Enable keyboard navigation to cycle menus

Similar to #7

Can we allow folks to edit the entity Type?

Bad contrast between selection box color and list bullet

Exported scene appears broken



Clone entity

It would be super useful to be able to clone a entity.

component icons on entities are not clear

The camera one is obvious, but the rest are really hard to understand. I think we could probably do away with them if the components are already present in the attributes panel and just rely on entity labeling/ID.

Consider generating better filenames than ascene.html for exported scenes

Unable to select items in components menus

They keep collapsing when I try to hover over them, because they're overlapping the components below:

Add support to create Mixins

Mixins could be created directly from an entity by selecting the components and attributes we would like to add to the mixin.

change cursor to grab when panning

The command menu of the component should appear below the three dots

I clicked on the three dots icon and remove the component by mistake. The non reversible operations should be harder to trigger to avoid unintented results.

Undo / Redo feature

I removed a component by mistake and I cried.

Does not apply transforms to values typed in

When entering transform values by typing (using numeric keys), the entity does not take on these changes.

Seems to work fine when you click and drag the numbers.

Common, components and the list of components are different but look the same

We can may be do common non collapsible, add a button in the common space box to add a component to the list below

Consider moving "Create" to "Scene Graph"

1. I was surprised to learn that "Create" meant add items to my scene graph.
2. Can we have an "+ Add" button in the scene graph sidebar (perhaps flush left of the trash can)?

Make "Scene Graph" heading sticky

Otherwise, the footer with the delete action buttons, etc. can be hidden from the view:

Consider adding links to the docs for each component + property

Definitely could come later, but it'd be nice if there was some (?) help icon or something that could link me to the docs to learn about it.

Add a picture-in-picture view of the scene whilst editing

It'd be nice to see how my scene is changing as I move the camera, for example. The editor wireframe view is nice, but I can imagine it becoming cumbersome going back and forth.

Texture dialogue shows when re-entering "edit" mode.

After exiting from editor.

Purpose of "Edit" menu?

I don't see anything in Denys' mocks. Will this "Edit" drop-down menu be used for something?

Add a collapse all to be able to easily see all the components

Adding/removing mixins is a bit confusing

I know it's probably obvious to most, but I didn't actually understand that pressing the plus sign was taking the actively selected mixin in the <select> and adding it below.

I originally thought the mixins <select> menu was listing the active mixins on that entity:

Make it more obvious that transforms can be edited

I know it's like this in the mocks, but because there are no borders around the numbers, they look readonly. Especially since Type: A-ENTITY actually is read only.

consider not showing camera helpers when not selected, or make the helpers less prominent

The camera lines are persistent and extend across the scene so there's some noise

Implement 2D Cameras

Implement common DCC 2D cameras: Top, Front & Right + Isometric.
As we're not going to use this cameras for a-frame I don't see the point on creating a component for ortho2d in aframe having already a perspective camera. I think we should just use THREE.OrthographicCamera directly.

Number fields are confusing; use input[type=number]/input[type=range] instead of custom sliders

It took me a good minute or so to discover that by horizontally dragging in a numeric text field that the value changes. It's neat. But wasn't discoverable. Perhaps make that more obvious or require the field to be focussed first (that's what Dev Tools do, anyway). And possibly consider using the native browser ones: input[type=number], input[type=range].

Simple attribute components are not represented correctly

Look at debug:

Posibility to save the scene to codepen or other hosting service

That would allow for quick iteration and easy sharing of derivative work.

Remove invalid component's attributes

If we have an entity with an standard material like:

<a-entity geometry="primitive: sphere" material="metalness:0.0;roughness:1.0;shader:standard"></a-entity>

And we change the shader, some of the parameters won't be available on this new shader (metalness, roughness):

<a-entity geometry="primitive: sphere" material="metalness:0.0;roughness:1.0;shader:noise"></a-entity>

So probably we should delete them, as it will keep giving warnings on the console:

core:schema:warn Unknown component property: metalness +0ms
browser.js:112 core:schema:warn Unknown component property: roughness +2ms

Add tooltip text for icons

using title (and alt) - or use custom tooltips if you'd like

Objects don't smoothly follow my mouse when dragging. The faster the worse it gets

Allow me to exit the Textures modal by pressing Esc or clicking outside the modal

Enable drag and drop of scene graph entities

I'd like to move one entity to be nested within another entity. Or I'd like to just rearrange or group my entities.

Consider adding `contextmenu`s to the entities in the scene graph

https://davidwalsh.name/html5-context-menu

They've been in Firefox for quite some time now. Coming soon to the other browsers.

Persist highlighted entity in scene graph when exiting + re-entering Editor

1. Click yellowSphere in the scene graph.
2. Press the Exit button.
3. Press the Enter button.
4. Notice the yellowSphere is no longer highlighted in the scene graph.

Related to #7, if we used (hidden) <input type="radio"> fields, this value would be easily persisted with the checked attribute.

bookmarlet -> bookmarklet