diff --git a/shared/src/components/keyboard/slider/keyboard-slider.component.html b/shared/src/components/keyboard/slider/keyboard-slider.component.html index 3b328de7..b77f45c1 100644 --- a/shared/src/components/keyboard/slider/keyboard-slider.component.html +++ b/shared/src/components/keyboard/slider/keyboard-slider.component.html @@ -3,6 +3,8 @@ [moduleConfig]="layer.modules" [keybindAnimationEnabled]="keybindAnimationEnabled" [capturingEnabled]="capturingEnabled" + [selectedKey]="selectedKey" + [selected]="selectedKey?.layerId === index" (keyClick)="keyClick.emit($event)" (keyHover)="keyHover.emit($event)" (capture)="capture.emit($event)" diff --git a/shared/src/components/keyboard/slider/keyboard-slider.component.ts b/shared/src/components/keyboard/slider/keyboard-slider.component.ts index 9359195f..8662b7f5 100644 --- a/shared/src/components/keyboard/slider/keyboard-slider.component.ts +++ b/shared/src/components/keyboard/slider/keyboard-slider.component.ts @@ -80,6 +80,7 @@ export class KeyboardSliderComponent implements OnChanges { @Input() currentLayer: number; @Input() keybindAnimationEnabled: boolean; @Input() capturingEnabled: boolean; + @Input() selectedKey: { layerId: number, moduleId: number, keyId: number }; @Output() keyClick = new EventEmitter(); @Output() keyHover = new EventEmitter(); @Output() capture = new EventEmitter(); diff --git a/shared/src/components/svg/keyboard/svg-keyboard.component.html b/shared/src/components/svg/keyboard/svg-keyboard.component.html index 78805d2c..a7e22556 100644 --- a/shared/src/components/svg/keyboard/svg-keyboard.component.html +++ b/shared/src/components/svg/keyboard/svg-keyboard.component.html @@ -6,6 +6,8 @@ [capturingEnabled]="capturingEnabled" [attr.transform]="module.attributes.transform" [keyActions]="moduleConfig[i].keyActions" + [selectedKey]="selectedKey" + [selected]="selectedKey?.moduleId === i" (keyClick)="onKeyClick(i, $event.index, $event.keyTarget)" (keyHover)="onKeyHover($event.index, $event.event, $event.over, i)" (capture)="onCapture(i, $event.index, $event.captured)" diff --git a/shared/src/components/svg/keyboard/svg-keyboard.component.ts b/shared/src/components/svg/keyboard/svg-keyboard.component.ts index e50834bb..35557acb 100644 --- a/shared/src/components/svg/keyboard/svg-keyboard.component.ts +++ b/shared/src/components/svg/keyboard/svg-keyboard.component.ts @@ -18,6 +18,8 @@ export class SvgKeyboardComponent implements OnInit { @Input() moduleConfig: Module[]; @Input() keybindAnimationEnabled: boolean; @Input() capturingEnabled: boolean; + @Input() selectedKey: { layerId: number, moduleId: number, keyId: number }; + @Input() selected: boolean; @Output() keyClick = new EventEmitter(); @Output() keyHover = new EventEmitter(); @Output() capture = new EventEmitter(); diff --git a/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html b/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html index 11f12b88..8b74aa86 100644 --- a/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html +++ b/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html @@ -1,5 +1,6 @@ *', animate('200ms')), + transition('* => 1', animate('0ms')) // Instant color to blue + ]), trigger('recording', [ state('inactive', style({ fill: 'rgba(204, 0, 0, 1)' @@ -71,6 +77,8 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy { @Input() keyAction: KeyAction; @Input() keybindAnimationEnabled: boolean; @Input() capturingEnabled: boolean; + @Input() active: boolean; + @Output() keyClick = new EventEmitter(); @Output() capture = new EventEmitter(); diff --git a/shared/src/components/svg/module/svg-module.component.html b/shared/src/components/svg/module/svg-module.component.html index ed752757..0bb2efa2 100644 --- a/shared/src/components/svg/module/svg-module.component.html +++ b/shared/src/components/svg/module/svg-module.component.html @@ -8,6 +8,7 @@ [attr.transform]="'translate(' + key.x + ' ' + key.y + ')'" [attr.fill]="key.fill" [keyAction]="keyActions[i]" + [active]="selected && i == selectedKey.keyId" [keybindAnimationEnabled]="keybindAnimationEnabled" [capturingEnabled]="capturingEnabled" (keyClick)="onKeyClick(i, $event)" diff --git a/shared/src/components/svg/module/svg-module.component.ts b/shared/src/components/svg/module/svg-module.component.ts index d43df42a..d6c80dc0 100644 --- a/shared/src/components/svg/module/svg-module.component.ts +++ b/shared/src/components/svg/module/svg-module.component.ts @@ -14,6 +14,8 @@ export class SvgModuleComponent { @Input() coverages: any[]; @Input() keyboardKeys: SvgKeyboardKey[]; @Input() keyActions: KeyAction[]; + @Input() selectedKey: { layerId: number, moduleId: number, keyId: number }; + @Input() selected: boolean; @Input() keybindAnimationEnabled: boolean; @Input() capturingEnabled: boolean; @Output() keyClick = new EventEmitter(); diff --git a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html index 01dc6166..35a51982 100644 --- a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html +++ b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.html @@ -4,6 +4,7 @@ [currentLayer]="currentLayer" [keybindAnimationEnabled]="keybindAnimationEnabled" [capturingEnabled]="popoverEnabled" + [selectedKey]="selectedKey" (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)" diff --git a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts index ae114ccc..3f57c246 100644 --- a/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts +++ b/shared/src/components/svg/wrap/svg-keyboard-wrap.component.ts @@ -60,6 +60,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges { private popoverShown: boolean; private keyEditConfig: { moduleId: number, keyId: number }; + private selectedKey: { layerId: number, moduleId: number, keyId: number }; private popoverInitKeyAction: KeyAction; private keybindAnimationEnabled: boolean; private currentLayer: number = 0; @@ -136,7 +137,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges { moduleId, keyId }; - + this.selectedKey = { layerId: this.currentLayer, moduleId, keyId }; const keyActionToEdit: KeyAction = this.layers[this.currentLayer].modules[moduleId].keyActions[keyId]; this.keyElement = keyTarget; this.showPopover(keyActionToEdit); @@ -224,6 +225,7 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges { hidePopover(): void { this.popoverShown = false; + this.selectedKey = undefined; } selectLayer(index: number): void { diff --git a/shared/src/tsconfig.json b/shared/src/tsconfig.json new file mode 100644 index 00000000..b4153557 --- /dev/null +++ b/shared/src/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "removeComments": false, + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true, + "typeRoots": [ + "../../node_modules/@types" + ], + "types": [ + "node", + "jquery", + "core-js", + "select2", + "file-saver" + ] + }, + "exclude": [ + "node_modules", + "config-serializer" + ] +}