FreehandRoiSculptor tool cursor drawn in incorrect location

[mkramers]

Prerequisites

• [4.8.2] Which version are you using? (Is it latest?) Not the latest, but it appears there have been no changes in the tool since this version
• [y] Are you reporting to the correct repository?
• [y] Did you search existing issues? (Were any related?) No related issues

Description

When changing slices and attempting to edit a different contour, the circle which is used to push/sculpt the contours does not appear in the correct position. Despite the visual component of the tool not displaying in the correct position, the tool itself behaves as expected. The circle does appear to size appropriately. See the gif for demonstration.

Steps to Reproduce the issue

1. Create a contour
2. Activate the sculptor tool
3. Observe that the circle displayed as part of the sculptor tool is not renederd in the correct position (This only happens on certain datasets/slices)

Expected behavior:

Sculptor circle appears in the correct location for all series/slices

Actual behavior:

Sculptor circle does not appear in the correct location

CodeSandbox With Reproduction of Issue:

NOTE: This issue does not occur for all series (as shown in the example dataset) https://codesandbox.io/s/cornerstone-basic-issue-template-99pq2

[mkramers]

I will try to fix this issue on my own over the next week or so and put up a PR if successful. Thank you.

[dannyrb]

@mkramers, the CodeSandbox you provided does not appear to reproduce the issue. Are you able to provide one that does?

[hemanth-kumarv]

Hello @mkramers. Were you able to solve this issue? If yes, please let me know how, as I am facing the same too. Thank you.

[mkramers]

@hemanth-kumarv - Unfortunately I was not able to determine/fix the root cause of this issue. What I did discover though was that it was related to how tools were ordered in the tool config. It was a bit of a hack, but what I ended up doing was changing the order of the tools in the tool configuration props (I'm using react-cornerstone-viewport - see my diff below).

[hemanth-kumarv]

@hemanth-kumarv - Unfortunately I was not able to determine/fix the root cause of this issue. What I did discover though was that it was related to how tools were ordered in the tool config. It was a bit of a hack, but what I ended up doing was changing the order of the tools in the tool configuration props (I'm using react-cornerstone-viewport - see my diff below).

Thank you for the quick reply. Unfortunately, this did not work. Please let me know if there are any other solutions.

[getnsv]

@mkramers - Am facing the same issue of the freehandroisculpttool not focusing on the mouse coordinates. Stacking the tools in a different order did not help either. Any other suggestions?

Only one other finding was that if the image is of 512x512 or any particular dimension, making the viewport of the same width and height alone seems to focus the tool's cursor properly. This is a little bit of priority for us, please can you suggest if you have found the root cause by now.

regards, Sreevani

[getnsv]

@mkramers, the CodeSandbox you provided does not appear to reproduce the issue. Are you able to provide one that does?

@dannyrb - Please find the code below which can be used to reproduce this issue, I have changed the viewport width and height to 600 and image is 512px. This type of size dependency for proper cursor positioning would be difficult to manage, please suggest.

class NudgeTool extends React.Component{ constructor(props){ super(props); this.state = { activeTool: 'Wwwc', viewports: [0] }; this.handleClick = this.handleClick.bind(this); }; async handleClick(e) { console.log(e.target.value) this.setState({ activeTool: e.target.value }); } render(){

    return(
        <div style={{ display: 'flex', flexWrap: 'wrap'}}>
            {this.state.viewports.map(vp => (
            <CornerstoneViewport
                key={vp}
                tools={[
                {
                    name: 'Wwwc',
                    mode: 'active',
                    modeOptions: { mouseButtonMask: 1 },
                },
                                
                // Scroll
                { name: 'StackScrollMouseWheel', mode: 'active' },
                { 
                    name: 'FreehandRoi',
                    mode: 'active' ,
                    modeOptions:{ mouseButtonMask: 1 },
                    props:{
                      configuration:{
                          alwaysShowHandles:false
                      }
                    }
                },
                { 
                    name: 'FreehandRoiSculptor',
                    mode: 'active',
                    modeOptions:{ mouseButtonMask : 1 },
                    props:{
                      configuration:{
                          minSpacing:0.025,
                          dragColor: "rgb(20,20,255)",
                          hoverColor:"rgb(0,0,255)"
                      }
                   }
                }
                
                
                
                ]}
                activeTool={this.state.activeTool}

                imageIds={[
                    'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.11.dcm',
                    'dicomweb://s3.amazonaws.com/lury/PTCTStudy/1.3.6.1.4.1.25403.52237031786.3872.20100510032220.12.dcm',
                ]}

                style={{width:'600px', height: '600px' }}
  
            />
            ))}
           

        <div>
        <br/>
            <ul className="button-group"onClick={(e) => this.handleClick(e)}>
                <Button value='Wwwc'>
                    WW/WC
                </Button>
                <Button value='FreehandRoi'>
                    Freehand 
                </Button>
                <Button value='FreehandRoiSculptor'>
                Nudge
                </Button>
                
            </ul> 
       </div>  
        </div>
    );
}

}

export default NudgeTool;

[hemanth-kumarv]

@dannyrb, I found a fix for this issue. Its happening because of const handleCanvasCoords = external.cornerstone.pixelToCanvas(element, handle); in drawing/drawHandles.js, which is called in tools/FreehandRoiSculptorTool.js. The handleCanvasCoords is not the actual location of the handles in the viewport. The fix for this is:

drawing/drawHandles.js:

// line 58
var handleCanvasCoords;
if (options.name !== 'FreehandSculptorTool') 
    handleCanvasCoords = external.cornerstone.pixelToCanvas(element, handle);
else 
    handleCanvasCoords = handle;

tools/FreehandRoiSculptorTool.js:

// line 70
var scale = external.cornerstone.getEnabledElement(element).viewport.scale;
const options = {
  fill: null,
  color: this.configuration.dragColor,
  handleRadius: this._toolSizeCanvas/ scale,    // to handle radius for different values of scale/zoom
  name: 'FreehandSculptorTool',
};

drawHandles(context, eventData, this.configuration.mouseLocation.handles, options);
.
.
.
// line 248
var scale = external.cornerstone.getEnabledElement(element).viewport.scale;
const options = {
  fill: null,
  color: this.configuration.hoverColor,
  handleRadius: radiusCanvas / scale,    // to handle radius for different values of scale/zoom
  name: 'FreehandSculptorTool',
};

drawHandles(context, eventData, this.configuration.mouseLocation.handles, options);

Please validate if this is the actual fix for this issue. Thank you.

[Ouwen]

This fixed the issue for me.

[jackzsj]

This fixed the issue for me. It seems that the source code has not been fixed. How to deal with this problem?

[prerakmody]

Hi, This issue still seems to persist. I made an issue on stackoverflow.