Unable to add a custom tool to viewport

[cornerstonejs]

Unable to add a custom tool to viewport

[stevenylt]

tools: [
{
name: "HelloWorldMouse",
mode: "active",
toolClass: HelloWorldMouseTool,
modeOptions: { mouseButtonMask: 1 }
},
]

[stevenylt]

I figured out. Add toolClass property in the tools definition inside state. Working now. Thanks

[dannyrb]

If you spin up a reproduction in CodeSandbox, I can look into the issue.

This is the portion of the component responsible for handling the tools prop: https://github.com/cornerstonejs/react-cornerstone-viewport/blob/master/src/CornerstoneViewport/CornerstoneViewport.js#L749-L781

It looks like if a name is specified, we try to find the matching tool clas from the top level exports of cornerstone-tools. If the toolClass property is provided, we use that instead of trying to find by name.

If you think there's a friendlier or expected approach here, let me know. All for simplifying/improving the API.

[stevenylt]

I found it is caused by this section of code:

function _addAndConfigureInitialToolsForElement(tools, element) {
for (let i = 0; i < tools.length; i++) {
const tool =
typeof tools[i] === "string"
? { name: tools[i] }
: Object.assign({}, tools[i]);
const toolName = ${tool.name}Tool; // Top level CornerstoneTools follow this pattern

tool.toolClass = tool.toolClass || cornerstoneTools[toolName];

if (!tool.toolClass) {
  console.warn(`Unable to add tool with name '${tool.name}'.`);
  continue;
}

It somehow couldn't find toolClass. Where do I set the toolClass value for the custom tool?

[HubertChau]

Hey i'm running into the same issue and have attempted your solution of adding a toolClass element to the tool array however it doesn't appear to work. I might be importing the customTools incorrectly:
"import HelloWorldMouseTool from './tools/customTools'"