# V3 Design Consideration: Wire "Jumps"

**URL:** <https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825>\
**Category:** Feature Requests\
**Created:** [5 February 2022 12:03 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825 "2022-02-05T12:03:10Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 February 2022 12:03 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/1 "2022-02-05T12:03:11Z")

</div>

Hi, I'd like to offer a thought for v3 or beyond. One of the things that can be visually confusing in Node-RED complex flows is where wires cross each other.

May diagramming tools use the engineering drawing style "jump" where the wire visually has a small loop as in this example from Microsoft Visio.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/781a2eadf8ebf357de0c59fa51c9385c32c6c95b.png)

The wire with the loop on it is generally the one with the highest Z value.

---

<div class="post-metadata">

**Author:** ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)\
**Post date:** [5 February 2022 12:19 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/2 "2022-02-05T12:19:34Z")

</div>

This just made me think of flows in a 3 dimensional space 🤯

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [5 February 2022 12:27 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/3 "2022-02-05T12:27:43Z")

</div>

Hi @TotallyInformation

The challenge with this idea is the cost of implementation. We would have to calculate the intersection point of every wire whenever anything moved inorder to add this level of detail.

As it stands, we want to reduce the cost of rendering the flows, not increase it 😉

The wires do have a white border which helps to some degree to show where they overlap. We could certainly explore tweaks to that to make it more apparent.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 February 2022 13:07 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/4 "2022-02-05T13:07:08Z")

</div>

> [@knolleary](#):
>
> The wires do have a white border which helps to some degree to show where they overlap. We could certainly explore tweaks to that to make it more apparent.

OK, thanks Nick, I can see the issue. Yes, a small tweak to make the crossover a little more visible would probably be as good anyway.

---

<div class="post-metadata">

**Author:** ![drmibell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmibell/32/8424_2.png) [@drmibell](https://discourse.nodered.org/u/drmibell)\
**Post date:** [5 February 2022 16:09 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/5 "2022-02-05T16:09:42Z")

</div>

> [@TotallyInformation](#):
>
> diagramming tools use the engineering drawing style "jump"

Some time in the last 20 years, while I wasn't looking, the [common practice](https://en.wikipedia.org/wiki/Circuit_diagram) for this seems to have changed. Generally, wires that cross are assumed not to be connected unless there is a small "dot" or "blob" at the intersection. This probably happened, as @knolleary implies, to reduce the burden on circuit drawing and simulation software.

A good way to look at this might be that such crossings are just artifacts of how the editor displays the flow. They do not create any functionality, and so probably should not consume any resources in the editor or runtime. If old-timers like me are bothered by it, we can always re-draw the flow. The "younger generation" probably grew up with the new style and have no trouble.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 February 2022 16:09 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/6 "2022-02-05T16:09:45Z")

</div>

Maybe if the opacity of the border wasn’t quite 100% then they would “dim” as they crossed ? Bit line roads under a bridge on a map

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [5 February 2022 16:59 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/7 "2022-02-05T16:59:33Z")

</div>

This is what the wires look like today where they cross:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/b/cb70b763248a62bee92eaa447436d07c0e316653.png)

The opacity of the border is set to 40%

So rather than reduce the opacity, one option would be to increase it:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/bee82236349e7b6354af2d73201da06ff48fe086.png)

Here's a side-by-side comparison:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/a/faa4f91fc07aa895ddc74ca6da4259c5a6387f71.png)

Just keep in mind these are zoomed in views which over exaggerates the effect.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 February 2022 17:22 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/8 "2022-02-05T17:22:36Z")

</div>

Nice. Yes. Presume that could be part of the theme so users could tweak anyway ?

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 February 2022 21:30 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/9 "2022-02-05T21:30:10Z")

</div>

> [@drmibell](#):
>
> last 20 years

Ah, well I learned engineering drawing in the 1970's and it was all done by hand 👴 😀

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [5 February 2022 21:32 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/10 "2022-02-05T21:32:41Z")

</div>

I definitely think that increasing the opacity would help at cross-overs as long as it doesn't mess up other parts of the flow visual.

This got more of a debate going than I was anticipating 😀

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [5 February 2022 23:10 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/11 "2022-02-05T23:10:44Z")

</div>

It's OK on a white background, but would not look good in a 'group' with a coloured background... unless of course the border was colour keyed to the background.

---

<div class="post-metadata">

**Author:** ![drmibell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmibell/32/8424_2.png) [@drmibell](https://discourse.nodered.org/u/drmibell)\
**Post date:** [5 February 2022 23:39 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/12 "2022-02-05T23:39:56Z")

</div>

> [@TotallyInformation](#):
>
> all done by hand

Same here, but in the '60s for me.

---

<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:** [6 April 2022 23:39 UTC](https://discourse.nodered.org/t/v3-design-consideration-wire-jumps/57825/13 "2022-04-06T23:39:56Z")

</div>

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