piskel/js/piskel.js

232 lines
6.5 KiB
JavaScript
Raw Normal View History

/**
* @require Constants
* @require Events
*/
$.namespace("pskl");
(function () {
/**
* FrameSheetModel instance.
*/
2012-09-05 02:09:42 +04:00
var frameSheet,
// Configuration:
// Canvas size in pixel size (not dpi related)
2012-09-08 18:32:28 +04:00
framePixelWidth = 32,
framePixelHeight = 32,
// Scaling factors for a given frameSheet rendering:
// Main drawing area:
2012-09-08 18:32:28 +04:00
drawingCanvasDpi = 20,
// Canvas preview film canvases:
previewTileCanvasDpi = 4,
// Animated canvas preview:
previewAnimationCanvasDpi = 8,
activeFrameIndex = -1,
currentFrame = null;
/**
* Main application controller
*/
var piskel = {
init : function () {
2012-09-08 18:32:28 +04:00
piskel.initDPIs_();
2012-09-06 02:23:24 +04:00
frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
frameSheet.addEmptyFrame();
2012-09-05 02:09:42 +04:00
this.drawingController = new pskl.controller.DrawingController(
2012-09-06 02:23:24 +04:00
frameSheet.getFrameByIndex(0),
$('#drawing-canvas-container'),
drawingCanvasDpi
);
this.setActiveFrame(0);
2012-09-05 02:09:42 +04:00
this.animationController = new pskl.controller.AnimatedPreviewController(
frameSheet,
$('#preview-canvas-container'),
2012-09-05 02:09:42 +04:00
previewAnimationCanvasDpi
);
this.previewsController = new pskl.controller.PreviewFilmController(
frameSheet,
$('#preview-list'),
2012-09-05 02:09:42 +04:00
previewTileCanvasDpi
);
this.animationController.init();
this.previewsController.init();
pskl.HistoryManager.init();
pskl.NotificationService.init();
pskl.LocalStorageService.init(frameSheet);
// TODO: Add comments
var framesheetId = this.getFramesheetIdFromUrl();
if (framesheetId) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
this.loadFramesheetFromService(framesheetId);
2012-08-30 03:16:13 +04:00
} else {
this.finishInit();
pskl.LocalStorageService.displayRestoreNotification();
2012-08-30 03:16:13 +04:00
}
$.subscribe('SET_ACTIVE_FRAME', function(evt, frameId) {
piskel.setActiveFrame(frameId);
});
$.subscribe('FRAMESHEET_RESET', function(evt, frameId) {
piskel.redraw();
});
var drawingLoop = new pskl.rendering.DrawingLoop();
drawingLoop.addCallback(this.render, this);
drawingLoop.start();
},
render : function (delta) {
this.drawingController.render(delta);
this.animationController.render(delta);
this.previewsController.render(delta);
2012-08-30 03:16:13 +04:00
},
2012-09-08 18:32:28 +04:00
/**
* Override default DPIs.
* @private
*/
initDPIs_ : function() {
drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
// TODO(vincz): Add throttling on window.resize event.
$(window).resize($.proxy(function() {
drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
this.drawingController.updateDPI(drawingCanvasDpi);
}, this));
// TODO(vincz): Check for user settings eventually from localstorage.
},
/**
* @private
*/
calculateDPIsForDrawingCanvas_ : function() {
2012-09-09 01:59:13 +04:00
var availableViewportHeight = $('.main-panel').height() - 50,
availableViewportWidth = $('.main-panel').width(),
previewHeight = $(".preview-container").height(),
previewWidth = $(".preview-container").width();
var heightBoundDpi = Math.floor(availableViewportHeight / framePixelHeight),
widthBoundDpi = Math.floor(availableViewportWidth / framePixelWidth);
var dpi = Math.min(heightBoundDpi, widthBoundDpi);
var drawingCanvasHeight = dpi * framePixelHeight;
var drawingCanvasWidth = dpi * framePixelWidth;
// Check if preview and drawing canvas overlap
var heightGap = drawingCanvasHeight + previewHeight - availableViewportHeight,
widthGap = drawingCanvasWidth + previewWidth - availableViewportWidth;
if (heightGap > 0 && widthGap > 0) {
// Calculate the DPI change needed to bridge height and width gap
var heightGapDpi = Math.ceil(heightGap / framePixelHeight),
widthGapDpi = Math.ceil(widthGap / framePixelWidth);
// substract smallest dpi change to initial dpi
dpi -= Math.min(heightGapDpi, widthGapDpi);
}
return dpi;
2012-09-08 18:32:28 +04:00
},
2012-08-30 03:16:13 +04:00
finishInit : function () {
$.subscribe(Events.REFRESH, function() {
piskel.setActiveFrame(0);
});
pskl.ToolSelector.init();
pskl.Palette.init(frameSheet);
2012-08-30 03:16:13 +04:00
},
getFramesheetIdFromUrl : function() {
2012-08-30 03:16:13 +04:00
var href = window.location.href;
// TODO: Change frameId to framesheetId on the backend
2012-08-30 03:16:13 +04:00
if (href.indexOf('frameId=') != -1) {
return href.substring(href.indexOf('frameId=')+8);
}
},
loadFramesheetFromService : function (frameId) {
var xhr = new XMLHttpRequest();
// TODO: Change frameId to framesheetId on the backend
xhr.open('GET', Constants.PISKEL_SERVICE_URL + '/get?l=' + frameId, true);
2012-08-30 03:16:13 +04:00
xhr.responseType = 'text';
xhr.onload = function(e) {
frameSheet.deserialize(this.responseText);
piskel.setActiveFrame(0);
$.publish(Events.HIDE_NOTIFICATION);
2012-08-30 03:16:13 +04:00
piskel.finishInit();
};
xhr.onerror = function () {
$.publish(Events.HIDE_NOTIFICATION);
2012-08-30 03:16:13 +04:00
piskel.finishInit();
piskel.setActiveFrame(0);
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
setActiveFrame: function(index) {
activeFrameIndex = index;
this.drawingController.frame = this.getCurrentFrame();
},
getActiveFrameIndex: function() {
if(-1 == activeFrameIndex) {
2012-09-05 02:09:42 +04:00
throw "Bad active frame initialization."
}
return activeFrameIndex;
},
getCurrentFrame : function () {
return frameSheet.getFrameByIndex(activeFrameIndex);
},
// TODO(julz): Create package ?
2012-08-30 03:16:13 +04:00
storeSheet : function (event) {
// TODO Refactor using jquery ?
2012-08-30 03:16:13 +04:00
var xhr = new XMLHttpRequest();
var formData = new FormData();
formData.append('framesheet_content', frameSheet.serialize());
formData.append('fps_speed', $('#preview-fps').val());
xhr.open('POST', Constants.PISKEL_SERVICE_URL + "/store", true);
2012-08-30 03:16:13 +04:00
xhr.onload = function(e) {
if (this.status == 200) {
2012-08-30 03:26:14 +04:00
var baseUrl = window.location.href.replace(window.location.search, "");
window.location.href = baseUrl + "?frameId=" + this.responseText;
2012-08-30 03:16:13 +04:00
}
};
xhr.send(formData);
2012-09-05 01:48:02 +04:00
if(event) {
event.stopPropagation();
event.preventDefault();
}
2012-08-30 03:16:13 +04:00
return false;
}
};
window.piskel = piskel;
piskel.init();
})();