Made the color picker an IIFE

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();
         }
 

js/_colorPicker.js

@@ -1,3 +1,4 @@
+const ColorPicker = (() => {
     let sliders = document.getElementsByClassName("cp-slider-entry");
     let colourPreview = document.getElementById("cp-colour-preview");
     let colourValue = document.getElementById("cp-hex");
@@ -14,9 +15,42 @@ 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);
 
@@ -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]);
+                        rgbColour = Color.hsvToRgb({h:sliderValues[0], s:0, v:sliderValues[2]});
-                    gradientMin = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
+                        gradientMin = 'rgba(' + rgbColour.r + ',' + rgbColour.g + ',' + rgbColour.b + ',1)';
 
-                    rgbColour = hsvToRgb(sliderValues[0], 100, sliderValues[2]);
+                        rgbColour = Color.hsvToRgb({h:sliderValues[0], s:100, v:sliderValues[2]});
-                    gradientMax = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
+                        gradientMax = 'rgba(' + rgbColour.r + ',' + rgbColour.g + ',' + rgbColour.b + ',1)';
                         break;
                     case 'hsl':
-                    rgbColour = cpHslToRgb(sliderValues[0], 0, sliderValues[2]);
+                        rgbColour = Color.hslToRgb({h:sliderValues[0], s:0, l:sliderValues[2]});
-                    gradientMin = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
+                        gradientMin = 'rgba(' + rgbColour.r + ',' + rgbColour.g + ',' + rgbColour.b + ',1)';
 
-                    rgbColour = cpHslToRgb(sliderValues[0], 100, sliderValues[2]);
+                        rgbColour = Color.hslToRgb({h:sliderValues[0], s:100, l:sliderValues[2]});
-                    gradientMax = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
+                        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);
+                        rgbColour = Color.hsvToRgb({h:sliderValues[0], s:sliderValues[1], v:0});
-                    gradientMin = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
+                        gradientMin = 'rgba(' + rgbColour.r + ',' + rgbColour.g + ',' + rgbColour.b + ',1)';
 
-                    rgbColour = hsvToRgb(sliderValues[0], sliderValues[1], 100);
+                        rgbColour = Color.hsvToRgb({h:sliderValues[0], s:sliderValues[1], v:100});
-                    gradientMax = 'rgba(' + rgbColour[0] + ',' + rgbColour[1] + ',' + rgbColour[2] + ',1)';
+                        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);
+                        let rgb = Color.hslToRgb({h:sliderValues[0], s:sliderValues[1], l:50});
-                    ret += 'rgba(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ',1) 50%,';
+                        ret += 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',1) 50%,';
                     }
                     
                     ret += gradientMax + '100%);';
@@ -216,51 +250,36 @@ function getHueGradientHSL(sliderValues) {
     }
     // Computes the hue gradient used for hsv
     function getHueGradientHSV(sliderValues) {
-    let col = hsvToRgb(0, sliderValues[1], sliderValues[2]);
         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]);
+        return ret.substr(0, ret.length - 1);
-    ret += 'rgba(' + col[0] + ',' + col[1] + ',' + col[2] + ',1) 16.6666%,';
-
-    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) {
+    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) {
+    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)
         {
@@ -375,17 +394,17 @@ function updateSlidersByHex(hex, updateMini = true) {
             case 'hsv':
                 colour = colour.hsv;
 
-            mySliders[0].value = colour.h * 360;
+                mySliders[0].value = colour.h;
-            mySliders[1].value = colour.s * 100;
+                mySliders[1].value = colour.s;
-            mySliders[2].value = colour.v * 100;
+                mySliders[2].value = colour.v;
 
                 break;
             case 'hsl':
                 colour = colour.hsl;
 
-            mySliders[0].value = colour.h * 360;
+                mySliders[0].value = colour.h;
-            mySliders[1].value = colour.s * 100;
+                mySliders[1].value = colour.s;
-            mySliders[2].value = colour.l * 100;
+                mySliders[2].value = colour.l;
 
                 break;
             default:
@@ -448,6 +467,8 @@ function miniSliderInput(event) {
         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
@@ -464,7 +485,6 @@ 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;
@@ -524,11 +544,7 @@ function updateMiniPickerSpectrum() {
         ctx.fillRect(0, 0, miniPickerCanvas.width, miniPickerCanvas.height);
     }
 
-function toggleDraggingCursor() {
+    function changePickingMode(newMode, event) {
-    draggingCursor = !draggingCursor;
-}
-
-function changePickingMode(event, newMode) {
         let nIcons = pickerIcons.length;
         let canvasContainer = document.getElementById("cp-canvas-container");
         // Number of hex containers to add
@@ -755,3 +771,9 @@ function getHexPreviewColour(hex) {
             return Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) / 1000);
         }
     }
+
+    return {
+        init
+    }
+})();
+

