wbrawner/piskel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #72 from juliandescottes/fix-dynamicdpi

Browse source 
Fixed dynamic dpi update for drawing canvas, added throttle on resize ev...
This commit is contained in:
Julian Descottes 2012-09-13 16:12:51 -07:00
commit 9e03290df5
2 changed files with 95 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

155
js/controller/DrawingController.js
View file

@ -1,44 +1,44 @@
(function () {
var ns = $.namespace("pskl.controller");
ns.DrawingController = function (framesheet, container, dpi) {
// TODO(vincz): Store user prefs in a localstorage string ?
var renderingOptions = {
"dpi": dpi,
"hasGrid" : true
};
var ns = $.namespace("pskl.controller");
ns.DrawingController = function (framesheet, container, dpi) {
// TODO(vincz): Store user prefs in a localstorage string ?
var renderingOptions = {
"dpi": dpi,
"hasGrid" : true
};
/**
* @public
*/
this.framesheet = framesheet;
/**
* @public
*/
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
/**
* @public
*/
this.framesheet = framesheet;
/**
* @public
*/
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
/**
* @private
*/
this.container = container;
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
this.renderer.init(framesheet.getCurrentFrame());
this.overlayRenderer.init(this.overlayFrame);
/**
* @private
*/
this.container = container;
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
this.renderer.init(framesheet.getCurrentFrame());
this.overlayRenderer.init(this.overlayFrame);
// State of drawing controller:
this.isClicked = false;
this.isRightClicked = false;
this.previousMousemoveTime = 0;
this.currentToolBehavior = null;
this.primaryColor = Constants.DEFAULT_PEN_COLOR;
this.secondaryColor = Constants.TRANSPARENT_COLOR;
// State of drawing controller:
this.isClicked = false;
this.isRightClicked = false;
this.previousMousemoveTime = 0;
this.currentToolBehavior = null;
this.primaryColor = Constants.DEFAULT_PEN_COLOR;
this.secondaryColor = Constants.TRANSPARENT_COLOR;
this.initMouseBehavior();
this.initMouseBehavior();
$.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
$.subscribe(Events.TOOL_SELECTED, $.proxy(function(evt, toolBehavior) {
console.log("Tool selected: ", toolBehavior);
this.currentToolBehavior = toolBehavior;
}, this));
@ -51,22 +51,22 @@
this.secondaryColor = color;
}
}, this));
};
};
ns.DrawingController.prototype.initMouseBehavior = function() {
var body = $('body');
ns.DrawingController.prototype.initMouseBehavior = function() {
var body = $('body');
this.container.mousedown($.proxy(this.onMousedown_, this));
this.container.mousemove($.proxy(this.onMousemove_, this));
body.mouseup($.proxy(this.onMouseup_, this));
// Deactivate right click:
this.container.contextmenu(this.onCanvasContextMenu_);
};
};
/**
* @private
*/
ns.DrawingController.prototype.onMousedown_ = function (event) {
/**
* @private
*/
ns.DrawingController.prototype.onMousedown_ = function (event) {
this.isClicked = true;
if(event.button == 2) { // right click
@ -87,8 +87,8 @@
};
/**
* @private
*/
* @private
*/
ns.DrawingController.prototype.onMousemove_ = function (event) {
var currentTime = new Date().getTime();
// Throttling of the mousemove event:
@ -102,7 +102,7 @@
this.framesheet.getCurrentFrame(),
this.overlayFrame
);
// 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.
@ -121,8 +121,8 @@
};
/**
* @private
*/
* @private
*/
ns.DrawingController.prototype.onMouseup_ = function (event) {
if(this.isClicked || this.isRightClicked) {
// A mouse button was clicked on the drawing canvas before this mouseup event,
@ -147,8 +147,8 @@
},
/**
* @private
*/
* @private
*/
ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
var canvasPageOffset = this.container.offset();
return {
@ -158,16 +158,16 @@
};
/**
* @private
*/
* @private
*/
ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
};
/**
* @private
*/
* @private
*/
ns.DrawingController.prototype.getCurrentColor_ = function () {
if(this.isRightClicked) {
return this.secondaryColor;
@ -177,45 +177,44 @@
};
/**
* @private
*/
* @private
*/
ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
event.preventDefault();
event.stopPropagation();
event.cancelBubble = true;
return false;
};
ns.DrawingController.prototype.updateDPI = function (newDPI) {
this.renderer.updateDPI(newDPI);
this.overlayRenderer.updateDPI(newDPI);
this.render();
};
ns.DrawingController.prototype.render = function () {
try {
this.renderFrame();
this.renderOverlay();
} catch (e) {
// TODO : temporary t/c for integration
}
ns.DrawingController.prototype.updateDPI = function (newDPI) {
this.renderer.updateDPI(newDPI);
this.overlayRenderer.updateDPI(newDPI);
this.forceRendering_();
};
ns.DrawingController.prototype.renderFrame = function () {
ns.DrawingController.prototype.render = function () {
this.renderFrame();
this.renderOverlay();
};
ns.DrawingController.prototype.renderFrame = function () {
var frame = this.framesheet.getCurrentFrame();
var serializedFrame = frame.serialize();
if (this.serializedFrame != serializedFrame) {
this.serializedFrame = serializedFrame
this.renderer.render(frame);
this.serializedFrame = serializedFrame;
this.renderer.render(frame);
}
};
};
ns.DrawingController.prototype.renderOverlay = function () {
ns.DrawingController.prototype.renderOverlay = function () {
var serializedOverlay = this.overlayFrame.serialize();
if (this.serializedOverlay != serializedOverlay) {
this.serializedOverlay = serializedOverlay
this.serializedOverlay = serializedOverlay;
this.overlayRenderer.render(this.overlayFrame);
}
};
};
ns.DrawingController.prototype.forceRendering_ = function () {
this.serializedFrame = this.serializedOverlay = null;
}
})();

