ReactJS中的Cornerstone工具-之后无法在第一个加载位上工作

Question

我正在尝试在ReactJS中加载最新的cornerstone tools，但是我无法使其正常工作。我可以加载cornerstoneJS，然后显示图像，但不会被激活。我已经看到了使用cornerstonejs较早版本的here和here反应的示例，但是一旦更新，它们也将停止工作。

这是我的代码：

index.js

import React from "react";
import { render } from "react-dom";
import CornerstoneElement from "./cornerstoneElement";

const App = () => (
  <div>
    <h2>Cornerstone React Component Example</h2>
    <CornerstoneElement imageId="https://www.fnordware.com/superpng/pnggrad16rgb.png" />
  </div>
);

render(<App />, document.getElementById("root"));

CornerstoneElement.js

import React 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";
import { withStyles } from "@material-ui/core/styles";
import PropTypes from "prop-types";

const defaultTools = {
  Pan: 2,
  ZoomMouseWheel: 0,
  Wwwc: 1
};

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

const styles = theme => ({
  root: {
    width: "100%",
    height: "100%",
    color: "black",
    position: "relative"
  },
  bottomLeftStyle: {
    bottom: "0.5rem",
    left: "0.5rem",
    position: "absolute",
    color: "white"
  },
  bottomRightStyle: {
    bottom: "0.5rem",
    right: "0.5rem",
    position: "absolute",
    color: "white"
  }
});

class CornerstoneElement extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      viewport: cornerstone.getDefaultViewport(null, undefined)
    };
    this.toolBox = {};

    this.onImageRendered = this.onImageRendered.bind(this);
    this.onNewImage = this.onNewImage.bind(this);
    this.onWindowResize = this.onWindowResize.bind(this);
  }

  render() {
    const { classes } = this.props;
    return (
      <div
        className={[classes.root, "viewportElement"].join(" ")}
        ref={input => {
          this.element = input;
        }}
      >
        <canvas className="cornerstone-canvas" />
        <div className={classes.bottomLeftStyle}>
          Zoom: {this.state.viewport.scale}
        </div>
        <div className={classes.bottomRightStyle}>
          WW/WC: {this.state.viewport.voi.windowWidth} /{" "}
          {this.state.viewport.voi.windowCenter}
        </div>
      </div>
    );
  }

  onWindowResize() {
    cornerstone.resize(this.element);
  }

  onImageRendered() {
    const viewport = cornerstone.getViewport(this.element);

    this.setState({
      viewport
    });
  }

  onNewImage() {
    const enabledElement = cornerstone.getEnabledElement(this.element);

    this.setState({
      imageId: enabledElement.image.imageId
    });
  }

  componentDidMount() {
    const element = this.element;
    this.loadDefaultCanvas(element);

    this.element.addEventListener(
      "cornerstoneimagerendered",
      this.onImageRendered
    );
    this.element.addEventListener("cornerstonenewimage", this.onNewImage);

    window.addEventListener("resize", this.onWindowResize);
  }

  componentWillUnmount() {
    const element = this.element;
    element.removeEventListener(
      "cornerstoneimagerendered",
      this.onImageRendered
    );

    element.removeEventListener("cornerstonenewimage", this.onNewImage);

    window.removeEventListener("resize", this.onWindowResize);

    cornerstone.disable(element);
  }

  loadDefaultCanvas(element) {
    //enable element
    cornerstone.enable(element);
    this.loadImageToGivenPath().then(() => {
      cornerstoneTools.init();
      console.log(cornerstoneTools);
      this.loadDefaultTools(element);
    });
  }

  async loadImageToGivenPath() {
    let image = await cornerstone.loadAndCacheImage(this.props.imageId);
    return cornerstone.displayImage(this.element, image);
  }

  loadDefaultTools(element) {
    for (const defaultTool of Object.keys(defaultTools)) {
      this.loadCsTool(
        String(defaultTool),
        defaultTools[defaultTool],
        true,
        element
      );
    }
  }

  loadCsTool(toolName, toolMouseMask = 0, activate = false, element) {
    const tool = cornerstoneTools[toolName + "Tool"];
    cornerstoneTools.addToolForElement(element, tool);
    //keep toolbox status
    this.toolBox[toolName + "Tool"] = {
      isEnabled: false
    };
    if (activate) {
      this.activateCsTool(toolName, toolMouseMask, element);
    }
  }

  activateCsTool(toolName, toolMouseMask = 0, element) {
    cornerstoneTools.setToolActiveForElement(element, toolName, {
      mouseButtonMask: toolMouseMask
    });

    this.toolBox[toolName + "Tool"].isEnabled = true;
  }
}

CornerstoneElement.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(styles)(CornerstoneElement);

但是，我只是注意到，当我将代码放入fiddle中时，在某个时候破坏代码并立即对其进行修复后，它可以正常工作。但是，它不能在页面加载上正常工作，这是预期的结果。

图像链接作为道具传递给CornerstoneElement。任何帮助将不胜感激。

UPDATE：小提琴现在可用于外部图像，问题仍然存在。控制台中没有错误或警告。

Answer 1

自从您提出问题以来，Cornerstonejs核心团队已经发布了一个在React组件中包装Cornerstone和Cornerstone Tools版本4的实际示例：

https://github.com/cornerstonejs/react-cornerstone-viewport