# Node Editors : Enhancing Node Manipulation **URL:** \ **Category:** Feature requests\ **Tags:** nme, ui, nge\ **Created:** [May 15, 2024, 9:04am UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573 "2024-05-15T09:04:14Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [May 15, 2024, 9:04am UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/1 "2024-05-15T09:04:14Z")
Hello šŸ™‚ As a user (and lover) of Houdini, Iā€™m as well a lot into nodes. * * * Iā€™m trying to get my hand on the BabylonJS Nodes Editors ([NME](https://nodematerial-editor.babylonjs.com/) & [NGE](https://nge.babylonjs.com/)) but Iā€™m missing so much some simple features : (Sorry the screencast didā€™nt grab the mouse but on both videos Iā€™m dragging the center `st_noise` node) `Box selection` with left click (leaving the main panning to mouse wheel click): ![box](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/9/39d474830453e03cf6b4ba637b51540b4613d564.gif) `Move with Parents` (`SHIFT`) and `Move with Children` (`CTRL`) ![move](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/3/b3e73499c452904955da5a95ecc11bbe14d186ca.gif) * * * Who is in, for implementing these features ? ++ Tricotou ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [May 15, 2024, 11:04am UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/2 "2024-05-15T11:04:25Z")
Thatā€™s a ncie feature to have! you can add it as an issue on github. If anyone from the community wants to jump in and implement this, we will be very happy to merge it. ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [March 10, 2025, 9:37pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/3 "2025-03-10T21:37:52Z")
Hello ! After the recent work of @amoebachant with nodes, I (again) feel a huge need of improving the node manipulationā€¦ So, about 1 year later, here I am @RaananW : ![2025-03-10 22-13-27](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/9/49213cbd0e262938a8d69bd36cb935cf4b9bca46.gif) This edit is about : - Default box selection with left click (leaving wheel click for panning) - Moving a node holding SHIFT will bring the parent nodes - Moving a node holding ALT will bring the children nodes This is SO usefull when you are dealing with hundreds of nodes. When you just need a bit of space between two nodes, you can move them either to the right or to the left, without having to go through a complex selection process Tagging a few Houdini users šŸ„° : @MackeyK24 @Jozef_Plata @leota * * * Here is a PR draft : > > > This PR follows this topic from the forum : > https://forum.babylonjs.com/t/node-ā€¦editors-enhancing-node-manipulation/50573/3 > > \- Default box selection with left click (leaving wheel click for panning) > \- Moving a node holding SHIFT will bring the parent nodes > \- Moving a node holding ALT will bring the children nodes > > \`NB\` For some reason, some old code was not formatted ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [March 10, 2025, 9:45pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/4 "2025-03-10T21:45:07Z")
cc @PatrickRyan to validate šŸ™‚ ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [March 10, 2025, 9:46pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/5 "2025-03-10T21:46:07Z")
> [@Tricotou](#): > > Default box selection with left click (leaving wheel click for panning) Thatā€™s a no šŸ™‚ we cannot change something that is used since the beginning. (furthermore I have no wheel on my macbook :)) But you have my vote for the new addition! ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [March 10, 2025, 9:56pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/6 "2025-03-10T21:56:59Z")
> [@Deltakosh](#): > > Thatā€™s a no šŸ™‚ we cannot change something that is used since the beginning. (furthermore I have no wheel on my macbook :)) I have to say I was expecting this one šŸ˜‚ > [@Deltakosh](#): > > But you have my vote for the new addition! Cool ! ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [March 10, 2025, 9:59pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/7 "2025-03-10T21:59:12Z")
> [@Tricotou](#): > > I have to say I was expecting this one You know me too well lol! ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [March 10, 2025, 10:00pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/8 "2025-03-10T22:00:43Z")
I pushed to the PR a revert on the select part. Keeping only SHIFT & ALT : ![2025-03-10 22-50-30](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/7/5728dffa8317179eaefb2517400d2c49ee78c181.gif) ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [March 10, 2025, 10:08pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/9 "2025-03-10T22:08:14Z")
> [@Deltakosh](#): > > You know me too well lol! Iā€™m even thinking about a new alias command in my `.bashrc` : ```bash alias deltakoshPasContent='git reset --soft HEAD~1 && git add . && git commit -m "Revert after Deltakosh has reviewed my shit" && git push -f origin tricotou-dev' ``` šŸ¤£ ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [March 10, 2025, 10:19pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/10 "2025-03-10T22:19:35Z")
Ok I legitimately laughed:) ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [March 10, 2025, 10:19pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/11 "2025-03-10T22:19:57Z")
I have done the PR in draft mode for these reasons : - The recursive select of attached node might break in case of a loop. Are there some configurations in Node Editors where nodes might loop ? (I know in Houdini it exists) - In order to test locally, I use this : ```bash # npm run build:dev npm run serve -w @tools/babylon-server # Node Material Editor npm run serve -w @tools/node-editor # join http://localhost:1340/ # Node Geometry Editor npm run serve -w @tools/node-geometry-editor # join http://localhost:1343/ # Node Render Graph Editor npm run serve -w @tools/node-render-graph-editor # join http://localhost:1344/ ``` What should I use to test on Smart Filter Editor ? I would not find the config in `tsconfig.json` ---
**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\ **Post date:** [March 10, 2025, 10:37pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/12 "2025-03-10T22:37:32Z")
- nope no loop. - @amoebachant for SFE ---
**Author:** ![amoebachant](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/amoebachant/32/39450_2.png) [@amoebachant](https://forum.babylonjs.com/u/amoebachant)\ **Post date:** [March 11, 2025, 1:48am UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/13 "2025-03-11T01:48:09Z")
For SFE, you can have shared references but no loops since the connections are directional: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/3/a/3ac63d5c5f4bb6ab0a3c0307d3d6f29cfb1a0b0c.png) SFE is in a different repo: [GitHub - BabylonJS/SmartFilters](https://github.com/BabylonJS/SmartFilters) Youā€™ll find it in the packages/sfe and you can get started with running these in the root: `npm install` `npm run start:sfe` Thanks for helping to improve the usability of the nodes! ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [March 11, 2025, 9:22am UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/14 "2025-03-11T09:22:48Z")
> [@amoebachant](#): > > SFE is in a different repo: [GitHub - BabylonJS/SmartFilters](https://github.com/BabylonJS/SmartFilters) Wow ! Ok, I had missed that one. That wonā€™t be easy to test then, since your repo uses directly these `devDependencies` : ```auto "@babylonjs/core": "^7.35.2", "@babylonjs/shared-ui-components": "^7.35.2", ``` Have you ever tried to use `@babylonjs` from a snapshot, or a local build ? * * * > [@amoebachant](#): > > Thanks for helping to improve the usability of the nodes! Pleasure ! šŸ™‚ ---
**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\ **Post date:** [March 11, 2025, 1:28pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/15 "2025-03-11T13:28:12Z")
`npm link` can most certainly help here ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [March 11, 2025, 3:47pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/16 "2025-03-11T15:47:38Z")
> [@RaananW](#): > > npm link can most certainly help here I gave it a tryā€¦ I had a lot of issues šŸ™ˆ ^^ But at the end I could load locally the sfe with the new `@babylonjs/shared-ui-components` and it works smoothly šŸ™‚ ![2025-03-11 16-44-03](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/8/98b9b2f12a518949614fdddd192f9ee6ec6984e3.gif) Iā€™m setting the PR from draft to ready āœ… ---
**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\ **Post date:** [March 11, 2025, 5:22pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/17 "2025-03-11T17:22:30Z")
@Tricotou, I will admit, without undo I wouldnā€™t feel super confident with this interaction not because it doesnā€™t help for small graphs or limited nodes in a chain, but how it react with larger graphs with a long chain of nodes stretching across the graph. I see this as a power-user interaction and putting a power user interaction under a single modifier key means users will stumble on it and not always in a helpful way. I can see accidentally hitting shift for adding to a selection (I do it all the time because most of the other software I use picked shift to add to a selection) and then moving a large chain of nodes stretching across the graph and organized in frames. I started testing some of these scenarios with a random graph and found that if you ctrl+click two nodes not in the same chain and then use shift to move a chain of nodes, only the selected chain moves. Is this intended? Does it break what the feature was intending? If this is the desired interaction, we need to be very explicit to mention that the feature only works with one node at a time and that node is the one the cursor is currently pointed at. ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [March 11, 2025, 6:14pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/18 "2025-03-11T18:14:19Z")
Hello @PatrickRyan šŸ™‚ > [@PatrickRyan](#): > > I started testing some of these scenarios with a random graph and found that if you ctrl+click two nodes not in the same chain and then use shift to move a chain of nodes, only the selected chain moves. Is this intended? I would say yes. I donā€™t see any unintended behavior in your video : - Moving a node with other selected nodes is unchanged - Holding shift will bring the parents _of the dragged node_ - Holding alt will bring the children _of the dragged node_ Most of the time itā€™s to be used in a case where you have no selection I would say. Now if you have CTRL+CLICKED other nodes (of frame) to bring them into the selection, it seems normal that they move with the node you are dragging So : - Itā€™s intended not to extend the parent/children drag to ALL the selected nodes, but only the dragged one - Eventually what could be done is that when you hit Shift/Alt (Parent/Children) other selected nodes wouldnā€™t move. Itā€™s the behavior of Houdini by the way. But I think it could be confusing for some people as well. (That not all selected nodes move). ---
**Author:** ![PatrickRyan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/patrickryan/32/3417_2.png) [@PatrickRyan](https://forum.babylonjs.com/u/PatrickRyan)\ **Post date:** [March 12, 2025, 6:04pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/19 "2025-03-12T18:04:17Z")
> [@Tricotou](#): > > - Itā€™s intended not to extend the parent/children drag to ALL the selected nodes, but only the dragged one > - Eventually what could be done is that when you hit Shift/Alt (Parent/Children) other selected nodes wouldnā€™t move. Itā€™s the behavior of Houdini by the way. But I think it could be confusing for some people as well. (That not all selected nodes move). The more I think about this, the more it seems like we are missing the middle ground here. This feature is about empowering users to organize their graphs while cutting down on the click tax for users and also combating drag select problems on crowded graphs. I often do this kind of organization after I have iterated for a bit on the logic, and so I often run into drag select issues and needing to ctrl+click a lot. But I also typically work with larger graphs and make liberal use of teleport nodes. This means that there are times that a parent network is quite long and usually has been organized already. It also means that I may want to drag non-connected nodes due to teleports. It seems like there is still a need to grab a section of nodes that are all connected, but not all the way back to the beginning of the graph that could be tricky to drag select. It seems like the middle ground here would be that rather than shift to select all the way to the first parent and alt to select all the way to the last child that we allow a shift+click to select all nodes connected between the beginning and end. This would allow both directions (parent and child) selection with a single modifier, and also mirrors how many other applications pair shift and ctrl clicking. Shift being selected nodes between clicked items and ctrl being a single selection regardless of what else is selected. This would also allow a behavior like clicking a node, shift selecting a range of connected nodes, ctrl selecting a different node and then shift selected a different range of connected nodes. This would allow more complex selection grouping without needing to ctrl+click multiple nodes and keeping a mental note of which node needs to be the last clicked to drag parents or children depending on the modifier you press. Granted, this adds a click tax to require a second click if you want to drag all the way to the start or end, but I think the tradeoff of the added flexibility for targeted selection and the simplification of the mental model with one modifier key working for all sub-selection grouping is worth adding the one additional click tax to move an entire chain. I realize that this is the model for Houdini, but the number of Houdini users that come to our tools is likely far smaller than the number of Windows and Mac users who come to our tools which uses a similar selection interaction with shift and ctrl (cmd on Mac). If we were to rely on trained behaviors in our user base, I would always default to a system that is familiar to the largest number of users and potential users. ---
**Author:** ![Tricotou](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/tricotou/32/5844_2.png) [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\ **Post date:** [March 12, 2025, 7:18pm UTC](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573/20 "2025-03-12T19:18:44Z")
Hello @PatrickRyan , thanks for your detailed answer ! > [@PatrickRyan](#): > > The more I think about this, the more it seems like we are missing the middle ground here. Then, I must be missing something, sorryā€¦ Does the new feature removed something you had previously ? - If yes : Then Iā€™m sorry thatā€™s obviously not intended. Ready to fix šŸ™‚ - If no : Then I donā€™t get your point : we are just adding nice feature with two more keys, right ? Or maybe your point is about changing to other keys ? * * * About your point with Windows being CTRL & SHIFT (CTRL to select one by one, SHIFT to select from A to B), this I totaly get your point šŸ™‚ To my mind, the pros if this feature was exactly not having to ā€œunzoomā€ the node graph when working deep. Itā€™s more like ā€œLetā€™s grab this and move it to make spaceā€. To me all the point is about not having to unzoom and do a specific selection, before zooming againā€¦ [Next page](https://forum.babylonjs.com/t/node-editors-enhancing-node-manipulation/50573.md?page=2)