From 71bfe543a54dfe75a1087b2032c478af79f19f7d Mon Sep 17 00:00:00 2001 From: unsettledgames <47360416+unsettledgames@users.noreply.github.com> Date: Sat, 4 Dec 2021 23:11:21 +0100 Subject: [PATCH] Made the color picker an IIFE --- js/Dialogue.js | 2 +- js/_colorPicker.js | 1424 ++++++++++++++------------- js/_drawLine.js | 34 - js/_ellipse.js | 8 +- js/checkCompatibilityPixelEditor.js | 13 - js/layers/Layer.js | 34 + js/pixel-editor.js | 20 +- js/tools/BrushTool.js | 2 +- js/tools/EraserTool.js | 2 +- js/tools/RectangleTool.js | 8 +- views/popups/palette.hbs | 36 +- 11 files changed, 802 insertions(+), 781 deletions(-) delete mode 100644 js/_drawLine.js delete mode 100644 js/checkCompatibilityPixelEditor.js diff --git a/js/Dialogue.js b/js/Dialogue.js index 19d7386..c737261 100644 --- a/js/Dialogue.js +++ b/js/Dialogue.js @@ -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(); } diff --git a/js/_colorPicker.js b/js/_colorPicker.js index 8bedab4..79e8eab 100644 --- a/js/_colorPicker.js +++ b/js/_colorPicker.js @@ -1,757 +1,779 @@ -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(); - -function cpInit() { - // Appending the palette styles - document.getElementsByTagName("head")[0].appendChild(styleElement); - - // Saving first icon position - startPickerIconPos[0] = [miniPickerCanvas.getBoundingClientRect().left, miniPickerCanvas.getBoundingClientRect().top]; - // Set the correct size of the canvas - miniPickerCanvas.height = miniPickerCanvas.getBoundingClientRect().height; - miniPickerCanvas.width = miniPickerCanvas.getBoundingClientRect().width; - - // Update picker position - updatePickerByHex(colourValue.value); - // Startup updating - updateAllSliders(); - // Fill minislider - updateMiniSlider(colourValue.value); - // Fill minipicker - updatePickerByHex(colourValue.value); - - updateMiniPickerSpectrum(); -} - -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() { - styleElement.innerHTML = styles[0] + styles[1]; -} - -/** 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) { - let toUpdate; - let slider; - let input; - let hexColour; - let sliderValues; - - toUpdate = sliders[sliderIndex - 1]; + // Picker mode events + Events.on("click", "cp-rgb", changePickerMode, 'rgb'); + Events.on("click", "cp-hsv", changePickerMode, 'hsv'); + Events.on("click", "cp-hsl", changePickerMode, 'hsl'); - slider = toUpdate.getElementsByTagName("input")[0]; - input = toUpdate.getElementsByTagName("input")[1]; + // 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"); - // Update label value - input.value = slider.value; + init(); + + function init() { + // TODO: BIND EVENTS + // Appending the palette styles + document.getElementsByTagName("head")[0].appendChild(styleElement); - // Update preview colour - // get slider values - sliderValues = getSlidersValues(); - // Generate preview colour - hexColour = new Color(currentPickerMode, sliderValues[0], sliderValues[1], sliderValues[2]); + // Saving first icon position + startPickerIconPos[0] = [miniPickerCanvas.getBoundingClientRect().left, miniPickerCanvas.getBoundingClientRect().top]; + // Set the correct size of the canvas + miniPickerCanvas.height = miniPickerCanvas.getBoundingClientRect().height; + miniPickerCanvas.width = miniPickerCanvas.getBoundingClientRect().width; - // Update preview colour div - colourPreview.style.backgroundColor = '#' + hexColour.hex; - colourValue.value = '#' + hexColour.hex; + // Update picker position + updatePickerByHex(colourValue.value); + // Startup updating + updateAllSliders(); + // Fill minislider + updateMiniSlider(colourValue.value); + // Fill minipicker + updatePickerByHex(colourValue.value); - // Update sliders background - // there's no other way than creating a custom css file, appending it to the head and - // specify the sliders' backgrounds here - - styles[0] = ''; - for (let i=0; i -8 && top > -8 && left < canvasRect.width-8 && top < canvasRect.height-8){ - activePickerIcon.style["left"] = "" + left + "px"; - activePickerIcon.style["top"]= "" + top + "px"; - - currPickerIconPos[0] = [left, top]; + styles[0] = ''; + for (let i=0; i -8 && top > -8 && left < canvasRect.width-8 && top < canvasRect.height-8){ + activePickerIcon.style["left"] = "" + left + "px"; + activePickerIcon.style["top"]= "" + top + "px"; + + currPickerIconPos[0] = [left, top]; + } + + updateMiniPickerColour(); + updateOtherIcons(); + } + } + + // 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], + sliders[2].getElementsByTagName("input")[0]]; + + switch (currentPickerMode) { + case 'rgb': + colour = colour.rgb; + + mySliders[0].value = colour.r; + mySliders[1].value = colour.g; + mySliders[2].value = colour.b; + + break; + case 'hsv': + colour = colour.hsv; + + 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; + mySliders[1].value = colour.s; + mySliders[2].value = colour.l; + + break; + default: + break; + } + + updateAllSliders(false); + } + + // Gets the position of the picker cursor relative to the canvas + function getCursorPosMinipicker(e) { + var x; + var y; + + if (e.pageX != undefined && e.pageY != undefined) { + x = e.pageX; + y = e.pageY; + } + else { + x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; + y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; + } + + x -= miniPickerCanvas.offsetLeft; + 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) { + let hsv = new Color("hex", hex).hsv; + let xPos = miniPickerCanvas.width * hsv.h/360 - 8; + let yPos = miniPickerCanvas.height * hsv.s/100 + 8; + + miniPickerSlider.value = hsv.v; + + currPickerIconPos[0][0] = xPos; + currPickerIconPos[0][1] = miniPickerCanvas.height - yPos; + + if (currPickerIconPos[0][1] >= 92) + { + currPickerIconPos[0][1] = 91.999; + } + + activePickerIcon.style.left = '' + xPos + 'px'; + activePickerIcon.style.top = '' + (miniPickerCanvas.height - yPos) + 'px'; + activePickerIcon.style.backgroundColor = '#' + getMiniPickerColour(); + + colourPreview.style.backgroundColor = hex; + + updateOtherIcons(); + updateMiniSlider(hex); + } + + // 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 + newHex = newHsv.hex; + + colourValue.value = newHex; + + updateMiniPickerSpectrum(); updateMiniPickerColour(); + } + + // Updates the hex colour after having changed the minislider (MERGE) + function updateMiniPickerColour() { + let hex = getMiniPickerColour(); + + activePickerIcon.style.backgroundColor = '#' + hex; + + // Update hex and sliders based on hex + colourValue.value = '#' + hex; + colourPreview.style.backgroundColor = '#' + hex; + + updateSlidersByHex(hex); + updateMiniSlider(hex); updateOtherIcons(); } -} -// 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], - sliders[2].getElementsByTagName("input")[0]]; + // Returns the current colour of the minipicker + function getMiniPickerColour() { + let pickedColour; - switch (currentPickerMode) { - case 'rgb': - colour = colour.rgb; + pickedColour = miniPickerCanvas.getContext('2d').getImageData(currPickerIconPos[0][0] + 8, + currPickerIconPos[0][1] + 8, 1, 1).data; - mySliders[0].value = colour.r; - mySliders[1].value = colour.g; - mySliders[2].value = colour.b; - - break; - case 'hsv': - colour = colour.hsv; - - mySliders[0].value = colour.h * 360; - mySliders[1].value = colour.s * 100; - mySliders[2].value = colour.v * 100; - - break; - case 'hsl': - colour = colour.hsl; - - mySliders[0].value = colour.h * 360; - mySliders[1].value = colour.s * 100; - mySliders[2].value = colour.l * 100; - - break; - default: - break; + return new Color("rgb", Math.round(pickedColour[0]), Math.round(pickedColour[1]), Math.round(pickedColour[2])).hex; } - updateAllSliders(false); -} + // Update the background gradient of the slider in the minipicker + function updateMiniSlider(hex) { + let rgb = Color.hexToRgb(hex); -// Gets the position of the picker cursor relative to the canvas -function getCursorPosMinipicker(e) { - var x; - var y; - - if (e.pageX != undefined && e.pageY != undefined) { - x = e.pageX; - y = e.pageY; - } - else { - x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; - y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; + styles[1] = "input[type=range]#cp-minipicker-slider::-webkit-slider-runnable-track { background: rgb(2,0,36);"; + styles[1] += "background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, " + + "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",1) 100%);}"; + + updateMiniPickerSpectrum(); + updateStyles(); } - x -= miniPickerCanvas.offsetLeft; - y -= miniPickerCanvas.offsetTop; + // 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; - return [Math.round(x), Math.round(y)]; -} + ctx.clearRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height); -// 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; + // Drawing hues + var hGrad = ctx.createLinearGradient(0, 0, miniPickerCanvas.width, 0); - miniPickerSlider.value = hsv.v; + for (let i=0; i<7; i++) { + let stopHex = new Color("hsv", 60*i, 100, hsv.v); + hGrad.addColorStop(i / 6, '#' + stopHex.hex); + } + ctx.fillStyle = hGrad; + ctx.fillRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height); - currPickerIconPos[0][0] = xPos; - currPickerIconPos[0][1] = miniPickerCanvas.height - yPos; - - if (currPickerIconPos[0][1] >= 92) - { - currPickerIconPos[0][1] = 91.999; - } - - activePickerIcon.style.left = '' + xPos + 'px'; - activePickerIcon.style.top = '' + (miniPickerCanvas.height - yPos) + 'px'; - activePickerIcon.style.backgroundColor = '#' + getMiniPickerColour(); - - colourPreview.style.backgroundColor = hex; - - updateOtherIcons(); - updateMiniSlider(hex); -} - -// 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; - - // Adding slider value to value - newHsv = new Color("hsv", newHsv.h, newHsv.s, parseInt(event.target.value)); - // Updating hex - newHex = newHsv.hex; - - colourValue.value = newHex; - - updateMiniPickerSpectrum(); - 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; - colourPreview.style.backgroundColor = '#' + hex; - - updateSlidersByHex(hex); - updateMiniSlider(hex); - updateOtherIcons(); -} - -// 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) { - let rgb = Color.hexToRgb(hex); - - styles[1] = "input[type=range]#cp-minipicker-slider::-webkit-slider-runnable-track { background: rgb(2,0,36);"; - styles[1] += "background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, " + - "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + ",1) 100%);}"; - - updateMiniPickerSpectrum(); - updateStyles(); -} - -// 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; - - ctx.clearRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height); - - // Drawing hues - var hGrad = ctx.createLinearGradient(0, 0, miniPickerCanvas.width, 0); - - for (let i=0; i<7; i++) { - let stopHex = new Color("hsv", 60*i, 100, hsv.v); - hGrad.addColorStop(i / 6, '#' + stopHex.hex); - } - ctx.fillStyle = hGrad; - ctx.fillRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height); - - // Drawing sat / lum - var vGrad = ctx.createLinearGradient(0, 0, 0, miniPickerCanvas.height); - vGrad.addColorStop(0, 'rgba(' + white.r +',' + white.g + ',' + white.b + ',0)'); - vGrad.addColorStop(1, 'rgba(' + white.r +',' + white.g + ',' + white.b + ',1)'); - - ctx.fillStyle = vGrad; - ctx.fillRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height); -} - -function toggleDraggingCursor() { - draggingCursor = !draggingCursor; -} - -function changePickingMode(event, newMode) { - let nIcons = pickerIcons.length; - let canvasContainer = document.getElementById("cp-canvas-container"); - // Number of hex containers to add - let nHexContainers; - - // Remove selected class from previous mode - document.getElementById("cp-colour-picking-modes").getElementsByClassName("cp-selected-mode")[0].classList.remove("cp-selected-mode"); - // Updating mode - currentPickingMode = newMode; - // Adding selected class to new mode - event.target.classList.add("cp-selected-mode"); - - for (let i=1; i 110) { - return '#332f35' - } - else { - return '#c2bbc7'; + for (let i=0; i 110) { + return '#332f35' + } + else { + return '#c2bbc7'; + } + + //take in a color and return its brightness + function colorBrightness (color) { + var r = parseInt(color.slice(1, 3), 16); + var g = parseInt(color.slice(3, 5), 16); + var b = parseInt(color.slice(5, 7), 16); + return Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000); + } } -} \ No newline at end of file + + return { + init + } +})(); + diff --git a/js/_drawLine.js b/js/_drawLine.js deleted file mode 100644 index dc330fc..0000000 --- a/js/_drawLine.js +++ /dev/null @@ -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; - } - } -} \ No newline at end of file diff --git a/js/_ellipse.js b/js/_ellipse.js index ab1c358..eb59c4d 100644 --- a/js/_ellipse.js +++ b/js/_ellipse.js @@ -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') { diff --git a/js/checkCompatibilityPixelEditor.js b/js/checkCompatibilityPixelEditor.js deleted file mode 100644 index f4463fa..0000000 --- a/js/checkCompatibilityPixelEditor.js +++ /dev/null @@ -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"; diff --git a/js/layers/Layer.js b/js/layers/Layer.js index 3d01a37..3300839 100644 --- a/js/layers/Layer.js +++ b/js/layers/Layer.js @@ -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; + } + } + } } \ No newline at end of file diff --git a/js/pixel-editor.js b/js/pixel-editor.js index 9703038..8b1fdb5 100644 --- a/js/pixel-editor.js +++ b/js/pixel-editor.js @@ -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 @@ -124,4 +121,19 @@ window.onbeforeunload = function() { return 'You will lose your pixel if it\'s not saved!'; else return; -}; \ No newline at end of file +}; + +// 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"; diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index cd410ac..5fbf1e7 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -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), diff --git a/js/tools/EraserTool.js b/js/tools/EraserTool.js index d678264..4061ed0 100644 --- a/js/tools/EraserTool.js +++ b/js/tools/EraserTool.js @@ -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), diff --git a/js/tools/RectangleTool.js b/js/tools/RectangleTool.js index d068c00..e9ac5c5 100644 --- a/js/tools/RectangleTool.js +++ b/js/tools/RectangleTool.js @@ -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') { diff --git a/views/popups/palette.hbs b/views/popups/palette.hbs index e5a3ae5..7f55a9e 100644 --- a/views/popups/palette.hbs +++ b/views/popups/palette.hbs @@ -6,37 +6,37 @@
- - - + + +
- +
- - + +
- - + +
- - + +
- -
+ +
@@ -48,12 +48,12 @@
- - - - - - + + + + + +