Seperate electron and web target building

shared/src/components/svg/module/index.ts

@@ -0,0 +1,2 @@
+export * from './svg-module.component';
+export * from './svg-module.model';

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

@@ -0,0 +1,14 @@
+<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]"
+        [keybindAnimationEnabled]="keybindAnimationEnabled"
+        [capturingEnabled]="capturingEnabled"
+        (keyClick)="onKeyClick(i, $event)"
+        (capture)="onCapture(i, $event)"
+        (mouseenter)="onKeyHover(i, $event, true)"
+        (mouseleave)="onKeyHover(i, $event, false)"
+/>

shared/src/components/svg/module/svg-module.component.scss

@@ -0,0 +1,3 @@
+:host {
+    position: relative;
+}

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

@@ -0,0 +1,47 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+import { KeyAction } from '../../../config-serializer/config-items/key-action';
+
+import { SvgKeyboardKey } from '../keys';
+
+@Component({
+    selector: 'g[svg-module]',
+    template: require('./svg-module.component.html'),
+    styles: [require('./svg-module.component.scss')]
+})
+export class SvgModuleComponent {
+    @Input() coverages: any[];
+    @Input() keyboardKeys: SvgKeyboardKey[];
+    @Input() keyActions: KeyAction[];
+    @Input() keybindAnimationEnabled: boolean;
+    @Input() capturingEnabled: boolean;
+    @Output() keyClick = new EventEmitter();
+    @Output() keyHover = new EventEmitter();
+    @Output() capture = new EventEmitter();
+
+    constructor() {
+        this.keyboardKeys = [];
+    }
+
+    onKeyClick(index: number, keyTarget: HTMLElement): void {
+        this.keyClick.emit({
+            index,
+            keyTarget
+        });
+    }
+
+    onKeyHover(index: number, event: MouseEvent, over: boolean): void {
+        this.keyHover.emit({
+            index,
+            event,
+            over
+        });
+    }
+
+    onCapture(index: number, captured: {code: number, left: boolean[], right: boolean[]}) {
+        this.capture.emit({
+            index,
+            captured
+        });
+    }
+}

shared/src/components/svg/module/svg-module.model.ts

@@ -0,0 +1,17 @@
+import { SvgKeyboardKey } from '../keys';
+
+export class SvgModule {
+    private coverages: any[];
+    private keyboardKeys: SvgKeyboardKey[];
+    private attributes: any;
+
+    constructor(obj: { rect: any[], path: any[], $: Object }) {
+        this.keyboardKeys = obj.rect.map(rect => rect.$).map(rect => {
+            rect.height = +rect.height;
+            rect.width = +rect.width;
+            return rect;
+        });
+        this.coverages = obj.path;
+        this.attributes = obj.$;
+    }
+}