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

Combine multiple image into and create single combined image

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

// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initStyles from '../../initStyles';
import initHTML from '../../initHTML';
import i18next from "i18next";
import { hotReloadAlpineComponent } from '../../hotReloader';
initHTML('labelling-tab',  loadLabellingTabHTML)

import fontUploadModal from '../fontUploadModal/fontUploadModal';
document.addEventListener('alpine:init', function() {
    Alpine.data('fontUploadModal',fontUploadModal)
})

export default () => ({
    init() {
        initStyles(this.$el.shadowRoot);
        if(module.hot) {
                        
                    module.hot.accept('./labellingTab.html', function() {
                        console.log('change detected')
                        hotReloadAlpineComponent(this.$el.getRootNode().host ,loadLabellingTabHTML)
                    }.bind(this));
                }
    },
    uploadedFontId: 0,
    defaultFonts: [
        {id: 'default-font-0', name: 'Arial'},
        {id: 'default-font-1', name: 'Verdana'},
        {id: 'default-font-2', name: 'Tahoma'},
        {id: 'default-font-3', name: 'Trebuchet MS'},
        {id: 'default-font-4', name: 'Times New Roman'},
        {id: 'default-font-5', name: 'Georgia'},
        {id: 'default-font-6', name: 'Garamond'},
        {id: 'default-font-7', name: 'Courier New'},
        {id: 'default-font-8', name: 'Brush Script MT'}
    ],
    addTemplate(template) {
        this.$store.canvas.addTemplateToCanvas(template);
    },
    templates: [{
        text: i18next.t('headingTemplate', {lng: Alpine.store('canvas').currentLocale}),
        fontSize: 18,
        fontWeight: 700,
        fontFamily: 'Inter'
    },{
        text: i18next.t('subHeadingTemplate', {lng: Alpine.store('canvas').currentLocale}),
        fontSize: 14,
        fontWeight: 500,
        fontFamily: 'Inter'
    },{
        text: i18next.t('textTemplate', {lng: Alpine.store('canvas').currentLocale}),
        fontSize: 12,
        fontWeight: 400,
        fontFamily: 'Inter'
    }],
    enteredText: '', 
    uploadedFonts: [],
    tempFonts: [],
    removeTempFonts() {
        this.tempFonts = [];
    },
    removeFonts(fontIndex) {
        this.uploadedFonts.splice(fontIndex,1);
    },
    selectedFont: '',
    setSelectedFont(fontName) {
        this.$store.canvas.setLabelFont(fontName.substring(0, fontName.lastIndexOf('.')) || fontName);
    },
    addLabel(text) {
        this.$store.canvas.addLabelToCanvas(text);
    },
    loadFontInBrowser(name, url) {
        let newFont = new FontFace(name, url);

        newFont.load().then(function(loadedFont) {
            document.fonts.add(loadedFont);
            window.__canvas.renderAll();
        }).catch(function(error) {
            console.log('Failed to load font: ' + error)
        })
    },
    
    fonttrigger: {
        ['@font-uploaded.window'](event) {
            let dt = new DataTransfer();
            for (const file of event.detail.files) {
                dt.items.add(file);
            }
            let files = dt.files;

           
            this.$store.elements.fontUploadEL.files = files;
        
            this.removeTempFonts();
            
            [...files].forEach(file => {
                let reader = new FileReader();
                reader.onload = (readEvent) => {
                    this.tempFonts.push({
                        name: file.name,
                        label: file.name,
                        url: readEvent.target.result
                    })
                    this.loadFontInBrowser(file.name.substring(0, file.name.lastIndexOf('.')) || file.name, 'url(' + readEvent.target.result + ')');
                }
                reader.readAsDataURL(file);
            })
        },   
        ['@fonts-added-from-api.window'](event) {
            event.detail.fonts.forEach(font => {
                this.addUploadedFonts(font);
                this.loadFontInBrowser(font.name.substring(0, font.name.lastIndexOf('.')) || font.name, 'url(' +  font.url + ')')
            })
        },
        ['@canvas-reset.window'](event) {
            this.resetUploadedFonts();
        }  
    },        
    addUploadedFonts(font) {
        this.uploadedFonts.push({
            id: font.id,
            name: font.name,
           // label: font.name,
            nameOnServer: font.nameOnServer,
            isRemovable: true
        });
    },
    async uploadNewFonts(configuratorId) {
        this.$store.modal.closeModal(this.$store.elements.fontUploadModalEl)
        if(this.$store.elements.fontUploadEL.files.length) {
            const uploadObj = {
                files: this.$store.elements.fontUploadEL.files,
                action: `${this.$store.canvas.apiConfig.apiUrl}/api/v1/product-configurators/${configuratorId || null}/font-families`,
                type: 'fonts[]'
            }

            const data = await this.$store.uploadStore.uploadFilesToServer(uploadObj);
                
            data?.data?.fonts?.forEach(function(font) {
                this.addUploadedFonts(font)
            }.bind(this));
            this.$store.elements.fontUploadEL.value = null;
           
        }
    },
    removeUploadedFonts(font) {
        fontIndex = this.uploadedFonts.findIndex(uploadedFont => uploadedFont.id === font.id)
        this.uploadedFonts.splice(fontIndex,1)
    },
    resetUploadedFonts() {
        this.uploadedFonts = [];
    },
    selectedLabelSize: null,
    labelSizes: [
        { id: 1, label: 'XS', scale: 0.25 },
        { id: 2, label: 'S', scale: 0.5 },
        { id: 3, label:'M', scale: 1 },
        { id: 4, label: 'L', scale: 1.5 },
        { id: 5, label: 'XL', scale: 2 },
        { id: 6, label: 'XXL', scale: 3 }
    ],
    getSelectedScale() {
        if(this.selectedLabelSize) {
            return this.labelSizes.find(labelSize => labelSize.label === this.selectedLabelSize).scale;
        }
        return 0;
    },
    toggleSelectedLabelSize() {
        if(this.selectedLabelSize) {
            const selectedLabelSizeObj = this.labelSizes.find(labelSize => labelSize.label === this.selectedLabelSize);
            const selectedLabelSizeIndex = this.labelSizes.indexOf(selectedLabelSizeObj);
            const nextIndex = (selectedLabelSizeIndex + 1) % this.labelSizes.length;
        
            this.selectedLabelSize = this.labelSizes[nextIndex].label;

        } else {
            this.selectedLabelSize = 'XS';
        }
    },
    sizeHandler() {
        this.toggleSelectedLabelSize();
    }
    
})