Structural refactoring (#68)

* Moved html in scss to separate files
* Moved components to designated folders
* Moved logic from html to ts

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

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="svgAttributes.viewBox" height="100%" width="100%">
+    <svg:g [attr.transform]="svgAttributes.transform" [attr.fill]="svgAttributes.fill">
+        <svg:g svg-module *ngFor="let module of modules; let i = index"
+                [coverages]="module.coverages"
+                [keyboardKeys]="module.keyboardKeys"
+                [attr.transform]="module.attributes.transform"
+                [keyActions]="moduleConfig[i].keyActions.elements"
+                (editKeyActionRequest)="onEditKeyActionRequest(i, $event)"
+        />
+    </svg:g>
+</svg>

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

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}

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

@@ -0,0 +1,37 @@
+import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
+
+import {Module} from '../../../../config-serializer/config-items/Module';
+import {SvgModule} from '../module/svg-module.model';
+import {SvgModuleComponent} from '../module/svg-module.component';
+import {DataProviderService} from '../../../services/data-provider.service';
+
+@Component({
+    selector: 'svg-keyboard',
+    template: require('./svg-keyboard.component.html'),
+    styles: [require('./svg-keyboard.component.scss')],
+    directives: [SvgModuleComponent]
+})
+export class SvgKeyboardComponent implements OnInit {
+    @Input() moduleConfig: Module[];
+    @Output() keyClick = new EventEmitter();
+
+    private modules: SvgModule[];
+    private svgAttributes: { viewBox: string, transform: string, fill: string };
+
+    constructor(private dps: DataProviderService) {
+        this.modules = [];
+        this.svgAttributes = this.dps.getKeyboardSvgAttributes();
+    }
+
+    ngOnInit() {
+        this.modules = this.dps.getSvgModules();
+    }
+
+    onEditKeyActionRequest(moduleId: number, keyId: number): void {
+        this.keyClick.emit({
+            moduleId,
+            keyId
+        });
+    }
+
+}

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

@@ -0,0 +1,13 @@
+<svg:use [attr.xlink:href]="icon"
+        [attr.width]="useWidth"
+        [attr.height]="useHeight"
+        [attr.x]="useX"
+        [attr.y]="useY">
+</svg:use>
+<svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="'middle'"
+    [attr.font-size]="11">
+        <tspan [attr.x]="spanX">{{ text }}</tspan>
+</svg:text>

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

@@ -0,0 +1,32 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-icon-text-key]',
+    template: require('./svg-icon-text-key.component.html')
+})
+export class SvgIconTextKeyComponent implements OnInit {
+    @Input() width: number;
+    @Input() height: number;
+    @Input() icon: string;
+    @Input() text: string;
+
+    private useWidth: number;
+    private useHeight: number;
+    private useX: number;
+    private useY: number;
+    private textY: number;
+    private spanX: number;
+
+    constructor() {
+    }
+
+    ngOnInit() {
+        this.useWidth = this.width / 3;
+        this.useHeight = this.height / 3;
+        this.useX = (this.width > 2 * this.height) ? 0 : this.width / 3;
+        this.useY = (this.width > 2 * this.height) ? this.height / 3 : this.height / 10;
+        this.textY = (this.width > 2 * this.height) ? this.height / 2 : this.height * 0.6;
+        this.spanX = (this.width > 2 * this.height) ? this.width * 0.6 : this.width / 2;
+    }
+}

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

