Skip to content

Commit

Permalink
Merge pull request #2478 from UltimateHackingKeyboard/fix-half-state-…
Browse files Browse the repository at this point in the history 
…detection

fix: haves info detection when user set switch keymap action
  • Loading branch information
@mondalaci
mondalaci authored Jan 5, 2025
2 parents b93deb7 + e97e9a2 commit afb15f8
Show file tree
Hide file tree
Showing 3 changed files with 48 additions and 49 deletions.
2 changes: 1 addition & 1 deletion packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
[moduleNavCircle]="module.moduleNavCircle"
[moduleNavPath]="module.moduleNavPath"
[selectedKey]="selectedKey"
[@fadeKeyboard]="{value:'', params: { animationTime: modulesState[module.id].animationTime } }"
[@fadeKeyboard]="{value:'', params: { animationTime: modulesState[module.id]?.animationTime || '0ms' } }"
[selected]="selectedKey?.moduleId === module.id"
[uhkThemeColors]="uhkThemeColors"
[lastEdited]="lastEditedKey?.moduleId === module.id"
Expand Down
7 changes: 3 additions & 4 deletions packages/uhk-web/src/app/components/svg/keyboard/svg-keyboard.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,6 @@ export class SvgKeyboardComponent implements AfterViewInit, OnInit, OnChanges {
private sanitizer: DomSanitizer,
private cdRef: ChangeDetectorRef) {
this.modules = [];
this.viewBox = this.svgModuleProvider.getViewBox();
this.modulesState = {};
this.halvesInfo = {
areHalvesMerged: true,
Expand Down Expand Up @@ -292,9 +291,9 @@ export class SvgKeyboardComponent implements AfterViewInit, OnInit, OnChanges {
}

private setModules() {
this.descriptionAnimationParams = this.svgModuleProvider.getDescriptionAnimationParams();
this.viewBox = this.svgModuleProvider.getViewBox();
this.modules = this.svgModuleProvider.getSvgModules(this.keyboardLayout);
this.descriptionAnimationParams = this.svgModuleProvider.getDescriptionAnimationParams(this.halvesInfo);
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);
}
Expand Down
88 changes: 44 additions & 44 deletions packages/uhk-web/src/app/services/svg-module-provider.service.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { Injectable, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import { isEqual } from 'lodash';
import { Subscription } from 'rxjs';
import {
getDefaultHalvesInfo,
HalvesInfo,
KeyboardLayout,
LeftSlotModules,
Expand All @@ -14,7 +12,7 @@ import {

import { SvgModule } from '../components/svg/module';
import { convertXmlToSvgSeparator, SvgSeparator } from '../components/svg/separator';
import { AppState, getConnectedDevice, getHalvesInfo } from '../store/index';
import { AppState, getConnectedDevice } from '../store/index';

export interface DescriptionAnimationParams {
down: string;
Expand All @@ -34,7 +32,6 @@ 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;
Expand All @@ -43,9 +40,7 @@ export class SvgModuleProviderService implements OnDestroy {
private trackBallRight: SvgModule;
private trackPointRight: SvgModule;
private connectedDeviceId = UHK_60_V2_DEVICE.id;
private descriptionAnimationParams: DescriptionAnimationParams;
private subscriptions = new Subscription();
private viewBox: string;

constructor(private _store: Store<AppState>) {
this.setUHK60Modules();
Expand All @@ -59,39 +54,52 @@ export class SvgModuleProviderService implements OnDestroy {
this.connectedDeviceId = connectedDeviceId;
this.setModules();
}));

this.subscriptions.add(this._store.select(getHalvesInfo).subscribe(halvesInfo => {
if (isEqual(this.halvesInfo, halvesInfo)) {
return;
}

this.halvesInfo = halvesInfo;
this.setModules();
}));
}

ngOnDestroy() {
this.subscriptions.unsubscribe();
}

getDescriptionAnimationParams(): DescriptionAnimationParams {
return this.descriptionAnimationParams;
getDescriptionAnimationParams(halvesInfo: HalvesInfo): DescriptionAnimationParams {
switch (this.connectedDeviceId) {
case UHK_80_DEVICE.id: {
if (halvesInfo?.areHalvesMerged) {
return {
down: '-4em',
up: '-5.5%',
upLeftKeyCluster: '-4.5%',
upRightModule: '-5.5%',
};
}

return {
down: '-0.5em',
up: '-5.5%',
upLeftKeyCluster: '-4.5%',
upRightModule: '-5.5%',
};
}

default: {
return UHK_60_DESCRIPTION_ANIMATION_PARAMS;
}
}
}

getSvgModules(layout = KeyboardLayout.ANSI): SvgModule[] {
getSvgModules(layout = KeyboardLayout.ANSI, halvesInfo: HalvesInfo): SvgModule[] {
const modules = [this.getRightModule()];

if (this.halvesInfo.isLeftHalfConnected) {
if (halvesInfo.isLeftHalfConnected) {
modules.push(this.getLeftModule(layout));
}

switch (this.halvesInfo.leftModuleSlot) {
switch (halvesInfo.leftModuleSlot) {
case LeftSlotModules.KeyClusterLeft:
modules.push(this.getKeyClusterLeft());
break;
}

switch (this.halvesInfo.rightModuleSlot) {
switch (halvesInfo.rightModuleSlot) {
case RightSlotModules.TouchpadRight:
modules.push(this.getTouchPadRight());
break;
Expand All @@ -112,8 +120,21 @@ export class SvgModuleProviderService implements OnDestroy {
return this.separator;
}

getViewBox(): string {
return this.viewBox;
getViewBox(halvesInfo: HalvesInfo): string {
switch (this.connectedDeviceId) {
case UHK_80_DEVICE.id: {
if (halvesInfo?.areHalvesMerged) {

return '-520 660 1250 600';
}

return'-550 610 1250 600';
}

default: {
return '-600 660 1250 600';
}
}
}

private getLeftModule(layout = KeyboardLayout.ANSI): SvgModule {
Expand Down Expand Up @@ -143,25 +164,6 @@ export class SvgModuleProviderService implements OnDestroy {
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;
}

Expand Down Expand Up @@ -197,11 +199,9 @@ export class SvgModuleProviderService implements OnDestroy {
}

private setUHK60Modules() {
this.descriptionAnimationParams = UHK_60_DESCRIPTION_ANIMATION_PARAMS;
this.separator = convertXmlToSvgSeparator(require('!xml-loader!../../devices/uhk60-right/separator.svg').svg);
this.right = new SvgModule(require('!xml-loader!../../devices/uhk60-right/layout.svg').svg);
this.isoLeft = new SvgModule(require('!xml-loader!../../modules/uhk60-left/layout-iso.svg').svg);
this.ansiLeft = new SvgModule(require('!xml-loader!../../modules/uhk60-left/layout-ansi.svg').svg);
this.viewBox = '-600 660 1250 600';
}
}

0 comments on commit afb15f8

Please sign in to comment.