ross/dv3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

try and make preset menu always clickable

Browse Source
This commit is contained in:
Ross
2025-06-30 09:29:57 +01:00
parent 86a7bd143f
commit 3a92f5afba
1 changed files with 92 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dicom-viewer/src/App.tsx
+92 -82
View File
@@ -407,7 +407,7 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
total: number,
windowCenter: string,
windowWidth: string,
slicePosition?: number,
slicePosition: string,
}>>(() =>
Array(viewportGrid.rows * viewportGrid.cols).fill({
index: 0,
@@ -2018,7 +2018,10 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
// cursor: "pointer",
zIndex: activeViewport === i ? 10 : 1,
}}
onClick={() => setActiveViewport(i)}
onClick={() => {
setActiveViewport(i);
setViewportMenuOpen(false); // <-- Add this line to close the grid selector
}}
onDoubleClick={() => handleDoubleClick(i)}
>
<button
@@ -2393,91 +2396,98 @@ function App({ container_id, imageStacks, autoCacheStack, annotationJson, viewer
</div>
{/* Preset menu (bottom right of viewport) */}
<div
style={{
position: "absolute",
right: 8,
bottom: 8,
zIndex: 10,
}}
>
<div
className="preset-menu"
<div
style={{
position: "absolute",
right: 8,
bottom: 8,
zIndex: 10,
pointerEvents: "auto", // <-- ensure pointer events are enabled
}}
>
<div
className="preset-menu"
style={{
background: "rgba(0,0,0,0.7)",
color: "#fff",
borderRadius: "4px",
fontSize: "14px",
minWidth: "120px",
overflow: "hidden",
cursor: "pointer",
position: "relative",
boxShadow: presetsOpenArr[i] ? "0 2px 8px rgba(0,0,0,0.3)" : undefined,
pointerEvents: "auto", // <-- ensure pointer events are enabled
}}
onClick={e => e.stopPropagation()} // <-- prevent bubbling to viewport
>
<div
style={{
padding: "6px 12px",
fontWeight: "bold",
userSelect: "none",
}}
onClick={e => {
e.stopPropagation(); // <-- prevent bubbling to viewport
setPresetsOpenArr(prev => {
const next = [...prev];
next[i] = !next[i];
return next;
});
}}
>
Presets
<span style={{ float: "right", fontWeight: "normal" }}>
{presetsOpenArr[i] ? "▲" : "▼"}
</span>
</div>
{presetsOpenArr[i] && (
<div
className="preset-menu-content"
style={{
background: "rgba(0,0,0,0.95)",
borderRadius: "0 0 4px 4px",
padding: "6px 0 6px 0",
display: "flex",
flexDirection: "column",
zIndex: 11,
pointerEvents: "auto", // <-- ensure pointer events are enabled
}}
onClick={e => e.stopPropagation()} // <-- prevent bubbling to viewport
>
{WINDOW_LEVEL_PRESETS.map((preset) => (
<button
key={preset.name}
style={{
background: "rgba(0,0,0,0.7)",
display: "block",
width: "100%",
margin: "2px 0",
background: "#333",
color: "#fff",
borderRadius: "4px",
fontSize: "14px",
minWidth: "120px",
overflow: "hidden",
border: "none",
borderRadius: "3px",
cursor: "pointer",
position: "relative",
boxShadow: presetsOpenArr[i] ? "0 2px 8px rgba(0,0,0,0.3)" : undefined,
padding: "4px 0",
fontSize: "13px",
opacity: 0.9,
}}
onClick={e => {
e.stopPropagation(); // <-- prevent bubbling to viewport
handleApplyPreset(i, preset.center, preset.width);
setPresetsOpenArr(prev => {
const next = [...prev];
next[i] = false;
return next;
});
}}
>
<div
style={{
padding: "6px 12px",
fontWeight: "bold",
userSelect: "none",
}}
onClick={() =>
setPresetsOpenArr(prev => {
const next = [...prev];
next[i] = !next[i];
return next;
})
}
>
Presets
<span style={{ float: "right", fontWeight: "normal" }}>
{presetsOpenArr[i] ? "▲" : "▼"}
</span>
</div>
{presetsOpenArr[i] && (
<div
className="preset-menu-content"
style={{
background: "rgba(0,0,0,0.95)",
borderRadius: "0 0 4px 4px",
padding: "6px 0 6px 0",
display: "flex",
flexDirection: "column",
zIndex: 11,
}}
>
{WINDOW_LEVEL_PRESETS.map((preset) => (
<button
key={preset.name}
style={{
display: "block",
width: "100%",
margin: "2px 0",
background: "#333",
color: "#fff",
border: "none",
borderRadius: "3px",
cursor: "pointer",
padding: "4px 0",
fontSize: "13px",
opacity: 0.9,
}}
onClick={() => {
handleApplyPreset(i, preset.center, preset.width);
setPresetsOpenArr(prev => {
const next = [...prev];
next[i] = false;
return next;
});
}}
>
{preset.name}
</button>
))}
</div>
)}
</div>
</div>
{preset.name}
</button>
))}
</div>
)}
</div>
</div>
{/* Position bar inside each viewport */}
{viewportModes[i] === "stack" && viewportImageIds[i] && (
<div