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

Dynamic size for frame

Browse Source
This commit is contained in:
juliandescottes
2012-09-16 18:48:32 +02:00
parent 1cd0e89207
commit 0d1775b24c
11 changed files with 508 additions and 439 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
js/controller/DrawingController.js
View File

@ -1,12 +1,6 @@
(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
};
ns.DrawingController = function (framesheet, container) {
/**
* @public
*/
@ -21,6 +15,12 @@
* @private
*/
this.container = container;
// TODO(vincz): Store user prefs in a localstorage string ?
var renderingOptions = {
"dpi": this.calculateDPI_(),
"hasGrid" : true
};
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "drawing-canvas");
this.overlayRenderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions, "canvas-overlay");
@ -51,6 +51,11 @@
this.secondaryColor = color;
}
}, this));
$(window).resize($.proxy(this.startDPIUpdateTimer_, this));
$.subscribe(Events.FRAME_SIZE_CHANGED, $.proxy(this.updateDPI_, this));
$.subscribe(Events.GRID_DISPLAY_STATE_CHANGED, $.proxy(this.forceRendering_, this));
};
ns.DrawingController.prototype.initMouseBehavior = function() {
@ -63,6 +68,13 @@
body.contextmenu(this.onCanvasContextMenu_);
};
ns.DrawingController.prototype.startDPIUpdateTimer_ = function () {
if (this.dpiUpdateTimer) window.clearInterval(this.dpiUpdateTimer);
this.dpiUpdateTimer = window.setTimeout($.proxy(this.updateDPI_, this), 200);
},
/**
* @private
*/
@ -185,12 +197,6 @@
event.cancelBubble = true;
return false;
};
ns.DrawingController.prototype.updateDPI = function (newDPI) {
this.renderer.updateDPI(newDPI);
this.overlayRenderer.updateDPI(newDPI);
this.forceRendering_();
};
ns.DrawingController.prototype.render = function () {
this.renderFrame();
@ -199,6 +205,8 @@
ns.DrawingController.prototype.renderFrame = function () {
var frame = this.framesheet.getCurrentFrame();
console.log("render", frame.getHeight());
if (frame.getHeight() == 32) debugger;
var serializedFrame = frame.serialize();
if (this.serializedFrame != serializedFrame) {
this.serializedFrame = serializedFrame;
@ -216,5 +224,45 @@
ns.DrawingController.prototype.forceRendering_ = function () {
this.serializedFrame = this.serializedOverlay = null;
}
};
/**
* @private
*/
ns.DrawingController.prototype.calculateDPI_ = function() {
var userMessageGap = 80; // Reserve some height to show the user message at the bottom
var availableViewportHeight = $('.main-panel').height() - userMessageGap,
availableViewportWidth = $('.main-panel').width(),
previewHeight = $(".preview-container").height(),
previewWidth = $(".preview-container").width(),
framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
var dpi = pskl.PixelUtils.calculateDPI(availableViewportHeight, availableViewportWidth, framePixelHeight, framePixelWidth);
var drawingCanvasHeight = dpi * framePixelHeight;
var drawingCanvasWidth = dpi * framePixelWidth;
// Check if preview and drawing canvas overlap
var heightGap = drawingCanvasHeight + previewHeight - availableViewportHeight,
widthGap = drawingCanvasWidth + previewWidth - availableViewportWidth;
if (heightGap > 0 && widthGap > 0) {
// Calculate the DPI change needed to bridge height and width gap
var gapDPI = pskl.PixelUtils.calculateDPI(heightGap, widthGap, framePixelHeight, framePixelWidth);
// substract gap dpi to initial dpi
dpi -= (gapDPI - 1);
}
return dpi;
};
/**
* @private
*/
ns.DrawingController.prototype.updateDPI_ = function() {
var dpi = this.calculateDPI_();
console.log("dpi", dpi);
this.renderer.updateDPI(dpi);
this.overlayRenderer.updateDPI(dpi);
this.forceRendering_();
};
})();