mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Merge branch 'master' into add-dynamicsize

Browse Source
This commit is contained in:
juliandescottes 2012-09-16 23:27:00 +02:00
commit 8bee1fe4f3
5 changed files with 56 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -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.

6
js/Constants.js
View File

@ -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:

2
js/Events.js
View File

@ -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.

37
js/controller/PaletteController.js
View File

@ -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:

19
js/drawingtools/BaseTool.js
View File

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