Encapsulate canvas element in FrameRenderer

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)
This commit is contained in:
Vince
2012-09-08 15:08:00 +02:00
parent 9411b2e3ae
commit eb7511c721
5 changed files with 85 additions and 72 deletions

View File

@@ -6,13 +6,15 @@
this.framesheet = framesheet;
this.container = container;
this.renderer = new pskl.rendering.FrameRenderer(dpi);
//this.renderer = new pskl.rendering.FrameRenderer(this.container, dpi);
};
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 () {
@@ -28,9 +30,9 @@
};
ns.PreviewFilmController.prototype.createPreviewTile = function(tileNumber) {
var frame = this.framesheet.getFrameByIndex(tileNumber);
var width = frame.getWidth() * this.dpi,
height = frame.getHeight() * this.dpi;
var currentFrame = this.framesheet.getFrameByIndex(tileNumber);
//var width = frame.getWidth() * this.dpi,
// height = frame.getHeight() * this.dpi;
var previewTileRoot = document.createElement("li");
var classname = "preview-tile";
@@ -42,18 +44,19 @@
var canvasContainer = document.createElement("div");
canvasContainer.className = "canvas-container";
canvasContainer.setAttribute('style', 'width:' + width + 'px; height:' + height + 'px;');
//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')) {
@@ -69,8 +72,13 @@
piskel.duplicateFrame(tileNumber);
});
this.renderer.render(this.framesheet.getFrameByIndex(tileNumber), canvasPreview);
canvasContainer.appendChild(canvasPreview);
//this.renderer.render(this.framesheet.getFrameByIndex(tileNumber), canvasPreview);
// TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
// is to make this update function (#createPreviewTile) less aggressive.
var currentFrameRenderer = new pskl.rendering.FrameRenderer(canvasContainer, this.dpi, "tile-view");
currentFrameRenderer.init(currentFrame);
previewTileRoot.appendChild(canvasContainer);
previewTileRoot.appendChild(canvasPreviewDuplicateAction);