Not able to scroll thumbnail images

[krishnauppili]

Hi,

I have used cornerstone js inside my react application and I rendered multiple viewports for series of images with one active element and list of thumbnail elements. The problem is that I'm not able to scroll the thumbnail list which I'm not able to figure out what exactly the reason is. Below is the source code and screenshot of the output. The left pane contains the list of thumbnail elements where the scroll is not working.

Any suggestions would greatly help. Thanks!!

my source code App component

import React, {useEffect, useState} from "react";
import cornerstone from 'cornerstone-core';
import cornerstoneMath from 'cornerstone-math';
import cornerstoneTools from 'cornerstone-tools';
import Hammer from 'hammerjs';
import * as cornerstoneWebImageLoader from "cornerstone-web-image-loader";
import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
import dicomParser from "dicom-parser";
import './App.css';

cornerstoneTools.external.cornerstone = cornerstone;
cornerstoneTools.external.Hammer = Hammer;
cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
cornerstoneWADOImageLoader.external.dicomParser = dicomParser;

cornerstoneTools.init();

cornerstoneTools.init({
    mouseEnabled: true,
    touchEnabled: true,
    globalToolSyncEnabled: false,
    showSVGCursors: false,
});
const fontFamily =
    'Work Sans, Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif';

cornerstoneTools.textStyle.setFont(`16px ${fontFamily}`);

// Set the tool width
cornerstoneTools.toolStyle.setToolWidth(2);

// Set color for inactive tools
cornerstoneTools.toolColors.setToolColor('rgb(255, 255, 0)');

// Set color for active tools
cornerstoneTools.toolColors.setActiveColor('rgb(0, 255, 0)');

const App = () => {
    const [uploadedFiles, setUploadedFiles] = useState([]);
    const [imageIds, setImageIds] = useState([]);
    let element;

    const loadAndViewImage = (imageId) => {
        const element = document.getElementById('dicomImage');
        const start = new Date().getTime();
        cornerstone.loadImage(imageId).then(function(image) {
            console.log(image);
            const viewport = cornerstone.getDefaultViewportForImage(element, image);
            cornerstone.displayImage(element, image, viewport);
        }, function(err) {
            alert(err);
        });
    };

    useEffect(() => {
        element = document.getElementById('dicomImage');
        cornerstone.enable(element);
    });

    const handleFileChange = (e) => {
        const files = Array.from(e.target.files);
        setUploadedFiles(files);
        const imageIds = files.map((file) => {
           return cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
        });
        setImageIds(imageIds);
        const StackScrollMouseWheelTool = cornerstoneTools.StackScrollMouseWheelTool;
        const stack = {
            currentImageIdIndex: 0,
            imageIds
        };
        cornerstone.loadImage(imageIds[0]).then((image) => {
            cornerstone.displayImage(element, image);
            cornerstoneTools.addStackStateManager(element, ['stack']);
            cornerstoneTools.addToolState(element, 'stack', stack)
        });
        setTimeout(() => {
            imageIds.forEach((imageId) => {
                const thumbnailElement = document.getElementById(imageId);
                cornerstone.enable(thumbnailElement);
                cornerstone.loadImage(imageId).then((image) => {
                    cornerstone.displayImage(thumbnailElement, image);
                    cornerstoneTools.addStackStateManager(element, ['stack']);
                    cornerstoneTools.addToolState(element, 'stack', stack)
                });
            });
        }, 1000);
        cornerstoneTools.addTool(StackScrollMouseWheelTool);
        cornerstoneTools.setToolActive('StackScrollMouseWheel', { })
    };

    const setZoomActive = (e) => {
        const ZoomMouseWheelTool = cornerstoneTools.ZoomMouseWheelTool;

        cornerstoneTools.addTool(ZoomMouseWheelTool);
        cornerstoneTools.setToolActive('ZoomMouseWheel', { mouseButtonMask: 1 })
        const PanTool = cornerstoneTools.PanTool;

        cornerstoneTools.addTool(PanTool);
        cornerstoneTools.setToolActive('Pan', { mouseButtonMask: 1 })
    };

    const setMouseWheelActive = (e) => {
        const StackScrollMouseWheelTool = cornerstoneTools.StackScrollMouseWheelTool;
        cornerstoneTools.addTool(StackScrollMouseWheelTool);
        cornerstoneTools.setToolActive('StackScrollMouseWheel', { })
    };

    const setLengthActive = (e) => {
        const LengthTool = cornerstoneTools.LengthTool;
        cornerstoneTools.addTool(LengthTool);
        cornerstoneTools.setToolActive('Length', { mouseButtonMask: 1 })
    };

    const setWwwcActive = (e) => {
        const WwwcTool = cornerstoneTools.WwwcTool;
        cornerstoneTools.addTool(WwwcTool);
        cornerstoneTools.setToolActive('Wwwc', { mouseButtonMask: 1 });
    };

    const setEraserActive = (e) => {
        const EraserTool = cornerstoneTools.EraserTool;
        cornerstoneTools.addTool(EraserTool);
        cornerstoneTools.setToolActive('Eraser', { mouseButtonMask: 1 });
    };

    return(
        <div>
            <h2>DICOM viewer demo</h2>
            <input type="file" onChange={handleFileChange} multiple/>
            <button onClick={setZoomActive}>Zoom/Pan</button>
            <button onClick={setMouseWheelActive} style={{marginLeft: '10px'}}>Scroll</button>
            <button onClick={setLengthActive} style={{marginLeft: '10px'}}>Length</button>
            <button onClick={setWwwcActive} style={{marginLeft: '10px'}}>WWWC</button>
            <button onClick={setEraserActive} style={{marginLeft: '10px'}}>Eraser</button>
            <div className='dicom-wrapper'>
                <div className='thumbnail-selector'>
                    <div className='thumbnail-list' id='thumbnail-list'>
                        {imageIds.map((imageId) => {
                            return (
                                <a key={imageId}
                                   onContextMenu={() => false}
                                   unselectable='on'
                                   onMouseDown={() => false}
                                   onSelect={() => false} >
                                    <div id={imageId}
                                         className='thumbnail-item'
                                         onContextMenu={() => false}
                                         unselectable='on'
                                         onMouseDown={() => false}
                                         onSelect={() => false}/>
                                </a>
                            )
                        })}
                    </div>
                </div>
                <div
                    onContextMenu={() =>  false}
                    className='dicom-viewer'
                    unselectable='on'>
                    <div id="dicomImage">
                    </div>
                </div>
            </div>
        </div>
    );

};

