@wandelbots/wandelbots-js-react-components 5.1.0 → 5.1.1

package/package.json

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

package/src/components/VelocitySlider.tsx

@@ -10,9 +10,10 @@ type VelocitySliderProps = {
   min: number
   max: number
   velocity: number
-  onVelocityChange: (newVelocity: number) => void
+  onVelocityChange: (newVelocity: number, useDegree: boolean) => void
   disabled?: boolean
   renderValue?: (value: number) => ReactNode
+  useDegree: boolean
   store: JoggingStore
 }
 
@@ -25,7 +26,7 @@ export const VelocitySlider = observer((props: VelocitySliderProps) => {
   function onSliderChange(_event: Event, newVelocity: number | number[]) {
     if (newVelocity === props.velocity || !isNumber(newVelocity)) return
 
-    props.onVelocityChange(newVelocity)
+    props.onVelocityChange(newVelocity, props.useDegree)
   }
 
   return (

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -194,8 +194,16 @@ export const JoggingCartesianTab = observer(
     return (
       <Stack flexGrow={1} gap={2} sx={{ padding: "18px 24px" }}>
         <Stack gap={2}>
-          <JoggingOptions store={store} />
-          <JoggingVelocitySlider store={store} />
+          <JoggingOptions
+            store={store}
+            useDegree={store.selectedCartesianMotionType === "rotate"}
+          />
+
+          <JoggingVelocitySlider
+            store={store}
+            useDegree={store.selectedCartesianMotionType === "rotate"}
+          />
+
           <Divider />
         </Stack>
 

package/src/components/jogging/JoggingJointTab.tsx

@@ -37,7 +37,13 @@ export const JoggingJointTab = observer(
 
     return (
       <Stack flexGrow={1} gap={2} sx={{ padding: "18px 24px" }}>
-        <JoggingVelocitySlider store={store} />
+        <JoggingVelocitySlider
+          store={store}
+          useDegree={
+            store.jointCategory === JointCategory.REVOLUTE
+          }
+        />
+
         <Divider />
 
         <Stack
@@ -76,7 +82,10 @@ export const JoggingJointTab = observer(
                     disabled={store.isLocked}
                     lowerLimit={jointLimits?.lower_limit}
                     upperLimit={jointLimits?.upper_limit}
-                    useDegree={store.currentMotionType === "rotate"}
+                    useDegree={
+                      store.jointCategory === JointCategory.REVOLUTE
+                    }
+
                     getValue={() => {
                       const value =
                         store.jogger.motionStream.rapidlyChangingMotionState

package/src/components/jogging/JoggingOptions.tsx

@@ -10,7 +10,7 @@ import {
   type OrientationId,
 } from "./JoggingStore"
 
-export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
+export const JoggingOptions = observer(({ store, useDegree }: { store: JoggingStore, useDegree: boolean }) => {
   const { t } = useTranslation()
   const componentId = useId()
   const joggingOptions: React.ReactElement[] = []
@@ -118,9 +118,9 @@ export const JoggingOptions = observer(({ store }: { store: JoggingStore }) => {
           ? null
           : store.discreteIncrementOptions.map((inc) => (
               <MenuItem key={inc.id} value={inc.id}>
-                {store.currentMotionType === "translate"
-                  ? `${inc.mm}mm`
-                  : `${inc.degrees}°`}
+                {useDegree
+                  ? `${inc.degrees}°`
+                  : `${inc.mm}mm`}
               </MenuItem>
             ))}
       </AdornedSelect>,

package/src/components/jogging/JoggingStore.ts

@@ -46,7 +46,7 @@ export enum JointCategory {
 }
 
 type TabType = "cartesian" | "joint" | "debug";
-
+export type CartesianMotionType = "translate" | "rotate"
 
 export class JoggingStore {
   selectedTabId: TabType = "cartesian";
@@ -96,7 +96,7 @@ export class JoggingStore {
    * When on the cartesian tab, jogging can be either translating or rotating
    * around the TCP.
    */
-  selectedCartesianMotionType: "translate" | "rotate" = "translate"
+  selectedCartesianMotionType: CartesianMotionType = "translate"
 
   /**
    * If the jogger is busy running an incremental jog, this will be set
@@ -379,41 +379,26 @@ export class JoggingStore {
   }
 
   /** Selected velocity in mm/sec or deg/sec */
-  get velocityInDisplayUnits() {
-    return this.currentMotionType === "translate"
-      ? this.translationVelocityMmPerSec
-      : this.rotationVelocityDegPerSec
+  velocityInDisplayUnits(useDegree: boolean) {
+    return useDegree
+      ? this.rotationVelocityDegPerSec
+      : this.translationVelocityMmPerSec
   }
 
+
   /** Minimum selectable velocity in mm/sec or deg/sec */
-  get minVelocityInDisplayUnits() {
-    return this.currentMotionType === "translate"
-      ? this.minTranslationVelocityMmPerSec
-      : this.minRotationVelocityDegPerSec
+  minVelocityInDisplayUnits(useDegree: boolean) {
+    return useDegree
+      ? this.minRotationVelocityDegPerSec
+      : this.minTranslationVelocityMmPerSec
   }
 
-  /** Maximum selectable velocity in mm/sec or deg/sec */
-  get maxVelocityInDisplayUnits() {
-    return this.currentMotionType === "translate"
-      ? this.maxTranslationVelocityMmPerSec
-      : this.maxRotationVelocityDegPerSec
-  }
 
-  /**
-   * For velocity unit purposes, joint and cartesian rotation
-   * are treated as the same type of motion
-   */
-  get currentMotionType() {
-    if (
-      (
-        this.selectedTabId === "cartesian" &&
-        this.selectedCartesianMotionType === "translate"
-      ) || this.jointCategory === JointCategory.PRISMATIC
-    ) {
-      return "translate"
-    } else {
-      return "rotate"
-    }
+  /** Maximum selectable velocity in mm/sec or deg/sec */
+  maxVelocityInDisplayUnits(useDegree: boolean) {
+    return useDegree
+      ? this.maxRotationVelocityDegPerSec
+      : this.maxTranslationVelocityMmPerSec
   }
 
 
@@ -459,15 +444,16 @@ export class JoggingStore {
     this.incrementJogInProgress = incrementJog
   }
 
-  setVelocityFromSlider(velocity: number) {
-    if (this.currentMotionType === "translate") {
-      this.translationVelocityMmPerSec = velocity
-    } else {
+  setVelocityFromSlider(velocity: number,useDegree : boolean ) {
+    if (useDegree) {
       this.rotationVelocityDegPerSec = velocity
+    } else {
+      this.translationVelocityMmPerSec = velocity
     }
   }
 
-  setSelectedCartesianMotionType(type: "translate" | "rotate") {
+
+  setSelectedCartesianMotionType(type: CartesianMotionType) {
     this.selectedCartesianMotionType = type
   }
 

package/src/components/jogging/JoggingVelocitySlider.tsx

@@ -1,35 +1,38 @@
-import { observer, useLocalObservable } from "mobx-react-lite"
+import { observer} from "mobx-react-lite"
 import { useTranslation } from "react-i18next"
 import { VelocitySlider, VelocitySliderLabel } from "../VelocitySlider"
 import type { JoggingStore } from "./JoggingStore"
 
 export const JoggingVelocitySlider = observer(
-  ({ store }: { store: JoggingStore }) => {
+  ({
+     store,
+     useDegree,
+   }: {
+    store: JoggingStore
+    useDegree: boolean
+  }) => {
+
     const { t } = useTranslation()
 
-    const state = useLocalObservable(() => ({
-      get valueLabelFormat() {
-        if (store.currentMotionType === "translate") {
-          return (value: number) =>
-            `v = ${t("Jogging.Cartesian.Translation.velocityMmPerSec.lb", { amount: value })}`
-        } else {
-          return (value: number) =>
-            `ω = ${t("Jogging.Cartesian.Rotation.velocityDegPerSec.lb", { amount: value })}`
-        }
-      },
-    }))
+    function valueLabelFormat(value: number, useDegree: boolean): string {
+      return useDegree
+        ? `ω = ${t("Jogging.Cartesian.Rotation.velocityDegPerSec.lb", { amount: value })}`
+        : `v = ${t("Jogging.Cartesian.Translation.velocityMmPerSec.lb", { amount: value })}`
+    }
+
 
     return (
       <VelocitySlider
         store={store}
-        velocity={store.velocityInDisplayUnits}
-        min={store.minVelocityInDisplayUnits}
-        max={store.maxVelocityInDisplayUnits}
+        velocity={store.velocityInDisplayUnits(useDegree)}
+        min={store.minVelocityInDisplayUnits(useDegree)}
+        max={store.maxVelocityInDisplayUnits(useDegree)}
         onVelocityChange={store.setVelocityFromSlider}
+        useDegree={useDegree}
         disabled={store.isLocked}
         renderValue={(value) => (
           <VelocitySliderLabel
-            value={state.valueLabelFormat(value)}
+            value={valueLabelFormat(value, useDegree)}
             sx={{
               minWidth: "111px",
               span: {