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;