aico-image-editor
Version:
Combine multiple image into and create single combined image
167 lines (146 loc) • 9.2 kB
JavaScript
//import Alpine from 'alpinejs';
const loadBackgroundSubTabHTML = () => import(/* webpackMode: "eager" */'./backgroundSubTab.html');
import initStyles from '../../../../initStyles';
import initHTML from '../../../../initHTML';
initHTML('background-sub-tab', loadBackgroundSubTabHTML)
import { getBackgrounds } from '../../../../getImages';
import backgroundCropModal from '../../../backgroundCropModal/backgroundCropModal';
document.addEventListener('alpine:init', function() {
Alpine.data('backgroundCropModal',backgroundCropModal)
})
export default () => ({
init() {
initStyles(this.$el.shadowRoot);
this.$dispatch('set-bg-length', {backgrounds: this.backgrounds})
},
shouldDeselectBackgroundImage: false,
backgroundSearch: '',
isUploadBlockVisible: false,
hideUploadBlock() {
this.isUploadBlockVisible = false;
},
showUploadBlock() {
this.isUploadBlockVisible = true;
},
tempBackgrounds: [],
removeTempBackgrounds() {
this.tempBackgrounds = [];
},
selectedBackground: null,
placedBackground: null,
backgrounds: [
{id: 'background-1', url: getBackgrounds().background7, label: 'blue background'},
{id: 'background-2', url: getBackgrounds().background8, label: 'pink background'},
{id: 'background-3', url: getBackgrounds().background6, label: 'yellow background'},
{id: 'background-4', url: getBackgrounds().background9, label: 'indigo background'},
{id: 'background-5', url: getBackgrounds().background10, label: 'green background'},
// {id: 'background-6', url: 'images/backgrounds/Mask Group 11.png', label: 'coffee background'},
{id: 'background-7', url: getBackgrounds().background12, label: 'red background'},
{id: 'background-8', url: getBackgrounds().background13, label: 'purple background'},
{id: 'background-9', url: getBackgrounds().background14, label: 'red background'},
// {id: 'background-10', url: 'images/backgrounds/Feiern/Bugano_Feiern_Ballone.jpg', label: 'Bugano_Feiern_Ballone background'},
// {id: 'background-11', url: 'images/backgrounds/Feiern/Bugano_Feiern_fallendes-Glitzer.jpg', label: 'Bugano_Feiern_fallendes-Glitzer background'},
// {id: 'background-12', url: 'images/backgrounds/Feiern/Bugano_Feiern_Glitzerstreifen.jpg', label: 'Bugano_Feiern_Glitzerstreifen background'},
// {id: 'background-13', url: 'images/backgrounds/Feiern/Bugano_Feiern_Konfetti.jpg', label: 'Bugano_Feiern_Konfetti background'},
// {id: 'background-14', url: 'images/backgrounds/Feiern/Bugano_Feiern_Party-Champagner.jpg', label: 'Bugano_Feiern_Party-Champagner background'},
// {id: 'background-15', url: 'images/backgrounds/Feiern/Bugano_Feiern_Vulkan-violet.jpg', label: 'Bugano_Feiern_Vulkan-violet background'},
// {id: 'background-16', url: 'images/backgrounds/Feiern/Bugano_Feiern-HappyBirthday-Giraffe.jpg', label: 'Bugano_Feiern-HappyBirthday-Giraffe background'},
// {id: 'background-17', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Blumen-gold.jpg', label: 'Bugano_Hintergruende_Blumen-gold background'},
// {id: 'background-18', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Blumen-mit-Text.jpg', label: 'Bugano_Hintergruende_Blumen-mit-Text background'},
// {id: 'background-19', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Blumen-weiss.jpg', label: 'Bugano_Hintergruende_Blumen-weiss background'},
// {id: 'background-20', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Danke.jpg', label: 'Bugano_Hintergruende_Danke background'},
// {id: 'background-21', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Explosion-violett.jpg', label: 'Bugano_Hintergruende_Explosion-violett background'},
// {id: 'background-22', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Feuer.jpg', label: 'Bugano_Hintergruende_Feuer background'},
// {id: 'background-23', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Glueck.jpg', label: 'Bugano_Hintergruende_Glueck background'},
// {id: 'background-24', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Graffiti.jpg', label: 'Bugano_Hintergruende_Graffiti background'},
// {id: 'background-25', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Muster-gold-schwarz.jpg', label: 'Bugano_Hintergruende_Muster-gold-schwarz background'},
// {id: 'background-26', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Muster-gold-weiss.jpg', label: 'Bugano_Hintergruende_Muster-gold-weiss background'},
// {id: 'background-27', url: 'images/backgrounds/Hintergruende/Bugano_Hintergruende_Rosen-mit-Text.jpg', label: 'Bugano_Hintergruende_Rosen-mit-Text background'},
// {id: 'background-28', url: 'images/backgrounds/Kinder/Bugano_Kinder_Bagger.jpg', label: 'Bugano_Kinder_Bagger background'},
// {id: 'background-29', url: 'images/backgrounds/Kinder/Bugano_Kinder_Dino.jpg', label: 'Bugano_Kinder_Dino background'},
// {id: 'background-30', url: 'images/backgrounds/Kinder/Bugano_Kinder_Einhorn.jpg', label: 'Bugano_Kinder_Einhorn background'},
// {id: 'background-31', url: 'images/backgrounds/Kinder/Bugano_Kinder_Marienkafer.jpg', label: 'Bugano_Kinder_Marienkäfer background'},
// {id: 'background-32', url: 'images/backgrounds/Kinder/Bugano_Kinder_Prinzessin.jpg', label: 'Bugano_Kinder_Prinzessin background'},
// {id: 'background-33', url: 'images/backgrounds/Liebe/Bugano_Liebe_Herzen-gross.jpg', label: 'Bugano_Liebe_Herzen-gross background'},
// {id: 'background-34', url: 'images/backgrounds/Liebe/Bugano_Liebe_Herzen-klein.jpg', label: 'Bugano_Liebe_Herzen-klein background'},
// {id: 'background-35', url: 'images/backgrounds/Liebe/Bugano_Liebe_Hochzeit-gold.jpg', label: 'Bugano_Liebe_Hochzeit-gold background'},
// {id: 'background-36', url: 'images/backgrounds/Liebe/Bugano_Liebe_Hochzeit-grun.jpg', label: 'Bugano_Liebe_Hochzeit-grün background'},
],
selectBackground(id,url) {
if(id || url) {
this.shouldDeselectBackgroundImage = false;
}
this.selectedBackground = id;
this.$store.canvas.setCanvasBackground(url);
},
addBackground(background) {
if(background.url) {
this.backgrounds.unshift({
id: background.id,
url: background.url,
name: background.name,
label: background.name,
isRemovable: true,
cropperData: background.cropperData,
originalUrl: background.originalUrl
})
this.isUploadBlockVisible = false;
}
},
updateBackground(background) {
const backgroundToUpdate = this.backgrounds.find(bg => bg.id === background.id);
backgroundToUpdate.url = background.url;
backgroundToUpdate.cropperData = background.cropperData;
},
removeBackground(background) {
const backgroundIndex = this.backgrounds.findIndex(bg => bg.id === background.id)
this.backgrounds.splice(backgroundIndex,1)
},
resetBackgrounds() {
// console.log('reset background called')
// here reverse loop is used to prevent skipping item which occurs after modifying array
for(let i = this.backgrounds.length - 1; i >=-0; i--) {
if (this.backgrounds[i].isRemovable) {
this.backgrounds.splice(i, 1);
}
}
},
filterBackground() {
this.backgrounds.forEach((background) => {
background.hidden = !(background.label.includes(this.backgroundSearch));
})
},
backgroundtrigger: {
['@backgrounds-added-from-api.window'](event) {
event.detail.backgrounds.forEach(background => {
this.addBackground(background);
})
},
['@canvas-reset.window'](event) {
this.resetBackgrounds();
},
['@backgrounds-upated-from-api.window'](event) {
event.detail.backgrounds.forEach(background => {
this.updateBackground(background);
})
},
['@backgrounds-cleard.window'](event) {
this.removeTempBackgrounds();
}
},
async swapWithAIImage(background) {
const blob = await fetch(this.$store.canvas.aiImageSrc).then(response => response.blob())
const dt = new DataTransfer();
dt.items.add(new File([blob], background.name, { type: "image/png", lastModified: Date.now()}))
const editUploadObj = {
files: dt.files,
action: `${this.$store.canvas.apiConfig.apiUrl}/api/v1/product-configurators/images/${background.id}`,
type: 'image',
cropperData: background.cropperData
}
const data = await this.$store.uploadStore.updateImageInServer(editUploadObj);
if(data?.data) {
this.$dispatch('backgrounds-upated-from-api', {backgrounds: [data?.data] })
}
}
})