How to ungroup multiple Polylines after grouping using FabricJS?

We can create a Polyline object by creating an instance of fabric.Polyline. A polyline object can be characterised by a set of connected straight-line segments. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties like angle, opacity, etc. For ungrouping multiple Polyline objects we can use the toActiveSelection() method.

Syntax

toActiveSelection(): fabric.ActiveSelection

Example 1: Grouping All the Polylines using One Click

Before seeing how to ungroup, let's see how we can group objects. In this example, we will have a button on clicking which all the Polylines will be grouped into a single object. Thus, moving that object will move all the Polylines and it will behave as a single object as you resize or skew too.

We will create a function which gets all the objects in the canvas and groups them into a single object.

   
   


   
Grouping all the Polyline objects using one click
   
 Click on the `Group` Button to group all the Polyline objects in the canvas 
   
   Group
   

Example 2: Ungrouping All the grouped Polylines using One Click

In this example, we will have a button on clicking which grouped Polylines will be ungrouped. Thus the object will be behaving as separate objects. First, we will group all the objects into a single object. Further, when ungroup button is pressed we will use the toActiveSelection() to ungroup the objects.

   
   


   
Ungrouping all the grouped Polylines using one click
   
 Click on the grouped object and click on `Ungroup` button to ungroup the objects, further click in empty space to discard the selection 
   
   Ungroup