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

Stroke tool

Browse source 
Add stroke tool
new icons for tools
started some refactoring to help having a big redraw loop
This commit is contained in:
Vince 2012-09-02 00:44:55 +02:00
parent 6b7294e8c5
commit 700c6ab144
17 changed files with 279 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
*.DS_Store

30
css/style.css
View file

@ -127,27 +127,39 @@ ul, li {
z-index: 1; z-index: 1;
} }
.canvas-overlay {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.drawing-canvas-container { .drawing-canvas-container {
float: left; float: left;
} }
.tool-paint-bucket .drawing-canvas-container:hover { .tool-paint-bucket .drawing-canvas-container:hover {
cursor: url(../img/tools/paint-bucket.png) 18 17, pointer; cursor: url(../img/tools/cursors/paint-bucket.png) 18 17, pointer;
} }
.tool-pen .drawing-canvas-container:hover { .tool-pen .drawing-canvas-container:hover {
cursor: url(../img/tools/pen.png) 7 21, pointer; cursor: url(../img/tools/cursors/pen.png) 7 21, pointer;
} }
.tool-eraser .drawing-canvas-container:hover { .tool-eraser .drawing-canvas-container:hover {
cursor: url(../img/tools/eraser.png) 5 21, pointer; cursor: url(../img/tools/cursors/eraser.png) 5 21, pointer;
} }
.tool-stroke .drawing-canvas-container:hover {
cursor: url(../img/tools/cursors/pen.png) 5 21, pointer;
}
/** /**
* Tool section: * Tool section:
*/ */
#palette li { .palette .palette-color {
display : inline-block; display : inline-block;
height : 20px; height : 20px;
width : 20px; width : 20px;
@ -185,15 +197,19 @@ ul, li {
} }
.tool-icon.tool-pen { .tool-icon.tool-pen {
background: #fff url(../img/tools/pen.png) 3px 3px no-repeat; background: #fff url(../img/tools/icons/pen.png) 3px 3px no-repeat;
} }
.tool-icon.tool-paint-bucket { .tool-icon.tool-paint-bucket {
background: #fff url(../img/tools/paint-bucket.png) 3px 3px no-repeat; background: #fff url(../img/tools/icons/paint-bucket.png) 3px 3px no-repeat;
} }
.tool-icon.tool-eraser { .tool-icon.tool-eraser {
background: #fff url(../img/tools/eraser.png) 3px 3px no-repeat; background: #fff url(../img/tools/icons/eraser.png) 3px 3px no-repeat;
}
.tool-icon.tool-stroke {
background: #fff url(../img/tools/icons/stroke.png) 3px 3px no-repeat;
} }
#preview-fps { #preview-fps {

0
img/tools/eraser.png → img/tools/cursors/eraser.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 774 B

After

Width:  |  Height:  |  Size: 774 B

0
img/tools/paint-bucket.png → img/tools/cursors/paint-bucket.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 50 KiB

0
img/tools/pen.png → img/tools/cursors/pen.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 47 KiB

BIN
img/tools/icons/eraser.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 774 B

BIN
img/tools/icons/paint-bucket.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
img/tools/icons/pen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
img/tools/icons/stroke.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

35
index.html
View file

