fix(seg): Refactor LabelmapBaseTool and SphereScissorsTool to fix sph…

…ere bug in stack (#1772)

common/reviews/api/tools.api.md

@@ -3451,28 +3451,7 @@ export class LabelmapBaseTool extends BaseTool {
         acceptReject: boolean;
     }): unknown;
     // (undocumented)
-    createEditData(element: any): {
-        volumeId: string;
-        referencedVolumeId: any;
-        segmentsLocked: number[] | [];
-        imageId?: undefined;
-        override?: undefined;
-    } | {
-        imageId: string;
-        segmentsLocked: number[] | [];
-        override: {
-            voxelManager: Types_2.IVoxelManager<number> | Types_2.IVoxelManager<Types_2.RGB>;
-            imageData: vtkImageData;
-        };
-        volumeId?: undefined;
-        referencedVolumeId?: undefined;
-    } | {
-        imageId: string;
-        segmentsLocked: number[] | [];
-        volumeId?: undefined;
-        referencedVolumeId?: undefined;
-        override?: undefined;
-    };
+    protected createEditData(element: any): EditDataReturnType;
     // (undocumented)
     protected createHoverData(element: any, centerCanvas?: any): {
         brushCursor: {
@@ -3514,78 +3493,15 @@ export class LabelmapBaseTool extends BaseTool {
         segmentColor: Types_2.Color;
     };
     // (undocumented)
-    protected getOperationData(element?: any): {
-        points: any;
-        segmentIndex: number;
-        previewColors: any;
-        viewPlaneNormal: any;
-        toolGroupId: string;
-        segmentationId: string;
-        viewUp: any;
-        strategySpecificConfiguration: any;
-        preview: unknown;
-        createMemo: (segmentId: string, segmentationVoxelManager: any, preview: any) => LabelmapMemo.LabelmapMemo;
-        override: {
-            voxelManager: Types_2.IVoxelManager<number>;
-            imageData: vtkImageData;
-        };
-        segmentsLocked: number[];
-        imageId?: string;
-        imageIds?: string[];
-        volumeId?: string;
-        referencedVolumeId?: string;
-    } | {
-        points: any;
-        segmentIndex: number;
-        previewColors: any;
-        viewPlaneNormal: any;
-        toolGroupId: string;
-        segmentationId: string;
-        viewUp: any;
-        strategySpecificConfiguration: any;
-        preview: unknown;
-        createMemo: (segmentId: string, segmentationVoxelManager: any, preview: any) => LabelmapMemo.LabelmapMemo;
-        volumeId: string;
-        referencedVolumeId: any;
-        segmentsLocked: number[] | [];
-        imageId?: undefined;
-        override?: undefined;
-    } | {
-        points: any;
-        segmentIndex: number;
-        previewColors: any;
-        viewPlaneNormal: any;
-        toolGroupId: string;
-        segmentationId: string;
-        viewUp: any;
-        strategySpecificConfiguration: any;
-        preview: unknown;
-        createMemo: (segmentId: string, segmentationVoxelManager: any, preview: any) => LabelmapMemo.LabelmapMemo;
-        imageId: string;
-        segmentsLocked: number[] | [];
-        override: {
-            voxelManager: Types_2.IVoxelManager<number> | Types_2.IVoxelManager<Types_2.RGB>;
-            imageData: vtkImageData;
-        };
-        volumeId?: undefined;
-        referencedVolumeId?: undefined;
-    } | {
-        points: any;
-        segmentIndex: number;
-        previewColors: any;
-        viewPlaneNormal: any;
-        toolGroupId: string;
-        segmentationId: string;
-        viewUp: any;
-        strategySpecificConfiguration: any;
-        preview: unknown;
-        createMemo: (segmentId: string, segmentationVoxelManager: any, preview: any) => LabelmapMemo.LabelmapMemo;
-        imageId: string;
-        segmentsLocked: number[] | [];
-        volumeId?: undefined;
-        referencedVolumeId?: undefined;
-        override?: undefined;
-    };
+    protected getEditData({ viewport, representationData, segmentsLocked, segmentationId, volumeOperation, }: {
+        viewport: any;
+        representationData: any;
+        segmentsLocked: any;
+        segmentationId: any;
+        volumeOperation?: boolean;
+    }): EditDataReturnType;
+    // (undocumented)
+    protected getOperationData(element?: any): ModifiedLabelmapToolOperationData;
     // (undocumented)
     protected _hoverData?: {
         brushCursor: any;

packages/adapters/examples/segmentationVolume/index.ts

@@ -35,6 +35,7 @@ import {
     restart,
     createSegmentation
 } from "../segmentationVolume/utils";
+import addDropDownToToolbar from "../../../../utils/demo/helpers/addDropdownToToolbar";
 
 setTitleAndDescription(
     "DICOM SEG VOLUME",
@@ -119,6 +120,7 @@ const state = {
     segmentationId: "LOAD_SEG_ID:" + cornerstone.utilities.uuidv4(),
     referenceImageIds: [],
     skipOverlapping: false,
+    segmentationIds: [],
     segImageIds: [],
     devConfig: { ...dicomMap.values().next().value }
 };
@@ -169,6 +171,7 @@ function createSegmentationRepresentation() {
 
     csToolsSegmentation.addLabelmapRepresentationToViewportMap(segMap);
 }
+
 // ============================= //
 addButtonToToolbar({
     id: "LOAD_DICOM",
@@ -203,6 +206,7 @@ addButtonToToolbar({
 
         await loadSegmentation(arrayBuffer, state);
         createSegmentationRepresentation();
+        updateSegmentationDropdown();
     },
     container: group1
 });
@@ -221,8 +225,11 @@ addButtonToToolbar({
     id: "CREATE_SEGMENTATION",
     title: "Create Empty SEG",
     onClick: async () => {
+        const segmentationId = cornerstone.utilities.uuidv4();
+        state.segmentationId = segmentationId;
         await createSegmentation(state);
         createSegmentationRepresentation();
+        updateSegmentationDropdown();
     },
     container: group2
 });
@@ -240,10 +247,55 @@ addUploadToToolbar({
         }
 
         createSegmentationRepresentation();
+        updateSegmentationDropdown();
     },
     container: group2
 });
 
+function updateSegmentationDropdown() {
+    // remove the previous dropdown
+    const previousDropdown = document.getElementById("segmentation-dropdown");
+    if (previousDropdown) {
+        previousDropdown.remove();
+    }
+
+    state.segmentationIds = csToolsSegmentation.state
+        .getSegmentations()
+        .map(seg => seg.segmentationId);
+
+    state.segmentationId =
+        csToolsSegmentation.activeSegmentation.getActiveSegmentation(
+            state.viewportIds[0]
+        ).segmentationId;
+
+    // Create a map with objects that can have properties set on them
+    const optionsMap = new Map(
+        state.segmentationIds.map(id => [
+            id,
+            { id, label: id, selected: id === state.segmentationId }
+        ])
+    );
+
+    addDropDownToToolbar({
+        container: group2,
+        id: "segmentation-dropdown",
+        options: {
+            defaultIndex: state.segmentationIds.indexOf(state.segmentationId),
+            map: optionsMap
+        },
+        onSelectedValueChange: (key: string | number) => {
+            state.viewportIds.forEach(viewportId => {
+                csToolsSegmentation.activeSegmentation.setActiveSegmentation(
+                    viewportId,
+                    key.toString()
+                );
+            });
+
+            updateSegmentationDropdown();
+        }
+    });
+}
+
 addButtonToToolbar({
     id: "EXPORT_SEGMENTATION",
     title: "Export SEG",

packages/core/src/RenderingEngine/StackViewport.ts

@@ -863,26 +863,28 @@ class StackViewport extends Viewport {
 
     this.setInterpolationType(InterpolationType.LINEAR);
 
-    const transferFunction = this.getTransferFunction();
-    setTransferFunctionNodes(
-      transferFunction,
-      this.initialTransferFunctionNodes
-    );
+    if (!this.useCPURendering) {
+      const transferFunction = this.getTransferFunction();
+      setTransferFunctionNodes(
+        transferFunction,
+        this.initialTransferFunctionNodes
+      );
 
-    const nodes = getTransferFunctionNodes(transferFunction);
+      const nodes = getTransferFunctionNodes(transferFunction);
 
-    const RGBPoints = nodes.reduce((acc, node) => {
-      acc.push(node[0], node[1], node[2], node[3]);
-      return acc;
-    }, []);
+      const RGBPoints = nodes.reduce((acc, node) => {
+        acc.push(node[0], node[1], node[2], node[3]);
+        return acc;
+      }, []);
 
-    const defaultActor = this.getDefaultActor();
-    const matchedColormap = colormapUtils.findMatchingColormap(
-      RGBPoints,
-      defaultActor.actor
-    );
+      const defaultActor = this.getDefaultActor();
+      const matchedColormap = colormapUtils.findMatchingColormap(
+        RGBPoints,
+        defaultActor.actor
+      );
 
-    this.setColormap(matchedColormap);
+      this.setColormap(matchedColormap);
+    }
   }
 
   public resetToDefaultProperties(): void {

packages/docs/docs/getting-started/vue-angular-react-etc.md

@@ -3,7 +3,6 @@ id: vue-angular-react-etc
 title: 'React, Vue, Angular, etc.'
 ---
 
-
 Here are some examples of how to use cornerstone3D with React, Vue, Angular, etc.
 We have made it easy to use cornerstone3D with your favorite framework.
 
@@ -15,26 +14,65 @@ Follow the links below to see how to use cornerstone3D with your favorite framew
   - [Community maintained project](https://github.com/yanqzsu/ng-cornerstone)
 - [Cornerstone3D with Next.js](https://github.com/cornerstonejs/nextjs-cornerstone3d)
 
-
 ## Vite
 
 To update your Vite configuration, use the CommonJS plugin, exclude `dicom-image-loader` from optimization, and include `dicom-parser`. We plan to convert `dicom-image-loader` to an ES module, eliminating the need for exclusion in the future.
 
 ```javascript
-import { viteCommonjs } from "@originjs/vite-plugin-commonjs"
-
+import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 
 export default defineConfig({
   plugins: [viteCommonjs()],
   optimizeDeps: {
-    exclude: ["@cornerstonejs/dicom-image-loader"],
-    include: ["dicom-parser"],
+    exclude: ['@cornerstonejs/dicom-image-loader'],
+    include: ['dicom-parser'],
   },
-})
+});
+```
+
+## Troubleshooting
+
+### 1. @icr/polyseg-wasm Build Issues
+
+If you're using 3D segmentation features and encounter issues with `@icr/polyseg-wasm`, add the following to your Vite configuration:
+
+```javascript
+build: {
+  rollupOptions: {
+    external: ["@icr/polyseg-wasm"],
+  }
+},
 ```
 
+### 2. Path Resolution Issues with @cornerstonejs/core
 
-## Webpack
+If you encounter the error "No known conditions for "./types" specifier in "@cornerstonejs/core" package" during build (while development works fine), add the following alias to your Vite configuration:
+
+```javascript
+resolve: {
+  alias: {
+    '@': fileURLToPath(new URL('./src', import.meta.url)),
+    '@root': fileURLToPath(new URL('./', import.meta.url)),
+    "@cornerstonejs/core": fileURLToPath(new URL('node_modules/@cornerstonejs/core/dist/esm', import.meta.url)),
+  },
+},
+```
+
+### 3. Tool Name Minification Issues
+
+If you experience issues with tool names being minified (e.g., LengthTool being registered as "FE"), you can prevent minification by adding:
+
+```javascript
+build: {
+  minify: false,
+}
+```
+
+:::note
+These solutions have been tested primarily on macOS but may also apply to other operating systems. If you're using Vuetify or other Vue frameworks, these configurations might need to be adjusted based on your specific setup.
+:::
+
+### 4. Webpack
 
 For webpack, simply install the cornerstone3D library and import it into your project.
 
@@ -60,18 +98,15 @@ Similar to the configuration above, use the CommonJS plugin converting commonjs
 ```javascript
 import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
-import { viteCommonjs } from "@originjs/vite-plugin-commonjs"
+import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
 
 export default defineConfig({
-	plugins: [
-		svelte(),
-		viteCommonjs(),
-	],
-	optimizeDeps: {
-		exclude: ["@cornerstonejs/dicom-image-loader"],
-    include: ["dicom-parser"],
-  }
-})
+  plugins: [svelte(), viteCommonjs()],
+  optimizeDeps: {
+    exclude: ['@cornerstonejs/dicom-image-loader'],
+    include: ['dicom-parser'],
+  },
+});
 ```
 
 :::note Tip

packages/tools/examples/PolySegWasmSurfaceToContour/index.ts

@@ -1,11 +1,9 @@
-import type { Types } from '@cornerstonejs/core';
 import {
   RenderingEngine,
   Enums,
   setVolumesForViewports,
   volumeLoader,
   CONSTANTS,
-  geometryLoader,
   eventTarget,
 } from '@cornerstonejs/core';
 import {
@@ -14,7 +12,6 @@ import {
   setTitleAndDescription,
   setCtTransferFunctionForVolumeActor,
   addButtonToToolbar,
-  downloadSurfacesData,
   addManipulationBindings,
   addLabelToToolbar,
 } from '../../../../utils/demo/helpers';