From 184b2e48aa4470325d9ff5b1b123ef52ce4bd047 Mon Sep 17 00:00:00 2001
From: juliandescottes <julian.descottes@gmail.com>
Date: Wed, 21 Dec 2016 17:44:33 +0100
Subject: [PATCH] disable gallery save when if spritesheet size too big (WIP)

---
 src/js/Constants.js                          |  5 ++-
 src/js/controller/settings/SaveController.js | 35 ++++++++++++++++++++
 src/templates/settings/save.html             |  2 +-
 3 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/js/Constants.js b/src/js/Constants.js
index c11c5823..3142b6e5 100644
--- a/src/js/Constants.js
+++ b/src/js/Constants.js
@@ -50,7 +50,10 @@ var Constants = {
   DRAWING_TEST_FOLDER : 'drawing',
 
   // 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
   APPENGINE_SAVE_URL : 'save',
diff --git a/src/js/controller/settings/SaveController.js b/src/js/controller/settings/SaveController.js
index 4597926c..dc418d34 100644
--- a/src/js/controller/settings/SaveController.js
+++ b/src/js/controller/settings/SaveController.js
@@ -19,6 +19,8 @@
    * @public
    */
   ns.SaveController.prototype.init = function () {
+    this.getPiskelSize_().then(this.onPiskelSizeCalculated_.bind(this));
+
     this.saveForm = document.querySelector('.save-form');
     this.insertSavePartials_();
 
@@ -50,6 +52,37 @@
     $.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">&nbsp;</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 () {
     this.getPartials_().forEach(function (partial) {
       pskl.utils.Template.insert(this.saveForm, 'beforeend', partial);
@@ -65,6 +98,8 @@
       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];
   };
 
diff --git a/src/templates/settings/save.html b/src/templates/settings/save.html
index aef784dc..87737a9a 100644
--- a/src/templates/settings/save.html
+++ b/src/templates/settings/save.html
@@ -26,7 +26,7 @@
   <div class="settings-title">Save online</div>
   <div class="settings-item">
     <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>
 </script>