@ -7,7 +7,7 @@
<title>Piskel</title> <title>Piskel</title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="author" content="Julian Descottes"> <meta name="author" content="Julian Descottes">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
@ -15,24 +15,36 @@
</head> </head>
<body> <body>
<div class='debug left-nav'> <div class='debug left-nav'>
<!-- Frame actions: -->
<button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button> <button onclick="piskel.storeSheet()" class="action-button">Save Framesheet</button>
<button id='add-frame-button' class="action-button"> <button id='add-frame-button' class="action-button">
Add a Frame Add a Frame
</button> </button>
<ul id="preview-list">
</ul> <!-- List of frames: -->
<ul id="preview-list"></ul>
</div> </div>
<div class='main-panel'> <div class='main-panel'>
<!-- Drawing area: -->
<div id="drawing-canvas-container" class="drawing-canvas-container canvas-container"> <div id="drawing-canvas-container" class="drawing-canvas-container canvas-container">
<div class="canvas-background"></div> <div class="canvas-background"></div>
</div> </div>
<!-- Tool section: -->
<div id="tools-container" class="tools-container"> <div id="tools-container" class="tools-container">
<div class="tool-icon tool-pen" data-tool-id="tool-pen"></div> <div class="tool-icon tool-pen" data-tool-id="tool-pen" title="Pen tool"></div>
<div class="tool-icon tool-eraser" data-tool-id="tool-eraser"></div> <div class="tool-icon tool-eraser" data-tool-id="tool-eraser" title="Eraser tool"></div>
<div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket"></div> <div class="tool-icon tool-paint-bucket" data-tool-id="tool-paint-bucket" title="Bucket tool"></div>
<div class="tool-icon tool-stroke" data-tool-id="tool-stroke" title="Stroke tool"></div>
<input id="color-picker" class="color {hash:true}" type="text" value=""/> <input id="color-picker" class="color {hash:true}" type="text" value=""/>
<ul id="palette" onclick="piskel.onPaletteClick(event)"></ul>
<ul id="palette" class="palette" onclick="piskel.onPaletteClick(event)"></ul>
</div> </div>
<!-- Animation preview: -->
<div class='preview-container'> <div class='preview-container'>
<div id='preview-canvas-container' class="canvas-container"> <div id='preview-canvas-container' class="canvas-container">
<div class="canvas-background"></div> <div class="canvas-background"></div>
@ -45,21 +57,28 @@
</div> </div>
<div id="cursorInfo"></div> <div id="cursorInfo"></div>
<!-- Core libraries: -->
<script src="js/lib/jquery-1.8.0.js"></script> <script src="js/lib/jquery-1.8.0.js"></script>
<script src="js/lib/pubsub.js"></script> <script src="js/lib/pubsub.js"></script>
<!-- Application wide configuration -->
<script src="js/Constants.js"></script> <script src="js/Constants.js"></script>
<script src="js/Events.js"></script> <script src="js/Events.js"></script>
<!-- Libraries -->
<script src="js/utils.js"></script> <script src="js/utils.js"></script>
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script> <script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
<!-- Application libraries-->
<script src="js/frameSheetModel.js"></script> <script src="js/frameSheetModel.js"></script>
<script src="js/drawingtools/BaseTool.js"></script> <script src="js/drawingtools/BaseTool.js"></script>
<script src="js/drawingtools/SimplePen.js"></script> <script src="js/drawingtools/SimplePen.js"></script>
<script src="js/drawingtools/Eraser.js"></script> <script src="js/drawingtools/Eraser.js"></script>
<script src="js/drawingtools/Stroke.js"></script>
<script src="js/drawingtools/PaintBucket.js"></script> <script src="js/drawingtools/PaintBucket.js"></script>
<script src="js/ToolSelector.js"></script> <script src="js/ToolSelector.js"></script>
<!-- Application controller and initialization -->
<script src="js/piskel.js"></script> <script src="js/piskel.js"></script>
</body> </body>
</html> </html>

3
js/ToolSelector.js
View file

@ -11,7 +11,8 @@ pskl.ToolSelector = (function() {
var toolInstances = { var toolInstances = {
"simplePen" : new pskl.drawingtools.SimplePen(), "simplePen" : new pskl.drawingtools.SimplePen(),
"eraser" : new pskl.drawingtools.Eraser(), "eraser" : new pskl.drawingtools.Eraser(),
"paintBucket" : new pskl.drawingtools.PaintBucket() "paintBucket" : new pskl.drawingtools.PaintBucket(),
"stroke" : new pskl.drawingtools.Stroke()
}; };
var currentSelectedTool = toolInstances.simplePen; var currentSelectedTool = toolInstances.simplePen;
var previousSelectedTool = toolInstances.simplePen; var previousSelectedTool = toolInstances.simplePen;

27
js/drawingtools/BaseTool.js
View file

@ -8,12 +8,13 @@
ns.BaseTool = function() {}; ns.BaseTool = function() {};
ns.BaseTool.prototype.applyToolOnFrameAt = function(col, row, frame, color) {}; ns.BaseTool.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {};
ns.BaseTool.prototype.applyToolOnCanvasAt = function(col, row, canvas, color, dpi) {}; ns.BaseTool.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {};
ns.BaseTool.prototype.releaseToolAt = function() {};
ns.BaseTool.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {};
// TODO: Remove that when we have the centralized redraw loop
ns.BaseTool.prototype.drawPixelInCanvas = function (col, row, canvas, color, dpi) { ns.BaseTool.prototype.drawPixelInCanvas = function (col, row, canvas, color, dpi) {
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
if(color == undefined || color == Constants.TRANSPARENT_COLOR) { if(color == undefined || color == Constants.TRANSPARENT_COLOR) {
@ -27,6 +28,7 @@
} }
}; };
// TODO: Remove that when we have the centralized redraw loop
ns.BaseTool.prototype.drawFrameInCanvas = function (frame, canvas, dpi) { ns.BaseTool.prototype.drawFrameInCanvas = function (frame, canvas, dpi) {
var color; var color;
for(var col = 0, num_col = frame.length; col < num_col; col++) { for(var col = 0, num_col = frame.length; col < num_col; col++) {
@ -36,4 +38,21 @@
} }
} }
}; };
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
// will help to visualize the tool interaction (without modifying the canvas).
ns.BaseTool.prototype.createCanvasOverlay = function (canvas) {
var overlayCanvas = document.createElement("canvas");
overlayCanvas.className = "canvas-overlay";
overlayCanvas.setAttribute("width", canvas.width);
overlayCanvas.setAttribute("height", canvas.height);
canvas.parentNode.appendChild(overlayCanvas);
return overlayCanvas;
};
ns.BaseTool.prototype.removeCanvasOverlays = function () {
$(".canvas-overlay").remove();
};
})(); })();

