Add scene preview panel

[DaelonSuzuka]

This adds a panel to the activity bar that shows a tree preview of the currently selected scene file.

Code_qnnZVaqaQS.mp4

Things that need fixing in this PR:

• find a Godot icon svg for the activity bar button
• there's a minor bug where it throws an error popup when switching to some non-code editors (specifically the "running extensions" page)
• don't clear the preview when selecting a non-scene file. this will allow looking at the structure of a scene while writing code in a gdscript file

future improvements (not this PR):
j/k these are all in this PR now:

• add context menu to the treeitems to allow things like copying the relative NodePath of given item
• when clicking on treeitems, scroll to/display the associated section of the scene file
• button to allow manually pinning the displayed scene
• parse other data from the scene file and display more things in the preview:
  • attached scripts
  • nodes marked as Unique (for name copying purposes)
  • collapsible section for external resources and/or subresources

[atirut-w]

I think this should be in the document outline but alas, guess the doc outline is an LSP thing.

[DaelonSuzuka]

I think this should be in the document outline but alas, guess the doc outline is an LSP thing.

I don't understand how the two are related at all.

[atirut-w]

I don't understand how the two are related at all.

I am talking about the outline section under the document tab. Sounds like a good place to put the scene tree preview in.

[DaelonSuzuka]

Oh, in the Explorer section in the Primary Sidebar? I interpreted it as the documentation pages that are provided by the LSP.

Yeah, this is basically a document outline for a scene file, so I can see the argument for putting it there. Personally, that's a useless location since if I want to see files, I only want to see files. I always hide Open Editors, Timeline, Outline, anything that's in that category except the file Explorer.

Luckily, you can just drag any sidebar containers to any section you want, so it would be one mouseclick to move it there if that's what you like.

In addition to "because I don't want it there" (which I will admit is not a great reason!), I also think the default location should be its own category to improve user discoverability. If the default location for this thing is minimized at the bottom of the Explorer tab, how many people will even notice that it was added? Adding a Godot category provides an immediately visible, obvious default location for this and other features that I hope I can work on soon.

By the way, screenshots of the new Godot category icon:

[DaelonSuzuka]

I figured the easiest way to explain the new features was with a series of short video clips:

Scene Preview Pinning

Clicking the pushpin button locks the currently displayed scene. This makes it easier to use the Scene Preview as a reference while working on scripts.

Code_2Yfuw5hw7M.mp4

Switch between a scene and a related script

In C/C++, pressing alt+o will switch from foo.c to foo.h and vice-versa. I replicated the same functionality between a script and a related scene.

Code_nmU19QHW56.mp4

Display Scene Preview when viewing related script

Using the same mechanism as above, the Scene Preview will show you the scene file that matches the script you have open.

Code_wMmez2YRHg.mp4

Tooltips with syntax highlighting

Hovering over a node in the scene tree will now show you a tooltip of that node's entire definition.

Code_I34p3MCo85.mp4

Nodes in the Scene Preview now have several context menu options:

Right Click > Copy Node Path

This menu option will copy the path of the selected node, relative to the root of the current scene. If the node has been marked as Unique, the unique node path will be copied instead (%NodeName).

Code_uwUA82vPpI.mp4

Right Click > Go to Definition

This menu option will jump to and highlight the definition of the selected node.

Code_3VBZ4qcNmy.mp4

Right Click > Open Scene

This menu option is only available on PackedScene nodes, aka instances of other scenes. Selecting this will open the scene file that the selected node is an instance of.

Code_SORO1iHtSx.mp4

[DaelonSuzuka]

I will probably add a couple more settings, to let the user tweak some of these advanced behaviors.

In the same vein, it's probably appropriate to add some commands to allow manually invoking features.

I very desperately wanted to put icons on the far right of each tree item to indicate it's visibility, whether it has a script attached, if it's been marked unique, etc etc. For some blasted reason, this appears to be literally impossible with the current vscode TreeView API. It's possible to add buttons that are hidden until you move your mouse over them, but there's no way to get permanently visible icons like in the Godot Editor's Scene Tree.

