FPD JS

https://jsdoc.fancyproductdesigner.com/
Admin
FPD JS is a JavaScript library that allows developers to integrate a customizable product designer...
Tokens:27,478
Snippets:201
Trust Score:9.5
Update:1 year ago
Show doc for...
Tokens:
Raw
### Getting Started

Source: https://jsdoc.fancyproductdesigner.com/index

Instructions for setting up and initializing the FancyProductDesigner on your web page.

```APIDOC
## Getting Started

### Description

This section guides you through the initial setup of the FancyProductDesigner, including adding necessary files and initializing the designer instance.

### Setup Steps

1.  **Add JS and CSS Files:**
    Include the following links and scripts in your HTML file:
    ```html
    <link rel="stylesheet" type="text/css" href="css/FancyProductDesigner.min.css" />  
    <script src="js/fabric-5.3.1.min.js" type="text/javascript"></script>  
    <script src="js/FancyProductDesigner.min.js" type="text/javascript"></script>  
    ```

2.  **Create a Container Element:**
    Define a `div` element to serve as the container for the product designer. You can add CSS classes to define its layout.
    ```html
    <div id="fpd-target" class="fpd-sidebar fpd-shadow-2"></div>  
    ```

3.  **Initialize FancyProductDesigner:**
    Instantiate the `FancyProductDesigner` with the container element and optional application options.
    ```javascript
    const appOptions = {};  
      
    const fpd = new FancyProductDesigner(  
        document.getElementById('fpd-target'),   
        appOptions  
    );   
    ```
    Refer to the available app options for customization.
```

--------------------------------

### API Methods

Source: https://jsdoc.fancyproductdesigner.com/index

Reference for available methods to interact with the FancyProductDesigner instance.

```APIDOC
## API Methods

### Description

This section outlines the key methods available for interacting with the FancyProductDesigner instance after it has been initialized.

### Methods

-   **`fpd.getOrder()`**
    *   **Description:** Retrieves order information from the designer.
    *   **See Also:** [FancyProductDesigner#getOrder](https://jsdoc.fancyproductdesigner.com/FancyProductDesigner#getOrder)

-   **`fpd.currentViewInstance.toDataURL()`**
    *   **Description:** Exports the current view of the product designer as a Data URI.
    *   **Usage:** Access the current view instance and call the `toDataURL` method.
```

--------------------------------

### FancyProductDesigner 'ready' Event Listener

Source: https://jsdoc.fancyproductdesigner.com/index

An example of how to add an event listener for the 'ready' event. This is crucial for ensuring that the designer is fully initialized before attempting to call any API methods.

```javascript
fpd.addEventListener('ready', () => {  
    //wait for this event in order to make any api method call  
})  
```

--------------------------------

### Initialize FancyProductDesigner Instance

Source: https://jsdoc.fancyproductdesigner.com/index

Instantiate FancyProductDesigner by providing the target HTML element and an optional options object. It's recommended to wait for the 'ready' event before making API calls.

```javascript
const appOptions = {};  
  
const fpd = new FancyProductDesigner(  
    document.getElementById('fpd-target'),   
    appOptions  
);   
```

--------------------------------

### Include JS and CSS Files for FancyProductDesigner

Source: https://jsdoc.fancyproductdesigner.com/index

Add these lines to your HTML to include the necessary JavaScript and CSS files for the FancyProductDesigner. Ensure the paths are correct for your project structure.

```html
<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner.min.css" />  
<script src="js/fabric-5.3.1.min.js" type="text/javascript"></script>  
<script src="js/FancyProductDesigner.min.js" type="text/javascript"></script>  
```

--------------------------------

### FancyProductDesigner API Methods

Source: https://jsdoc.fancyproductdesigner.com/index

Demonstrates how to use key API methods of FancyProductDesigner. `getOrder()` retrieves order details, and `currentViewInstance.toDataURL()` exports the current view as a data URI.

```javascript
fpd.getOrder(); //https://jsdoc.fancyproductdesigner.com/FancyProductDesigner#getOrder  
  
//access current view instance  
fpd.currentViewInstance.toDataURL() // export the current selected view as data URI  
```

--------------------------------

### Dynamic Views Formats Example

Source: https://jsdoc.fancyproductdesigner.com/Options

An example demonstrating the structure of the 'formats' array within the dynamicViewsOptions. This array defines the available dimensions for new views.

```javascript
[
    [100, 100],
    [500, 500],
    [1000, 1000]
]
```

--------------------------------

### Create Container Element for FancyProductDesigner

Source: https://jsdoc.fancyproductdesigner.com/index

Define a container element in your HTML where the product designer will be rendered. The ID and classes can be customized, with classes potentially defining the initial layout.

```html
<div id="fpd-target" class="fpd-sidebar fpd-shadow-2"></div>  
```

--------------------------------

### API Events

Source: https://jsdoc.fancyproductdesigner.com/index

Information on event listeners to react to designer state changes.

