mirror of
https://github.com/storytold/artcraft.git
synced 2026-11-05 09:48:44 +00:00
PageScene: stop overlay click handler from silencing portal'd modal clicks
Two PageScene-only divergences from how the working pages
(PageDraw / PageImage / PageVideo) handle the same upload modals:
1. `handleOverlayClick` on the top/bottom controls overlays called
`event.stopPropagation()` for every click that bubbled through
them. Modals rendered as JSX children of `Controls3D` (the
upload-3D / upload-image / upload-splat dialogs) are
React-tree descendants even though `Modal`'s `Dialog.Portal`
puts them at `document.body` in the DOM. React synthetic
stopPropagation calls native `Event.stopPropagation()`, which
silences `react-drag-drop-files`'s native `addEventListener("click", u)`
on the file-input label — so clicking the drop zone never opens
the OS file picker.
Narrow the handler to `event.target === event.currentTarget` so
it only fires on the transparent overlay area itself, never on
bubbles from children. The original "control buttons don't
interact with canvas" intent is preserved without the side
effect — the canvas listener is bound to the canvas element only,
so clicks on overlay siblings never reach it regardless.
2. `tabIndex={0}` + `outline: none` on the editor canvas. Added in
`61c4936c29` "so [the canvas] can receive keyboard focus," but
`useViewportKeyboard` listens at `document` (not on canvas) so
the focus isn't actually required. Other pages don't make their
canvas focusable; remove for parity.
This commit is contained in:
1 parent
6c23ce16dd
commit
ac0c7b2210
2 files changed
+8
-3
No files matched your search
@@ -112,8 +112,15 @@ export const PageEditor = () => {
|
||||
const updateCamera = usePageSceneStore((s) => s.updateCamera);
|
||||
const deleteCamera = usePageSceneStore((s) => s.deleteCamera);
|
||||
const setSelectedCameraId = usePageSceneStore((s) => s.setSelectedCameraId);
|
||||
// Only stops propagation for clicks on the overlay div itself (the
|
||||
// transparent gaps between control buttons). Clicks that bubbled up
|
||||
// from child controls pass through untouched, so React-tree-portal'd
|
||||
// modals further down the JSX (the upload modals inside Controls3D)
|
||||
// aren't silenced when the user clicks inside them.
|
||||
const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
|
||||
event.stopPropagation();
|
||||
if (event.target === event.currentTarget) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -17,8 +17,6 @@ export const EditorCanvas = () => {
|
||||
id="video-scene"
|
||||
width="1280px"
|
||||
height="720px"
|
||||
tabIndex={0}
|
||||
style={{ outline: "none" }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user