feat(VtkSegmentationSliceRepresentation): Add outline rendering

src/components/vtk/VtkSegmentationSliceRepresentation.vue

@@ -99,6 +99,16 @@ const slice = vtkFieldRef(sliceRep.mapper, 'slice');
 const { slice: storedSlice } = useSliceConfig(viewId, parentImageId);
 syncRef(storedSlice, slice, { immediate: true });
 
+sliceRep.property.setUseLabelOutline(true);
+// Label outline thickness is for first segment -> 2 (positioned at array index 0), second segment -> 4
+// (positioned at array index 4)
+sliceRep.property.setLabelOutlineThickness([2, 1, 1, 1, 4]);
+sliceRep.property.setLabelOutlineOpacity(1.0);
+
+// This is very important to make sure the labelmap is rendered
+// correctly
+sliceRep.property.setUseLookupTableScalarRange(true);
+
 // set coloring properties
 const applySegmentColoring = () => {
   const cfun = sliceRep.property.getRGBTransferFunction(0);
@@ -135,6 +145,25 @@ const applySegmentColoring = () => {
 
 watchEffect(applySegmentColoring);
 
+sliceRep.property.setUseLabelOutline(true);
+sliceRep.property.setUseLookupTableScalarRange(true); // For the labelmap is rendered correctly
+sliceRep.property.setLabelOutlineOpacity(1);
+
+const outlinePixelThickness = 2;
+watchEffect(() => {
+  if (!metadata.value) return; // segment group just deleted
+
+  const { segments } = metadata.value;
+  const max = Math.max(...segments.order);
+
+  const segThicknesses = Array.from({ length: max }, (_, i) => {
+    const value = i + 1;
+    const segment = segments.byValue[value];
+    return ((!segment || segment.visible) && outlinePixelThickness) || 0;
+  });
+  sliceRep.property.setLabelOutlineThickness(segThicknesses);
+});
+
 defineExpose(sliceRep);
 </script>