728584240c
This commit improves the horizontal slider between the generated code area and the script list. It enhances interaction, accessibility and performance. It provides missing touch responsiveness, improves accessibility by using better HTML semantics, introduces throttling and refactors cursor handling during drag operations with added tests. These changes provides smoother user experience, better support for touch devices, reduce load during interactions and ensure the component's behavior is intuitive and accessible across different devices and interactions. - Fix horizontal slider not responding to touch events. - Improve slider handle to be a `<button>` for improved accessibility and native browser support, improving user interaction and keyboard support. - Add throttling in the slider for performance optimization, reducing processing load during actions. - Fix losing dragging state cursor on hover over page elements such as input boxes and buttons during dragging. - Separate dragging logic into its own compositional hook for clearer separation of concerns. - Refactor global cursor mutation process. - Increase robustness in global cursor changes by preserving and restoring previous cursor style to prevent potential side-effects. - Use Vue 3.2 feature for defining cursor CSS style in `<style>` section. - Expand unit test coverage for horizontal slider, use MouseEvent and type cast it to PointerEvent as MouseEvent is not yet supported by `jsdom` (see jsdom/jsdom#2527).
35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
import { CallbackType, throttle } from '@/application/Common/Timing/Throttle';
|
|
|
|
export class ThrottleStub {
|
|
public readonly throttleInitializationCallArgs: Array<Parameters<typeof throttle>> = [];
|
|
|
|
public readonly throttledFunctionCallArgs = new Array<readonly unknown[]>();
|
|
|
|
private executeImmediately: boolean = false;
|
|
|
|
public func = (callback: CallbackType, waitInMs: number): ReturnType<typeof throttle> => {
|
|
this.throttleInitializationCallArgs.push([callback, waitInMs]);
|
|
return (...args: readonly unknown[]) => {
|
|
this.throttledFunctionCallArgs.push([...args]);
|
|
if (this.executeImmediately) {
|
|
callback(...args);
|
|
}
|
|
};
|
|
};
|
|
|
|
public withImmediateExecution(executeImmediately: boolean): this {
|
|
this.executeImmediately = executeImmediately;
|
|
return this;
|
|
}
|
|
|
|
public executeFirst() {
|
|
if (this.throttledFunctionCallArgs.length === 0) {
|
|
throw new Error('Function was never throttled.');
|
|
}
|
|
const firstArgs = this.throttledFunctionCallArgs[0];
|
|
this.throttleInitializationCallArgs.forEach(([callback]) => {
|
|
callback(...firstArgs);
|
|
});
|
|
}
|
|
}
|