@wandelbots/wandelbots-js-react-components 5.5.1 → 5.5.2

package/src/components/robots/SupportedLinearAxis.tsx

@@ -1,110 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,79 +0,0 @@
-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