<commit_before>import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import gql from "graphql-tag";
import { graphql, withApollo } from "react-apollo";
import { Row, Col, Container, Button, Input, ButtonGroup } from "reactstrap";
import Grid from "../GridDom";
import ExtraControls from "./extraControls";
import ContactsList from "./contactsList";
import MovementCore from "./movementCore";
import ContactSelect from "./contactSelect";
import SubscriptionHelper from "../../../../helpers/subscriptionHelper";
import "./gridCore.scss";

const SENSORS_OFFSET = 45;
function distance3d(coord2, coord1) {
  const { x: x1, y: y1, z: z1 } = coord1;
  let { x: x2, y: y2, z: z2 } = coord2;
  return Math.sqrt((x2 -= x1) * x2 + (y2 -= y1) * y2 + (z2 -= z1) * z2);
}

const SENSOR_SUB = gql`
  subscription SensorsChanged($id: ID) {
    sensorsUpdate(simulatorId: $id, domain: "external") {
      id
      type
      autoTarget
      autoThrusters
      interference
      movement {
        x
        y
        z
      }
      segments {
        segment
        state
      }
      armyContacts {
        id
        name
        size
        icon
        picture
        color
        infrared
        cloaked
        destroyed
        locked
        disabled
      }
    }
  }
`;
const padding = 0;

