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

Encapsulate canvas element in FrameRenderer

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

22
js/controller/AnimatedPreviewController.js
View File

@ -8,29 +8,18 @@
this.fps = parseInt($("#preview-fps")[0].value, 10);
this.renderer = new pskl.rendering.FrameRenderer(dpi);
this.renderer = new pskl.rendering.FrameRenderer(this.container, this.dpi);
};
ns.AnimatedPreviewController.prototype.init = function () {
this.initDom();
this.renderer.init(this.framesheet.getFrameByIndex(this.animIndex));
this.startAnimationTimer();
};
ns.AnimatedPreviewController.prototype.initDom = function () {
var frame = this.framesheet.getFrameByIndex(0);
var height = frame.getHeight() * this.dpi,
width = frame.getWidth() * this.dpi;
previewCanvas = document.createElement('canvas');
previewCanvas.className = 'canvas';
this.container.setAttribute('style', 'width:' + width + 'px; height:' + height + 'px;');
previewCanvas.setAttribute('width', width);
previewCanvas.setAttribute('height', height);
this.container.appendChild(previewCanvas);
this.previewCanvas = previewCanvas;
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
};
@ -54,8 +43,7 @@
if (!this.framesheet.hasFrameAtIndex(this.animIndex)) {
this.animIndex = 0;
}
this.renderer.render(this.framesheet.getFrameByIndex(this.animIndex), this.previewCanvas);
this.renderer.render(this.framesheet.getFrameByIndex(this.animIndex));
this.animIndex++;
this.startAnimationTimer();
};

57
js/controller/DrawingController.js
View File

@ -5,60 +5,37 @@
// Public
this.frame = frame;
this.overlay = pskl.model.Frame.createEmptyFromFrame(frame);
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(frame); // Type is frame
// Private
this.container = container;
this.mainCanvas = this.createMainCanvas();
this.overlayCanvas = this.createOverlayCanvas();
this.renderer = new pskl.rendering.FrameRenderer(dpi);
this.renderer = new pskl.rendering.FrameRenderer(this.container, dpi, "drawing-canvas");
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, dpi, "canvas-overlay");
//this.mainCanvas = this.createMainCanvas();
//this.overlayCanvas = this.createOverlayCanvas();
this.renderer.init(this.frame);
this.overlayRenderer.init(this.frame);
};
ns.DrawingController.prototype.updateDPI = function (newDPI) {
//this.renderer.updateDPI(newDPI);
//this.overlayRenderer.updateDPI(newDPI);
};
ns.DrawingController.prototype.renderFrame = function () {
this.renderer.render(this.frame, this.mainCanvas);
this.renderer.render(this.frame);
};
ns.DrawingController.prototype.renderFramePixel = function (col, row) {
this.renderer.drawPixel(col, row, this.frame, this.mainCanvas);
this.renderer.drawPixel(col, row, this.frame);
};
ns.DrawingController.prototype.renderOverlay = function () {
this.renderer.render(this.overlay, this.overlayCanvas);
this.overlayRenderer.render(this.overlayFrame);
};
ns.DrawingController.prototype.clearOverlay = function () {
this.overlay = pskl.model.Frame.createEmptyFromFrame(this.frame);
this.overlayCanvas.getContext("2d").clearRect(0, 0, this.overlayCanvas.width, this.overlayCanvas.height);
};
ns.DrawingController.prototype.createMainCanvas = function () {
var mainCanvas = this.createCanvas();
mainCanvas.className = "drawing-canvas";
this.container.appendChild(mainCanvas);
return mainCanvas;
};
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
// will help to visualize the tool interaction (without modifying the canvas).
ns.DrawingController.prototype.createOverlayCanvas = function () {
var overlayCanvas = this.createCanvas();
overlayCanvas.className = "canvas-overlay";
this.container.appendChild(overlayCanvas);
return overlayCanvas;
};
// For some tools, we need a fake canvas that overlay the drawing canvas. These tools are
// generally 'drap and release' based tools (stroke, selection, etc) and the fake canvas
// will help to visualize the tool interaction (without modifying the canvas).
ns.DrawingController.prototype.createCanvas = function () {
var width = this.frame.getWidth(),
height = this.frame.getHeight();
var canvas = document.createElement("canvas");
canvas.setAttribute("width", width * this.dpi);
canvas.setAttribute("height", height * this.dpi);
return canvas;
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(this.frame);
this.overlayRenderer.clear();
};
})();

26
js/controller/PreviewFilmController.js
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);