Merging from master after PR zoom level

This commit is contained in:
juliandescottes
2013-11-23 19:25:51 +01:00
27 changed files with 956 additions and 360 deletions

View File

@@ -0,0 +1,22 @@
(function () {
var ns = $.namespace('pskl.rendering');
ns.AbstractRenderer = function () {};
ns.AbstractRenderer.prototype.clear = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.getCoordinates = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.setGridEnabled = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.isGridEnabled = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.setZoom = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.getZoom = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.moveOffset = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.setOffset = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.getOffset = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.setDisplaySize = Constants.ABSTRACT_FUNCTION;
ns.AbstractRenderer.prototype.getDisplaySize = Constants.ABSTRACT_FUNCTION;
})();

View File

@@ -1,9 +1,9 @@
(function () {
var ns = $.namespace("pskl.rendering");
ns.CanvasRenderer = function (frame, dpi) {
ns.CanvasRenderer = function (frame, zoom) {
this.frame = frame;
this.dpi = dpi;
this.zoom = zoom;
this.transparentColor_ = 'white';
};
@@ -32,12 +32,12 @@
color = this.transparentColor_;
}
context.fillStyle = color;
context.fillRect(x * this.dpi, y * this.dpi, this.dpi, this.dpi);
context.fillRect(x * this.zoom, y * this.zoom, this.zoom, this.zoom);
};
ns.CanvasRenderer.prototype.createCanvas_ = function () {
var width = this.frame.getWidth() * this.dpi;
var height = this.frame.getHeight() * this.dpi;
var width = this.frame.getWidth() * this.zoom;
var height = this.frame.getHeight() * this.zoom;
return pskl.CanvasUtils.createCanvas(width, height);
};
})();

View File

@@ -0,0 +1,75 @@
(function () {
var ns = $.namespace('pskl.rendering');
ns.CompositeRenderer = function () {
this.renderers = [];
};
pskl.utils.inherit(pskl.rendering.CompositeRenderer, pskl.rendering.AbstractRenderer);
ns.CompositeRenderer.prototype.add = function (renderer) {
this.renderers.push(renderer);
return this;
};
ns.CompositeRenderer.prototype.clear = function () {
this.renderers.forEach(function (renderer) {
renderer.clear();
});
};
ns.CompositeRenderer.prototype.setZoom = function (zoom) {
this.renderers.forEach(function (renderer) {
renderer.setZoom(zoom);
});
};
ns.CompositeRenderer.prototype.getZoom = function () {
return this.getSampleRenderer_().getZoom();
};
ns.CompositeRenderer.prototype.setDisplaySize = function (w, h) {
this.renderers.forEach(function (renderer) {
renderer.setDisplaySize(w, h);
});
};
ns.CompositeRenderer.prototype.getDisplaySize = function () {
return this.getSampleRenderer_().getDisplaySize();
};
ns.CompositeRenderer.prototype.moveOffset = function (x, y) {
this.renderers.forEach(function (renderer) {
renderer.moveOffset(x, y);
});
};
ns.CompositeRenderer.prototype.setOffset = function (x, y) {
this.renderers.forEach(function (renderer) {
renderer.setOffset(x, y);
});
};
ns.CompositeRenderer.prototype.getOffset = function () {
return this.getSampleRenderer_().getOffset();
};
ns.CompositeRenderer.prototype.setGridEnabled = function (b) {
this.renderers.forEach(function (renderer) {
renderer.setGridEnabled(b);
});
};
ns.CompositeRenderer.prototype.isGridEnabled = function () {
return this.getSampleRenderer_().isGridEnabled();
};
ns.CompositeRenderer.prototype.getSampleRenderer_ = function () {
if (this.renderers.length > 0) {
return this.renderers[0];
} else {
throw 'Renderer manager is empty';
}
};
})();

View File

