diff --git a/index.html b/index.html
index f4cca82f..e767f32d 100644
--- a/index.html
+++ b/index.html
@@ -18,9 +18,7 @@
-
+
diff --git a/js/FrameSheetModel.js b/js/FrameSheetModel.js
index 920d7445..7be8bc1b 100644
--- a/js/FrameSheetModel.js
+++ b/js/FrameSheetModel.js
@@ -55,8 +55,12 @@ pskl.FrameSheetModel = (function() {
}
},
- addEmptyFrame: function() {
- frames.push(pskl.rendering.Frame.createEmpty(width, height));
+ addEmptyFrame : function () {
+ this.addFrame(pskl.rendering.Frame.createEmpty(width, height));
+ },
+
+ addFrame: function(frame) {
+ frames.push(frame);
},
getFrameCount: function() {
diff --git a/js/drawingtools/Eraser.js b/js/drawingtools/Eraser.js
index 8f6cd74b..e83cf617 100644
--- a/js/drawingtools/Eraser.js
+++ b/js/drawingtools/Eraser.js
@@ -16,7 +16,7 @@
/**
* @override
*/
- ns.Eraser.prototype.applyToolAt = function(col, row, frame) {
- this.superclass.applyToolAt.call(this, col, row, frame, Constants.TRANSPARENT_COLOR);
+ ns.Eraser.prototype.applyToolAt = function(col, row, color, drawer) {
+ this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, drawer);
};
})();
\ No newline at end of file
diff --git a/js/drawingtools/PaintBucket.js b/js/drawingtools/PaintBucket.js
index 123dd90c..a4523bd7 100644
--- a/js/drawingtools/PaintBucket.js
+++ b/js/drawingtools/PaintBucket.js
@@ -73,7 +73,7 @@
var nextCol = currentItem.col + dx[i]
var nextRow = currentItem.row + dy[i]
try {
- if (frame.isInFrame(nextCol, nextRow) && frame.getPixel(nextCol, nextRow) == targetColor) {
+ if (frame.containsPixel(nextCol, nextRow) && frame.getPixel(nextCol, nextRow) == targetColor) {
queue.push({"col": nextCol, "row": nextRow });
}
} catch(e) {
diff --git a/js/drawingtools/Rectangle.js b/js/drawingtools/Rectangle.js
index 85dce1ac..87709026 100644
--- a/js/drawingtools/Rectangle.js
+++ b/js/drawingtools/Rectangle.js
@@ -52,7 +52,7 @@
*/
ns.Rectangle.prototype.releaseToolAt = function(col, row, color, drawer) {
// If the stroke tool is released outside of the canvas, we cancel the stroke:
- if(drawer.frame.isInFrame(col, row)) {
+ if(drawer.frame.containsPixel(col, row)) {
var strokePoints = this.getRectanglePixels_(this.startCol, col, this.startRow, row);
for(var i = 0; i< strokePoints.length; i++) {
// Change model:
diff --git a/js/drawingtools/SimplePen.js b/js/drawingtools/SimplePen.js
index ec5d5485..39a27363 100644
--- a/js/drawingtools/SimplePen.js
+++ b/js/drawingtools/SimplePen.js
@@ -19,13 +19,15 @@
* @override
*/
ns.SimplePen.prototype.applyToolAt = function(col, row, color, drawer) {
- this.previousCol = col;
- this.previousRow = row;
- drawer.frame.setPixel(col, row, color);
+ if (drawer.frame.containsPixel(col, row)) {
+ this.previousCol = col;
+ this.previousRow = row;
+ drawer.frame.setPixel(col, row, color);
- // Draw on canvas:
- // TODO: Remove that when we have the centralized redraw loop
- drawer.renderFramePixel(col, row);
+ // Draw on canvas:
+ // TODO: Remove that when we have the centralized redraw loop
+ drawer.renderFramePixel(col, row);
+ }
};
ns.SimplePen.prototype.moveToolAt = function(col, row, color, drawer) {
diff --git a/js/drawingtools/Stroke.js b/js/drawingtools/Stroke.js
index 48fff20a..d2e50853 100644
--- a/js/drawingtools/Stroke.js
+++ b/js/drawingtools/Stroke.js
@@ -69,7 +69,7 @@
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(drawer.frame.isInFrame(col, row)) {
+ if(drawer.frame.containsPixel(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);
diff --git a/js/piskel.js b/js/piskel.js
index 80a6c1eb..360baadf 100644
--- a/js/piskel.js
+++ b/js/piskel.js
@@ -9,7 +9,7 @@ $.namespace("pskl");
/**
* FrameSheetModel instance.
*/
- var frameSheet,
+ var frameSheet, renderer = null,
// Temporary zoom implementation to easily get bigger canvases to
// see how good perform critical algorithms on big canvas.
@@ -50,8 +50,18 @@ $.namespace("pskl");
var piskel = {
init : function () {
+ var emptyFrame = pskl.rendering.Frame.createEmpty(framePixelWidth, framePixelHeight);
+
+ this.drawingController = new pskl.rendering.DrawingController(
+ emptyFrame,
+ $('#drawing-canvas-container')[0],
+ drawingCanvasDpi
+ );
+
+ renderer = new pskl.rendering.FrameRenderer();
+
frameSheet = pskl.FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
- frameSheet.addEmptyFrame();
+ frameSheet.addFrame(emptyFrame);
this.setActiveFrame(0);
pskl.NotificationService.init();
@@ -89,13 +99,6 @@ $.namespace("pskl");
this.initPreviewSlideshow();
this.initAnimationPreview();
this.startAnimation();
-
- var frame = frameSheet.getFrameByIndex(this.getActiveFrameIndex());
- this.drawer = new pskl.rendering.DrawingController(
- frame,
- $('#drawing-canvas-container')[0],
- drawingCanvasDpi
- );
pskl.ToolSelector.init();
pskl.Palette.init(frameSheet);
@@ -134,7 +137,7 @@ $.namespace("pskl");
setActiveFrame: function(index) {
activeFrameIndex = index;
- currentFrame = frameSheet.getFrameByIndex(activeFrameIndex)
+ this.drawingController.frame = frameSheet.getFrameByIndex(index);
},
setActiveFrameAndRedraw: function(index) {
@@ -144,7 +147,7 @@ $.namespace("pskl");
// trigger an event instead:
// Update drawing canvas:
- this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
+ this.drawingController.renderFrame();
// Update slideshow:
this.createPreviews();
// Update animation preview:
@@ -160,13 +163,12 @@ $.namespace("pskl");
initDrawingArea : function() {
drawingAreaContainer = $('#drawing-canvas-container')[0];
- var body = document.getElementsByTagName('body')[0];
- body.setAttribute('onmouseup', 'piskel.onDocumentBodyMouseup(event)');
+ document.body.addEventListener('mouseup', this.onMouseup.bind(this));
+ drawingAreaContainer.addEventListener('mousedown', this.onMousedown.bind(this));
+ drawingAreaContainer.addEventListener('mousemove', this.onMousemove.bind(this));
drawingAreaContainer.style.width = framePixelWidth * drawingCanvasDpi + "px";
drawingAreaContainer.style.height = framePixelHeight * drawingCanvasDpi + "px";
- drawingAreaContainer.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(event)');
- drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(event)');
- drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(event)');
+ drawingAreaContainer.addEventListener('contextmenu', this.onCanvasContextMenu);
},
initPreviewSlideshow: function() {
@@ -208,6 +210,7 @@ $.namespace("pskl");
},
createPreviews : function () {
+ console.log("createPreviews");
var container = $('#preview-list')[0], previewTile;
container.innerHTML = "";
for (var i = 0, l = frameSheet.getFrameCount(); i < l ; i++) {
@@ -239,11 +242,10 @@ $.namespace("pskl");
canvasPreview.setAttribute('width', framePixelWidth * previewTileCanvasDpi);
canvasPreview.setAttribute('height', framePixelHeight * previewTileCanvasDpi);
-
+
previewTileRoot.addEventListener('click', function(evt) {
// has not class tile-action:
- // TODO: let me know when you want to start using a framework :)
- if(!evt.target.className.match(new RegExp('(\\s|^)'+ 'tile-action' +'(\\s|$)'))) {
+ if(!evt.target.classList.contains('tile-action')) {
piskel.setActiveFrameAndRedraw(tileNumber);
}
});
@@ -256,7 +258,7 @@ $.namespace("pskl");
piskel.duplicateFrame(tileNumber);
});
- this.drawFrameToCanvas(frameSheet.getFrameByIndex(tileNumber), canvasPreview, previewTileCanvasDpi);
+ renderer.render(frameSheet.getFrameByIndex(tileNumber), canvasPreview, previewTileCanvasDpi);
canvasContainer.appendChild(canvasPreview);
previewTileRoot.appendChild(canvasContainer);
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
@@ -275,7 +277,7 @@ $.namespace("pskl");
},
refreshAnimatedPreview : function () {
- piskel.drawFrameToCanvas(frameSheet.getFrameByIndex(animIndex), previewCanvas, previewAnimationCanvasDpi);
+ renderer.render(frameSheet.getFrameByIndex(animIndex), previewCanvas, previewAnimationCanvasDpi);
animIndex++;
if (animIndex == frameSheet.getFrameCount()) {
animIndex = 0;
@@ -294,7 +296,7 @@ $.namespace("pskl");
this.setActiveFrameAndRedraw(frameIndex + 1);
},
- onCanvasMousedown : function (event) {
+ onMousedown : function (event) {
isClicked = true;
if(event.button == 2) { // right click
@@ -306,13 +308,13 @@ $.namespace("pskl");
spriteCoordinate.col,
spriteCoordinate.row,
penColor,
- this.drawer
+ this.drawingController
);
$.publish(Events.LOCALSTORAGE_REQUEST);
},
- onCanvasMousemove : function (event) {
+ onMousemove : function (event) {
var currentTime = new Date().getTime();
// Throttling of the mousemove event:
if ((currentTime - previousMousemoveTime) > 40 ) {
@@ -322,7 +324,7 @@ $.namespace("pskl");
spriteCoordinate.col,
spriteCoordinate.row,
penColor,
- this.drawer
+ this.drawingController
);
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
@@ -334,7 +336,7 @@ $.namespace("pskl");
}
},
- onDocumentBodyMouseup : function (event) {
+ onMouseup : function (event) {
if(isClicked || isRightClicked) {
// A mouse button was clicked on the drawing canvas before this mouseup event,
// the user was probably drawing on the canvas.
@@ -358,28 +360,6 @@ $.namespace("pskl");
);
},
- // TODO(vincz/julz): Refactor to make this disappear in a big event-driven redraw loop
- drawFrameToCanvas: function(frame, canvasElement, 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(row, col, color, canvasElement, dpi);
- }
- }
- },
-
- // TODO(vincz/julz): Refactor to make this disappear in a big event-driven redraw loop
- drawPixelInCanvas : function (row, col, color, canvas, dpi) {
- var context = canvas.getContext('2d');
- if(color == undefined || color == Constants.TRANSPARENT_COLOR) {
- context.clearRect(col * dpi, row * dpi, dpi, dpi);
- } else {
- context.fillStyle = color;
- context.fillRect(col * dpi, row * dpi, dpi, dpi);
- }
- },
-
onCanvasContextMenu : function (event) {
event.preventDefault();
event.stopPropagation();
diff --git a/js/rendering/Frame.js b/js/rendering/Frame.js
index 93d90c27..b890b53b 100644
--- a/js/rendering/Frame.js
+++ b/js/rendering/Frame.js
@@ -46,7 +46,7 @@
return this.pixels[0].length;
};
- ns.Frame.prototype.isInFrame = function (col, row) {
+ ns.Frame.prototype.containsPixel = function (col, row) {
return col >= 0 && row >= 0 && col <= this.pixels.length && row <= this.pixels[0].length;
};