Fabric.js: Set activeGroup not working with zoom level

[blobinabottle]

Version

1.7.1 (in the jsfiddle) but same in the 1.7.6

Test Case

https://jsfiddle.net/x25d4wss/8/

Steps to reproduce

Run the fiddle.

Expected Behavior

I want to select two objects with setActiveGroup on a zoomed canvas: I just want to "pre-select" the objects for the user).

Note: if you check the same example with Fabric 1.5 it's working.

Actual Behavior

The select boundary is selecting the group as if no zoom occurred. If you set the zoom level at 1 everything is fine.

[vinch]

+1
I have the exact same problem. I thought it was something wrong with my code but it looks like it's an issue with Fabric.js :(

[asturur]

This is easy, is undocumented, someone should really write a small tutorial how i select multiple objects programmatically

So the activeGroup is a just a group, with weird things:

its objects are on canvas ( normal groups are not )
he is not on canvas ( normal groups are )
it needs a canvas reference in the canvas property or the viewportTransform ( aka zoom ) is not there.

So your code is good, just add group.canvas = mycanvas and you should be set.

Anyone of you wants to write a small example on how to create an activeGroup? we will fit in the tutorials part somewhere.

@ncou would you like to?

[blobinabottle]

Excellent this is working!
https://jsfiddle.net/x25d4wss/9/

Thank you so much @asturur!

[vinch]

💯

[blobinabottle]

For next users, a little demo of how to select all : https://jsfiddle.net/x25d4wss/13/

[ncou]

Hi,

I am a bit late :) i could try to write a small tutorial this weekend if this could help.
Here is a working example who cover most of the case when you want to select all the objects :

https://jsfiddle.net/x25d4wss/18/

it show a way to select all the objects (using .filter() and .map() function) using filter on the "selectable" only objects (you will get an error if you select programmatically objects who are selectable=false).

Not really sure if it's usefull but i also reset the active object using "canvas._activeObject = null;" because if you select an object using the mouse, and after you select programmaticaly a group the active object is still stored in the internal var "_activeObject" (perhaps a reset internaly inside the setActiveGroup() could be added in the library ? or perhaps the reset is not needed ?).
I have not analysed the code, so i don't know if this could disturb the library, but to avoid any risks i reset this var when a new group is created.
Samething if there is only one object to select, it will reset the _activeGroup internal var.

And another tips it's to add a "canvas.discardActiveGroup();" call before the programmatically selection, because if you have already select a group the originX/Y will be modified and the new group will be moved at the top left location.

@asturur : is there a template for creating tutorials ? or i could send directly raw text ?

PS : from memory there as a jsfiddle account for fabric.js, it could be usefull to also store a code example linked to the tutorial (a sort of cheatsheet section) ? i think there is already a few good example (grid/snap to grid, draw circle...etc) it could be usefull to increase the number of examples.

PS2 : I will also provide this weekend a jsfiddle to create custom shape for the controls (overriding the drawControls() function), it's from another issue ticket but in relation with the tutorial comment.

[asturur]

i will point you to a template we have for articles pages.