@wandelbots/wandelbots-js-react-components 5.5.1-pr.fix-standardize-output.591.60112ee → 5.5.1

package/src/components/robots/SupportedLinearAxis.tsx

@@ -0,0 +1,110 @@
+import type { ThreeElements } from "@react-three/fiber"
+import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
+import { Suspense, useCallback, useEffect, useState } from "react"
+import { ErrorBoundary } from "react-error-boundary"
+import type * as THREE from "three"
+import { externalizeComponent } from "../../externalizeComponent"
+import ConsoleFilter from "../ConsoleFilter"
+import { DHLinearAxis } from "./DHLinearAxis"
+import { GenericRobot } from "./GenericRobot"
+import LinearAxisAnimator from "./LinearAxisAnimator"
+import { applyGhostStyle, removeGhostStyle } from "./ghostStyle"
+import { defaultGetModel } from "./robotModelLogic"
+
+export type DHLinearAxisProps = {
+  rapidlyChangingMotionState: MotionGroupState
+  dhParameters: Array<DHParameter>
+} & ThreeElements["group"]
+
+export type SupportedLinearAxisProps = {
+  rapidlyChangingMotionState: MotionGroupState
+  modelFromController: string
+  dhParameters: DHParameter[]
+  flangeRef?: React.Ref<THREE.Group>
+  instanceUrl?: string
+  getModel?: (
+    modelFromController: string,
+    instanceUrl?: string,
+  ) => Promise<string> | undefined
+  postModelRender?: () => void
+  transparentColor?: string
+} & ThreeElements["group"]
+
+export const SupportedLinearAxis = externalizeComponent(
+  ({
+    rapidlyChangingMotionState,
+    modelFromController,
+    dhParameters,
+    getModel = defaultGetModel,
+    flangeRef,
+    postModelRender,
+    transparentColor,
+    instanceUrl,
+    ...props
+  }: SupportedLinearAxisProps) => {
+    const [robotGroup, setRobotGroup] = useState<THREE.Group | null>(null)
+
+    const setRobotRef = useCallback((instance: THREE.Group | null) => {
+      setRobotGroup(instance)
+    }, [])
+
+    useEffect(() => {
+      if (!robotGroup) return
+
+      if (transparentColor) {
+        applyGhostStyle(robotGroup, transparentColor)
+      } else {
+        removeGhostStyle(robotGroup)
+      }
+    }, [robotGroup, transparentColor])
+
+    const dhLinearAxis = (
+      <DHLinearAxis
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
+        dhParameters={dhParameters}
+        {...props}
+      />
+    )
+
+    return (
+      <ErrorBoundary
+        fallback={dhLinearAxis}
+        onError={(err) => {
+          // Missing model; show the fallback for now
+          console.warn(err)
+        }}
+      >
+        <Suspense fallback={dhLinearAxis}>
+          <group ref={setRobotRef}>
+            <LinearAxisAnimator
+              rapidlyChangingMotionState={rapidlyChangingMotionState}
+              dhParameters={dhParameters}
+            >
+              <GenericRobot
+                modelURL={(() => {
+                  const result = getModel(modelFromController, instanceUrl)
+                  if (!result) {
+                    const mockBlob = new Blob([], { type: "model/gltf-binary" })
+                    const mockFile = new File(
+                      [mockBlob],
+                      `${modelFromController}.glb`,
+                      { type: "model/gltf-binary" },
+                    )
+                    return Promise.resolve(URL.createObjectURL(mockFile))
+                  }
+                  return result
+                })()}
+                postModelRender={postModelRender}
+                flangeRef={flangeRef}
+                {...props}
+              />
+            </LinearAxisAnimator>
+          </group>
+        </Suspense>
+        <ConsoleFilter />
+      </ErrorBoundary>
+    )
+  },
+)
+
+export default SupportedLinearAxis

package/src/components/robots/SupportedRobot.tsx

