mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
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:
@@ -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);
|
||||
|
||||
|
Reference in New Issue
Block a user