lost-sia/src/SIASettingButton.jsx

Single Image Annotation Tool

import React, { Component } from "react";

import * as tbe from "./types/toolbarEvents";
import { faCog } from "@fortawesome/free-solid-svg-icons";
import { CFormSwitch, CPopover } from "@coreui/react";
import ToolbarItem from "./ToolbarItem";
class SIASettingButton extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  triggerEvent(e, data) {
    if (this.props.onSettingEvent) {
      this.props.onSettingEvent(e, data);
    }
  }
  toggleAnnoDetails() {
    this.triggerEvent(tbe.SHOW_ANNO_DETAILS);
  }

  toggleLabelInfo() {
    this.triggerEvent(tbe.SHOW_LABEL_INFO);
  }

  toggleAnnoStats() {
    this.triggerEvent(tbe.SHOW_ANNO_STATS);
  }

  handleStrokeWidthChange(e) {
    this.triggerEvent(tbe.EDIT_STROKE_WIDTH, parseInt(e.target.value));
  }

  handleNodeRadiusChange(e) {
    this.triggerEvent(tbe.EDIT_NODE_RADIUS, parseInt(e.target.value));
  }

  renderInfoBoxContent() {
    return (
      <div>
        <h4>Info Boxes</h4>
        <CFormSwitch
          checked={this.props.uiConfig.annoDetails.visible}
          label="Annotation Details"
          size="xl"
          onClick={() => this.toggleAnnoDetails()}
        />
        <CFormSwitch
          checked={this.props.uiConfig.labelInfo.visible}
          label="Label Info"
          size="xl"
          onClick={() => this.toggleLabelInfo()}
        />
        <CFormSwitch
          checked={this.props.uiConfig.annoStats.visible}
          label="Anno Stats"
          size="xl"
          onClick={() => this.toggleAnnoStats()}
        />
      </div>
    );
  }
  renderInfoBoxes() {
    if (!this.props.enabled) return null;
    if (this.props.enabled === true) {
      return this.renderInfoBoxContent();
    } else {
      if (this.props.enabled.infoBoxes) {
        return this.renderInfoBoxContent();
      }
    }
  }

  renderAnnoStyle() {
    if (!this.props.enabled) return null;
    if (this.props.enabled === true) {
      return this.renderAnnoStyleContent();
    } else {
      if (this.props.enabled.annoStyle) {
        return this.renderAnnoStyleContent();
      }
    }
  }
  renderAnnoStyleContent() {
    return (
      <div>
        <h4 style={{ marginTop: 25 }}>Anno Appearance</h4>
        <div>Stroke width: {this.props.uiConfig.strokeWidth}</div>
        <input
          type="range"
          min={1}
          max={10}
          value={this.props.uiConfig.strokeWidth}
          onChange={(e) => this.handleStrokeWidthChange(e)}
        />
        <div>Node radius: {this.props.uiConfig.nodeRadius}</div>
        <input
          type="range"
          min={1}
          max={10}
          value={this.props.uiConfig.nodeRadius}
          onChange={(e) => this.handleNodeRadiusChange(e)}
        />
      </div>
    );
  }

  render() {
    if (!this.props.uiConfig) return null;
    const popupContent = (
      <div>
        {this.renderInfoBoxes()}
        {this.renderAnnoStyle()}
      </div>
    );
    return (
      <CPopover content={popupContent} placement="right">
        <span>
          <ToolbarItem faIcon={faCog} />
        </span>
      </CPopover>
    );
  }
}

export default SIASettingButton;