mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Fixed dynamic dpi update for drawing canvas, added throttle on resize event.
This commit is contained in:
juliandescottes
parent
2a4077eaad
commit
ba6879875c
@ -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.framesheet = framesheet;
|
||||
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
|
||||
/**
|
||||
* @public
|
||||
*/
|
||||
this.overlayFrame = pskl.model.Frame.createEmptyFromFrame(framesheet.getCurrentFrame());
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
this.container = container;
|
||||
/**
|
||||
* @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 = 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);
|
||||
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:
|
||||
@ -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,8 +177,8 @@
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
* @private
|
||||
*/
|
||||
ns.DrawingController.prototype.onCanvasContextMenu_ = function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
@ -186,36 +186,35 @@
|
||||
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
39
js/piskel.js
@ -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,14 @@ $.namespace("pskl");
|
||||
var piskel = {
|
||||
|
||||
init : function () {
|
||||
piskel.initDPIs_();
|
||||
|
||||
frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
|
||||
frameSheet.addEmptyFrame();
|
||||
frameSheet.setCurrentFrameIndex(0);
|
||||
|
||||
this.drawingController = new pskl.controller.DrawingController(
|
||||
frameSheet,
|
||||
$('#drawing-canvas-container'),
|
||||
drawingCanvasDpi
|
||||
this.calculateDPIsForDrawingCanvas_()
|
||||
);
|
||||
|
||||
this.animationController = new pskl.controller.AnimatedPreviewController(
|
||||
@ -47,7 +45,6 @@ $.namespace("pskl");
|
||||
previewAnimationCanvasDpi
|
||||
);
|
||||
|
||||
|
||||
this.previewsController = new pskl.controller.PreviewFilmController(
|
||||
frameSheet,
|
||||
$('#preview-list'),
|
||||
@ -64,10 +61,6 @@ $.namespace("pskl");
|
||||
this.selectionManager =
|
||||
new pskl.selection.SelectionManager(this.drawingController.overlayFrame);
|
||||
|
||||
frameSheet.setCurrentFrameIndex(0);
|
||||
|
||||
|
||||
|
||||
this.animationController.init();
|
||||
this.previewsController.init();
|
||||
|
||||
@ -92,6 +85,8 @@ $.namespace("pskl");
|
||||
var drawingLoop = new pskl.rendering.DrawingLoop();
|
||||
drawingLoop.addCallback(this.render, this);
|
||||
drawingLoop.start();
|
||||
|
||||
this.connectResizeToDpiUpdate_();
|
||||
},
|
||||
|
||||
render : function (delta) {
|
||||
@ -100,18 +95,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);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
Loading…
Reference in New Issue
Block a user