101 lines
2.8 KiB
JavaScript
101 lines
2.8 KiB
JavaScript
/*
|
|
* @provide pskl.ToolSelector
|
|
*
|
|
* @require Constants
|
|
* @require Events
|
|
* @require pskl.drawingtools
|
|
*/
|
|
$.namespace("pskl");
|
|
|
|
pskl.ToolSelector = (function() {
|
|
|
|
var toolInstances = {
|
|
"simplePen" : new pskl.drawingtools.SimplePen(),
|
|
"eraser" : new pskl.drawingtools.Eraser(),
|
|
"paintBucket" : new pskl.drawingtools.PaintBucket(),
|
|
"stroke" : new pskl.drawingtools.Stroke(),
|
|
"rectangle" : new pskl.drawingtools.Rectangle(),
|
|
"move" : new pskl.drawingtools.Move()
|
|
};
|
|
var currentSelectedTool = toolInstances.simplePen;
|
|
var previousSelectedTool = toolInstances.simplePen;
|
|
|
|
var selectTool_ = function(tool) {
|
|
var maincontainer = $("body");
|
|
var previousSelectedToolClass = maincontainer.data("selected-tool-class");
|
|
if(previousSelectedToolClass) {
|
|
maincontainer.removeClass(previousSelectedToolClass);
|
|
}
|
|
maincontainer.addClass(toolBehavior.toolId);
|
|
$("#drawing-canvas-container").data("selected-tool-class", toolBehavior.toolId);
|
|
};
|
|
|
|
var activateToolOnStage_ = function(tool) {
|
|
var stage = $("body");
|
|
var previousSelectedToolClass = stage.data("selected-tool-class");
|
|
if(previousSelectedToolClass) {
|
|
stage.removeClass(previousSelectedToolClass);
|
|
}
|
|
stage.addClass(tool.toolId);
|
|
stage.data("selected-tool-class", tool.toolId);
|
|
};
|
|
|
|
var selectTool_ = function(tool) {
|
|
console.log("Selecting Tool:" , currentSelectedTool);
|
|
currentSelectedTool = tool;
|
|
activateToolOnStage_(currentSelectedTool);
|
|
$.publish(Events.TOOL_SELECTED, [tool]);
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
var onToolIconClicked_ = function(evt) {
|
|
var target = $(evt.target);
|
|
var clickedTool = target.closest(".tool-icon");
|
|
|
|
if(clickedTool.length) {
|
|
for(var tool in toolInstances) {
|
|
if (toolInstances[tool].toolId == clickedTool.data()["toolId"]) {
|
|
selectTool_(toolInstances[tool]);
|
|
|
|
// Show tool as selected:
|
|
$("#tools-container .tool-icon.selected").removeClass("selected");
|
|
clickedTool.addClass("selected");
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Get state for the checkbox that control the display of the grid
|
|
* on the drawing canvas.
|
|
* @private
|
|
*/
|
|
var isShowGridChecked_ = function() {
|
|
var showGridCheckbox = $('#show-grid');
|
|
var isChecked = showGridCheckbox.is(':checked');
|
|
return isChecked;
|
|
};
|
|
|
|
return {
|
|
init: function() {
|
|
|
|
// Initialize tool:
|
|
// Set SimplePen as default selected tool:
|
|
selectTool_(toolInstances.simplePen);
|
|
// Activate listener on tool panel:
|
|
$("#tools-container").click(onToolIconClicked_);
|
|
|
|
// Show/hide the grid on drawing canvas:
|
|
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()])
|
|
$('#show-grid').change(function(evt) {
|
|
var checked = isShowGridChecked_();
|
|
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [checked])
|
|
});
|
|
}
|
|
};
|
|
})();
|
|
|
|
|
|
|