Working with the object model

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.

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.

Creating a Product

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.

Adding Design Elements

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.

Adding Mockups

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.

Changing Design Elements

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.

Deleting Design Elements

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:

Defining a Print Area

import { PrintArea, SafetyLine, PdfBox, RgbColor } from "@aurigma/design-atoms-model/Product";
import { RgbColor } from "@aurigma/design-atoms-model/Colors";
import { RectangleF } from "@aurigma/design-atoms-model/Math";

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

// Add the safety line to a print area.
const printArea = new PrintArea(new RectangleF(0, 0, surface.Width, surface.Height));
printArea.safetyLines.add(safetyLine);

surface.printAreas.add(printArea);

// Enable safety lines in the viewer.
viewer.safetyLinesHandler.visible=true;