@aurigma/design-atoms-model/readme.md

Design Atoms is a part of Customer's Canvas SDK which allows for manipulating individual design elements through your code.

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.

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

### 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](https://github.com/aurigma/DesignAtomsSamples) 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: 

- [Deploying the Design Atoms Framework](https://customerscanvas.com/dev/editors/design-atoms-cs/getting-started.html)
- [Sample Project](https://customerscanvas.com/dev/editors/design-atoms-cs/sample-project.html)
- [IFrame API](https://customerscanvas.com/dev/editors/iframe-api/howto/manipulating-items.html)