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

Moved drawing logic outside of tools. Previews and animations are broken. Performance is somehow degraded

Browse Source
This commit is contained in:
juliandescottes
2012-09-04 14:10:16 +02:00
parent 561c35c882
commit 4c4faa88e6
13 changed files with 249 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
js/drawingtools/BaseTool.js
View File

@@ -8,55 +8,11 @@
ns.BaseTool = function() {};
ns.BaseTool.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {};
ns.BaseTool.prototype.applyToolAt = function(col, row, frame) {};
ns.BaseTool.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {};
ns.BaseTool.prototype.moveToolAt = function(col, row, frame) {};
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) {
var context = canvas.getContext('2d');
if(color == undefined || color == Constants.TRANSPARENT_COLOR) {
context.clearRect(col * dpi, row * dpi, dpi, dpi);
}
else {
if(color != Constants.SELECTION_TRANSPARENT_COLOR) {
// TODO(vincz): Found a better design to update the palette, it's called too frequently.
$.publish(Events.COLOR_USED, [color]);
}
context.fillStyle = color;
context.fillRect(col * dpi, row * dpi, dpi, dpi);
}
};
// TODO: Remove that when we have the centralized redraw loop
ns.BaseTool.prototype.drawFrameInCanvas = function (frame, canvas, dpi) {
var color;
for(var col = 0, num_col = frame.length; col < num_col; col++) {
for(var row = 0, num_row = frame[col].length; row < num_row; row++) {
color = frame[col][row];
this.drawPixelInCanvas(col, row,canvas, color, dpi);
}
}
};
// 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();
};
ns.BaseTool.prototype.releaseToolAt = function(col, row, frame) {};
/**
* Bresenham line algorihtm: Get an array of pixels from

4
js/drawingtools/Eraser.js
View File

@@ -16,7 +16,7 @@
/**
* @override
*/
ns.Eraser.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
this.superclass.applyToolAt.call(this, col, row, frame, Constants.TRANSPARENT_COLOR, canvas, dpi);
ns.Eraser.prototype.applyToolAt = function(col, row, frame) {
this.superclass.applyToolAt.call(this, col, row, frame, Constants.TRANSPARENT_COLOR);
};
})();

26
js/drawingtools/PaintBucket.js
View File

