@aurigma/design-atoms

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

$3

Just run

``
npm install @aurigma/design-atoms --save
`

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

` ts
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.

$3

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.

$3

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://";
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:

- Deploying the Design Atoms Framework
- Sample Project
- IFrame API