refactor context menu and keyboard navigation handling for improved clarity and maintainability
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user