refactor context menu and keyboard navigation handling for improved clarity and maintainability

This commit is contained in:
Ross
2025-08-11 10:58:22 +01:00
parent c6f8b271a9
commit de9cf60adc
+12 -7
View File
@@ -1174,7 +1174,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
const el = appRootRef.current; const el = appRootRef.current;
if (!el) return; if (!el) return;
const handleContextMenu = (e: MouseEvent) => { const handleContextMenu = (e: MouseEvent) => {
@@ -1184,7 +1184,7 @@ useEffect(() => {
return () => { return () => {
el.removeEventListener("contextmenu", handleContextMenu); el.removeEventListener("contextmenu", handleContextMenu);
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
if (!referenceLinesEnabled) return; if (!referenceLinesEnabled) return;
@@ -1926,6 +1926,8 @@ useEffect(() => {
useEffect(() => { useEffect(() => {
const el = appRootRef.current;
if (!el) return;
function handleArrowKeyNavigation(e: KeyboardEvent) { function handleArrowKeyNavigation(e: KeyboardEvent) {
console.log("Handling arrow key navigation", e.key); console.log("Handling arrow key navigation", e.key);
console.log("activeViewport", activeViewport); console.log("activeViewport", activeViewport);
@@ -1975,8 +1977,11 @@ useEffect(() => {
} }
} }
window.addEventListener("keydown", handleArrowKeyNavigation); el.addEventListener("keydown", handleArrowKeyNavigation);
return () => window.removeEventListener("keydown", handleArrowKeyNavigation);
return () => {
el.removeEventListener("keydown", handleArrowKeyNavigation);
};
}, [activeViewport, viewportModes, viewportImageIds, updateOverlay]); }, [activeViewport, viewportModes, viewportImageIds, updateOverlay]);
@@ -2401,7 +2406,7 @@ useEffect(() => {
</div> </div>
{/* Preset menu (bottom right of viewport) */} {/* Preset menu (bottom right of viewport) */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
right: 8, right: 8,
@@ -2409,7 +2414,7 @@ useEffect(() => {
zIndex: 10, zIndex: 10,
pointerEvents: "auto", // <-- ensure pointer events are enabled pointerEvents: "auto", // <-- ensure pointer events are enabled
}} }}
> >
<div <div
className="preset-menu" className="preset-menu"
style={{ style={{
@@ -2492,7 +2497,7 @@ useEffect(() => {
</div> </div>
)} )}
</div> </div>
</div> </div>
{/* Position bar inside each viewport */} {/* Position bar inside each viewport */}
{viewportModes[i] === "stack" && viewportImageIds[i] && ( {viewportModes[i] === "stack" && viewportImageIds[i] && (
<div <div