Issue #287 : Shortcuts now rely on Shortcut instances. Shortcut key c…

…an be changed dynamically.
piskelapp · Nov 12, 2015 · ca3bbf1 · ca3bbf1
1 parent 8081d5e
commit ca3bbf1
Show file tree

Hide file tree

Showing 35 changed files with 594 additions and 182 deletions.
diff --git a/src/js/controller/DrawingController.js b/src/js/controller/DrawingController.js
@@ -62,9 +62,10 @@
     $.subscribe(Events.USER_SETTINGS_CHANGED, this.onUserSettingsChange_.bind(this));
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
 
-    pskl.app.shortcutService.registerShortcut('0', this.resetZoom_.bind(this));
-    pskl.app.shortcutService.registerShortcut('+', this.increaseZoom_.bind(this, 1));
-    pskl.app.shortcutService.registerShortcut('-', this.decreaseZoom_.bind(this, 1));
+    var shortcuts = pskl.service.keyboard.Shortcuts;
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.RESET_ZOOM, this.resetZoom_.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.INCREASE_ZOOM, this.increaseZoom_.bind(this, 1));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.DECREASE_ZOOM, this.decreaseZoom_.bind(this, 1));
 
     window.setTimeout(function () {
       this.afterWindowResize_();

diff --git a/src/js/controller/LayersListController.js b/src/js/controller/LayersListController.js
@@ -5,6 +5,7 @@
 
   ns.LayersListController = function (piskelController) {
     this.piskelController = piskelController;
+    this.layerPreviewShortcut = pskl.service.keyboard.Shortcuts.MISC.LAYER_PREVIEW  ;
   };
 
   ns.LayersListController.prototype.init = function () {
@@ -36,10 +37,9 @@
     var descriptors = [{description : 'Opacity defined in PREFERENCES'}];
     var helpText = 'Preview all layers';
 
-    var toggleLayerPreviewTooltip = pskl.utils.TooltipFormatter.format(helpText, TOGGLE_LAYER_SHORTCUT, descriptors);
-    this.toggleLayerPreviewEl.setAttribute('title', toggleLayerPreviewTooltip);
-
-    pskl.app.shortcutService.registerShortcut(TOGGLE_LAYER_SHORTCUT, this.toggleLayerPreview_.bind(this));
+    pskl.app.shortcutService.registerShortcut(this.layerPreviewShortcut, this.toggleLayerPreview_.bind(this));
+    var tooltip = pskl.utils.TooltipFormatter.format(helpText, this.layerPreviewShortcut, descriptors);
+    this.toggleLayerPreviewEl.setAttribute('title', tooltip);
   };
 
   ns.LayersListController.prototype.updateButtonStatus_ = function () {

diff --git a/src/js/controller/PaletteController.js b/src/js/controller/PaletteController.js
@@ -10,8 +10,9 @@
     $.subscribe(Events.SELECT_PRIMARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:true}));
     $.subscribe(Events.SELECT_SECONDARY_COLOR, this.onColorSelected_.bind(this, {isPrimary:false}));
 
-    pskl.app.shortcutService.registerShortcut('X', this.swapColors.bind(this));
-    pskl.app.shortcutService.registerShortcut('D', this.resetColors.bind(this));
+    var shortcuts = pskl.service.keyboard.Shortcuts;
+    pskl.app.shortcutService.registerShortcut(shortcuts.COLOR.SWAP, this.swapColors.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.COLOR.RESET, this.resetColors.bind(this));
 
     var spectrumCfg = {
       showPalette: true,

diff --git a/src/js/controller/PalettesListController.js b/src/js/controller/PalettesListController.js
@@ -37,9 +37,10 @@
     $.subscribe(Events.SECONDARY_COLOR_SELECTED, this.highlightSelectedColors.bind(this));
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
 
-    pskl.app.shortcutService.registerShortcuts(['>', 'shift+>'], this.selectNextColor_.bind(this));
-    pskl.app.shortcutService.registerShortcuts('123465789'.split(''), this.selectColorForKey_.bind(this));
-    pskl.app.shortcutService.registerShortcut('<', this.selectPreviousColor_.bind(this));
+    var shortcuts = pskl.service.keyboard.Shortcuts;
+    pskl.app.shortcutService.registerShortcut(shortcuts.COLOR.PREVIOUS_COLOR, this.selectPreviousColor_.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.COLOR.NEXT_COLOR, this.selectNextColor_.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.COLOR.SELECT_COLOR, this.selectColorForKey_.bind(this));
 
     this.fillPaletteList();
     this.updateFromUserSettings();

diff --git a/src/js/controller/ToolController.js b/src/js/controller/ToolController.js
@@ -21,7 +21,7 @@
       new pskl.tools.drawing.ColorPicker()
     ];
 
-    this.toolIconRenderer = new pskl.tools.IconMarkupRenderer();
+    this.iconMarkupRenderer = new pskl.tools.IconMarkupRenderer();
   };
 
   /**
@@ -93,12 +93,10 @@
     }
   };
 
-  ns.ToolController.prototype.onKeyboardShortcut_ = function(charkey) {
-    for (var i = 0 ; i < this.tools.length ; i++) {
-      var tool = this.tools[i];
-      if (tool.shortcut.toLowerCase() === charkey.toLowerCase()) {
-        this.selectTool_(tool);
-      }
+  ns.ToolController.prototype.onKeyboardShortcut_ = function(toolId, charkey) {
+    var tool = this.getToolById_(toolId);
+    if (tool !== null) {
+      this.selectTool_(tool);
     }
   };
 
@@ -115,14 +113,15 @@
     var html = '';
     for (var i = 0 ; i < this.tools.length ; i++) {
       var tool = this.tools[i];
-      html += this.toolIconRenderer.render(tool, tool.shortcut);
+      html += this.iconMarkupRenderer.render(tool);
     }
     $('#tools-container').html(html);
   };
 
   ns.ToolController.prototype.addKeyboardShortcuts_ = function () {
     for (var i = 0 ; i < this.tools.length ; i++) {
-      pskl.app.shortcutService.registerShortcut(this.tools[i].shortcut, this.onKeyboardShortcut_.bind(this));
+      var tool = this.tools[i];
+      pskl.app.shortcutService.registerShortcut(tool.shortcut, this.onKeyboardShortcut_.bind(this, tool.toolId));
     }
   };
 })();
diff --git a/src/js/controller/dialogs/DialogsController.js b/src/js/controller/dialogs/DialogsController.js
@@ -18,6 +18,7 @@
 
   ns.DialogsController = function (piskelController) {
     this.piskelController = piskelController;
+    this.closePopupShortcut = pskl.service.keyboard.Shortcuts.MISC.CLOSE_POPUP;
     this.currentDialog_ = null;
   };
 
@@ -28,11 +29,16 @@
     $.subscribe(Events.DIALOG_HIDE, this.onDialogHideEvent_.bind(this));
 
     // TODO : JD : should be moved to a main controller
-    pskl.app.shortcutService.registerShortcut('alt+P', this.onDialogDisplayEvent_.bind(this, null, 'create-palette'));
+    var createPaletteShortcut = pskl.service.keyboard.Shortcuts.COLOR.CREATE_PALETTE;
+    pskl.app.shortcutService.registerShortcut(createPaletteShortcut, this.onCreatePaletteShortcut_.bind(this));
 
     this.dialogWrapper_.classList.add('animated');
   };
 
+  ns.DialogsController.prototype.onCreatePaletteShortcut_ = function () {
+    this.onDialogDisplayEvent_(null, 'create-palette');
+  };
+
   ns.DialogsController.prototype.onDialogDisplayEvent_ = function (evt, args) {
     var dialogId, initArgs;
     if (typeof args === 'string') {
@@ -66,7 +72,7 @@
   };
 
   ns.DialogsController.prototype.showDialogWrapper_ = function () {
-    pskl.app.shortcutService.registerShortcut('ESC', this.hideDialog.bind(this));
+    pskl.app.shortcutService.registerShortcut(this.closePopupShortcut, this.hideDialog.bind(this));
     this.dialogWrapper_.classList.add('show');
   };
 
@@ -85,7 +91,7 @@
   };
 
   ns.DialogsController.prototype.hideDialogWrapper_ = function () {
-    pskl.app.shortcutService.unregisterShortcut('ESC');
+    pskl.app.shortcutService.unregisterShortcut(this.closePopupShortcut);
     this.dialogWrapper_.classList.remove('show');
   };
 

diff --git a/src/js/controller/piskel/PublicPiskelController.js b/src/js/controller/piskel/PublicPiskelController.js
@@ -30,10 +30,11 @@
     this.saveWrap_('moveLayerDown', true);
     this.saveWrap_('removeCurrentLayer', true);
 
-    pskl.app.shortcutService.registerShortcut('up', this.selectPreviousFrame.bind(this));
-    pskl.app.shortcutService.registerShortcut('down', this.selectNextFrame.bind(this));
-    pskl.app.shortcutService.registerShortcut('n', this.addFrameAtCurrentIndex.bind(this));
-    pskl.app.shortcutService.registerShortcut('shift+n', this.duplicateCurrentFrame.bind(this));
+    var shortcuts = pskl.service.keyboard.Shortcuts;
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.PREVIOUS_FRAME, this.selectPreviousFrame.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.NEXT_FRAME, this.selectNextFrame.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.NEW_FRAME, this.addFrameAtCurrentIndex.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.MISC.DUPLICATE_FRAME, this.duplicateCurrentFrame.bind(this));
   };
 
   ns.PublicPiskelController.prototype.setPiskel = function (piskel, preserveState) {

diff --git a/src/js/controller/preview/PreviewController.js b/src/js/controller/preview/PreviewController.js
@@ -14,6 +14,9 @@
     this.elapsedTime = 0;
     this.currentIndex = 0;
 
+    this.onionSkinShortcut = pskl.service.keyboard.Shortcuts.MISC.ONION_SKIN;
+    this.originalSizeShortcut = pskl.service.keyboard.Shortcuts.MISC.X1_PREVIEW;
+
     this.renderFlag = true;
 
     /**
@@ -47,8 +50,8 @@
     pskl.utils.Event.addEventListener(this.openPopupPreview, 'click', this.onOpenPopupPreviewClick_, this);
     pskl.utils.Event.addEventListener(this.originalSizeButton, 'click', this.onOriginalSizeButtonClick_, this);
 
-    pskl.app.shortcutService.registerShortcut(ONION_SKIN_SHORTCUT, this.toggleOnionSkin_.bind(this));
-    pskl.app.shortcutService.registerShortcut(ORIGINAL_SIZE_SHORTCUT, this.onOriginalSizeButtonClick_.bind(this));
+    pskl.app.shortcutService.registerShortcut(this.onionSkinShortcut, this.toggleOnionSkin_.bind(this));
+    pskl.app.shortcutService.registerShortcut(this.originalSizeShortcut, this.onOriginalSizeButtonClick_.bind(this));
 
     $.subscribe(Events.FRAME_SIZE_CHANGED, this.onFrameSizeChange_.bind(this));
     $.subscribe(Events.USER_SETTINGS_CHANGED, $.proxy(this.onUserSettingsChange_, this));
@@ -66,9 +69,9 @@
   };
 
   ns.PreviewController.prototype.initTooltips_ = function () {
-    var onionSkinTooltip = pskl.utils.TooltipFormatter.format('Toggle onion skin', ONION_SKIN_SHORTCUT);
+    var onionSkinTooltip = pskl.utils.TooltipFormatter.format('Toggle onion skin', this.onionSkinShortcut);
     this.toggleOnionSkinButton.setAttribute('title', onionSkinTooltip);
-    var originalSizeTooltip = pskl.utils.TooltipFormatter.format('Original size preview', ORIGINAL_SIZE_SHORTCUT);
+    var originalSizeTooltip = pskl.utils.TooltipFormatter.format('Original size preview', this.originalSizeShortcut);
     this.originalSizeButton.setAttribute('title', originalSizeTooltip);
   };
 

diff --git a/src/js/selection/SelectionManager.js b/src/js/selection/SelectionManager.js
@@ -18,11 +18,11 @@
     $.subscribe(Events.SELECTION_DISMISSED, $.proxy(this.onSelectionDismissed_, this));
     $.subscribe(Events.SELECTION_MOVE_REQUEST, $.proxy(this.onSelectionMoved_, this));
 
-    pskl.app.shortcutService.registerShortcut('ctrl+V', this.paste.bind(this));
-    pskl.app.shortcutService.registerShortcut('ctrl+X', this.cut.bind(this));
-    pskl.app.shortcutService.registerShortcut('ctrl+C', this.copy.bind(this));
-    pskl.app.shortcutService.registerShortcut('del', this.erase.bind(this));
-    pskl.app.shortcutService.registerShortcut('back', this.onBackPressed_.bind(this));
+    var shortcuts = pskl.service.keyboard.Shortcuts;
+    pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.PASTE, this.paste.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.CUT, this.cut.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.COPY, this.copy.bind(this));
+    pskl.app.shortcutService.registerShortcut(shortcuts.SELECTION.DELETE, this.onDeleteShortcut_.bind(this));
 
     $.subscribe(Events.TOOL_SELECTED, $.proxy(this.onToolSelected_, this));
   };
@@ -54,7 +54,7 @@
     this.cleanSelection_();
   };
 
-  ns.SelectionManager.prototype.onBackPressed_ = function(evt) {
+  ns.SelectionManager.prototype.onDeleteShortcut_ = function(evt) {
     if (this.currentSelection) {
       this.erase();
     } else {

diff --git a/src/js/service/HistoryService.js b/src/js/service/HistoryService.js
@@ -26,8 +26,9 @@
   ns.HistoryService.prototype.init = function () {
     $.subscribe(Events.PISKEL_SAVE_STATE, this.onSaveStateEvent.bind(this));
 
-    this.shortcutService.registerShortcut('ctrl+Z', this.undo.bind(this));
-    this.shortcutService.registerShortcuts(['ctrl+Y', 'ctrl+shift+Z'] , this.redo.bind(this));
+    var shortcuts = pskl.service.keyboard.Shortcuts;
+    this.shortcutService.registerShortcut(shortcuts.MISC.UNDO, this.undo.bind(this));
+    this.shortcutService.registerShortcut(shortcuts.MISC.REDO, this.redo.bind(this));
 
     this.saveState({
       type : ns.HistoryService.SNAPSHOT

diff --git a/src/js/service/keyboard/CheatsheetService.js b/src/js/service/keyboard/CheatsheetService.js
@@ -1,8 +1,13 @@
 (function () {
   var ns = $.namespace('pskl.service.keyboard');
 
+  /**
+   * TODO : JD : This is not a service, but a controller
+   * Moreover this should be handled by the DialogsController
+   */
   ns.CheatsheetService = function () {
     this.isDisplayed = false;
+    this.closePopupShortcut = pskl.service.keyboard.Shortcuts.MISC.CLOSE_POPUP;
   };
 
   ns.CheatsheetService.prototype.init = function () {
@@ -13,7 +18,9 @@
     }
 
     this.initMarkup_();
