aico-image-editor/src/components/pictureTab/subtabs/productPicturesSubTab/productPicturesSubTab.js

Combine multiple image into and create single combined image

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


import initStyles from '../../../../initStyles';
import initHTML from '../../../../initHTML';

initHTML('product-pictures-sub-tab',  loadProductPicturesSubTabHTML)

import Cropper from 'cropperjs';


import mainPictureCropModal from '../../../mainPictureCropModal/mainPictureCropModal';

document.addEventListener('alpine:init', function() {
    Alpine.data('mainPictureCropModal',mainPictureCropModal)
})


import { productPictures } from '../../../../getImages';



export default {
    init() {
        initStyles(this.$el.shadowRoot);
        this.$dispatch('set-pictures-length', {pictures: this.mainPictures.length + this.subPictures.length})
    },
    isSubPicturesVisible: false,
    pictureSearch: '',
    selectedMainPicture: null,
    selectedSubPicture: null,
    mainPictures: productPictures.mainPictures,
    subPictures: productPictures.subPictures,
    selectMainPicture(id,url) {
        this.selectedMainPicture = id;
        this.$store.canvas.addPictureToCanvas(url, 'mainPicture');
    },
    selectSubPicture(id,url) {
        this.selectedSubPicture = id;
        this.$store.canvas.addPictureToCanvas(url, 'subPicture');
    },
    filterPicture() {
        this.mainPictures.forEach((mainPicture) => {
            const labelMatch = mainPicture.label.includes(this.pictureSearch);
            mainPicture.hidden = !labelMatch;
        });
        this.subPictures.forEach((subPicture) => {
            const labelMatch = subPicture.label.includes(this.pictureSearch);
            subPicture.hidden = !labelMatch;
        });
        
    },
    addMainPicture(mainPicture) {
        //this.mainPictures.push(mainPicture);

        if(mainPicture.url) {
            this.mainPictures.unshift({
                id: mainPicture.id,
                url: mainPicture.url,
                //url: mainPicture.cropperData?.originalFileDataUrl, // use this when testing locally
                name: mainPicture.name,
                label: mainPicture.name,
                type: 'mainPicture',
                isRemovable: true,
                cropperData: mainPicture.cropperData,
                originalUrl: mainPicture.originalUrl
            })
            this.isUploadBlockVisible = false;
        }
    },
    updateMainPicture(mainPicture) {
        const mainPictureToUpdate = this.mainPictures.find(mp => mp.id === mainPicture.id);
        mainPictureToUpdate.url = mainPicture.url;
        mainPictureToUpdate.cropperData = mainPicture.cropperData;
    },
    addSubPicture(subPicture) {
        this.subPictures.push(subPicture);
    },
    resetMainPictures() {
        // console.log('reset shapes called')
       // here reverse loop is used to prevent skipping of item which occurs after modifying array
        for(let i = this.mainPictures.length - 1; i >=-0; i--) {
            if (this.mainPictures[i].isRemovable) {
                this.mainPictures.splice(i, 1);
            }
        }
    },
    pictureTrigger: {
        ['@main-pictures-added-from-api.window'](event) {
            event.detail.mainPictures.forEach(mainPicture => {
                this.addMainPicture(mainPicture);
                this.$store.shapeCropperModalStore.populateAspectRatio(mainPicture)

            })
        },

        ['@main-pictures-updated-from-api.window'](event) {
            event.detail.mainPictures.forEach(mainPicture => {
                this.updateMainPicture(mainPicture);
                this.$store.shapeCropperModalStore.populateAspectRatio(mainPicture)
            })
        },
        ['@pictures-cleard.window'](event) {
            this.removeTempPictures();    
        },
        ['@canvas-reset.window'](event) {
            this.resetMainPictures();
        },
        ['@canvas-is-ready.window'](event) {
            this.mainPictures.forEach((mainPicture) => {
                if(!mainPicture.isRemovable) {
                    this.selectMainPicture(mainPicture.id, mainPicture.url)
                }
            })
        }
            
    },
    isUploadBlockVisible: false,
    hideUploadBlock() {
        this.isUploadBlockVisible = false;
    },
    showUploadBlock() {
        this.isUploadBlockVisible = true;
    },
    tempPictures: [],
    removeTempPictures() {
        this.tempPictures = [];
    },
    async swapWithAIImage(mainPicture) {
        const blob = await fetch(this.$store.canvas.aiImageSrc).then(response => response.blob())
        const dt = new DataTransfer();
        dt.items.add(new File([blob], mainPicture.name, { type: "image/png", lastModified: Date.now()}))
        
        const editUploadObj = {
            files: dt.files,
            action: `${this.$store.canvas.apiConfig.apiUrl}/api/v1/product-configurators/images/${mainPicture.id}`,
            type: 'image',
            cropperData: mainPicture.cropperData
        }
        const data = await this.$store.uploadStore.updateImageInServer(editUploadObj);

        if(data?.data) {
            this.$dispatch('main-pictures-updated-from-api', {mainPictures: [data?.data]});
        }


    }

};