62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { Component, OnInit, Input} from '@angular/core';
|
|
|
|
import {Module} from '../../config-serializer/config-items/Module';
|
|
import {SvgModule} from './svg-module.model';
|
|
import {SvgModuleComponent} from './svg-module.component';
|
|
import {PopoverComponent} from './popover/popover.component';
|
|
|
|
@Component({
|
|
selector: 'svg-keyboard',
|
|
template:
|
|
`
|
|
<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"
|
|
[attr.transform]="module.attributes.transform"
|
|
[keyActions]="moduleConfig[i].keyActions.elements"
|
|
(editKeyActionRequest)="onEditKeyActionRequest(i, $event)"
|
|
/>
|
|
</svg:g>
|
|
</svg>
|
|
<popover *ngIf="popoverEnabled" (cancel)="hidePopover()"></popover>
|
|
`,
|
|
styles:
|
|
[`
|
|
:host {
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
`],
|
|
directives: [SvgModuleComponent, PopoverComponent]
|
|
})
|
|
export class SvgKeyboardComponent implements OnInit {
|
|
@Input() svgAttributes: { viewBox: string, transform: string, fill: string };
|
|
@Input() modules: SvgModule[];
|
|
@Input() moduleConfig: Module[];
|
|
|
|
private popoverEnabled: boolean;
|
|
|
|
constructor() {
|
|
this.modules = [];
|
|
}
|
|
|
|
ngOnInit() { }
|
|
|
|
onEditKeyActionRequest(moduleId: number, keyId: number): void {
|
|
this.showPopover();
|
|
}
|
|
|
|
showPopover(): void {
|
|
this.popoverEnabled = true;
|
|
}
|
|
|
|
hidePopover(): void {
|
|
this.popoverEnabled = false;
|
|
}
|
|
|
|
}
|