This is an old documentation. Go to the latest Customer's Canvas docs

Groups of Design Elements

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.

Working with Group 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.
// 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;

Working with Group Items on the Back End

Creating a Group

You can create a group based on new items as follows:

using System.Collections.Generic;
using System.Drawing;
using Aurigma.DesignAtoms.Model.Items;

var groupItem = new GroupItem(new List<Item>{ new PlaceholderItem { SourceRectangle = new RectangleF(10, 10, 100, 100) } });

To create nested groups:

using Aurigma.DesignAtoms.Model.Math;

var shape = new ShapeItem(Path.CreateRectanglePath(230, 10, 100, 100));
var nestedGroup = new GroupItem { Name = "nestedGroupName" };
var group = new GroupItem {Name = "groupName", Items = new List<Item> { shape, nestedGroup }};

Changing Colors in Clipart

Clipart allows you to change a color used in the vector image. The ColorGroups list contains all the clipart colors. To change a color for all vector shapes at once, you can use the SetColor method as follows:

using System.Linq;
using Aurigma.GraphicsMill;
using Aurigma.DesignAtoms.Model.Items;

// Define shapes.
var redFillShapes = new ShapeItem (Path.CreateEllipsePath(new RectangleF(100, 100, 200, 200)))
                { FillColor = RgbColor.Red };
var redBorderShapes = new ShapeItem(Path.CreateRectanglePath(new RectangleF(100, 450, 100, 100)))
                { BorderColor = RgbColor.Red, BorderWidth = 2 };
var yellowBorderShapes = new ShapeItem(Path.FromSvgString("M 215 396 L 161 396 L 188 287 Z"))
                { BorderColor = RgbColor.Yellow, BorderWidth = 1 };

// Group these shapes into clipart.
var clipartItem = new ClipartItem(new List<Item> { redFillShapes, redBorderShapes, yellowBorderShapes });
// Get the shapes in red and change their color to blue.
var redGroup = clipartItem.ColorGroups.First(colorGroup => colorGroup.Color.Equals(RgbColor.Red));
clipartItem.SetColor(redGroup, RgbColor.Blue);

Managing Permissions

On the back end, you can define the permissions in GroupItemPermissions, as follows:

group.GroupItemPermissions.AllowSelectNestedItems = false;
group.GroupItemPermissions.AllowUngroup = false;
group.GroupItemPermissions.AllowReplaceContent = true;

See Also