Using Node Packages

This document explains how to integrate the Mypixia widget into your JavaScript projects using various Node.js package managers and frameworks.

Installation

First, install the Mypixia widget package using npm or yarn:

npm install @mypixia/simplex-designer
 or
yarn add @mypixia/simplex-designer

Integration Examples

React

import React from "react";
import Mypixia  from "@mypixia/simplex-designer";



function App() {
        const handleGetDesign = (design) => {
        //default to DOM
        const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
        if (designObj) {
        designObj.getPNG().then(pngFiles=> {
        console.log('PNG Data:', pngFiles);
        // Handle File submission here
        });

        // designObj.getJPEG().then(jpegFiles => {
        //     console.log('JPEG Data:', jpegFiles);
        //     // Handle JPEG data here
        // });
        //
        // designObj.getWEBP().then(webpFiles => {
        //     console.log('Webp Data:', webpFiles);
        //     // Handle webp files here
        // });
        //
        // designObj.getSVG().then(svgFiles => {
        //     console.log('SVG Data:', svgFiles);
        //     // Handle svg files here
        // });
        } else {
            console.error('Canvas instance not found or getDesignFormats method not available');
        }

        }


        return (
        <div style={{marginLeft:'150px', marginRight:'150px'}}>

        <button onClick={() => handleGetDesign()}>
            Get design
        </button>
        <br/><br/>
        <hr/>
        <Mypixia
            canvasId="my-canva"
            theme={{
                primaryColor: "#000000",
                primaryColorLight: "#cf7e52",
                secondaryColor: "#cf7e52",
                tertiaryColor: "#FFFFFF"
            }}
            apiKey={'YOUR_API_KEY'}
            apiEndpoint={'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS'}
            isPlainColor = "Y"
            product={
                {
                    name: "Premium Crew Neck T-Shirt",
                    category: "Tshirts",
                    description: "Men's crew neck t-shirts",
                    plainColor: "Y",
                    mainImage : "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
                    colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
                    sections: [
                        {
                            sectionName: "Sleeve-left",
                            sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
                        },
                        {
                            sectionName: "Back",
                            sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
                        }
                    ]
                }
            }

        enabledModules = {['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE',  'QRCODE', 'BARCODE']}
        actionButtons={{
        share: true, //share Design
        download: false, // download button
         }}

        additionalActionButton={
        {
            btnLabel:  "Your Custom Action Button",
            btnAction: () => {
                console.log("handle you custom Button clicked");

                //Example, grab the image that is being edited
                const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
                if (designObj) {
                    designObj.getPNG().then(pngFiles => {
                        console.log('PNG Data:', pngFiles);
                    });
                }
            },
            btnColor: '#008000',//defaults to primary theme color
           }

         }
        />

     </div>
    )
}

export default App

Explanation:

• Canvas Interaction Functionality: The handleGetDesign function retrieves the canvas instance from the DOM using document.getElementById('my-canva')?.instance?.getDesignFormats() and allows exporting the current design in various image formats (PNG, JPEG, WEBP, SVG) using Promise-based methods, with PNG being the currently active export format.
• Theme Configuration: Your custom visual theme

