mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

Made the color picker an IIFE

Browse Source
This commit is contained in:
unsettledgames 2021-12-04 23:11:21 +01:00
parent 07ed24cc6b
commit 71bfe543a5
11 changed files with 802 additions and 781 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/Dialogue.js
View File

@ -43,7 +43,7 @@ const Dialogue = (() => {
// If I'm opening the palette window, I initialize the colour picker
if (dialogueName == 'palette-block' && Startup.documentCreated()) {
cpInit();
ColorPicker.init();
pbInit();
}

286
js/_colorPicker.js
View File

@ -1,22 +1,56 @@
let sliders = document.getElementsByClassName("cp-slider-entry");
let colourPreview = document.getElementById("cp-colour-preview");
let colourValue = document.getElementById("cp-hex");
let currentPickerMode = "rgb";
let currentPickingMode = "mono";
let styleElement = document.createElement("style");
let miniPickerCanvas = document.getElementById("cp-spectrum");
let miniPickerSlider = document.getElementById("cp-minipicker-slider");
let activePickerIcon = document.getElementById("cp-active-icon");
let pickerIcons = [activePickerIcon];
let hexContainers = [document.getElementById("cp-colours-previews").children[0],null,null,null];
let startPickerIconPos = [[0,0],[0,0],[0,0],[0,0]];
let currPickerIconPos = [[0,0], [0,0],[0,0],[0,0]];
let styles = ["",""];
let draggingCursor = false;
const ColorPicker = (() => {
let sliders = document.getElementsByClassName("cp-slider-entry");
let colourPreview = document.getElementById("cp-colour-preview");
let colourValue = document.getElementById("cp-hex");
let currentPickerMode = "rgb";
let currentPickingMode = "mono";
let styleElement = document.createElement("style");
let miniPickerCanvas = document.getElementById("cp-spectrum");
let miniPickerSlider = document.getElementById("cp-minipicker-slider");
let activePickerIcon = document.getElementById("cp-active-icon");
let pickerIcons = [activePickerIcon];
let hexContainers = [document.getElementById("cp-colours-previews").children[0],null,null,null];
let startPickerIconPos = [[0,0],[0,0],[0,0],[0,0]];
let currPickerIconPos = [[0,0], [0,0],[0,0],[0,0]];
let styles = ["",""];
let draggingCursor = false;
cpInit();
// Picker mode events
Events.on("click", "cp-rgb", changePickerMode, 'rgb');
Events.on("click", "cp-hsv", changePickerMode, 'hsv');
Events.on("click", "cp-hsl", changePickerMode, 'hsl');
function cpInit() {
// Hex-related events
Events.on("change", "cp-hex", hexUpdated);
// Slider events
Events.on("mousemove", "first-slider", updateSliderValue, 1);
Events.on("mousemove", "second-slider", updateSliderValue, 2);
Events.on("mousemove", "third-slider", updateSliderValue, 3);
Events.on("click", "first-slider", updateSliderValue, 1);
Events.on("click", "second-slider", updateSliderValue, 2);
Events.on("click", "third-slider", updateSliderValue, 3);
// Slider textbox events
Events.on("change", "cp-sliderText1", inputChanged, 1);
Events.on("change", "cp-sliderText2", inputChanged, 2);
Events.on("change", "cp-sliderText3", inputChanged, 3);
// Minipicker events
Events.on("mousemove", "cp-minipicker-slider", miniSliderInput);
Events.on("click", "cp-minipicker-slider", miniSliderInput);
Events.on("mousemove", "cp-canvas-container", movePickerIcon);
Events.on("click", "cp-mono", changePickingMode, "mono");
Events.on("click", "cp-analog", changePickingMode, "analog");
Events.on("click", "cp-cmpt", changePickingMode, "cmpt");
Events.on("click", "cp-tri", changePickingMode, "tri");
Events.on("click", "cp-scmpt", changePickingMode, "scmpt");
Events.on("click", "cp-tetra", changePickingMode, "tetra");
init();
function init() {
// TODO: BIND EVENTS
// Appending the palette styles
document.getElementsByTagName("head")[0].appendChild(styleElement);
@ -36,24 +70,24 @@ function cpInit() {
updatePickerByHex(colourValue.value);
updateMiniPickerSpectrum();
}
}
function hexUpdated() {
function hexUpdated() {
updatePickerByHex(colourValue.value);
updateSlidersByHex(colourValue.value);
}
}
// Applies the styles saved in the style array to the style element in the head of the document
function updateStyles() {
// Applies the styles saved in the style array to the style element in the head of the document
function updateStyles() {
styleElement.innerHTML = styles[0] + styles[1];
}
}
/** Updates the background gradients of the sliders given their value
/** Updates the background gradients of the sliders given their value
* Updates the hex colour and its preview
* Updates the minipicker according to the computed hex colour
*
*/
function updateSliderValue (sliderIndex, updateMini = true) {
function updateSliderValue (sliderIndex, updateMini = true) {
let toUpdate;
let slider;
let input;
@ -93,10 +127,10 @@ function updateSliderValue (sliderIndex, updateMini = true) {
updatePickerByHex(colourValue.value);
updateMiniPickerSpectrum();
}
}
}
// Calculates the css gradient for a slider
function getSliderCSS(index, sliderValues) {
// Calculates the css gradient for a slider
function getSliderCSS(index, sliderValues) {
let ret = 'input[type=range]#';
let sliderId;
let gradientMin;
@ -129,18 +163,18 @@ function getSliderCSS(index, sliderValues) {
gradientMax = 'rgba(' + sliderValues[0] + ',255,' + sliderValues[2] + ',1)';
break;
case 'hsv':
rgbColour = hsvToRgb(sliderValues[0], 0, sliderValues[2]);
gradientMin = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
rgbColour = Color.hsvToRgb({h:sliderValues[0], s:0, v:sliderValues[2]});
gradientMin = 'rgba(' + rgbColour.r + ',' + rgbColour.g + ',' + rgbColour.b + ',1)';
rgbColour = hsvToRgb(sliderValues[0], 100, sliderValues[2]);
gradientMax = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
rgbColour = Color.hsvToRgb({h:sliderValues[0], s:100, v:sliderValues[2]});
gradientMax = 'rgba(' + rgbColour.r + ',' + rgbColour.g + ',' + rgbColour.b + ',1)';
break;
case 'hsl':
rgbColour = cpHslToRgb(sliderValues[0], 0, sliderValues[2]);
gradientMin = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
rgbColour = Color.hslToRgb({h:sliderValues[0], s:0, l:sliderValues[2]});
gradientMin = 'rgba(' + rgbColour.r + ',' + rgbColour.g + ',' + rgbColour.b + ',1)';
rgbColour = cpHslToRgb(sliderValues[0], 100, sliderValues[2]);
gradientMax = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
rgbColour = Color.hslToRgb({h:sliderValues[0], s:100, l:sliderValues[2]});
gradientMax = 'rgba(' + rgbColour.r + ',' + rgbColour.g + ',' + rgbColour.b + ',1)';
break;
}
break;
@ -152,11 +186,11 @@ function getSliderCSS(index, sliderValues) {
gradientMax = 'rgba(' + sliderValues[0] + ',' + sliderValues[1] + ',255,1)';
break;
case 'hsv':
rgbColour = hsvToRgb(sliderValues[0], sliderValues[1], 0);
gradientMin = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
rgbColour = Color.hsvToRgb({h:sliderValues[0], s:sliderValues[1], v:0});
gradientMin = 'rgba(' + rgbColour.r + ',' + rgbColour.g + ',' + rgbColour.b + ',1)';
rgbColour = hsvToRgb(sliderValues[0], sliderValues[1], 100);
gradientMax = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
rgbColour = Color.hsvToRgb({h:sliderValues[0], s:sliderValues[1], v:100});
gradientMax = 'rgba(' + rgbColour.r + ',' + rgbColour.g + ',' + rgbColour.b + ',1)';
break;
case 'hsl':
gradientMin = 'rgba(0,0,0,1)';
@ -187,8 +221,8 @@ function getSliderCSS(index, sliderValues) {
ret += 'linear-gradient(90deg, rgba(2,0,36,1) 0%, ' + gradientMin + ' 0%, ';
// For hsl I also have to add a middle point
if (currentPickerMode == 'hsl' && index == 3) {
let rgb = cpHslToRgb(sliderValues[0], sliderValues[1], 50);
ret += 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',1) 50%,';
let rgb = Color.hslToRgb({h:sliderValues[0], s:sliderValues[1], l:50});
ret += 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',1) 50%,';
}
ret += gradientMax + '100%);';
@ -201,10 +235,10 @@ function getSliderCSS(index, sliderValues) {
ret += ret.replace('::-webkit-slider-runnable-track', '::-moz-range-track');
return ret;
}
}
// Computes the hue gradient used for hsl
function getHueGradientHSL(sliderValues) {
// Computes the hue gradient used for hsl
function getHueGradientHSL(sliderValues) {
return 'linear-gradient(90deg, rgba(2,0,36,1) 0%, \
hsl(0,' + sliderValues[1] + '%,' + sliderValues[2]+ '%) 0%, \
hsl(60,' + sliderValues[1] + '%,' + sliderValues[2]+ '%) 16.6666%, \
@ -213,54 +247,39 @@ function getHueGradientHSL(sliderValues) {
hsl(240,' + sliderValues[1] + '%,' + sliderValues[2]+ '%) 66.66666%, \
hsl(300,'+ sliderValues[1] + '%,' + sliderValues[2]+ '%) 83.333333%, \
hsl(360,'+ sliderValues[1] + '%,' + sliderValues[2]+ '%) 100%);';
}
// Computes the hue gradient used for hsv
function getHueGradientHSV(sliderValues) {
let col = hsvToRgb(0, sliderValues[1], sliderValues[2]);
}
// Computes the hue gradient used for hsv
function getHueGradientHSV(sliderValues) {
let ret = 'linear-gradient(90deg, rgba(2,0,36,1) 0%, ';
let consts = ['0%,', '16.6666%,', '33.3333%,', '50%,', '66.6666%,', '83.3333%,', '100%);'];
ret += 'rgba(' + col[0] + ',' + col[1] + ',' + col[2] + ',1) 0%,'
for (let i=0; i<consts.length; i++) {
let col = Color.hsvToRgb({h:i * 60, s:sliderValues[1], v:sliderValues[2]});
ret += 'rgba(' + col.r + ',' + col.g + ',' + col.b + ',1) ' + consts[i];
}
col = hsvToRgb(60, sliderValues[1], sliderValues[2]);
ret += 'rgba(' + col[0] + ',' + col[1] + ',' + col[2] + ',1) 16.6666%,';
return ret.substr(0, ret.length - 1);
}
col = hsvToRgb(120, sliderValues[1], sliderValues[2]);
ret += 'rgba(' + col[0] + ',' + col[1] + ',' + col[2] + ',1) 33.3333333333%,';
col = hsvToRgb(180, sliderValues[1], sliderValues[2]);
ret += 'rgba(' + col[0] + ',' + col[1] + ',' + col[2] + ',1) 50%,';
col = hsvToRgb(240, sliderValues[1], sliderValues[2]);
ret += 'rgba(' + col[0] + ',' + col[1] + ',' + col[2] + ',1) 66.66666%,';
col = hsvToRgb(300, sliderValues[1], sliderValues[2]);
ret += 'rgba(' + col[0] + ',' + col[1] + ',' + col[2] + ',1) 83.333333%,';
col = hsvToRgb(360, sliderValues[1], sliderValues[2]);
ret += 'rgba(' + col[0] + ',' + col[1] + ',' + col[2] + ',1) 100%);';
return ret;
}
// Fired when the values in the labels are changed
function inputChanged(target, index) {
// Fired when the values in the labels are changed
function inputChanged(index) {
let sliderIndex = index - 1;
let target = document.getElementById("cp-sliderText" + index);
sliders[sliderIndex].getElementsByTagName("input")[0].value = target.value;
updateSliderValue(index);
}
}
// Updates the colour model used to pick colours
function changePickerMode(target, newMode) {
// Updates the colour model used to pick colours
function changePickerMode(newMode) {
let maxRange;
let colArray;
let rgbTmp;
let hexColour = colourValue.value.replace('#', '');
let currColor = new Color("hex", hexColour);
currentPickerMode = newMode;
document.getElementsByClassName("cp-selected-mode")[0].classList.remove("cp-selected-mode");
target.classList.add("cp-selected-mode");
document.getElementById("cp-" + newMode).classList.add("cp-selected-mode");
switch (newMode)
{
@ -316,25 +335,25 @@ function changePickerMode(target, newMode) {
}
updateAllSliders();
}
}
// Returns an array containing the values of the sliders
function getSlidersValues() {
// Returns an array containing the values of the sliders
function getSlidersValues() {
return [parseInt(sliders[0].getElementsByTagName("input")[0].value),
parseInt(sliders[1].getElementsByTagName("input")[0].value),
parseInt(sliders[2].getElementsByTagName("input")[0].value)];
}
}
// Updates every slider
function updateAllSliders(updateMini=true) {
// Updates every slider
function updateAllSliders(updateMini=true) {
for (let i=1; i<=3; i++) {
updateSliderValue(i, updateMini);
}
}
/******************SECTION: MINIPICKER******************/
}
/******************SECTION: MINIPICKER******************/
// Moves the picker icon according to the mouse position on the canvas
function movePickerIcon(event) {
// Moves the picker icon according to the mouse position on the canvas
function movePickerIcon(event) {
event.preventDefault();
if (event.which == 1 || draggingCursor) {
@ -354,10 +373,10 @@ function movePickerIcon(event) {
updateMiniPickerColour();
updateOtherIcons();
}
}
}
// Updates the main sliders given a hex value computed with the minipicker
function updateSlidersByHex(hex, updateMini = true) {
// Updates the main sliders given a hex value computed with the minipicker
function updateSlidersByHex(hex, updateMini = true) {
let colour = new Color("hex", hex);
let mySliders = [sliders[0].getElementsByTagName("input")[0],
sliders[1].getElementsByTagName("input")[0],
@ -375,17 +394,17 @@ function updateSlidersByHex(hex, updateMini = true) {
case 'hsv':
colour = colour.hsv;
mySliders[0].value = colour.h * 360;
mySliders[1].value = colour.s * 100;
mySliders[2].value = colour.v * 100;
mySliders[0].value = colour.h;
mySliders[1].value = colour.s;
mySliders[2].value = colour.v;
break;
case 'hsl':
colour = colour.hsl;
mySliders[0].value = colour.h * 360;
mySliders[1].value = colour.s * 100;
mySliders[2].value = colour.l * 100;
mySliders[0].value = colour.h;
mySliders[1].value = colour.s;
mySliders[2].value = colour.l;
break;
default:
@ -393,10 +412,10 @@ function updateSlidersByHex(hex, updateMini = true) {
}
updateAllSliders(false);
}
}
// Gets the position of the picker cursor relative to the canvas
function getCursorPosMinipicker(e) {
// Gets the position of the picker cursor relative to the canvas
function getCursorPosMinipicker(e) {
var x;
var y;
@ -413,11 +432,11 @@ function getCursorPosMinipicker(e) {
y -= miniPickerCanvas.offsetTop;
return [Math.round(x), Math.round(y)];
}
}
// Updates the minipicker given a hex computed by the main sliders
// Moves the cursor
function updatePickerByHex(hex) {
// Updates the minipicker given a hex computed by the main sliders
// Moves the cursor
function updatePickerByHex(hex) {
let hsv = new Color("hex", hex).hsv;
let xPos = miniPickerCanvas.width * hsv.h/360 - 8;
let yPos = miniPickerCanvas.height * hsv.s/100 + 8;
@ -440,14 +459,16 @@ function updatePickerByHex(hex) {
updateOtherIcons();
updateMiniSlider(hex);
}
}
// Fired when the value of the minislider changes: updates the spectrum gradient and the hex colour
function miniSliderInput(event) {
// Fired when the value of the minislider changes: updates the spectrum gradient and the hex colour
function miniSliderInput(event) {
let currColor = new Color("hex", getMiniPickerColour());
let newHsv = currColor.hsv;
let newHex;
console.log("Hex: " + currColor.hex);
// Adding slider value to value
newHsv = new Color("hsv", newHsv.h, newHsv.s, parseInt(event.target.value));
// Updating hex
@ -457,14 +478,13 @@ function miniSliderInput(event) {
updateMiniPickerSpectrum();
updateMiniPickerColour();
}
}
// Updates the hex colour after having changed the minislider (MERGE)
function updateMiniPickerColour() {
// Updates the hex colour after having changed the minislider (MERGE)
function updateMiniPickerColour() {
let hex = getMiniPickerColour();
activePickerIcon.style.backgroundColor = '#' + hex;
console.log("Mini picker col: #" + hex);
// Update hex and sliders based on hex
colourValue.value = '#' + hex;
@ -473,20 +493,20 @@ function updateMiniPickerColour() {
updateSlidersByHex(hex);
updateMiniSlider(hex);
updateOtherIcons();
}
}
// Returns the current colour of the minipicker
function getMiniPickerColour() {
// Returns the current colour of the minipicker
function getMiniPickerColour() {
let pickedColour;
pickedColour = miniPickerCanvas.getContext('2d').getImageData(currPickerIconPos[0][0] + 8,
currPickerIconPos[0][1] + 8, 1, 1).data;
return new Color("rgb", Math.round(pickedColour[0]), Math.round(pickedColour[1]), Math.round(pickedColour[2])).hex;
}
}
// Update the background gradient of the slider in the minipicker
function updateMiniSlider(hex) {
// Update the background gradient of the slider in the minipicker
function updateMiniSlider(hex) {
let rgb = Color.hexToRgb(hex);
styles[1] = "input[type=range]#cp-minipicker-slider::-webkit-slider-runnable-track { background: rgb(2,0,36);";
@ -495,10 +515,10 @@ function updateMiniSlider(hex) {
updateMiniPickerSpectrum();
updateStyles();
}
}
// Updates the gradient of the spectrum canvas in the minipicker
function updateMiniPickerSpectrum() {
// Updates the gradient of the spectrum canvas in the minipicker
function updateMiniPickerSpectrum() {
let ctx = miniPickerCanvas.getContext('2d');
let hsv = new Color("hex", colourValue.value).hsv;
let white = new Color("hsv", hsv.h, 0, parseInt(miniPickerSlider.value)).rgb;
@ -522,13 +542,9 @@ function updateMiniPickerSpectrum() {
ctx.fillStyle = vGrad;
ctx.fillRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height);
}
}
function toggleDraggingCursor() {
draggingCursor = !draggingCursor;
}
function changePickingMode(event, newMode) {
function changePickingMode(newMode, event) {
let nIcons = pickerIcons.length;
let canvasContainer = document.getElementById("cp-canvas-container");
// Number of hex containers to add
@ -609,9 +625,9 @@ function changePickingMode(event, newMode) {
}
updateOtherIcons();
}
}
function updateOtherIcons() {
function updateOtherIcons() {
let currentColorHex = new Color("hex", colourValue.value).hex;
let currentColourHsv = new Color("hex", currentColorHex).hsv;
let newColourHsv;
@ -724,9 +740,9 @@ function updateOtherIcons() {
hexContainers[i].style.color = getHexPreviewColour(newColourHexes[i - 1]);
}
}
}
}
function getSelectedColours() {
function getSelectedColours() {
let ret = [];
for (let i=0; i<hexContainers.length; i++) {
@ -736,9 +752,9 @@ function getSelectedColours() {
}
return ret;
}
}
function getHexPreviewColour(hex) {
function getHexPreviewColour(hex) {
//if brightness is over threshold, make the text dark
if (colorBrightness(hex) > 110) {
return '#332f35'
@ -754,4 +770,10 @@ function getHexPreviewColour(hex) {
var b = parseInt(color.slice(5, 7), 16);
return Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
}
}
}
return {
init
}
})();

34
js/_drawLine.js
View File

@ -1,34 +0,0 @@
//draws a line between two points on canvas
function line(x0,y0,x1,y1, brushSize) {
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1 ? 1 : -1);
var sy = (y0 < y1 ? 1 : -1);
var err = dx-dy;
while (true) {
//set pixel
// If the current tool is the brush
if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse') {
// I fill the rect
currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
} else if (ToolManager.currentTool().name == 'eraser') {
// In case I'm using the eraser I must clear the rect
currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
}
//if we've reached the end goal, exit the loop
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2 >-dy) {
err -=dy;
x0+=sx;
}
if (e2 < dx) {
err +=dx;
y0+=sy;
}
}
}

8
js/_ellipse.js
View File

@ -84,10 +84,10 @@ function endEllipseDrawing(mouseEvent) {
currentLayer.context.lineWidth = tool.ellipse.brushSize;
// Drawing the ellipse using 4 lines
line(startEllipseX, startEllipseY, endEllipseX, startEllipseY, tool.ellipse.brushSize);
line(endEllipseX, startEllipseY, endEllipseX, endEllipseY, tool.ellipse.brushSize);
line(endEllipseX, endEllipseY, startEllipseX, endEllipseY, tool.ellipse.brushSize);
line(startEllipseX, endEllipseY, startEllipseX, startEllipseY, tool.ellipse.brushSize);
currentLayer.drawLine(startEllipseX, startEllipseY, endEllipseX, startEllipseY, tool.ellipse.brushSize);
currentLayer.drawLine(endEllipseX, startEllipseY, endEllipseX, endEllipseY, tool.ellipse.brushSize);
currentLayer.drawLine(endEllipseX, endEllipseY, startEllipseX, endEllipseY, tool.ellipse.brushSize);
currentLayer.drawLine(startEllipseX, endEllipseY, startEllipseX, startEllipseY, tool.ellipse.brushSize);
// If I have to fill it, I do so
if (ellipseDrawMode == 'fill') {

13
js/checkCompatibilityPixelEditor.js
View File

@ -1,13 +0,0 @@
function closeCompatibilityWarning() {
document.getElementById("compatibility-warning").style.visibility = "hidden";
}
//check browser/version
if (
(bowser.firefox && bowser.version >= 28) ||
(bowser.chrome && bowser.version >= 29) ||
(!bowser.mobile && !bowser.tablet)
)
console.log("compatibility check passed");
//show warning
else document.getElementById("compatibility-warning").style.visibility = "visible";

34
js/layers/Layer.js
View File

@ -278,4 +278,38 @@ class Layer {
(destination.width - previewWidth) / 2, (destination.height - previewHeight) / 2,
previewWidth, previewHeight);
}
drawLine(x0,y0,x1,y1, brushSize) {
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1 ? 1 : -1);
var sy = (y0 < y1 ? 1 : -1);
var err = dx-dy;
while (true) {
//set pixel
// If the current tool is the brush
if (ToolManager.currentTool().name == 'brush' || ToolManager.currentTool().name == 'rectangle' || ToolManager.currentTool().name == 'ellipse') {
// I fill the rect
currentLayer.context.fillRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
} else if (ToolManager.currentTool().name == 'eraser') {
// In case I'm using the eraser I must clear the rect
currentLayer.context.clearRect(x0-Math.floor(brushSize/2), y0-Math.floor(brushSize/2), brushSize, brushSize);
}
//if we've reached the end goal, exit the loop
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2 >-dy) {
err -=dy;
x0+=sx;
}
if (e2 < dx) {
err +=dx;
y0+=sy;
}
}
}
}

18
js/pixel-editor.js
View File

@ -10,7 +10,6 @@
//=include History.js
//=include ColorModule.js
//=include _drawLine.js
//=include Tool.js
@ -37,7 +36,6 @@
//=include layers/PixelGrid.js
//=include Startup.js
//=include _pixelGrid.js
//=include EditorState.js
//=include ToolManager.js
@ -46,7 +44,6 @@
//=include data/palettes.js
/**functions**/
//=include _checkerboard.js
//=include _resizeCanvas.js
//=include _resizeSprite.js
//=include _colorPicker.js
@ -125,3 +122,18 @@ window.onbeforeunload = function() {
else return;
};
// Compatibility functions
function closeCompatibilityWarning() {
document.getElementById("compatibility-warning").style.visibility = "hidden";
}
//check browser/version
if (
(bowser.firefox && bowser.version >= 28) ||
(bowser.chrome && bowser.version >= 29) ||
(!bowser.mobile && !bowser.tablet)
)
console.log("compatibility check passed");
//show warning
else document.getElementById("compatibility-warning").style.visibility = "visible";

2
js/tools/BrushTool.js
View File

@ -19,7 +19,7 @@ class BrushTool extends ResizableTool {
return;
//draw line to current pixel
if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') {
line(Math.floor(this.prevMousePos[0]/zoom),
currentLayer.drawLine(Math.floor(this.prevMousePos[0]/zoom),
Math.floor(this.prevMousePos[1]/zoom),
Math.floor(this.currMousePos[0]/zoom),
Math.floor(this.currMousePos[1]/zoom),

2
js/tools/EraserTool.js
View File

@ -19,7 +19,7 @@ class EraserTool extends ResizableTool {
return;
//draw line to current pixel
if (cursorTarget.className == 'drawingCanvas' || cursorTarget.className == 'drawingCanvas') {
line(Math.floor(this.prevMousePos[0]/zoom),
currentLayer.drawLine(Math.floor(this.prevMousePos[0]/zoom),
Math.floor(this.prevMousePos[1]/zoom),
Math.floor(this.currMousePos[0]/zoom),
Math.floor(this.currMousePos[1]/zoom),

8
js/tools/RectangleTool.js
View File

@ -92,10 +92,10 @@ class RectangleTool extends ResizableTool {
currentLayer.context.lineWidth = this.currSize;
// Drawing the rect using 4 lines
line(startRectX, startRectY, endRectX, startRectY, this.currSize);
line(endRectX, startRectY, endRectX, endRectY, this.currSize);
line(endRectX, endRectY, startRectX, endRectY, this.currSize);
line(startRectX, endRectY, startRectX, startRectY, this.currSize);
currentLayer.drawLine(startRectX, startRectY, endRectX, startRectY, this.currSize);
currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize);
currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize);
currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize);
// If I have to fill it, I do so
if (this.currFillMode == 'fill') {

36
views/popups/palette.hbs
View File

@ -6,37 +6,37 @@
<div id = "colour-picker">
<div id = "cp-modes">
<button id="cp-rgb" class="cp-selected-mode" onclick="changePickerMode(this, 'rgb')">RGB</button>
<button id="cp-hsv" onclick="changePickerMode(this, 'hsv')">HSV</button>
<button id="cp-hsl" onclick="changePickerMode(this, 'hsl')">HSL</button>
<button id="cp-rgb" class="cp-selected-mode">RGB</button>
<button id="cp-hsv">HSV</button>
<button id="cp-hsl">HSL</button>
<div id="cp-colour-preview" class="cp-colour-preview"></div>
<input id="cp-hex" type="text" value="#123456" onchange="hexUpdated()"/>
<input id="cp-hex" type="text" value="#123456"/>
</div>
<div id = "sliders-container">
<div class = "cp-slider-entry">
<label for = "first-slider">R</label>
<input type="range" min="0" max="255" class="colour-picker-slider" id="first-slider" onmousemove="updateSliderValue(1)" onclick="updateSliderValue(1)"/>
<input type = "text" value = "128" onchange="inputChanged(this,1)"/>
<input type="range" min="0" max="255" class="colour-picker-slider" id="first-slider"/>
<input type = "text" value = "128" id="cp-sliderText1"/>
</div>
<div class = "cp-slider-entry">
<label for = "second-slider">G</label>
<input type="range" min="0" max ="255" class="colour-picker-slider" id="second-slider" onmousemove="updateSliderValue(2)" onclick="updateSliderValue(2)"/>
<input type = "text" value = "128" onchange="inputChanged(this,2)"/>
<input type="range" min="0" max ="255" class="colour-picker-slider" id="second-slider"/>
<input type = "text" value = "128" id="cp-sliderText2"/>
</div>
<div class = "cp-slider-entry">
<label for = "third-slider">B</label>
<input type="range" min = "0" max = "255" class = "colour-picker-slider" id = "third-slider" onmousemove="updateSliderValue(3)" onclick="updateSliderValue(3)"/>
<input type = "text" value = "128" onchange="inputChanged(this,3)"/>
<input type="range" min = "0" max = "255" class = "colour-picker-slider" id = "third-slider"/>
<input type = "text" value = "128" id="cp-sliderText3"/>
</div>
</div>
<div id = "cp-minipicker">
<input type = "range" min = "0" max = "100" id = "cp-minipicker-slider" onmousemove="miniSliderInput(event)" onclick="miniSliderInput(event)"/>
<div id="cp-canvas-container" onmousemove="movePickerIcon(event)">
<input type = "range" min = "0" max = "100" id = "cp-minipicker-slider"/>
<div id="cp-canvas-container">
<canvas id = "cp-spectrum"></canvas>
<div id="cp-active-icon" class="cp-picker-icon"></div>
</div>
@ -48,12 +48,12 @@
</div>
<div id = "cp-colour-picking-modes">
<button class="cp-selected-mode" onclick="changePickingMode(event,'mono')">Mono</button>
<button onclick="changePickingMode(event,'analog')">Nlgs</button>
<button onclick="changePickingMode(event,'cmpt')">Cmpt</button>
<button onclick="changePickingMode(event,'tri')">Tri</button>
<button onclick="changePickingMode(event,'scmpt')">Scm</button>
<button onclick="changePickingMode(event,'tetra')">Tetra</button>
<button id="cp-mono" class="cp-selected-mode">Mono</button>
<button id="cp-analog">Nlgs</button>
<button id="cp-cmpt">Cmpt</button>
<button id="cp-tri">Tri</button>
<button id="cp-scmpt">Scm</button>
<button id="cp-tetra">Tetra</button>
</div>
</div>
</div>