2012-09-15 22:48:01 +04:00
|
|
|
(function () {
|
|
|
|
var ns = $.namespace("pskl.controller");
|
2012-08-31 12:45:07 +04:00
|
|
|
|
2012-09-15 22:48:01 +04:00
|
|
|
|
|
|
|
ns.ToolController = function () {
|
2012-08-31 12:45:07 +04:00
|
|
|
|
2012-09-15 22:48:01 +04:00
|
|
|
this.toolInstances = {
|
|
|
|
"simplePen" : new pskl.drawingtools.SimplePen(),
|
2012-09-16 02:52:39 +04:00
|
|
|
"verticalMirrorPen" : new pskl.drawingtools.VerticalMirrorPen(),
|
2012-09-15 22:48:01 +04:00
|
|
|
"eraser" : new pskl.drawingtools.Eraser(),
|
|
|
|
"paintBucket" : new pskl.drawingtools.PaintBucket(),
|
|
|
|
"stroke" : new pskl.drawingtools.Stroke(),
|
|
|
|
"rectangle" : new pskl.drawingtools.Rectangle(),
|
|
|
|
"circle" : new pskl.drawingtools.Circle(),
|
|
|
|
"move" : new pskl.drawingtools.Move(),
|
|
|
|
"rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
|
|
|
|
"shapeSelect" : new pskl.drawingtools.ShapeSelect()
|
|
|
|
};
|
2012-09-15 22:25:45 +04:00
|
|
|
|
2012-09-15 22:48:01 +04:00
|
|
|
this.currentSelectedTool = this.toolInstances.simplePen;
|
|
|
|
this.previousSelectedTool = this.toolInstances.simplePen;
|
|
|
|
};
|
2012-08-31 12:45:07 +04:00
|
|
|
|
2012-09-15 22:48:01 +04:00
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
ns.ToolController.prototype.activateToolOnStage_ = function(tool) {
|
2012-09-11 02:52:09 +04:00
|
|
|
var stage = $("body");
|
2012-08-31 12:45:07 +04:00
|
|
|
var previousSelectedToolClass = stage.data("selected-tool-class");
|
|
|
|
if(previousSelectedToolClass) {
|
|
|
|
stage.removeClass(previousSelectedToolClass);
|
|
|
|
}
|
|
|
|
stage.addClass(tool.toolId);
|
|
|
|
stage.data("selected-tool-class", tool.toolId);
|
2012-09-11 02:52:09 +04:00
|
|
|
};
|
2012-08-31 12:45:07 +04:00
|
|
|
|
2012-09-15 22:48:01 +04:00
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
ns.ToolController.prototype.selectTool_ = function(tool) {
|
|
|
|
console.log("Selecting Tool:" , this.currentSelectedTool);
|
|
|
|
this.currentSelectedTool = tool;
|
|
|
|
this.activateToolOnStage_(this.currentSelectedTool);
|
2012-09-11 02:52:09 +04:00
|
|
|
$.publish(Events.TOOL_SELECTED, [tool]);
|
|
|
|
};
|
2012-08-31 12:45:07 +04:00
|
|
|
|
2012-09-11 02:52:09 +04:00
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
2012-09-15 22:48:01 +04:00
|
|
|
ns.ToolController.prototype.onToolIconClicked_ = function(evt) {
|
2012-09-11 02:52:09 +04:00
|
|
|
var target = $(evt.target);
|
|
|
|
var clickedTool = target.closest(".tool-icon");
|
2012-08-31 12:45:07 +04:00
|
|
|
|
2012-09-11 02:52:09 +04:00
|
|
|
if(clickedTool.length) {
|
2012-09-15 22:48:01 +04:00
|
|
|
for(var tool in this.toolInstances) {
|
|
|
|
if (this.toolInstances[tool].toolId == clickedTool.data().toolId) {
|
|
|
|
this.selectTool_(this.toolInstances[tool]);
|
2012-08-31 12:45:07 +04:00
|
|
|
|
2012-09-11 02:52:09 +04:00
|
|
|
// Show tool as selected:
|
2012-09-15 22:25:45 +04:00
|
|
|
$('#menubar .tool-icon.selected').removeClass('selected');
|
|
|
|
clickedTool.addClass('selected');
|
2012-09-11 02:52:09 +04:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
2012-08-31 12:45:07 +04:00
|
|
|
|
2012-09-15 22:25:45 +04:00
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
2012-09-15 22:48:01 +04:00
|
|
|
ns.ToolController.prototype.createToolMarkup_ = function() {
|
2012-09-15 22:25:45 +04:00
|
|
|
var currentTool, toolMarkup = '';
|
2012-09-16 02:48:53 +04:00
|
|
|
// TODO(vincz): Tools rendering order is not enforced by the data stucture (this.toolInstances), fix that.
|
2012-09-15 22:48:01 +04:00
|
|
|
for (var toolKey in this.toolInstances) {
|
|
|
|
currentTool = this.toolInstances[toolKey];
|
2012-09-15 22:30:32 +04:00
|
|
|
toolMarkup += '<li class="tool-icon ' + currentTool.toolId + '" data-tool-id="' + currentTool.toolId +
|
|
|
|
'" title="' + currentTool.helpText + '"></li>';
|
2012-09-15 22:25:45 +04:00
|
|
|
}
|
|
|
|
$('#tools-container').html(toolMarkup);
|
|
|
|
};
|
|
|
|
|
2012-09-11 02:52:09 +04:00
|
|
|
/**
|
|
|
|
* Get state for the checkbox that control the display of the grid
|
|
|
|
* on the drawing canvas.
|
|
|
|
* @private
|
|
|
|
*/
|
2012-09-15 22:48:01 +04:00
|
|
|
ns.ToolController.prototype.isShowGridChecked_ = function() {
|
2012-09-11 02:52:09 +04:00
|
|
|
var showGridCheckbox = $('#show-grid');
|
|
|
|
var isChecked = showGridCheckbox.is(':checked');
|
|
|
|
return isChecked;
|
|
|
|
};
|
2012-09-09 01:43:16 +04:00
|
|
|
|
2012-09-15 22:48:01 +04:00
|
|
|
/**
|
|
|
|
* @public
|
|
|
|
*/
|
|
|
|
ns.ToolController.prototype.init = function() {
|
|
|
|
|
|
|
|
this.createToolMarkup_();
|
2012-09-15 22:25:45 +04:00
|
|
|
|
2012-09-15 22:48:01 +04:00
|
|
|
// Initialize tool:
|
|
|
|
// Set SimplePen as default selected tool:
|
|
|
|
this.selectTool_(this.toolInstances.simplePen);
|
|
|
|
// Activate listener on tool panel:
|
|
|
|
$("#menubar").click($.proxy(this.onToolIconClicked_, this));
|
2012-09-09 01:43:16 +04:00
|
|
|
|
2012-09-15 22:48:01 +04:00
|
|
|
// 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));
|
2012-09-11 02:52:09 +04:00
|
|
|
};
|
2012-09-15 22:25:45 +04:00
|
|
|
})();
|