Cornerstone Tools в ReactJS - не работает на первом бите загрузки, работает потом

Question

Я пытаюсь загрузить последние краеугольные инструменты в ReactJS, но не могу заставить его работать. Я могу загрузить cornerstoneJS, а затем отобразить изображение, но оно не будет активировано. Я видел примеры, работающие с использованием более старых версий cornerstonejs, здесь и здесь, но после обновления они тоже перестают работать.

Вот мой код:

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);

Однако я только заметил, что когда я помещаю код в скрипку, он работает нормально после того, как в какой-то момент сломал код и немедленно исправил его. Однако это не работает при загрузке страницы, что является ожидаемым результатом.

Ссылка на изображение передается в качестве реквизита в угловой элемент. Любая помощь будет принята с благодарностью.

ОБНОВЛЕНИЕ: теперь скрипта работает с внешним изображением, проблема сохраняется. В консоли нет ошибок или предупреждений.

Answer 1

Поскольку вы задали свой вопрос, команда Cornerstonejs Core выпустила практический пример включения Cornerstone и Cornerstone Tools версии 4 в компонент React:

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