feat: Added TrajectoryRenderer component for path visualization (#156)

Co-authored-by: Evаn Summers <[email protected]>

src/components/3d-viewport/TrajectoryRenderer.tsx

@@ -0,0 +1,40 @@
+import { Line } from "@react-three/drei"
+import type { GetTrajectoryResponse } from "@wandelbots/wandelbots-js"
+import * as THREE from "three"
+
+export type TrajectoryRendererProps = {
+  trajectory: GetTrajectoryResponse
+} & JSX.IntrinsicElements["group"]
+
+export function TrajectoryRenderer({
+  trajectory,
+  ...props
+}: TrajectoryRendererProps) {
+  const points =
+    trajectory.trajectory
+      ?.map((point) => {
+        if (point.tcp_pose) {
+          return new THREE.Vector3(
+            point.tcp_pose.position.x / 1000,
+            point.tcp_pose.position.z / 1000,
+            -point.tcp_pose.position.y / 1000,
+          )
+        }
+        return null
+      })
+      .filter((point): point is THREE.Vector3 => point !== null) || []
+
+  return (
+    <group {...props}>
+      {points.length > 0 && (
+        <Line
+          points={points}
+          lineWidth={3}
+          polygonOffset={true}
+          polygonOffsetFactor={10}
+          polygonOffsetUnits={10}
+        />
+      )}
+    </group>
+  )
+}

src/index.ts

@@ -1,5 +1,6 @@
 export * from "./components/3d-viewport/PresetEnvironment"
 export * from "./components/3d-viewport/SafetyZonesRenderer"
+export * from "./components/3d-viewport/TrajectoryRenderer"
 export * from "./components/jogging/JoggingCartesianAxisControl"
 export * from "./components/jogging/JoggingJointRotationControl"
 export * from "./components/jogging/JoggingPanel"

stories/TrajectoryRenderer.mdx

@@ -0,0 +1,51 @@
+import { Meta, Story } from '@storybook/blocks';
+import * as TrajectoryRenderer from './TrajectoryRenderer.stories';
+
+<Meta of={TrajectoryRenderer} />
+
+# Trajectory Renderer
+
+The `TrajectoryRenderer` component visualizes the planned trajectory of the robot.
+
+This component should be used with [wandelbots-js](https://github.com/wandelbotsgmbh/wandelbots-js). Pass the `GetTrajectoryResponse` from `NovaCellAPIClient.motion.getMotionTrajectory` to the component.
+If the Plan Motion or Plan Trajectory endpoint is used, an motion will be generated which afterwards can be fetched from the `listMotions` endpoint. That motion id can be used to fetch the trajectory.
+
+```tsx
+const motions = await apiClient.motion.listMotions()
+const trajectory = await apiClient.motion.getMotionTrajectory(
+    motions[0],
+    sampleTime,
+    responsesCoordinateSystem,
+  )
+  ...
+<TrajectoryRenderer trajectory={trajectory} />
+```
+
+If the motion is executed using Wandelscript and the `ProgramStateConnection` is used, the trajectory can be fetched from the `getLatestTrajectories` endpoint. A single Wandelscript can contain multiple motions. 
+The `getLatestTrajectories` endpoint returns the all the latest trajectories of the robot since the last call. If you call the endpoint directly after the motion is finished, you will get the trajectories of the last motion. 
+
+```tsx
+const [latestTrajectories, setLatestTrajectories] = useState<
+      GetTrajectoryResponse[]
+    >([])
+
+useEffect(() => {
+  autorun(() => {
+    if (store.executionState === "starting") {
+      setLatestTrajectories([])
+    }
+    if (store.executionState === "idle") {
+      getLatestTrajectories(wandelApp.nova.api).then(setLatestTrajectories)
+    }
+  })
+}, [])
+
+...
+
+// in your render function
+{latestTrajectories.map((trajectory, index) => (
+  <TrajectoryRenderer key={index} trajectory={trajectory} />
+))}
+```
+
+<Story of={TrajectoryRenderer.TrajectoryRendererSt} />