mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: refactor clicks to generic mouse interactions with click/hover subtypes

Browse Source
This commit is contained in:
Marc Mintel
2026-02-15 18:17:10 +01:00
parent 65f8b2c485
commit 483dfabe10
3 changed files with 112 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/record-mode/RecordModeContext.tsx
View File

@@ -132,7 +132,7 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
if (el) {
if (event.type === 'scroll') {
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
} else if (event.type === 'click') {
} else if (event.type === 'mouse') {
const currentRect = el.getBoundingClientRect();
// Calculate Point based on Origin
@@ -157,6 +157,7 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
clientX: targetX,
clientY: targetY
};
const dispatchMouse = (type: string) => {
el.dispatchEvent(new MouseEvent(type, {
view: window,
@@ -165,10 +166,21 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
...eventCoords
}));
};
dispatchMouse('mousedown');
dispatchMouse('mouseup');
dispatchMouse('click');
el.click();
if (event.interactionType === 'click') {
dispatchMouse('mousedown');
dispatchMouse('mouseup');
dispatchMouse('click');
if (event.realClick) {
el.click();
}
} else {
// Hover Interaction
dispatchMouse('mousemove');
dispatchMouse('mouseover');
dispatchMouse('mouseenter');
}
}
}
}
@@ -275,7 +287,7 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
if (el) {
if (event.type === 'scroll') {
el.scrollIntoView({ behavior: 'smooth', block: 'center' });
} else if (event.type === 'click') {
} else if (event.type === 'mouse') {
const currentRect = el.getBoundingClientRect();
// Calculate Point based on Origin (same as above for parity)
@@ -300,6 +312,7 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
clientX: targetX,
clientY: targetY
};
const dispatchMouse = (type: string) => {
el.dispatchEvent(new MouseEvent(type, {
view: window,
@@ -308,10 +321,21 @@ export function RecordModeProvider({ children }: { children: React.ReactNode })
...eventCoords
}));
};
dispatchMouse('mousedown');
dispatchMouse('mouseup');
dispatchMouse('click');
el.click();
if (event.interactionType === 'click') {
dispatchMouse('mousedown');
dispatchMouse('mouseup');
dispatchMouse('click');
if (event.realClick) {
el.click();
}
} else {
// Hover Interaction
dispatchMouse('mousemove');
dispatchMouse('mouseover');
dispatchMouse('mouseenter');
}
}
}
}