Added positioning to the popover

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

@@ -5,7 +5,7 @@
                 [keyboardKeys]="module.keyboardKeys"
                 [attr.transform]="module.attributes.transform"
                 [keyActions]="moduleConfig[i].keyActions"
-                (keyClick)="onKeyClick(i, $event)"
+                (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
                 (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
         />
     </svg:g>

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

@@ -25,10 +25,11 @@ export class SvgKeyboardComponent implements OnInit {
         this.modules = this.getSvgModules();
     }
 
-    onKeyClick(moduleId: number, keyId: number): void {
+    onKeyClick(moduleId: number, keyId: number, keyTarget: HTMLElement): void {
         this.keyClick.emit({
             moduleId,
-            keyId
+            keyId,
+            keyTarget
         });
     }
 

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

@@ -1,5 +1,5 @@
 import {
-    Component, Input, OnChanges, OnDestroy, OnInit, SimpleChange,
+    Component, ElementRef, EventEmitter, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChange,
     animate, group, style, transition, trigger
 } from '@angular/core';
 
@@ -59,6 +59,7 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     @Input() height: number;
     @Input() width: number;
     @Input() keyAction: KeyAction;
+    @Output() keyClick = new EventEmitter();
 
     enumLabelTypes = LabelTypes;
 
@@ -68,7 +69,11 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
     private subscription: Subscription;
     private animation: string = 'inactive';
 
-    constructor(private mapper: MapperService, private store: Store<AppState>) {
+    @HostListener('click') onClick() {
+        this.keyClick.emit(this.element.nativeElement);
+    }
+
+    constructor(private mapper: MapperService, private store: Store<AppState>, private element: ElementRef) {
         this.subscription = store.let(getMacroEntities())
             .subscribe((macros: Macro[]) => this.macros = macros);
     }

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

@@ -1,11 +1,11 @@
-<svg:path *ngFor="let path of coverages" [attr.d]="path.$.d"/>
+<svg:path *ngFor="let path of coverages" [attr.d]="path.$.d" />
 <svg:g svg-keyboard-key *ngFor="let key of keyboardKeys; let i = index"
         [id]="key.id"
         [rx]="key.rx" [ry]="key.ry"
         [width]="key.width" [height]="key.height"
         [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
         [keyAction]="keyActions[i]"
-        (click)="onKeyClick(i)"
+        (keyClick)="onKeyClick(i, $event)"
         (mouseenter)="onKeyHover(i, $event, true)"
         (mouseleave)="onKeyHover(i, $event, false)"
 />

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

@@ -13,15 +13,18 @@ export class SvgModuleComponent {
     @Input() coverages: any[];
     @Input() keyboardKeys: SvgKeyboardKey[];
     @Input() keyActions: KeyAction[];
-    @Output() keyClick = new EventEmitter<number>();
+    @Output() keyClick = new EventEmitter();
     @Output() keyHover = new EventEmitter();
 
     constructor() {
         this.keyboardKeys = [];
     }
 
-    onKeyClick(index: number): void {
-        this.keyClick.emit(index);
+    onKeyClick(index: number, keyTarget: HTMLElement): void {
+        this.keyClick.emit({
+            index,
+            keyTarget
+        });
     }
 
     onKeyHover(index: number, event: MouseEvent, over: boolean): void {

src/components/svg/wrap/svg-keyboard-wrap.component.html

@@ -4,12 +4,12 @@
         <svg-keyboard *ngFor="let layer of layers; trackBy: trackKeyboard"
                       [@layerState]="layer.animation"
                       [moduleConfig]="layer.modules"
-                      (keyClick)="onKeyClick($event.moduleId, $event.keyId)"
+                      (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
                       (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
         >
         </svg-keyboard>
     </div>
-    <popover *ngIf="popoverShown" [defaultKeyAction]="popoverInitKeyAction" [currentKeymap]="keymap" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
+    <popover *ngIf="popoverShown" [keyPosition]="keyPosition" [wrapPosition]="wrapPosition" [defaultKeyAction]="popoverInitKeyAction" [currentKeymap]="keymap" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>
     <div class="tooltip bottom"
          [class.in]="tooltipData.show"
          [style.top.px]="tooltipData.posTop"

src/components/svg/wrap/svg-keyboard-wrap.component.scss

@@ -1,7 +1,5 @@
 :host {
     width: 100%;
-    height: 100%;
-    position: relative;
     display: block;
 }
 

src/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -1,8 +1,11 @@
 import {
     ChangeDetectionStrategy,
     Component,
+    ElementRef,
+    HostListener,
     Input,
     OnChanges,
+    OnInit,
     SimpleChanges,
     animate,
     keyframes,
@@ -88,7 +91,7 @@ import { KeymapActions } from '../../../store/actions';
         ])
     ]
 })
-export class SvgKeyboardWrapComponent implements OnChanges {
+export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     @Input() keymap: Keymap;
     @Input() popoverEnabled: boolean = true;
     @Input() tooltipEnabled: boolean = false;
@@ -99,8 +102,18 @@ export class SvgKeyboardWrapComponent implements OnChanges {
     private currentLayer: number = 0;
     private tooltipData: { posTop: number, posLeft: number, content: { name: string, value: string }[], show: boolean };
     private layers: Layer[];
+    private keyPosition: ClientRect;
+    private wrapPosition: ClientRect;
+    private wrapHost: HTMLElement;
+    private keyElement: HTMLElement;
 
-    constructor(private store: Store<AppState>, private mapper: MapperService) {
+    @HostListener('window:resize')
+    onClick() {
+        this.wrapPosition = this.wrapHost.getBoundingClientRect();
+        this.keyPosition = this.keyElement.getBoundingClientRect();
+    }
+
+    constructor(private store: Store<AppState>, private mapper: MapperService, private element: ElementRef) {
         this.keyEditConfig = {
             moduleId: undefined,
             keyId: undefined
@@ -114,6 +127,11 @@ export class SvgKeyboardWrapComponent implements OnChanges {
         };
     }
 
+    ngOnInit() {
+        this.wrapHost = this.element.nativeElement;
+        this.wrapPosition = this.wrapHost.getBoundingClientRect();
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         if (changes['keymap'].previousValue.abbreviation !== changes['keymap'].currentValue.abbreviation) {
             this.layers = this.keymap.layers;
@@ -129,7 +147,7 @@ export class SvgKeyboardWrapComponent implements OnChanges {
         }
     }
 
-    onKeyClick(moduleId: number, keyId: number): void {
+    onKeyClick(moduleId: number, keyId: number, keyTarget: HTMLElement): void {
         if (!this.popoverShown && this.popoverEnabled) {
             this.keyEditConfig = {
                 moduleId,
@@ -137,6 +155,7 @@ export class SvgKeyboardWrapComponent implements OnChanges {
             };
 
             const keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules[moduleId].keyActions[keyId];
+            this.keyElement = keyTarget;
             this.showPopover(keyActionToEdit);
         }
     }
@@ -165,7 +184,8 @@ export class SvgKeyboardWrapComponent implements OnChanges {
         this.hidePopover();
     }
 
-    showPopover(keyAction?: KeyAction): void {
+    showPopover(keyAction: KeyAction): void {
+        this.keyPosition = this.keyElement.getBoundingClientRect();
         this.popoverInitKeyAction = keyAction;
         this.popoverShown = true;
     }