Groups of design elements

• 2 minutes to read

In the Design Atoms Framework, groups of design elements and clipart are implemented in the GroupItem and ClipartItem 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:

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.

// 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.

group.addItem(new PlainTextItem("online services", new PointF(100, 500)), 0);

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

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.

// 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 and ItemsCommand.ungroupItems.

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.

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:

group.groupItemPermissions.allowSelectNestedItems = false;