---
title: "Groups of design elements | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-js/howto/manipulating-groups/"
---

# Groups of design elements

> In the Design Atoms Framework, groups of design elements and clipart are implemented in the [GroupItem](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/GroupItem.md) and [ClipartItem](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ClipartItem.md) classes. This topic describes how you can work with these items on the front end.
>  
> Creating a Group

In the Design Atoms Framework, groups of design elements and clipart are implemented in the [GroupItem](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/GroupItem.md) and [ClipartItem](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-model/ClipartItem.md) classes. This topic describes how you can work with these items on the front end.

## Creating a Group

You can group design elements as follows:

```typescript title="Creating a Group"
import { GroupItem, ImageItem, PlainTextItem } from "@aurigma/design-atoms-model/Product/Items";

const companyLogo = new ImageItem("", new PointF(100, 100), 200, 200);
const companyName = new PlainTextItem("Printing Company", new PointF(100, 400));
// Group two design elements.
const group = new GroupItem([ companyLogo, companyName ]);
```

You can also add items to an existing group.

```typescript title="Adding Items to a Group"
// Create an empty group.
const group = new GroupItem();
// Add two items to this group.
group.addItems([ companyLogo, companyName ]);
```

When adding items to a group, you can specify their position (index) as the second parameter. The following example illustrates how you can add a single item to the top of a group.

```typescript title="Adding Item at Specific Position"
group.addItem(new PlainTextItem("online services", new PointF(100, 500)), 0);
```

In the same way, you can create clipart - a group of vector shapes.

```typescript title="Creating Clipart"
import { ClipartItem, EllipseItem, ShapeItem } from "@aurigma/design-atoms-model/Product/Items";
import { RectangleF } from "@aurigma/design-atoms-model/Math";

const ellipse = new EllipseItem(new RectangleF(100, 100), 200, 200);
const shape = new ShapeItem();
// Group the ellipse and shape into clipart.
const clipart = new ClipartItem([ companyLogo, companyName ]);
```

## Removing Items from a Group

Under the hood, the groups and clipart represent collections of `items`. Using the example of removing items, let's see how you can apply this.

```typescript title="Removing Items from a Group"
// Take the first two items in the group.
const [ firstItem, secondItem ] = group.items;
// Remove an item from the collection.
group.items.remove(firstItem);
// Remove items from the group.
group.removeItems([ secondItem ]);
```

## Manipulating in the Viewer

On the front end, you can visualize your product in a custom viewer. You can enable grouping and ungrouping design elements in the viewer by using the Command Manager and the corresponding commands: [ItemsCommand.groupItems](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/ItemsCommand-1.md#enumeration-member-groupitems) and [ItemsCommand.ungroupItems](https://customerscanvas.com/docs/on-premises/design-atoms-js/reference/design-atoms-interfaces/ItemsCommand-1.md#enumeration-member-ungroupitems).

```typescript title="Manipulating Groups in the Viewer"
import { ItemsCommand } from "@aurigma/design-atoms/Commands/CommandManager";
import { Viewer } from "@aurigma/design-atoms/Viewer/Viewer";

const backendUrl = "http://<yourInstanceUrl>";
const holder = document.querySelector("#viewer-container") as HTMLDivElement;
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    canvasBackground: { color: "white" }
});

viewer.commandManager.execute(ItemsCommand.groupItems, { items: viewer.selectedItems });
```

## Managing Permissions

Grouped items maintain their permissions. For example, when an item is disallowed for moving, then this item cannot be moved even when it is added to a group. However, such a group can be moved as long as this item remains within the group bounds.

In addition to individual permissions, you can define them for the entire group through `groupManipulationPermissions`.

```typescript title="Managing Group Permissions"
group.groupManipulationPermissions.allowMoveHorizontal = false;
group.groupManipulationPermissions.allowMoveVertical = false;
```

Clipart introduces new permissions:
- `allowUngroup` - allows for ungrouping the items in the viewer. 
- `allowSelectNestedItems` - allows for choosing a single item in the group. 
- `allowReplaceContent` - allows for replacing the entire group. 

For clipart, their default values are `false`. You can define them for normal groups in `groupItemPermissions`, for example:

```typescript title="Setting Group Item Permissions"
group.groupItemPermissions.allowSelectNestedItems = false;
```