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

Merge branch 'master' into gh-pages

Browse Source
This commit is contained in:
juliandescottes 2012-09-19 13:17:44 +02:00
commit 10a7fd4890
11 changed files with 506 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
css/preview-animation-section.css
View File

@ -2,7 +2,7 @@
.preview-container {
position : absolute;
bottom : 0; right : 0;
height : 256px;
height : 282px;
width : 256px;
background : white;
border : 0px Solid black;
@ -12,7 +12,6 @@
.preview-container canvas {
border : 0px Solid transparent;
border-radius:5px 0px 0px 5px;
}
#preview-fps {

7
js/Constants.js
View File

@ -1,4 +1,11 @@
var Constants = {
DEFAULT_SIZE : {
height : 32,
width : 32
},
MAX_HEIGHT : 128,
MAX_WIDTH : 128,
DEFAULT_PEN_COLOR : '#000000',
TRANSPARENT_COLOR : 'TRANSPARENT',

2
js/Events.js
View File

@ -35,6 +35,8 @@ Events = {
*/
FRAMESHEET_RESET: "FRAMESHEET_RESET",
FRAME_SIZE_CHANGED : "FRAME_SIZE_CHANGED",
CURRENT_FRAME_SET: "CURRENT_FRAME_SET",
SELECTION_CREATED: "SELECTION_CREATED",

19
js/controller/AnimatedPreviewController.js
View File

@ -10,9 +10,11 @@
this.fps = parseInt($("#preview-fps")[0].value, 10);
var renderingOptions = {
"dpi": dpi
"dpi": this.calculateDPI_()
};
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
$.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this));
};
ns.AnimatedPreviewController.prototype.init = function () {
@ -37,4 +39,19 @@
}
};
/**
* Calculate the preview DPI depending on the framesheet size
*/
ns.AnimatedPreviewController.prototype.calculateDPI_ = function () {
var framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
// TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
};
ns.AnimatedPreviewController.prototype.updateDPI_ = function () {
this.dpi = this.calculateDPI_();
this.renderer.updateDPI(this.dpi);
}
})();

72
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
*/
@ -22,6 +16,12 @@
*/
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
*/
@ -186,12 +198,6 @@
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();
this.renderOverlay();
@ -216,5 +222,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_();
};
})();

19
js/controller/PreviewFilmController.js
View File

@ -2,14 +2,15 @@
var ns = $.namespace("pskl.controller");
ns.PreviewFilmController = function (framesheet, container, dpi) {
this.dpi = dpi;
this.framesheet = framesheet;
this.container = container;
this.dpi = this.calculateDPI_();
this.redrawFlag = true;
$.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
$.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
$.subscribe(Events.FRAMESHEET_RESET, this.refreshDPI_.bind(this));
};
ns.PreviewFilmController.prototype.init = function() {
@ -26,6 +27,10 @@
this.redrawFlag = true;
};
ns.PreviewFilmController.prototype.refreshDPI_ = function () {
this.dpi = this.calculateDPI_();
};
ns.PreviewFilmController.prototype.render = function () {
if (this.redrawFlag) {
// TODO(vincz): Full redraw on any drawing modification, optimize.
@ -223,4 +228,16 @@
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
this.framesheet.setCurrentFrameIndex(index + 1);
};
/**
* Calculate the preview DPI depending on the framesheet size
*/
ns.PreviewFilmController.prototype.calculateDPI_ = function () {
var previewSize = 128,
framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
framePixelWidth = this.framesheet.getCurrentFrame().getWidth();
// TODO (julz) : should have a utility to get a Size from framesheet easily (what about empty framesheets though ?)
return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
};
})();

10
js/model/FrameSheet.js
View File

