@wandelbots/wandelbots-js-react-components 2.32.0-pr.feature-robot-precondition-list.372.8ed54a6 → 2.32.0-pr.feature-robot-precondition-list.372.5d8a86e

package/src/components/RobotCard.tsx

@@ -1,7 +1,14 @@
-import { Box, Button, Card, Divider, Typography, useTheme } from "@mui/material"
+import {
+  Box,
+  Button,
+  Card,
+  Divider,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material"
 import { Bounds, useBounds } from "@react-three/drei"
 import { Canvas } from "@react-three/fiber"
-import type { DHParameter } from "@wandelbots/nova-api/v1"
 import type {
   ConnectedMotionGroup,
   RobotControllerStateOperationModeEnum,
@@ -16,27 +23,30 @@ import { PresetEnvironment } from "./3d-viewport/PresetEnvironment"
 import { CycleTimer } from "./CycleTimer"
 import type { ProgramState } from "./ProgramControl"
 import { ProgramStateIndicator } from "./ProgramStateIndicator"
-import { SupportedRobot } from "./robots/SupportedRobot"
+import { Robot } from "./robots/Robot"
 
 // Component to refresh bounds when model renders
 function BoundsRefresher({
   modelRenderTrigger,
   children,
+  isPortrait = false,
 }: {
-  modelRenderTrigger?: number
+  modelRenderTrigger: number
   children: React.ReactNode
+  isPortrait?: boolean
 }) {
-  const api = useBounds()
+  const bounds = useBounds()
 
   useEffect(() => {
-    if (modelRenderTrigger && modelRenderTrigger > 0) {
-      // Small delay to ensure the model is fully rendered
-      const timer = setTimeout(() => {
-        api.refresh().fit()
-      }, 100)
-      return () => clearTimeout(timer)
+    if (modelRenderTrigger > 0) {
+      // For portrait mode, use more aggressive fitting
+      if (isPortrait) {
+        bounds.refresh().clip().fit()
+      } else {
+        bounds.refresh().clip().fit()
+      }
     }
-  }, [modelRenderTrigger, api])
+  }, [modelRenderTrigger, bounds, isPortrait])
 
   return <>{children}</>
 }
@@ -58,11 +68,9 @@ export interface RobotCardProps {
   onDriveToHomeRelease?: () => void
   /** Connected motion group for the robot */
   connectedMotionGroup: ConnectedMotionGroup
-  /** Custom robot component to render (optional, defaults to SupportedRobot) */
+  /** Custom robot component to render (optional, defaults to Robot) */
   robotComponent?: React.ComponentType<{
-    rapidlyChangingMotionState: ConnectedMotionGroup["rapidlyChangingMotionState"]
-    modelFromController: string
-    dhParameters: DHParameter[]
+    connectedMotionGroup: ConnectedMotionGroup
     flangeRef?: React.Ref<Group>
     postModelRender?: () => void
     transparentColor?: string
@@ -95,7 +103,12 @@ export interface RobotCardProps {
  * - Automatic layout switching based on aspect ratio:
  *   - Portrait mode: Vertical layout with robot in center
  *   - Landscape mode: Horizontal layout with robot on left, content on right (left-aligned)
- * - Minimum size constraints (300px width, 400px height in portrait, 250px height in landscape) for usability
+ * - Responsive 3D robot rendering:
+ *   - Scales dynamically with container size
+ *   - Hides at very small sizes to preserve usability
+ *   - Adaptive margin based on available space
+ * - Smart spacing and padding that reduces at smaller sizes
+ * - Minimum size constraints for usability while maximizing content density
  * - Robot name displayed in Typography h6 at top-left
  * - Program state indicator below the name
  * - Auto-fitting 3D robot model that scales with container size
@@ -116,7 +129,7 @@ export const RobotCard = externalizeComponent(
       onDriveToHomePress,
       onDriveToHomeRelease,
       connectedMotionGroup,
-      robotComponent: RobotComponent = SupportedRobot,
+      robotComponent: RobotComponent = Robot,
       cycleTimerComponent: CycleTimerComponent = CycleTimer,
       className,
     }: RobotCardProps) => {
@@ -127,22 +140,31 @@ export const RobotCard = externalizeComponent(
       const robotRef = useRef<Group>(null)
       const cardRef = useRef<HTMLDivElement>(null)
       const [isLandscape, setIsLandscape] = useState(false)
+      const [cardSize, setCardSize] = useState<{
+        width: number
+        height: number
+      }>({ width: 400, height: 600 })
       const [modelRenderTrigger, setModelRenderTrigger] = useState(0)
 
-      // Hook to detect aspect ratio changes
+      // Responsive breakpoints
+      const isExtraSmall = useMediaQuery(theme.breakpoints.down("sm"))
+      const isSmall = useMediaQuery(theme.breakpoints.down("md"))
+
+      // Hook to detect aspect ratio and size changes
       useEffect(() => {
-        const checkAspectRatio = () => {
+        const checkDimensions = () => {
           if (cardRef.current) {
             const { offsetWidth, offsetHeight } = cardRef.current
             setIsLandscape(offsetWidth > offsetHeight)
+            setCardSize({ width: offsetWidth, height: offsetHeight })
           }
         }
 
         // Initial check
-        checkAspectRatio()
+        checkDimensions()
 
         // Set up ResizeObserver to watch for size changes
-        const resizeObserver = new ResizeObserver(checkAspectRatio)
+        const resizeObserver = new ResizeObserver(checkDimensions)
         if (cardRef.current) {
           resizeObserver.observe(cardRef.current)
         }
@@ -193,10 +215,36 @@ export const RobotCard = externalizeComponent(
         [],
       )
 
+      // Determine if robot should be hidden at small sizes to save space
+      // Less aggressive hiding for portrait mode since robot is in center
+      const shouldHideRobot = isLandscape
+        ? cardSize.width < 350 || cardSize.height < 250 // Aggressive for landscape
+        : cardSize.width < 250 || cardSize.height < 180 // Less aggressive for portrait
+
+      // Calculate responsive robot scale based on card size and orientation
+      const getRobotScale = () => {
+        if (shouldHideRobot) return 0
+
+        if (isLandscape) {
+          // More aggressive scaling for landscape since robot is on side
+          if (cardSize.width < 450) return 0.8
+          if (cardSize.width < 550) return 0.9
+          return 1
+        } else {
+          // Less aggressive scaling for portrait since robot is central
+          if (cardSize.width < 300) return 0.8
+          if (cardSize.width < 400) return 0.9
+          return 1
+        }
+      }
+
+      const robotScale = getRobotScale()
+
       return (
         <Card
           ref={cardRef}
           className={className}
+          elevation={5}
           sx={{
             width: "100%",
             height: "100%",
@@ -204,9 +252,10 @@ export const RobotCard = externalizeComponent(
             flexDirection: isLandscape ? "row" : "column",
             position: "relative",
             overflow: "hidden",
-            minWidth: 300,
-            minHeight: isLandscape ? 300 : 400,
-            background: "var(--background-paper-elevation-8, #292B3F)",
+            minWidth: { xs: 180, sm: 220, md: 250 },
+            minHeight: isLandscape
+              ? { xs: 160, sm: 200, md: 250 }
+              : { xs: 200, sm: 280, md: 350 },
             border:
               "1px solid var(--secondary-_states-outlinedBorder, #FFFFFF1F)",
             borderRadius: "18px",
@@ -224,63 +273,65 @@ export const RobotCard = externalizeComponent(
                   minHeight: "100%",
                   maxHeight: "100%",
                   borderRadius: 1,
-                  m: 2,
-                  mr: 1,
+                  m: { xs: 1.5, sm: 2, md: 3 },
+                  mr: { xs: 0.75, sm: 1, md: 1.5 },
                   overflow: "hidden", // Prevent content from affecting container size
+                  display: shouldHideRobot ? "none" : "block",
                 }}
               >
-                <Canvas
-                  camera={{
-                    position: [2, 2, 2],
-                    fov: 45,
-                  }}
-                  shadows
-                  style={{
-                    borderRadius: theme.shape.borderRadius,
-                    width: "100%",
-                    height: "100%",
-                    background: "transparent",
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                  }}
-                  dpr={[1, 2]}
-                  gl={{ alpha: true, antialias: true }}
-                >
-                  <PresetEnvironment />
-                  <Bounds fit clip observe margin={1}>
-                    <BoundsRefresher modelRenderTrigger={modelRenderTrigger}>
-                      <group ref={robotRef}>
-                        <RobotComponent
-                          rapidlyChangingMotionState={
-                            connectedMotionGroup.rapidlyChangingMotionState
-                          }
-                          modelFromController={
-                            connectedMotionGroup.modelFromController || ""
-                          }
-                          dhParameters={connectedMotionGroup.dhParameters || []}
-                          postModelRender={handleModelRender}
-                        />
-                      </group>
-                    </BoundsRefresher>
-                  </Bounds>
-                </Canvas>
+                {!shouldHideRobot && (
+                  <Canvas
+                    camera={{
+                      position: [4, 4, 4], // Move camera further back for orthographic view
+                      fov: 15, // Low FOV for near-orthographic projection
+                    }}
+                    shadows
+                    frameloop="demand"
+                    style={{
+                      borderRadius: theme.shape.borderRadius,
+                      width: "100%",
+                      height: "100%",
+                      background: "transparent",
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                    }}
+                    dpr={[1, 2]}
+                    gl={{ alpha: true, antialias: true }}
+                  >
+                    <PresetEnvironment />
+                    <Bounds fit clip observe margin={1}>
+                      <BoundsRefresher
+                        modelRenderTrigger={modelRenderTrigger}
+                        isPortrait={false}
+                      >
+                        <group ref={robotRef} scale={robotScale}>
+                          <RobotComponent
+                            connectedMotionGroup={connectedMotionGroup}
+                            postModelRender={handleModelRender}
+                          />
+                        </group>
+                      </BoundsRefresher>
+                    </Bounds>
+                  </Canvas>
+                )}
               </Box>
 
               {/* Content container on right */}
               <Box
                 sx={{
-                  flex: "1",
+                  flex: shouldHideRobot ? "1" : "1",
                   display: "flex",
                   flexDirection: "column",
                   justifyContent: "flex-start",
+                  width: shouldHideRobot ? "100%" : "50%",
                 }}
               >
                 {/* Header section with robot name and program state */}
                 <Box
                   sx={{
-                    p: 3,
-                    pb: 2,
+                    p: { xs: 1.5, sm: 2, md: 3 },
+                    pb: { xs: 1, sm: 1.5, md: 2 },
                     textAlign: "left",
                   }}
                 >
@@ -297,7 +348,7 @@ export const RobotCard = externalizeComponent(
                 {/* Bottom section with runtime, cycle time, and button */}
                 <Box
                   sx={{
-                    p: 3,
+                    p: { xs: 1.5, sm: 2, md: 3 },
                     pt: 0,
                     flex: "1",
                     display: "flex",
@@ -330,8 +381,8 @@ export const RobotCard = externalizeComponent(
                     {/* Divider */}
                     <Divider
                       sx={{
-                        mt: 2,
-                        mb: 2,
+                        mt: 1,
+                        mb: 0,
                         borderColor: theme.palette.divider,
                         opacity: 0.5,
                       }}
@@ -344,8 +395,8 @@ export const RobotCard = externalizeComponent(
                       sx={{
                         display: "flex",
                         justifyContent: "flex-start",
-                        mt: 2,
-                        mb: 2,
+                        mt: { xs: 1, sm: 1.5, md: 2 },
+                        mb: { xs: 0.5, sm: 0.75, md: 1 },
                       }}
                     >
                       <Button
@@ -353,7 +404,7 @@ export const RobotCard = externalizeComponent(
                         variant="contained"
                         color="secondary"
                         size="small"
-                        disabled={true}
+                        disabled={!driveToHomeEnabled}
                         onMouseDown={handleDriveToHomeMouseDown}
                         onMouseUp={handleDriveToHomeMouseUp}
                         onMouseLeave={handleDriveToHomeMouseLeave}
@@ -375,127 +426,137 @@ export const RobotCard = externalizeComponent(
           ) : (
             <>
               {/* Portrait Layout: Header, Robot, Footer */}
-
-              {/* Header section with robot name and program state */}
-              <Box sx={{ p: 3, pb: 1 }}>
-                <Typography variant="h6" component="h2" sx={{ mb: 1 }}>
-                  {robotName}
-                </Typography>
-                <ProgramStateIndicator
-                  programState={programState}
-                  safetyState={safetyState}
-                  operationMode={operationMode}
-                />
-              </Box>
-
-              {/* 3D Robot viewport in center */}
               <Box
                 sx={{
-                  flex: 1,
-                  position: "relative",
-                  minHeight: 200,
-                  borderRadius: 1,
-                  mx: 3,
-                  mb: 1,
-                  overflow: "hidden", // Prevent content from affecting container size
+                  p: 3,
+                  height: "100%",
+                  display: "flex",
+                  flexDirection: "column",
                 }}
               >
-                <Canvas
-                  camera={{
-                    position: [2, 2, 2],
-                    fov: 45,
-                  }}
-                  shadows
-                  style={{
-                    borderRadius: theme.shape.borderRadius,
-                    width: "100%",
-                    height: "100%",
-                    background: "transparent",
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                  }}
-                  dpr={[1, 2]}
-                  gl={{ alpha: true, antialias: true }}
-                >
-                  <PresetEnvironment />
-                  <Bounds fit clip observe margin={1.2}>
-                    <BoundsRefresher modelRenderTrigger={modelRenderTrigger}>
-                      <group ref={robotRef}>
-                        <RobotComponent
-                          rapidlyChangingMotionState={
-                            connectedMotionGroup.rapidlyChangingMotionState
-                          }
-                          modelFromController={
-                            connectedMotionGroup.modelFromController || ""
-                          }
-                          dhParameters={connectedMotionGroup.dhParameters || []}
-                          postModelRender={handleModelRender}
-                        />
-                      </group>
-                    </BoundsRefresher>
-                  </Bounds>
-                </Canvas>
-              </Box>
+                {/* Header section with robot name and program state */}
+                <Box>
+                  <Typography variant="h6" component="h2" sx={{ mb: 1 }}>
+                    {robotName}
+                  </Typography>
+                  <ProgramStateIndicator
+                    programState={programState}
+                    safetyState={safetyState}
+                    operationMode={operationMode}
+                  />
+                </Box>
 
-              {/* Bottom section with runtime, cycle time, and button */}
-              <Box sx={{ p: 3, pt: 0 }}>
-                {/* Runtime display */}
-                <Typography
-                  variant="body1"
+                {/* 3D Robot viewport in center */}
+                <Box
                   sx={{
-                    mb: 0,
-                    color: "var(--text-secondary, #FFFFFFB2)",
+                    flex: shouldHideRobot ? 0 : 1,
+                    position: "relative",
+                    minHeight: shouldHideRobot
+                      ? 0
+                      : { xs: 120, sm: 150, md: 200 },
+                    height: shouldHideRobot ? 0 : "auto",
+                    borderRadius: 1,
+                    overflow: "hidden",
+                    display: shouldHideRobot ? "none" : "block",
                   }}
                 >
-                  {t("RobotCard.Runtime.lb")}
-                </Typography>
+                  {!shouldHideRobot && (
+                    <Canvas
+                      camera={{
+                        position: [3, 3, 3], // Closer camera position for portrait to make robot larger
+                        fov: 20, // Slightly higher FOV for portrait to fill better
+                      }}
+                      shadows
+                      frameloop="demand"
+                      style={{
+                        borderRadius: theme.shape.borderRadius,
+                        width: "100%",
+                        height: "100%",
+                        background: "transparent",
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                      }}
+                      dpr={[1, 2]}
+                      gl={{ alpha: true, antialias: true }}
+                    >
+                      <PresetEnvironment />
+                      <Bounds fit observe margin={1}>
+                        <BoundsRefresher
+                          modelRenderTrigger={modelRenderTrigger}
+                          isPortrait={true}
+                        >
+                          <group ref={robotRef} scale={robotScale}>
+                            <RobotComponent
+                              connectedMotionGroup={connectedMotionGroup}
+                              postModelRender={handleModelRender}
+                            />
+                          </group>
+                        </BoundsRefresher>
+                      </Bounds>
+                    </Canvas>
+                  )}
+                </Box>
 
-                {/* Compact cycle time component directly below runtime */}
-                <CycleTimerComponent
-                  variant="small"
-                  compact
-                  onCycleComplete={handleCycleComplete}
-                />
+                {/* Bottom section with runtime, cycle time, and button */}
+                <Box>
+                  {/* Runtime display */}
+                  <Typography
+                    variant="body1"
+                    sx={{
+                      mb: 0,
+                      color: "var(--text-secondary, #FFFFFFB2)",
+                    }}
+                  >
+                    {t("RobotCard.Runtime.lb")}
+                  </Typography>
 
-                {/* Divider */}
-                <Divider
-                  sx={{
-                    mt: 2,
-                    mb: 2,
-                    borderColor: theme.palette.divider,
-                    opacity: 0.5,
-                  }}
-                />
+                  {/* Compact cycle time component directly below runtime */}
+                  <CycleTimerComponent
+                    variant="small"
+                    compact
+                    onCycleComplete={handleCycleComplete}
+                  />
 
-                {/* Drive to Home button with some space */}
-                <Box
-                  sx={{
-                    display: "flex",
-                    justifyContent: "flex-start",
-                    mt: 5,
-                    mb: 2,
-                  }}
-                >
-                  <Button
-                    ref={driveButtonRef}
-                    variant="contained"
-                    color="secondary"
-                    size="small"
-                    disabled={true}
-                    onMouseDown={handleDriveToHomeMouseDown}
-                    onMouseUp={handleDriveToHomeMouseUp}
-                    onMouseLeave={handleDriveToHomeMouseLeave}
-                    onTouchStart={handleDriveToHomeMouseDown}
-                    onTouchEnd={handleDriveToHomeMouseUp}
+                  {/* Divider */}
+                  <Divider
                     sx={{
-                      textTransform: "none",
-                      px: 1.5,
-                      py: 0.5,
+                      mt: 1,
+                      mb: 0,
+                      borderColor: theme.palette.divider,
+                      opacity: 0.5,
+                    }}
+                  />
+
+                  {/* Drive to Home button with some space */}
+                  <Box
+                    sx={{
+                      display: "flex",
+                      justifyContent: "flex-start",
+                      mt: { xs: 1, sm: 2, md: 5 },
+                      mb: { xs: 0.5, sm: 0.75, md: 1 },
                     }}
                   >
-                    {t("RobotCard.DriveToHome.bt")}
-                  </Button>
+                    <Button
+                      ref={driveButtonRef}
+                      variant="contained"
+                      color="secondary"
+                      size="small"
+                      disabled={!driveToHomeEnabled}
+                      onMouseDown={handleDriveToHomeMouseDown}
+                      onMouseUp={handleDriveToHomeMouseUp}
+                      onMouseLeave={handleDriveToHomeMouseLeave}
+                      onTouchStart={handleDriveToHomeMouseDown}
+                      onTouchEnd={handleDriveToHomeMouseUp}
+                      sx={{
+                        textTransform: "none",
+                        px: 1.5,
+                        py: 0.5,
+                      }}
+                    >
+                      {t("RobotCard.DriveToHome.bt")}
+                    </Button>
+                  </Box>
                 </Box>
               </Box>
             </>

package/src/components/robots/Robot.tsx

@@ -1,15 +1,16 @@
-import { type ThreeElements } from "@react-three/fiber"
+import type { ThreeElements } from "@react-three/fiber"
 
 import type { ConnectedMotionGroup } from "@wandelbots/nova-js/v1"
 import type { Group } from "three"
-import { SupportedRobot } from "./SupportedRobot"
 import { defaultGetModel } from "./robotModelLogic"
+import { SupportedRobot } from "./SupportedRobot"
 
 export type RobotProps = {
   connectedMotionGroup: ConnectedMotionGroup
   getModel?: (modelFromController: string) => string
   flangeRef?: React.Ref<Group>
   transparentColor?: string
+  postModelRender?: () => void
 } & ThreeElements["group"]
 
 /**
@@ -28,6 +29,7 @@ export function Robot({
   getModel = defaultGetModel,
   flangeRef,
   transparentColor,
+  postModelRender,
   ...props
 }: RobotProps) {
   if (!connectedMotionGroup.dhParameters) {
@@ -44,6 +46,7 @@ export function Robot({
       getModel={getModel}
       flangeRef={flangeRef}
       transparentColor={transparentColor}
+      postModelRender={postModelRender}
       {...props}
     />
   )