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

Merge pull request #79 from grosbouddha/lasso-tool

Browse Source 
Shape Select tool (AKA magic wand)
This commit is contained in:
Julian Descottes 2012-09-15 04:43:28 -07:00
commit 1276f338c2
14 changed files with 420 additions and 306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/tools.css
View File

@ -53,10 +53,14 @@
background-image: url(../img/tools/icons/hand.png);
}
.tool-icon.tool-select {
.tool-icon.tool-rectangle-select {
background-image: url(../img/tools/icons/select.png);
}
.tool-icon.tool-shape-select {
background-image: url(../img/tools/icons/wand.png);
}
/*.tool-icon.tool-palette {
background-image: url(../img/tools/icons/color-palette.png);
}*/
@ -89,10 +93,14 @@
cursor: url(../img/tools/cursors/hand.png) 14 12, pointer;
}
.tool-select .drawing-canvas-container:hover {
.tool-rectangle-select .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/select.png) 14 12, pointer;
}
.tool-shape-select .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/wand.png) 14 12, pointer;
}
.tool-grid,
.tool-grid label,
.tool-grid input {

8
index.html
View File

@ -33,7 +33,8 @@
<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-select" data-tool-id="tool-select" 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 class="tools-group">
@ -112,6 +113,7 @@
<script src="js/selection/SelectionManager.js"></script>
<script src="js/selection/BaseSelection.js"></script>
<script src="js/selection/RectangularSelection.js"></script>
<script src="js/selection/ShapeSelection.js"></script>
<script src="js/Palette.js"></script>
<script src="js/Notification.js"></script>
@ -125,7 +127,9 @@
<script src="js/drawingtools/Rectangle.js"></script>
<script src="js/drawingtools/Circle.js"></script>
<script src="js/drawingtools/Move.js"></script>
<script src="js/drawingtools/RectangularSelect.js"></script>
<script src="js/drawingtools/selectiontools/BaseSelect.js"></script>
<script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>
<script src="js/drawingtools/selectiontools/ShapeSelect.js"></script>
<script src="js/ToolSelector.js"></script>
<!-- Application controller and initialization -->

80
js/KeyManager.js
View File

@ -1,48 +1,50 @@
(function () {
var ns = $.namespace("pskl");
var ns = $.namespace("pskl");
ns.KeyManager = function () {
$(document.body).keydown($.proxy(this.onKeyUp_, this));
};
ns.KeyManager = function () {
$(document.body).keydown($.proxy(this.onKeyUp_, this));
};
// Kind of object that make you want to stop front-end _engineering_:
ns.KeyManager.prototype.CharCodeToKeyCodeMap = {
// Kind of object that make you want to stop front-end _engineering_:
ns.KeyManager.prototype.CharCodeToKeyCodeMap = {
90 : "z",
89 : "y",
88 : "x",
67 : "c",
86 : "v"
};
90 : "z",
89 : "y",
88 : "x",
67 : "c",
86 : "v"
};
ns.KeyManager.prototype.KeyboardActions = {
ns.KeyManager.prototype.KeyboardActions = {
"ctrl" : {
"z" : Events.UNDO,
"y" : Events.REDO,
"x" : Events.CUT,
"c" : Events.COPY,
"v" : Events.PASTE
}
};
"ctrl" : {
"z" : Events.UNDO,
"y" : Events.REDO,
"x" : Events.CUT,
"c" : Events.COPY,
"v" : Events.PASTE
}
};
ns.KeyManager.prototype.onKeyUp_ = function(evt) {
var isMac = false;
if (navigator.appVersion.indexOf("Mac")!=-1) {
// Welcome in mac world where vowels are consons and meta used instead of ctrl:
isMac = true;
}
if (isMac ? evt.metaKey : evt.ctrlKey) {
// Get key pressed:
var letter = this.CharCodeToKeyCodeMap[evt.which];
if(letter) {
var eventToTrigger = this.KeyboardActions.ctrl[letter];
if(eventToTrigger) {
$.publish(eventToTrigger);
}
}
}
};
ns.KeyManager.prototype.onKeyUp_ = function(evt) {
var isMac = false;
if (navigator.appVersion.indexOf("Mac")!=-1) {
// Welcome in mac world where vowels are consons and meta used instead of ctrl:
isMac = true;
}
if (isMac ? evt.metaKey : evt.ctrlKey) {
// Get key pressed:
var letter = this.CharCodeToKeyCodeMap[evt.which];
if(letter) {
var eventToTrigger = this.KeyboardActions.ctrl[letter];
if(eventToTrigger) {
$.publish(eventToTrigger);
}
}
}
};
})();

3
js/ToolSelector.js
View File

@ -17,7 +17,8 @@ pskl.ToolSelector = (function() {
"rectangle" : new pskl.drawingtools.Rectangle(),
"circle" : new pskl.drawingtools.Circle(),
"move" : new pskl.drawingtools.Move(),
"select" : new pskl.drawingtools.Select()
"rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
"shapeSelect" : new pskl.drawingtools.ShapeSelect()
};
var currentSelectedTool = toolInstances.simplePen;
var previousSelectedTool = toolInstances.simplePen;

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;
};
})();

