@wandelbots/wandelbots-js-react-components 1.11.2 → 1.11.4

package/dist/src/components/3d-viewport/SafetyZonesRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SafetyZonesRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/3d-viewport/SafetyZonesRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAItE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,qBAAqB,EAAE,CAAA;CACrC,GAAG,UAAU,CAAA;AAEd,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,GAAG,KAAK,EACT,EAAE,wBAAwB,2CA+C1B"}
+{"version":3,"file":"SafetyZonesRenderer.d.ts","sourceRoot":"","sources":["../../../../src/components/3d-viewport/SafetyZonesRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAItE,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAA;AAEpD,MAAM,MAAM,wBAAwB,GAAG;IACrC,WAAW,EAAE,qBAAqB,EAAE,CAAA;CACrC,GAAG,UAAU,CAAA;AAqCd,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,GAAG,KAAK,EACT,EAAE,wBAAwB,2CA+D1B"}

package/dist/src/components/modal/NoMotionGroupModal.d.ts

@@ -1,4 +1,5 @@
-export declare const NoMotionGroupModal: ((baseUrl?: string) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
+export type NoMotionGroupModalProps = {
+    baseUrl: string;
 };
+export declare function NoMotionGroupModal({ baseUrl, ...props }: NoMotionGroupModalProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NoMotionGroupModal.d.ts.map

package/dist/src/components/modal/NoMotionGroupModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NoMotionGroupModal.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/NoMotionGroupModal.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,kBAAkB,cACV,MAAM;;CAwE1B,CAAA"}
+{"version":3,"file":"NoMotionGroupModal.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/NoMotionGroupModal.tsx"],"names":[],"mappings":"AAkBA,MAAM,MAAM,uBAAuB,GAAG;IACpC,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAsB,EACtB,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAkEzB"}

package/dist/stories/SafetyZonesRenderer.stories.d.ts

@@ -0,0 +1,147 @@
+import { Euler, Vector3, WebGLRenderer } from "three";
+import { SafetyZonesRenderer } from "../src";
+import type { SafetySetupSafetyZone } from "@wandelbots/wandelbots-js";
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: typeof SafetyZonesRenderer;
+    decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        safetyZones: SafetySetupSafetyZone[];
+        ref?: import("react").Ref<import("three").Group<import("three").Object3DEventMap>> | undefined;
+        children?: React.ReactNode;
+        attach?: import("@react-three/fiber/dist/declarations/src/core/renderer").AttachType | undefined;
+        args?: [] | undefined;
+        key?: React.Key | undefined;
+        onUpdate?: ((self: import("three").Group<import("three").Object3DEventMap>) => void) | undefined;
+        readonly type?: string | undefined;
+        toJSON?: ((meta?: import("three").JSONMeta) => import("three").Object3DJSON) | undefined;
+        readonly isObject3D?: true | undefined;
+        readonly id?: number | undefined;
+        uuid?: string | undefined;
+        name?: string | undefined;
+        parent?: import("three").Object3D<import("three").Object3DEventMap> | null | undefined;
+        readonly modelViewMatrix?: import("three").Matrix4 | undefined;
+        readonly normalMatrix?: import("three").Matrix3 | undefined;
+        matrixWorld?: import("three").Matrix4 | undefined;
+        matrixAutoUpdate?: boolean | undefined;
+        matrixWorldAutoUpdate?: boolean | undefined;
+        matrixWorldNeedsUpdate?: boolean | undefined;
+        visible?: boolean | undefined;
+        castShadow?: boolean | undefined;
+        receiveShadow?: boolean | undefined;
+        frustumCulled?: boolean | undefined;
+        renderOrder?: number | undefined;
+        animations?: import("three").AnimationClip[] | undefined;
+        userData?: Record<string, any> | undefined;
+        customDepthMaterial?: import("three").Material | undefined;
+        customDistanceMaterial?: import("three").Material | undefined;
+        onBeforeShadow?: ((renderer: WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry, depthMaterial: import("three").Material, group: import("three").Group) => void) | undefined;
+        onAfterShadow?: ((renderer: WebGLRenderer, scene: import("three").Scene, shadowCamera: import("three").Camera, geometry: import("three").BufferGeometry, depthMaterial: import("three").Material, group: import("three").Group) => void) | undefined;
+        onBeforeRender?: ((renderer: WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry, material: import("three").Material, group: import("three").Group) => void) | undefined;
+        onAfterRender?: ((renderer: WebGLRenderer, scene: import("three").Scene, camera: import("three").Camera, geometry: import("three").BufferGeometry, material: import("three").Material, group: import("three").Group) => void) | undefined;
+        applyMatrix4?: ((matrix: import("three").Matrix4) => void) | undefined;
+        applyQuaternion?: ((quaternion: import("three").Quaternion) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        setRotationFromAxisAngle?: ((axis: Vector3, angle: number) => void) | undefined;
+        setRotationFromEuler?: ((euler: Euler) => void) | undefined;
+        setRotationFromMatrix?: ((m: import("three").Matrix4) => void) | undefined;
+        setRotationFromQuaternion?: ((q: import("three").Quaternion) => void) | undefined;
+        rotateOnAxis?: ((axis: Vector3, angle: number) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        rotateOnWorldAxis?: ((axis: Vector3, angle: number) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        rotateX?: ((angle: number) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        rotateY?: ((angle: number) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        rotateZ?: ((angle: number) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        translateOnAxis?: ((axis: Vector3, distance: number) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        translateX?: ((distance: number) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        translateY?: ((distance: number) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        translateZ?: ((distance: number) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        localToWorld?: ((vector: Vector3) => Vector3) | undefined;
+        worldToLocal?: ((vector: Vector3) => Vector3) | undefined;
+        lookAt?: {
+            (vector: Vector3): void;
+            (x: number, y: number, z: number): void;
+        } | undefined;
+        add?: ((...object: import("three").Object3D[]) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        remove?: ((...object: import("three").Object3D[]) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        removeFromParent?: (() => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        clear?: (() => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        getObjectById?: ((id: number) => import("three").Object3D | undefined) | undefined;
+        getObjectByName?: ((name: string) => import("three").Object3D | undefined) | undefined;
+        getObjectByProperty?: ((name: string, value: any) => import("three").Object3D | undefined) | undefined;
+        getObjectsByProperty?: ((name: string, value: any, optionalTarget?: import("three").Object3D[]) => import("three").Object3D[]) | undefined;
+        getWorldPosition?: ((target: Vector3) => Vector3) | undefined;
+        getWorldQuaternion?: ((target: import("three").Quaternion) => import("three").Quaternion) | undefined;
+        getWorldScale?: ((target: Vector3) => Vector3) | undefined;
+        getWorldDirection?: ((target: Vector3) => Vector3) | undefined;
+        raycast?: ((raycaster: import("three").Raycaster, intersects: import("three").Intersection[]) => void) | undefined;
+        traverse?: ((callback: (object: import("three").Object3D) => any) => void) | undefined;
+        traverseVisible?: ((callback: (object: import("three").Object3D) => any) => void) | undefined;
+        traverseAncestors?: ((callback: (object: import("three").Object3D) => any) => void) | undefined;
+        updateMatrix?: (() => void) | undefined;
+        updateMatrixWorld?: ((force?: boolean) => void) | undefined;
+        updateWorldMatrix?: ((updateParents: boolean, updateChildren: boolean) => void) | undefined;
+        clone?: ((recursive?: boolean) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        copy?: ((object: import("three").Object3D, recursive?: boolean) => import("three").Group<import("three").Object3DEventMap>) | undefined;
+        addEventListener?: {
+            <T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, import("three").Group<import("three").Object3DEventMap>>): void;
+            <T extends string>(type: T, listener: import("three").EventListener<{}, T, import("three").Group<import("three").Object3DEventMap>>): void;
+        } | undefined;
+        hasEventListener?: {
+            <T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, import("three").Group<import("three").Object3DEventMap>>): boolean;
+            <T extends string>(type: T, listener: import("three").EventListener<{}, T, import("three").Group<import("three").Object3DEventMap>>): boolean;
+        } | undefined;
+        removeEventListener?: {
+            <T extends keyof import("three").Object3DEventMap>(type: T, listener: import("three").EventListener<import("three").Object3DEventMap[T], T, import("three").Group<import("three").Object3DEventMap>>): void;
+            <T extends string>(type: T, listener: import("three").EventListener<{}, T, import("three").Group<import("three").Object3DEventMap>>): void;
+        } | undefined;
+        dispatchEvent?: (<T extends keyof import("three").Object3DEventMap>(event: import("three").BaseEvent<T> & import("three").Object3DEventMap[T]) => void) | undefined;
+        readonly isGroup?: true | undefined;
+        position?: import("@react-three/fiber").Vector3 | undefined;
+        up?: import("@react-three/fiber").Vector3 | undefined;
+        scale?: import("@react-three/fiber").Vector3 | undefined;
+        rotation?: import("@react-three/fiber").Euler | undefined;
+        matrix?: import("@react-three/fiber").Matrix4 | undefined;
+        quaternion?: import("@react-three/fiber").Quaternion | undefined;
+        layers?: import("@react-three/fiber").Layers | undefined;
+        dispose?: ((() => void) | null) | undefined;
+        onClick?: ((event: import("@react-three/fiber").ThreeEvent<MouseEvent>) => void) | undefined;
+        onContextMenu?: ((event: import("@react-three/fiber").ThreeEvent<MouseEvent>) => void) | undefined;
+        onDoubleClick?: ((event: import("@react-three/fiber").ThreeEvent<MouseEvent>) => void) | undefined;
+        onPointerUp?: ((event: import("@react-three/fiber").ThreeEvent<PointerEvent>) => void) | undefined;
+        onPointerDown?: ((event: import("@react-three/fiber").ThreeEvent<PointerEvent>) => void) | undefined;
+        onPointerOver?: ((event: import("@react-three/fiber").ThreeEvent<PointerEvent>) => void) | undefined;
+        onPointerOut?: ((event: import("@react-three/fiber").ThreeEvent<PointerEvent>) => void) | undefined;
+        onPointerEnter?: ((event: import("@react-three/fiber").ThreeEvent<PointerEvent>) => void) | undefined;
+        onPointerLeave?: ((event: import("@react-three/fiber").ThreeEvent<PointerEvent>) => void) | undefined;
+        onPointerMove?: ((event: import("@react-three/fiber").ThreeEvent<PointerEvent>) => void) | undefined;
+        onPointerMissed?: ((event: MouseEvent) => void) | undefined;
+        onPointerCancel?: ((event: import("@react-three/fiber").ThreeEvent<PointerEvent>) => void) | undefined;
+        onWheel?: ((event: import("@react-three/fiber").ThreeEvent<WheelEvent>) => void) | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default _default;
+export declare const SafetyZonesRendererSt: {
+    args: {};
+    render: (args: {
+        safetyZones: SafetySetupSafetyZone[];
+    } & Omit<import("@react-three/fiber").ExtendedColors<import("@react-three/fiber").Overwrite<Partial<import("three").Group<import("three").Object3DEventMap>>, import("@react-three/fiber").NodeProps<import("three").Group<import("three").Object3DEventMap>, typeof import("three").Group>>>, import("@react-three/fiber").NonFunctionKeys<{
+        position?: import("@react-three/fiber").Vector3;
+        up?: import("@react-three/fiber").Vector3;
+        scale?: import("@react-three/fiber").Vector3;
+        rotation?: import("@react-three/fiber").Euler;
+        matrix?: import("@react-three/fiber").Matrix4;
+        quaternion?: import("@react-three/fiber").Quaternion;
+        layers?: import("@react-three/fiber").Layers;
+        dispose?: (() => void) | null;
+    }>> & {
+        position?: import("@react-three/fiber").Vector3;
+        up?: import("@react-three/fiber").Vector3;
+        scale?: import("@react-three/fiber").Vector3;
+        rotation?: import("@react-three/fiber").Euler;
+        matrix?: import("@react-three/fiber").Matrix4;
+        quaternion?: import("@react-three/fiber").Quaternion;
+        layers?: import("@react-three/fiber").Layers;
+        dispose?: (() => void) | null;
+    } & import("@react-three/fiber/dist/declarations/src/core/events").EventHandlers) => import("react/jsx-runtime").JSX.Element;
+    name: string;
+};
+//# sourceMappingURL=SafetyZonesRenderer.stories.d.ts.map

package/dist/stories/SafetyZonesRenderer.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SafetyZonesRenderer.stories.d.ts","sourceRoot":"","sources":["../../stories/SafetyZonesRenderer.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAA;AAC5C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;;;;;;;;mBAuEtD,MAAA,SAAI;;;cAEF,MAAA,GAAR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtEV,wBAuB4C;AA0c5C,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;CAIjB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wandelbots/wandelbots-js-react-components",
-  "version": "1.11.2",
+  "version": "1.11.4",
   "description": "React UI toolkit for building applications on top of the Wandelbots platform",
   "type": "module",
   "sideEffects": false,

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/modal/NoMotionGroupModal.tsx

@@ -7,8 +7,6 @@ import {
   Stack,
   Typography,
 } from "@mui/material"
-import { observer } from "mobx-react-lite"
-import { externalizeComponent } from "../../externalizeComponent"
 
 function getBaseUrl(): string {
   const currentUrl = window.location.href
@@ -18,77 +16,77 @@ function getBaseUrl(): string {
   )
 }
 
-export const NoMotionGroupModal = externalizeComponent(
-  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",
+export type NoMotionGroupModalProps = {
+  baseUrl: string
+}
+
+export function NoMotionGroupModal({
+  baseUrl = getBaseUrl(),
+  ...props
+}: NoMotionGroupModalProps) {
+  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
+        sx={{
+          marginTop: "3rem",
+          marginBottom: "1.5rem",
+          textAlign: "center",
         }}
       >
-        <DialogTitle id="no-motion-group-modal-title">
-          No motion group found
-        </DialogTitle>
-
-        <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>
+        <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"
+      <DialogActions>
+        <Stack width="100%" maxWidth="300px" margin="auto" marginBottom="2rem">
+          <Button
+            href={`${baseUrl}/settings`}
+            variant="contained"
+            sx={{
+              borderRadius: "8px",
+              width: "100%",
+            }}
           >
-            <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>
-    )
-  }),
-)
+            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>
+  )
+}