Add keymap page (#80)

src/components/svg/module/svg-module.component.html

@@ -6,5 +6,6 @@
         [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
         [keyAction]="keyActions[i]"
         (click)="onKeyClick(i)"
-/>
-<popover *ngIf="popOverEnabled"></popover>
+        (mouseover)="onKeyHover(i, $event, true)"
+        (mouseleave)="onKeyHover(i, $event, false)"
+/>

src/components/svg/module/svg-module.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 import { SvgKeyboardKey, SvgKeyboardKeyComponent } from '../keys';
 import {KeyAction} from '../../../config-serializer/config-items/KeyAction';
@@ -9,20 +9,27 @@ import {KeyAction} from '../../../config-serializer/config-items/KeyAction';
     styles: [require('./svg-module.component.scss')],
     directives: [SvgKeyboardKeyComponent]
 })
-export class SvgModuleComponent implements OnInit {
+export class SvgModuleComponent {
     @Input() coverages: any[];
     @Input() keyboardKeys: SvgKeyboardKey[];
     @Input() keyActions: KeyAction[];
-    @Output() editKeyActionRequest = new EventEmitter<number>();
+    @Output() keyClick = new EventEmitter<number>();
+    @Output() keyHover = new EventEmitter();
 
     constructor() {
         this.keyboardKeys = [];
     }
 
-    ngOnInit() { }
-
     onKeyClick(index: number): void {
-        this.editKeyActionRequest.emit(index);
+        this.keyClick.emit(index);
+    }
+
+    onKeyHover(index: number, event: MouseEvent, over: boolean): void {
+        this.keyHover.emit({
+            index,
+            event,
+            over
+        });
     }
 
 }