diff --git a/src/components/keymap/keymap.component.ts b/src/components/keymap/keymap.component.ts index c86a5e79..600ce041 100644 --- a/src/components/keymap/keymap.component.ts +++ b/src/components/keymap/keymap.component.ts @@ -1,7 +1,7 @@ import { Component, ViewChildren, QueryList, ElementRef, OnInit, AfterViewInit, Renderer } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; -import { SvgKeyboardPopoverComponent } from '../svg-keyboard-popover.component'; +import { SvgKeyboardPopoverComponent } from '../svg/popover/svg-keyboard-popover.component'; import { Layers } from '../../../config-serializer/config-items/Layers'; import { UhkConfigurationService } from '../../services/uhk-configuration.service'; import { Keymap } from '../../../config-serializer/config-items/Keymap'; diff --git a/src/components/keys/svg-icon-text-key.component.ts b/src/components/keys/svg-icon-text-key.component.ts deleted file mode 100644 index d20fc038..00000000 --- a/src/components/keys/svg-icon-text-key.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'g[svg-icon-text-key]', - template: - ` - - - - {{ text }} - - ` -}) -export class SvgIconTextKeyComponent implements OnInit { - @Input() width: number; - @Input() height: number; - @Input() icon: string; - @Input() text: string; - - constructor() { } - - ngOnInit() { } - -} diff --git a/src/components/keys/svg-one-line-text-key.component.ts b/src/components/keys/svg-one-line-text-key.component.ts deleted file mode 100644 index 78f00438..00000000 --- a/src/components/keys/svg-one-line-text-key.component.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'g[svg-one-line-text-key]', - template: - ` - - {{ text }} - - ` -}) -export class SvgOneLineTextKeyComponent implements OnInit { - @Input() height: number; - @Input() width: number; - @Input() text: string; - - constructor() { } - - ngOnInit() { } - -} diff --git a/src/components/keys/svg-switch-keymap-key.component.ts b/src/components/keys/svg-switch-keymap-key.component.ts deleted file mode 100644 index e8169ed0..00000000 --- a/src/components/keys/svg-switch-keymap-key.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; - -import {MapperService} from '../../services/mapper.service'; - -@Component({ - moduleId: module.id, - selector: 'g[svg-switch-keymap-key]', - template: - ` - - - - {{ abbreviation }} - - ` -}) -export class SvgSwitchKeymapKeyComponent implements OnInit { - @Input() width: number; - @Input() height: number; - @Input() abbreviation: string; - private icon: string; - - constructor(private mapperService: MapperService) { } - - ngOnInit() { - this.icon = this.mapperService.getIcon('switch-keymap'); - } - -} diff --git a/src/components/keys/svg-text-icon-key.component.ts b/src/components/keys/svg-text-icon-key.component.ts deleted file mode 100644 index b37a3553..00000000 --- a/src/components/keys/svg-text-icon-key.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'g[svg-text-icon-key]', - template: - ` - - {{ text }} - - - - ` -}) -export class SvgTextIconKeyComponent implements OnInit { - @Input() width: number; - @Input() height: number; - @Input() text: string; - @Input() icon: string; - - constructor() { } - - ngOnInit() { } - -} diff --git a/src/components/keys/svg-two-line-text-key.component.ts b/src/components/keys/svg-two-line-text-key.component.ts deleted file mode 100644 index e6a8315b..00000000 --- a/src/components/keys/svg-two-line-text-key.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'g[svg-two-line-text-key]', - template: - ` - - {{ text }} - - ` -}) -export class SvgTwoLineTextKeyComponent implements OnInit { - @Input() height: number; - @Input() width: number; - @Input() texts: string[]; - - constructor() { } - - ngOnInit() { } - -} diff --git a/src/components/popover/popover.component.html b/src/components/popover/popover.component.html new file mode 100644 index 00000000..ed3d74a5 --- /dev/null +++ b/src/components/popover/popover.component.html @@ -0,0 +1,58 @@ +
+
+
+ +
+
+
+ + + + + + +
+
+
+ + +
+
+
\ No newline at end of file diff --git a/src/components/popover/popover.component.ts b/src/components/popover/popover.component.ts index e0edce8b..3abb700f 100644 --- a/src/components/popover/popover.component.ts +++ b/src/components/popover/popover.component.ts @@ -16,79 +16,19 @@ import {NgSwitch, NgSwitchCase} from '@angular/common'; import {KeyAction} from '../../../config-serializer/config-items/KeyAction'; -import {KeypressTabComponent} from './tab/keypress-tab.component'; -import {LayerTabComponent} from './tab/layer-tab.component'; -import {MouseTabComponent} from './tab/mouse-tab.component'; -import {MacroTabComponent} from './tab/macro-tab.component'; -import {KeymapTabComponent} from './tab/keymap-tab.component'; -import {NoneTabComponent} from './tab/none-tab.component'; +import {KeypressTabComponent} from './tab/keypress/keypress-tab.component'; +import {LayerTabComponent} from './tab/layer/layer-tab.component'; +import {MouseTabComponent} from './tab/mouse/mouse-tab.component'; +import {MacroTabComponent} from './tab/macro/macro-tab.component'; +import {KeymapTabComponent} from './tab/keymap/keymap-tab.component'; +import {NoneTabComponent} from './tab/none/none-tab.component'; import {KeyActionSaver} from './key-action-saver'; @Component({ moduleId: module.id, selector: 'popover', - template: - ` -
-
-
- -
-
-
- - - - - - -
-
-
- - -
-
-
- `, + template: require('./popover.component.html'), styles: [require('./popover.component.scss')], host: { 'class': 'popover' }, directives: diff --git a/src/components/popover/tab/keymap/keymap-tab.component.html b/src/components/popover/tab/keymap/keymap-tab.component.html new file mode 100644 index 00000000..dc60b6e7 --- /dev/null +++ b/src/components/popover/tab/keymap/keymap-tab.component.html @@ -0,0 +1,12 @@ +
+ Switch to keymap: + +
+
+
+ +
+ + +
\ No newline at end of file diff --git a/src/components/popover/tab/keymap-tab.component.scss b/src/components/popover/tab/keymap/keymap-tab.component.scss similarity index 100% rename from src/components/popover/tab/keymap-tab.component.scss rename to src/components/popover/tab/keymap/keymap-tab.component.scss diff --git a/src/components/popover/tab/keymap-tab.component.ts b/src/components/popover/tab/keymap/keymap-tab.component.ts similarity index 65% rename from src/components/popover/tab/keymap-tab.component.ts rename to src/components/popover/tab/keymap/keymap-tab.component.ts index 90b06242..b623201f 100644 --- a/src/components/popover/tab/keymap-tab.component.ts +++ b/src/components/popover/tab/keymap/keymap-tab.component.ts @@ -1,10 +1,10 @@ import { Component, OnInit } from '@angular/core'; -import {UhkConfigurationService} from '../../../services/uhk-configuration.service'; -import {Keymap} from '../../../../config-serializer/config-items/Keymap'; -import {SvgKeyboardComponent} from '../../svg-keyboard.component'; -import {KeyActionSaver} from '../key-action-saver'; -import {SwitchKeymapAction} from '../../../../config-serializer/config-items/SwitchKeymapAction'; +import {UhkConfigurationService} from '../../../../services/uhk-configuration.service'; +import {Keymap} from '../../../../../config-serializer/config-items/Keymap'; +import {SvgKeyboardComponent} from '../../../svg/keyboard/svg-keyboard.component'; +import {KeyActionSaver} from '../../key-action-saver'; +import {SwitchKeymapAction} from '../../../../../config-serializer/config-items/SwitchKeymapAction'; import {OptionData} from 'ng2-select2/dist/select2'; import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; @@ -12,21 +12,7 @@ import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; @Component({ moduleId: module.id, selector: 'keymap-tab', - template: - ` -
- Switch to keymap: - -
-
-
- -
- - -
- `, + template: require('./keymap-tab.component.html'), styles: [require('./keymap-tab.component.scss')], directives: [SvgKeyboardComponent, SELECT2_DIRECTIVES] }) diff --git a/src/components/popover/tab/keypress-tab.component.ts b/src/components/popover/tab/keypress-tab.component.ts deleted file mode 100644 index bc9c99da..00000000 --- a/src/components/popover/tab/keypress-tab.component.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -import { CaptureKeystrokeButtonComponent } from '../widgets/capture-keystroke-button.component'; - -import { KeyAction } from '../../../../config-serializer/config-items/KeyAction'; -import { KeystrokeAction } from '../../../../config-serializer/config-items/KeystrokeAction'; -import { KeyActionSaver } from '../key-action-saver'; - -import {IconComponent} from '../widgets/icon.component'; - -import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; -import {OptionData} from 'ng2-select2/dist/select2'; - -@Component({ - moduleId: module.id, - selector: 'keypress-tab', - template: - ` -
- Scancode: - - -
-
- Modifiers: -
-
- -
-
- -
-
-
-
- Long press action: - - -
- `, - styles: [require('./keypress-tab.component.scss')], - directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES] -}) -export class KeypressTabComponent implements OnInit, KeyActionSaver { - private leftModifiers: string[]; - private rightModifiers: string[]; - - private leftModifierSelects: boolean[]; - private rightModifierSelects: boolean[]; - - private scanCodeGroups: Array; - private longPressGroups: Array; - - constructor() { - this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt']; - this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt']; - this.scanCodeGroups = require('json!./scancodes.json'); - this.longPressGroups = require('json!./longPress.json'); - } - - ngOnInit() { } - - getKeyAction(): KeystrokeAction { - return undefined; - } - - keyActionValid(): boolean { - return false; - } - - toKeyAction(): KeyAction { - return undefined; - } - - scanCodeTemplateResult: Function = (state: any) => { - if (!state.id) { - return state.text; - } - - if (state.additional && state.additional.explanation) { - return jQuery( - '' - + state.text - + ' ' - + state.additional.explanation - + '' - ); - } else { - return jQuery('' + state.text + ''); - } - } -} diff --git a/src/components/popover/tab/keypress/keypress-tab.component.html b/src/components/popover/tab/keypress/keypress-tab.component.html new file mode 100644 index 00000000..94b67e41 --- /dev/null +++ b/src/components/popover/tab/keypress/keypress-tab.component.html @@ -0,0 +1,25 @@ +
+ Scancode: + + +
+
+ Modifiers: +
+
+ +
+
+ +
+
+
+
+ Long press action: + + +
\ No newline at end of file diff --git a/src/components/popover/tab/keypress-tab.component.scss b/src/components/popover/tab/keypress/keypress-tab.component.scss similarity index 100% rename from src/components/popover/tab/keypress-tab.component.scss rename to src/components/popover/tab/keypress/keypress-tab.component.scss diff --git a/src/components/popover/tab/keypress/keypress-tab.component.ts b/src/components/popover/tab/keypress/keypress-tab.component.ts new file mode 100644 index 00000000..c5486862 --- /dev/null +++ b/src/components/popover/tab/keypress/keypress-tab.component.ts @@ -0,0 +1,69 @@ +import { Component, OnInit } from '@angular/core'; + +import { CaptureKeystrokeButtonComponent } from '../../widgets/capture-keystroke/capture-keystroke-button.component'; + +import { KeyAction } from '../../../../../config-serializer/config-items/KeyAction'; +import { KeystrokeAction } from '../../../../../config-serializer/config-items/KeystrokeAction'; +import { KeyActionSaver } from '../../key-action-saver'; + +import {IconComponent} from '../../widgets/icon/icon.component'; + +import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; +import {OptionData} from 'ng2-select2/dist/select2'; + +@Component({ + moduleId: module.id, + selector: 'keypress-tab', + template: require('./keypress-tab.component.html'), + styles: [require('./keypress-tab.component.scss')], + directives: [CaptureKeystrokeButtonComponent, IconComponent, SELECT2_DIRECTIVES] +}) +export class KeypressTabComponent implements OnInit, KeyActionSaver { + private leftModifiers: string[]; + private rightModifiers: string[]; + + private leftModifierSelects: boolean[]; + private rightModifierSelects: boolean[]; + + private scanCodeGroups: Array; + private longPressGroups: Array; + + constructor() { + this.leftModifiers = ['LShift', 'LCtrl', 'LSuper', 'LAlt']; + this.rightModifiers = ['RShift', 'RCtrl', 'RSuper', 'RAlt']; + this.scanCodeGroups = require('json!./scancodes.json'); + this.longPressGroups = require('json!./longPress.json'); + } + + ngOnInit() { } + + getKeyAction(): KeystrokeAction { + return undefined; + } + + keyActionValid(): boolean { + return false; + } + + toKeyAction(): KeyAction { + return undefined; + } + + scanCodeTemplateResult: Function = (state: any) => { + if (!state.id) { + return state.text; + } + + if (state.additional && state.additional.explanation) { + return jQuery( + '' + + state.text + + ' ' + + state.additional.explanation + + '' + ); + } else { + return jQuery('' + state.text + ''); + } + } +} diff --git a/src/components/popover/tab/longPress.json b/src/components/popover/tab/keypress/longPress.json similarity index 100% rename from src/components/popover/tab/longPress.json rename to src/components/popover/tab/keypress/longPress.json diff --git a/src/components/popover/tab/scancodes.json b/src/components/popover/tab/keypress/scancodes.json similarity index 100% rename from src/components/popover/tab/scancodes.json rename to src/components/popover/tab/keypress/scancodes.json diff --git a/src/components/popover/tab/layer/layer-tab.component.html b/src/components/popover/tab/layer/layer-tab.component.html new file mode 100644 index 00000000..21e7e8d4 --- /dev/null +++ b/src/components/popover/tab/layer/layer-tab.component.html @@ -0,0 +1,7 @@ + +the + + + + + \ No newline at end of file diff --git a/src/components/popover/tab/layer-tab.component.scss b/src/components/popover/tab/layer/layer-tab.component.scss similarity index 100% rename from src/components/popover/tab/layer-tab.component.scss rename to src/components/popover/tab/layer/layer-tab.component.scss diff --git a/src/components/popover/tab/layer-tab.component.ts b/src/components/popover/tab/layer/layer-tab.component.ts similarity index 73% rename from src/components/popover/tab/layer-tab.component.ts rename to src/components/popover/tab/layer/layer-tab.component.ts index 138b8633..2dcaa678 100644 --- a/src/components/popover/tab/layer-tab.component.ts +++ b/src/components/popover/tab/layer/layer-tab.component.ts @@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core'; import {NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; -import { LayerName, SwitchLayerAction } from '../../../../config-serializer/config-items/SwitchLayerAction'; -import { KeyActionSaver } from '../key-action-saver'; +import { LayerName, SwitchLayerAction } from '../../../../../config-serializer/config-items/SwitchLayerAction'; +import { KeyActionSaver } from '../../key-action-saver'; import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; import {OptionData} from 'ng2-select2/dist/select2'; @@ -11,16 +11,7 @@ import {OptionData} from 'ng2-select2/dist/select2'; @Component({ moduleId: module.id, selector: 'layer-tab', - template: - ` - - the - - - - - - `, + template: require('./layer-tab.component.html'), styles: [require('./layer-tab.component.scss')], directives: [SELECT2_DIRECTIVES, NgSwitch, NgSwitchCase, NgSwitchDefault] }) diff --git a/src/components/popover/tab/macro/macro-item.component.html b/src/components/popover/tab/macro/macro-item.component.html new file mode 100644 index 00000000..06ed0384 --- /dev/null +++ b/src/components/popover/tab/macro/macro-item.component.html @@ -0,0 +1,5 @@ + + +
{{ title }}
+ + \ No newline at end of file diff --git a/src/components/popover/tab/macro-item.component.scss b/src/components/popover/tab/macro/macro-item.component.scss similarity index 100% rename from src/components/popover/tab/macro-item.component.scss rename to src/components/popover/tab/macro/macro-item.component.scss diff --git a/src/components/popover/tab/macro-item.component.ts b/src/components/popover/tab/macro/macro-item.component.ts similarity index 70% rename from src/components/popover/tab/macro-item.component.ts rename to src/components/popover/tab/macro/macro-item.component.ts index 358aeeb3..4f4610c6 100644 --- a/src/components/popover/tab/macro-item.component.ts +++ b/src/components/popover/tab/macro/macro-item.component.ts @@ -1,35 +1,28 @@ import { Component, OnInit, OnChanges, Input } from '@angular/core'; -import {MacroAction} from '../../../../config-serializer/config-items/MacroAction'; -import {DelayMacroAction} from '../../../../config-serializer/config-items/DelayMacroAction'; -import {HoldKeyMacroAction} from '../../../../config-serializer/config-items/HoldKeyMacroAction'; -import {HoldModifiersMacroAction} from '../../../../config-serializer/config-items/HoldModifiersMacroAction'; -import {HoldMouseButtonsMacroAction} from '../../../../config-serializer/config-items/HoldMouseButtonsMacroAction'; -import {MoveMouseMacroAction} from '../../../../config-serializer/config-items/MoveMouseMacroAction'; -import {PressKeyMacroAction} from '../../../../config-serializer/config-items/PressKeyMacroAction'; -import {PressModifiersMacroAction} from '../../../../config-serializer/config-items/PressModifiersMacroAction'; -import {PressMouseButtonsMacroAction} from '../../../../config-serializer/config-items/PressMouseButtonsMacroAction'; -import {ReleaseKeyMacroAction} from '../../../../config-serializer/config-items/ReleaseKeyMacroAction'; -import {ReleaseModifiersMacroAction} from '../../../../config-serializer/config-items/ReleaseModifiersMacroAction'; -import {ReleaseMouseButtonsMacroAction} from '../../../../config-serializer/config-items/ReleaseMouseButtonsMacroAction'; -import {ScrollMouseMacroAction} from '../../../../config-serializer/config-items/ScrollMouseMacroAction'; -import {TextMacroAction} from '../../../../config-serializer/config-items/TextMacroAction'; +import {MacroAction} from '../../../../../config-serializer/config-items/MacroAction'; +import {DelayMacroAction} from '../../../../../config-serializer/config-items/DelayMacroAction'; +import {HoldKeyMacroAction} from '../../../../../config-serializer/config-items/HoldKeyMacroAction'; +import {HoldModifiersMacroAction} from '../../../../../config-serializer/config-items/HoldModifiersMacroAction'; +import {HoldMouseButtonsMacroAction} from '../../../../../config-serializer/config-items/HoldMouseButtonsMacroAction'; +import {MoveMouseMacroAction} from '../../../../../config-serializer/config-items/MoveMouseMacroAction'; +import {PressKeyMacroAction} from '../../../../../config-serializer/config-items/PressKeyMacroAction'; +import {PressModifiersMacroAction} from '../../../../../config-serializer/config-items/PressModifiersMacroAction'; +import {PressMouseButtonsMacroAction} from '../../../../../config-serializer/config-items/PressMouseButtonsMacroAction'; +import {ReleaseKeyMacroAction} from '../../../../../config-serializer/config-items/ReleaseKeyMacroAction'; +import {ReleaseModifiersMacroAction} from '../../../../../config-serializer/config-items/ReleaseModifiersMacroAction'; +import {ReleaseMouseButtonsMacroAction} from '../../../../../config-serializer/config-items/ReleaseMouseButtonsMacroAction'; +import {ScrollMouseMacroAction} from '../../../../../config-serializer/config-items/ScrollMouseMacroAction'; +import {TextMacroAction} from '../../../../../config-serializer/config-items/TextMacroAction'; -import {IconComponent} from '../widgets/icon.component'; +import {IconComponent} from '../../widgets/icon/icon.component'; -import {KeyModifiers} from '../../../../config-serializer/config-items/KeyModifiers'; +import {KeyModifiers} from '../../../../../config-serializer/config-items/KeyModifiers'; @Component({ moduleId: module.id, selector: 'macro-item', - template: - ` - - -
{{ title }}
- - - `, + template: require('./macro-item.component.html'), styles: [require('./macro-item.component.scss')], directives: [IconComponent] }) diff --git a/src/components/popover/tab/macro/macro-tab.component.html b/src/components/popover/tab/macro/macro-tab.component.html new file mode 100644 index 00000000..b393d1ef --- /dev/null +++ b/src/components/popover/tab/macro/macro-tab.component.html @@ -0,0 +1,11 @@ +
+ Play macro: + +
+
+ +
\ No newline at end of file diff --git a/src/components/popover/tab/macro-tab.component.scss b/src/components/popover/tab/macro/macro-tab.component.scss similarity index 100% rename from src/components/popover/tab/macro-tab.component.scss rename to src/components/popover/tab/macro/macro-tab.component.scss diff --git a/src/components/popover/tab/macro-tab.component.ts b/src/components/popover/tab/macro/macro-tab.component.ts similarity index 67% rename from src/components/popover/tab/macro-tab.component.ts rename to src/components/popover/tab/macro/macro-tab.component.ts index 9440c5e6..68b3656a 100644 --- a/src/components/popover/tab/macro-tab.component.ts +++ b/src/components/popover/tab/macro/macro-tab.component.ts @@ -1,10 +1,10 @@ import { Component, OnInit } from '@angular/core'; -import { UhkConfigurationService } from '../../../services/uhk-configuration.service'; -import { Macro } from '../../../../config-serializer/config-items/Macro'; -import { PlayMacroAction } from '../../../../config-serializer/config-items/PlayMacroAction'; +import { UhkConfigurationService } from '../../../../services/uhk-configuration.service'; +import { Macro } from '../../../../../config-serializer/config-items/Macro'; +import { PlayMacroAction } from '../../../../../config-serializer/config-items/PlayMacroAction'; -import { KeyActionSaver } from '../key-action-saver'; +import { KeyActionSaver } from '../../key-action-saver'; import { MacroItemComponent } from './macro-item.component'; import {SELECT2_DIRECTIVES} from 'ng2-select2/dist/ng2-select2'; @@ -13,19 +13,7 @@ import {OptionData} from 'ng2-select2/dist/select2'; @Component({ moduleId: module.id, selector: 'macro-tab', - template: ` -
- Play macro: - -
-
- -
- `, + template: require('./macro-tab.component.html'), styles: [require('./macro-tab.component.scss')], directives: [MacroItemComponent, SELECT2_DIRECTIVES] }) diff --git a/src/components/popover/tab/mouse-tab.component.ts b/src/components/popover/tab/mouse-tab.component.ts deleted file mode 100644 index 32441399..00000000 --- a/src/components/popover/tab/mouse-tab.component.ts +++ /dev/null @@ -1,148 +0,0 @@ -import { Component, OnInit, Renderer} from '@angular/core'; -import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common'; - -import { KeyActionSaver } from '../key-action-saver'; -import {MouseAction, MouseActionParam} from '../../../../config-serializer/config-items/MouseAction'; - -@Component({ - moduleId: module.id, - selector: 'mouse-tab', - template: - ` -
- -
-
-
-
- -
-
- - - -
-
- -
-
-
-
- -
-
- - - -
-
- -
-
-
-
- - - -
-
-
-
-

