Issue with Incorrect or Outdated Versions of Cornerstone Tools and Libraries on npm for Angular Integration

[mah-developer]

Prerequisites

• [x] Which version of cornerstoneTools are you using? Version 1.81.2 (Not the latest version)
• [x] Which version of Angular are you using? Version 18.0.0 (Latest)
• [x] Are you reporting to the correct repository? Yes, cornerstoneTools
• [x] Did you search for existing issues? Yes, I searched for relevant issues such as Tools not working in Angular 8 and cornerstoneTools.init() returns undefined.

---

Steps to Reproduce the Issue

1. Add the following buttons to the component's markup:

   <button (click)="addBrushTool()">Add Brush Tool</button>
   <button (click)="setBrushToolActivate()">Set Brush Tool Activate</button>

2. Clicking the Add Brush Tool button results in the following console error:

   'Brush' is not registered with the library. You need to use cornerstoneTools.addTool to register it.

3. Clicking the Set Brush Tool Activate button results in the following console error:

   Tool Brush not added to toolGroup, can't set tool mode.

---

Investigation

The errors indicate that the Brush tool is not being properly registered or added to the tool group. Here's a detailed analysis:

1. Error During Tool Addition:

   The error suggests that 'Brush' is not registered with the library. In the addTool method within ToolGroup.ts, the following warning is triggered:

   `'${toolName}' is not registered with the library. You need to use cornerstoneTools.addTool to register it.`

   This implies that the Brush tool needs to be explicitly registered before it can be added to the tool group.

2. Error During Tool Activation:

   The error message:

   Tool Brush not added to toolGroup, can't set tool mode.

   indicates that even after attempting to add the Brush tool, it is not present in this._toolInstances within the ToolGroup, preventing it from being activated.

3. Code Analysis:

   In cornerstone.service.ts, the methods for adding and activating the Brush tool are defined as:

   public addBrushTool() {
     this.toolGroup!.addTool(BrushTool.toolName);
   }
   
   public setBrushToolActivate() {
     this.toolGroup!.setToolActive('Brush', { bindings: [{ mouseButton: ToolsEnums.MouseBindings.Primary }] });
   }

   However, the addTool method seems to expect the tool name to be registered beforehand using cornerstoneTools.addTool.

4. Potential Issues Identified:

   • Missing Tool Registration: The Brush tool may not have been registered with cornerstoneTools before attempting to add it to the tool group.
   • Incorrect Import Path: The ToolGroup is imported from a deep internal path, which might not be the intended usage and could lead to issues.
   • Version Compatibility: There might be incompatibilities between the versions of cornerstoneTools and cornerstone-core being used.

---

Questions

1. Tool Registration: Am I missing a step in registering the BrushTool with cornerstoneTools before adding it to the tool group?

2. Imports: I am importing the ToolGroup from the following path:

   import ToolGroup from "@cornerstonejs/tools/dist/types/store/ToolGroupManager/ToolGroup";

   Is this the correct import path, or should I be using a different one?

3. Version Compatibility: Could this issue be related to the specific versions of cornerstoneTools and cornerstone-core that I am using? If so, what would be the recommended version combination for Angular 18?

---

Additional Details

Error Trace in ToolGroup.ts:

addTool(toolName: string, configuration: ToolConfiguration = {}): void {
  const toolDefinition = state.tools[toolName];
  const hasToolName = typeof toolName !== 'undefined' && toolName !== '';
  const localToolInstance = this.toolOptions[toolName];
  if (!hasToolName) {
    console.warn(
      'Tool with configuration did not produce a toolName: ',
      configuration
    );
    return;
  }
  if (!toolDefinition) {
    console.warn(
      `'${toolName}' is not registered with the library. You need to use cornerstoneTools.addTool to register it.`
    );
    return;
  }
  if (localToolInstance) {
    console.warn(
      `'${toolName}' is already registered for ToolGroup ${this.id}.`
    );
    return;
  }

  const { toolClass: ToolClass } = toolDefinition;

  const toolProps = {
    name: toolName,
    toolGroupId: this.id,
    configuration,
  };
  const instantiatedTool = new ToolClass(toolProps);
  this._toolInstances[toolName] = instantiatedTool;
}

Activation Method in ToolGroup.ts:

public setToolActive(
  toolName: string,
  toolBindingsOptions = {} as SetToolBindingsType
): void {
  const toolInstance = this._toolInstances[toolName];
  if (toolInstance === undefined) {
    console.warn(`Tool ${toolName} not added to toolGroup, can't set tool mode.`);
    return;
  }
  if (!toolInstance) {
    console.warn(
      `'${toolName}' instance ${toolInstance} is not registered with this toolGroup, can't set tool mode.`
    );
    return;
  }
  // ...rest of the method
}

These snippets show that without proper registration using cornerstoneTools.addTool, the tool cannot be added or activated within the tool group.

---

Environment Details

• Angular: Version 18.0.0
• cornerstoneTools: Version 1.81.2
• cornerstone-core: Version 2.6.1
• Other Dependencies: As listed in the package.json snippet above.

---

Any guidance or suggestions to resolve these issues would be greatly appreciated. Thank you!

---

[mah-developer]

Hello all, when you encountered this error it's because you didn't add your tools to cornerstoneTools. Before adding tool to this property and set tool activate from this property private toolGroup!: ToolGroup | undefined; like bellow:

  public addBrushTool() {
    this.toolGroup!.addTool(BrushTool.toolName, { toolLayer: true });
  }
  public setBrushToolActivate() {
    this.toolGroup!.setToolActive(BrushTool.toolName, {
      bindings: [{ mouseButton: ToolsEnums.MouseBindings.Primary }]
    });
  }

You only need invole addTool() method from @cornerstonejs/tools and pass your tool to it:

...
import {  BrushTool,  AnnotationTool,  addTool,  destroy,  Enums as ToolsEnums,  init as initTools,  ToolGroupManager,    segmentation} from '@cornerstonejs/tools';

  public addBrushTool() {
        // Register tools
        addTool(BrushTool);
        this.toolGroup!.addTool(BrushTool.toolName, { toolLayer: true });
  }
....

You can do that in addBrushTool() method.