18
js/drawingtools/Eraser.js
View file

@ -16,23 +16,21 @@
/** /**
* @override * @override
*/ */
ns.Eraser.prototype.applyToolOnFrameAt = function(col, row, frame, color) { ns.Eraser.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
// Change model:
frame[col][row] = Constants.TRANSPARENT_COLOR; frame[col][row] = Constants.TRANSPARENT_COLOR;
};
/**
* @override
*/
ns.Eraser.prototype.applyToolOnCanvasAt = function(col, row, canvas, frame, color, dpi) {
// Draw on canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(col, row, canvas, Constants.TRANSPARENT_COLOR, dpi); this.drawPixelInCanvas(col, row, canvas, Constants.TRANSPARENT_COLOR, dpi);
}; };
/** /**
* @override * @override
*/ */
ns.Eraser.prototype.releaseToolAt = function() { ns.Eraser.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
// Do nothing this.applyToolAt(col, row, frame, color, canvas, dpi);
console.log('Eraser release');
}; };
})(); })();

59
js/drawingtools/PaintBucket.js
View file

@ -15,45 +15,38 @@
/** /**
* @override * @override
*/ */
ns.PaintBucket.prototype.applyToolOnFrameAt = function(col, row, frame, color) {}; ns.PaintBucket.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
/** // Change model:
* @override
*/
ns.PaintBucket.prototype.applyToolOnCanvasAt = function(col, row, canvas, frame, replacementColor, dpi) {
var targetColor = pskl.utils.normalizeColor(frame[col][row]); var targetColor = pskl.utils.normalizeColor(frame[col][row]);
//this.recursiveFloodFill(frame, col, row, targetColor, replacementColor); //this.recursiveFloodFill_(frame, col, row, targetColor, color);
this.queueLinearFloodFill(frame, col, row, targetColor, replacementColor); this.queueLinearFloodFill_(frame, col, row, targetColor, color);
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawFrameInCanvas(frame, canvas, dpi); this.drawFrameInCanvas(frame, canvas, dpi);
}; };
/**
* @override
*/
ns.PaintBucket.prototype.releaseToolAt = function() {
// Do nothing
console.log('PaintBucket release');
};
/** /**
* Flood-fill (node, target-color, replacement-color): * Flood-fill (node, target-color, replacement-color):
1. Set Q to the empty queue. * 1. Set Q to the empty queue.
2. If the color of node is not equal to target-color, return. * 2. If the color of node is not equal to target-color, return.
3. Add node to Q. * 3. Add node to Q.
4. For each element n of Q: * 4. For each element n of Q:
5. If the color of n is equal to target-color: * 5. If the color of n is equal to target-color:
6. Set w and e equal to n. * 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. * 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. * 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. * 9. Set the color of nodes between w and e to replacement-color.
10. For each node n between w and e: * 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. * 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. * 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. * 13. Continue looping until Q is exhausted.
14. Return. * 14. Return.
*
* @private
*/ */
ns.PaintBucket.prototype.queueLinearFloodFill = function(frame, col, row, targetColor, replacementColor) { ns.PaintBucket.prototype.queueLinearFloodFill_ = function(frame, col, row, targetColor, replacementColor) {
var queue = []; var queue = [];
var dy = [-1, 0, 1, 0]; var dy = [-1, 0, 1, 0];
@ -104,7 +97,7 @@
break; break;
} }
} }
} };
/** /**
* Basic Flood-fill implementation (Stack explosion !): * Basic Flood-fill implementation (Stack explosion !):
@ -119,7 +112,7 @@
* *
* @private * @private
*/ */
ns.PaintBucket.prototype.recursiveFloodFill = function(frame, col, row, targetColor, replacementColor) { ns.PaintBucket.prototype.recursiveFloodFill_ = function(frame, col, row, targetColor, replacementColor) {
// Step 1: // Step 1:
if( col < 0 || if( col < 0 ||

25
js/drawingtools/SimplePen.js
View file

@ -15,27 +15,20 @@
/** /**
* @override * @override
*/ */
ns.SimplePen.prototype.applyToolOnFrameAt = function(col, row, frame, color) { ns.SimplePen.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
// Change model:
var color = pskl.utils.normalizeColor(color); var color = pskl.utils.normalizeColor(color);
if (color != frame[col][row]) { if (color != frame[col][row]) {
frame[col][row] = color; frame[col][row] = color;
} }
// Draw on canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(col, row, canvas, color, dpi);
}; };
/** ns.SimplePen.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
* @override this.applyToolAt(col, row, frame, color, canvas, dpi);
*/
ns.SimplePen.prototype.applyToolOnCanvasAt = function(col, row, canvas, frame, color, dpi) {
this.drawPixelInCanvas(col, row, canvas, color, dpi);
}; };
/**
* @override
*/
ns.SimplePen.prototype.releaseToolAt = function() {
// Do nothing
console.log('SimplePen release');
};
})(); })();

