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

TiledPreview : follow up

Browse Source
This commit is contained in:
jdescottes
2014-05-08 20:45:05 +02:00
parent 98135d01f8
commit 6ad5bde5d1
19 changed files with 129 additions and 24108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/js/rendering/AbstractRenderer.js
View File

@@ -14,7 +14,6 @@
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;

18
src/js/rendering/CanvasRenderer.js
View File

@@ -19,12 +19,17 @@
ns.CanvasRenderer.prototype.render = function () {
var canvas = this.createCanvas_();
var context = canvas.getContext('2d');
this.frame.forEachPixel(function (color, x, y) {
this.renderPixel_(color, x, y, context);
}.bind(this));
return canvas;
var scaledCanvas = this.createCanvas_(this.zoom);
var scaledContext = scaledCanvas.getContext('2d');
pskl.CanvasUtils.disableImageSmoothing(scaledCanvas);
scaledContext.scale(this.zoom, this.zoom);
scaledContext.drawImage(canvas, 0, 0);
return scaledCanvas;
};
ns.CanvasRenderer.prototype.renderPixel_ = function (color, x, y, context) {
@@ -32,12 +37,13 @@
color = this.transparentColor_;
}
context.fillStyle = color;
context.fillRect(x * this.zoom, y * this.zoom, this.zoom, this.zoom);
context.fillRect(x, y, 1, 1);
};
ns.CanvasRenderer.prototype.createCanvas_ = function () {
var width = this.frame.getWidth() * this.zoom;
var height = this.frame.getHeight() * this.zoom;
ns.CanvasRenderer.prototype.createCanvas_ = function (zoom) {
zoom = zoom || 1;
var width = this.frame.getWidth() * zoom;
var height = this.frame.getHeight() * zoom;
return pskl.CanvasUtils.createCanvas(width, height);
};
})();

13
src/js/rendering/CompositeRenderer.js
View File

@@ -12,13 +12,6 @@
return this;
};
ns.CompositeRenderer.prototype.render = function (frame) {
this.renderers.forEach(function (renderer) {
renderer.render(frame);
});
};
ns.CompositeRenderer.prototype.clear = function () {
this.renderers.forEach(function (renderer) {
renderer.clear();
@@ -45,12 +38,6 @@
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);

50
src/js/rendering/frame/FrameRenderer.js
View File

@@ -58,7 +58,7 @@
this.setGridWidth(pskl.UserSettings.get(pskl.UserSettings.GRID_WIDTH));
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
$.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
};
pskl.utils.inherit(pskl.rendering.frame.FrameRenderer, pskl.rendering.AbstractRenderer);
@@ -70,18 +70,6 @@
}
};
ns.FrameRenderer.prototype.hide = function () {
if (this.displayCanvas) {
this.displayCanvas.style.display = 'none';
}
};
ns.FrameRenderer.prototype.show = function () {
if (this.displayCanvas) {
this.displayCanvas.style.display = 'block';
}
};
ns.FrameRenderer.prototype.clear = function () {
pskl.CanvasUtils.clear(this.canvas);
pskl.CanvasUtils.clear(this.displayCanvas);
@@ -130,10 +118,6 @@
};
};
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
@@ -160,11 +144,11 @@
}
};
ns.FrameRenderer.prototype.updateMargins_ = function () {
var deltaX = this.displayWidth - (this.zoom * this.canvas.width);
ns.FrameRenderer.prototype.updateMargins_ = function (frame) {
var deltaX = this.displayWidth - (this.zoom * frame.getWidth());
this.margin.x = Math.max(0, deltaX) / 2;
var deltaY = this.displayHeight - (this.zoom * this.canvas.height);
var deltaY = this.displayHeight - (this.zoom * frame.getHeight());
this.margin.y = Math.max(0, deltaY) / 2;
};
@@ -173,9 +157,7 @@
var width = this.displayWidth;
this.displayCanvas = pskl.CanvasUtils.createCanvas(width, height, this.classes);
if (true || this.zoom > 2) {
pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
}
pskl.CanvasUtils.disableImageSmoothing(this.displayCanvas);
this.container.append(this.displayCanvas);
};
@@ -244,22 +226,22 @@
}
}
this.updateMargins_();
this.updateMargins_(frame);
context = this.displayCanvas.getContext('2d');
context.save();
var displayContext = this.displayCanvas.getContext('2d');
displayContext.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);
displayContext.fillStyle = Constants.ZOOMED_OUT_BACKGROUND_COLOR;
displayContext.fillRect(0,0,this.displayCanvas.width, this.displayCanvas.height);
}
context.translate(
displayContext.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);
displayContext.clearRect(0, 0, this.canvas.width*this.zoom, this.canvas.height*this.zoom);
var isIE10 = pskl.utils.UserAgent.isIE && pskl.utils.UserAgent.version === 10;
@@ -267,11 +249,11 @@
var isGridEnabled = gridWidth > 0;
if (isGridEnabled || isIE10) {
var scaled = pskl.utils.ImageResizer.resizeNearestNeighbour(this.canvas, this.zoom, gridWidth);
context.drawImage(scaled, 0, 0);
displayContext.drawImage(scaled, 0, 0);
} else {
context.scale(this.zoom, this.zoom);
context.drawImage(this.canvas, 0, 0);
displayContext.scale(this.zoom, this.zoom);
displayContext.drawImage(this.canvas, 0, 0);
}
context.restore();
displayContext.restore();
};
})();

