@reactvision/react-viro 2.44.0 → 2.44.2

package/components/AR/ViroARPlaneSelector.tsx

@@ -12,39 +12,49 @@
 "use strict";
 
 import {
-  ViroARPlaneSizes,
   ViroClickStateEvent,
   ViroPlaneUpdatedMap,
 } from "../Types/ViroEvents";
 import { ViroARPlaneType, ViroNativeRef } from "../Types/ViroUtils";
+
+type ViroARPlaneClassification =
+  | "None"
+  | "Wall"
+  | "Floor"
+  | "Ceiling"
+  | "Table"
+  | "Seat"
+  | "Door"
+  | "Window"
+  | "Unknown";
 import * as React from "react";
 import { ViroMaterials } from "../Material/ViroMaterials";
 import { ViroNode } from "../ViroNode";
 import { ViroQuad } from "../ViroQuad";
+import { ViroPolygon } from "../ViroPolygon";
 import { ViroARPlane } from "./ViroARPlane";
-import { ViroCommonProps, ViroObjectProps } from "./ViroCommonProps";
 
-var _maxPlanes = 15;
 var _planePrefix = "ViroARPlaneSelector_Plane_";
 
-type Props = ViroCommonProps &
-  ViroObjectProps & {
-    maxPlanes?: number;
-    minHeight?: number;
-    minWidth?: number;
-    alignment?:
-      | "Horizontal"
-      | "HorizontalUpward"
-      | "HorizontalDownward"
-      | "Vertical";
-
-    onPlaneSelected?: (updateMap: ViroPlaneUpdatedMap) => void;
-  };
+type Props = {
+  minHeight?: number;
+  minWidth?: number;
+  alignment?:
+    | "Horizontal"
+    | "HorizontalUpward"
+    | "HorizontalDownward"
+    | "Vertical"
+    | "Both"; // Added "Both" option to detect both horizontal and vertical
+  onPlaneSelected?: (updateMap: ViroPlaneUpdatedMap) => void;
+  onPlaneDetected?: (updateMap: ViroPlaneUpdatedMap) => boolean; // Optional validation callback
+  disableClickSelection?: boolean; // Disable click-based selection, only show planes visually
+  useActualShape?: boolean; // Use boundary vertices for accurate shape (default: true)
+  children?: React.ReactNode;
+};
 
 type State = {
-  selectedSurface: number;
-  foundARPlanes: ViroARPlaneType[];
-  arPlaneSizes: ViroARPlaneSizes;
+  selectedPlaneId: string | null;
+  foundARPlanes: Map<string, ViroARPlaneType>;
 };
 
 /**
@@ -54,10 +64,9 @@ type State = {
  */
 export class ViroARPlaneSelector extends React.Component<Props, State> {
   _component: ViroNativeRef = null;
-  state = {
-    selectedSurface: -1,
-    foundARPlanes: [] as ViroARPlaneType[],
-    arPlaneSizes: [] as number[],
+  state: State = {
+    selectedPlaneId: null,
+    foundARPlanes: new Map<string, ViroARPlaneType>(),
   };
 
   render() {
@@ -68,80 +77,172 @@ export class ViroARPlaneSelector extends React.Component<Props, State> {
   }
 
   _getARPlanes() {
-    // Always render a fixed number of planes, controlling visibility instead of conditional rendering
-    let arPlanes: React.JSX.Element[] = [];
-    let numPlanes = this.props.maxPlanes || _maxPlanes;
-
-    // Create all plane slots (both detected and placeholder)
-    for (let i = 0; i < numPlanes; i++) {
-      // Determine if this is the selected plane
-      const isSelected = this.state.selectedSurface === i;
-
-      // Get real plane data if available, or use defaults
-      const foundARPlane = this.state.foundARPlanes[i];
-      const hasPlaneData = !!foundARPlane;
-
-      // Extract plane data or use defaults
-      const surfaceWidth = hasPlaneData ? foundARPlane.width || 0.5 : 0.5;
-      const surfaceHeight = hasPlaneData ? foundARPlane.height || 0.5 : 0.5;
-      const surfacePosition = hasPlaneData
-        ? foundARPlane.center || [0, 0, 0]
-        : [0, 0, 0];
-      const anchorId = hasPlaneData
-        ? (foundARPlane as any).anchorId
-        : undefined;
-
-      // Determine visibility based on selection state
-      // - In selection mode (selectedSurface === -1): show all planes
-      // - In selected mode: only show the selected plane
-      const isVisible = this.state.selectedSurface === -1 || isSelected;
-
-      arPlanes.push(
-        <ViroARPlane
-          key={_planePrefix + i}
-          minWidth={this.props.minWidth || 0.5}
-          minHeight={this.props.minHeight || 0.5}
-          alignment={this.props.alignment}
-          anchorId={anchorId}
-          onAnchorFound={(anchor) => {
-            // If we find an anchor, update our plane data
-            this._onARPlaneUpdated(i)(anchor);
-          }}
-          onAnchorUpdated={this._onARPlaneUpdated(i)}
-        >
-          {/* Always render both the quad and children, controlling only visibility */}
-          <ViroQuad
-            materials={"ViroARPlaneSelector_Translucent"}
-            onClickState={(clickState, position, source) =>
-              this._getOnClickSurface(i, { clickState, position, source })
-            }
-            position={surfacePosition}
-            width={surfaceWidth}
-            height={surfaceHeight}
-            rotation={[-90, 0, 0]}
-            opacity={isSelected ? 0 : isVisible ? 1 : 0}
-          />
-
-          {/* Wrap children in a ViroNode to control visibility if children exist */}
-          {this.props.children && (
-            <ViroNode opacity={isSelected ? 1 : 0}>
-              {this.props.children}
-            </ViroNode>
-          )}
-        </ViroARPlane>
+    const arPlanes: React.JSX.Element[] = [];
+    const detectBothAlignments =
+      this.props.alignment === "Both" || !this.props.alignment;
+
+    // Determine which alignments to detect
+    const alignmentsToDetect: Array<
+      "Horizontal" | "HorizontalUpward" | "HorizontalDownward" | "Vertical"
+    > = [];
+    if (detectBothAlignments) {
+      alignmentsToDetect.push("Horizontal", "Vertical");
+    } else if (this.props.alignment) {
+      // Type assertion safe here because we know it's not "Both" due to detectBothAlignments check
+      alignmentsToDetect.push(
+        this.props.alignment as
+          | "Horizontal"
+          | "HorizontalUpward"
+          | "HorizontalDownward"
+          | "Vertical"
       );
     }
 
+    // Create detector ViroARPlane components for each alignment type
+    // These don't have anchorId set initially, but will discover and track planes
+    // We add visual children based on detected plane data
+    const detectorsPerAlignment = 25; // 25 detectors per alignment type
+
+    alignmentsToDetect.forEach((alignment) => {
+      for (let i = 0; i < detectorsPerAlignment; i++) {
+        const detectorKey = `${_planePrefix}detector_${alignment}_${i}`;
+
+        // Check if this detector has discovered a plane
+        // We'll match by checking if any plane in foundARPlanes has this alignment
+        // and hasn't been assigned to a previous detector
+        // Note: ARCore returns "HorizontalUpward", "HorizontalDownward", etc.
+        // so we need to check if alignment starts with the requested type
+        const detectedPlanes = Array.from(
+          this.state.foundARPlanes.entries()
+        ).filter(([_id, plane]) => {
+          if (alignment === "Horizontal") {
+            return plane.alignment.includes("Horizontal");
+          } else if (alignment === "Vertical") {
+            return plane.alignment.includes("Vertical");
+          }
+          return plane.alignment === alignment;
+        });
+
+        const planeData = detectedPlanes[i]?.[1];
+        const anchorId = detectedPlanes[i]?.[0];
+        const hasPlaneData = !!planeData;
+
+        // Extract visual rendering data if plane detected
+        let visualElement = null;
+        if (hasPlaneData) {
+          const isSelected = this.state.selectedPlaneId === anchorId;
+          const surfaceWidth = planeData.width || 0.5;
+          const surfaceHeight = planeData.height || 0.5;
+          const vertices3D = (planeData as any).vertices;
+
+          // Convert 3D vertices to 2D based on plane alignment
+          // ViroARPlane provides vertices in the plane's LOCAL coordinate system
+          // where the plane is always in the XZ plane. The anchor handles world orientation.
+          // Always extract [x, z] since vertices are in the plane's local XZ plane
+          const vertices2D =
+            vertices3D && vertices3D.length >= 3
+              ? vertices3D.map(
+                  ([x, _y, z]: [number, number, number]): [number, number] => [
+                    x,
+                    z,
+                  ]
+                )
+              : undefined;
+
+          // Rotation for ViroPolygon:
+          // ViroPolygon renders in XY plane by default, vertices are provided in XZ
+          // Need to rotate to map XZ plane to XY rendering plane
+          const polygonRotation: [number, number, number] = [-90, 0, 0];
+
+          const isVisible = this.state.selectedPlaneId === null || isSelected;
+
+          // Use actual plane shapes (ViroPolygon with vertices)
+          const forceQuadForAndroid = false; // Now using actual shapes on Android
+
+          const useActualShape =
+            !forceQuadForAndroid &&
+            this.props.useActualShape !== false &&
+            vertices2D &&
+            vertices2D.length >= 3;
+
+          const finalOpacity = isSelected ? 0 : isVisible ? 1 : 0;
+
+          visualElement = useActualShape ? (
+            <ViroPolygon
+              key={`polygon-${anchorId}`}
+              vertices={vertices2D!}
+              holes={[]}
+              materials={["ViroARPlaneSelector_Translucent"]}
+              {...(!this.props.disableClickSelection && {
+                onClickState: (clickState, position, source) =>
+                  this._getOnClickSurface(anchorId, {
+                    clickState,
+                    position,
+                    source,
+                  }),
+              })}
+              position={[0, 0, 0]}
+              rotation={polygonRotation}
+              opacity={finalOpacity}
+            />
+          ) : (
+            <ViroQuad
+              key={`quad-${anchorId}`}
+              materials={["ViroARPlaneSelector_Translucent"]}
+              {...(!this.props.disableClickSelection && {
+                onClickState: (clickState, position, source) =>
+                  this._getOnClickSurface(anchorId, {
+                    clickState,
+                    position,
+                    source,
+                  }),
+              })}
+              position={[0, 0, 0]}
+              width={surfaceWidth}
+              height={surfaceHeight}
+              rotation={polygonRotation}
+              opacity={finalOpacity}
+            />
+          );
+        }
+
+        arPlanes.push(
+          <ViroARPlane
+            key={detectorKey}
+            minWidth={this.props.minWidth || 0}
+            minHeight={this.props.minHeight || 0}
+            alignment={alignment}
+            anchorId={hasPlaneData ? anchorId : undefined}
+            onAnchorFound={(anchor) => {
+              this._onARPlaneUpdated(anchor);
+            }}
+            onAnchorUpdated={(anchor) => {
+              this._onARPlaneUpdated(anchor);
+            }}
+          >
+            {visualElement}
+            {hasPlaneData && this.props.children && (
+              <ViroNode
+                opacity={this.state.selectedPlaneId === anchorId ? 1 : 0}
+              >
+                {this.props.children}
+              </ViroNode>
+            )}
+          </ViroARPlane>
+        );
+      }
+    });
+
     return arPlanes;
   }
 
-  _getOnClickSurface = (index: number, event: ViroClickStateEvent) => {
+  _getOnClickSurface = (anchorId: string, event: ViroClickStateEvent) => {
     if (event.clickState < 3) {
       return;
     }
 
     // Get the plane data before updating state to avoid race conditions
-    const selectedPlane = this.state.foundARPlanes[index];
+    const selectedPlane = this.state.foundARPlanes.get(anchorId);
     if (!selectedPlane) {
       console.warn(
         "ViroARPlaneSelector: Cannot select plane - plane data not found"
@@ -150,32 +251,54 @@ export class ViroARPlaneSelector extends React.Component<Props, State> {
     }
 
     // Update state and call callback with the captured data
-    this.setState({ selectedSurface: index }, () => {
+    this.setState({ selectedPlaneId: anchorId }, () => {
       this._onPlaneSelected(selectedPlane);
     });
   };
 
-  _onARPlaneUpdated = (index: number) => {
-    return (updateMap: ViroPlaneUpdatedMap) => {
-      let newPlanes = [...this.state.foundARPlanes];
-      newPlanes[index] = updateMap;
-      this.setState({
-        foundARPlanes: newPlanes,
-        arPlaneSizes: this.state.arPlaneSizes,
-      });
+  _onARPlaneUpdated = (anchor: any) => {
+    if (!anchor.anchorId) {
+      console.warn("ViroARPlaneSelector: Anchor missing anchorId");
+      return;
+    }
+
+    const updateMap: ViroPlaneUpdatedMap = {
+      anchorId: anchor.anchorId,
+      type: anchor.type || "plane",
+      position: anchor.position,
+      rotation: anchor.rotation,
+      scale: anchor.scale,
+      center: anchor.center,
+      width: anchor.width,
+      height: anchor.height,
+      alignment: anchor.alignment,
+      classification: anchor.classification,
+      vertices: anchor.vertices,
     };
+
+    // Update or add plane in Map
+    this.setState((prevState) => {
+      const newPlanes = new Map(prevState.foundARPlanes);
+      newPlanes.set(anchor.anchorId, updateMap as ViroARPlaneType);
+      return { foundARPlanes: newPlanes };
+    });
+
+    // Call validation callback if provided
+    if (this.props.onPlaneDetected) {
+      this.props.onPlaneDetected(updateMap);
+    }
   };
 
   _onPlaneSelected = (updateMap: ViroPlaneUpdatedMap) => {
     this.props.onPlaneSelected && this.props.onPlaneSelected(updateMap);
   };
 
-  /*
-  This function allows the user to reset the surface and select a new plane.
-  */
+  /**
+   * This function allows the user to reset the surface and select a new plane.
+   */
   reset = () => {
     this.setState({
-      selectedSurface: -1,
+      selectedPlaneId: null,
     });
   };
 }
@@ -183,6 +306,9 @@ export class ViroARPlaneSelector extends React.Component<Props, State> {
 ViroMaterials.createMaterials({
   ViroARPlaneSelector_Translucent: {
     lightingModel: "Constant",
-    diffuseColor: "#88888888",
+    diffuseColor: "rgba(0, 122, 255, 0.5)", // Bright blue with 50% opacity for better visibility
+    blendMode: "Alpha",
+    cullMode: "None", // Render both sides for better Android compatibility
+    writesToDepthBuffer: false,
   },
 });

package/components/Material/ViroMaterials.ts

@@ -16,8 +16,10 @@ import {
   NativeModules,
   processColor,
 } from "react-native";
+
 // @ts-ignore
-import assetRegistry from "react-native/Libraries/Image/AssetRegistry";
+import { getAssetByID } from "react-native/Libraries/Image/AssetRegistry";
+
 // @ts-ignore
 import resolveAssetSource from "react-native/Libraries/Image/resolveAssetSource";
 import { ViroSource } from "../Types/ViroUtils";
@@ -104,7 +106,7 @@ export class ViroMaterials {
           } else {
             var assetType = "unknown";
             if (typeof material[prop] !== "object") {
-              var asset = assetRegistry.getAssetByID(material[prop]);
+              var asset = getAssetByID(material[prop]);
               if (asset) {
                 assetType = asset.type;
               }

package/components/Types/ViroEvents.ts

@@ -212,6 +212,55 @@ export type ViroAnimatedComponentFinishEvent = {};
 /** ===========================================================================
  * Viro AR Anchor Events
  * ============================================================================ */
+
+/**
+ * Classification of detected planes.
+ * iOS 12+ provides ML-based classification via ARKit.
+ * Android provides basic inference from plane orientation.
+ */
+export type ViroARPlaneClassification =
+  | "None"
+  | "Wall"
+  | "Floor"
+  | "Ceiling"
+  | "Table"
+  | "Seat"
+  | "Door"
+  | "Window"
+  | "Unknown";
+
+/**
+ * Alignment of detected planes with respect to gravity.
+ */
+export type ViroARPlaneAlignment =
+  | "Horizontal"
+  | "HorizontalUpward"
+  | "HorizontalDownward"
+  | "Vertical";
+
+/**
+ * Represents an AR anchor detected in the real world.
+ */
+export type ViroAnchor = {
+  anchorId: string;
+  type: "anchor" | "plane" | "image";
+  position: [number, number, number];
+  rotation: [number, number, number]; // In degrees
+  scale: [number, number, number];
+  // Plane-specific properties (present when type === "plane")
+  center?: [number, number, number];
+  width?: number;
+  height?: number;
+  alignment?: ViroARPlaneAlignment;
+  classification?: ViroARPlaneClassification;
+  vertices?: Array<[number, number, number]>;
+  // Image-specific properties (present when type === "image")
+  trackingMethod?: string;
+};
+
+export type ViroAnchorFoundMap = ViroAnchor;
+export type ViroAnchorUpdatedMap = ViroAnchor;
+
 export type ViroARAnchorRemovedEvent = {
   anchor: ViroAnchor;
 };
@@ -223,15 +272,11 @@ export type ViroARAnchorFoundEvent = {
   anchorFoundMap: ViroAnchorFoundMap;
   anchor: ViroAnchor;
 };
-export type ViroAnchor = any;
-
-export type ViroAnchorFoundMap = any;
-export type ViroAnchorUpdatedMap = any;
 
 /** ===========================================================================
  * Viro AR Plane Events
  * ============================================================================ */
-export type ViroPlaneUpdatedMap = any;
+export type ViroPlaneUpdatedMap = ViroAnchor;
 export type ViroPlaneUpdatedEvent = any;
 export type ViroARPlaneSizes = any;
 

package/components/Utilities/ViroVersion.ts

@@ -1 +1 @@
-export const VIRO_VERSION = "2.44.0";
+export const VIRO_VERSION = "2.44.2";

package/dist/components/AR/ViroARPlaneSelector.d.ts

@@ -8,21 +8,22 @@
  *
  * @providesModule ViroARPlaneSelector
  */
-import { ViroARPlaneSizes, ViroClickStateEvent, ViroPlaneUpdatedMap } from "../Types/ViroEvents";
+import { ViroClickStateEvent, ViroPlaneUpdatedMap } from "../Types/ViroEvents";
 import { ViroARPlaneType, ViroNativeRef } from "../Types/ViroUtils";
 import * as React from "react";
-import { ViroCommonProps, ViroObjectProps } from "./ViroCommonProps";
-type Props = ViroCommonProps & ViroObjectProps & {
-    maxPlanes?: number;
+type Props = {
     minHeight?: number;
     minWidth?: number;
-    alignment?: "Horizontal" | "HorizontalUpward" | "HorizontalDownward" | "Vertical";
+    alignment?: "Horizontal" | "HorizontalUpward" | "HorizontalDownward" | "Vertical" | "Both";
     onPlaneSelected?: (updateMap: ViroPlaneUpdatedMap) => void;
+    onPlaneDetected?: (updateMap: ViroPlaneUpdatedMap) => boolean;
+    disableClickSelection?: boolean;
+    useActualShape?: boolean;
+    children?: React.ReactNode;
 };
 type State = {
-    selectedSurface: number;
-    foundARPlanes: ViroARPlaneType[];
-    arPlaneSizes: ViroARPlaneSizes;
+    selectedPlaneId: string | null;
+    foundARPlanes: Map<string, ViroARPlaneType>;
 };
 /**
  * This component wraps the logic required to enable user selection
@@ -31,16 +32,15 @@ type State = {
  */
 export declare class ViroARPlaneSelector extends React.Component<Props, State> {
     _component: ViroNativeRef;
-    state: {
-        selectedSurface: number;
-        foundARPlanes: ViroARPlaneType[];
-        arPlaneSizes: number[];
-    };
+    state: State;
     render(): React.JSX.Element;
     _getARPlanes(): React.JSX.Element[];
-    _getOnClickSurface: (index: number, event: ViroClickStateEvent) => void;
-    _onARPlaneUpdated: (index: number) => (updateMap: ViroPlaneUpdatedMap) => void;
+    _getOnClickSurface: (anchorId: string, event: ViroClickStateEvent) => void;
+    _onARPlaneUpdated: (anchor: any) => void;
     _onPlaneSelected: (updateMap: ViroPlaneUpdatedMap) => void;
+    /**
+     * This function allows the user to reset the surface and select a new plane.
+     */
     reset: () => void;
 }
 export {};