mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
disable gallery save when if spritesheet size too big (WIP)
This commit is contained in:
parent
e97a641e95
commit
184b2e48aa
|
@ -50,7 +50,10 @@ var Constants = {
|
||||||
DRAWING_TEST_FOLDER : 'drawing',
|
DRAWING_TEST_FOLDER : 'drawing',
|
||||||
|
|
||||||
// Maximum size of a sprite that can be saved on piskelapp datastore.
|
// Maximum size of a sprite that can be saved on piskelapp datastore.
|
||||||
APPENGINE_SAVE_LIMIT : 1000,
|
// This size will be compared to the length of the stringified serialization of the sprite.
|
||||||
|
// This is an approximation at best but gives correct results in most cases.
|
||||||
|
// The datastore limit is 1 MiB, which we roughly approximate to 1 million characters.
|
||||||
|
APPENGINE_SAVE_LIMIT : 1 * 1000 * 1000,
|
||||||
|
|
||||||
// SERVICE URLS
|
// SERVICE URLS
|
||||||
APPENGINE_SAVE_URL : 'save',
|
APPENGINE_SAVE_URL : 'save',
|
||||||
|
|
|
@ -19,6 +19,8 @@
|
||||||
* @public
|
* @public
|
||||||
*/
|
*/
|
||||||
ns.SaveController.prototype.init = function () {
|
ns.SaveController.prototype.init = function () {
|
||||||
|
this.getPiskelSize_().then(this.onPiskelSizeCalculated_.bind(this));
|
||||||
|
|
||||||
this.saveForm = document.querySelector('.save-form');
|
this.saveForm = document.querySelector('.save-form');
|
||||||
this.insertSavePartials_();
|
this.insertSavePartials_();
|
||||||
|
|
||||||
|
@ -50,6 +52,37 @@
|
||||||
$.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this));
|
$.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Retrieve the size of the spritesheet that will be saved.
|
||||||
|
* Not completely accurate, as the size canbe impacted by whatever the user enters
|
||||||
|
* in the name and description fields on the save panel, but should give a rough idea.
|
||||||
|
*
|
||||||
|
* @return {Promise} promise that will resolve the spritesheet size {Number}
|
||||||
|
*/
|
||||||
|
ns.SaveController.prototype.getPiskelSize_ = function () {
|
||||||
|
var piskelController = this.piskelController;
|
||||||
|
return new Promise(function (resolve, reject) {
|
||||||
|
window.setTimeout(function () {
|
||||||
|
try {
|
||||||
|
var spritesheetSize = JSON.stringify(piskelController.serialize()).length;
|
||||||
|
resolve(spritesheetSize);
|
||||||
|
} catch (e) {
|
||||||
|
reject(e);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
ns.SaveController.prototype.onPiskelSizeCalculated_ = function (spritesheetSize) {
|
||||||
|
if (this.saveGalleryButton && spritesheetSize > Constants.APPENGINE_SAVE_LIMIT) {
|
||||||
|
this.saveGalleryButton.setAttribute('disabled', true);
|
||||||
|
document.querySelector('.save-online-status').innerHTML =
|
||||||
|
'<div class="icon-common-warning-red" style="float:left; margin-top: 10px"> </div>' +
|
||||||
|
'<div style="overflow: hidden; padding-left: 10px">This sprite is too big to be saved on the gallery. ' +
|
||||||
|
'Try saving it as a .piskel file.</div>';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
ns.SaveController.prototype.insertSavePartials_ = function () {
|
ns.SaveController.prototype.insertSavePartials_ = function () {
|
||||||
this.getPartials_().forEach(function (partial) {
|
this.getPartials_().forEach(function (partial) {
|
||||||
pskl.utils.Template.insert(this.saveForm, 'beforeend', partial);
|
pskl.utils.Template.insert(this.saveForm, 'beforeend', partial);
|
||||||
|
@ -65,6 +98,8 @@
|
||||||
return [PARTIALS.GALLERY, PARTIALS.LOCALSTORAGE, PARTIALS.FILEDOWNLOAD];
|
return [PARTIALS.GALLERY, PARTIALS.LOCALSTORAGE, PARTIALS.FILEDOWNLOAD];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Uncomment this line to test the online save section locally.
|
||||||
|
// return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY];
|
||||||
return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY_UNAVAILABLE];
|
return [PARTIALS.FILEDOWNLOAD, PARTIALS.LOCALSTORAGE, PARTIALS.GALLERY_UNAVAILABLE];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
<div class="settings-title">Save online</div>
|
<div class="settings-title">Save online</div>
|
||||||
<div class="settings-item">
|
<div class="settings-item">
|
||||||
<input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
|
<input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
|
||||||
<div class="save-status">Your piskel will be stored online in your gallery.</div>
|
<div class="save-status save-online-status">Your piskel will be stored online in your gallery.</div>
|
||||||
</div>
|
</div>
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user