@@ -0,0 +1,111 @@
+import type { ThreeElements } from "@react-three/fiber"
+import type { DHParameter, MotionGroupState } from "@wandelbots/nova-js/v2"
+import { Suspense, useCallback, useEffect, useState } from "react"
+import { DHRobot } from "./DHRobot"
+
+import { ErrorBoundary } from "react-error-boundary"
+import type * as THREE from "three"
+import { externalizeComponent } from "../../externalizeComponent"
+import ConsoleFilter from "../ConsoleFilter"
+import { GenericRobot } from "./GenericRobot"
+import RobotAnimator from "./RobotAnimator"
+import { applyGhostStyle, removeGhostStyle } from "./ghostStyle"
+import { defaultGetModel } from "./robotModelLogic"
+
+export type DHRobotProps = {
+  rapidlyChangingMotionState: MotionGroupState
+  dhParameters: Array<DHParameter>
+} & ThreeElements["group"]
+
+export type SupportedRobotProps = {
+  rapidlyChangingMotionState: MotionGroupState
+  modelFromController: string
+  dhParameters: DHParameter[]
+  flangeRef?: React.Ref<THREE.Group>
+  instanceUrl?: string
+  getModel?: (
+    modelFromController: string,
+    instanceUrl?: string,
+  ) => Promise<string> | undefined
+  postModelRender?: () => void
+  transparentColor?: string
+} & ThreeElements["group"]
+
+export const SupportedRobot = externalizeComponent(
+  ({
+    rapidlyChangingMotionState,
+    modelFromController,
+    dhParameters,
+    getModel = defaultGetModel,
+    flangeRef,
+    postModelRender,
+    transparentColor,
+    instanceUrl,
+    ...props
+  }: SupportedRobotProps) => {
+    const [robotGroup, setRobotGroup] = useState<THREE.Group | null>(null)
+
+    const setRobotRef = useCallback((instance: THREE.Group | null) => {
+      setRobotGroup(instance)
+    }, [])
+
+    useEffect(() => {
+      if (!robotGroup) return
+
+      if (transparentColor) {
+        applyGhostStyle(robotGroup, transparentColor)
+      } else {
+        removeGhostStyle(robotGroup)
+      }
+    }, [robotGroup, transparentColor])
+
+    const dhrobot = (
+      <DHRobot
+        rapidlyChangingMotionState={rapidlyChangingMotionState}
+        dhParameters={dhParameters}
+        {...props}
+      />
+    )
+
+    return (
+      <ErrorBoundary
+        fallback={dhrobot}
+        onError={(err) => {
+          // Missing model; show the fallback for now
+          console.warn(err)
+        }}
+      >
+        <Suspense fallback={dhrobot}>
+          <group ref={setRobotRef}>
+            <RobotAnimator
+              rapidlyChangingMotionState={rapidlyChangingMotionState}
+              dhParameters={dhParameters}
+            >
+              <GenericRobot
+                modelURL={(() => {
+                  const result = getModel(modelFromController, instanceUrl)
+                  if (!result) {
+                    const mockBlob = new Blob([], { type: "model/gltf-binary" })
+                    const mockFile = new File(
+                      [mockBlob],
+                      `${modelFromController}.glb`,
+                      { type: "model/gltf-binary" },
+                    )
+                    return Promise.resolve(URL.createObjectURL(mockFile))
+                  }
+                  return result
+                })()}
+                postModelRender={postModelRender}
+                flangeRef={flangeRef}
+                {...props}
+              />
+            </RobotAnimator>
+          </group>
+        </Suspense>
+        <ConsoleFilter />
+      </ErrorBoundary>
+    )
+  },
+)
+
+export default SupportedRobot

package/src/components/robots/ghostStyle.ts

