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

Basic rectangular select tool basic

Browse Source
This commit is contained in:
Vince 2012-09-13 22:57:32 +02:00
parent 2aaab74b80
commit e85fe32f02
13 changed files with 197 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
css/tools.css
View File

@ -49,6 +49,10 @@
background-image: url(../img/tools/icons/hand.png);
}
.tool-icon.tool-select {
background-image: url(../img/tools/icons/select.png);
}
/*.tool-icon.tool-palette {
background-image: url(../img/tools/icons/color-palette.png);
}*/
@ -77,6 +81,10 @@
cursor: url(../img/tools/cursors/hand.png) 14 12, pointer;
}
.tool-select .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/select.png) 14 12, pointer;
}
.tool-grid,
.tool-grid label,
.tool-grid input {

BIN
img/tools/cursors/select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/tools/cursors/wand.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 570 B

BIN
img/tools/icons/select.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
img/tools/icons/wand.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 570 B

2
index.html
View File

@ -32,7 +32,7 @@
<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>
<li class="tool-icon tool-select" data-tool-id="tool-select" title="Move tool">S</li>
<li class="tool-icon tool-select" data-tool-id="tool-select" title="Move tool"></li>
</ul>
<ul class="tools-group">

2
js/Events.js
View File

@ -38,6 +38,8 @@ Events = {
CURRENT_FRAME_SET: "CURRENT_FRAME_SET",
SELECTION_CREATED: "SELECTION_CREATED",
SELECTION_MOVE_REQUEST: "SELECTION_MOVE_REQUEST",
SELECTION_DISMISSED: "SELECTION_DISMISSED",
SHOW_NOTIFICATION: "SHOW_NOTIFICATION",
HIDE_NOTIFICATION: "HIDE_NOTIFICATION",

8
js/controller/DrawingController.js
View File

@ -107,6 +107,14 @@
// Eg when drawing, it may make sense to have it here. However for a non drawing tool,
// you don't need to draw anything when mousemoving and you request useless localStorage.
$.publish(Events.LOCALSTORAGE_REQUEST);
} else {
this.currentToolBehavior.moveUnactiveToolAt(
coords.col, coords.row,
this.getCurrentColor_(),
this.framesheet.getCurrentFrame(),
this.overlayFrame
);
}
this.previousMousemoveTime = currentTime;
}

2
js/drawingtools/BaseTool.js
View File

