roiact/dist/Components/DrawHelpModal/index.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _semanticUiReact = require("semantic-ui-react");

var _propTypes = _interopRequireDefault(require("prop-types"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var DrawHelpModal = function DrawHelpModal(props) {
  return /*#__PURE__*/_react.default.createElement(_semanticUiReact.Modal, {
    open: true,
    style: {
      position: "static"
    }
  }, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Modal.Header, null, "Drawing instructions"), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Modal.Content, null, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Modal.Description, null, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Header, {
    as: "h5"
  }, "Selection Tool"), /*#__PURE__*/_react.default.createElement("p", null, "The Selection tool allows you to modify the shapes on the drawing area. You can select one or more shapes, and act on the controls that appear to change the size of the shape Press ", ' ', /*#__PURE__*/_react.default.createElement("i", null, /*#__PURE__*/_react.default.createElement("b", null, "DEL/CANC")), ' ', "to delete the selected shapes."), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Header, {
    as: "h5"
  }, "Rectangle tool"), /*#__PURE__*/_react.default.createElement("p", null, "Use this tool to draw rectangles. Make a first click to draw the first vertex, move the mouse to have a preview of the final shape and click again to finish the drawing. Press ", ' ', /*#__PURE__*/_react.default.createElement("i", null, /*#__PURE__*/_react.default.createElement("b", null, "DEL/CANC")), ' ', "to delete the rectangle."), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Header, {
    as: "h5"
  }, "Polygon Tool"), /*#__PURE__*/_react.default.createElement("p", null, "Use this tool to draw polygons. Make a first click to draw the first vertex, move the mouse to the desired position and click again to draw the next vertex, and so on. Press ", ' ', /*#__PURE__*/_react.default.createElement("i", null, /*#__PURE__*/_react.default.createElement("b", null, "ESC")), ' ', "on the keyboard to stop drawing. Press ", ' ', /*#__PURE__*/_react.default.createElement("i", null, /*#__PURE__*/_react.default.createElement("b", null, "DEL/CANC")), ' ', "to delete the polygon."), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Header, {
    as: "h5"
  }, "Regions of Interest (ROIs)"), /*#__PURE__*/_react.default.createElement("p", null, "In the section (below the drawing area) ", ' ', /*#__PURE__*/_react.default.createElement("i", null, /*#__PURE__*/_react.default.createElement("b", null, "Regions of Interest (ROIs)")), ' ', "you will see a list of all the drawn shapes. Each form will be editable (name/label and threshold). By clicking on the name of a shape you will be able to select it in the drawing area, and vice versa, by selecting a shape on the drawing area you will see it selected also in this list."), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("i", null, /*#__PURE__*/_react.default.createElement("b", null, "Please Note!"))), /*#__PURE__*/_react.default.createElement("p", null, "ROI names can contain only letters, numbers or underscores. No white spaces or other special characters are allowed."))), /*#__PURE__*/_react.default.createElement(_semanticUiReact.Modal.Actions, null, /*#__PURE__*/_react.default.createElement(_semanticUiReact.Button, {
    onClick: props.onClose,
    negative: true
  }, "Close")));
};

DrawHelpModal.propTypes = {
  onClose: _propTypes.default.func.isRequired
};
var _default = DrawHelpModal;
exports.default = _default;