refactored from VisibilityPanel to ViewOptionsPanel (#437)

src/components/config/VisibilityPanel.tsx → src/components/config/ViewOptionsPanel.tsx

@@ -22,7 +22,7 @@ type State = {
   isOpen: boolean;
 };
 
-class RobotConfigPanel extends Component<Props, State> {
+class ViewOptionsPanel extends Component<Props, State> {
   static contextType = DocumentManagerContext;
   declare context: React.ContextType<typeof DocumentManagerContext>;
   state = {
@@ -54,7 +54,7 @@ class RobotConfigPanel extends Component<Props, State> {
     const uiState = this.context.model.uiState;
 
     return (
-      <div className={styles.VisibilityPanel}>
+      <div className={styles.ViewOptionsPanel}>
         <Tooltip disableInteractive title="Zoom to fit trajectory">
           {/* If there's no waypoints, then don't allow user to zoom to fit Waypoints */}
           <IconButton
@@ -111,12 +111,12 @@ class RobotConfigPanel extends Component<Props, State> {
         </div>
         <IconButton
           onClick={() => {
-            uiState.setVisibilityPanelOpen(!uiState.visibilityPanelOpen);
+            uiState.setViewOptionsPanelOpen(!uiState.isViewOptionsPanelOpen);
           }}
         >
-          {uiState.visibilityPanelOpen ? <Close /> : <Visibility />}
+          {uiState.isViewOptionsPanelOpen ? <Close /> : <Visibility />}
         </IconButton>
-        {uiState.visibilityPanelOpen && (
+        {uiState.isViewOptionsPanelOpen && (
           <div
             style={{
               display: "flex",
@@ -162,4 +162,4 @@ class RobotConfigPanel extends Component<Props, State> {
     );
   }
 }
-export default observer(RobotConfigPanel);
+export default observer(ViewOptionsPanel);

src/components/config/WaypointConfigPanel.module.css

@@ -11,7 +11,7 @@
   justify-content: flex-start;
   border-radius: 0 0 10px 0;
 }
-.VisibilityPanel {
+.ViewOptionsPanel {
   overflow-x: hidden;
   position: absolute;
   top: 0;

src/components/field/Field.tsx

@@ -10,7 +10,7 @@ import ShapeLineIcon from "@mui/icons-material/ShapeLine";
 import { CircularProgress, Tooltip } from "@mui/material";
 import Box from "@mui/material/Box/Box";
 import { IHolonomicWaypointStore } from "../../document/HolonomicWaypointStore";
-import VisibilityPanel from "../config/VisibilityPanel";
+import ViewOptionsPanel from "../config/ViewOptionsPanel";
 import ConstraintsConfigPanel from "../config/ConstraintsConfigPanel";
 import { IConstraintStore } from "../../document/ConstraintStore";
 import "react-toastify/dist/ReactToastify.min.css";
@@ -76,8 +76,8 @@ export class Field extends Component<Props, State> {
               marker={selectedSidebar as IEventMarkerStore}
             ></EventMarkerConfigPanel>
           )}
-        <VisibilityPanel></VisibilityPanel>
-        <WaypointVisibilityPanel></WaypointVisibilityPanel>
+        <ViewOptionsPanel />
+        <WaypointVisibilityPanel />
         <Tooltip
           disableInteractive
           placement="top-start"

src/document/UIStateStore.tsx

@@ -182,7 +182,7 @@ export type SelectableItemTypes =
   | IEventMarkerStore
   | undefined;
 
-/* Visibility stuff */
+/* ViewOptionsPanel items */
 const ViewData = {
   Field: {
     index: 0,
@@ -255,7 +255,7 @@ export const UIStateStore = types
     saveFileDir: types.maybe(types.string),
     isGradleProject: types.maybe(types.boolean),
     waypointPanelOpen: false,
-    visibilityPanelOpen: false,
+    isViewOptionsPanelOpen: false,
     robotConfigOpen: false,
     mainMenuOpen: false,
     settingsTab: types.refinement(
@@ -387,8 +387,8 @@ export const UIStateStore = types
     setWaypointPanelOpen(open: boolean) {
       self.waypointPanelOpen = open;
     },
-    setVisibilityPanelOpen(open: boolean) {
-      self.visibilityPanelOpen = open;
+    setViewOptionsPanelOpen(open: boolean) {
+      self.isViewOptionsPanelOpen = open;
     },
     setPathAnimationTimestamp(time: number) {
       self.pathAnimationTimestamp = time;