mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merge branch 'master' into gh-pages
This commit is contained in:
juliandescottes
commit
fd95abb1c7
23
README.md
23
README.md
@ -5,9 +5,21 @@ The goal is to create an easy-to-use/in-the-cloud/web-based 2d animation editor.
|
||||
|
||||
Try it at : http://juliandescottes.github.com/piskel/
|
||||
|
||||
v0.0almostthere
|
||||
15 Sep 2012
|
||||
------------------------------------
|
||||
**30 Aug 2012** : Many new features in 2 days :
|
||||
2 weeks already since the last README.md update, and so many changes ! There has been a continuous stream of features added to piskel by @grosboudda, @captainbrosset (thanks guys) and myself.
|
||||
I can't list everything here but quickly
|
||||
* __Tools__ : in addition to the regular Pen, you can now draw Rectangles, Circles. You can move stuff, copy, paste !
|
||||
* __Undo/redo__ : you can now cancel your actions using ctrl-z/ctrl-y
|
||||
* __Drag and drop__ : move frames around in your framesheet, using drag and drop
|
||||
|
||||
And a screenshot, for the record :
|
||||
|
||||
|
||||
|
||||
30 Aug 2012
|
||||
------------------------------------
|
||||
Many new features in 2 days :
|
||||
* __save animations__, they are persisted in the cloud, and can be retrieved via a __unique URL__
|
||||
* __color picker__, no longer limited to black and white
|
||||
* __local storage__, your work is automatically backed up locally
|
||||
@ -18,16 +30,15 @@ UI was slightly updated :
|
||||
|
||||
|
||||
|
||||
v0.0something
|
||||
28 Aug 2012
|
||||
------------------------------------
|
||||
**28 Aug 2012** : Thanks to grosbouddha, new features added to Piskel :
|
||||
Thanks to grosbouddha, new features added to Piskel :
|
||||
* modify preview speed !
|
||||
* remove frames
|
||||
* transparent background
|
||||
|
||||
v0.0whatever (aka the thing I did last night)
|
||||
24 Aug 2012 (aka the thing I did last night)
|
||||
------------------------------------
|
||||
**24 Aug 2012** : You can :
|
||||
* create small animations in __black__ (left click) and __white__ (right click)
|
||||
* and actually animations are always in __32x32__ zoomed 10 times
|
||||
* you can __not even save them__ !
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.tools-container {
|
||||
.menubar {
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 30px;
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
.tools-container {}
|
||||
|
||||
.tools-group {
|
||||
float: left;
|
||||
height: 30px;
|
||||
@ -53,10 +51,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 +91,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 {
|
||||
|
||||
22
index.html
22
index.html
@ -19,22 +19,15 @@
|
||||
<body>
|
||||
|
||||
<!-- Tool section: -->
|
||||
<div id="tools-container" class="tools-container">
|
||||
<div id="menubar" class="menubar">
|
||||
<ul class="tools-group">
|
||||
<!-- TODO: Remove that from here or change CSS class naming since
|
||||
they are framesheet level actions, not tools -->
|
||||
<li class="tool-icon tool-save" data-tool-id="tool-save" title="Save" onclick="piskel.storeSheet()"></li>
|
||||
<li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame"></li>
|
||||
</ul>
|
||||
|
||||
<ul class="tools-group">
|
||||
<li class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></li>
|
||||
<li class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></li>
|
||||
<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-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>
|
||||
</ul>
|
||||
<ul id="tools-container" class="tools-group"></ul>
|
||||
|
||||
<ul class="tools-group">
|
||||
<li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette">
|
||||
@ -106,12 +99,14 @@
|
||||
<script src="js/controller/DrawingController.js"></script>
|
||||
<script src="js/controller/PreviewFilmController.js"></script>
|
||||
<script src="js/controller/AnimatedPreviewController.js"></script>
|
||||
<script src="js/controller/ToolController.js"></script>
|
||||
<script src="js/LocalStorageService.js"></script>
|
||||
<script src="js/HistoryManager.js"></script>
|
||||
<script src="js/KeyManager.js"></script>
|
||||
<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,8 +120,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/ToolSelector.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>
|
||||
|
||||
<!-- Application controller and initialization -->
|
||||
<script src="js/piskel.js"></script>
|
||||
|
||||
@ -26,6 +26,8 @@
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
ns.KeyManager.prototype.onKeyUp_ = function(evt) {
|
||||
var isMac = false;
|
||||
if (navigator.appVersion.indexOf("Mac")!=-1) {
|
||||
|
||||
@ -1,93 +0,0 @@
|
||||
/*
|
||||
* @provide pskl.ToolSelector
|
||||
*
|
||||
* @require Constants
|
||||
* @require Events
|
||||
* @require pskl.drawingtools
|
||||
*/
|
||||
$.namespace("pskl");
|
||||
|
||||
pskl.ToolSelector = (function() {
|
||||
|
||||
var toolInstances = {
|
||||
"simplePen" : new pskl.drawingtools.SimplePen(),
|
||||
"eraser" : new pskl.drawingtools.Eraser(),
|
||||
"paintBucket" : new pskl.drawingtools.PaintBucket(),
|
||||
"stroke" : new pskl.drawingtools.Stroke(),
|
||||
"rectangle" : new pskl.drawingtools.Rectangle(),
|
||||
"circle" : new pskl.drawingtools.Circle(),
|
||||
"move" : new pskl.drawingtools.Move(),
|
||||
"select" : new pskl.drawingtools.Select()
|
||||
};
|
||||
var currentSelectedTool = toolInstances.simplePen;
|
||||
var previousSelectedTool = toolInstances.simplePen;
|
||||
|
||||
var activateToolOnStage_ = function(tool) {
|
||||
var stage = $("body");
|
||||
var previousSelectedToolClass = stage.data("selected-tool-class");
|
||||
if(previousSelectedToolClass) {
|
||||
stage.removeClass(previousSelectedToolClass);
|
||||
}
|
||||
stage.addClass(tool.toolId);
|
||||
stage.data("selected-tool-class", tool.toolId);
|
||||
};
|
||||
|
||||
var selectTool_ = function(tool) {
|
||||
console.log("Selecting Tool:" , currentSelectedTool);
|
||||
currentSelectedTool = tool;
|
||||
activateToolOnStage_(currentSelectedTool);
|
||||
$.publish(Events.TOOL_SELECTED, [tool]);
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
var onToolIconClicked_ = function(evt) {
|
||||
var target = $(evt.target);
|
||||
var clickedTool = target.closest(".tool-icon");
|
||||
|
||||
if(clickedTool.length) {
|
||||
for(var tool in toolInstances) {
|
||||
if (toolInstances[tool].toolId == clickedTool.data().toolId) {
|
||||
selectTool_(toolInstances[tool]);
|
||||
|
||||
// Show tool as selected:
|
||||
$("#tools-container .tool-icon.selected").removeClass("selected");
|
||||
clickedTool.addClass("selected");
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get state for the checkbox that control the display of the grid
|
||||
* on the drawing canvas.
|
||||
* @private
|
||||
*/
|
||||
var isShowGridChecked_ = function() {
|
||||
var showGridCheckbox = $('#show-grid');
|
||||
var isChecked = showGridCheckbox.is(':checked');
|
||||
return isChecked;
|
||||
};
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
|
||||
// Initialize tool:
|
||||
// Set SimplePen as default selected tool:
|
||||
selectTool_(toolInstances.simplePen);
|
||||
// Activate listener on tool panel:
|
||||
$("#tools-container").click(onToolIconClicked_);
|
||||
|
||||
// Show/hide the grid on drawing canvas:
|
||||
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [isShowGridChecked_()]);
|
||||
$('#show-grid').change(function(evt) {
|
||||
var checked = isShowGridChecked_();
|
||||
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [checked]);
|
||||
});
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
|
||||
|
||||
110
js/controller/ToolController.js
Normal file
110
js/controller/ToolController.js
Normal file
@ -0,0 +1,110 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.controller");
|
||||
|
||||
|
||||
ns.ToolController = function () {
|
||||
|
||||
this.toolInstances = {
|
||||
"simplePen" : new pskl.drawingtools.SimplePen(),
|
||||
"eraser" : new pskl.drawingtools.Eraser(),
|
||||
"paintBucket" : new pskl.drawingtools.PaintBucket(),
|
||||
"stroke" : new pskl.drawingtools.Stroke(),
|
||||
"rectangle" : new pskl.drawingtools.Rectangle(),
|
||||
"circle" : new pskl.drawingtools.Circle(),
|
||||
"move" : new pskl.drawingtools.Move(),
|
||||
"rectangleSelect" : new pskl.drawingtools.RectangleSelect(),
|
||||
"shapeSelect" : new pskl.drawingtools.ShapeSelect()
|
||||
};
|
||||
|
||||
this.currentSelectedTool = this.toolInstances.simplePen;
|
||||
this.previousSelectedTool = this.toolInstances.simplePen;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.ToolController.prototype.activateToolOnStage_ = function(tool) {
|
||||
var stage = $("body");
|
||||
var previousSelectedToolClass = stage.data("selected-tool-class");
|
||||
if(previousSelectedToolClass) {
|
||||
stage.removeClass(previousSelectedToolClass);
|
||||
}
|
||||
stage.addClass(tool.toolId);
|
||||
stage.data("selected-tool-class", tool.toolId);
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.ToolController.prototype.selectTool_ = function(tool) {
|
||||
console.log("Selecting Tool:" , this.currentSelectedTool);
|
||||
this.currentSelectedTool = tool;
|
||||
this.activateToolOnStage_(this.currentSelectedTool);
|
||||
$.publish(Events.TOOL_SELECTED, [tool]);
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.ToolController.prototype.onToolIconClicked_ = function(evt) {
|
||||
var target = $(evt.target);
|
||||
var clickedTool = target.closest(".tool-icon");
|
||||
|
||||
if(clickedTool.length) {
|
||||
for(var tool in this.toolInstances) {
|
||||
if (this.toolInstances[tool].toolId == clickedTool.data().toolId) {
|
||||
this.selectTool_(this.toolInstances[tool]);
|
||||
|
||||
// Show tool as selected:
|
||||
$('#menubar .tool-icon.selected').removeClass('selected');
|
||||
clickedTool.addClass('selected');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.ToolController.prototype.createToolMarkup_ = function() {
|
||||
var currentTool, toolMarkup = '';
|
||||
for (var toolKey in this.toolInstances) {
|
||||
currentTool = this.toolInstances[toolKey];
|
||||
toolMarkup += '<li class="tool-icon ' + currentTool.toolId + '" data-tool-id="' + currentTool.toolId +
|
||||
'" title="' + currentTool.helpText + '"></li>';
|
||||
}
|
||||
$('#tools-container').html(toolMarkup);
|
||||
};
|
||||
|
||||
/**
|
||||
* Get state for the checkbox that control the display of the grid
|
||||
* on the drawing canvas.
|
||||
* @private
|
||||
*/
|
||||
ns.ToolController.prototype.isShowGridChecked_ = function() {
|
||||
var showGridCheckbox = $('#show-grid');
|
||||
var isChecked = showGridCheckbox.is(':checked');
|
||||
return isChecked;
|
||||
};
|
||||
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
ns.ToolController.prototype.init = function() {
|
||||
|
||||
this.createToolMarkup_();
|
||||
|
||||
// Initialize tool:
|
||||
// Set SimplePen as default selected tool:
|
||||
this.selectTool_(this.toolInstances.simplePen);
|
||||
// Activate listener on tool panel:
|
||||
$("#menubar").click($.proxy(this.onToolIconClicked_, this));
|
||||
|
||||
// Show/hide the grid on drawing canvas:
|
||||
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [this.isShowGridChecked_()]);
|
||||
$('#show-grid').change($.proxy(function(evt) {
|
||||
var checked = this.isShowGridChecked_();
|
||||
$.publish(Events.GRID_DISPLAY_STATE_CHANGED, [checked]);
|
||||
}, this));
|
||||
};
|
||||
})();
|
||||
@ -7,7 +7,8 @@
|
||||
var ns = $.namespace("pskl.drawingtools");
|
||||
|
||||
ns.Circle = function() {
|
||||
this.toolId = "tool-circle"
|
||||
this.toolId = "tool-circle";
|
||||
this.helpText = "Circle tool";
|
||||
|
||||
// Circle's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
|
||||
ns.Eraser = function() {
|
||||
this.toolId = "tool-eraser";
|
||||
this.helpText = "Eraser tool";
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.Eraser, ns.SimplePen);
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
|
||||
ns.Move = function() {
|
||||
this.toolId = "tool-move"
|
||||
this.helpText = "Move tool";
|
||||
|
||||
// Stroke's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
var ns = $.namespace("pskl.drawingtools");
|
||||
|
||||
ns.PaintBucket = function() {
|
||||
this.toolId = "tool-paint-bucket"
|
||||
this.toolId = "tool-paint-bucket";
|
||||
this.helpText = "Paint bucket tool";
|
||||
};
|
||||
|
||||
pskl.utils.inherit(ns.PaintBucket, ns.BaseTool);
|
||||
@ -17,109 +18,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;
|
||||
};
|
||||
|
||||
})();
|
||||
|
||||
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
var ns = $.namespace("pskl.drawingtools");
|
||||
|
||||
ns.Rectangle = function() {
|
||||
this.toolId = "tool-rectangle"
|
||||
this.toolId = "tool-rectangle";
|
||||
this.helpText = "Rectangle tool";
|
||||
|
||||
// Rectangle's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
|
||||
@ -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)
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
@ -8,6 +8,7 @@
|
||||
|
||||
ns.SimplePen = function() {
|
||||
this.toolId = "tool-pen";
|
||||
this.helpText = "Pen tool"
|
||||
};
|
||||
|
||||
this.previousCol = null;
|
||||
|
||||
@ -7,7 +7,8 @@
|
||||
var ns = $.namespace("pskl.drawingtools");
|
||||
|
||||
ns.Stroke = function() {
|
||||
this.toolId = "tool-stroke"
|
||||
this.toolId = "tool-stroke";
|
||||
this.helpText = "Stroke tool";
|
||||
|
||||
// Stroke's first point coordinates (set in applyToolAt)
|
||||
this.startCol = null;
|
||||
|
||||
150
js/drawingtools/selectiontools/BaseSelect.js
Normal file
150
js/drawingtools/selectiontools/BaseSelect.js
Normal 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);
|
||||
};
|
||||
|
||||
|
||||
})();
|
||||
51
js/drawingtools/selectiontools/RectangleSelect.js
Normal file
51
js/drawingtools/selectiontools/RectangleSelect.js
Normal file
@ -0,0 +1,51 @@
|
||||
/*
|
||||
* @provide pskl.drawingtools.RectangleSelect
|
||||
*
|
||||
* @require pskl.utils
|
||||
*/
|
||||
(function() {
|
||||
var ns = $.namespace("pskl.drawingtools");
|
||||
|
||||
ns.RectangleSelect = function() {
|
||||
this.toolId = "tool-rectangle-select";
|
||||
this.helpText = "Rectangle selection tool";
|
||||
|
||||
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)
|
||||
};
|
||||
|
||||
})();
|
||||
34
js/drawingtools/selectiontools/ShapeSelect.js
Normal file
34
js/drawingtools/selectiontools/ShapeSelect.js
Normal file
@ -0,0 +1,34 @@
|
||||
/*
|
||||
* @provide pskl.drawingtools.ShapeSelect
|
||||
*
|
||||
* @require pskl.utils
|
||||
*/
|
||||
(function() {
|
||||
var ns = $.namespace("pskl.drawingtools");
|
||||
|
||||
ns.ShapeSelect = function() {
|
||||
this.toolId = "tool-shape-select";
|
||||
this.helpText = "Shape selection tool";
|
||||
|
||||
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]);
|
||||
};
|
||||
|
||||
})();
|
||||
10
js/piskel.js
10
js/piskel.js
@ -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);
|
||||
@ -144,7 +144,9 @@ $.namespace("pskl");
|
||||
},
|
||||
|
||||
finishInit : function () {
|
||||
pskl.ToolSelector.init();
|
||||
var toolController = new pskl.controller.ToolController();
|
||||
toolController.init();
|
||||
|
||||
pskl.Palette.init(frameSheet);
|
||||
},
|
||||
|
||||
|
||||
@ -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;
|
||||
};
|
||||
})();
|
||||
@ -2,14 +2,12 @@
|
||||
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));
|
||||
@ -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
9
js/selection/ShapeSelection.js
Normal 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);
|
||||
})();
|
||||
@ -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;
|
||||
}
|
||||
};
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user