Press this key along with mouse movement/scrolling to accelerate/decelerate the speed of the action.

-

You can set the multiplier in link to setting.

-
-
- - -
-
-
-
-
- `, - styles: [require('./mouse-tab.component.scss')], - directives: [NgSwitch, NgSwitchCase, NgSwitchDefault] -}) -export class MouseTabComponent implements OnInit, KeyActionSaver { - private mouseActionParam: MouseActionParam; - private selectedIndex: number; - private selectedButton: HTMLButtonElement; - private MouseActionParam = MouseActionParam; - - constructor(private renderer: Renderer) { - this.selectedIndex = 0; - } - - ngOnInit() { } - - keyActionValid(): boolean { - return !!this.mouseActionParam; - } - - toKeyAction(): MouseAction { - if (!this.keyActionValid()) { - throw new Error('KeyAction is not valid. No selected mouse action!'); - } - let mouseAction: MouseAction = new MouseAction(); - mouseAction.mouseAction = this.mouseActionParam; - return mouseAction; - } - - changePage(index: number) { - if (index < -1 || index > 3) { - console.error(`Invalid index error: ${index}`); - return; - } - this.selectedIndex = index; - this.mouseActionParam = undefined; - this.selectedButton = undefined; - } - - onMouseActionClick(target: HTMLButtonElement, mouseActionParam: MouseActionParam) { - if (this.selectedButton) { - this.renderer.setElementClass(this.selectedButton, 'btn-primary', false); - } - this.selectedButton = target; - this.renderer.setElementClass(target, 'btn-primary', true); - this.mouseActionParam = mouseActionParam; - } - -} diff --git a/src/components/popover/tab/mouse/mouse-tab.component.html b/src/components/popover/tab/mouse/mouse-tab.component.html new file mode 100644 index 00000000..35d94faf --- /dev/null +++ b/src/components/popover/tab/mouse/mouse-tab.component.html @@ -0,0 +1,88 @@ +
+ +
+
+
+
+ +
+
+ + + +
+
+ +
+
+
+
+ +
+
+ + + +
+
+ +
+
+
+
+ + + +
+
+
+
+

Press this key along with mouse movement/scrolling to accelerate/decelerate the speed of the action.

+

You can set the multiplier in link to setting.

+
+
+ + +
+
+
+
+
\ No newline at end of file diff --git a/src/components/popover/tab/mouse-tab.component.scss b/src/components/popover/tab/mouse/mouse-tab.component.scss similarity index 100% rename from src/components/popover/tab/mouse-tab.component.scss rename to src/components/popover/tab/mouse/mouse-tab.component.scss diff --git a/src/components/popover/tab/mouse/mouse-tab.component.ts b/src/components/popover/tab/mouse/mouse-tab.component.ts new file mode 100644 index 00000000..0e8b1264 --- /dev/null +++ b/src/components/popover/tab/mouse/mouse-tab.component.ts @@ -0,0 +1,58 @@ +import { Component, OnInit, Renderer} from '@angular/core'; +import {NgSwitch, NgSwitchCase, NgSwitchDefault} from '@angular/common'; + +import { KeyActionSaver } from '../../key-action-saver'; +import {MouseAction, MouseActionParam} from '../../../../../config-serializer/config-items/MouseAction'; + +@Component({ + moduleId: module.id, + selector: 'mouse-tab', + template: require('./mouse-tab.component.html'), + styles: [require('./mouse-tab.component.scss')], + directives: [NgSwitch, NgSwitchCase, NgSwitchDefault] +}) +export class MouseTabComponent implements OnInit, KeyActionSaver { + private mouseActionParam: MouseActionParam; + private selectedIndex: number; + private selectedButton: HTMLButtonElement; + private MouseActionParam = MouseActionParam; + + constructor(private renderer: Renderer) { + this.selectedIndex = 0; + } + + ngOnInit() { } + + keyActionValid(): boolean { + return !!this.mouseActionParam; + } + + toKeyAction(): MouseAction { + if (!this.keyActionValid()) { + throw new Error('KeyAction is not valid. No selected mouse action!'); + } + let mouseAction: MouseAction = new MouseAction(); + mouseAction.mouseAction = this.mouseActionParam; + return mouseAction; + } + + changePage(index: number) { + if (index < -1 || index > 3) { + console.error(`Invalid index error: ${index}`); + return; + } + this.selectedIndex = index; + this.mouseActionParam = undefined; + this.selectedButton = undefined; + } + + onMouseActionClick(target: HTMLButtonElement, mouseActionParam: MouseActionParam) { + if (this.selectedButton) { + this.renderer.setElementClass(this.selectedButton, 'btn-primary', false); + } + this.selectedButton = target; + this.renderer.setElementClass(target, 'btn-primary', true); + this.mouseActionParam = mouseActionParam; + } + +} diff --git a/src/components/popover/tab/none/none-tab.component.html b/src/components/popover/tab/none/none-tab.component.html new file mode 100644 index 00000000..6ab6d50d --- /dev/null +++ b/src/components/popover/tab/none/none-tab.component.html @@ -0,0 +1 @@ +This key is unassigned and has no functionality. \ No newline at end of file diff --git a/src/components/popover/tab/none/none-tab.component.scss b/src/components/popover/tab/none/none-tab.component.scss new file mode 100644 index 00000000..514b94f5 --- /dev/null +++ b/src/components/popover/tab/none/none-tab.component.scss @@ -0,0 +1,5 @@ +:host { + display: flex; + justify-content: center; + padding: 2rem 0; +} diff --git a/src/components/popover/tab/none-tab.component.ts b/src/components/popover/tab/none/none-tab.component.ts similarity index 50% rename from src/components/popover/tab/none-tab.component.ts rename to src/components/popover/tab/none/none-tab.component.ts index 2f8895c9..a9c2d725 100644 --- a/src/components/popover/tab/none-tab.component.ts +++ b/src/components/popover/tab/none/none-tab.component.ts @@ -1,20 +1,13 @@ import { Component, OnInit } from '@angular/core'; -import { KeyActionSaver } from '../key-action-saver'; -import { NoneAction } from '../../../../config-serializer/config-items/NoneAction'; +import { KeyActionSaver } from '../../key-action-saver'; +import { NoneAction } from '../../../../../config-serializer/config-items/NoneAction'; @Component({ moduleId: module.id, selector: 'none-tab', - template: `This key is unassigned and has no functionality.`, - styles: - [` - :host { - display: flex; - justify-content: center; - padding: 2rem 0; - } - `] + template: require('./none-tab.component.html'), + styles: [require('./none-tab.component.scss')] }) export class NoneTabComponent implements OnInit, KeyActionSaver { constructor() { } diff --git a/src/components/popover/widgets/capture-keystroke-button.component.ts b/src/components/popover/widgets/capture-keystroke-button.component.ts deleted file mode 100644 index f3a8ce02..00000000 --- a/src/components/popover/widgets/capture-keystroke-button.component.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - moduleId: module.id, - selector: 'capture-keystroke-button', - template: - ` - - `, - styles: - [` - button { - display: inline-block; - margin: 0 0 0 .25rem; - } - - .fa-circle { - color:#c00; - } - `] -}) -export class CaptureKeystrokeButtonComponent implements OnInit { - private record: boolean; - - constructor() { } - - ngOnInit() { } - - private start(): void { - this.record = true; - } - - private stop(): void { - this.record = false; - } - -} diff --git a/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.html b/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.html new file mode 100644 index 00000000..d27114dd --- /dev/null +++ b/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.html @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss b/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss new file mode 100644 index 00000000..7873664f --- /dev/null +++ b/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.scss @@ -0,0 +1,8 @@ +button { + display: inline-block; + margin: 0 0 0 .25rem; +} + +.fa-circle { + color:#c00; +} diff --git a/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts b/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts new file mode 100644 index 00000000..ee45114c --- /dev/null +++ b/src/components/popover/widgets/capture-keystroke/capture-keystroke-button.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'capture-keystroke-button', + template: require('./capture-keystroke-button.component.html'), + styles: [require('./capture-keystroke-button.component.scss')] +}) +export class CaptureKeystrokeButtonComponent implements OnInit { + private record: boolean; + + constructor() { } + + ngOnInit() { } + + private start(): void { + this.record = true; + } + + private stop(): void { + this.record = false; + } + +} diff --git a/src/components/popover/widgets/icon.component.ts b/src/components/popover/widgets/icon.component.ts deleted file mode 100644 index ce1f4e66..00000000 --- a/src/components/popover/widgets/icon.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { NgSwitch, NgSwitchCase } from '@angular/common'; - -@Component({ - moduleId: module.id, - selector: 'icon', - template: - ` -
- - - - - - - -
- `, - directives: [NgSwitch, NgSwitchCase], - styles: [require('./icon.component.scss')] -}) -export class IconComponent implements OnInit { - - @Input() name: string; - - constructor() { } - - ngOnInit() { } - -} diff --git a/src/components/popover/widgets/icon/icon.component.html b/src/components/popover/widgets/icon/icon.component.html new file mode 100644 index 00000000..0264ad81 --- /dev/null +++ b/src/components/popover/widgets/icon/icon.component.html @@ -0,0 +1,9 @@ +
+ + + + + + + +
\ No newline at end of file diff --git a/src/components/popover/widgets/icon.component.scss b/src/components/popover/widgets/icon/icon.component.scss similarity index 100% rename from src/components/popover/widgets/icon.component.scss rename to src/components/popover/widgets/icon/icon.component.scss diff --git a/src/components/popover/widgets/icon/icon.component.ts b/src/components/popover/widgets/icon/icon.component.ts new file mode 100644 index 00000000..0cc4f3df --- /dev/null +++ b/src/components/popover/widgets/icon/icon.component.ts @@ -0,0 +1,19 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { NgSwitch, NgSwitchCase } from '@angular/common'; + +@Component({ + moduleId: module.id, + selector: 'icon', + template: require('./icon.component.html'), + styles: [require('./icon.component.scss')], + directives: [NgSwitch, NgSwitchCase] +}) +export class IconComponent implements OnInit { + + @Input() name: string; + + constructor() { } + + ngOnInit() { } + +} diff --git a/src/components/svg-keyboard.component.ts b/src/components/svg-keyboard.component.ts deleted file mode 100644 index 2d4f2845..00000000 --- a/src/components/svg-keyboard.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; - -import {Module} from '../../config-serializer/config-items/Module'; -import {SvgModule} from './svg-module.model'; -import {SvgModuleComponent} from './svg-module.component'; -import {DataProviderService} from '../services/data-provider.service'; - -@Component({ - selector: 'svg-keyboard', - template: - ` - - - - - - `, - styles: - [` - :host { - display: flex; - width: 100%; - height: 100%; - position: relative; - } - `], - directives: [SvgModuleComponent] -}) -export class SvgKeyboardComponent implements OnInit { - @Input() moduleConfig: Module[]; - @Output() keyClick = new EventEmitter(); - - private modules: SvgModule[]; - private svgAttributes: { viewBox: string, transform: string, fill: string }; - - constructor(private dps: DataProviderService) { - this.modules = []; - this.svgAttributes = this.dps.getKeyboardSvgAttributes(); - } - - ngOnInit() { - this.modules = this.dps.getSvgModules(); - } - - onEditKeyActionRequest(moduleId: number, keyId: number): void { - this.keyClick.emit({ - moduleId, - keyId - }); - } - -} diff --git a/src/components/svg-module.component.ts b/src/components/svg-module.component.ts deleted file mode 100644 index 9da91a88..00000000 --- a/src/components/svg-module.component.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; - -import {SvgKeyboardKey} from './keys/svg-keyboard-key.model'; -import {SvgKeyboardKeyComponent} from './keys/svg-keyboard-key.component'; -import {KeyAction} from '../../config-serializer/config-items/KeyAction'; - -@Component({ - selector: 'g[svg-module]', - template: - ` - - - - `, - styles: - [` - :host { - position: relative; - } - `], - directives: [SvgKeyboardKeyComponent] -}) -export class SvgModuleComponent implements OnInit { - @Input() coverages: any[]; - @Input() keyboardKeys: SvgKeyboardKey[]; - @Input() keyActions: KeyAction[]; - @Output() editKeyActionRequest = new EventEmitter(); - - constructor() { - this.keyboardKeys = []; - } - - ngOnInit() { } - - onKeyClick(index: number): void { - this.editKeyActionRequest.emit(index); - } - -} diff --git a/src/components/svg/keyboard/svg-keyboard.component.html b/src/components/svg/keyboard/svg-keyboard.component.html new file mode 100644 index 00000000..b41655db --- /dev/null +++ b/src/components/svg/keyboard/svg-keyboard.component.html @@ -0,0 +1,11 @@ + + + + + \ No newline at end of file diff --git a/src/components/svg/keyboard/svg-keyboard.component.scss b/src/components/svg/keyboard/svg-keyboard.component.scss new file mode 100644 index 00000000..1938a1a0 --- /dev/null +++ b/src/components/svg/keyboard/svg-keyboard.component.scss @@ -0,0 +1,6 @@ +:host { + display: flex; + width: 100%; + height: 100%; + position: relative; +} diff --git a/src/components/svg/keyboard/svg-keyboard.component.ts b/src/components/svg/keyboard/svg-keyboard.component.ts new file mode 100644 index 00000000..1ed797c4 --- /dev/null +++ b/src/components/svg/keyboard/svg-keyboard.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; + +import {Module} from '../../../../config-serializer/config-items/Module'; +import {SvgModule} from '../module/svg-module.model'; +import {SvgModuleComponent} from '../module/svg-module.component'; +import {DataProviderService} from '../../../services/data-provider.service'; + +@Component({ + selector: 'svg-keyboard', + template: require('./svg-keyboard.component.html'), + styles: [require('./svg-keyboard.component.scss')], + directives: [SvgModuleComponent] +}) +export class SvgKeyboardComponent implements OnInit { + @Input() moduleConfig: Module[]; + @Output() keyClick = new EventEmitter(); + + private modules: SvgModule[]; + private svgAttributes: { viewBox: string, transform: string, fill: string }; + + constructor(private dps: DataProviderService) { + this.modules = []; + this.svgAttributes = this.dps.getKeyboardSvgAttributes(); + } + + ngOnInit() { + this.modules = this.dps.getSvgModules(); + } + + onEditKeyActionRequest(moduleId: number, keyId: number): void { + this.keyClick.emit({ + moduleId, + keyId + }); + } + +} diff --git a/src/components/svg/keys/svg-icon-text-key.component.html b/src/components/svg/keys/svg-icon-text-key.component.html new file mode 100644 index 00000000..256a7c72 --- /dev/null +++ b/src/components/svg/keys/svg-icon-text-key.component.html @@ -0,0 +1,13 @@ + + + + {{ text }} + \ No newline at end of file diff --git a/src/components/svg/keys/svg-icon-text-key.component.ts b/src/components/svg/keys/svg-icon-text-key.component.ts new file mode 100644 index 00000000..02e64d03 --- /dev/null +++ b/src/components/svg/keys/svg-icon-text-key.component.ts @@ -0,0 +1,32 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'g[svg-icon-text-key]', + template: require('./svg-icon-text-key.component.html') +}) +export class SvgIconTextKeyComponent implements OnInit { + @Input() width: number; + @Input() height: number; + @Input() icon: string; + @Input() text: string; + + private useWidth: number; + private useHeight: number; + private useX: number; + private useY: number; + private textY: number; + private spanX: number; + + constructor() { + } + + ngOnInit() { + this.useWidth = this.width / 3; + this.useHeight = this.height / 3; + this.useX = (this.width > 2 * this.height) ? 0 : this.width / 3; + this.useY = (this.width > 2 * this.height) ? this.height / 3 : this.height / 10; + this.textY = (this.width > 2 * this.height) ? this.height / 2 : this.height * 0.6; + this.spanX = (this.width > 2 * this.height) ? this.width * 0.6 : this.width / 2; + } +} diff --git a/src/components/svg/keys/svg-keyboard-key.component.html b/src/components/svg/keys/svg-keyboard-key.component.html new file mode 100644 index 00000000..5fbcf4eb --- /dev/null +++ b/src/components/svg/keys/svg-keyboard-key.component.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/keys/svg-keyboard-key.component.ts b/src/components/svg/keys/svg-keyboard-key.component.ts similarity index 69% rename from src/components/keys/svg-keyboard-key.component.ts rename to src/components/svg/keys/svg-keyboard-key.component.ts index d74a9851..3fb31044 100644 --- a/src/components/keys/svg-keyboard-key.component.ts +++ b/src/components/svg/keys/svg-keyboard-key.component.ts @@ -1,15 +1,15 @@ import { Component, OnInit, Input, OnChanges, SimpleChange } from '@angular/core'; import {NgSwitch, NgSwitchCase} from '@angular/common'; -import {KeyAction} from '../../../config-serializer/config-items/KeyAction'; -import {KeystrokeAction} from '../../../config-serializer/config-items/KeystrokeAction'; -import {KeyModifiers} from '../../../config-serializer/config-items/KeyModifiers'; -import {PlayMacroAction} from '../../../config-serializer/config-items/PlayMacroAction'; -import {SwitchLayerAction, LayerName} from '../../../config-serializer/config-items/SwitchLayerAction'; -import {MapperService} from '../../services/mapper.service'; -import {SwitchKeymapAction} from '../../../config-serializer/config-items/SwitchKeymapAction'; -import {UhkConfiguration} from '../../../config-serializer/config-items/UhkConfiguration'; -import {UhkConfigurationService} from '../../services/uhk-configuration.service'; +import {KeyAction} from '../../../../config-serializer/config-items/KeyAction'; +import {KeystrokeAction} from '../../../../config-serializer/config-items/KeystrokeAction'; +import {KeyModifiers} from '../../../../config-serializer/config-items/KeyModifiers'; +import {PlayMacroAction} from '../../../../config-serializer/config-items/PlayMacroAction'; +import {SwitchLayerAction, LayerName} from '../../../../config-serializer/config-items/SwitchLayerAction'; +import {SwitchKeymapAction} from '../../../../config-serializer/config-items/SwitchKeymapAction'; +import {UhkConfiguration} from '../../../../config-serializer/config-items/UhkConfiguration'; +import {UhkConfigurationService} from '../../../services/uhk-configuration.service'; +import {MapperService} from '../../../services/mapper.service'; import {SvgOneLineTextKeyComponent} from './svg-one-line-text-key.component'; import {SvgTwoLineTextKeyComponent} from './svg-two-line-text-key.component'; @@ -29,51 +29,7 @@ enum LabelTypes { @Component({ selector: 'g[svg-keyboard-key]', - template: - ` - - - - - - - - - - - - - - - - `, + template: require('./svg-keyboard-key.component.html'), directives: [ NgSwitch, diff --git a/src/components/keys/svg-keyboard-key.model.ts b/src/components/svg/keys/svg-keyboard-key.model.ts similarity index 100% rename from src/components/keys/svg-keyboard-key.model.ts rename to src/components/svg/keys/svg-keyboard-key.model.ts diff --git a/src/components/svg/keys/svg-one-line-text-key.component.html b/src/components/svg/keys/svg-one-line-text-key.component.html new file mode 100644 index 00000000..b61b1bd1 --- /dev/null +++ b/src/components/svg/keys/svg-one-line-text-key.component.html @@ -0,0 +1,6 @@ + + {{ text }} + \ No newline at end of file diff --git a/src/components/svg/keys/svg-one-line-text-key.component.ts b/src/components/svg/keys/svg-one-line-text-key.component.ts new file mode 100644 index 00000000..80786fb3 --- /dev/null +++ b/src/components/svg/keys/svg-one-line-text-key.component.ts @@ -0,0 +1,22 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'g[svg-one-line-text-key]', + template: require('./svg-one-line-text-key.component.html') +}) +export class SvgOneLineTextKeyComponent implements OnInit { + @Input() height: number; + @Input() width: number; + @Input() text: string; + + private textY: number; + private spanX: number; + + constructor() { } + + ngOnInit() { + this.textY = this.height / 2; + this.spanX = this.width / 2; + } +} diff --git a/src/components/svg/keys/svg-single-icon-key.component.html b/src/components/svg/keys/svg-single-icon-key.component.html new file mode 100644 index 00000000..7ac007d3 --- /dev/null +++ b/src/components/svg/keys/svg-single-icon-key.component.html @@ -0,0 +1,4 @@ + + \ No newline at end of file diff --git a/src/components/keys/svg-single-icon-key.component.ts b/src/components/svg/keys/svg-single-icon-key.component.ts similarity index 56% rename from src/components/keys/svg-single-icon-key.component.ts rename to src/components/svg/keys/svg-single-icon-key.component.ts index b48ef291..4e056e28 100644 --- a/src/components/keys/svg-single-icon-key.component.ts +++ b/src/components/svg/keys/svg-single-icon-key.component.ts @@ -3,21 +3,20 @@ import { Component, OnInit, Input } from '@angular/core'; @Component({ moduleId: module.id, selector: 'g[svg-single-icon-key]', - template: - ` - - - ` + template: require('./svg-single-icon-key.component.html') }) export class SvgSingleIconKeyComponent implements OnInit { @Input() width: number; @Input() height: number; @Input() icon: string; + private svgHeight: number; + private svgWidth: number; + constructor() { } - ngOnInit() { } - + ngOnInit() { + this.svgWidth = this.width / 3; + this.svgHeight = this.height / 3; + } } diff --git a/src/components/svg/keys/svg-switch-keymap-key.component.html b/src/components/svg/keys/svg-switch-keymap-key.component.html new file mode 100644 index 00000000..00447620 --- /dev/null +++ b/src/components/svg/keys/svg-switch-keymap-key.component.html @@ -0,0 +1,12 @@ + + + + {{ abbreviation }} + \ No newline at end of file diff --git a/src/components/svg/keys/svg-switch-keymap-key.component.ts b/src/components/svg/keys/svg-switch-keymap-key.component.ts new file mode 100644 index 00000000..947ecafb --- /dev/null +++ b/src/components/svg/keys/svg-switch-keymap-key.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit, Input } from '@angular/core'; + +import {MapperService} from '../../../services/mapper.service'; + +@Component({ + moduleId: module.id, + selector: 'g[svg-switch-keymap-key]', + template: require('./svg-switch-keymap-key.component.html') +}) +export class SvgSwitchKeymapKeyComponent implements OnInit { + @Input() width: number; + @Input() height: number; + @Input() abbreviation: string; + + private icon: string; + private useWidth: number; + private useHeight: number; + private useX: number; + private useY: number; + private textY: number; + private spanX: number; + + constructor(private mapperService: MapperService) { } + + ngOnInit() { + this.icon = this.mapperService.getIcon('switch-keymap'); + + this.useWidth = this.width / 4; + this.useHeight = this.height / 4; + this.useX = this.width * 3 / 8; + this.useY = this.height / 5; + this.textY = this.height * 2 / 3; + this.spanX = this.width / 2; + } +} diff --git a/src/components/svg/keys/svg-text-icon-key.component.html b/src/components/svg/keys/svg-text-icon-key.component.html new file mode 100644 index 00000000..78fca459 --- /dev/null +++ b/src/components/svg/keys/svg-text-icon-key.component.html @@ -0,0 +1,12 @@ + + {{ text }} + + + \ No newline at end of file diff --git a/src/components/svg/keys/svg-text-icon-key.component.ts b/src/components/svg/keys/svg-text-icon-key.component.ts new file mode 100644 index 00000000..3607c46d --- /dev/null +++ b/src/components/svg/keys/svg-text-icon-key.component.ts @@ -0,0 +1,34 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'g[svg-text-icon-key]', + template: require('./svg-text-icon-key.component.html') +}) +export class SvgTextIconKeyComponent implements OnInit { + @Input() width: number; + @Input() height: number; + @Input() text: string; + @Input() icon: string; + + + private useWidth: number; + private useHeight: number; + private useX: number; + private useY: number; + private textY: number; + private textAnchor: string; + private spanX: number; + + constructor() { } + + ngOnInit() { + this.useWidth = this.width / 3; + this.useHeight = this.height / 3; + this.useX = (this.width > 2 * this.height) ? this.width * 0.6 : this.width / 3; + this.useY = (this.width > 2 * this.height) ? this.height / 3 : this.height / 2; + this.textY = (this.width > 2 * this.height) ? this.height / 2 : this.height / 3; + this.textAnchor = (this.width > 2 * this.height) ? 'end' : 'middle'; + this.spanX = (this.width > 2 * this.height) ? 0.6 * this.width : this.width / 2; + } +} diff --git a/src/components/svg/keys/svg-two-line-text-key.component.html b/src/components/svg/keys/svg-two-line-text-key.component.html new file mode 100644 index 00000000..24666060 --- /dev/null +++ b/src/components/svg/keys/svg-two-line-text-key.component.html @@ -0,0 +1,11 @@ + + {{ text }} + \ No newline at end of file diff --git a/src/components/svg/keys/svg-two-line-text-key.component.ts b/src/components/svg/keys/svg-two-line-text-key.component.ts new file mode 100644 index 00000000..31eeca52 --- /dev/null +++ b/src/components/svg/keys/svg-two-line-text-key.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'g[svg-two-line-text-key]', + template: require('./svg-two-line-text-key.component.html') +}) +export class SvgTwoLineTextKeyComponent implements OnInit { + @Input() height: number; + @Input() width: number; + @Input() texts: string[]; + + private textY: number; + private spanX: number; + + constructor() { } + + ngOnInit() { + this.textY = this.height / 2; + this.spanX = this.width / 2; + } + + private spanY(index: number) { + return (0.75 - index * 0.5) * this.height; + } +} diff --git a/src/components/svg/module/svg-module.component.html b/src/components/svg/module/svg-module.component.html new file mode 100644 index 00000000..83cb4f6f --- /dev/null +++ b/src/components/svg/module/svg-module.component.html @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/src/components/svg/module/svg-module.component.scss b/src/components/svg/module/svg-module.component.scss new file mode 100644 index 00000000..fb6b363d --- /dev/null +++ b/src/components/svg/module/svg-module.component.scss @@ -0,0 +1,3 @@ +:host { + position: relative; +} diff --git a/src/components/svg/module/svg-module.component.ts b/src/components/svg/module/svg-module.component.ts new file mode 100644 index 00000000..e3f56138 --- /dev/null +++ b/src/components/svg/module/svg-module.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +import {SvgKeyboardKey} from '../keys/svg-keyboard-key.model'; +import {SvgKeyboardKeyComponent} from '../keys/svg-keyboard-key.component'; +import {KeyAction} from '../../../../config-serializer/config-items/KeyAction'; + +@Component({ + selector: 'g[svg-module]', + template: require('./svg-module.component.html'), + styles: [require('./svg-module.component.scss')], + directives: [SvgKeyboardKeyComponent] +}) +export class SvgModuleComponent implements OnInit { + @Input() coverages: any[]; + @Input() keyboardKeys: SvgKeyboardKey[]; + @Input() keyActions: KeyAction[]; + @Output() editKeyActionRequest = new EventEmitter(); + + constructor() { + this.keyboardKeys = []; + } + + ngOnInit() { } + + onKeyClick(index: number): void { + this.editKeyActionRequest.emit(index); + } + +} diff --git a/src/components/svg-module.model.ts b/src/components/svg/module/svg-module.model.ts similarity index 87% rename from src/components/svg-module.model.ts rename to src/components/svg/module/svg-module.model.ts index da3b7d99..c74bc4fa 100644 --- a/src/components/svg-module.model.ts +++ b/src/components/svg/module/svg-module.model.ts @@ -1,4 +1,4 @@ -import {SvgKeyboardKey} from './keys/svg-keyboard-key.model'; +import {SvgKeyboardKey} from '../keys/svg-keyboard-key.model'; export class SvgModule { private coverages: any[]; diff --git a/src/components/svg/popover/svg-keyboard-popover.component.html b/src/components/svg/popover/svg-keyboard-popover.component.html new file mode 100644 index 00000000..f138df59 --- /dev/null +++ b/src/components/svg/popover/svg-keyboard-popover.component.html @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/components/svg/popover/svg-keyboard-popover.component.scss b/src/components/svg/popover/svg-keyboard-popover.component.scss new file mode 100644 index 00000000..1938a1a0 --- /dev/null +++ b/src/components/svg/popover/svg-keyboard-popover.component.scss @@ -0,0 +1,6 @@ +:host { + display: flex; + width: 100%; + height: 100%; + position: relative; +} diff --git a/src/components/svg-keyboard-popover.component.ts b/src/components/svg/popover/svg-keyboard-popover.component.ts similarity index 63% rename from src/components/svg-keyboard-popover.component.ts rename to src/components/svg/popover/svg-keyboard-popover.component.ts index 825ecf6e..57d6272c 100644 --- a/src/components/svg-keyboard-popover.component.ts +++ b/src/components/svg/popover/svg-keyboard-popover.component.ts @@ -1,28 +1,14 @@ import { Component, OnInit, Input} from '@angular/core'; -import {Module} from '../../config-serializer/config-items/Module'; -import {KeyAction} from '../../config-serializer/config-items/KeyAction'; -import {SvgKeyboardComponent} from './svg-keyboard.component'; -import {PopoverComponent} from './popover/popover.component'; +import {Module} from '../../../../config-serializer/config-items/Module'; +import {KeyAction} from '../../../../config-serializer/config-items/KeyAction'; +import {SvgKeyboardComponent} from '../keyboard/svg-keyboard.component'; +import {PopoverComponent} from '../../popover/popover.component'; @Component({ selector: 'svg-keyboard-popover', - template: - ` - - - - `, - styles: - [` - :host { - display: flex; - width: 100%; - height: 100%; - position: relative; - } - `], + template: require('./svg-keyboard-popover.component.html'), + styles: [require('./svg-keyboard-popover.component.scss')], directives: [SvgKeyboardComponent, PopoverComponent] }) export class SvgKeyboardPopoverComponent implements OnInit { diff --git a/src/services/data-provider.service.ts b/src/services/data-provider.service.ts index ae6fdc80..29f6bd51 100644 --- a/src/services/data-provider.service.ts +++ b/src/services/data-provider.service.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; -import {SvgModule} from '../components/svg-module.model'; +import {SvgModule} from '../components/svg/module/svg-module.model'; @Injectable() export class DataProviderService {