mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2025-08-04 05:18:19 +00:00
Ability to debounce inputs going to the backend (#913)
added debouncer to slow updates to the backend Co-authored-by: Keavon Chambers <keavon@keavon.com>
This commit is contained in:
mfish33
Keavon Chambers
parent
72cd204c64
commit
be32f7949f
2 changed files with 58 additions and 33 deletions
|
|
@ -4,63 +4,53 @@
|
|||
<template>
|
||||
<div :class="`widget-${direction}`">
|
||||
<template v-for="([component, nextIsSuffix], index) in widgetsAndNextSiblingIsSuffix" :key="index">
|
||||
<CheckboxInput v-if="component.props.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widgetId, value)" />
|
||||
<CheckboxInput v-if="component.props.kind === 'CheckboxInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(index, value)" />
|
||||
<ColorInput
|
||||
v-if="component.props.kind === 'ColorInput'"
|
||||
v-bind="component.props"
|
||||
v-model:open="open"
|
||||
@update:value="(value: unknown) => updateLayout(component.widgetId, value)"
|
||||
@update:value="(value: unknown) => updateLayout(index, value)"
|
||||
:sharpRightCorners="nextIsSuffix"
|
||||
/>
|
||||
<DropdownInput
|
||||
v-if="component.props.kind === 'DropdownInput'"
|
||||
v-bind="component.props"
|
||||
v-model:open="open"
|
||||
@update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)"
|
||||
@update:selectedIndex="(value: number) => updateLayout(index, value)"
|
||||
:sharpRightCorners="nextIsSuffix"
|
||||
/>
|
||||
<FontInput
|
||||
v-if="component.props.kind === 'FontInput'"
|
||||
v-bind="component.props"
|
||||
v-model:open="open"
|
||||
@changeFont="(value: unknown) => updateLayout(component.widgetId, value)"
|
||||
@changeFont="(value: unknown) => updateLayout(index, value)"
|
||||
:sharpRightCorners="nextIsSuffix"
|
||||
/>
|
||||
<ParameterExposeButton v-if="component.props.kind === 'ParameterExposeButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" />
|
||||
<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
|
||||
<ParameterExposeButton v-if="component.props.kind === 'ParameterExposeButton'" v-bind="component.props" :action="() => updateLayout(index, undefined)" />
|
||||
<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(index, undefined)" :sharpRightCorners="nextIsSuffix" />
|
||||
<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
|
||||
<LayerReferenceInput v-if="component.props.kind === 'LayerReferenceInput'" v-bind="component.props" @update:value="(value: BigUint64Array) => updateLayout(component.widgetId, value)" />
|
||||
<LayerReferenceInput v-if="component.props.kind === 'LayerReferenceInput'" v-bind="component.props" @update:value="(value: BigUint64Array) => updateLayout(index, value)" />
|
||||
<NumberInput
|
||||
v-if="component.props.kind === 'NumberInput'"
|
||||
v-bind="component.props"
|
||||
@update:value="(value: number) => updateLayout(component.widgetId, value)"
|
||||
:incrementCallbackIncrease="() => updateLayout(component.widgetId, 'Increment')"
|
||||
:incrementCallbackDecrease="() => updateLayout(component.widgetId, 'Decrement')"
|
||||
@update:value="debouncer((value: number) => updateLayout(index, value)).updateValue"
|
||||
:incrementCallbackIncrease="() => updateLayout(index, 'Increment')"
|
||||
:incrementCallbackDecrease="() => updateLayout(index, 'Decrement')"
|
||||
:sharpRightCorners="nextIsSuffix"
|
||||
/>
|
||||
<OptionalInput v-if="component.props.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(component.widgetId, value)" />
|
||||
<PivotAssist v-if="component.props.kind === 'PivotAssist'" v-bind="component.props" @update:position="(value: string) => updateLayout(component.widgetId, value)" />
|
||||
<OptionalInput v-if="component.props.kind === 'OptionalInput'" v-bind="component.props" @update:checked="(value: boolean) => updateLayout(index, value)" />
|
||||
<PivotAssist v-if="component.props.kind === 'PivotAssist'" v-bind="component.props" @update:position="(value: string) => updateLayout(index, value)" />
|
||||
<PopoverButton v-if="component.props.kind === 'PopoverButton'" v-bind="component.props">
|
||||
<TextLabel :bold="true">{{ (component.props as any).header }}</TextLabel>
|
||||
<TextLabel :multiline="true">{{ (component.props as any).text }}</TextLabel>
|
||||
</PopoverButton>
|
||||
<RadioInput
|
||||
v-if="component.props.kind === 'RadioInput'"
|
||||
v-bind="component.props"
|
||||
@update:selectedIndex="(value: number) => updateLayout(component.widgetId, value)"
|
||||
:sharpRightCorners="nextIsSuffix"
|
||||
/>
|
||||
<RadioInput v-if="component.props.kind === 'RadioInput'" v-bind="component.props" @update:selectedIndex="(value: number) => updateLayout(index, value)" :sharpRightCorners="nextIsSuffix" />
|
||||
<Separator v-if="component.props.kind === 'Separator'" v-bind="component.props" />
|
||||
<SwatchPairInput v-if="component.props.kind === 'SwatchPairInput'" v-bind="component.props" />
|
||||
<TextAreaInput v-if="component.props.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(component.widgetId, value)" />
|
||||
<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
|
||||
<BreadcrumbTrailButtons v-if="component.props.kind === 'BreadcrumbTrailButtons'" v-bind="component.props" :action="(index: number) => updateLayout(component.widgetId, index)" />
|
||||
<TextInput
|
||||
v-if="component.props.kind === 'TextInput'"
|
||||
v-bind="component.props"
|
||||
@commitText="(value: string) => updateLayout(component.widgetId, value)"
|
||||
:sharpRightCorners="nextIsSuffix"
|
||||
/>
|
||||
<TextAreaInput v-if="component.props.kind === 'TextAreaInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(index, value)" />
|
||||
<TextButton v-if="component.props.kind === 'TextButton'" v-bind="component.props" :action="() => updateLayout(index, undefined)" :sharpRightCorners="nextIsSuffix" />
|
||||
<BreadcrumbTrailButtons v-if="component.props.kind === 'BreadcrumbTrailButtons'" v-bind="component.props" :action="(index: number) => updateLayout(index, index)" />
|
||||
<TextInput v-if="component.props.kind === 'TextInput'" v-bind="component.props" @commitText="(value: string) => updateLayout(index, value)" :sharpRightCorners="nextIsSuffix" />
|
||||
<TextLabel v-if="component.props.kind === 'TextLabel'" v-bind="withoutValue(component.props)">{{ (component.props as any).value }}</TextLabel>
|
||||
</template>
|
||||
</div>
|
||||
|
|
@ -126,6 +116,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
|
||||
import { debouncer } from "@/components/widgets/debounce";
|
||||
import type { Widget } from "@/wasm-communication/messages";
|
||||
import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "@/wasm-communication/messages";
|
||||
|
||||
|
|
@ -169,30 +160,33 @@ export default defineComponent({
|
|||
if (isWidgetRow(this.widgetData)) return "row";
|
||||
return "ERROR";
|
||||
},
|
||||
widgetsAndNextSiblingIsSuffix(): [Widget, boolean][] {
|
||||
widgets() {
|
||||
let widgets: Widget[] = [];
|
||||
if (isWidgetColumn(this.widgetData)) widgets = this.widgetData.columnWidgets;
|
||||
if (isWidgetRow(this.widgetData)) widgets = this.widgetData.rowWidgets;
|
||||
|
||||
return widgets.map((widget, index): [Widget, boolean] => {
|
||||
return widgets;
|
||||
},
|
||||
widgetsAndNextSiblingIsSuffix(): [Widget, boolean][] {
|
||||
return this.widgets.map((widget, index): [Widget, boolean] => {
|
||||
// A suffix widget is one that joins up with this widget at the end with only a 1px gap.
|
||||
// It uses the CSS sibling selector to give its own left edge corners zero radius.
|
||||
// But this JS is needed to set its preceding sibling widget's right edge corners to zero radius.
|
||||
const nextSiblingIsSuffix = SUFFIX_WIDGETS.includes(widgets[index + 1]?.props.kind);
|
||||
const nextSiblingIsSuffix = SUFFIX_WIDGETS.includes(this.widgets[index + 1]?.props.kind);
|
||||
|
||||
return [widget, nextSiblingIsSuffix];
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateLayout(widgetId: bigint, value: unknown) {
|
||||
this.editor.instance.updateLayout(this.layoutTarget, widgetId, value);
|
||||
updateLayout(index: number, value: unknown) {
|
||||
this.editor.instance.updateLayout(this.layoutTarget, this.widgets[index].widgetId, value);
|
||||
},
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
withoutValue(props: Record<string, any>): Record<string, unknown> {
|
||||
const { value: _, ...rest } = props;
|
||||
return rest;
|
||||
},
|
||||
debouncer,
|
||||
},
|
||||
components: {
|
||||
BreadcrumbTrailButtons,
|
||||
|
|
|
|||
31
frontend/src/components/widgets/debounce.ts
Normal file
31
frontend/src/components/widgets/debounce.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
export type Debouncer = ReturnType<typeof debouncer>;
|
||||
|
||||
export type DebouncerOptions = {
|
||||
debounceTime: number;
|
||||
};
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
|
||||
export function debouncer<T>(callFn: (value: T) => unknown, { debounceTime = 60 }: Partial<DebouncerOptions> = {}) {
|
||||
let currentValue: T | undefined;
|
||||
|
||||
const emitValue = (): void => {
|
||||
if (currentValue === undefined) {
|
||||
throw new Error("Tried to emit undefined value from debouncer. This should never be possible");
|
||||
}
|
||||
const emittingValue = currentValue;
|
||||
currentValue = undefined;
|
||||
callFn(emittingValue);
|
||||
};
|
||||
|
||||
const updateValue = (newValue: T): void => {
|
||||
if (currentValue !== undefined) {
|
||||
currentValue = newValue;
|
||||
return;
|
||||
}
|
||||
|
||||
currentValue = newValue;
|
||||
setTimeout(emitValue, debounceTime);
|
||||
};
|
||||
|
||||
return { updateValue };
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue