Fix front component pointer/mouse event coordinates (#21117)
Fixes https://github.com/twentyhq/twenty/issues/21000 Front-component event handlers read standard event fields (event.clientX, event.offsetX, …), but these were always undefined. On the remote side, serialized event data was passed only as the CustomEvent's detail — and CustomEvent ignores every constructor option except detail, so the values lived at event.detail.clientX and never on the event object itself. - Added `applySerializedEventProperties`, to copy a curated allowlist of event-level keys onto the event. Element/target state (value, checked, files, scroll, media props) stays in `applySerializedEventTargetProperties`, applied to this (the dispatch element = event.target). - Added x/y to `SerializedEventData` and to host-side serialization in `createHtmlHostWrapper`. - Added an `svg-pointer `story + `createHtmlTagPointerStory` Note: Also pinned @types/react to v18 so the renderer stops dragging in React 19 types and breaking typecheck.
This commit is contained in:
+50
@@ -0,0 +1,50 @@
|
||||
import { type SerializedEventData } from '@/types/SerializedEventData';
|
||||
|
||||
const SERIALIZED_EVENT_PROPERTY_KEYS = [
|
||||
'altKey',
|
||||
'ctrlKey',
|
||||
'metaKey',
|
||||
'shiftKey',
|
||||
'clientX',
|
||||
'clientY',
|
||||
'x',
|
||||
'y',
|
||||
'pageX',
|
||||
'pageY',
|
||||
'screenX',
|
||||
'screenY',
|
||||
'offsetX',
|
||||
'offsetY',
|
||||
'movementX',
|
||||
'movementY',
|
||||
'button',
|
||||
'buttons',
|
||||
'pointerId',
|
||||
'pointerType',
|
||||
'pressure',
|
||||
'tangentialPressure',
|
||||
'tiltX',
|
||||
'tiltY',
|
||||
'twist',
|
||||
'width',
|
||||
'height',
|
||||
'isPrimary',
|
||||
'key',
|
||||
'code',
|
||||
'repeat',
|
||||
'deltaX',
|
||||
'deltaY',
|
||||
'deltaZ',
|
||||
'deltaMode',
|
||||
] as const satisfies readonly (keyof SerializedEventData)[];
|
||||
|
||||
export const applySerializedEventProperties = (
|
||||
event: Record<string, unknown>,
|
||||
eventData: SerializedEventData,
|
||||
): void => {
|
||||
for (const key of SERIALIZED_EVENT_PROPERTY_KEYS) {
|
||||
if (key in eventData) {
|
||||
event[key] = eventData[key];
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user