[RFI] Possible to apply mouse drag effect (pan, b/c) on one canvas onto other canvases ?

Prerequisites

• Are you running the latest version? => tools@2.3.1 and core@2.1.0
• Are you reporting to the correct repository? => that is my understanding
• Did you perform a cursory search? => yes, no luck tho

Description

My use cas is I have multiple canvas, or enabled element, on a page. Thanks to cornerstone-tools I can easily add a feature that lets the users drag its mouse on the canvas to change brightness / contrast values, like so :

                cornerstoneTools.mouseInput.enable(element);
                cornerstoneTools.mouseWheelInput.enable(element);
                cornerstoneTools.wwwc.activate(element, 1); 

As the user is dragging its mouse, the brightness / contrast changes. I would like to apply the same effect (b/c) to the other cornerstone canvas of the page.

So far I’ve tried this :

                element.addEventListener('cornerstoneimagerendered', (e) => {
                    console.log('[CornerstoneService] event cornerstoneimagerendered (where is the bc info?)')
                })

But the brightness / contrast values are nowhere to be found, at least in the e event payload.

I guess a pseudo code of what I would like to achieve is something like this :

• on b/c change of canvas1 :
  • get the B/C value
  • apply it to the other canvases, and re-render them.

Is such a thing possible ? In the cornerstone philosophy, how should it be achieved ?

Also I have the same question for the pan feature, but 1/ it seems that these values are stored in the viewport of an element and 2/ I’d like the same solution for pan and b/c, so since I have no idea how to do that for b/c, I’m asking this 😺

Thanks

[swederik]

Did you check the synchronizers?

https://rawgit.com/cornerstonejs/cornerstoneTools/master/examples/panZoomSynchronizer/index.html

See other examples here:

https://rawgit.com/cornerstonejs/cornerstoneTools/master/examples/index.html

Oh, and I guess you are talking about window width and window center when you say brightness / contrast.

[swederik]

const viewport = cornerstone.getViewport(element);
console.log(viewport.voi);

https://docs.cornerstonejs.org/concepts/viewports.html

You can also click View Source here: https://rawgit.com/cornerstonejs/cornerstone/master/example/windowlevel/index.html