@reactvision/react-viro 2.42.0 → 2.43.1

package/fabric-interop/components/ViroSpatialSound.tsx

@@ -0,0 +1,81 @@
+/**
+ * ViroSpatialSound
+ *
+ * A component for playing 3D positioned audio in the scene.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroSpatialSoundProps extends ViroCommonProps {
+  // Audio source
+  source: { uri: string } | number;
+
+  // Audio properties
+  paused?: boolean;
+  volume?: number;
+  muted?: boolean;
+  loop?: boolean;
+
+  // Spatial properties
+  minDistance?: number;
+  maxDistance?: number;
+  rolloffModel?: "linear" | "exponential" | "logarithmic";
+  distanceRolloffFactor?: number;
+
+  // Events
+  onFinish?: () => void;
+  onError?: (error: string) => void;
+}
+
+/**
+ * ViroSpatialSound is a component for playing 3D positioned audio in the scene.
+ * It provides spatial audio that changes based on the listener's position relative to the sound source.
+ */
+export const ViroSpatialSound: React.FC<ViroSpatialSoundProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    source: props.source,
+    paused: props.paused,
+    volume: props.volume,
+    muted: props.muted,
+    loop: props.loop,
+    minDistance: props.minDistance,
+    maxDistance: props.maxDistance,
+    rolloffModel: props.rolloffModel,
+    distanceRolloffFactor: props.distanceRolloffFactor,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("spatialSound", nativeProps);
+
+  
+  // Register event handlers using our new event system
+  useViroEventListeners(nodeId, {
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onClickState: props.onClickState,
+    onTouch: props.onTouch,
+    onScroll: props.onScroll,
+    onSwipe: props.onSwipe,
+    onDrag: props.onDrag,
+    onPinch: props.onPinch,
+    onRotate: props.onRotate,
+    onFuse:
+      typeof props.onFuse === "function"
+        ? props.onFuse
+        : props.onFuse?.callback,
+    onCollision: props.onCollision,
+    onTransformUpdate: props.onTransformUpdate,
+  });
+
+  // Component doesn't have children, so just return null
+  return null;
+};

package/fabric-interop/components/ViroSphere.tsx

@@ -0,0 +1,75 @@
+/**
+ * ViroSphere
+ *
+ * A 3D sphere component with customizable radius and materials.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  useViroEventListeners,
+  convertCommonProps,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroSphereProps extends ViroCommonProps {
+  // Sphere-specific props
+  radius?: number;
+  facesCount?: number;
+  segmentCount?: number;
+  widthSegmentCount?: number;
+  heightSegmentCount?: number;
+  materials?: string | string[];
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+
+  // Physics props
+  highAccuracyEvents?: boolean;
+}
+
+/**
+ * ViroSphere is a 3D sphere component with customizable radius and materials.
+ */
+export const ViroSphere: React.FC<ViroSphereProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    radius: props.radius ?? 1,
+    facesCount: props.facesCount,
+    segmentCount: props.segmentCount,
+    widthSegmentCount: props.widthSegmentCount,
+    heightSegmentCount: props.heightSegmentCount,
+    materials: props.materials,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+    highAccuracyEvents: props.highAccuracyEvents,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("sphere", nativeProps);
+
+  // Register event handlers using our new event system
+  useViroEventListeners(nodeId, {
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onClickState: props.onClickState,
+    onTouch: props.onTouch,
+    onScroll: props.onScroll,
+    onSwipe: props.onSwipe,
+    onDrag: props.onDrag,
+    onPinch: props.onPinch,
+    onRotate: props.onRotate,
+    onFuse:
+      typeof props.onFuse === "function"
+        ? props.onFuse
+        : props.onFuse?.callback,
+    onCollision: props.onCollision,
+    onTransformUpdate: props.onTransformUpdate,
+  });
+
+  // Sphere doesn't have children, so just return null
+  return null;
+};

package/fabric-interop/components/ViroSpinner.tsx

@@ -0,0 +1,63 @@
+/**
+ * ViroSpinner
+ *
+ * A component for displaying loading spinners in 3D space.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroSpinnerProps extends ViroCommonProps {
+  // Spinner properties
+  type?: "light" | "dark";
+  size?: "small" | "large";
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+}
+
+/**
+ * ViroSpinner is a component for displaying loading spinners in 3D space.
+ * It provides visual feedback during loading operations.
+ */
+export const ViroSpinner: React.FC<ViroSpinnerProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    type: props.type,
+    size: props.size,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("image", nativeProps);
+  // Register event handlers using our new event system
+  useViroEventListeners(nodeId, {
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onClickState: props.onClickState,
+    onTouch: props.onTouch,
+    onScroll: props.onScroll,
+    onSwipe: props.onSwipe,
+    onDrag: props.onDrag,
+    onPinch: props.onPinch,
+    onRotate: props.onRotate,
+    onFuse:
+      typeof props.onFuse === "function"
+        ? props.onFuse
+        : props.onFuse?.callback,
+    onCollision: props.onCollision,
+    onTransformUpdate: props.onTransformUpdate,
+  });
+
+  // Component doesn't have children, so just return null
+  return null;
+};

