2012-09-04 12:10:16 +00:00
|
|
|
(function () {
|
2013-08-10 10:11:16 +00:00
|
|
|
var ns = $.namespace("pskl.rendering");
|
2013-06-17 21:22:30 +00:00
|
|
|
|
2013-09-29 21:14:10 +00:00
|
|
|
/**
|
|
|
|
* FrameRenderer will display a given frame inside a canvas element.
|
|
|
|
* @param {HtmlElement} container HtmlElement to use as parentNode of the Frame
|
|
|
|
* @param {Object} renderingOptions
|
|
|
|
* @param {Array} classes array of strings to use for css classes
|
|
|
|
*/
|
|
|
|
ns.FrameRenderer = function (container, renderingOptions, classes) {
|
2013-08-10 10:11:16 +00:00
|
|
|
this.defaultRenderingOptions = {
|
2013-10-29 21:16:39 +00:00
|
|
|
'supportGridRendering' : false,
|
2013-11-01 10:17:50 +00:00
|
|
|
'zoom' : 1
|
2013-06-17 21:22:30 +00:00
|
|
|
};
|
2013-10-29 21:16:39 +00:00
|
|
|
|
2013-08-10 10:11:16 +00:00
|
|
|
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
|
|
|
|
|
|
|
|
if(container === undefined) {
|
|
|
|
throw 'Bad FrameRenderer initialization. <container> undefined.';
|
|
|
|
}
|
2013-09-28 21:52:51 +00:00
|
|
|
|
2013-10-29 21:16:39 +00:00
|
|
|
if(isNaN(renderingOptions.zoom)) {
|
|
|
|
throw 'Bad FrameRenderer initialization. <zoom> not well defined.';
|
2013-08-10 10:11:16 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
this.container = container;
|
2013-09-29 21:14:10 +00:00
|
|
|
|
2013-10-29 21:16:39 +00:00
|
|
|
this.zoom = renderingOptions.zoom;
|
|
|
|
|
2013-11-01 10:17:50 +00:00
|
|
|
this.frameOffsetX = 0;
|
|
|
|
this.frameOffsetY = 0;
|
|
|
|
|
|
|
|
this.marginY = 0;
|
|
|
|
this.marginX = 0;
|
2013-10-29 21:16:39 +00:00
|
|
|
|
2013-08-10 10:11:16 +00:00
|
|
|
this.supportGridRendering = renderingOptions.supportGridRendering;
|
|
|
|
|
2013-09-29 21:14:10 +00:00
|
|
|
this.classes = classes || [];
|
|
|
|
this.classes.push('canvas');
|
|
|
|
|
2013-10-29 21:16:39 +00:00
|
|
|
/**
|
|
|
|
* Off dom canvas, will be used to draw the frame at 1:1 ratio
|
|
|
|
* @type {HTMLElement}
|
|
|
|
*/
|
2013-09-29 21:14:10 +00:00
|
|
|
this.canvas = null;
|
|
|
|
|
2013-10-29 21:16:39 +00:00
|
|
|
/**
|
|
|
|
* Displayed canvas, scaled-up from the offdom canvas
|
|
|
|
* @type {HTMLElement}
|
|
|
|
*/
|
2013-11-01 10:17:50 +00:00
|
|
|
this.displayCanvas = null;
|
2013-10-29 21:16:39 +00:00
|
|
|
this.setDisplaySize(renderingOptions.width, renderingOptions.height);
|
|
|
|
|
2013-08-10 10:11:16 +00:00
|
|
|
this.enableGrid(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
|
|
|
|
|
|
|
|
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
|
|
|
|
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
|
|
|
|
};
|
|
|
|
|
2013-10-29 21:16:39 +00:00
|
|
|
ns.FrameRenderer.prototype.setZoom = function (zoom) {
|
|
|
|
this.zoom = zoom;
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.FrameRenderer.prototype.isAutoSized_ = function () {
|
|
|
|
return this.displayHeight === 'auto' && this.displayWidth === 'auto';
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.FrameRenderer.prototype.setDisplaySize = function (width, height) {
|
|
|
|
this.displayHeight = height;
|
|
|
|
this.displayWidth = width;
|
2013-11-01 10:17:50 +00:00
|
|
|
if (this.displayCanvas) {
|
|
|
|
$(this.displayCanvas).remove();
|
|
|
|
this.displayCanvas = null;
|
2013-10-29 21:16:39 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-11-01 10:17:50 +00:00
|
|
|
ns.FrameRenderer.prototype.updateMargins_ = function () {
|
2013-10-29 21:16:39 +00:00
|
|
|
if (!this.isAutoSized_()) {
|
2013-11-01 10:17:50 +00:00
|
|
|
var deltaX = this.displayWidth - (this.zoom * this.canvas.width);
|
|
|
|
this.marginX = Math.max(0, deltaX) / 2;
|
2013-10-29 21:16:39 +00:00
|
|
|
|
2013-11-01 10:17:50 +00:00
|
|
|
var deltaY = this.displayHeight - (this.zoom * this.canvas.height);
|
|
|
|
this.marginY = Math.max(0, deltaY) / 2;
|
2013-10-29 21:16:39 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-11-01 10:17:50 +00:00
|
|
|
ns.FrameRenderer.prototype.createDisplayCanvas_ = function () {
|
2013-10-29 21:16:39 +00:00
|
|
|
var height = this.displayHeight;
|
|
|
|
var width = this.displayWidth;
|
|
|
|
|
|
|
|
if (this.isAutoSized_()) {
|
|
|
|
height = this.zoom * this.canvas.height;
|
|
|
|
width = this.zoom * this.canvas.width;
|
|
|
|
}
|
|
|
|
|
2013-11-01 10:17:50 +00:00
|
|
|
this.displayCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
|
2013-10-29 21:16:39 +00:00
|
|
|
if (true || this.zoom > 2) {
|
2013-11-01 10:17:50 +00:00
|
|
|
pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
|
2013-10-29 21:16:39 +00:00
|
|
|
}
|
2013-11-01 10:17:50 +00:00
|
|
|
this.container.append(this.displayCanvas);
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.FrameRenderer.prototype.setDisplayOffset = function (frameOffsetX, frameOffsetY) {
|
|
|
|
this.frameOffsetX = frameOffsetX;
|
|
|
|
this.frameOffsetY = frameOffsetY;
|
2013-10-29 21:16:39 +00:00
|
|
|
};
|
|
|
|
|
2013-11-01 10:17:50 +00:00
|
|
|
ns.FrameRenderer.prototype.moveOffset = function (frameOffsetX, frameOffsetY) {
|
|
|
|
this.setDisplayOffset(this.frameOffsetX + frameOffsetX, this.frameOffsetY + frameOffsetY);
|
2013-08-10 10:11:16 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
|
|
|
|
if(settingName == pskl.UserSettings.SHOW_GRID) {
|
|
|
|
this.enableGrid(settingValue);
|
|
|
|
}
|
|
|
|
else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
|
|
|
|
this.updateBackgroundClass_(settingValue);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
ns.FrameRenderer.prototype.updateBackgroundClass_ = function (newClass) {
|
|
|
|
var currentClass = this.container.data('current-background-class');
|
|
|
|
if (currentClass) {
|
|
|
|
this.container.removeClass(currentClass);
|
2013-09-28 21:52:51 +00:00
|
|
|
}
|
2013-08-10 10:11:16 +00:00
|
|
|
this.container.addClass(newClass);
|
|
|
|
this.container.data('current-background-class', newClass);
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.FrameRenderer.prototype.enableGrid = function (flag) {
|
|
|
|
this.gridStrokeWidth = (flag && this.supportGridRendering) ? Constants.GRID_STROKE_WIDTH : 0;
|
|
|
|
this.canvasConfigDirty = true;
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.FrameRenderer.prototype.render = function (frame) {
|
2013-09-26 05:47:11 +00:00
|
|
|
if (frame) {
|
2013-09-26 20:43:45 +00:00
|
|
|
this.clear();
|
2013-11-01 10:17:50 +00:00
|
|
|
this.renderFrame_(frame);
|
2013-08-10 10:11:16 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-10-29 21:16:39 +00:00
|
|
|
ns.FrameRenderer.prototype.clear = function () {
|
|
|
|
pskl.CanvasUtils.clear(this.canvas);
|
2013-11-01 10:17:50 +00:00
|
|
|
pskl.CanvasUtils.clear(this.displayCanvas);
|
2013-10-29 21:16:39 +00:00
|
|
|
};
|
|
|
|
|
2013-08-10 10:11:16 +00:00
|
|
|
ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
|
|
|
|
if(color != Constants.TRANSPARENT_COLOR) {
|
|
|
|
context.fillStyle = color;
|
2013-10-29 21:16:39 +00:00
|
|
|
context.fillRect(col, row, 1, 1);
|
2013-09-26 19:53:37 +00:00
|
|
|
}
|
2013-08-10 10:11:16 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Transform a screen pixel-based coordinate (relative to the top-left corner of the rendered
|
|
|
|
* frame) into a sprite coordinate in column and row.
|
|
|
|
* @public
|
|
|
|
*/
|
|
|
|
ns.FrameRenderer.prototype.convertPixelCoordinatesIntoSpriteCoordinate = function(coords) {
|
2013-10-29 21:16:39 +00:00
|
|
|
var cellSize = this.zoom + this.gridStrokeWidth;
|
2013-11-01 10:17:50 +00:00
|
|
|
var xCoord = (coords.x - this.marginX) + (this.frameOffsetX * cellSize),
|
|
|
|
yCoord = (coords.y - this.marginY) + (this.frameOffsetY * cellSize);
|
2013-08-10 10:11:16 +00:00
|
|
|
return {
|
2013-10-29 21:16:39 +00:00
|
|
|
"col" : (xCoord - xCoord % cellSize) / cellSize,
|
|
|
|
"row" : (yCoord - yCoord % cellSize) / cellSize
|
2013-06-17 21:22:30 +00:00
|
|
|
};
|
2013-08-10 10:11:16 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
ns.FrameRenderer.prototype.getFramePos_ = function(index) {
|
|
|
|
return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
2013-11-01 10:17:50 +00:00
|
|
|
ns.FrameRenderer.prototype.renderFrame_ = function (frame) {
|
2013-10-29 21:16:39 +00:00
|
|
|
if (!this.canvas) {
|
|
|
|
this.canvas = pskl.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight());
|
|
|
|
}
|
2013-09-28 21:52:51 +00:00
|
|
|
|
2013-10-29 21:16:39 +00:00
|
|
|
var context = this.canvas.getContext('2d');
|
|
|
|
for(var col = 0, width = frame.getWidth(); col < width; col++) {
|
|
|
|
for(var row = 0, height = frame.getHeight(); row < height; row++) {
|
|
|
|
var color = frame.getPixel(col, row);
|
|
|
|
this.renderPixel_(color, col, row, context);
|
|
|
|
}
|
2013-08-10 10:11:16 +00:00
|
|
|
}
|
2013-10-29 21:16:39 +00:00
|
|
|
|
2013-11-01 10:17:50 +00:00
|
|
|
if (!this.displayCanvas) {
|
|
|
|
this.createDisplayCanvas_();
|
|
|
|
}
|
|
|
|
|
|
|
|
this.updateMargins_();
|
|
|
|
|
|
|
|
context = this.displayCanvas.getContext('2d');
|
2013-10-29 21:16:39 +00:00
|
|
|
context.save();
|
|
|
|
// zoom < 1
|
|
|
|
context.fillStyle = "#aaa";
|
|
|
|
// zoom < 1
|
2013-11-01 10:17:50 +00:00
|
|
|
context.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
|
|
|
|
context.translate(this.marginX, this.marginY);
|
2013-10-29 21:16:39 +00:00
|
|
|
context.scale(this.zoom, this.zoom);
|
2013-11-01 10:17:50 +00:00
|
|
|
context.translate(-this.frameOffsetX, -this.frameOffsetY);
|
2013-10-29 21:16:39 +00:00
|
|
|
// zoom < 1
|
|
|
|
context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
|
|
|
context.drawImage(this.canvas, 0, 0);
|
|
|
|
context.restore();
|
2013-08-10 10:11:16 +00:00
|
|
|
};
|
2012-09-04 06:35:58 +00:00
|
|
|
})();
|