@@ -0,0 +1,71 @@
+import * as THREE from "three"
+
+export const applyGhostStyle = (robot: THREE.Group, color: string) => {
+  if (robot.userData.isGhost) return
+
+  robot.traverse((obj) => {
+    if (obj instanceof THREE.Mesh) {
+      if (obj.material instanceof THREE.Material) {
+        obj.material.colorWrite = false
+      }
+
+      // Create a clone of the mesh
+      const depth = obj.clone()
+      const ghost = obj.clone()
+
+      depth.material = new THREE.MeshStandardMaterial({
+        depthTest: true,
+        depthWrite: true,
+        colorWrite: false,
+        polygonOffset: true,
+        polygonOffsetFactor: -1,
+        side: THREE.DoubleSide,
+      })
+      depth.userData.isGhost = true
+
+      // Set the material for the ghost mesh
+      ghost.material = new THREE.MeshStandardMaterial({
+        color: color,
+        opacity: 0.3,
+        depthTest: true,
+        depthWrite: false,
+        transparent: true,
+        polygonOffset: true,
+        polygonOffsetFactor: -2,
+        side: THREE.DoubleSide,
+      })
+      ghost.userData.isGhost = true
+
+      if (obj.parent) {
+        obj.parent.add(depth)
+        obj.parent.add(ghost)
+      }
+    }
+  })
+
+  robot.userData.isGhost = true
+}
+
+export const removeGhostStyle = (robot: THREE.Group) => {
+  if (!robot.userData.isGhost) return
+
+  const objectsToRemove: THREE.Object3D[] = []
+
+  robot.traverse((obj) => {
+    if (obj instanceof THREE.Mesh) {
+      if (obj.userData?.isGhost) {
+        objectsToRemove.push(obj)
+      } else if (obj.material instanceof THREE.Material) {
+        obj.material.colorWrite = true
+      }
+    }
+  })
+
+  objectsToRemove.forEach((obj) => {
+    if (obj.parent) {
+      obj.parent.remove(obj)
+    }
+  })
+
+  robot.userData.isGhost = false
+}

package/src/components/robots/manufacturerHomePositions.ts

@@ -0,0 +1,76 @@
+import { Manufacturer } from "@wandelbots/nova-js/v2"
+
+/**
+ * Default home configs for different robot manufacturers.
+ * These joint configurations represent safe home configs for each manufacturer's robots.
+ * All angles are in radians.
+ */
+export const MANUFACTURER_HOME_CONFIGS: Record<Manufacturer, number[]> = {
+  [Manufacturer.Abb]: [0.0, 0.0, 0.0, 0.0, Math.PI / 2, 0.0, 0.0],
+  [Manufacturer.Fanuc]: [0.0, 0.0, 0.0, 0.0, -Math.PI / 2, 0.0, 0.0],
+  [Manufacturer.Yaskawa]: [0.0, 0.0, 0.0, 0.0, -Math.PI / 2, 0.0, 0.0],
+  [Manufacturer.Kuka]: [
+    0.0,
+    -Math.PI / 2,
+    Math.PI / 2,
+    0.0,
+    Math.PI / 2,
+    0.0,
+    0.0,
+  ],
+  [Manufacturer.Universalrobots]: [
+    0.0,
+    -Math.PI / 2,
+    -Math.PI / 2,
+    -Math.PI / 2,
+    Math.PI / 2,
+    -Math.PI / 2,
+    0.0,
+  ],
+}
+
+/**
+ * Extracts manufacturer from modelFromController string.
+ * @param modelFromController - String in format "Manufacturer_ModelName"
+ * @returns Manufacturer enum value or null if not recognized
+ */
+export function extractManufacturer(
+  modelFromController: string,
+): Manufacturer | null {
+  const [manufacturerString] = modelFromController.split("_")
+
+  // Handle the mapping from string to enum
+  switch (manufacturerString) {
+    case "ABB":
+      return Manufacturer.Abb
+    case "FANUC":
+      return Manufacturer.Fanuc
+    case "YASKAWA":
+      return Manufacturer.Yaskawa
+    case "KUKA":
+      return Manufacturer.Kuka
+    case "UniversalRobots":
+      return Manufacturer.Universalrobots
+    default:
+      return null
+  }
+}
+
+/**
+ * Gets the default home config for a robot based on its model identifier.
+ * @param modelFromController - String in format "Manufacturer_ModelName"
+ * @param defaultJointConfig - Optional custom default configuration to use if manufacturer not found
+ * @returns Array of joint positions in radians, or null if no configuration available
+ */
+export function getDefaultHomeConfig(
+  modelFromController: string,
+  defaultJointConfig?: number[],
+): number[] | null {
+  const manufacturer = extractManufacturer(modelFromController)
+
+  if (manufacturer && manufacturer in MANUFACTURER_HOME_CONFIGS) {
+    return MANUFACTURER_HOME_CONFIGS[manufacturer]
+  }
+
+  return defaultJointConfig || null
+}