package/fabric-interop/components/ViroSpotLight.tsx

@@ -0,0 +1,86 @@
+/**
+ * ViroSpotLight
+ *
+ * A component for adding spot lighting to a scene.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroSpotLightProps extends ViroCommonProps {
+  // Light properties
+  color?: string;
+  intensity?: number;
+  temperature?: number;
+  direction?: [number, number, number];
+  innerAngle?: number;
+  outerAngle?: number;
+  attenuationStartDistance?: number;
+  attenuationEndDistance?: number;
+  influenceBitMask?: number;
+
+  // Shadow properties
+  castsShadow?: boolean;
+  shadowOpacity?: number;
+  shadowMapSize?: number;
+  shadowBias?: number;
+  shadowNearZ?: number;
+  shadowFarZ?: number;
+}
+
+/**
+ * ViroSpotLight is a component for adding spot lighting to a scene.
+ * Spot light is a type of light that illuminates objects in a cone-shaped area,
+ * similar to a flashlight or stage spotlight.
+ */
+export const ViroSpotLight: React.FC<ViroSpotLightProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    color: props.color,
+    intensity: props.intensity,
+    temperature: props.temperature,
+    direction: props.direction,
+    innerAngle: props.innerAngle,
+    outerAngle: props.outerAngle,
+    attenuationStartDistance: props.attenuationStartDistance,
+    attenuationEndDistance: props.attenuationEndDistance,
+    influenceBitMask: props.influenceBitMask,
+    castsShadow: props.castsShadow,
+    shadowOpacity: props.shadowOpacity,
+    shadowMapSize: props.shadowMapSize,
+    shadowBias: props.shadowBias,
+    shadowNearZ: props.shadowNearZ,
+    shadowFarZ: props.shadowFarZ,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("spotLight", nativeProps);
+  // Register event handlers using our new event system
+  useViroEventListeners(nodeId, {
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onClickState: props.onClickState,
+    onTouch: props.onTouch,
+    onScroll: props.onScroll,
+    onSwipe: props.onSwipe,
+    onDrag: props.onDrag,
+    onPinch: props.onPinch,
+    onRotate: props.onRotate,
+    onFuse:
+      typeof props.onFuse === "function"
+        ? props.onFuse
+        : props.onFuse?.callback,
+    onCollision: props.onCollision,
+    onTransformUpdate: props.onTransformUpdate,
+  });
+
+  // Component doesn't have children, so just return null
+  return null;
+};

package/fabric-interop/components/ViroSurface.tsx

@@ -0,0 +1,80 @@
+/**
+ * ViroSurface
+ *
+ * A component for rendering a flat surface in 3D space.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroSurfaceProps extends ViroCommonProps {
+  // Surface properties
+  width?: number;
+  height?: number;
+  uvCoordinates?: [
+    [number, number],
+    [number, number],
+    [number, number],
+    [number, number],
+  ];
+
+  // Visual properties
+  materials?: string | string[];
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+
+  // Physics props
+  arShadowReceiver?: boolean;
+}
+
+/**
+ * ViroSurface is a component for rendering a flat surface in 3D space.
+ * It's similar to ViroQuad but with additional properties for more flexibility.
+ */
+export const ViroSurface: React.FC<ViroSurfaceProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    width: props.width ?? 1,
+    height: props.height ?? 1,
+    uvCoordinates: props.uvCoordinates,
+    materials: props.materials,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+    arShadowReceiver: props.arShadowReceiver,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("surface", nativeProps);
+
+  
+  // Register event handlers using our new event system
+  useViroEventListeners(nodeId, {
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onClickState: props.onClickState,
+    onTouch: props.onTouch,
+    onScroll: props.onScroll,
+    onSwipe: props.onSwipe,
+    onDrag: props.onDrag,
+    onPinch: props.onPinch,
+    onRotate: props.onRotate,
+    onFuse:
+      typeof props.onFuse === "function"
+        ? props.onFuse
+        : props.onFuse?.callback,
+    onCollision: props.onCollision,
+    onTransformUpdate: props.onTransformUpdate,
+  });
+
+  // Component doesn't have children, so just return null
+  return null;
+};

