Multi-select layers and move together

[saif-ellafi]

The time has come :D

I will be looking into implementing this, hopefully with just existing API.

The first goal, since "rectangular selection" is not a thing at all:

1. Implement a state property: bool isMultiSelecting
2. When entering this state, any layer selection will "accumulate" (i.e. do NOT de-select previous layer)
3. When moving any of the selected layers, all the selected layers move together relative to their starting point (scaling is individual/doesn't matter)
4. (Bonus) Add an Interaction button "Group" -> All layers will save a randomId in their meta. When selecting any layer that has this groupId, ALL layers with matching groupId will ALSO be selected. An Interaction button "Ungroup" will remove the layer from the group.

Wish me luck!!!

[hm21]

Good luck @saif-ellafi!

I think there will be maybe a few challenges, but I’m excited to see your results cuz that function sounds really helpful :)

[saif-ellafi]

Yes I haven't started but I think this will be difficult without changes in PIE, probably the first blocker will be to allow multiple active layer IDs, no?

[hm21]

I guess technically it would be possible to do it externally, but it would definitely be much easier to change the logic inside the PIE to handle multiple selected layers.

Btw when multiple layers are selected, how will you visually show that to the user so they can see which layers are selected? Maybe that part could also be challenging, depending on how you want to implement it.

[saif-ellafi]

I was simply thinking that all of them appear selected with the current UI. Moving ANY of the selected layers would move all of them

[hm21]

Got it, then it shouldn’t be a big problem.
Btw if you need help with any part of it, just let me know. Even though I’m quite busy with other work projects, I might still find a bit of time to support you.

[saif-ellafi]

@hm21 - I am testing beta branch on Mobile, but it normally moves with tap+drag, for a moment I thought tap+drag would do multiple selection, and to do double pinch to move, is this expected or not working as expected?

[saif-ellafi]

PR here: #592

[saif-ellafi]

Some feedback from the first testing round:

• On android Ctrl-Click/tap isn't working as expected <<< I think users using keyboards/chromebooks on Android. Is there any flag about PhysicalKeyboard events being triggered only on Desktop devices?
• Long-press on Layer won't select it if it is the first layer to be selected <<< I don't know if this is a bug, or if it would be good to fix it. But to think about at least, long-press works to multi-select but starting from the second layer

Glad that no "major" problems were found (this is a very small test, 1-3 users). Consider this was tested from a branch combining my both last PRs.

[hm21]

1. There actually shouldn’t be a flag, or at least I don’t remember adding one, so at the moment I’m not sure why it’s detecting it incorrectly.

2. In my case, selection worked with a long press, even if it was just one layer. But what I noticed is that when we add a new layer, it’s kind of “invisibly” selected, and a long press won’t select that layer until you tap somewhere else on the screen first.

[saif-ellafi]

Food for future thought:

Some creative playing around, by just showing the interaction buttons that actually have a group effect, and by also showing them in only either the first or the last of the selected layers, also based on whether they have been grouped or not (i.e. delete multi-layers works when a multi-selection has been grouped).

and lock group

to think:

• could the selection stroke have transparency to lighten the view?
• could layers when grouped show only one big rectangle among them?

[hm21]

I'm not sure, but I think the selection stroke should work with transparency. However, I’ve never tried adding a color with opacity to the LayerInteractionStyle so not sure.

Showing a big rectangle around grouped layers would definitely be great, and I’ll keep it in mind. However, implementing it could be a bit tricky since it requires calculating which layers are grouped, where they are, their size and rotation. Then we’d need to disable the overlay for all of them except one.