jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix cursor jump in light color pickers (#24312)

Browse Source
This commit is contained in:
Paul Bottein 2025-02-19 10:30:24 +01:00 committed by GitHub
parent c7a46ec25b
commit ab4efb7412
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
View File

@ -49,6 +49,8 @@ class LightRgbColorPicker extends LitElement {
@state() private _hsPickerValue?: [number, number]; @state() private _hsPickerValue?: [number, number];
@state() private _isInteracting?: boolean;
protected render() { protected render() {
if (!this.stateObj) { if (!this.stateObj) {
return nothing; return nothing;
@ -211,7 +213,10 @@ class LightRgbColorPicker extends LitElement {
public willUpdate(changedProps: PropertyValues) { public willUpdate(changedProps: PropertyValues) {
super.willUpdate(changedProps); super.willUpdate(changedProps);
if (!changedProps.has("entityId") && !changedProps.has("hass")) { if (
this._isInteracting ||
(!changedProps.has("entityId") && !changedProps.has("hass"))
) {
return; return;
} }
@ -219,10 +224,13 @@ class LightRgbColorPicker extends LitElement {
} }
private _hsColorCursorMoved(ev: CustomEvent) { private _hsColorCursorMoved(ev: CustomEvent) {
if (!ev.detail.value) { const color = ev.detail.value;
this._isInteracting = color !== undefined;
if (color === undefined) {
return; return;
} }
this._hsPickerValue = ev.detail.value; this._hsPickerValue = color;
this._throttleUpdateColor(); this._throttleUpdateColor();
} }

13
src/dialogs/more-info/components/lights/light-color-temp-picker.ts
View File

@ -22,7 +22,6 @@ import { DOMAIN_ATTRIBUTES_UNITS } from "../../../../data/entity_attributes";
declare global { declare global {
interface HASSDomEvents { interface HASSDomEvents {
"color-changed": LightColor; "color-changed": LightColor;
"color-hovered": LightColor | undefined;
} }
} }
@ -54,6 +53,8 @@ class LightColorTempPicker extends LitElement {
@state() private _ctPickerValue?: number; @state() private _ctPickerValue?: number;
@state() private _isInteracting?: boolean;
protected render() { protected render() {
if (!this.stateObj) { if (!this.stateObj) {
return nothing; return nothing;
@ -113,7 +114,7 @@ class LightColorTempPicker extends LitElement {
public willUpdate(changedProps: PropertyValues) { public willUpdate(changedProps: PropertyValues) {
super.willUpdate(changedProps); super.willUpdate(changedProps);
if (!changedProps.has("stateObj")) { if (this._isInteracting || !changedProps.has("stateObj")) {
return; return;
} }
@ -123,16 +124,14 @@ class LightColorTempPicker extends LitElement {
private _ctColorCursorMoved(ev: CustomEvent) { private _ctColorCursorMoved(ev: CustomEvent) {
const ct = ev.detail.value; const ct = ev.detail.value;
this._isInteracting = ct !== undefined;
if (isNaN(ct) || this._ctPickerValue === ct) { if (isNaN(ct) || this._ctPickerValue === ct) {
return; return;
} }
this._ctPickerValue = ct; this._ctPickerValue = ct;
fireEvent(this, "color-hovered", {
color_temp_kelvin: ct,
});
this._throttleUpdateColorTemp(); this._throttleUpdateColorTemp();
} }
@ -143,8 +142,6 @@ class LightColorTempPicker extends LitElement {
private _ctColorChanged(ev: CustomEvent) { private _ctColorChanged(ev: CustomEvent) {
const ct = ev.detail.value; const ct = ev.detail.value;
fireEvent(this, "color-hovered", undefined);
if (isNaN(ct) || this._ctPickerValue === ct) { if (isNaN(ct) || this._ctPickerValue === ct) {
return; return;
} }