From c7b575cf3da9b236a1e5b730f7f99e520f16a93b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kiss=20R=C3=B3bert?= Date: Thu, 21 Nov 2024 21:15:38 +0100 Subject: [PATCH 1/2] fix: UHK 80 merge keymap placement --- .../app/components/svg/keyboard/svg-keyboard.component.ts | 5 +++-- .../uhk-web/src/app/services/svg-module-provider.service.ts | 6 +++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts index 1dcc2bbd..e898a299 100644 --- a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts +++ b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts @@ -14,6 +14,7 @@ import { animate, state, trigger, style, transition } from '@angular/animations' import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; import { BacklightingMode, + getDefaultHalvesInfo, HalvesInfo, KeyAction, KeyboardLayout, @@ -134,7 +135,7 @@ export class SvgKeyboardComponent implements AfterViewInit, OnInit, OnChanges { private sanitizer: DomSanitizer, private cdRef: ChangeDetectorRef) { this.modules = []; - this.viewBox = this.svgModuleProvider.getViewBox(); + this.viewBox = this.svgModuleProvider.getViewBox(getDefaultHalvesInfo()); this.modulesState = {}; this.halvesInfo = { areHalvesMerged: true, @@ -293,7 +294,7 @@ export class SvgKeyboardComponent implements AfterViewInit, OnInit, OnChanges { private setModules() { this.descriptionAnimationParams = this.svgModuleProvider.getDescriptionAnimationParams(); - this.viewBox = this.svgModuleProvider.getViewBox(); + this.viewBox = this.svgModuleProvider.getViewBox(this.halvesInfo); this.modules = this.svgModuleProvider.getSvgModules(this.keyboardLayout, this.halvesInfo); this.separator = this.svgModuleProvider.getSvgSeparator(); this.separatorStyle = this.sanitizer.bypassSecurityTrustStyle(this.separator.style); diff --git a/packages/uhk-web/src/app/services/svg-module-provider.service.ts b/packages/uhk-web/src/app/services/svg-module-provider.service.ts index a3a81227..61d2f08b 100644 --- a/packages/uhk-web/src/app/services/svg-module-provider.service.ts +++ b/packages/uhk-web/src/app/services/svg-module-provider.service.ts @@ -115,7 +115,11 @@ export class SvgModuleProviderService implements OnDestroy { return this.separator; } - getViewBox(): string { + getViewBox(halvesInfo: HalvesInfo): string { + if (this.connectedDeviceId === UHK_80_DEVICE.id && halvesInfo.areHalvesMerged) { + return '-520 670 1250 600'; + } + return this.viewBox; } From a060ab8e6d11ec2cca0ea4918dfc61d82508c54d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kiss=20R=C3=B3bert?= Date: Thu, 21 Nov 2024 22:12:09 +0100 Subject: [PATCH 2/2] fix: position --- .../svg/keyboard/svg-keyboard.component.ts | 7 +- .../services/svg-module-provider.service.ts | 93 ++++++++++++------- 2 files changed, 64 insertions(+), 36 deletions(-) diff --git a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts index e898a299..9a646e6d 100644 --- a/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts +++ b/packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts @@ -14,7 +14,6 @@ import { animate, state, trigger, style, transition } from '@angular/animations' import { DomSanitizer, SafeStyle } from '@angular/platform-browser'; import { BacklightingMode, - getDefaultHalvesInfo, HalvesInfo, KeyAction, KeyboardLayout, @@ -135,7 +134,7 @@ export class SvgKeyboardComponent implements AfterViewInit, OnInit, OnChanges { private sanitizer: DomSanitizer, private cdRef: ChangeDetectorRef) { this.modules = []; - this.viewBox = this.svgModuleProvider.getViewBox(getDefaultHalvesInfo()); + this.viewBox = this.svgModuleProvider.getViewBox(); this.modulesState = {}; this.halvesInfo = { areHalvesMerged: true, @@ -294,8 +293,8 @@ export class SvgKeyboardComponent implements AfterViewInit, OnInit, OnChanges { private setModules() { this.descriptionAnimationParams = this.svgModuleProvider.getDescriptionAnimationParams(); - this.viewBox = this.svgModuleProvider.getViewBox(this.halvesInfo); - this.modules = this.svgModuleProvider.getSvgModules(this.keyboardLayout, this.halvesInfo); + this.viewBox = this.svgModuleProvider.getViewBox(); + this.modules = this.svgModuleProvider.getSvgModules(this.keyboardLayout); this.separator = this.svgModuleProvider.getSvgSeparator(); this.separatorStyle = this.sanitizer.bypassSecurityTrustStyle(this.separator.style); } diff --git a/packages/uhk-web/src/app/services/svg-module-provider.service.ts b/packages/uhk-web/src/app/services/svg-module-provider.service.ts index 61d2f08b..8315b88a 100644 --- a/packages/uhk-web/src/app/services/svg-module-provider.service.ts +++ b/packages/uhk-web/src/app/services/svg-module-provider.service.ts @@ -1,12 +1,20 @@ import { Injectable, OnDestroy } from '@angular/core'; import { Store } from '@ngrx/store'; +import { isEqual } from 'lodash'; import { Subscription } from 'rxjs'; -import { HalvesInfo, KeyboardLayout, LeftSlotModules, RightSlotModules, UHK_60_V2_DEVICE, UHK_80_DEVICE } from 'uhk-common'; +import { + getDefaultHalvesInfo, + HalvesInfo, + KeyboardLayout, + LeftSlotModules, + RightSlotModules, + UHK_60_V2_DEVICE, + UHK_80_DEVICE, +} from 'uhk-common'; import { SvgModule } from '../components/svg/module'; import { convertXmlToSvgSeparator, SvgSeparator } from '../components/svg/separator'; -import { getConnectedDevice } from '../store/index'; -import { AppState } from '../store/index'; +import { AppState, getConnectedDevice, getHalvesInfo } from '../store/index'; export interface DescriptionAnimationParams { down: string; @@ -26,6 +34,7 @@ export const UHK_60_DESCRIPTION_ANIMATION_PARAMS: DescriptionAnimationParams = O export class SvgModuleProviderService implements OnDestroy { private ansiLeft: SvgModule; + private halvesInfo: HalvesInfo = getDefaultHalvesInfo(); private isoLeft: SvgModule; private keyClusterLeft: SvgModule; private right: SvgModule; @@ -48,28 +57,16 @@ export class SvgModuleProviderService implements OnDestroy { } this.connectedDeviceId = connectedDeviceId; + this.setModules(); + })); - switch (connectedDeviceId) { - case UHK_80_DEVICE.id: { - this.descriptionAnimationParams = { - down: '-0.5em', - up: '-5.5%', - upLeftKeyCluster: '-4.5%', - upRightModule: '-5.5%', - }; - this.separator = convertXmlToSvgSeparator(require('!xml-loader!../../devices/uhk80-right/separator.svg').svg); - this.right = new SvgModule(require('!xml-loader!../../devices/uhk80-right/layout.svg').svg); - this.isoLeft = new SvgModule(require('!xml-loader!../../modules/uhk80-left/layout-iso.svg').svg); - this.ansiLeft = new SvgModule(require('!xml-loader!../../modules/uhk80-left/layout-ansi.svg').svg); - this.viewBox = '-550 610 1250 600'; - break; - } - - default: { - this.setUHK60Modules(); - break; - } + this.subscriptions.add(this._store.select(getHalvesInfo).subscribe(halvesInfo => { + if (isEqual(this.halvesInfo, halvesInfo)) { + return; } + + this.halvesInfo = halvesInfo; + this.setModules(); })); } @@ -81,20 +78,20 @@ export class SvgModuleProviderService implements OnDestroy { return this.descriptionAnimationParams; } - getSvgModules(layout = KeyboardLayout.ANSI, halvesInfo: HalvesInfo): SvgModule[] { + getSvgModules(layout = KeyboardLayout.ANSI): SvgModule[] { const modules = [this.getRightModule()]; - if (halvesInfo.isLeftHalfConnected) { + if (this.halvesInfo.isLeftHalfConnected) { modules.push(this.getLeftModule(layout)); } - switch (halvesInfo.leftModuleSlot) { + switch (this.halvesInfo.leftModuleSlot) { case LeftSlotModules.KeyClusterLeft: modules.push(this.getKeyClusterLeft()); break; } - switch (halvesInfo.rightModuleSlot) { + switch (this.halvesInfo.rightModuleSlot) { case RightSlotModules.TouchpadRight: modules.push(this.getTouchPadRight()); break; @@ -115,11 +112,7 @@ export class SvgModuleProviderService implements OnDestroy { return this.separator; } - getViewBox(halvesInfo: HalvesInfo): string { - if (this.connectedDeviceId === UHK_80_DEVICE.id && halvesInfo.areHalvesMerged) { - return '-520 670 1250 600'; - } - + getViewBox(): string { return this.viewBox; } @@ -143,6 +136,42 @@ export class SvgModuleProviderService implements OnDestroy { return this.right; } + private setModules() { + switch (this.connectedDeviceId) { + case UHK_80_DEVICE.id: { + this.separator = convertXmlToSvgSeparator(require('!xml-loader!../../devices/uhk80-right/separator.svg').svg); + this.right = new SvgModule(require('!xml-loader!../../devices/uhk80-right/layout.svg').svg); + this.isoLeft = new SvgModule(require('!xml-loader!../../modules/uhk80-left/layout-iso.svg').svg); + this.ansiLeft = new SvgModule(require('!xml-loader!../../modules/uhk80-left/layout-ansi.svg').svg); + + if (this.halvesInfo?.areHalvesMerged) { + this.descriptionAnimationParams = { + down: '-4em', + up: '-5.5%', + upLeftKeyCluster: '-4.5%', + upRightModule: '-5.5%', + }; + this.viewBox = '-520 660 1250 600'; + } + else { + this.descriptionAnimationParams = { + down: '-0.5em', + up: '-5.5%', + upLeftKeyCluster: '-4.5%', + upRightModule: '-5.5%', + }; + this.viewBox = '-550 610 1250 600'; + } + break; + } + + default: { + this.setUHK60Modules(); + break; + } + } + } + private getTouchPadRight(): SvgModule { if (!this.touchPadRight) { this.touchPadRight = new SvgModule(require('!xml-loader!../../modules/touchpadright/module.svg').svg);