Cornerstone Tools do not work (after following doc)

Question

first of all,please be patient with this post, because this is my first question here on the platform. Currently I'm trying to display some .dcm images using Cornerstone. This has worked and looks good.

But since a few days I have the problem that I can't get a simple tool from Cornerstone tools to work with it. My goal was to start with the wwwc-tool and then the stack-scrolling.

I worked strictly after documentation, but it is simply not possible for me to include any tool. I just don't see the error and don't get any error output.

Can you help me with that?

import React, { useState, useEffect, useRef } from "react";
import { makeStyles } from "@material-ui/core/styles";
import cornerstone from "cornerstone-core";
import cornerstoneMath from "cornerstone-math";
import cornerstoneTools from "cornerstone-tools";
import Hammer from "hammerjs";

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

cornerstoneTools.init();

export default function Dummy() {
  const dicomRef = useRef();

  const imageIds = [
    "wadouri:http://127.0.0.1:8080/api/challenges/1/series/1/images/1",
    "wadouri:http://127.0.0.1:8080/api/challenges/1/series/2/images/1",
    "wadouri:http://127.0.0.1:8080/api/challenges/1/series/3/images/1",
  ];

  // define the stack
  const stack = {
    currentImageIdIndex: 0,
    imageIds,
  };

  // Add our tool, and set it's mode
  const { LengthTool } = cornerstoneTools;

  useEffect(() => {
    // Enable the DOM Element for use with Cornerstone
    const element = document.getElementById("navbar");
    cornerstone.enable(element);

    cornerstone.loadImage(`${imageIds[0]}`).then((image) => {
      cornerstone.displayImage(element, image);
      cornerstoneTools.addTool(LengthTool);
      cornerstoneTools.addToolForElement(element, LengthTool);
      cornerstoneTools.setToolActive(LengthTool.name, { mouseButtonMask: 1 });
    });
  }, []);

  return <div ref={dicomRef}>aaa</div>;
}

My dependencys are as follow:

"dependencies": {
"@material-ui/core": "^4.9.14",
"@material-ui/icons": "^4.9.1",
"bootstrap": "^4.5.0",
"cornerstone-core": "^2.2.4",
"cornerstone-math": "^0.1.6",
"cornerstone-tools": "^3.19.3",
"cornerstone-wado-image-loader": "^3.1.1",
"daikon": "^1.2.42",
"dicom-parser": "^1.8.5",
"hammerjs": "^2.0.8",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-lottie-light": "^1.2.5",
"react-scripts": "3.4.1"},

I just want to display the Viewer with the tools in returning div.

Answer 1

Can you try changing useEffect() to:

useEffect(() => {
    // Enable the DOM Element for use with Cornerstone
    const element = document.getElementById("navbar");
    cornerstone.enable(element);

    cornerstone.loadImage(`${imageIds[0]}`).then((image) => {
      const viewport = cornerstone.getDefaultViewportForImage(element, image);
      cornerstone.displayImage(element, image, viewport);
      const LengthTool = cornerstoneTools.LengthTool;
      cornerstoneTools.addTool(LengthTool)
      cornerstoneTools.setToolActive('Length', { mouseButtonMask: 1 })
    });
  }, []);