Back-end modules

• 4 minutes to read

Note

This topic refers to the back-end libraries. For details about the front end, see the Design Atoms JS 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.
• The back-end component provides all necessary controllers for drawing objects, obtaining the necessary data, and rendering the entire object model. This module also contains controllers for converting Photoshop and InDesign templates into the Customer's Canvas 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 back end, the model is implemented in the Aurigma.DesignAtoms.Model namespace. 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 Back End

The back-end component is responsible for:

• Generating preview images and hi-res outputs.
• Importing the object model from product templates (PSD and IDML files).
• Creating a set of designs of different sizes programmatically.
• Manipulating design elements according to custom logic.

If an existing Design Editor instance does not fit your needs, you can implement your custom back end in either a Web, desktop, or console application. In this way, you can develop your back-end API for the viewer or develop custom methods to preview and generate high-resolution outputs.

The back-end component consists of the following NuGet packages:

• Aurigma.DesignAtoms contains controllers for drawing objects, obtaining the necessary data, and rendering the entire object model.
• Aurigma.DesignAtoms.Model implements the object model.

To install the back end, you can run the following command in the Visual Studio Package Manager Console:

Install-Package Aurigma.DesignAtoms

After installation, you can start working with the object model. For example, you can create a product from scratch as follows:

using Aurigma.DesignAtoms.Model;
var product = new Product {
    Surfaces = { new Surface(400, 400) }
};

When you need a back end for processing data from a browser, then create a Web application, add a reference to Aurigma.DesignAtoms, and expose the necessary endpoints. The viewer component requires the ViewerController on the back end. You can initialize this controller and connect your front end with a back end as follows:

const backendUrl = "http://<yourInstanceUrl>";
const holder = document.querySelector("#viewer-container") as HTMLDivElement;
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    canvasBackground: { color: "white" }
});