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

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/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.3",
   "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)