@@ -1,145 +0,0 @@
(function () {
var ns = $.namespace("pskl.rendering");
/**
* 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) {
this.defaultRenderingOptions = {
'supportGridRendering' : false
};
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
if(container === undefined) {
throw 'Bad FrameRenderer initialization. <container> undefined.';
}
if(isNaN(renderingOptions.dpi)) {
throw 'Bad FrameRenderer initialization. <dpi> not well defined.';
}
this.container = container;
this.dpi = renderingOptions.dpi;
this.supportGridRendering = renderingOptions.supportGridRendering;
this.classes = classes || [];
this.classes.push('canvas');
this.canvas = null;
this.enableGrid(pskl.UserSettings.get(pskl.UserSettings.SHOW_GRID));
// Flag to know if the config was altered
this.canvasConfigDirty = true;
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
};
ns.FrameRenderer.prototype.setDPI = function (dpi) {
this.dpi = dpi;
this.canvasConfigDirty = true;
};
/**
* @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);
}
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) {
if (frame) {
this.clear();
var context = this.getCanvas_(frame).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);
}
}
this.lastRenderedFrame = frame;
}
};
ns.FrameRenderer.prototype.renderPixel_ = function (color, col, row, context) {
if(color != Constants.TRANSPARENT_COLOR) {
context.fillStyle = color;
context.fillRect(this.getFramePos_(col), this.getFramePos_(row), this.dpi, this.dpi);
}
};
ns.FrameRenderer.prototype.clear = function () {
if (this.canvas) {
this.canvas.getContext("2d").clearRect(0, 0, this.canvas.width, this.canvas.height);
}
};
/**
* 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) {
var cellSize = this.dpi + this.gridStrokeWidth;
return {
"col" : (coords.x - coords.x % cellSize) / cellSize,
"row" : (coords.y - coords.y % cellSize) / cellSize
};
};
/**
* @private
*/
ns.FrameRenderer.prototype.getFramePos_ = function(index) {
return index * this.dpi + ((index - 1) * this.gridStrokeWidth);
};
/**
* @private
*/
ns.FrameRenderer.prototype.getCanvas_ = function (frame) {
if(this.canvasConfigDirty) {
$(this.canvas).remove();
var col = frame.getWidth(),
row = frame.getHeight();
var pixelWidth = col * this.dpi + this.gridStrokeWidth * (col - 1);
var pixelHeight = row * this.dpi + this.gridStrokeWidth * (row - 1);
var canvas = pskl.CanvasUtils.createCanvas(pixelWidth, pixelHeight, this.classes);
this.container.append(canvas);
this.canvas = canvas;
this.canvasConfigDirty = false;
}
return this.canvas;
};
})();

View File

