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

Generate tool's markup automatically

Browse Source
This commit is contained in:
Vince
2012-09-15 20:25:45 +02:00
parent 1276f338c2
commit 440a6391e9
13 changed files with 39 additions and 27 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;
top: 0; left: 0;
width: 100%; height: 30px;

2
css/tools.css
View File

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

16
index.html
View File

@@ -19,23 +19,15 @@
<body>
<!-- Tool section: -->
<div id="tools-container" class="tools-container">
<div id="menubar" class="menubar">
<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-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame"></li>
</ul>
<ul class="tools-group">
<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 id="tools-container" class="tools-group"></ul>
<ul class="tools-group">
<li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette">

25
js/ToolSelector.js
View File

@@ -20,6 +20,7 @@ pskl.ToolSelector = (function() {
"rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
"shapeSelect" : new pskl.drawingtools.ShapeSelect()
};
var currentSelectedTool = toolInstances.simplePen;
var previousSelectedTool = toolInstances.simplePen;
@@ -53,13 +54,26 @@ pskl.ToolSelector = (function() {
selectTool_(toolInstances[tool]);
// Show tool as selected:
$("#tools-container .tool-icon.selected").removeClass("selected");
clickedTool.addClass("selected");
$('#menubar .tool-icon.selected').removeClass('selected');
clickedTool.addClass('selected');
}
}
}
};
/**
* @private
*/
var createToolMarkup_ = function() {
var currentTool, toolMarkup = '';
for (var toolKey in toolInstances) {
currentTool = 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.
@@ -74,11 +88,13 @@ pskl.ToolSelector = (function() {
return {
init: function() {
createToolMarkup_();
// Initialize tool:
// Set SimplePen as default selected tool:
selectTool_(toolInstances.simplePen);
// Activate listener on tool panel:
$("#tools-container").click(onToolIconClicked_);
$("#menubar").click(onToolIconClicked_);
// Show/hide the grid on drawing canvas:
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()]);
@@ -89,6 +105,3 @@ pskl.ToolSelector = (function() {
}
};
})();

3
js/drawingtools/Circle.js
View File

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

1
js/drawingtools/Eraser.js
View File

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

1
js/drawingtools/Move.js
View File

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

3
js/drawingtools/PaintBucket.js
View File

@@ -7,7 +7,8 @@
var ns = $.namespace("pskl.drawingtools");
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);

3
js/drawingtools/Rectangle.js
View File

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

1
js/drawingtools/SimplePen.js
View File

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

3
js/drawingtools/Stroke.js
View File

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

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

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

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

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