```APIDOC
## API Events

### Description

This section details the events that the FancyProductDesigner emits, allowing you to perform actions at specific points in the designer's lifecycle.

### Events

-   **`ready`**
    *   **Description:** This event is fired when the designer is fully initialized and ready for interaction. It is recommended to make any API method calls after this event has been triggered.
    *   **Usage:**
        ```javascript
        fpd.addEventListener('ready', () => {
            // Make API calls here
            console.log('FancyProductDesigner is ready!');
        });
        ```
```

--------------------------------

### JavaScript: Setup Designs with JSON

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Sets up the product designs using a JSON object. This function is crucial for initializing the designer with predefined design configurations.

```javascript
setupDesigns(designs)
```

--------------------------------

### Printing Box Configuration Example

Source: https://jsdoc.fancyproductdesigner.com/Options

An example illustrating the configuration object for the printingBox. This object specifies the dimensions and visibility of the printing area for SVG exports.

```javascript
{top: 100, left: 100, width: 400, height: 500, visibility: true}
```

--------------------------------

### Configure Guided Tour with CSS Selectors

Source: https://jsdoc.fancyproductdesigner.com/Options

Defines a custom guided tour for the product designer. It allows specifying tour steps by mapping CSS selectors (or module/action identifiers) to descriptive text. The first part of the key indicates the target type (module or action) followed by a colon and the name, or a direct CSS selector for custom HTML elements. This feature helps guide users through complex interfaces.

```javascript
guidedTour: {
  "module:products": "This is the text for first step.",
  "action:manage-layers": "This is the text for second step.",
  "#any-element": "Pointer on a custom HTML element"
}
```

--------------------------------

### Setup Designs with JSON

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Sets up product designs using a provided JSON structure. This function takes an array of categories, each containing designs, as input.

```javascript
/**
 * Set up the designs with a JSON.
 * @param {Array<Object>} designs - An array containing the categories with designs.
 */
function setupDesigns(designs) {}
```

--------------------------------

### Example Font Configuration

Source: https://jsdoc.fancyproductdesigner.com/Options

Demonstrates how to configure the 'fonts' array, specifying font names, URLs for custom fonts, and variants for existing fonts. This setting is crucial for defining the available typography options in the product designer.

```javascript
fonts: [
  {name: "Lobster", url: "google"},
  {name: 'Custom', url: 'https://yourdomain.com/fonts/custom.ttf'},
  {name: 'Aller', url: 'path/Aller.ttf', variants: {'n7': 'path/Aller__bold.ttf','i4': 'path/Aller__italic.ttf','i7': 'path/Aller__bolditalic.ttf'}}
]
```

--------------------------------

### JavaScript: Get Order Details

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Returns an order object containing the product details, used fonts, and used colors. This is a comprehensive summary for order processing.

```javascript
getOrder([options]) ⇒ `object`
```

--------------------------------

### Example Hex Color Name Mapping

Source: https://jsdoc.fancyproductdesigner.com/Options

Illustrates the 'hexNames' object, used to assign custom names to specific hexadecimal color codes. This feature allows for more user-friendly color selection by mapping hex codes to descriptive names, enhancing the color customization experience.

```javascript
hexNames: {
  000000: 'dark',
  ffffff: 'white'
}
```

--------------------------------

### JavaScript: Get Views as Data URLs

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves each view of the product as a separate data URL. This method can be used to generate individual images for each view.

```javascript
getViewsDataURL(callback, [options]) ⇒ `array`
```

--------------------------------

### Get Product Information

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves the current product with its views and elements. Optionally filters for editable elements or products requiring customization. Returns an array of views, where each view contains details about its title, thumbnail, customization options, and elements. Each element object includes its title, source, parameters, and type.

```javascript
fpd.getProduct();
fpd.getProduct(true);
fpd.getProduct(false, true);
```

--------------------------------

### Get Views as Data URLs

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves individual views of the product as data URLs. It takes a callback function that is executed once the data URLs are generated, passing them as an argument. Optional configuration options can be provided to customize the output.

```javascript
fpd.getViewsDataURL( function(dataURLs){}, options );
```

--------------------------------

### JavaScript: Get Current Product Data

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Returns the current product configuration, including all views and their elements. Optionally filters for only editable elements or checks if customization is required.

```javascript
getProduct([onlyEditableElements], [customizationRequired]) ⇒ `array`
```

--------------------------------

### FancyProductDesigner - getIndex

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Gets the index of the current view.

```APIDOC
## getIndex()

### Description
Gets the index of the view.

### Method
GET

### Endpoint
/websites/jsdoc_fancyproductdesigner/getIndex

### Response
#### Success Response (200)
- **index** (Number) - The index of the current view.

#### Response Example
```json
{
  "index": 1
}
```
```

--------------------------------

### Retrieve All Element Parameter Keys

Source: https://jsdoc.fancyproductdesigner.com/Options

A utility function to get an array containing all available keys for element parameters within the product designer. This can be useful for introspection or dynamic configuration.

```javascript
import { Options } from './options'; // Assuming Options is imported

const parameterKeys = Options.getParameterKeys();
console.log('Available parameter keys:', parameterKeys);
```

