Changing a state variable in React causes Cornerstone Tools to lose it's zoom setting

[dcox1776]

Prerequisites

• [6.0.8 ] Which version are you using? (Is it latest?)
• [yes ] Are you reporting to the correct repository?
• [ yes and no] Did you search existing issues? (Were any related?)

Description

Steps to Reproduce the issue

1. When I zoom an image and subsequently change a React state variable in response to a button being clicked,
2. Then the image reverts to its original size.

Expected behavior: I expect the image to retain its size as a result of zooming.

Actual behavior: (What actually happened)

CodeSandbox With Reproduction of Issue: I'll have to work on this. Need to setup a React app to reproduce the issue.

• Basic Template

[dcox1776]

I was able to deal with this issue by writing the following function:

function saveViewport() {
    const el = document.getElementById('image-element');
    viewport.current = cornerstone.getViewport(el);
    translation.current = { 
        x: viewport.current.translation.x,
        y: viewport.current.translation.y
    }
}

In response to an event such as a button click or slider change, I call this function to preserve the viewport in a reference variable. When the view is redrawn my useEffect function is called and I restore the viewport.

Notice that I copy the translation object explicitly. This is because assignment of objects in JavaScript is by reference and not value. The value attributes of the viewport are preserved when I assign the viewport to my reference variable but not the object attributes. If I don't do this, then the translation values are reset to 0.