package/src/components/robots/robotModelLogic.ts

@@ -0,0 +1,158 @@
+import { NovaClient } from "@wandelbots/nova-js/v2"
+import type { Object3D } from "three"
+import type { GLTF } from "three-stdlib"
+
+const modelCache = new Map<string, Promise<string>>()
+
+/**
+ * Revoke a cached model's object URL to prevent memory leaks.
+ * Call this when a component unmounts or no longer needs the model.
+ */
+export async function revokeModelUrl(
+  modelFromController: string,
+): Promise<void> {
+  const urlPromise = modelCache.get(modelFromController)
+  if (!urlPromise) return
+
+  try {
+    const url = await urlPromise
+    URL.revokeObjectURL(url)
+  } catch (e) {
+    // Ignore errors - URL may already be revoked
+  }
+  modelCache.delete(modelFromController)
+}
+
+/**
+ * Revoke all cached model object URLs and clear the cache.
+ * Useful for cleanup on app teardown.
+ */
+export async function revokeAllModelUrls(): Promise<void> {
+  const entries = Array.from(modelCache.entries())
+  await Promise.allSettled(
+    entries.map(async ([key, urlPromise]) => {
+      try {
+        const url = await urlPromise
+        URL.revokeObjectURL(url)
+      } catch (e) {
+        // Ignore errors
+      }
+    }),
+  )
+  modelCache.clear()
+}
+
+export async function defaultGetModel(
+  modelFromController: string,
+  instanceUrlProp?: string,
+): Promise<string> {
+  // Check cache first
+  if (modelCache.has(modelFromController)) {
+    // biome-ignore lint/style/noNonNullAssertion: pre-biome code
+    return modelCache.get(modelFromController)!
+  }
+
+  // Create the promise and cache it immediately to prevent duplicate calls
+  const modelPromise = (async () => {
+    const instanceUrl = instanceUrlProp || import.meta.env.WANDELAPI_BASE_URL
+    const nova = new NovaClient({ instanceUrl })
+
+    // Configure axios to handle binary responses for GLB files
+    // biome-ignore lint/suspicious/noExplicitAny: pre-biome code
+    const apiInstance = nova.api.motionGroupModels as any
+    if (apiInstance.axios?.interceptors) {
+      // biome-ignore lint/suspicious/noExplicitAny: pre-biome code
+      apiInstance.axios.interceptors.request.use((config: any) => {
+        if (config.url?.includes("/glb")) {
+          config.responseType = "blob"
+        }
+        return config
+      })
+    }
+
+    try {
+      const file =
+        await nova.api.motionGroupModels.getMotionGroupGlbModel(
+          modelFromController,
+        )
+
+      // Create object URL from the file and return it
+      const url = URL.createObjectURL(file)
+      return url
+    } catch (error) {
+      console.error("Failed to fetch model:", error)
+      throw error
+    }
+  })()
+
+  // Cache the promise
+  modelCache.set(modelFromController, modelPromise)
+  return modelPromise
+}
+
+/**
+ * Finds all the joint groups in a GLTF tree, as identified
+ * by the _Jxx name ending convention.
+ */
+export function collectJoints(rootObject: Object3D): Object3D[] {
+  function getAllObjects(root: Object3D): Object3D[] {
+    if (root.children.length === 0) {
+      return [root]
+    }
+    return [root, ...root.children.flatMap((child) => getAllObjects(child))]
+  }
+
+  return getAllObjects(rootObject).filter((o) => isJoint(o))
+}
+
+/**
+ * Checks if a specified threejs object represents the flange of a
+ * robot, based on the _FLG name ending convention.
+ */
+export function isFlange(node: Object3D) {
+  return node.name.endsWith("_FLG")
+}
+
+/**
+ * Checks if a specified threejs object represents a joint of a
+ * robot, based on the _Jxx name ending convention.
+ */
+export function isJoint(node: Object3D) {
+  return /_J[0-9]+$/.test(node.name)
+}
+
+/**
+ * Validates that the loaded GLTF file has six joints and a flange group.
+ */
+export function parseRobotModel(gltf: GLTF, filename: string): { gltf: GLTF } {
+  let flange: Object3D | undefined
+  const joints: Object3D[] = []
+
+  function parseNode(node: Object3D) {
+    if (isFlange(node)) {
+      if (flange) {
+        throw Error(
+          `Found multiple flange groups in robot model ${filename}; first ${flange.name} then ${node.name}. Only one _FLG group is allowed.`,
+        )
+      }
+
+      flange = node
+    }
+
+    if (isJoint(node)) {
+      joints.push(node)
+    }
+
+    node.children.map(parseNode)
+  }
+
+  parseNode(gltf.scene)
+
+  if (!flange) {
+    throw Error(
+      `No flange group found in robot model ${filename}. Flange must be identified with a name ending in _FLG.`,
+    )
+  }
+
+  return { gltf }
+}

