From 69a03a34169b740d0b950fc05b46b6352a30587d Mon Sep 17 00:00:00 2001 From: juliandescottes Date: Tue, 4 Sep 2012 22:18:00 +0200 Subject: [PATCH] Previews are fixed. Removed drawing methods from piskel .js --- index.html | 4 +- js/FrameSheetModel.js | 8 +++- js/drawingtools/Eraser.js | 4 +- js/drawingtools/PaintBucket.js | 2 +- js/drawingtools/Rectangle.js | 2 +- js/drawingtools/SimplePen.js | 14 ++++--- js/drawingtools/Stroke.js | 2 +- js/piskel.js | 76 +++++++++++++--------------------- js/rendering/Frame.js | 2 +- 9 files changed, 49 insertions(+), 65 deletions(-) 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; };