feat(renderer): show icon when possible even if the keystroke action has modifier (#533)

Closes #513

packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.html

@@ -1,5 +1,10 @@
 <svg [attr.viewBox]="viewBox" [attr.width]="textContainer.width" [attr.height]="textContainer.height"
     [attr.x]="textContainer.x" [attr.y]="textContainer.y" [ngSwitch]="labelType">
+    <svg:g svg-single-icon-key *ngSwitchCase="'icon'"
+            [height]="height"
+            [width]="width"
+            [icon]="labelSource">
+    </svg:g>
     <svg:g svg-one-line-text-key *ngSwitchCase="'one-line'"
             [height]="height"
             [width]="width"

packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.ts

@@ -127,21 +127,23 @@ export class SvgKeystrokeKeyComponent implements OnInit, OnChanges {
     }
 
     ngOnChanges() {
-        let newLabelSource: string[];
         if (this.keystrokeAction.hasScancode()) {
             const scancode: number = this.keystrokeAction.scancode;
-            newLabelSource = this.mapper.scanCodeToText(scancode, this.keystrokeAction.type);
+            this.labelSource = this.mapper.scanCodeToSvgImagePath(scancode, this.keystrokeAction.type);
-            if (newLabelSource) {
+            if (this.labelSource) {
-                if (newLabelSource.length === 1) {
-                    this.labelSource = newLabelSource[0];
-                    this.labelType = 'one-line';
-                } else {
-                    this.labelSource = newLabelSource;
-                    this.labelType = 'two-line';
-                }
-            } else {
-                this.labelSource = this.mapper.scanCodeToSvgImagePath(scancode, this.keystrokeAction.type);
                 this.labelType = 'icon';
+            } else {
+                let newLabelSource: string[];
+                newLabelSource = this.mapper.scanCodeToText(scancode, this.keystrokeAction.type);
+                if (newLabelSource) {
+                    if (newLabelSource.length === 1) {
+                        this.labelSource = newLabelSource[0];
+                        this.labelType = 'one-line';
+                    } else {
+                        this.labelSource = newLabelSource;
+                        this.labelType = 'two-line';
+                    }
+                }
             }
         } else {
             this.labelType = 'empty';

packages/uhk-web/src/app/services/mapper.service.ts

@@ -71,7 +71,11 @@ export class MapperService {
             default:
                 return undefined;
         }
-        return 'assets/compiled_sprite.svg#' + map.get(scanCode);
+        const id = map.get(scanCode);
+        if (!id) {
+            return undefined;
+        }
+        return `assets/compiled_sprite.svg#${id}`;
     }
 
     public getIcon(iconName: string): string {