aico-image-editor
Version:
Combine multiple image into and create single combined image
201 lines (179 loc) • 8.44 kB
JavaScript
import chroma from "chroma-js";
import { ColorUtils } from "../../colorPicker/color-utilities";
const loadColorSubTabHTML = () => import(/* webpackMode: "eager" */'./colorSubTab.html');
// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initStyles from "../../../initStyles";
import initHTML from "../../../initHTML";
initHTML('color-sub-tab',loadColorSubTabHTML);
export default () => ({
init() {
},
shouldColorToCanvasBackground: false,
shouldColorToObjectBackground: false,
lastColorId: 8,
colors: [],
// addColor(color) {
// let id = this.lastColorId;
// this.colors.push({
// id: id,
// color: color
// });
// this.lastColorId++;
// },
addColor(color) {
const colorExists = this.colors.some(existingColor => existingColor.color === color.hex);
if (!colorExists) {
this.colors.push({
id: color.id,
color: color.hex,
isRemovable: true
});
}
},
removeColor(colorIndex) {
this.colors.splice(colorIndex,1);
},
resetColors() {
// console.log('reset colors called')
// here reverse loop is used to prevent skipping of item which occurs after modifying array
for(let i = this.colors.length - 1; i >=-0; i--) {
if (this.colors[i].isRemovable) {
this.colors.splice(i, 1);
}
}
},
isAddColorButtonDisabled: false,
colortrigger: {
['@colors-added-from-api.window'](event) {
event.detail.colors.forEach(color => {
this.addColor(color);
})
},
['@canvas-reset.window'](event) {
this.resetColors();
},
['@textcolor-updated-in-colorpicker.window'](event) {
// when color is selected in colorpicker, first check if it is already exisying in the array
const existingColorObject = this.defaultColors.concat(this.colors).find(color => chroma(color.color).hex() === event.detail.colorObj.color)
this.isAddColorButtonDisabled = !!existingColorObject;
// and if it is already existing then use that object in applyColor function to update activeColorObj
// applyColor will do two things
// 1. set active color via updateActiveColorObj function
// 2. and hence eventually color on fabric object as well
if(!event.detail.colorObj.initTime) {
this.applyColor(existingColorObject || event.detail.colorObj);
}
},
['@object-selected-on-canvas.window'](event) {
//console.log(event.detail.objectColor)
const existingColorObject = this.defaultColors.concat(this.colors).find(color => chroma(color.color).hex() === event.detail.objectColor)
// when object is selected, at that time
// keep selected color as object;s color to show it as selected
// and set that object's color as to set active
// if color is found in the array of existing colors update activeColorObj to that color object only(to match id)
// or else create temporary object to update activeColorObj
this.updateActiveColorObj(existingColorObject || {id: 'tempcolor', color: event.detail.objectColor})
this.backgroundMode = event.detail.backgroundMode
}
},
defaultColors: [
{id: 'defaultColor-transparent', color: '#00000000', translationKey: 'transparentColor'},
{id: 'defaultColor-0', color: '#ffffff', translationKey: 'whiteColor'},
{id: 'defaultColor-1', color: '#D9DADB', translationKey: 'silverColor'},
{id: 'defaultColor-2', color: '#ff4bfb', translationKey: 'pinkColor'},
{id: 'defaultColor-3', color: '#3498db', translationKey: 'blueColor'},
{id: 'defaultColor-4', color: '#9B59B6', translationKey: 'purpleColor'},
{id: 'defaultColor-5', color: '#2ecc71', translationKey: 'greenColor'},
{id: 'defaultColor-6', color: '#E67E22', translationKey: 'orangeColor'},
{id: 'defaultColor-7', color: '#E74C3C', translationKey: 'redColor'}
],
updateActiveColorObj(colorObj) {
this.activeColorObj.color = colorObj.color;
this.activeColorObj.id = colorObj.id;
},
activeColorObj: {},
allBackgroundModes: ['background', 'foreground', 'none'],
backgroundMode: 'none',
applyColor(colorObj) {
this.updateActiveColorObj(colorObj);
this.$dispatch('color-updated-from-outer-component',{hex: colorObj.color, componentKey: '2'})
if(this.shouldColorToCanvasBackground) {
this.$store.canvas.setCanvasBackgroundColor(colorObj.color)
} else if (this.shouldColorToObjectBackground) {
this.$store.canvas.setMotiveOrPictureBackgroundColor(colorObj.color)
} else {
this.$store.canvas.setLabelColor(colorObj.color);
}
},
setTextBackgroundColor(color) {
let self = this;
const newBackgroundModeIndex = (this.allBackgroundModes.findIndex(bgMode => bgMode === this.backgroundMode) + 1) % (this.allBackgroundModes.length);
this.backgroundMode = this.allBackgroundModes[newBackgroundModeIndex]
const textBackgroundColor = this.getTextBackgroundColorFromColor(color)
this.$store.canvas.setLabelBackgroundColor({
color: self.backgroundMode === 'background' ? color : self.backgroundMode === 'foreground' ? textBackgroundColor : color,
textBackgroundColor: self.backgroundMode === 'background' ? textBackgroundColor : self.backgroundMode === 'foreground' ? color : null,
backgroundMode: self.backgroundMode
});
},
getTextBackgroundColorFromColor(color) {
const colorLightness = ColorUtils.hexToHSL(color)[2]
return colorLightness < 50 ? '#ffffff' : '#000000'
},
get backgroundBtnStyles() {
let self = this;
return {
backgroundColor: self.backgroundMode === 'background' ? self.getTextBackgroundColorFromColor(self.activeColorObj.color) : self.backgroundMode === 'foreground' ? self.activeColorObj.color : '#F5F5F6',
color: self.backgroundMode === 'background' ? self.activeColorObj.color : self.backgroundMode === 'foreground' ? self.getTextBackgroundColorFromColor(self.activeColorObj.color) : self.activeColorObj.color
}
},
isColorPickerBlockVisible: false,
showColorPickerBlock() {
this.isColorPickerBlockVisible = true
},
hideColorPickerBlock() {
this.isColorPickerBlockVisible = false
},
toggleColorPickerBlock() {
this.isColorPickerBlockVisible = !this.isColorPickerBlockVisible;
},
isEyeDropperElVisible: true,
isEyeDropperActive: false,
openEyeDropper() {
this.isEyeDropperActive = true;
if(!window.EyeDropper) {
this.isEyeDropperElVisible = false;
return;
}
const eyeDropper = new EyeDropper();
eyeDropper
.open()
.then((result) => {
// console.log(result.sRGBHex)
// console.log(ColorUtils.hexToRGB(result.sRGBHex))
// this will set hex and then other values in picker
this.$dispatch('color-updated-from-outer-component',{hex: result.sRGBHex, componentKey: '2'})
this.isEyeDropperActive = false;
})
.catch((e) => {
console.error(e)
});
},
async uploadNewColor(configuratorId) {
const colorToBeAdded = this.activeColorObj.color;
const uploadObj = {
files: [chroma(colorToBeAdded).hex()],
action: `${this.$store.canvas.apiConfig.apiUrl}/api/v1/product-configurators/${configuratorId || null}/colors`,
type: 'hexCode'
}
const data = await this.$store.uploadStore.uploadFilesToServer(uploadObj);
data?.data?.color && this.addColor(data.data.color)
// also dispatch this to immediately select newly added color as selected color
if(data?.data?.color) {
this.$dispatch('object-selected-on-canvas', {
objectColor: data.data.color.hex
})
}
}
})