diff --git a/src/css/toolbox-animated-preview.css b/src/css/toolbox-animated-preview.css index 86f30a2e..0b466b0f 100644 --- a/src/css/toolbox-animated-preview.css +++ b/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); diff --git a/src/js/controller/preview/PreviewController.js b/src/js/controller/preview/PreviewController.js index 96b701b7..ba7b424c 100644 --- a/src/js/controller/preview/PreviewController.js +++ b/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 ORIGINAL_SIZE_SHORTCUT = 'alt+1'; + var PREVIEW = { + 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 () { - var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW); - pskl.UserSettings.set(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW, !isEnabled); + ns.PreviewController.prototype.onChangePreviewSize_ = function (choice) { + pskl.UserSettings.set(pskl.UserSettings.PREVIEW_SIZE, choice); }; ns.PreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) { @@ -105,9 +125,26 @@ }; ns.PreviewController.prototype.updateOriginalSizeButton_ = function () { - var enabledClassname = 'original-size-button-enabled'; - var isEnabled = pskl.UserSettings.get(pskl.UserSettings.ORIGINAL_SIZE_PREVIEW); - this.originalSizeButton.classList.toggle(enabledClassname, isEnabled); + var enabledClassname = 'size-button-selected'; + var currentlySelected = document.querySelector('.' + enabledClassname); + 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); }; diff --git a/src/js/service/keyboard/Shortcuts.js b/src/js/service/keyboard/Shortcuts.js index c0dc7369..93224cfe 100644 --- a/src/js/service/keyboard/Shortcuts.js +++ b/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') diff --git a/src/js/utils/UserSettings.js b/src/js/utils/UserSettings.js index fcb9fe1b..c3066f7b 100644 --- a/src/js/utils/UserSettings.js +++ b/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, diff --git a/src/templates/preview.html b/src/templates/preview.html index c371dc8b..664b3fb7 100644 --- a/src/templates/preview.html +++ b/src/templates/preview.html @@ -1,7 +1,11 @@