jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix NumberInput widget not being reactive to changes to the unit (#2080) 

Svelte watch unit
This commit is contained in:
James Lindsay 2024-10-26 21:40:35 +01:00 committed by GitHub
parent c27d8dc5dc
commit 9eeefaad90
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/widgets/inputs/NumberInput.svelte
View File

@ -58,7 +58,7 @@
let self: FieldInput | undefined; let self: FieldInput | undefined;
let inputRangeElement: HTMLInputElement | undefined; let inputRangeElement: HTMLInputElement | undefined;
let text = displayText(value); let text = displayText(value, unit);
let editing = false; let editing = false;
// Stays in sync with a binding to the actual input range slider element. // Stays in sync with a binding to the actual input range slider element.
let rangeSliderValue = value !== undefined ? value : 0; let rangeSliderValue = value !== undefined ? value : 0;
@ -78,7 +78,7 @@
// Track whether the Ctrl key is currently held down. // Track whether the Ctrl key is currently held down.
let ctrlKeyDown = false; let ctrlKeyDown = false;
$: watchValue(value); $: watchValue(value, unit);
$: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any"; $: sliderStepValue = isInteger ? (step === undefined ? 1 : step) : "any";
$: styles = { $: styles = {
@ -104,7 +104,7 @@
// =============================== // ===============================
// Called only when `value` is changed from outside this component. // Called only when `value` is changed from outside this component.
function watchValue(value: number | undefined) { function watchValue(value: number | undefined, unit: string) {
// Don't update if the slider is currently being dragged (we don't want the backend fighting with the user's drag) // Don't update if the slider is currently being dragged (we don't want the backend fighting with the user's drag)
if (rangeSliderClickDragState === "Dragging") return; if (rangeSliderClickDragState === "Dragging") return;
@ -123,7 +123,7 @@
if (typeof min === "number") sanitized = Math.max(sanitized, min); if (typeof min === "number") sanitized = Math.max(sanitized, min);
if (typeof max === "number") sanitized = Math.min(sanitized, max); if (typeof max === "number") sanitized = Math.min(sanitized, max);
text = displayText(sanitized); text = displayText(sanitized, unit);
} }
// Called internally to update the value indirectly by informing the parent component of the new value, // Called internally to update the value indirectly by informing the parent component of the new value,
@ -143,7 +143,7 @@
rangeSliderValueAsRendered = newValueValidated; rangeSliderValueAsRendered = newValueValidated;
} }
text = displayText(newValueValidated); text = displayText(newValueValidated, unit);
if (newValue !== undefined) dispatch("value", newValueValidated); if (newValue !== undefined) dispatch("value", newValueValidated);
@ -156,7 +156,7 @@
// ================ // ================
// Calculates the string to display when the field is not being edited. // Calculates the string to display when the field is not being edited.
function displayText(displayValue: number | undefined): string { function displayText(displayValue: number | undefined, unit: string): string {
if (displayValue === undefined) return "-"; if (displayValue === undefined) return "-";
const roundingPower = 10 ** Math.max(displayDecimalPlaces, 0); const roundingPower = 10 ** Math.max(displayDecimalPlaces, 0);