Add a dropdown for preview size options [1x, best, full]

https://github.com/juliandescottes/piskel/issues/362

src/css/toolbox-animated-preview.css

@@ -98,7 +98,9 @@
   opacity: 1;
 }
 
-.original-size-button {
+.preview-contextual-action {
+  float: left;
+
   width : 18px;
   height: 18px;
   line-height: 18px;
@@ -113,15 +115,47 @@
   font-family: Tahoma;
 }
 
-.original-size-button-enabled {
+.preview-contextual-action:hover {
   color: gold;
   border-color: gold;
 }
 
-.preview-contextual-action {
+/**
+ * Drop-down in preview size selection
+ */
+.preview-drop-down {
   float: left;
+
+  width : 22px;
+  line-height: 18px;
+  margin: 0 5px;
 }
 
+.preview-drop-down .preview-contextual-action {
+  position: relative;
+  margin: -100% 0 0 0;
+  opacity: 0;
+  transition: opacity linear .2s,
+              margin linear .2s;
+  transition-delay: 0s, .2s;
+  z-index: 1;
+}
+
+.preview-drop-down:hover .preview-contextual-action {
+  margin: 0 0 5px 0;
+  opacity: 1;
+  transition-delay: 0s, 0s;
+}
+
+.preview-drop-down .size-button-selected {
+  margin: 0;
+  opacity: 1;
+  color: gold;
+  border-color: gold;
+  z-index: 5;
+}
+
+
 .open-popup-preview-button {
   border : 2px solid white;
   background-color : rgba(0,0,0,0.3);

src/js/controller/preview/PreviewController.js

@@ -5,8 +5,11 @@
   var PREVIEW_SIZE = 200;
   var RENDER_MINIMUM_DELAY = 300;
 
-  var ONION_SKIN_SHORTCUT = 'alt+O';
+  var PREVIEW = {
-  var ORIGINAL_SIZE_SHORTCUT = 'alt+1';
+    ORIGINAL: 'original',
+    BEST: 'best',
+    FULL: 'full'
+  };
 
   ns.PreviewController = function (piskelController, container) {
     this.piskelController = piskelController;
@@ -17,6 +20,8 @@
 
     this.onionSkinShortcut = pskl.service.keyboard.Shortcuts.MISC.ONION_SKIN;
     this.originalSizeShortcut = pskl.service.keyboard.Shortcuts.MISC.X1_PREVIEW;
+    this.bestSizeShortcut = pskl.service.keyboard.Shortcuts.MISC.BEST_PREVIEW;
+    this.fullSizeShortcut = pskl.service.keyboard.Shortcuts.MISC.FULL_PREVIEW;
 
     this.lastRenderTime = 0;
     this.renderFlag = true;
@@ -29,6 +34,8 @@
     this.fpsCounterDisplay = document.querySelector('#display-fps');
     this.openPopupPreview = document.querySelector('.open-popup-preview-button');
     this.originalSizeButton = document.querySelector('.original-size-button');
+    this.bestSizeButton = document.querySelector('.best-size-button');
+    this.fullSizeButton = document.querySelector('.full-size-button');
     this.toggleOnionSkinButton = document.querySelector('.preview-toggle-onion-skin');
 
     /**
@@ -50,10 +57,15 @@
 
     pskl.utils.Event.addEventListener(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this);
     pskl.utils.Event.addEventListener(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this);
-    pskl.utils.Event.addEventListener(this.originalSizeButton, 'click', this.onOriginalSizeButtonClick_, this);
+    var previewSizeFunc = this.onChangePreviewSize_;
+    pskl.utils.Event.addEventListener(this.originalSizeButton, 'click', previewSizeFunc, this, PREVIEW.ORIGINAL);
+    pskl.utils.Event.addEventListener(this.bestSizeButton, 'click', previewSizeFunc, this, PREVIEW.BEST);
+    pskl.utils.Event.addEventListener(this.fullSizeButton, 'click', previewSizeFunc, this, PREVIEW.FULL);
 
     pskl.app.shortcutService.registerShortcut(this.onionSkinShortcut, this.toggleOnionSkin_.bind(this));
-    pskl.app.shortcutService.registerShortcut(this.originalSizeShortcut, this.onOriginalSizeButtonClick_.bind(this));
+    pskl.app.shortcutService.registerShortcut(this.originalSizeShortcut, previewSizeFunc.bind(this, PREVIEW.ORIGINAL));
+    pskl.app.shortcutService.registerShortcut(this.bestSizeShortcut, previewSizeFunc.bind(this, PREVIEW.BEST));
+    pskl.app.shortcutService.registerShortcut(this.fullSizeShortcut, previewSizeFunc.bind(this, PREVIEW.FULL));
 
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
@@ -61,6 +73,7 @@
     $.subscribe(Events.PISKEL_RESET, this.setRenderFlag_.bind(this, true));
 
     this.initTooltips_();
+    this.initDynamicPreviewSize_();
     this.popupPreviewController.init();
 
     this.updateZoom_();
@@ -75,15 +88,22 @@
     this.toggleOnionSkinButton.setAttribute('title', onionSkinTooltip);
     var originalSizeTooltip = pskl.utils.TooltipFormatter.format('Original size preview', this.originalSizeShortcut);
     this.originalSizeButton.setAttribute('title', originalSizeTooltip);
+    var bestSizeTooltip = pskl.utils.TooltipFormatter.format('Round factor size preview', this.bestSizeShortcut);
+    this.bestSizeButton.setAttribute('title', bestSizeTooltip);
+    var fullSizeTooltip = pskl.utils.TooltipFormatter.format('Biggest factor size preview', this.fullSizeShortcut);
+    this.fullSizeButton.setAttribute('title', fullSizeTooltip);
+  };
+
+  ns.PreviewController.prototype.initDynamicPreviewSize_ = function () {
+    this.bestSizeButton.textContent = this.calculateZoom_(true) + 'x';
   };
 
   ns.PreviewController.prototype.onOpenPopupPreviewClick_ = function () {
     this.popupPreviewController.open();
   };
 
-  ns.PreviewController.prototype.onOriginalSizeButtonClick_ = function () {
+  ns.PreviewController.prototype.onChangePreviewSize_ = function (choice) {
-    var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW);
+    pskl.UserSettings.set(pskl.UserSettings.PREVIEW_SIZE, choice);
-    pskl.UserSettings.set(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW, !isEnabled);
   };
 
   ns.PreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
@@ -105,9 +125,26 @@
   };
 
   ns.PreviewController.prototype.updateOriginalSizeButton_ = function () {
-    var enabledClassname = 'original-size-button-enabled';
+    var enabledClassname = 'size-button-selected';
-    var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW);
+    var currentlySelected = document.querySelector('.' + enabledClassname);
-    this.originalSizeButton.classList.toggle(enabledClassname, isEnabled);
+    if (currentlySelected) {
+      currentlySelected.classList.remove(enabledClassname);
+    }
+
+    var previewSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE);
+    var button;
+    switch (previewSize) {
+      case PREVIEW.ORIGINAL:
+        button = this.originalSizeButton;
+        break;
+      case PREVIEW.BEST:
+        button = this.bestSizeButton;
+        break;
+      case PREVIEW.FULL:
+        button = this.fullSizeButton;
+        break;
+    }
+    button.classList.add(enabledClassname);
   };
 
   ns.PreviewController.prototype.updateMaxFPS_ = function () {
@@ -117,11 +154,22 @@
   };
 
   ns.PreviewController.prototype.updateZoom_ = function () {
-    var originalSizeEnabled = pskl.UserSettings.get(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW);
+    var choosedPreviewSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE);
     var seamlessModeEnabled = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
-    var useOriginalSize = originalSizeEnabled || seamlessModeEnabled;
 
-    var zoom = useOriginalSize ? 1 : this.calculateZoom_();
+    var zoom;
+    switch (choosedPreviewSize) {
+      case PREVIEW.ORIGINAL:
+        zoom = 1;
+        break;
+      case PREVIEW.BEST:
+        zoom = this.calculateZoom_(true);
+        break;
+      case PREVIEW.FULL:
+        zoom = this.calculateZoom_(false);
+        break;
+    }
+
     this.renderer.setZoom(zoom);
     this.setRenderFlag_(true);
   };
@@ -197,11 +245,16 @@
   /**
    * Calculate the preview zoom depending on the framesheet size
    */
-  ns.PreviewController.prototype.calculateZoom_ = function () {
+  ns.PreviewController.prototype.calculateZoom_ = function (noFloat) {
     var frame = this.piskelController.getCurrentFrame();
     var hZoom = PREVIEW_SIZE / frame.getHeight();
     var wZoom = PREVIEW_SIZE / frame.getWidth();
 
+    if (noFloat) {
+      hZoom = Math.floor(hZoom);
+      wZoom = Math.floor(wZoom);
+    }
+
     return Math.min(hZoom, wZoom);
   };
 

src/js/service/keyboard/Shortcuts.js

@@ -55,7 +55,9 @@
       NEW_FRAME : createShortcut('new-frame', 'Create new empty frame', 'N'),
       DUPLICATE_FRAME : createShortcut('duplicate-frame', 'Duplicate selected frame', 'shift+N'),
       CHEATSHEET : createShortcut('cheatsheet', 'Open the keyboard shortcut cheatsheet', ['?', 'shift+?']),
-      X1_PREVIEW : createShortcut('x1-preview', 'Toggle original size preview', 'alt+1'),
+      X1_PREVIEW : createShortcut('x1-preview', 'Select original size preview', 'alt+1'),
+      BEST_PREVIEW : createShortcut('best-preview', 'Select best size preview', 'alt+2'),
+      FULL_PREVIEW : createShortcut('full-preview', 'Select full size preview', 'alt+3'),
       ONION_SKIN : createShortcut('onion-skin', 'Toggle onion skin', 'alt+O'),
       LAYER_PREVIEW : createShortcut('layer-preview', 'Toggle layer preview', 'alt+L'),
       CLOSE_POPUP : createShortcut('close-popup', 'Close an opened popup', 'ESC')

src/js/utils/UserSettings.js

@@ -8,7 +8,7 @@
     CANVAS_BACKGROUND : 'CANVAS_BACKGROUND',
     SELECTED_PALETTE : 'SELECTED_PALETTE',
     SEAMLESS_MODE : 'SEAMLESS_MODE',
-    ORIGINAL_SIZE_PREVIEW : 'ORIGINAL_SIZE_PREVIEW',
+    PREVIEW_SIZE : 'PREVIEW_SIZE',
     ONION_SKIN : 'ONION_SKIN',
     LAYER_PREVIEW : 'LAYER_PREVIEW',
     LAYER_OPACITY : 'LAYER_OPACITY',
@@ -26,7 +26,7 @@
       'CANVAS_BACKGROUND' : 'lowcont-dark-canvas-background',
       'SELECTED_PALETTE' : Constants.CURRENT_COLORS_PALETTE_ID,
       'SEAMLESS_MODE' : false,
-      'ORIGINAL_SIZE_PREVIEW' : false,
+      'PREVIEW_SIZE' : 'original',
       'ONION_SKIN' : false,
       'LAYER_OPACITY' : 0.2,
       'LAYER_PREVIEW' : true,

src/templates/preview.html

@@ -1,7 +1,11 @@
 <div id="animated-preview-container" class="preview-container">
   <div class="canvas-container-wrapper minimap-container">
     <div class="preview-contextual-actions">
+      <div class="preview-drop-down">
         <div class="preview-contextual-action  original-size-button" rel="tooltip" data-placement="bottom">1x</div>
+        <div class="preview-contextual-action  best-size-button" rel="tooltip" data-placement="bottom"></div>
+        <div class="preview-contextual-action  full-size-button" rel="tooltip" data-placement="bottom">Full</div>
+      </div>
       <div class="preview-contextual-action  open-popup-preview-button  icon-minimap-popup-preview-arrow-white"
            title="Open preview in popup" rel="tooltip" data-placement="bottom"></div>
     </div>