129
js/drawingtools/RectangularSelect.js
View File

@ -1,129 +0,0 @@
/*
* @provide pskl.drawingtools.Select
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.Select = function() {
this.toolId = "tool-select";
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.Select, ns.BaseTool);
/**
* @override
*/
ns.Select.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";
// 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) {
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);
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) {
// 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) {
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)
}
}
};
})();

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

@ -0,0 +1,150 @@
/*
* @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.applyToolAt = function(col, row, color, frame, overlay) {
this.startCol = col;
this.startRow = row;
this.lastCol = col;
this.lastRow = row;
// The select tool can be in two different state.
// If the inital click of the tool is not on a selection, we go in "select"
// mode to create a selection.
// If the initial click is on a previous selection, we go in "moveSelection"
// mode to allow to move the selection by drag'n dropping it.
if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
this.mode = "select";
this.onSelectStart_(col, row, color, frame, overlay);
}
else {
this.mode = "moveSelection";
this.onSelectionDragStart_(col, row, color, frame, overlay);
}
};
/**
* @override
*/
ns.BaseSelect.prototype.moveToolAt = function(col, row, color, frame, overlay) {
if(this.mode == "select") {
this.onSelect_(col, row, color, frame, overlay);
}
else if(this.mode == "moveSelection") {
this.onSelectionDrag_(col, row, color, frame, overlay);
}
};
/**
* @override
*/
ns.BaseSelect.prototype.releaseToolAt = function(col, row, color, frame, overlay) {
if(this.mode == "select") {
this.onSelectEnd_(col, row, color, frame, overlay);
} else if(this.mode == "moveSelection") {
this.onSelectionDragEnd_(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.
* @override
*/
ns.BaseSelect.prototype.moveUnactiveToolAt = function(col, row, color, frame, overlay) {
if(overlay.getPixel(col, row) != Constants.SELECTION_TRANSPARENT_COLOR) {
// We're hovering the selection, show the move tool:
this.BodyRoot.addClass(this.toolId);
this.BodyRoot.removeClass(this.secondaryToolId);
} else {
// We're not hovering the selection, show create selection tool:
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)
}
}
};
// The list of callbacks to implement by specialized tools to implement the selection creation behavior.
/** @protected */
ns.BaseSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {};
/** @protected */
ns.BaseSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {};
/** @protected */
ns.BaseSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {};
// The list of callbacks that define the drag'n drop behavior of the selection.
/** @private */
ns.BaseSelect.prototype.onSelectionDragStart_ = function (col, row, color, frame, overlay) {
// Since we will move the overlayFrame in which the current selection is rendered,
// we clone it to have a reference for the later shifting process.
this.overlayFrameReference = overlay.clone();
};
/** @private */
ns.BaseSelect.prototype.onSelectionDrag_ = function (col, row, color, frame, overlay) {
var deltaCol = col - this.lastCol;
var deltaRow = row - this.lastRow;
var colDiff = col - this.startCol, rowDiff = row - this.startRow;
if (colDiff != 0 || rowDiff != 0) {
// Shifting 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;
};
/** @private */
ns.BaseSelect.prototype.onSelectionDragEnd_ = function (col, row, color, frame, overlay) {
this.onSelectionDrag_(col, row, color, frame, overlay);
};
})();

50
js/drawingtools/selectiontools/RectangleSelect.js Normal file
View File

