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

Combine multiple image into and create single combined image

const loadVersionPanelHTML = () => import(/* webpackMode: "eager" */'./versionPanel.html');

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

initHTML('version-panel',  loadVersionPanelHTML)
import { hotReloadAlpineComponent } from '../../hotReloader';

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

import { productPicturesSubTab } from '../pictureTab/pictureTab';


export default () => ({
    init() {
        initStyles(this.$el.shadowRoot);

        if(module.hot) {
            module.hot.accept('./versionPanel.html', function() {
                console.log('change detected')
                hotReloadAlpineComponent(this.$el.getRootNode().host ,loadVersionPanelHTML)
            }.bind(this));
        }
    },
    //historyRecords: Alpine.$persist([]),
    historyRecords: [],
    viewPreviousRecord(data) {
        const $canvasStore = this.$store.canvas,
              canvas = window.__canvas;
        let self = this;
        $canvasStore.isServerLoaderCanvasVisible = true;
        canvasHistory.clear();
        const loadingData = data?.canvasData?.savedCanvasSize ? data.canvasData : '';
        $canvasStore.isCanvasDataLoading = !!loadingData;

        if(loadingData) {
            canvas.loadFromJSON(loadingData,function() {
                $canvasStore.isCanvasDataLoading = false;
                $canvasStore.sortObjects(canvas);

                //whenever reloading again from server resize whole canvas so that it 
                // is auto adjustred to the width for which it was made for
                let savedCanvasDim;
                if(loadingData.savedCanvasDim) {
                    savedCanvasDim = {
                        width: loadingData.savedCanvasDim.width / loadingData.savedViewportTransform[0],
                        height: loadingData.savedCanvasDim.height / loadingData.savedViewportTransform[3]
                    }
                }
                $canvasStore.resizeCanvas(canvas, loadingData.savedCanvasSize / loadingData.savedViewportTransform[0], false, savedCanvasDim)
                //get array of id of all canvas objects whose id is nummeric 
                // and find maximum of them to apply it to maximum
                const allNumericObjects = canvas.getObjects().filter(obj => typeof obj.idNumeric === 'number').map(obj => obj.idNumeric);
                if(allNumericObjects?.length) {
                    const maxObjID = Math.max(...(allNumericObjects))
                    $canvasStore.currentLayerId = maxObjID + 1;
                }
                // if(typeof object.idNumeric === 'number') {
                //     this.currentLayerId = object.idNumeric + 1;
                // }
                self.$dispatch('canvas-data-viewed', {
                    canvasBrightness: loadingData.canvasBrightness,
                    canvasContrast: loadingData.canvasContrast,
                    canvasGrayScale: loadingData.canvasGrayScale,

                })
                $canvasStore.addCropRectangle(canvas)
                $canvasStore.isSaveButtonDisabled = true;
                $canvasStore.isServerLoaderCanvasVisible = false;
            }, function (o, object) {
                
            });
        } else {
            $canvasStore.resetCanvasData(canvas)
            $canvasStore.isServerLoaderCanvasVisible = false;
        }
    },
    replacePreviousRecord(record) {
        //console.log(record)
        const $canvasStore = this.$store.canvas;
        this.viewPreviousRecord(record)

        
        $canvasStore.isServerLoaderCanvasVisible = true;
        const formData = new FormData();
        formData.append('_method', 'PUT');
        formData.append('historyId', record.id)

        fetch(`${$canvasStore.apiConfig.apiUrl}/api/v1/product-configurators/${$canvasStore.configuratorId}`, {
            method: "POST",
            body: formData,
            "timeout": 0,
            "headers": {
                "Authorization": `Bearer ${$canvasStore.apiConfig.apiToken}`,
            },
            redirect: 'follow'
        }).then((response) => {
            return response.json()
        })
        .then((data) => {
            Alpine.store('canvas').isServerLoaderCanvasVisible = false;
        })
        .catch((error) => {
            console.error(error);
        });
    },
    resetRecords() {
        this.historyRecords = [];
    },
    updateRecords(history) {
        history.forEach(record => {
            // if no record already exists wth same id in records, otherwise it is same record as fetched
            if(!(this.historyRecords.some(historyRecord => historyRecord.id === record.id))) {
                this.historyRecords.push(record)
            }
        })
    },
    fetchAndUpdateRecords(configuratorId) {
        const $canvasStore = this.$store.canvas;
        return fetch(`${$canvasStore.apiConfig.apiUrl}/api/v1/product-configurators/${configuratorId}`, {
            method: "GET",
            headers: {
                "Authorization": `Bearer ${$canvasStore.apiConfig.apiToken}`,
            },
            redirect: 'follow'
        }).then((response) => {
            if (response.ok) {
                return response.json()
            } else {
                throw new Error('Network response was not OK');
            }
        }).then((data) => {
            //console.log(data.data.history)
            this.updateRecords(data.data.history);
        })
    },
    versionPanelTrigger: {
        ['@canvas-data-saved.window'](event) {
            this.fetchAndUpdateRecords(event.detail.configuratorId);
        },
        ['@canvas-data-restored.window'](event) {
            this.updateRecords(event.detail.history)
        },
        ['@canvas-reset.window'](event) {
            this.resetRecords();
        },
    },
    formatDate(dateString) {
        //const options = { year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit" };

        const date = new Date(dateString);

        // Format date and time separately
        const formattedDate = date.toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
        });

        const formattedTime = date.toLocaleTimeString('en-US', {
            hour: '2-digit',
            minute: '2-digit',
            hour12: false
        });

        return `${formattedDate}. ${formattedTime}`;
        
    },
    get defaultVersionUrl() {
        return this.$store.canvas.apiConfig?.productMainImage
    },
    async preloadImage(record) {
        return  new Promise((resolve, reject) => {
            const image = new Image()
            image.onload = resolve
            image.onerror = reject
            image.src = record.product3dImage
        })
    }
    
    
    
})