128
js/drawingtools/Stroke.js Normal file
View file

@ -0,0 +1,128 @@
/*
* @provide pskl.drawingtools.SimplePen
*
* @require pskl.utils
*/
(function() {
var ns = $.namespace("pskl.drawingtools");
ns.Stroke = function() {
this.toolId = "tool-stroke"
// Stroke's first point coordinates (set in applyToolAt)
this.startCol = null;
this.startRow = null;
// Stroke's second point coordinates (changing dynamically in moveToolAt)
this.endCol = null;
this.endRow = null;
this.canvasOverlay = null;
};
pskl.utils.inherit(ns.Stroke, ns.BaseTool);
/**
* @override
*/
ns.Stroke.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
this.startCol = col;
this.startRow = row;
// When drawing a stroke we don't change the model instantly, since the
// user can move his cursor to change the stroke direction and length
// dynamically. Instead we draw the (preview) stroke in a fake canvas that
// overlay the drawing canvas.
// We wait for the releaseToolAt callback to impact both the
// frame model and canvas rendering.
// The fake canvas where we will draw the preview of the stroke:
this.canvasOverlay = this.createCanvasOverlay(canvas);
// Drawing the first point of the stroke in the fake overlay canvas:
this.drawPixelInCanvas(col, row, this.canvasOverlay, color, dpi);
};
ns.Stroke.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
// When the user moussemove (before releasing), we dynamically compute the
// pixel to draw the line and draw this line in the overlay canvas:
var strokePoints = this.getLinePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
// Clean overlay canvas:
this.canvasOverlay.getContext("2d").clearRect(
0, 0, this.canvasOverlay.width, this.canvasOverlay.height);
// Drawing current stroke:
for(var i = 0; i< strokePoints.length; i++) {
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
}
};
/**
* @override
*/
ns.Stroke.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
// If the stroke tool is released outside of the canvas, we cancel the stroke:
if(col < 0 || row < 0 || col > frame.length || row > frame[0].length) {
this.removeCanvasOverlays();
return;
}
// The user released the tool to draw a line. We will compute the pixel coordinate, impact
// the model and draw them in the drawing canvas (not the fake overlay anymore)
var strokePoints = this.getLinePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
for(var i = 0; i< strokePoints.length; i++) {
// Change model:
frame[strokePoints[i].col][strokePoints[i].row] = color;
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, canvas, color, dpi);
}
// For now, we are done with the stroke tool and don't need an overlay anymore:
this.removeCanvasOverlays();
};
/**
* Bresenham line algorihtm: Get an array of pixels from
* start and end coordinates.
*
* http://en.wikipedia.org/wiki/Bresenham's_line_algorithm
* http://stackoverflow.com/questions/4672279/bresenham-algorithm-in-javascript
*
* @private
*/
ns.Stroke.prototype.getLinePixels_ = function(x0, x1, y0, y1) {
var pixels = [];
var dx = Math.abs(x1-x0);
var dy = Math.abs(y1-y0);
var sx = (x0 < x1) ? 1 : -1;
var sy = (y0 < y1) ? 1 : -1;
var err = dx-dy;
while(true){
// Do what you need to for this
pixels.push({"col": x0, "row": y0});
if ((x0==x1) && (y0==y1)) break;
var e2 = 2*err;
if (e2>-dy){
err -= dy;
x0 += sx;
}
if (e2 < dx) {
err += dx;
y0 += sy;
}
}
return pixels;
};
})();

