Keyboard split/merge animation (#311)

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

@@ -2,6 +2,7 @@
     [@layerState]="layerAnimationState[index]"
     [moduleConfig]="layer.modules"
     [keybindAnimationEnabled]="keybindAnimationEnabled"
+    [halvesSplit]="halvesSplit"
     [capturingEnabled]="capturingEnabled"
     [selectedKey]="selectedKey"
     [selected]="selectedKey?.layerId === index"
@@ -9,4 +10,4 @@
     (keyHover)="keyHover.emit($event)"
     (capture)="capture.emit($event)"
 >
-</svg-keyboard>
+</svg-keyboard>

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

@@ -69,6 +69,7 @@ export class KeyboardSliderComponent implements OnChanges {
     @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();

shared/src/components/keymap/edit/keymap-edit.component.html

@@ -1,8 +1,8 @@
 <ng-template [ngIf]="keymap$ | async">
     <keymap-header [keymap]="keymap$ | async" [deletable]="deletable$ | async" (downloadClick)="downloadKeymap()"></keymap-header>
-    <svg-keyboard-wrap [keymap]="keymap$ | async"></svg-keyboard-wrap>
+    <svg-keyboard-wrap [keymap]="keymap$ | async" [halvesSplit]="keyboardSplit"></svg-keyboard-wrap>
 </ng-template>
 
 <div *ngIf="!(keymap$ | async)" class="not-found">
     Sorry, there is no keymap with this abbreviation.
-</div>
+</div>

shared/src/components/keymap/edit/keymap-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostListener } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 
 import '@ngrx/core/add/operator/select';
@@ -27,6 +27,8 @@ import { getKeymap, getKeymaps, getUserConfiguration } from '../../../store/redu
 })
 export class KeymapEditComponent {
 
+    keyboardSplit: boolean;
+
     protected keymap$: Observable<Keymap>;
     private deletable$: Observable<boolean>;
 
@@ -61,6 +63,11 @@ export class KeymapEditComponent {
             });
     }
 
+    @HostListener('window:keydown.alt.s', ['$event'])
+    toggleKeyboardSplit() {
+        this.keyboardSplit = !this.keyboardSplit;
+    }
+
     private toExportableJSON(keymap: Keymap): Observable<any> {
         return this.store
             .let(getUserConfiguration())

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

@@ -7,6 +7,7 @@
             [attr.transform]="module.attributes.transform"
             [keyActions]="moduleConfig[i].keyActions"
             [selectedKey]="selectedKey"
+            [@split]="moduleAnimationStates[i]"
             [selected]="selectedKey?.moduleId === i"
             (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)"
             (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)"

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

@@ -1,4 +1,5 @@
-import { Component, EventEmitter, Input, OnInit, Output, ChangeDetectionStrategy } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ChangeDetectionStrategy } from '@angular/core';
+import { animate, state, trigger, style, transition } from '@angular/animations';
 
 import { Module } from '../../../config-serializer/config-items/Module';
 import { SvgModule } from '../module';
@@ -8,7 +9,18 @@ import { SvgModuleProviderService } from '../../../services/svg-module-provider.
     selector: 'svg-keyboard',
     templateUrl: './svg-keyboard.component.html',
     styleUrls: ['./svg-keyboard.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    animations: [
+        trigger('split', [
+            state('rotateLeft', style({
+                transform: 'translate(-3%, 15%) rotate(4deg) scale(0.92, 0.92)'
+            })),
+            state('rotateRight', style({
+                transform: 'translate(3%, 15%) rotate(-4deg) scale(0.92, 0.92)'
+            })),
+            transition('* <=> *', animate(500))
+        ])
+    ]
 })
 export class SvgKeyboardComponent implements OnInit {
     @Input() moduleConfig: Module[];
@@ -16,22 +28,32 @@ export class SvgKeyboardComponent implements OnInit {
     @Input() capturingEnabled: boolean;
     @Input() selectedKey: { layerId: number, moduleId: number, keyId: number };
     @Input() selected: boolean;
+    @Input() halvesSplit: boolean;
     @Output() keyClick = new EventEmitter();
     @Output() keyHover = new EventEmitter();
     @Output() capture = new EventEmitter();
 
     modules: SvgModule[];
     viewBox: string;
+    moduleAnimationStates: string[];
 
     constructor(private svgModuleProvider: SvgModuleProviderService) {
         this.modules = [];
         this.viewBox = '-520 582 1100 470';
+        this.halvesSplit = false;
+        this.moduleAnimationStates = [];
     }
 
     ngOnInit() {
         this.modules = this.svgModuleProvider.getSvgModules();
     }
 
+    ngOnChanges(changes: SimpleChanges) {
+        if (changes.halvesSplit) {
+            this.updateModuleAnimationStates();
+        }
+    }
+
     onKeyClick(moduleId: number, keyId: number, keyTarget: HTMLElement): void {
         this.keyClick.emit({
             moduleId,
@@ -57,4 +79,12 @@ export class SvgKeyboardComponent implements OnInit {
         });
     }
 
+    private updateModuleAnimationStates() {
+        if (this.halvesSplit) {
+            this.moduleAnimationStates = ['rotateRight', 'rotateLeft'];
+        } else {
+            this.moduleAnimationStates = [];
+        }
+    }
+
 }

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

@@ -5,6 +5,7 @@
                      [keybindAnimationEnabled]="keybindAnimationEnabled"
                      [capturingEnabled]="popoverEnabled"
                      [selectedKey]="selectedKey"
+                     [halvesSplit]="halvesSplit"
                      (keyClick)="onKeyClick($event.moduleId, $event.keyId, $event.keyTarget)"
                      (keyHover)="onKeyHover($event.moduleId, $event.event, $event.over, $event.keyId)"
                      (capture)="onCapture($event.moduleId, $event.keyId, $event.captured)"
@@ -23,4 +24,4 @@
             </p>
         </div>
     </div>
-</ng-template>
+</ng-template>

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

@@ -55,6 +55,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
     @Input() keymap: Keymap;
     @Input() popoverEnabled: boolean = true;
     @Input() tooltipEnabled: boolean = false;
+    @Input() halvesSplit: boolean;
 
     @ViewChild(PopoverComponent, { read: ElementRef }) popover: ElementRef;