@ -12,6 +12,8 @@
ns.BaseTool.prototype.moveToolAt = function(col, row, color, frame, overlay) {};
ns.BaseTool.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {};
ns.BaseTool.prototype.releaseToolAt = function(col, row, color, frame, overlay) {};
/**

108
js/drawingtools/RectangularSelect.js
View File

@ -7,7 +7,9 @@
var ns = $.namespace("pskl.drawingtools");
ns.Select = function() {
this.toolId = "tool-select"
this.toolId = "tool-select";
this.secondaryToolId = "tool-move";
this.BodyRoot = $('body');
// Select's first point coordinates (set in applyToolAt)
this.startCol = null;
@ -23,22 +25,70 @@
this.startCol = col;
this.startRow = row;
// Drawing the first point of the rectangle in the fake overlay canvas:
overlay.setPixel(col, row, color);
this.lastCol = col;
this.lastRow = row;
// TODO(vincz): Comment here nasty vince
if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
this.mode = "select";
// Drawing the first point of the rectangle in the fake overlay canvas:
overlay.setPixel(col, row, color);
}
else {
this.mode = "moveSelection";
this.overlayFrameReference = overlay.clone();
}
};
ns.Select.prototype.moveToolAt = function(col, row, color, frame, overlay) {
// Clean overlay canvas:
overlay.clear();
if(this.mode == "select") {
// Clean overlay canvas:
overlay.clear();
// When the user moussemove (before releasing), we dynamically compute the
// pixel to draw the line and draw this line in the overlay :
var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
// When the user moussemove (before releasing), we dynamically compute the
// pixel to draw the line and draw this line in the overlay :
var strokePoints = pskl.PixelUtils.getBoundRectanglePixels(this.startCol, this.startRow, col, row);
color = Constants.SELECTION_TRANSPARENT_COLOR;
// Drawing current stroke:
for(var i = 0; i< strokePoints.length; i++) {
overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
}
}
else if(this.mode == "moveSelection") {
// TODO(vincz): Comment here nasty vince
var deltaCol = col - this.lastCol;
var deltaRow = row - this.lastRow;
console.log(deltaCol)
console.log(deltaRow)
var colDiff = col - this.startCol, rowDiff = row - this.startRow;
if (colDiff != 0 || rowDiff != 0) {
// Update selection on overlay frame:
this.shiftOverlayFrame_(colDiff, rowDiff, overlay, this.overlayFrameReference);
// Update selection model:
$.publish(Events.SELECTION_MOVE_REQUEST, [deltaCol, deltaRow]);
}
this.lastCol = col;
this.lastRow = row;
}
};
// TODO(vincz): Comment here nasty vince
ns.Select.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
color = Constants.SELECTION_TRANSPARENT_COLOR;
// Drawing current stroke:
for(var i = 0; i< strokePoints.length; i++) {
overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
// If we mouseover the selection draw inside the overlay frame, show the 'move' cursor
// instead of the 'select' one. It indicates that we can move the selection by dragndroping it.
if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
this.BodyRoot.addClass(this.toolId);
this.BodyRoot.removeClass(this.secondaryToolId);
} else {
this.BodyRoot.addClass(this.secondaryToolId);
this.BodyRoot.removeClass(this.toolId);
}
};
@ -46,10 +96,34 @@
* @override
*/
ns.Select.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
overlay.clear();
var selection = new pskl.selection.RectangularSelection(
this.startCol, this.startRow, col, row);
$.publish(Events.SELECTION_CREATED, [selection]);
if(this.mode == "select") {
overlay.clear();
if(this.startCol == col &&this.startRow == row) {
$.publish(Events.SELECTION_DISMISSED);
} else {
var selection = new pskl.selection.RectangularSelection(
this.startCol, this.startRow, col, row);
$.publish(Events.SELECTION_CREATED, [selection]);
}
} else if(this.mode == "moveSelection") {
this.moveToolAt(col, row, color, frame, overlay);
}
};
/**
* @private
*/
ns.Select.prototype.shiftOverlayFrame_ = function (colDiff, rowDiff, overlayFrame, reference) {
var color;
for (var col = 0 ; col < overlayFrame.getWidth() ; col++) {
for (var row = 0 ; row < overlayFrame.getHeight() ; row++) {
if (reference.containsPixel(col - colDiff, row - rowDiff)) {
color = reference.getPixel(col - colDiff, row - rowDiff);
} else {
color = Constants.TRANSPARENT_COLOR;
}
overlayFrame.setPixel(col, row, color)
}
}
};
})();

2
js/piskel.js
View File

@ -54,7 +54,7 @@ $.namespace("pskl");
previewTileCanvasDpi
);
// To catch the current active frame, the selection manager have to be before
// To catch the current active frame, the selection manager have to be initialized before
// the 'frameSheet.setCurrentFrameIndex(0);'
// TODO(vincz): Slice each constructor to have:
// - an event(s) listening init

23
js/selection/BaseSelection.js
View File

@ -2,12 +2,31 @@
var ns = $.namespace("pskl.selection");
ns.BaseSelection = function () {
this.reset();
};
ns.BaseSelection.prototype.reset = function () {
this.pixels = [];
};
ns.BaseSelection.prototype.getFrameSliceFromSelection = function (frame) {
if(this.pixels && this.pixels > 0) {
ns.BaseSelection.prototype.move = function (colDiff, rowDiff) {
var movedPixel, movedPixels = [];
for(var i=0, l=this.pixels.length; i<l; i++) {
movedPixel = this.pixels[i];
movedPixel.col += colDiff;
movedPixel.row += rowDiff;
movedPixels.push(movedPixel)
}
this.pixels = movedPixels;
};
ns.BaseSelection.prototype.fillSelectionFromFrame = function (targetFrame) {
var pixelWithCopiedColor;
for(var i=0, l=this.pixels.length; i<l; i++) {
pixelWithCopiedColor = this.pixels[i];
pixelWithCopiedColor.copiedColor =
targetFrame.getPixel(pixelWithCopiedColor.col, pixelWithCopiedColor.row);
}
};
})();