TypeScript

        import React from "react";
        import Mypixia from "@mypixia/simplex-designer";

        // Define types for the Mypixia widget
        interface MypixiaTheme {
        primaryColor: string;
        primaryColorLight: string;
        secondaryColor: string;
        tertiaryColor: string;
       }

        interface ProductSection {
        sectionName: string;
        sectionImage: string;
      }

        interface MypixiaProduct {
        name: string;
        category: string;
        description: string;
        plainColor: string;
        mainImage: string;
        colorSettings: string[];
        sections: ProductSection[];
     }

        interface ActionButtons {
        share: boolean;
        download: boolean;
     }

        interface AdditionalActionButton {
        btnLabel: string;
        btnAction: () => void;
        btnColor: string;
     }

        // Define types for the design format handlers
        interface DesignFormat {
        getPNG(): Promise<any>;
        getJPEG(): Promise<any>;
        getWEBP(): Promise<any>;
        getSVG(): Promise<any>;
     }

        // Define type for DOM element with Mypixia instance
        interface MypixiaElement extends HTMLElement {
        instance?: {
            getDesignFormats(): DesignFormat;
        };
     }

        function App(): JSX.Element {
        const handleGetDesign = (): void => {
        // Default to DOM
        const canvasElement = document.getElementById('my-canva') as MypixiaElement;
        const designObj = canvasElement?.instance?.getDesignFormats();

        if (designObj) {
        designObj.getPNG().then((pngFiles) => {
        console.log('PNG Data:', pngFiles);
        // Handle File submission here
     });

        // designObj.getJPEG().then((jpegFiles) => {
        //   console.log('JPEG Data:', jpegFiles);
        //   // Handle JPEG data here
        // });
        //
        // designObj.getWEBP().then((webpFiles) => {
        //   console.log('Webp Data:', webpFiles);
        //   // Handle webp files here
        // });
        //
        // designObj.getSVG().then((svgFiles) => {
        //   console.log('SVG Data:', svgFiles);
        //   // Handle svg files here
        // });
    } else {
        console.error('Canvas instance not found or getDesignFormats method not available');
    }
    };

        // Define the enabled modules type
        type EnabledModule = 'STICKERS' | 'SHAPES' | 'ICONS' | 'TXT' | 'IMAGE' | 'QRCODE' | 'BARCODE';

        // Define the theme
        const theme: MypixiaTheme = {
        primaryColor: "#000000",
        primaryColorLight: "#cf7e52",
        secondaryColor: "#cf7e52",
        tertiaryColor: "#FFFFFF"
    };

        // Define the product
        const product: MypixiaProduct = {
        name: "Premium Crew Neck T-Shirt",
        category: "Tshirts",
        description: "Men's crew neck t-shirts",
        plainColor: "Y",
        mainImage: "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
        colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
        sections: [
    {
        sectionName: "Sleeve-left",
        sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
    },
    {
        sectionName: "Back",
        sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
    }
        ]
    };

        // Define enabled modules
        const enabledModules: EnabledModule[] = ['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE'];

        // Define action buttons
        const actionButtons: ActionButtons = {
        share: true, // Share Design
        download: false // Download button
    };

        // Define additional action button
        const additionalActionButton: AdditionalActionButton = {
        btnLabel: "Your Custom Action Button",
        btnAction: (): void => {
        console.log("handle you custom Button clicked");

        // Example, grab the image that is being edited
        const canvasElement = document.getElementById('my-canva') as MypixiaElement;
        const designObj = canvasElement?.instance?.getDesignFormats();
        if (designObj) {
        designObj.getPNG().then((pngFiles) => {
        console.log('PNG Data:', pngFiles);
    });
    }
    },
        btnColor: '#008000' // Defaults to primary theme color
    };

        return (
        <div style={{ marginLeft: '150px', marginRight: '150px' }}>
        <button onClick={() => handleGetDesign()}>
            Get design
        </button>
        <br /><br />
        <hr />
        <Mypixia
            canvasId="my-canva"
            theme={theme}
            apiKey={'YOUR_API_KEY'}
            apiEndpoint={'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS'}
            isPlainColor="Y"
            product={product}
            enabledModules={enabledModules}
            actionButtons={actionButtons}
            additionalActionButton={additionalActionButton}
        />
    </div>
      );
    }

 export default App;

Vue

<template>
    <div :style="{ marginLeft: '150px', marginRight: '150px' }">
    <button @click="handleGetDesign">
    Get design
</button>
<br /><br />
<hr />
<Mypixia
canvas-id="my-canva"
:theme="theme"
:api-key="apiKey"
:api-endpoint="apiEndpoint"
:is-plain-color="isPlainColor"
:product="product"
:enabled-modules="enabledModules"
:action-buttons="actionButtons"
:additional-action-button="additionalActionButton"
/>
</div>
</template>

<script>
  import Mypixia from '@mypixia/simplex-designer';

  export default {
   name: 'App',
   components: {
        Mypixia
    },
        data() {
        return {
        apiKey: 'YOUR_API_KEY',
        apiEndpoint: 'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS',
        isPlainColor: 'Y',
        theme: {
        primaryColor: "#000000",
        primaryColorLight: "#cf7e52",
        secondaryColor: "#cf7e52",
        tertiaryColor: "#FFFFFF"
    },
        product: {
        name: "Premium Crew Neck T-Shirt",
        category: "Tshirts",
        description: "Men's crew neck t-shirts",
        plainColor: "Y",
        mainImage: "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
        colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
        sections: [
    {
        sectionName: "Sleeve-left",
        sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
    },
    {
        sectionName: "Back",
        sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
    }
        ]
    },
        enabledModules: ['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE'],
        actionButtons: {
        share: true, // Share Design
        download: false // Download button
    }
    };
    },
        computed: {
        additionalActionButton() {
        return {
        btnLabel: "Your Custom Action Button",
        btnAction: () => {
        console.log("handle you custom Button clicked");

        // Example, grab the image that is being edited
        const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
        if (designObj) {
        designObj.getPNG().then(pngFiles => {
        console.log('PNG Data:', pngFiles);
    });
    }
    },
        btnColor: '#008000' // Defaults to primary theme color
    };
    }
    },
        methods: {
        handleGetDesign() {
        // Default to DOM
        const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
        if (designObj) {
        designObj.getPNG().then(pngFiles => {
        console.log('PNG Data:', pngFiles);
        // Handle File submission here
    });

        // designObj.getJPEG().then(jpegFiles => {
        //   console.log('JPEG Data:', jpegFiles);
        //   // Handle JPEG data here
        // });
        //
        // designObj.getWEBP().then(webpFiles => {
        //   console.log('Webp Data:', webpFiles);
        //   // Handle webp files here
        // });
        //
        // designObj.getSVG().then(svgFiles => {
        //   console.log('SVG Data:', svgFiles);
        //   // Handle svg files here
        // });
    } else {
        console.error('Canvas instance not found or getDesignFormats method not available');
    }
    }
    }
    };
 </script>

