How to add key events to vueflow?

[AlexanderYW]

When reading the docs i can't find anything about it, so if i overlooked something please let me know :)

I'm trying to add @keyup.space or @keydown.space to vueflow element, it's not triggede when pressing space while focusing vueflow element.

Am i doing something wrong, or is this not possible yet? :)

[bcakmakoglu]

The Vue Flow element is just a regular div so technically it should work but you'd probably be better of just listening to the global key events instead of trying to add them to that specific element, which would force you to have to focus the element before being able to send the event.

What exactly is your use or goal? Maybe there's another way :)

[AlexanderYW]

Yes i would assume that as well, but i can not make that work. Regarding the global key that was my thought to try as well :)

My goal is to do a key binding like ctrl + g to group selected elements :)

[AlexanderYW]

It's the parentNode childNode concept i'm going to use for this

I also have to figure out a way to calculate the width and position of parentNode so it's the content (childNodes) that decides the size of it :)

Let me know if this is something you're going to work on soon, then I will skip trying to hack it :D

[bcakmakoglu]

@AlexanderYW
Sorry I missed the last message.
Have you tried the expandParent: true option? You can play around with it here: https://vueflow.dev/examples/nodes/nesting.html

It will expand the parent nodes dimensions to fit all the children.
Caveat is that there is no option to collapse a node again, that's something you'd have to implement yourself currently.

And to your first question: Here's an example of just binding it globally