eb7511c721
From this change set, the HTML canvas element, which is the frame view, is encapsulated inside the FrameRenderer. You won't need to give the view handle from the controller layer anymore. It will make view alteration implementations much easier (like grid for instance)
77 lines
No EOL
2.1 KiB
JavaScript
77 lines
No EOL
2.1 KiB
JavaScript
(function () {
|
|
var ns = $.namespace("pskl.rendering");
|
|
|
|
this.dpi = null;
|
|
this.canvas = null;
|
|
|
|
ns.FrameRenderer = function (container, dpi, className) {
|
|
if(container == undefined) {
|
|
throw "Bad FrameRenderer initialization. <container> undefined.";
|
|
}
|
|
|
|
if(dpi == undefined || isNaN(dpi)) {
|
|
throw "Bad FrameRenderer initialization. <dpi> not well defined.";
|
|
}
|
|
|
|
this.container = container;
|
|
this.dpi = dpi;
|
|
this.className = className;
|
|
};
|
|
|
|
ns.FrameRenderer.prototype.init = function (frame) {
|
|
|
|
this.createCanvas_(frame);
|
|
this.render(frame);
|
|
};
|
|
|
|
ns.FrameRenderer.prototype.render = function (frame) {
|
|
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, this.canvas, this.dpi);
|
|
}
|
|
}
|
|
};
|
|
|
|
ns.FrameRenderer.prototype.drawPixel = function (col, row, frame) {
|
|
var context = this.canvas.getContext('2d');
|
|
var color = frame.getPixel(col, row);
|
|
if(color == Constants.TRANSPARENT_COLOR) {
|
|
context.clearRect(col * this.dpi, row * this.dpi, this.dpi, this.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 * this.dpi, row * this.dpi, this.dpi, this.dpi);
|
|
}
|
|
};
|
|
|
|
ns.FrameRenderer.prototype.clear = function (col, row, frame) {
|
|
this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
};
|
|
|
|
/**
|
|
* @private
|
|
*/
|
|
ns.FrameRenderer.prototype.createCanvas_ = function (frame) {
|
|
if(this.canvas == undefined) {
|
|
var width = frame.getWidth(),
|
|
height = frame.getHeight();
|
|
|
|
var canvas = document.createElement("canvas");
|
|
canvas.setAttribute("width", width * this.dpi);
|
|
canvas.setAttribute("height", height * this.dpi);
|
|
|
|
var canvasClassname = "canvas";
|
|
if(this.className) {
|
|
canvasClassname += " " + this.className;
|
|
}
|
|
canvas.setAttribute("class", canvasClassname);
|
|
|
|
this.canvas = canvas;
|
|
}
|
|
this.container.appendChild(this.canvas);
|
|
};
|
|
})(); |