Add MouseAction rendering

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,

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

src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.html

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

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

src/components/svg/keys/svg-mouse-click-key/index.ts

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

src/components/svg/keys/svg-mouse-click-key/svg-mouse-click-key.html

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

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

src/components/svg/keys/svg-mouse-key/index.ts

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

src/components/svg/keys/svg-mouse-key/svg-mouse-key.html

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

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

src/components/svg/keys/svg-mouse-move-key/index.ts

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

src/components/svg/keys/svg-mouse-move-key/svg-mouse-move-key.html

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

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

src/components/svg/keys/svg-mouse-scroll-key/index.ts

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

src/components/svg/keys/svg-mouse-scroll-key/svg-mouse-scroll-key.html

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

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

src/components/svg/keys/svg-mouse-speed-key/index.ts

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

src/components/svg/keys/svg-mouse-speed-key/svg-mouse-speed-key.html

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

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

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