mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
proto init implementation + less
This commit is contained in:
@ -47,11 +47,13 @@
|
||||
* Calculate the preview DPI depending on the framesheet size
|
||||
*/
|
||||
ns.AnimatedPreviewController.prototype.calculateDPI_ = function () {
|
||||
var framePixelHeight = this.framesheet.getCurrentFrame().getHeight(),
|
||||
var previewSize = 200,
|
||||
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);
|
||||
//return pskl.PixelUtils.calculateDPIForContainer($(".preview-container"), framePixelHeight, framePixelWidth);
|
||||
return pskl.PixelUtils.calculateDPI(previewSize, previewSize, framePixelHeight, framePixelWidth);
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.updateDPI_ = function () {
|
||||
|
@ -71,7 +71,7 @@
|
||||
body.mouseup($.proxy(this.onMouseup_, this));
|
||||
|
||||
// Deactivate right click:
|
||||
body.contextmenu(this.onCanvasContextMenu_);
|
||||
//body.contextmenu(this.onCanvasContextMenu_);
|
||||
};
|
||||
|
||||
|
||||
@ -254,20 +254,21 @@
|
||||
* @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(),
|
||||
var availableViewportHeight = $('.main-column').height(),
|
||||
leftSectionWidth = $('.left-column').width(),
|
||||
rightSectionWidth = $('.right-column').width(),
|
||||
availableViewportWidth = $('body').width() - leftSectionWidth - rightSectionWidth,
|
||||
//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) {
|
||||
@ -275,7 +276,7 @@
|
||||
var gapDPI = pskl.PixelUtils.calculateDPI(heightGap, widthGap, framePixelHeight, framePixelWidth);
|
||||
// substract gap dpi to initial dpi
|
||||
dpi -= (gapDPI + 1);
|
||||
}
|
||||
}*/
|
||||
return dpi;
|
||||
};
|
||||
|
||||
|
@ -181,16 +181,12 @@
|
||||
|
||||
previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
|
||||
|
||||
var actionContainer = document.createElement("DIV");
|
||||
actionContainer.className = "tile-action-container";
|
||||
|
||||
var canvasPreviewDuplicateAction = document.createElement("button");
|
||||
canvasPreviewDuplicateAction.setAttribute('rel', 'tooltip');
|
||||
canvasPreviewDuplicateAction.setAttribute('data-placement', 'right');
|
||||
canvasPreviewDuplicateAction.setAttribute('title', 'Duplicate this frame');
|
||||
canvasPreviewDuplicateAction.className = "tile-action duplicate-frame-action";
|
||||
actionContainer.appendChild(canvasPreviewDuplicateAction);
|
||||
|
||||
canvasPreviewDuplicateAction.className = "tile-overlay duplicate-frame-action";
|
||||
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
|
||||
canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
|
||||
|
||||
// TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
|
||||
@ -202,24 +198,35 @@
|
||||
previewTileRoot.appendChild(canvasContainer);
|
||||
|
||||
if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) {
|
||||
var canvasPreviewDeleteAction = document.createElement("button");
|
||||
canvasPreviewDeleteAction.setAttribute('rel', 'tooltip');
|
||||
canvasPreviewDeleteAction.setAttribute('data-placement', 'right');
|
||||
canvasPreviewDeleteAction.setAttribute('title', 'Delete this frame');
|
||||
canvasPreviewDeleteAction.className = "tile-action delete-frame-action";
|
||||
canvasPreviewDeleteAction.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
|
||||
previewTileRoot.appendChild(canvasPreviewDeleteAction);
|
||||
actionContainer.appendChild(canvasPreviewDeleteAction);
|
||||
}
|
||||
// Add 'remove frame' button.
|
||||
var deleteButton = document.createElement("button");
|
||||
deleteButton.setAttribute('rel', 'tooltip');
|
||||
deleteButton.setAttribute('data-placement', 'right');
|
||||
deleteButton.setAttribute('title', 'Delete this frame');
|
||||
deleteButton.className = "tile-overlay delete-frame-action";
|
||||
deleteButton.addEventListener('click', this.onDeleteButtonClick_.bind(this, tileNumber));
|
||||
previewTileRoot.appendChild(deleteButton);
|
||||
|
||||
previewTileRoot.appendChild(actionContainer);
|
||||
// Add 'dragndrop handle'.
|
||||
var dndHandle = document.createElement("div");
|
||||
dndHandle.setAttribute('rel', 'tooltip');
|
||||
dndHandle.setAttribute('title', 'Drag\'n drop');
|
||||
dndHandle.setAttribute('data-placement', 'right');
|
||||
dndHandle.className = "tile-overlay dnd-action";
|
||||
previewTileRoot.appendChild(dndHandle);
|
||||
}
|
||||
var tileCount = document.createElement("div");
|
||||
tileCount.className = "tile-overlay tile-count";
|
||||
tileCount.innerHTML = tileNumber;
|
||||
previewTileRoot.appendChild(tileCount);
|
||||
|
||||
|
||||
return previewTileRoot;
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
|
||||
// has not class tile-action:
|
||||
if(!evt.target.classList.contains('tile-action')) {
|
||||
if(!evt.target.classList.contains('tile-overlay')) {
|
||||
this.framesheet.setCurrentFrameIndex(index);
|
||||
}
|
||||
};
|
||||
@ -239,7 +246,7 @@
|
||||
* Calculate the preview DPI depending on the framesheet size
|
||||
*/
|
||||
ns.PreviewFilmController.prototype.calculateDPI_ = function () {
|
||||
var previewSize = 128,
|
||||
var previewSize = 120,
|
||||
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 ?)
|
||||
|
Reference in New Issue
Block a user