Macro editor (#87)
This commit is contained in:
Mikko Lakomaa
committed by
József Farkas
József Farkas
parent
8a76da8df5
commit
fbb4a1cc49
@@ -42,7 +42,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" [ngSwitch]="activeTab">
|
||||
<keypress-tab #tab *ngSwitchCase="TabName.Keypress" class="popover-content" [defaultKeyAction]="defaultKeyAction"></keypress-tab>
|
||||
<keypress-tab #tab *ngSwitchCase="TabName.Keypress" class="popover-content" [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="true"></keypress-tab>
|
||||
<layer-tab #tab *ngSwitchCase="TabName.Layer" class="popover-content" [defaultKeyAction]="defaultKeyAction"></layer-tab>
|
||||
<mouse-tab #tab *ngSwitchCase="TabName.Mouse" class="popover-content" [defaultKeyAction]="defaultKeyAction"></mouse-tab>
|
||||
<macro-tab #tab *ngSwitchCase="TabName.Macro" class="popover-content" [defaultKeyAction]="defaultKeyAction"></macro-tab>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="long-press-container">
|
||||
<div class="long-press-container" *ngIf="longPressEnabled">
|
||||
<b class="setting-label">Long press action:</b>
|
||||
<select2 #longPressSelect [data]="longPressGroups" [value]="selectedLongPressIndex.toString()" (valueChanged)="onLongpressChange($event)"
|
||||
[width]="140"></select2>
|
||||
|
||||
@@ -13,6 +13,7 @@ import {Tab} from '../tab';
|
||||
})
|
||||
export class KeypressTabComponent implements OnInit, Tab {
|
||||
@Input() defaultKeyAction: KeyAction;
|
||||
@Input() longPressEnabled: boolean;
|
||||
|
||||
private leftModifiers: string[];
|
||||
private rightModifiers: string[];
|
||||
|
||||
@@ -1,2 +1 @@
|
||||
export * from './macro-item.component';
|
||||
export * from './macro-tab.component';
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
<icon *ngIf="moveable" name="option-vertical"></icon>
|
||||
<icon [name]="iconName"></icon>
|
||||
<div> {{ title }} </div>
|
||||
<icon *ngIf="deletable" name="trash"></icon>
|
||||
<icon *ngIf="editable" name="pencil"></icon>
|
||||
@@ -1,13 +0,0 @@
|
||||
:host {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
icon {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,102 +0,0 @@
|
||||
/// <reference path="../../../../config-serializer/Function.d.ts" />
|
||||
|
||||
import { Component, Input, OnChanges, OnInit } from '@angular/core';
|
||||
|
||||
import {KeyModifiers} from '../../../../config-serializer/config-items/KeyModifiers';
|
||||
import {
|
||||
DelayMacroAction,
|
||||
KeyMacroAction,
|
||||
MacroAction,
|
||||
MoveMouseMacroAction,
|
||||
ScrollMouseMacroAction,
|
||||
TextMacroAction
|
||||
} from '../../../../config-serializer/config-items/macro-action';
|
||||
|
||||
import {MapperService} from '../../../../services/mapper.service';
|
||||
|
||||
@Component({
|
||||
selector: 'macro-item',
|
||||
template: require('./macro-item.component.html'),
|
||||
styles: [require('./macro-item.component.scss')]
|
||||
})
|
||||
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(private mapper: MapperService) { }
|
||||
|
||||
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 KeyMacroAction) {
|
||||
const keyMacroAction: KeyMacroAction = <KeyMacroAction>this.macroAction;
|
||||
this.title += 'KeyMacroAction: ';
|
||||
if (keyMacroAction.isPressAction()) {
|
||||
this.title = 'Press';
|
||||
} else if (keyMacroAction.isHoldAction()) {
|
||||
this.title = 'Hold';
|
||||
} else {
|
||||
this.title = 'Release';
|
||||
}
|
||||
if (keyMacroAction.hasScancode()) {
|
||||
this.title += ' ' + this.mapper.scanCodeToText(keyMacroAction.scancode).join(' ');
|
||||
}
|
||||
this.iconName = 'square';
|
||||
|
||||
for (let i = KeyModifiers.leftCtrl; i !== KeyModifiers.rightCtrl; i <<= 1) {
|
||||
if (keyMacroAction.isModifierActive(i)) {
|
||||
this.title += ' ' + KeyModifiers[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
// TODO: finish for all MacroAction
|
||||
}
|
||||
|
||||
}
|
||||
@@ -2,10 +2,12 @@
|
||||
<b> Play macro: </b>
|
||||
<select2 [data]="macroOptions" [value]="macroOptions[selectedMacroIndex + 1].id" (valueChanged)="onChange($event)" [width]="'100%'"></select2>
|
||||
</div>
|
||||
<div class="macro-action-container">
|
||||
<div class="macro-action-container" [class.inactive]="selectedMacroIndex === -1">
|
||||
<template [ngIf]="selectedMacroIndex >= 0">
|
||||
<div class="list-group">
|
||||
<macro-item *ngFor="let macroAction of macros[selectedMacroIndex].macroActions.elements"
|
||||
[macroAction]="macroAction">
|
||||
</macro-item>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -25,22 +25,16 @@
|
||||
margin: 20px 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
macro-item {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
margin-bottom: -1px;
|
||||
&.inactive {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
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;
|
||||
.list-group {
|
||||
margin-bottom: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import {Component, Input, OnInit} from '@angular/core';
|
||||
|
||||
import {KeyAction, MouseAction, MouseActionParam} from '../../../../config-serializer/config-items/key-action';
|
||||
|
||||
import {Tab} from '../tab';
|
||||
|
||||
@Component({
|
||||
|
||||
@@ -1,8 +1,12 @@
|
||||
<div [ngSwitch]="name">
|
||||
<span *ngSwitchCase="'option-vertical'" class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
|
||||
<i *ngSwitchCase="'square'" class="fa fa-square"></i>
|
||||
<i *ngSwitchCase="'hand-pointer'" class="fa fa-hand-pointer-o"></i>
|
||||
<i *ngSwitchCase="'hand-rock'" class="fa fa-hand-rock-o"></i>
|
||||
<i *ngSwitchCase="'hand-paper'" class="fa fa-hand-paper-o"></i>
|
||||
<i *ngSwitchCase="'mouse-pointer'" class="fa fa-mouse-pointer"></i>
|
||||
<i *ngSwitchCase="'clock'" class="fa fa-clock-o"></i>
|
||||
<i *ngSwitchCase="'font'" class="fa fa-font"></i>
|
||||
<i *ngSwitchCase="'trash'" class="glyphicon glyphicon-trash action--trash"></i>
|
||||
<i *ngSwitchCase="'pencil'" class="glyphicon glyphicon-pencil action--edit"></i>
|
||||
<i *ngSwitchCase="'question-circle'" class ="fa fa-question-circle"></i>
|
||||
|
||||
@@ -2,3 +2,21 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.action {
|
||||
|
||||
&--edit {
|
||||
&:hover {
|
||||
color: #337ab7;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&--trash {
|
||||
&:hover {
|
||||
color: #d9534f;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user