scene.debugLayer : Copy last command to Clipboard

[Tricotou]

Hello all,

When it comes to debuging a scene, using

scene.debugLayer.show();

Is very helpfull, for sure.

But something which would be nice would be a button on each param, which would copy the last command to the clipboard. For example :

Let’s say I just tweeked Environment param, in the Levels panel of a Material.
The arborescence in the debugLayer : Material --> Levels --> Environment
Is in fact quite different from the actual attribute path : material.environmentIntensity;

Something great would be to edit the way the UI is built by adding some copy buttons. And when you hit the copy button :

It would be sooooo great, when you are tunning stuffs, (particles settings, colors, levels, etc, etc…)

Who is in ?

++
Tricotou

[Cedric]

I love the idea! This makes total sense when developping on the playrgound and less when tweaking a scene in the sandbox. So, make it optional if you want to start a PR

[dennemark]

+1 !

Was also missing this recently! Naming is not always consistent with code, so this would be super beneficial!

[sebavan]

cc @Deltakosh

[Deltakosh]

Love it!! who wants to try to do a PR??

[Heaust-ops]

Can I give it a shot?

edit: I think shift chaining would be beaut as well

[Deltakosh]

of course!

[Heaust-ops]

ty, I’ll work on it : )

[j-te]

Please consider responsiveness, for the narrow-sized UI

Plus what would be good is zero-ing (or defaulting) the value with a right-click on the control.

[Tricotou]

Hello guys !

@Deltakosh

Love it!! who wants to try to do a PR??

Glad you love the idea !
I would very interested in starting my contribution to Babylon.JS with this idea, but maybe it’s a bit too early considering my knowledge of the repo which is quite new.

@Heaust-ops

I’ll work on it

Ah ! Did you already started ? Yesterday night I gave it a try. I would be interested in knowing from you guys, how far am I to being validated a PR. If you already worked on it no worries, I’ll consider my work as a training

---

Here is what I did so far :

• I forked + cloned
• I edited some files in order to achieve the new features
• Running npm run build:dev gives no error
• Running npm run serve -w @tools/babylon-server Allows me to try and it works great
• I pushed back to my branch tricotou-feature on my Babylon.js fork.

Here is a screenshot of the new inspector :

And here is a live screencast of the result :

---

About my work, here is what I did :
I edited some files such as
dev/sharedUiComponents/src/lines/sliderLineComponent.tsx to add the copy button :

<div className="copy hoverIcon" onClick={() => this.onCopyClick()} title="Copy to clipboard">
    <img src={copyIcon} alt="Copy" />
</div>

I have done it for Sliders, Checkboxes, Color3&4, Vector3, List … (5 files edited)
As well I had to edit some CSS in :
dev/inspector/src/components/actionTabs/actionTabs.scss
In order to include the structure change.

I inspired from the copy button which was already available for color pickers. (And that I modified by adding the command to the hex code retreived)

---

Now, what I would like to understand :

• Why is there no comments in the source file I’ve cloned ?
• Should I add some comments and push again ?
• What are exactly the next steps ? (From going to “it works on my machine” to having my code being released ? )

See you
++ Tricotou

[Heaust-ops]

Oh that’s awesome! I was planning to do it this weekend but it’s already looking so beaut, would be better if you went all the way : )

tysm for this amazing feature! : D

[Tricotou]

@Heaust-ops

Oh that’s awesome!

Thanks

@Deltakosh did you have a look at the video ? What do you think ?

Also, maybe I did not understand well the point about comments.
Having a look at the docs about contribution comments it seems that I need to comment indeed. I’m just surprised that the files I’ve worked on (example here) are absolutely free of any comments. Is it because there is some kind of CI/CD which gets rids of the comments at master merge, or something ? Should I comment my stuffs before doing a PR ?

++
Tricotou

[Deltakosh]

Man! This is HUGE!! Let me ping @PatrickRyan just for the UI aspect but man! I love it

Regarding comments: we are enforcing them on the main core library but tools (for now) are in a grace period where we do not yet enforce it. THAT BEING SAID, for new PR we expect comments

[Tricotou]

Thanks !
Ok for the comments, got it. I’ll comment, for sure

[Joe_Kerr]

@Tricotou may I be so bold and kindly ask for a feature request to the feature request

Copy last node to Console

Like you do in DevTools of Chrome (Firefox too?):

That would be cool in the Inspector.

[Tricotou]

@Joe_Kerr I’m not sure I understand what you mean by “copy last node” Can you develop the idea or eventually edit a screenshot of the inspector to show the concept ?

[Joe_Kerr]

Sure thing

Like so?

[Tricotou]

Ah yes, I see, nice idea !
I don’t know exactly the rules about global scope variables in BJS, so for now I extended the existing window interface, by adding a debugNode property :

declare global {
    interface Window {debugNode: any;}
}

And I’m overriding it in the onSelect of the treeItemComponents

Result is cool :

What do you think ?

++
Tricotou

[Joe_Kerr]

No way You did and already?

Voting for making today the “Tricotou-Inspector-Magic” day

[Tricotou]

@Joe_Kerr

You did and already?

Yes, it works like a charm

If you want to give it a try easily, I build it (and already used it, by the way )
You can get the inspector bundle HERE

---

By the way, about adding the debugNode triggered by click in the Scene Viewer… The commit is 10 lines ! I have seen much worse commits in my life, to be honest, ahah. The ratio Usefull / Lines of Codes is good, I’m happy

---

@Joe_Kerr

Voting for making today the “Tricotou-Inspector-Magic” day

Ahah, sure

++
Tricotou