Working with the object model

5 minutes to read

In the overview, we have learned the basics of Design Atoms Framework and how you can create applications. In this topic, you will learn how to work with the object model on the back end.

For reference, you can download our sample project from GitHub.

Working with the Object Model

The basic entity in this framework is a Product. Every product contains a collection of surfaces that represent pages of print products. For a Surface, you need to add design elements to Containers and define a Print area for rendering. This hierarchy is described in the Back-end modules topic. Now, let's see how you can work with these classes.

Creating a Product

For your product design, you need to create an instance of the Product class and add a collection of Surfaces to this instance.

using Aurigma.DesignAtoms.Model;

var product = new Product();
var surface = new Surface(330, 600);

product.Surfaces.Add(surface);

Adding Design Elements

In this model, containers store design elements. There are three default containers for the background, main area, and foreground. These containers allow you to display several designs on top of each other in a viewer. The Main container allows your users to edit and manipulate design elements in the viewer, whereas the Background and Foreground containers are locked for users. The names of these containers are defined in the Configuration. The Design Atoms Framework also supports SpotColor and Texture containers for such use cases as design finishing, print embellishments, etc.

To add new design elements to your product, you must first create the Main container for them.

var mainContainer = new SurfaceContainer { Name = Configuration.MAIN_CONTAINER_NAME };
surface.Containers.Add(mainContainer);

After that, you can create new elements and add them to the Items collection. Let us see how you can add such elements as bounded text, image placeholders, and barcodes.

using Aurigma.DesignAtoms.Model.Items;
using Path = Aurigma.DesignAtoms.Model.Math.Path;

// Add an image placeholder with a rectangular frame.
var photoFile = new FileInfo(@"images\c.bennett.jpg"));
var photoImage = new ImageItem(photoFile, new PointF(91, 146), 156, 234);
var photoPlaceholder = new PlaceholderItem()
{
    SourcePath = Path.CreateRectanglePath(new RectangleF(98, 170, 147, 184)),
    ManipulationPermissions = new ManipulationPermissions(false),
    Content = photoImage,
    Name = "photo"
};
mainContainer.Items.Add(photoPlaceholder);

// Add a bounded text item supporting copyfitting.
var nameItem = new BoundedTextItem("Cristopher Bennett", new RectangleF(112, 362, 120, 60), "Roboto-Bold", 25)
{
    Alignment = TextAlignment.Center,
    VerticalAlignment = TextVerticalAlignment.Center,
    OverflowStrategy = OverflowStrategy.FitToBox,
    Name = "employee"
};
mainContainer.Items.Add(nameItem);

// Add a barcode.
var barcode = new BarcodeItem(ZXing.BarcodeFormat.EAN_8, "1234567", 
    new BarcodeItem.EncodingOptions { PureBarcode = true }, new PointF(71, 418), 202, 50)
{
    FillColor = RgbColor.Green,
    Name = "barcode"
};
mainContainer.Items.Add(barcode);

Adding Mockups

The Design Atoms Framework supports Mockups to visualize a physical representation of a product in the viewer and proof images. Mockups do not appear in the hi-res outputs.

You can add both overlaying and underlying mockups to your product surfaces by adding your images to the OverContainers and UnderContainers collections.

var fileSource= new ImageSource(){ FileSource = new FileInfo(@"images\mugmockup.png")};
var mockupImage = new ImageItem(fileSource, new PointF(0, 0), surface.Width, surface.Height);
var mockupContainer = new MockupContainer(new[] {mockupImage});
surface.Mockup.UnderContainers.Add(mockupContainer);

Changing Design Elements

You can find elements that fit by some criterion and change their content. In the following example, a bounded text element with the "employee" name gets new content.

var item = product.AllItems.OfType<BoundedTextItem>().FirstOrDefault(x => x.Name == "employee");
if (item != null)
{
    item.Text = "John Wood";
}

Deleting Design Elements

The following example illustrates how you can delete a design element by name and a number of design elements by type.

var item = product.AllItems.OfType<Item>().FirstOrDefault(x => x.Name == "employee");
if (item != null)
{
    item.ParentContainer.Items.Remove(item);
}

var barcodes = product.AllItems.OfType<Item>(BarcodeItem);
foreach(var item in barcodes)
{
    item.ParentContainer.Items.Remove(item);
}

Defining a Print Area

To define an area to be printed, you need to create an instance of the PrintArea class. Every print area is rendered on a separate page of the output PDF file. Usually, a print area is the same size as its surface. However, you can add a number of print areas to a surface. In this case, your users can see these print areas on a single page and even drag design elements onto them in the viewer.

For print areas, you can specify a bleed zone by using SafetyLines, for example:

var printArea = new PrintArea(new RectangleF(0, 0, surface.Width, surface.Height));
var safetyLine = new SafetyLine
{
    Margin = new Margin(10, 70),
    PdfBox = PdfBox.Bleed,
    Color  = RgbColor.Lime,
    StepPx = 3
};

printArea.SafetyLines.Add(safetyLine);
surface.PrintAreas.Add(printArea);

Here, the PdfBox property applies margins of this safety line to the corresponding PDF page box. In this way, you can define the "Crop", "Trim", and "Bleed" boxes.

Creating a Group of Items

In the Design Atoms Framework, groups of design elements and clipart are implemented in the GroupItem and ClipartItem classes. Now, let's look at how you can work with these items.

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;

Working with the object model