diff --git a/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.html b/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.html index 424b3b9b..85e88142 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.html +++ b/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.html @@ -29,17 +29,17 @@
- - - - + + + +
- +
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.ts index 7b3b84ce..a49fe8d7 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.ts +++ b/packages/uhk-web/src/app/components/macro/action-editor/macro-action-editor.component.ts @@ -38,6 +38,7 @@ export class MacroActionEditorComponent implements OnInit { /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */ TabName = TabName; /* tslint:enable:variable-name */ + isSelectedMacroValid = false; ngOnInit() { this.updateEditableMacroAction(); @@ -66,12 +67,15 @@ export class MacroActionEditorComponent implements OnInit { } } + onValid = (isMacroValid: boolean) => this.isSelectedMacroValid = isMacroValid; + selectTab(tab: TabName): void { this.activeTab = tab; if (tab === this.getTabName(this.macroAction)) { this.updateEditableMacroAction(); } else { this.editableMacroAction = undefined; + this.isSelectedMacroValid = false; } } diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html index cc055a52..06568c6e 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html +++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.html @@ -13,8 +13,8 @@ step="0.1" placeholder="Delay amount" class="form-control" - [attr.value]="delay" - (change)="setDelay($event)"> + [value]="delay" + (change)="setDelay(macroDelayInput.value)">
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts index dc6d8da4..c342576c 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts +++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/delay/macro-delay.component.ts @@ -8,6 +8,7 @@ import { } from '@angular/core'; import { DelayMacroAction } from '../../../../../config-serializer/config-items/macro-action'; +import { MacroBaseComponent } from '../macro-base.component'; const INITIAL_DELAY = 0.5; // In seconds @@ -18,24 +19,29 @@ const INITIAL_DELAY = 0.5; // In seconds host: { 'class': 'macro__delay' }, changeDetection: ChangeDetectionStrategy.OnPush }) -export class MacroDelayTabComponent implements OnInit { +export class MacroDelayTabComponent extends MacroBaseComponent implements OnInit { @Input() macroAction: DelayMacroAction; @ViewChild('macroDelayInput') input: ElementRef; delay: number; presets: number[] = [0.3, 0.5, 0.8, 1, 2, 3, 4, 5]; - constructor() { } + constructor() { super(); } ngOnInit() { if (!this.macroAction) { this.macroAction = new DelayMacroAction(); } this.delay = this.macroAction.delay > 0 ? this.macroAction.delay / 1000 : INITIAL_DELAY; + this.validate(); // initial validation as it has defaults } setDelay(value: number): void { this.delay = value; this.macroAction.delay = this.delay * 1000; + this.validate(); } + + isMacroValid = () => this.macroAction.delay !== 0; + } diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/index.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/index.ts index ca94c71b..a71f9676 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/tab/index.ts +++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/index.ts @@ -2,3 +2,4 @@ export { MacroDelayTabComponent } from './delay'; export { MacroKeyTabComponent } from './key'; export { MacroMouseTabComponent } from './mouse'; export { MacroTextTabComponent } from './text'; +export { MacroBaseComponent } from './macro-base.component'; diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.html index 522a37f1..568fbe99 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.html +++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.html @@ -26,7 +26,7 @@

Press key

Hold key

Release key

- +
\ No newline at end of file diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.ts index ab29d88e..ec269f26 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.ts +++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/key/macro-key.component.ts @@ -3,6 +3,7 @@ import { Component, Input, OnInit, ViewChild } from '@angular/core'; import { KeystrokeAction } from '../../../../../config-serializer/config-items/key-action'; import { KeyMacroAction, MacroSubAction } from '../../../../../config-serializer/config-items/macro-action'; import { KeypressTabComponent, Tab } from '../../../../popover/tab'; +import { MacroBaseComponent } from '../macro-base.component'; enum TabName { Keypress, @@ -19,7 +20,7 @@ enum TabName { ], host: { 'class': 'macro__mouse' } }) -export class MacroKeyTabComponent implements OnInit { +export class MacroKeyTabComponent extends MacroBaseComponent implements OnInit { @Input() macroAction: KeyMacroAction; @ViewChild('tab') selectedTab: Tab; @ViewChild('keypressTab') keypressTab: KeypressTabComponent; @@ -40,6 +41,7 @@ export class MacroKeyTabComponent implements OnInit { selectTab(tab: TabName): void { this.activeTab = tab; + this.validate(); } getTabName(macroAction: KeyMacroAction): TabName { @@ -71,4 +73,9 @@ export class MacroKeyTabComponent implements OnInit { return keyMacroAction; } + isMacroValid = () => { + const keyMacroAction = this.getKeyMacroAction(); + return !!keyMacroAction.scancode || !!keyMacroAction.modifierMask; + } + } diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/macro-base.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/macro-base.component.ts new file mode 100644 index 00000000..2dbf59bf --- /dev/null +++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/macro-base.component.ts @@ -0,0 +1,14 @@ +import { Output, EventEmitter } from '@angular/core'; + +export interface MacroValidator { + isMacroValid: () => boolean; +} + +export abstract class MacroBaseComponent implements MacroValidator { + + @Output() valid = new EventEmitter(); + abstract isMacroValid: () => boolean; + + validate = () => this.valid.emit(this.isMacroValid()); + +} diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html index 70287bb6..a497f01c 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html +++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.html @@ -40,11 +40,11 @@
- pixels + pixels
- pixels + pixels
@@ -54,11 +54,11 @@
- pixels + pixels
- pixels + pixels
diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts index 28cdd275..d1e8e90d 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts +++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts @@ -7,6 +7,7 @@ import { MacroSubAction } from '../../../../../config-serializer/config-items/macro-action'; import { Tab } from '../../../../popover/tab'; +import { MacroBaseComponent } from '../macro-base.component'; type MouseMacroAction = MouseButtonMacroAction | MoveMouseMacroAction | ScrollMouseMacroAction; @@ -27,7 +28,7 @@ enum TabName { ], host: { 'class': 'macro__mouse' } }) -export class MacroMouseTabComponent implements OnInit { +export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit { @Input() macroAction: MouseMacroAction; @ViewChild('tab') selectedTab: Tab; @@ -39,6 +40,7 @@ export class MacroMouseTabComponent implements OnInit { private selectedButtons: boolean[]; constructor() { + super(); this.buttonLabels = ['Left', 'Middle', 'Right']; this.selectedButtons = Array(this.buttonLabels.length).fill(false); } @@ -65,6 +67,8 @@ export class MacroMouseTabComponent implements OnInit { if (tab === this.getTabName(this.macroAction)) { return; + } else { + this.selectedButtons = []; } switch (tab) { @@ -79,11 +83,13 @@ export class MacroMouseTabComponent implements OnInit { this.macroAction.action = this.getAction(tab); break; } + this.validate(); } setMouseClick(index: number): void { this.selectedButtons[index] = !this.selectedButtons[index]; (this.macroAction).setMouseButtons(this.selectedButtons); + this.validate(); } hasButton(index: number): boolean { @@ -120,4 +126,18 @@ export class MacroMouseTabComponent implements OnInit { return TabName.Move; } + isMacroValid = () => { + switch (this.macroAction.constructor) { + case MoveMouseMacroAction: + case ScrollMouseMacroAction: + const { x, y } = this.macroAction as MoveMouseMacroAction; + return x !== undefined && x !== null && y !== undefined && y !== null; + case MouseButtonMacroAction: + const { mouseButtonsMask } = this.macroAction as MouseButtonMacroAction; + return !!mouseButtonsMask; + default: + return true; + } + } + } diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html b/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html index 307abc7a..e503708d 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html +++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.html @@ -1,5 +1,6 @@

Type text

Input the text you want to type with this macro action.

- -
\ No newline at end of file + + diff --git a/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.ts b/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.ts index e85c0fae..3bf66e8e 100644 --- a/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.ts +++ b/packages/uhk-web/src/app/components/macro/action-editor/tab/text/macro-text.component.ts @@ -9,6 +9,7 @@ import { } from '@angular/core'; import { TextMacroAction } from '../../../../../config-serializer/config-items/macro-action'; +import { MacroBaseComponent } from '../macro-base.component'; @Component({ selector: 'macro-text-tab', @@ -16,16 +17,14 @@ import { TextMacroAction } from '../../../../../config-serializer/config-items/m styleUrls: ['./macro-text.component.scss'], host: { 'class': 'macro__text' } }) -export class MacroTextTabComponent implements OnInit, AfterViewInit { +export class MacroTextTabComponent extends MacroBaseComponent implements OnInit, AfterViewInit { @Input() macroAction: TextMacroAction; @ViewChild('macroTextInput') input: ElementRef; - constructor(private renderer: Renderer) {} + constructor(private renderer: Renderer) { super(); } ngOnInit() { - if (!this.macroAction) { - this.macroAction = new TextMacroAction(); - } + this.init(); } ngAfterViewInit() { @@ -33,7 +32,16 @@ export class MacroTextTabComponent implements OnInit, AfterViewInit { } onTextChange() { + this.init(); this.macroAction.text = this.input.nativeElement.value; } + isMacroValid = () => !!this.input.nativeElement.value; + + private init = () => { + if (!this.macroAction) { + this.macroAction = new TextMacroAction(); + } + } + }