Angular

    // app.component.ts
    import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
    import * as Mypixia from '@mypixia/simplex-designer';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent implements AfterViewInit {
        @ViewChild('mypixiaContainer') mypixiaContainer: ElementRef;

        // Define properties used for the Mypixia widget
        theme = {
            primaryColor: "#000000",
            primaryColorLight: "#cf7e52",
            secondaryColor: "#cf7e52",
            tertiaryColor: "#FFFFFF"
        };

        product = {
            name: "Premium Crew Neck T-Shirt",
            category: "Tshirts",
            description: "Men's crew neck t-shirts",
            plainColor: "Y",
            mainImage: "https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",
            colorSettings: ["#FF0000", "#0000FF", "#008000", "#000000", "#FFFFFF", "#808080", "#FFFF00"],
            sections: [
                {
                    sectionName: "Sleeve-left",
                    sectionImage: "https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"
                },
                {
                    sectionName: "Back",
                    sectionImage: "https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"
                }
            ]
        };

        enabledModules = ['STICKERS', 'SHAPES', 'ICONS', 'TXT', 'IMAGE', 'QRCODE', 'BARCODE'];

        actionButtons = {
            share: true, // Share Design
            download: false // Download button
        };

        additionalActionButton = {
            btnLabel: "Your Custom Action Button",
            btnAction: () => {
                console.log("handle you custom Button clicked");

                // Example, grab the image that is being edited
                const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
                if (designObj) {
                    designObj.getPNG().then(pngFiles => {
                        console.log('PNG Data:', pngFiles);
                    });
                }
            },
            btnColor: '#008000' // Defaults to primary theme color
        };

        ngAfterViewInit() {
            this.initMypixia();
        }

        initMypixia() {
            if (this.mypixiaContainer && this.mypixiaContainer.nativeElement) {
                const mypixiaInstance = new Mypixia({
                    container: this.mypixiaContainer.nativeElement,
                    canvasId: "my-canva",
                    theme: this.theme,
                    apiKey: 'YOUR_API_KEY',
                    apiEndpoint: 'GET_FROM_EMAIL+OR_ACCOUNT_SETTINGS',
                    isPlainColor: "Y",
                    product: this.product,
                    enabledModules: this.enabledModules,
                    actionButtons: this.actionButtons,
                    additionalActionButton: this.additionalActionButton
                });
            }
        }

        handleGetDesign() {
            // Default to DOM
            const designObj = document.getElementById('my-canva')?.instance?.getDesignFormats();
            if (designObj) {
                designObj.getPNG().then(pngFiles => {
                    console.log('PNG Data:', pngFiles);
                    // Handle File submission here
                });

                // designObj.getJPEG().then(jpegFiles => {
                //   console.log('JPEG Data:', jpegFiles);
                //   // Handle JPEG data here
                // });
                //
                // designObj.getWEBP().then(webpFiles => {
                //   console.log('Webp Data:', webpFiles);
                //   // Handle webp files here
                // });
                //
                // designObj.getSVG().then(svgFiles => {
                //   console.log('SVG Data:', svgFiles);
                //   // Handle svg files here
                // });
            } else {
                console.error('Canvas instance not found or getDesignFormats method not available');
            }
        }
    }

Security Considerations

• Never hardcode your API key directly in your client-side JavaScript code.
• Use environment variables to store your API key.
• For sensitive operations, perform them on the server-side to avoid exposing your API key to the client.
• Implement appropriate security measures to protect your API key from unauthorized access.

By following these guidelines, you can easily integrate the Mypixia widget into your JavaScript projects using Node packages and leverage its powerful design capabilities. Remember to handle your API key securely and load the widget script properly for each framework.