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 pull request #27 from juliandescottes/extract-rendering

Browse Source 
Extract rendering
This commit is contained in:
Julian Descottes 2012-09-04 22:30:42 -07:00
commit 3b70ce1c17
17 changed files with 535 additions and 522 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/style.css
View File

@ -107,6 +107,13 @@
z-index: 1;
}
.drawing-canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.canvas-overlay {
position: absolute;
top: 0;

8
index.html
View File

@ -19,7 +19,6 @@
<!-- Tool section: -->
<div id="tools-container" class="tools-container">
<ul class="tools-group">
<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>
@ -86,7 +85,12 @@
<script src="js/lib/jsColor_1_4_0/jscolor.js"></script>
<!-- Application libraries-->
<script src="js/FrameSheetModel.js"></script>
<script src="js/model/Frame.js"></script>
<script src="js/model/FrameSheet.js"></script>
<script src="js/controller/DrawingController.js"></script>
<script src="js/controller/PreviewFilmController.js"></script>
<script src="js/controller/AnimatedPreviewController.js"></script>
<script src="js/rendering/FrameRenderer.js"></script>
<script src="js/LocalStorageService.js"></script>
<script src="js/Palette.js"></script>
<script src="js/Notification.js"></script>

142
js/FrameSheetModel.js
View File

@ -1,142 +0,0 @@
$.namespace("pskl");
pskl.FrameSheetModel = (function() {
var inst;
var frames = [];
var width;
var height;
/**
* Create empty frame of dimension [width * height] with Constants.TRANSPARENT_COLOR
* as a default value.
*
* @private
*/
var createEmptyFrame_ = function() {
var emptyFrame = []; //new Array(width);
for (var columnIndex=0; columnIndex < width; columnIndex++) {
var columnArray = [];
for(var heightIndex = 0; heightIndex < height; heightIndex++) {
columnArray.push(Constants.TRANSPARENT_COLOR);
}
emptyFrame[columnIndex] = columnArray;
}
return emptyFrame;
};
/**
* @private
*/
var requestLocalStorageSave_ = function() {
};
return {
validate: function() {
return true; // I'm always right dude
},
getAllPixels : function () {
var pixels = [];
for (var i = 0 ; i < frames.length ; i++) {
pixels = pixels.concat(this._getFramePixels(frames[i]));
}
return pixels;
},
_getFramePixels : function (frame) {
var pixels = [];
for (var i = 0 ; i < frame.length ; i++) {
var line = frame[i];
for (var j = 0 ; j < line.length ; j++) {
pixels.push(line[j]);
}
}
return pixels;
},
getUsedColors: function() {
var colors = {};
for (var frameIndex=0; frameIndex < frames.length; frameIndex++) {
var currentFrame = frames[frameIndex];
for (var i = 0 ; i < currentFrame.length ; i++) {
var line = currentFrame[i];
for (var j = 0 ; j < line.length ; j++) {
colors[line[j]] = line[j];
}
}
}
return colors;
},
// Could be used to pass around model using long GET param (good enough for simple models) and
// do some temporary locastorage
serialize: function() {
return JSON.stringify(frames);
},
/**
* Load a framesheet from a string that might have been persisted in db / localstorage
* Overrides existing frames.
* @param {String} serialized
*/
deserialize : function (serialized) {
try {
frames = JSON.parse(serialized);
$.publish(Events.FRAMESHEET_RESET);
} catch (e) {
throw "Could not load serialized framesheet." + e.message
}
},
addEmptyFrame: function() {
frames.push(createEmptyFrame_());
},
getFrameCount: function() {
return frames.length;
},
getFrameByIndex: function(index) {
if (isNaN(index)) {
throw "Bad argument value for getFrameByIndex method: <" + index + ">"
} else if (index < 0 || index > frames.length) {
throw "Out of bound index for frameSheet object."
}
return frames[index];
},
removeFrameByIndex: function(index) {
if(index < 0 || index > inst.getFrameCount()) {
throw "Bad index value for removeFrameByIndex.";
}
frames.splice(index, 1);
},
duplicateFrameByIndex: function(frameToDuplicateIndex) {
var frame = inst.getFrameByIndex(frameToDuplicateIndex);
var clonedFrame = [];
for(var i=0, l=frame.length; i<l; i++) {
clonedFrame.push(frame[i].slice(0));
}
frames.splice(frameToDuplicateIndex + 1, 0, clonedFrame);
},
getInstance: function(width_, height_) {
if (isNaN(width_) || isNaN(height_)) {
throw "Bad FrameSheetModel initialization in getInstance method.";
}
inst = this;
width = width_;
height = height_;
return inst;
}
}
})();

63
js/controller/AnimatedPreviewController.js Normal file
View File

@ -0,0 +1,63 @@
(function () {
var ns = $.namespace("pskl.controller");
ns.AnimatedPreviewController = function (framesheet, container, dpi) {
this.dpi = dpi;
this.framesheet = framesheet;
this.container = container;
this.animIndex = 0;
this.fps = parseInt($("#preview-fps")[0].value, 10);
this.renderer = new pskl.rendering.FrameRenderer();
};
ns.AnimatedPreviewController.prototype.init = function () {
this.initDom();
this.startAnimationTimer();
};
ns.AnimatedPreviewController.prototype.initDom = function () {
var frame = this.framesheet.getFrameByIndex(0);
var height = frame.getHeight() * this.dpi,
width = frame.getWidth() * this.dpi;
previewCanvas = document.createElement('canvas');
previewCanvas.className = 'canvas';
this.container.setAttribute('style', 'width:' + width + 'px; height:' + height + 'px;');
previewCanvas.setAttribute('width', width);
previewCanvas.setAttribute('height', height);
this.container.appendChild(previewCanvas);
this.previewCanvas = previewCanvas;
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
};
ns.AnimatedPreviewController.prototype.startAnimationTimer = function () {
this.stopAnimationTimer();
this.animationTimer = window.setTimeout(this.refreshAnimatedPreview.bind(this), 1000/this.fps);
};
ns.AnimatedPreviewController.prototype.stopAnimationTimer = function () {
if (this.animationTimer) {
window.clearInterval(this.animationTimer);
this.animationTimer = null;
}
};
ns.AnimatedPreviewController.prototype.onFPSSliderChange = function(evt) {
this.fps = parseInt($("#preview-fps")[0].value, 10);
};
ns.AnimatedPreviewController.prototype.refreshAnimatedPreview = function () {
if (!this.framesheet.hasFrameAtIndex(this.animIndex)) {
this.animIndex = 0;
}
this.renderer.render(this.framesheet.getFrameByIndex(this.animIndex), this.previewCanvas, this.dpi);
this.animIndex++;
this.startAnimationTimer();
};
})();

64
js/controller/DrawingController.js Normal file
View File

@ -0,0 +1,64 @@
(function () {
var ns = $.namespace("pskl.controller");
ns.DrawingController = function (frame, container, dpi) {
this.dpi = dpi;
// Public
this.frame = frame;
this.overlay = pskl.model.Frame.createEmptyFromFrame(frame);
// Private
this.container = container;
this.mainCanvas = this.createMainCanvas();
this.overlayCanvas = this.createOverlayCanvas();
this.renderer = new pskl.rendering.FrameRenderer();
};
ns.DrawingController.prototype.renderFrame = function () {
this.renderer.render(this.frame, this.mainCanvas, this.dpi);
};
ns.DrawingController.prototype.renderFramePixel = function (col, row) {
this.renderer.drawPixel(col, row, this.frame, this.mainCanvas, this.dpi);
};
ns.DrawingController.prototype.renderOverlay = function () {
this.renderer.render(this.overlay, this.overlayCanvas, this.dpi);
};
ns.DrawingController.prototype.clearOverlay = function () {
this.overlay = pskl.model.Frame.createEmptyFromFrame(this.frame);
this.overlayCanvas.getContext("2d").clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
};
ns.DrawingController.prototype.createMainCanvas = function () {
var mainCanvas = this.createCanvas();
mainCanvas.className = "drawing-canvas";
this.container.appendChild(mainCanvas);
return mainCanvas;
};
// 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.DrawingController.prototype.createOverlayCanvas = function () {
var overlayCanvas = this.createCanvas();
overlayCanvas.className = "canvas-overlay";
this.container.appendChild(overlayCanvas);
return overlayCanvas;
};
// 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.DrawingController.prototype.createCanvas = function () {
var width = this.frame.getWidth(),
height = this.frame.getHeight();
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width * this.dpi);
canvas.setAttribute("height", height * this.dpi);
return canvas;
};
})();

