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

Turn ToolSelector into a prototype class (was closure based)

Browse Source
This commit is contained in:
Vince 2012-09-15 20:48:01 +02:00
parent 9a6ad78f63
commit dbae35c5a5
2 changed files with 57 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
js/ToolSelector.js
View File

@ -5,26 +5,32 @@
* @require Events * @require Events
* @require pskl.drawingtools * @require pskl.drawingtools
*/ */
$.namespace("pskl"); (function () {
var ns = $.namespace("pskl.controller");
pskl.ToolSelector = (function() {
ns.ToolController = function () {
var toolInstances = { this.toolInstances = {
"simplePen" : new pskl.drawingtools.SimplePen(), "simplePen" : new pskl.drawingtools.SimplePen(),
"eraser" : new pskl.drawingtools.Eraser(), "eraser" : new pskl.drawingtools.Eraser(),
"paintBucket" : new pskl.drawingtools.PaintBucket(), "paintBucket" : new pskl.drawingtools.PaintBucket(),
"stroke" : new pskl.drawingtools.Stroke(), "stroke" : new pskl.drawingtools.Stroke(),
"rectangle" : new pskl.drawingtools.Rectangle(), "rectangle" : new pskl.drawingtools.Rectangle(),
"circle" : new pskl.drawingtools.Circle(), "circle" : new pskl.drawingtools.Circle(),
"move" : new pskl.drawingtools.Move(), "move" : new pskl.drawingtools.Move(),
"rectangleSelect" : new pskl.drawingtools.RectangleSelect(), "rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
"shapeSelect" : new pskl.drawingtools.ShapeSelect() "shapeSelect" : new pskl.drawingtools.ShapeSelect()
};
this.currentSelectedTool = this.toolInstances.simplePen;
this.previousSelectedTool = this.toolInstances.simplePen;
}; };
var currentSelectedTool = toolInstances.simplePen; /**
var previousSelectedTool = toolInstances.simplePen; * @private
*/
var activateToolOnStage_ = function(tool) { ns.ToolController.prototype.activateToolOnStage_ = function(tool) {
var stage = $("body"); var stage = $("body");
var previousSelectedToolClass = stage.data("selected-tool-class"); var previousSelectedToolClass = stage.data("selected-tool-class");
if(previousSelectedToolClass) { if(previousSelectedToolClass) {
@ -34,24 +40,27 @@ pskl.ToolSelector = (function() {
stage.data("selected-tool-class", tool.toolId); stage.data("selected-tool-class", tool.toolId);
}; };
var selectTool_ = function(tool) { /**
console.log("Selecting Tool:" , currentSelectedTool); * @private
currentSelectedTool = tool; */
activateToolOnStage_(currentSelectedTool); ns.ToolController.prototype.selectTool_ = function(tool) {
console.log("Selecting Tool:" , this.currentSelectedTool);
this.currentSelectedTool = tool;
this.activateToolOnStage_(this.currentSelectedTool);
$.publish(Events.TOOL_SELECTED, [tool]); $.publish(Events.TOOL_SELECTED, [tool]);
}; };
/** /**
* @private * @private
*/ */
var onToolIconClicked_ = function(evt) { ns.ToolController.prototype.onToolIconClicked_ = function(evt) {
var target = $(evt.target); var target = $(evt.target);
var clickedTool = target.closest(".tool-icon"); var clickedTool = target.closest(".tool-icon");
if(clickedTool.length) { if(clickedTool.length) {
for(var tool in toolInstances) { for(var tool in this.toolInstances) {
if (toolInstances[tool].toolId == clickedTool.data().toolId) { if (this.toolInstances[tool].toolId == clickedTool.data().toolId) {
selectTool_(toolInstances[tool]); this.selectTool_(this.toolInstances[tool]);
// Show tool as selected: // Show tool as selected:
$('#menubar .tool-icon.selected').removeClass('selected'); $('#menubar .tool-icon.selected').removeClass('selected');
@ -64,10 +73,10 @@ pskl.ToolSelector = (function() {
/** /**
* @private * @private
*/ */
var createToolMarkup_ = function() { ns.ToolController.prototype.createToolMarkup_ = function() {
var currentTool, toolMarkup = ''; var currentTool, toolMarkup = '';
for (var toolKey in toolInstances) { for (var toolKey in this.toolInstances) {
currentTool = toolInstances[toolKey]; currentTool = this.toolInstances[toolKey];
toolMarkup += '<li class="tool-icon ' + currentTool.toolId + '" data-tool-id="' + currentTool.toolId + toolMarkup += '<li class="tool-icon ' + currentTool.toolId + '" data-tool-id="' + currentTool.toolId +
'" title="' + currentTool.helpText + '"></li>'; '" title="' + currentTool.helpText + '"></li>';
} }
@ -79,29 +88,30 @@ pskl.ToolSelector = (function() {
* on the drawing canvas. * on the drawing canvas.
* @private * @private
*/ */
var isShowGridChecked_ = function() { ns.ToolController.prototype.isShowGridChecked_ = function() {
var showGridCheckbox = $('#show-grid'); var showGridCheckbox = $('#show-grid');
var isChecked = showGridCheckbox.is(':checked'); var isChecked = showGridCheckbox.is(':checked');
return isChecked; return isChecked;
}; };
return { /**
init: function() { * @public
*/
createToolMarkup_(); ns.ToolController.prototype.init = function() {
// Initialize tool: this.createToolMarkup_();
// Set SimplePen as default selected tool:
selectTool_(toolInstances.simplePen);
// Activate listener on tool panel:
$("#menubar").click(onToolIconClicked_);
// Show/hide the grid on drawing canvas: // Initialize tool:
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()]); // Set SimplePen as default selected tool:
$('#show-grid').change(function(evt) { this.selectTool_(this.toolInstances.simplePen);
var checked = isShowGridChecked_(); // Activate listener on tool panel:
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [checked]); $("#menubar").click($.proxy(this.onToolIconClicked_, this));
});
} // Show/hide the grid on drawing canvas:
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [this.isShowGridChecked_()]);
$('#show-grid').change($.proxy(function(evt) {
var checked = this.isShowGridChecked_();
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [checked]);
}, this));
}; };
})(); })();

4
js/piskel.js
View File

@ -144,7 +144,9 @@ $.namespace("pskl");
}, },
finishInit : function () { finishInit : function () {
pskl.ToolSelector.init(); var toolController = new pskl.controller.ToolController();
toolController.init();
pskl.Palette.init(frameSheet); pskl.Palette.init(frameSheet);
}, },