merged coordinate class, made changes to coordinate class, added coordinates to GUI, refactored GUI (310c73d7) · Commits · aflab / astrogeology / Asc Geostac

app/package-lock.json

0 → 100644

+11521 −0

File added.

Preview size limit exceeded, changes collapsed.

app/src/components/App.jsx

+8 −0

Original line number	Diff line number	Diff line
		@@ -2,7 +2,9 @@ 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 MousePosition from "../js/MousePosition";
		import ConsoleContainer from "./container/ConsoleContainer.jsx";
		import "../js/AstroMath";
		import "leaflet";
		import "proj4leaflet";
		import "proj4";
		@@ -16,7 +18,13 @@ export default class App extends Component {
		componentDidMount() {
		let map = new AstroMap("map-container", "Mars", {});
		let projectionControl = new Projection();

		let mouseControl = new MousePosition({
		numDigits: 2,
		targetPlanet: "mars"
		});
		projectionControl.addTo(map);
		mouseControl.addTo(map);
		}

		render() {

app/src/components/presentational/ConsoleAppBar.jsx

+24 −4

Original line number	Diff line number	Diff line
		@@ -6,6 +6,8 @@ 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";
		import Divider from "@material-ui/core/Divider";
		import ConsoleCoordinates from "./ConsoleCoordinates.jsx";

		const useStyles = makeStyles(theme => ({
		root: {
		@@ -18,7 +20,7 @@ const useStyles = makeStyles(theme => ({
		background: "linear-gradient(to right, #f5dd95, #faf5e6)"
		},
		toolbar: {
		height: "100%",
		height: 100,
		maxWidth: 800,
		width: "auto",
		padding: 0
		@@ -36,10 +38,28 @@ export default function ConsoleAppBar(props) {
		<div className={classes.root}>
		<AppBar className={classes.appbar} position="static" color="inherit">
		<Toolbar className={classes.toolbar}>
		<Grid className={classes.grid} container>
		<Grid
		className={classes.grid}
		container
		justify="space-between"
		alignItems="stretch"
		>
		<ConsoleProjectionButtons />
		<ConsoleTargetInfo targetName="Mars" />
		<Divider orientation="vertical" />
		<Grid container item direction="column" xs>
		<ConsoleTargetInfo targetName="MARS" />
		<Grid
		container
		item
		xs
		justify="center"
		wrap="nowrap"
		spacing={1}
		>
		<ConsoleLonLatSelects />
		<ConsoleCoordinates />
		</Grid>
		</Grid>
		</Grid>
		</Toolbar>
		</AppBar>

app/src/components/presentational/ConsoleCoordinates.jsx

0 → 100644

+33 −0

Original line number	Diff line number	Diff line
		import React from "react";
		import Grid from "@material-ui/core/Grid";
		import Typography from "@material-ui/core/Typography";
		import { makeStyles } from "@material-ui/core/styles";

		const useStyles = makeStyles({
		grid: {
		width: "100%",
		height: "100%",
		maxHeight: 60
		}
		});

		export default function ConsoleCoordinates(props) {
		const classes = useStyles();

		return (
		<Grid
		container
		className={classes.grid}
		justify="flex-end"
		alignItems="center"
		item
		xs={2}
		>
		<Grid item xs>
		<Typography noWrap id="coordinateDisplay" variant="subtitle1">
		(-----, -----)
		</Typography>
		</Grid>
		</Grid>
		);
		}

app/src/components/presentational/ConsoleLonLatSelects.jsx

+35 −18

Original line number	Diff line number	Diff line
		@@ -12,15 +12,16 @@ import Zoom from "@material-ui/core/Zoom";

		const useStyles = makeStyles(theme => ({
		grid: {
		width: "inherit",
		margin: "auto"
		width: "100%",
		height: "100%",
		maxHeight: 55
		},
		flip: {
		transform: "scaleY(-1)"
		},
		oval: {
		width: 21,
		height: 15,
		width: 20,
		height: 14,
		borderRadius: "50%",
		border: "2px solid",
		background: "transparent",
		@@ -28,8 +29,8 @@ const useStyles = makeStyles(theme => ({
		marginBottom: 3
		},
		circle: {
		width: 15,
		height: 15,
		width: 14,
		height: 14,
		borderRadius: "50%",
		border: "2px solid",
		background: "transparent",
		@@ -56,6 +57,8 @@ const StyledToggleButton = withStyles(theme => ({
		backgroundColor: fade("#ffdb62", 0.8)
		},
		"&$selected": {
		cursor: "not-allowed",
		pointerEvents: "none",
		color: "#022",
		backgroundColor: "#ffdb62",
		"&:hover": {
		@@ -65,6 +68,8 @@ const StyledToggleButton = withStyles(theme => ({
		}
		},
		selected: {
		cursor: "not-allowed",
		pointerEvents: "none",
		color: "#022",
		backgroundColor: "#B0D0D3"
		}
		@@ -78,18 +83,24 @@ export default function ConsoleLonLatSelects(props) {
		const handlePosEastWest = (event, newPosEastWest) => {
		if (newPosEastWest != null) {
		setPosEastWest(newPosEastWest);
		} else {
		event.stopPropagation();
		}
		};

		const handleCoordSystem = (event, newCoordSystem) => {
		if (newCoordSystem != null) {
		setCoordSystem(newCoordSystem);
		} else {
		event.stopPropagation();
		}
		};

		const handleLonRange = (event, newLonRange) => {
		if (newLonRange != null) {
		setLonRange(newLonRange);
		} else {
		event.stopPropagation();
		}
		};

		@@ -99,11 +110,11 @@ export default function ConsoleLonLatSelects(props) {
		<Grid
		container
		item
		className={classes.grid}
		justify="space-evenly"
		alignItems="flex-end"
		wrap="nowrap"
		xs={9}
		justify="space-evenly"
		alignItems="center"
		className={classes.grid}
		xs={10}
		>
		<Grid item>
		<StyledTooltip
		@@ -125,11 +136,11 @@ export default function ConsoleLonLatSelects(props) {
		value={posEastWest}
		onChange={handlePosEastWest}
		>
		<StyledToggleButton value="PositiveEast">
		<StyledToggleButton id="consoleLonEastBtn" value="PositiveEast">
		<AutorenewIcon className={classes.flip} />
		<Typography>East</Typography>
		</StyledToggleButton>
		<StyledToggleButton value="PositiveWest">
		<StyledToggleButton id="consoleLonWestBtn" value="PositiveWest">
		<AutorenewIcon />
		<Typography>West</Typography>
		</StyledToggleButton>
		@@ -157,12 +168,18 @@ export default function ConsoleLonLatSelects(props) {
		value={coordSystem}
		onChange={handleCoordSystem}
		>
		<StyledToggleButton value="Planetocentric">
		<span className={classes.circle} />
		<StyledToggleButton
		value="Planetocentric"
		id="consoleLatTypeOcentric"
		>
		<i className={classes.circle} />
		<Typography>centric</Typography>
		</StyledToggleButton>
		<StyledToggleButton value="Planetographic">
		<span className={classes.oval} />
		<StyledToggleButton
		id="consoleLatTypeOgraphic"
		value="Planetographic"
		>
		<i className={classes.oval} />
		<Typography>graphic</Typography>
		</StyledToggleButton>
		</ToggleButtonGroup>
		@@ -189,11 +206,11 @@ export default function ConsoleLonLatSelects(props) {
		value={lonRange}
		onChange={handleLonRange}
		>
		<StyledToggleButton value={180}>
		<StyledToggleButton id="consoleLon180Btn" value={180}>
		<ExposureIcon />
		<Typography>180°</Typography>
		</StyledToggleButton>
		<StyledToggleButton value={360}>
		<StyledToggleButton id="consoleLon360Btn" value={360}>
		<AddBoxIcon />
		<Typography>360°</Typography>
		</StyledToggleButton>