SegmentationService Style
Style​
setSegmentVisibility​
since visibility is viewport concern and representation is what is being toggled ->
Before (OHIF 3.8)
setSegmentVisibility(
segmentationId: string,
segmentIndex: number,
isVisible: boolean,
toolGroupId?: string
): void
After (OHIF 3.9)
setSegmentVisibility(
viewportId: string,
segmentationId: string,
segmentIndex: number,
isVisible: boolean,
type?: SegmentationRepresentations
): void
Migration Example
// Before
segmentationService.setSegmentVisibility(
'segmentation1',
1,
true,
'toolGroup1'
);
// After
segmentationService.setSegmentVisibility(
'viewport1',
'segmentation1',
1,
true
);
Getting Viewport IDs
When you need to update visibility across multiple viewports:
// Before
const toolGroupIds = ['toolGroup1', 'toolGroup2'];
toolGroupIds.forEach(toolGroupId => {
segmentationService.setSegmentVisibility(
'segmentation1',
1,
true,
toolGroupId
);
});
// After
const viewportIds = segmentationService.getViewportIdsWithSegmentation('segmentation1');
viewportIds.forEach(viewportId => {
segmentationService.setSegmentVisibility(
viewportId,
'segmentation1',
1,
true
);
});
get/set Configuration -> get/setStyle​
The segmentation configuration system has been completely redesigned:
- Moved from global/toolGroup configuration to viewport-specific styles
- Split rendering of inactive segmentations into separate API
- More granular control over styles at different levels (global, segmentation, viewport, segment)
Before (OHIF 3.8)
interface SegmentationConfig {
brushSize: number;
brushThresholdGate: number;
fillAlpha: number;
fillAlphaInactive: number;
outlineWidthActive: number;
renderFill: boolean;
renderInactiveSegmentations: boolean;
renderOutline: boolean;
outlineOpacity: number;
outlineOpacityInactive: number;
}
After (OHIF 3.9)
// Style Types
interface StyleSpecifier {
viewportId?: string;
segmentationId?: string;
type: SegmentationRepresentations;
segmentIndex?: number;
}
interface LabelmapStyle {
renderOutline: boolean;
outlineWidth: number;
renderFill: boolean;
fillAlpha: number;
outlineAlpha: number;
// ....
}
// Functions
getStyle(specifier: StyleSpecifier): LabelmapStyle | ContourStyle | SurfaceStyle;
setStyle(specifier: StyleSpecifier, style: LabelmapStyle | ContourStyle | SurfaceStyle): void;
setRenderInactiveSegmentations(viewportId: string, renderInactive: boolean): void;
getRenderInactiveSegmentations(viewportId: string): boolean;
Before:
// Get global configuration
const config = segmentationService.getConfiguration();
console.log(config.fillAlpha, config.renderOutline);
// Get tool group specific config
const toolGroupConfig = segmentationService.getConfiguration('toolGroup1');
After:
// Get global style for labelmap
const labelmapStyle = segmentationService.getStyle({
type: SegmentationRepresentations.Labelmap
});
// Get viewport-specific style
const viewportStyle = segmentationService.getStyle({
viewportId: 'viewport1',
type: SegmentationRepresentations.Labelmap
});
// Get segmentation-specific style
const segmentationStyle = segmentationService.getStyle({
segmentationId: 'seg1',
type: SegmentationRepresentations.Labelmap
});
// Get segment-specific style
const segmentStyle = segmentationService.getStyle({
segmentationId: 'seg1',
type: SegmentationRepresentations.Labelmap,
segmentIndex: 1
});
Setting Configuration/Style
Before:
segmentationService.setConfiguration({
fillAlpha: 0.5,
outlineWidthActive: 2,
renderOutline: true,
renderFill: true,
renderInactiveSegmentations: true
});
After:
// Set global style
segmentationService.setStyle(
{ type: SegmentationRepresentations.Labelmap },
{
fillAlpha: 0.5,
outlineWidth: 2,
renderOutline: true,
renderFill: true
}
);
// Set viewport-specific style
segmentationService.setStyle(
{
viewportId: 'viewport1',
type: SegmentationRepresentations.Labelmap
},
{
fillAlpha: 0.5,
outlineWidth: 2
}
);
// Handle inactive segmentations separately
segmentationService.setRenderInactiveSegmentations('viewport1', true);
Migration Examples
Combining Multiple Style Settings
Before:
segmentationService.setConfiguration({
fillAlpha: 0.5,
fillAlphaInactive: 0.2,
outlineWidthActive: 2,
outlineOpacity: 1,
outlineOpacityInactive: 0.5,
renderOutline: true,
renderFill: true,
renderInactiveSegmentations: true
});
After:
// Set base style
segmentationService.setStyle(
{ type: SegmentationRepresentations.Labelmap },
{
fillAlpha: 0.5,
outlineWidth: 2,
outlineAlpha: 1,
renderOutline: true,
renderFill: true
}
);
Set inactive rendering per viewport
segmentationService.setRenderInactiveSegmentations('viewport1', true);
// Set style for inactive segments if needed
segmentationService.setStyle(
{
viewportId: 'viewport1',
type: SegmentationRepresentations.Labelmap,
segmentationId: 'seg1'
},
{
fillAlpha: 0.2,
outlineAlpha: 0.5
}
);
setSegmentRGBAColor , setSegmentOpacity, setSegmentRGBA​
Previously, the SegmentationService had multiple redundant methods for setting colors and opacity (setSegmentRGBA
, setSegmentColor
, setSegmentOpacity
). This led to confusion and potential state inconsistencies between the service and Cornerstone.js Tools.
The old methods (setSegmentRGBA
, setSegmentRGBA
, and setSegmentOpacity
) are now removed.
- Replace
setSegmentRGBAColor
,setSegmentRGBA
, andsetSegmentOpacity
calls: Replace all instances of the old methods with the newsetSegmentColor
method. Note that you now need to provide theviewportId
as the first argument since segment color is managed per viewport and representation in cornerstone3D.
Before
// Old API:
segmentationService.setSegmentRGBAColor(segmentationId, segmentIndex, rgbaColor, toolGroupId);
segmentationService.setSegmentRGBA(segmentationId, segmentIndex, rgbaColor, toolGroupId);
segmentationService.setSegmentOpacity(segmentationId, segmentIndex, opacity, toolGroupId);
After
// New API:
segmentationService.setSegmentColor(viewportId, segmentationId, segmentIndex, color); // color is an array of [red, green, blue, alpha]
The new color
argument is an array representing the RGBA color, where the alpha component determines the opacity. Since the Cornerstone Tools library handles segment color per viewport and representation, we require the viewportId
as an argument now.
- Retrieve Segment Color using
getSegmentColor
: The newgetSegmentColor
provides a way to fetch the color of a segment within a specific viewport.
const color = segmentationService.getSegmentColor(viewportId, segmentationId, segmentIndex); //returns [r, g, b, a]
ToggleSegmentationVisibility​
In Cornerstone3D v2.x, toggleSegmentationVisibility
has been replaced with toggleSegmentationRepresentationVisibility
. This change reflects the fact that
a representation is what is being toggled, not the segmentation.
Before (OHIF 3.8)
// Toggle visibility for a segmentation globally
segmentationService.toggleSegmentationVisibility(segmentationId);
After (OHIF 3.9)
// Toggle visibility for a segmentation representation in a specific viewport
segmentationService.toggleSegmentationRepresentationVisibility(viewportId, {
segmentationId: segmentationId,
type: csToolsEnums.SegmentationRepresentations.Labelmap
});
Migration Steps
- Update all calls to
toggleSegmentationVisibility
to usetoggleSegmentationRepresentationVisibility
- Add the required
viewportId
parameter - Add a
type
parameter specifying the representation type (e.g., Labelmap, Contour) - If you were toggling visibility across all viewports, you'll need to loop through the viewports:
Additional Notes
- Each viewport can now have independent visibility settings for the same segmentation
- The visibility state is specific to the representation type (Labelmap, Contour, etc.)
- To check current visibility, use
getSegmentationRepresentationVisibility(viewportId, { segmentationId, type })