@@ -0,0 +1,42 @@
+<svg:rect [id]="id" [attr.rx]="rx"          [attr.ry]="ry"
+                    [attr.height]="height"  [attr.width]="width"
+                    [attr.fill]="fill"
+/>
+<svg:g [ngSwitch]="labelType"
+        [attr.font-size]="19"
+        [attr.font-family]="'Helvetica'"
+        [attr.fill]="'white'"
+        style="dominant-baseline: central">
+    <svg:g svg-one-line-text-key *ngSwitchCase="enumLabelTypes.OneLineText"
+            [height]="height"
+            [width]="width"
+            [text]="labelSource">
+    </svg:g>
+    <svg:g svg-two-line-text-key *ngSwitchCase="enumLabelTypes.TwoLineText"
+            [height]="height"
+            [width]="width"
+            [texts]="labelSource">
+    </svg:g>
+    <svg:g svg-text-icon-key *ngSwitchCase="enumLabelTypes.TextIcon"
+            [height]="height"
+            [width]="width"
+            [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"
+            [icon]="labelSource">
+    </svg:g>
+    <svg:g svg-switch-keymap-key *ngSwitchCase="enumLabelTypes.SwitchKeymap"
+            [height]="height"
+            [width]="width"
+            [abbreviation]="labelSource">
+    </svg:g>
+</svg:g>

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

@@ -0,0 +1,174 @@
+import { Component, OnInit, Input, OnChanges, SimpleChange } from '@angular/core';
+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 {SwitchKeymapAction} from '../../../../config-serializer/config-items/SwitchKeymapAction';
+import {UhkConfiguration} from '../../../../config-serializer/config-items/UhkConfiguration';
+import {UhkConfigurationService} from '../../../services/uhk-configuration.service';
+import {MapperService} from '../../../services/mapper.service';
+
+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 {
+    OneLineText,
+    TwoLineText,
+    TextIcon,
+    SingleIcon,
+    SwitchKeymap,
+    IconText
+}
+
+@Component({
+    selector: 'g[svg-keyboard-key]',
+    template: require('./svg-keyboard-key.component.html'),
+    directives:
+    [
+        NgSwitch,
+        NgSwitchCase,
+        SvgOneLineTextKeyComponent,
+        SvgTwoLineTextKeyComponent,
+        SvgSingleIconKeyComponent,
+        SvgTextIconKeyComponent,
+        SvgIconTextKeyComponent,
+        SvgSwitchKeymapKeyComponent
+    ]
+})
+export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
+    @Input() id: string;
+    @Input() rx: string;
+    @Input() ry: string;
+    @Input() height: number;
+    @Input() width: number;
+    @Input() keyAction: KeyAction;
+
+    /* tslint:disable:no-unused-variable */
+    /* It is used in the template */
+    private enumLabelTypes = LabelTypes;
+    /* tslint:enable:no-unused-variable */
+
+    private labelSource: any;
+    private labelType: LabelTypes;
+
+    constructor(private mapperService: MapperService, private uhkConfigurationService: UhkConfigurationService) { }
+
+    ngOnInit() {
+        this.setLabels();
+    }
+
+    ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
+        /* tslint:disable:no-string-literal */
+        if (changes['keyAction']) {
+            this.setLabels();
+        }
+        /* tslint:enable:no-string-literal */
+    }
+
+    private setLabels(): void {
+        if (!this.keyAction) {
+            this.labelSource = undefined;
+            this.labelType = LabelTypes.OneLineText;
+            return;
+        }
+
+        this.labelType = LabelTypes.OneLineText;
+
+        if (this.keyAction instanceof KeystrokeAction) {
+            let keyAction: KeystrokeAction = this.keyAction as KeystrokeAction;
+            let newLabelSource: string[];
+
+            if (keyAction.hasScancode()) {
+                let scancode: number = keyAction.scancode;
+                newLabelSource = this.mapperService.scanCodeToText(scancode);
+                if (newLabelSource) {
+                    if (newLabelSource.length === 1) {
+                        this.labelSource = newLabelSource[0];
+                        this.labelType = LabelTypes.OneLineText;
+                    } else {
+                        this.labelSource = newLabelSource;
+                        this.labelType = LabelTypes.TwoLineText;
+                    }
+                } else {
+                    this.labelSource = this.mapperService.scanCodeToSvgImagePath(scancode);
+                    this.labelType = LabelTypes.SingleIcon;
+                }
+            } else if (keyAction.hasOnlyOneActiveModifier()) {
+                newLabelSource = [];
+                switch (keyAction.modifierMask) {
+                    case KeyModifiers.leftCtrl:
+                    case KeyModifiers.rightCtrl:
+                        newLabelSource.push('Ctrl');
+                        break;
+                    case KeyModifiers.leftShift:
+                    case KeyModifiers.rightShift:
+                        newLabelSource.push('Shift');
+                        break;
+                    case KeyModifiers.leftAlt:
+                    case KeyModifiers.rightAlt:
+                        newLabelSource.push('Alt');
+                        break;
+                    case KeyModifiers.leftGui:
+                    case KeyModifiers.rightGui:
+                        newLabelSource.push('Super');
+                        break;
+                    default:
+                        newLabelSource.push('Undefined');
+                        break;
+                }
+                this.labelSource = newLabelSource;
+            }
+        } else if (this.keyAction instanceof SwitchLayerAction) {
+            let keyAction: SwitchLayerAction = this.keyAction as SwitchLayerAction;
+            let newLabelSource: string;
+            switch (keyAction.layer) {
+                case LayerName.mod:
+                    newLabelSource = 'Mod';
+                    break;
+                case LayerName.fn:
+                    newLabelSource = 'Fn';
+                    break;
+                case LayerName.mouse:
+                    newLabelSource = 'Mouse';
+                    break;
+                default:
+                    break;
+            }
+
+            if (keyAction.isLayerToggleable) {
+                this.labelType = LabelTypes.TextIcon;
+                this.labelSource = {
+                    text: newLabelSource,
+                    icon: this.mapperService.getIcon('toggle')
+                };
+            } else {
+                this.labelType = LabelTypes.OneLineText;
+                this.labelSource = newLabelSource;
+            }
+        } else if (this.keyAction instanceof SwitchKeymapAction) {
+            let keyAction: SwitchKeymapAction = this.keyAction as SwitchKeymapAction;
+            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/components/svg/keys/svg-keyboard-key.model.ts

@@ -0,0 +1,9 @@
+export interface SvgKeyboardKey {
+    id: string;
+    x: string;
+    y: string;
+    rx: string;
+    ry: string;
+    height: number;
+    width: number;
+}

src/components/svg/keys/svg-one-line-text-key.component.html

@@ -0,0 +1,6 @@
+ <svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="'middle'">
+        <tspan [attr.x]="spanX" dy="0">{{ text }}</tspan>
+ </svg:text>

src/components/svg/keys/svg-one-line-text-key.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-one-line-text-key]',
+    template: require('./svg-one-line-text-key.component.html')
+})
+export class SvgOneLineTextKeyComponent implements OnInit {
+    @Input() height: number;
+    @Input() width: number;
+    @Input() text: string;
+
+    private textY: number;
+    private spanX: number;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.textY = this.height / 2;
+        this.spanX = this.width / 2;
+    }
+}

