Aurigma Customer's Canvas SDK - Design Atoms Framework
Design Atoms is a part of Customer's Canvas SDK which allows manipulating individual elements of a design edited in the Customer's Canvas web-to-print editor. If you think of Customer's Canvas editor as a browser, you may consider Design Atoms as a DOM API.
For example, you may import a template to Customer's Canvas, then use Design Atoms to iterate all items, find, say, text elements named, say, Name and change its value. Or you can create a brand new design and pass it to Customer's Canvas.
Important! This package won't work alone. Design Atoms consists of a frontend part (this package) and a backend part (search for a package called Aurigma.DesignAtoms in NuGet). To be able to use Design Atoms, you need to connect it to a backend. See below for details.
Getting started
Install Design Atoms frontend library
Just run
npm install @aurigma/design-atoms --save
Then, you may 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 be able to use it in a full force, you need to connect it with a backend.
There are two main ways to get a backend - create your own backend using the Aurigma.DesignAtoms NuGet package or hook it to an existing Customer's Canvas instance.
Creating a custom backend
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, it is a 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.
To do it, you need to create a .NET Web API project, add a reference to Aurigma.DesignAtoms NuGet package and expose the necessary endpoints.
You can download a sample backend implementation from GitHub and use this sample solution as a separate object or merge it with your existing ASP.NET application.
Connecting to Backend
You can use a running instance of either custom backend or Customer's Canvas 7. To connect to your backend, add the following code.
const backendUrl = "http://<yourInstanceUrl>";
const holderId = "#id-of-your-div";
const holder = document.querySelector(holderId) as HTMLDivElement;
const viewer = new Viewer({
holderElement: holder,
backendUrl: backendUrl,
canvasBackground: { color: "white" }
});
What's next?
Refer Customer's Canvas documentation for more details on how to use this package: