piskel/js/piskel.js

315 lines
9.4 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,
// Temporary zoom implementation to easily get bigger canvases to
// see how good perform critical algorithms on big canvas.
zoom = 1,
// Configuration:
// Canvas size in pixel size (not dpi related)
framePixelWidth = 32 * zoom,
framePixelHeight = 32 * zoom,
// Scaling factors for a given frameSheet rendering:
// Main drawing area:
drawingCanvasDpi = Math.ceil(20/ zoom),
// Canvas previous in the slideshow:
previewTileCanvasDpi = Math.ceil(4 / zoom),
// Ainmated canvas preview:
previewAnimationCanvasDpi = Math.ceil(8 / zoom),
// DOM references:
drawingAreaContainer,
drawingAreaCanvas,
previewCanvas,
// States:
isClicked = false,
isRightClicked = false,
activeFrameIndex = -1,
animIndex = 0,
penColor = Constants.DEFAULT_PEN_COLOR,
currentFrame = null;
currentToolBehavior = null,
previousMousemoveTime = 0;
/**
* Main application controller
*/
var piskel = {
init : function () {
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')[0],
drawingCanvasDpi
);
this.setActiveFrame(0);
2012-09-05 02:09:42 +04:00
this.animationController = new pskl.controller.AnimatedPreviewController(
frameSheet,
$('#preview-canvas-container')[0],
previewAnimationCanvasDpi
);
this.previewsController = new pskl.controller.PreviewFilmController(
frameSheet,
$('#preview-list')[0],
previewTileCanvasDpi
);
this.animationController.init();
this.previewsController.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
}
},
2012-08-30 03:16:13 +04:00
finishInit : function () {
$.subscribe(Events.TOOL_SELECTED, function(evt, toolBehavior) {
console.log("Tool selected: ", toolBehavior);
currentToolBehavior = toolBehavior;
});
$.subscribe(Events.COLOR_SELECTED, function(evt, color) {
console.log("Color selected: ", color);
penColor = color;
});
$.subscribe(Events.REFRESH, function() {
piskel.setActiveFrameAndRedraw(0);
});
// TODO: Move this into their service or behavior files:
this.initDrawingArea();
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();
piskel.setActiveFrameAndRedraw(0);
2012-08-30 03:16:13 +04:00
};
xhr.onerror = function () {
$.publish(Events.HIDE_NOTIFICATION);
2012-08-30 03:16:13 +04:00
piskel.finishInit();
piskel.setActiveFrameAndRedraw(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 = frameSheet.getFrameByIndex(index);
},
setActiveFrameAndRedraw: function(index) {
this.setActiveFrame(index);
2012-09-05 02:09:42 +04:00
this.redraw();
},
2012-09-05 02:09:42 +04:00
redraw : function () {
// Update drawing canvas:
this.drawingController.renderFrame();
// Update slideshow:
2012-09-05 02:09:42 +04:00
this.previewsController.createPreviews();
},
getActiveFrameIndex: function() {
if(-1 == activeFrameIndex) {
2012-09-05 02:09:42 +04:00
throw "Bad active frame initialization."
}
return activeFrameIndex;
},
initDrawingArea : function() {
drawingAreaContainer = $('#drawing-canvas-container')[0];
document.body.addEventListener('mouseup', this.onMouseup.bind(this));
drawingAreaContainer.addEventListener('mousedown', this.onMousedown.bind(this));
drawingAreaContainer.addEventListener('mousemove', this.onMousemove.bind(this));
drawingAreaContainer.style.width = framePixelWidth * drawingCanvasDpi + "px";
drawingAreaContainer.style.height = framePixelHeight * drawingCanvasDpi + "px";
drawingAreaContainer.addEventListener('contextmenu', this.onCanvasContextMenu);
},
removeFrame: function(frameIndex) {
frameSheet.removeFrameByIndex(frameIndex);
var activeFrameIndex = frameIndex ? frameIndex - 1 : 0;
this.setActiveFrameAndRedraw(activeFrameIndex);
},
duplicateFrame: function(frameIndex) {
frameSheet.duplicateFrameByIndex(frameIndex);
this.setActiveFrameAndRedraw(frameIndex + 1);
},
onMousedown : function (event) {
console.log("onMousedown");
isClicked = true;
if(event.button == 2) { // right click
isRightClicked = true;
$.publish(Events.CANVAS_RIGHT_CLICKED);
}
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.applyToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
penColor,
this.drawingController
);
$.publish(Events.LOCALSTORAGE_REQUEST);
},
onMousemove : function (event) {
console.log("onMousemove");
var currentTime = new Date().getTime();
// Throttling of the mousemove event:
if ((currentTime - previousMousemoveTime) > 40 ) {
if (isClicked) {
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.moveToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
penColor,
this.drawingController
);
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level.
// Eg when drawing, it may make sense to have it here. However for a non drawing tool,
// you don't need to draw anything when mousemoving and you request useless localStorage.
$.publish(Events.LOCALSTORAGE_REQUEST);
}
previousMousemoveTime = currentTime;
}
},
onMouseup : function (event) {
console.log("onMouseup");
if(isClicked || isRightClicked) {
// A mouse button was clicked on the drawing canvas before this mouseup event,
// the user was probably drawing on the canvas.
// Note: The mousemove movement (and the mouseup) may end up outside
// of the drawing canvas.
if(isRightClicked) {
$.publish(Events.CANVAS_RIGHT_CLICK_RELEASED);
}
isClicked = false;
isRightClicked = false;
var spriteCoordinate = this.getSpriteCoordinate(event);
currentToolBehavior.releaseToolAt(
spriteCoordinate.col,
spriteCoordinate.row,
penColor,
this.drawingController
);
2012-09-06 02:23:24 +04:00
// TODO: Remove that when we have the centralized redraw loop
this.previewsController.createPreviews();
}
},
onCanvasContextMenu : function (event) {
event.preventDefault();
event.stopPropagation();
event.cancelBubble = true;
return false;
},
2012-08-29 10:39:03 +04:00
getRelativeCoordinates : function (x, y) {
2012-09-05 02:13:45 +04:00
var canvasRect = $(".drawing-canvas")[0].getBoundingClientRect();
return {
x : x - canvasRect.left,
y : y - canvasRect.top
}
2012-08-30 03:16:13 +04:00
},
getSpriteCoordinate : function(event) {
var coord = this.getRelativeCoordinates(event.x, event.y);
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
return {
"col" : (coords.x - coords.x%drawingCanvasDpi) / drawingCanvasDpi,
"row" : (coords.y - coords.y%drawingCanvasDpi) / drawingCanvasDpi
}
},
// 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();
})();