2013-05-27 21:42:53 +00:00
|
|
|
(function () {
|
|
|
|
var ns = $.namespace("pskl.controller");
|
|
|
|
ns.PreviewFilmController = function (framesheet, container, 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));
|
2013-06-13 20:55:19 +00:00
|
|
|
|
2013-06-13 21:20:51 +00:00
|
|
|
$('#preview-list-scroller').scroll(this.updateScrollerOverflows.bind(this));
|
|
|
|
this.updateScrollerOverflows();
|
2013-05-27 21:42:53 +00:00
|
|
|
};
|
|
|
|
|
2013-06-13 21:20:51 +00:00
|
|
|
ns.PreviewFilmController.prototype.init = function() {};
|
2013-05-27 21:42:53 +00:00
|
|
|
|
|
|
|
ns.PreviewFilmController.prototype.addFrame = function () {
|
|
|
|
this.framesheet.addEmptyFrame();
|
|
|
|
this.framesheet.setCurrentFrameIndex(this.framesheet.getFrameCount() - 1);
|
2013-06-13 21:20:51 +00:00
|
|
|
this.updateScrollerOverflows();
|
2013-05-27 21:42:53 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.PreviewFilmController.prototype.flagForRedraw_ = function () {
|
|
|
|
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.
|
|
|
|
this.createPreviews_();
|
|
|
|
this.redrawFlag = false;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2013-06-13 21:20:51 +00:00
|
|
|
ns.PreviewFilmController.prototype.updateScrollerOverflows = function () {
|
2013-06-13 20:55:19 +00:00
|
|
|
var scroller = $('#preview-list-scroller');
|
|
|
|
var scrollerHeight = scroller.height();
|
|
|
|
var scrollTop = scroller.scrollTop();
|
|
|
|
var scrollerContentHeight = $('#preview-list').height();
|
2013-06-13 21:20:51 +00:00
|
|
|
var treshold = $('.top-overflow').height();
|
2013-06-13 20:55:19 +00:00
|
|
|
var overflowTop = false,
|
|
|
|
overflowBottom = false;
|
|
|
|
if (scrollerHeight < scrollerContentHeight) {
|
|
|
|
if (scrollTop > treshold) {
|
|
|
|
overflowTop = true;
|
|
|
|
}
|
|
|
|
var scrollBottom = (scrollerContentHeight - scrollTop) - scrollerHeight;
|
|
|
|
if (scrollBottom > treshold) {
|
|
|
|
overflowBottom = true;
|
|
|
|
}
|
|
|
|
}
|
2013-06-16 07:38:31 +00:00
|
|
|
var wrapper = $('#preview-list-wrapper');
|
|
|
|
wrapper.toggleClass('top-overflow-visible', overflowTop);
|
|
|
|
wrapper.toggleClass('bottom-overflow-visible', overflowBottom);
|
2013-06-13 20:55:19 +00:00
|
|
|
};
|
|
|
|
|
2013-05-27 21:42:53 +00:00
|
|
|
ns.PreviewFilmController.prototype.createPreviews_ = function () {
|
|
|
|
|
|
|
|
this.container.html("");
|
|
|
|
// Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
|
|
|
|
$(".tooltip").remove();
|
|
|
|
|
|
|
|
var frameCount = this.framesheet.getFrameCount();
|
|
|
|
|
|
|
|
for (var i = 0, l = frameCount; i < l ; i++) {
|
|
|
|
this.container.append(this.createPreviewTile_(i));
|
|
|
|
}
|
2013-06-13 15:39:12 +00:00
|
|
|
// Append 'new empty frame' button
|
|
|
|
var newFrameButton = document.createElement("div");
|
|
|
|
newFrameButton.id = "add-frame-action";
|
|
|
|
newFrameButton.className = "add-frame-action";
|
|
|
|
newFrameButton.innerHTML = "<p class='label'>Add new frame</p>";
|
|
|
|
this.container.append(newFrameButton);
|
|
|
|
|
|
|
|
$(newFrameButton).click(this.addFrame.bind(this));
|
|
|
|
|
2013-06-12 22:04:39 +00:00
|
|
|
var needDragndropBehavior = (frameCount > 1);
|
2013-05-27 21:42:53 +00:00
|
|
|
if(needDragndropBehavior) {
|
|
|
|
this.initDragndropBehavior_();
|
|
|
|
}
|
2013-06-13 21:20:51 +00:00
|
|
|
this.updateScrollerOverflows();
|
2013-05-27 21:42:53 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
|
|
|
ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
|
2013-06-12 22:04:39 +00:00
|
|
|
|
2013-06-13 20:55:19 +00:00
|
|
|
$("#preview-list").sortable({
|
2013-06-12 22:04:39 +00:00
|
|
|
placeholder: "preview-tile-drop-proxy",
|
|
|
|
update: $.proxy(this.onUpdate_, this)
|
2013-05-27 21:42:53 +00:00
|
|
|
});
|
2013-06-13 20:55:19 +00:00
|
|
|
$("#preview-list").disableSelection();
|
2013-05-27 21:42:53 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
*/
|
2013-06-12 22:04:39 +00:00
|
|
|
ns.PreviewFilmController.prototype.onUpdate_ = function( event, ui ) {
|
|
|
|
var originFrameId = parseInt(ui.item.data("tile-number"), 10);
|
|
|
|
var targetInsertionId = $('.preview-tile').index(ui.item);
|
2013-05-27 21:42:53 +00:00
|
|
|
|
2013-06-12 22:04:39 +00:00
|
|
|
this.framesheet.moveFrame(originFrameId, targetInsertionId);
|
|
|
|
this.framesheet.setCurrentFrameIndex(targetInsertionId);
|
2013-05-27 21:42:53 +00:00
|
|
|
|
2013-06-12 22:04:39 +00:00
|
|
|
// TODO(grosbouddha): move localstorage request to the model layer?
|
2013-05-27 21:42:53 +00:00
|
|
|
$.publish(Events.LOCALSTORAGE_REQUEST);
|
|
|
|
};
|
|
|
|
|
2013-06-12 22:04:39 +00:00
|
|
|
|
2013-05-27 21:42:53 +00:00
|
|
|
/**
|
|
|
|
* @private
|
|
|
|
* TODO(vincz): clean this giant rendering function & remove listeners.
|
|
|
|
*/
|
|
|
|
ns.PreviewFilmController.prototype.createPreviewTile_ = function(tileNumber) {
|
|
|
|
var currentFrame = this.framesheet.getFrameByIndex(tileNumber);
|
|
|
|
|
|
|
|
var previewTileRoot = document.createElement("li");
|
|
|
|
var classname = "preview-tile";
|
|
|
|
previewTileRoot.setAttribute("data-tile-number", tileNumber);
|
|
|
|
|
|
|
|
if (this.framesheet.getCurrentFrame() == currentFrame) {
|
|
|
|
classname += " selected";
|
|
|
|
}
|
|
|
|
previewTileRoot.className = classname;
|
|
|
|
|
|
|
|
var canvasContainer = document.createElement("div");
|
|
|
|
canvasContainer.className = "canvas-container";
|
|
|
|
|
|
|
|
var canvasBackground = document.createElement("div");
|
|
|
|
canvasBackground.className = "canvas-background";
|
|
|
|
canvasContainer.appendChild(canvasBackground);
|
|
|
|
|
|
|
|
previewTileRoot.addEventListener('click', this.onPreviewClick_.bind(this, tileNumber));
|
|
|
|
|
2013-06-12 22:04:39 +00:00
|
|
|
var cloneFrameButton = document.createElement("button");
|
|
|
|
cloneFrameButton.setAttribute('rel', 'tooltip');
|
|
|
|
cloneFrameButton.setAttribute('data-placement', 'right');
|
|
|
|
cloneFrameButton.setAttribute('title', 'Duplicate this frame');
|
|
|
|
cloneFrameButton.className = "tile-overlay duplicate-frame-action";
|
|
|
|
previewTileRoot.appendChild(cloneFrameButton);
|
|
|
|
cloneFrameButton.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
|
2013-05-27 21:42:53 +00:00
|
|
|
|
|
|
|
// TODO(vincz): Eventually optimize this part by not recreating a FrameRenderer. Note that the real optim
|
|
|
|
// is to make this update function (#createPreviewTile) less aggressive.
|
|
|
|
var renderingOptions = {"dpi": this.dpi };
|
|
|
|
var currentFrameRenderer = new pskl.rendering.FrameRenderer($(canvasContainer), renderingOptions, "tile-view");
|
|
|
|
currentFrameRenderer.init(currentFrame);
|
|
|
|
|
|
|
|
previewTileRoot.appendChild(canvasContainer);
|
|
|
|
|
|
|
|
if(tileNumber > 0 || this.framesheet.getFrameCount() > 1) {
|
2013-06-12 12:53:47 +00:00
|
|
|
// 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);
|
|
|
|
|
|
|
|
// Add 'dragndrop handle'.
|
|
|
|
var dndHandle = document.createElement("div");
|
|
|
|
dndHandle.className = "tile-overlay dnd-action";
|
|
|
|
previewTileRoot.appendChild(dndHandle);
|
2013-05-27 21:42:53 +00:00
|
|
|
}
|
2013-06-12 12:53:47 +00:00
|
|
|
var tileCount = document.createElement("div");
|
|
|
|
tileCount.className = "tile-overlay tile-count";
|
|
|
|
tileCount.innerHTML = tileNumber;
|
|
|
|
previewTileRoot.appendChild(tileCount);
|
|
|
|
|
2013-05-27 21:42:53 +00:00
|
|
|
|
|
|
|
return previewTileRoot;
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
|
|
|
|
// has not class tile-action:
|
2013-06-12 12:53:47 +00:00
|
|
|
if(!evt.target.classList.contains('tile-overlay')) {
|
2013-05-27 21:42:53 +00:00
|
|
|
this.framesheet.setCurrentFrameIndex(index);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
|
|
|
|
this.framesheet.removeFrameByIndex(index);
|
2013-06-13 21:20:51 +00:00
|
|
|
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
|
|
|
|
this.updateScrollerOverflows();
|
2013-05-27 21:42:53 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) {
|
|
|
|
this.framesheet.duplicateFrameByIndex(index);
|
|
|
|
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
|
|
|
|
this.framesheet.setCurrentFrameIndex(index + 1);
|
2013-06-13 21:20:51 +00:00
|
|
|
this.updateScrollerOverflows();
|
2013-05-27 21:42:53 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Calculate the preview DPI depending on the framesheet size
|
|
|
|
*/
|
|
|
|
ns.PreviewFilmController.prototype.calculateDPI_ = function () {
|
2013-06-12 12:53:47 +00:00
|
|
|
var previewSize = 120,
|
2013-05-27 21:42:53 +00:00
|
|
|
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);
|
|
|
|
};
|
2012-09-04 22:09:42 +00:00
|
|
|
})();
|