--------------------------------

### JavaScript: Get Views as SVG

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Returns an array containing the SVG data for each view of the product. This is useful for vector-based exports or integrations.

```javascript
getViewsSVG(options) ⇒ `array`
```

--------------------------------

### Get Current View Index

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves the index of the currently selected view within the product designer. Returns a number representing the index.

```javascript
/**
 * Gets the index of the view.
 * @returns {Number} The index.
 */
function getIndex() {}
```

--------------------------------

### Get Order Details

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Constructs and returns an order object that includes comprehensive product details. This object aggregates information obtained from getProduct(), getUsedFonts(), and getUsedColors(). Optional parameters can be passed to influence the methods called internally.

```javascript
fpd.getOrder();
fpd.getOrder( {onlyEditableElements: true, customizationRequired: true} );
```

--------------------------------

### Get Views as SVG

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Returns an array containing the SVG representation of each product view. This is useful for further manipulation or integration of product designs into other SVG-based workflows. Configuration options can be passed to customize the SVG output.

```javascript
fpd.getViewsSVG(options);
```

--------------------------------

### FancyProductDesigner - setupDesigns

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Sets up the designs for the product designer using a JSON array.

```APIDOC
## setupDesigns(designs)

### Description
Set up the designs with a JSON.

### Method
POST

### Endpoint
/websites/jsdoc_fancyproductdesigner/setupDesigns

### Parameters
#### Request Body
- **designs** (Array) - Required - An array containing the categories with designs.

### Request Example
```json
{
  "designs": [
    {
      "categoryTitle": "T-Shirts",
      "designs": [
        {
          "title": "Design 1",
          "thumbnail": "/path/to/thumbnail1.png",
          "elements": []
        }
      ]
    }
  ]
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "Designs setup successfully"
}
```
```

--------------------------------

### FancyProductDesigner Initialization and Core Methods

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesignerView

Documentation for initializing the FancyProductDesigner view and its core methods for loading elements, exporting content, and managing view state.

```APIDOC
## new FancyProductDesignerView(container, [viewData], [callback], [fabricCanvasOptions])

### Description
Creates a new FancyProductDesignerView.

### Method
`new`

### Parameters
#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* **container** (HTMLElement) - Required - The container for the Fancy Product Designer View.
* **viewData** (Object) - Optional - The initial view data.
* **callback** (function) - Optional - Callback when view is created.
* **fabricCanvasOptions** (Object) - Optional - Options for fabricJS canvas.

### Request Example
```json
{
  "container": "<div id=\"designer\"></div>",
  "viewData": {},
  "callback": "function() { console.log('View created'); }",
  "fabricCanvasOptions": {}
}
```

### Response
#### Success Response (200)
* **FancyProductDesignerView** (Object) - An instance of the FancyProductDesignerView.

#### Response Example
```json
{
  "message": "FancyProductDesignerView instance created"
}
```

## init()

### Description
This method needs to be called to initialize the generation.

### Method
`Global Function`

### Endpoint
N/A (Global function)

### Parameters
* None

## loadElements(elements, callback)

### Description
Removes the current elements and loads a set of new elements into the view.

### Method
`Global Function`

### Endpoint
N/A (Global function)

### Parameters
#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* **elements** (Array) - Required - An array containing elements.
* **callback** (function) - Required - A function that will be called when all elements have been added.

### Request Example
```json
{
  "elements": [
    {
      "type": "text",
      "text": "Hello World"
    }
  ],
  "callback": "function() { console.log('Elements loaded'); }"
}
```

### Response
#### Success Response (200)
* **status** (String) - Indicates success or failure of the operation.

#### Response Example
```json
{
  "status": "success"
}
```

## toDataURL(callback, [options], [deselectElement])

### Description
Creates a data URL of the view.

### Method
`Global Function`

### Endpoint
N/A (Global function)

### Parameters
#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* **callback** (function) - Required - A function that will be called when the data URL is created. The function receives the data URL.
* **options** (Object) - Optional - See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.
    * **onlyExportable** (Boolean) - Optional - Defaults to `false`. If true elements with excludeFromExport=true are not exported in the image.
    * **backgroundColor** (String) - Optional - Defaults to `"transparent"`. The background color as hexadecimal value. For 'png' you can also use 'transparent'.
    * **watermarkImg** (fabric.Image) - Optional - A fabricJS image that includes the watermark image.
* **deselectElement** (Boolean) - Optional - Defaults to `true`. Deselect current selected element.

### Request Example
```json
{
  "callback": "function(dataUrl) { console.log(dataUrl); }",
  "options": {
    "onlyExportable": true,
    "backgroundColor": "#FFFFFF"
  },
  "deselectElement": false
}
```

### Response
#### Success Response (200)
* **dataUrl** (String) - The generated data URL of the view.

#### Response Example
```json
{
  "dataUrl": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="
}
```

## toSVG([options], [fontsToEmbed])

### Description
Returns the view as SVG.

### Method
`Global Function`

### Endpoint
N/A (Global function)

### Parameters
#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* **options** (Object) - Optional - See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toSVG.
    * **watermarkImg** (fabric.Image) - Optional - A fabricJS image that includes the watermark image.
    * **reviver** (function) - Optional - See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toSVG.
    * **respectPrintingBox** (Boolean) - Optional - Defaults to `false`. Only generate SVG from printing box.
* **fontsToEmbed** (Array) - Optional - An array containing fonts to embed in the SVG. You can use getUsedFonts method

### Request Example
```json
{
  "options": {
    "respectPrintingBox": true
  },
  "fontsToEmbed": ["Arial", "Times New Roman"]
}
```

### Response
#### Success Response (200)
* **svgString** (String) - A XML representing a SVG.

#### Response Example
```json
{
  "svgString": "<svg width=\"100\" height=\"100\"><text x=\"10\" y=\"20\">Hello</text></svg>"
}
```

## toggleLock(toggle)

### Description
Toggles the lockment of view. If the view is locked, the price of the view will not be added to the total product price.

### Method
`Global Function`

### Endpoint
N/A (Global function)

### Parameters
#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* **toggle** (Boolean) - Required - The toggle state.

### Request Example
```json
{
  "toggle": true
}
```

### Response
#### Success Response (200)
* **currentState** (Boolean) - The toggle state.

#### Response Example
```json
{
  "currentState": true
}
```

## changePrice(price, operator)

### Description
Changes the price by an operator, + or -.

### Method
`Global Function`

### Endpoint
N/A (Global function)

### Parameters
#### Path Parameters
* None

#### Query Parameters
* None

#### Request Body
* **price** (Number) - Required - The price to change.
* **operator** (String) - Required - The operator ('+' or '-').

### Request Example
```json
{
  "price": 10.50,
  "operator": "+"
}
```

### Response
#### Success Response (200)
* **newPrice** (Number) - The new price after the change.

#### Response Example
```json
{
  "newPrice": 20.50
}
```
```

