Misc. Version 3 syntax and usage questions

Prerequisites

• [ X] Are you running the latest version?
• [ X] Are you reporting to the correct repository?
• [ X] Did you perform a cursory search?

For more information, see the CONTRIBUTING guide.

Description

I’ve been using cornerstonejs for quite some time now. I am currently trying to adapt my tool to use cornerstone tools. The problem is that I get this error and don’t know how to fix it nor how it’s been generated.

Unhandled Rejection (TypeError): undefined is not an object (evaluating ‘cornerstone_tools__WEBPACK_IMPORTED_MODULE_10__[“mouseInput”].enable’)

Steps to Reproduce

1. After trying to simply install it on my current tool and nothing seems to work, I’ve search for some people that have done the same. You can check this url. I tried to adapt my tool to his code, nothing. Then I literally copied his code and put it in my project, same error.

Expected behavior: Tool to work as the link provided.

Actual behavior: Getting this error no matter if it is an adaptation to my tool or the exact same code as this person.

Codepen With Reproduction of Issue:

• Basic Template

[swederik]

If you don’t have the metadata ahead of time, what you can do is use cornerstone.loadAndCacheImage to retrieve your images first, then check the imagePlaneMetadata via cornerstone.metadata.get('imagePlaneModule', imageId), and sort them by imagePositionPatient, and then create the stack.

[dannyrb]

Live Example:

• Sandbox, using your .dcm file: https://codesandbox.io/s/9z04x8ykjr
• src/components/SimpleExampleViewer.vue contains most of the relevant logic

Notes

Input Listeners

Version 2

cornerstoneTools.mouseInput.enable(element);
cornerstoneTools.mouseWheelInput.enable(element);
cornerstoneTools.touchInput.enable(element);

Version 3

cornerstoneTools.init({ /* options */ });

In version 3, we listen for these by default for each enabledElement you create after calling cornerstoneTools.init({ /*option*/ })

Activating Tools

Version 2

cornerstoneTools.wwwc.activate(element, 1);
cornerstoneTools.pan.activate(element, 2);
cornerstoneTools.zoom.activate(element, 4);
cornerstoneTools.zoomWheel.activate(element);
cornerstoneTools.panTouchDrag.activate(element);
cornerstoneTools.zoomTouchPinch.activate(element);

In Version 2, we can activate a built-in tool for a given enabledElement. The 2nd option, when activating a mouseButtonTool is the mouseButtonMask used to determine which button(s) the tool should respond to.

Version 3

// Grab Tool Classes
const WwwcTool = cornerstoneTools.WwwcTool;
const PanTool = cornerstoneTools.PanTool;
const PanMultiTouchTool = cornerstoneTools.PanMultiTouchTool;
const ZoomTool = cornerstoneTools.ZoomTool;
const ZoomTouchPinchTool = cornerstoneTools.ZoomTouchPinchTool;
const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;

// Add them
cornerstoneTools.addTool(PanTool);
cornerstoneTools.addTool(ZoomTool);
cornerstoneTools.addTool(WwwcTool);
cornerstoneTools.addTool(PanMultiTouchTool);
cornerstoneTools.addTool(ZoomTouchPinchTool);
cornerstoneTools.addTool(ZoomMouseWheelTool);

// Set tool modes
cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 4 }); // Middle
cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 2 }); // Right
cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 1 }); // Left & Touch
cornerstoneTools.setToolActive("PanMultiTouch", {});
cornerstoneTools.setToolActive("ZoomMouseWheel", {});
cornerstoneTools.setToolActive("ZoomTouchPinch", {});

In Version 3, we make this a 2-step process. You need to:

1. Add a tool
   • cornerstoneTools.addTool(ToolClass) OR
   • cornerstoneTools.addToolForElement(enabledElement, ToolClass)
2. Set the tool’s mode
   • cornerstoneTools.setToolActive("ToolName", { /* options */ }) OR
   • cornerstoneTools.setToolActiveForElement(enabledElement, "ToolName", { /* options */ })

Where addTool and setToolActive apply to all currently enabled elements, and their ForElement counterparts allow for finer control.

Parting Thoughts

I realize Version 3 may feel a bit more verbose, but it helps solve some common problems that surface pretty quickly when using Version 2. If you want specific examples of why we made the changes, I can delve deeper.

Or if you have additional questions about version 3’s usage, I can whip up some examples there as well.

Also, I am moving to the syntax of version 3. Even calling const csTools = cornerstoneTools.init(); returns undefined.

The Version 3 docs I linked you to were written before the API had been finalized. Unfortunately, this means parts of it are outdated and misleading. If you can point me toward the page(s) and excerpts that don’t work, I’ll try to update them. If you’re feeling brave, please feel free to submit a pull request with any changes you feel may correct outdated or incorrect documentation (all of our docs are simple markdown documents).