ANSI and ISO layout handling (#309)

* Read left and right modules

* Add missing styles

* Calculate indices from ids

* Skip missing keys

* Align key actions to match the order specified by the svg

* Fix svg key hover

* Fix key hover

Without using css important

electron/src/app.module.ts

@@ -69,6 +69,7 @@ import { AppComponent } from './app/app.component';
 import { MainAppComponent } from './main-app';
 
 import { CancelableDirective } from './shared/directives';
+import { SafeStylePipe } from './shared/pipes';
 
 import { CaptureService } from './shared/services/capture.service';
 import { MapperService } from './shared/services/mapper.service';
@@ -140,7 +141,8 @@ import { reducer } from '../../shared/src/store/reducers/index';
         MissingDeviceComponent,
         PrivilegeCheckerComponent,
         UhkMessageComponent,
-        CancelableDirective
+        CancelableDirective,
+        SafeStylePipe
     ],
     imports: [
         BrowserModule,

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

@@ -1,15 +1,13 @@
-<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="svgAttributes.viewBox" height="100%" width="100%">
+<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="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"
-        <svg:g svg-module *ngFor="let module of modules; let i = index"
+            [coverages]="module.coverages"
-                [coverages]="module.coverages"
+            [keyboardKeys]="module.keyboardKeys"
-                [keyboardKeys]="module.keyboardKeys"
+            [keybindAnimationEnabled]="keybindAnimationEnabled"
-                [keybindAnimationEnabled]="keybindAnimationEnabled"
+            [capturingEnabled]="capturingEnabled"
-                [capturingEnabled]="capturingEnabled"
+            [attr.transform]="module.attributes.transform"
-                [attr.transform]="module.attributes.transform"
+            [keyActions]="moduleConfig[i].keyActions"
-                [keyActions]="moduleConfig[i].keyActions"
+            (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
-                (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
+            (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
-                (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
+            (capture)="onCapture(i, $event.index, $event.captured)"
-                (capture)="onCapture(i, $event.index, $event.captured)"
+    />
-        />
-    </svg:g>
 </svg>

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

@@ -3,6 +3,11 @@ import { Component, EventEmitter, Input, OnInit, Output, ChangeDetectionStrategy
 import { Module } from '../../../config-serializer/config-items/Module';
 import { SvgModule } from '../module';
 
+enum KeyboardLayout {
+    ANSI,
+    ISO
+}
+
 @Component({
     selector: 'svg-keyboard',
     templateUrl: './svg-keyboard.component.html',
@@ -17,12 +22,12 @@ export class SvgKeyboardComponent implements OnInit {
     @Output() keyHover = new EventEmitter();
     @Output() capture = new EventEmitter();
 
-    private modules: SvgModule[];
+    modules: SvgModule[];
-    private svgAttributes: { viewBox: string, transform: string, fill: string };
+    viewBox: string;
 
     constructor() {
         this.modules = [];
-        this.svgAttributes = this.getKeyboardSvgAttributes();
+        this.viewBox = '-520 582 1100 470';
     }
 
     ngOnInit() {
@@ -37,7 +42,7 @@ export class SvgKeyboardComponent implements OnInit {
         });
     }
 
-    onCapture(moduleId: number, keyId: number, captured: {code: number, left: boolean[], right: boolean[]}): void {
+    onCapture(moduleId: number, keyId: number, captured: { code: number, left: boolean[], right: boolean[] }): void {
         this.capture.emit({
             moduleId,
             keyId,
@@ -54,22 +59,21 @@ export class SvgKeyboardComponent implements OnInit {
         });
     }
 
-    private getKeyboardSvgAttributes(): { viewBox: string, transform: string, fill: string } {
-        const svg: any = this.getBaseLayer();
-        return {
-            viewBox: svg.$.viewBox,
-            transform: svg.g[0].$.transform,
-            fill: svg.g[0].$.fill
-        };
-    }
-
     private getSvgModules(): SvgModule[] {
-        const modules = this.getBaseLayer().g[0].g.map((obj: any) => new SvgModule(obj));
+        const leftModule = new SvgModule(this.getLeftModule());
-        return [modules[1], modules[0]]; // TODO: remove if the svg will be correct
+        const rightModule = new SvgModule(this.getRightModule());
+        return [rightModule, leftModule];
     }
 
-    private getBaseLayer(): any {
+    private getLeftModule(layout = KeyboardLayout.ANSI): any {
-        return require('xml-loader!../../../../../images/base-layer.svg').svg;
+        if (layout === KeyboardLayout.ISO) {
+            return require('xml-loader!../../../../../modules/uhk60-left-half/layout-iso.svg').svg;
+        }
+        return require('xml-loader!../../../../../modules/uhk60-left-half/layout-ansi.svg').svg;
+    }
+
+    private getRightModule(): any {
+        return require('xml-loader!../../../../../modules/uhk60-right-half/layout.svg').svg;
     }
 
 }

shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.model.ts

@@ -6,4 +6,5 @@ export interface SvgKeyboardKey {
     ry: string;
     height: number;
     width: number;
+    fill: string;
 }

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

@@ -1,14 +1,18 @@
-<svg:path *ngFor="let path of coverages" [attr.d]="path.$.d" />
+<svg:path *ngFor="let path of coverages" [attr.d]="path.$.d" [attr.style]="path.$.style | safeStyle" />
-<svg:g svg-keyboard-key *ngFor="let key of keyboardKeys; let i = index"
+<ng-container *ngFor="let key of keyboardKeys; let i = index">
-        [id]="key.id"
+    <svg:g svg-keyboard-key
-        [rx]="key.rx" [ry]="key.ry"
+            *ngIf="key"
-        [width]="key.width" [height]="key.height"
+            [id]="key.id"
-        [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
+            [rx]="key.rx" [ry]="key.ry"
-        [keyAction]="keyActions[i]"
+            [width]="key.width" [height]="key.height"
-        [keybindAnimationEnabled]="keybindAnimationEnabled"
+            [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'"
-        [capturingEnabled]="capturingEnabled"
+            [attr.fill]="key.fill"
-        (keyClick)="onKeyClick(i, $event)"
+            [keyAction]="keyActions[i]"
-        (capture)="onCapture(i, $event)"
+            [keybindAnimationEnabled]="keybindAnimationEnabled"
-        (mouseenter)="onKeyHover(i, $event, true)"
+            [capturingEnabled]="capturingEnabled"
-        (mouseleave)="onKeyHover(i, $event, false)"
+            (keyClick)="onKeyClick(i, $event)"
-/>
+            (capture)="onCapture(i, $event)"
+            (mouseenter)="onKeyHover(i, $event, true)"
+            (mouseleave)="onKeyHover(i, $event, false)"
+    />
+</ng-container>

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

@@ -1,16 +1,21 @@
 import { SvgKeyboardKey } from '../keys';
 
 export class SvgModule {
-    private coverages: any[];
+    coverages: any[];
-    private keyboardKeys: SvgKeyboardKey[];
+    keyboardKeys: SvgKeyboardKey[];
-    private attributes: any;
+    attributes: any;
 
     constructor(obj: { rect: any[], path: any[], $: Object }) {
-        this.keyboardKeys = obj.rect.map(rect => rect.$).map(rect => {
+        let index: number;
-            rect.height = +rect.height;
+        const keys = obj.rect.map(rect => rect.$);
-            rect.width = +rect.width;
+        this.keyboardKeys = [];
-            return rect;
+        for (let i = 0; i < keys.length; ++i) {
-        });
+            index = keys[i].id.slice(4) - 1; // remove 'key-' then switch to index from 0
+            keys[i].height = +keys[i].height;
+            keys[i].width = +keys[i].width;
+            keys[i].fill = keys[i].style.slice(5); // remove 'fill:'
+            this.keyboardKeys[index] = keys[i];
+        }
         this.coverages = obj.path;
         this.attributes = obj.$;
     }

shared/src/pipes/index.ts

@@ -0,0 +1 @@
+export  { SafeStylePipe } from './safe-style.pipe';

shared/src/pipes/safe-style.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { SafeStyle, DomSanitizer} from '@angular/platform-browser';
+
+@Pipe({
+    name: 'safeStyle'
+})
+export class SafeStylePipe implements PipeTransform {
+
+    constructor(private sanitizer: DomSanitizer) {}
+
+    transform(style: string): SafeStyle {
+        return this.sanitizer.bypassSecurityTrustStyle(style);
+    }
+}

web/src/app.module.ts

@@ -63,6 +63,7 @@ import { SvgKeyboardWrapComponent } from './shared/components/svg/wrap';
 import { MainAppComponent, appRoutingProviders, routing } from './main-app';
 
 import { CancelableDirective } from './shared/directives';
+import { SafeStylePipe } from './shared/pipes';
 
 import { CaptureService } from './shared/services/capture.service';
 import { MapperService } from './shared/services/mapper.service';
@@ -124,7 +125,8 @@ import { reducer } from '../../shared/src/store/reducers/index';
         AddOnComponent,
         SettingsComponent,
         KeyboardSliderComponent,
-        CancelableDirective
+        CancelableDirective,
+        SafeStylePipe
     ],
     imports: [
         BrowserModule,