--------------------------------

### JavaScript: Print Product

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Opens the current product in a new pop-up window, initiating the browser's print dialog for physical output.

```javascript
print()
```

--------------------------------

### JavaScript: Get View Index

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves the index of the current view. This is useful for referencing or manipulating specific views.

```javascript
getIndex() ⇒ `Number`
```

--------------------------------

### print

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Opens the current product in a popup window to initiate the print dialog.

```APIDOC
## print()

### Description
Opens the current showing product in a Pop-up window and shows the print dialog.

### Method
POST

### Endpoint
`/websites/jsdoc_fancyproductdesigner/print`

### Parameters
No parameters required.

### Response
No specific response body. Triggers a print dialog.

```

--------------------------------

### JavaScript: Get Used Fonts

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves an array of all fonts currently being used in the product designer. This is helpful for font management and licensing.

```javascript
getUsedFonts() ⇒ `array`
```

--------------------------------

### Initialize FancyProductDesigner

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Constructor for the FancyProductDesigner class. It takes an HTMLElement as the container and an optional options object for configuration. This initializes the product designer within the specified DOM element.

```javascript
new FancyProductDesigner(elem, [opts])
```

--------------------------------

### Initialize FancyProductDesigner View

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesignerView

Initializes the Fancy Product Designer view. This is a mandatory first step before using other methods. It requires a container element for rendering the designer.

```javascript
const designerView = new FancyProductDesignerView(container, viewData, callback, fabricCanvasOptions);
```

--------------------------------

### FancyProductDesigner Class Methods

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

This section details the core methods available on the FancyProductDesigner class for managing products, views, elements, and design configurations.

