Groups of Design Elements

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

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

Manual

• Design Atoms Framework Overview
• Using the Design Atoms Framework in IFrame API