96
js/selection/SelectionManager.js
View File

@ -8,33 +8,28 @@
this.currentSelection = null;
this.currentFrame = null;
$.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
$.subscribe(Events.CURRENT_FRAME_SET, $.proxy(this.onCurrentFrameChanged_, this));
//$.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
$.subscribe(Events.COPY, $.proxy(this.onCopy_, this)););
$.subscribe(Events.SELECTION_CREATED, $.proxy(this.onSelectionCreated_, this));
$.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
$.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
$.subscribe(Events.PASTE, $.proxy(this.onPaste_, this));
$.subscribe(Events.COPY, $.proxy(this.onCopy_, this));
$.subscribe(Events.CUT, $.proxy(this.onCut_, this));
$.subscribe(Events.TOOL_SELECTED); // discard selection if not move
$.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
};
ns.SelectionManager.prototype.hasSelection = function() {
return (this.currentSelection == null) ? false : true;
};
ns.SelectionManager.prototype.addSelection = function(selection) {
this.currentSelection = selection;
};
ns.SelectionManager.prototype.removeSelection = function(selection) {
this.currentSelection = null;
/**
* @private
*/
ns.SelectionManager.prototype.cleanSelection_ = function(selection) {
if(this.currentSelection) {
this.currentSelection.reset();
}
this.overlayFrame.clear();
};
/**
@ -49,14 +44,38 @@
}
};
/**
* @private
*/
ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
if(!(tool instanceof pskl.drawingtools.Select)) {
this.cleanSelection_();
}
};
/**
* @private
*/
ns.SelectionManager.prototype.onSelectionDismissed_ = function(evt) {
this.cleanSelection_();
};
/**
* @private
*/
ns.SelectionManager.prototype.onCut_ = function(evt) {
if(this.currentSelection && this.currentFrame) {
// Put cut target into the selection:
this.currentSelection.fillSelectionFromFrame(this.currentFrame);
var pixels = this.currentSelection.pixels;
for(var i=0, l=pixels.length; i<l; i++) {
this.currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
try {
this.currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
}
catch(e) {
// Catchng out of frame's bound pixels without testing
}
}
}
else {
@ -68,11 +87,18 @@
if(this.currentSelection && this.currentFrame) {
var pixels = this.currentSelection.pixels;
for(var i=0, l=pixels.length; i<l; i++) {
this.currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
try {
this.currentFrame.setPixel(
pixels[i].col, pixels[i].row,
pixels[i].copiedColor);
}
catch(e) {
// Catchng out of frame's bound pixels without testing
}
}
}
else {
throw "Bad state for CUT callback in SelectionManager";
throw "Bad state for PASTE callback in SelectionManager";
}
};
@ -80,16 +106,8 @@
* @private
*/
ns.SelectionManager.prototype.onCopy_ = function(evt) {
this.copiedPixels = [];
if(this.currentSelection && this.currentFrame) {
var pixels = this.currentSelection.pixels;
for(var i=0, l=pixels.length; i<l; i++) {
copiedPixels.push({
"col": pixels[i].col,
"row": pixels[i].row,
"color": this.currentFrame.getPixel(pixels[i].col, pixels[i].row)
});
}
this.currentSelection.fillSelectionFromFrame(this.currentFrame);
}
else {
throw "Bad state for CUT callback in SelectionManager";
@ -108,7 +126,19 @@
}
}
else {
throw "Bad current selection set in SelectionManager";
throw "No selection set in SelectionManager";
}
};
/**
* @private
*/
ns.SelectionManager.prototype.onSelectionMoved_ = function(evt, colDiff, rowDiff) {
if(this.currentSelection) {
this.currentSelection.move(colDiff, rowDiff);
}
else {
throw "Bad state: No currentSelection set when trying to move it in SelectionManager";
}
};
})();