@ -1,6 +1,6 @@
(function () {
var ns = $.namespace("pskl.model");
ns.FrameSheet = function (width, height) {
ns.FrameSheet = function (height, width) {
this.width = width;
this.height = height;
this.frames = [];
@ -68,6 +68,14 @@
var frameCfg = frameConfigurations[i];
this.addFrame(new ns.Frame(frameCfg));
}
if (this.hasFrameAtIndex(0)) {
this.height = this.getFrameByIndex(0).getHeight();
this.width = this.getFrameByIndex(0).getWidth();
this.setCurrentFrameIndex(0);
$.publish(Events.FRAME_SIZE_CHANGED);
}
$.publish(Events.FRAMESHEET_RESET);
} catch (e) {
throw "Could not load serialized framesheet : " + e.message

132
js/piskel.js
View File

@ -9,46 +9,21 @@ $.namespace("pskl");
/**
* FrameSheetModel instance.
*/
var frameSheet,
// Configuration:
// Canvas size in pixel size (not dpi related)
framePixelWidth = 32,
framePixelHeight = 32,
// Scaling factors for a given frameSheet rendering:
// Main drawing area dpi is calculated dynamically
// Canvas preview film canvases:
previewTileCanvasDpi = 4,
// Animated canvas preview:
previewAnimationCanvasDpi = 8;
var frameSheet;
/**
* Main application controller
*/
var piskel = {
init : function () {
frameSheet = new pskl.model.FrameSheet(framePixelWidth, framePixelHeight);
var frameSize = this.readSizeFromURL_();
frameSheet = new pskl.model.FrameSheet(frameSize.height, frameSize.width);
frameSheet.addEmptyFrame();
this.drawingController = new pskl.controller.DrawingController(
frameSheet,
$('#drawing-canvas-container'),
this.calculateDPIsForDrawingCanvas_()
);
this.animationController = new pskl.controller.AnimatedPreviewController(
frameSheet,
$('#preview-canvas-container'),
previewAnimationCanvasDpi
);
this.previewsController = new pskl.controller.PreviewFilmController(
frameSheet,
$('#preview-list'),
previewTileCanvasDpi
);
this.drawingController = new pskl.controller.DrawingController(frameSheet, $('#drawing-canvas-container'));
this.animationController = new pskl.controller.AnimatedPreviewController(frameSheet, $('#preview-canvas-container'));
this.previewsController = new pskl.controller.PreviewFilmController(frameSheet, $('#preview-list'));
// To catch the current active frame, the selection manager have to be initialized before
// the 'frameSheet.setCurrentFrameIndex(0);' line below.
@ -57,8 +32,7 @@ $.namespace("pskl");
// - an event(s) triggering init
// All listeners will be hook in a first step, then all event triggering inits will be called
// in a second batch.
this.selectionManager =
new pskl.selection.SelectionManager(frameSheet, this.drawingController.overlayFrame);
this.selectionManager = new pskl.selection.SelectionManager(frameSheet, this.drawingController.overlayFrame);
// DO NOT MOVE THIS LINE (see comment above)
frameSheet.setCurrentFrameIndex(0);
@ -79,7 +53,7 @@ $.namespace("pskl");
this.localStorageService.init();
// TODO: Add comments
var framesheetId = this.getFramesheetIdFromUrl();
var framesheetId = this.readFramesheetIdFromURL_();
if (framesheetId) {
$.publish(Events.SHOW_NOTIFICATION, [{"content": "Loading animation with id : [" + framesheetId + "]"}]);
this.loadFramesheetFromService(framesheetId);
@ -96,8 +70,6 @@ $.namespace("pskl");
$('body').tooltip({
selector: '[rel=tooltip]'
});
this.connectResizeToDpiUpdate_();
},
render : function (delta) {
@ -106,55 +78,6 @@ $.namespace("pskl");
this.previewsController.render(delta);
},
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);
},
/**
* @private
*/
calculateDPIsForDrawingCanvas_ : 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();
var heightBoundDpi = Math.floor(availableViewportHeight / framePixelHeight),
widthBoundDpi = Math.floor(availableViewportWidth / framePixelWidth);
var dpi = Math.min(heightBoundDpi, widthBoundDpi);
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 heightGapDpi = Math.ceil(heightGap / framePixelHeight),
widthGapDpi = Math.ceil(widthGap / framePixelWidth);
// substract smallest dpi change to initial dpi
dpi -= Math.min(heightGapDpi, widthGapDpi);
}
return dpi;
},
finishInit : function () {
var toolController = new pskl.controller.ToolController();
toolController.init();
@ -163,12 +86,39 @@ $.namespace("pskl");
paletteController.init(frameSheet);
},
getFramesheetIdFromUrl : function() {
var href = window.location.href;
// TODO: Change frameId to framesheetId on the backend
if (href.indexOf('frameId=') != -1) {
return href.substring(href.indexOf('frameId=')+8);
readSizeFromURL_ : function () {
var sizeParam = this.readUrlParameter_("size"), size;
// parameter expected as size=64x48 => size=widthxheight
var parts = sizeParam.split("x");
if (parts && parts.length == 2 && !isNaN(parts[0]) && !isNaN(parts[1])) {
var width = parseInt(parts[0], 10),
height = parseInt(parts[1], 10);
size = {
height : Math.min(height, Constants.MAX_HEIGHT),
width : Math.min(width, Constants.MAX_WIDTH)
};
} else {
size = Constants.DEFAULT_SIZE;
}
return size;
},
readFramesheetIdFromURL_ : function() {
return this.readUrlParameter_("frameId");
},
readUrlParameter_ : function (paramName) {
var searchString = window.location.search.substring(1),
i, val, params = searchString.split("&");
for (i=0;i<params.length;i++) {
val = params[i].split("=");
if (val[0] == paramName) {
return unescape(val[1]);
}
}
return "";
},
loadFramesheetFromService : function (frameId) {

6
js/rendering/FrameRenderer.js
View File

@ -23,8 +23,6 @@
this.hasGrid = renderingOptions.hasGrid;
this.gridStrokeWidth = 0;
this.lastRenderedFrame = null;
// Flag to know if the config was altered
this.canvasConfigDirty = true;
@ -51,10 +49,6 @@
}
this.canvasConfigDirty = true;
if(this.lastRenderedFrame) {
this.render(this.lastRenderedFrame);
}
};
ns.FrameRenderer.prototype.render = function (frame) {

4
js/service/LocalStorageService.js
View File

@ -30,8 +30,8 @@
*/
ns.LocalStorageService.prototype.persistToLocalStorage_ = function() {
console.log('[LocalStorage service]: Snapshot stored');
window.localStorage.snapShot = this.framesheet.serialize();
// console.log('[LocalStorage service]: Snapshot stored');
// window.localStorage.snapShot = this.framesheet.serialize();
};
/**

32
js/utils/pixelUtils.js
View File

@ -96,8 +96,6 @@
* 12. If the color of the node to the south of n is target-color, add that node to Q.
* 13. Continue looping until Q is exhausted.
* 14. Return.
*
* @private
*/
var paintedPixels = [];
var queue = [];
@ -143,6 +141,34 @@
}
}
return paintedPixels;
}
},
/**
* Calculate and return the maximal DPI to display a picture in a given container.
*
* @param container jQueryObject Container where the picture should be displayed
* @param number pictureHeight height in pixels of the picture to display
* @param number pictureWidth width in pixels of the picture to display
* @return number maximal dpi
*/
calculateDPIForContainer : function (container, pictureHeight, pictureWidth) {
return this.calculateDPI(container.height(), container.width(), pictureHeight, pictureWidth);
},
/**
* Calculate and return the maximal DPI to display a picture for a given height and width.
*
* @param height number Height available to display the picture
* @param width number Width available to display the picture
* @param number pictureHeight height in pixels of the picture to display
* @param number pictureWidth width in pixels of the picture to display
* @return number maximal dpi
*/
calculateDPI : function (height, width, pictureHeight, pictureWidth) {
var heightBoundDpi = Math.floor(height / pictureHeight),
widthBoundDpi = Math.floor(width / pictureWidth);
return Math.min(heightBoundDpi, widthBoundDpi);
},
};
})();