@wandelbots/wandelbots-js-react-components 1.11.1 → 1.11.3

package/src/components/modal/NoMotionGroupModal.tsx

@@ -8,6 +8,7 @@ import {
   Typography,
 } from "@mui/material"
 import { observer } from "mobx-react-lite"
+import { externalizeComponent } from "../../externalizeComponent"
 
 function getBaseUrl(): string {
   const currentUrl = window.location.href
@@ -17,70 +18,77 @@ function getBaseUrl(): string {
   )
 }
 
-export const NoMotionGroupModal = observer((baseUrl: string = getBaseUrl()) => {
-  return (
-    <Dialog
-      aria-labelledby="no-motion-group-modal-title"
-      open={true}
-      fullWidth
-      sx={{
-        "& .MuiModal-backdrop": {
-          backdropFilter: "blur(10px)",
-        },
-        "& .MuiDialog-paper": {
-          "::before": {
-            content: '""',
-            height: "8px",
-            width: "100%",
-            background: "linear-gradient(90deg, #FF0E65 0%, #47D3FF 100%)",
-          },
-          background: "#101629",
-        },
-      }}
-    >
-      <DialogTitle id="no-motion-group-modal-title">
-        No motion group found
-      </DialogTitle>
-
-      <DialogContent
+export const NoMotionGroupModal = externalizeComponent(
+  observer((baseUrl: string = getBaseUrl()) => {
+    return (
+      <Dialog
+        aria-labelledby="no-motion-group-modal-title"
+        open={true}
+        fullWidth
         sx={{
-          marginTop: "3rem",
-          marginBottom: "1.5rem",
-          textAlign: "center",
+          "& .MuiModal-backdrop": {
+            backdropFilter: "blur(10px)",
+          },
+          "& .MuiDialog-paper": {
+            "::before": {
+              content: '""',
+              height: "8px",
+              width: "100%",
+              background: "linear-gradient(90deg, #FF0E65 0%, #47D3FF 100%)",
+            },
+            background: "#101629",
+          },
         }}
       >
-        <Typography color="#fff">Found no devices to connect to.</Typography>
-        <Typography color="#fff">
-          Please ensure a motion group has been created.
-        </Typography>
-      </DialogContent>
+        <DialogTitle id="no-motion-group-modal-title">
+          No motion group found
+        </DialogTitle>
 
-      <DialogActions>
-        <Stack width="100%" maxWidth="300px" margin="auto" marginBottom="2rem">
-          <Button
-            href={`${baseUrl}/settings`}
-            variant="contained"
-            sx={{
-              borderRadius: "8px",
-              width: "100%",
-            }}
-          >
-            Go to settings app
-          </Button>
-          <Button
-            href={`${baseUrl}`}
-            variant="text"
-            sx={{
-              marginTop: "1rem",
-              color: "#fff",
-              textDecoration: "underline",
-              fontSize: "0.75rem",
-            }}
+        <DialogContent
+          sx={{
+            marginTop: "3rem",
+            marginBottom: "1.5rem",
+            textAlign: "center",
+          }}
+        >
+          <Typography color="#fff">Found no devices to connect to.</Typography>
+          <Typography color="#fff">
+            Please ensure a motion group has been created.
+          </Typography>
+        </DialogContent>
+
+        <DialogActions>
+          <Stack
+            width="100%"
+            maxWidth="300px"
+            margin="auto"
+            marginBottom="2rem"
           >
-            Back to Homescreen
-          </Button>
-        </Stack>
-      </DialogActions>
-    </Dialog>
-  )
-})
+            <Button
+              href={`${baseUrl}/settings`}
+              variant="contained"
+              sx={{
+                borderRadius: "8px",
+                width: "100%",
+              }}
+            >
+              Go to settings app
+            </Button>
+            <Button
+              href={`${baseUrl}`}
+              variant="text"
+              sx={{
+                marginTop: "1rem",
+                color: "#fff",
+                textDecoration: "underline",
+                fontSize: "0.75rem",
+              }}
+            >
+              Back to Homescreen
+            </Button>
+          </Stack>
+        </DialogActions>
+      </Dialog>
+    )
+  }),
+)

package/src/components/robots/SupportedRobot.tsx

