Resolving Segmentation Offset Issues in Cornerstone3D

[ohif]

View in #cornerstone3d on Slack

@Rod_Fitzsimmons_Frey: I’m having some trouble figuring out how to use segmentations properly. I’ve got the brush drawing segmentations now, but the representation position is offset from the mouse cursor. It seems to be a scaling problem, since the closer I am to the top-left corner the less the offset is. My forehead is a bit bruised from banging it on the keyboard.

@Ibrahim_Mohamed: do you have a reproducible demo? I can help you fix this
something on github or codepen

@Rod_Fitzsimmons_Frey: Just my project code, unfortunately, and it’s a bear to get running.

@Ibrahim_Mohamed: Hmm, I’m trying to think what could cause this

@Rod_Fitzsimmons_Frey: I’ll see if I can replicate it in a simpler example. I followed one of the examples in tools pretty closely.

@Ibrahim_Mohamed: whats ur device pixel ratio
in dev tools
whats the output when you do devicePixelRatio

@Rod_Fitzsimmons_Frey: Is that a function?

@Ibrahim_Mohamed: no

just type it console
it will give you a number

@Rod_Fitzsimmons_Frey: 2

@Ibrahim_Mohamed: if you change to 1, does it get fixed?

@Rod_Fitzsimmons_Frey: Definitely had an effect!! It paints offset up and left of the drawing circle now, but it’s consistent across the image

@Ibrahim_Mohamed: you can dm the code you posted earlier, maybe I can help with a fix

@Rod_Fitzsimmons_Frey: Thanks a million. devicePixelRatio reset after a page load, is that expected?

@Ibrahim_Mohamed: yeah thats how it works
I was just seeing if it was related
ur not supposed to modify it
I saw some code for aspect ratio in what u posted earlier it might be related
use this in the calculations you sent me in dm, i think it will fix it

const devicePixelRatio = window.devicePixelRatio || 1;

@Rod_Fitzsimmons_Frey: Hardcoded it to 1000, didn’t work

  const updateDimensions = () => {
    const parent = element.current?.parentElement;
    if (parent) {
      const parentStyles = getComputedStyle(parent);
      const parentWidth =
        parent.clientWidth -
        parseFloat(parentStyles.paddingLeft) -
        parseFloat(parentStyles.paddingRight);
      const parentHeight =
        parent.clientHeight -
        parseFloat(parentStyles.paddingTop) -
        parseFloat(parentStyles.paddingBottom);
      const devicePixelRatio = window.devicePixelRatio || 1;
      if (parentWidth * aspectRatio <= parentHeight) {
        // Fit by width
        setDimensions({
          //width: Math.round(parentWidth/devicePixelRatio),
          //height: Math.round((parentWidth * aspectRatio)/devicePixelRatio),
          width: 1000,
          height: 1000,
        });
      } else {
        // Fit by height
        setDimensions({
          //width: Math.round((parentHeight / aspectRatio)/devicePixelRatio),
          //height: Math.round(parentHeight/devicePixelRatio),
          width: 1000,
          height:1000,
        });
      }
    }
  };

Sorry channel, that should have been in DM.
In any case, it’s clearly this code that’s causing the problem, so thanks for the trailhead!

@Ibrahim_Mohamed: hmm
can you try to call cornerstone.getRenderingEngines()[0].resize()
in the console
and then draw again
does it fix anything?

@Rod_Fitzsimmons_Frey: hm. cornerstone (and window.cornerstone) are undefined

@Ibrahim_Mohamed: just expose it first, import * as cornerstone from @cornerstonejs/core
window.cornerstone = cornerstone
in any of your scripts
put it in top of your component or your app init for now

or atleast, add this here

const updateDimensions = () => {
 // add somewhere
  renderingEngine.resize()
}

@Rod_Fitzsimmons_Frey: BOOM! That did it

@Ibrahim_Mohamed: Nice

@Rod_Fitzsimmons_Frey: at least in the console, let me try in the updateDimensions

@Ibrahim_Mohamed: yeah you need this always somewhere
so needs to be in your hook
you can remove the other device pixel stuff we added
I dont think its needed

@Rod_Fitzsimmons_Frey: OK, I’ll play with it. I put the resize() in the updateDimensions code and it didn’t work. But then I did it in the console and it worked again. I think this will solve my problem, I just need to get the incantations in the right order.
Thanks so much, my forehead and my keyboard are very grateful

@Ibrahim_Mohamed: No problem haha, i think to test if it works in your hook
resize your browser window
that might make it get called
and then it will be synced
so maybe you need to call it on initial load as well
or something like that
you need something like this ideally

@Rod_Fitzsimmons_Frey: Works perfectly now, thank you again

@Ibrahim_Mohamed: No problem!