Merge remote-tracking branch 'upstream/master'

import React, { Component } from "react";

import Paper from "@material-ui/core/Paper";

import AstroMap from "../js/AstroMap.js";

import Projection from "../js/Projection.js";

import ConsoleContainer from "./container/ConsoleContainer.jsx";

import "leaflet";

import "proj4leaflet";

import "proj4";

export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {};

  }

  componentDidMount() {

    let map = new AstroMap("map-container", "Mars", {});

    let projectionControl = new Projection();

    projectionControl.addTo(map);

  }

  render() {

    return (

      <Paper elevation={10}>

        <ConsoleContainer />

        <div id="map-container" />

      </Paper>

    );

  }

}

import React from "react";

import ConsoleTargetInfo from "../presentational/ConsoleTargetInfo.jsx";

import ConsoleProjectionButtons from "../presentational/ConsoleProjectionButtons.jsx";

import ConsoleLonLatSelects from "../presentational/ConsoleLonLatSelects.jsx";

import AppBar from "@material-ui/core/AppBar";

import Toolbar from "@material-ui/core/Toolbar";

import Grid from "@material-ui/core/Grid";

import { fade, makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({

  root: {

    height: 100,

    width: "100%"

  },

  appbar: {

    background: "#f5dd95",

    background: "-webkit-linear-gradient(to right, #f5dd95, #faf5e6)",

    background: "linear-gradient(to right, #f5dd95, #faf5e6)"

  },

  toolbar: {

    height: "100%",

    maxWidth: 800,

    width: "auto",

    padding: 0

  },

  grid: {

    maxWidth: 800,

    height: 100

  }

}));

export default function ConsoleAppBar(props) {

  const classes = useStyles();

  return (

    <div className={classes.root}>

      <AppBar className={classes.appbar} position="static" color="inherit">

        <Toolbar className={classes.toolbar}>

          <Grid className={classes.grid} container>

            <ConsoleProjectionButtons />

            <ConsoleTargetInfo targetName="Mars" />

            <ConsoleLonLatSelects />

          </Grid>

        </Toolbar>

      </AppBar>

    </div>

  );

}

import React from "react";

import Grid from "@material-ui/core/Grid";

import { fade, makeStyles, withStyles } from "@material-ui/core/styles";

import AutorenewIcon from "@material-ui/icons/Autorenew";

import AddBoxIcon from "@material-ui/icons/AddBoxOutlined";

import ExposureIcon from "@material-ui/icons/Exposure";

import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";

import ToggleButton from "@material-ui/lab/ToggleButton";

import Typography from "@material-ui/core/Typography";

import Tooltip from "@material-ui/core/Tooltip";

import Zoom from "@material-ui/core/Zoom";

const useStyles = makeStyles(theme => ({

  grid: {

    width: "inherit",

    margin: "auto"

  },

  flip: {

    transform: "scaleY(-1)"

  },

  oval: {

    width: 21,

    height: 15,

    borderRadius: "50%",

    border: "2px solid",

    background: "transparent",

    marginRight: 1,

    marginBottom: 3

  },

  circle: {

    width: 15,

    height: 15,

    borderRadius: "50%",

    border: "2px solid",

    background: "transparent",

    marginRight: 1,

    marginBottom: 3

  }

}));

const StyledTooltip = withStyles(theme => ({

  tooltip: {

    backgroundColor: "#f5f5f9",

    color: "rgba(0, 0, 0, 0.87)",

    maxWidth: 250,

    fontSize: 12,

    border: "1px solid #dadde9"

  }

}))(Tooltip);

const StyledToggleButton = withStyles(theme => ({

  root: {

    color: fade("#022", 0.6),

    background: fade("#ffdb62", 0.2),

    "&:hover": {

      backgroundColor: fade("#ffdb62", 0.8)

    },

    "&$selected": {

      color: "#022",

      backgroundColor: "#ffdb62",

      "&:hover": {

        backgroundColor: "#ffdb62",

        border: `1px solid ${fade(theme.palette.action.active, 0.12)}`

      }

    }

  },

  selected: {

    color: "#022",

    backgroundColor: "#B0D0D3"

  }

}))(ToggleButton);

