refactore: create feature modules (#387)

* add @angular/cli to the project * increase nodejs version -> 8.2.1 * add lerna * merge web and shared module * move electron module into packages as uhk-agent Electron agent functionality is not working * delete symlinker * convert private properties to public of component if used in html * revert uhk-message.component * fix component path * fix the correct name of the uhk-message.component.scss * building web and electron module * delete uhk-renderer package * handle device connect disconnect state * add privilege detection * fix set privilege functionality * turn back download keymap functionality * add bootstrap, select2 js and fix null pointer exception * turn back upload data to keyboard * fix send keymap * fix test-serializer * add missing package.json * merging * fix appveyor build * fix linting * turn back electron storage service * commit the missing electron-datastorage-repository * update node to 8.3.0 in .nvmrc and log node version in appveyor build * set exact version number in appveyor build * vertical align privilege and missing device components * set back node version to 8 in appveyor * move node-usb dependency from usb dir to root maybe it is fix the appveyor build * revert usb to root * fix electron builder script * fix electron builder script * turn off electron devtools * remove CTRL+U functionality * fix CTRL+o * fix lint error * turnoff store freeze * start process when got `Error: EPERM: operation not permitted` error * move files from root usb dir -> packages/usb
2017-08-19 20:02:17 +02:00
parent 97770f67c0
commit 0f558e4132
524 changed files with 25606 additions and 5036 deletions
@@ -0,0 +1 @@
+export * from './slider';
@@ -0,0 +1 @@
+export { KeyboardSliderComponent } from './keyboard-slider.component';
@@ -0,0 +1,13 @@
+<svg-keyboard *ngFor="let layer of layers; let index = index; trackBy: trackKeyboard"
+    [@layerState]="layerAnimationState[index]"
+    [moduleConfig]="layer.modules"
+    [keybindAnimationEnabled]="keybindAnimationEnabled"
+    [halvesSplit]="halvesSplit"
+    [capturingEnabled]="capturingEnabled"
+    [selectedKey]="selectedKey"
+    [selected]="selectedKey?.layerId === index"
+    (keyClick)="keyClick.emit($event)"
+    (keyHover)="keyHover.emit($event)"
+    (capture)="capture.emit($event)"
+>
+</svg-keyboard>
@@ -0,0 +1,8 @@
+svg-keyboard {
+    width: 95%;
+    max-width: 1400px;
+    position: absolute;
+    left: 0;
+    transform: translateX(-101%);
+    user-select: none;
+}
@@ -0,0 +1,105 @@
+import { Component, ChangeDetectionStrategy, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { animate, keyframes, state, style, transition, trigger } from '@angular/animations';
+
+import { Layer } from '../../../config-serializer/config-items/layer';
+
+type AnimationKeyboard =
+    'leftIn' |
+    'leftOut' |
+    'rightIn' |
+    'rightOut';
+
+@Component({
+    selector: 'keyboard-slider',
+    templateUrl: './keyboard-slider.component.html',
+    styleUrls: ['./keyboard-slider.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    // We use 101%, because there was still a trace of the keyboard in the screen when animation was done
+    animations: [
+        trigger('layerState', [
+            state('leftIn, rightIn', style({
+                transform: 'translateX(-50%)',
+                left: '50%'
+            })),
+            state('leftOut', style({
+                transform: 'translateX(-101%)',
+                left: '0'
+            })),
+            state('rightOut', style({
+                transform: 'translateX(0)',
+                left: '101%'
+            })),
+            transition('leftOut => leftIn, rightOut => leftIn', [
+                animate('400ms ease-out', keyframes([
+                    style({ transform: 'translateX(0%)', left: '101%', offset: 0 }),
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
+                ]))
+            ]),
+            transition('leftIn => leftOut, rightIn => leftOut', [
+                animate('400ms ease-out', keyframes([
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
+                    style({ transform: 'translateX(-101%)', left: '0%', offset: 1 })
+                ]))
+            ]),
+            transition('* => rightIn', [
+                animate('400ms ease-out', keyframes([
+                    style({ transform: 'translateX(-101%)', left: '0%', offset: 0 }),
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 1 })
+                ]))
+            ]),
+            transition('* => rightOut', [
+                animate('400ms ease-out', keyframes([
+                    style({ transform: 'translateX(-50%)', left: '50%', offset: 0 }),
+                    style({ transform: 'translateX(0%)', left: '101%', offset: 1 })
+                ]))
+            ]),
+            transition(':leave', [
+                animate('2000ms ease-out', keyframes([
+                    style({ opacity: 1, offset: 0 }),
+                    style({ opacity: 0, offset: 1 })
+                ]))
+            ])
+        ])
+    ]
+})
+export class KeyboardSliderComponent implements OnChanges {
+    @Input() layers: Layer[];
+    @Input() currentLayer: number;
+    @Input() keybindAnimationEnabled: boolean;
+    @Input() capturingEnabled: boolean;
+    @Input() halvesSplit: boolean;
+    @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
+    @Output() keyClick = new EventEmitter();
+    @Output() keyHover = new EventEmitter();
+    @Output() capture = new EventEmitter();
+
+    layerAnimationState: AnimationKeyboard[];
+
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes['layers']) {
+            this.layerAnimationState = this.layers.map<AnimationKeyboard>(() => 'leftOut');
+            this.layerAnimationState[this.currentLayer] = 'leftIn';
+        }
+        const layerChange = changes['currentLayer'];
+        if (layerChange) {
+            const prevValue = layerChange.isFirstChange() ? layerChange.currentValue : layerChange.previousValue;
+            this.onLayerChange(prevValue, layerChange.currentValue);
+        }
+    }
+
+    trackKeyboard(index: number) {
+        return index;
+    }
+
+    onLayerChange(oldIndex: number, index: number): void {
+        if (index > oldIndex) {
+            this.layerAnimationState[oldIndex] = 'leftOut';
+            this.layerAnimationState[index] = 'leftIn';
+        } else {
+            this.layerAnimationState[oldIndex] = 'rightOut';
+            this.layerAnimationState[index] = 'rightIn';
+        }
+
+    }
+
+}
				`@@ -0,0 +1 @@`
				`export { KeyboardSliderComponent } from './keyboard-slider.component';`