fix: disable eyeDropper of color picker on Wayland

packages/uhk-agent/src/services/app.service.ts

@@ -5,7 +5,7 @@ import * as os from 'os';
 import { AppStartInfo, CommandLineArgs, IpcEvents, LogService } from 'uhk-common';
 import { MainServiceBase } from './main-service-base';
 import { DeviceService } from './device.service';
-import { getUdevFileContentAsync } from '../util';
+import { getUdevFileContentAsync, isRunningOnWayland } from '../util';
 
 export class AppService extends MainServiceBase {
     constructor(protected logService: LogService,
@@ -43,6 +43,7 @@ export class AppService extends MainServiceBase {
                     'disable-agent-update-protection': this.options['disable-agent-update-protection'] || false,
                     log: this.options.log
                 },
+                isRunningOnWayland: isRunningOnWayland(),
                 platform: process.platform as string,
                 osVersion: os.release(),
                 udevFileContent: await getUdevFileContentAsync(this.rootDir)

packages/uhk-agent/src/util/index.ts

@@ -10,6 +10,7 @@ export * from './get-updater-logger';
 export * from './get-user-config-from-history-async';
 export * from './get-user-config-history-dir-async';
 export * from './get-window-background-color';
+export * from './is-running-on-wayland';
 export * from './load-user-config-from-binary-file';
 export * from './load-user-config-history-async';
 export * from './make-folder-writeable-to-user-on-linux';

packages/uhk-agent/src/util/is-running-on-wayland.ts

@@ -0,0 +1,7 @@
+import process from "node:process";
+
+export function isRunningOnWayland(): boolean {
+    return !!(process.env.WAYLAND_DISPLAY ||
+        process.env.XDG_SESSION_TYPE === 'wayland' ||
+        process.env.GDK_BACKEND === 'wayland');
+}

packages/uhk-common/src/models/app-start-info.ts

@@ -5,4 +5,5 @@ export interface AppStartInfo {
     platform: string;
     osVersion: string;
     udevFileContent: string;
+    isRunningOnWayland: boolean;
 }

packages/uhk-web/src/app/components/device/led-settings/functional-backlight-color.component.html

@@ -4,7 +4,7 @@
            (colorPickerSelect)="onColorChanged($event)"
            cpOutputFormat="hex"
            [cpSaveClickOutside]="false"
-           [cpEyeDropper]="true"
+           [cpEyeDropper]
            [cpOKButton]="true"
            cpOKButtonClass="btn btn-primary"
            [cpCancelButton]="true"

packages/uhk-web/src/app/components/layers/colors/color-palette-button.component.html

@@ -2,7 +2,7 @@
     [(colorPicker)]="editColor"
     cpOutputFormat="hex"
     [cpSaveClickOutside]="false"
-    [cpEyeDropper]="true"
+    [cpEyeDropper]
     [cpOKButton]="true"
     cpOKButtonClass="btn btn-primary"
     [cpCancelButton]="true"

packages/uhk-web/src/app/components/layers/layers.component.html

@@ -52,7 +52,7 @@
                     (colorPickerSelect)="onAddColor($event)"
                     cpOutputFormat="hex"
                     [cpSaveClickOutside]="false"
-                    [cpEyeDropper]="true"
+                    [cpEyeDropper]
                     [cpOKButton]="true"
                     cpOKButtonClass="btn btn-primary"
                     [cpCancelButton]="true"

packages/uhk-web/src/app/directives/ngx-color-picker-eye-dropper.ts

@@ -0,0 +1,29 @@
+import { Directive, OnDestroy, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { ColorPickerDirective } from 'ngx-color-picker';
+import { Subscription } from 'rxjs';
+
+import { AppState, isColorPickerEyeDropperEnabled } from '../store/index';
+
+@Directive({
+    selector: '[cpEyeDropper]',
+    standalone: true,
+})
+export class NgxColorPickerEyeDropper implements OnDestroy, OnInit {
+    private subscription: Subscription;
+
+    constructor(private store: Store<AppState>,
+                private colorPicker: ColorPickerDirective) {
+    }
+
+    ngOnInit() {
+        this.subscription = this.store.select(isColorPickerEyeDropperEnabled)
+            .subscribe(value => {
+                this.colorPicker.cpEyeDropper = value;
+            })
+    }
+
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+}

packages/uhk-web/src/app/shared.module.ts

@@ -99,6 +99,7 @@ import { appRoutingProviders, routing } from './app.routes';
 import { UhkAgentIconComponent } from './components/uhk-icon/uhk-agent-icon.component';
 
 import { CancelableDirective, ExternalUrlDirective } from './directives';
+import { NgxColorPickerEyeDropper } from './directives/ngx-color-picker-eye-dropper';
 import {
     AsHexColorPipe,
     EscapeHtmlPipe,
@@ -292,6 +293,7 @@ import appInitFactory from './services/app-init-factory';
     imports: [
         AngularSplitModule,
         CommonModule,
+        NgxColorPickerEyeDropper,
         ColorPickerDirective,
         BrowserAnimationsModule,
         FontAwesomeModule,

packages/uhk-web/src/app/store/index.ts

@@ -202,6 +202,7 @@ export const getUhkThemeColors = createSelector(getAppTheme, (theme): UhkThemeCo
     return  defaultUhkThemeColors(theme);
 });
 export const getPlatform = createSelector(appState, fromApp.getPlatform);
+export const isColorPickerEyeDropperEnabled = createSelector(appState, fromApp.isColorPickerEyeDropperEnabled);
 
 export const appUpdateState = (state: AppState) => state.appUpdate;
 export const getShowAppUpdateAvailable = createSelector(appUpdateState, fromAppUpdate.getShowAppUpdateAvailable);

packages/uhk-web/src/app/store/reducers/app.reducer.ts

@@ -21,6 +21,7 @@ export interface State {
     appTheme: AppTheme;
     animationEnabled: boolean;
     errorPanelHeight: number;
+    isRunningOnWayland: boolean;
     started: boolean;
     commandLineArgs: CommandLineArgs;
     undoableNotification?: Notification;
@@ -42,6 +43,7 @@ export const initialState: State = {
     appTheme: AppTheme.System,
     animationEnabled: true,
     errorPanelHeight: DEFAULT_ERROR_PANEL_HEIGHT,
+    isRunningOnWayland: false,
     started: false,
     commandLineArgs: {},
     navigationCountAfterNotification: 0,
@@ -70,6 +72,7 @@ export function reducer(
             return {
                 ...state,
                 commandLineArgs: payload.commandLineArgs,
+                isRunningOnWayland: payload.isRunningOnWayland,
                 platform: payload.platform,
                 osVersion: payload.osVersion,
                 udevFileContent: payload.udevFileContent
@@ -252,3 +255,4 @@ export const getAnimationEnabled = (state: State): boolean => state.animationEna
 export const getAppTheme = (state: State): AppTheme => state.appTheme;
 export const getHardwareConfiguration = (state: State): HardwareConfiguration => state.hardwareConfig;
 export const getPlatform = (state: State): string => state.platform;
+export const isColorPickerEyeDropperEnabled = (state: State): boolean => !state.isRunningOnWayland;