Getting started

• 1 minute to read

Design Atoms may help you to import templates to Customer's Canvas and iterate all items in them to find, for example, text elements named Date and then change their values. You can also create a new design and pass it to Customer's Canvas.

Important

This package won't work alone. The Design Atoms Framework consists of a front-end component and a back-end component. To use Design Atoms, you need to connect them together as described in this topic.

Installing the front-end library

To install the front-end part of Design Atoms, just run

npm install @aurigma/design-atoms --save

Then, you can import modules to your project and start using them.

import { Product } from "@aurigma/design-atoms/Model/Product";

let product = new Product([new Surface(100, 100)]);

However, to use it for pracrical purposes, you need to connect a front end to a back end.

There are two main ways to get the back end:

• Create your own back end using the Aurigma.DesignAtoms NuGet package.
• Hook your front end to an existing Customer's Canvas instance.

Creating a custom back end

This way is a good option if you don't need the editor but rather need to manipulate designs through the JavaScript/TypeScript or C# code and render the result in your application. Also, you may 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.

To do so, you need to create a .NET Web API project, add a reference to Aurigma.DesignAtoms NuGet package and expose the necessary endpoints.

For reference, you can download a sample backend implementation from GitHub. You can use this sample solution as a separate object or merge it with your existing ASP.NET application.

Connecting to back end

You can use a running instance of either custom back end or Customer's Canvas. To connect to your back end, add the following code.

import { Viewer } from "@aurigma/design-atoms/Viewer/Viewer";

const backendUrl = "http://<your-instance-url>";
const holderId = "#id-of-your-div";
const holder = document.querySelector(holderId) as HTMLDivElement;
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    canvasBackground: { color: "white" }
});