Add a dropdown for assigning a pose variable to a waypoint

src/components/config/PoseAssignToWaypointDropdown.tsx

@@ -0,0 +1,160 @@
+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";
+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>();
+type State = {
+  recreateCounter: number;
+};
+class PoseAssignToWaypointDropdown extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { recreateCounter: 0 };
+  }
+  render() {
+    // TODO memoize
+    const options = this.props.poses;
+    return (
+      <Autocomplete
+        key={this.state.recreateCounter}
+        size="small"
+        options={options}
+        getOptionLabel={(option) => {
+          // Value selected with enter, right from the input
+          if (typeof option === "string") {
+            return option;
+          }
+          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;
+          }
+
+          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();
+            }
+          });
+          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={(_) =>
+      //       <Waypoint></Waypoint>
+      //   }
+      //   sx={{
+      //     ".MuiSelect-select": {
+      //       padding: "0px !important",
+      //       height: "0px !important",
+      //       paddingRight: "24px !important"
+      //     }
+      //   }}
+      //   onChange={(e: SelectChangeEvent<string>) => {
+      //     const poseName = e.target.value;
+      //     if (!doc.variables.poses.has(poseName)) {
+      //       return;
+      //     }
+      //     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();
+      //       }
+      //     });
+      //   }}
+      // >
+      //   {Array.from(doc.variables.poses.keys())
+      //     .sort((a, b) =>
+      //       a[0].toLocaleUpperCase() > b[0].toLocaleUpperCase() ? 1 : -1
+      //     )
+      //     .map((entry) => (
+      //       <MenuItem value={entry}>{entry}</MenuItem>
+      //     ))}
+      // </Select>
+    );
+  }
+}
+export default observer(PoseAssignToWaypointDropdown);

src/components/config/WaypointConfigPanel.tsx

@@ -9,6 +9,8 @@ import ExpressionInputList from "../input/ExpressionInputList";
 import Input from "../input/Input";
 import InputList from "../input/InputList";
 import styles from "./WaypointConfigPanel.module.css";
+import PoseAssignToWaypointDropdown from "./PoseAssignToWaypointDropdown";
+import { doc } from "../../document/DocumentManager";
 
 type Props = { waypoint: IHolonomicWaypointStore | null; index: number };
 
@@ -28,27 +30,30 @@ class WaypointPanel extends Component<Props, State> {
     if (this.isWaypointNonNull(waypoint)) {
       return (
         <div className={styles.WaypointPanel}>
-          <ExpressionInputList>
-            <ExpressionInput
-              title="x"
-              enabled={true}
-              maxWidthCharacters={8}
-              number={waypoint.x}
-            ></ExpressionInput>
-            <ExpressionInput
-              title="y"
-              enabled={true}
-              maxWidthCharacters={8}
-              number={waypoint.y}
-            ></ExpressionInput>
-            <ExpressionInput
-              title="θ"
-              enabled={waypoint.fixHeading}
-              maxWidthCharacters={8}
-              number={waypoint.heading}
-              //setNumber={(heading) => waypoint!.setHeading(heading)}
-            ></ExpressionInput>
-          </ExpressionInputList>
+          <span>
+            <ExpressionInputList>
+              <ExpressionInput
+                title="x"
+                enabled={true}
+                maxWidthCharacters={8}
+                number={waypoint.x}
+              ></ExpressionInput>
+              <ExpressionInput
+                title="y"
+                enabled={true}
+                maxWidthCharacters={8}
+                number={waypoint.y}
+              ></ExpressionInput>
+              <ExpressionInput
+                title="θ"
+                enabled={waypoint.fixHeading}
+                maxWidthCharacters={8}
+                number={waypoint.heading}
+                //setNumber={(heading) => waypoint!.setHeading(heading)}
+              ></ExpressionInput>
+            </ExpressionInputList>
+          </span>
+
           <span
             style={{
               display: "flex",
@@ -58,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=""
@@ -85,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}
@@ -124,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>