Working with the Object Model

Working with the Object Model on the Back End

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 Design Atoms Framework Overview. 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 SurfaceMockup.OverContainers and SurfaceMockup.UnderContainers collections.

var fileInfo = new FileInfo(@"images\mugmockup.png");
var mockupImage = new ImageItem(fileInfo, 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.

Now, let's see how you can perform the same operations on the front end.

Working with the Object Model on the Front End

You can work with the object model in your custom viewer as well as in the Customer's Canvas Design Editor through the IFrame API.

Creating a Product

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

import { Product, Surface } from "@aurigma/design-atoms-model/Product";
const product = new Product([new Surface(800, 800)]);

Adding Design Elements

This is how you can create the main surface container and add design elements to this container.

import { SurfaceContainer} from "@aurigma/design-atoms-model/Product";
import { ImageItem, PlaceholderItem, PlainTextItem } from "@aurigma/design-atoms-model/Product/Items";
import { PointF } from "@aurigma/design-atoms-model/Math";

// Create an image placeholder.
const placeholder = new PlaceholderItem();
placeholder.content = new ImageItem(null, new PointF(100, 100), 200, 200);
placeholder.name = "photo";

// Create a main container with the placeholder.
const mainContainer = new SurfaceContainer(placeholder);
mainContainer.name = "main";

// Add a text item to the main container.
const nameItem = new PlainTextItem("Cristopher Bennett", new PointF(100, 400), "Roboto-Bold", 25);
nameItem.name = "employee";
mainContainer.items.add(nameItem);

// Add the main container to the surface.
const surface = product.surfaces.get(0);
surface.containers.setRange([mainContainer]);

Adding Mockups

In the following example, we add an overlaying mockup to a surface.

import { MockupContainer } from "@aurigma/design-atoms-model/Product";
import { RectangleF } from "@aurigma/design-atoms-model/Math";

const mockupImg = new ImageItem();
mockupImg.sourceRectangle = new RectangleF(0, 0, surface.width, surface.height);
mockupImg.source = new ImageItem.ImageSource(null, "https://example.com/mugmockup.png");
surface.mockup.overContainers.add(new MockupContainer([mockupImg]));

Changing Design Elements

You can find elements that fit a certain criterion and change their content. In the following example, the text element employee gets a new content.

const textItem = surface.containers.first().items.first(i => i.name === "employee") as BaseTextItem;
textItem.text = "John Wood";

Deleting Design Elements

You can remove design elements by names, types, and predicates. In the following example, we remove the employee item and all image placeholders.

product.removeItems(item => item.name === "employee" || item.type === "PlaceholderItem");

Defining a Print Area

You can specify a print area and a bleed zone as follows:

import { PrintArea } from "@aurigma/design-atoms-model/Product";

const safetyLine = new SafetyLine();
safetyLine.margin = 10;
safetyLine.pdfBox = PdfBox.Bleed;
safetyLine.color = new RgbColor("lime");

const printArea = new PrintArea(new RectangleF(0, 0, surface.Width, surface.Height));
printArea.safetyLines.add(safetyLine);

surface.printAreas.add(printArea);

Now, you may want to learn more details about:

• Using dependency injection
• Loading product templates
• Saving products
• Rendering products

See Also

Manual

• Design Atoms Framework Overview
• Creating Applications with Design Atoms Framework
• Using the Design Atoms Framework in IFrame API

Other

• Design Atoms sample project↗