aico-image-editor
Version:
Combine multiple image into and create single combined image
239 lines (210 loc) • 8.99 kB
JavaScript
//import Alpine from 'alpinejs';
const loadOwnShapeTabHTML = () => import(/* webpackMode: "eager" */'./ownShapeTab.html');
import {motiveData} from '../../motiveData';
// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initStyles from '../../initStyles';
import initHTML from '../../initHTML';
initHTML('own-shape-tab', loadOwnShapeTabHTML)
import { hotReloadAlpineComponent } from '../../hotReloader';
import Cropper from 'cropperjs';
import backgroundSubTab from './subtabs/backgroundSubTab/backgroundSubTab';
import catalogueSearch from '../catalogueSearch/catalogueSearch';
document.addEventListener('alpine:init', function() {
Alpine.data('backgroundSubTab',backgroundSubTab)
Alpine.data('catalogueSearch', catalogueSearch)
})
import { getShapes } from '../../getImages';
const allShapeCategories = [
{name: 'childrenBirthday', value: 'children-birthday'},
{name: 'genderReveal', value: 'gender-reveal'},
{name: 'adultBirthday', value: 'adult-birthday'},
{name: 'wedding', value: 'wedding'},
{name: 'engagementParty', value: 'engagement-party'},
{name: 'christmas', value: 'christmas'},
{name: 'firstAugust', value: 'august-1'}
];
export default () => ({
activeSubTab: 'motive',
setActiveSubTab(subTab) {
this.activeSubTab = subTab;
},
shapeSearch: '',
allCategories: allShapeCategories.map(shapeCategory => shapeCategory.value).join(','),
categorySearch: allShapeCategories.map(shapeCategory => shapeCategory.value).join(','),
shapeCategories: allShapeCategories,
isUploadBlockVisible: false,
init() {
initStyles(this.$el.shadowRoot);
motiveData.forEach(motiveObj => {
this.shapes.push(motiveObj);
})
if(location.href.includes('19850') || location.href.includes('localhost')) {
this.addDermaTestMotive()
}
this.$dispatch('set-shapes-length', {shapes: this.shapes});
if(module.hot) {
module.hot.accept('./ownShapeTab.html', function() {
console.log('change detected')
hotReloadAlpineComponent(this.$el.getRootNode().host ,loadOwnShapeTabHTML)
}.bind(this));
}
},
addDermaTestMotive() {
this.shapes.push({
"id": "motive-116",
"url": require("../../../images/shapes/adult-birthday/dermatest.png"),
"label": "dermatest",
"category": [
"adult-birthday"
],
"type": "motive"
});
},
isConfigurationBlockVisible: false,
hideUploadBlock() {
this.isUploadBlockVisible = false;
},
showUploadBlock() {
this.isUploadBlockVisible = true;
},
showConfigurationBlock() {
this.isConfigurationBlockVisible = true
},
hideConfigurationBlock() {
this.isConfigurationBlockVisible = false
},
tempShapes: [],
removeTempShapes() {
this.tempShapes = [];
},
selectedShape: null,
placedShape: null,
shapes: [
{id: 'symbol-1', url: getShapes().shape1, label: 'cone',category: ['children-birthday'], type: 'symbol'},
{id: 'symbol-2', url: getShapes().shape2, label: 'fire works',category: ['children-birthday'], type: 'symbol' },
{id: 'symbol-3', url: getShapes().shape3, label: 'fire works with stars',category: ['christmas'], type: 'symbol'},
{id: 'symbol-4', url: getShapes().shape4, label: 'stars',category: ['christmas'], type: 'symbol' },
{id: 'symbol-5', url: getShapes().shape5, label: 'halftone',category: ['adult-birthday'], type: 'symbol' },
{id: 'symbol-6', url: getShapes().shape6, label: 'year welcome 2023' ,category: ['adult-birthday'], type: 'symbol'},
{id: 'symbol-7', url: getShapes().shape7, label: 'rounded design with dots',category: ['christmas','wedding'], type: 'symbol' },
{id: 'symbol-8', url: getShapes().shape8, label: 'man celebrating with fireworks',category: ['christmas','wedding'], type: 'symbol' },
{id: 'symbol-9', url: getShapes().shape9, label: 'kiss',category: ['wedding'], type: 'symbol' },
{id: 'symbol-10', url: getShapes().shape10, label: 'shooting star' ,category: ['christmas'], type: 'symbol'},
{id: 'symbol-11', url: getShapes().shape11, label: 'nature with sea shrore',category: ['august-1'], type: 'symbol'},
{id: 'symbol-12', url: getShapes().shape12, label: 'anniversary',category: ['children-birthday'], type: 'symbol'}
],
selectShape(id,url,type) {
this.showConfigurationBlock();
this.selectedShape = id;
this.$store.canvas.addShapeToCanvas(url, type);
},
addShape(shape) {
if(shape.url) {
this.shapes.unshift({
id: shape.id,
url: shape.url,
//url: shape.cropperData?.originalFileDataUrl, // use this when testing locally
name: shape.name,
label: shape.name,
type: 'motive',
isRemovable: true,
cropperData: shape.cropperData,
originalUrl: shape.originalUrl
})
this.isUploadBlockVisible = false;
}
},
updateShape(shape) {
const shapeToUpdate = this.shapes.find(shp => shp.id === shape.id);
shapeToUpdate.url = shape.url;
shapeToUpdate.cropperData = shape.cropperData;
},
removeShape(shape) {
const shapeIndex = this.shapes.findIndex(obj => obj.id === shape.id);
this.shapes.splice(shapeIndex,1)
},
resetShapes() {
// console.log('reset shapes called')
// here reverse loop is used to prevent skipping of item which occurs after modifying array
for(let i = this.shapes.length - 1; i >=-0; i--) {
if (this.shapes[i].isRemovable) {
this.shapes.splice(i, 1);
}
}
},
filterShape() {
let self = this;
this.shapes.forEach((shape) => {
const labelMatch = shape.label.includes(this.shapeSearch);
const categoryMatch = self.categorySearch.split(',').some(category => shape.category?.includes(category))
shape.hidden = !(categoryMatch && labelMatch);
if(this.categorySearch === this.allCategories) {
shape.hidden = false;
}
});
},
shapetrigger: {
['@shapes-added-from-api.window'](event) {
event.detail.shapes.forEach(shape => {
this.addShape(shape);
this.$store.cropperStore.populateAspectRatio(shape)
})
},
['@shapes-updated-from-api.window'](event) {
event.detail.shapes.forEach(shape => {
this.updateShape(shape);
this.$store.cropperStore.populateAspectRatio(shape)
})
},
['@shapes-cleard.window'](event) {
this.removeTempShapes();
},
['@canvas-reset.window'](event) {
this.resetShapes();
}
},
selectedShapeSize: null,
shapeSizes: [
{ 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.selectedShapeSize) {
return this.shapeSizes.find(shapeSize => shapeSize.label === this.selectedShapeSize).scale;
}
return 0;
},
toggleSelecteShapeSize() {
if(this.selectedShapeSize) {
const selectedShapeSizeObj = this.shapeSizes.find(shapeSize => shapeSize.label === this.selectedShapeSize);
const selectedShapeSizeIndex = this.shapeSizes.indexOf(selectedShapeSizeObj);
const nextIndex = (selectedShapeSizeIndex + 1) % this.shapeSizes.length;
this.selectedShapeSize = this.shapeSizes[nextIndex].label;
} else {
this.selectedShapeSize = 'XS';
}
},
sizeHandler() {
this.toggleSelecteShapeSize();
},
async swapWithAIImage(shape) {
const blob = await fetch(this.$store.canvas.aiImageSrc).then(response => response.blob())
const dt = new DataTransfer();
dt.items.add(new File([blob], shape.name, { type: "image/png", lastModified: Date.now()}))
const editUploadObj = {
files: dt.files,
action: `${this.$store.canvas.apiConfig.apiUrl}/api/v1/product-configurators/images/${shape.id}`,
type: 'image',
cropperData: shape.cropperData
}
const data = await this.$store.uploadStore.updateImageInServer(editUploadObj);
if(data?.data) {
this.$dispatch('shapes-updated-from-api', {shapes: [data?.data] })
}
}
})