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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.11.1",
+  "version": "1.11.3",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,
@@ -49,9 +49,8 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-docs": "^8.2.9",
     "@storybook/addon-essentials": "^8.2.9",
-    "@storybook/addon-interactions": "^8.2.9",
-    "@storybook/addon-links": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
@@ -80,7 +79,7 @@
     "storybook-preset-inline-svg": "^1.0.1",
     "tslib": "^2.6.3",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5",
+    "vite": "^5.4.2",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^2.0.5"
   },
@@ -106,13 +105,13 @@
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "^5.0.0-alpha.173",
     "@shikijs/monaco": "^1.12.0",
+    "@wandelbots/wandelbots-js": "^1.8.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "lodash-es": "^4.17.21",
     "mobx": "^6.13.1",
     "mobx-react-lite": "^4.0.7",
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^15.0.0",
-    "shiki": "^1.12.0",
-    "@wandelbots/wandelbots-js": "^1.8.0"
+    "shiki": "^1.12.0"
   }
 }

package/src/components/3d-viewport/SafetyZonesRenderer.tsx

@@ -8,6 +8,41 @@ export type SafetyZonesRendererProps = {
   safetyZones: SafetySetupSafetyZone[]
 } & GroupProps
 
+interface CoplanarityResult {
+  isCoplanar: boolean
+  normal?: THREE.Vector3
+}
+
+function areVerticesCoplanar(vertices: THREE.Vector3[]): CoplanarityResult {
+  if (vertices.length < 3) {
+    console.log("Not enough vertices to define a plane")
+    return { isCoplanar: false }
+  }
+
+  // Convert Vector3d to THREE.Vector3
+  const v0 = new THREE.Vector3(vertices[0].x, vertices[0].y, vertices[0].z)
+  const v1 = new THREE.Vector3(vertices[1].x, vertices[1].y, vertices[1].z)
+  const v2 = new THREE.Vector3(vertices[2].x, vertices[2].y, vertices[2].z)
+
+  const vector1 = new THREE.Vector3().subVectors(v1, v0)
+  const vector2 = new THREE.Vector3().subVectors(v2, v0)
+  const normal = new THREE.Vector3().crossVectors(vector1, vector2).normalize()
+
+  // Check if all remaining vertices lie on the same plane
+  for (let i = 3; i < vertices.length; i++) {
+    const vi = new THREE.Vector3(vertices[i].x, vertices[i].y, vertices[i].z)
+    const vector = new THREE.Vector3().subVectors(vi, v0)
+    const dotProduct = normal.dot(vector)
+    if (Math.abs(dotProduct) > 1e-6) {
+      // Allowing a small tolerance
+      console.log("Vertices are not on the same plane")
+      return { isCoplanar: false }
+    }
+  }
+
+  return { isCoplanar: true, normal }
+}
+
 export function SafetyZonesRenderer({
   safetyZones,
   ...props
@@ -30,6 +65,22 @@ export function SafetyZonesRenderer({
           const vertices = geometry.convex_hull.vertices.map(
             (v) => new THREE.Vector3(v.x / 1000, v.y / 1000, v.z / 1000),
           )
+
+          // Check if the vertices are on the same plane and only define a plane
+          // Algorithm has troubles with vertices that are on the same plane so we
+          // add a new vertex slightly moved along the normal direction
+          const coplanarityResult = areVerticesCoplanar(vertices)
+
+          if (coplanarityResult.isCoplanar && coplanarityResult.normal) {
+            // Add a new vertex slightly moved along the normal direction
+            const offset = 0.0001 // Adjust the offset as needed
+            const newVertex = new THREE.Vector3().addVectors(
+              vertices[0],
+              coplanarityResult.normal.multiplyScalar(offset),
+            )
+            vertices.push(newVertex)
+          }
+
           let convexGeometry
           try {
             convexGeometry = new ConvexGeometry(vertices)

package/src/components/VelocitySlider.tsx

@@ -1,7 +1,7 @@
 import Slider from "@mui/material/Slider"
 import isNumber from "lodash-es/isNumber"
 import { observer } from "mobx-react-lite"
-import { Stack, Typography, useTheme } from "@mui/material"
+import { Typography, useTheme } from "@mui/material"
 
 type VelocitySliderProps = {
   min: number

package/src/components/jogging/JoggingCartesianAxisControl.tsx

@@ -3,6 +3,7 @@ import Stack from "@mui/material/Stack"
 import { observer } from "mobx-react-lite"
 import { useRef, type ReactNode } from "react"
 import { useAnimationFrame } from "../utils/hooks"
+import { externalizeComponent } from "../../externalizeComponent"
 
 type JoggingCartesianAxisControlProps = {
   color?: string
@@ -13,115 +14,117 @@ type JoggingCartesianAxisControlProps = {
   disabled?: boolean
 } & React.ComponentProps<typeof Stack>
 
-export const JoggingCartesianAxisControl = observer(
-  ({
-    color,
-    label,
-    getDisplayedValue,
-    startJogging,
-    stopJogging,
-    disabled,
-    ...rest
-  }: JoggingCartesianAxisControlProps) => {
-    useAnimationFrame(() => {
-      const displayValue = getDisplayedValue()
-      const element = valueContainerRef.current
-      if (!element) return
+export const JoggingCartesianAxisControl = externalizeComponent(
+  observer(
+    ({
+      color,
+      label,
+      getDisplayedValue,
+      startJogging,
+      stopJogging,
+      disabled,
+      ...rest
+    }: JoggingCartesianAxisControlProps) => {
+      useAnimationFrame(() => {
+        const displayValue = getDisplayedValue()
+        const element = valueContainerRef.current
+        if (!element) return
 
-      element.textContent = displayValue
-    })
+        element.textContent = displayValue
+      })
 
-    const valueContainerRef = useRef<HTMLParagraphElement>(null)
+      const valueContainerRef = useRef<HTMLParagraphElement>(null)
 
-    color = color || "#F14D42"
+      color = color || "#F14D42"
 
-    function onPointerDownMinus(ev: React.PointerEvent) {
-      // Stop right click from triggering jog
-      if (ev.button === 0) startJogging("-")
-    }
+      function onPointerDownMinus(ev: React.PointerEvent) {
+        // Stop right click from triggering jog
+        if (ev.button === 0) startJogging("-")
+      }
 
-    function onPointerDownPlus(ev: React.PointerEvent) {
-      if (ev.button === 0) startJogging("+")
-    }
+      function onPointerDownPlus(ev: React.PointerEvent) {
+        if (ev.button === 0) startJogging("+")
+      }
 
-    return (
-      <Stack height="72px" direction="row" {...rest}>
-        <Button
-          onPointerDown={onPointerDownMinus}
-          onPointerUp={stopJogging}
-          onPointerOut={stopJogging}
-          disabled={disabled}
-          sx={{
-            width: "105px",
-            backgroundColor: color,
-            color: "white",
-            alignContent: "center",
-            fontSize: "37px",
-            borderRadius: "16px 0px 0px 16px",
-
-            ":hover": {
-              color: "white",
+      return (
+        <Stack height="72px" direction="row" {...rest}>
+          <Button
+            onPointerDown={onPointerDownMinus}
+            onPointerUp={stopJogging}
+            onPointerOut={stopJogging}
+            disabled={disabled}
+            sx={{
+              width: "105px",
               backgroundColor: color,
-            },
-          }}
-        >
-          {"-"}
-        </Button>
+              color: "white",
+              alignContent: "center",
+              fontSize: "37px",
+              borderRadius: "16px 0px 0px 16px",
+
+              ":hover": {
+                color: "white",
+                backgroundColor: color,
+              },
+            }}
+          >
+            {"-"}
+          </Button>
 
-        <Stack
-          spacing="6px"
-          sx={{
-            width: "184px",
-            backgroundColor: color,
-            alignItems: "center",
-            justifyContent: "center",
-            opacity: "0.9",
-          }}
-        >
           <Stack
-            height="22px"
-            direction="row"
-            alignItems="center"
-            justifyItems="center"
-            spacing={1}
-            sx={{ userSelect: "none", color: "white" }}
+            spacing="6px"
+            sx={{
+              width: "184px",
+              backgroundColor: color,
+              alignItems: "center",
+              justifyContent: "center",
+              opacity: "0.9",
+            }}
           >
-            {label}
+            <Stack
+              height="22px"
+              direction="row"
+              alignItems="center"
+              justifyItems="center"
+              spacing={1}
+              sx={{ userSelect: "none", color: "white" }}
+            >
+              {label}
+            </Stack>
+            <Typography
+              height="22px"
+              sx={{
+                fontSize: "15px",
+                color: "white",
+              }}
+              ref={valueContainerRef}
+            >
+              {getDisplayedValue()}
+            </Typography>
           </Stack>
-          <Typography
-            height="22px"
+
+          <Button
+            onPointerDown={onPointerDownPlus}
+            onPointerUp={stopJogging}
+            onPointerOut={stopJogging}
+            disabled={disabled}
             sx={{
-              fontSize: "15px",
+              width: "105px",
+              backgroundColor: color,
               color: "white",
+              alignContent: "center",
+              fontSize: "37px",
+              borderRadius: "0px 16px 16px 0px",
+
+              ":hover": {
+                color: "white",
+                backgroundColor: color,
+              },
             }}
-            ref={valueContainerRef}
           >
-            {getDisplayedValue()}
-          </Typography>
+            {"+"}
+          </Button>
         </Stack>
-
-        <Button
-          onPointerDown={onPointerDownPlus}
-          onPointerUp={stopJogging}
-          onPointerOut={stopJogging}
-          disabled={disabled}
-          sx={{
-            width: "105px",
-            backgroundColor: color,
-            color: "white",
-            alignContent: "center",
-            fontSize: "37px",
-            borderRadius: "0px 16px 16px 0px",
-
-            ":hover": {
-              color: "white",
-              backgroundColor: color,
-            },
-          }}
-        >
-          {"+"}
-        </Button>
-      </Stack>
-    )
-  },
+      )
+    },
+  ),
 )