@wandelbots/wandelbots-js-react-components 1.4.3 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.4.3",
+  "version": "1.5.1",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "files": [
     "dist",

package/src/components/robots/Robot.tsx

@@ -6,6 +6,7 @@ import { defaultGetModel, SupportedRobot } from "./SupportedRobot"
 export type ConnectecMotionGroupRobotProps = {
   connectedMotionGroup: ConnectedMotionGroup
   getModel?: (modelFromController: string) => string
+  isGhost?: boolean
 } & GroupProps
 
 /**
@@ -22,6 +23,7 @@ export type ConnectecMotionGroupRobotProps = {
 export function Robot({
   connectedMotionGroup,
   getModel = defaultGetModel,
+  isGhost = false,
   ...props
 }: ConnectecMotionGroupRobotProps) {
   if (!connectedMotionGroup.dhParameters) {
@@ -36,6 +38,7 @@ export function Robot({
       modelFromController={connectedMotionGroup.modelFromController || ""}
       dhParameters={connectedMotionGroup.dhParameters}
       getModel={getModel}
+      isGhost={isGhost}
       {...props}
     />
   )

package/src/components/robots/SupportedRobot.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from "react"
+import { Suspense, useCallback, useEffect, useRef } from "react"
 
 import { UniversalRobots_UR3 } from "./UniversalRobots_UR3"
 import { UniversalRobots_UR3e } from "./UniversalRobots_UR3e"
@@ -27,6 +27,8 @@ import type {
 } from "@wandelbots/wandelbots-api-client"
 import { DHRobot } from "./DHRobot"
 
+import * as THREE from "three"
+
 export type DHRobotProps = {
   rapidlyChangingMotionState: MotionGroupStateResponse
   dhParameters: Array<DHParameter>
@@ -42,6 +44,7 @@ export type SupportedRobotProps = {
   modelFromController: string
   dhParameters: DHParameter[]
   getModel?: (modelFromController: string) => string
+  isGhost?: boolean
 } & GroupProps
 
 export function defaultGetModel(modelFromController: string): string {
@@ -53,10 +56,113 @@ export function SupportedRobot({
   modelFromController,
   dhParameters,
   getModel = defaultGetModel,
+  isGhost = false,
   ...props
 }: SupportedRobotProps) {
   let Robot
 
+  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()
+        }
+      }
+    },
+    [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
+          }
+
+          // 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
+
+          // 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)
+          }
+        }
+      })
+      robotRef.current.userData.ghostsCreated = true
+    }
+  }
+
+  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
+          }
+        }
+
+        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)
+        }
+      })
+
+      robotRef.current.userData.ghostsCreated = false
+    }
+  }
+
+  useEffect(() => {
+    if (isGhost) {
+      addGhosts()
+    } else {
+      removeGhosts()
+    }
+  }, [isGhost])
+
   switch (modelFromController) {
     case "UniversalRobots_UR3":
       Robot = UniversalRobots_UR3
@@ -136,12 +242,14 @@ export function SupportedRobot({
         />
       }
     >
-      <Robot
-        rapidlyChangingMotionState={rapidlyChangingMotionState}
-        modelURL={getModel(modelFromController)}
-        dhParameters={dhParameters}
-        {...props}
-      />
+      <group ref={setRobotRef}>
+        <Robot
+          rapidlyChangingMotionState={rapidlyChangingMotionState}
+          modelURL={getModel(modelFromController)}
+          dhParameters={dhParameters}
+          {...props}
+        />
+      </group>
     </Suspense>
   )
 }

package/src/icons/robot.tsx

@@ -1,8 +1,12 @@
-import React from "react";
-
 export function RobotIcon() {
   return (
-    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"
@@ -10,5 +14,5 @@ export function RobotIcon() {
         fill="white"
       />
     </svg>
-  );
+  )
 }