From 58443cefe1fa1d422f6208928dfd8cda3bc33412 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Farkas=20J=C3=B3zsef?= Date: Sat, 1 Oct 2016 15:21:26 +0200 Subject: [PATCH] Add MouseAction rendering --- src/app.module.ts | 10 +++ src/components/svg/keys/index.ts | 5 ++ .../svg-keyboard-key.component.html | 5 ++ .../svg-keyboard-key.component.ts | 5 ++ .../svg/keys/svg-mouse-click-key/index.ts | 1 + .../svg-mouse-click-key.html | 16 ++++ .../svg-mouse-click-key.ts | 19 +++++ .../svg/keys/svg-mouse-key/index.ts | 1 + .../svg/keys/svg-mouse-key/svg-mouse-key.html | 6 ++ .../svg/keys/svg-mouse-key/svg-mouse-key.ts | 74 +++++++++++++++++++ .../svg/keys/svg-mouse-move-key/index.ts | 1 + .../svg-mouse-move-key.html | 9 +++ .../svg-mouse-move-key/svg-mouse-move-key.ts | 21 ++++++ .../svg/keys/svg-mouse-scroll-key/index.ts | 1 + .../svg-mouse-scroll-key.html | 9 +++ .../svg-mouse-scroll-key.ts | 21 ++++++ .../svg/keys/svg-mouse-speed-key/index.ts | 1 + .../svg-mouse-speed-key.html | 16 ++++ .../svg-mouse-speed-key.ts | 22 ++++++ src/services/mapper.service.ts | 9 +++ 20 files changed, 252 insertions(+) create mode 100644 src/components/svg/keys/svg-mouse-click-key/index.ts create mode 100644 src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.html create mode 100644 src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.ts create mode 100644 src/components/svg/keys/svg-mouse-key/index.ts create mode 100644 src/components/svg/keys/svg-mouse-key/svg-mouse-key.html create mode 100644 src/components/svg/keys/svg-mouse-key/svg-mouse-key.ts create mode 100644 src/components/svg/keys/svg-mouse-move-key/index.ts create mode 100644 src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.html create mode 100644 src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.ts create mode 100644 src/components/svg/keys/svg-mouse-scroll-key/index.ts create mode 100644 src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.html create mode 100644 src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.ts create mode 100644 src/components/svg/keys/svg-mouse-speed-key/index.ts create mode 100644 src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.html create mode 100644 src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.ts diff --git a/src/app.module.ts b/src/app.module.ts index 68a9f30d..039c0608 100644 --- a/src/app.module.ts +++ b/src/app.module.ts @@ -43,6 +43,11 @@ import { SvgIconTextKeyComponent, SvgKeyboardKeyComponent, SvgKeystrokeKeyComponent, + SvgMouseClickKeyComponent, + SvgMouseKeyComponent, + SvgMouseMoveKeyComponent, + SvgMouseScrollKeyComponent, + SvgMouseSpeedKeyComponent, SvgOneLineTextKeyComponent, SvgSingleIconKeyComponent, SvgSwitchKeymapKeyComponent, @@ -82,6 +87,11 @@ const storeConfig = { SvgIconTextKeyComponent, SvgKeyboardKeyComponent, SvgKeystrokeKeyComponent, + SvgMouseKeyComponent, + SvgMouseClickKeyComponent, + SvgMouseMoveKeyComponent, + SvgMouseScrollKeyComponent, + SvgMouseSpeedKeyComponent, SvgOneLineTextKeyComponent, SvgSingleIconKeyComponent, SvgSwitchKeymapKeyComponent, diff --git a/src/components/svg/keys/index.ts b/src/components/svg/keys/index.ts index 834d65ef..d4378df4 100644 --- a/src/components/svg/keys/index.ts +++ b/src/components/svg/keys/index.ts @@ -1,6 +1,11 @@ export { SvgIconTextKeyComponent } from './svg-icon-text-key'; export { SvgKeyboardKeyComponent, SvgKeyboardKey } from './svg-keyboard-key'; export { SvgKeystrokeKeyComponent } from './svg-keystroke-key'; +export { SvgMouseKeyComponent } from './svg-mouse-key'; +export { SvgMouseClickKeyComponent } from './svg-mouse-click-key'; +export { SvgMouseMoveKeyComponent } from './svg-mouse-move-key'; +export { SvgMouseSpeedKeyComponent } from './svg-mouse-speed-key'; +export { SvgMouseScrollKeyComponent } from './svg-mouse-scroll-key'; export { SvgOneLineTextKeyComponent } from './svg-one-line-text-key'; export { SvgSingleIconKeyComponent } from './svg-single-icon-key'; export { SvgSwitchKeymapKeyComponent } from './svg-switch-keymap-key'; diff --git a/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html b/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html index 9bd97786..97b21435 100644 --- a/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html +++ b/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html @@ -43,4 +43,9 @@ [width]="width" [abbreviation]="labelSource"> + + + \ No newline at end of file diff --git a/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts b/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts index 74ccd9f7..b9f6079a 100644 --- a/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts +++ b/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts @@ -4,6 +4,7 @@ import { KeyAction, KeystrokeAction, LayerName, + MouseAction, PlayMacroAction, SwitchKeymapAction, SwitchLayerAction @@ -16,6 +17,7 @@ import { UhkConfigurationService } from '../../../../services/uhk-configuration. enum LabelTypes { KeystrokeKey, + MouseKey, OneLineText, TwoLineText, TextIcon, @@ -154,6 +156,9 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges { icon: this.mapperService.getIcon('macro'), text: uhkConfiguration.getMacro(keyAction.macroId).name }; + } else if (this.keyAction instanceof MouseAction) { + this.labelType = LabelTypes.MouseKey; + this.labelSource = this.keyAction; } else { this.labelSource = undefined; } diff --git a/src/components/svg/keys/svg-mouse-click-key/index.ts b/src/components/svg/keys/svg-mouse-click-key/index.ts new file mode 100644 index 00000000..b76afab2 --- /dev/null +++ b/src/components/svg/keys/svg-mouse-click-key/index.ts @@ -0,0 +1 @@ +export * from './svg-mouse-click-key'; diff --git a/src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.html b/src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.html new file mode 100644 index 00000000..e1c2e004 --- /dev/null +++ b/src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.html @@ -0,0 +1,16 @@ + + + + Click + + + {{ button }} + \ No newline at end of file diff --git a/src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.ts b/src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.ts new file mode 100644 index 00000000..095a4907 --- /dev/null +++ b/src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.ts @@ -0,0 +1,19 @@ +import { Component, Input, OnInit } from '@angular/core'; + +import { MapperService } from '../../../../services/mapper.service'; + +@Component({ + selector: 'g[svg-mouse-click-key]', + template: require('./svg-mouse-click-key.html') +}) +export class SvgMouseClickKeyComponent implements OnInit { + @Input() button: string; + + private icon: string; + + constructor(private mapper: MapperService) { + this.icon = this.mapper.getIcon('mouse'); + } + + ngOnInit() { } +} diff --git a/src/components/svg/keys/svg-mouse-key/index.ts b/src/components/svg/keys/svg-mouse-key/index.ts new file mode 100644 index 00000000..35d27af4 --- /dev/null +++ b/src/components/svg/keys/svg-mouse-key/index.ts @@ -0,0 +1 @@ +export * from './svg-mouse-key'; diff --git a/src/components/svg/keys/svg-mouse-key/svg-mouse-key.html b/src/components/svg/keys/svg-mouse-key/svg-mouse-key.html new file mode 100644 index 00000000..c9c0f3f1 --- /dev/null +++ b/src/components/svg/keys/svg-mouse-key/svg-mouse-key.html @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/components/svg/keys/svg-mouse-key/svg-mouse-key.ts b/src/components/svg/keys/svg-mouse-key/svg-mouse-key.ts new file mode 100644 index 00000000..a868b624 --- /dev/null +++ b/src/components/svg/keys/svg-mouse-key/svg-mouse-key.ts @@ -0,0 +1,74 @@ +import { Component, Input, OnChanges } from '@angular/core'; + +import { MouseAction, MouseActionParam } from '../../../../config-serializer/config-items/key-action'; + +@Component({ + selector: 'g[svg-mouse-key]', + template: require('./svg-mouse-key.html') +}) +export class SvgMouseKeyComponent implements OnChanges { + @Input() mouseAction: MouseAction; + private type: 'click' | 'scroll' | 'move' | 'speed'; + private param: any; + + constructor() { } + + ngOnChanges() { + switch (this.mouseAction.mouseAction) { + case MouseActionParam.leftClick: + this.type = 'click'; + this.param = 'Left'; + break; + case MouseActionParam.rightClick: + this.type = 'click'; + this.param = 'Right'; + break; + case MouseActionParam.middleClick: + this.type = 'click'; + this.param = 'Middle'; + break; + case MouseActionParam.scrollDown: + this.type = 'scroll'; + this.param = 'down'; + break; + case MouseActionParam.scrollLeft: + this.type = 'scroll'; + this.param = 'left'; + break; + case MouseActionParam.scrollRight: + this.type = 'scroll'; + this.param = 'right'; + break; + case MouseActionParam.scrollUp: + this.type = 'scroll'; + this.param = 'up'; + break; + case MouseActionParam.moveDown: + this.type = 'move'; + this.param = 'down'; + break; + case MouseActionParam.moveLeft: + this.type = 'move'; + this.param = 'left'; + break; + case MouseActionParam.moveRight: + this.type = 'move'; + this.param = 'right'; + break; + case MouseActionParam.moveUp: + this.type = 'move'; + this.param = 'up'; + break; + case MouseActionParam.accelerate: + this.type = 'speed'; + this.param = true; + break; + case MouseActionParam.decelerate: + this.type = 'speed'; + this.param = false; + break; + default: + break; + } + } +} diff --git a/src/components/svg/keys/svg-mouse-move-key/index.ts b/src/components/svg/keys/svg-mouse-move-key/index.ts new file mode 100644 index 00000000..a04594c0 --- /dev/null +++ b/src/components/svg/keys/svg-mouse-move-key/index.ts @@ -0,0 +1 @@ +export * from './svg-mouse-move-key'; diff --git a/src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.html b/src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.html new file mode 100644 index 00000000..ec6ae31a --- /dev/null +++ b/src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.html @@ -0,0 +1,9 @@ + + + Move + + \ No newline at end of file diff --git a/src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.ts b/src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.ts new file mode 100644 index 00000000..6fb6120a --- /dev/null +++ b/src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.ts @@ -0,0 +1,21 @@ +import { Component, Input, OnChanges } from '@angular/core'; + +import { MapperService } from '../../../../services/mapper.service'; + +@Component({ + selector: 'g[svg-mouse-move-key]', + template: require('./svg-mouse-move-key.html') +}) +export class SvgMouseMoveKeyComponent implements OnChanges { + @Input() direction: string; + + private mouseIcon: string; + private directionIcon: string; + + constructor(private mapper: MapperService) { } + + ngOnChanges() { + this.mouseIcon = this.mapper.getIcon('mouse'); + this.directionIcon = this.mapper.getIcon(`${this.direction}-arrow`); + } +} diff --git a/src/components/svg/keys/svg-mouse-scroll-key/index.ts b/src/components/svg/keys/svg-mouse-scroll-key/index.ts new file mode 100644 index 00000000..c48293d8 --- /dev/null +++ b/src/components/svg/keys/svg-mouse-scroll-key/index.ts @@ -0,0 +1 @@ +export * from './svg-mouse-scroll-key'; diff --git a/src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.html b/src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.html new file mode 100644 index 00000000..4ff7eac7 --- /dev/null +++ b/src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.html @@ -0,0 +1,9 @@ + + + Scroll + + \ No newline at end of file diff --git a/src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.ts b/src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.ts new file mode 100644 index 00000000..60da19ae --- /dev/null +++ b/src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.ts @@ -0,0 +1,21 @@ +import { Component, Input, OnChanges } from '@angular/core'; + +import { MapperService } from '../../../../services/mapper.service'; + +@Component({ + selector: 'g[svg-mouse-scroll-key]', + template: require('./svg-mouse-scroll-key.html') +}) +export class SvgMouseScrollKeyComponent implements OnChanges { + @Input() direction: string; + + private mouseIcon: string; + private directionIcon: string; + + constructor(private mapper: MapperService) { } + + ngOnChanges() { + this.mouseIcon = this.mapper.getIcon('mouse'); + this.directionIcon = this.mapper.getIcon(`scroll-${this.direction}`); + } +} diff --git a/src/components/svg/keys/svg-mouse-speed-key/index.ts b/src/components/svg/keys/svg-mouse-speed-key/index.ts new file mode 100644 index 00000000..f338ba0e --- /dev/null +++ b/src/components/svg/keys/svg-mouse-speed-key/index.ts @@ -0,0 +1 @@ +export * from './svg-mouse-speed-key'; diff --git a/src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.html b/src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.html new file mode 100644 index 00000000..e5d601be --- /dev/null +++ b/src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.html @@ -0,0 +1,16 @@ + + + + Speed + + + {{ sign }} + \ No newline at end of file diff --git a/src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.ts b/src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.ts new file mode 100644 index 00000000..dd247ed9 --- /dev/null +++ b/src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.ts @@ -0,0 +1,22 @@ +import { Component, Input, OnChanges } from '@angular/core'; + +import { MapperService } from '../../../../services/mapper.service'; + +@Component({ + selector: 'g[svg-mouse-speed-key]', + template: require('./svg-mouse-speed-key.html') +}) +export class SvgMouseSpeedKeyComponent implements OnChanges { + @Input() plus: boolean; + + private icon: string; + private sign: string; + + constructor(private mapper: MapperService) { + this.icon = this.mapper.getIcon('mouse'); + } + + ngOnChanges() { + this.sign = this.plus ? '+' : '-'; + } +} diff --git a/src/services/mapper.service.ts b/src/services/mapper.service.ts index b1c76e48..e444dfc6 100644 --- a/src/services/mapper.service.ts +++ b/src/services/mapper.service.ts @@ -147,6 +147,15 @@ export class MapperService { this.nameToFileName.set('shift', 'icon-kbd__default--modifier-shift'); this.nameToFileName.set('option', 'icon-kbd__default--modifier-option'); this.nameToFileName.set('command', 'icon-kbd__default--modifier-command'); + this.nameToFileName.set('mouse', 'icon-kbd__mouse'); + this.nameToFileName.set('left-arrow', 'icon-kbd__mod--arrow-left'); + this.nameToFileName.set('right-arrow', 'icon-kbd__mod--arrow-right'); + this.nameToFileName.set('down-arrow', 'icon-kbd__mod--arrow-down'); + this.nameToFileName.set('up-arrow', 'icon-kbd__mod--arrow-up'); + this.nameToFileName.set('scroll-left', 'icon-kbd__mouse--scroll-left'); + this.nameToFileName.set('scroll-right', 'icon-kbd__mouse--scroll-right'); + this.nameToFileName.set('scroll-down', 'icon-kbd__mouse--scroll-down'); + this.nameToFileName.set('scroll-up', 'icon-kbd__mouse--scroll-up'); } }