Something like this is probably the best I'll be able to do:

[DaelonSuzuka]

I added a configuration that will let the user pick how aggressively the Scene Preview will search for a "related scene" when opening a script. The options are:

• anyFolder: Attempt to preview a related scene from anywhere in the workspace.
• sameFolder: Attempt to preview a related scene from the same folder.
• off: Do not attempt to preview a related scene.

The default setting is sameFolder, because I figure that will be helpful and relatively intuitive(aka, not magic), and has a limited chance of grabbing a totally unrelated scene.

I also figured out a relatively clean way to show more information about a given Node. Right now it's just whether there's a script attached and if the node is Unique, but I can add more later if something seems useful.

And, since it can show that there's a script attached, why not let you jump directly to that script?

Code_6poGA69OIO.mp4

[DaelonSuzuka]

I think I'm done with this for now.

[DaelonSuzuka]

I want it on the record that I did spend several hours trying to convince Prettier to format to our style, and all I accomplished was getting it to stop working entirely.

[Calinou]

I want it on the record that I did spend several hours trying to convince Prettier to format to our style, and all I accomplished was getting it to stop working entirely.

I'm OK with changing the formatting to be more standard across what other popular VS Code extensions are doing. This should be done in a future PR though (and after all prominent PRs are merged to avoid conflicts).

[DaelonSuzuka]

I'm OK with changing the formatting to be more standard across what other popular VS Code extensions are doing. This should be done in a future PR though (and after all prominent PRs are merged to avoid conflicts).

Whatever style choice is fine with me, I just want the freaking tools to do what they're supposed to. I've used clang-format on C code for like 8 years now, and haven't had 1/100th the issues that Prettier has given me.

[Calinou]

I've used clang-format on C code for like 8 years now, and haven't had 1/100th the issues that Prettier has given me.

This is one of the reasons I prefer using just ESLint instead of ESLint + Prettier. Less tools means less moving parts that can potentially break 🙂

The downside is that formatting is not as strict when using just ESLint.

[DaelonSuzuka]

Honestly, the entire type/javascript experience has been right in line with trying to make Prettier behave. There's some stuff that I like, but boy am I glad I'm not a web developer...

[DaelonSuzuka]

@Calinou Are there actually still changes requested? I'm pretty sure I resolved everything that I saw.

[Nukiloco]

What is the current progress on this PR? This seems like a great feature for Godot vscode!
Also does this PR also do the inspector, or is this just only for the scene?

[DaelonSuzuka]

What is the current progress on this PR? This seems like a great feature for Godot vscode!

@Nukiloco Sorry for the radio silence here. I think everybody's just busy, either with Godot 4 Beta activity or other life stuff. I really appreciate your interest here, and hope to get the active PRs cleaned up soon.

Also does this PR also do the inspector, or is this just only for the scene?

Can you rephrase the question here? I'm not sure what you mean by "inspector".

[atirut-w]

Can you rephrase the question here? I'm not sure what you mean by "inspector".

I think he meant node inspectors. You know, where you changer node properties like position, exported var, etc.?

[Calinou]

Thanks!

[AlfishSoftware]

I very desperately wanted to put icons on the far right of each tree item to indicate it's visibility, whether it has a script attached, if it's been marked unique, etc etc.

Have you tried using emoji? If text is supported, it might work.
For example, you could use "📜 Node" instead of "S | Node".
Some suggestions:

• Script attached: 📜 = scroll
• Unique path: 🏷️ = label
• Locked: 🔒 = lock
• Scene instance: 🎬 = clapper
• Invisible: 👁️ = eye (other options: 💭 = thought_balloon; 👻 = ghost)

[DaelonSuzuka]

@AlfishSoftware

I did use emojis before in an earlier version, but I also need (some of) them to be clickable buttons. I may come back and revise this to split some tags into emojis and some into buttons.