Structural refactoring (#68)

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

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;
+    }
+}