onMouseEnter/-Leave Events

[nkappler]

Sure, so I have a KonvaJS dashboard; now until i found this context menu library, i used to build my own menus to allow the user to interact with the dashboard; adding elements, modifying or deleting.

now the cool thing about mouseenter events is mainly with delete functionalities; if a user opened a context-menu and hovers over the delete item, i highlight and blink certain elements to show what will get deleted if the selected item is deleted, now once its clicked, a popup shows to confirm the deletion, but that blinking animation prior to deleting is what i had using my manual menus and its what i am trying to achieve here.

I didnt get the chance to go deep in the ctxmenu code, but I would be happy to open a PR if i get the chance to review it.

Thanks :)

Originally posted by @max-rh in #44 (comment)

[nkappler]

@max-rh I've implemented this feature in a way that you can provide event handlers for every possible event.
This should make the library very customizable.

Please see test/demo.ts for an example on how this feature will work and let me know if you have any remarks.

I still need to update the documentation, but you can expect a new release soon 😊

[max-rh]

@nkappler Tested and absolutely amazing; exactly what I need.

And I liked that you made the actual item accessible like the action attribute; I wasn't planning on accessing it with the events; my events manipulate other elements in the website but now I am gonna actually style the hovered over elements.

Thanks 👍

[nkappler]

Glad you like it.
It was a very simple change in fact, I only need to pass through the listener to the HTMLElement.addEventListener API 😊

During testing, I've noticed that the onMouseLeave event is not triggered, when you click on an action item and the menu is closed.
Whilst this is probably not relevant for the menu items, it means that your hover styles won't be removed from external elements, unless you do so in an onClick listener, so that's a thing to keep in mind... 🤓

[max-rh]

Ah, good to know.
Didn't notice that in my case, since I handle the logic in the click callback, but yeah need to keep that in mind.

Thanks