mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Fixed dynamic dpi update for drawing canvas, added throttle on resize event.

Browse Source
This commit is contained in:
juliandescottes 2012-09-14 00:33:46 +02:00
parent 2a4077eaad
commit ba6879875c
2 changed files with 94 additions and 100 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 () { (function () {
var ns = $.namespace("pskl.controller"); var ns = $.namespace("pskl.controller");
ns.DrawingController = function (framesheet, container, dpi) { ns.DrawingController = function (framesheet, container, dpi) {
// TODO(vincz): Store user prefs in a localstorage string ? // TODO(vincz): Store user prefs in a localstorage string ?
var renderingOptions = { var renderingOptions = {
"dpi": dpi, "dpi": dpi,
"hasGrid" : true "hasGrid" : true
}; };
/** /**
* @public * @public
*/ */
this.framesheet = framesheet; this.framesheet = framesheet;
/** /**
* @public * @public
*/ */
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame()); this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
/** /**
* @private * @private
*/ */
this.container = container; this.container = container;
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas"); this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay"); this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
this.renderer.init(framesheet.getCurrentFrame()); this.renderer.init(framesheet.getCurrentFrame());
this.overlayRenderer.init(this.overlayFrame); this.overlayRenderer.init(this.overlayFrame);
// State of drawing controller: // State of drawing controller:
this.isClicked = false; this.isClicked = false;
this.isRightClicked = false; this.isRightClicked = false;
this.previousMousemoveTime = 0; this.previousMousemoveTime = 0;
this.currentToolBehavior = null; this.currentToolBehavior = null;
this.primaryColor = Constants.DEFAULT_PEN_COLOR; this.primaryColor = Constants.DEFAULT_PEN_COLOR;
this.secondaryColor = Constants.TRANSPARENT_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); console.log("Tool selected: ", toolBehavior);
this.currentToolBehavior = toolBehavior; this.currentToolBehavior = toolBehavior;
}, this)); }, this));
@ -51,22 +51,22 @@
this.secondaryColor = color; this.secondaryColor = color;
} }
}, this)); }, this));
}; };
ns.DrawingController.prototype.initMouseBehavior = function() { ns.DrawingController.prototype.initMouseBehavior = function() {
var body = $('body'); var body = $('body');
this.container.mousedown($.proxy(this.onMousedown_, this)); this.container.mousedown($.proxy(this.onMousedown_, this));
this.container.mousemove($.proxy(this.onMousemove_, this)); this.container.mousemove($.proxy(this.onMousemove_, this));
body.mouseup($.proxy(this.onMouseup_, this)); body.mouseup($.proxy(this.onMouseup_, this));
// Deactivate right click: // Deactivate right click:
this.container.contextmenu(this.onCanvasContextMenu_); this.container.contextmenu(this.onCanvasContextMenu_);
}; };
/** /**
* @private * @private
*/ */
ns.DrawingController.prototype.onMousedown_ = function (event) { ns.DrawingController.prototype.onMousedown_ = function (event) {
this.isClicked = true; this.isClicked = true;
if(event.button == 2) { // right click if(event.button == 2) { // right click
@ -87,8 +87,8 @@
}; };
/** /**
* @private * @private
*/ */
ns.DrawingController.prototype.onMousemove_ = function (event) { ns.DrawingController.prototype.onMousemove_ = function (event) {
var currentTime = new Date().getTime(); var currentTime = new Date().getTime();
// Throttling of the mousemove event: // Throttling of the mousemove event:
@ -102,7 +102,7 @@
this.framesheet.getCurrentFrame(), this.framesheet.getCurrentFrame(),
this.overlayFrame this.overlayFrame
); );
// TODO(vincz): Find a way to move that to the model instead of being at the interaction level. // 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, // 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. // 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) { ns.DrawingController.prototype.onMouseup_ = function (event) {
if(this.isClicked || this.isRightClicked) { if(this.isClicked || this.isRightClicked) {
// A mouse button was clicked on the drawing canvas before this mouseup event, // 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) { ns.DrawingController.prototype.getRelativeCoordinates = function (clientX, clientY) {
var canvasPageOffset = this.container.offset(); var canvasPageOffset = this.container.offset();
return { return {
@ -158,16 +158,16 @@
}; };
/** /**
* @private * @private
*/ */
ns.DrawingController.prototype.getSpriteCoordinates = function(event) { ns.DrawingController.prototype.getSpriteCoordinates = function(event) {
var coords = this.getRelativeCoordinates(event.clientX, event.clientY); var coords = this.getRelativeCoordinates(event.clientX, event.clientY);
return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords); return this.renderer.convertPixelCoordinatesIntoSpriteCoordinate(coords);
}; };
/** /**
* @private * @private
*/ */
ns.DrawingController.prototype.getCurrentColor_ = function () { ns.DrawingController.prototype.getCurrentColor_ = function () {
if(this.isRightClicked) { if(this.isRightClicked) {
return this.secondaryColor; return this.secondaryColor;
@ -177,45 +177,44 @@
}; };
/** /**
* @private * @private
*/ */
ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) { ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
event.cancelBubble = true; event.cancelBubble = true;
return false; return false;
}; };
ns.DrawingController.prototype.updateDPI = function (newDPI) { ns.DrawingController.prototype.updateDPI = function (newDPI) {
this.renderer.updateDPI(newDPI); this.renderer.updateDPI(newDPI);
this.overlayRenderer.updateDPI(newDPI); this.overlayRenderer.updateDPI(newDPI);
this.forceRendering_();
this.render();
};
ns.DrawingController.prototype.render = function () {
try {
this.renderFrame();
this.renderOverlay();
} catch (e) {
// TODO : temporary t/c for integration
}
}; };
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 frame = this.framesheet.getCurrentFrame();
var serializedFrame = frame.serialize(); var serializedFrame = frame.serialize();
if (this.serializedFrame != serializedFrame) { if (this.serializedFrame != serializedFrame) {
this.serializedFrame = serializedFrame this.serializedFrame = serializedFrame;
this.renderer.render(frame); this.renderer.render(frame);
} }
}; };
ns.DrawingController.prototype.renderOverlay = function () { ns.DrawingController.prototype.renderOverlay = function () {
var serializedOverlay = this.overlayFrame.serialize(); var serializedOverlay = this.overlayFrame.serialize();
if (this.serializedOverlay != serializedOverlay) { if (this.serializedOverlay != serializedOverlay) {
this.serializedOverlay = serializedOverlay this.serializedOverlay = serializedOverlay;
this.overlayRenderer.render(this.overlayFrame); 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, framePixelHeight = 32,
// Scaling factors for a given frameSheet rendering: // Scaling factors for a given frameSheet rendering:
// Main drawing area: // Main drawing area dpi is calculated dynamically
drawingCanvasDpi = 20,
// Canvas preview film canvases: // Canvas preview film canvases:
previewTileCanvasDpi = 4, previewTileCanvasDpi = 4,
// Animated canvas preview: // Animated canvas preview:
@ -30,15 +29,14 @@ $.namespace("pskl");
var piskel = { var piskel = {
init : function () { init : function () {
piskel.initDPIs_();
frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight); frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
frameSheet.addEmptyFrame(); frameSheet.addEmptyFrame();
frameSheet.setCurrentFrameIndex(0);
this.drawingController = new pskl.controller.DrawingController( this.drawingController = new pskl.controller.DrawingController(
frameSheet, frameSheet,
$('#drawing-canvas-container'), $('#drawing-canvas-container'),
drawingCanvasDpi this.calculateDPIsForDrawingCanvas_()
); );
this.animationController = new pskl.controller.AnimatedPreviewController( this.animationController = new pskl.controller.AnimatedPreviewController(
@ -47,7 +45,6 @@ $.namespace("pskl");
previewAnimationCanvasDpi previewAnimationCanvasDpi
); );
this.previewsController = new pskl.controller.PreviewFilmController( this.previewsController = new pskl.controller.PreviewFilmController(
frameSheet, frameSheet,
$('#preview-list'), $('#preview-list'),
@ -63,10 +60,6 @@ $.namespace("pskl");
// in a second batch. // in a second batch.
this.selectionManager = this.selectionManager =
new pskl.selection.SelectionManager(this.drawingController.overlayFrame); new pskl.selection.SelectionManager(this.drawingController.overlayFrame);
frameSheet.setCurrentFrameIndex(0);
this.animationController.init(); this.animationController.init();
this.previewsController.init(); this.previewsController.init();
@ -92,6 +85,8 @@ $.namespace("pskl");
var drawingLoop = new pskl.rendering.DrawingLoop(); var drawingLoop = new pskl.rendering.DrawingLoop();
drawingLoop.addCallback(this.render, this); drawingLoop.addCallback(this.render, this);
drawingLoop.start(); drawingLoop.start();
this.connectResizeToDpiUpdate_();
}, },
render : function (delta) { render : function (delta) {
@ -100,18 +95,18 @@ $.namespace("pskl");
this.previewsController.render(delta); this.previewsController.render(delta);
}, },
/** connectResizeToDpiUpdate_ : function () {
* Override default DPIs. $(window).resize($.proxy(this.startDPIUpdateTimer_, this));
* @private },
*/
initDPIs_ : function() { startDPIUpdateTimer_ : function () {
drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_(); if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
// TODO(vincz): Add throttling on window.resize event. this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPIForViewport, this), 200);
$(window).resize($.proxy(function() { },
drawingCanvasDpi = piskel.calculateDPIsForDrawingCanvas_();
this.drawingController.updateDPI(drawingCanvasDpi); updateDPIForViewport : function () {
}, this)); var dpi = piskel.calculateDPIsForDrawingCanvas_();
// TODO(vincz): Check for user settings eventually from localstorage. this.drawingController.updateDPI(dpi);
}, },
/** /**