@@ -0,0 +1,32 @@
(function () {
var ns = $.namespace('pskl.rendering.frame');
/**
* FrameRenderer implementation that prevents unnecessary redraws.
* @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.CachedFrameRenderer = function (container, renderingOptions, classes) {
pskl.rendering.frame.FrameRenderer.call(this, container, renderingOptions, classes);
this.serializedFrame = '';
};
pskl.utils.inherit(pskl.rendering.frame.CachedFrameRenderer, pskl.rendering.frame.FrameRenderer);
ns.CachedFrameRenderer.prototype.render = function (frame) {
var offset = this.getOffset();
var size = this.getDisplaySize();
var serializedFrame = [
this.getZoom(),
this.isGridEnabled(),
offset.x, offset.y,
size.width, size.height,
frame.serialize()
].join('-');
if (this.serializedFrame != serializedFrame) {
this.serializedFrame = serializedFrame;
this.superclass.render.call(this, frame);
}
};
})();

View File

@@ -0,0 +1,259 @@
(function () {
var ns = $.namespace("pskl.rendering.frame");
/**
* 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) {
this.defaultRenderingOptions = {
'supportGridRendering' : false,
'zoom' : 1
};
renderingOptions = $.extend(true, {}, this.defaultRenderingOptions, renderingOptions);
if(container === undefined) {
throw 'Bad FrameRenderer initialization. <container> undefined.';
}
if(isNaN(renderingOptions.zoom)) {
throw 'Bad FrameRenderer initialization. <zoom> not well defined.';
}
this.container = container;
this.zoom = renderingOptions.zoom;
this.offset = {
x : 0,
y : 0
};
this.margin = {
x : 0,
y : 0
};
this.isGridEnabled_ = false;
this.supportGridRendering = renderingOptions.supportGridRendering;
this.classes = classes || [];
this.classes.push('canvas');
/**
* Off dom canvas, will be used to draw the frame at 1:1 ratio
* @type {HTMLElement}
*/
this.canvas = null;
/**
* Displayed canvas, scaled-up from the offdom canvas
* @type {HTMLElement}
*/
this.displayCanvas = null;
this.setDisplaySize(renderingOptions.width, renderingOptions.height);
this.setGridEnabled(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));
};
pskl.utils.inherit(pskl.rendering.frame.FrameRenderer, pskl.rendering.AbstractRenderer);
ns.FrameRenderer.prototype.render = function (frame) {
if (frame) {
this.clear();
this.renderFrame_(frame);
}
};
ns.FrameRenderer.prototype.clear = function () {
pskl.CanvasUtils.clear(this.canvas);
pskl.CanvasUtils.clear(this.displayCanvas);
};
ns.FrameRenderer.prototype.setZoom = function (zoom) {
// back up center coordinates
var centerX = this.offset.x + (this.displayWidth/(2*this.zoom));
var centerY = this.offset.y + (this.displayHeight/(2*this.zoom));
this.zoom = Math.max(1, zoom);
// recenter
this.setOffset(
centerX - (this.displayWidth/(2*this.zoom)),
centerY - (this.displayHeight/(2*this.zoom))
);
};
ns.FrameRenderer.prototype.getZoom = function () {
return this.zoom;
};
ns.FrameRenderer.prototype.setDisplaySize = function (width, height) {
this.displayWidth = width;
this.displayHeight = height;
if (this.displayCanvas) {
$(this.displayCanvas).remove();
this.displayCanvas = null;
}
this.createDisplayCanvas_();
};
ns.FrameRenderer.prototype.getDisplaySize = function () {
return {
height : this.displayHeight,
width : this.displayWidth
};
};
ns.FrameRenderer.prototype.getOffset = function () {
return {
x : this.offset.x,
y : this.offset.y
};
};
ns.FrameRenderer.prototype.moveOffset = function (x, y) {
this.setOffset(this.offset.x + x, this.offset.y + y);
};
ns.FrameRenderer.prototype.setOffset = function (x, y) {
// TODO : provide frame size information to the FrameRenderer constructor
// here I first need to verify I have a 'canvas' which I can use to infer the frame information
// and then perform my boundaries checking. This sucks
if (this.canvas) {
var maxX = this.canvas.width - (this.displayWidth/this.zoom);
x = pskl.utils.Math.minmax(x, 0, maxX);
var maxY = this.canvas.height - (this.displayHeight/this.zoom);
y = pskl.utils.Math.minmax(y, 0, maxY);
}
this.offset.x = x;
this.offset.y = y;
};
ns.FrameRenderer.prototype.setGridEnabled = function (flag) {
this.isGridEnabled_ = flag && this.supportGridRendering;
};
ns.FrameRenderer.prototype.isGridEnabled = function () {
return this.isGridEnabled_;
};
ns.FrameRenderer.prototype.updateMargins_ = function () {
var deltaX = this.displayWidth - (this.zoom * this.canvas.width);
this.margin.x = Math.max(0, deltaX) / 2;
var deltaY = this.displayHeight - (this.zoom * this.canvas.height);
this.margin.y = Math.max(0, deltaY) / 2;
};
ns.FrameRenderer.prototype.createDisplayCanvas_ = function () {
var height = this.displayHeight;
var width = this.displayWidth;
this.displayCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
if (true || this.zoom > 2) {
pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
}
this.container.append(this.displayCanvas);
};
ns.FrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
if(settingName == pskl.UserSettings.SHOW_GRID) {
this.setGridEnabled(settingValue);
} else if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
this.updateBackgroundClass_(settingValue);
}
};
ns.FrameRenderer.prototype.updateBackgroundClass_ = function (newClass) {
var currentClass = this.container.data('current-background-class');
if (currentClass) {
this.container.removeClass(currentClass);
}
this.container.addClass(newClass);
this.container.data('current-background-class', newClass);
};
ns.FrameRenderer.prototype.renderPixel_ = function (color, x, y, context) {
if(color != Constants.TRANSPARENT_COLOR) {
context.fillStyle = color;
context.fillRect(x, y, 1, 1);
}
};
/**
* 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.getCoordinates = function(x, y) {
var containerOffset = this.container.offset();
x = x - containerOffset.left;
y = y - containerOffset.top;
// apply margins
x = x - this.margin.x;
y = y - this.margin.y;
var cellSize = this.zoom;
// apply frame offset
x = x + this.offset.x * cellSize;
y = y + this.offset.y * cellSize;
return {
x : Math.floor(x / cellSize),
y : Math.floor(y / cellSize)
};
};
/**
* @private
*/
ns.FrameRenderer.prototype.renderFrame_ = function (frame) {
if (!this.canvas || frame.getWidth() != this.canvas.width || frame.getHeight() != this.canvas.height) {
this.canvas = pskl.CanvasUtils.createCanvas(frame.getWidth(), frame.getHeight());
}
var context = this.canvas.getContext('2d');
for(var x = 0, width = frame.getWidth(); x < width; x++) {
for(var y = 0, height = frame.getHeight(); y < height; y++) {
var color = frame.getPixel(x, y);
this.renderPixel_(color, x, y, context);
}
}
this.updateMargins_();
context = this.displayCanvas.getContext('2d');
context.save();
if (this.canvas.width*this.zoom < this.displayCanvas.width) {
context.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
context.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
}
context.translate(
this.margin.x-this.offset.x*this.zoom,
this.margin.y-this.offset.y*this.zoom
);
context.clearRect(0, 0, this.canvas.width*this.zoom, this.canvas.height*this.zoom);
var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10;
if (this.isGridEnabled() || isIE10) {
var gridWidth = this.isGridEnabled() ? Constants.GRID_STROKE_WIDTH : 0;
var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth);
context.drawImage(scaled, 0, 0);
} else {
context.scale(this.zoom, this.zoom);
context.drawImage(this.canvas, 0, 0);
}
context.restore();
};
})();

