wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Show stats Download patch file Download diff file Expand all files Collapse all files

12
css/tools.css
View file

@ -49,10 +49,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);
}*/
@ -81,10 +85,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

@ -32,7 +32,8 @@
<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"></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">
@ -111,6 +112,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>
<script src="js/drawingtools/BaseTool.js"></script>
@ -120,7 +122,9 @@
<script src="js/drawingtools/PaintBucket.js"></script>
<script src="js/drawingtools/Rectangle.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 -->

6
js/KeyManager.js
View file

@ -37,13 +37,13 @@
if (isMac ? evt.metaKey : evt.ctrlKey) {
// Get key pressed:
var letter = this.CharCodeToKeyCodeMap[evt.which];
var letter = this.CharCodeToKeyCodeMap[evt.which];
if(letter) {
var eventToTrigger = this.KeyboardActions["ctrl"][letter];
var eventToTrigger = this.KeyboardActions.ctrl[letter];
if(eventToTrigger) {
$.publish(eventToTrigger);
}
};
}
}
};

3
js/ToolSelector.js
View file

@ -16,7 +16,8 @@ pskl.ToolSelector = (function() {
"stroke" : new pskl.drawingtools.Stroke(),
"rectangle" : new pskl.drawingtools.Rectangle(),
"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;
};
})();

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

4
js/selection/SelectionManager.js
View file

@ -4,6 +4,7 @@
ns.SelectionManager = function (overlayFrame) {
this.framesheet = framesheet;
this.overlayFrame = overlayFrame;
this.currentSelection = null;
@ -48,7 +49,8 @@
* @private
*/
ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
if(!(tool instanceof pskl.drawingtools.Select)) {
var isSelectionTool = (tool instanceof pskl.drawingtools.RectangleSelect) || (tool instanceof pskl.drawingtools.ShapeSelect);
if(!isSelectionTool) {
this.cleanSelection_();
}
};

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

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

132
js/utils/pixelUtils.js
View file

@ -55,6 +55,138 @@
}
return pixels;
},
getSimilarConnectedPixelsFromFrame: function(frame, col, row) {
/**
* 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 pixels = [];
frame = frame.clone();
var replacementColor = "sdfsdfsdf"
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);
pixels.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 pixels;
},
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 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);
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;
}
}
}
};
})();