Skip to content

Commit

Permalink
fixup! refactor: event managers
Browse files Browse the repository at this point in the history
  • Loading branch information
wagnermaciel committed Feb 20, 2025
1 parent 89cb225 commit b01fb41
Show file tree
Hide file tree
Showing 3 changed files with 17 additions and 29 deletions.
2 changes: 1 addition & 1 deletion src/cdk-experimental/listbox/listbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ import {toSignal} from '@angular/core/rxjs-interop';
'[attr.aria-multiselectable]': 'pattern.multiselectable()',
'[attr.aria-activedescendant]': 'pattern.activedescendant()',
'(keydown)': 'pattern.onKeydown($event)',
'(mousedown)': 'pattern.onMousedown($event)',
'(pointerdown)': 'pattern.onPointerdown($event)',
},
})
export class CdkListbox {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@

import {
EventHandler,
EventHandlerConfig,
EventHandlerOptions,
EventManager,
hasModifiers,
Expand All @@ -17,27 +16,16 @@ import {
} from './event-manager';

/**
* The different mouse buttons that may appear on a mouse event.
* The different mouse buttons that may appear on a pointer event.
*/
export enum MouseButton {
Main = 0,
Auxiliary = 1,
Secondary = 2,
}

/**
* A config that specifies how to handle a particular mouse event.
*/
export interface MouseEventHandlerConfig extends EventHandlerConfig<MouseEvent> {
button: number;
modifiers: number | number[];
}

/**
* An event manager that is specialized for handling mouse events. By default this manager stops
* propagation and prevents default on all events it handles.
*/
export class MouseEventManager<T extends MouseEvent> extends EventManager<T> {
/** An event manager that is specialized for handling pointer events. */
export class PointerEventManager<T extends PointerEvent> extends EventManager<T> {
options: EventHandlerOptions = {
preventDefault: false,
stopPropagation: false,
Expand Down Expand Up @@ -97,7 +85,7 @@ export class MouseEventManager<T extends MouseEvent> extends EventManager<T> {
};
}

_isMatch(event: MouseEvent, button: MouseButton, modifiers: ModifierInputs) {
_isMatch(event: PointerEvent, button: MouseButton, modifiers: ModifierInputs) {
return button === (event.button ?? 0) && hasModifiers(event, modifiers);
}
}
24 changes: 12 additions & 12 deletions src/cdk-experimental/ui-patterns/listbox/listbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import {ModifierKey as Modifier} from '../behaviors/event-manager/event-manager';
import {KeyboardEventManager} from '../behaviors/event-manager/keyboard-event-manager';
import {MouseEventManager} from '../behaviors/event-manager/mouse-event-manager';
import {PointerEventManager} from '../behaviors/event-manager/pointer-event-manager';
import {OptionPattern} from './option';
import {ListSelection, ListSelectionInputs} from '../behaviors/list-selection/list-selection';
import {ListTypeahead, ListTypeaheadInputs} from '../behaviors/list-typeahead/list-typeahead';
Expand Down Expand Up @@ -139,24 +139,24 @@ export class ListboxPattern {
return manager;
});

/** The mousedown event manager for the listbox. */
mousedown = computed(() => {
const manager = new MouseEventManager();
/** The pointerdown event manager for the listbox. */
pointerdown = computed(() => {
const manager = new PointerEventManager();

if (!this.followFocus()) {
manager.on((e: MouseEvent) => this.goto(e));
manager.on((e: PointerEvent) => this.goto(e));
}

if (this.followFocus()) {
manager.on((e: MouseEvent) => this.goto(e, {selectOne: true}));
manager.on((e: PointerEvent) => this.goto(e, {selectOne: true}));
}

if (this.inputs.multiselectable() && this.followFocus()) {
manager.on(Modifier.Ctrl, (e: MouseEvent) => this.goto(e));
manager.on(Modifier.Ctrl, (e: PointerEvent) => this.goto(e));
}

if (this.inputs.multiselectable()) {
manager.on(Modifier.Shift, (e: MouseEvent) => this.goto(e, {selectFromActive: true}));
manager.on(Modifier.Shift, (e: PointerEvent) => this.goto(e, {selectFromActive: true}));
}

return manager;
Expand All @@ -183,9 +183,9 @@ export class ListboxPattern {
}
}

onMousedown(event: MouseEvent) {
onPointerdown(event: PointerEvent) {
if (!this.disabled()) {
this.mousedown().handle(event);
this.pointerdown().handle(event);
}
}

Expand Down Expand Up @@ -218,7 +218,7 @@ export class ListboxPattern {
}

/** Navigates to the given item in the listbox. */
goto(event: MouseEvent, opts?: SelectOptions) {
goto(event: PointerEvent, opts?: SelectOptions) {
const item = this._getItem(event);

if (item) {
Expand Down Expand Up @@ -260,7 +260,7 @@ export class ListboxPattern {
}
}

private _getItem(e: MouseEvent) {
private _getItem(e: PointerEvent) {
if (!(e.target instanceof HTMLElement)) {
return;
}
Expand Down

0 comments on commit b01fb41

Please sign in to comment.