```APIDOC
## FancyProductDesigner API

This documentation covers the methods available for interacting with the FancyProductDesigner.

### Methods

- **setupDesigns(designs)**
  - Description: Sets up the designs with JSON data.
  - Parameters: `designs` (Object) - The design data.

- **addProduct(views, [category])**
  - Description: Adds a new product to the product designer.
  - Parameters:
    - `views` (Array) - An array of views for the product.
    - `category` (String, Optional) - The category for the product.

- **loadProduct(views, [onlyReplaceInitialElements], [mergeMainOptions])**
  - Description: Loads a new product into the designer.
  - Parameters:
    - `views` (Array) - An array of views to load.
    - `onlyReplaceInitialElements` (Boolean, Optional) - If true, only replaces initial elements.
    - `mergeMainOptions` (Boolean, Optional) - If true, merges main options.

- **addView(view)**
  - Description: Adds a view to the currently visible product.
  - Parameters: `view` (Object) - The view object to add.

- **getIndex() ⇒ `Number`**
  - Description: Gets the index of the current view.
  - Returns: The index of the view (Number).

- **selectView(index)**
  - Description: Selects a view by its index.
  - Parameters: `index` (Number) - The index of the view to select.

- **getElements([viewIndex], [elementType], [deselectElement]) ⇒ `Array`**
  - Description: Returns an array of fabricjs objects for the specified view and element type.
  - Parameters:
    - `viewIndex` (Number, Optional) - The index of the view.
    - `elementType` (String, Optional) - The type of elements to retrieve.
    - `deselectElement` (Boolean, Optional) - Whether to deselect elements.
  - Returns: An array of fabricjs objects.

- **getCustomElements([type], [viewIndex], [deselectElement]) ⇒ `array`**
  - Description: Returns an array of all custom added elements for a specific type and view.
  - Parameters:
    - `type` (String, Optional) - The type of custom elements.
    - `viewIndex` (Number, Optional) - The index of the view.
    - `deselectElement` (Boolean, Optional) - Whether to deselect elements.
  - Returns: An array of custom elements.

- **getFixedElements([type], [viewIndex], [deselectElement]) ⇒ `array`**
  - Description: Returns an array of all fixed elements for a specific type and view.
  - Parameters:
    - `type` (String, Optional) - The type of fixed elements.
    - `viewIndex` (Number, Optional) - The index of the view.
    - `deselectElement` (Boolean, Optional) - Whether to deselect elements.
  - Returns: An array of fixed elements.

- **reset()**
  - Description: Clears the product stage and resets all configurations.

- **deselectElement()**
  - Description: Deselects the currently selected element in the active view.

- **addCustomImage(source, title, options, [viewIndex])**
  - Description: Adds a custom image to the product stage.
  - Parameters:
    - `source` (String) - The source URL of the image.
    - `title` (String) - The title for the image.
    - `options` (Object) - Additional options for the image.
    - `viewIndex` (Number, Optional) - The index of the view to add the image to.

- **toggleResponsive([toggle]) ⇒ `Boolean`**
  - Description: Toggles the responsive behavior of the designer.
  - Parameters: `toggle` (Boolean, Optional) - Whether to enable or disable responsive behavior.
  - Returns: The current responsive state (Boolean).

- **getProduct([onlyEditableElements], [customizationRequired]) ⇒ `array`**
  - Description: Retrieves the current product configuration.
  - Parameters:
    - `onlyEditableElements` (Boolean, Optional) - If true, returns only editable elements.
    - `customizationRequired` (Boolean, Optional) - If true, returns only elements requiring customization.
  - Returns: An array representing the product configuration.

- **getProductDataURL(callback, [options], [viewRange])**
  - Description: Creates a single data URL for all views, positioned below each other.
  - Parameters:
    - `callback` (Function) - A callback function to receive the data URL.
    - `options` (Object, Optional) - Options for generating the data URL.
    - `viewRange` (Array, Optional) - A range of views to include.

- **getViewsDataURL(callback, [options]) ⇒ `array`**
  - Description: Gets the views as individual data URLs.
  - Parameters:
    - `callback` (Function) - A callback function to receive the data URLs.
    - `options` (Object, Optional) - Options for generating the data URLs.
  - Returns: An array of data URLs for each view.

- **print()**
  - Description: Opens the current product in a popup window and shows the print dialog.

- **getUsedFonts() ⇒ `array`**
  - Description: Retrieves all fonts currently used in the product.
  - Returns: An array of used font names.

- **getViewsSVG(options) ⇒ `array`**
  - Description: Returns the views as SVG data.
  - Parameters: `options` (Object) - Options for generating the SVG.
  - Returns: An array of SVG data strings for each view.

- **getUsedColors([viewIndex]) ⇒ `array`**
  - Description: Retrieves all used colors from a single view or all views.
  - Parameters: `viewIndex` (Number, Optional) - The index of the view to get colors from.
  - Returns: An array of used color values.

- **removeView([viewIndex])**
  - Description: Removes a view by its index. If no index is provided, removes the first view.
  - Parameters: `viewIndex` (Number, Optional) - The index of the view to remove.

- **setOrderQuantity(quantity)**
  - Description: Sets the order quantity for the product.
  - Parameters: `quantity` (Number) - The desired order quantity.

- **getOrder([options]) ⇒ `object`**
  - Description: Returns an order object containing product details, used fonts, and used colors.
  - Parameters: `options` (Object, Optional) - Options for generating the order object.
  - Returns: An order object.

- **getPrintOrderData()**
  - Description: Generates an object for print-ready export, including fonts and SVG data strings for PDF generation.
  - Returns: An object containing print order data.

- **calculatePrice([considerQuantity]) ⇒ `Number`**
  - Description: Calculates the total price, considering element prices and pricing rules.
  - Parameters: `considerQuantity` (Boolean, Optional) - Whether to consider the order quantity in the calculation.
  - Returns: The calculated total price (Number).

```

--------------------------------

### JavaScript: Get Custom Elements

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves an array of all custom-added elements in a specific view or across all views. Filtering by type is also supported.

```javascript
getCustomElements([type], [viewIndex], [deselectElement]) ⇒ `array`
```

--------------------------------

### JavaScript: Get Used Colors

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves an array of all colors used in a specific view or across all views of the product. This can be used for color palette analysis.

```javascript
getUsedColors([viewIndex]) ⇒ `array`
```

--------------------------------

### FancyProductDesigner Methods

Source: https://jsdoc.fancyproductdesigner.com/Options

