@wandelbots/wandelbots-js-react-components 2.39.0 → 2.40.0-pr.feat-tabbar-active-tab.384.2b2d61d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "2.39.0",
+  "version": "2.40.0-pr.feat-tabbar-active-tab.384.2b2d61d",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

package/src/components/3d-viewport/collider/ColliderCollection.tsx

@@ -0,0 +1,34 @@
+import type { ThreeElements } from "@react-three/fiber"
+import type { Collider } from "@wandelbots/nova-api/v1"
+import ColliderElement from "./ColliderElement"
+
+export type MeshChildrenProvider = (
+  key: string,
+  collider: Collider,
+) => React.ReactNode
+
+type ColliderCollectionProps = {
+  name?: string
+  colliders: Record<string, Collider>
+  meshChildrenProvider: MeshChildrenProvider
+} & ThreeElements["group"]
+
+export default function ColliderCollection({
+  name,
+  colliders,
+  meshChildrenProvider,
+  ...props
+}: ColliderCollectionProps) {
+  return (
+    <group name={name} {...props}>
+      {Object.entries(colliders).map(([colliderKey, collider]) => (
+        <ColliderElement
+          key={colliderKey}
+          name={colliderKey}
+          collider={collider}
+          children={meshChildrenProvider(colliderKey, collider)}
+        />
+      ))}
+    </group>
+  )
+}

package/src/components/3d-viewport/collider/ColliderElement.tsx

@@ -0,0 +1,36 @@
+import type { Collider } from "@wandelbots/nova-api/v1"
+import type React from "react"
+import * as THREE from "three"
+import { colliderShapeToBufferGeometry } from "./colliderShapeToBufferGeometry"
+
+type ColliderElementProps = {
+  name?: string
+  collider: Collider
+  children?: React.ReactNode
+}
+
+export default function ColliderElement({
+  name,
+  collider,
+  children,
+}: ColliderElementProps) {
+  const position = collider.pose?.position ?? [0, 0, 0]
+  const rotation = collider.pose?.orientation ?? [0, 0, 0]
+  if (collider.margin) {
+    console.warn(`${name} margin is not supported`)
+  }
+  return (
+    <mesh
+      name={name}
+      position={new THREE.Vector3(
+        position[0],
+        position[1],
+        position[2],
+      ).divideScalar(1000)}
+      rotation={new THREE.Euler(rotation[0], rotation[1], rotation[2], "XYZ")}
+      geometry={colliderShapeToBufferGeometry(collider.shape)}
+    >
+      {children}
+    </mesh>
+  )
+}

package/src/components/3d-viewport/collider/CollisionSceneRenderer.tsx

@@ -0,0 +1,26 @@
+import type { CollisionScene } from "@wandelbots/nova-api/v1"
+import ColliderCollection, {
+  type MeshChildrenProvider,
+} from "./ColliderCollection"
+
+type CollisionSceneRendererProps = {
+  scene: CollisionScene
+  meshChildrenProvider: MeshChildrenProvider
+}
+
+export default function CollisionSceneRenderer({
+  scene,
+  meshChildrenProvider,
+}: CollisionSceneRendererProps) {
+  const colliders = scene.colliders
+  return (
+    <group>
+      {colliders && (
+        <ColliderCollection
+          meshChildrenProvider={meshChildrenProvider}
+          colliders={colliders}
+        />
+      )}
+    </group>
+  )
+}

package/src/components/3d-viewport/collider/colliderShapeToBufferGeometry.ts

@@ -0,0 +1,48 @@
+import type { ColliderShape } from "@wandelbots/nova-api/v1"
+import * as THREE from "three"
+import { ConvexGeometry } from "three-stdlib"
+
+export function colliderShapeToBufferGeometry(
+  shape: ColliderShape,
+): THREE.BufferGeometry {
+  const shapeType = shape.shape_type
+  switch (shapeType) {
+    case "convex_hull":
+      return new ConvexGeometry(
+        shape.vertices.map(
+          (vertex) =>
+            new THREE.Vector3(
+              vertex[0] / 1000,
+              vertex[1] / 1000,
+              vertex[2] / 1000,
+            ),
+        ),
+      )
+    case "box":
+      return new THREE.BoxGeometry(
+        shape.size_x / 1000,
+        shape.size_y / 1000,
+        shape.size_z / 1000,
+      )
+    case "sphere":
+      return new THREE.SphereGeometry(shape.radius / 1000)
+    case "capsule":
+      return new THREE.CapsuleGeometry(
+        shape.radius / 1000,
+        shape.cylinder_height / 1000,
+      )
+    case "cylinder":
+      return new THREE.CylinderGeometry(
+        shape.radius / 1000,
+        shape.radius / 1000,
+        shape.height / 1000,
+      )
+    case "rectangle": {
+      return new THREE.BoxGeometry(shape.size_x / 1000, shape.size_y / 1000, 0)
+    }
+    default: {
+      console.warn(`${shape.shape_type} is not supported`)
+      return new THREE.BufferGeometry()
+    }
+  }
+}

