aico-image-editor
Version:
Combine multiple image into and create single combined image
97 lines (87 loc) • 3.94 kB
JavaScript
import chroma from "chroma-js";
import { ColorUtils } from "../../colorPicker/color-utilities";
const loadCanvasBackgroundColorSubTabHTML = () => import(/* webpackMode: "eager" */'./canvasBackgroundColorSubTab.html');
// initialize custom made styles and html loading modules//
// inspired by alpine js component//
import initStyles from "../../../initStyles";
import initHTML from "../../../initHTML";
initHTML('canvas-background-color-sub-tab',loadCanvasBackgroundColorSubTabHTML);
export default () => ({
init() {
},
bgColors: [],
addBgColor(bgColor) {
const colorExists = this.bgColors.some(existingColor => existingColor.color === bgColor.hex);
if (!colorExists) {
this.bgColors.push({
id: bgColor.id,
color: bgColor.hex,
isRemovable: true
});
}
},
removeBgColor(colorIndex) {
this.bgColors.splice(colorIndex,1);
},
resetBgColors() {
// console.log('reset colors called')
// here reverse loop is used to prevent skipping of item which occurs after modifying array
for(let i = this.bgColors.length - 1; i >=-0; i--) {
if (this.bgColors[i].isRemovable) {
this.bgColors.splice(i, 1);
}
}
},
isAddBgColorButtonDisabled: false,
colortrigger: {
['@colors-added-from-api.window'](event) {
event.detail.colors.forEach(color => {
this.addBgColor(color);
})
},
['@canvas-reset.window'](event) {
this.resetBgColors();
},
['@textcolor-updated-in-colorpicker.window'](event) {
// when color is selected in colorpicker, first check if it is already exisying in the array
const existingBgColorObject = this.defaultBgColors.concat(this.bgColors).find(color => chroma(color.color).hex() === event.detail.colorObj.color);
this.isAddBgColorButtonDisabled = !!existingBgColorObject;
// and if it is already existing then use that object in setCanvasBgColor function to update activeBgColorObj
// setCanvasBgColor will do two things
// 1. set active color via updateActiveBgColorObj function
// 2. and hence eventually color on fabric canvas as well
this.setCanvasBgColor(existingBgColorObject || event.detail.colorObj);
}
},
defaultBgColors: [
{id: 'defaultBgColor-0', color: '#ffffff', translationKey: 'whiteColor'},
{id: 'defaultBgColor-1', color: '#D9DADB', translationKey: 'silverColor'},
{id: 'defaultBgColor-2', color: '#ff4bfb', translationKey: 'pinkColor'},
{id: 'defaultBgColor-3', color: '#3498db', translationKey: 'blueColor'},
{id: 'defaultBgColor-4', color: '#9B59B6', translationKey: 'purpleColor'},
{id: 'defaultBgColor-5', color: '#2ecc71', translationKey: 'greenColor'},
{id: 'defaultBgColor-6', color: '#E67E22', translationKey: 'orangeColor'},
{id: 'defaultBgColor-7', color: '#E74C3C', translationKey: 'redColor'}
],
updateActiveBgColorObj(colorObj) {
this.activeBgColorObj.color = colorObj.color;
this.activeBgColorObj.id = colorObj.id;
},
activeBgColorObj: {},
setCanvasBgColor(colorObj) {
this.updateActiveBgColorObj(colorObj)
this.$store.canvas.setCanvasBackgroundColor(colorObj.color);
},
isColorPickerBlockVisible: false,
showColorPickerBlock() {
this.isColorPickerBlockVisible = true
},
hideColorPickerBlock() {
this.isColorPickerBlockVisible = false
},
toggleColorPickerBlock() {
this.isColorPickerBlockVisible = !this.isColorPickerBlockVisible;
},
async uploadNewBgColorWithSaveCanvasDataApi() {
}
})