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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "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, 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,62 @@ 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
+        if (
+          isGhost &&
+          robotRef.current &&
+          robotRef.current.children.length > 0
+        ) {
+          if (!robotRef.current.userData.ghostsCreated) {
+            robotRef.current.traverse((obj) => {
+              if (obj instanceof THREE.Mesh && !obj.userData.isGhost) {
+                // Create a clone of the mesh
+                const ghost = obj.clone()
+
+                obj.material = new THREE.MeshStandardMaterial({
+                  depthTest: true,
+                  depthWrite: true,
+                  colorWrite: false,
+                  polygonOffset: true,
+                  polygonOffsetFactor: 1,
+                  color: "#ffffff",
+                })
+
+                // 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(ghost)
+                }
+              }
+            })
+            robotRef.current.userData.ghostsCreated = true
+          }
+        }
+      }
+    },
+    [isGhost],
+  )
+
   switch (modelFromController) {
     case "UniversalRobots_UR3":
       Robot = UniversalRobots_UR3
@@ -136,12 +191,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>
-  );
+  )
 }