src/components/svg/keys/svg-single-icon-key.component.html

@@ -0,0 +1,4 @@
+<svg:use [attr.xlink:href]="icon"
+    [attr.width]="svgWidth" [attr.height]="svgHeight"
+    [attr.x]="svgWidth" [attr.y]="svgHeight">
+</svg:use>

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

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-single-icon-key]',
+    template: require('./svg-single-icon-key.component.html')
+})
+export class SvgSingleIconKeyComponent implements OnInit {
+    @Input() width: number;
+    @Input() height: number;
+    @Input() icon: string;
+
+    private svgHeight: number;
+    private svgWidth: number;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.svgWidth = this.width / 3;
+        this.svgHeight = this.height / 3;
+    }
+}

src/components/svg/keys/svg-switch-keymap-key.component.html

@@ -0,0 +1,12 @@
+<svg:use [attr.xlink:href]="icon"
+        [attr.width]="useWidth"
+        [attr.height]="useHeight"
+        [attr.x]="useX"
+        [attr.y]="useY">
+</svg:use>
+<svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="'middle'">
+        <tspan [attr.x]="spanX">{{ abbreviation }}</tspan>
+</svg:text>

src/components/svg/keys/svg-switch-keymap-key.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+import {MapperService} from '../../../services/mapper.service';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-switch-keymap-key]',
+    template: require('./svg-switch-keymap-key.component.html')
+})
+export class SvgSwitchKeymapKeyComponent implements OnInit {
+    @Input() width: number;
+    @Input() height: number;
+    @Input() abbreviation: string;
+
+    private icon: string;
+    private useWidth: number;
+    private useHeight: number;
+    private useX: number;
+    private useY: number;
+    private textY: number;
+    private spanX: number;
+
+    constructor(private mapperService: MapperService) { }
+
+    ngOnInit() {
+        this.icon = this.mapperService.getIcon('switch-keymap');
+
+        this.useWidth = this.width / 4;
+        this.useHeight = this.height / 4;
+        this.useX = this.width * 3 / 8;
+        this.useY = this.height / 5;
+        this.textY = this.height * 2 / 3;
+        this.spanX = this.width / 2;
+    }
+}

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

@@ -0,0 +1,12 @@
+ <svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="textAnchor">
+        <tspan [attr.x]="spanX">{{ text }}</tspan>
+ </svg:text>
+<svg:use [attr.xlink:href]="icon"
+        [attr.width]="useWidth"
+        [attr.height]="useHeight"
+        [attr.x]="useX"
+        [attr.y]="useY">
+</svg:use>

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

@@ -0,0 +1,34 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-text-icon-key]',
+    template: require('./svg-text-icon-key.component.html')
+})
+export class SvgTextIconKeyComponent implements OnInit {
+    @Input() width: number;
+    @Input() height: number;
+    @Input() text: string;
+    @Input() icon: string;
+
+
+    private useWidth: number;
+    private useHeight: number;
+    private useX: number;
+    private useY: number;
+    private textY: number;
+    private textAnchor: string;
+    private spanX: number;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.useWidth = this.width / 3;
+        this.useHeight = this.height / 3;
+        this.useX = (this.width > 2 * this.height) ? this.width * 0.6 : this.width / 3;
+        this.useY = (this.width > 2 * this.height) ? this.height / 3 : this.height / 2;
+        this.textY = (this.width > 2 * this.height) ? this.height / 2 : this.height / 3;
+        this.textAnchor = (this.width > 2 * this.height) ? 'end' : 'middle';
+        this.spanX = (this.width > 2 * this.height) ? 0.6 * this.width : this.width / 2;
+    }
+}

