From 5ceca41e0fb56beda304f85966c016b5cd8453cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= <fjozsef001@gmail.com>
Date: Tue, 26 Dec 2017 23:23:32 +0100
Subject: [PATCH] feat(renderer): show icon when possible even if the keystroke
 action has modifier (#533)

Closes #513
---
 .../svg-keystroke-key.component.html          |  5 ++++
 .../svg-keystroke-key.component.ts            | 26 ++++++++++---------
 .../src/app/services/mapper.service.ts        |  6 ++++-
 3 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.html b/packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.html
index aeedfc8e..8bc3395a 100644
--- a/packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.html
+++ b/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"
diff --git a/packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.ts b/packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.ts
index a18ae43c..6b1db082 100644
--- a/packages/uhk-web/src/app/components/svg/keys/svg-keystroke-key/svg-keystroke-key.component.ts
+++ b/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);
-            if (newLabelSource) {
-                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.labelSource = this.mapper.scanCodeToSvgImagePath(scancode, this.keystrokeAction.type);
+            if (this.labelSource) {
                 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';
diff --git a/packages/uhk-web/src/app/services/mapper.service.ts b/packages/uhk-web/src/app/services/mapper.service.ts
index aeba287f..f0eb0d19 100644
--- a/packages/uhk-web/src/app/services/mapper.service.ts
+++ b/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 {