(function () { var ns = $.namespace("pskl.controller"); ns.AnimatedPreviewController = function (piskelController, container, dpi) { this.piskelController = piskelController; this.container = container; this.elapsedTime = 0; this.currentIndex = 0; this.setFPS(Constants.DEFAULT.FPS); var renderingOptions = { "zoom": this.calculateZoom_(), "height" : "auto", "width" : "auto" }; this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions); $.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this)); }; ns.AnimatedPreviewController.prototype.init = function () { // the oninput event won't work on IE10 unfortunately, but at least will provide a // consistent behavior across all other browsers that support the input type range // see https://bugzilla.mozilla.org/show_bug.cgi?id=853670 $("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this)); }; ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) { this.setFPS(parseInt($("#preview-fps")[0].value, 10)); }; ns.AnimatedPreviewController.prototype.setFPS = function (fps) { this.fps = fps; $("#preview-fps").val(this.fps); $("#display-fps").html(this.fps + " FPS"); }; ns.AnimatedPreviewController.prototype.getFPS = function () { return this.fps; }; ns.AnimatedPreviewController.prototype.render = function (delta) { this.elapsedTime += delta; var index = Math.floor(this.elapsedTime / (1000/this.fps)); if (index != this.currentIndex) { this.currentIndex = index; if (!this.piskelController.hasFrameAt(this.currentIndex)) { this.currentIndex = 0; this.elapsedTime = 0; } this.renderer.render(this.piskelController.getFrameAt(this.currentIndex)); } }; /** * Calculate the preview DPI depending on the framesheet size */ ns.AnimatedPreviewController.prototype.calculateZoom_ = function () { var previewSize = 200, framePixelHeight = this.piskelController.getCurrentFrame().getHeight(), framePixelWidth = this.piskelController.getCurrentFrame().getWidth(); // TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?) //return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth); return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth); }; ns.AnimatedPreviewController.prototype.updateDPI_ = function () { this.dpi = this.calculateDPI_(); this.renderer.setDPI(this.dpi); }; })();