Как сбросить окно просмотра краеугольного камня при загрузке нового изображения

Question

Я пытаюсь заставить приложение просмотра Dicom реагировать с помощью библиотеки Cornerstone.js. В моем приложении для реагирования есть два компонента. Один - ImagePreview, а другой - CornerStoneElement. CornerStoneElement - это то место, где я инициализирую библиотеку краеугольного камня, и она загружает текущее изображение в своем состоянии. Когда новое изображение помещается в состояние CornerStoneElement, оно загружает новое изображение странным образом, так как все соотношения сторон исчезли, а область просмотра увеличена. При многократном переключении изображения с помощью ImagePreview область просмотра становится все больше и больше. Мне нужно сбрасывать окно просмотра всякий раз, когда новое изображение загружается в компонент CornerStoneElement. Вот код для обоих компонентов.

ImagePreview.js

import React,{useState,useEffect,useRef} from 'react'

const ImagePreview = ({ image,parentStateSetter,imageListIndex }) => {

let setParentState = (e) => {    
parentStateSetter(e.target.getAttribute('image-list-index'));
    
 }


return (
  <div className="py-5 px-10">
    <img src={image.previewURL} className="w-full" onClick={setParentState} image-list-index= {imageListIndex}/>
    
  </div>
   );
}

export default ImagePreview

CornerStoneElement.js

import React,{useState, setState, useRef, useEffect} from "react";
import * as cornerstone from "cornerstone-core";
import * as cornerstoneMath from "cornerstone-math";
import * as cornerstoneTools from "cornerstone-tools";

import Hammer from "hammerjs";
import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";

cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
cornerstoneTools.external.Hammer = Hammer;

cornerstoneTools.init();

const CornerStoneElement = (props) => {

    console.log('props is called', props);
    const stack = (Object.keys(props.stack).length > 0 )? props.stack : '';
    const [viewport, setViewport] = useState(cornerstone.getDefaultViewport(null, undefined));
    const imageId  = (Object.keys(props.stack).length > 0 )? props.stack.imageIds[0] : '';;
    const viewPortRef = useRef(null);

    const onWindowResize = () => {
        console.log("onWindowResize :", viewPortRef.current);
        cornerstone.resize(viewPortRef.current);
    }
    
    const onImageRendered = () => {
        const viewport = cornerstone.getViewport(viewPortRef.current);
        console.log('onImageRendered :',viewport);
        setViewport(viewport);       
        
    }
    
    const onNewImage = () => {
        const enabledElement = cornerstone.getEnabledElement(viewPortRef.current);
        
       
    }

    const addZoomTool = (e) => {
      e.preventDefault();
      const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;

      cornerstoneTools.addTool(ZoomMouseWheelTool)
      cornerstoneTools.setToolActive('ZoomMouseWheel', { mouseButtonMask: 1 })
    }

    const addLengthTool = (e) => {
      e.preventDefault();
      const LengthTool = cornerstoneTools.LengthTool;

      cornerstoneTools.addTool(LengthTool)
      cornerstoneTools.setToolActive('Length', { mouseButtonMask: 1 });
    }

    const addElipticalTool = (e) => {
      e.preventDefault();
      const EllipticalRoiTool = cornerstoneTools.EllipticalRoiTool;

      cornerstoneTools.addTool(EllipticalRoiTool)
      cornerstoneTools.setToolActive('EllipticalRoi', { mouseButtonMask: 1 })
    }

    useEffect(() => {

        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 => {
            // Display the first image    

            
            cornerstone.displayImage(element, image);
            // Add the stack tool state to the enabled element
            /* cornerstoneTools.addStackStateManager(element, ["stack"]);
            cornerstoneTools.addToolState(element, "stack", stack);    */ 
               
            element.addEventListener( "cornerstoneimagerendered", onImageRendered );
            element.addEventListener("cornerstonenewimage", onNewImage);
            window.addEventListener("resize",onWindowResize); 
          });
          console.log('inside comp will mount :', element);
        }
        
      
    }, [imageId])

    return (
        <div className= "py-5 px-10 ">
          <div className="inline-flex">
            <button className = "text-sm bg-blue-500 hover:bg-blue-700 text-white  p-2 rounded m-2" onClick = {addZoomTool}> Zoom Tool</button>
            <button className = "text-sm bg-blue-500 hover:bg-blue-700 text-white  p-2  rounded m-2" onClick = {addLengthTool}> Length Tool </button>
            <button className = "text-sm bg-blue-500 hover:bg-blue-700 text-white  p-2 rounded m-2" onClick = {addElipticalTool}> Eliptical Tool </button>
          </div>
          
          <div
            className="viewportElement my-3"           
            ref={viewPortRef}
          >
            <canvas className="cornerstone-canvas" />
            <div>Zoom: {viewport.scale}</div>
            <div>
              WW/WC: {viewport.voi.windowWidth} /{" "}
              {viewport.voi.windowCenter}
            </div>
          </div>
        </div>
      );
}

export default CornerStoneElement;

Answer 1

Так что проблема не в краеугольном камне. Все, что мне нужно было сделать, это назначить высоту родительскому элементу краеугольного камня, внутри которого он рендерился, и это решило проблему.