import React from "react";
import "./Meta2d.css";

let meta2d = null;
export default class Meta2d extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    meta2d = new window.Meta2d("meta2d",{
      background: '#1e2430',
      x: 32,
      y: 32,
      width: 1920,
      height: 1080,
      color: '#bdc7db',
    });
    window.registerCommonDiagram();
    this._fetch("/json/data.json", function (text) {
      var data = JSON.parse(text);
      data.locked = 1;
      meta2d.open(data);
      let fit =
          meta2d.store.data.scaleMode === '3'
              ? 'height'
              : meta2d.store.data.scaleMode === '2'
                  ? 'width'
                  : true;
      meta2d.fitSizeView(fit, 10);
    });
  }

  componentWillUnmount() {
    meta2d?.destroy();
  }

  _fetch(url, cb) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4 && xhr.status == 200) {
        cb && cb(xhr.responseText);
      }
    };
  }

  render() {
    return (
      <div className="content">
        <div id="meta2d"></div>
      </div>
    );
  }
}