@ -0,0 +1,50 @@
/*
* @provide pskl.drawingtools.RectangleSelect
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.RectangleSelect = function() {
this.toolId = "tool-rectangle-select";
ns.BaseSelect.call(this);
};
pskl.utils.inherit(ns.RectangleSelect, ns.BaseSelect);
/**
* @override
*/
ns.RectangleSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
// Drawing the first point of the rectangle in the fake overlay canvas:
overlay.setPixel(col, row, color);
};
/**
* When creating the rectangle selection, we clear the current overlayFrame and
* redraw the current rectangle based on the orgin coordinate and
* the current mouse coordiinate in sprite.
* @override
*/
ns.RectangleSelect.prototype.onSelect_ = function (col, row, color, frame, overlay) {
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]);
}
};
/**
* @override
*/
ns.RectangleSelect.prototype.onSelectEnd_ = function (col, row, color, frame, overlay) {
this.onSelect_(col, row, color, frame, overlay)
};
})();

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

@ -0,0 +1,33 @@
/*
* @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);
/**
* For the shape select tool, you just need to click one time to create a selection.
* So we jsut need to implement onSelectStart_ (no need for onSelect_ & onSelectEnd_)
* @override
*/
ns.ShapeSelect.prototype.onSelectStart_ = function (col, row, color, frame, overlay) {
// Clean previous selection:
$.publish(Events.SELECTION_DISMISSED);
// From the pixel cliked, get shape using an algorithm similar to the paintbucket one:
var pixels = pskl.PixelUtils.getSimilarConnectedPixelsFromFrame(frame, col, row);
var selection = new pskl.selection.ShapeSelection(pixels);
$.publish(Events.SELECTION_CREATED, [selection]);
};
})();

6
js/piskel.js
View File

@ -51,14 +51,14 @@ $.namespace("pskl");
);
// To catch the current active frame, the selection manager have to be initialized before
// the 'frameSheet.setCurrentFrameIndex(0);'
// the 'frameSheet.setCurrentFrameIndex(0);' line below.
// TODO(vincz): Slice each constructor to have:
// - an event(s) listening init
// - an event(s) triggering init
// All listerners will be hook in a first step, then all event triggering inits will be called
// All listeners will be hook in a first step, then all event triggering inits will be called
// in a second batch.
this.selectionManager =
new pskl.selection.SelectionManager(this.drawingController.overlayFrame);
new pskl.selection.SelectionManager(frameSheet, this.drawingController.overlayFrame);
// DO NOT MOVE THIS LINE (see comment above)
frameSheet.setCurrentFrameIndex(0);

2
js/selection/BaseSelection.js
View File

@ -7,6 +7,7 @@
ns.BaseSelection.prototype.reset = function () {
this.pixels = [];
this.hasPastedContent = false;
};
ns.BaseSelection.prototype.move = function (colDiff, rowDiff) {
@ -28,5 +29,6 @@
pixelWithCopiedColor.copiedColor =
targetFrame.getPixel(pixelWithCopiedColor.col, pixelWithCopiedColor.row);
}
this.hasPastedContent = true;
};
})();

40
js/selection/SelectionManager.js
View File

