Skip to main content

Front-end modules

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.

Design Atoms JS libraries​

You can also build your own editors using the Design Atoms JavaScript library. Although creating a custom editor may be challenging, you may still find this front-end SDK useful for certain tasks.

Design Atoms JS consists of several important parts, which you can install from npm:

  • Design Atoms Model - a data structure describing a design. It gives you access to its surfaces (pages), containers (layers), and elements.
  • Design Atoms - a library implementing the most popular operations on designs.
  • Viewer control - a visual control that displays a design model on a screen and allows for manipulations.
  • Design Atoms Text - a library encapsulating operations for working with text in the viewer.

Design Atoms JS allows you to work with each individual element of a design loaded into the editor: iterate, query a specific element by its name, read and modify its properties, or add or remove elements. In other words, it's similar to the DOM API in JS.

What you can do with this API:

  • Generate designs
  • Manipulate elements through code
  • Serialize and deserialize a design to exchange it with a server

For example, you can create a new product and add design elements as follows:

const product = new Product([new Surface(800, 800)]);
 
const nameItem = new PlainTextItem("Christopher Bennett", new PointF(100, 400), "Roboto-Bold", 25);
nameItem.name = "employee";

const mainContainer = new SurfaceContainer(nameItem);
mainContainer.name = "main";

const surface = product.surfaces.get(0);
surface.containers.setRange([mainContainer]);

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:

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"));
Was this page helpful?