pixel-editor/js/tools/EyeDropperTool.js
2022-01-30 00:09:43 +01:00

120 lines
4.5 KiB
JavaScript

class EyeDropperTool extends Tool {
eyedropperPreview = document.getElementById("eyedropper-preview");
selectedColor = {r:0, g:0, b:0};
constructor(name, options, switchFunction) {
super(name, options);
Events.on('click', this.mainButton, switchFunction, this);
this.resetTutorial();
this.addTutorialTitle("Eyedropper tool");
this.addTutorialKey("E", " to select the lasso selection tool");
this.addTutorialKey("Left drag", " to preview the picked colour");
this.addTutorialKey("Aòt + left drag", " to preview the picked colour");
this.addTutorialKey("Left click", " to select a colour");
this.addTutorialKey("Alt + click", " to select a colour");
this.addTutorialImg("eyedropper-tutorial.gif");
}
onStart(mousePos, target) {
super.onStart(mousePos);
if (target.className != 'drawingCanvas')
return;
this.eyedropperPreview.style.display = 'block';
this.onDrag(mousePos);
}
onDrag(mousePos) {
super.onDrag(mousePos);
this.selectedColor = this.pickColor(mousePos);
this.eyedropperPreview.style.borderColor = '#' + Color.rgbToHex(this.selectedColor);
this.eyedropperPreview.style.left = mousePos[0] + currFile.currentLayer.canvas.offsetLeft - 30 + 'px';
this.eyedropperPreview.style.top = mousePos[1] + currFile.currentLayer.canvas.offsetTop - 30 + 'px';
const colorLightness = Math.max(this.selectedColor.r,this.selectedColor.g,this.selectedColor.b);
//for the darkest 50% of colors, change the eyedropper preview to dark mode
if (colorLightness>127) this.eyedropperPreview.classList.remove('dark');
else this.eyedropperPreview.classList.add('dark');
this.changeColor();
}
onEnd(mousePos) {
super.onEnd(mousePos);
this.eyedropperPreview.style.display = 'none';
}
changeColor() {
let colorHex = Color.rgbToHex(this.selectedColor);
ColorModule.updateCurrentColor('#' + Color.rgbToHex(this.selectedColor));
let colors = document.getElementsByClassName('color-button');
for (let i = 0; i < colors.length; i++) {
//if picked color matches this color
if (colorHex == colors[i].jscolor.toString()) {
//remove current color selection
document.querySelector("#colors-menu li.selected")?.classList.remove("selected");
//set current color
for (let i=2; i<currFile.layers.length; i++) {
currFile.layers[i].context.fillStyle = '#' + colorHex;
}
//make color selected
colors[i].parentElement.classList.add('selected');
}
}
}
/** Gets the eyedropped colour (the colour of the pixel pointed by the cursor when the user is using the eyedropper).
* It takes the colour of the canvas with the biggest z-index, basically the one the user can see, since it doesn't
* make much sense to sample a colour which is hidden behind a different layer
*
* @param {*} cursorLocation The position of the cursor
*/
pickColor(cursorLocation) {
// Making sure max will take some kind of value
let max = -1;
// Using tmpColour to sample the sprite
let tmpColour;
// Returned colour
let selectedColor;
for (let i=1; i<currFile.layers.length-3; i++) {
// Getting the colour of the pixel in the cursorLocation
tmpColour = currFile.layers[i].context.getImageData(Math.floor(cursorLocation[0]/currFile.zoom),Math.floor(cursorLocation[1]/currFile.zoom),1,1).data;
// If it's not empty, I check if it's on the top of the previous colour
if (currFile.layers[i].canvas.style.zIndex > max || Util.isPixelEmpty(selectedColor) || selectedColor === undefined) {
max = currFile.layers[i].canvas.style.zIndex;
if (!Util.isPixelEmpty(tmpColour)) {
selectedColor = tmpColour;
}
}
}
// If the final colour was empty, I return black
if (Util.isPixelEmpty(tmpColour) && selectedColor === undefined) {
selectedColor = [0, 0, 0];
}
return {r:selectedColor[0], g:selectedColor[1], b:selectedColor[2]};
}
onSelect() {
super.onSelect();
}
onDeselect() {
super.onDeselect();
this.eyedropperPreview.style.display = 'none';
}
}