How to attach the Konvajs Transformer to multiple shapes without groupping them?

[enriqueerrando]

I'm working on a Konvajs based designer tool project where u'll be able to select multiple shapes with MouseClick+CntrlKey.

The idea is that once the first shape is selected, the Transformer is created an attached to it. If u're holding CntrlKey and click over other shapes the Transformer will be updated (with forceUpdate()) to include those too.

Thanks to this tutorial I've managed to attach the Transformer to a newly created temporary group where all shapes are being added one by one when they get selected. As soon as u clear the selection, the shapes are removed from that group.

The problem with adding shapes to a temporary group is that u cannot keep the shapes original z-index during the time they still in that group, so they all are moved to the top. That's why I'm trying to find a way to attach the Transformer to multiple shapes directly without adding them into a group.

Any help will be appreciated! Thanks in advance!

[lavrton]

At the current moment that is not possible. Probably we will have that soon.

As a workaround you can do this:

1. calculate bounding box of all selected shapes
2. create a transparent rectangle shape with that size/position.
3. attache transformer into it
4. On transform manually calculate transforming of all selected shapes

[lavrton]

@enriqueerrando ps. I am making a framework on top of Konva that may help build "designer tools" very fast. If you are interested to know the details and want to discuss it - please write to anton@lavrton.com

[enriqueerrando]

Wow!! That was fast!! Thanks for taking the time to help!

That seams interesting, but how could I base the step 4 individual shapes transformations on the step 2 transparent rectangle pivot (or center or anchor point, don't know the term for that)?

And I sure am interested on that framework! I'll get in touch with anton asap!

[enriqueerrando]

Do u think you could add this feature to konva or write a tutorial?

I think lots of people building designer tools would appreciate being able to attach the Transformer to a multiselection without having to group all selected shapes resulting in losing their original z-index ;)

Thanks for the hard work, Konva is awesome!

PS: And also thank you for the great documentation, way better than other competitors!

[enriqueerrando]

I was thinkiing, would it be possible to move all shapes back to their respective original zIndex after ungoupping them?

[lavrton]

Do u think you could add this feature to konva or write a tutorial?

Yes, I have plans to add such a feature. But I can't provide any time estimations.

Thanks for the hard work, Konva is awesome!

Thanks for your kind words! 👍

I was thinkiing, would it be possible to move all shapes back to their respective original zIndex after ungoupping them?

Yes, you can save original zIndex into a custom attribute and then just restore it:

shape.setAttr('originalZIndex', shape.zIndex());
// do some grouping/ungrouping work
// ...
// then:
shape.zIndex(shape.getAttr('originalZIndex'));

[enriqueerrando]

Thanks for the scheme! I'll try it today ;)

If I set a zIndex for a specific shape, will the rest rearrange themselves automatically or the Konva layer will end up with some duplicated zIndexes?

Thanks!

[enriqueerrando]

I've tested out mayself and YES, they rearrange themselves automatically. Cool! ;)

[enriqueerrando]

Hi lavrton,

Just wanted to let u know that I finally got this sorted out ;)

Thanks for the help and thanks for taking this into consideration for adding it as a future Konva feature ;)

[enriqueerrando]

I spoke too soon I'm afraid...

I sorted out the multiselection itself, which means that I've got the rectangle to scale up and down to cover the total area of the selected items whether you add items or remove them by right clicking while holding Ctrl key. That part works great.

I thought the next part where I had to 'transfer' the invisible rect transformation to the selected items would be as easy as doing some math and changing the item's offset one by one to match the equivalent invisible rect offset based on each item 00 initial coordinates... I'm not sure if that was well explained at all, I find it difficult to translate into english such complex things...

Long story short, I'm completly lost on this offset thing...

I've tryed it sooo hard and I still sooo lost... Could u help me out here? Please, just tell me (or point me in the right direction) how do I 'transfer' the rect transformation to the selected items to make seem that those items were the ones transformed as a group with the Transformer tool in the first place.

Thanks in advance...

[enriqueerrando]

Wow!!

I've might found the solution at this other Konva issue post from Oct 2019, which was requesting exactly the same as me: https://github.com/konvajs/konva/issues/767

There's a complete demo which I'm going to test first thing on monday: https://stackblitz.com/edit/konva-selection

[enriqueerrando]

Mmmm... that demo is using RxJS which I don't know at all... so back to square one... I'll try to replicate it with just JS...

[enriqueerrando]

Ok, I think I'm getting around this thing. I'm just slowing down a little to first understand how the transform event exactly works and each of its phases. And now I think I'll be able to solve it ;)

[enriqueerrando]

Finally!! Scaling is working!! Now I just need rotation ;)

BTW: No offset involved here (which I found extremely confusing)

[lavrton]

The work is in progress for this task. I hope to publish it this week.

[enriqueerrando]

WOW!!! Those are the best news of the Coronavirus era ;)

I was so frustrated with this that a week ago or so I even posted several job offers to solve this, but then I decided to continue trying myself (now that I remember I should go and cancel them all...).

Anyways, I'm sure I'm overcomplicating things, so I'll love to see your code and learn tons from it!!

Thanks a lot!! We really, really appreciate it!!!

[lavrton]

I am closing this issue for now as a duplicate of https://github.com/konvajs/konva/issues/767