-    pskl.app.shortcutService.registerShortcuts(['?', 'shift+?'], this.toggleCheatsheet_.bind(this));
+
+    var cheatsheetShortcut = pskl.service.keyboard.Shortcuts.MISC.CHEATSHEET;
+    pskl.app.shortcutService.registerShortcut(cheatsheetShortcut, this.toggleCheatsheet_.bind(this));
 
     pskl.utils.Event.addEventListener(document.body, 'click', this.onBodyClick_, this);
 
@@ -46,13 +53,13 @@
   };
 
   ns.CheatsheetService.prototype.showCheatsheet_ = function () {
-    pskl.app.shortcutService.registerShortcut('ESC', this.hideCheatsheet_.bind(this));
+    pskl.app.shortcutService.registerShortcut(this.closePopupShortcut, this.hideCheatsheet_.bind(this));
     this.cheatsheetEl.style.display = 'block';
     this.isDisplayed = true;
   };
 
   ns.CheatsheetService.prototype.hideCheatsheet_ = function () {
-    pskl.app.shortcutService.unregisterShortcut('ESC');
+    pskl.app.shortcutService.unregisterShortcut(this.closePopupShortcut);
     this.cheatsheetEl.style.display = 'none';
     this.isDisplayed = false;
   };
@@ -65,71 +72,56 @@
   };
 
   ns.CheatsheetService.prototype.initMarkupForTools_ = function () {
-    var descriptors = pskl.app.toolController.tools.map(function (tool) {
-      return this.toDescriptor_(tool.shortcut, tool.getHelpText(), 'tool-icon ' + tool.toolId);
-    }.bind(this));
+    var descriptors = this.createShortcutDescriptors_(ns.Shortcuts.TOOL, this.getToolShortcutClassname_);
+    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-tool-shortcuts');
+  };
 