export default App;

[medcornsasa]

CSS issue existing in thumbnail.To add below in css page

.thumbnailElement {float:left; width:85px; margin:5px; padding:3px; border:5px solid #999999; color:#333333;} {clear:both; text-align:center;} .thumbnailElement { position:absolute; top: 17px; left: -70; border-bottom-width: 1px; right: 0px; bottom: 200px; width: 100px; min-height: 25px; overflow-y: auto; overfloy-x: auto;
float:right; border: 5px solid red; box-sizing: border-box;

} .thumbnailElement:hover { border: 1px solid #777; } .thumbnailElement a img { width: 68px; height: 52px; margin-right: 5px; }

.thumbnailElement div { padding: 10px;

}

[krishnauppili]

@medcornsasa It does still exist. By thumbnailElement class you mean .thumbnail-item or .thumbnail-list?

Please find the existing code in the sandbox link : https://codesandbox.io/s/jolly-flower-dwfm1?fontsize=14&hidenavigation=1&theme=dark

[medcornsasa]

No issue in scroll

[medcornsasa]

Below css try it(see image) .

div[id^="thumbnail-list"] .thumbnailElement {float:left; width:85px; margin:5px; padding:3px; border:5px solid #999999; color:#333333;} {clear:both; text-align:center;} .thumbnail-selector { position:absolute; top: 17px; left: -70; border-bottom-width: 1px; right: 0px; bottom: 200px; width: 100px; min-height: 25px; overflow-y: auto; overflow-x: auto;
float:right; border: 5px solid red; box-sizing: border-box;

} .thumbnail-list:hover { border: 1px solid #777; } .thumbnail-list a img { width: 68px; height: 52px; margin-right: 5px; }

.thumbnail-list div { padding: 10px;

}

[krishnauppili]

@medcornsasa Thanks for the reply. But the issue is actually that the scroll is not working when the cursor is on top of the canvas. It is working only when the cursor is placed on the border line or outside the thumbnail-item node.

I think by default the scroll is being disabled on cornerstone element, but is there any possibility to enable scroll inside cornerstone elements ?

[e-simpson]

@krishnauppili

You can get around this by adding the css tag pointer-events: none; to the image element you pass into cornerstone.displayImage(element, image).

[saied-salem]

@krishnauppili I have a porblem when selecting different image from thumbnail to load it to viewer . I disabled the element using cornerstone.disable(element) then reenable it using cornerstone.enable(element) and display it with cornerstone.display(element,image) . it didn't work and I get Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. error
I used the same code of yours so can you help me ? thanks in advance.

[David2k13]

@krishnauppili I have a porblem when selecting different image from thumbnail to load it to viewer . I disabled the element using cornerstone.disable(element) then reenable it using cornerstone.enable(element) and display it with cornerstone.display(element,image) . it didn't work and I get Uncaught (in promise) DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. error I used the same code of yours so can you help me ? thanks in advance.

I also met·