Provides utility methods for interacting with the FancyProductDesigner's configuration. The `.merge()` method allows for combining default and custom settings, while `.getParameterKeys()` returns an array of all available configuration keys.

```javascript
/* Merge configuration */
.merge(defaults, [merge]) ⇒ Object

/* Get all parameter keys */
.getParameterKeys() ⇒ Array
```

--------------------------------

### JavaScript: Get Fixed Elements

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Returns an array of all fixed elements within a specific view or across all views. Filtering by type is also supported.

```javascript
getFixedElements([type], [viewIndex], [deselectElement]) ⇒ `array`
```

--------------------------------

### FancyProductDesigner - loadProduct

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Loads a new product into the designer, with options to replace initial elements or merge options.

```APIDOC
## loadProduct(views, [onlyReplaceInitialElements], [mergeMainOptions])

### Description
Loads a new product to the product designer.

### Method
POST

### Endpoint
/websites/jsdoc_fancyproductdesigner/loadProduct

### Parameters
#### Request Body
- **views** (array) - Required - An array containing the views for the product.
- **onlyReplaceInitialElements** (Boolean) - Optional, Default: `false` - If true, the initial elements will be replaced. Custom added elements will stay on the canvas.
- **mergeMainOptions** (Boolean) - Optional, Default: `false` - Merges the main options into every view options.

### Request Example
```json
{
  "views": [
    {
      "title": "Back View",
      "thumbnail": "/path/to/back_thumb.png",
      "elements": [
        {
          "source": "/path/to/text.png",
          "title": "Custom Text",
          "parameters": {
            "x": 50,
            "y": 50,
            "fontSize": 20
          },
          "type": "text"
        }
      ]
    }
  ],
  "onlyReplaceInitialElements": true,
  "mergeMainOptions": false
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the operation.

#### Response Example
```json
{
  "status": "Product loaded successfully"
}
```
```

--------------------------------

### Print Product

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Opens the current product design in a new popup window and initiates the print dialog. This function provides a direct way to send the product design to a printer.

```javascript
fpd.print();
```

--------------------------------

### Get Fixed Elements

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves an array of fixed elements, optionally filtered by type and view index. Each object in the returned array contains the fabric object and its view index.

```javascript
/**
 * Returns an array with all fixed elements.
 * @param {string} [type='all'] - The type of elements. Possible values: 'all', 'image', 'text'.
 * @param {Number} [viewIndex=-1] - The index of the target view. By default all views are target.
 * @param {String} [deselectElement=true] - Deselect current selected element.
 * @returns {array} An array with objects with the fabric object and the view index.
 */
function getFixedElements(type, viewIndex, deselectElement) {}
```

--------------------------------

### Configure Text Templates - JavaScript

Source: https://jsdoc.fancyproductdesigner.com/Options

Sets up predefined text templates that appear in the Text module. Allows users to select from a list of templates, each with customizable properties like text content and font styles. Expects an array of objects, where each object has a 'text' and 'properties' key.

```javascript
defaults.textTemplates = [
  {text: 'Hello World', properties: {fontFamily: 'Arial', textSize: 35}}
];
```

--------------------------------

### Get Used Fonts

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves an array of all fonts currently used in the product design. Each item in the array is an object containing the font's name and, optionally, a URL to the font file.

```javascript
fpd.getUsedFonts();
```

--------------------------------

### getProduct

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves the current product details, including all views, their elements, and customization options.

```APIDOC
## getProduct([onlyEditableElements], [customizationRequired])

### Description
Returns the current showing product with all views and elements in the views.

### Method
GET

### Endpoint
`/websites/jsdoc_fancyproductdesigner/getProduct`

### Parameters
#### Query Parameters
- **onlyEditableElements** (boolean) - Optional - If true, only the editable elements will be returned.
- **customizationRequired** (boolean) - Optional - To receive the product the user needs to customize the initial elements.

### Response
#### Success Response (200)
- **[]** (array) - An array with all views. A view is an object containing the title, thumbnail, custom options and elements. An element object contains the title, source, parameters and type.

#### Response Example
```json
[
  {
    "title": "View 1",
    "thumbnail": "url_to_thumbnail.png",
    "customOptions": {},
    "elements": [
      {
        "title": "Element 1",
        "source": "url_to_element.png",
        "parameters": {},
        "type": "image"
      }
    ]
  }
]
```
```

--------------------------------

### Get Custom Elements

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Retrieves an array of custom added elements, optionally filtered by type and view index. Each object in the returned array contains the fabric object and its view index.

```javascript
/**
 * Returns an array with all custom added elements.
 * @param {string} [type='all'] - The type of elements. Possible values: 'all', 'image', 'text'.
 * @param {Number} [viewIndex=-1] - The index of the target view. By default all views are target.
 * @param {String} [deselectElement=true] - Deselect current selected element.
 * @returns {array} An array with objects with the fabric object and the view index.
 */
function getCustomElements(type, viewIndex, deselectElement) {}
```

--------------------------------

### Get Elements from View

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Returns an array of fabricjs objects representing elements within a view. You can specify the view index and element type. By default, it returns all element types from all views.

```javascript
/**
 * Returns an array with fabricjs objects.
 * @param {Number} [viewIndex=-1] - The index of the target view. By default all views are target.
 * @param {String} [elementType='all'] - The type of elements to return. By default all types are returned. Possible values: text, image.
 * @param {String} [deselectElement=true] - Deselect current selected element.
 * @returns {Array} An array containg the elements.
 */
function getElements(viewIndex, elementType, deselectElement) {}
```

--------------------------------

### Product Designer Ready Event

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Fires an event when the product designer is fully initialized and ready for interaction. This is the ideal time to make method calls or manipulate the designer, ensuring all components are available.

```javascript
fpd.on('ready', function(event) {
  console.log('Product Designer is ready!');
});
```

--------------------------------

### JavaScript: Get Fabric.js Elements

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Returns an array of Fabric.js objects representing elements within a specific view. It allows filtering by view index, element type, and selection state.

```javascript
getElements([viewIndex], [elementType], [deselectElement]) ⇒ `Array`
```

--------------------------------

### getProductDataURL

Source: https://jsdoc.fancyproductdesigner.com/FancyProductDesigner

Generates a data URL for all product views, positioning them sequentially.

```APIDOC
## getProductDataURL(callback, [options], [viewRange])

### Description
Creates all views in one data URL. The different views will be positioned below each other.

### Method
POST

### Endpoint
`/websites/jsdoc_fancyproductdesigner/getProductDataURL`

### Parameters
#### Request Body
- **callback** (function) - Required - A function that will be called when the data URL is created. The function receives the data URL.
- **options** (Object) - Optional - See FancyProductDesignerView#toDataURL.
- **viewRange** (Array) - Optional - An array defining the start and the end indexes of the exported views. When not defined, all views will be exported.

### Request Example
```javascript
fpd.getProductDataURL( function(dataURL){ console.log(dataURL); } );
```

### Response
#### Success Response (200)
- **dataURL** (string) - The generated data URL for the product views.

#### Response Example
```json
{
  "dataURL": "data:image/png;base64,iVBORw0KGgo..."
}
```
```

--------------------------------

### Define Main Bar Modules - JavaScript

Source: https://jsdoc.fancyproductdesigner.com/Options

Specifies which modules appear in the main navigation bar. Available modules include 'products', 'images', 'text', 'designs', 'names-numbers', and 'drawing'. The order in the array determines their display order.

```javascript
defaults.mainBarModules = ['products', 'images', 'text', 'drawing'];
```

--------------------------------

### Get Element Z-Index (JavaScript)

Source: https://jsdoc.fancyproductdesigner.com/Element

Retrieves the stacking order (z-index) of a fabric.js element. Returns a number representing its position. This function extends `fabric.Object`.

```javascript
function getZIndex() {
  // Implementation to get z-index
}
```

--------------------------------

### Get Clipping Object (JavaScript)

Source: https://jsdoc.fancyproductdesigner.com/Element

Retrieves the object used for clipping in a fabric.js canvas. This could be an object defining coordinates or a fabric.Object itself. This function extends `fabric.Canvas`.

```javascript
function getClippingObject() {
  // Implementation to get clipping object
}
```

--------------------------------

### FancyProductDesigner Configuration Parameters

Source: https://jsdoc.fancyproductdesigner.com/Options

Defines the various parameters used to configure the FancyProductDesigner, including settings for text, images, QR codes, and custom additions. These parameters control aspects like maximum lines, font sizes, shadow effects, upload zones, and more.

```javascript
/* Text Parameters */
.curveReverse : Boolean
.maxLines : Number
.textBox : Boolean
.textPlaceholder : Boolean | Array
.numberPlaceholder : Boolean
.letterSpacing : Number
.chargeAfterEditing : Boolean
.minFontSize : Number
.textTransform : String
.widthFontSize : Number
.maxFontSize : Number
.shadowColor : String
.shadowBlur : Number
.shadowOffsetX : Number
.shadowOffsetY : Number
.textLinkGroup : String
.strokeColors : Array
.neonText : Boolean

/* Image Parameters */
.imageParameters : Object
  .uploadZone : Boolean
  .filter : Boolean
  .scaleMode : String
  .resizeToW : Number
  .resizeToH : Number
  .advancedEditing : Boolean
  .uploadZoneMovable : Boolean
  .uploadZoneRemovable : Boolean

/* Custom Image Parameters */
.customImageParameters : Object
  .minW : Number
  .minH : Number
  .maxW : Number
  .maxH : Number
  .minDPI : Number
  .maxSize : Number

/* Custom Text Parameters */
.customTextParameters : Object

/* Custom Adds Parameters */
.customAdds : Object
  .designs : Boolean
  .uploads : Boolean
  .texts : Boolean
  .drawing : Boolean

/* QR Code Properties */
.qrCodeProps : Object
  .autoCenter : Boolean
  .draggable : Boolean
  .removable : Boolean
  .resizable : Boolean
```

--------------------------------

### Get Upload Zone (JavaScript)

Source: https://jsdoc.fancyproductdesigner.com/Canvas

Retrieves an 'upload zone' element from the canvas by its title. An upload zone is likely a specific type of fabric.Object configured for handling uploads. This method extends fabric.Canvas.

```javascript
/**
 * Gets an upload zone by title.
 * @param {string} title - The title of the upload zone.
 * @returns {fabric.Object} The fabric.Object representing the upload zone.
 */
canvas.getUploadZone(title);
```

--------------------------------

### Get Element JSON Representation (JavaScript)

Source: https://jsdoc.fancyproductdesigner.com/Element

Generates a JSON representation of a fabric.js element. Optionally includes properties from `propertiesToInclude` or additional custom properties. This function extends `fabric.Canvas`.

```javascript
function getElementJSON(addPropertiesToInclude, propertyKeys) {
  // Implementation to get element JSON
}
```

--------------------------------

### Product Designer Parameters

Source: https://jsdoc.fancyproductdesigner.com/Options

This section outlines the various parameters available for configuring the product designer, covering text, image, and custom element settings.

```APIDOC
## Product Designer Configuration Parameters

### Description
This endpoint details the configurable parameters for the product designer, allowing for granular control over design elements and their behavior.

### Parameters

#### Text Parameters
- **.curveReverse** (Boolean) - Controls if text curves in reverse.
- **.maxLines** (Number) - Maximum number of text lines allowed.
- **.textBox** (Boolean) - Enables or disables the text box feature.
- **.textPlaceholder** (Boolean | Array) - Placeholder text configuration.
- **.numberPlaceholder** (Boolean) - Placeholder for number inputs.
- **.letterSpacing** (Number) - Adjusts letter spacing.
- **.chargeAfterEditing** (Boolean) - Determines if charges are applied after editing.
- **.minFontSize** (Number) - Minimum font size.
- **.textTransform** (String) - Text transformation (e.g., uppercase, lowercase).
- **.widthFontSize** (Number) - Font size based on width.
- **.maxFontSize** (Number) - Maximum font size.
- **.shadowColor** (String) - Color of the text shadow.
- **.shadowBlur** (Number) - Blur radius for the text shadow.
- **.shadowOffsetX** (Number) - X-offset for the text shadow.
- **.shadowOffsetY** (Number) - Y-offset for the text shadow.
- **.textLinkGroup** (String) - Groups text elements for linking.
- **.strokeColors** (Array) - Array of colors for text stroke.
- **.neonText** (Boolean) - Enables neon text effect.

#### Image Parameters
- **.imageParameters** (Object)
  - **.uploadZone** (Boolean) - Enables or disables the image upload zone.
  - **.filter** (Boolean) - Enables or disables image filters.
  - **.scaleMode** (String) - Image scaling mode (e.g., 'fit', 'cover').
  - **.resizeToW** (Number) - Target width for image resizing.
  - **.resizeToH** (Number) - Target height for image resizing.
  - **.advancedEditing** (Boolean) - Enables advanced image editing features.
  - **.uploadZoneMovable** (Boolean) - Allows moving the upload zone.
  - **.uploadZoneRemovable** (Boolean) - Allows removing the upload zone.

#### Custom Image Parameters
- **.customImageParameters** (Object)
  - **.minW** (Number) - Minimum image width.
  - **.minH** (Number) - Minimum image height.
  - **.maxW** (Number) - Maximum image width.
  - **.maxH** (Number) - Maximum image height.
  - **.minDPI** (Number) - Minimum image DPI.
  - **.maxSize** (Number) - Maximum image file size.

#### Custom Text Parameters
- **.customTextParameters** (Object) - Object for custom text configuration (details not specified).

#### Custom Additions
- **.customAdds** (Object)
  - **.designs** (Boolean) - Enables custom designs.
  - **.uploads** (Boolean) - Enables custom uploads.
  - **.texts** (Boolean) - Enables custom texts.
  - **.drawing** (Boolean) - Enables custom drawing.

#### QR Code Properties
- **.qrCodeProps** (Object)
  - **.autoCenter** (Boolean) - Automatically centers QR code.
  - **.draggable** (Boolean) - Allows dragging the QR code.
  - **.removable** (Boolean) - Allows removing the QR code.
  - **.resizable** (Boolean) - Allows resizing the QR code.

### Methods

- **.merge(defaults, [merge]) ⇒ Object**
  - Merges default parameters with provided merge parameters.
  - **defaults** (Object) - Default configuration object.
  - **merge** (Object, Optional) - Object with parameters to merge.
  - **Returns**: An object representing the merged configuration.

- **.getParameterKeys() ⇒ Array**
  - Returns an array of all available parameter keys.
  - **Returns**: An array of strings representing parameter keys.

### Request Example
```json
{
  "curveReverse": true,
  "maxLines": 5,
  "imageParameters": {
    "uploadZone": true,
    "scaleMode": "fit"
  }
}
```

### Response Example
```json
{
  "message": "Configuration parameters retrieved successfully."
}
```
```
Tokens:
Raw