Front-end modules

• 4 minutes to read

Note

This topic refers to the front-end libraries. For details about the back end, see the Design Atoms .NET section.

Design Atoms Framework is a part of the Customer's Canvas SDK which allows for manipulating individual elements of a design edited in the web-to-print editor. If you think of the Design Editor as a browser, you may consider Design Atoms Framework as a DOM API. For example, you may import a template to Customer's Canvas, then use this framework to iterate all items, then find, for example, a text element named City, and change its value. You can also create a brand new design and pass it to Customer's Canvas.

Modules of the Design Atoms Framework

The Design Atoms Framework is split into the back-end and front-end libraries.

• The front-end component visualizes an object model and provides a graphical user interface for manipulating objects. For example, you can select, drag, resize, rotate objects, or perform in-place editing of the content.
• The back-end component provides all necessary controllers for drawing objects, obtaining the necessary data, and rendering the entire object model.
• The object model implements design elements for print products on both the front end and back end.

The Design Atoms Framework provides the client-side and server-side code for serialization and deserialization of the object model in the JSON format. For example, you can serialize your object model on the client side and pass it to the server within an HTTP request.

You can also save products to state files for long-term storage. For example, you can transfer these files to another computer for editing and rendering print-ready files. In terms of the Design Atoms Framework, a product is a state file loaded into Customer's Canvas.

You can start working with the object model as soon as you import the front-end modules. However, to start using this framework in full force, you need to connect your front-end code with a back end. There are two ways to get the back end - create your own backend or hook it to an existing Design Editor instance.

A custom back end is a good option when you don't need an editor but rather need to manipulate designs through the JavaScript/TypeScript or C# code and render the result in your application. Also, it is the way to go if you want to create a custom editor based on the Viewer control. Another purpose is to handle the output from Customer's Canvas in a separate application.

As an example, you can download a sample project illustrating how you can use the Design Atoms Framework.

The Object Model of Customer's Canvas

The front end and back end share the same object model. On the front end, the model is implemented in the @aurigma/design-atoms-model package. Here, you can find:

• Classes of the object model that represents the following entities of printed documents:
  • Product - a print product that contains surfaces (pages).
  • Surface - a page that contains print areas, mockups, and containers with design elements.
  • Print area - an area of a design to be printed.
  • Mockup - background and overlaying mockups that help visualize designs.
  • Container - a collection of design elements or mockups.
  • Design elements - images, text, shapes, barcodes, and more.
  • Safety lines, watermarks.
• Auxiliary classes like Point, Path, FontSettings, etc.

In this model, each surface may have several item containers. 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 Front End

The front-end component consists of the following Node.js packages:

• @aurigma/design-atoms manipulates products and design elements.
• @aurigma/design-atoms-interfaces declares interfaces.
• @aurigma/design-atoms-model implements the object model.
• @aurigma/design-atoms-text works with text in the viewer.

To install these packages, run the following command in the command prompt in your project folder:

npm install @aurigma/design-atoms --save

After installation, you can import modules to your project and start working with the object model.

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

In addition to the object model, the Design Atoms Framework implements a Viewer to visualize the object model. This front-end component provides access to design elements through a graphical user interface. In the viewer, you can switch product pages, manipulate design elements, and change their content. To integrate the viewer into your site, you can add its container as follows:

<div id="viewer-container"></div>

After that, initialize the viewer.

import { Viewer } from "@aurigma/design-atoms/Viewer/Viewer";
var viewer = new Viewer(document.getElementById("viewer-container"));
viewer.model = product;

This viewer allows you to access both a single design element and a number of selected elements. For example, you can change the color of all selected plain text elements to red as follows:

viewer.selectedItems
    .filter(item => item.type === "PlainTextItem")
    .forEach(textItem => textItem.color = new RgbColor("#ff0000"));