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 branch 'master' into gh-pages

Browse Source
This commit is contained in:
juliandescottes 2012-09-15 23:38:54 +02:00
commit fd95abb1c7
23 changed files with 567 additions and 425 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@ -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/ 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 :
![Screenshot 3](https://dl.dropbox.com/u/17803671/screen_piskel_3.png "Screenshot 3")
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__ * __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 * __color picker__, no longer limited to black and white
* __local storage__, your work is automatically backed up locally * __local storage__, your work is automatically backed up locally
@ -18,16 +30,15 @@ UI was slightly updated :
![Screenshot 2](https://dl.dropbox.com/u/17803671/screen_piskel_2.png "Screenshot 2") ![Screenshot 2](https://dl.dropbox.com/u/17803671/screen_piskel_2.png "Screenshot 2")
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 ! * modify preview speed !
* remove frames * remove frames
* transparent background * 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) * create small animations in __black__ (left click) and __white__ (right click)
* and actually animations are always in __32x32__ zoomed 10 times * and actually animations are always in __32x32__ zoomed 10 times
* you can __not even save them__ ! * you can __not even save them__ !

2
css/style.css
View File

@ -1,4 +1,4 @@
.tools-container { .menubar {
position: absolute; position: absolute;
top: 0; left: 0; top: 0; left: 0;
width: 100%; height: 30px; width: 100%; height: 30px;

14
css/tools.css
View File

@ -1,5 +1,3 @@
.tools-container {}
.tools-group { .tools-group {
float: left; float: left;
height: 30px; height: 30px;
@ -53,10 +51,14 @@
background-image: url(../img/tools/icons/hand.png); 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); 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 { /*.tool-icon.tool-palette {
background-image: url(../img/tools/icons/color-palette.png); background-image: url(../img/tools/icons/color-palette.png);
}*/ }*/
@ -89,10 +91,14 @@
cursor: url(../img/tools/cursors/hand.png) 14 12, pointer; 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; 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,
.tool-grid label, .tool-grid label,
.tool-grid input { .tool-grid input {

24
index.html
View File

@ -19,22 +19,15 @@
<body> <body>
<!-- Tool section: --> <!-- Tool section: -->
<div id="tools-container" class="tools-container"> <div id="menubar" class="menubar">
<ul class="tools-group"> <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-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> <li class="tool-icon tool-add-frame" id="add-frame-button" data-tool-id="tool-add-frame" title="Add a frame"></li>
</ul> </ul>
<ul class="tools-group"> <ul id="tools-container" class="tools-group"></ul>
<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 class="tools-group"> <ul class="tools-group">
<li class="tool-icon tool-palette" data-tool-id="tool-palette" title="Color palette"> <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/DrawingController.js"></script>
<script src="js/controller/PreviewFilmController.js"></script> <script src="js/controller/PreviewFilmController.js"></script>
<script src="js/controller/AnimatedPreviewController.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/LocalStorageService.js"></script>
<script src="js/HistoryManager.js"></script> <script src="js/HistoryManager.js"></script>
<script src="js/KeyManager.js"></script> <script src="js/KeyManager.js"></script>
<script src="js/selection/SelectionManager.js"></script> <script src="js/selection/SelectionManager.js"></script>
<script src="js/selection/BaseSelection.js"></script> <script src="js/selection/BaseSelection.js"></script>
<script src="js/selection/RectangularSelection.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/Palette.js"></script>
<script src="js/Notification.js"></script> <script src="js/Notification.js"></script>
@ -125,9 +120,10 @@
<script src="js/drawingtools/Rectangle.js"></script> <script src="js/drawingtools/Rectangle.js"></script>
<script src="js/drawingtools/Circle.js"></script> <script src="js/drawingtools/Circle.js"></script>
<script src="js/drawingtools/Move.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/ToolSelector.js"></script> <script src="js/drawingtools/selectiontools/RectangleSelect.js"></script>
<script src="js/drawingtools/selectiontools/ShapeSelect.js"></script>
<!-- Application controller and initialization --> <!-- Application controller and initialization -->
<script src="js/piskel.js"></script> <script src="js/piskel.js"></script>
</body> </body>

80
js/KeyManager.js
View File

@ -1,48 +1,50 @@
(function () { (function () {
var ns = $.namespace("pskl"); var ns = $.namespace("pskl");
ns.KeyManager = function () { ns.KeyManager = function () {
$(document.body).keydown($.proxy(this.onKeyUp_, this)); $(document.body).keydown($.proxy(this.onKeyUp_, this));
}; };
// Kind of object that make you want to stop front-end _engineering_: // Kind of object that make you want to stop front-end _engineering_:
ns.KeyManager.prototype.CharCodeToKeyCodeMap = { ns.KeyManager.prototype.CharCodeToKeyCodeMap = {
90 : "z", 90 : "z",
89 : "y", 89 : "y",
88 : "x", 88 : "x",
67 : "c", 67 : "c",
86 : "v" 86 : "v"
}; };
ns.KeyManager.prototype.KeyboardActions = { ns.KeyManager.prototype.KeyboardActions = {
"ctrl" : { "ctrl" : {
"z" : Events.UNDO, "z" : Events.UNDO,
"y" : Events.REDO, "y" : Events.REDO,
"x" : Events.CUT, "x" : Events.CUT,
"c" : Events.COPY, "c" : Events.COPY,
"v" : Events.PASTE "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);
}
}
}
};
})(); })();

93
js/ToolSelector.js
View File

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

3
js/drawingtools/Circle.js
View File

@ -7,7 +7,8 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.Circle = function() { ns.Circle = function() {
this.toolId = "tool-circle" this.toolId = "tool-circle";
this.helpText = "Circle tool";
// Circle's first point coordinates (set in applyToolAt) // Circle's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;

1
js/drawingtools/Eraser.js
View File

@ -9,6 +9,7 @@
ns.Eraser = function() { ns.Eraser = function() {
this.toolId = "tool-eraser"; this.toolId = "tool-eraser";
this.helpText = "Eraser tool";
}; };
pskl.utils.inherit(ns.Eraser, ns.SimplePen); pskl.utils.inherit(ns.Eraser, ns.SimplePen);

1
js/drawingtools/Move.js
View File

@ -8,6 +8,7 @@
ns.Move = function() { ns.Move = function() {
this.toolId = "tool-move" this.toolId = "tool-move"
this.helpText = "Move tool";
// Stroke's first point coordinates (set in applyToolAt) // Stroke's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;

106
js/drawingtools/PaintBucket.js
View File

@ -7,7 +7,8 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.PaintBucket = function() { 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); pskl.utils.inherit(ns.PaintBucket, ns.BaseTool);
@ -17,109 +18,8 @@
*/ */
ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay) { ns.PaintBucket.prototype.applyToolAt = function(col, row, color, frame, overlay) {
// Change model: pskl.PixelUtils.paintSimilarConnectedPixelsFromFrame(frame, col, row, color);
var targetColor = frame.getPixel(col, row);
this.queueLinearFloodFill_(frame, col, row, targetColor, 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;
};
})(); })();

3
js/drawingtools/Rectangle.js
View File

@ -7,7 +7,8 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.Rectangle = function() { ns.Rectangle = function() {
this.toolId = "tool-rectangle" this.toolId = "tool-rectangle";
this.helpText = "Rectangle tool";
// Rectangle's first point coordinates (set in applyToolAt) // Rectangle's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;

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

1
js/drawingtools/SimplePen.js
View File

@ -8,6 +8,7 @@
ns.SimplePen = function() { ns.SimplePen = function() {
this.toolId = "tool-pen"; this.toolId = "tool-pen";
this.helpText = "Pen tool"
}; };
this.previousCol = null; this.previousCol = null;

5
js/drawingtools/Stroke.js
View File

@ -7,8 +7,9 @@
var ns = $.namespace("pskl.drawingtools"); var ns = $.namespace("pskl.drawingtools");
ns.Stroke = function() { ns.Stroke = function() {
this.toolId = "tool-stroke" this.toolId = "tool-stroke";
this.helpText = "Stroke tool";
// Stroke's first point coordinates (set in applyToolAt) // Stroke's first point coordinates (set in applyToolAt)
this.startCol = null; this.startCol = null;
this.startRow = null; this.startRow = null;

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

51
js/drawingtools/selectiontools/RectangleSelect.js Normal file
View 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
View 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
View File

@ -51,14 +51,14 @@ $.namespace("pskl");
); );
// To catch the current active frame, the selection manager have to be initialized before // 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: // TODO(vincz): Slice each constructor to have:
// - an event(s) listening init // - an event(s) listening init
// - an event(s) triggering 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. // in a second batch.
this.selectionManager = 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) // DO NOT MOVE THIS LINE (see comment above)
frameSheet.setCurrentFrameIndex(0); frameSheet.setCurrentFrameIndex(0);
@ -144,7 +144,9 @@ $.namespace("pskl");
}, },
finishInit : function () { finishInit : function () {
pskl.ToolSelector.init(); var toolController = new pskl.controller.ToolController();
toolController.init();
pskl.Palette.init(frameSheet); pskl.Palette.init(frameSheet);
}, },

2
js/selection/BaseSelection.js
View File

@ -7,6 +7,7 @@
ns.BaseSelection.prototype.reset = function () { ns.BaseSelection.prototype.reset = function () {
this.pixels = []; this.pixels = [];
this.hasPastedContent = false;
}; };
ns.BaseSelection.prototype.move = function (colDiff, rowDiff) { ns.BaseSelection.prototype.move = function (colDiff, rowDiff) {
@ -28,5 +29,6 @@
pixelWithCopiedColor.copiedColor = pixelWithCopiedColor.copiedColor =
targetFrame.getPixel(pixelWithCopiedColor.col, pixelWithCopiedColor.row); 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"); var ns = $.namespace("pskl.selection");
ns.SelectionManager = function (overlayFrame) { ns.SelectionManager = function (framesheet, overlayFrame) {
this.framesheet = framesheet;
this.overlayFrame = overlayFrame; this.overlayFrame = overlayFrame;
this.currentSelection = null; 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_CREATED, $.proxy(this.onSelectionCreated_, this));
$.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this)); $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
$.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this)); $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
@ -32,23 +30,12 @@
this.overlayFrame.clear(); 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 * @private
*/ */
ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) { ns.SelectionManager.prototype.onToolSelected_ = function(evt, tool) {
if(!(tool instanceof pskl.drawingtools.Select)) { var isSelectionTool = tool instanceof pskl.drawingtools.BaseSelect;
if(!isSelectionTool) {
this.cleanSelection_(); this.cleanSelection_();
} }
}; };
@ -64,14 +51,15 @@
* @private * @private
*/ */
ns.SelectionManager.prototype.onCut_ = function(evt) { ns.SelectionManager.prototype.onCut_ = function(evt) {
if(this.currentSelection && this.currentFrame) { if(this.currentSelection) {
// Put cut target into the selection: // Put cut target into the selection:
this.currentSelection.fillSelectionFromFrame(this.currentFrame); this.currentSelection.fillSelectionFromFrame(this.framesheet.getCurrentFrame());
var pixels = this.currentSelection.pixels; var pixels = this.currentSelection.pixels;
var currentFrame = this.framesheet.getCurrentFrame();
for(var i=0, l=pixels.length; i<l; i++) { for(var i=0, l=pixels.length; i<l; i++) {
try { 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) { catch(e) {
// Catchng out of frame's bound pixels without testing // Catchng out of frame's bound pixels without testing
@ -84,11 +72,12 @@
}; };
ns.SelectionManager.prototype.onPaste_ = function(evt) { ns.SelectionManager.prototype.onPaste_ = function(evt) {
if(this.currentSelection && this.currentFrame) { if(this.currentSelection && this.currentSelection.hasPastedContent) {
var pixels = this.currentSelection.pixels; var pixels = this.currentSelection.pixels;
var currentFrame = this.framesheet.getCurrentFrame();
for(var i=0, l=pixels.length; i<l; i++) { for(var i=0, l=pixels.length; i<l; i++) {
try { try {
this.currentFrame.setPixel( currentFrame.setPixel(
pixels[i].col, pixels[i].row, pixels[i].col, pixels[i].row,
pixels[i].copiedColor); pixels[i].copiedColor);
} }
@ -97,17 +86,14 @@
} }
} }
} }
else {
throw "Bad state for PASTE callback in SelectionManager";
}
}; };
/** /**
* @private * @private
*/ */
ns.SelectionManager.prototype.onCopy_ = function(evt) { ns.SelectionManager.prototype.onCopy_ = function(evt) {
if(this.currentSelection && this.currentFrame) { if(this.currentSelection && this.framesheet.getCurrentFrame()) {
this.currentSelection.fillSelectionFromFrame(this.currentFrame); this.currentSelection.fillSelectionFromFrame(this.framesheet.getCurrentFrame());
} }
else { else {
throw "Bad state for CUT callback in SelectionManager"; 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), x0 : Math.min(x0, x1), y0 : Math.min(y0, y1),
x1 : Math.max(x0, x1), y1 : Math.max(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;
}
}; };
})(); })();