89
js/controller/PreviewFilmController.js Normal file
View File

@ -0,0 +1,89 @@
(function () {
var ns = $.namespace("pskl.controller");
ns.PreviewFilmController = function (framesheet, container, dpi) {
this.dpi = dpi;
this.framesheet = framesheet;
this.container = container;
this.renderer = new pskl.rendering.FrameRenderer();
};
ns.PreviewFilmController.prototype.init = function() {
var addFrameButton = $('#add-frame-button')[0];
addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
this.createPreviews();
};
ns.PreviewFilmController.prototype.addFrame = function () {
this.framesheet.addEmptyFrame();
piskel.setActiveFrameAndRedraw(this.framesheet.getFrameCount() - 1);
};
ns.PreviewFilmController.prototype.createPreviews = function () {
this.container.innerHTML = "";
for (var i = 0, l = this.framesheet.getFrameCount(); i < l ; i++) {
this.container.appendChild(this.createPreviewTile(i));
}
};
ns.PreviewFilmController.prototype.createPreviewTile = function(tileNumber) {
var frame = this.framesheet.getFrameByIndex(tileNumber);
var width = frame.getWidth() * this.dpi,
height = frame.getHeight() * this.dpi;
var previewTileRoot = document.createElement("li");
var classname = "preview-tile";
if (piskel.getActiveFrameIndex() == tileNumber) {
classname += " selected";
}
previewTileRoot.className = classname;
var canvasContainer = document.createElement("div");
canvasContainer.className = "canvas-container";
canvasContainer.setAttribute('style', 'width:' + width + 'px; height:' + height + 'px;');
var canvasBackground = document.createElement("div");
canvasBackground.className = "canvas-background";
canvasContainer.appendChild(canvasBackground);
var canvasPreview = document.createElement("canvas");
canvasPreview.className = "canvas tile-view"
canvasPreview.setAttribute('width', width);
canvasPreview.setAttribute('height', height);
previewTileRoot.addEventListener('click', function(evt) {
// has not class tile-action:
if(!evt.target.classList.contains('tile-action')) {
piskel.setActiveFrameAndRedraw(tileNumber);
}
});
var canvasPreviewDuplicateAction = document.createElement("button");
canvasPreviewDuplicateAction.className = "tile-action"
canvasPreviewDuplicateAction.innerHTML = "dup"
canvasPreviewDuplicateAction.addEventListener('click', function(evt) {
piskel.duplicateFrame(tileNumber);
});
this.renderer.render(this.framesheet.getFrameByIndex(tileNumber), canvasPreview, this.dpi);
canvasContainer.appendChild(canvasPreview);
previewTileRoot.appendChild(canvasContainer);
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) {
var canvasPreviewDeleteAction = document.createElement("button");
canvasPreviewDeleteAction.className = "tile-action"
canvasPreviewDeleteAction.innerHTML = "del"
canvasPreviewDeleteAction.addEventListener('click', function(evt) {
piskel.removeFrame(tileNumber);
});
previewTileRoot.appendChild(canvasPreviewDeleteAction);
}
return previewTileRoot;
};
})();

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 = pskl.utils.normalizeColor(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, color, drawer) {
this.superclass.applyToolAt.call(this, col, row, Constants.TRANSPARENT_COLOR, drawer);
};
})();

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 = pskl.utils.normalizeColor(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.containsPixel(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.containsPixel(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();
};
/**

30
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,23 +18,19 @@
/**
* @override
*/
ns.SimplePen.prototype.applyToolAt = function(col, row, frame, color, canvas, dpi) {
this.previousCol = col;
this.previousRow = row;
ns.SimplePen.prototype.applyToolAt = function(col, row, color, drawer) {
if (drawer.frame.containsPixel(col, row)) {
this.previousCol = col;
this.previousRow = row;
drawer.frame.setPixel(col, row, color);
// Change model:
var color = pskl.utils.normalizeColor(color);
if (color != frame[col][row]) {
frame[col][row] = color;
}
// Draw on canvas:
// TODO: Remove that when we have the centralized redraw loop
this.drawPixelInCanvas(col, row, canvas, color, dpi);
// Draw on canvas:
// TODO: Remove that when we have the centralized redraw loop
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
@ -42,11 +38,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.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);
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();
};
})();

58
js/model/Frame.js Normal file
View File

@ -0,0 +1,58 @@
(function () {
var ns = $.namespace("pskl.model");
ns.Frame = function (pixels) {
this.pixels = pixels;
};
ns.Frame.createEmpty = function (width, height) {
var pixels = []; //new Array(width);
for (var columnIndex=0; columnIndex < width; columnIndex++) {
var columnArray = [];
for(var heightIndex = 0; heightIndex < height; heightIndex++) {
columnArray.push(Constants.TRANSPARENT_COLOR);
}
pixels[columnIndex] = columnArray;
}
return new ns.Frame(pixels);
};
ns.Frame.createEmptyFromFrame = function (frame) {
return ns.Frame.createEmpty(frame.getWidth(), frame.getHeight());
};
ns.Frame.prototype.clone = function () {
var clone = ns.Frame.createEmptyFromFrame(this);
for (var col = 0 ; col < clone.getWidth() ; col++) {
for (var row = 0 ; row < clone.getHeight() ; row++) {
clone.setPixel(col, row, this.getPixel(col, row));
}
}
return clone;
};
ns.Frame.prototype.serialize = function () {
return JSON.stringify(this.pixels);
};
ns.Frame.prototype.setPixel = function (col, row, color) {
this.pixels[col][row] = color;
};
ns.Frame.prototype.getPixel = function (col, row) {
return this.pixels[col][row];
};
ns.Frame.prototype.getWidth = function () {
return this.pixels.length;
};
ns.Frame.prototype.getHeight = function () {
return this.pixels[0].length;
};
ns.Frame.prototype.containsPixel = function (col, row) {
return col >= 0 && row >= 0 && col <= this.pixels.length && row <= this.pixels[0].length;
};
})();

96
js/model/FrameSheet.js Normal file
View File

@ -0,0 +1,96 @@
(function () {
var ns = $.namespace("pskl.model");
ns.FrameSheet = function () {
this.frames = [];
};
ns.FrameSheet.prototype.validate = function () {
throw "FrameSheet.prototype.validate not implemented"
};
ns.FrameSheet.prototype.addEmptyFrame = function () {
this.addFrame(ns.Frame.createEmpty(width, height));
};
ns.FrameSheet.prototype.addFrame = function (frame) {
this.frames.push(frame);
};
ns.FrameSheet.prototype.getFrameCount = function () {
return this.frames.length;
};
ns.FrameSheet.prototype.getUsedColors = function() {
var colors = {};
for (var frameIndex=0; frameIndex < this.frames.length; frameIndex++) {
var frame = this.frames[frameIndex];
for (var i = 0, width = frame.getWidth(); i < width ; i++) {
var line = frame[i];
for (var j = 0, height = frame.getHeight() ; j < height ; j++) {
var pixel = frame.getPixel(i, j);
colors[pixel] = pixel;
}
}
}
return colors;
};
// Could be used to pass around model using long GET param (good enough for simple models) and
// do some temporary locastorage
ns.FrameSheet.prototype.serialize = function() {
var serializedFrames = [];
for (var i = 0 ; i < this.frames.length ; i++) {
serializedFrames.push(this.frames[i].serialize());
}
return '[' + serializedFrames.join(",") + ']';
//return JSON.stringify(frames);
};
/**
* Load a framesheet from a string that might have been persisted in db / localstorage
* Overrides existing frames.
* @param {String} serialized
*/
ns.FrameSheet.prototype.deserialize = function (serialized) {
try {
var frameConfigurations = JSON.parse(serialized);
this.frames = [];
for (var i = 0 ; i < frameConfigurations.length ; i++) {
var frameCfg = frameConfigurations[i];
this.addFrame(new ns.Frame(frameCfg));
}
$.publish(Events.FRAMESHEET_RESET);
} catch (e) {
throw "Could not load serialized framesheet : " + e.message
}
};
ns.FrameSheet.prototype.hasFrameAtIndex = function(index) {
return (index >= 0 && index < this.getFrameCount());
};
ns.FrameSheet.prototype.getFrameByIndex = function(index) {
if (isNaN(index)) {
throw "Bad argument value for getFrameByIndex method: <" + index + ">";
}
if (!this.hasFrameAtIndex(index)) {
throw "Out of bound index for frameSheet object.";
}
return this.frames[index];
};
ns.FrameSheet.prototype.removeFrameByIndex = function(index) {
if(!this.hasFrameAtIndex(index)) {
throw "Out of bound index for frameSheet object.";
}
this.frames.splice(index, 1);
};
ns.FrameSheet.prototype.duplicateFrameByIndex = function(index) {
var frame = this.getFrameByIndex(index);
this.frames.splice(index + 1, 0, frame.clone());
};
})();

270
js/piskel.js
View File

@ -42,16 +42,7 @@ $.namespace("pskl");
penColor = Constants.DEFAULT_PEN_COLOR,
currentFrame = null;
currentToolBehavior = null,
previousMousemoveTime = 0,
//utility
_normalizeColor = function (color) {
if(color == undefined || color == Constants.TRANSPARENT_COLOR || color.indexOf("#") == 0) {
return color;
} else {
return "#" + color;
}
};
previousMousemoveTime = 0;
/**
* Main application controller
@ -59,9 +50,34 @@ $.namespace("pskl");
var piskel = {
init : function () {
frameSheet = pskl.FrameSheetModel.getInstance(framePixelWidth, framePixelHeight);
frameSheet.addEmptyFrame();
var emptyFrame = pskl.model.Frame.createEmpty(framePixelWidth, framePixelHeight);
frameSheet = new pskl.model.FrameSheet();
frameSheet.addFrame(emptyFrame);
this.drawingController = new pskl.controller.DrawingController(
emptyFrame,
$('#drawing-canvas-container')[0],
drawingCanvasDpi
);
this.setActiveFrame(0);
this.animationController = new pskl.controller.AnimatedPreviewController(
frameSheet,
$('#preview-canvas-container')[0],
previewAnimationCanvasDpi
);
this.previewsController = new pskl.controller.PreviewFilmController(
frameSheet,
$('#preview-list')[0],
previewTileCanvasDpi
);
this.animationController.init();
this.previewsController.init();
pskl.NotificationService.init();
pskl.LocalStorageService.init(frameSheet);
@ -95,9 +111,6 @@ $.namespace("pskl");
// TODO: Move this into their service or behavior files:
this.initDrawingArea();
this.initPreviewSlideshow();
this.initAnimationPreview();
this.startAnimation();
pskl.ToolSelector.init();
pskl.Palette.init(frameSheet);
@ -136,189 +149,49 @@ $.namespace("pskl");
setActiveFrame: function(index) {
activeFrameIndex = index;
currentFrame = frameSheet.getFrameByIndex(activeFrameIndex)
this.drawingController.frame = frameSheet.getFrameByIndex(index);
},
setActiveFrameAndRedraw: function(index) {
this.setActiveFrame(index);
// When redraw engine is refactored, remove the following crap and
// trigger an event instead:
this.redraw();
},
redraw : function () {
// Update drawing canvas:
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
this.drawingController.renderFrame();
// Update slideshow:
this.createPreviews();
// Update animation preview:
animIndex = 0;
this.previewsController.createPreviews();
},
getActiveFrameIndex: function() {
if(-1 == activeFrameIndex) {
throw "Bad active frane initialization."
throw "Bad active frame initialization."
}
return activeFrameIndex;
},
initDrawingArea : function() {
drawingAreaContainer = $('#drawing-canvas-container')[0];
drawingAreaCanvas = document.createElement("canvas");
drawingAreaCanvas.className = 'canvas';
drawingAreaCanvas.setAttribute('width', '' + framePixelWidth * drawingCanvasDpi);
drawingAreaCanvas.setAttribute('height', '' + framePixelHeight * drawingCanvasDpi);
drawingAreaContainer.setAttribute('style',
'width:' + framePixelWidth * drawingCanvasDpi + 'px; height:' + framePixelHeight * drawingCanvasDpi + 'px;');
drawingAreaCanvas.setAttribute('oncontextmenu', 'piskel.onCanvasContextMenu(event)');
drawingAreaContainer.appendChild(drawingAreaCanvas);
var body = document.getElementsByTagName('body')[0];
body.setAttribute('onmouseup', 'piskel.onDocumentBodyMouseup(event)');
drawingAreaContainer.setAttribute('onmousedown', 'piskel.onCanvasMousedown(event)');
drawingAreaContainer.setAttribute('onmousemove', 'piskel.onCanvasMousemove(event)');
this.drawFrameToCanvas(currentFrame, drawingAreaCanvas, drawingCanvasDpi);
},
initPreviewSlideshow: function() {
var addFrameButton = $('#add-frame-button')[0];
addFrameButton.addEventListener('mousedown', function() {
frameSheet.addEmptyFrame();
piskel.setActiveFrameAndRedraw(frameSheet.getFrameCount() - 1);
});
this.createPreviews();
},
initAnimationPreview : function() {
var previewAnimationContainer = $('#preview-canvas-container')[0];
previewCanvas = document.createElement('canvas');
previewCanvas.className = 'canvas';
previewAnimationContainer.setAttribute('style',
'width:' + framePixelWidth * previewAnimationCanvasDpi + 'px; height:' + framePixelHeight * previewAnimationCanvasDpi + 'px;');
previewAnimationContainer.appendChild(previewCanvas);
previewCanvas.setAttribute('width', framePixelWidth * previewAnimationCanvasDpi);
previewCanvas.setAttribute('height', framePixelHeight * previewAnimationCanvasDpi);
},
startAnimation : function () {
var scope = this;
var animFPSTuner = $("#preview-fps")[0];
var animPreviewFPS = parseInt(animFPSTuner.value, 10);
var startPreviewRefresh = function() {
return setInterval(scope.refreshAnimatedPreview, 1000/animPreviewFPS);
};
var refreshUpdater = startPreviewRefresh();
animFPSTuner.addEventListener('change', function(evt) {
window.clearInterval(refreshUpdater);
animPreviewFPS = parseInt(animFPSTuner.value, 10);
$("#display-fps").html(animPreviewFPS + " fps");
refreshUpdater = startPreviewRefresh();
});
},
createPreviews : function () {
var container = $('#preview-list')[0], previewTile;
container.innerHTML = "";
for (var i = 0, l = frameSheet.getFrameCount(); i < l ; i++) {
previewTile = this.createPreviewTile(i);
container.appendChild(previewTile);
}
},
createPreviewTile: function(tileNumber) {
var previewTileRoot = document.createElement("li");
var classname = "preview-tile";
if (this.getActiveFrameIndex() == tileNumber) {
classname += " selected";
}
previewTileRoot.className = classname;
var canvasContainer = document.createElement("div");
canvasContainer.className = "canvas-container";
canvasContainer.setAttribute('style',
'width:' + framePixelWidth * previewTileCanvasDpi + 'px; height:' + framePixelHeight * previewTileCanvasDpi + 'px;');
var canvasBackground = document.createElement("div");
canvasBackground.className = "canvas-background";
canvasContainer.appendChild(canvasBackground);
var canvasPreview = document.createElement("canvas");
canvasPreview.className = "canvas tile-view"
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|$)'))) {
piskel.setActiveFrameAndRedraw(tileNumber);
}
});
var canvasPreviewDuplicateAction = document.createElement("button");
canvasPreviewDuplicateAction.className = "tile-action"
canvasPreviewDuplicateAction.innerHTML = "dup"
canvasPreviewDuplicateAction.addEventListener('click', function(evt) {
piskel.duplicateFrame(tileNumber);
});
this.drawFrameToCanvas(frameSheet.getFrameByIndex(tileNumber), canvasPreview, previewTileCanvasDpi);
canvasContainer.appendChild(canvasPreview);
previewTileRoot.appendChild(canvasContainer);
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
if(tileNumber > 0 || frameSheet.getFrameCount() > 1) {
var canvasPreviewDeleteAction = document.createElement("button");
canvasPreviewDeleteAction.className = "tile-action"
canvasPreviewDeleteAction.innerHTML = "del"
canvasPreviewDeleteAction.addEventListener('click', function(evt) {
piskel.removeFrame(tileNumber);
});
previewTileRoot.appendChild(canvasPreviewDeleteAction);
}
return previewTileRoot;
},
refreshAnimatedPreview : function () {
piskel.drawFrameToCanvas(frameSheet.getFrameByIndex(animIndex), previewCanvas, previewAnimationCanvasDpi);
animIndex++;
if (animIndex == frameSheet.getFrameCount()) {
animIndex = 0;
}
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.addEventListener('contextmenu', this.onCanvasContextMenu);
},
removeFrame: function(frameIndex) {
frameSheet.removeFrameByIndex(frameIndex);
this.setActiveFrameAndRedraw(frameIndex - 1);
},
duplicateFrame: function(frameIndex) {
frameSheet.duplicateFrameByIndex(frameIndex);
this.setActiveFrameAndRedraw(frameIndex + 1);
},
updateCursorInfo : function (event) {
var cursor = $('cursorInfo');
cursor.style.top = event.clientY + 10 + "px";
cursor.style.left = event.clientX + 10 + "px";
var coordinates = this.getRelativeCoordinates(event.clientX, event.clientY)
cursor.innerHTML = [
"X : " + coordinates.x,
"Y : " + coordinates.y
].join(", ");
},
onCanvasMousedown : function (event) {
onMousedown : function (event) {
isClicked = true;
if(event.button == 2) { // right click
@ -327,31 +200,27 @@ $.namespace("pskl");
}
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.applyToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
currentFrame,
penColor,
drawingAreaCanvas,
drawingCanvasDpi);
spriteCoordinate.col,
spriteCoordinate.row,
penColor,
this.drawingController
);
$.publish(Events.LOCALSTORAGE_REQUEST);
},
onCanvasMousemove : function (event) {
//this.updateCursorInfo(event);
onMousemove : function (event) {
var currentTime = new Date().getTime();
// Throttling of the mousemove event:
if ((currentTime - previousMousemoveTime) > 40 ) {
if (isClicked) {
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.moveToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
currentFrame,
penColor,
drawingAreaCanvas,
drawingCanvasDpi);
spriteCoordinate.col,
spriteCoordinate.row,
penColor,
this.drawingController
);
// 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,
@ -362,14 +231,14 @@ $.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.
// Note: The mousemove movement (and the mouseup) may end up outside
// of the drawing canvas.
// TODO: Remove that when we have the centralized redraw loop
this.createPreviews();
this.previewsController.createPreviews();
}
if(isRightClicked) {
@ -381,32 +250,9 @@ $.namespace("pskl");
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
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 = _normalizeColor(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);
}
this.drawer
);
},
onCanvasContextMenu : function (event) {
@ -417,7 +263,7 @@ $.namespace("pskl");
},
getRelativeCoordinates : function (x, y) {
var canvasRect = drawingAreaCanvas.getBoundingClientRect();
var canvasRect = $(".drawing-canvas")[0].getBoundingClientRect();
return {
x : x - canvasRect.left,
y : y - canvasRect.top

28
js/rendering/FrameRenderer.js Normal file
View File

@ -0,0 +1,28 @@
(function () {
var ns = $.namespace("pskl.rendering");
ns.FrameRenderer = function () {};
ns.FrameRenderer.prototype.render = function (frame, canvas, dpi) {
for(var col = 0, width = frame.getWidth(); col < width; col++) {
for(var row = 0, height = frame.getHeight(); row < height; row++) {
this.drawPixel(col, row, frame, canvas, dpi);
}
}
};
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame, canvas, dpi) {
var context = canvas.getContext('2d');
var color = frame.getPixel(col, row);
if(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);
}
};
})();

8
js/utils.js
View File

@ -26,14 +26,6 @@ jQuery.namespace = function() {
return ((r << 16) | (g << 8) | b).toString(16);
};
ns.normalizeColor = function (color) {
if(color == undefined || color == Constants.TRANSPARENT_COLOR || color.indexOf("#") == 0) {
return color;
} else {
return "#" + color;
}
};
ns.inherit = function(extendedObject, inheritFrom) {
extendedObject.prototype = Object.create(inheritFrom.prototype);
extendedObject.prototype.constructor = extendedObject;