Changing the browser zoom level breaks the CrosshairsTool

[RoyWiggins]

This issue happens on the crossHairs example, in Google Chrome.

Start with zoom=100%:

Zooming in, the crosshairs start to desync. Mousing over them sometimes makes them jump around:

Zoom out to 100% again and they're still broken and pointing visibly offset from where they should be. Keep in mind, you don't need to actually click on the crosshairs to trigger this.

If the page loads at a particular zoom level and never changes, it's fine, but zooming in or out reliably breaks the crosshairs.

[bingliang-zh]

After digging into the source code, I'm pretty sure viewport.worldToCanvas is the root cause.

multiVolumeCanvasToWorld and stackcanvastoworld also have this bug when browser zoom in/out. The canvas' value is correct, but the world's value changes.

I'll try next day to see if I can fix this.

[sedghi]

The reason is that resizing is not hooked to the window resize in the demos, you should listen to window size change and trigger a resize on renderingEngine

[RoyWiggins]

Is the correct way to do that documented anywhere? It feels like a bug that this doesn't get handled automatically- I can't think of a situation where you wouldn't want cornerstone to handle window resizes?

[swederik]

We had automatic resizing in a previous version and it was a mess. Resize behavior is app specific and often you want to resize the cornerstone elements simultaneously with other aspects of the UI, so it's best to provide the API and let the consumer call it when they want things resized. If the library does it automatically you end up with multiple resize calls which run independently per viewport which sometimes end up in different animation frames and are out of sync with the rest of the app.

On Thu., Sep. 22, 2022, 23:03 Roy Wiggins, @.***> wrote:

Is the correct way to do that documented anywhere? It feels like a bug that this doesn't get handled automatically- I can't think of a situation where you wouldn't want cornerstone to handle window resizes?

— Reply to this email directly, view it on GitHub https://github.com/cornerstonejs/cornerstone3D-beta/issues/221#issuecomment-1255545660, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEUMMKFSLSB2MWLT5ANA2DV7TCRTANCNFSM6AAAAAAQOU5OXY . You are receiving this because you are subscribed to this thread.Message ID: @.***>

[IbrahimCSAE]

This can be easily handled with a resize observer, and using the built in method for conrerstone3D RenderingEngine.resize(immediate?: boolean, resetPan?: boolean, resetZoom?: boolean): void .

      const onresize = (dom_elem, callback) => {
        const resizeObserver = new ResizeObserver(() => callback());
        resizeObserver.observe(dom_elem);
      }; 

      onresize(this.$refs.AXIAL.viewer, () => {
        this.renderingEngine.resize(true, false);
      });

Just make sure to keep a reference to the listener somewhere to destroy it when you unmount the component.

This is the documentation for the resize method https://www.cornerstonejs.org/api/core/class/RenderingEngine#resize

And this is an example that has a resize observer that calls the method when you zoom in and out, so the crosshairs stay synced https://www.cornerstonejs.org/live-examples/petct

[sedghi]

This has been addressed in the latest main branch. I will proceed to close this, and if it is indeed an issue, please feel free to reopen it.