@@ -15,16 +15,16 @@
/**
* @override
*/
ns.PaintBucket.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
ns.PaintBucket.prototype.applyToolAt = function(col, row, color, drawer) {
// Change model:
var targetColor = frame[col][row];
var targetColor = drawer.frame.getPixel(col, row);
//this.recursiveFloodFill_(frame, col, row, targetColor, color);
this.queueLinearFloodFill_(frame, col, row, targetColor, color);
this.queueLinearFloodFill_(drawer.frame, col, row, targetColor, color);
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawFrameInCanvas(frame, canvas, dpi);
drawer.renderFrame();
};
/**
@@ -53,37 +53,27 @@
var dx = [0, 1, 0, -1];
try {
if(frame[col][row] == replacementColor) {
if(frame.getPixel(col, row) == replacementColor) {
return;
}
} catch(e) {
// Frame out of bound exception.
}
var isInFrameBound = function(frame_, col_, row_) {
if( col_ < 0 ||
col_ >= frame_.length ||
row_ < 0 ||
row_ >= frame_[0].length) {
return false;
}
return true;
}
queue.push({"col": col, "row": row});
var loopCount = 0;
var cellCount = frame.length * frame[0].length;
var cellCount = frame.getWidth() * frame.getHeight();
while(queue.length > 0) {
loopCount ++;
var currentItem = queue.pop();
frame[currentItem.col][currentItem.row] = replacementColor;
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 (isInFrameBound(frame, nextCol, nextRow) && frame[nextCol][nextRow] == targetColor) {
if (frame.isInFrame(nextCol, nextRow) && frame.getPixel(nextCol, nextRow) == targetColor) {
queue.push({"col": nextCol, "row": nextRow });
}
} catch(e) {

63
js/drawingtools/Rectangle.js
View File

@@ -12,11 +12,6 @@
// Rectangle's first point coordinates (set in applyToolAt)
this.startCol = null;
this.startRow = null;
// Rectangle's second point coordinates (changing dynamically in moveToolAt)
this.endCol = null;
this.endRow = null;
this.canvasOverlay = null;
};
pskl.utils.inherit(ns.Rectangle, ns.BaseTool);
@@ -24,26 +19,22 @@
/**
* @override
*/
ns.Rectangle.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
ns.Rectangle.prototype.applyToolAt = function(col, row, color, drawer) {
this.startCol = col;
this.startRow = row;
// The fake canvas where we will draw the preview of the rectangle:
this.canvasOverlay = this.createCanvasOverlay(canvas);
// Drawing the first point of the rectangle in the fake overlay canvas:
this.drawPixelInCanvas(col, row, this.canvasOverlay, color, dpi);
drawer.overlay.setPixel(col, row, color);
drawer.renderOverlay();
};
ns.Rectangle.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.getRectanglePixels_(this.startCol, this.endCol, this.startRow, this.endRow);
ns.Rectangle.prototype.moveToolAt = function(col, row, color, drawer) {
// Clean overlay canvas:
this.canvasOverlay.getContext("2d").clearRect(
0, 0, this.canvasOverlay.width, this.canvasOverlay.height);
drawer.clearOverlay();
// When the user moussemove (before releasing), we dynamically compute the
// pixel to draw the line and draw this line in the overlay :
var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
// Drawing current stroke:
for(var i = 0; i< strokePoints.length; i++) {
@@ -51,39 +42,29 @@
if(color == Constants.TRANSPARENT_COLOR) {
color = Constants.SELECTION_TRANSPARENT_COLOR;
}
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
drawer.overlay.setPixel(strokePoints[i].col, strokePoints[i].row, color);
}
drawer.renderOverlay();
};
/**
* @override
*/
ns.Rectangle.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
ns.Rectangle.prototype.releaseToolAt = function(col, row, color, drawer) {
// If the stroke tool is released outside of the canvas, we cancel the stroke:
// TODO: Mutualize this check in common method
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.getRectanglePixels_(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;
if(drawer.frame.isInFrame(col, row)) {
var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
for(var i = 0; i< strokePoints.length; i++) {
// Change model:
drawer.frame.setPixel(strokePoints[i].col, strokePoints[i].row, color);
}
// 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)
// Draw in canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, canvas, color, dpi);
drawer.renderFrame();
}
// For now, we are done with the stroke tool and don't need an overlay anymore:
this.removeCanvasOverlays();
drawer.clearOverlay();
};
/**

17
js/drawingtools/SimplePen.js
View File

@@ -7,7 +7,7 @@
var ns = $.namespace("pskl.drawingtools");
ns.SimplePen = function() {
this.toolId = "tool-pen"
this.toolId = "tool-pen";
};
this.previousCol = null;
@@ -18,20 +18,17 @@
/**
* @override
*/
ns.SimplePen.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
ns.SimplePen.prototype.applyToolAt = function(col, row, color, drawer) {
this.previousCol = col;
this.previousRow = row;
if (color != frame[col][row]) {
frame[col][row] = color;
}
drawer.frame.setPixel(col, row, color);
// Draw on canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(col, row, canvas, color, dpi);
drawer.renderFramePixel(col, row);
};
ns.SimplePen.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
ns.SimplePen.prototype.moveToolAt = function(col, row, color, drawer) {
if((Math.abs(col - this.previousCol) > 1) || (Math.abs(row - this.previousRow) > 1)) {
// The pen movement is too fast for the mousemove frequency, there is a gap between the
@@ -39,11 +36,11 @@
// We fill the gap by calculating missing dots (simple linear interpolation) and draw them.
var interpolatedPixels = this.getLinePixels_(col, this.previousCol, row, this.previousRow);
for(var i=0, l=interpolatedPixels.length; i<l; i++) {
this.applyToolAt(interpolatedPixels[i].col, interpolatedPixels[i].row, frame, color, canvas, dpi);
this.applyToolAt(interpolatedPixels[i].col, interpolatedPixels[i].row, color, drawer);
}
}
else {
this.applyToolAt(col, row, frame, color, canvas, dpi);
this.applyToolAt(col, row, color, drawer);
}
this.previousCol = col;

51
js/drawingtools/Stroke.js
View File

@@ -12,9 +12,6 @@
// 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;
};
@@ -24,7 +21,7 @@
/**
* @override
*/
ns.Stroke.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
ns.Stroke.prototype.applyToolAt = function(col, row, color, drawer) {
this.startCol = col;
this.startRow = row;
@@ -36,17 +33,15 @@
// 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);
drawer.updateOverlay(col, row, color);
drawer.renderOverlay();
};
ns.Stroke.prototype.moveToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
ns.Stroke.prototype.moveToolAt = function(col, row, color, drawer) {
// 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);
var strokePoints = this.getLinePixels_(this.startCol, col, this.startRow, row);
// Clean overlay canvas:
this.canvasOverlay.getContext("2d").clearRect(
@@ -64,39 +59,29 @@
// eg deleting the equivalent of a stroke.
color = Constants.SELECTION_TRANSPARENT_COLOR;
}
this.drawPixelInCanvas(strokePoints[i].col, strokePoints[i].row, this.canvasOverlay, color, dpi);
drawer.updateOverlay(strokePoints[i].col, strokePoints[i].row, color);
}
};
/**
* @override
*/
ns.Stroke.prototype.releaseToolAt = function(col, row, frame, color, canvas, dpi) {
this.endCol = col;
this.endRow = row;
ns.Stroke.prototype.releaseToolAt = function(col, row, color, drawer) {
// If the stroke tool is released outside of the canvas, we cancel the stroke:
// TODO: Mutualize this check in common method
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;
if(drawer.frame.isInFrame(col, row)) {
// 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, col, this.startRow, row);
for(var i = 0; i< strokePoints.length; i++) {
// Change model:
drawer.updateFrame(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);
}
drawer.renderFrame();
}
// For now, we are done with the stroke tool and don't need an overlay anymore:
this.removeCanvasOverlays();
drawer.clearOverlay();
};
})();