aico-image-editor/src/components/configurator2d/configurator2d.js

Combine multiple image into and create single combined image

//import Alpine from 'alpinejs';
const loadConfigurator2dHTML = () => import(/* webpackMode: "eager" */'./configurator2d.html')

import colorTab from '../canvasControls/colorTab/colorTab';
import colorPicker from '../colorPicker/colorPicker';
import fabricCanvas from '../fabricCanvas/fabricCanvas';
import controlBar from '../controlBar/controlBar';

import backgroundRemoval from '../backgroundRemoval/backgroundRemoval';

import { hotReloadAlpineComponent } from '../../hotReloader';

document.addEventListener('alpine:init', function() { 
    Alpine.data('colorTab', colorTab);
    Alpine.data('colorPicker',colorPicker)
    Alpine.data('backgroundRemoval',backgroundRemoval)
    Alpine.data('fabricCanvas',fabricCanvas)
    Alpine.data('controlBar', controlBar)
})


// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initStyles from '../../initStyles';
import initHTML from '../../initHTML';
initHTML('configurator-2d',  loadConfigurator2dHTML)



export default () => ({
    init() {
        initStyles(this.$el.shadowRoot);
        if(module.hot) {
            module.hot.accept('./configurator2d.html', function() {
                console.log('change detected')
                hotReloadAlpineComponent(this.$el.getRootNode().host ,loadConfigurator2dHTML)
            }.bind(this));
        }
    },
    saveDropdownInstance: null,
    createDropdown(el) {
        if(!this.saveDropdownInstance) {
            if(!window.bootstrap) {
                const Dropdown = require('bootstrap/js/dist/dropdown')
                this.saveDropdownInstance = new Dropdown(el, {
                    reference: "parent",
                    autoClose: "inside"
                });
            } else {
                this.saveDropdownInstance = new bootstrap.Dropdown(el, {
                    reference: "parent",
                    autoClose: "inside"
                })
            }
            
        }
    },
    toggleDropdown() {
     this.saveDropdownInstance?.toggle()   
    },
    presetCanvasDim: '',
    updateCanvasDim() {
        // Split the string at 'x'
        const parts = this.presetCanvasDim.split('x');

        this.$store.canvas.canvasWidth = parseInt(parts[0]);
        this.$store.canvas.canvasHeight = parseInt(parts[1]);
        this.updateCanvasAspectRatio()
    },
    populateSizeTemplates(sizeTemplates) {
        sizeTemplates.forEach((sizeTemplate) => {
            if(!this.$store.canvas.sizeTemplates.find(sizeTmpl => sizeTmpl.id === sizeTemplate.id)) {
                this.$store.canvas.sizeTemplates.push(sizeTemplate)
            }
        })
    },
    populateSizeTemplatesForWorkspace(sizeTemplates) {
        sizeTemplates.forEach((sizeTemplate) => {
            if(!this.$store.canvas.sizeTemplatesForWorkspace.find(sizeTmpl => sizeTmpl.id === sizeTemplate.id)) {
                this.$store.canvas.sizeTemplatesForWorkspace.push(sizeTemplate)
            }
        })
    },
    isWorkspaceTemplate: false,
    currentSizePresetLabel: '',
    addSizeToTemplate() {
        if( this.$store.canvas.canvasWidth && this.$store.canvas.canvasHeight ) {
            const sizeTemplate = {
                id: `${this.currentSizePresetLabel || 'custom-template'} - ${this.$store.canvas.canvasWidth} x ${this.$store.canvas.canvasHeight}`,
                label: this.currentSizePresetLabel || `custom-template`,
                width: this.$store.canvas.canvasWidth,
                height: this.$store.canvas.canvasHeight,
                scalingStretegy: this.$store.canvas.scalingStretegy
            }
            if(!this.isWorkspaceTemplate) {
                this.populateSizeTemplates([sizeTemplate])
            } else {
                const templates = [...this.$store.canvas.sizeTemplatesForWorkspace];
                if(!templates.find(sizeTmpl => sizeTmpl.id === sizeTemplate.id)) {
                    templates.push(sizeTemplate)
                }
                this.$store.canvas.isServerLoaderCanvasVisible = true;
                fetch(`${this.$store.canvas.apiConfig.apiUrl}/api/v1/product-configurators/size-templates`,  {
                    method: "POST",
                    body: JSON.stringify({
                        "sizeTemplates": templates
                    }),
                    headers: {
                        "Content-Type": "application/json",
                        "Authorization": `Bearer ${this.$store.canvas.apiConfig.apiToken}`,
                    },
                    redirect: "follow"
                })
                .then((response) => {
                    return response.json();
                })
                .then((data) => {
                    this.$store.canvas.isServerLoaderCanvasVisible = false;
                    this.populateSizeTemplatesForWorkspace([sizeTemplate])
                })
                .catch((error) => {
                    this.$store.canvas.isServerLoaderCanvasVisible = false;
                    console.error(error)
                });
            }
        }
    },
    getSizeTemplateForWorkspace() {
        fetch(`${this.$store.canvas.apiConfig.apiUrl}/api/v1/product-configurators/size-templates`,  {
            method: "GET",
            
            headers: {
                "Content-Type": "application/json",
                "Authorization": `Bearer ${this.$store.canvas.apiConfig.apiToken}`,
            },
            redirect: "follow"
        })
        .then((response) => {
            return response.json();
        })
        .then((data) => {
            this.populateSizeTemplatesForWorkspace(data.data)
        })
        .catch((error) => {
            console.error(error)
        });
    },
    clearSizeTemplates() {
        while(this.$store.canvas.sizeTemplates.length) {
            this.$store.canvas.sizeTemplates.pop()
        }
    },
    updateCanvasAspectRatio() {
        const canvasStore = this.$store.canvas;
        let newWidth = canvasStore.canvasWidth = parseInt(canvasStore.canvasWidth);
        let newHeight = canvasStore.canvasHeight = parseInt(canvasStore.canvasHeight)

        if( !(isNaN(canvasStore.canvasWidth)) && !(isNaN(canvasStore.canvasHeight)) ) {
    
            const canvasResizeEL = this.$store.elements.canvasResizeEL;
            
    
            // height width with viewporttransform offset
            const actualCanvasWidth = canvasResizeEL.offsetWidth - 2;
            const actualCanvasHeight = canvasResizeEL.offsetWidth - 2
    
    
            if(canvasStore.canvasWidth > actualCanvasWidth || canvasStore.canvasHeight > actualCanvasHeight) {
            //if(false) {
                if(canvasStore.canvasWidth > canvasStore.canvasHeight) {
                    newWidth = actualCanvasWidth;
                    newHeight = actualCanvasWidth * canvasStore.canvasHeight / canvasStore.canvasWidth;
                    
            
                } else if (canvasStore.canvasHeight > canvasStore.canvasWidth) {
                    newWidth = actualCanvasHeight * canvasStore.canvasWidth / canvasStore.canvasHeight;
                    newHeight = actualCanvasHeight;
                    
                } else {
                    newWidth = actualCanvasWidth;
                    newHeight = actualCanvasHeight;
                    
                }
            
            } else {
                newWidth = canvasStore.canvasWidth;
                newHeight = canvasStore.canvasHeight;
            }

            this.$store.canvas.setCanvasDimensions({
                width: newWidth,
                height: newHeight
            })
            this.$store.canvas.resetCanvasData(__canvas)
        }
    },

    
});