package/src/components/safetyBar/ControllerTypeIndicator.tsx

@@ -0,0 +1,79 @@
+import { useTheme } from "@mui/material/styles"
+import type { PopoverOrigin } from "@mui/material/Popover"
+import { observer } from "mobx-react-lite"
+import { useId } from "react"
+import { Trans, useTranslation } from "react-i18next"
+import ControllerTypePhysicalIcon from "./icons/controller-type-physical.svg"
+import ControllerTypeVirtualIcon from "./icons/controller-type-virtual.svg"
+import { IndicatorWithExplanation } from "./IndicatorWithExplanation"
+
+interface ControllerTypeIndicatorProps {
+  isVirtual: boolean
+  motionGroupId: string
+  anchorOrigin?: PopoverOrigin
+  transformOrigin?: PopoverOrigin
+  compact: boolean
+}
+
+export const ControllerTypeIndicator = observer(
+  ({
+    isVirtual,
+    motionGroupId,
+    anchorOrigin,
+    transformOrigin,
+    compact,
+  }: ControllerTypeIndicatorProps) => {
+    const theme = useTheme()
+    const componentId = useId()
+    const { t } = useTranslation()
+
+    if (isVirtual) {
+      return (
+        <IndicatorWithExplanation
+          id={`motion-group-virtual-${componentId}`}
+          icon={ControllerTypeVirtualIcon}
+          color={theme.palette.tertiary.main}
+          name={t("SafetyBar.ControllerType.Virtual.lb")}
+          label={compact ? null : t("SafetyBar.ControllerType.Virtual.lb")}
+          explanation={
+            <Trans
+              i18nKey="SafetyBar.MotionGroup.Virtual.Explanation.lb"
+              values={{
+                motionGroupId,
+              }}
+            >
+              Motion group <code>{motionGroupId}</code> refers to a virtual
+              robot with no physical counterpart. It can be freely manipulated
+              without special safety precautions.
+            </Trans>
+          }
+          anchorOrigin={anchorOrigin}
+          transformOrigin={transformOrigin}
+        />
+      )
+    }
+
+    return (
+      <IndicatorWithExplanation
+        id={`motion-group-physical-${componentId}`}
+        icon={ControllerTypePhysicalIcon}
+        color={theme.palette.primary.main}
+        name={t("SafetyBar.ControllerType.Physical.lb")}
+        label={compact ? null : t("SafetyBar.ControllerType.Physical.lb")}
+        explanation={
+          <Trans
+            i18nKey="SafetyBar.MotionGroup.Physical.Explanation.lb"
+            values={{
+              motionGroupId,
+            }}
+            components={{ code: <code />, strong: <strong /> }}
+          />
+        }
+        anchorOrigin={anchorOrigin}
+        transformOrigin={transformOrigin}
+      />
+    )
+  },
+)
+
+export default ControllerTypeIndicator