feat: add keyboard separator line (#673)

* fix: blhost wrapper return with Promise.reject if error code !== 0

* feat: add keyboard separator line

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html

@@ -1,5 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
-    <svg:g svg-module *ngFor="let module of modules; let i = index"
+<svg xmlns="http://www.w3.org/2000/svg"
+     [attr.viewBox]="viewBox"
+     height="100%"
+     width="100%">
+    <svg:g svg-module
+           *ngFor="let module of modules; let i = index"
            [coverages]="module.coverages"
            [keyboardKeys]="module.keyboardKeys"
            [keybindAnimationEnabled]="keybindAnimationEnabled"
@@ -11,8 +15,11 @@
            [selected]="selectedKey?.moduleId === i"
            (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
            (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"
-           (capture)="onCapture(i, $event.index, $event.captured)"
-    />
+           (capture)="onCapture(i, $event.index, $event.captured)" />
+
+    <svg:path [ngClass]="{'separator-visible': !halvesSplit, 'separator-hide': halvesSplit}"
+              [attr.d]="separator.d"
+              [attr.style]="separatorStyle" />
 </svg>
 <editable-text *ngIf="showDescription"
                [ngModel]="description"

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.scss

@@ -8,3 +8,33 @@ editable-text {
     padding-right: 2em;
     display: block;
 }
+
+.separator-visible {
+    animation: visible-fade-in 1.5s;
+    opacity: 1;
+}
+
+@keyframes visible-fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.separator-hide {
+    animation: visible-fade-out 1.5s;
+    opacity: 0;
+}
+
+@keyframes visible-fade-out {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}

packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts

@@ -1,10 +1,12 @@
 import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
 import { animate, state, trigger, style, transition } from '@angular/animations';
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { Module } from 'uhk-common';
 
 import { SvgModule } from '../module';
 import { SvgModuleProviderService } from '../../../services/svg-module-provider.service';
 import { KeyboardLayout } from '../../../keyboard/keyboard-layout.enum';
+import { SvgSeparator } from '../separator';
 
 @Component({
     selector: 'svg-keyboard',
@@ -41,8 +43,11 @@ export class SvgKeyboardComponent implements OnInit {
     modules: SvgModule[];
     viewBox: string;
     moduleAnimationStates: string[];
+    separator: SvgSeparator;
+    separatorStyle: SafeStyle;
 
-    constructor(private svgModuleProvider: SvgModuleProviderService) {
+    constructor(private svgModuleProvider: SvgModuleProviderService,
+                private sanitizer: DomSanitizer) {
         this.modules = [];
         this.viewBox = '-520 582 1100 470';
         this.halvesSplit = false;
@@ -98,5 +103,7 @@ export class SvgKeyboardComponent implements OnInit {
 
     private setModules() {
         this.modules = this.svgModuleProvider.getSvgModules(this.keyboardLayout);
+        this.separator = this.svgModuleProvider.getSvgSeparator();
+        this.separatorStyle = this.sanitizer.bypassSecurityTrustStyle(this.separator.style);
     }
 }

packages/uhk-web/src/app/components/svg/separator/convert-xml-to-svg-separator.ts

@@ -0,0 +1,5 @@
+import { SvgSeparator } from './svg-separator.model';
+
+export const convertXmlToSvgSeparator = (obj: { path: any[], $: Object }): SvgSeparator => {
+    return obj.path[0].$;
+};

packages/uhk-web/src/app/components/svg/separator/index.ts

@@ -0,0 +1,2 @@
+export * from './svg-separator.model';
+export * from './convert-xml-to-svg-separator';

packages/uhk-web/src/app/components/svg/separator/svg-separator.model.ts

@@ -0,0 +1,4 @@
+export interface SvgSeparator {
+    style: string;
+    d: string;
+}

packages/uhk-web/src/app/services/svg-module-provider.service.ts

@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 
 import { SvgModule } from '../components/svg/module';
 import { KeyboardLayout } from '../keyboard/keyboard-layout.enum';
+import { convertXmlToSvgSeparator, SvgSeparator } from '../components/svg/separator';
 
 @Injectable()
 export class SvgModuleProviderService {
@@ -9,11 +10,20 @@ export class SvgModuleProviderService {
     private ansiLeft: SvgModule;
     private isoLeft: SvgModule;
     private right: SvgModule;
+    private separator: SvgSeparator;
 
     getSvgModules(layout = KeyboardLayout.ANSI): SvgModule[] {
         return [this.getRightModule(), this.getLeftModule(layout)];
     }
 
+    getSvgSeparator(): SvgSeparator {
+        if (!this.separator) {
+            this.separator = convertXmlToSvgSeparator(require('xml-loader!../../devices/uhk60-right/separator.xml').svg);
+        }
+
+        return this.separator;
+    }
+
     private getLeftModule(layout = KeyboardLayout.ANSI): SvgModule {
         if (layout === KeyboardLayout.ISO) {
             if (!this.isoLeft) {

packages/uhk-web/src/devices/uhk60-right/separator.xml

@@ -3,5 +3,5 @@
 <path
     id="separator"
     style="fill:none;stroke:#f00;stroke-width:3.6496063;stroke-linecap:round"
-    d="M 16.455118,651.55037 16.455118,737.88305 C 16.455118,737.88305 16.419979,743.14568 11.278346,743.14568 L -10.998425,743.14568 C -10.998425,743.14568 -16.174,743.39316 -16.174,748.40667 L -16.174,804.39801 C -16.174,807.0217 -14.110808,809.66218 -10.998425,809.66218 L -4.719685,809.66218 C -4.719685,809.66218 0.315,809.66109 0.315,814.92517 L 0.315,870.91651 C 0.315,870.91651 0.31884203,876.17868 5.3503937,876.17868 L 28.187008,876.17868 C 28.187008,876.17868 33.311,876.17121 33.311,881.44014 L 33.311,937.43147 C 33.311,937.43147 33.306776,942.69568 28.187008,942.69568 L 4.719685,942.69568 C 4.719685,942.69568 -0.01,942.67983 -0.01,947.95864 L -0.01,1050.5905">
+    d="M 16.455118,651.55037 16.455118,737.88305 C 16.455118,737.88305 16.419979,743.14568 11.278346,743.14568 L -10.998425,743.14568 C -10.998425,743.14568 -16.174,743.39316 -16.174,748.40667 L -16.174,804.39801 C -16.174,807.0217 -14.110808,809.66218 -10.998425,809.66218 L -4.719685,809.66218 C -4.719685,809.66218 0.315,809.66109 0.315,814.92517 L 0.315,870.91651 C 0.315,870.91651 0.31884203,876.17868 5.3503937,876.17868 L 28.187008,876.17868 C 28.187008,876.17868 33.311,876.17121 33.311,881.44014 L 33.311,937.43147 C 33.311,937.43147 33.306776,942.69568 28.187008,942.69568 L 4.719685,942.69568 C 4.719685,942.69568 -0.01,942.67983 -0.01,947.95864 L -0.01,1050.5905" />
 </svg>