src/components/svg/keys/svg-two-line-text-key.component.html

@@ -0,0 +1,11 @@
+<svg:text
+    [attr.x]="0"
+    [attr.y]="textY"
+    [attr.text-anchor]="'middle'">
+         <tspan
+                *ngFor="let text of texts; let index = index"
+                [attr.x]="spanX"
+                [attr.y]="spanY(index)"
+                dy="0"
+                >{{ text }}</tspan>
+ </svg:text>

src/components/svg/keys/svg-two-line-text-key.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+    moduleId: module.id,
+    selector: 'g[svg-two-line-text-key]',
+    template: require('./svg-two-line-text-key.component.html')
+})
+export class SvgTwoLineTextKeyComponent implements OnInit {
+    @Input() height: number;
+    @Input() width: number;
+    @Input() texts: string[];
+
+    private textY: number;
+    private spanX: number;
+
+    constructor() { }
+
+    ngOnInit() {
+        this.textY = this.height / 2;
+        this.spanX = this.width / 2;
+    }
+
+    private spanY(index: number) {
+        return (0.75 - index * 0.5) * this.height;
+    }
+}

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

@@ -0,0 +1,10 @@
+<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)"
+/>
+<popover *ngIf="popOverEnabled"></popover>

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

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

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

@@ -0,0 +1,29 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+import {SvgKeyboardKey} from '../keys/svg-keyboard-key.model';
+import {SvgKeyboardKeyComponent} from '../keys/svg-keyboard-key.component';
+import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
+
+@Component({
+    selector: 'g[svg-module]',
+    template: require('./svg-module.component.html'),
+    styles: [require('./svg-module.component.scss')],
+    directives: [SvgKeyboardKeyComponent]
+})
+export class SvgModuleComponent implements OnInit {
+    @Input() coverages: any[];
+    @Input() keyboardKeys: SvgKeyboardKey[];
+    @Input() keyActions: KeyAction[];
+    @Output() editKeyActionRequest = new EventEmitter<number>();
+
+    constructor() {
+        this.keyboardKeys = [];
+    }
+
+    ngOnInit() { }
+
+    onKeyClick(index: number): void {
+        this.editKeyActionRequest.emit(index);
+    }
+
+}

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

@@ -0,0 +1,17 @@
+import {SvgKeyboardKey} from '../keys/svg-keyboard-key.model';
+
+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.$;
+    }
+}

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

@@ -0,0 +1,4 @@
+<svg-keyboard [moduleConfig]="moduleConfig"
+            (keyClick)="onKeyClick($event.moduleId, $event.keyId)">
+</svg-keyboard>
+<popover *ngIf="popoverEnabled" (cancel)="hidePopover()" (remap)="onRemap($event)"></popover>

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

@@ -0,0 +1,6 @@
+:host {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}

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

@@ -0,0 +1,58 @@
+import { Component, OnInit, Input} from '@angular/core';
+
+import {Module} from '../../../../config-serializer/config-items/Module';
+import {KeyAction} from '../../../../config-serializer/config-items/KeyAction';
+import {SvgKeyboardComponent} from '../keyboard/svg-keyboard.component';
+import {PopoverComponent} from '../../popover/popover.component';
+
+@Component({
+    selector: 'svg-keyboard-popover',
+    template: require('./svg-keyboard-popover.component.html'),
+    styles: [require('./svg-keyboard-popover.component.scss')],
+    directives: [SvgKeyboardComponent, PopoverComponent]
+})
+export class SvgKeyboardPopoverComponent implements OnInit {
+    @Input() moduleConfig: Module[];
+
+    private popoverEnabled: boolean;
+    private keyEditConfig: { moduleId: number, keyId: number };
+
+    constructor() {
+        this.keyEditConfig = {
+            moduleId: undefined,
+            keyId: undefined
+        };
+    }
+
+    ngOnInit() { }
+
+    onKeyClick(moduleId: number, keyId: number): void {
+        if (!this.popoverEnabled) {
+            this.keyEditConfig = {
+                moduleId,
+                keyId
+            };
+            this.showPopover();
+        }
+    }
+
+    onRemap(keyAction: KeyAction): void {
+        this.changeKeyAction(keyAction);
+        this.hidePopover();
+    }
+
+    showPopover(): void {
+        this.popoverEnabled = true;
+    }
+
+    hidePopover(): void {
+        this.popoverEnabled = false;
+    }
+
+    changeKeyAction(keyAction: KeyAction): void {
+        let moduleId = this.keyEditConfig.moduleId;
+        let keyId = this.keyEditConfig.keyId;
+        this.moduleConfig[moduleId].keyActions.elements[keyId] = keyAction;
+    }
+
+}