mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Fix cursor jump in light color pickers (#24312)
This commit is contained in:
parent
c7a46ec25b
commit
ab4efb7412
@ -49,6 +49,8 @@ class LightRgbColorPicker extends LitElement {
|
||||
|
||||
@state() private _hsPickerValue?: [number, number];
|
||||
|
||||
@state() private _isInteracting?: boolean;
|
||||
|
||||
protected render() {
|
||||
if (!this.stateObj) {
|
||||
return nothing;
|
||||
@ -211,7 +213,10 @@ class LightRgbColorPicker extends LitElement {
|
||||
public willUpdate(changedProps: PropertyValues) {
|
||||
super.willUpdate(changedProps);
|
||||
|
||||
if (!changedProps.has("entityId") && !changedProps.has("hass")) {
|
||||
if (
|
||||
this._isInteracting ||
|
||||
(!changedProps.has("entityId") && !changedProps.has("hass"))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -219,10 +224,13 @@ class LightRgbColorPicker extends LitElement {
|
||||
}
|
||||
|
||||
private _hsColorCursorMoved(ev: CustomEvent) {
|
||||
if (!ev.detail.value) {
|
||||
const color = ev.detail.value;
|
||||
this._isInteracting = color !== undefined;
|
||||
|
||||
if (color === undefined) {
|
||||
return;
|
||||
}
|
||||
this._hsPickerValue = ev.detail.value;
|
||||
this._hsPickerValue = color;
|
||||
|
||||
this._throttleUpdateColor();
|
||||
}
|
||||
|
@ -22,7 +22,6 @@ import { DOMAIN_ATTRIBUTES_UNITS } from "../../../../data/entity_attributes";
|
||||
declare global {
|
||||
interface HASSDomEvents {
|
||||
"color-changed": LightColor;
|
||||
"color-hovered": LightColor | undefined;
|
||||
}
|
||||
}
|
||||
|
||||
@ -54,6 +53,8 @@ class LightColorTempPicker extends LitElement {
|
||||
|
||||
@state() private _ctPickerValue?: number;
|
||||
|
||||
@state() private _isInteracting?: boolean;
|
||||
|
||||
protected render() {
|
||||
if (!this.stateObj) {
|
||||
return nothing;
|
||||
@ -113,7 +114,7 @@ class LightColorTempPicker extends LitElement {
|
||||
public willUpdate(changedProps: PropertyValues) {
|
||||
super.willUpdate(changedProps);
|
||||
|
||||
if (!changedProps.has("stateObj")) {
|
||||
if (this._isInteracting || !changedProps.has("stateObj")) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -123,16 +124,14 @@ class LightColorTempPicker extends LitElement {
|
||||
private _ctColorCursorMoved(ev: CustomEvent) {
|
||||
const ct = ev.detail.value;
|
||||
|
||||
this._isInteracting = ct !== undefined;
|
||||
|
||||
if (isNaN(ct) || this._ctPickerValue === ct) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._ctPickerValue = ct;
|
||||
|
||||
fireEvent(this, "color-hovered", {
|
||||
color_temp_kelvin: ct,
|
||||
});
|
||||
|
||||
this._throttleUpdateColorTemp();
|
||||
}
|
||||
|
||||
@ -143,8 +142,6 @@ class LightColorTempPicker extends LitElement {
|
||||
private _ctColorChanged(ev: CustomEvent) {
|
||||
const ct = ev.detail.value;
|
||||
|
||||
fireEvent(this, "color-hovered", undefined);
|
||||
|
||||
if (isNaN(ct) || this._ctPickerValue === ct) {
|
||||
return;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user