piskel/js/app.js

263 lines
8.5 KiB
JavaScript
Raw Normal View History

/**
* @require Constants
* @require Events
*/
(function () {
var ns = $.namespace("pskl");
/**
* Main application controller
*/
ns.app = {
init : function () {
var size = this.readSizeFromURL_();
var piskel = new pskl.model.Piskel(size.width, size.height);
var layer = new pskl.model.Layer("Layer 1");
var frame = new pskl.model.Frame(size.width, size.height);
layer.addFrame(frame);
piskel.addLayer(layer);
this.piskelController = new pskl.controller.PiskelController(piskel);
this.drawingController = new pskl.controller.DrawingController(this.piskelController, $('#drawing-canvas-container'));
this.drawingController.init();
this.animationController = new pskl.controller.AnimatedPreviewController(this.piskelController, $('#preview-canvas-container'));
2012-09-05 02:09:42 +04:00
this.animationController.init();
this.previewsController = new pskl.controller.PreviewFilmController(this.piskelController, $('#preview-list'));
2012-09-05 02:09:42 +04:00
this.previewsController.init();
this.layersListController = new pskl.controller.LayersListController(this.piskelController);
this.layersListController.init();
this.settingsController = new pskl.controller.SettingsController(this.piskelController);
2013-06-16 12:17:50 +04:00
this.settingsController.init();
this.selectionManager = new pskl.selection.SelectionManager(this.piskelController);
this.selectionManager.init();
this.historyService = new pskl.service.HistoryService(this.piskelController);
2012-09-16 15:10:05 +04:00
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(this.piskelController);
this.localStorageService.init();
2013-09-07 19:50:43 +04:00
this.imageUploadService = new pskl.service.ImageUploadService();
this.imageUploadService.init();
this.toolController = new pskl.controller.ToolController();
this.toolController.init();
this.paletteController = new pskl.controller.PaletteController();
this.paletteController.init();
var drawingLoop = new pskl.rendering.DrawingLoop();
drawingLoop.addCallback(this.render, this);
drawingLoop.start();
this.initBootstrapTooltips_();
/**
* True when piskel is running in static mode (no back end needed).
* When started from APP Engine, appEngineToken_ (Boolean) should be set on window.pskl
*/
this.isStaticVersion = !pskl.appEngineToken_;
if (this.isStaticVersion) {
2013-10-10 02:06:11 +04:00
this.finishInitStatic_();
2012-08-30 03:16:13 +04:00
} else {
2013-10-10 02:06:11 +04:00
this.finishInitAppEngine_();
}
},
finishInitStatic_ : function () {
var framesheetId = this.readFramesheetIdFromURL_();
if (framesheetId) {
$.publish(Events.SHOW_NOTIFICATION, [{
"content" : "Loading animation with id : [" + framesheetId + "]"
}]);
this.loadFramesheetFromService(framesheetId);
} else {
this.localStorageService.displayRestoreNotification();
}
},
finishInitAppEngine_ : function () {
if (pskl.framesheetData_ && pskl.framesheetData_.content) {
var piskel = pskl.utils.Serializer.createPiskel(pskl.framesheetData_.content);
piskel.app.PiskelController.setPiskel(piskel);
pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
2012-08-30 03:16:13 +04:00
}
},
initBootstrapTooltips_ : function () {
$('body').tooltip({
selector: '[rel=tooltip]'
});
},
render : function (delta) {
this.drawingController.render(delta);
this.animationController.render(delta);
this.previewsController.render(delta);
},
2012-09-16 20:48:32 +04:00
readSizeFromURL_ : function () {
var sizeParam = this.readUrlParameter_("size"),
size;
2012-09-16 20:48:32 +04:00
// 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);
2012-09-16 20:48:32 +04:00
size = {
height : Math.min(height, Constants.MAX_HEIGHT),
2012-09-17 01:47:37 +04:00
width : Math.min(width, Constants.MAX_WIDTH)
2012-09-16 20:48:32 +04:00
};
} else {
size = {
height : Constants.DEFAULT.HEIGHT,
width : Constants.DEFAULT.WIDTH
};
2012-09-16 20:48:32 +04:00
}
return size;
},
readFramesheetIdFromURL_ : function () {
2012-09-16 20:48:32 +04:00
return this.readUrlParameter_("frameId");
},
readUrlParameter_ : function (paramName) {
var searchString = window.location.search.substring(1),
i, val, params = searchString.split("&");
2012-09-16 20:48:32 +04:00
for (i = 0; i < params.length; i++) {
2012-09-16 20:48:32 +04:00
val = params[i].split("=");
if (val[0] == paramName) {
return window.unescape(val[1]);
2012-09-16 20:48:32 +04:00
}
2012-08-30 03:16:13 +04:00
}
2012-09-16 20:48:32 +04:00
return "";
2012-08-30 03:16:13 +04:00
},
loadFramesheetFromService : function (frameId) {
var xhr = new XMLHttpRequest();
2013-10-10 02:06:11 +04:00
xhr.open('GET', Constants.STATIC.URL.GET + '?l=' + frameId, true);
2012-08-30 03:16:13 +04:00
xhr.responseType = 'text';
xhr.onload = function (e) {
2012-09-21 01:57:26 +04:00
var res = JSON.parse(this.responseText);
2013-10-10 02:06:11 +04:00
var piskel = pskl.utils.Serializer.createPiskel(res.framesheet);
pskl.app.piskelController.setPiskel(piskel);
pskl.app.animationController.setFPS(res.fps);
$.publish(Events.HIDE_NOTIFICATION);
2012-08-30 03:16:13 +04:00
};
xhr.onerror = function () {
$.publish(Events.HIDE_NOTIFICATION);
2012-08-30 03:16:13 +04:00
};
xhr.send();
2012-08-30 01:32:51 +04:00
},
2012-08-30 01:01:04 +04:00
2013-10-10 02:06:11 +04:00
storeSheet : function (event) {
if (this.isStaticVersion) {
this.storeSheetStatic_();
} else {
this.storeSheetAppEngine_();
}
if(event) {
event.stopPropagation();
event.preventDefault();
}
return false;
},
2013-10-10 02:06:11 +04:00
storeSheetStatic_ : function () {
2012-08-30 03:16:13 +04:00
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('framesheet_content', this.piskelController.serialize());
formData.append('fps_speed', $('#preview-fps').val());
2013-10-10 02:06:11 +04:00
xhr.open('POST', Constants.STATIC.URL.SAVE, true);
2013-10-10 02:06:11 +04:00
xhr.onload = function(e) {
if (this.status == 200) {
var baseUrl = window.location.href.replace(window.location.search, "");
window.location.href = baseUrl + "?frameId=" + this.responseText;
} else {
this.onerror(e);
}
};
xhr.onerror = function(e) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
};
xhr.send(formData);
},
2013-10-10 02:06:11 +04:00
storeSheetAppEngine_ : function () {
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('framesheet_content', this.piskelController.serialize());
formData.append('fps_speed', $('#preview-fps').val());
formData.append('name', $('#piskel-name').val());
formData.append('frames', this.piskelController.getFrameCount());
formData.append('preview', this.getFirstFrameAsPng());
formData.append('framesheet', this.getFramesheetAsPng());
2013-10-10 02:06:11 +04:00
xhr.open('POST', Constants.APPENGINE.URL.SAVE, true);
xhr.onload = function(e) {
2012-08-30 03:16:13 +04:00
if (this.status == 200) {
2013-10-10 02:06:11 +04:00
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
} else {
this.onerror(e);
2012-08-30 03:16:13 +04:00
}
};
xhr.onerror = function(e) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
};
2012-08-30 03:16:13 +04:00
xhr.send(formData);
2013-10-10 02:06:11 +04:00
},
2012-08-30 03:16:13 +04:00
2013-10-10 02:06:11 +04:00
getFirstFrameAsPng : function () {
var firstFrame = this.piskelController.getFrameAt(0);
var frameRenderer = new pskl.rendering.CanvasRenderer(firstFrame, 1);
frameRenderer.drawTransparentAs('rgba(0,0,0,0)');
var firstFrameCanvas = frameRenderer.render().canvas;
return firstFrameCanvas.toDataURL("image/png");
},
getFramesheetAsPng : function () {
var renderer = new pskl.rendering.SpritesheetRenderer(this.piskelController);
var framesheetCanvas = renderer.render();
return framesheetCanvas.toDataURL("image/png");
},
uploadAsSpritesheetPNG : function () {
2013-10-10 02:06:11 +04:00
var imageData = this.getFramesheetAsPng();
this.imageUploadService.upload(imageData, this.openWindow.bind(this));
},
openWindow : function (url) {
var options = [
"dialog=yes", "scrollbars=no", "status=no",
"width=" + this.piskelController.getWidth() * this.piskelController.getFrameCount(),
"height=" + this.piskelController.getHeight()
].join(",");
window.open(url, "piskel-export", options);
}
};
})();