/** * @require Constants * @require Events */ $.namespace("pskl"); (function () { /** * FrameSheetModel instance. */ var frameSheet; /** * Main application controller */ var piskel = { init : function () { var frameSize = this.readSizeFromURL_(); frameSheet = new pskl.model.FrameSheet(frameSize.height, frameSize.width); frameSheet.addEmptyFrame(); this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container')); this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container')); this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list')); // To catch the current active frame, the selection manager have to be initialized before // the 'frameSheet.setCurrentFrameIndex(0);' line below. // TODO(vincz): Slice each constructor to have: // - an event(s) listening init // - an event(s) triggering init // All listeners will be hook in a first step, then all event triggering inits will be called // in a second batch. this.selectionManager = new pskl.selection.SelectionManager(frameSheet, this.drawingController.overlayFrame); // DO NOT MOVE THIS LINE (see comment above) frameSheet.setCurrentFrameIndex(0); this.animationController.init(); this.previewsController.init(); this.historyService = new pskl.service.HistoryService(frameSheet); this.historyService.init(); this.keyboardEventService = new pskl.service.KeyboardEventService(); this.keyboardEventService.init(); this.notificationController = new pskl.controller.NotificationController(); this.notificationController.init(); this.localStorageService = new pskl.service.LocalStorageService(frameSheet); this.localStorageService.init(); // TODO: Add comments var framesheetId = this.readFramesheetIdFromURL_(); if (framesheetId) { $.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]); this.loadFramesheetFromService(framesheetId); } else { this.finishInit(); this.localStorageService.displayRestoreNotification(); } var drawingLoop = new pskl.rendering.DrawingLoop(); drawingLoop.addCallback(this.render, this); drawingLoop.start(); // Init (event-delegated) bootstrap tooltips: $('body').tooltip({ selector: '[rel=tooltip]' }); $('#canvas-picker').change(function(evt) { $('#canvas-picker option:selected').each(function() { console.log($(this).val()); $('html')[0].className = $(this).val(); }); }); }, render : function (delta) { this.drawingController.render(delta); this.animationController.render(delta); this.previewsController.render(delta); }, finishInit : function () { var toolController = new pskl.controller.ToolController(); toolController.init(); var paletteController = new pskl.controller.PaletteController(); paletteController.init(frameSheet); }, readSizeFromURL_ : function () { var sizeParam = this.readUrlParameter_("size"), size; // parameter expected as size=64x48 => size=widthxheight var parts = sizeParam.split("x"); if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) { var width = parseInt(parts[0], 10), height = parseInt(parts[1], 10); size = { height : Math.min(height, Constants.MAX_HEIGHT), width : Math.min(width, Constants.MAX_WIDTH) }; } else { size = Constants.DEFAULT_SIZE; } return size; }, readFramesheetIdFromURL_ : function() { return this.readUrlParameter_("frameId"); }, readUrlParameter_ : function (paramName) { var searchString = window.location.search.substring(1), i, val, params = searchString.split("&"); for (i=0;i