122 lines
4.5 KiB
JavaScript
122 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=0; i<currFile.layers.length; i++) {
|
|
if(!currFile.layers[i].isVisible)continue;
|
|
|
|
// 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';
|
|
}
|
|
} |