# Contextmenu location

**URL:** <https://discourse.nodered.org/t/contextmenu-location/22780>\
**Category:** Developing Nodes\
**Created:** [7 March 2020 22:46 UTC](https://discourse.nodered.org/t/contextmenu-location/22780 "2020-03-07T22:46:23Z")\
**Posts on this page:** 18\
**Page:** 4

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [1 May 2020 15:09 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/62 "2020-05-01T15:09:16Z")

</div>

Oh of course. But the values for bbox will be in which order then?

---

<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:** [1 May 2020 15:12 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/63 "2020-05-01T15:12:28Z")

</div>

left bottom right top (where 0 0 is top left ) - as those are the two most used corners to attach a sub menu to...

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [1 May 2020 15:23 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/64 "2020-05-01T15:23:50Z")

</div>

> [@dceejay](#):
>
> left bottom right top

So the `element.getBoundingClientRect()` then and not the ` element.getBBox()`

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

---

<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:** [1 May 2020 16:19 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/65 "2020-05-01T16:19:56Z")

</div>

Well for the button you want to attach to the corners of that and not the text inside

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [1 May 2020 18:18 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/66 "2020-05-01T18:18:46Z")

</div>

Dave, are you referring to the context menu location here?

Typically (at least in windows, chrome & other systems that support context menus) context menus popup with the TOP LEFT corner aligned to the mouse coordinates (i.e. aligning top left to pageX, pageY).

that said, the bounding box info is very useful if (for example) you don't like that behaviour (or want a emulate a drop-down/menu off a button type behaviour)

(Apologies if I am misunderstanding your point)

---

<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:** [1 May 2020 18:44 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/67 "2020-05-01T18:44:56Z")

</div>

See this discussion / wrinkle [Contextmenu location](https://discourse.nodered.org/t/contextmenu-location/22780/40)  
If you click a button you want the submenu tree to grow from that. Not some random point you click on.

---

<div class="post-metadata">

**Author:** ![greenembrace](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/greenembrace/32/42414_2.png) [@greenembrace](https://discourse.nodered.org/u/greenembrace)\
**Post date:** [1 May 2020 23:09 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/68 "2020-05-01T23:09:04Z")

</div>

Hi @Steve-Mcl, sorry different time zones. Yes click does work, but I was having difficulties with it (3-5 clicks before recognition) on a 400mm screen I use as my may house control console. So I thought if I also used touchstart I might increase my hit rate. It's my partner who gets more frustrated than me... i'm trying not to put them off using the system. I will try increasing the target area.

thanks

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [1 May 2020 23:10 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/69 "2020-05-01T23:10:43Z")

</div>

Understand. @BartButenaers or I will fix the lack of coordinates in touch events before next release.

---

<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:** [2 May 2020 05:44 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/70 "2020-05-02T05:44:54Z")

</div>

I will do that very soon. Just need to finish a couple of things for other users.

---

<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:** [14 June 2020 20:44 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/71 "2020-06-14T20:44:01Z")

</div>

> [@Steve-Mcl](#):
>
> No need for any legacy flags as far as I can see Bart

Hey Steve (@Steve-Mcl),  
Finally a little bit of time to fix this. But ...  
The output message of the button widget and state-trail are currently nicely aligned, but our SVG node output message (when a shape is being clicked) looks completely different:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/5/6540dc6296ed79fe313155c31ea5021a65c25fc5.png)

Not sure how I can align our output message to both other nodes, without breaking existing flows?  
All suggestions are welcome!

---

<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:** [14 June 2020 21:10 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/72 "2020-06-14T21:10:08Z")

</div>

Just add them as well - your existing use will (or should) just ignore the "new" high level event property.  
(and you can always migrate/deprecate over time)

---

<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:** [14 June 2020 21:28 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/73 "2020-06-14T21:28:42Z")

</div>

> [@dceejay](#):
>
> deprecate over time

Thanks Dave!  
Indeed then I will add to the docs that this field is obsolete, and will be removed in the future ...

---

<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:** [21 June 2020 20:34 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/74 "2020-06-21T20:34:35Z")

</div>

Finally found some time to implement this on our "panzoom" branch on Github (which will become our version 2.0). This is the output message when an SVG element is clicked:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/4/54a950088020d0e05969bcf641d922bade0f0b18.png)

As you can see we have an _ **extra** _ set of coordinates (SvgX and SvgY), which are not available in the other 2 nodes above. These represent the coordinates inside the SVG coordinate system.

Wanted to solve this without _ **breaking change** _, but unfortunately we already used the `msg.event` field in the past to send the type of event (e.g. "click"). Cannot solve that. And since we have now a breaking change anyway, I have also remove our `msg.position` and `msg.coordinates` also. Have added this to our 2.0 migration guide:

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

---

<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:** [21 June 2020 21:20 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/75 "2020-06-21T21:20:32Z")

</div>

I have now also added a drawing to the readme page to explain the different coordinate systems:

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

Because I'm afraid that otherwise users might get lost ...

---

<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:** [4 July 2020 21:38 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/76 "2020-07-04T21:38:12Z")

</div>

I'm almost finished with the 2.0.0 release of the SVG node, but now I need to have a look at the contextmenu node (because they are quite related to each other).

Currently there are two ways to specify the location in the contextmenu node:

1. Fixed coordinates:

2. Via the input message:

But SVG node 2.0.0 will send the coordinates in `msg.event.x` and `msg.event.y`. To avoid everybody having to add Change nodes (between the SVG and Contextmenu node), the input x and y message fields should be customizable in the ContextMenu node.

Now I'm wondering whether I should remove the 'position' dropdown in the ContextMenu node and instead use two typedInput fields (for x and y), where you can select type 'msg' or 'number' (the latter one is for fixed coordinates):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/449f592b57b19b1ab9f9f0c7d43e43110e1c24ed.png)

Does this make sense?

---

<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:** [4 July 2020 21:54 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/77 "2020-07-04T21:54:57Z")

</div>

Hey Bart, will the `event.bbox` array remain unchanged?

---

<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:** [4 July 2020 22:00 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/78 "2020-07-04T22:00:50Z")

</div>

Yes the SVG node output message will contain the event (incl. bbox) like we discussed above. The only problem is that the SVG node 2.0.0 sends all that info in `msg.event` (instead of `msg.position`), but currently the ContextMenu node still expects the data to arrive in the input message field `msg.position`.

So I don't want the ContextMenu node to keep getting his data hardcoded from `msg.position`. Would like that you can specify in the contextmenu node in which msg field the data will arrive...

---

<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:** [2 September 2020 22:05 UTC](https://discourse.nodered.org/t/contextmenu-location/22780/79 "2020-09-02T22:05:15Z")

</div>

Closed on 2 September 2020 22:05 UTC

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

[Previous page](https://discourse.nodered.org/t/contextmenu-location/22780.md?page=3)