View File

@@ -0,0 +1,67 @@
(function () {
var ns = $.namespace('pskl.rendering.layer');
ns.LayersRenderer = function (container, renderingOptions, piskelController) {
pskl.rendering.CompositeRenderer.call(this);
this.piskelController = piskelController;
// Do not use CachedFrameRenderers here, since the caching will be performed in the render method of LayersRenderer
this.belowRenderer = new pskl.rendering.frame.FrameRenderer(container, renderingOptions, ["layers-canvas", "layers-below-canvas"]);
this.aboveRenderer = new pskl.rendering.frame.FrameRenderer(container, renderingOptions, ["layers-canvas", "layers-above-canvas"]);
this.add(this.belowRenderer);
this.add(this.aboveRenderer);
this.serializedRendering = '';
};
pskl.utils.inherit(pskl.rendering.layer.LayersRenderer, pskl.rendering.CompositeRenderer);
ns.LayersRenderer.prototype.render = function () {
var offset = this.getOffset();
var size = this.getDisplaySize();
var layers = this.piskelController.getLayers();
var currentFrameIndex = this.piskelController.currentFrameIndex;
var currentLayerIndex = this.piskelController.currentLayerIndex;
var serializedRendering = [
this.getZoom(),
this.isGridEnabled(),
offset.x,
offset.y,
size.width,
size.height,
currentFrameIndex,
currentLayerIndex,
layers.length
].join("-");
if (this.serializedRendering != serializedRendering) {
this.serializedRendering = serializedRendering;
this.clear();
var downLayers = layers.slice(0, currentLayerIndex);
if (downLayers.length > 0) {
var downFrame = this.getFrameForLayersAt_(currentFrameIndex, downLayers);
this.belowRenderer.render(downFrame);
}
var upLayers = layers.slice(currentLayerIndex + 1, layers.length);
if (upLayers.length > 0) {
var upFrame = this.getFrameForLayersAt_(currentFrameIndex, upLayers);
this.aboveRenderer.render(upFrame);
}
}
};
ns.LayersRenderer.prototype.getFrameForLayersAt_ = function (frameIndex, layers) {
var frames = layers.map(function (l) {
return l.getFrameAt(frameIndex);
});
return pskl.utils.FrameUtils.merge(frames);
};
})();