38
src/js/rendering/frame/TiledFrameRenderer.js
View File

@@ -1,46 +1,42 @@
(function () {
var ns = $.namespace('pskl.rendering.frame');
ns.TiledFrameRenderer = function (container) {
this.displayContainer = document.createElement('div');
container.get(0).appendChild(this.displayContainer);
this.displayContainer.style.backgroundRepeat = 'repeat';
this.displayContainer.classList.add('tiled-frame-renderer');
ns.TiledFrameRenderer = function (container, zoom) {
this.container = container;
this.setZoom(zoom);
this.displayContainer = document.createElement('div');
this.displayContainer.classList.add('tiled-frame-container');
container.get(0).appendChild(this.displayContainer);
this.updateBackgroundClass_(pskl.UserSettings.get(pskl.UserSettings.CANVAS_BACKGROUND));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
this.onUserSettingsChange_listener = this.onUserSettingsChange_.bind(this);
$.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_listener);
};
ns.TiledFrameRenderer.prototype.render = function (frame) {
var canvas = new pskl.utils.FrameUtils.toImage(frame);
var canvas = new pskl.utils.FrameUtils.toImage(frame, this.zoom);
this.displayContainer.style.backgroundImage = 'url(' + canvas.toDataURL('image/png') + ')';
};
ns.TiledFrameRenderer.prototype.hide = function () {
if (this.displayContainer) {
this.displayContainer.style.display = 'none';
}
};
ns.TiledFrameRenderer.prototype.show = function () {
if (this.displayContainer) {
this.displayContainer.style.display = 'block';
}
};
ns.TiledFrameRenderer.prototype.setZoom = Constants.EMPTY_FUNCTION;
ns.TiledFrameRenderer.prototype.setOffset = Constants.EMPTY_FUNCTION;
ns.TiledFrameRenderer.prototype.setZoom = function (zoom) {
this.zoom = zoom;
};
ns.TiledFrameRenderer.prototype.setDisplaySize = Constants.EMPTY_FUNCTION;
ns.TiledFrameRenderer.prototype.getZoom = function () {
return this.zoom;
};
ns.TiledFrameRenderer.prototype.onUserSettingsChange_ = function (evt, settingName, settingValue) {
if (settingName == pskl.UserSettings.CANVAS_BACKGROUND) {
this.updateBackgroundClass_(settingValue);
} else if (settingName == pskl.UserSettings.GRID_WIDTH) {
this.setGridWidth(settingValue);
}
};