ui(settings): Moved Segment Label Display from tools to settings panel (#5422)

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>
This commit is contained in:
Dan Rukas 2025-09-29 12:47:45 -04:00 committed by GitHub
parent 41d4398342
commit c91752d575
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 24 additions and 54 deletions

View File

@ -1858,22 +1858,16 @@ function commandsModule({
}
});
},
toggleSegmentLabel: () => {
toggleSegmentLabel: ({ enabled }) => {
const toolName = cornerstoneTools.SegmentLabelTool.toolName;
const toolGroupIds = toolGroupService.getToolGroupIds();
const isOn = toolGroupIds.some(toolGroupId => {
const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId);
const mode = toolGroup.getToolInstance(toolName)?.mode;
return mode === 'Active';
});
toolGroupIds.forEach(toolGroupId => {
const toolGroup = cornerstoneTools.ToolGroupManager.getToolGroup(toolGroupId);
if (isOn) {
toolGroup.setToolDisabled(toolName);
} else {
if (enabled) {
toolGroup.setToolActive(toolName);
} else {
toolGroup.setToolDisabled(toolName);
}
});
},

View File

@ -36,6 +36,7 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
'segmentationToolbox.config': () => {
// Get initial states based on current configuration
const [previewEdits, setPreviewEdits] = useState(false);
const [segmentLabelEnabled, setSegmentLabelEnabled] = useState(false);
const [toggleSegmentEnabled, setToggleSegmentEnabled] = useState(false);
const [useCenterAsSegmentIndex, setUseCenterAsSegmentIndex] = useState(false);
const handlePreviewEditsChange = checked => {
@ -53,14 +54,19 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
commandsManager.run('toggleUseCenterSegmentIndex', { toggle: checked });
};
const handleSegmentLabelEnabledChange = checked => {
setSegmentLabelEnabled(checked);
commandsManager.run('toggleSegmentLabel', { enabled: checked });
};
return (
<div className="bg-muted flex flex-col gap-4 border-b border-b-[2px] border-black px-2 py-3">
<div className="bg-muted flex flex-col gap-2 border-b border-b-[2px] border-black px-2 py-3">
<div className="flex items-center gap-2">
<Switch
checked={previewEdits}
onCheckedChange={handlePreviewEditsChange}
/>
<span className="text-base text-white">Preview edits before creating</span>
<span className="text-foreground text-base">Preview edits before creating</span>
</div>
<div className="flex items-center gap-2">
@ -68,7 +74,7 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
checked={useCenterAsSegmentIndex}
onCheckedChange={handleUseCenterAsSegmentIndexChange}
/>
<span className="text-base text-white">Use center as segment index</span>
<span className="text-foreground text-base">Use center as segment index</span>
</div>
<div className="flex items-center gap-2">
@ -76,7 +82,15 @@ export default function getSegmentationPanelCustomization({ commandsManager, ser
checked={toggleSegmentEnabled}
onCheckedChange={handleToggleSegmentEnabledChange}
/>
<span className="text-base text-white">Hover on segment border to activate</span>
<span className="text-foreground text-base">Hover on segment border to activate</span>
</div>
<div className="flex items-center gap-2">
<Switch
checked={segmentLabelEnabled}
onCheckedChange={handleSegmentLabelEnabledChange}
/>
<span className="text-foreground text-base">Show segment name on hover</span>
</div>
</div>
);

View File

@ -160,8 +160,7 @@ function modeFactory({ modeConfiguration }) {
'TagBrowser',
'AdvancedMagnify',
'UltrasoundDirectionalTool',
'WindowLevelRegion',
'SegmentLabelTool',
'WindowLevelRegion',
]);
customizationService.setCustomizations({

View File

@ -667,24 +667,6 @@ const toolbarButtons: Button[] = [
buttonSection: true,
},
},
{
id: 'SegmentLabelTool',
uiType: 'ohif.toolBoxButton',
props: {
icon: 'tool-segment-label',
label: i18n.t('Buttons:Segment Label Display'),
tooltip: i18n.t(
'Buttons:Click to show or hide segment labels when hovering with your mouse.'
),
commands: { commandName: 'toggleSegmentLabel' },
evaluate: [
'evaluate.cornerstoneTool.toggle',
{
name: 'evaluate.cornerstone.hasSegmentation',
},
],
},
},
// {
// id: 'Undo',
// uiType: 'ohif.toolButton',

View File

@ -121,8 +121,7 @@ function modeFactory({ modeConfiguration }) {
toolbarService.updateSection('SegmentationUtilities', [
'LabelmapSlicePropagation',
'InterpolateLabelmap',
'SegmentBidirectional',
'SegmentLabelTool',
'SegmentBidirectional',
]);
toolbarService.updateSection('SegmentationTools', [
'BrushTools',

View File

@ -749,24 +749,6 @@ const toolbarButtons: Button[] = [
],
},
},
{
id: 'SegmentLabelTool',
uiType: 'ohif.toolBoxButton',
props: {
icon: 'tool-segment-label',
label: i18n.t('Buttons:Segment Label Display'),
tooltip: i18n.t(
'Buttons:Click to show or hide segment labels when hovering with your mouse.'
),
commands: { commandName: 'toggleSegmentLabel' },
evaluate: [
'evaluate.cornerstoneTool.toggle',
{
name: 'evaluate.cornerstone.hasSegmentation',
},
],
},
},
];
export default toolbarButtons;