uhk/agent
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add MouseAction rendering

Browse Source
This commit is contained in:
Farkas József
2016-10-01 15:21:26 +02:00
parent c382418dbe
commit 58443cefe1
20 changed files with 252 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app.module.ts
View File

@@ -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,

5
src/components/svg/keys/index.ts
View File

@@ -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';

5
src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html
View File

@@ -43,4 +43,9 @@
[width]="width"
[abbreviation]="labelSource">
</svg:g>
<svg *ngSwitchCase="enumLabelTypes.MouseKey" [attr.viewBox]="'0 0 100 100'"
[attr.width]="width"
[attr.height]="height">
<svg:g svg-mouse-key [mouseAction]="labelSource"></svg:g>
</svg>
</svg:g>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

5
src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts
View File

@@ -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;
}

1
src/components/svg/keys/svg-mouse-click-key/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './svg-mouse-click-key';

16
src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.html Normal file
View File

@@ -0,0 +1,16 @@
<svg:use [attr.xlink:href]="icon" width="20" height="20" x="10" y="25">
</svg:use>
<svg:text
[attr.x]="60"
[attr.y]="0"
[attr.text-anchor]="'middle'"
[attr.font-size]="25">
<tspan dy="34"> Click </tspan>
</svg:text>
<svg:text
[attr.x]="50"
[attr.y]="0"
[attr.text-anchor]="'middle'"
[attr.font-size]="25">
<tspan dy="70"> {{ button }} </tspan>
</svg:text>
Side by Side

After

Width:  |  Height:  |  Size: 403 B

19
src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.ts Normal file
View File

@@ -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() { }
}

1
src/components/svg/keys/svg-mouse-key/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './svg-mouse-key';

6
src/components/svg/keys/svg-mouse-key/svg-mouse-key.html Normal file
View File

@@ -0,0 +1,6 @@
<svg:g [ngSwitch]="type">
<svg:g *ngSwitchCase="'click'" svg-mouse-click-key [button]="param"></svg:g>
<svg:g *ngSwitchCase="'move'" svg-mouse-move-key [direction]="param"></svg:g>
<svg:g *ngSwitchCase="'scroll'" svg-mouse-scroll-key [direction]="param"></svg:g>
<svg:g *ngSwitchCase="'speed'" svg-mouse-speed-key [plus]="param"></svg:g>
</svg:g>
Side by Side

After

Width:  |  Height:  |  Size: 378 B

74
src/components/svg/keys/svg-mouse-key/svg-mouse-key.ts Normal file
View File

@@ -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;
}
}
}

1
src/components/svg/keys/svg-mouse-move-key/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './svg-mouse-move-key';

9
src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.html Normal file
View File

@@ -0,0 +1,9 @@
<svg:use [attr.xlink:href]="mouseIcon" width="20" height="20" x="8" y="25"></svg:use>
<svg:text
[attr.x]="60"
[attr.y]="0"
[attr.text-anchor]="'middle'"
[attr.font-size]="24">
<tspan dy="34"> Move </tspan>
</svg:text>
<svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55"></svg:use>
Side by Side

After

Width:  |  Height:  |  Size: 332 B

21
src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.ts Normal file
View File

@@ -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`);
}
}

1
src/components/svg/keys/svg-mouse-scroll-key/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './svg-mouse-scroll-key';

9
src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.html Normal file
View File

@@ -0,0 +1,9 @@
<svg:use [attr.xlink:href]="mouseIcon" width="20" height="20" x="8" y="25"></svg:use>
<svg:text
[attr.x]="60"
[attr.y]="0"
[attr.text-anchor]="'middle'"
[attr.font-size]="24">
<tspan dy="34"> Scroll </tspan>
</svg:text>
<svg:use [attr.xlink:href]="directionIcon" width="30" height="30" x="35" y="55"></svg:use>
Side by Side

After

Width:  |  Height:  |  Size: 334 B

21
src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.ts Normal file
View File

@@ -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}`);
}
}

1
src/components/svg/keys/svg-mouse-speed-key/index.ts Normal file
View File

@@ -0,0 +1 @@
export * from './svg-mouse-speed-key';

16
src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.html Normal file
View File

@@ -0,0 +1,16 @@
<svg:use [attr.xlink:href]="icon" width="20" height="20" x="4" y="25">
</svg:use>
<svg:text
[attr.x]="60"
[attr.y]="0"
[attr.text-anchor]="'middle'"
[attr.font-size]="25">
<tspan dy="34"> Speed </tspan>
</svg:text>
<svg:text
[attr.x]="50"
[attr.y]="0"
[attr.text-anchor]="'middle'"
[attr.font-size]="30">
<tspan dy="70"> {{ sign }} </tspan>
</svg:text>
Side by Side

After

Width:  |  Height:  |  Size: 400 B

22
src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.ts Normal file
View File

@@ -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 ? '+' : '-';
}
}

9
src/services/mapper.service.ts
View File

@@ -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');
}
}