.
This commit is contained in:
Ross
+126
-15
@@ -62,7 +62,19 @@ const MOUSE_BUTTONS = [
|
||||
{ label: "Middle", value: "Auxiliary" },
|
||||
{ label: "Right", value: "Secondary" },
|
||||
]
|
||||
|
||||
const ALL_MOUSE_BINDINGS = [
|
||||
{ label: "Left", value: "Primary", mask: 1 },
|
||||
{ label: "Middle", value: "Auxiliary", mask: 4 },
|
||||
{ label: "Right", value: "Secondary", mask: 2 },
|
||||
{ label: "Left + Right", value: "Primary_and_Secondary", mask: 3 },
|
||||
{ label: "Left + Middle", value: "Primary_and_Auxiliary", mask: 5 },
|
||||
{ label: "Right + Middle", value: "Secondary_and_Auxiliary", mask: 6 },
|
||||
{ label: "Left + Right + Middle", value: "Primary_and_Secondary_and_Auxiliary", mask: 7 },
|
||||
{ label: "Fourth Button", value: "Fourth_Button", mask: 8 },
|
||||
{ label: "Fifth Button", value: "Fifth_Button", mask: 16 },
|
||||
{ label: "Mouse Wheel", value: "Wheel", mask: 524288 },
|
||||
{ label: "Mouse Wheel + Left", value: "Wheel_Primary", mask: 524289 },
|
||||
];
|
||||
|
||||
|
||||
// App definintion
|
||||
@@ -129,6 +141,8 @@ function App() {
|
||||
const [crossHairsEnabled, setCrossHairsEnabled] = useState(false);
|
||||
const [referenceLinesEnabled, setReferenceLinesEnabled] = useState(true);
|
||||
|
||||
const [showAdvancedMouseBindings, setShowAdvancedMouseBindings] = useState(false);
|
||||
|
||||
const sortViewportImageIdsBySliceLocation = () => {
|
||||
setViewportImageIds(prev => {
|
||||
const next = prev.map((imageIds, idx) => {
|
||||
@@ -256,6 +270,9 @@ function App() {
|
||||
Auxiliary: PanTool.toolName,
|
||||
Secondary: WindowLevelTool.toolName,
|
||||
Primary_and_Secondary: ZoomTool.toolName, // 1 (left) + 2 (right) = 3
|
||||
Fourth_Button: PlanarRotateTool.toolName, // 16
|
||||
Wheel: StackScrollTool.toolName, // 524288
|
||||
|
||||
})
|
||||
const [ctrlMouseToolBindings, setCtrlMouseToolBindings] = useState({
|
||||
Primary: LengthTool.toolName,
|
||||
@@ -395,12 +412,31 @@ function App() {
|
||||
// Normal bindings
|
||||
Object.entries(mouseToolBindings).forEach(([btn, tool]) => {
|
||||
if (!toolBindings[tool]) toolBindings[tool] = [];
|
||||
toolBindings[tool].push({ mouseButton: MouseBindings[btn] });
|
||||
// Find the mask for this binding
|
||||
const binding = ALL_MOUSE_BINDINGS.find(b => b.value === btn);
|
||||
if (binding) {
|
||||
toolBindings[tool].push({ mouseButton: binding.mask });
|
||||
} else if (MouseBindings[btn]) {
|
||||
// Fallback for legacy bindings
|
||||
toolBindings[tool].push({ mouseButton: MouseBindings[btn] });
|
||||
}
|
||||
});
|
||||
// Ctrl bindings
|
||||
// Ctrl bindings (now supports advanced mouse bindings)
|
||||
Object.entries(ctrlMouseToolBindings).forEach(([btn, tool]) => {
|
||||
if (!tool) return;
|
||||
if (!toolBindings[tool]) toolBindings[tool] = [];
|
||||
toolBindings[tool].push({ mouseButton: MouseBindings[btn], modifierKey: KeyboardBindings.Ctrl });
|
||||
const binding = ALL_MOUSE_BINDINGS.find(b => b.value === btn);
|
||||
if (binding) {
|
||||
toolBindings[tool].push({
|
||||
mouseButton: binding.mask,
|
||||
modifierKey: KeyboardBindings.Ctrl,
|
||||
});
|
||||
} else if (MouseBindings[btn]) {
|
||||
toolBindings[tool].push({
|
||||
mouseButton: MouseBindings[btn],
|
||||
modifierKey: KeyboardBindings.Ctrl,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Apply all bindings for each tool in a single call
|
||||
@@ -408,14 +444,14 @@ function App() {
|
||||
toolGroup.setToolActive(tool, { bindings });
|
||||
});
|
||||
|
||||
// Always re-apply the mouse wheel binding for StackScrollTool
|
||||
toolGroup.setToolActive(StackScrollTool.toolName, {
|
||||
bindings: [
|
||||
{
|
||||
mouseButton: MouseBindings.Wheel, // Wheel Mouse
|
||||
},
|
||||
],
|
||||
});
|
||||
//// Always re-apply the mouse wheel binding for StackScrollTool
|
||||
//toolGroup.setToolActive(StackScrollTool.toolName, {
|
||||
// bindings: [
|
||||
// {
|
||||
// mouseButton: MouseBindings.Wheel, // Wheel Mouse
|
||||
// },
|
||||
// ],
|
||||
//});
|
||||
|
||||
}
|
||||
});
|
||||
@@ -636,7 +672,7 @@ function App() {
|
||||
typeof viewport.setImageIdIndex === "function"
|
||||
) {
|
||||
//viewport.setImageIdIndex(prevScrollIndices.current[i]);
|
||||
csUtilities.jumpToSlice(viewport.element, {imageIndex: prevScrollIndices.current[i]} )
|
||||
csUtilities.jumpToSlice(viewport.element, { imageIndex: prevScrollIndices.current[i] })
|
||||
}
|
||||
|
||||
|
||||
@@ -1218,7 +1254,7 @@ function App() {
|
||||
) {
|
||||
|
||||
//viewport.setImageIdIndex(idx);
|
||||
csUtilities.jumpToSlice(viewport.element, {imageIndex: idx} )
|
||||
csUtilities.jumpToSlice(viewport.element, { imageIndex: idx })
|
||||
//viewport.render();
|
||||
updateOverlay(i, viewport);
|
||||
|
||||
@@ -1698,12 +1734,58 @@ function App() {
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Expandable advanced mouse bindings */}
|
||||
<div style={{ margin: "12px 0" }}>
|
||||
<button
|
||||
style={{
|
||||
background: "#333",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
padding: "4px 12px",
|
||||
cursor: "pointer",
|
||||
fontSize: "14px",
|
||||
marginBottom: "8px",
|
||||
}}
|
||||
onClick={() => setShowAdvancedMouseBindings(v => !v)}
|
||||
>
|
||||
{showAdvancedMouseBindings ? "Hide" : "Show"} Advanced Mouse Bindings
|
||||
</button>
|
||||
{showAdvancedMouseBindings && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
{ALL_MOUSE_BINDINGS.slice(3).map((btn) => (
|
||||
<div key={btn.value} style={{ marginBottom: 10 }}>
|
||||
<label style={{ marginRight: 8 }}>{btn.label}:</label>
|
||||
<select
|
||||
value={mouseToolBindings[btn.value] || ""}
|
||||
onChange={e => setMouseToolBindings(prev => ({ ...prev, [btn.value]: e.target.value }))}
|
||||
style={{
|
||||
background: "#333",
|
||||
color: "#fff",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "4px",
|
||||
padding: "4px 8px",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<option value="">(None)</option>
|
||||
{TOOL_OPTIONS.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Ctrl + Mouse Button Tool Bindings */}
|
||||
<div style={{ margin: "18px 0 8px 0", fontWeight: "bold" }}>Ctrl + Mouse Button Tool Bindings</div>
|
||||
{MOUSE_BUTTONS.map((btn) => (
|
||||
<div key={btn.value + "_ctrl"} style={{ marginBottom: 10 }}>
|
||||
<label style={{ marginRight: 8 }}>{btn.label} + Ctrl:</label>
|
||||
<select
|
||||
value={ctrlMouseToolBindings[btn.value]}
|
||||
value={ctrlMouseToolBindings[btn.value] || ""}
|
||||
onChange={e => setCtrlMouseToolBindings(prev => ({ ...prev, [btn.value]: e.target.value }))}
|
||||
style={{
|
||||
background: "#333",
|
||||
@@ -1714,12 +1796,41 @@ function App() {
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<option value="">(None)</option>
|
||||
{TOOL_OPTIONS.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Expandable advanced ctrl+mouse bindings */}
|
||||
{showAdvancedMouseBindings && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
{ALL_MOUSE_BINDINGS.slice(3).map((btn) => (
|
||||
<div key={btn.value + "_ctrl"} style={{ marginBottom: 10 }}>
|
||||
<label style={{ marginRight: 8 }}>{btn.label} + Ctrl:</label>
|
||||
<select
|
||||
value={ctrlMouseToolBindings[btn.value] || ""}
|
||||
onChange={e => setCtrlMouseToolBindings(prev => ({ ...prev, [btn.value]: e.target.value }))}
|
||||
style={{
|
||||
background: "#333",
|
||||
color: "#fff",
|
||||
border: "1px solid #444",
|
||||
borderRadius: "4px",
|
||||
padding: "4px 8px",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<option value="">(None)</option>
|
||||
{TOOL_OPTIONS.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
style={{
|
||||
|
||||
Reference in New Issue
Block a user