Restyle and rearrange waypoint config panel

src/components/config/PoseAssignToWaypointDropdown.tsx

@@ -1,100 +1,124 @@
-import { Autocomplete, createFilterOptions, MenuItem, Select, SelectChangeEvent, TextField } from "@mui/material";
+import { Autocomplete, createFilterOptions, TextField } from "@mui/material";
 import { Component } from "react";
 import { doc } from "../../document/DocumentManager";
 import { observer } from "mobx-react";
 import { MathNode } from "mathjs";
 import { math } from "../../document/ExpressionStore";
-import Waypoint from "../../assets/Waypoint";
 type Props = {
   setXExpression: (expr: MathNode) => void;
   setYExpression: (expr: MathNode) => void;
   setHeadingExpression: (expr: MathNode) => void;
   onDefinePose: (variableName: string) => void;
   poses: readonly PoseVariableWithCustom[];
+  allowDefinePose: boolean;
 };
 export interface PoseVariableWithCustom {
   isAdd?: boolean;
   title: string;
   variableName: string;
 }
 const filter = createFilterOptions<PoseVariableWithCustom>();
-class PoseAssignToWaypointDropdown extends Component<Props, object> {
-
+type State = {
+  recreateCounter: number;
+};
+class PoseAssignToWaypointDropdown extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { recreateCounter: 0 };
+  }
   render() {
-     // TODO memoize
-    let options = this.props.poses;
+    // TODO memoize
+    const options = this.props.poses;
     return (
       <Autocomplete
-      size="small"
-  options={options}
-  getOptionLabel={(option) => {
-    // Value selected with enter, right from the input
-    if (typeof option === 'string') {
-      return option;
-    }
-    return option.variableName;
-  }}
-  sx={{ width: 300 }}
-  renderInput={(params) => {
-    return (<TextField {...params} label="Pose" />);
-  }}
-  renderOption={(props, option) => {
-    const { key, ...optionProps } = props;
-    return (
-      <li key={key} {...optionProps}>
-        {option.title}
-      </li>
-    );
-  }}
-  selectOnFocus
-  clearOnBlur
-  handleHomeEndKeys
-  onChange={(e:any, newValue: PoseVariableWithCustom|null) => {
-        if (newValue === null) {
-          return;
-        }
-
-        const poseName = newValue.variableName;
-        if (!doc.variables.poses.has(poseName)) {
-          if (newValue.isAdd) {
-            console.log(newValue.variableName);
-            this.props.onDefinePose(newValue.variableName)
+        key={this.state.recreateCounter}
+        size="small"
+        options={options}
+        getOptionLabel={(option) => {
+          // Value selected with enter, right from the input
+          if (typeof option === "string") {
+            return option;
           }
-        }
-        doc.history.startGroup(() => {
-          try {
-            this.props.setXExpression(math.parse(`${poseName}.x`));
-            this.props.setYExpression(math.parse(`${poseName}.y`));
-            this.props.setHeadingExpression(
-              math.parse(`${poseName}.heading`)
-            );
-          } finally {
-            doc.history.stopGroup();
+          return option.variableName;
+        }}
+        renderInput={(params) => {
+          return (
+            <TextField
+              variant="standard"
+              sx={{
+                fontFamily: "Roboto Mono Variable",
+                textAlign: "right"
+              }}
+              placeholder="Pose Variable"
+              {...params}
+            />
+          );
+        }}
+        renderOption={(props, option) => {
+          const { key, ...optionProps } = props;
+          return (
+            <li key={key} {...optionProps}>
+              {option.title}
+            </li>
+          );
+        }}
+        selectOnFocus
+        clearOnBlur
+        handleHomeEndKeys
+        disableClearable
+        autoHighlight
+        onChange={(e: any, newValue: PoseVariableWithCustom | null) => {
+          if (newValue === null) {
+            return;
           }
-        });
-      }}
-      filterOptions={(options, params) => {
-        const filtered = filter(options, params);
 
-        const { inputValue } = params;
-        // Suggest the creation of a new value
-        const isExisting = options.some((option) => inputValue === option.title);
-        if (inputValue !== '' && !isExisting) {
-          filtered.push({
-            isAdd: true,
-            title: `Add this pose as "${inputValue}"`,
-            variableName: inputValue
+          const poseName = newValue.variableName;
+          if (
+            this.props.allowDefinePose &&
+            !doc.variables.poses.has(poseName)
+          ) {
+            if (newValue.isAdd) {
+              console.log(newValue.variableName);
+              this.props.onDefinePose(newValue.variableName);
+            }
+          }
+          doc.history.startGroup(() => {
+            try {
+              this.props.setXExpression(math.parse(`${poseName}.x`));
+              this.props.setYExpression(math.parse(`${poseName}.y`));
+              this.props.setHeadingExpression(
+                math.parse(`${poseName}.heading`)
+              );
+            } finally {
+              doc.history.stopGroup();
+            }
           });
-        }
-
-        return filtered;
-      }}
-/>
+          this.setState({ recreateCounter: this.state.recreateCounter + 1 });
+        }}
+        filterOptions={(options, params) => {
+          const filtered = filter(options, params);
+          if (this.props.allowDefinePose) {
+            const { inputValue } = params;
+            // Suggest the creation of a new value
+            const isExisting = options.some(
+              (option) => inputValue === option.title
+            );
+            if (inputValue !== "" && !isExisting) {
+              filtered.push({
+                isAdd: true,
+                title: `Add this pose as "${inputValue}"`,
+                variableName: inputValue
+              });
+            }
+          }
+          return filtered;
+        }}
+      />
       // <Select
       //   size="small"
       //   variant="standard"
       //   defaultValue=" "
-      //   renderValue={(_) => 
+      //   renderValue={(_) =>
       //       <Waypoint></Waypoint>
       //   }
       //   sx={{

src/components/config/WaypointConfigPanel.tsx

@@ -52,18 +52,8 @@ class WaypointPanel extends Component<Props, State> {
                 //setNumber={(heading) => waypoint!.setHeading(heading)}
               ></ExpressionInput>
             </ExpressionInputList>
-            <PoseAssignToWaypointDropdown
-              setXExpression={(node) => waypoint.x.set(node)}
-              setYExpression={(node) => waypoint.y.set(node)}
-              setHeadingExpression={(node) => waypoint.heading.set(node)}
-              poses = {doc.variables.sortedPoseKeys.map(k=>({title:k, variableName:k}))}
-              onDefinePose={(variableName)=>{doc.variables.addPose(variableName, {
-                x: waypoint.x.serialize,
-                y: waypoint.y.serialize,
-                heading: waypoint.heading.serialize
-              })}}
-            ></PoseAssignToWaypointDropdown>
           </span>
+
           <span
             style={{
               display: "flex",
@@ -73,6 +63,25 @@ class WaypointPanel extends Component<Props, State> {
             }}
           >
             <InputList>
+              <span style={{ gridColumn: "1 / 5" }}>
+                <PoseAssignToWaypointDropdown
+                  setXExpression={(node) => waypoint.x.set(node)}
+                  setYExpression={(node) => waypoint.y.set(node)}
+                  setHeadingExpression={(node) => waypoint.heading.set(node)}
+                  poses={doc.variables.sortedPoseKeys.map((k) => ({
+                    title: k,
+                    variableName: k
+                  }))}
+                  allowDefinePose={true}
+                  onDefinePose={(variableName) => {
+                    doc.variables.addPose(variableName, {
+                      x: waypoint.x.serialize,
+                      y: waypoint.y.serialize,
+                      heading: waypoint.heading.serialize
+                    });
+                  }}
+                ></PoseAssignToWaypointDropdown>
+              </span>
               <Input
                 title="Samples"
                 suffix=""
@@ -100,7 +109,7 @@ class WaypointPanel extends Component<Props, State> {
             </InputList>
             <span style={{ flexGrow: 1 }}></span>
             <ToggleButtonGroup
-              sx={{ marginInline: "auto" }}
+              sx={{ marginInline: "auto", marginBlock: "auto" }}
               size="small"
               exclusive
               value={waypointType}
@@ -139,15 +148,17 @@ class WaypointPanel extends Component<Props, State> {
             </ToggleButtonGroup>
             <div
               style={{
-                width: "min-content",
-                padding: "4px",
+                width: "24px",
+                padding: "7px",
                 background: "var(--darker-purple)",
                 borderRadius: "8px",
                 fontWeight: "bolder",
                 fontSize: "1em",
                 display: "flex",
                 flexDirection: "column",
-                justifyContent: "center"
+                justifyContent: "center",
+                boxSizing: "content-box",
+                textAlign: "center"
               }}
             >
               <div>{this.props.index + 1}</div>