Mouse selecting and dragging Items In A Group - Want to move entire group as a whole.

[Jonnie]

Hi - just looking for some helpful direction from more experienced PaperJs'ers.

I am writing a legend for a map, the idea is to use small SVG icons with helpful descriptive text to explain what the same icon drawn over the main map
means.

Visually legend consists of a group containing a backdrop rectangle (cosmetic) inside which the SVG icons icons are rendered.

At the coding level this is achieved by creating a group, first adding the backdrop rectangle as a child of the group and then adding the icons (images) as children of the same group.

The result looks fine but I would like to be able to click with my mouse anywhere within the group and drag the entire set to a new location.

When I do this only one element moves with the mouse, I can click so as to move the rectangle or individual icons but what I do not achieve is
the whole group moving together.

As a test I added code to move the group

( myGroup.position += new Point(100, 50); )

and this worked fine verifying the PaperJS documentation.

It seems to me that I need to be able to arrange things so that my "mouse select and move" tool spots children that are members of a specified group and applies the move to the owning group.

OR

I wonder does paperJS supply functionality to do directly achieve my goal? Is it possible to "lock" a group so that picking any item and then mouse dragging moves the entire group, effectively some option to indicate within a particular group that a hit on any child member of that group should be considered a hit on the parent group.

Given the nature of what a group is this would seem to me to be a sensible option to have?

As a general question I am interested in whether any items can be "set" so that they are not selectable allowing an alternative way of filtering items in mouse event hits.

Thanks

Jonnie



 

[Peter Bengtsson]

There are several ways to appratch this, right now I can think of twwo ways that could work.

1. Use the hitTest option to only select groups, http://paperjs.org/reference/item/#hittest-point

2. Insted of moving the item, check it's parent (or parents parent etc.) untill you find a group item, then move that group item.

/ Peter

[Jonnie]

Thanks for the reply Peter.

Since writing the post I coded up option 2 with the caveat that the group must have a particular ID since I do not want this behaviour
for all groups only a particular known instance of a group and I want the pick tool to still be able to pick elements of any class not associated
with this special group.

It seems to work as expected.

I suppose in a sense I was thinking of picking in an "element orientated way" so that members of a group could defer their hits to the owning group by being
marked as such. I suppose I am coming at this at an instance orientated rather than class orientated view point.

Thanks
Jon