package/fabric-interop/components/ViroText.tsx

@@ -0,0 +1,114 @@
+/**
+ * ViroText
+ *
+ * A component for rendering 3D text in the Viro scene.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  useViroEventListeners,
+  convertCommonProps,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroTextProps extends ViroCommonProps {
+  // Text content
+  text: string;
+
+  // Text style props
+  color?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?:
+    | "100"
+    | "200"
+    | "300"
+    | "400"
+    | "500"
+    | "600"
+    | "700"
+    | "800"
+    | "900"
+    | "normal"
+    | "bold";
+  fontStyle?: "normal" | "italic";
+  textAlign?: "left" | "center" | "right";
+  textAlignVertical?: "top" | "center" | "bottom";
+  textLineBreakMode?: "wordwrap" | "charwrap" | "justify" | "none";
+  textClipMode?: "none" | "clipToBounds";
+
+  // Layout props
+  width?: number;
+  height?: number;
+  maxWidth?: number;
+  maxHeight?: number;
+
+  // Material props
+  materials?: string | string[];
+  extrusionDepth?: number;
+  outerStroke?: {
+    type?: string;
+    width?: number;
+    color?: string;
+  };
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+}
+
+/**
+ * ViroText is a component for rendering 3D text in the Viro scene.
+ */
+export const ViroText: React.FC<ViroTextProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    text: props.text,
+    color: props.color,
+    fontFamily: props.fontFamily,
+    fontSize: props.fontSize,
+    fontWeight: props.fontWeight,
+    fontStyle: props.fontStyle,
+    textAlign: props.textAlign,
+    textAlignVertical: props.textAlignVertical,
+    textLineBreakMode: props.textLineBreakMode,
+    textClipMode: props.textClipMode,
+    width: props.width,
+    height: props.height,
+    maxWidth: props.maxWidth,
+    maxHeight: props.maxHeight,
+    materials: props.materials,
+    extrusionDepth: props.extrusionDepth,
+    outerStroke: props.outerStroke,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("text", nativeProps);
+
+  // Register event handlers using our new event system
+  useViroEventListeners(nodeId, {
+    onHover: props.onHover,
+    onClick: props.onClick,
+    onClickState: props.onClickState,
+    onTouch: props.onTouch,
+    onScroll: props.onScroll,
+    onSwipe: props.onSwipe,
+    onDrag: props.onDrag,
+    onPinch: props.onPinch,
+    onRotate: props.onRotate,
+    onFuse:
+      typeof props.onFuse === "function"
+        ? props.onFuse
+        : props.onFuse?.callback,
+    onCollision: props.onCollision,
+    onTransformUpdate: props.onTransformUpdate,
+  });
+
+  // Text doesn't have children, so just return null
+  return null;
+};

package/fabric-interop/components/ViroUtils.ts

@@ -0,0 +1,208 @@
+/**
+ * ViroUtils
+ *
+ * Common utility functions and hooks for Viro components.
+ */
+
+import React, { useEffect, useRef } from "react";
+import {
+  generateNodeId,
+  generateCallbackId,
+  ViroNodeProps,
+  ViroNodeType,
+  createNode,
+  updateNode,
+  deleteNode,
+  addChild,
+  removeChild,
+  registerEventListener,
+  unregisterEventListener,
+} from "../NativeViro";
+
+import { getNativeViro } from "./ViroGlobal";
+
+// Create a proper React Context to pass parent node IDs down the component tree
+export const ViroContext = React.createContext("viro_root_scene");
+
+// Hook to get the current parent node ID
+export const useViroParent = () => {
+  return React.useContext(ViroContext);
+};
+
+// Hook to manage a node's lifecycle
+export function useViroNode(
+  nodeType: ViroNodeType,
+  props: ViroNodeProps,
+  explicitParentId?: string
+): string {
+  const nodeId = useRef<string>(generateNodeId());
+  const contextParentId = useViroParent();
+
+  // Use explicit parent ID if provided, otherwise use context
+  const parentId = explicitParentId || contextParentId;
+
+  useEffect(() => {
+    // Create the node when the component mounts using our enhanced functions
+    createNode(nodeId.current, nodeType, props);
+
+    // Add to parent if specified
+    if (parentId) {
+      addChild(parentId, nodeId.current);
+    }
+
+    // Clean up when the component unmounts
+    return () => {
+      // Remove from parent if specified
+      if (parentId) {
+        removeChild(parentId, nodeId.current);
+      }
+
+      // Delete the node
+      deleteNode(nodeId.current);
+    };
+  }, [nodeType, parentId]);
+
+  // Update props when they change
+  useEffect(() => {
+    updateNode(nodeId.current, props);
+  }, [props]);
+
+  return nodeId.current;
+}
+
+// Hook to manage a node's children
+export function useViroChildren(
+  nodeId: string,
+  children: React.ReactNode
+): React.ReactNode {
+  // Create a context provider to pass the parent ID to children
+  return children;
+}
+
+// Common event handler types
+export type ViroEventHandler = (event: any, ...args: any[]) => void;
+
+// Common position and transform types
+export type ViroPosition = [number, number, number];
+export type ViroRotation = [number, number, number];
+export type ViroScale = [number, number, number] | number;
+
+// Common prop types shared across components
+export interface ViroCommonProps {
+  position?: ViroPosition;
+  rotation?: ViroRotation;
+  scale?: ViroScale;
+  transformBehaviors?: string[];
+  opacity?: number;
+  visible?: boolean;
+  animation?: {
+    name?: string;
+    delay?: number;
+    loop?: boolean;
+    onStart?: () => void;
+    onFinish?: () => void;
+    run?: boolean;
+    interruptible?: boolean;
+  };
+
+  // Interaction capabilities
+  canClick?: boolean;
+  canHover?: boolean;
+  canTouch?: boolean;
+  canScroll?: boolean;
+  canSwipe?: boolean;
+  canDrag?: boolean;
+  canFuse?: boolean;
+  canPinch?: boolean;
+  canRotate?: boolean;
+  timeToFuse?: number;
+
+  // Event handlers
+  onHover?: ViroEventHandler;
+  onClick?: ViroEventHandler;
+  onClickState?: ViroEventHandler;
+  onTouch?: ViroEventHandler;
+  onScroll?: ViroEventHandler;
+  onSwipe?: ViroEventHandler;
+  onDrag?: ViroEventHandler;
+  onPinch?: ViroEventHandler;
+  onRotate?: ViroEventHandler;
+  onFuse?:
+    | ViroEventHandler
+    | { callback: ViroEventHandler; timeToFuse?: number };
+  onCollision?: ViroEventHandler;
+  onTransformUpdate?: ViroEventHandler;
+}
+
+// Helper to convert common props to the format expected by the native code
+export function convertCommonProps(props: ViroCommonProps): ViroNodeProps {
+  const {
+    position,
+    rotation,
+    scale,
+    transformBehaviors,
+    opacity,
+    visible,
+    animation,
+    ...rest
+  } = props;
+
+  const convertedProps: ViroNodeProps = {
+    ...rest,
+  };
+
+  if (position) convertedProps.position = position;
+  if (rotation) convertedProps.rotation = rotation;
+
+  if (scale !== undefined) {
+    if (typeof scale === "number") {
+      convertedProps.scale = [scale, scale, scale];
+    } else {
+      convertedProps.scale = scale;
+    }
+  }
+
+  if (transformBehaviors)
+    convertedProps.transformBehaviors = transformBehaviors;
+  if (opacity !== undefined) convertedProps.opacity = opacity;
+  if (visible !== undefined) convertedProps.visible = visible;
+  if (animation) convertedProps.animation = animation;
+
+  return convertedProps;
+}
+
+// Hook to manage event listeners for a node
+export function useViroEventListeners(
+  nodeId: string,
+  eventHandlers: Record<string, ViroEventHandler | undefined>
+): void {
+  useEffect(() => {
+    // Register all event handlers and store callback IDs for cleanup
+    const registeredCallbacks: Array<{ name: string; callbackId: string }> = [];
+
+    Object.entries(eventHandlers).forEach(([eventName, handler]) => {
+      if (handler) {
+        const callbackId = registerEventListener(nodeId, eventName, handler);
+        registeredCallbacks.push({ name: eventName, callbackId });
+      }
+    });
+
+    // Cleanup when unmounting or dependencies change
+    return () => {
+      registeredCallbacks.forEach(({ name, callbackId }) => {
+        unregisterEventListener(nodeId, name, callbackId);
+      });
+    };
+  }, [nodeId, ...Object.values(eventHandlers)]);
+}
+
+// Provider component for ViroContext
+export const ViroContextProvider = ({
+  value,
+  children,
+}: {
+  value: string;
+  children: React.ReactNode;
+}) => {
+  return React.createElement(ViroContext.Provider, { value }, children);
+};