js/_drawLine.js

@@ -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;
-		}
-	}
-}

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);
+	currentLayer.drawLine(startEllipseX, startEllipseY, endEllipseX, startEllipseY, tool.ellipse.brushSize);
-	line(endEllipseX, startEllipseY, endEllipseX, endEllipseY, tool.ellipse.brushSize);
+	currentLayer.drawLine(endEllipseX, startEllipseY, endEllipseX, endEllipseY, tool.ellipse.brushSize);
-	line(endEllipseX, endEllipseY, startEllipseX, endEllipseY, tool.ellipse.brushSize);
+	currentLayer.drawLine(endEllipseX, endEllipseY, startEllipseX, endEllipseY, tool.ellipse.brushSize);
-	line(startEllipseX, endEllipseY, startEllipseX, startEllipseY, tool.ellipse.brushSize);
+	currentLayer.drawLine(startEllipseX, endEllipseY, startEllipseX, startEllipseY, tool.ellipse.brushSize);
 
 	// If I have to fill it, I do so
 	if (ellipseDrawMode == 'fill') {

js/checkCompatibilityPixelEditor.js

@@ -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";

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;
+            }
+        }
+    }
 }

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
@@ -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";

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), 

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), 

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);
+        currentLayer.drawLine(startRectX, startRectY, endRectX, startRectY, this.currSize);
-        line(endRectX, startRectY, endRectX, endRectY, this.currSize);
+        currentLayer.drawLine(endRectX, startRectY, endRectX, endRectY, this.currSize);
-        line(endRectX, endRectY, startRectX, endRectY, this.currSize);
+        currentLayer.drawLine(endRectX, endRectY, startRectX, endRectY, this.currSize);
-        line(startRectX, endRectY, startRectX, startRectY, this.currSize);
+        currentLayer.drawLine(startRectX, endRectY, startRectX, startRectY, this.currSize);
 
         // If I have to fill it, I do so
         if (this.currFillMode == 'fill') {

views/popups/palette.hbs

@@ -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-rgb" class="cp-selected-mode">RGB</button>
-			<button id="cp-hsv" onclick="changePickerMode(this, 'hsv')">HSV</button>
+			<button id="cp-hsv">HSV</button>
-			<button id="cp-hsl" onclick="changePickerMode(this, 'hsl')">HSL</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="range" min="0" max="255" class="colour-picker-slider" id="first-slider"/>
-				<input type = "text" value = "128" onchange="inputChanged(this,1)"/>
+				<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="range" min="0" max ="255" class="colour-picker-slider" id="second-slider"/>
-				<input type = "text" value = "128" onchange="inputChanged(this,2)"/>
+				<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="range" min = "0" max = "255" class = "colour-picker-slider" id = "third-slider"/>
-				<input type = "text" value = "128" onchange="inputChanged(this,3)"/>
+				<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)"/>
+			<input type = "range" min = "0" max = "100" id = "cp-minipicker-slider"/>
-			<div id="cp-canvas-container" onmousemove="movePickerIcon(event)">
+			<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 id="cp-mono" class="cp-selected-mode">Mono</button>
-				<button onclick="changePickingMode(event,'analog')">Nlgs</button>
+				<button id="cp-analog">Nlgs</button>
-				<button onclick="changePickingMode(event,'cmpt')">Cmpt</button>
+				<button id="cp-cmpt">Cmpt</button>
-				<button onclick="changePickingMode(event,'tri')">Tri</button>
+				<button id="cp-tri">Tri</button>
-				<button onclick="changePickingMode(event,'scmpt')">Scm</button>
+				<button id="cp-scmpt">Scm</button>
-				<button onclick="changePickingMode(event,'tetra')">Tetra</button>
+				<button id="cp-tetra">Tetra</button>
 			</div>
 		</div>
 	</div>