Merge pull request #5 from juliandescottes/add-lastcolors

Add lastcolors

css/piskel.css

@@ -1,36 +0,0 @@
-html, body {
-	height : 100%;
-}
-
-.debug {
-	border : 1px Solid black;
-}
-
-.left-nav {
-	position:absolute;
-	top : 0;
-	bottom : 0;
-	width : 200px;
-	background : #000;
-}
-
-.main-panel {
-	position:absolute;
-	top : 0;
-	bottom : 0;
-	left : 200px;
-	right : 0;
-	background : #ccc;
-}
-
-.preview-container {
-	position : absolute;
-	top : 30px;
-	right : 0;
-	height : 200px;
-	width : 200px;
-	background : white;
-	border : 0px Solid black;
-	border-radius:5px 0px 0px 5px;
-	box-shadow : 0px 0px 2px rgba(0,0,0,0.2);
-}

css/style.css

@@ -127,6 +127,13 @@ ul, li {
   z-index: 1;
 }
 
+#palette li {
+  display : inline-block;
+  height : 20px;
+  width : 20px;
+  margin : 5px;
+}
+
 /* Force apparition of scrollbars on leopard */
 ::-webkit-scrollbar {
     -webkit-appearance: none;

index.html

@@ -26,6 +26,8 @@
       <div class="canvas-background"></div>
     </div>
     <input id="color-picker" class="color" type="text" value=""/>
+    <ul id="palette" onclick="piskel.onPaletteClick(event)">
+    </ul>
     <div class='preview-container'>
       <div id='preview-canvas-container' class="canvas-container">
         <div class="canvas-background"></div>

js/frameSheetModel.js

@@ -18,6 +18,25 @@ var FrameSheetModel = (function() {
 			return true; // I'm always right dude
 		},
 
+		getAllPixels : function () {
+			var pixels = [];
+			for (var i = 0 ; i < frames.length ; i++) {
+				pixels = pixels.concat(this._getFramePixels(frames[i]));
+			}
+			return pixels;
+		},
+
+		_getFramePixels : function (frame) {
+			var pixels = [];
+			for (var i = 0 ; i < frame.length ; i++) {
+				var line = frame[i];
+				for (var j = 0 ; j < line.length ; j++) {
+					pixels.push(line[j]);
+				}
+			}
+			return pixels;
+		},
+
 		// Could be used to pass around model using long GET param (good enough for simple models) and 
 		// do some temporary locastorage
 		serialize: function() {

js/piskel.js

@@ -4,7 +4,7 @@
       // Constants:
       TRANSPARENT_COLOR = 'tc',
       //TRANSPARENT_COLOR = 'pink',
-      DEFAULT_PEN_COLOR = '#000',
+      DEFAULT_PEN_COLOR = '#000000',
 
       // Configuration:
       // Canvas size in pixel size (not dpi related)
@@ -29,7 +29,8 @@
       isRightClicked = false, 
       activeFrameIndex = -1, 
       animIndex = 0,
-      penColor = DEFAULT_PEN_COLOR;
+      penColor = DEFAULT_PEN_COLOR,
+      paletteColors = [];
 
 
   var piskel = {
@@ -38,6 +39,7 @@
       frameSheet.addEmptyFrame();
       this.setActiveFrame(0);
 
+      this.initPalette();
       this.initDrawingArea();
       this.initPreviewSlideshow();
       this.initAnimationPreview();
@@ -69,11 +71,32 @@
     },
 
     initColorPicker: function() {
-      var colorPicker = document.getElementById('color-picker');
-      colorPicker.value = DEFAULT_PEN_COLOR;
-      colorPicker.addEventListener('change', function(evt) {
-        penColor = colorPicker.value;
-      });
+      this.colorPicker = $('color-picker');
+      this.colorPicker.value = DEFAULT_PEN_COLOR;
+      this.colorPicker.addEventListener('change', this.onPickerChange.bind(this));
+    },
+
+    onPickerChange : function(evt) {
+        penColor = this.colorPicker.value;
+    },
+
+    initPalette : function (color) {
+      var pixels = frameSheet.getAllPixels();
+      this.paletteEl = $('palette');
+      for (var i = 0 ; i < pixels.length ; i++) {
+        this.addColorToPalette(pixels[i]);
+      }
+    },
+
+    addColorToPalette : function (color) {
+      if (color && color != TRANSPARENT_COLOR && paletteColors.indexOf(color) == -1) {
+        var colorEl = document.createElement("li");
+        colorEl.setAttribute("data-color", color);
+        colorEl.setAttribute("title", color);
+        colorEl.style.background = color;
+        this.paletteEl.appendChild(colorEl);
+        paletteColors.push(color);
+      }
     },
 
     initDrawingArea : function() {
@@ -87,13 +110,13 @@
         drawingAreaContainer.setAttribute('style', 
           'width:' + framePixelWidth * drawingCanvasDpi + 'px; height:' + framePixelHeight * drawingCanvasDpi + 'px;');
 
-        drawingAreaCanvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(arguments[0])');
+        drawingAreaCanvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(event)');
         drawingAreaContainer.appendChild(drawingAreaCanvas);
 
         var body = document.getElementsByTagName('body')[0];
         body.setAttribute('onmouseup', 'piskel.onCanvasMouseup(arguments[0])');
-        drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(arguments[0])');
-        drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(arguments[0])');
+        drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(event)');
+        drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(event)');
 
         this.drawFrameToCanvas(frameSheet.getFrameByIndex(this.getActiveFrameIndex()), drawingAreaCanvas, drawingCanvasDpi);
     },
@@ -306,15 +329,15 @@
       for(var col = 0, num_col = frame.length; col < num_col; col++) {
         for(var row = 0, num_row = frame[col].length; row < num_row; row++) {
           pixelColor = frame[col][row];
-          
           if(pixelColor == undefined || pixelColor == TRANSPARENT_COLOR) {
             context.clearRect(col * dpi, row * dpi, dpi, dpi);   
           } else {
+            if (pixelColor.indexOf("#") != 0) 
+              pixelColor = "#" + pixelColor;
+            this.addColorToPalette(pixelColor);
             context.fillStyle = pixelColor;
             context.fillRect(col * dpi, row * dpi, dpi, dpi);
           }
-         
-          
         }
       }
     },
@@ -326,6 +349,15 @@
       return false;
     },
 
+    onPaletteClick : function (event) {
+      var color = event.target.getAttribute("data-color");
+      if (null !== color) {
+        var colorPicker = $('color-picker');
+        colorPicker.color.fromString(color);
+        this.onPickerChange();
+      }
+    },
+    
     getRelativeCoordinates : function (x, y) {
       var canvasRect = drawingAreaCanvas.getBoundingClientRect();
       return {