2012-08-31 12:45:07 +04:00
|
|
|
/**
|
|
|
|
* @require Constants
|
|
|
|
* @require Events
|
|
|
|
*/
|
|
|
|
$.namespace("pskl");
|
|
|
|
|
|
|
|
(function () {
|
2012-08-27 04:05:13 +04:00
|
|
|
|
2012-09-03 03:24:55 +04:00
|
|
|
/**
|
|
|
|
* FrameSheetModel instance.
|
|
|
|
*/
|
2012-09-05 02:09:42 +04:00
|
|
|
var frameSheet,
|
2012-08-27 04:05:13 +04:00
|
|
|
|
|
|
|
// Configuration:
|
|
|
|
// Canvas size in pixel size (not dpi related)
|
2012-09-08 18:32:28 +04:00
|
|
|
framePixelWidth = 32,
|
|
|
|
framePixelHeight = 32,
|
2012-08-27 04:05:13 +04:00
|
|
|
|
|
|
|
// 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,
|
2012-08-27 04:05:13 +04:00
|
|
|
|
2012-09-08 20:44:06 +04:00
|
|
|
activeFrameIndex = -1,
|
2012-08-31 12:45:07 +04:00
|
|
|
currentFrame = null;
|
2012-08-23 02:57:35 +04:00
|
|
|
|
2012-09-03 03:24:55 +04:00
|
|
|
/**
|
|
|
|
* Main application controller
|
|
|
|
*/
|
2012-08-23 02:57:35 +04:00
|
|
|
var piskel = {
|
2012-09-03 03:24:55 +04:00
|
|
|
|
2012-08-23 02:57:35 +04:00
|
|
|
init : function () {
|
2012-09-08 18:32:28 +04:00
|
|
|
|
|
|
|
piskel.initDPIs_();
|
|
|
|
|
2012-09-09 01:59:44 +04:00
|
|
|
|
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
|
|
|
|
2012-09-05 00:40:54 +04:00
|
|
|
this.drawingController = new pskl.controller.DrawingController(
|
2012-09-06 02:23:24 +04:00
|
|
|
frameSheet.getFrameByIndex(0),
|
2012-09-08 20:44:06 +04:00
|
|
|
$('#drawing-canvas-container'),
|
2012-09-05 00:18:00 +04:00
|
|
|
drawingCanvasDpi
|
|
|
|
);
|
|
|
|
|
2012-08-31 12:45:07 +04:00
|
|
|
this.setActiveFrame(0);
|
2012-09-05 02:09:42 +04:00
|
|
|
|
|
|
|
this.animationController = new pskl.controller.AnimatedPreviewController(
|
|
|
|
frameSheet,
|
2012-09-08 20:44:06 +04:00
|
|
|
$('#preview-canvas-container'),
|
2012-09-05 02:09:42 +04:00
|
|
|
previewAnimationCanvasDpi
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
|
|
this.previewsController = new pskl.controller.PreviewFilmController(
|
|
|
|
frameSheet,
|
2012-09-08 01:14:25 +04:00
|
|
|
$('#preview-list'),
|
2012-09-05 02:09:42 +04:00
|
|
|
previewTileCanvasDpi
|
|
|
|
);
|
|
|
|
|
|
|
|
this.animationController.init();
|
|
|
|
this.previewsController.init();
|
2012-09-07 02:18:59 +04:00
|
|
|
|
|
|
|
pskl.HistoryManager.init();
|
2012-09-03 03:24:55 +04:00
|
|
|
pskl.NotificationService.init();
|
|
|
|
pskl.LocalStorageService.init(frameSheet);
|
|
|
|
|
|
|
|
// TODO: Add comments
|
2012-09-03 22:45:25 +04:00
|
|
|
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();
|
2012-09-03 03:24:55 +04:00
|
|
|
pskl.LocalStorageService.displayRestoreNotification();
|
2012-08-30 03:16:13 +04:00
|
|
|
}
|
2012-09-09 01:59:44 +04:00
|
|
|
|
2012-09-08 20:44:06 +04:00
|
|
|
$.subscribe('SET_ACTIVE_FRAME', function(evt, frameId) {
|
|
|
|
piskel.setActiveFrameAndRedraw(frameId);
|
|
|
|
});
|
2012-09-08 21:00:03 +04:00
|
|
|
|
|
|
|
$.subscribe('FRAMESHEET_RESET', function(evt, frameId) {
|
|
|
|
piskel.redraw();
|
|
|
|
});
|
2012-09-09 01:59:44 +04:00
|
|
|
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-08-27 04:05: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,
|
2012-09-08 19:31:19 +04:00
|
|
|
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 () {
|
2012-08-31 12:45:07 +04:00
|
|
|
|
2012-09-08 20:44:06 +04:00
|
|
|
|
2012-09-03 03:24:55 +04:00
|
|
|
|
|
|
|
$.subscribe(Events.REFRESH, function() {
|
2012-09-09 01:59:44 +04:00
|
|
|
piskel.setActiveFrame(0);
|
2012-09-03 03:24:55 +04:00
|
|
|
});
|
|
|
|
|
|
|
|
pskl.ToolSelector.init();
|
2012-09-04 00:30:53 +04:00
|
|
|
pskl.Palette.init(frameSheet);
|
2012-08-30 03:16:13 +04:00
|
|
|
},
|
|
|
|
|
2012-09-03 22:45:25 +04:00
|
|
|
getFramesheetIdFromUrl : function() {
|
2012-08-30 03:16:13 +04:00
|
|
|
var href = window.location.href;
|
2012-09-03 22:45:25 +04:00
|
|
|
// 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();
|
2012-09-03 22:45:25 +04:00
|
|
|
// TODO: Change frameId to framesheetId on the backend
|
2012-09-03 03:24:55 +04:00
|
|
|
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);
|
2012-09-03 22:45:25 +04:00
|
|
|
piskel.setActiveFrame(0);
|
2012-09-03 03:24:55 +04:00
|
|
|
$.publish(Events.HIDE_NOTIFICATION);
|
2012-08-30 03:16:13 +04:00
|
|
|
piskel.finishInit();
|
|
|
|
};
|
|
|
|
|
|
|
|
xhr.onerror = function () {
|
2012-09-03 03:24:55 +04:00
|
|
|
$.publish(Events.HIDE_NOTIFICATION);
|
2012-08-30 03:16:13 +04:00
|
|
|
piskel.finishInit();
|
2012-09-09 01:59:44 +04:00
|
|
|
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
|
|
|
|
2012-08-27 04:05:13 +04:00
|
|
|
setActiveFrame: function(index) {
|
|
|
|
activeFrameIndex = index;
|
2012-09-07 02:18:59 +04:00
|
|
|
this.drawingController.frame = this.getCurrentFrame();
|
2012-08-27 04:05:13 +04:00
|
|
|
},
|
|
|
|
|
|
|
|
getActiveFrameIndex: function() {
|
|
|
|
if(-1 == activeFrameIndex) {
|
2012-09-05 02:09:42 +04:00
|
|
|
throw "Bad active frame initialization."
|
2012-08-27 04:05:13 +04:00
|
|
|
}
|
|
|
|
return activeFrameIndex;
|
|
|
|
},
|
|
|
|
|
2012-09-07 02:18:59 +04:00
|
|
|
getCurrentFrame : function () {
|
|
|
|
return frameSheet.getFrameByIndex(activeFrameIndex);
|
|
|
|
},
|
2012-08-31 12:45:07 +04:00
|
|
|
// TODO(julz): Create package ?
|
2012-08-30 03:16:13 +04:00
|
|
|
storeSheet : function (event) {
|
2012-09-03 03:24:55 +04:00
|
|
|
// 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());
|
2012-08-31 12:45:07 +04:00
|
|
|
formData.append('fps_speed', $('#preview-fps').val());
|
2012-09-03 03:24:55 +04:00
|
|
|
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;
|
2012-08-23 02:57:35 +04:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
window.piskel = piskel;
|
|
|
|
piskel.init();
|
|
|
|
|
2012-09-03 03:24:55 +04:00
|
|
|
})();
|