mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Dynamic size for frame
This commit is contained in:
juliandescottes
@@ -1,40 +1,57 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.controller");
|
||||
ns.AnimatedPreviewController = function (framesheet, container, dpi) {
|
||||
this.framesheet = framesheet;
|
||||
this.container = container;
|
||||
var ns = $.namespace("pskl.controller");
|
||||
ns.AnimatedPreviewController = function (framesheet, container, dpi) {
|
||||
this.framesheet = framesheet;
|
||||
this.container = container;
|
||||
|
||||
this.elapsedTime = 0;
|
||||
this.currentIndex = 0;
|
||||
this.elapsedTime = 0;
|
||||
this.currentIndex = 0;
|
||||
|
||||
this.fps = parseInt($("#preview-fps")[0].value, 10);
|
||||
|
||||
var renderingOptions = {
|
||||
"dpi": dpi
|
||||
};
|
||||
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
|
||||
};
|
||||
this.fps = parseInt($("#preview-fps")[0].value, 10);
|
||||
|
||||
var renderingOptions = {
|
||||
"dpi": this.calculateDPI_()
|
||||
};
|
||||
this.renderer = new pskl.rendering.FrameRenderer(this.container, renderingOptions);
|
||||
|
||||
ns.AnimatedPreviewController.prototype.init = function () {
|
||||
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.onFPSSliderChange = function(evt) {
|
||||
this.fps = parseInt($("#preview-fps")[0].value, 10);
|
||||
$("#display-fps").html(this.fps + " FPS")
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.render = function (delta) {
|
||||
this.elapsedTime += delta;
|
||||
var index = Math.floor(this.elapsedTime / (1000/this.fps));
|
||||
if (index != this.currentIndex) {
|
||||
this.currentIndex = index;
|
||||
if (!this.framesheet.hasFrameAtIndex(this.currentIndex)) {
|
||||
this.currentIndex = 0;
|
||||
this.elapsedTime = 0;
|
||||
}
|
||||
this.renderer.render(this.framesheet.getFrameByIndex(this.currentIndex));
|
||||
}
|
||||
$.subscribe(Events.FRAME_SIZE_CHANGED, this.updateDPI_.bind(this));
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.init = function () {
|
||||
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.onFPSSliderChange = function(evt) {
|
||||
this.fps = parseInt($("#preview-fps")[0].value, 10);
|
||||
$("#display-fps").html(this.fps + " FPS")
|
||||
};
|
||||
|
||||
ns.AnimatedPreviewController.prototype.render = function (delta) {
|
||||
this.elapsedTime += delta;
|
||||
var index = Math.floor(this.elapsedTime / (1000/this.fps));
|
||||
if (index != this.currentIndex) {
|
||||
this.currentIndex = index;
|
||||
if (!this.framesheet.hasFrameAtIndex(this.currentIndex)) {
|
||||
this.currentIndex = 0;
|
||||
this.elapsedTime = 0;
|
||||
}
|
||||
this.renderer.render(this.framesheet.getFrameByIndex(this.currentIndex));
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
})();
|
||||
@@ -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_();
|
||||
};
|
||||
})();
|
||||
@@ -1,226 +1,243 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.controller");
|
||||
ns.PreviewFilmController = function (framesheet, container, dpi) {
|
||||
var ns = $.namespace("pskl.controller");
|
||||
ns.PreviewFilmController = function (framesheet, container, dpi) {
|
||||
|
||||
this.dpi = dpi;
|
||||
this.framesheet = framesheet;
|
||||
this.container = container;
|
||||
this.framesheet = framesheet;
|
||||
this.container = container;
|
||||
this.dpi = this.calculateDPI_();
|
||||
|
||||
this.redrawFlag = true;
|
||||
this.redrawFlag = true;
|
||||
|
||||
$.subscribe(Events.TOOL_RELEASED, this.flagForRedraw_.bind(this));
|
||||
$.subscribe(Events.FRAMESHEET_RESET, this.flagForRedraw_.bind(this));
|
||||
};
|
||||
$.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() {
|
||||
var addFrameButton = $('#add-frame-button')[0];
|
||||
addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
|
||||
ns.PreviewFilmController.prototype.init = function() {
|
||||
var addFrameButton = $('#add-frame-button')[0];
|
||||
addFrameButton.addEventListener('mousedown', this.addFrame.bind(this));
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.addFrame = function () {
|
||||
this.framesheet.addEmptyFrame();
|
||||
this.framesheet.addEmptyFrame();
|
||||
this.framesheet.setCurrentFrameIndex(this.framesheet.getFrameCount() - 1);
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.flagForRedraw_ = function () {
|
||||
this.redrawFlag = true;
|
||||
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;
|
||||
}
|
||||
if (this.redrawFlag) {
|
||||
// TODO(vincz): Full redraw on any drawing modification, optimize.
|
||||
this.createPreviews_();
|
||||
this.redrawFlag = false;
|
||||
}
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.createPreviews_ = function () {
|
||||
|
||||
this.container.html("");
|
||||
// Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
|
||||
$(".tooltip").remove();
|
||||
|
||||
this.container.html("");
|
||||
// Manually remove tooltips since mouseout events were shortcut by the DOM refresh:
|
||||
$(".tooltip").remove();
|
||||
|
||||
var frameCount = this.framesheet.getFrameCount();
|
||||
var frameCount = this.framesheet.getFrameCount();
|
||||
|
||||
for (var i = 0, l = frameCount; i < l ; i++) {
|
||||
this.container.append(this.createInterstitialTile_(i));
|
||||
this.container.append(this.createPreviewTile_(i));
|
||||
}
|
||||
this.container.append(this.createInterstitialTile_(frameCount));
|
||||
for (var i = 0, l = frameCount; i < l ; i++) {
|
||||
this.container.append(this.createInterstitialTile_(i));
|
||||
this.container.append(this.createPreviewTile_(i));
|
||||
}
|
||||
this.container.append(this.createInterstitialTile_(frameCount));
|
||||
|
||||
var needDragndropBehavior = !!(frameCount > 1);
|
||||
if(needDragndropBehavior) {
|
||||
this.initDragndropBehavior_();
|
||||
}
|
||||
var needDragndropBehavior = !!(frameCount > 1);
|
||||
if(needDragndropBehavior) {
|
||||
this.initDragndropBehavior_();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.PreviewFilmController.prototype.createInterstitialTile_ = function (tileNumber) {
|
||||
var interstitialTile = document.createElement("div");
|
||||
interstitialTile.className = "interstitial-tile"
|
||||
interstitialTile.setAttribute("data-tile-type", "interstitial");
|
||||
interstitialTile.setAttribute("data-inject-drop-tile-at", tileNumber);
|
||||
var interstitialTile = document.createElement("div");
|
||||
interstitialTile.className = "interstitial-tile"
|
||||
interstitialTile.setAttribute("data-tile-type", "interstitial");
|
||||
interstitialTile.setAttribute("data-inject-drop-tile-at", tileNumber);
|
||||
|
||||
return interstitialTile;
|
||||
return interstitialTile;
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.PreviewFilmController.prototype.initDragndropBehavior_ = function () {
|
||||
var tiles = $(".preview-tile");
|
||||
// Each preview film tile is draggable.
|
||||
tiles.draggable( {
|
||||
//containment: '.left-nav',
|
||||
stack: '.preview-tile',
|
||||
cursor: 'move',
|
||||
revert: true,
|
||||
start: function(event, ui) {
|
||||
// We only show the fake interstitial tiles when starting the
|
||||
// drag n drop interaction. We hide them when the DnD is done.
|
||||
$('#preview-list').addClass("show-interstitial-tiles");
|
||||
},
|
||||
stop: function() {
|
||||
$('#preview-list').removeClass("show-interstitial-tiles");
|
||||
}
|
||||
});
|
||||
var tiles = $(".preview-tile");
|
||||
// Each preview film tile is draggable.
|
||||
tiles.draggable( {
|
||||
//containment: '.left-nav',
|
||||
stack: '.preview-tile',
|
||||
cursor: 'move',
|
||||
revert: true,
|
||||
start: function(event, ui) {
|
||||
// We only show the fake interstitial tiles when starting the
|
||||
// drag n drop interaction. We hide them when the DnD is done.
|
||||
$('#preview-list').addClass("show-interstitial-tiles");
|
||||
},
|
||||
stop: function() {
|
||||
$('#preview-list').removeClass("show-interstitial-tiles");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Each preview film tile is a drop target. This allow us to swap two tiles.
|
||||
// However, we want to be able to insert a tile between two other tiles.
|
||||
// For that we created fake interstitial tiles that are used as drop targets as well.
|
||||
var droppableTiles = $(".interstitial-tile");
|
||||
$.merge(droppableTiles, tiles);
|
||||
// Each preview film tile is a drop target. This allow us to swap two tiles.
|
||||
// However, we want to be able to insert a tile between two other tiles.
|
||||
// For that we created fake interstitial tiles that are used as drop targets as well.
|
||||
var droppableTiles = $(".interstitial-tile");
|
||||
$.merge(droppableTiles, tiles);
|
||||
|
||||
droppableTiles.droppable( {
|
||||
accept: ".preview-tile",
|
||||
tolerance: "pointer",
|
||||
activeClass: "droppable-active",
|
||||
hoverClass: "droppable-hover-active",
|
||||
drop: $.proxy(this.onDrop_, this)
|
||||
});
|
||||
droppableTiles.droppable( {
|
||||
accept: ".preview-tile",
|
||||
tolerance: "pointer",
|
||||
activeClass: "droppable-active",
|
||||
hoverClass: "droppable-hover-active",
|
||||
drop: $.proxy(this.onDrop_, this)
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ns.PreviewFilmController.prototype.onDrop_ = function( event, ui ) {
|
||||
var activeFrame;
|
||||
// When we drag from an element, the drag could start from a nested DOM element
|
||||
// inside the drag target. We normalize that by taking the correct ancestor:
|
||||
var originTile = $(event.srcElement).closest(".preview-tile");
|
||||
var originFrameId = parseInt(originTile.data("tile-number"), 10);
|
||||
var activeFrame;
|
||||
// When we drag from an element, the drag could start from a nested DOM element
|
||||
// inside the drag target. We normalize that by taking the correct ancestor:
|
||||
var originTile = $(event.srcElement).closest(".preview-tile");
|
||||
var originFrameId = parseInt(originTile.data("tile-number"), 10);
|
||||
|
||||
var dropTarget = $(event.target);
|
||||
if(dropTarget.data("tile-type") == "interstitial") {
|
||||
var targetInsertionId = parseInt(dropTarget.data("inject-drop-tile-at"), 10);
|
||||
// In case we drop outside of the tile container
|
||||
if(isNaN(originFrameId) || isNaN(targetInsertionId)) {
|
||||
return;
|
||||
}
|
||||
//console.log("origin-frame: "+originFrameId+" - targetInsertionId: "+ targetInsertionId)
|
||||
this.framesheet.moveFrame(originFrameId, targetInsertionId);
|
||||
|
||||
activeFrame = targetInsertionId;
|
||||
// The last fake interstitial tile is outside of the framesheet array bound.
|
||||
// It allow us to append after the very last element in this fake slot.
|
||||
// However, when setting back the active frame, we have to make sure the
|
||||
// frame does exist.
|
||||
if(activeFrame > (this.framesheet.getFrameCount() - 1)) {
|
||||
activeFrame = targetInsertionId - 1;
|
||||
}
|
||||
} else {
|
||||
var targetSwapId = parseInt(dropTarget.data("tile-number"), 10);
|
||||
// In case we drop outside of the tile container
|
||||
if(isNaN(originFrameId) || isNaN(targetSwapId)) {
|
||||
return;
|
||||
}
|
||||
//console.log("origin-frame: "+originFrameId+" - targetSwapId: "+ targetSwapId)
|
||||
this.framesheet.swapFrames(originFrameId, targetSwapId);
|
||||
activeFrame = targetSwapId;
|
||||
}
|
||||
var dropTarget = $(event.target);
|
||||
if(dropTarget.data("tile-type") == "interstitial") {
|
||||
var targetInsertionId = parseInt(dropTarget.data("inject-drop-tile-at"), 10);
|
||||
// In case we drop outside of the tile container
|
||||
if(isNaN(originFrameId) || isNaN(targetInsertionId)) {
|
||||
return;
|
||||
}
|
||||
//console.log("origin-frame: "+originFrameId+" - targetInsertionId: "+ targetInsertionId)
|
||||
this.framesheet.moveFrame(originFrameId, targetInsertionId);
|
||||
|
||||
activeFrame = targetInsertionId;
|
||||
// The last fake interstitial tile is outside of the framesheet array bound.
|
||||
// It allow us to append after the very last element in this fake slot.
|
||||
// However, when setting back the active frame, we have to make sure the
|
||||
// frame does exist.
|
||||
if(activeFrame > (this.framesheet.getFrameCount() - 1)) {
|
||||
activeFrame = targetInsertionId - 1;
|
||||
}
|
||||
} else {
|
||||
var targetSwapId = parseInt(dropTarget.data("tile-number"), 10);
|
||||
// In case we drop outside of the tile container
|
||||
if(isNaN(originFrameId) || isNaN(targetSwapId)) {
|
||||
return;
|
||||
}
|
||||
//console.log("origin-frame: "+originFrameId+" - targetSwapId: "+ targetSwapId)
|
||||
this.framesheet.swapFrames(originFrameId, targetSwapId);
|
||||
activeFrame = targetSwapId;
|
||||
}
|
||||
|
||||
|
||||
$('#preview-list').removeClass("show-interstitial-tiles");
|
||||
|
||||
$('#preview-list').removeClass("show-interstitial-tiles");
|
||||
|
||||
this.framesheet.setCurrentFrameIndex(activeFrame);
|
||||
this.framesheet.setCurrentFrameIndex(activeFrame);
|
||||
|
||||
// TODO(vincz): move localstorage request to the model layer?
|
||||
$.publish(Events.LOCALSTORAGE_REQUEST);
|
||||
};
|
||||
// TODO(vincz): move localstorage request to the model layer?
|
||||
$.publish(Events.LOCALSTORAGE_REQUEST);
|
||||
};
|
||||
|
||||
/**
|
||||
/**
|
||||
* @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);
|
||||
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;
|
||||
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));
|
||||
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));
|
||||
|
||||
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"
|
||||
|
||||
canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
|
||||
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"
|
||||
|
||||
canvasPreviewDuplicateAction.addEventListener('click', this.onAddButtonClick_.bind(this, tileNumber));
|
||||
|
||||
// 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);
|
||||
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
|
||||
// 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);
|
||||
previewTileRoot.appendChild(canvasPreviewDuplicateAction);
|
||||
|
||||
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);
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
return previewTileRoot;
|
||||
return previewTileRoot;
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.onPreviewClick_ = function (index, evt) {
|
||||
// has not class tile-action:
|
||||
if(!evt.target.classList.contains('tile-action')) {
|
||||
this.framesheet.setCurrentFrameIndex(index);
|
||||
}
|
||||
// has not class tile-action:
|
||||
if(!evt.target.classList.contains('tile-action')) {
|
||||
this.framesheet.setCurrentFrameIndex(index);
|
||||
}
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.onDeleteButtonClick_ = function (index, evt) {
|
||||
this.framesheet.removeFrameByIndex(index);
|
||||
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
|
||||
this.framesheet.removeFrameByIndex(index);
|
||||
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
|
||||
};
|
||||
|
||||
ns.PreviewFilmController.prototype.onAddButtonClick_ = function (index, evt) {
|
||||
this.framesheet.duplicateFrameByIndex(index);
|
||||
$.publish(Events.LOCALSTORAGE_REQUEST); // Should come from model
|
||||
this.framesheet.setCurrentFrameIndex(index + 1);
|
||||
this.framesheet.duplicateFrameByIndex(index);
|
||||
$.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);
|
||||
};
|
||||
})();
|
||||
Reference in New Issue
Block a user