# Node-red-autolayout-sidebar - adhere to grid

**URL:** <https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499>\
**Category:** General\
**Created:** [28 August 2024 07:09 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499 "2024-08-28T07:09:55Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [28 August 2024 07:09 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499/1 "2024-08-28T07:09:56Z")

</div>

Fantastic plugin to clean up flows - but it does not adhere to the grid (when it exists), I don't know how impossible it would be for the plugin to align according to the grid, overriding the 'margin', or perhaps the margin option should read the current grid setting, not sure how feasible this all can be or not ? @BartButenaers

Because it cleans up, but if it does not align, one would still be moving around the nodes manually.

Or perhaps let it execute the 'align to grid' function that is available ?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 August 2024 07:22 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499/2 "2024-08-28T07:22:40Z")

</div>

@bakman2  
Good remark!  
I thought we had provided a snap to grid feature, but it seems not...  
I am going to ask the opinion of @gregorius, since he is the mastermind behind the routing algorithms. Perhaps he has an idea already about the possibilities.

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [28 August 2024 07:49 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499/3 "2024-08-28T07:49:36Z")

</div>

> [@BartButenaers](#):
>
> I am going to ask the opinion of @gregorius

My opinion is that it's not "snap to grid" but "auto layout" 😉 Personally I see this being beyond the scope of the node.

Especially since there is grid size that can vary:

![Screenshot 2024-08-28 at 09.38.49](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/00461a760b0483759414bc4fd4224a22bd0afe1d.png)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [28 August 2024 07:51 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499/4 "2024-08-28T07:51:36Z")

</div>

That what i meant:

> or perhaps the margin option should read the current grid setting

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [28 August 2024 07:59 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499/5 "2024-08-28T07:59:35Z")

</div>

> [@bakman2](#):
>
> or perhaps the margin option should read the current grid setting

Ah sorry, sure it would be possible but there several algorithms:

![Screenshot 2024-08-28 at 09.55.32](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/9/29ed79d6663cb162e561fb349e65d5ebe485b53e.png)

I use box for certain things and there I could set the spacing. But I need to know which options for each algorithm should be set using the grid spacing.

The alternative is to set this once for each algorithm in Node-RED:

 ![Screenshot 2024-08-28 at 09.57.24](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/2/6292f2121641d6eb4e17bc5ac1b1e1f41e7ddf09.png)

So you can set it once and then use it everywhere.

So the effort for the developers of the plugin to make this automatic can be worked-around by the user of the plugin doing this themselves!

EDIT: this is also the reason why each algorithm has a JSON object as configuration: each algorithm has different setup so creating a UI for each would be too painful - especially since auto layout does not seem that popular.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 August 2024 09:36 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499/6 "2024-08-28T09:36:40Z")

</div>

> [@gregorius](#):
>
> Especially since there is grid size that can vary:

Ah yes true. Good point...  
Could we perhaps allow variables to be used in the json's, that you e.g. can specify:

```auto
  algorithm_grid_size: FLOW_EDITOR_GRID_SIZE

```

And that we use this as the default value in our html file. And automatically replace this variable by the current grid size of the flow editor? Just thinking out loud, although perhaps not possible for all algorithms...

> [@gregorius](#):
>
> especially since auto layout does not seem that popular

Yes very weird. Had expected completely the opposite. That we would have received a bunch of feedback, which allowed us to select the most popular algorithm and create a simple dummy-proof ui for that one. But that hasn't been the case at all...

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [28 August 2024 10:11 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499/7 "2024-08-28T10:11:56Z")

</div>

> [@BartButenaers](#):
>
> `algorithm_grid_size: FLOW_EDITOR_GRID_SIZE`

if so, then I would use mustache syntax to make it all consist:

`algorithm_grid_size: {{{ FLOW_EDITOR_GRID_SIZE }}}`

Or better something like JSONata ...

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [28 August 2024 11:38 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499/8 "2024-08-28T11:38:15Z")

</div>

My first idea to propose here was Mustache, but then I thought: most probably we will never add a second variable, if there is no interest in this sidebar.

Yes Jsonata might also be possible. But that certainly won't fit into my calendar...

---

<div class="post-metadata">

**Author:** ![gregorius](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gregorius/32/73816_2.png) [@gregorius](https://discourse.nodered.org/u/gregorius)\
**Post date:** [28 August 2024 11:55 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499/9 "2024-08-28T11:55:08Z")

</div>

Your calendar needs to get bigger! 😉

Never believe it’s just one variable … my learning playing this game!

Edit: Need --\> Never

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [26 November 2024 11:55 UTC](https://discourse.nodered.org/t/node-red-autolayout-sidebar-adhere-to-grid/90499/10 "2024-11-26T11:55:24Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.