@wandelbots/wandelbots-js-react-components 1.32.1 → 1.33.1

package/package.json

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

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -7,16 +7,17 @@ import JogMinus from "../../icons/jog-minus.svg"
 import JogPlus from "../../icons/jog-plus.svg"
 import type { AxisControlComponentColors } from "../../themes/themeTypes"
 import { useAnimationFrame } from "../utils/hooks"
-
-type Direction = "+" | "-"
+import type { JoggingDirection } from "./JoggingStore"
 
 type JoggingCartesianAxisControlProps = {
   colors?: AxisControlComponentColors
   label: ReactNode
   getDisplayedValue: () => string
-  startJogging: (direction: Direction) => void
+  startJogging: (direction: JoggingDirection) => void
   stopJogging: () => void
   disabled?: boolean
+  /** If set, the corresponding button will be rendered in the pressed state */
+  activeJoggingDirection?: JoggingDirection
 } & React.ComponentProps<typeof Stack>
 
 /** A input widget to control an individual cartesian axis */
@@ -29,6 +30,7 @@ export const JoggingCartesianAxisControl = externalizeComponent(
       startJogging,
       stopJogging,
       disabled,
+      activeJoggingDirection,
       ...rest
     }: JoggingCartesianAxisControlProps) => {
       useAnimationFrame(() => {
@@ -39,7 +41,13 @@ export const JoggingCartesianAxisControl = externalizeComponent(
         element.textContent = displayValue
       })
       const theme = useTheme()
-      const [borderColor, setBorderColor] = useState(colors?.borderColor)
+
+      const [localActiveJoggingDirection, setLocalActiveJoggingDirection] =
+        useState<JoggingDirection | null>(null)
+
+      // Handle both controlled and uncontrolled states
+      const showJoggingDirection =
+        activeJoggingDirection || localActiveJoggingDirection
 
       const valueContainerRef = useRef<HTMLParagraphElement>(null)
 
@@ -57,17 +65,31 @@ export const JoggingCartesianAxisControl = externalizeComponent(
         }
       }
 
-      const SxAxisControlButton = {
+      const borderColor = showJoggingDirection
+        ? colors.buttonBackgroundColor?.pressed
+        : colors.borderColor
+
+      const sxAxisControlButtonBase = {
         width: "55px",
-        backgroundColor: colors.buttonBackgroundColor?.default,
         color: colors.color,
+        path: { fill: colors.color },
         alignContent: "center",
         fontSize: "37px",
+        svg: {
+          pointerEvents: "none",
+        },
+      }
+
+      const sxAxisControlButtonDefault = {
+        ...sxAxisControlButtonBase,
+        backgroundColor: colors.buttonBackgroundColor?.default,
         "&:hover": {
           backgroundColor: colors.buttonBackgroundColor?.hovered,
         },
         "&:active": {
           backgroundColor: colors.buttonBackgroundColor?.pressed,
+          color: colors.backgroundColor,
+          path: { fill: colors.backgroundColor },
         },
         ":disabled": {
           backgroundColor: colors.buttonBackgroundColor?.disabled,
@@ -75,18 +97,33 @@ export const JoggingCartesianAxisControl = externalizeComponent(
         },
       }
 
-      function onPointerDown(ev: React.PointerEvent, direction: Direction) {
+      const sxAxisControlButtonPressed = {
+        ...sxAxisControlButtonBase,
+        backgroundColor: colors.buttonBackgroundColor?.pressed,
+        color: colors.backgroundColor,
+        path: { fill: colors.backgroundColor },
+        ":disabled": {
+          backgroundColor: colors.buttonBackgroundColor?.pressed,
+          "svg path": { fill: theme.palette.action.disabled },
+        },
+      }
+
+      function onPointerDown(
+        ev: React.PointerEvent,
+        direction: JoggingDirection,
+      ) {
         if (disabled) {
           return
         }
-        setBorderColor(colors?.buttonBackgroundColor?.pressed)
+
         if (ev.button === 0) {
+          setLocalActiveJoggingDirection(direction)
           startJogging(direction)
         }
       }
 
       function onPointerUpOrOut() {
-        setBorderColor(colors?.borderColor)
+        setLocalActiveJoggingDirection(null)
         stopJogging()
       }
 
@@ -100,7 +137,9 @@ export const JoggingCartesianAxisControl = externalizeComponent(
             onPointerOut={onPointerUpOrOut}
             size="large"
             sx={{
-              ...SxAxisControlButton,
+              ...(showJoggingDirection === "-"
+                ? sxAxisControlButtonPressed
+                : sxAxisControlButtonDefault),
               borderRadius: "16px 0px 0px 16px",
               borderLeft: `2px solid ${borderColor ?? "#fff"}`,
               borderBottom: `2px solid ${borderColor ?? "#fff"}`,
@@ -163,7 +202,9 @@ export const JoggingCartesianAxisControl = externalizeComponent(
             onPointerOut={onPointerUpOrOut}
             size="large"
             sx={{
-              ...SxAxisControlButton,
+              ...(showJoggingDirection === "+"
+                ? sxAxisControlButtonPressed
+                : sxAxisControlButtonDefault),
               borderRadius: "0px 16px 16px 0px",
               borderRight: `2px solid ${borderColor ?? "#fff"}`,
               borderBottom: `2px solid ${borderColor ?? "#fff"}`,

package/src/components/jogging/JoggingCartesianTab.tsx

@@ -17,14 +17,19 @@ import { JoggingActivationRequired } from "./JoggingActivationRequired"
 import { JoggingCartesianAxisControl } from "./JoggingCartesianAxisControl"
 import { JoggingJointLimitDetector } from "./JoggingJointLimitDetector"
 import { JoggingOptions } from "./JoggingOptions"
-import type { DiscreteIncrementOption, JoggingStore } from "./JoggingStore"
+import type {
+  DiscreteIncrementOption,
+  JoggingAxis,
+  JoggingDirection,
+  JoggingStore,
+} from "./JoggingStore"
 import { JoggingToggleButtonGroup } from "./JoggingToggleButtonGroup"
 import { JoggingVelocitySlider } from "./JoggingVelocitySlider"
 
 type JoggingCartesianOpts = {
-  axis: "x" | "y" | "z"
+  axis: JoggingAxis
   motionType: "translate" | "rotate"
-  direction: "-" | "+"
+  direction: JoggingDirection
 }
 
 export const JoggingCartesianTab = observer(
@@ -70,24 +75,32 @@ export const JoggingCartesianTab = observer(
       if (!tcpPose) return
 
       await store.withMotionLock(async () => {
-        await store.jogger.runIncrementalCartesianMotion({
-          currentTcpPose: tcpPose,
-          currentJoints: jointPosition,
-          coordSystemId: store.activeCoordSystemId,
-          velocityInRelevantUnits: store.velocityInCurrentUnits,
-          axis: opts.axis,
-          direction: opts.direction,
-          motion:
-            store.selectedCartesianMotionType === "translate"
-              ? {
-                  type: "translate",
-                  distanceMm: increment.mm,
-                }
-              : {
-                  type: "rotate",
-                  distanceRads: degreesToRadians(increment.degrees),
-                },
-        })
+        try {
+          store.setCurrentIncrementJog({
+            axis: opts.axis,
+            direction: opts.direction,
+          })
+          await store.jogger.runIncrementalCartesianMotion({
+            currentTcpPose: tcpPose,
+            currentJoints: jointPosition,
+            coordSystemId: store.activeCoordSystemId,
+            velocityInRelevantUnits: store.velocityInCurrentUnits,
+            axis: opts.axis,
+            direction: opts.direction,
+            motion:
+              store.selectedCartesianMotionType === "translate"
+                ? {
+                    type: "translate",
+                    distanceMm: increment.mm,
+                  }
+                : {
+                    type: "rotate",
+                    distanceRads: degreesToRadians(increment.degrees),
+                  },
+          })
+        } finally {
+          store.setCurrentIncrementJog(null)
+        }
       })
     }
 
@@ -195,6 +208,11 @@ export const JoggingCartesianTab = observer(
                     key={axis.id}
                     colors={axis.colors}
                     disabled={store.isLocked}
+                    activeJoggingDirection={
+                      store.incrementJogInProgress?.axis === axis.id
+                        ? store.incrementJogInProgress.direction
+                        : undefined
+                    }
                     label={
                       <>
                         {axis.icon}

package/src/components/jogging/JoggingStore.ts

@@ -27,6 +27,8 @@ const incrementOptions = [
   ...discreteIncrementOptions,
 ] as const
 
+export type JoggingAxis = "x" | "y" | "z"
+export type JoggingDirection = "+" | "-"
 export type DiscreteIncrementOption = (typeof discreteIncrementOptions)[number]
 export type IncrementOption = (typeof incrementOptions)[number]
 export type IncrementOptionId = IncrementOption["id"]
@@ -34,6 +36,11 @@ export type IncrementOptionId = IncrementOption["id"]
 export const ORIENTATION_IDS = ["coordsys", "tool"]
 export type OrientationId = (typeof ORIENTATION_IDS)[number]
 
+export type IncrementJogInProgress = {
+  direction: JoggingDirection
+  axis: JoggingAxis
+}
+
 export class JoggingStore {
   selectedTabId: "cartesian" | "joint" | "debug" = "cartesian"
 
@@ -87,8 +94,11 @@ export class JoggingStore {
    */
   selectedCartesianMotionType: "translate" | "rotate" = "translate"
 
-  /** True when the API is busy doing a planned increment jog motion */
-  incrementJoggingInProgress = false
+  /**
+   * If the jogger is busy running an incremental jog, this will be set
+   * with the information about the motion
+   */
+  incrementJogInProgress: IncrementJogInProgress | null = null
 
   /** How fast the robot goes when doing cartesian translate jogging in mm/s */
   translationVelocityMmPerSec: number = 10
@@ -437,8 +447,8 @@ export class JoggingStore {
     this.selectedIncrementId = id
   }
 
-  setIncrementJoggingInProgress(inProgress: boolean) {
-    this.incrementJoggingInProgress = inProgress
+  setCurrentIncrementJog(incrementJog: IncrementJogInProgress | null) {
+    this.incrementJogInProgress = incrementJog
   }
 
   setVelocityFromSlider(velocity: number) {

package/src/components/robots/SupportedRobot.tsx

@@ -5,6 +5,7 @@ import { ABB_1300_115_10 } from "./ABB_1300_115_10"
 import { FANUC_ARC_Mate_100iD } from "./FANUC_ARC_Mate_100iD"
 import { FANUC_ARC_Mate_120iD } from "./FANUC_ARC_Mate_120iD"
 import { FANUC_CRX10iA } from "./FANUC_CRX10iA"
+import { FANUC_CRX10iAL } from "./FANUC_CRX10iAL"
 import { FANUC_CRX20iAL } from "./FANUC_CRX20iAL"
 import { FANUC_CRX25iA } from "./FANUC_CRX25iA"
 import { FANUC_CRX25iAL } from "./FANUC_CRX25iAL"
@@ -18,6 +19,7 @@ import { KUKA_KR270_R2700 } from "./KUKA_KR270_R2700"
 import { KUKA_KR6_R700_2 } from "./KUKA_KR6_R700_2"
 import { UniversalRobots_UR10CB } from "./UniversalRobots_UR10CB"
 import { UniversalRobots_UR10e } from "./UniversalRobots_UR10e"
+import { UniversalRobots_UR16e } from "./UniversalRobots_UR16e"
 import { UniversalRobots_UR3CB } from "./UniversalRobots_UR3CB"
 import { UniversalRobots_UR3e } from "./UniversalRobots_UR3e"
 import { UniversalRobots_UR5CB } from "./UniversalRobots_UR5CB"
@@ -43,7 +45,6 @@ import { ErrorBoundary } from "react-error-boundary"
 import * as THREE from "three"
 import { externalizeComponent } from "../../externalizeComponent"
 import ConsoleFilter from "../ConsoleFilter"
-import { FANUC_CRX10iAL } from "./FANUC_CRX10iAL"
 import RobotAnimator from "./RobotAnimator"
 import type { RobotModelComponent } from "./types"
 
@@ -191,6 +192,9 @@ export const SupportedRobot = externalizeComponent(
       case "UniversalRobots_UR10e":
         Robot = UniversalRobots_UR10e
         break
+      case "UniversalRobots_UR16e":
+        Robot = UniversalRobots_UR16e
+        break
       case "Yaskawa_AR900":
         Robot = Yaskawa_AR900
         break

package/src/components/robots/UniversalRobots_UR16e.tsx

@@ -0,0 +1,234 @@
+import { animated } from "@react-spring/three"
+import { useGLTF } from "@react-three/drei"
+import type { RobotModelProps } from "./types"
+
+export function UniversalRobots_UR16e({
+  modelURL,
+  flangeRef,
+  ...props
+}: RobotModelProps) {
+  const gltf = useGLTF(modelURL) as any
+  const nodes = gltf.nodes
+  const materials = gltf.materials
+
+  return (
+    <group {...props} dispose={null}>
+      <group name="Scene">
+        <group name="link_0">
+          <mesh
+            name="shape007"
+            geometry={nodes.shape007.geometry}
+            material={materials.universalrobots_stainlesssteel}
+          />
+          <mesh
+            name="shape007_1"
+            geometry={nodes.shape007_1.geometry}
+            material={materials.universalrobots_stainlesssteel}
+          />
+          <mesh
+            name="shape007_2"
+            geometry={nodes.shape007_2.geometry}
+            material={materials.universalrobots_aluminum}
+          />
+          <mesh
+            name="shape007_3"
+            geometry={nodes.shape007_3.geometry}
+            material={materials.universalrobots_aluminum}
+          />
+          <mesh
+            name="shape007_4"
+            geometry={nodes.shape007_4.geometry}
+            material={materials.universalrobots_black}
+          />
+        </group>
+        <animated.group name="UNIVERSALROBOTS_UR16E_J00">
+          <group name="link_1">
+            <mesh
+              name="shape039"
+              geometry={nodes.shape039.geometry}
+              material={materials.universalrobots_lightblue}
+            />
+            <mesh
+              name="shape039_1"
+              geometry={nodes.shape039_1.geometry}
+              material={materials.universalrobots_darkgrey}
+            />
+            <mesh
+              name="shape039_2"
+              geometry={nodes.shape039_2.geometry}
+              material={materials.universalrobots_stainlesssteel}
+            />
+            <mesh
+              name="shape039_3"
+              geometry={nodes.shape039_3.geometry}
+              material={materials.universalrobots_black}
+            />
+          </group>
+          <animated.group
+            name="UNIVERSALROBOTS_UR16E_J01"
+            position={[0, 0.181, 0]}
+            rotation={[Math.PI / 2, 0, 0]}
+          >
+            <group
+              name="link_2"
+              position={[0.181, 0, 0]}
+              rotation={[-Math.PI / 2, 0, Math.PI / 2]}
+            >
+              <mesh
+                name="shape002"
+                geometry={nodes.shape002.geometry}
+                material={materials.universalrobots_darkgrey}
+              />
+              <mesh
+                name="shape002_1"
+                geometry={nodes.shape002_1.geometry}
+                material={materials.universalrobots_black}
+              />
+              <mesh
+                name="shape002_2"
+                geometry={nodes.shape002_2.geometry}
+                material={materials.universalrobots_lightblue}
+              />
+              <mesh
+                name="shape002_3"
+                geometry={nodes.shape002_3.geometry}
+                material={materials.universalrobots_aluminum}
+              />
+              <mesh
+                name="shape002_4"
+                geometry={nodes.shape002_4.geometry}
+                material={materials.universalrobots_stainlesssteel}
+              />
+            </group>
+            <animated.group
+              name="UNIVERSALROBOTS_UR16E_J02"
+              position={[-0.478, 0, 0]}
+            >
+              <group
+                name="link_3"
+                position={[0.659, 0, 0]}
+                rotation={[-Math.PI / 2, 0, Math.PI / 2]}
+              >
+                <mesh
+                  name="shape005"
+                  geometry={nodes.shape005.geometry}
+                  material={materials.universalrobots_stainlesssteel}
+                />
+                <mesh
+                  name="shape005_1"
+                  geometry={nodes.shape005_1.geometry}
+                  material={materials.universalrobots_aluminum}
+                />
+                <mesh
+                  name="shape005_2"
+                  geometry={nodes.shape005_2.geometry}
+                  material={materials.universalrobots_black}
+                />
+                <mesh
+                  name="shape005_3"
+                  geometry={nodes.shape005_3.geometry}
+                  material={materials.universalrobots_lightblue}
+                />
+                <mesh
+                  name="shape005_4"
+                  geometry={nodes.shape005_4.geometry}
+                  material={materials.universalrobots_darkgrey}
+                />
+              </group>
+              <animated.group
+                name="UNIVERSALROBOTS_UR16E_J03"
+                position={[-0.36, 0, 0]}
+              >
+                <group
+                  name="link_4"
+                  position={[0, 0, -1.019]}
+                  rotation={[-Math.PI / 2, 0, Math.PI]}
+                >
+                  <mesh
+                    name="shape003"
+                    geometry={nodes.shape003.geometry}
+                    material={materials.universalrobots_lightblue}
+                  />
+                  <mesh
+                    name="shape003_1"
+                    geometry={nodes.shape003_1.geometry}
+                    material={materials.universalrobots_darkgrey}
+                  />
+                  <mesh
+                    name="shape003_2"
+                    geometry={nodes.shape003_2.geometry}
+                    material={materials.universalrobots_black}
+                  />
+                  <mesh
+                    name="shape003_3"
+                    geometry={nodes.shape003_3.geometry}
+                    material={materials.universalrobots_stainlesssteel}
+                  />
+                </group>
+                <animated.group
+                  name="UNIVERSALROBOTS_UR16E_J04"
+                  position={[0, 0.174, 0]}
+                  rotation={[Math.PI / 2, 0, 0]}
+                >
+                  <group
+                    name="link_5"
+                    position={[0, -1.019, 0.174]}
+                    rotation={[Math.PI, 0, Math.PI]}
+                  >
+                    <mesh
+                      name="shape"
+                      geometry={nodes.shape.geometry}
+                      material={materials.universalrobots_lightblue}
+                    />
+                    <mesh
+                      name="shape_1"
+                      geometry={nodes.shape_1.geometry}
+                      material={materials.universalrobots_darkgrey}
+                    />
+                    <mesh
+                      name="shape_2"
+                      geometry={nodes.shape_2.geometry}
+                      material={materials.universalrobots_black}
+                    />
+                    <mesh
+                      name="shape_3"
+                      geometry={nodes.shape_3.geometry}
+                      material={materials.universalrobots_stainlesssteel}
+                    />
+                  </group>
+                  <animated.group
+                    name="UNIVERSALROBOTS_UR16E_J05"
+                    position={[0, 0.12, 0]}
+                    rotation={[-Math.PI / 2, 0, 0]}
+                  >
+                    <group
+                      name="link_6"
+                      position={[0, -0.174, -1.139]}
+                      rotation={[-Math.PI / 2, 0, Math.PI]}
+                    >
+                      <mesh
+                        name="shape004"
+                        geometry={nodes.shape004.geometry}
+                        material={materials.universalrobots_aluminum}
+                      />
+                      <mesh
+                        name="shape004_1"
+                        geometry={nodes.shape004_1.geometry}
+                        material={materials.universalrobots_black}
+                      />
+                    </group>
+                    <group
+                      ref={flangeRef}
+                      name="UNIVERSALROBOTS_UR16E_FLG"
+                      position={[0, 0.117, 0]}
+                    />
+                  </animated.group>
+                </animated.group>
+              </animated.group>
+            </animated.group>
+          </animated.group>
+        </animated.group>
+      </group>
+    </group>
+  )
+}

package/src/icons/rotation.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="25" height="24" fill="none"><path stroke="#fff" stroke-linecap="round" stroke-width="1.5" d="M18.5 12a6 6 0 1 0-6 6"/><path stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m16.5 11 2 2.5 2-2.5"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 16C5.76667 16 3.875 15.225 2.325 13.675C0.775 12.125 0 10.2333 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C9.15 0 10.25 0.2375 11.3 0.7125C12.35 1.1875 13.25 1.86667 14 2.75V0H16V7H9V5H13.2C12.6667 4.06667 11.9375 3.33333 11.0125 2.8C10.0875 2.26667 9.08333 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14C9.28333 14 10.4417 13.6333 11.475 12.9C11.0583 14.1 12.5083 12.1667 11.475 12.9L12.9 14.325C11.4667 15.4417 9.83333 16 8 16Z" fill="white"/>
+</svg>

package/src/themes/createDarkTheme.ts

@@ -212,7 +212,7 @@ export function createDarkTheme(): Theme {
               hovered: "rgba(241, 77, 66, 1)",
               disabled: "rgba(241, 77, 66, 1)",
             },
-            color: "rgba(255, 255, 255, 1)",
+            color: "rgba(255, 198, 198, 1)",
           },
           Y: {
             backgroundColor: "rgba(20, 151, 108, 1)",
@@ -223,7 +223,7 @@ export function createDarkTheme(): Theme {
               disabled: "rgba(28, 188, 135, 1)",
               hovered: "rgba(28, 188, 135, 1)",
             },
-            color: "rgba(255, 255, 255, 1)",
+            color: "rgba(215, 255, 242, 1)",
           },
           Z: {
             backgroundColor: "rgba(1, 87, 155, 1)",
@@ -234,7 +234,7 @@ export function createDarkTheme(): Theme {
               disabled: "rgba(2, 136, 209, 1)",
               hovered: "rgba(2, 136, 209, 1)",
             },
-            color: "rgba(255, 255, 255, 1)",
+            color: "rgba(210, 239, 255, 1)",
           },
         },
       },