@wandelbots/wandelbots-js-react-components 2.16.3 → 2.17.0

package/dist/themes/createDarkTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CAsRvC"}
+{"version":3,"file":"createDarkTheme.d.ts","sourceRoot":"","sources":["../../src/themes/createDarkTheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,KAAK,EAAE,MAAM,eAAe,CAAA;AAEjE,wBAAgB,eAAe,IAAI,KAAK,CA2RvC"}

package/dist/themes/themeTypes.d.ts

@@ -34,6 +34,11 @@ interface NovaComponentsExtension {
                 Z?: AxisControlComponentColors;
             };
         };
+        JoggingJoint?: {
+            Joint?: {
+                arrowColor?: string;
+            };
+        };
         WandelscriptEditor?: {
             monacoTheme: editor.IStandaloneThemeData;
         };

package/dist/themes/themeTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themeTypes.d.ts","sourceRoot":"","sources":["../../src/themes/themeTypes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"themeTypes.d.ts","sourceRoot":"","sources":["../../src/themes/themeTypes.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.16.3",
+  "version": "2.17.0",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/jogging/JoggingJointRotationControl.tsx

@@ -137,6 +137,7 @@ export const JoggingJointRotationControl = externalizeComponent(
             <ChevronLeft
               sx={{
                 pointerEvents: "none",
+                color: theme.componentsExt?.JoggingJoint?.Joint?.arrowColor,
               }}
             />
           </IconButton>
@@ -232,6 +233,7 @@ export const JoggingJointRotationControl = externalizeComponent(
             <ChevronRight
               sx={{
                 pointerEvents: "none",
+                color: theme.componentsExt?.JoggingJoint?.Joint?.arrowColor,
               }}
             />
           </IconButton>

package/src/components/jogging/JoggingOptions.tsx

@@ -30,97 +30,117 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
         display: "grid",
         gap: "16px",
         gridTemplateColumns: "1fr 1fr",
-        gridTemplateRows: "min-height min-height",
+        gridAutoRows: "min-content",
         "& label": { opacity: 0.7, fontSize: "12px", marginBottom: "4px" },
       }}
     >
       {/* Coordinate system */}
-      <AdornedSelect
-        labelId="jogging-coord-select"
-        labelValue={t("Jogging.CoordinateSystem.hlb")}
-        value={store.selectedCoordSystemId}
-        size="small"
-        variant="filled"
-        displayEmpty={true}
-        onChange={(event) => {
-          store.setSelectedCoordSystemId(event.target.value as string)
-        }}
-        disabled={store.isLocked}
-      >
-        {store.coordSystems.map((cs) => (
-          <MenuItem key={cs.coordinate_system} value={cs.coordinate_system}>
-            {/* Distinguish coordinate systems with the same name */}
-            {cs.name && store.coordSystemCountByName[cs.name] > 1
-              ? `${cs.name} / ${cs.coordinate_system}`
-              : cs.name || cs.coordinate_system}
-          </MenuItem>
-        ))}
-      </AdornedSelect>
+      {store.showCoordSystemSelect && (
+        <Box sx={{ gridColumn: store.showTcpSelect ? "auto" : "span 2" }}>
+          <AdornedSelect
+            labelId="jogging-coord-select"
+            labelValue={t("Jogging.CoordinateSystem.hlb")}
+            value={store.selectedCoordSystemId}
+            size="small"
+            variant="filled"
+            displayEmpty={true}
+            onChange={(event) =>
+              store.setSelectedCoordSystemId(event.target.value as string)
+            }
+            disabled={store.isLocked}
+          >
+            {store.coordSystems.map((cs) => (
+              <MenuItem key={cs.coordinate_system} value={cs.coordinate_system}>
+                {cs.name && store.coordSystemCountByName[cs.name] > 1
+                  ? `${cs.name} / ${cs.coordinate_system}`
+                  : cs.name || cs.coordinate_system}
+              </MenuItem>
+            ))}
+          </AdornedSelect>
+        </Box>
+      )}
 
       {/* TCP selection */}
-
-      <AdornedSelect
-        labelId="jogging-tcp-select"
-        labelValue="TCP"
-        value={store.selectedTcpId}
-        size="small"
-        variant="filled"
-        onChange={(event) => {
-          store.setSelectedTcpId(event.target.value as string)
-        }}
-        disabled={store.isLocked}
-      >
-        {store.tcps.map((tcp) => (
-          <MenuItem key={tcp.id} value={tcp.id}>
-            {tcp.id}
-          </MenuItem>
-        ))}
-      </AdornedSelect>
+      {store.showTcpSelect && (
+        <Box
+          sx={{ gridColumn: store.showCoordSystemSelect ? "auto" : "span 2" }}
+        >
+          <AdornedSelect
+            labelId="jogging-tcp-select"
+            labelValue="TCP"
+            value={store.selectedTcpId}
+            size="small"
+            variant="filled"
+            onChange={(event) =>
+              store.setSelectedTcpId(event.target.value as string)
+            }
+            disabled={store.isLocked}
+          >
+            {store.tcps.map((tcp) => (
+              <MenuItem key={tcp.id} value={tcp.id}>
+                {tcp.id}
+              </MenuItem>
+            ))}
+          </AdornedSelect>
+        </Box>
+      )}
 
       {/* Orientation */}
-      <AdornedSelect
-        labelValue={t("Jogging.Cartesian.Orientation.lb")}
-        id="orientation-select"
-        labelId="orientation-select"
-        value={store.selectedOrientation}
-        onChange={(event) => {
-          store.setSelectedOrientation(event.target.value as OrientationId)
-        }}
-        disabled={store.isLocked}
-      >
-        {ORIENTATION_IDS.map((orientationId) => (
-          <MenuItem key={orientationId} value={orientationId}>
-            {translateOrientation(orientationId)}
-          </MenuItem>
-        ))}
-      </AdornedSelect>
-
-      {/* Increment selection */}
-      <AdornedSelect
-        labelValue={t("Jogging.Increment.hlb")}
-        labelId="jogging-increment-select"
-        size="small"
-        variant="filled"
-        value={store.activeDiscreteIncrement?.id || "continuous"}
-        onChange={(event) => {
-          store.setSelectedIncrementId(event.target.value as IncrementOptionId)
-        }}
-        disabled={store.isLocked}
-      >
-        <MenuItem key="continuous" value="continuous">
-          {t("Jogging.Increment.Continuous.dd")}
-        </MenuItem>
-
-        {store.selectedOrientation === "tool"
-          ? null
-          : store.discreteIncrementOptions.map((inc) => (
-              <MenuItem key={inc.id} value={inc.id}>
-                {store.currentMotionType === "translate"
-                  ? `${inc.mm}mm`
-                  : `${inc.degrees}°`}
+      {store.showOrientationSelect && (
+        <Box sx={{ gridColumn: store.showIncrementSelect ? "auto" : "span 2" }}>
+          <AdornedSelect
+            labelValue={t("Jogging.Cartesian.Orientation.lb")}
+            id="orientation-select"
+            labelId="orientation-select"
+            value={store.selectedOrientation}
+            onChange={(event) =>
+              store.setSelectedOrientation(event.target.value as OrientationId)
+            }
+            disabled={store.isLocked}
+          >
+            {ORIENTATION_IDS.map((orientationId) => (
+              <MenuItem key={orientationId} value={orientationId}>
+                {translateOrientation(orientationId)}
               </MenuItem>
             ))}
-      </AdornedSelect>
+          </AdornedSelect>
+        </Box>
+      )}
+
+      {/* Increment */}
+      {store.showIncrementSelect && (
+        <Box
+          sx={{ gridColumn: store.showOrientationSelect ? "auto" : "span 2" }}
+        >
+          <AdornedSelect
+            labelValue={t("Jogging.Increment.hlb")}
+            labelId="jogging-increment-select"
+            size="small"
+            variant="filled"
+            value={store.activeDiscreteIncrement?.id || "continuous"}
+            onChange={(event) =>
+              store.setSelectedIncrementId(
+                event.target.value as IncrementOptionId,
+              )
+            }
+            disabled={store.isLocked}
+          >
+            <MenuItem key="continuous" value="continuous">
+              {t("Jogging.Increment.Continuous.dd")}
+            </MenuItem>
+
+            {store.selectedOrientation === "tool"
+              ? null
+              : store.discreteIncrementOptions.map((inc) => (
+                  <MenuItem key={inc.id} value={inc.id}>
+                    {store.currentMotionType === "translate"
+                      ? `${inc.mm}mm`
+                      : `${inc.degrees}°`}
+                  </MenuItem>
+                ))}
+          </AdornedSelect>
+        </Box>
+      )}
     </Box>
   )
 })

package/src/components/jogging/JoggingStore.ts

@@ -104,6 +104,18 @@ export class JoggingStore {
   /** Maximum rotation velocity user can choose on the velocity slider in °/s */
   maxRotationVelocityDegPerSec: number = 60
 
+  /** Whether to show the coordinate system select dropdown in the UI */
+  showCoordSystemSelect: boolean = true
+
+  /** Whether to show the TCP select dropdown in the UI */
+  showTcpSelect: boolean = true
+
+  /** Whether to show the orientation select dropdown in the UI */
+  showOrientationSelect: boolean = true
+
+  /** Whether to show the increment select dropdown in the UI */
+  showIncrementSelect: boolean = true
+
   disposers: IReactionDisposer[] = []
 
   /**

package/src/themes/createDarkTheme.ts

@@ -255,6 +255,11 @@ export function createDarkTheme(): Theme {
           },
         },
       },
+      JoggingJoint: {
+        Joint: {
+          arrowColor: baseTheme.palette.text.primary,
+        },
+      },
       WandelscriptEditor: {
         monacoTheme: {
           base: "vs-dark",

package/src/themes/themeTypes.ts

@@ -35,7 +35,12 @@ interface NovaComponentsExtension {
         X?: AxisControlComponentColors
         Y?: AxisControlComponentColors
         Z?: AxisControlComponentColors
-      },
+      }
+    }
+    JoggingJoint?: {
+      Joint?: {
+        arrowColor?: string
+      }
     }
     WandelscriptEditor?: {
       monacoTheme: editor.IStandaloneThemeData