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

Enhancement : Shortcuts for onion kin + layer prev

Browse Source 
Added 2 new icons :
- Animated Preview Panel : toggle onion skin
- Layers Toolbox : toggle layer preview

Added an icon font generated with icomoon.

SVGs for both icons have been made under Inkscape and are kept under
misc/svg.

All reference SVGs have been moved to misc/svg.

Added 2 keyboard shortcuts for toggling onion skin / layer preview :
- alt L : toggle layer preview
- alt O : toggle onion skin
This commit is contained in:
jdescottes
2014-07-05 11:27:11 +02:00
parent 24186d5aec
commit a77168986a
19 changed files with 380 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/js/controller/AnimatedPreviewController.js
View File

@ -16,16 +16,43 @@
var frame = this.piskelController.getCurrentFrame();
this.renderer = new pskl.rendering.frame.TiledFrameRenderer(this.container);
this.updateZoom_();
};
ns.AnimatedPreviewController.prototype.init = function () {
// the oninput event won't work on IE10 unfortunately, but at least will provide a
// consistent behavior across all other browsers that support the input type range
// see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
this.toggleOnionSkinEl = document.querySelector(".preview-toggle-onion-skin");
this.toggleOnionSkinEl.addEventListener('click', this.toggleOnionSkin_.bind(this));
pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
$.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
pskl.app.shortcutService.addShortcut('alt+O', this.toggleOnionSkin_.bind(this));
this.updateZoom_();
this.updateOnionSkinPreview_();
};
ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function () {
this.updateZoom_();
this.updateContainerDimensions_();
ns.AnimatedPreviewController.prototype.onUserSettingsChange_ = function (evt, name, value) {
if (name == pskl.UserSettings.ONION_SKIN) {
this.updateOnionSkinPreview_();
} else {
this.updateZoom_();
this.updateContainerDimensions_();
}
};
ns.AnimatedPreviewController.prototype.updateOnionSkinPreview_ = function () {
var enabledClassname = 'preview-toggle-onion-skin-enabled';
if (pskl.UserSettings.get(pskl.UserSettings.ONION_SKIN)) {
this.toggleOnionSkinEl.classList.add(enabledClassname);
} else {
this.toggleOnionSkinEl.classList.remove(enabledClassname);
}
};
ns.AnimatedPreviewController.prototype.updateZoom_ = function () {
@ -49,14 +76,6 @@
};
};
ns.AnimatedPreviewController.prototype.init = function () {
// the oninput event won't work on IE10 unfortunately, but at least will provide a
// consistent behavior across all other browsers that support the input type range
// see https://bugzilla.mozilla.org/show_bug.cgi?id=853670
$("#preview-fps")[0].addEventListener('change', this.onFPSSliderChange.bind(this));
document.querySelector(".right-column").style.width = Constants.ANIMATED_PREVIEW_WIDTH + 'px';
};
ns.AnimatedPreviewController.prototype.onFPSSliderChange = function (evt) {
this.setFPS(parseInt($("#preview-fps")[0].value, 10));
};

24
src/js/controller/LayersListController.js
View File

@ -7,16 +7,21 @@
ns.LayersListController.prototype.init = function () {
this.layerItemTemplate_ = pskl.utils.Template.get('layer-item-template');
this.rootEl = document.querySelectorAll('.layers-list-container')[0];
this.layersListEl = document.querySelectorAll('.layers-list')[0];
this.rootEl = document.querySelector('.layers-list-container');
this.layersListEl = document.querySelector('.layers-list');
this.toggleLayerPreviewEl = document.querySelector('.layers-toggle-preview');
this.rootEl.addEventListener('click', this.onClick_.bind(this));
this.toggleLayerPreviewEl.addEventListener('click', this.toggleLayerPreview_.bind(this));
$.subscribe(Events.PISKEL_RESET, this.renderLayerList_.bind(this));
pskl.app.shortcutService.addShortcut('alt+L', this.toggleLayerPreview_.bind(this));
this.renderLayerList_();
this.updateToggleLayerPreview_();
$.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
};
ns.LayersListController.prototype.renderLayerList_ = function () {
@ -25,6 +30,21 @@
layers.forEach(this.addLayerItem.bind(this));
};
ns.LayersListController.prototype.updateToggleLayerPreview_ = function () {
var enabledClassname = 'layers-toggle-preview-enabled';
if (pskl.UserSettings.get(pskl.UserSettings.LAYER_PREVIEW)) {
this.toggleLayerPreviewEl.classList.add(enabledClassname);
} else {
this.toggleLayerPreviewEl.classList.remove(enabledClassname);
}
};
ns.LayersListController.prototype.onUserSettingsChange_ = function (evt, name, value) {
if (name == pskl.UserSettings.LAYER_PREVIEW) {
this.updateToggleLayerPreview_();
}
};
ns.LayersListController.prototype.addLayerItem = function (layer, index) {
var isSelected = this.piskelController.getCurrentLayer() === layer;
var layerItemHtml = pskl.utils.Template.replace(this.layerItemTemplate_, {