-    var container = this.cheatsheetEl.querySelector('.cheatsheet-tool-shortcuts');
-    this.initMarkupForDescriptors_(descriptors, container);
+  ns.CheatsheetService.prototype.getToolShortcutClassname_ = function (shortcut) {
+    return 'tool-icon ' + shortcut.getId();
   };
 
   ns.CheatsheetService.prototype.initMarkupForMisc_ = function () {
-    var descriptors = [
-      this.toDescriptor_('0', 'Reset zoom level'),
-      this.toDescriptor_('+/-', 'Zoom in/Zoom out'),
-      this.toDescriptor_('ctrl + Z', 'Undo'),
-      this.toDescriptor_('ctrl + Y', 'Redo'),
-      this.toDescriptor_('&#65514;', 'Select previous frame'), /* ASCII for up-arrow */
-      this.toDescriptor_('&#65516;', 'Select next frame'), /* ASCII for down-arrow */
-      this.toDescriptor_('N', 'Create new frame'),
-      this.toDescriptor_('shift + N', 'Duplicate selected frame'),
-      this.toDescriptor_('shift + ?', 'Open/Close this popup'),
-      this.toDescriptor_('alt + 1', 'Toggle original size preview'),
-      this.toDescriptor_('alt + O', 'Toggle Onion Skin'),
-      this.toDescriptor_('alt + L', 'Toggle Layer Preview')
-    ];
-
-    var container = this.cheatsheetEl.querySelector('.cheatsheet-misc-shortcuts');
-    this.initMarkupForDescriptors_(descriptors, container);
+    var descriptors = this.createShortcutDescriptors_(ns.Shortcuts.MISC);
+    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-misc-shortcuts');
   };
 
   ns.CheatsheetService.prototype.initMarkupForColors_ = function () {
-    var descriptors = [
-      this.toDescriptor_('X', 'Swap primary/secondary colors'),
-      this.toDescriptor_('D', 'Reset default colors'),
-      this.toDescriptor_('alt + P', 'Create a Palette'),
-      this.toDescriptor_('&lt;/&gt;', 'Select prev/next palette color'),
-      this.toDescriptor_('1 to 9', 'Select palette color at index')
-    ];
-
-    var container = this.cheatsheetEl.querySelector('.cheatsheet-colors-shortcuts');
-    this.initMarkupForDescriptors_(descriptors, container);
+    var descriptors = this.createShortcutDescriptors_(ns.Shortcuts.COLOR);
+    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-colors-shortcuts');
   };
 
   ns.CheatsheetService.prototype.initMarkupForSelection_ = function () {
-    var descriptors = [
-      this.toDescriptor_('ctrl + X', 'Cut selection'),
-      this.toDescriptor_('ctrl + C', 'Copy selection'),
-      this.toDescriptor_('ctrl + V', 'Paste selection'),
-      this.toDescriptor_('del', 'Delete selection')
-    ];
+    var descriptors = this.createShortcutDescriptors_(ns.Shortcuts.SELECTION);
+    this.initMarkupForDescriptors_(descriptors, '.cheatsheet-selection-shortcuts');
+  };
 
