From e8de047ed4b86ee35ed8bae00edeb9fb5385ddd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= Date: Sat, 4 Jun 2016 17:20:02 +0200 Subject: [PATCH] Add list to macro-tab --- .../popover/tab/macro-item.component.scss | 14 ++ .../popover/tab/macro-item.component.ts | 136 ++++++++++++++++++ .../popover/tab/macro-tab.component.scss | 43 ++++++ .../popover/tab/macro-tab.component.ts | 51 +++++-- 4 files changed, 235 insertions(+), 9 deletions(-) create mode 100644 src/components/popover/tab/macro-item.component.scss create mode 100644 src/components/popover/tab/macro-item.component.ts create mode 100644 src/components/popover/tab/macro-tab.component.scss diff --git a/src/components/popover/tab/macro-item.component.scss b/src/components/popover/tab/macro-item.component.scss new file mode 100644 index 00000000..c8dde5ff --- /dev/null +++ b/src/components/popover/tab/macro-item.component.scss @@ -0,0 +1,14 @@ +:host { + display: flex; + flex-shrink: 0; + + icon { + margin: 0 5px; + } + + div { + display: flex; + flex: 1; + } + +} \ No newline at end of file diff --git a/src/components/popover/tab/macro-item.component.ts b/src/components/popover/tab/macro-item.component.ts new file mode 100644 index 00000000..cdc75fc0 --- /dev/null +++ b/src/components/popover/tab/macro-item.component.ts @@ -0,0 +1,136 @@ +import { Component, OnInit, OnChanges, Input } from '@angular/core'; +import { NgSwitch, NgSwitchWhen} from '@angular/common'; + +import {MacroAction} from '../../../../config-serializer/config-items/MacroAction'; +import {DelayMacroAction} from '../../../../config-serializer/config-items/DelayMacroAction'; +import {HoldKeyMacroAction} from '../../../../config-serializer/config-items/HoldKeyMacroAction'; +import {HoldModifiersMacroAction} from '../../../../config-serializer/config-items/HoldModifiersMacroAction'; +import {HoldMouseButtonsMacroAction} from '../../../../config-serializer/config-items/HoldMouseButtonsMacroAction'; +import {MoveMouseMacroAction} from '../../../../config-serializer/config-items/MoveMouseMacroAction'; +import {PressKeyMacroAction} from '../../../../config-serializer/config-items/PressKeyMacroAction'; +import {PressModifiersMacroAction} from '../../../../config-serializer/config-items/PressModifiersMacroAction'; +import {PressMouseButtonsMacroAction} from '../../../../config-serializer/config-items/PressMouseButtonsMacroAction'; +import {ReleaseKeyMacroAction} from '../../../../config-serializer/config-items/ReleaseKeyMacroAction'; +import {ReleaseModifiersMacroAction} from '../../../../config-serializer/config-items/ReleaseModifiersMacroAction'; +import {ReleaseMouseButtonsMacroAction} from '../../../../config-serializer/config-items/ReleaseMouseButtonsMacroAction'; +import {ScrollMouseMacroAction} from '../../../../config-serializer/config-items/ScrollMouseMacroAction'; +import {TextMacroAction} from '../../../../config-serializer/config-items/TextMacroAction'; + +import {IconComponent} from '../widgets/icon.component'; + +import {KeyModifiers} from '../../../../config-serializer/config-items/KeystrokeModifiersAction'; + +@Component({ + moduleId: module.id, + selector: 'macro-item', + template: + ` + + +
{{ title }}
+ + + `, + styles: [require('./macro-item.component.scss')], + directives: [NgSwitch, NgSwitchWhen, IconComponent] +}) +export class MacroItemComponent implements OnInit, OnChanges { + + @Input() macroAction: MacroAction; + @Input() editable: boolean; + @Input() deletable: boolean; + @Input() moveable: boolean; + + private iconName: string; + private title: string; + + constructor() { } + + ngOnInit() { + this.updateView(); + } + + ngOnChanges() { + // TODO: check if macroAction changed + this.updateView(); + } + + private updateView(): void { + + this.title = this.macroAction.constructor.name; + if (this.macroAction instanceof MoveMouseMacroAction) { + this.iconName = 'mouse-pointer'; + this.title = 'Move pointer'; + + let action: MoveMouseMacroAction = this.macroAction as MoveMouseMacroAction; + let needAnd: boolean; + if (Math.abs(action.x) > 0) { + this.title += ` by ${Math.abs(action.x)}px ${action.x > 0 ? 'left' : 'right'}ward`; + needAnd = true; + } + if (Math.abs(action.y) > 0) { + this.title += ` ${needAnd ? 'and' : 'by'} ${Math.abs(action.y)}px ${action.y > 0 ? 'down' : 'up'}ward`; + } + } else if (this.macroAction instanceof DelayMacroAction) { + this.iconName = 'clock'; + let action: DelayMacroAction = this.macroAction as DelayMacroAction; + this.title = `Delay of ${action.delay}ms`; + } else if (this.macroAction instanceof TextMacroAction) { + let action: TextMacroAction = this.macroAction as TextMacroAction; + this.title = `Write text: ${action.text}`; + } else if (this.macroAction instanceof ScrollMouseMacroAction) { + this.iconName = 'mouse-pointer'; + this.title = 'Scroll'; + let action: ScrollMouseMacroAction = this.macroAction as ScrollMouseMacroAction; + let needAnd: boolean; + if (Math.abs(action.x) > 0) { + this.title += ` by ${Math.abs(action.x)}px ${action.x > 0 ? 'left' : 'right'}ward`; + needAnd = true; + } + if (Math.abs(action.y) > 0) { + this.title += ` ${needAnd ? 'and' : 'by'} ${Math.abs(action.y)}px ${action.y > 0 ? 'down' : 'up'}ward`; + } + } else if (this.macroAction instanceof PressModifiersMacroAction) { + this.iconName = 'square'; + let action: PressModifiersMacroAction = this.macroAction as PressModifiersMacroAction; + if (action.modifierMask === 0) { + this.title = 'Invalid PressModifiersMacroAction!'; + return; + } + this.title = 'Press: '; + for (let i = KeyModifiers.leftCtrl; i !== KeyModifiers.rightCtrl; i <<= 1) { + if (action.isModifierActive(i)) { + this.title += ' ' + KeyModifiers[i]; + } + } + } else if (this.macroAction instanceof HoldModifiersMacroAction) { + this.iconName = 'square'; + let action: HoldModifiersMacroAction = this.macroAction as HoldModifiersMacroAction; + if (action.modifierMask === 0) { + this.title = 'Invalid HoldModifiersMacroAction!'; + return; + } + this.title = 'Hold: '; + for (let i = KeyModifiers.leftCtrl; i !== KeyModifiers.rightCtrl; i <<= 1) { + if (action.isModifierActive(i)) { + this.title += ' ' + KeyModifiers[i]; + } + } + } else if (this.macroAction instanceof ReleaseModifiersMacroAction) { + this.iconName = 'square'; + let action: ReleaseModifiersMacroAction = this.macroAction as ReleaseModifiersMacroAction; + if (action.modifierMask === 0) { + this.title = 'Invalid ReleaseModifiersMacroAction!'; + return; + } + this.title = 'Release: '; + for (let i = KeyModifiers.leftCtrl; i !== KeyModifiers.rightCtrl; i <<= 1) { + if (action.isModifierActive(i)) { + this.title += ' ' + KeyModifiers[i]; + } + } + } + // TODO: finish for all MacroAction + } + +} diff --git a/src/components/popover/tab/macro-tab.component.scss b/src/components/popover/tab/macro-tab.component.scss new file mode 100644 index 00000000..e9315cac --- /dev/null +++ b/src/components/popover/tab/macro-tab.component.scss @@ -0,0 +1,43 @@ +:host { + display: flex; + flex-direction: column; + .macro-selector { + display: flex; + margin-top: 2px; + + b { + margin-right: 7px; + } + + select { + flex: 1; + } + } + + .macro-action-container { + display: flex; + flex-direction: column; + min-height: 200px; + max-height: 300px; + margin: 20px 0px; + overflow-x: hidden; + overflow-y: auto; + + macro-item { + border: 1px solid #ddd; + padding: 10px; + margin-bottom: -1px; + } + + macro-item:first-child { + border-top-left-radius: 4px; + border-top-right-radius: 4px; + } + + macro-item:last-child { + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/src/components/popover/tab/macro-tab.component.ts b/src/components/popover/tab/macro-tab.component.ts index 5ddab7bb..a82c0552 100644 --- a/src/components/popover/tab/macro-tab.component.ts +++ b/src/components/popover/tab/macro-tab.component.ts @@ -1,27 +1,60 @@ import { Component, OnInit } from '@angular/core'; +import { UhkConfigurationService } from '../../../services/uhk-configuration.service'; +import { Macro } from '../../../../config-serializer/config-items/Macro'; +import { PlayMacroAction } from '../../../../config-serializer/config-items/PlayMacroAction'; + import { KeyActionSaver } from '../key-action-saver'; -import { KeyAction } from '../../../../config-serializer/config-items/KeyAction'; +import { MacroItemComponent } from './macro-item.component'; @Component({ moduleId: module.id, selector: 'macro-tab', template: ` - Macro - ` +
+ Play macro: + +
+
+ +
+ `, + styles: [require('./macro-tab.component.scss')], + directives: [MacroItemComponent] }) export class MacroTabComponent implements OnInit, KeyActionSaver { - constructor() { } - ngOnInit() { } + private macros: Macro[]; + private selectedMacroIndex: number; - keyActionValid(): boolean { - return false; + constructor(private uhkConfigurationService: UhkConfigurationService) { + this.macros = []; + this.selectedMacroIndex = -1; } - toKeyAction(): KeyAction { - return undefined; + ngOnInit() { + this.macros = this.uhkConfigurationService.getUhkConfiguration().macros.elements; + } + + keyActionValid(): boolean { + return this.selectedMacroIndex !== -1; + } + + toKeyAction(): PlayMacroAction { + if (!this.keyActionValid()) { + throw new Error('KeyAction is not valid. No selected macro!'); + } + let keymapAction = new PlayMacroAction(); + keymapAction.macroId = this.macros[this.selectedMacroIndex].id; + return keymapAction; } }