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);
}
.tool-icon.tool-move {
background-image: url(../img/tools/icons/rectangle.png);
}
/*.tool-icon.tool-palette {
background-image: url(../img/tools/icons/color-palette.png);
}*/
@ -69,6 +73,10 @@
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 {
cursor: auto;
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-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-move" data-tool-id="tool-move" title="Move tool"></li>
</ul>
<ul class="tools-group">
@ -102,6 +103,7 @@
<script src="js/drawingtools/Stroke.js"></script>
<script src="js/drawingtools/PaintBucket.js"></script>
<script src="js/drawingtools/Rectangle.js"></script>
<script src="js/drawingtools/Move.js"></script>
<script src="js/ToolSelector.js"></script>
<!-- Application controller and initialization -->

3
js/ToolSelector.js
View File

@ -14,7 +14,8 @@ pskl.ToolSelector = (function() {
"eraser" : new pskl.drawingtools.Eraser(),
"paintBucket" : new pskl.drawingtools.PaintBucket(),
"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 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:
// 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();
};

168
js/model/Frame.js
View File

@ -1,85 +1,85 @@
(function () {
var ns = $.namespace("pskl.model");
ns.Frame = function (pixels) {
this.pixels = pixels;
this.previousStates = [pixels];
this.stateIndex = 0;
};
ns.Frame.createEmpty = function (width, height) {
var pixels = []; //new Array(width);
for (var columnIndex=0; columnIndex < width; columnIndex++) {
var columnArray = [];
for(var heightIndex = 0; heightIndex < height; heightIndex++) {
columnArray.push(Constants.TRANSPARENT_COLOR);
}
pixels[columnIndex] = columnArray;
}
return new ns.Frame(pixels);
};
ns.Frame.createEmptyFromFrame = function (frame) {
return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
};
ns.Frame.prototype.clone = function () {
return new ns.Frame(this._clonePixels());
};
ns.Frame.prototype._clonePixels = function () {
var pixels = [];
for (var col = 0 ; col < this.getWidth() ; col++) {
pixels[col] = this.pixels[col].slice(0 , this.getHeight());
}
return pixels;
};
ns.Frame.prototype.serialize = function () {
return JSON.stringify(this.pixels);
};
ns.Frame.prototype.setPixel = function (col, row, color) {
this.pixels[col][row] = color;
};
ns.Frame.prototype.getPixel = function (col, row) {
return this.pixels[col][row];
};
ns.Frame.prototype.getWidth = function () {
return this.pixels.length;
};
ns.Frame.prototype.getHeight = function () {
return this.pixels[0].length;
};
ns.Frame.prototype.containsPixel = function (col, row) {
return col >= 0 && row >= 0 && col <= this.pixels.length && row <= this.pixels[0].length;
};
ns.Frame.prototype.saveState = function () {
// remove all states past current state
this.previousStates.length = this.stateIndex + 1;
// push new state
this.previousStates.push(this._clonePixels());
// set the stateIndex to latest saved state
this.stateIndex = this.previousStates.length - 1;
};
ns.Frame.prototype.loadPreviousState = function () {
if (this.stateIndex >= 0) {
this.stateIndex--;
this.pixels = this.previousStates[this.stateIndex];
}
};
ns.Frame.prototype.loadNextState = function () {
if (this.stateIndex < this.previousStates.length - 1) {
this.stateIndex++;
this.pixels = this.previousStates[this.stateIndex];
}
};
(function () {
var ns = $.namespace("pskl.model");
ns.Frame = function (pixels) {
this.pixels = pixels;
this.previousStates = [this._clonePixels()];
this.stateIndex = 0;
};
ns.Frame.createEmpty = function (width, height) {
var pixels = []; //new Array(width);
for (var columnIndex=0; columnIndex < width; columnIndex++) {
var columnArray = [];
for(var heightIndex = 0; heightIndex < height; heightIndex++) {
columnArray.push(Constants.TRANSPARENT_COLOR);
}
pixels[columnIndex] = columnArray;
}
return new ns.Frame(pixels);
};
ns.Frame.createEmptyFromFrame = function (frame) {
return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
};
ns.Frame.prototype.clone = function () {
return new ns.Frame(this._clonePixels());
};
ns.Frame.prototype._clonePixels = function () {
var pixels = [];
for (var col = 0 ; col < this.getWidth() ; col++) {
pixels[col] = this.pixels[col].slice(0 , this.getHeight());
}
return pixels;
};
ns.Frame.prototype.serialize = function () {
return JSON.stringify(this.pixels);
};
ns.Frame.prototype.setPixel = function (col, row, color) {
this.pixels[col][row] = color;
};
ns.Frame.prototype.getPixel = function (col, row) {
return this.pixels[col][row];
};
ns.Frame.prototype.getWidth = function () {
return this.pixels.length;
};
ns.Frame.prototype.getHeight = function () {
return this.pixels[0].length;
};
ns.Frame.prototype.containsPixel = function (col, row) {
return col >= 0 && row >= 0 && col < this.pixels.length && row < this.pixels[0].length;
};
ns.Frame.prototype.saveState = function () {
// remove all states past current state
this.previousStates.length = this.stateIndex + 1;
// push new state
this.previousStates.push(this._clonePixels());
// set the stateIndex to latest saved state
this.stateIndex = this.previousStates.length - 1;
};
ns.Frame.prototype.loadPreviousState = function () {
if (this.stateIndex > 0) {
this.stateIndex--;
this.pixels = this.previousStates[this.stateIndex];
}
};
ns.Frame.prototype.loadNextState = function () {
if (this.stateIndex < this.previousStates.length - 1) {
this.stateIndex++;
this.pixels = this.previousStates[this.stateIndex];
}
};
})();