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

Move tooltips

Browse Source 
Change "best" option on resize
Update available options on resize and configuration change
This commit is contained in:
Guillaume Martigny 2016-11-23 18:32:17 +01:00
parent e328b4c7b8
commit 696d18748a
3 changed files with 99 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -115,6 +115,10 @@
font-family: Tahoma; font-family: Tahoma;
} }
.preview-contextual-action-disabled {
display: none;
}
.preview-contextual-action:hover { .preview-contextual-action:hover {
color: gold; color: gold;
border-color: gold; border-color: gold;

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

@ -5,12 +5,6 @@
var PREVIEW_SIZE = 200; var PREVIEW_SIZE = 200;
var RENDER_MINIMUM_DELAY = 300; var RENDER_MINIMUM_DELAY = 300;
var PREVIEW = {
ORIGINAL: 'original',
BEST: 'best',
FULL: 'full'
};
ns.PreviewController = function (piskelController, container) { ns.PreviewController = function (piskelController, container) {
this.piskelController = piskelController; this.piskelController = piskelController;
this.container = container; this.container = container;
@ -19,9 +13,6 @@
this.currentIndex = 0; this.currentIndex = 0;
this.onionSkinShortcut = pskl.service.keyboard.Shortcuts.MISC.ONION_SKIN; 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.lastRenderTime = 0;
this.renderFlag = true; this.renderFlag = true;
@ -33,9 +24,29 @@
this.fpsRangeInput = document.querySelector('#preview-fps'); this.fpsRangeInput = document.querySelector('#preview-fps');
this.fpsCounterDisplay = document.querySelector('#display-fps'); this.fpsCounterDisplay = document.querySelector('#display-fps');
this.openPopupPreview = document.querySelector('.open-popup-preview-button'); this.openPopupPreview = document.querySelector('.open-popup-preview-button');
this.originalSizeButton = document.querySelector('.original-size-button'); this.previewSize = {
this.bestSizeButton = document.querySelector('.best-size-button'); original: {
this.fullSizeButton = document.querySelector('.full-size-button'); name: 'original',
button: document.querySelector('.original-size-button'),
shortcut: pskl.service.keyboard.Shortcuts.MISC.X1_PREVIEW,
tooltip: 'Original size preview',
enabled: true
},
best: {
name: 'best',
button: document.querySelector('.best-size-button'),
shortcut: pskl.service.keyboard.Shortcuts.MISC.BEST_PREVIEW,
tooltip: 'Round factor size preview',
enabled: true
},
full: {
name: 'full',
button: document.querySelector('.full-size-button'),
shortcut: pskl.service.keyboard.Shortcuts.MISC.FULL_PREVIEW,
tooltip: 'Biggest factor size preview',
enabled: true
}
};
this.toggleOnionSkinButton = document.querySelector('.preview-toggle-onion-skin'); this.toggleOnionSkinButton = document.querySelector('.preview-toggle-onion-skin');
/** /**
@ -55,47 +66,76 @@
document.querySelector('.right-column').style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px'; document.querySelector('.right-column').style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
pskl.utils.Event.addEventListener(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this); var addEvent = pskl.utils.Event.addEventListener;
pskl.utils.Event.addEventListener(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this); addEvent(this.toggleOnionSkinButton, 'click', this.toggleOnionSkin_, this);
var previewSizeFunc = this.onChangePreviewSize_; addEvent(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this);
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)); var registerShortcut = pskl.app.shortcutService.registerShortcut.bind(pskl.app.shortcutService);
pskl.app.shortcutService.registerShortcut(this.originalSizeShortcut, previewSizeFunc.bind(this, PREVIEW.ORIGINAL)); registerShortcut(this.onionSkinShortcut, this.toggleOnionSkin_.bind(this));
pskl.app.shortcutService.registerShortcut(this.bestSizeShortcut, previewSizeFunc.bind(this, PREVIEW.BEST));
pskl.app.shortcutService.registerShortcut(this.fullSizeShortcut, previewSizeFunc.bind(this, PREVIEW.FULL)); var onionSkinTooltip = pskl.utils.TooltipFormatter.format('Toggle onion skin', this.onionSkinShortcut);
this.toggleOnionSkinButton.setAttribute('title', onionSkinTooltip);
for (var size in this.previewSize) {
if (this.previewSize.hasOwnProperty(size)) {
var wrapper = this.previewSize[size];
addEvent(wrapper.button, 'click', this.onChangePreviewSize_, this, wrapper.name);
registerShortcut(wrapper.shortcut, this.onChangePreviewSize_.bind(this, wrapper.name));
var tooltip = pskl.utils.TooltipFormatter.format(wrapper.tooltip, wrapper.shortcut);
wrapper.button.setAttribute('title', tooltip);
}
}
$.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this)); $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this)); $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
$.subscribe(Events.PISKEL_SAVE_STATE, this.setRenderFlag_.bind(this, true)); $.subscribe(Events.PISKEL_SAVE_STATE, this.setRenderFlag_.bind(this, true));
$.subscribe(Events.PISKEL_RESET, this.setRenderFlag_.bind(this, true)); $.subscribe(Events.PISKEL_RESET, this.setRenderFlag_.bind(this, true));
this.initTooltips_(); this.updatePreviewSizeButtons_();
this.initDynamicPreviewSize_();
this.popupPreviewController.init(); this.popupPreviewController.init();
this.updateZoom_(); this.updateZoom_();
this.updateOnionSkinPreview_(); this.updateOnionSkinPreview_();
this.updateOriginalSizeButton_(); this.selectPreviewSizeButton_();
this.updateMaxFPS_(); this.updateMaxFPS_();
this.updateContainerDimensions_(); this.updateContainerDimensions_();
}; };
ns.PreviewController.prototype.initTooltips_ = function () { ns.PreviewController.prototype.updatePreviewSizeButtons_ = function () {
var onionSkinTooltip = pskl.utils.TooltipFormatter.format('Toggle onion skin', this.onionSkinShortcut); var fullZoom = this.calculateZoom_();
this.toggleOnionSkinButton.setAttribute('title', onionSkinTooltip); var seamlessModeEnabled = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
var originalSizeTooltip = pskl.utils.TooltipFormatter.format('Original size preview', this.originalSizeShortcut);
this.originalSizeButton.setAttribute('title', originalSizeTooltip); if (seamlessModeEnabled) {
var bestSizeTooltip = pskl.utils.TooltipFormatter.format('Round factor size preview', this.bestSizeShortcut); this.togglePreviewSizeButtonState_(this.previewSize.best, false);
this.bestSizeButton.setAttribute('title', bestSizeTooltip); this.togglePreviewSizeButtonState_(this.previewSize.full, false);
var fullSizeTooltip = pskl.utils.TooltipFormatter.format('Biggest factor size preview', this.fullSizeShortcut); this.onChangePreviewSize_(this.previewSize.original.name);
this.fullSizeButton.setAttribute('title', fullSizeTooltip); } else {
if (Number.isInteger(fullZoom)) {
this.togglePreviewSizeButtonState_(this.previewSize.full, false);
if (pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE) === this.previewSize.full.name) {
this.onChangePreviewSize_(this.previewSize.best.name);
}
} else if (fullZoom <= 1) {
this.togglePreviewSizeButtonState_(this.previewSize.best, false);
if (fullZoom < 1) {
this.togglePreviewSizeButtonState_(this.previewSize.original, false);
this.onChangePreviewSize_(this.previewSize.full.name);
} else {
this.onChangePreviewSize_(this.previewSize.original.name);
}
} else {
this.togglePreviewSizeButtonState_(this.previewSize.original, true);
this.togglePreviewSizeButtonState_(this.previewSize.best, true);
this.togglePreviewSizeButtonState_(this.previewSize.full, true);
}
}
this.previewSize.best.button.textContent = Math.floor(fullZoom) + 'x';
}; };
ns.PreviewController.prototype.initDynamicPreviewSize_ = function () { ns.PreviewController.prototype.togglePreviewSizeButtonState_ = function (wrapper, enable) {
this.bestSizeButton.textContent = this.calculateZoom_(true) + 'x'; var disabledClassname = 'preview-contextual-action-disabled';
wrapper.button.classList.toggle(disabledClassname, !enable);
wrapper.enabled = enable;
}; };
ns.PreviewController.prototype.onOpenPopupPreviewClick_ = function () { ns.PreviewController.prototype.onOpenPopupPreviewClick_ = function () {
@ -103,7 +143,9 @@
}; };
ns.PreviewController.prototype.onChangePreviewSize_ = function (choice) { ns.PreviewController.prototype.onChangePreviewSize_ = function (choice) {
pskl.UserSettings.set(pskl.UserSettings.PREVIEW_SIZE, choice); if (this.previewSize[choice].enabled) {
pskl.UserSettings.set(pskl.UserSettings.PREVIEW_SIZE, choice);
}
}; };
ns.PreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) { ns.PreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
@ -111,9 +153,13 @@
this.updateOnionSkinPreview_(); this.updateOnionSkinPreview_();
} else if (name == pskl.UserSettings.MAX_FPS) { } else if (name == pskl.UserSettings.MAX_FPS) {
this.updateMaxFPS_(); this.updateMaxFPS_();
} else if (name == pskl.UserSettings.SEAMLESS_MODE) {
this.onChangePreviewSize_(this.previewSize.original.name);
this.togglePreviewSizeButtonState_(this.previewSize.best, !value);
this.togglePreviewSizeButtonState_(this.previewSize.full, !value);
} else { } else {
this.updateZoom_(); this.updateZoom_();
this.updateOriginalSizeButton_(); this.selectPreviewSizeButton_();
this.updateContainerDimensions_(); this.updateContainerDimensions_();
} }
}; };
@ -124,7 +170,7 @@
this.toggleOnionSkinButton.classList.toggle(enabledClassname, isEnabled); this.toggleOnionSkinButton.classList.toggle(enabledClassname, isEnabled);
}; };
ns.PreviewController.prototype.updateOriginalSizeButton_ = function () { ns.PreviewController.prototype.selectPreviewSizeButton_ = function () {
var enabledClassname = 'size-button-selected'; var enabledClassname = 'size-button-selected';
var currentlySelected = document.querySelector('.' + enabledClassname); var currentlySelected = document.querySelector('.' + enabledClassname);
if (currentlySelected) { if (currentlySelected) {
@ -132,18 +178,7 @@
} }
var previewSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE); var previewSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE);
var button; var button = this.previewSize[previewSize].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); button.classList.add(enabledClassname);
}; };
@ -154,18 +189,17 @@
}; };
ns.PreviewController.prototype.updateZoom_ = function () { ns.PreviewController.prototype.updateZoom_ = function () {
var choosedPreviewSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE); var chosenPreviewSize = pskl.UserSettings.get(pskl.UserSettings.PREVIEW_SIZE);
var seamlessModeEnabled = pskl.UserSettings.get(pskl.UserSettings.SEAMLESS_MODE);
var zoom; var zoom;
switch (choosedPreviewSize) { switch (chosenPreviewSize) {
case PREVIEW.ORIGINAL: case this.previewSize.original.name:
zoom = 1; zoom = 1;
break; break;
case PREVIEW.BEST: case this.previewSize.best.name:
zoom = this.calculateZoom_(true); zoom = this.calculateZoom_(true);
break; break;
case PREVIEW.FULL: case this.previewSize.full.name:
zoom = this.calculateZoom_(false); zoom = this.calculateZoom_(false);
break; break;
} }
@ -261,6 +295,7 @@
ns.PreviewController.prototype.onFrameSizeChange_ = function () { ns.PreviewController.prototype.onFrameSizeChange_ = function () {
this.updateZoom_(); this.updateZoom_();
this.updateContainerDimensions_(); this.updateContainerDimensions_();
this.updatePreviewSizeButtons_();
}; };
ns.PreviewController.prototype.updateContainerDimensions_ = function () { ns.PreviewController.prototype.updateContainerDimensions_ = function () {

6
src/templates/preview.html
View File

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