Dynamically load a SplineROI annotation

Support Development
1

I am working on a project where I need to dynamically add a SplineROIannotation. Below is the code snippet I’ve been using:

import { utilities as myutilities } from ‘@cornerstonejs/core’;
import * as cornerstoneTools from ‘@cornerstonejs/tools’;

const hardcodedPoints = [
[100, 150], // Point 1
[200, 250], // Point 2
[150, 300], // Point 3
];

// Convert points to world coordinates
const worldPoints = hardcodedPoints.map((point) => {
return myutilities.imageToWorldCoords(viewport.getCurrentImageId(), point);
});

// Extract relevant data from the spline
const splineData = {
type: ‘CATMULLROM’,
resolution: 20,
controlPoints: worldPoints, // Only include control points for the annotation
};

// Ensure FrameOfReferenceUID is valid
const FrameOfReferenceUID = viewport.getFrameOfReferenceUID();
if (!FrameOfReferenceUID) {
console.error(‘Viewport does not have a valid FrameOfReferenceUID!’);
} else {
// Create annotation object
const annotation = {
annotationUID: annotation-${Date.now()}, // Unique ID based on current time
metadata: {
toolName: ‘SplineROI’, // Tool being used
viewportId: viewport.id, // Current viewport ID
FrameOfReferenceUID: FrameOfReferenceUID, // Frame of Reference UID
referencedImageId: viewport.getCurrentImageId(),
},
data: {
handles: {
points: worldPoints, // Array of points forming the ROI
activeHandleIndex: null, // No active handle initially
},
cachedStats: {}, // Optionally add any calculated stats
label: ‘SplineROI’, // Label for the annotation
data: {
spline: splineData, // Store only relevant spline data (control points, resolution, etc.)
label: ‘Spline ROI’, // Label for the annotation
},
},
};

// Add annotation to the state
cornerstoneTools.annotation.state.addAnnotation(annotation, ‘defaultGroup’);

// Trigger render for the viewport
cornerstoneTools.utilities.triggerAnnotationRenderForViewportIds(
viewport.getRenderingEngine(),
[viewport.id] // Trigger rendering for the specific viewport
);
}

I am getting the error as Cannot destructure property ‘instance’ of ‘annotation.data.spline’ as it is undefined.

I want to achieve the following

  1. Dynamically add a SplineROI annotation using a set of hardcoded points.
  2. Ensure the annotation is displayed correctly on the DICOM image within the Cornerstone viewer.
  • Is this approach correct for dynamically adding a SplineROI annotation?
  • Am I missing any crucial steps for rendering the annotation in the viewport?
  • Are there any best practices or utility methods in Cornerstone.js I should use for spline-based annotations?

Kindly suggest or provide code snippets . Any help would be appreciated. Thank you.

1 Like
2

You can call the .hydrate on the class see https://www.cornerstonejs.org/live-examples/dynamicallyaddannotations