@reactvision/react-viro 2.43.1 → 2.43.4

package/fabric-interop/components/ViroSpatialSound.tsx

@@ -1,81 +0,0 @@
-/**
- * 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

@@ -1,75 +0,0 @@
-/**
- * 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

@@ -1,63 +0,0 @@
-/**
- * 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

@@ -1,86 +0,0 @@
-/**
- * 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

@@ -1,80 +0,0 @@
-/**
- * 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

@@ -1,114 +0,0 @@
-/**
- * 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

@@ -1,208 +0,0 @@
-/**
- * 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);
-};