mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Merging from master after PR zoom level
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
(function () {
|
||||
var ns = $.namespace("pskl.controller.settings");
|
||||
|
||||
|
||||
ns.ApplicationSettingsController = function () {};
|
||||
|
||||
/**
|
||||
@@ -18,21 +18,26 @@
|
||||
$('#show-grid').prop('checked', show_grid);
|
||||
|
||||
// Handle grid display changes:
|
||||
$('#show-grid').change($.proxy(function(evt) {
|
||||
var checked = $('#show-grid').prop('checked');
|
||||
pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
|
||||
}, this));
|
||||
$('#show-grid').change(this.onShowGridClick.bind(this));
|
||||
|
||||
// Handle canvas background changes:
|
||||
$('#background-picker-wrapper').click(function(evt) {
|
||||
var target = $(evt.target).closest('.background-picker');
|
||||
if (target.length) {
|
||||
var backgroundClass = target.data('background-class');
|
||||
pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
|
||||
|
||||
$('.background-picker').removeClass('selected');
|
||||
target.addClass('selected');
|
||||
}
|
||||
});
|
||||
$('#background-picker-wrapper').click(this.onBackgroundClick.bind(this));
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onShowGridClick = function (evt) {
|
||||
var checked = $('#show-grid').prop('checked');
|
||||
pskl.UserSettings.set(pskl.UserSettings.SHOW_GRID, checked);
|
||||
};
|
||||
|
||||
ns.ApplicationSettingsController.prototype.onBackgroundClick = function (evt) {
|
||||
var target = $(evt.target).closest('.background-picker');
|
||||
if (target.length) {
|
||||
var backgroundClass = target.data('background-class');
|
||||
pskl.UserSettings.set(pskl.UserSettings.CANVAS_BACKGROUND, backgroundClass);
|
||||
|
||||
$('.background-picker').removeClass('selected');
|
||||
target.addClass('selected');
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
@@ -8,18 +8,18 @@
|
||||
/**
|
||||
* List of Resolutions applicable for Gif export
|
||||
* @static
|
||||
* @type {Array} array of Objects {dpi:{Number}, default:{Boolean}}
|
||||
* @type {Array} array of Objects {zoom:{Number}, default:{Boolean}}
|
||||
*/
|
||||
ns.GifExportController.RESOLUTIONS = [
|
||||
{
|
||||
'dpi' : 1
|
||||
'zoom' : 1
|
||||
},{
|
||||
'dpi' : 5
|
||||
'zoom' : 5
|
||||
},{
|
||||
'dpi' : 10,
|
||||
'zoom' : 10,
|
||||
'default' : true
|
||||
},{
|
||||
'dpi' : 20
|
||||
'zoom' : 20
|
||||
}
|
||||
];
|
||||
|
||||
@@ -37,11 +37,11 @@
|
||||
|
||||
ns.GifExportController.prototype.onUploadFormSubmit_ = function (evt) {
|
||||
evt.originalEvent.preventDefault();
|
||||
var selectedDpi = this.getSelectedDpi_(),
|
||||
var selectedZoom = this.getSelectedZoom_(),
|
||||
fps = this.piskelController.getFPS(),
|
||||
dpi = selectedDpi;
|
||||
zoom = selectedZoom;
|
||||
|
||||
this.renderAsImageDataAnimatedGIF(dpi, fps, this.onGifRenderingCompleted_.bind(this));
|
||||
this.renderAsImageDataAnimatedGIF(zoom, fps, this.onGifRenderingCompleted_.bind(this));
|
||||
};
|
||||
|
||||
ns.GifExportController.prototype.onGifRenderingCompleted_ = function (imageData) {
|
||||
@@ -59,15 +59,15 @@
|
||||
this.previewContainerEl.innerHTML = "<div><img style='max-width:240px;' src='"+src+"'/></div>";
|
||||
};
|
||||
|
||||
ns.GifExportController.prototype.getSelectedDpi_ = function () {
|
||||
var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-dpi]"),
|
||||
ns.GifExportController.prototype.getSelectedZoom_ = function () {
|
||||
var radiosColl = this.uploadForm.get(0).querySelectorAll("[name=gif-zoom-level]"),
|
||||
radios = Array.prototype.slice.call(radiosColl,0);
|
||||
var selectedRadios = radios.filter(function(radio) {return !!radio.checked;});
|
||||
|
||||
if (selectedRadios.length == 1) {
|
||||
return selectedRadios[0].value;
|
||||
} else {
|
||||
throw "Unexpected error when retrieving selected dpi";
|
||||
throw "Unexpected error when retrieving selected zoom";
|
||||
}
|
||||
};
|
||||
|
||||
@@ -80,9 +80,9 @@
|
||||
};
|
||||
|
||||
ns.GifExportController.prototype.createRadioForResolution_ = function (resolution) {
|
||||
var dpi = resolution.dpi;
|
||||
var label = dpi*this.piskelController.getWidth() + "x" + dpi*this.piskelController.getHeight();
|
||||
var value = dpi;
|
||||
var zoom = resolution.zoom;
|
||||
var label = zoom*this.piskelController.getWidth() + "x" + zoom*this.piskelController.getHeight();
|
||||
var value = zoom;
|
||||
|
||||
var radioHTML = pskl.utils.Template.replace(this.radioTemplate_, {value : value, label : label});
|
||||
var radioEl = pskl.utils.Template.createFromHTML(radioHTML);
|
||||
@@ -104,17 +104,17 @@
|
||||
reader.readAsDataURL(blob);
|
||||
};
|
||||
|
||||
ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(dpi, fps, cb) {
|
||||
ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
|
||||
var gif = new window.GIF({
|
||||
workers: 2,
|
||||
quality: 10,
|
||||
width: this.piskelController.getWidth()*dpi,
|
||||
height: this.piskelController.getHeight()*dpi
|
||||
width: this.piskelController.getWidth()*zoom,
|
||||
height: this.piskelController.getHeight()*zoom
|
||||
});
|
||||
|
||||
for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
|
||||
var frame = this.piskelController.getFrameAt(i);
|
||||
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, dpi);
|
||||
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
|
||||
var canvas = canvasRenderer.render();
|
||||
gif.addFrame(canvas.getContext('2d'), {
|
||||
delay: 1000 / fps
|
||||
|
||||
Reference in New Issue
Block a user