mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
https://github.com/juliandescottes/piskel/issues/362
This commit is contained in:
Guillaume Martigny 2016-11-22 17:04:46 +01:00
parent e3b363d757
commit e328b4c7b8
5 changed files with 114 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/css/toolbox-animated-preview.css
View File

@ -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);

81
src/js/controller/preview/PreviewController.js
View File

@ -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);
};

4
src/js/service/keyboard/Shortcuts.js
View File

@ -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')

4
src/js/utils/UserSettings.js
View File

@ -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,

6
src/templates/preview.html
View File

@ -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-contextual-action original-size-button" rel="tooltip" data-placement="bottom">1x</div>
<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>