diff --git a/electron/src/app.module.ts b/electron/src/app.module.ts index 5d3958e5..49edfcd8 100644 --- a/electron/src/app.module.ts +++ b/electron/src/app.module.ts @@ -69,6 +69,7 @@ import { AppComponent } from './app/app.component'; import { MainAppComponent } from './main-app'; import { CancelableDirective } from './shared/directives'; +import { SafeStylePipe } from './shared/pipes'; import { CaptureService } from './shared/services/capture.service'; import { MapperService } from './shared/services/mapper.service'; @@ -140,7 +141,8 @@ import { reducer } from '../../shared/src/store/reducers/index'; MissingDeviceComponent, PrivilegeCheckerComponent, UhkMessageComponent, - CancelableDirective + CancelableDirective, + SafeStylePipe ], imports: [ BrowserModule, diff --git a/shared/res/presets/QTY.json b/shared/res/presets/QTY.json index 35eb32c7..65dcc786 100644 --- a/shared/res/presets/QTY.json +++ b/shared/res/presets/QTY.json @@ -12,148 +12,154 @@ "keyActions": [ { "keyActionType": "keystroke", - "scancode": 36, - "type": "basic" + "type": "basic", + "scancode": 36 }, { "keyActionType": "keystroke", - "scancode": 37, - "type": "basic" + "type": "basic", + "scancode": 37 }, { "keyActionType": "keystroke", - "scancode": 38, - "type": "basic" + "type": "basic", + "scancode": 38 }, { "keyActionType": "keystroke", - "scancode": 39, - "type": "basic" + "type": "basic", + "scancode": 39 }, { "keyActionType": "keystroke", - "scancode": 45, - "type": "basic" + "type": "basic", + "scancode": 45 }, { "keyActionType": "keystroke", - "scancode": 46, - "type": "basic" + "type": "basic", + "scancode": 46 }, { "keyActionType": "keystroke", - "scancode": 42, - "type": "basic" + "type": "basic", + "scancode": 42 }, { "keyActionType": "keystroke", - "scancode": 28, - "type": "basic" + "type": "basic", + "scancode": 24 }, { "keyActionType": "keystroke", - "scancode": 24, - "type": "basic" + "type": "basic", + "scancode": 12 }, { "keyActionType": "keystroke", - "scancode": 12, - "type": "basic" + "type": "basic", + "scancode": 18 }, { "keyActionType": "keystroke", - "scancode": 18, - "type": "basic" + "type": "basic", + "scancode": 19 }, { "keyActionType": "keystroke", - "scancode": 19, - "type": "basic" + "type": "basic", + "scancode": 47 }, { "keyActionType": "keystroke", - "scancode": 47, - "type": "basic" + "type": "basic", + "scancode": 48 }, { "keyActionType": "keystroke", - "scancode": 48, - "type": "basic" + "type": "basic", + "scancode": 49 }, { "keyActionType": "keystroke", - "scancode": 49, - "type": "basic" + "type": "basic", + "scancode": 28 }, { "keyActionType": "keystroke", - "scancode": 11, - "type": "basic" + "type": "basic", + "scancode": 13 }, { "keyActionType": "keystroke", - "scancode": 13, - "type": "basic" + "type": "basic", + "scancode": 14 }, { "keyActionType": "keystroke", - "scancode": 14, - "type": "basic" + "type": "basic", + "scancode": 15 }, { "keyActionType": "keystroke", - "scancode": 15, - "type": "basic" + "type": "basic", + "scancode": 51 }, { "keyActionType": "keystroke", - "scancode": 51, - "type": "basic" + "type": "basic", + "scancode": 52 }, { "keyActionType": "keystroke", - "scancode": 52, - "type": "basic" + "type": "basic", + "scancode": 40 }, { "keyActionType": "keystroke", - "scancode": 40, - "type": "basic" + "type": "basic", + "scancode": 11 }, { "keyActionType": "keystroke", - "scancode": 17, - "type": "basic" + "type": "basic", + "scancode": 17 }, { "keyActionType": "keystroke", - "scancode": 16, - "type": "basic" + "type": "basic", + "scancode": 16 }, { "keyActionType": "keystroke", - "scancode": 54, - "type": "basic" + "type": "basic", + "scancode": 54 }, { "keyActionType": "keystroke", - "scancode": 55, - "type": "basic" + "type": "basic", + "scancode": 55 }, { "keyActionType": "keystroke", - "scancode": 56, - "type": "basic" + "type": "basic", + "scancode": 56 }, { "keyActionType": "keystroke", - "modifierMask": 32, - "type": "basic" + "type": "basic", + "modifierMask": 32 }, + null, { "keyActionType": "keystroke", - "scancode": 44, - "type": "basic" + "type": "basic", + "scancode": 44 + }, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false }, { "keyActionType": "switchLayer", @@ -162,23 +168,18 @@ }, { "keyActionType": "keystroke", - "modifierMask": 64, - "type": "basic" + "type": "basic", + "modifierMask": 64 }, { "keyActionType": "keystroke", - "modifierMask": 128, - "type": "basic" + "type": "basic", + "modifierMask": 128 }, { "keyActionType": "keystroke", - "modifierMask": 16, - "type": "basic" - }, - { - "keyActionType": "switchLayer", - "layer": "mod", - "toggle": false + "type": "basic", + "modifierMask": 16 } ] }, @@ -188,68 +189,69 @@ "keyActions": [ { "keyActionType": "keystroke", - "scancode": 53, - "type": "basic" + "type": "basic", + "scancode": 53 }, { "keyActionType": "keystroke", - "scancode": 30, - "type": "basic" + "type": "basic", + "scancode": 30 }, { "keyActionType": "keystroke", - "scancode": 31, - "type": "basic" + "type": "basic", + "scancode": 31 }, { "keyActionType": "keystroke", - "scancode": 32, - "type": "basic" + "type": "basic", + "scancode": 32 }, { "keyActionType": "keystroke", - "scancode": 33, - "type": "basic" + "type": "basic", + "scancode": 33 }, { "keyActionType": "keystroke", - "scancode": 34, - "type": "basic" + "type": "basic", + "scancode": 34 }, { "keyActionType": "keystroke", - "scancode": 35, - "type": "basic" + "type": "basic", + "scancode": 35 }, { "keyActionType": "keystroke", - "scancode": 43, - "type": "basic" + "type": "basic", + "scancode": 43 }, { "keyActionType": "keystroke", - "scancode": 20, - "type": "basic" + "type": "basic", + "scancode": 20 }, { "keyActionType": "keystroke", - "scancode": 26, - "type": "basic" + "type": "basic", + "scancode": 26 }, { "keyActionType": "keystroke", - "scancode": 8, - "type": "basic" + "type": "basic", + "scancode": 8 }, { "keyActionType": "keystroke", - "scancode": 21, - "type": "basic" + "type": "basic", + "scancode": 21 }, + null, { "keyActionType": "keystroke", - "scancode": 23, - "type": "basic" + "type": "basic", + "scancode": 23 }, { "keyActionType": "switchLayer", @@ -258,89 +260,92 @@ }, { "keyActionType": "keystroke", - "scancode": 4, - "type": "basic" + "type": "basic", + "scancode": 4 }, { "keyActionType": "keystroke", - "scancode": 22, - "type": "basic" + "type": "basic", + "scancode": 22 }, { "keyActionType": "keystroke", - "scancode": 7, - "type": "basic" + "type": "basic", + "scancode": 7 }, { "keyActionType": "keystroke", - "scancode": 9, - "type": "basic" + "type": "basic", + "scancode": 9 + }, + null, + { + "keyActionType": "keystroke", + "type": "basic", + "scancode": 10 }, { "keyActionType": "keystroke", - "scancode": 10, - "type": "basic" + "type": "basic", + "modifierMask": 2 + }, + null, + { + "keyActionType": "keystroke", + "type": "basic", + "scancode": 29 }, { "keyActionType": "keystroke", - "modifierMask": 2, - "type": "basic" + "type": "basic", + "scancode": 27 }, { "keyActionType": "keystroke", - "scancode": 29, - "type": "basic" + "type": "basic", + "scancode": 6 }, { "keyActionType": "keystroke", - "scancode": 27, - "type": "basic" + "type": "basic", + "scancode": 25 }, { "keyActionType": "keystroke", - "scancode": 6, - "type": "basic" + "type": "basic", + "scancode": 5 }, { "keyActionType": "keystroke", - "scancode": 25, - "type": "basic" + "type": "basic", + "modifierMask": 1 }, { "keyActionType": "keystroke", - "scancode": 5, - "type": "basic" + "type": "basic", + "modifierMask": 8 }, { "keyActionType": "keystroke", - "modifierMask": 1, - "type": "basic" - }, - { - "keyActionType": "keystroke", - "modifierMask": 8, - "type": "basic" - }, - { - "keyActionType": "keystroke", - "modifierMask": 4, - "type": "basic" + "type": "basic", + "modifierMask": 4 }, { "keyActionType": "switchLayer", "layer": "fn", "toggle": false }, + { + "keyActionType": "keystroke", + "type": "basic", + "scancode": 44 + }, { "keyActionType": "switchLayer", "layer": "mod", "toggle": false }, - { - "keyActionType": "keystroke", - "scancode": 44, - "type": "basic" - } + null ] }, { @@ -365,23 +370,18 @@ null, { "keyActionType": "keystroke", - "scancode": 75, - "type": "basic" + "type": "basic", + "scancode": 74 }, { "keyActionType": "keystroke", - "scancode": 74, - "type": "basic" + "type": "basic", + "scancode": 82 }, { "keyActionType": "keystroke", - "scancode": 82, - "type": "basic" - }, - { - "keyActionType": "keystroke", - "scancode": 77, - "type": "basic" + "type": "basic", + "scancode": 77 }, null, null, @@ -389,42 +389,53 @@ null, { "keyActionType": "keystroke", - "scancode": 78, - "type": "basic" + "type": "basic", + "scancode": 75 }, { "keyActionType": "keystroke", - "scancode": 80, - "type": "basic" + "type": "basic", + "scancode": 80 }, { "keyActionType": "keystroke", - "scancode": 81, - "type": "basic" + "type": "basic", + "scancode": 81 }, { "keyActionType": "keystroke", - "scancode": 79, - "type": "basic" + "type": "basic", + "scancode": 79 }, null, null, null, + { + "keyActionType": "keystroke", + "type": "basic", + "scancode": 78 + }, null, null, null, null, { "keyActionType": "keystroke", - "scancode": 118, - "type": "basic" + "type": "basic", + "scancode": 118 }, { "keyActionType": "keystroke", - "modifierMask": 32, - "type": "basic" + "type": "basic", + "modifierMask": 32 }, null, + null, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + }, { "keyActionType": "switchLayer", "layer": "fn", @@ -432,23 +443,18 @@ }, { "keyActionType": "keystroke", - "modifierMask": 64, - "type": "basic" + "type": "basic", + "modifierMask": 64 }, { "keyActionType": "keystroke", - "modifierMask": 128, - "type": "basic" + "type": "basic", + "modifierMask": 128 }, { "keyActionType": "keystroke", - "modifierMask": 16, - "type": "basic" - }, - { - "keyActionType": "switchLayer", - "layer": "mod", - "toggle": false + "type": "basic", + "modifierMask": 16 } ] }, @@ -469,6 +475,7 @@ null, null, null, + null, { "keyActionType": "switchLayer", "layer": "mouse", @@ -479,36 +486,39 @@ null, null, null, + null, { "keyActionType": "keystroke", - "modifierMask": 2, - "type": "basic" + "type": "basic", + "modifierMask": 2 }, null, null, null, null, null, + null, { "keyActionType": "keystroke", - "modifierMask": 1, - "type": "basic" + "type": "basic", + "modifierMask": 1 }, { "keyActionType": "keystroke", - "modifierMask": 8, - "type": "basic" + "type": "basic", + "modifierMask": 8 }, { "keyActionType": "keystroke", - "modifierMask": 4, - "type": "basic" + "type": "basic", + "modifierMask": 4 }, { "keyActionType": "switchLayer", "layer": "fn", "toggle": false }, + null, { "keyActionType": "switchLayer", "layer": "mod", @@ -532,21 +542,20 @@ null, null, null, - null, { "keyActionType": "keystroke", - "scancode": 176, - "type": "media" + "type": "media", + "scancode": 176 }, { "keyActionType": "keystroke", - "scancode": 233, - "type": "media" + "type": "media", + "scancode": 233 }, { "keyActionType": "keystroke", - "scancode": 183, - "type": "media" + "type": "media", + "scancode": 183 }, null, null, @@ -555,37 +564,44 @@ null, { "keyActionType": "keystroke", - "scancode": 182, - "type": "media" + "type": "media", + "scancode": 182 }, { "keyActionType": "keystroke", - "scancode": 234, - "type": "media" + "type": "media", + "scancode": 234 }, { "keyActionType": "keystroke", - "scancode": 181, - "type": "media" + "type": "media", + "scancode": 181 }, null, null, null, null, null, + null, { "keyActionType": "keystroke", - "scancode": 226, - "type": "media" + "type": "media", + "scancode": 226 }, null, null, { "keyActionType": "keystroke", - "modifierMask": 32, - "type": "basic" + "type": "basic", + "modifierMask": 32 }, null, + null, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + }, { "keyActionType": "switchLayer", "layer": "fn", @@ -593,23 +609,18 @@ }, { "keyActionType": "keystroke", - "modifierMask": 64, - "type": "basic" + "type": "basic", + "modifierMask": 64 }, { "keyActionType": "keystroke", - "modifierMask": 128, - "type": "basic" + "type": "basic", + "modifierMask": 128 }, { "keyActionType": "keystroke", - "modifierMask": 16, - "type": "basic" - }, - { - "keyActionType": "switchLayer", - "layer": "mod", - "toggle": true + "type": "basic", + "modifierMask": 16 } ] }, @@ -622,16 +633,9 @@ null, null, null, - { - "keyActionType": "switchLayer", - "layer": "mouse", - "toggle": true - }, - { - "keyActionType": "switchLayer", - "layer": "mod", - "toggle": true - }, + null, + null, + null, null, null, null, @@ -641,47 +645,50 @@ { "keyActionType": "switchLayer", "layer": "mouse", - "toggle": true + "toggle": false }, null, null, null, null, null, + null, { "keyActionType": "keystroke", - "modifierMask": 2, - "type": "basic" + "type": "basic", + "modifierMask": 2 }, null, null, null, null, null, + null, { "keyActionType": "keystroke", - "modifierMask": 1, - "type": "basic" + "type": "basic", + "modifierMask": 1 }, { "keyActionType": "keystroke", - "modifierMask": 8, - "type": "basic" + "type": "basic", + "modifierMask": 8 }, { "keyActionType": "keystroke", - "modifierMask": 4, - "type": "basic" + "type": "basic", + "modifierMask": 4 }, { "keyActionType": "switchLayer", "layer": "fn", "toggle": false }, + null, { "keyActionType": "switchLayer", "layer": "mod", - "toggle": true + "toggle": false }, null ] @@ -701,10 +708,6 @@ null, null, null, - { - "keyActionType": "mouse", - "mouseAction": "scrollUp" - }, null, { "keyActionType": "mouse", @@ -717,7 +720,7 @@ null, { "keyActionType": "mouse", - "mouseAction": "scrollDown" + "mouseAction": "scrollUp" }, { "keyActionType": "mouse", @@ -734,6 +737,10 @@ null, null, null, + { + "keyActionType": "mouse", + "mouseAction": "scrollDown" + }, null, null, null, @@ -743,21 +750,30 @@ null, null, { - "keyActionType": "keystroke", - "modifierMask": 64, - "type": "basic" + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + }, + { + "keyActionType": "switchLayer", + "layer": "fn", + "toggle": false }, { "keyActionType": "keystroke", - "modifierMask": 128, - "type": "basic" + "type": "basic", + "modifierMask": 64 }, { "keyActionType": "keystroke", - "modifierMask": 16, - "type": "basic" + "type": "basic", + "modifierMask": 128 }, - null + { + "keyActionType": "keystroke", + "type": "basic", + "modifierMask": 16 + } ] }, { @@ -777,6 +793,7 @@ null, null, null, + null, { "keyActionType": "switchLayer", "layer": "mouse", @@ -802,33 +819,41 @@ null, null, null, - { - "keyActionType": "keystroke", - "modifierMask": 1, - "type": "basic" - }, - { - "keyActionType": "keystroke", - "modifierMask": 8, - "type": "basic" - }, - { - "keyActionType": "keystroke", - "modifierMask": 4, - "type": "basic" - }, + null, null, { - "keyActionType": "mouse", - "mouseAction": "accelerate" + "keyActionType": "keystroke", + "type": "basic", + "modifierMask": 1 + }, + { + "keyActionType": "keystroke", + "type": "basic", + "modifierMask": 8 + }, + { + "keyActionType": "keystroke", + "type": "basic", + "modifierMask": 4 + }, + { + "keyActionType": "switchLayer", + "layer": "fn", + "toggle": false }, { "keyActionType": "mouse", "mouseAction": "decelerate" - } + }, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + }, + null ] } ] } ] -} +} \ No newline at end of file diff --git a/shared/src/components/svg/keyboard/svg-keyboard.component.html b/shared/src/components/svg/keyboard/svg-keyboard.component.html index cc35f496..78805d2c 100644 --- a/shared/src/components/svg/keyboard/svg-keyboard.component.html +++ b/shared/src/components/svg/keyboard/svg-keyboard.component.html @@ -1,15 +1,13 @@ - - - - - \ No newline at end of file + + + diff --git a/shared/src/components/svg/keyboard/svg-keyboard.component.ts b/shared/src/components/svg/keyboard/svg-keyboard.component.ts index 682d2f66..e50834bb 100644 --- a/shared/src/components/svg/keyboard/svg-keyboard.component.ts +++ b/shared/src/components/svg/keyboard/svg-keyboard.component.ts @@ -3,6 +3,11 @@ import { Component, EventEmitter, Input, OnInit, Output, ChangeDetectionStrategy import { Module } from '../../../config-serializer/config-items/Module'; import { SvgModule } from '../module'; +enum KeyboardLayout { + ANSI, + ISO +} + @Component({ selector: 'svg-keyboard', templateUrl: './svg-keyboard.component.html', @@ -17,12 +22,12 @@ export class SvgKeyboardComponent implements OnInit { @Output() keyHover = new EventEmitter(); @Output() capture = new EventEmitter(); - private modules: SvgModule[]; - private svgAttributes: { viewBox: string, transform: string, fill: string }; + modules: SvgModule[]; + viewBox: string; constructor() { this.modules = []; - this.svgAttributes = this.getKeyboardSvgAttributes(); + this.viewBox = '-520 582 1100 470'; } ngOnInit() { @@ -37,7 +42,7 @@ export class SvgKeyboardComponent implements OnInit { }); } - onCapture(moduleId: number, keyId: number, captured: {code: number, left: boolean[], right: boolean[]}): void { + onCapture(moduleId: number, keyId: number, captured: { code: number, left: boolean[], right: boolean[] }): void { this.capture.emit({ moduleId, keyId, @@ -54,22 +59,21 @@ export class SvgKeyboardComponent implements OnInit { }); } - private getKeyboardSvgAttributes(): { viewBox: string, transform: string, fill: string } { - const svg: any = this.getBaseLayer(); - return { - viewBox: svg.$.viewBox, - transform: svg.g[0].$.transform, - fill: svg.g[0].$.fill - }; - } - private getSvgModules(): SvgModule[] { - const modules = this.getBaseLayer().g[0].g.map((obj: any) => new SvgModule(obj)); - return [modules[1], modules[0]]; // TODO: remove if the svg will be correct + const leftModule = new SvgModule(this.getLeftModule()); + const rightModule = new SvgModule(this.getRightModule()); + return [rightModule, leftModule]; } - private getBaseLayer(): any { - return require('xml-loader!../../../../../images/base-layer.svg').svg; + private getLeftModule(layout = KeyboardLayout.ANSI): any { + if (layout === KeyboardLayout.ISO) { + return require('xml-loader!../../../../../modules/uhk60-left-half/layout-iso.svg').svg; + } + return require('xml-loader!../../../../../modules/uhk60-left-half/layout-ansi.svg').svg; + } + + private getRightModule(): any { + return require('xml-loader!../../../../../modules/uhk60-right-half/layout.svg').svg; } } diff --git a/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.model.ts b/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.model.ts index ba12620e..d6d95ff3 100644 --- a/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.model.ts +++ b/shared/src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.model.ts @@ -6,4 +6,5 @@ export interface SvgKeyboardKey { ry: string; height: number; width: number; + fill: string; } diff --git a/shared/src/components/svg/module/svg-module.component.html b/shared/src/components/svg/module/svg-module.component.html index 4b0b74e0..ed752757 100644 --- a/shared/src/components/svg/module/svg-module.component.html +++ b/shared/src/components/svg/module/svg-module.component.html @@ -1,14 +1,18 @@ - - \ No newline at end of file + + + + diff --git a/shared/src/components/svg/module/svg-module.model.ts b/shared/src/components/svg/module/svg-module.model.ts index be88bbf6..f84c9923 100644 --- a/shared/src/components/svg/module/svg-module.model.ts +++ b/shared/src/components/svg/module/svg-module.model.ts @@ -1,16 +1,21 @@ import { SvgKeyboardKey } from '../keys'; export class SvgModule { - private coverages: any[]; - private keyboardKeys: SvgKeyboardKey[]; - private attributes: any; + coverages: any[]; + keyboardKeys: SvgKeyboardKey[]; + attributes: any; constructor(obj: { rect: any[], path: any[], $: Object }) { - this.keyboardKeys = obj.rect.map(rect => rect.$).map(rect => { - rect.height = +rect.height; - rect.width = +rect.width; - return rect; - }); + let index: number; + const keys = obj.rect.map(rect => rect.$); + this.keyboardKeys = []; + for (let i = 0; i < keys.length; ++i) { + index = keys[i].id.slice(4) - 1; // remove 'key-' then switch to index from 0 + keys[i].height = +keys[i].height; + keys[i].width = +keys[i].width; + keys[i].fill = keys[i].style.slice(5); // remove 'fill:' + this.keyboardKeys[index] = keys[i]; + } this.coverages = obj.path; this.attributes = obj.$; } diff --git a/shared/src/config-serializer/user-config.json b/shared/src/config-serializer/user-config.json index 81529cab..8517ab69 100644 --- a/shared/src/config-serializer/user-config.json +++ b/shared/src/config-serializer/user-config.json @@ -23,148 +23,154 @@ "keyActions": [ { "keyActionType": "keystroke", - "scancode": 36, - "type": "basic" + "type": "basic", + "scancode": 36 }, { "keyActionType": "keystroke", - "scancode": 37, - "type": "basic" + "type": "basic", + "scancode": 37 }, { "keyActionType": "keystroke", - "scancode": 38, - "type": "basic" + "type": "basic", + "scancode": 38 }, { "keyActionType": "keystroke", - "scancode": 39, - "type": "basic" + "type": "basic", + "scancode": 39 }, { "keyActionType": "keystroke", - "scancode": 45, - "type": "basic" + "type": "basic", + "scancode": 45 }, { "keyActionType": "keystroke", - "scancode": 46, - "type": "basic" + "type": "basic", + "scancode": 46 }, { "keyActionType": "keystroke", - "scancode": 42, - "type": "basic" + "type": "basic", + "scancode": 42 }, { "keyActionType": "keystroke", - "scancode": 28, - "type": "basic" + "type": "basic", + "scancode": 24 }, { "keyActionType": "keystroke", - "scancode": 24, - "type": "basic" + "type": "basic", + "scancode": 12 }, { "keyActionType": "keystroke", - "scancode": 12, - "type": "basic" + "type": "basic", + "scancode": 18 }, { "keyActionType": "keystroke", - "scancode": 18, - "type": "basic" + "type": "basic", + "scancode": 19 }, { "keyActionType": "keystroke", - "scancode": 19, - "type": "basic" + "type": "basic", + "scancode": 47 }, { "keyActionType": "keystroke", - "scancode": 47, - "type": "basic" + "type": "basic", + "scancode": 48 }, { "keyActionType": "keystroke", - "scancode": 48, - "type": "basic" + "type": "basic", + "scancode": 49 }, { "keyActionType": "keystroke", - "scancode": 49, - "type": "basic" + "type": "basic", + "scancode": 28 }, { "keyActionType": "keystroke", - "scancode": 11, - "type": "basic" + "type": "basic", + "scancode": 13 }, { "keyActionType": "keystroke", - "scancode": 13, - "type": "basic" + "type": "basic", + "scancode": 14 }, { "keyActionType": "keystroke", - "scancode": 14, - "type": "basic" + "type": "basic", + "scancode": 15 }, { "keyActionType": "keystroke", - "scancode": 15, - "type": "basic" + "type": "basic", + "scancode": 51 }, { "keyActionType": "keystroke", - "scancode": 51, - "type": "basic" + "type": "basic", + "scancode": 52 }, { "keyActionType": "keystroke", - "scancode": 52, - "type": "basic" + "type": "basic", + "scancode": 40 }, { "keyActionType": "keystroke", - "scancode": 40, - "type": "basic" + "type": "basic", + "scancode": 11 }, { "keyActionType": "keystroke", - "scancode": 17, - "type": "basic" + "type": "basic", + "scancode": 17 }, { "keyActionType": "keystroke", - "scancode": 16, - "type": "basic" + "type": "basic", + "scancode": 16 }, { "keyActionType": "keystroke", - "scancode": 54, - "type": "basic" + "type": "basic", + "scancode": 54 }, { "keyActionType": "keystroke", - "scancode": 55, - "type": "basic" + "type": "basic", + "scancode": 55 }, { "keyActionType": "keystroke", - "scancode": 56, - "type": "basic" + "type": "basic", + "scancode": 56 }, { "keyActionType": "keystroke", - "modifierMask": 32, - "type": "basic" + "type": "basic", + "modifierMask": 32 }, + null, { "keyActionType": "keystroke", - "scancode": 44, - "type": "basic" + "type": "basic", + "scancode": 44 + }, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false }, { "keyActionType": "switchLayer", @@ -173,23 +179,18 @@ }, { "keyActionType": "keystroke", - "modifierMask": 64, - "type": "basic" + "type": "basic", + "modifierMask": 64 }, { "keyActionType": "keystroke", - "modifierMask": 128, - "type": "basic" + "type": "basic", + "modifierMask": 128 }, { "keyActionType": "keystroke", - "modifierMask": 16, - "type": "basic" - }, - { - "keyActionType": "switchLayer", - "layer": "mod", - "toggle": false + "type": "basic", + "modifierMask": 16 } ] }, @@ -199,68 +200,69 @@ "keyActions": [ { "keyActionType": "keystroke", - "scancode": 53, - "type": "basic" + "type": "basic", + "scancode": 53 }, { "keyActionType": "keystroke", - "scancode": 30, - "type": "basic" + "type": "basic", + "scancode": 30 }, { "keyActionType": "keystroke", - "scancode": 31, - "type": "basic" + "type": "basic", + "scancode": 31 }, { "keyActionType": "keystroke", - "scancode": 32, - "type": "basic" + "type": "basic", + "scancode": 32 }, { "keyActionType": "keystroke", - "scancode": 33, - "type": "basic" + "type": "basic", + "scancode": 33 }, { "keyActionType": "keystroke", - "scancode": 34, - "type": "basic" + "type": "basic", + "scancode": 34 }, { "keyActionType": "keystroke", - "scancode": 35, - "type": "basic" + "type": "basic", + "scancode": 35 }, { "keyActionType": "keystroke", - "scancode": 43, - "type": "basic" + "type": "basic", + "scancode": 43 }, { "keyActionType": "keystroke", - "scancode": 20, - "type": "basic" + "type": "basic", + "scancode": 20 }, { "keyActionType": "keystroke", - "scancode": 26, - "type": "basic" + "type": "basic", + "scancode": 26 }, { "keyActionType": "keystroke", - "scancode": 8, - "type": "basic" + "type": "basic", + "scancode": 8 }, { "keyActionType": "keystroke", - "scancode": 21, - "type": "basic" + "type": "basic", + "scancode": 21 }, + null, { "keyActionType": "keystroke", - "scancode": 23, - "type": "basic" + "type": "basic", + "scancode": 23 }, { "keyActionType": "switchLayer", @@ -269,89 +271,92 @@ }, { "keyActionType": "keystroke", - "scancode": 4, - "type": "basic" + "type": "basic", + "scancode": 4 }, { "keyActionType": "keystroke", - "scancode": 22, - "type": "basic" + "type": "basic", + "scancode": 22 }, { "keyActionType": "keystroke", - "scancode": 7, - "type": "basic" + "type": "basic", + "scancode": 7 }, { "keyActionType": "keystroke", - "scancode": 9, - "type": "basic" + "type": "basic", + "scancode": 9 + }, + null, + { + "keyActionType": "keystroke", + "type": "basic", + "scancode": 10 }, { "keyActionType": "keystroke", - "scancode": 10, - "type": "basic" + "type": "basic", + "modifierMask": 2 + }, + null, + { + "keyActionType": "keystroke", + "type": "basic", + "scancode": 29 }, { "keyActionType": "keystroke", - "modifierMask": 2, - "type": "basic" + "type": "basic", + "scancode": 27 }, { "keyActionType": "keystroke", - "scancode": 29, - "type": "basic" + "type": "basic", + "scancode": 6 }, { "keyActionType": "keystroke", - "scancode": 27, - "type": "basic" + "type": "basic", + "scancode": 25 }, { "keyActionType": "keystroke", - "scancode": 6, - "type": "basic" + "type": "basic", + "scancode": 5 }, { "keyActionType": "keystroke", - "scancode": 25, - "type": "basic" + "type": "basic", + "modifierMask": 1 }, { "keyActionType": "keystroke", - "scancode": 5, - "type": "basic" + "type": "basic", + "modifierMask": 8 }, { "keyActionType": "keystroke", - "modifierMask": 1, - "type": "basic" - }, - { - "keyActionType": "keystroke", - "modifierMask": 8, - "type": "basic" - }, - { - "keyActionType": "keystroke", - "modifierMask": 4, - "type": "basic" + "type": "basic", + "modifierMask": 4 }, { "keyActionType": "switchLayer", "layer": "fn", "toggle": false }, + { + "keyActionType": "keystroke", + "type": "basic", + "scancode": 44 + }, { "keyActionType": "switchLayer", "layer": "mod", "toggle": false }, - { - "keyActionType": "keystroke", - "scancode": 44, - "type": "basic" - } + null ] }, { @@ -376,23 +381,18 @@ null, { "keyActionType": "keystroke", - "scancode": 75, - "type": "basic" + "type": "basic", + "scancode": 74 }, { "keyActionType": "keystroke", - "scancode": 74, - "type": "basic" + "type": "basic", + "scancode": 82 }, { "keyActionType": "keystroke", - "scancode": 82, - "type": "basic" - }, - { - "keyActionType": "keystroke", - "scancode": 77, - "type": "basic" + "type": "basic", + "scancode": 77 }, null, null, @@ -400,27 +400,32 @@ null, { "keyActionType": "keystroke", - "scancode": 78, - "type": "basic" + "type": "basic", + "scancode": 75 }, { "keyActionType": "keystroke", - "scancode": 80, - "type": "basic" + "type": "basic", + "scancode": 80 }, { "keyActionType": "keystroke", - "scancode": 81, - "type": "basic" + "type": "basic", + "scancode": 81 }, { "keyActionType": "keystroke", - "scancode": 79, - "type": "basic" + "type": "basic", + "scancode": 79 }, null, null, null, + { + "keyActionType": "keystroke", + "type": "basic", + "scancode": 78 + }, null, null, { @@ -430,15 +435,21 @@ null, { "keyActionType": "keystroke", - "scancode": 118, - "type": "basic" + "type": "basic", + "scancode": 118 }, { "keyActionType": "keystroke", - "modifierMask": 32, - "type": "basic" + "type": "basic", + "modifierMask": 32 }, null, + null, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + }, { "keyActionType": "switchLayer", "layer": "fn", @@ -446,23 +457,18 @@ }, { "keyActionType": "keystroke", - "modifierMask": 64, - "type": "basic" + "type": "basic", + "modifierMask": 64 }, { "keyActionType": "keystroke", - "modifierMask": 128, - "type": "basic" + "type": "basic", + "modifierMask": 128 }, { "keyActionType": "keystroke", - "modifierMask": 16, - "type": "basic" - }, - { - "keyActionType": "switchLayer", - "layer": "mod", - "toggle": false + "type": "basic", + "modifierMask": 16 } ] }, @@ -483,6 +489,7 @@ null, null, null, + null, { "keyActionType": "switchLayer", "layer": "mouse", @@ -493,36 +500,39 @@ null, null, null, + null, { "keyActionType": "keystroke", - "modifierMask": 2, - "type": "basic" + "type": "basic", + "modifierMask": 2 }, null, null, null, null, null, + null, { "keyActionType": "keystroke", - "modifierMask": 1, - "type": "basic" + "type": "basic", + "modifierMask": 1 }, { "keyActionType": "keystroke", - "modifierMask": 8, - "type": "basic" + "type": "basic", + "modifierMask": 8 }, { "keyActionType": "keystroke", - "modifierMask": 4, - "type": "basic" + "type": "basic", + "modifierMask": 4 }, { "keyActionType": "switchLayer", "layer": "fn", "toggle": false }, + null, { "keyActionType": "switchLayer", "layer": "mod", @@ -546,21 +556,20 @@ null, null, null, - null, { "keyActionType": "keystroke", - "scancode": 176, - "type": "media" + "type": "media", + "scancode": 176 }, { "keyActionType": "keystroke", - "scancode": 233, - "type": "media" + "type": "media", + "scancode": 233 }, { "keyActionType": "keystroke", - "scancode": 183, - "type": "media" + "type": "media", + "scancode": 183 }, null, null, @@ -569,37 +578,44 @@ null, { "keyActionType": "keystroke", - "scancode": 182, - "type": "media" + "type": "media", + "scancode": 182 }, { "keyActionType": "keystroke", - "scancode": 234, - "type": "media" + "type": "media", + "scancode": 234 }, { "keyActionType": "keystroke", - "scancode": 181, - "type": "media" + "type": "media", + "scancode": 181 }, null, null, null, null, null, + null, { "keyActionType": "keystroke", - "scancode": 226, - "type": "media" + "type": "media", + "scancode": 226 }, null, null, { "keyActionType": "keystroke", - "modifierMask": 32, - "type": "basic" + "type": "basic", + "modifierMask": 32 }, null, + null, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + }, { "keyActionType": "switchLayer", "layer": "fn", @@ -607,23 +623,18 @@ }, { "keyActionType": "keystroke", - "modifierMask": 64, - "type": "basic" + "type": "basic", + "modifierMask": 64 }, { "keyActionType": "keystroke", - "modifierMask": 128, - "type": "basic" + "type": "basic", + "modifierMask": 128 }, { "keyActionType": "keystroke", - "modifierMask": 16, - "type": "basic" - }, - { - "keyActionType": "switchLayer", - "layer": "mod", - "toggle": false + "type": "basic", + "modifierMask": 16 } ] }, @@ -644,6 +655,7 @@ null, null, null, + null, { "keyActionType": "switchLayer", "layer": "mouse", @@ -654,36 +666,39 @@ null, null, null, + null, { "keyActionType": "keystroke", - "modifierMask": 2, - "type": "basic" + "type": "basic", + "modifierMask": 2 }, null, null, null, null, null, + null, { "keyActionType": "keystroke", - "modifierMask": 1, - "type": "basic" + "type": "basic", + "modifierMask": 1 }, { "keyActionType": "keystroke", - "modifierMask": 8, - "type": "basic" + "type": "basic", + "modifierMask": 8 }, { "keyActionType": "keystroke", - "modifierMask": 4, - "type": "basic" + "type": "basic", + "modifierMask": 4 }, { "keyActionType": "switchLayer", "layer": "fn", "toggle": false }, + null, { "keyActionType": "switchLayer", "layer": "mod", @@ -707,10 +722,6 @@ null, null, null, - { - "keyActionType": "mouse", - "mouseAction": "scrollUp" - }, null, { "keyActionType": "mouse", @@ -723,7 +734,7 @@ null, { "keyActionType": "mouse", - "mouseAction": "scrollDown" + "mouseAction": "scrollUp" }, { "keyActionType": "mouse", @@ -740,6 +751,10 @@ null, null, null, + { + "keyActionType": "mouse", + "mouseAction": "scrollDown" + }, null, null, null, @@ -747,6 +762,12 @@ null, null, null, + null, + { + "keyActionType": "switchLayer", + "layer": "mod", + "toggle": false + }, { "keyActionType": "switchLayer", "layer": "fn", @@ -754,23 +775,18 @@ }, { "keyActionType": "keystroke", - "modifierMask": 64, - "type": "basic" + "type": "basic", + "modifierMask": 64 }, { "keyActionType": "keystroke", - "modifierMask": 128, - "type": "basic" + "type": "basic", + "modifierMask": 128 }, { "keyActionType": "keystroke", - "modifierMask": 16, - "type": "basic" - }, - { - "keyActionType": "switchLayer", - "layer": "mod", - "toggle": false + "type": "basic", + "modifierMask": 16 } ] }, @@ -791,6 +807,7 @@ null, null, null, + null, { "keyActionType": "switchLayer", "layer": "mouse", @@ -816,35 +833,38 @@ null, null, null, + null, + null, { "keyActionType": "keystroke", - "modifierMask": 1, - "type": "basic" + "type": "basic", + "modifierMask": 1 }, { "keyActionType": "keystroke", - "modifierMask": 8, - "type": "basic" + "type": "basic", + "modifierMask": 8 }, { "keyActionType": "keystroke", - "modifierMask": 4, - "type": "basic" + "type": "basic", + "modifierMask": 4 }, { "keyActionType": "switchLayer", "layer": "fn", "toggle": false }, + { + "keyActionType": "mouse", + "mouseAction": "decelerate" + }, { "keyActionType": "switchLayer", "layer": "mod", "toggle": false }, - { - "keyActionType": "mouse", - "mouseAction": "decelerate" - } + null ] } ] @@ -905,6 +925,7 @@ null, null, null, + null, null ] }, @@ -942,6 +963,10 @@ null, null, null, + null, + null, + null, + null, null ] }, @@ -951,8 +976,8 @@ "keyActions": [ { "keyActionType": "keystroke", - "scancode": 111, - "type": "basic" + "type": "basic", + "scancode": 111 } ] } @@ -997,6 +1022,7 @@ null, null, null, + null, null ] }, @@ -1006,8 +1032,8 @@ "keyActions": [ { "keyActionType": "keystroke", - "scancode": 111, - "type": "basic" + "type": "basic", + "scancode": 111 }, null, null, @@ -1038,6 +1064,10 @@ null, null, null, + null, + null, + null, + null, null ] } @@ -1082,6 +1112,7 @@ null, null, null, + null, null ] }, @@ -1091,8 +1122,8 @@ "keyActions": [ { "keyActionType": "keystroke", - "scancode": 111, - "type": "basic" + "type": "basic", + "scancode": 111 }, null, null, @@ -1123,6 +1154,10 @@ null, null, null, + null, + null, + null, + null, null ] } @@ -1167,6 +1202,7 @@ null, null, null, + null, null ] }, @@ -1176,8 +1212,8 @@ "keyActions": [ { "keyActionType": "keystroke", - "scancode": 111, - "type": "basic" + "type": "basic", + "scancode": 111 }, null, null, @@ -1208,6 +1244,10 @@ null, null, null, + null, + null, + null, + null, null ] } @@ -1260,6 +1300,7 @@ null, null, null, + null, null ] }, @@ -1297,6 +1338,10 @@ null, null, null, + null, + null, + null, + null, null ] } @@ -1341,6 +1386,7 @@ null, null, null, + null, null ] }, @@ -1378,6 +1424,10 @@ null, null, null, + null, + null, + null, + null, null ] } @@ -1422,6 +1472,7 @@ null, null, null, + null, null ] }, @@ -1459,6 +1510,10 @@ null, null, null, + null, + null, + null, + null, null ] } @@ -1503,6 +1558,7 @@ null, null, null, + null, null ] }, @@ -1540,6 +1596,10 @@ null, null, null, + null, + null, + null, + null, null ] } @@ -1650,4 +1710,4 @@ ] } ] -} +} \ No newline at end of file diff --git a/shared/src/pipes/index.ts b/shared/src/pipes/index.ts new file mode 100644 index 00000000..6600ceef --- /dev/null +++ b/shared/src/pipes/index.ts @@ -0,0 +1 @@ +export { SafeStylePipe } from './safe-style.pipe'; diff --git a/shared/src/pipes/safe-style.pipe.ts b/shared/src/pipes/safe-style.pipe.ts new file mode 100644 index 00000000..4dbb4b6f --- /dev/null +++ b/shared/src/pipes/safe-style.pipe.ts @@ -0,0 +1,14 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { SafeStyle, DomSanitizer} from '@angular/platform-browser'; + +@Pipe({ + name: 'safeStyle' +}) +export class SafeStylePipe implements PipeTransform { + + constructor(private sanitizer: DomSanitizer) {} + + transform(style: string): SafeStyle { + return this.sanitizer.bypassSecurityTrustStyle(style); + } +} diff --git a/web/src/app.module.ts b/web/src/app.module.ts index 3b7c2d07..eb5d273c 100644 --- a/web/src/app.module.ts +++ b/web/src/app.module.ts @@ -63,6 +63,7 @@ import { SvgKeyboardWrapComponent } from './shared/components/svg/wrap'; import { MainAppComponent, appRoutingProviders, routing } from './main-app'; import { CancelableDirective } from './shared/directives'; +import { SafeStylePipe } from './shared/pipes'; import { CaptureService } from './shared/services/capture.service'; import { MapperService } from './shared/services/mapper.service'; @@ -124,7 +125,8 @@ import { reducer } from '../../shared/src/store/reducers/index'; AddOnComponent, SettingsComponent, KeyboardSliderComponent, - CancelableDirective + CancelableDirective, + SafeStylePipe ], imports: [ BrowserModule,