39
js/piskel.js
View file

@ -17,8 +17,7 @@ $.namespace("pskl");
framePixelHeight = 32,
// Scaling factors for a given frameSheet rendering:
// Main drawing area:
drawingCanvasDpi = 20,
// Main drawing area dpi is calculated dynamically
// Canvas preview film canvases:
previewTileCanvasDpi = 4,
// Animated canvas preview:
@ -30,15 +29,13 @@ $.namespace("pskl");
var piskel = {
init : function () {
piskel.initDPIs_();
frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
frameSheet.addEmptyFrame();
this.drawingController = new pskl.controller.DrawingController(
frameSheet,
$('#drawing-canvas-container'),
drawingCanvasDpi
this.calculateDPIsForDrawingCanvas_()
);
this.animationController = new pskl.controller.AnimatedPreviewController(
@ -47,7 +44,6 @@ $.namespace("pskl");
previewAnimationCanvasDpi
);
this.previewsController = new pskl.controller.PreviewFilmController(
frameSheet,
$('#preview-list'),
@ -63,10 +59,9 @@ $.namespace("pskl");
// in a second batch.
this.selectionManager =
new pskl.selection.SelectionManager(this.drawingController.overlayFrame);
frameSheet.setCurrentFrameIndex(0);
// DO NOT MOVE THIS LINE (see comment above)
frameSheet.setCurrentFrameIndex(0);
this.animationController.init();
this.previewsController.init();
@ -92,6 +87,8 @@ $.namespace("pskl");
var drawingLoop = new pskl.rendering.DrawingLoop();
drawingLoop.addCallback(this.render, this);
drawingLoop.start();
this.connectResizeToDpiUpdate_();
},
render : function (delta) {
@ -100,18 +97,18 @@ $.namespace("pskl");
this.previewsController.render(delta);
},
/**
* 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.
connectResizeToDpiUpdate_ : function () {
$(window).resize($.proxy(this.startDPIUpdateTimer_, this));
},
startDPIUpdateTimer_ : function () {
if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPIForViewport, this), 200);
},
updateDPIForViewport : function () {
var dpi = piskel.calculateDPIsForDrawingCanvas_();
this.drawingController.updateDPI(dpi);
},
/**