Merge branch 'master' into gh-pages

This commit is contained in:
juliandescottes 2012-09-03 23:53:28 +02:00
commit 5e3748c97d
8 changed files with 129 additions and 78 deletions

View File

@ -77,6 +77,7 @@
<!-- Application libraries-->
<script src="js/FrameSheetModel.js"></script>
<script src="js/LocalStorageService.js"></script>
<script src="js/Palette.js"></script>
<script src="js/Notification.js"></script>
<script src="js/drawingtools/BaseTool.js"></script>
<script src="js/drawingtools/SimplePen.js"></script>

View File

@ -15,11 +15,17 @@ Events = {
CANVAS_RIGHT_CLICK_RELEASED: "CANVAS_RIGHT_CLICK_RELEASED",
/**
* Event to requset a refresh of the display.
* Event to request a refresh of the display.
* A bit overkill but, it's just workaround in our current drawing system.
* TODO: Remove or rework when redraw system is refactored.
*/
REFRESH: "REFRESH",
/**
* The framesheet was reseted and is now probably drastically different.
* Number of frames, content of frames, color used for the palette may have changed.
*/
FRAMESHEET_RESET: "FRAMESHEET_RESET",
SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
HIDE_NOTIFICATION: "HIDE_NOTIFICATION"

View File

@ -57,6 +57,20 @@ pskl.FrameSheetModel = (function() {
return pixels;
},
getUsedColors: function() {
var colors = {};
for (var frameIndex=0; frameIndex < frames.length; frameIndex++) {
var currentFrame = frames[frameIndex];
for (var i = 0 ; i < currentFrame.length ; i++) {
var line = currentFrame[i];
for (var j = 0 ; j < line.length ; j++) {
colors[line[j]] = line[j];
}
}
}
return colors;
},
// Could be used to pass around model using long GET param (good enough for simple models) and
// do some temporary locastorage
serialize: function() {
@ -71,6 +85,7 @@ pskl.FrameSheetModel = (function() {
deserialize : function (serialized) {
try {
frames = JSON.parse(serialized);
$.publish(Events.FRAMESHEET_RESET);
} catch (e) {
throw "Could not load serialized framesheet." + e.message
}

101
js/Palette.js Normal file
View File

@ -0,0 +1,101 @@
/*
* @provide pskl.Palette
*
* @require Constants
* @require Events
*/
$.namespace("pskl");
pskl.Palette = (function() {
var paletteRoot,
paletteColors = [];
/**
* @private
*/
var onPickerChange_ = function(evt) {
var inputPicker = $(evt.target);
$.publish(Events.COLOR_SELECTED, [inputPicker.val()]);
};
/**
* @private
*/
var createPalette_ = function (colors) {
// Always adding transparent color
paletteRoot.html('<span class="palette-color transparent-color" data-color="TRANSPARENT" title="Transparent"></span>');
for(var color in colors) {
if(color != Constants.TRANSPARENT_COLOR) {
addColorToPalette_(color);
}
}
};
/**
* @private
*/
var addColorToPalette_ = function (color) {
if (paletteColors.indexOf(color) == -1) {
var colorEl = document.createElement("li");
colorEl.className = "palette-color";
colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color);
colorEl.style.background = color;
paletteRoot[0].appendChild(colorEl);
paletteColors.push(color);
}
};
/**
* @private
*/
var onPaletteColorClick_ = function (event) {
var selectedColor = $(event.target).data("color");
var colorPicker = $('#color-picker');
if (selectedColor == Constants.TRANSPARENT_COLOR) {
// We can set the current palette color to transparent.
// You can then combine this transparent color with an advanced
// tool for customized deletions.
// Eg: bucket + transparent: Delete a colored area
// Stroke + transparent: hollow out the equivalent of a stroke
// The colorpicker can't be set to a transparent state.
// We set its background to white and insert the
// string "TRANSPARENT" to mimic this state:
colorPicker[0].color.fromString("#fff");
colorPicker.val("TRANSPARENT");
} else {
colorPicker[0].color.fromString(selectedColor);
}
$.publish(Events.COLOR_SELECTED, [selectedColor])
};
return {
init: function(framesheet) {
paletteRoot = $("#palette");
// Initialize palette:
createPalette_(framesheet.getUsedColors());
$.subscribe(Events.FRAMESHEET_RESET, function(evt) {
createPalette_(framesheet.getUsedColors());
});
paletteRoot.click(onPaletteColorClick_);
$.subscribe(Events.COLOR_USED, function(evt, color) {
addColorToPalette_(color);
});
// Initialize colorpicker:
var colorPicker = $('#color-picker');
colorPicker.val(Constants.DEFAULT_PEN_COLOR);
colorPicker.change(onPickerChange_);
}
};
})();

View File

@ -9,8 +9,6 @@ $.namespace("pskl");
pskl.ToolSelector = (function() {
var paletteColors = [];
var toolInstances = {
"simplePen" : new pskl.drawingtools.SimplePen(),
"eraser" : new pskl.drawingtools.Eraser(),
@ -68,54 +66,6 @@ pskl.ToolSelector = (function() {
}
};
/**
* @private
*/
var onPickerChange_ = function(evt) {
var inputPicker = $(evt.target);
$.publish(Events.COLOR_SELECTED, [inputPicker.val()]);
};
/**
* @private
*/
var addColorToPalette_ = function (color) {
if (paletteColors.indexOf(color) == -1) {
var paletteEl = $("#palette");
var colorEl = document.createElement("li");
colorEl.className = "palette-color";
colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color);
colorEl.style.background = color;
paletteEl[0].appendChild(colorEl);
paletteColors.push(color);
}
},
/**
* @private
*/
onPaletteColorClick_ = function (event) {
var selectedColor = $(event.target).data("color");
var colorPicker = $('#color-picker');
if (selectedColor == Constants.TRANSPARENT_COLOR) {
// We can set the current palette color to transparent.
// You can then combine this transparent color with an advanced
// tool for customized deletions.
// Eg: bucket + transparent: Delete a colored area
// Stroke + transparent: hollow out the equivalent of a stroke
// The colorpicker can't be set to a transparent state.
// We set its background to white and insert the
// string "TRANSPARENT" to mimic this state:
colorPicker[0].color.fromString("#fff");
colorPicker.val("TRANSPARENT");
} else {
colorPicker[0].color.fromString(selectedColor);
}
$.publish(Events.COLOR_SELECTED, [selectedColor])
};
return {
init: function() {
@ -125,18 +75,6 @@ pskl.ToolSelector = (function() {
// Activate listener on tool panel:
$("#tools-container").click(onToolIconClicked_);
// Initialize colorpicker:
var colorPicker = $('#color-picker');
colorPicker.val(Constants.DEFAULT_PEN_COLOR);
colorPicker.change(onPickerChange_);
// Initialize palette:
$("#palette").click(onPaletteColorClick_);
$.subscribe(Events.COLOR_USED, function(evt, color) {
addColorToPalette_(color);
});
// Special right click handlers (select the eraser tool)
$.subscribe(Events.CANVAS_RIGHT_CLICKED, function() {
previousSelectedTool = currentSelectedTool;

View File

@ -11,25 +11,12 @@
this.toolId = "tool-eraser";
};
pskl.utils.inherit(ns.Eraser, ns.BaseTool);
pskl.utils.inherit(ns.Eraser, ns.SimplePen);
/**
* @override
*/
ns.Eraser.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
// Change model:
frame[col][row] = Constants.TRANSPARENT_COLOR;
// Draw on canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(col, row, canvas, Constants.TRANSPARENT_COLOR, dpi);
};
/**
* @override
*/
ns.Eraser.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.applyToolAt(col, row, frame, color, canvas, dpi);
this.superclass.applyToolAt.call(this, col, row, frame, Constants.TRANSPARENT_COLOR, canvas, dpi);
};
})();

View File

@ -100,6 +100,7 @@ $.namespace("pskl");
this.startAnimation();
pskl.ToolSelector.init();
pskl.Palette.init(frameSheet);
},
getFramesheetIdFromUrl : function() {

View File

@ -37,6 +37,8 @@ jQuery.namespace = function() {
ns.inherit = function(extendedObject, inheritFrom) {
extendedObject.prototype = Object.create(inheritFrom.prototype);
extendedObject.prototype.constructor = extendedObject;
extendedObject.prototype.superclass = inheritFrom.prototype;
//pskl.ToolBehavior.Eraser.prototype = Object.create(pskl.ToolBehavior.BaseTool.prototype);
//prototypeskl.ToolBehavior.Eraser.prototype.constructor = pskl.ToolBehavior.Eraser;
};