Solved bug that made the colour picker appear in the canvas.

Signed-off-by: npalomba <nicola.palomba@studenti.galileilivorno.gov.it>

css/pixel-editor.scss

@@ -35,7 +35,7 @@ svg {
   outline: 0 !important;
 }
 
-canvas {
+.drawingCanvas {
   cursor: url('/pixel-art-where-to-start/pencil-tool-cursor.png');
 
   border: solid 1px #fff;

js/_addColorButton.js

@@ -52,6 +52,7 @@ on('click', 'add-color-button', function(){
   
   //show color picker
   addedColor.firstElementChild.jscolor.show();
+  console.log("showing picker");
   
   //hide edit button
   addedColor.lastChild.classList.add('hidden');

js/_jscolor.js

@@ -547,7 +547,7 @@ var jsc = {
 				//console.log(e.target,'=====================================')
 				//if they clicked on the delete button [lospec]
 				if (e.target.className == 'delete-color-button') {
-				  //saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: currentLayer.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
+				  //saveHistoryState({type: 'deletecolor', colorValue: jsc.picker.owner.toString(), canvas: canvas.context.getImageData(0, 0, canvasSize[0], canvasSize[1])});
 				  new HistoryStateDeleteColor(jsc.picker.owner.toString());
 				  
 				  deleteColor(jsc.picker.owner.styleElement);
@@ -784,15 +784,15 @@ var jsc = {
 			// Canvas implementation for modern browsers
 
 			var canvas = document.createElement('canvas');
-			var ctx = currentLayer.canvas.getContext('2d');
+			var ctx = canvas.getContext('2d');
 
 			var drawFunc = function (width, height, type) {
-				currentLayer.canvas.width = width;
+				canvas.width = width;
-				currentLayer.canvas.height = height;
+				canvas.height = height;
 
-				ctx.clearRect(0, 0, currentLayer.canvas.width, currentLayer.canvas.height);
+				ctx.clearRect(0, 0, canvas.width, canvas.height);
 
-				var hGrad = ctx.createLinearGradient(0, 0, currentLayer.canvas.width, 0);
+				var hGrad = ctx.createLinearGradient(0, 0, canvas.width, 0);
 				hGrad.addColorStop(0 / 6, '#F00');
 				hGrad.addColorStop(1 / 6, '#FF0');
 				hGrad.addColorStop(2 / 6, '#0F0');
@@ -802,9 +802,9 @@ var jsc = {
 				hGrad.addColorStop(6 / 6, '#F00');
 
 				ctx.fillStyle = hGrad;
-				ctx.fillRect(0, 0, currentLayer.canvas.width, currentLayer.canvas.height);
+				ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-				var vGrad = ctx.createLinearGradient(0, 0, 0, currentLayer.canvas.height);
+				var vGrad = ctx.createLinearGradient(0, 0, 0, canvas.height);
 				switch (type.toLowerCase()) {
 				case 's':
 					vGrad.addColorStop(0, 'rgba(255,255,255,0)');
@@ -816,7 +816,7 @@ var jsc = {
 					break;
 				}
 				ctx.fillStyle = vGrad;
-				ctx.fillRect(0, 0, currentLayer.canvas.width, canvas.height);
+				ctx.fillRect(0, 0, canvas.width, canvas.height);
 			};
 
 			paletteObj.elm = canvas;

js/_mouseEvents.js

@@ -93,7 +93,7 @@ window.addEventListener("mouseup", function (mouseEvent) {
     //fill starting at the location
 		fill(cursorLocation);
 	}
-	else if (currentTool == 'zoom') {
+	else if (currentTool == 'zoom' && mouseEvent.target == canvasView) {
 		let mode;
 		if (mouseEvent.which == 1){
 			mode = "in";

views/pixel-editor.hbs

@@ -98,8 +98,8 @@
     <div id="brush-preview"></div>
 
     <div id="canvas-view">
-        <canvas id="pixel-canvas"></canvas>
+        <canvas id="pixel-canvas" class = "drawingCanvas"></canvas>
-        <canvas id="checkerboard"></canvas>
+        <canvas id="checkerboard" class = "drawingCanvas"></canvas>
     </div>
     <div id="canvas-view-shadow"></div>
 
@@ -109,9 +109,7 @@
       <input id="load-palette-browse-holder" type="file" accept="image/png, image/gif"/>
       <canvas id="load-palette-canvas-holder"></canvas>
     </div>
-    
 
-    
     <div class="jscolor-picker-bottom">
       <span>#</span><input type="text" id="jscolor-hex-input"/>
       <div id="duplicate-color-warning" title="Color is a duplicate of another in palette">{{svg "warning.svg" width="14" height="12" }}</div>