Keyboard split/merge animation (#311)

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;