mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
![jdescottes](/assets/img/avatar_default.png)
- Initial implementation : working but ... - MODEL_VERSION has been bumped to 2 - The loading process is now theoretically asynchronous (loading images to read the content of the layers), but for now, the asynchronous behaviour is hidden behind a nasty hack, which is somehow similar to lazy loading. When loading the piskel, a Piskel is created synchronously, with fake empty frames, and as the images will get loaded, the fake frames will be replaced by the actual frames. I really don't like this, and the asynchronous nature of the loading should be clearly expressed - There is no backward compatible deserializer for the previous version of the model (1) - The Serializer utils is just badly designed. Serialization and deserialization should be splitted into two different classes - Saving & loading are still done in app.js and should be moved to services BUT : the size of the piskels is now pretty small. A piskel which was using 890kB previously is now using only 10kB. Although it should be noted, that after gzip there is no significant difference between this version and the existing one. The only gains we can really expect with this are : less disk space used on appengine, ability to reuse the layers' pngs directly on piskel-website (but to be honest I can't see any valid use case for this)
263 lines
8.5 KiB
JavaScript
263 lines
8.5 KiB
JavaScript
/**
|
|
* @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'));
|
|
this.animationController.init();
|
|
|
|
this.previewsController = new pskl.controller.PreviewFilmController(this.piskelController, $('#preview-list'));
|
|
this.previewsController.init();
|
|
|
|
this.layersListController = new pskl.controller.LayersListController(this.piskelController);
|
|
this.layersListController.init();
|
|
|
|
this.settingsController = new pskl.controller.settings.SettingsController(this.piskelController);
|
|
this.settingsController.init();
|
|
|
|
this.selectionManager = new pskl.selection.SelectionManager(this.piskelController);
|
|
this.selectionManager.init();
|
|
|
|
this.historyService = new pskl.service.HistoryService(this.piskelController);
|
|
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();
|
|
|
|
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) {
|
|
this.finishInitStatic_();
|
|
} else {
|
|
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);
|
|
pskl.app.piskelController.setPiskel(piskel);
|
|
pskl.app.animationController.setFPS(pskl.framesheetData_.fps);
|
|
}
|
|
},
|
|
|
|
initBootstrapTooltips_ : function () {
|
|
$('body').tooltip({
|
|
selector: '[rel=tooltip]'
|
|
});
|
|
},
|
|
|
|
render : function (delta) {
|
|
this.drawingController.render(delta);
|
|
this.animationController.render(delta);
|
|
this.previewsController.render(delta);
|
|
},
|
|
|
|
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 = {
|
|
height : Constants.DEFAULT.HEIGHT,
|
|
width : Constants.DEFAULT.WIDTH
|
|
};
|
|
}
|
|
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 < params.length; i++) {
|
|
val = params[i].split("=");
|
|
if (val[0] == paramName) {
|
|
return window.unescape(val[1]);
|
|
}
|
|
}
|
|
return "";
|
|
},
|
|
|
|
loadFramesheetFromService : function (frameId) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', Constants.STATIC.URL.GET + '?l=' + frameId, true);
|
|
xhr.responseType = 'text';
|
|
xhr.onload = function (e) {
|
|
var res = JSON.parse(this.responseText);
|
|
var piskel = pskl.utils.Serializer.createPiskel(res.framesheet);
|
|
pskl.app.piskelController.setPiskel(piskel);
|
|
pskl.app.animationController.setFPS(res.fps);
|
|
$.publish(Events.HIDE_NOTIFICATION);
|
|
};
|
|
|
|
xhr.onerror = function () {
|
|
$.publish(Events.HIDE_NOTIFICATION);
|
|
};
|
|
|
|
xhr.send();
|
|
},
|
|
|
|
storeSheet : function (event) {
|
|
if (this.isStaticVersion) {
|
|
this.storeSheetStatic_();
|
|
} else {
|
|
this.storeSheetAppEngine_();
|
|
}
|
|
|
|
if(event) {
|
|
event.stopPropagation();
|
|
event.preventDefault();
|
|
}
|
|
return false;
|
|
},
|
|
|
|
storeSheetStatic_ : function () {
|
|
var xhr = new XMLHttpRequest();
|
|
var formData = new FormData();
|
|
formData.append('framesheet_content', this.piskelController.serialize());
|
|
formData.append('fps_speed', $('#preview-fps').val());
|
|
|
|
xhr.open('POST', Constants.STATIC.URL.SAVE, true);
|
|
|
|
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);
|
|
},
|
|
|
|
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());
|
|
|
|
xhr.open('POST', Constants.APPENGINE.URL.SAVE, true);
|
|
|
|
xhr.onload = function(e) {
|
|
if (this.status == 200) {
|
|
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Successfully saved !"}]);
|
|
} else {
|
|
this.onerror(e);
|
|
}
|
|
};
|
|
xhr.onerror = function(e) {
|
|
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Saving failed ("+this.status+")"}]);
|
|
};
|
|
xhr.send(formData);
|
|
},
|
|
|
|
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.PiskelRenderer(this.piskelController);
|
|
var framesheetCanvas = renderer.renderAsCanvas();
|
|
return framesheetCanvas.toDataURL("image/png");
|
|
},
|
|
|
|
uploadAsSpritesheetPNG : function () {
|
|
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);
|
|
}
|
|
};
|
|
})();
|