search

cornerstonejs / cornerstone3D

Cornerstone is a set of JavaScript libraries that can be used to build web-based medical imaging applications. It provides a framework to build radiology applications such as the OHIF Viewer.
https://cornerstonejs.org
MIT License
557 stars 285 forks source link

Implement a new crop box tool #350

Open luccascorrea opened 1 year ago

luccascorrea commented 1 year ago

I'm working on another improvement to the CornerstoneJS library and I'm a bit stuck so I thought maybe someone here would be able to give me a hint as to what direction to go.

My goal is to implement a new tool compatible with the new VolumeViewport3D that would allow the user to drag a crop box to modify the clipping planes for the viewport. It would behave precisely like this vtk.js example

I started by roughly modifying the volumeViewport3D example to see if I could get it to work initially. If I could do that, I could then refactor everything and turn it into a tool but that's when I got stuck.

What I did is I modified the example code to behave the same way as the vtk.js example, you can see my changes here. With those changes, the widget is being drawn correctly but the problem is that mouse events are not being passed down to it. I investigated the vtk.js source code and understood that in their example, the mouse events are passed down from the vtkRenderWindowInteractor (which adds event listeners to the DOM element that wraps the canvas) to the vtkWidgetManager which then passes it down to the vtkImageCroppingWidget (which is the widget that does all the magic).

I noticed that no events are being passed down to the vtkImageCroppingWidget in my implementation using CornerstoneJS because the bindEvents method on the vtkRenderWindowInteractor (which in CornerstoneJS is created in this file) is never called.

After noticing that, I modified my example code so that the bindEvents method is forcibly called (just to see if it would work) but then that leads to an infinite loop that crashes the browser tab (and I couldn't figure out why).

So the situation at this point is that the widget correctly draws the box to the canvas but it doesn't work properly because the drag handles are not clickable.

Do you happen to have any tips or strategies I could use to allow clicks to pass through?

Thank you very much for the help!

sedghi commented 1 year ago

Before I give an answer, there is a rendering bug which makes the vtkActor in the volume3D viewport not appear, or if it appears at incorrect depth. This branch fixes some parts of it https://github.com/cornerstonejs/cornerstone3D-beta/tree/feat/sphere-surface-cut

But i will create a PR and explain how to fix the other parts

sedghi commented 1 year ago

@luccascorrea So during design of cornerstone3D initially we decided to not use the widget/interactors from vtk.js and use our toolings from cornerstone-legacy, I think for 2D scenario it address most of the tools needed, but I also would like to see these fantastic 3D tools (widgets) available in cornerstone3d. So in short: your use case aligns well with our roadmap.

I bet since we decided not to use the widget/interactor then we didn't bother binding events at all.

We have some funding available that let me spend some time on supporting community to add features. So good news is that I can be more closely involved in this (less coding more meetings and debugging together) Would that be something of your interest too?

luccascorrea commented 1 year ago

That's great @sedghi. Yes, I'd be interested in that too 🙂

simonalo commented 2 months ago

Is there any news on this subject ? I'm the exact same scenario and I would like to use the cropping tool, did you integrate it ?