title: How to reset the cornerstone viewport when new image is loaded
body: <p>I am trying to make a Dicom viewer app in react using Cornerstone.js library. I have two components in my react app. One is ImagePreview and the other is CornerStoneElement. CornerStoneElement is where I initialize the cornerstone library and it loads the current image in its state. When a new image is pushed to CornerStoneElement's state it is loading the new image in a weird way as all the aspect ratios are gone and the viewport is zoomed in. Upon switching the image multiple times through ImagePreview, the viewport keeps getting bigger and bigger. What I need is to reset the viewport whenever a new image is loaded in the CornerStoneElement component. Here is the code for both components.</p>
  <p><strong>ImagePreview.js</strong></p>
  <pre><code>import React,{useState,useEffect,useRef} from 'react'
  
  const ImagePreview = ({ image,parentStateSetter,imageListIndex }) =&gt; {
  
  let setParentState = (e) =&gt; {    
  parentStateSetter(e.target.getAttribute('image-list-index'));
      
   }
  
  
  return (
    &lt;div className=&quot;py-5 px-10&quot;&gt;
      &lt;img src={image.previewURL} className=&quot;w-full&quot; onClick={setParentState} image-list-index= {imageListIndex}/&gt;
      
    &lt;/div&gt;
     );
  }
  
  export default ImagePreview
  </code></pre>
  <p><strong>CornerStoneElement.js</strong></p>
  <pre><code>import React,{useState, setState, useRef, useEffect} from &quot;react&quot;;
  import * as cornerstone from &quot;cornerstone-core&quot;;
  import * as cornerstoneMath from &quot;cornerstone-math&quot;;
  import * as cornerstoneTools from &quot;cornerstone-tools&quot;;
  
  import Hammer from &quot;hammerjs&quot;;
  import * as cornerstoneWebImageLoader from &quot;cornerstone-web-image-loader&quot;;
  
  cornerstoneTools.external.cornerstone = cornerstone;
  cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
  cornerstoneWebImageLoader.external.cornerstone = cornerstone;
  cornerstoneTools.external.Hammer = Hammer;
  
  cornerstoneTools.init();
  
  const CornerStoneElement = (props) =&gt; {
  
      console.log('props is called', props);
      const stack = (Object.keys(props.stack).length &gt; 0 )? props.stack : '';
      const [viewport, setViewport] = useState(cornerstone.getDefaultViewport(null, undefined));
      const imageId  = (Object.keys(props.stack).length &gt; 0 )? props.stack.imageIds[0] : '';;
      const viewPortRef = useRef(null);
  
      const onWindowResize = () =&gt; {
          console.log(&quot;onWindowResize :&quot;, viewPortRef.current);
          cornerstone.resize(viewPortRef.current);
      }
      
      const onImageRendered = () =&gt; {
          const viewport = cornerstone.getViewport(viewPortRef.current);
          console.log('onImageRendered :',viewport);
          setViewport(viewport);       
          
      }
      
      const onNewImage = () =&gt; {
          const enabledElement = cornerstone.getEnabledElement(viewPortRef.current);
          
         
      }
  
      const addZoomTool = (e) =&gt; {
        e.preventDefault();
        const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;
  
        cornerstoneTools.addTool(ZoomMouseWheelTool)
        cornerstoneTools.setToolActive('ZoomMouseWheel', { mouseButtonMask: 1 })
      }
  
      const addLengthTool = (e) =&gt; {
        e.preventDefault();
        const LengthTool = cornerstoneTools.LengthTool;
  
        cornerstoneTools.addTool(LengthTool)
        cornerstoneTools.setToolActive('Length', { mouseButtonMask: 1 });
      }
  
      const addElipticalTool = (e) =&gt; {
        e.preventDefault();
        const EllipticalRoiTool = cornerstoneTools.EllipticalRoiTool;
  
        cornerstoneTools.addTool(EllipticalRoiTool)
        cornerstoneTools.setToolActive('EllipticalRoi', { mouseButtonMask: 1 })
      }
  
      useEffect(() =&gt; {
  
          console.log('use effect is called ');
          
          const element = viewPortRef.current;        
          // Enable the DOM Element for use with Cornerstone
          
          cornerstone.enable(element);
      
          // Load the first image in the stack
          if(imageId){
  
            cornerstone.loadImage(imageId).then(image =&gt; {
              // Display the first image    
  
              
              cornerstone.displayImage(element, image);
              // Add the stack tool state to the enabled element
              /* cornerstoneTools.addStackStateManager(element, [&quot;stack&quot;]);
              cornerstoneTools.addToolState(element, &quot;stack&quot;, stack);    */ 
                 
              element.addEventListener( &quot;cornerstoneimagerendered&quot;, onImageRendered );
              element.addEventListener(&quot;cornerstonenewimage&quot;, onNewImage);
              window.addEventListener(&quot;resize&quot;,onWindowResize); 
            });
            console.log('inside comp will mount :', element);
          }
          
        
      }, [imageId])
  
      return (
          &lt;div className= &quot;py-5 px-10 &quot;&gt;
            &lt;div className=&quot;inline-flex&quot;&gt;
              &lt;button className = &quot;text-sm bg-blue-500 hover:bg-blue-700 text-white  p-2 rounded m-2&quot; onClick = {addZoomTool}&gt; Zoom Tool&lt;/button&gt;
              &lt;button className = &quot;text-sm bg-blue-500 hover:bg-blue-700 text-white  p-2  rounded m-2&quot; onClick = {addLengthTool}&gt; Length Tool &lt;/button&gt;
              &lt;button className = &quot;text-sm bg-blue-500 hover:bg-blue-700 text-white  p-2 rounded m-2&quot; onClick = {addElipticalTool}&gt; Eliptical Tool &lt;/button&gt;
            &lt;/div&gt;
            
            &lt;div
              className=&quot;viewportElement my-3&quot;           
              ref={viewPortRef}
            &gt;
              &lt;canvas className=&quot;cornerstone-canvas&quot; /&gt;
              &lt;div&gt;Zoom: {viewport.scale}&lt;/div&gt;
              &lt;div&gt;
                WW/WC: {viewport.voi.windowWidth} /{&quot; &quot;}
                {viewport.voi.windowCenter}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
  }
  
  export default CornerStoneElement;
  </code></pre>