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 lasso tool

Browse Source
This commit is contained in:
Vince
2012-09-14 20:12:21 +02:00
parent e85fe32f02
commit 841885939d
11 changed files with 302 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
js/drawingtools/PaintBucket.js
View File

@@ -17,109 +17,8 @@
*/
ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay) {
// Change model:
var targetColor = frame.getPixel(col, row);
this.queueLinearFloodFill_(frame, col, row, targetColor, color);
pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color);
};
/**
* Flood-fill (node, target-color, replacement-color):
* 1. Set Q to the empty queue.
* 2. If the color of node is not equal to target-color, return.
* 3. Add node to Q.
* 4. For each element n of Q:
* 5. If the color of n is equal to target-color:
* 6. Set w and e equal to n.
* 7. Move w to the west until the color of the node to the west of w no longer matches target-color.
* 8. Move e to the east until the color of the node to the east of e no longer matches target-color.
* 9. Set the color of nodes between w and e to replacement-color.
* 10. For each node n between w and e:
* 11. If the color of the node to the north of n is target-color, add that node to Q.
* 12. If the color of the node to the south of n is target-color, add that node to Q.
* 13. Continue looping until Q is exhausted.
* 14. Return.
*
* @private
*/
ns.PaintBucket.prototype.queueLinearFloodFill_ = function(frame, col, row, targetColor, replacementColor) {
var queue = [];
var dy = [-1, 0, 1, 0];
var dx = [0, 1, 0, -1];
try {
if(frame.getPixel(col, row) == replacementColor) {
return;
}
} catch(e) {
// Frame out of bound exception.
}
queue.push({"col": col, "row": row});
var loopCount = 0;
var cellCount = frame.getWidth() * frame.getHeight();
while(queue.length > 0) {
loopCount ++;
var currentItem = queue.pop();
frame.setPixel(currentItem.col, currentItem.row, replacementColor);
for (var i = 0; i < 4; i++) {
var nextCol = currentItem.col + dx[i]
var nextRow = currentItem.row + dy[i]
try {
if (frame.containsPixel(nextCol, nextRow) && frame.getPixel(nextCol, nextRow) == targetColor) {
queue.push({"col": nextCol, "row": nextRow });
}
} catch(e) {
// Frame out of bound exception.
}
}
// Security loop breaker:
if(loopCount > 10 * cellCount) {
console.log("loop breaker called")
break;
}
}
};
/**
* Basic Flood-fill implementation (Stack explosion !):
* Flood-fill (node, target-color, replacement-color):
* 1. If the color of node is not equal to target-color, return.
* 2. Set the color of node to replacement-color.
* 3. Perform Flood-fill (one step to the west of node, target-color, replacement-color).
* Perform Flood-fill (one step to the east of node, target-color, replacement-color).
* Perform Flood-fill (one step to the north of node, target-color, replacement-color).
* Perform Flood-fill (one step to the south of node, target-color, replacement-color).
* 4. Return.
*
* @private
*/
ns.PaintBucket.prototype.recursiveFloodFill_ = function(frame, col, row, targetColor, replacementColor) {
// Step 1:
if( col < 0 ||
col >= frame.length ||
row < 0 ||
row >= frame[0].length ||
frame[col][row] != targetColor) {
return;
}
// Step 2:
frame[col][row] = replacementColor;
//Step 3:
this.simpleFloodFill(frame, col - 1, row, targetColor, replacementColor);
this.simpleFloodFill(frame, col + 1, row, targetColor, replacementColor);
this.simpleFloodFill(frame, col, row - 1, targetColor, replacementColor);
this.simpleFloodFill(frame, col, row + 1, targetColor, replacementColor);
return;
};
})();

53
js/drawingtools/selectiontools/BaseSelect.js Normal file
View File

@@ -0,0 +1,53 @@
/*
* @provide pskl.drawingtools.BaseSelect
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.BaseSelect = function() {
this.secondaryToolId = "tool-move";
this.BodyRoot = $('body');
// Select's first point coordinates (set in applyToolAt)
this.startCol = null;
this.startRow = null;
};
pskl.utils.inherit(ns.BaseSelect, ns.BaseTool);
/**
* @override
*/
ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
// 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);
}
};
/**
* Move the overlay frame filled with semi-transparent pixels that represent the selection
* @private
*/
ns.BaseSelect.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)
}
}
};
})();

51
js/drawingtools/RectangularSelect.js → js/drawingtools/selectiontools/RectangleSelect.js
View File

@@ -1,27 +1,23 @@
/*
* @provide pskl.drawingtools.Select
* @provide pskl.drawingtools.RectangleSelect
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.Select = function() {
this.toolId = "tool-select";
this.secondaryToolId = "tool-move";
this.BodyRoot = $('body');
ns.RectangleSelect = function() {
this.toolId = "tool-rectangle-select";
// Select's first point coordinates (set in applyToolAt)
this.startCol = null;
this.startRow = null;
ns.BaseSelect.call(this);
};
pskl.utils.inherit(ns.Select, ns.BaseTool);
pskl.utils.inherit(ns.RectangleSelect, ns.BaseSelect);
/**
* @override
*/
ns.Select.prototype.applyToolAt = function(col, row, color, frame, overlay) {
ns.RectangleSelect.prototype.applyToolAt = function(col, row, color, frame, overlay) {
this.startCol = col;
this.startRow = row;
@@ -42,7 +38,7 @@
}
};
ns.Select.prototype.moveToolAt = function(col, row, color, frame, overlay) {
ns.RectangleSelect.prototype.moveToolAt = function(col, row, color, frame, overlay) {
if(this.mode == "select") {
// Clean overlay canvas:
overlay.clear();
@@ -78,24 +74,10 @@
}
};
// TODO(vincz): Comment here nasty vince
ns.Select.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
// 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);
}
};
/**
* @override
*/
ns.Select.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
ns.RectangleSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
if(this.mode == "select") {
overlay.clear();
if(this.startCol == col &&this.startRow == row) {
@@ -109,21 +91,4 @@
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)
}
}
};
})();

75
js/drawingtools/selectiontools/ShapeSelect.js Normal file
View File

@@ -0,0 +1,75 @@
/*
* @provide pskl.drawingtools.ShapeSelect
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.ShapeSelect = function() {
this.toolId = "tool-shape-select";
ns.BaseSelect.call(this);
};
pskl.utils.inherit(ns.ShapeSelect, ns.BaseSelect);
/**
* @override
*/
ns.ShapeSelect.prototype.applyToolAt = function(col, row, color, frame, overlay) {
this.startCol = col;
this.startRow = row;
this.lastCol = col;
this.lastRow = row;
// TODO(vincz): Comment here nasty vince
if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
this.mode = "select";
$.publish(Events.SELECTION_DISMISSED);
var pixels = pskl.PixelUtils.getSimilarConnectedPixelsFromFrame(frame, col, row);
var selection = new pskl.selection.ShapeSelection(pixels);
$.publish(Events.SELECTION_CREATED, [selection]);
}
else {
this.mode = "moveSelection";
this.overlayFrameReference = overlay.clone();
}
};
ns.ShapeSelect.prototype.moveToolAt = function(col, row, color, frame, overlay) {
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;
}
};
/**
* @override
*/
ns.ShapeSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
if(this.mode == "select") {
// TODO(vincz): define a way to dismiss the shape select
} else if(this.mode == "moveSelection") {
this.moveToolAt(col, row, color, frame, overlay);
}
};
})();