export default function ConsoleLonLatSelects(props) {

  const [posEastWest, setPosEastWest] = React.useState("PositiveEast");

  const [coordSystem, setCoordSystem] = React.useState("Planetocentric");

  const [lonRange, setLonRange] = React.useState(180);

  const handlePosEastWest = (event, newPosEastWest) => {

    if (newPosEastWest != null) {

      setPosEastWest(newPosEastWest);

    }

  };

  const handleCoordSystem = (event, newCoordSystem) => {

    if (newCoordSystem != null) {

      setCoordSystem(newCoordSystem);

    }

  };

  const handleLonRange = (event, newLonRange) => {

    if (newLonRange != null) {

      setLonRange(newLonRange);

    }

  };

  const classes = useStyles();

  return (

    <Grid

      container

      item

      className={classes.grid}

      justify="space-evenly"

      alignItems="flex-end"

      wrap="nowrap"

      xs={9}

    >

      <Grid item>

        <StyledTooltip

          title={

            <Typography variant="subtitle1">

              Switch to either positive east or positive west longitude

              reporting.

            </Typography>

          }

          enterDelay={800}

          leaveDelay={150}

          arrow

          TransitionComponent={Zoom}

        >

          <div>

            <ToggleButtonGroup

              exclusive

              size="small"

              value={posEastWest}

              onChange={handlePosEastWest}

            >

              <StyledToggleButton value="PositiveEast">

                <AutorenewIcon className={classes.flip} />

                <Typography>East</Typography>

              </StyledToggleButton>

              <StyledToggleButton value="PositiveWest">

                <AutorenewIcon />

                <Typography>West</Typography>

              </StyledToggleButton>

            </ToggleButtonGroup>

          </div>

        </StyledTooltip>

      </Grid>

      <Grid item>

        <StyledTooltip

          title={

            <Typography variant="subtitle1">

              Switch to either a planetocentric or planetographic coordinate

              system.

            </Typography>

          }

          enterDelay={800}

          leaveDelay={150}

          arrow

          TransitionComponent={Zoom}

        >

          <div>

            <ToggleButtonGroup

              exclusive

              size="small"

              value={coordSystem}

              onChange={handleCoordSystem}

            >

              <StyledToggleButton value="Planetocentric">

                <span className={classes.circle} />

                <Typography>centric</Typography>

              </StyledToggleButton>

              <StyledToggleButton value="Planetographic">

                <span className={classes.oval} />

                <Typography>graphic</Typography>

              </StyledToggleButton>

            </ToggleButtonGroup>

          </div>

        </StyledTooltip>

      </Grid>

      <Grid item>

        <StyledTooltip

          title={

            <Typography variant="subtitle1">

              Switch to either -180° to 180° or 0° to 360°

              longitude range.

            </Typography>

          }

          enterDelay={800}

          leaveDelay={150}

          arrow

          TransitionComponent={Zoom}

        >

          <div>

            <ToggleButtonGroup

              exclusive

              size="small"

              value={lonRange}

              onChange={handleLonRange}

            >

              <StyledToggleButton value={180}>

                <ExposureIcon />

                <Typography>180&deg;</Typography>

              </StyledToggleButton>

              <StyledToggleButton value={360}>

                <AddBoxIcon />

                <Typography>360&deg;</Typography>

              </StyledToggleButton>

            </ToggleButtonGroup>

          </div>

        </StyledTooltip>

      </Grid>

    </Grid>

  );

}

import React from "react";

import ReactDOM from "react-dom";

import "leaflet";

import "proj4leaflet";

import "proj4";

import "./styles.css";

import App from "./components/App.jsx";

ReactDOM.render(<App />, document.getElementById("map"));