Search code examples
javascripteventstriggerskineticjs

Looking for details about event triggering on KineticJS with groups and its children

I am planning to create some elements in my application which can be used as a group. So for example I could create a circle a triangle and a square and group them. So I could drag and drop the group and etc. Also I want to sometimes be able to edit the group elementts individually.

For this I can just call the setDraggable(false) for the group and setDraggable(true) for all children and edit them individually. When I wish to treat them as a group I can call setDraggable(true) for the group shape and setDraggable(false) for all children of the group.

I think that this part works well. The problem is the event handling. I tried to search about it but I didn't found anything talking about the behavior of the events on grouped objects. As far as I noticed the events from the group children overrides the event call from the group. For example if an element E1 from the group has a "onclick" event and the group object has a "onclick" event too when I click over E1 the only event that will be triggered is the event from E1 object.

So.... TL;DR: Can someone explain how the event triggering works on KineticJS with groups, children and nested groups?

EDIT:

  • http*//jsfiddle*net/Kaze_Senshi/GKFrK/ A little project that I made to test KineticJS's group behavior. In the start there is one group with rects and one group with the Circles, you can join the groups and move each element from the square group individually clicking in the buttons at the left of the scree. It is a pretty simple page with ugly code just for test purposes.

  • https://github.com/wfaria/sketchProject/blob/development/tests/interfaceResourceTest.html In the end I want to manipulate the group object from my project with KineticJS, because of this I am doing these questions, I think that you can understand how it works looking this unitary test page. You can find more details in the src/Model/InterfaceResource.js

Solution

  • If you have a group and its children and want to turn events on and off you can just do this:

     group.setListening(false); // the group will not listen for events

 groupChild.setListening(true); // the child is listening for any defined events on the child.

    And to help point you in the right direction, the shape events are fired with a priority over group events, as you have noticed, if both have an onclick then you have to add some logic so that they don't interfere with one another. A simple way to do that is to set certain flags which turn events on an off based on certain conditions.