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 pull request #82 from grosbouddha/generate-tools-markup

Browse Source 
Generate tool's markup automatically
This commit is contained in:
Julian Descottes
2012-09-15 14:21:13 -07:00
parent 1276f338c2 b4b59c97c6
commit b321da99e6
15 changed files with 134 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/style.css
View File

@@ -1,4 +1,4 @@
.tools-container { .menubar {
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;
width: 100%; height: 30px; width: 100%; height: 30px;

2
css/tools.css
View File

@@ -1,5 +1,3 @@
.tools-container {}
.tools-group { .tools-group {
float: left; float: left;
height: 30px; height: 30px;

20
index.html
View File

@@ -19,23 +19,15 @@
<body> <body>
<!-- Tool section: --> <!-- Tool section: -->
<div id="tools-container" class="tools-container"> <div id="menubar" class="menubar">
<ul class="tools-group"> <ul class="tools-group">
<!-- TODO: Remove that from here or change CSS class naming since
they are framesheet level actions, not tools -->
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()"></li> <li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()"></li>
<li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame"></li> <li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame"></li>
</ul> </ul>
<ul class="tools-group"> <ul id="tools-container" class="tools-group"></ul>
<li class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></li>
<li class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></li>
<li class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></li>
<li class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></li>
<li class="tool-icon tool-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></li>
<li class="tool-icon tool-circle" data-tool-id="tool-circle" title="Circle tool"></li>
<li class="tool-icon tool-move" data-tool-id="tool-move" title="Move tool"></li>
<li class="tool-icon tool-rectangle-select" data-tool-id="tool-rectangle-select" title="Rectangle selection tool"></li>
<li class="tool-icon tool-shape-select" data-tool-id="tool-shape-select" title="Shape selection tool"></li>
</ul>
<ul class="tools-group"> <ul class="tools-group">
<li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette"> <li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette">
@@ -107,6 +99,7 @@
<script src="js/controller/DrawingController.js"></script> <script src="js/controller/DrawingController.js"></script>
<script src="js/controller/PreviewFilmController.js"></script> <script src="js/controller/PreviewFilmController.js"></script>
<script src="js/controller/AnimatedPreviewController.js"></script> <script src="js/controller/AnimatedPreviewController.js"></script>
<script src="js/controller/ToolController.js"></script>
<script src="js/LocalStorageService.js"></script> <script src="js/LocalStorageService.js"></script>
<script src="js/HistoryManager.js"></script> <script src="js/HistoryManager.js"></script>
<script src="js/KeyManager.js"></script> <script src="js/KeyManager.js"></script>
@@ -130,8 +123,7 @@
<script src="js/drawingtools/selectiontools/BaseSelect.js"></script> <script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
<script src="js/drawingtools/selectiontools/RectangleSelect.js"></script> <script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>
<script src="js/drawingtools/selectiontools/ShapeSelect.js"></script> <script src="js/drawingtools/selectiontools/ShapeSelect.js"></script>
<script src="js/ToolSelector.js"></script>
<!-- Application controller and initialization --> <!-- Application controller and initialization -->
<script src="js/piskel.js"></script> <script src="js/piskel.js"></script>
</body> </body>

94
js/ToolSelector.js
View File

@@ -1,94 +0,0 @@
/*
* @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(),
"circle" : new pskl.drawingtools.Circle(),
"move" : new pskl.drawingtools.Move(),
"rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
"shapeSelect" : new pskl.drawingtools.ShapeSelect()
};
var currentSelectedTool = toolInstances.simplePen;
var previousSelectedTool = toolInstances.simplePen;
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]);
});
}
};
})();

110
js/controller/ToolController.js Normal file
View File

@@ -0,0 +1,110 @@
(function () {
var ns = $.namespace("pskl.controller");
ns.ToolController = function () {
this.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(),
"circle" : new pskl.drawingtools.Circle(),
"move" : new pskl.drawingtools.Move(),
"rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
"shapeSelect" : new pskl.drawingtools.ShapeSelect()
};
this.currentSelectedTool = this.toolInstances.simplePen;
this.previousSelectedTool = this.toolInstances.simplePen;
};
/**
* @private
*/
ns.ToolController.prototype.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);
};
/**
* @private
*/
ns.ToolController.prototype.selectTool_ = function(tool) {
console.log("Selecting Tool:" , this.currentSelectedTool);
this.currentSelectedTool = tool;
this.activateToolOnStage_(this.currentSelectedTool);
$.publish(Events.TOOL_SELECTED, [tool]);
};
/**
* @private
*/
ns.ToolController.prototype.onToolIconClicked_ = function(evt) {
var target = $(evt.target);
var clickedTool = target.closest(".tool-icon");
if(clickedTool.length) {
for(var tool in this.toolInstances) {
if (this.toolInstances[tool].toolId == clickedTool.data().toolId) {
this.selectTool_(this.toolInstances[tool]);
// Show tool as selected:
$('#menubar .tool-icon.selected').removeClass('selected');
clickedTool.addClass('selected');
}
}
}
};
/**
* @private
*/
ns.ToolController.prototype.createToolMarkup_ = function() {
var currentTool, toolMarkup = '';
for (var toolKey in this.toolInstances) {
currentTool = this.toolInstances[toolKey];
toolMarkup += '<li class="tool-icon ' + currentTool.toolId + '" data-tool-id="' + currentTool.toolId +
'" title="' + currentTool.helpText + '"></li>';
}
$('#tools-container').html(toolMarkup);
};
/**
* Get state for the checkbox that control the display of the grid
* on the drawing canvas.
* @private
*/
ns.ToolController.prototype.isShowGridChecked_ = function() {
var showGridCheckbox = $('#show-grid');
var isChecked = showGridCheckbox.is(':checked');
return isChecked;
};
/**
* @public
*/
ns.ToolController.prototype.init = function() {
this.createToolMarkup_();
// Initialize tool:
// Set SimplePen as default selected tool:
this.selectTool_(this.toolInstances.simplePen);
// Activate listener on tool panel:
$("#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));
};
})();

3
js/drawingtools/Circle.js
View File

@@ -7,7 +7,8 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.Circle = function() { ns.Circle = function() {
this.toolId = "tool-circle" this.toolId = "tool-circle";
this.helpText = "Circle tool";
// Circle's first point coordinates (set in applyToolAt) // Circle's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;

1
js/drawingtools/Eraser.js
View File

@@ -9,6 +9,7 @@
ns.Eraser = function() { ns.Eraser = function() {
this.toolId = "tool-eraser"; this.toolId = "tool-eraser";
this.helpText = "Eraser tool";
}; };
pskl.utils.inherit(ns.Eraser, ns.SimplePen); pskl.utils.inherit(ns.Eraser, ns.SimplePen);

1
js/drawingtools/Move.js
View File

@@ -8,6 +8,7 @@
ns.Move = function() { ns.Move = function() {
this.toolId = "tool-move" this.toolId = "tool-move"
this.helpText = "Move tool";
// Stroke's first point coordinates (set in applyToolAt) // Stroke's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;

3
js/drawingtools/PaintBucket.js
View File

@@ -7,7 +7,8 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.PaintBucket = function() { ns.PaintBucket = function() {
this.toolId = "tool-paint-bucket" this.toolId = "tool-paint-bucket";
this.helpText = "Paint bucket tool";
}; };
pskl.utils.inherit(ns.PaintBucket, ns.BaseTool); pskl.utils.inherit(ns.PaintBucket, ns.BaseTool);

3
js/drawingtools/Rectangle.js
View File

@@ -7,7 +7,8 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.Rectangle = function() { ns.Rectangle = function() {
this.toolId = "tool-rectangle" this.toolId = "tool-rectangle";
this.helpText = "Rectangle tool";
// Rectangle's first point coordinates (set in applyToolAt) // Rectangle's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;

1
js/drawingtools/SimplePen.js
View File

@@ -8,6 +8,7 @@
ns.SimplePen = function() { ns.SimplePen = function() {
this.toolId = "tool-pen"; this.toolId = "tool-pen";
this.helpText = "Pen tool"
}; };
this.previousCol = null; this.previousCol = null;

5
js/drawingtools/Stroke.js
View File

@@ -7,8 +7,9 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.Stroke = function() { ns.Stroke = function() {
this.toolId = "tool-stroke" this.toolId = "tool-stroke";
this.helpText = "Stroke tool";
// Stroke's first point coordinates (set in applyToolAt) // Stroke's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;
this.startRow = null; this.startRow = null;

1
js/drawingtools/selectiontools/RectangleSelect.js
View File

@@ -8,6 +8,7 @@
ns.RectangleSelect = function() { ns.RectangleSelect = function() {
this.toolId = "tool-rectangle-select"; this.toolId = "tool-rectangle-select";
this.helpText = "Rectangle selection tool";
ns.BaseSelect.call(this); ns.BaseSelect.call(this);
}; };

1
js/drawingtools/selectiontools/ShapeSelect.js
View File

@@ -8,6 +8,7 @@
ns.ShapeSelect = function() { ns.ShapeSelect = function() {
this.toolId = "tool-shape-select"; this.toolId = "tool-shape-select";
this.helpText = "Shape selection tool";
ns.BaseSelect.call(this); ns.BaseSelect.call(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);
}, },