uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Animate between different layers

Browse Source
This commit is contained in:
József Farkas
2016-05-01 17:06:48 +02:00
parent f6432d4d55
commit 7d82e8cce1
4 changed files with 138 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
config-serializer/uhk-config.json
View File

@@ -350,6 +350,11 @@
"keymapId": 1
}
]
},
{
"id": 1,
"pointerRole": "none",
"keyActions": []
}
]
},

36
src/components/svg-keyboard.component.ts
View File

@@ -1,18 +1,15 @@
import { Component, OnInit} from 'angular2/core';
import { Component, OnInit, Input} from 'angular2/core';
import {DataProviderService} from '../services/data-provider.service';
import {Module} from '../../config-serializer/config-items/Module';
import {SvgModule} from './svg-module.model';
import {SvgModuleComponent} from './svg-module.component';
import {UhkConfiguration} from '../../config-serializer/config-items/UhkConfiguration';
@Component({
selector: 'svg-keyboard',
template:
`
<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="viewBox" height="100%" width="100%">
<svg:g [attr.transform]="transform" [attr.fill]="fill">
<svg xmlns="http://www.w3.org/2000/svg" [attr.viewBox]="svgAttributes.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"
[coverages]="module.coverages"
[keyboardKeys]="module.keyboardKeys"
@@ -33,31 +30,14 @@ import {UhkConfiguration} from '../../config-serializer/config-items/UhkConfigur
directives: [SvgModuleComponent]
})
export class SvgKeyboardComponent implements OnInit {
private viewBox: string;
private modules: SvgModule[];
private svg: any;
private transform: string;
private fill: string;
private moduleConfig: Module[];
@Input() svgAttributes: { viewBox: string, transform: string, fill: string };
@Input() modules: SvgModule[];
@Input() moduleConfig: Module[];
constructor(private dps: DataProviderService) {
constructor() {
this.modules = [];
}
ngOnInit() {
this.svg = this.dps.getBaseLayer();
this.viewBox = this.svg.$.viewBox;
this.transform = this.svg.g[0].$.transform;
this.fill = this.svg.g[0].$.fill;
this.modules = this.svg.g[0].g.map(obj => new SvgModule(obj));
let uhkConfig: UhkConfiguration = new UhkConfiguration();
uhkConfig.fromJsObject(this.dps.getUHKConfig());
this.moduleConfig = uhkConfig.keyMaps.elements[0].layers.elements[0].modules.elements;
this.modules = this.svg.g[0].g.map(obj => {
return new SvgModule(obj);
});
this.modules = [this.modules[1], this.modules[0]]; // TODO: remove if the svg will be correct
}
ngOnInit() { }
}

1
src/components/svg-module.component.ts
View File

@@ -36,7 +36,6 @@ export class SvgModuleComponent implements OnInit, OnChanges {
ngOnInit() {
this.setLabels();
console.log(this);
}
ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {

129
src/main-app.component.ts
View File

@@ -1,6 +1,12 @@
import { Component, OnInit, AfterViewInit, Renderer, ViewChildren, QueryList, ElementRef} from 'angular2/core';
import {UhkConfiguration} from '../config-serializer/config-items/UhkConfiguration';
import {Layers} from '../config-serializer/config-items/Layers';
import {SvgKeyboardComponent} from './components/svg-keyboard.component';
import {SvgModule} from './components/svg-module.model';
import {DataProviderService} from './services/data-provider.service';
@Component({
selector: 'main-app',
@@ -20,7 +26,13 @@ import {SvgKeyboardComponent} from './components/svg-keyboard.component';
</button>
</div>
<div>
<svg-keyboard></svg-keyboard>
<svg-keyboard *ngFor="let layer of layers.elements"
[svgAttributes]="svgAttributes"
[modules]="modules"
[moduleConfig]="layer.modules.elements"
(animationend)="onKeyboardAnimationEnd($event)"
hidden>
</svg-keyboard>
</div>
`,
styles:
@@ -28,6 +40,7 @@ import {SvgKeyboardComponent} from './components/svg-keyboard.component';
:host {
display: flex;
flex-direction: column;
overflow: hidden;
}
:host > div:first-child {
@@ -44,12 +57,44 @@ import {SvgKeyboardComponent} from './components/svg-keyboard.component';
:host > div:last-child {
display: flex;
flex: 5;
justify-content: center;
position: relative;
}
:host > div:last-child > svg-keyboard {
width: 80%;
position: absolute;
left: 50%;
transform: translateX(-50%);
animation-duration: 0.75s;
animation-timing-function: ease-in-out;
}
@keyframes animate-center-left {
0% {
transform: translateX(-50%);
left: 50%;
}
100% {
transform: translateX(-100%);
left: 0%;
}
}
@keyframes animate-center-right {
0% {
transform: translateX(-50%);
left: 50%;
}
100% {
transform: translateX(0%);
left: 100%;
}
}
[hidden] {
display: none
}
`],
directives: [SvgKeyboardComponent]
})
@@ -57,28 +102,104 @@ export class MainAppComponent implements OnInit, AfterViewInit {
@ViewChildren('baseButton,modButton,fnButton,mouseButton')
buttonsQueryList: QueryList<ElementRef>;
@ViewChildren(SvgKeyboardComponent, { read: ElementRef })
keyboardsQueryList: QueryList<ElementRef>;
private buttons: ElementRef[];
private keyboards: ElementRef[];
private selectedLayerIndex: number;
constructor(private renderer: Renderer) {
private svgAttributes: { viewBox: string, transform: string, fill: string };
private modules: SvgModule[];
private layers: Layers;
private numAnimationInProgress: number;
constructor(private renderer: Renderer, private dps: DataProviderService) {
this.buttons = [];
this.keyboards = [];
this.selectedLayerIndex = -1;
this.numAnimationInProgress = 0;
}
ngOnInit() { }
ngOnInit() {
let svg: any = this.dps.getBaseLayer();
this.svgAttributes = {
viewBox: svg.$.viewBox,
transform: svg.g[0].$.transform,
fill: svg.g[0].$.fill
};
this.modules = svg.g[0].g.map(obj => new SvgModule(obj));
this.modules = [this.modules[1], this.modules[0]]; // TODO: remove if the svg will be correct
let uhkConfig: UhkConfiguration = new UhkConfiguration();
uhkConfig.fromJsObject(this.dps.getUHKConfig());
this.layers = uhkConfig.keyMaps.elements[0].layers;
}
ngAfterViewInit() {
this.buttons = this.buttonsQueryList.toArray();
this.keyboards = this.keyboardsQueryList.toArray();
this.selectedLayerIndex = 0;
this.renderer.setElementAttribute(this.keyboards[0].nativeElement, 'hidden', undefined);
}
/* tslint:disable:no-unused-variable */
/* selectLayer is used in the template string */
private selectLayer(index: number): void {
/* tslint:enable:no-unused-variable */
if (this.selectedLayerIndex === index || index > this.keyboards.length - 1 || this.numAnimationInProgress > 0) {
return;
}
this.renderer.setElementClass(this.buttons[this.selectedLayerIndex].nativeElement, 'btn-primary', false);
this.renderer.setElementClass(this.buttons[index].nativeElement, 'btn-primary', true);
if (index > this.selectedLayerIndex) {
this.renderer.setElementStyle(
this.keyboards[this.selectedLayerIndex].nativeElement,
'animation-name',
'animate-center-left'
);
this.renderer.setElementStyle(
this.keyboards[index].nativeElement,
'animation-name',
'animate-center-right'
);
this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-direction', 'reverse');
} else {
this.renderer.setElementStyle(
this.keyboards[this.selectedLayerIndex].nativeElement,
'animation-name',
'animate-center-right'
);
this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-name', 'animate-center-left');
this.renderer.setElementStyle(this.keyboards[index].nativeElement, 'animation-direction', 'reverse');
}
this.numAnimationInProgress += 2;
this.renderer.setElementAttribute(this.keyboards[index].nativeElement, 'hidden', undefined);
this.selectedLayerIndex = index;
}
/* tslint:disable:no-unused-variable */
/* onKeyboardAnimationEnd is used in the template string */
private onKeyboardAnimationEnd(event: AnimationEvent) {
/* tslint:enable:no-unused-variable */
let animationNameTokens: string[] = event.animationName.split('-');
let animationFrom: string = animationNameTokens[1];
let animationTo: string = animationNameTokens[2];
if ((<HTMLElement> event.target).style.animationDirection === 'reverse') {
animationFrom = animationNameTokens[2];
animationTo = animationNameTokens[1];
this.renderer.setElementStyle(event.target, 'animation-direction', undefined);
}
--this.numAnimationInProgress;
this.renderer.setElementStyle(event.target, 'animation-name', undefined);
this.renderer.setElementAttribute(event.target, 'hidden', (animationTo === 'center') ? undefined : '');
}
}