Working with the object model

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

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

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