feat: support ctrl,alt,shift for sequence hotkey

ngneat · Mar 7, 2022 · ac0f78d · ac0f78d
1 parent cdbdaac
commit ac0f78d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 10 deletions.
diff --git a/projects/ngneat/hotkeys/src/lib/hotkeys-help/hotkeys-help.component.html b/projects/ngneat/hotkeys/src/lib/hotkeys-help/hotkeys-help.component.html
@@ -11,8 +11,8 @@
   </thead>
   <tbody>
     <tr class="hotkeys-table-help-shortcut" *ngFor="let hotkey of hotkeyGroup.hotkeys">
-      <td class="hotkeys-table-help-shortcut-description" width="75%">{{ hotkey.description }}</td>
-      <td class="hotkeys-table-help-shortcut-keys" width="25%">
+      <td class="hotkeys-table-help-shortcut-description" width="50%">{{ hotkey.description }}</td>
+      <td class="hotkeys-table-help-shortcut-keys" width="50%">
         <kbd [innerHTML]="hotkey.keys | hotkeysShortcut"></kbd>
       </td>
     </tr>

diff --git a/projects/ngneat/hotkeys/src/lib/hotkeys-shortcut.pipe.ts b/projects/ngneat/hotkeys/src/lib/hotkeys-shortcut.pipe.ts
@@ -43,12 +43,14 @@ export class HotkeysShortcutPipe implements PipeTransform {
     }
     return value
       .split('>')
-      .join(thenSeparator)
-      .split('.')
-      .map(c => c.toLowerCase())
-      .map(c => this.symbols[c] || c)
-      .join(dotSeparator)
-      .split('>');
+      .map(s =>
+        s
+          .split('.')
+          .map(c => c.toLowerCase())
+          .map(c => this.symbols[c] || c)
+          .join(dotSeparator)
+      )
+      .join(thenSeparator);
   }
 
   private getPlatformSymbols(platform): any {

diff --git a/projects/ngneat/hotkeys/src/lib/hotkeys.service.ts b/projects/ngneat/hotkeys/src/lib/hotkeys.service.ts
@@ -105,7 +105,12 @@ export class HotkeysService {
     const getObserver = (element: HTMLElement, eventName: string) => {
       let sequence = '';
       return fromEvent<KeyboardEvent>(element, eventName).pipe(
-        tap(e => (sequence = `${sequence}${sequence ? '>' : ''}${e.key}`)),
+        tap(
+          e =>
+            (sequence = `${sequence}${sequence ? '>' : ''}${e.ctrlKey ? 'control.' : ''}${e.altKey ? 'alt.' : ''}${
+              e.shiftKey ? 'shift.' : ''
+            }${e.key}`)
+        ),
         debounceTime(this.sequenceDebounce),
         mergeMap(() => {
           const resultSequence = sequence;

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -34,8 +34,28 @@ export class AppComponent implements AfterViewInit {
       })
       .subscribe(e => {
         console.log('Test Sequence:', e);
+      });
 
-        this.hotkeys.removeShortcuts('g>t');
+    this.hotkeys
+      .addSequenceShortcut({
+        keys: 'control.b>control.,',
+        description: 'Expand All',
+        preventDefault: false,
+        group: 'Sequencing'
+      })
+      .subscribe(e => {
+        console.log('Test Sequence:', e);
+      });
+
+    this.hotkeys
+      .addSequenceShortcut({
+        keys: 'r>s',
+        description: 'Remove this sequence',
+        preventDefault: false,
+        group: 'Sequencing'
+      })
+      .subscribe(() => {
+        this.hotkeys.removeShortcuts('r>s');
       });
 
     this.hotkeys