-
-
Notifications
You must be signed in to change notification settings - Fork 187
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix misaligned tooltip positions in modal dialogs
This commit fixes a bug that causes tooltips to be slightly misaligned.
Tooltip positioning was incorrect during modal transitions due to their
initial movement, causing tooltips to align incorrectly at the start of
the animation rather than the end.
One way to solve this would be using `autoUpdate` from `floating-ui`
with `animationFrame: true`. However, this recalculates positions tens
of times per second, impacting performance. This is a monkey solution.
This commit adopts a more efficient approach by updating tooltip
positions only at the end of the transitions, which reduces calculations
and conserves resources.
Key changes:
- Addd transition end event listener for updating tooltip positions.
- Use throttling to eliminate excessive position recalculations.
Other supporting changes:
- Improve throttle function to support efficient recalculations of
positions:
- Add ability to optionally exclude the first execution (leading
call).
- Refactor to simplify it make it easier to follow and read.
- Fix a bug where initial calls were incorrectly throttled if
`dateNow()` returned `0`.
- Introduce and use a global hook for efficient DOM event management.
This greatily introduce safety, reuse and testability of event
listening.- Loading branch information
1 parent
a334320
commit d7fae29
Showing
26 changed files
with
1,158 additions
and
328 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,156 @@ | ||
| /* eslint-disable max-classes-per-file */ | ||
| import { PlatformTimer } from './PlatformTimer'; | ||
| import type { Timer, TimeoutType } from './Timer'; | ||
|
|
||
| export type CallbackType = (..._: readonly unknown[]) => void; | ||
|
|
||
| export interface ThrottleOptions { | ||
| /** Skip the immediate execution of the callback on the first invoke */ | ||
| readonly excludeLeadingCall: boolean; | ||
| readonly timer: Timer; | ||
| } | ||
|
|
||
| const DefaultOptions: ThrottleOptions = { | ||
| excludeLeadingCall: false, | ||
| timer: PlatformTimer, | ||
| }; | ||
|
|
||
| export function throttle( | ||
| callback: CallbackType, | ||
| waitInMs: number, | ||
| timer: Timer = PlatformTimer, | ||
| options: Partial<ThrottleOptions> = DefaultOptions, | ||
| ): CallbackType { | ||
| const throttler = new Throttler(timer, waitInMs, callback); | ||
| const defaultedOptions: ThrottleOptions = { | ||
| ...DefaultOptions, | ||
| ...options, | ||
| }; | ||
| const throttler = new Throttler(waitInMs, callback, defaultedOptions); | ||
| return (...args: unknown[]) => throttler.invoke(...args); | ||
| } | ||
|
|
||
| class Throttler { | ||
| private queuedExecutionId: TimeoutType | undefined; | ||
| private lastExecutionTime: number | null = null; | ||
|
|
||
| private previouslyRun: number; | ||
| private executionScheduler: DelayedCallbackScheduler; | ||
|
|
||
| constructor( | ||
| private readonly timer: Timer, | ||
| private readonly waitInMs: number, | ||
| private readonly callback: CallbackType, | ||
| private readonly options: ThrottleOptions, | ||
| ) { | ||
| if (!waitInMs) { throw new Error('missing delay'); } | ||
| if (waitInMs < 0) { throw new Error('negative delay'); } | ||
| this.executionScheduler = new DelayedCallbackScheduler(options.timer); | ||
| } | ||
|
|
||
| public invoke(...args: unknown[]): void { | ||
| const now = this.timer.dateNow(); | ||
| if (this.queuedExecutionId !== undefined) { | ||
| this.timer.clearTimeout(this.queuedExecutionId); | ||
| this.queuedExecutionId = undefined; | ||
| switch (true) { | ||
| case this.isLeadingCallWithinThrottlePeriod(): { | ||
| if (this.options.excludeLeadingCall) { | ||
| this.scheduleNext(args); | ||
| return; | ||
| } | ||
| this.executeNow(args); | ||
| return; | ||
| } | ||
| case this.isAlreadyScheduled(): { | ||
| this.updateNextScheduled(args); | ||
| return; | ||
| } | ||
| case !this.isThrottlePeriodPassed(): { | ||
| this.scheduleNext(args); | ||
| return; | ||
| } | ||
| default: | ||
| throw new Error('Throttle logical error: no conditions for execution or scheduling were met.'); | ||
| } | ||
| } | ||
|
|
||
| private isLeadingCallWithinThrottlePeriod(): boolean { | ||
| return this.isThrottlePeriodPassed() | ||
| && !this.isAlreadyScheduled(); | ||
| } | ||
|
|
||
| private isThrottlePeriodPassed(): boolean { | ||
| if (this.lastExecutionTime === null) { | ||
| return true; | ||
| } | ||
| if (!this.previouslyRun || (now - this.previouslyRun >= this.waitInMs)) { | ||
| this.callback(...args); | ||
| this.previouslyRun = now; | ||
| } else { | ||
| const nextCall = () => this.invoke(...args); | ||
| const nextCallDelayInMs = this.waitInMs - (now - this.previouslyRun); | ||
| this.queuedExecutionId = this.timer.setTimeout(nextCall, nextCallDelayInMs); | ||
| const timeSinceLastExecution = this.options.timer.dateNow() - this.lastExecutionTime; | ||
| const isThrottleTimePassed = timeSinceLastExecution >= this.waitInMs; | ||
| return isThrottleTimePassed; | ||
| } | ||
|
|
||
| private isAlreadyScheduled(): boolean { | ||
| return this.executionScheduler.getNext() !== null; | ||
| } | ||
|
|
||
| private scheduleNext(args: unknown[]): void { | ||
| if (this.executionScheduler.getNext()) { | ||
| throw new Error('An execution is already scheduled.'); | ||
| } | ||
| this.executionScheduler.resetNext( | ||
| () => this.executeNow(args), | ||
| this.waitInMs, | ||
| ); | ||
| } | ||
|
|
||
| private updateNextScheduled(args: unknown[]): void { | ||
| const nextScheduled = this.executionScheduler.getNext(); | ||
| if (!nextScheduled) { | ||
| throw new Error('A non-existent scheduled execution cannot be updated.'); | ||
| } | ||
| const nextDelay = nextScheduled.scheduledTime - this.dateNow(); | ||
| this.executionScheduler.resetNext( | ||
| () => this.executeNow(args), | ||
| nextDelay, | ||
| ); | ||
| } | ||
|
|
||
| private executeNow(args: unknown[]): void { | ||
| this.callback(...args); | ||
| this.lastExecutionTime = this.dateNow(); | ||
| } | ||
|
|
||
| private dateNow(): number { | ||
| return this.options.timer.dateNow(); | ||
| } | ||
| } | ||
|
|
||
| interface ScheduledCallback { | ||
| readonly scheduleTimeoutId: TimeoutType; | ||
| readonly scheduledTime: number; | ||
| } | ||
|
|
||
| class DelayedCallbackScheduler { | ||
| private scheduledCallback: ScheduledCallback | null = null; | ||
|
|
||
| constructor( | ||
| private readonly timer: Timer, | ||
| ) { } | ||
|
|
||
| public getNext(): ScheduledCallback | null { | ||
| return this.scheduledCallback; | ||
| } | ||
|
|
||
| public resetNext( | ||
| callback: () => void, | ||
| delayInMs: number, | ||
| ) { | ||
| this.clear(); | ||
| this.scheduledCallback = { | ||
| scheduledTime: this.timer.dateNow() + delayInMs, | ||
| scheduleTimeoutId: this.timer.setTimeout(() => { | ||
| this.clear(); | ||
| callback(); | ||
| }, delayInMs), | ||
| }; | ||
| } | ||
|
|
||
| private clear() { | ||
| if (this.scheduledCallback === null) { | ||
| return; | ||
| } | ||
| this.timer.clearTimeout(this.scheduledCallback.scheduleTimeoutId); | ||
| this.scheduledCallback = null; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
src/presentation/components/Shared/Hooks/UseAutoUnsubscribedEventListener.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| import { | ||
| onBeforeUnmount, | ||
| shallowRef, | ||
| watch, | ||
| type Ref, | ||
| } from 'vue'; | ||
|
|
||
| export interface UseEventListener { | ||
| (): TargetEventListener; | ||
| } | ||
|
|
||
| export const useAutoUnsubscribedEventListener: UseEventListener = () => ({ | ||
| startListening: (eventTargetSource, eventType, eventHandler) => { | ||
| const eventTargetRef = isEventTarget(eventTargetSource) | ||
| ? shallowRef(eventTargetSource) | ||
| : eventTargetSource; | ||
| return startListeningRef( | ||
| eventTargetRef, | ||
| eventType, | ||
| eventHandler, | ||
| ); | ||
| }, | ||
| }); | ||
|
|
||
| type EventTargetRef = Readonly<Ref<EventTarget | undefined>>; | ||
|
|
||
| type EventTargetOrRef = EventTargetRef | EventTarget; | ||
|
|
||
| function isEventTarget(obj: EventTargetOrRef): obj is EventTarget { | ||
| return obj instanceof EventTarget; | ||
| } | ||
|
|
||
| export interface TargetEventListener { | ||
| startListening<TEvent extends keyof HTMLElementEventMap>( | ||
| eventTargetSource: EventTargetOrRef, | ||
| eventType: TEvent, | ||
| eventHandler: (event: HTMLElementEventMap[TEvent]) => void, | ||
| ): void; | ||
| } | ||
|
|
||
| function startListeningRef<TEvent extends keyof HTMLElementEventMap>( | ||
| eventTargetRef: Readonly<Ref<EventTarget | undefined>>, | ||
| eventType: TEvent, | ||
| eventHandler: (event: HTMLElementEventMap[TEvent]) => void, | ||
| ): void { | ||
| const eventListenerManager = new EventListenerManager(); | ||
| watch(() => eventTargetRef.value, (element) => { | ||
| eventListenerManager.removeListenerIfExists(); | ||
| if (!element) { | ||
| return; | ||
| } | ||
| eventListenerManager.addListener(element, eventType, eventHandler); | ||
| }, { immediate: true }); | ||
|
|
||
| onBeforeUnmount(() => { | ||
| eventListenerManager.removeListenerIfExists(); | ||
| }); | ||
| } | ||
|
|
||
| class EventListenerManager { | ||
| private removeListener: (() => void) | null = null; | ||
|
|
||
| public removeListenerIfExists() { | ||
| if (this.removeListener === null) { | ||
| return; | ||
| } | ||
| this.removeListener(); | ||
| this.removeListener = null; | ||
| } | ||
|
|
||
| public addListener<TEvent extends keyof HTMLElementEventMap>( | ||
| eventTarget: EventTarget, | ||
| eventType: TEvent, | ||
| eventHandler: (event: HTMLElementEventMap[TEvent]) => void, | ||
| ) { | ||
| eventTarget.addEventListener(eventType, eventHandler); | ||
| this.removeListener = () => eventTarget.removeEventListener(eventType, eventHandler); | ||
| } | ||
| } |
Oops, something went wrong.