@ -2,15 +2,13 @@
var ns = $.namespace("pskl.selection");
ns.SelectionManager = function (overlayFrame) {
ns.SelectionManager = function (framesheet, overlayFrame) {
this.framesheet = framesheet;
this.overlayFrame = overlayFrame;
this.currentSelection = null;
this.currentFrame = null;
$.subscribe(Events.CURRENT_FRAME_SET, $.proxy(this.onCurrentFrameChanged_, 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));
@ -32,23 +30,12 @@
this.overlayFrame.clear();
};
/**
* @private
*/
ns.SelectionManager.prototype.onCurrentFrameChanged_ = function(evt, currentFrame) {
if(currentFrame) {
this.currentFrame = currentFrame;
}
else {
throw "Bad current frame set in SelectionManager";
}
};
/**
* @private
*/
ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
if(!(tool instanceof pskl.drawingtools.Select)) {
var isSelectionTool = tool instanceof pskl.drawingtools.BaseSelect;
if(!isSelectionTool) {
this.cleanSelection_();
}
};
@ -64,14 +51,15 @@
* @private
*/
ns.SelectionManager.prototype.onCut_ = function(evt) {
if(this.currentSelection && this.currentFrame) {
if(this.currentSelection) {
// Put cut target into the selection:
this.currentSelection.fillSelectionFromFrame(this.currentFrame);
this.currentSelection.fillSelectionFromFrame(this.framesheet.getCurrentFrame());
var pixels = this.currentSelection.pixels;
var currentFrame = this.framesheet.getCurrentFrame();
for(var i=0, l=pixels.length; i<l; i++) {
try {
this.currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
currentFrame.setPixel(pixels[i].col, pixels[i].row, Constants.TRANSPARENT_COLOR);
}
catch(e) {
// Catchng out of frame's bound pixels without testing
@ -84,11 +72,12 @@
};
ns.SelectionManager.prototype.onPaste_ = function(evt) {
if(this.currentSelection && this.currentFrame) {
if(this.currentSelection && this.currentSelection.hasPastedContent) {
var pixels = this.currentSelection.pixels;
var currentFrame = this.framesheet.getCurrentFrame();
for(var i=0, l=pixels.length; i<l; i++) {
try {
this.currentFrame.setPixel(
currentFrame.setPixel(
pixels[i].col, pixels[i].row,
pixels[i].copiedColor);
}
@ -97,17 +86,14 @@
}
}
}
else {
throw "Bad state for PASTE callback in SelectionManager";
}
};
/**
* @private
*/
ns.SelectionManager.prototype.onCopy_ = function(evt) {
if(this.currentSelection && this.currentFrame) {
this.currentSelection.fillSelectionFromFrame(this.currentFrame);
if(this.currentSelection && this.framesheet.getCurrentFrame()) {
this.currentSelection.fillSelectionFromFrame(this.framesheet.getCurrentFrame());
}
else {
throw "Bad state for CUT callback in SelectionManager";

9
js/selection/ShapeSelection.js Normal file
View File

@ -0,0 +1,9 @@
(function () {
var ns = $.namespace("pskl.selection");
ns.ShapeSelection = function (pixels) {
this.pixels = pixels;
};
pskl.utils.inherit(ns.ShapeSelection, ns.BaseSelection);
})();

101
js/utils/pixelUtils.js
View File

@ -44,6 +44,105 @@
x0 : Math.min(x0, x1), y0 : Math.min(y0, y1),
x1 : Math.max(x0, x1), y1 : Math.max(y0, y1),
};
}
},
/**
* Return the list of pixels that would have been filled by a paintbucket tool applied
* on pixel at coordinate (x,y).
* This function is not altering the Frame object argument.
*
* @param frame pskl.model.Frame The frame target in which we want to paintbucket
* @param col number Column coordinate in the frame
* @param row number Row coordinate in the frame
*
* @return an array of the pixel coordinates paint with the replacement color
*/
getSimilarConnectedPixelsFromFrame: function(frame, col, row) {
// To get the list of connected (eg the same color) pixels, we will use the paintbucket algorithm
// in a fake cloned frame. The returned pixels by the paintbucket algo are the painted pixels
// and are as well connected.
var fakeFrame = frame.clone(); // We just want to
var fakeFillColor = "sdfsdfsdf"; // A fake color that will never match a real color.
var paintedPixels = this.paintSimilarConnectedPixelsFromFrame(fakeFrame, col, row, fakeFillColor);
return paintedPixels;
},
/**
* Apply the paintbucket tool in a frame at the (col, row) initial position
* with the replacement color.
*
* @param frame pskl.model.Frame The frame target in which we want to paintbucket
* @param col number Column coordinate in the frame
* @param row number Row coordinate in the frame
* @param replacementColor string Hexadecimal color used to fill the area
*
* @return an array of the pixel coordinates paint with the replacement color
*/
paintSimilarConnectedPixelsFromFrame: function(frame, col, row, replacementColor) {
/**
* Queue linear 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
*/
var paintedPixels = [];
var queue = [];
var dy = [-1, 0, 1, 0];
var dx = [0, 1, 0, -1];
try {
var targetColor = frame.getPixel(col, row);
} catch(e) {
// Frame out of bound exception.
}
if(targetColor == replacementColor) {
return;
}
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);
paintedPixels.push({"col": currentItem.col, "row": currentItem.row });
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;
}
}
return paintedPixels;
}
};
})();