46
js/piskel.js
View file

@ -204,7 +204,8 @@ $.namespace("pskl");
addColorToPalette : function (color) { addColorToPalette : function (color) {
if (color && color != Constants.TRANSPARENT_COLOR && paletteColors.indexOf(color) == -1) { if (color && color != Constants.TRANSPARENT_COLOR && paletteColors.indexOf(color) == -1) {
var colorEl = document.createElement("li"); var colorEl = document.createElement("li");
colorEl.className = "palette-color";
colorEl.setAttribute("data-color", color); colorEl.setAttribute("data-color", color);
colorEl.setAttribute("title", color); colorEl.setAttribute("title", color);
colorEl.style.background = color; colorEl.style.background = color;
@ -379,11 +380,14 @@ $.namespace("pskl");
$.publish(Events.CANVAS_RIGHT_CLICKED); $.publish(Events.CANVAS_RIGHT_CLICKED);
} }
var spriteCoordinate = this.getSpriteCoordinate(event); var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.applyToolOnFrameAt( currentToolBehavior.applyToolAt(
spriteCoordinate.col, spriteCoordinate.row, currentFrame, penColor); spriteCoordinate.col,
currentToolBehavior.applyToolOnCanvasAt( spriteCoordinate.row,
spriteCoordinate.col, spriteCoordinate.row, drawingAreaCanvas, currentFrame, penColor, drawingCanvasDpi); currentFrame,
penColor,
drawingAreaCanvas,
drawingCanvasDpi);
piskel.persistToLocalStorageRequest(); piskel.persistToLocalStorageRequest();
}, },
@ -391,12 +395,18 @@ $.namespace("pskl");
//this.updateCursorInfo(event); //this.updateCursorInfo(event);
if (isClicked) { if (isClicked) {
var spriteCoordinate = this.getSpriteCoordinate(event) var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.applyToolOnFrameAt( currentToolBehavior.moveToolAt(
spriteCoordinate.col, spriteCoordinate.row, currentFrame, penColor); spriteCoordinate.col,
currentToolBehavior.applyToolOnCanvasAt( spriteCoordinate.row,
spriteCoordinate.col, spriteCoordinate.row, drawingAreaCanvas, currentFrame, penColor, drawingCanvasDpi); currentFrame,
penColor,
drawingAreaCanvas,
drawingCanvasDpi);
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
// Eg when drawing, it may make sense to have it here. However for a non drawing tool,
// you don't need to draw anything when mousemoving and you request useless localStorage.
piskel.persistToLocalStorageRequest(); piskel.persistToLocalStorageRequest();
} }
}, },
@ -407,15 +417,23 @@ $.namespace("pskl");
// the user was probably drawing on the canvas. // the user was probably drawing on the canvas.
// Note: The mousemove movement (and the mouseup) may end up outside // Note: The mousemove movement (and the mouseup) may end up outside
// of the drawing canvas. // of the drawing canvas.
// TODO: Remove that when we have the centralized redraw loop
this.createPreviews(); this.createPreviews();
} }
if(isRightClicked) { if(isRightClicked) {
$.publish(Events.CANVAS_RIGHT_CLICK_RELEASED); $.publish(Events.CANVAS_RIGHT_CLICK_RELEASED);
} }
isClicked = false; isClicked = false;
isRightClicked = false; isRightClicked = false;
var spriteCoordinate = this.getSpriteCoordinate(event) var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.releaseToolAt(spriteCoordinate.col, spriteCoordinate.row, penColor); currentToolBehavior.releaseToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
currentFrame,
penColor,
drawingAreaCanvas,
drawingCanvasDpi);
}, },
// TODO(vincz/julz): Refactor to make this disappear in a big event-driven redraw loop // TODO(vincz/julz): Refactor to make this disappear in a big event-driven redraw loop