mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Added DrawingLoop.js and plugged basic rendering on each controller
This commit is contained in:
juliandescottes
172
js/piskel.js
172
js/piskel.js
@@ -24,23 +24,8 @@ $.namespace("pskl");
|
||||
// Animated canvas preview:
|
||||
previewAnimationCanvasDpi = 8,
|
||||
|
||||
// DOM references:
|
||||
drawingAreaContainer,
|
||||
drawingAreaCanvas,
|
||||
previewCanvas,
|
||||
|
||||
// States:
|
||||
isClicked = false,
|
||||
isRightClicked = false,
|
||||
activeFrameIndex = -1,
|
||||
animIndex = 0,
|
||||
|
||||
primaryColor = Constants.DEFAULT_PEN_COLOR,
|
||||
secondaryColor = Constants.TRANSPARENT_COLOR,
|
||||
|
||||
activeFrameIndex = -1,
|
||||
currentFrame = null;
|
||||
currentToolBehavior = null,
|
||||
previousMousemoveTime = 0;
|
||||
|
||||
/**
|
||||
* Main application controller
|
||||
@@ -57,7 +42,7 @@ $.namespace("pskl");
|
||||
|
||||
this.drawingController = new pskl.controller.DrawingController(
|
||||
frameSheet.getFrameByIndex(0),
|
||||
$('#drawing-canvas-container')[0],
|
||||
$('#drawing-canvas-container'),
|
||||
drawingCanvasDpi
|
||||
);
|
||||
|
||||
@@ -65,7 +50,7 @@ $.namespace("pskl");
|
||||
|
||||
this.animationController = new pskl.controller.AnimatedPreviewController(
|
||||
frameSheet,
|
||||
$('#preview-canvas-container')[0],
|
||||
$('#preview-canvas-container'),
|
||||
previewAnimationCanvasDpi
|
||||
);
|
||||
|
||||
@@ -93,6 +78,13 @@ $.namespace("pskl");
|
||||
pskl.LocalStorageService.displayRestoreNotification();
|
||||
}
|
||||
|
||||
$.subscribe('SET_ACTIVE_FRAME', function(evt, frameId) {
|
||||
piskel.setActiveFrameAndRedraw(frameId);
|
||||
});
|
||||
|
||||
$.subscribe('FRAMESHEET_RESET', function(evt, frameId) {
|
||||
piskel.redraw();
|
||||
});
|
||||
var drawingLoop = new pskl.rendering.DrawingLoop();
|
||||
drawingLoop.addCallback(this.render, this);
|
||||
drawingLoop.start();
|
||||
@@ -123,7 +115,7 @@ $.namespace("pskl");
|
||||
* @private
|
||||
*/
|
||||
calculateDPIsForDrawingCanvas_ : function() {
|
||||
var availableViewportHeight = $('.main-panel').height(),
|
||||
var availableViewportHeight = $('.main-panel').height() - 50,
|
||||
availableViewportWidth = $('.main-panel').width(),
|
||||
previewHeight = $(".preview-container").height(),
|
||||
previewWidth = $(".preview-container").width();
|
||||
@@ -153,27 +145,12 @@ $.namespace("pskl");
|
||||
|
||||
finishInit : function () {
|
||||
|
||||
$.subscribe(Events.TOOL_SELECTED, function(evt, toolBehavior) {
|
||||
console.log("Tool selected: ", toolBehavior);
|
||||
currentToolBehavior = toolBehavior;
|
||||
});
|
||||
|
||||
$.subscribe(Events.COLOR_SELECTED, function(evt, color, isPrimary) {
|
||||
console.log("Color selected: ", color);
|
||||
if (isPrimary) {
|
||||
primaryColor = color;
|
||||
} else {
|
||||
secondaryColor = color;
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
$.subscribe(Events.REFRESH, function() {
|
||||
piskel.setActiveFrame(0);
|
||||
});
|
||||
|
||||
// TODO: Move this into their service or behavior files:
|
||||
this.initDrawingArea();
|
||||
|
||||
pskl.ToolSelector.init();
|
||||
pskl.Palette.init(frameSheet);
|
||||
},
|
||||
@@ -223,131 +200,6 @@ $.namespace("pskl");
|
||||
getCurrentFrame : function () {
|
||||
return frameSheet.getFrameByIndex(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));
|
||||
document.body.addEventListener('contextmenu', this.onCanvasContextMenu);
|
||||
},
|
||||
|
||||
removeFrame: function(frameIndex) {
|
||||
frameSheet.removeFrameByIndex(frameIndex);
|
||||
var activeFrameIndex = frameIndex ? frameIndex - 1 : 0;
|
||||
this.setActiveFrame(activeFrameIndex);
|
||||
},
|
||||
|
||||
duplicateFrame: function(frameIndex) {
|
||||
frameSheet.duplicateFrameByIndex(frameIndex);
|
||||
this.setActiveFrame(frameIndex + 1);
|
||||
},
|
||||
|
||||
getCurrentColor : function () {
|
||||
if(isRightClicked) {
|
||||
return secondaryColor;
|
||||
} else {
|
||||
return primaryColor;
|
||||
}
|
||||
},
|
||||
|
||||
onMousedown : function (event) {
|
||||
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,
|
||||
this.getCurrentColor(),
|
||||
this.drawingController
|
||||
);
|
||||
|
||||
$.publish(Events.LOCALSTORAGE_REQUEST);
|
||||
},
|
||||
|
||||
onMousemove : function (event) {
|
||||
var currentTime = new Date().getTime();
|
||||
// Throttling of the mousemove event:
|
||||
if ((currentTime - previousMousemoveTime) > 40 ) {
|
||||
var spriteCoordinate = this.getSpriteCoordinate(event);
|
||||
if (isClicked) {
|
||||
|
||||
currentToolBehavior.moveToolAt(
|
||||
spriteCoordinate.col,
|
||||
spriteCoordinate.row,
|
||||
this.getCurrentColor(),
|
||||
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);
|
||||
} else {
|
||||
// debug mode to see the selected pixel
|
||||
// this.drawingController.clearOverlay();
|
||||
// this.drawingController.overlay.setPixel( spriteCoordinate.col,spriteCoordinate.row, "#ff0000");
|
||||
// this.drawingController.renderOverlay();
|
||||
}
|
||||
previousMousemoveTime = currentTime;
|
||||
}
|
||||
},
|
||||
|
||||
onMouseup : function (event) {
|
||||
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,
|
||||
this.getCurrentColor(),
|
||||
this.drawingController
|
||||
);
|
||||
|
||||
|
||||
$.publish(Events.TOOL_RELEASED);
|
||||
}
|
||||
},
|
||||
|
||||
onCanvasContextMenu : function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
event.cancelBubble = true;
|
||||
return false;
|
||||
},
|
||||
|
||||
getRelativeCoordinates : function (x, y) {
|
||||
var canvasRect = $(".drawing-canvas")[0].getBoundingClientRect();
|
||||
return {
|
||||
x : x - canvasRect.left,
|
||||
y : y - canvasRect.top
|
||||
}
|
||||
},
|
||||
|
||||
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 ?
|
||||
storeSheet : function (event) {
|
||||
// TODO Refactor using jquery ?
|
||||
|
||||
Reference in New Issue
Block a user