@@ -31,6 +31,7 @@ import { DHRobot } from "./DHRobot"
 import * as THREE from "three"
 import { ErrorBoundary } from "react-error-boundary"
 import ConsoleFilter from "../ConsoleFilter"
+import { externalizeComponent } from "../../externalizeComponent"
 
 export type DHRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
@@ -54,201 +55,193 @@ export function defaultGetModel(modelFromController: string): string {
   return `https://cdn.jsdelivr.net/gh/wandelbotsgmbh/wandelbots-js-react-components/public/models/${modelFromController}.glb`
 }
 
-export function SupportedRobot({
-  rapidlyChangingMotionState,
-  modelFromController,
-  dhParameters,
-  getModel = defaultGetModel,
-  isGhost = false,
-  ...props
-}: SupportedRobotProps) {
-  let Robot
+export const SupportedRobot = externalizeComponent(
+  ({
+    rapidlyChangingMotionState,
+    modelFromController,
+    dhParameters,
+    getModel = defaultGetModel,
+    isGhost = false,
+    ...props
+  }: SupportedRobotProps) => {
+    let Robot
 
-  const robotRef = useRef<THREE.Group>(new THREE.Group())
+    const robotRef = useRef<THREE.Group>(new THREE.Group())
 
-  const setRobotRef = useCallback(
-    (instance: THREE.Group | null) => {
-      if (instance !== null) {
-        robotRef.current = instance
-        console.log("robotRef.current", robotRef.current)
-        if (
-          isGhost &&
-          robotRef.current &&
-          robotRef.current.children.length > 0
-        ) {
-          addGhosts()
+    const setRobotRef = useCallback(
+      (instance: THREE.Group | null) => {
+        if (instance !== null) {
+          robotRef.current = instance
+          console.log("robotRef.current", robotRef.current)
+          if (
+            isGhost &&
+            robotRef.current &&
+            robotRef.current.children.length > 0
+          ) {
+            addGhosts()
+          }
         }
-      }
-    },
-    [isGhost],
-  )
+      },
+      [isGhost],
+    )
 
-  const addGhosts = () => {
-    if (robotRef.current && !robotRef.current.userData.ghostsCreated) {
-      robotRef.current.traverse((obj) => {
-        if (obj instanceof THREE.Mesh && !obj.userData.isGhost) {
-          if (obj.material instanceof THREE.Material) {
-            obj.material.colorWrite = false
-          }
+    const addGhosts = () => {
+      if (robotRef.current && !robotRef.current.userData.ghostsCreated) {
+        robotRef.current.traverse((obj) => {
+          if (obj instanceof THREE.Mesh && !obj.userData.isGhost) {
+            if (obj.material instanceof THREE.Material) {
+              obj.material.colorWrite = false
+            }
 
-          // Create a clone of the mesh
-          const depth = obj.clone()
-          const ghost = obj.clone()
+            // 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,
-          })
-          depth.userData.isGhost = true
+            depth.material = new THREE.MeshStandardMaterial({
+              depthTest: true,
+              depthWrite: true,
+              colorWrite: false,
+              polygonOffset: true,
+              polygonOffsetFactor: 1,
+            })
+            depth.userData.isGhost = true
 
-          // Set the material for the ghost mesh
-          ghost.material = new THREE.MeshStandardMaterial({
-            color: "#D91433",
-            opacity: 0.3,
-            depthTest: true,
-            depthWrite: false,
-            transparent: true,
-            polygonOffset: true,
-            polygonOffsetFactor: -1,
-          })
-          ghost.userData.isGhost = true
+            // Set the material for the ghost mesh
+            ghost.material = new THREE.MeshStandardMaterial({
+              color: "#D91433",
+              opacity: 0.3,
+              depthTest: true,
+              depthWrite: false,
+              transparent: true,
+              polygonOffset: true,
+              polygonOffsetFactor: -1,
+            })
+            ghost.userData.isGhost = true
 
-          if (obj.parent) {
-            obj.parent.add(depth)
-            obj.parent.add(ghost)
+            if (obj.parent) {
+              obj.parent.add(depth)
+              obj.parent.add(ghost)
+            }
           }
-        }
-      })
-      robotRef.current.userData.ghostsCreated = true
+        })
+        robotRef.current.userData.ghostsCreated = true
+      }
     }
-  }
 
-  const removeGhosts = () => {
-    if (robotRef.current) {
-      const objectsToRemove: THREE.Object3D[] = []
+    const removeGhosts = () => {
+      if (robotRef.current) {
+        const objectsToRemove: THREE.Object3D[] = []
 
-      robotRef.current.traverse((obj) => {
-        if (obj instanceof THREE.Mesh) {
-          if (obj.material instanceof THREE.Material) {
-            obj.material.colorWrite = true
+        robotRef.current.traverse((obj) => {
+          if (obj instanceof THREE.Mesh) {
+            if (obj.material instanceof THREE.Material) {
+              obj.material.colorWrite = true
+            }
           }
-        }
 
-        if (
-          obj instanceof THREE.Mesh &&
-          obj.userData !== undefined &&
-          obj.userData &&
-          obj.userData.isGhost !== undefined &&
-          obj.userData.isGhost
-        ) {
-          objectsToRemove.push(obj)
-        }
-      })
+          if (
+            obj instanceof THREE.Mesh &&
+            obj.userData !== undefined &&
+            obj.userData &&
+            obj.userData.isGhost !== undefined &&
+            obj.userData.isGhost
+          ) {
+            objectsToRemove.push(obj)
+          }
+        })
 
-      objectsToRemove.forEach((obj) => {
-        if (obj.parent) {
-          obj.parent.remove(obj)
-        }
-      })
+        objectsToRemove.forEach((obj) => {
+          if (obj.parent) {
+            obj.parent.remove(obj)
+          }
+        })
 
-      robotRef.current.userData.ghostsCreated = false
+        robotRef.current.userData.ghostsCreated = false
+      }
     }
-  }
 
-  useEffect(() => {
-    if (isGhost) {
-      addGhosts()
-    } else {
-      removeGhosts()
-    }
-  }, [isGhost])
+    useEffect(() => {
+      if (isGhost) {
+        addGhosts()
+      } else {
+        removeGhosts()
+      }
+    }, [isGhost])
 
-  switch (modelFromController) {
-    case "UniversalRobots_UR3":
-      Robot = UniversalRobots_UR3
-      break
-    case "UniversalRobots_UR3e":
-      Robot = UniversalRobots_UR3e
-      break
-    case "UniversalRobots_UR5":
-      Robot = UniversalRobots_UR5
-      break
-    case "UniversalRobots_UR5e":
-      Robot = UniversalRobots_UR5e
-      break
-    case "UniversalRobots_UR10":
-      Robot = UniversalRobots_UR10
-      break
-    case "UniversalRobots_UR10e":
-      Robot = UniversalRobots_UR10e
-      break
-    case "Yaskawa_AR900":
-      Robot = Yaskawa_AR900
-      break
-    case "Yaskawa_GP7":
-      Robot = Yaskawa_AR900
-      break
-    case "Yaskawa_AR1440":
-      Robot = Yaskawa_AR1440
-      break
-    case "Yaskawa_AR1730":
-      Robot = Yaskawa_AR1730
-      break
-    case "Yaskawa_AR2010":
-      Robot = Yaskawa_AR2010
-      break
-    case "Yaskawa_AR3120":
-      Robot = Yaskawa_AR3120
-      break
-    case "FANUC_CRX10iA":
-      Robot = FANUC_CRX10iA
-      break
-    case "FANUC_CRX20iAL":
-      Robot = FANUC_CRX20iAL
-      break
-    case "FANUC_CRX25iA":
-      Robot = FANUC_CRX25iA
-      break
-    case "FANUC_CRX25iAL":
-      Robot = FANUC_CRX25iAL
-      break
-    case "FANUC_ARC_Mate_120iD":
-      Robot = FANUC_ARC_Mate_120iD
-      break
-    case "FANUC_ARC_Mate_120iD35":
-      Robot = FANUC_ARC_Mate_120iD
-      break
-    case "FANUC_ARC_Mate_100iD":
-      Robot = FANUC_ARC_Mate_100iD
-      break
-    case "KUKA_KR210_R2700":
-      Robot = KUKA_KR210_R2700
-      break
-    case "KUKA_KR270_R2700":
-      Robot = KUKA_KR270_R2700
-      break
-    case "ABB_1200_07_7":
-      Robot = ABB_1200_07_7
-      break
-    default:
-      console.warn(`Unknown robot type: ${modelFromController}`)
-      Robot = DHRobot
-  }
+    switch (modelFromController) {
+      case "UniversalRobots_UR3":
+        Robot = UniversalRobots_UR3
+        break
+      case "UniversalRobots_UR3e":
+        Robot = UniversalRobots_UR3e
+        break
+      case "UniversalRobots_UR5":
+        Robot = UniversalRobots_UR5
+        break
+      case "UniversalRobots_UR5e":
+        Robot = UniversalRobots_UR5e
+        break
+      case "UniversalRobots_UR10":
+        Robot = UniversalRobots_UR10
+        break
+      case "UniversalRobots_UR10e":
+        Robot = UniversalRobots_UR10e
+        break
+      case "Yaskawa_AR900":
+        Robot = Yaskawa_AR900
+        break
+      case "Yaskawa_GP7":
+        Robot = Yaskawa_AR900
+        break
+      case "Yaskawa_AR1440":
+        Robot = Yaskawa_AR1440
+        break
+      case "Yaskawa_AR1730":
+        Robot = Yaskawa_AR1730
+        break
+      case "Yaskawa_AR2010":
+        Robot = Yaskawa_AR2010
+        break
+      case "Yaskawa_AR3120":
+        Robot = Yaskawa_AR3120
+        break
+      case "FANUC_CRX10iA":
+        Robot = FANUC_CRX10iA
+        break
+      case "FANUC_CRX20iAL":
+        Robot = FANUC_CRX20iAL
+        break
+      case "FANUC_CRX25iA":
+        Robot = FANUC_CRX25iA
+        break
+      case "FANUC_CRX25iAL":
+        Robot = FANUC_CRX25iAL
+        break
+      case "FANUC_ARC_Mate_120iD":
+        Robot = FANUC_ARC_Mate_120iD
+        break
+      case "FANUC_ARC_Mate_120iD35":
+        Robot = FANUC_ARC_Mate_120iD
+        break
+      case "FANUC_ARC_Mate_100iD":
+        Robot = FANUC_ARC_Mate_100iD
+        break
+      case "KUKA_KR210_R2700":
+        Robot = KUKA_KR210_R2700
+        break
+      case "KUKA_KR270_R2700":
+        Robot = KUKA_KR270_R2700
+        break
+      case "ABB_1200_07_7":
+        Robot = ABB_1200_07_7
+        break
+      default:
+        console.warn(`Unknown robot type: ${modelFromController}`)
+        Robot = DHRobot
+    }
 
-  return (
-    <ErrorBoundary
-      fallback={
-        <DHRobot
-          rapidlyChangingMotionState={rapidlyChangingMotionState}
-          dhParameters={dhParameters}
-          {...props}
-        />
-      }
-    >
-      <Suspense
+    return (
+      <ErrorBoundary
         fallback={
           <DHRobot
             rapidlyChangingMotionState={rapidlyChangingMotionState}
@@ -257,16 +250,26 @@ export function SupportedRobot({
           />
         }
       >
-        <group ref={setRobotRef}>
-          <Robot
-            rapidlyChangingMotionState={rapidlyChangingMotionState}
-            modelURL={getModel(modelFromController)}
-            dhParameters={dhParameters}
-            {...props}
-          />
-        </group>
-      </Suspense>
-      <ConsoleFilter />
-    </ErrorBoundary>
-  )
-}
+        <Suspense
+          fallback={
+            <DHRobot
+              rapidlyChangingMotionState={rapidlyChangingMotionState}
+              dhParameters={dhParameters}
+              {...props}
+            />
+          }
+        >
+          <group ref={setRobotRef}>
+            <Robot
+              rapidlyChangingMotionState={rapidlyChangingMotionState}
+              modelURL={getModel(modelFromController)}
+              dhParameters={dhParameters}
+              {...props}
+            />
+          </group>
+        </Suspense>
+        <ConsoleFilter />
+      </ErrorBoundary>
+    )
+  },
+)