-    var container = this.cheatsheetEl.querySelector('.cheatsheet-selection-shortcuts');
-    this.initMarkupForDescriptors_(descriptors, container);
+  ns.CheatsheetService.prototype.createShortcutDescriptors_ = function (shortcutMap, classnameProvider) {
+    return Object.keys(shortcutMap).map(function (shortcutKey) {
+      var shortcut = shortcutMap[shortcutKey];
+      var classname = typeof classnameProvider == 'function' ? classnameProvider(shortcut) : '';
+      return this.toDescriptor_(shortcut.getKey(), shortcut.getDescription(), classname);
+    }.bind(this));
   };
 
-  ns.CheatsheetService.prototype.toDescriptor_ = function (shortcut, description, icon) {
+  ns.CheatsheetService.prototype.toDescriptor_ = function (key, description, icon) {
     if (pskl.utils.UserAgent.isMac) {
-      shortcut = shortcut.replace('ctrl', 'cmd');
+      key = key.replace('ctrl', 'cmd');
     }
+    key = key.replace('up', '&#65514;');
+    key = key.replace('down', '&#65516;');
+    key = key.replace(/>/g, '&gt;');
+    key = key.replace(/</g, '&lt;');
+    key = key.replace(/^(.*[^ ])\+([^ ].*)$/g, '$1 + $2');
+
     return {
-      'shortcut' : shortcut,
+      'key' : key,
       'description' : description,
       'icon' : icon
     };
   };
 
-  ns.CheatsheetService.prototype.initMarkupForDescriptors_ = function (descriptors, container) {
+  ns.CheatsheetService.prototype.initMarkupForDescriptors_ = function (descriptors, containerSelector) {
+    var container = this.cheatsheetEl.querySelector(containerSelector);
     descriptors.forEach(function (descriptor) {
       var shortcut = this.getDomFromDescriptor_(descriptor);
       container.appendChild(shortcut);
@@ -141,7 +133,7 @@
     var markup = pskl.utils.Template.replace(shortcutTemplate, {
       shortcutIcon : descriptor.icon,
       shortcutDescription : descriptor.description,
-      shortcutKey : descriptor.shortcut
+      shortcutKey : descriptor.key
     });
 
     return pskl.utils.Template.createFromHTML(markup);