refactore: create feature modules (#387)
* add @angular/cli to the project * increase nodejs version -> 8.2.1 * add lerna * merge web and shared module * move electron module into packages as uhk-agent Electron agent functionality is not working * delete symlinker * convert private properties to public of component if used in html * revert uhk-message.component * fix component path * fix the correct name of the uhk-message.component.scss * building web and electron module * delete uhk-renderer package * handle device connect disconnect state * add privilege detection * fix set privilege functionality * turn back download keymap functionality * add bootstrap, select2 js and fix null pointer exception * turn back upload data to keyboard * fix send keymap * fix test-serializer * add missing package.json * merging * fix appveyor build * fix linting * turn back electron storage service * commit the missing electron-datastorage-repository * update node to 8.3.0 in .nvmrc and log node version in appveyor build * set exact version number in appveyor build * vertical align privilege and missing device components * set back node version to 8 in appveyor * move node-usb dependency from usb dir to root maybe it is fix the appveyor build * revert usb to root * fix electron builder script * fix electron builder script * turn off electron devtools * remove CTRL+U functionality * fix CTRL+o * fix lint error * turnoff store freeze * start process when got `Error: EPERM: operation not permitted` error * move files from root usb dir -> packages/usb
This commit is contained in:
Róbert Kiss
committed by
László Monda
László Monda
parent
97770f67c0
commit
0f558e4132
@@ -0,0 +1 @@
|
||||
export { MacroItemComponent } from './macro-item.component';
|
||||
@@ -0,0 +1,17 @@
|
||||
<div class="list-group-item action--item" [class.is-editing]="editing">
|
||||
<span *ngIf="movable" class="glyphicon glyphicon-option-vertical action--movable" aria-hidden="true"></span>
|
||||
<div class="action--item--wrap" [class.pointer]="editable" (click)="editAction()">
|
||||
<icon [name]="iconName"></icon>
|
||||
<div class="action--title">{{ title }}</div>
|
||||
<icon *ngIf="editable && macroAction && !editing" name="pencil"></icon>
|
||||
</div>
|
||||
<icon *ngIf="deletable" name="trash" (click)="deleteAction()"></icon>
|
||||
</div>
|
||||
<div class="list-group-item macro-action-editor__container"
|
||||
[@toggler]="((editable && editing) || newItem) ? 'active' : 'inactive'">
|
||||
<macro-action-editor
|
||||
[macroAction]="macroAction"
|
||||
(cancel)="cancelEdit()"
|
||||
(save)="saveEditedAction($event)">
|
||||
</macro-action-editor>
|
||||
</div>
|
||||
@@ -0,0 +1,86 @@
|
||||
@import '../../../../styles/variables';
|
||||
|
||||
:host {
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
|
||||
&.macro-item:first-of-type {
|
||||
.list-group-item {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.macro-item:last-of-type {
|
||||
.list-group-item {
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.gu-transit {
|
||||
opacity: 0.2;
|
||||
|
||||
.list-group-item {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action {
|
||||
&--item {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
|
||||
icon {
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&.is-editing {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
&--wrap {
|
||||
justify-content: space-between;
|
||||
|
||||
&.pointer {
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: $icon-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--title {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&--movable {
|
||||
&:hover {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.macro-action-editor__container {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -0,0 +1,206 @@
|
||||
import { Component, Input, Output, EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
|
||||
import { animate, state, style, transition, trigger } from '@angular/animations';
|
||||
|
||||
import { KeyModifiers } from '../../../config-serializer/config-items/key-modifiers';
|
||||
import {
|
||||
DelayMacroAction,
|
||||
KeyMacroAction,
|
||||
MacroAction,
|
||||
MouseButtonMacroAction,
|
||||
MoveMouseMacroAction,
|
||||
ScrollMouseMacroAction,
|
||||
TextMacroAction
|
||||
} from '../../../config-serializer/config-items/macro-action';
|
||||
|
||||
import { MapperService } from '../../../services/mapper.service';
|
||||
|
||||
@Component({
|
||||
animations: [
|
||||
trigger('toggler', [
|
||||
state('inactive', style({
|
||||
height: '0px'
|
||||
})),
|
||||
state('active', style({
|
||||
height: '*'
|
||||
})),
|
||||
transition('inactive <=> active', animate('500ms ease-out'))
|
||||
])
|
||||
],
|
||||
selector: 'macro-item',
|
||||
templateUrl: './macro-item.component.html',
|
||||
styleUrls: ['./macro-item.component.scss'],
|
||||
host: { 'class': 'macro-item' }
|
||||
})
|
||||
export class MacroItemComponent implements OnInit, OnChanges {
|
||||
@Input() macroAction: MacroAction;
|
||||
@Input() editable: boolean;
|
||||
@Input() deletable: boolean;
|
||||
@Input() movable: boolean;
|
||||
|
||||
@Output() save = new EventEmitter<MacroAction>();
|
||||
@Output() cancel = new EventEmitter<void>();
|
||||
@Output() edit = new EventEmitter<void>();
|
||||
@Output() delete = new EventEmitter<void>();
|
||||
|
||||
title: string;
|
||||
iconName: string;
|
||||
editing: boolean;
|
||||
newItem: boolean = false;
|
||||
|
||||
constructor(private mapper: MapperService) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.updateView();
|
||||
if (!this.macroAction) {
|
||||
this.editing = true;
|
||||
this.newItem = true;
|
||||
}
|
||||
}
|
||||
|
||||
ngOnChanges(changes: SimpleChanges) {
|
||||
if (changes['macroAction']) {
|
||||
this.updateView();
|
||||
}
|
||||
}
|
||||
|
||||
saveEditedAction(editedAction: MacroAction): void {
|
||||
this.macroAction = editedAction;
|
||||
this.editing = false;
|
||||
this.updateView();
|
||||
this.save.emit(editedAction);
|
||||
}
|
||||
|
||||
editAction(): void {
|
||||
if (!this.editable || this.editing) {
|
||||
this.cancelEdit();
|
||||
return;
|
||||
}
|
||||
|
||||
this.editing = true;
|
||||
this.edit.emit();
|
||||
}
|
||||
|
||||
cancelEdit(): void {
|
||||
this.editing = false;
|
||||
this.cancel.emit();
|
||||
}
|
||||
|
||||
deleteAction(): void {
|
||||
this.delete.emit();
|
||||
}
|
||||
|
||||
private updateView(): void {
|
||||
if (!this.macroAction) {
|
||||
this.title = 'New macro action';
|
||||
} else if (this.macroAction instanceof DelayMacroAction) {
|
||||
// Delay
|
||||
this.iconName = 'clock';
|
||||
const action: DelayMacroAction = this.macroAction as DelayMacroAction;
|
||||
const delay = action.delay > 0 ? action.delay / 1000 : 0;
|
||||
this.title = `Delay of ${delay}s`;
|
||||
} else if (this.macroAction instanceof TextMacroAction) {
|
||||
// Write text
|
||||
const action: TextMacroAction = this.macroAction as TextMacroAction;
|
||||
this.iconName = 'font';
|
||||
this.title = `Write text: ${action.text}`;
|
||||
} else if (this.macroAction instanceof KeyMacroAction) {
|
||||
// Key pressed/held/released
|
||||
const action: KeyMacroAction = this.macroAction as KeyMacroAction;
|
||||
this.setKeyActionContent(action);
|
||||
} else if (this.macroAction instanceof MouseButtonMacroAction) {
|
||||
// Mouse button clicked/held/released
|
||||
const action: MouseButtonMacroAction = this.macroAction as MouseButtonMacroAction;
|
||||
this.setMouseButtonActionContent(action);
|
||||
} else if (this.macroAction instanceof MoveMouseMacroAction || this.macroAction instanceof ScrollMouseMacroAction) {
|
||||
// Mouse moved or scrolled
|
||||
this.setMouseMoveScrollActionContent(this.macroAction);
|
||||
} else {
|
||||
this.title = this.macroAction.constructor.name;
|
||||
}
|
||||
}
|
||||
|
||||
private setKeyActionContent(action: KeyMacroAction): void {
|
||||
if (!action.hasScancode() && !action.hasModifiers()) {
|
||||
this.title = 'Invalid keypress';
|
||||
return;
|
||||
}
|
||||
|
||||
if (action.isPressAction()) {
|
||||
// Press key
|
||||
this.iconName = 'hand-pointer';
|
||||
this.title = 'Press key: ';
|
||||
} else if (action.isHoldAction()) {
|
||||
// Hold key
|
||||
this.iconName = 'hand-rock';
|
||||
this.title = 'Hold key: ';
|
||||
} else if (action.isReleaseAction()) {
|
||||
// Release key
|
||||
this.iconName = 'hand-paper';
|
||||
this.title = 'Release key: ';
|
||||
}
|
||||
|
||||
if (action.hasScancode()) {
|
||||
const scancode: string = (this.mapper.scanCodeToText(action.scancode, action.type) || ['Unknown']).join(' ');
|
||||
if (scancode) {
|
||||
this.title += scancode;
|
||||
}
|
||||
}
|
||||
|
||||
if (action.hasModifiers()) {
|
||||
// Press/hold/release modifiers
|
||||
for (let i = KeyModifiers.leftCtrl; i <= KeyModifiers.rightGui; i <<= 1) {
|
||||
if (action.isModifierActive(i)) {
|
||||
this.title += ' ' + KeyModifiers[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private setMouseMoveScrollActionContent(action: MacroAction): void {
|
||||
let typedAction: any;
|
||||
if (action instanceof MoveMouseMacroAction) {
|
||||
// Move mouse pointer
|
||||
this.iconName = 'mouse-pointer';
|
||||
this.title = 'Move pointer';
|
||||
typedAction = this.macroAction as MoveMouseMacroAction;
|
||||
} else {
|
||||
// Scroll mouse
|
||||
this.iconName = 'mouse-pointer';
|
||||
this.title = 'Scroll';
|
||||
typedAction = this.macroAction as ScrollMouseMacroAction;
|
||||
}
|
||||
|
||||
let needAnd: boolean;
|
||||
if (Math.abs(typedAction.x) !== 0) {
|
||||
this.title += ` by ${Math.abs(typedAction.x)}px ${typedAction.x > 0 ? 'left' : 'right'}`;
|
||||
needAnd = true;
|
||||
}
|
||||
if (Math.abs(typedAction.y) !== 0) {
|
||||
this.title += ` ${needAnd ? 'and' : 'by'} ${Math.abs(typedAction.y)}px ${typedAction.y > 0 ? 'down' : 'up'}`;
|
||||
}
|
||||
}
|
||||
|
||||
private setMouseButtonActionContent(action: MouseButtonMacroAction): void {
|
||||
// Press/hold/release mouse buttons
|
||||
if (action.isOnlyPressAction()) {
|
||||
this.iconName = 'mouse-pointer';
|
||||
this.title = 'Click mouse button: ';
|
||||
} else if (action.isOnlyHoldAction()) {
|
||||
this.iconName = 'hand-rock';
|
||||
this.title = 'Hold mouse button: ';
|
||||
} else if (action.isOnlyReleaseAction()) {
|
||||
this.iconName = 'hand-paper';
|
||||
this.title = 'Release mouse button: ';
|
||||
}
|
||||
|
||||
const buttonLabels: string[] = ['Left', 'Middle', 'Right'];
|
||||
const selectedButtons: boolean[] = action.getMouseButtons();
|
||||
const selectedButtonLabels: string[] = [];
|
||||
selectedButtons.forEach((isSelected, idx) => {
|
||||
if (isSelected && buttonLabels[idx]) {
|
||||
selectedButtonLabels.push(buttonLabels[idx]);
|
||||
}
|
||||
});
|
||||
this.title += selectedButtonLabels.join(', ');
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user