package/src/components/TabBar.tsx

@@ -1,7 +1,7 @@
 import type { SxProps } from "@mui/material"
 import { Box, Tab, Tabs } from "@mui/material"
 import { observer } from "mobx-react-lite"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { externalizeComponent } from "../externalizeComponent"
 
 export interface TabItem {
@@ -18,6 +18,8 @@ export interface TabItem {
 export interface TabBarProps {
   /** Array of tab items to display */
   items: TabItem[]
+  /** Controlled active tab index */
+  activeTab?: number
   /** Default active tab index */
   defaultActiveTab?: number
   /** Callback when tab changes */
@@ -57,14 +59,39 @@ function TabPanel(props: TabPanelProps) {
  */
 export const TabBar = externalizeComponent(
   observer((props: TabBarProps) => {
-    const { items, defaultActiveTab = 0, onTabChange, sx, ref } = props
-    const [activeTab, setActiveTab] = useState(defaultActiveTab)
+    const {
+      items,
+      activeTab,
+      defaultActiveTab = 0,
+      onTabChange,
+      sx,
+      ref,
+    } = props
+    const isControlled = activeTab !== undefined
+    const [uncontrolledActiveTab, setUncontrolledActiveTab] =
+      useState(defaultActiveTab)
+
+    // Keep uncontrolled state in range when items change
+    useEffect(() => {
+      if (isControlled) return
+      if (items.length === 0) return
+      if (
+        uncontrolledActiveTab < 0 ||
+        uncontrolledActiveTab > items.length - 1
+      ) {
+        setUncontrolledActiveTab(0)
+      }
+    }, [items.length, isControlled, uncontrolledActiveTab])
+
+    const currentValue = isControlled ? activeTab! : uncontrolledActiveTab
 
     const handleTabChange = (
       _event: React.SyntheticEvent,
       newValue: number,
     ) => {
-      setActiveTab(newValue)
+      if (!isControlled) {
+        setUncontrolledActiveTab(newValue)
+      }
       onTabChange?.(newValue)
     }
 
@@ -76,7 +103,7 @@ export const TabBar = externalizeComponent(
         {/* Tabs */}
         <Box sx={{ px: 0, py: 0 }}>
           <Tabs
-            value={activeTab}
+            value={currentValue}
             onChange={handleTabChange}
             sx={{
               minHeight: "32px",
@@ -104,11 +131,11 @@ export const TabBar = externalizeComponent(
                   backgroundColor: (theme) =>
                     theme.palette.backgroundPaperElevation?.[11] || "#32344B",
                   color: "text.primary",
-                  opacity: activeTab === index ? 1 : 0.38,
+                  opacity: currentValue === index ? 1 : 0.38,
                   fontSize: "13px",
                   transition: "all 0.2s ease-in-out",
                   "&:hover": {
-                    opacity: activeTab === index ? 1 : 0.6,
+                    opacity: currentValue === index ? 1 : 0.6,
                   },
                   "&.Mui-selected": {
                     opacity: 1,
@@ -134,7 +161,7 @@ export const TabBar = externalizeComponent(
         {/* Tab Content */}
         <Box sx={{ flex: 1, overflow: "auto" }}>
           {items.map((item, index) => (
-            <TabPanel key={item.id} value={activeTab} index={index}>
+            <TabPanel key={item.id} value={currentValue} index={index}>
               {item.content}
             </TabPanel>
           ))}

package/src/index.ts

@@ -1,3 +1,4 @@
+export { default as CollisionSceneRenderer } from "./components/3d-viewport/collider/CollisionSceneRenderer"
 export * from "./components/3d-viewport/PresetEnvironment"
 export * from "./components/3d-viewport/SafetyZonesRenderer"
 export * from "./components/3d-viewport/TrajectoryRenderer"
@@ -21,9 +22,9 @@ export * from "./components/RobotCard"
 export * from "./components/RobotListItem"
 export * from "./components/robots/AxisConfig"
 export {
+  MANUFACTURER_HOME_CONFIGS,
   extractManufacturer,
   getDefaultHomeConfig,
-  MANUFACTURER_HOME_CONFIGS,
 } from "./components/robots/manufacturerHomePositions"
 export * from "./components/robots/Robot"
 export { defaultGetModel } from "./components/robots/robotModelLogic"