Merge branch 'master' into add-dynamicsize

README.md

@@ -5,6 +5,12 @@ The goal is to create an easy-to-use/in-the-cloud/web-based 2d animation editor.
 
 Try it at : http://juliandescottes.github.com/piskel/
 
+16 Sep 2012
+------------------------------------
+Just a quick update to post a new screenshot. @grosbouddha is delivering features so fast, it's hard to keep up !
+
+![Screenshot 4](https://dl.dropbox.com/u/17803671/screen_piskel_4.png "Screenshot 4")
+
 15 Sep 2012
 ------------------------------------
 2 weeks already since the last README.md update, and so many changes ! There has been a continuous stream of features added to piskel by @grosboudda, @captainbrosset (thanks guys) and myself.

js/Constants.js

@@ -15,6 +15,12 @@ var Constants = {
      * strokes and rectangles:
      */
     SELECTION_TRANSPARENT_COLOR: 'rgba(255, 255, 255, 0.6)',
+
+    /*
+     * When a tool is hovering the drawing canvas, we highlight the eventual
+     * pixel target with this color:
+     */
+    TOOL_TARGET_HIGHLIGHT_COLOR: 'rgba(255, 255, 255, 0.2)',
     
     /*
      * Default entry point for piskel web service:

js/Events.js

@@ -28,7 +28,7 @@ Events = {
     REDRAW_PREVIEWFILM: "REDRAW_PREVIEWFILM",
 
     GRID_DISPLAY_STATE_CHANGED: "GRID_DISPLAY_STATE_CHANGED",
-
+    
     /**
      * The framesheet was reseted and is now probably drastically different.
      * Number of frames, content of frames, color used for the palette may have changed.

js/controller/PaletteController.js

@@ -14,15 +14,22 @@
     $.publish(Events.COLOR_SELECTED, [inputPicker.val(), evt.data.isPrimary]);
   };
 
-   /**
+  /**
    * @private
    */
-  ns.PaletteController.prototype.createPalette_ = function (colors) {
+  ns.PaletteController.prototype.createPaletteMarkup_ = function (colors) {
     // Always adding transparent color
     this.paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
-    for(var color in colors) {
+    
+    for(var i=0, l=this.paletteColors.length; i<l; i++) {
       if(color != Constants.TRANSPARENT_COLOR) {
-        this.addColorToPalette_(color);
+        var color = this.paletteColors[i];
+        var colorEl = document.createElement("li");    
+        colorEl.className = "palette-color";
+        colorEl.setAttribute("data-color", color);
+        colorEl.setAttribute("title", color);
+        colorEl.style.background = color;
+        this.paletteRoot.append(colorEl);
       }
     }
   };
@@ -32,16 +39,19 @@
    */
   ns.PaletteController.prototype.addColorToPalette_ = function (color) {
     if (this.paletteColors.indexOf(color) == -1 && color != Constants.TRANSPARENT_COLOR) {
-      var colorEl = document.createElement("li");    
-      colorEl.className = "palette-color";
-      colorEl.setAttribute("data-color", color);
-      colorEl.setAttribute("title", color);
-      colorEl.style.background = color;
-      this.paletteRoot.append(colorEl);
       this.paletteColors.push(color);
     }
   };
 
+  /**
+   * @private
+   */
+  ns.PaletteController.prototype.addColorsToPalette_ = function (colors) {
+    for(var color in colors) {
+      this.addColorToPalette_(color);
+    }
+  };
+
   /**
    * @private
    */
@@ -86,16 +96,19 @@
     this.framesheet = framesheet;
 
     // Initialize palette:
-    this.createPalette_(this.framesheet.getUsedColors());
+    this.addColorsToPalette_(this.framesheet.getUsedColors());
+    this.createPaletteMarkup_();
 
     $.subscribe(Events.FRAMESHEET_RESET, $.proxy(function(evt) {
-      this.createPalette_(this.framesheet.getUsedColors());
+      this.addColorsToPalette_(this.framesheet.getUsedColors());
+      this.createPaletteMarkup_();
     }, this));
 
     this.paletteRoot.mouseup($.proxy(this.onPaletteColorClick_, this));
     
     $.subscribe(Events.COLOR_SELECTED, $.proxy(function(evt, color) {
       this.addColorToPalette_(color);
+      this.createPaletteMarkup_();
     }, this));
 
     // Initialize colorpickers:

js/drawingtools/BaseTool.js

@@ -12,7 +12,24 @@
 	
 	ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
 
-	ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {};
+	ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
+		if (overlay.containsPixel(col, row)) {
+			if (!isNaN(this.highlightedPixelCol) &&
+				!isNaN(this.highlightedPixelRow) &&
+				(this.highlightedPixelRow != row ||
+					this.highlightedPixelCol != col)) {
+
+				// Clean the previously highlighted pixel:
+				overlay.clear();
+			}
+
+			// Show the current pixel targeted by the tool:
+			overlay.setPixel(col, row, Constants.TOOL_TARGET_HIGHLIGHT_COLOR);
+
+			this.highlightedPixelCol = col;
+			this.highlightedPixelRow = row;	
+		}
+	};
 
 	ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {};