@reactvision/react-viro 2.43.0 → 2.43.1

package/fabric-interop/components/AR/ViroARPlaneSelector.tsx

@@ -0,0 +1,185 @@
+/**
+ * ViroARPlaneSelector
+ *
+ * This component wraps the logic required to enable user selection
+ * of an AR plane. This currently only allows for 1 plane to be selected,
+ * but could easily be modified to allow for more planes.
+ */
+
+import * as React from "react";
+import { ViroNode } from "../ViroNode";
+import { ViroQuad } from "../ViroQuad";
+import ViroMaterials from "../Material/ViroMaterials";
+import {
+  ViroPlaneUpdatedMap,
+  ViroARPlaneSizes,
+  ViroClickStateEvent,
+} from "../../components/Types/ViroEvents";
+import {
+  ViroARPlaneType,
+  ViroNativeRef,
+} from "../../components/Types/ViroUtils";
+import {
+  ViroCommonProps,
+  ViroObjectProps,
+} from "../../components/AR/ViroCommonProps";
+import { ViroARPlane } from "../AR/ViroARPlane";
+
+const _maxPlanes = 15;
+const _planePrefix = "ViroARPlaneSelector_Plane_";
+
+type Props = ViroCommonProps &
+  ViroObjectProps & {
+    maxPlanes?: number;
+    minHeight?: number;
+    minWidth?: number;
+    alignment?:
+      | "Horizontal"
+      | "HorizontalUpward"
+      | "HorizontalDownward"
+      | "Vertical";
+
+    onPlaneSelected?: (updateMap: ViroPlaneUpdatedMap) => void;
+  };
+
+type State = {
+  selectedSurface: number;
+  foundARPlanes: ViroARPlaneType[];
+  arPlaneSizes: ViroARPlaneSizes;
+};
+
+/**
+ * This component wraps the logic required to enable user selection
+ * of an AR plane. This currently only allows for 1 plane to be selected,
+ * but could easily be modified to allow for more planes.
+ */
+export class ViroARPlaneSelector extends React.Component<Props, State> {
+  _component: ViroNativeRef = null;
+  state = {
+    selectedSurface: -1,
+    foundARPlanes: [] as ViroARPlaneType[],
+    arPlaneSizes: [] as number[],
+  };
+
+  render() {
+    return <ViroNode>{this._getARPlanes()}</ViroNode>;
+  }
+
+  _getARPlanes() {
+    // Always render a fixed number of planes, controlling visibility instead of conditional rendering
+    let arPlanes: 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={(event) => this._getOnClickSurface(i, event)}
+            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>
+      );
+    }
+
+    return arPlanes;
+  }
+
+  _getOnClickSurface = (index: number, event: ViroClickStateEvent) => {
+    if (event.clickState < 3) {
+      return;
+    }
+
+    // Get the plane data before updating state to avoid race conditions
+    const selectedPlane = this.state.foundARPlanes[index];
+    if (!selectedPlane) {
+      console.warn(
+        "ViroARPlaneSelector: Cannot select plane - plane data not found"
+      );
+      return;
+    }
+
+    // Update state and call callback with the captured data
+    this.setState({ selectedSurface: index }, () => {
+      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,
+      });
+    };
+  };
+
+  _onPlaneSelected = (updateMap: ViroPlaneUpdatedMap) => {
+    this.props.onPlaneSelected && this.props.onPlaneSelected(updateMap);
+  };
+
+  /*
+  This function allows the user to reset the surface and select a new plane.
+  */
+  reset = () => {
+    this.setState({
+      selectedSurface: -1,
+    });
+  };
+}
+
+// Register the translucent material for the plane selector
+ViroMaterials.registerMaterials({
+  ViroARPlaneSelector_Translucent: {
+    lightingModel: "Constant",
+    diffuseColor: "#88888888",
+  },
+});

package/fabric-interop/components/AR/ViroARTrackingTargets.ts

@@ -0,0 +1,108 @@
+/**
+ * ViroARTrackingTargets
+ *
+ * A utility for registering AR tracking targets.
+ */
+
+import { getNativeViro } from "../ViroGlobal";
+
+// Tracking target types
+export interface ViroARImageTarget {
+  source: { uri: string } | number;
+  orientation: "Up" | "Down" | "Left" | "Right";
+  physicalWidth?: number;
+  type?: "Image";
+}
+
+export interface ViroARObjectTarget {
+  source: { uri: string } | number;
+  scale?: [number, number, number];
+  type: "Object";
+}
+
+export type ViroARTrackingTarget = ViroARImageTarget | ViroARObjectTarget;
+
+// Tracking target registry
+const targets: Record<string, ViroARTrackingTarget> = {};
+
+/**
+ * Register AR tracking targets with the Viro system.
+ * @param targetMap A map of target names to target definitions.
+ */
+export function registerTargets(
+  targetMap: Record<string, ViroARTrackingTarget>
+): void {
+  // Add targets to the registry
+  Object.entries(targetMap).forEach(([name, definition]) => {
+    targets[name] = definition;
+  });
+
+  // Register with native code if available
+  const nativeViro = getNativeViro();
+  if (nativeViro) {
+    nativeViro.setViroARImageTargets(targets);
+  }
+}
+
+/**
+ * Get a tracking target by name.
+ * @param name The name of the tracking target.
+ * @returns The tracking target definition, or undefined if not found.
+ */
+export function getTarget(name: string): ViroARTrackingTarget | undefined {
+  return targets[name];
+}
+
+/**
+ * Get all registered tracking targets.
+ * @returns A map of tracking target names to tracking target definitions.
+ */
+export function getAllTargets(): Record<string, ViroARTrackingTarget> {
+  return { ...targets };
+}
+
+/**
+ * Clear all registered tracking targets.
+ */
+export function clearTargets(): void {
+  // Clear the registry
+  Object.keys(targets).forEach((key) => {
+    delete targets[key];
+  });
+
+  // Clear native code if available
+  const nativeViro = getNativeViro();
+  if (nativeViro) {
+    nativeViro.setViroARImageTargets({});
+  }
+}
+
+/**
+ * Delete a specific tracking target.
+ * @param targetName The name of the tracking target to delete.
+ */
+export function deleteTarget(targetName: string): void {
+  // Remove the target from the registry
+  delete targets[targetName];
+
+  // Update native code if available
+  const nativeViro = getNativeViro();
+  if (nativeViro) {
+    // Since there's no direct method to delete a single target,
+    // we re-register all remaining targets
+    nativeViro.setViroARImageTargets(targets);
+  }
+}
+
+// Export the tracking targets object as the default export
+const ViroARTrackingTargets = {
+  registerTargets,
+  getTarget,
+  getAllTargets,
+  clearTargets,
+  deleteTarget,
+  // Add createTargets as an alias for registerTargets for backward compatibility
+  createTargets: registerTargets,
+};
+
+export default ViroARTrackingTargets;

package/fabric-interop/components/AR/ViroCommonProps.ts

@@ -0,0 +1,140 @@
+/**
+ * ViroCommonProps
+ *
+ * Common props for AR components.
+ */
+
+import { ViewProps } from "react-native";
+import { ViroEventHandler } from "../ViroUtils";
+import {
+  ViroAnchor,
+  ViroAnchorFoundMap,
+  ViroAnchorUpdatedMap,
+  ViroClickState,
+  ViroErrorEvent,
+  ViroPinchState,
+  ViroRotateState,
+} from "../Types/ViroEvents";
+import {
+  Viro3DPoint,
+  ViroPhysicsBody,
+  ViroRotation,
+  ViroScale,
+  ViroSource,
+} from "../Types/ViroUtils";
+
+export type ViroCommonProps = ViewProps & {
+  target?: string;
+
+  pauseUpdates?: boolean;
+  renderingOrder?: number;
+  visible?: boolean;
+  opacity?: number;
+  ignoreEventHandling?: boolean;
+  dragType?:
+    | "FixedDistance"
+    | "FixedDistanceOrigin"
+    | "FixedToWorld"
+    | "FixedToPlane";
+  dragPlane?: {
+    planePoint: Viro3DPoint;
+    planeNormal: Viro3DPoint;
+    maxDistance: number;
+  };
+
+  onHover?: (
+    isHovering: boolean,
+    position: Viro3DPoint,
+    source: ViroSource
+  ) => void;
+  onClick?: (position: Viro3DPoint, source: ViroSource) => void;
+  onClickState?: (
+    clickState: ViroClickState,
+    position: Viro3DPoint,
+    source: ViroSource
+  ) => void;
+  onTouch?: (
+    touchState: any,
+    touchPos: Viro3DPoint,
+    source: ViroSource
+  ) => void;
+  onScroll?: (scrollPos: Viro3DPoint, source: ViroSource) => void;
+  onSwipe?: (swipeState: any, source: ViroSource) => void;
+  onDrag?: (dragToPos: Viro3DPoint, source: ViroSource) => void;
+  onPinch?: (
+    pinchState: ViroPinchState,
+    scaleFactor: number,
+    source: ViroSource
+  ) => void;
+  onRotate?: (
+    rotateState: ViroRotateState,
+    rotationFactor: number,
+    source: ViroSource
+  ) => void;
+  onFuse?:
+    | { callback: (source: any) => void; timeToFuse?: number }
+    | ((source: any) => void);
+  onCollision?: (
+    viroTag: string,
+    collidedPoint: Viro3DPoint,
+    collidedNormal: Viro3DPoint
+  ) => void;
+  viroTag?: string;
+  onAnchorFound?: (anchorFoundMap: ViroAnchorFoundMap) => void;
+  onAnchorUpdated?: (anchorUpdatedMap: ViroAnchorUpdatedMap) => void;
+  onAnchorRemoved?: ((event?: ViroAnchor) => void) | (() => void);
+  onError?: ViroEventHandler;
+};
+
+export type ViroObjectProps = {
+  position?: Viro3DPoint;
+  scale?: ViroScale;
+  rotation?: ViroRotation;
+  scalePivot?: Viro3DPoint;
+  rotationPivot?: Viro3DPoint;
+  renderingOrder?: number;
+  visible?: boolean;
+  opacity?: number;
+  width?: number;
+  height?: number;
+  length?: number;
+  materials?: ViroSource[] | string | string[];
+  animation?: {
+    name?: string;
+    delay?: number;
+    loop?: boolean;
+    onStart?: () => void;
+    onFinish?: () => void;
+    run?: boolean;
+    interruptible?: boolean;
+  };
+  transformBehaviors?: string | string[];
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+
+  onTransformUpdate?: (position: Viro3DPoint) => void;
+
+  /**
+   * Enables high accuracy event collision checks for this object.
+   * This can be useful for complex 3D objects where the default
+   * checking method of bounding boxes do not provide adequate
+   * collision detection coverage.
+   *
+   * NOTE: Enabling high accuracy event collision checks has a high
+   * performance cost and should be used sparingly / only when
+   * necessary.
+   *
+   * Flag is set to false by default.
+   */
+  highAccuracyEvents?: boolean;
+  /**
+   * DEPRECATION WARNING - highAccuracyGaze has been deprecated, please use highAccuracyEvents instead
+   * @deprecated
+   */
+  highAccuracyGaze?: boolean;
+  physicsBody?: ViroPhysicsBody;
+
+  onCollision?: () => void;
+  onAnimationStartViro?: () => void;
+  onAnimationFinishViro?: () => void;
+};

package/fabric-interop/components/Animation/ViroAnimations.ts

@@ -0,0 +1,96 @@
+/**
+ * ViroAnimations
+ *
+ * A utility for creating and managing animations.
+ */
+
+import { getNativeViro } from "../ViroGlobal";
+
+// Animation types
+export type ViroAnimationTimingFunction =
+  | "Linear"
+  | "EaseIn"
+  | "EaseOut"
+  | "EaseInEaseOut"
+  | "Bounce";
+
+export interface ViroAnimationDefinition {
+  properties: Record<string, any>;
+  duration?: number;
+  delay?: number;
+  loop?: boolean;
+  easing?: ViroAnimationTimingFunction;
+}
+
+// Animation registry
+const animations: Record<string, ViroAnimationDefinition> = {};
+
+/**
+ * Register animations with the Viro system.
+ * @param animationMap A map of animation names to animation definitions.
+ */
+export function registerAnimations(
+  animationMap: Record<string, ViroAnimationDefinition>
+): void {
+  // Add animations to the registry
+  Object.entries(animationMap).forEach(([name, definition]) => {
+    animations[name] = definition;
+
+    // Register with native code if available
+    const nativeViro = getNativeViro();
+    if (nativeViro) {
+      nativeViro.createViroAnimation(name, definition);
+    }
+  });
+}
+
+/**
+ * Get an animation by name.
+ * @param name The name of the animation.
+ * @returns The animation definition, or undefined if not found.
+ */
+export function getAnimation(
+  name: string
+): ViroAnimationDefinition | undefined {
+  return animations[name];
+}
+
+/**
+ * Get all registered animations.
+ * @returns A map of animation names to animation definitions.
+ */
+export function getAllAnimations(): Record<string, ViroAnimationDefinition> {
+  return { ...animations };
+}
+
+/**
+ * Execute an animation on a node.
+ * @param nodeId The ID of the node to animate.
+ * @param animationName The name of the animation to execute.
+ * @param options Options for the animation execution.
+ */
+export function executeAnimation(
+  nodeId: string,
+  animationName: string,
+  options: {
+    loop?: boolean;
+    delay?: number;
+    onStart?: () => void;
+    onFinish?: () => void;
+  } = {}
+): void {
+  const nativeViro = getNativeViro();
+  if (!nativeViro) return;
+
+  nativeViro.executeViroAnimation(nodeId, animationName, options);
+}
+
+// Export the animations object as the default export
+const ViroAnimations = {
+  registerAnimations,
+  getAnimation,
+  getAllAnimations,
+  executeAnimation,
+};
+
+export default ViroAnimations;

package/fabric-interop/components/Material/ViroMaterials.ts

@@ -0,0 +1,127 @@
+/**
+ * ViroMaterials
+ *
+ * A utility for creating and managing materials.
+ */
+
+import { getNativeViro } from "../ViroGlobal";
+
+// Material types
+export interface ViroMaterialDefinition {
+  // Basic properties
+  diffuseColor?: string;
+  diffuseTexture?: { uri: string } | number;
+
+  // PBR properties
+  roughness?: number;
+  metalness?: number;
+  roughnessMap?: { uri: string } | number;
+  metalnessMap?: { uri: string } | number;
+  normalMap?: { uri: string } | number;
+
+  // Lighting properties
+  lightingModel?: "Constant" | "Lambert" | "Blinn" | "Phong" | "Physical";
+  shininess?: number;
+  fresnelExponent?: number;
+
+  // Transparency properties
+  transparency?: number;
+
+  // Texture properties
+  wrapS?: "Clamp" | "Repeat" | "Mirror";
+  wrapT?: "Clamp" | "Repeat" | "Mirror";
+
+  // Shader properties
+  shader?: string;
+  shaderParams?: Record<string, any>;
+}
+
+// Material registry
+const materials: Record<string, ViroMaterialDefinition> = {};
+
+/**
+ * Register materials with the Viro system.
+ * @param materialMap A map of material names to material definitions.
+ */
+export function registerMaterials(
+  materialMap: Record<string, ViroMaterialDefinition>
+): void {
+  // Add materials to the registry
+  Object.entries(materialMap).forEach(([name, definition]) => {
+    materials[name] = definition;
+
+    // Register with native code if available
+    const nativeViro = getNativeViro();
+    if (nativeViro) {
+      nativeViro.createViroMaterial(name, definition);
+    }
+  });
+}
+
+/**
+ * Get a material by name.
+ * @param name The name of the material.
+ * @returns The material definition, or undefined if not found.
+ */
+export function getMaterial(name: string): ViroMaterialDefinition | undefined {
+  return materials[name];
+}
+
+/**
+ * Get all registered materials.
+ * @returns A map of material names to material definitions.
+ */
+export function getAllMaterials(): Record<string, ViroMaterialDefinition> {
+  return { ...materials };
+}
+
+/**
+ * Update a material.
+ * @param name The name of the material to update.
+ * @param definition The new material definition.
+ */
+export function updateMaterial(
+  name: string,
+  definition: ViroMaterialDefinition
+): void {
+  // Update the registry
+  materials[name] = { ...materials[name], ...definition };
+
+  // Update native code if available
+  const nativeViro = getNativeViro();
+  if (nativeViro) {
+    nativeViro.updateViroMaterial(name, definition);
+  }
+}
+
+/**
+ * Delete materials from the Viro system.
+ * @param materialNames An array of material names to delete.
+ */
+export function deleteMaterials(materialNames: string[]): void {
+  // Remove materials from the registry
+  materialNames.forEach((name) => {
+    delete materials[name];
+  });
+
+  // Note: In the Fabric implementation, there's no direct native method to delete materials
+  // This implementation just removes them from the JS registry
+  // If a native method becomes available in the future, it can be called here
+  console.warn(
+    "ViroMaterials.deleteMaterials: Material deletion from native code is not supported in the Fabric implementation. " +
+      "Materials are only removed from the JavaScript registry."
+  );
+}
+
+// Export the materials object as the default export
+const ViroMaterials = {
+  registerMaterials,
+  getMaterial,
+  getAllMaterials,
+  updateMaterial,
+  deleteMaterials,
+  // Add createMaterials as an alias for registerMaterials for backward compatibility
+  createMaterials: registerMaterials,
+};
+
+export default ViroMaterials;