I have canvas having many objects. I have to group the selected objects into one group ex: if there are 6 object, if the user click the first object and then the second object, then the first and second should be grouped into single selection and if he selects the third then the three objects should be grouped into one selection.
I was able to achieve this using the ActiveSelection. Please find the code at http://jsfiddle.net/rtaLf810/3/.
var selectedObjects = []
canvas.on('mouse:up',e=>{
selectedObjects.push(e.target);
let selectionGroup = new fabric.ActiveSelection(selectedObjects,{canvas:canvas});
canvas.setActiveObject(selectionGroup);
canvas.requestRenderAll();
});
The problem which I am facing now is whenever I try to move the selected group, objects are either disappearing or moving to different coordinates.
Also I was not able to select an object within the group selection. In the below image green circle can't be selected since it is within the selected group(text+triangle).