PlayMacroAction rendering

config-serializer/config-items/UhkConfiguration.ts

@@ -1,7 +1,8 @@
 import {Serializable} from '../Serializable';
 import {ModuleConfigurations} from './ModuleConfigurations';
-import {Keymaps} from './Keymaps';
 import {Keymap} from './Keymap';
+import {Keymaps} from './Keymaps';
+import {Macro} from './Macro';
 import {Macros} from './Macros';
 import {UhkBuffer} from '../UhkBuffer';
 import {assertUInt8, assertUInt32} from '../assert';
@@ -95,4 +96,8 @@ export class UhkConfiguration extends Serializable<UhkConfiguration> {
             }
         }
     }
+
+    getMacro(macroId: number): Macro {
+        return this.macros.elements.find(macro => macroId === macro.id);
+    }
 }

src/components/keys/svg-icon-text-key.component.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-icon-text-key]',
+    template:
+    `
+        <svg:use [attr.xlink:href]="icon"
+                [attr.width]="width / 3"
+                [attr.height]="height / 3"
+                [attr.x]="width > 2*height ? 0 : width / 3"
+                [attr.y]="width > 2*height ? height / 3 : height / 10">
+        </svg:use>
+        <svg:text
+            [attr.x]="0"
+            [attr.y]="width > 2*height? height / 2 : height * 0.6"
+            [attr.text-anchor]="'middle'"
+            [attr.font-size]="11">
+                <tspan [attr.x]="width > 2*height ? width * 0.6 : width / 2">{{ text }}</tspan>
+        </svg:text>
+    `
+})
+export class SvgIconTextKeyComponent implements OnInit {
+    @Input() width: number;
+    @Input() height: number;
+    @Input() icon: string;
+    @Input() text: string;
+
+    constructor() { }
+
+    ngOnInit() { }
+
+}

src/components/keys/svg-keyboard-key.component.ts

@@ -4,6 +4,7 @@ import {NgSwitch, NgSwitchCase} from '@angular/common';
 import {KeyAction} from '../../../config-serializer/config-items/KeyAction';
 import {KeystrokeAction} from '../../../config-serializer/config-items/KeystrokeAction';
 import {KeyModifiers} from '../../../config-serializer/config-items/KeyModifiers';
+import {PlayMacroAction} from '../../../config-serializer/config-items/PlayMacroAction';
 import {SwitchLayerAction, LayerName}  from '../../../config-serializer/config-items/SwitchLayerAction';
 import {MapperService} from '../../services/mapper.service';
 import {SwitchKeymapAction} from '../../../config-serializer/config-items/SwitchKeymapAction';
@@ -14,6 +15,7 @@ import {SvgOneLineTextKeyComponent} from './svg-one-line-text-key.component';
 import {SvgTwoLineTextKeyComponent} from './svg-two-line-text-key.component';
 import {SvgSingleIconKeyComponent} from './svg-single-icon-key.component';
 import {SvgTextIconKeyComponent} from './svg-text-icon-key.component';
+import {SvgIconTextKeyComponent} from './svg-icon-text-key.component';
 import {SvgSwitchKeymapKeyComponent} from './svg-switch-keymap-key.component';
 
 enum LabelTypes {
@@ -21,7 +23,8 @@ enum LabelTypes {
     TwoLineText,
     TextIcon,
     SingleIcon,
-    SwitchKeymap
+    SwitchKeymap,
+    IconText
 }
 
 @Component({
@@ -53,6 +56,12 @@ enum LabelTypes {
                     [text]="labelSource.text"
                     [icon]="labelSource.icon">
             </svg:g>
+            <svg:g svg-icon-text-key *ngSwitchCase="enumLabelTypes.IconText"
+                    [height]="height"
+                    [width]="width"
+                    [icon]="labelSource.icon"
+                    [text]="labelSource.text">
+            </svg:g>
             <svg:g svg-single-icon-key *ngSwitchCase="enumLabelTypes.SingleIcon"
                     [height]="height"
                     [width]="width"
@@ -73,6 +82,7 @@ enum LabelTypes {
         SvgTwoLineTextKeyComponent,
         SvgSingleIconKeyComponent,
         SvgTextIconKeyComponent,
+        SvgIconTextKeyComponent,
         SvgSwitchKeymapKeyComponent
     ]
 })
@@ -191,6 +201,14 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
             this.labelType = LabelTypes.SwitchKeymap;
             let uhkConfiguration: UhkConfiguration = this.uhkConfigurationService.getUhkConfiguration();
             this.labelSource = uhkConfiguration.getKeymap(keyAction.keymapId).abbreviation;
+        } else if (this.keyAction instanceof PlayMacroAction) {
+            let keyAction: PlayMacroAction = this.keyAction as PlayMacroAction;
+            this.labelType = LabelTypes.IconText;
+            let uhkConfiguration: UhkConfiguration = this.uhkConfigurationService.getUhkConfiguration();
+            this.labelSource = {
+                icon: this.mapperService.getIcon('macro'),
+                text: uhkConfiguration.getMacro(keyAction.macroId).name
+            };
         } else {
             this.labelSource = undefined;
         }

src/services/mapper.service.ts

@@ -142,6 +142,7 @@ export class MapperService {
         this.nameToFileName = new Map<string, string>();
         this.nameToFileName.set('toggle', 'icon-kbd__fn--toggle');
         this.nameToFileName.set('switch-keymap', 'icon-kbd__mod--switch-keymap');
+        this.nameToFileName.set('macro', 'icon-icon__macro');
     }
 
 }