cb42f11b97
This commit introduces a batched debounce mechanism for managing user
selection state changes. It effectively reduces unnecessary processing
during rapid script checking, preventing multiple triggers for code
compilation and UI rendering.
Key improvements include:
- Enhanced performance, especially noticeable when selecting large
categories. This update resolves minor UI freezes experienced when
selecting categories with numerous scripts.
- Correction of a bug where the code area only highlighted the last
selected script when multiple scripts were chosen.
Other changes include:
- Timing functions:
- Create a `Timing` folder for `throttle` and the new
`batchedDebounce` functions.
- Move these functions to the application layer from the presentation
layer, reflecting their application-wide use.
- Refactor existing code for improved clarity, naming consistency, and
adherence to new naming conventions.
- Add missing unit tests.
- `UserSelection`:
- State modifications in `UserSelection` now utilize a singular object
inspired by the CQRS pattern, enabling batch updates and flexible
change configurations, thereby simplifying change management.
- Remove the `I` prefix from related interfaces to align with new coding
standards.
- Refactor related code for better testability in isolation with
dependency injection.
- Repository:
- Move repository abstractions to the application layer.
- Improve repository abstraction to combine `ReadonlyRepository` and
`MutableRepository` interfaces.
- E2E testing:
- Introduce E2E tests to validate the correct batch selection
behavior.
- Add a specialized data attribute in `TheCodeArea.vue` for improved
testability.
- Reorganize shared Cypress functions for a more idiomatic Cypress
approach.
- Improve test documentation with related information.
- `SelectedScript`:
- Create an abstraction for simplified testability.
- Introduce `SelectedScriptStub` in tests as a substitute for the
actual object.
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import { shallowReadonly, shallowRef, triggerRef } from 'vue';
|
|
import type { ReadonlyUserSelection, UserSelection } from '@/application/Context/State/Selection/UserSelection';
|
|
import type { useAutoUnsubscribedEvents } from './UseAutoUnsubscribedEvents';
|
|
import type { useCollectionState } from './UseCollectionState';
|
|
|
|
export function useUserSelectionState(
|
|
collectionState: ReturnType<typeof useCollectionState>,
|
|
autoUnsubscribedEvents: ReturnType<typeof useAutoUnsubscribedEvents>,
|
|
) {
|
|
const { events } = autoUnsubscribedEvents;
|
|
const { onStateChange, modifyCurrentState, currentState } = collectionState;
|
|
|
|
const currentSelection = shallowRef<ReadonlyUserSelection>(currentState.value.selection);
|
|
|
|
onStateChange((state) => {
|
|
updateSelection(state.selection);
|
|
events.unsubscribeAllAndRegister([
|
|
state.selection.scripts.changed.on(() => {
|
|
updateSelection(state.selection);
|
|
}),
|
|
]);
|
|
}, { immediate: true });
|
|
|
|
function modifyCurrentSelection(mutator: SelectionModifier) {
|
|
modifyCurrentState((state) => {
|
|
mutator(state.selection);
|
|
});
|
|
}
|
|
|
|
function updateSelection(newSelection: ReadonlyUserSelection) {
|
|
if (currentSelection.value === newSelection) {
|
|
// Do not trust Vue tracking, the changed selection object
|
|
// reference may stay same for same collection.
|
|
triggerRef(currentSelection);
|
|
} else {
|
|
currentSelection.value = newSelection;
|
|
}
|
|
}
|
|
|
|
return {
|
|
currentSelection: shallowReadonly(currentSelection),
|
|
modifyCurrentSelection,
|
|
};
|
|
}
|
|
|
|
export type SelectionModifier = (
|
|
state: UserSelection,
|
|
) => void;
|