class GridCore extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movingContact: {},
      contextContact: null,
      speed: 0.6,
      askForSpeed:
        localStorage.getItem("thorium-core-sensors-askforspeed") === "yes"
          ? true
          : false,
      currentControl: "contacts",
      selectedContacts: []
    };
  }
  componentDidMount() {
    if (!this.state.dimensions && ReactDOM.findDOMNode(this)) {
      const domNode = ReactDOM.findDOMNode(this).querySelector("#threeSensors");
      if (domNode) {
        const { width, height, left, top } = domNode.getBoundingClientRect();
        this.setState({
          dimensions: {
            width: width - SENSORS_OFFSET,
            height: height - SENSORS_OFFSET,
            left: left + SENSORS_OFFSET,
            top: top + SENSORS_OFFSET
          }
        });
      }
    }
  }
  componentDidUpdate() {
    if (!ReactDOM.findDOMNode(this)) return;
    const domNode = ReactDOM.findDOMNode(this).querySelector("#threeSensors");
    if (!domNode) return;
    if (
      !this.state.dimensions ||
      this.state.dimensions.width !==
        domNode.getBoundingClientRect().width - SENSORS_OFFSET
    ) {
      const { width, height, left, top } = domNode.getBoundingClientRect();
      this.setState({
        dimensions: {
          width: width - SENSORS_OFFSET,
          height: height - SENSORS_OFFSET,
          left: left + SENSORS_OFFSET,
          top: top + SENSORS_OFFSET
        }
      });
    }
  }
  dragStart = movingContact => {
    const self = this;
    this.setState({
      movingContact: Object.assign({}, movingContact, {
        location: null
      })
    });
    document.addEventListener("mousemove", this.moveMouse);
    document.addEventListener("mouseup", _mouseUp);
    function _mouseUp() {
      document.removeEventListener("mousemove", self.moveMouse);
      document.removeEventListener("mouseup", _mouseUp);
      self.dragStop();
    }
  };
  moveMouse = evt => {
    const { dimensions } = this.state;
    const { movingContact = {} } = this.state;
    const { width: dimWidth, height: dimHeight } = dimensions;
    const width = Math.min(dimWidth, dimHeight) - padding;
    const destination = {
      x:
        (evt.clientX -
          dimensions.left +
          SENSORS_OFFSET / 2 -
          padding / 2 -
          width / 2) /
          (width / 2) -
        0.08,
      y:
        (evt.clientY -
          dimensions.top +
          SENSORS_OFFSET / 2 -
          padding / 2 -
          width / 2) /
          (width / 2) -
        0.08,
      z: 0
    };
    this.setState({
      movingContact: Object.assign({}, movingContact, { location: destination })
    });
  };
  dragStop = () => {
    const { movingContact } = this.state;
    this.setState({
      movingContact: null
    });
    const {
      location,
      icon,
      type,
      size,
      name,
      color,
      picture,
      cloaked,
      infrared,
      locked<commit_msg>Repositioning the sensor contacts so they fit right is really hard. Closes #1167 - won't fix<commit_after>import React, { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import gql from "graphql-tag";
import { graphql, withApollo } from "react-apollo";
import { Row, Col, Container, Button, Input, ButtonGroup } from "reactstrap";
import Grid from "../GridDom";
import ExtraControls from "./extraControls";
import ContactsList from "./contactsList";
import MovementCore from "./movementCore";
import ContactSelect from "./contactSelect";
import SubscriptionHelper from "../../../../helpers/subscriptionHelper";
import "./gridCore.scss";

const SENSORS_OFFSET = 45;
function distance3d(coord2, coord1) {
  const { x: x1, y: y1, z: z1 } = coord1;
  let { x: x2, y: y2, z: z2 } = coord2;
  return Math.sqrt((x2 -= x1) * x2 + (y2 -= y1) * y2 + (z2 -= z1) * z2);
}

const SENSOR_SUB = gql`
  subscription SensorsChanged($id: ID) {
    sensorsUpdate(simulatorId: $id, domain: "external") {
      id
      type
      autoTarget
      autoThrusters
      interference
      movement {
        x
        y
        z
      }
      segments {
        segment
        state
      }
      armyContacts {
        id
        name
        size
        icon
        picture
        color
        infrared
        cloaked
        destroyed
        locked
        disabled
      }
    }
  }
`;
const padding = 0;

class GridCore extends Component {
  constructor(props) {
    super(props);
    this.state = {
      movingContact: {},
      contextContact: null,
      speed: 0.6,
      askForSpeed:
        localStorage.getItem("thorium-core-sensors-askforspeed") === "yes"
          ? true
          : false,
      currentControl: "contacts",
      selectedContacts: []
    };
  }
  componentDidMount() {
    if (!this.state.dimensions && ReactDOM.findDOMNode(this)) {
      const domNode = ReactDOM.findDOMNode(this).querySelector("#threeSensors");
      if (domNode) {
        const { width, height, left, top } = domNode.getBoundingClientRect();
        this.setState({
          dimensions: {
            width: width - SENSORS_OFFSET,
            height: height - SENSORS_OFFSET,
            left: left + SENSORS_OFFSET,
            top: top + SENSORS_OFFSET
          }
        });
      }
    }
  }
  componentDidUpdate() {
    if (!ReactDOM.findDOMNode(this)) return;
    const domNode = ReactDOM.findDOMNode(this).querySelector("#threeSensors");
    if (!domNode) return;
    if (
      !this.state.dimensions ||
      this.state.dimensions.width !==
        domNode.getBoundingClientRect().width - SENSORS_OFFSET
    ) {
      const { width, height, left, top } = domNode.getBoundingClientRect();
      this.setState({
        dimensions: {
          width: width - SENSORS_OFFSET,
          height: height - SENSORS_OFFSET,
          left: left + SENSORS_OFFSET,
          top: top + SENSORS_OFFSET
        }
      });
    }
  }
  dragStart = movingContact => {
    const self = this;
    this.setState({
      movingContact: Object.assign({}, movingContact, {
        location: null
      })
    });
    document.addEventListener("mousemove", this.moveMouse);
    document.addEventListener("mouseup", _mouseUp);
    function _mouseUp() {
      document.removeEventListener("mousemove", self.moveMouse);
      document.removeEventListener("mouseup", _mouseUp);
      self.dragStop();
    }
  };
  moveMouse = evt => {
    const { dimensions } = this.state;
    const { movingContact = {} } = this.state;
    const { width: dimWidth, height: dimHeight } = dimensions;
    const width = Math.min(dimWidth, dimHeight);
    console.log(
      (evt.clientY -
        dimensions.top +
        SENSORS_OFFSET / 2 -
        dimensions.height / 2) /
        (dimensions.width / 2),
      dimensions.top,
      dimensions.height
    );
    const destination = {
      x:
        (evt.clientX - dimensions.left + SENSORS_OFFSET / 2 - width / 2) /
          (dimensions.width / 2) -
        0.08,
      y:
        (evt.clientY - dimensions.top + SENSORS_OFFSET / 2 - width / 2) /
          (dimensions.height / 2) -
        0.08,
      z: 0
    };
    this.setState({
      movingContact: Object.assign({}, movingContact, { location: destination })
    });
  };
  dragStop = () => {
    const { movingContact } = this.state;
    this.setState({
      movingContact: null
    });
    const {
      location,
      icon,
      type,
      size,
      name,
      color,
      picture,
      cloaked,
      infrared,
      locked
{'fraction_non_alphanumeric': 0.12093862815884476, 'fraction_numerical': 0.009589350180505414, 'mean_word_length': 2.0706615864218914, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7316088', 'n_tokens_mistral': 2684, 'n_tokens_neox': 2685, 'n_words': 619}