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

Added simple move tool

Browse Source
This commit is contained in:
juliandescottes 2012-09-07 01:08:25 +02:00
parent 17bf7b3807
commit f06f03a7f7
5 changed files with 97 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/tools.css
View File

@ -45,6 +45,10 @@
background-image: url(../img/tools/icons/rectangle.png); background-image: url(../img/tools/icons/rectangle.png);
} }
.tool-icon.tool-move {
background-image: url(../img/tools/icons/rectangle.png);
}
/*.tool-icon.tool-palette { /*.tool-icon.tool-palette {
background-image: url(../img/tools/icons/color-palette.png); background-image: url(../img/tools/icons/color-palette.png);
}*/ }*/
@ -69,6 +73,10 @@
cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer; cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
} }
.tool-rectangle .drawing-canvas-move:hover {
cursor: url(../img/tools/cursors/rectangle.png) 4 21, pointer;
}
.tool-icon.selected { .tool-icon.selected {
cursor: auto; cursor: auto;
background-color: #eee; background-color: #eee;

2
index.html
View File

@ -30,6 +30,7 @@
<li class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket 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-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-rectangle" data-tool-id="tool-rectangle" title="Rectangle tool"></li>
<li class="tool-icon tool-move" data-tool-id="tool-move" title="Move tool"></li>
</ul> </ul>
<ul class="tools-group"> <ul class="tools-group">
@ -102,6 +103,7 @@
<script src="js/drawingtools/Stroke.js"></script> <script src="js/drawingtools/Stroke.js"></script>
<script src="js/drawingtools/PaintBucket.js"></script> <script src="js/drawingtools/PaintBucket.js"></script>
<script src="js/drawingtools/Rectangle.js"></script> <script src="js/drawingtools/Rectangle.js"></script>
<script src="js/drawingtools/Move.js"></script>
<script src="js/ToolSelector.js"></script> <script src="js/ToolSelector.js"></script>
<!-- Application controller and initialization --> <!-- Application controller and initialization -->

3
js/ToolSelector.js
View File

@ -14,7 +14,8 @@ pskl.ToolSelector = (function() {
"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(),
"move" : new pskl.drawingtools.Move()
}; };
var currentSelectedTool = toolInstances.simplePen; var currentSelectedTool = toolInstances.simplePen;
var previousSelectedTool = toolInstances.simplePen; var previousSelectedTool = toolInstances.simplePen;

2
js/drawingtools/Stroke.js
View File

@ -34,7 +34,7 @@
// The fake canvas where we will draw the preview of the stroke: // The fake canvas where we will draw the preview of the stroke:
// Drawing the first point of the stroke in the fake overlay canvas: // Drawing the first point of the stroke in the fake overlay canvas:
drawer.updateOverlay(col, row, color); drawer.overlay.setPixel(col, row, color);
drawer.renderOverlay(); drawer.renderOverlay();
}; };

6
js/model/Frame.js
View File

@ -3,7 +3,7 @@
ns.Frame = function (pixels) { ns.Frame = function (pixels) {
this.pixels = pixels; this.pixels = pixels;
this.previousStates = [pixels]; this.previousStates = [this._clonePixels()];
this.stateIndex = 0; this.stateIndex = 0;
}; };
@ -56,7 +56,7 @@
}; };
ns.Frame.prototype.containsPixel = function (col, row) { ns.Frame.prototype.containsPixel = function (col, row) {
return col >= 0 && row >= 0 && col <= this.pixels.length && row <= this.pixels[0].length; return col >= 0 && row >= 0 && col < this.pixels.length && row < this.pixels[0].length;
}; };
ns.Frame.prototype.saveState = function () { ns.Frame.prototype.saveState = function () {
@ -69,7 +69,7 @@
}; };
ns.Frame.prototype.loadPreviousState = function () { ns.Frame.prototype.loadPreviousState = function () {
if (this.stateIndex >= 0) { if (this.stateIndex > 0) {
this.stateIndex--; this.stateIndex--;
this.pixels = this.previousStates[this.stateIndex]; this.pixels = this.previousStates[this.stateIndex];
} }