Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@aurigma/design-atoms

Package Overview
Dependencies
Maintainers
5
Versions
229
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@aurigma/design-atoms

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

  • 6.17.1
  • npm
  • Socket score

Version published
Weekly downloads
1.8K
decreased by-40.43%
Maintainers
5
Weekly downloads
 
Created
Source

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 5. 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:

Keywords

FAQs

Package last updated on 01 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc