@reactvision/react-viro 2.43.0 → 2.43.1

package/fabric-interop/components/Types/ViroEvents.ts

@@ -0,0 +1,285 @@
+/**
+ * ViroEvents
+ *
+ * Type definitions for Viro event handling.
+ */
+
+import { ViroPosition, ViroRotation } from "../ViroUtils";
+
+// Click state types
+export enum ViroClickStateTypes {
+  CLICK_DOWN = 1,
+  CLICK_UP = 2,
+  CLICKED = 3,
+}
+
+export type ViroClickState =
+  | ViroClickStateTypes.CLICK_DOWN
+  | ViroClickStateTypes.CLICK_UP
+  | ViroClickStateTypes.CLICKED;
+
+// Pinch state types
+export enum ViroPinchStateTypes {
+  PINCH_START = 1,
+  PINCH_MOVE = 2,
+  PINCH_END = 3,
+}
+
+export type ViroPinchState =
+  | ViroPinchStateTypes.PINCH_START
+  | ViroPinchStateTypes.PINCH_MOVE
+  | ViroPinchStateTypes.PINCH_END;
+
+// Rotate state types
+export enum ViroRotateStateTypes {
+  ROTATE_START = 1,
+  ROTATE_MOVE = 2,
+  ROTATE_END = 3,
+}
+
+export type ViroRotateState =
+  | ViroRotateStateTypes.ROTATE_START
+  | ViroRotateStateTypes.ROTATE_MOVE
+  | ViroRotateStateTypes.ROTATE_END;
+
+// Basic event types
+export type ViroSource = any;
+export type Viro3DPoint = [number, number, number];
+
+export type ViroClickEvent = {
+  position: Viro3DPoint;
+  source: ViroSource;
+};
+
+export type ViroClickStateEvent = {
+  clickState: ViroClickState;
+  position: Viro3DPoint;
+  source: ViroSource;
+};
+
+export type ViroHoverEvent = {
+  isHovering: boolean;
+  position: Viro3DPoint;
+  source: ViroSource;
+};
+
+export type ViroTouchEvent = {
+  touchState: any;
+  touchPos: Viro3DPoint;
+  source: ViroSource;
+};
+
+export type ViroScrollEvent = {
+  scrollPos: Viro3DPoint;
+  source: ViroSource;
+};
+
+export type ViroSwipeEvent = {
+  swipeState: any;
+  source: ViroSource;
+};
+
+export type ViroFuseEvent = {
+  source: ViroSource;
+};
+
+export type ViroPinchEvent = {
+  pinchState: ViroPinchState;
+  scaleFactor: number;
+  source: ViroSource;
+};
+
+export type ViroRotateEvent = {
+  rotateState: ViroRotateState;
+  rotationFactor: number;
+  source: ViroSource;
+};
+
+export type ViroDragEvent = {
+  dragToPos: Viro3DPoint;
+  source: ViroSource;
+};
+
+// AR specific event types
+export type ViroAnchor = any;
+export type ViroAnchorFoundMap = any;
+export type ViroAnchorUpdatedMap = any;
+export type ViroPlaneUpdatedMap = any;
+export type ViroPlaneUpdatedEvent = any;
+export type ViroARPlaneSizes = any;
+export type ViroARHitTestResult = any;
+export type ViroARPointCloud = any;
+
+export type ViroARAnchorFoundEvent = {
+  anchorFoundMap: ViroAnchorFoundMap;
+  anchor: ViroAnchor;
+};
+
+export type ViroARAnchorUpdatedEvent = {
+  anchorUpdatedMap: ViroAnchorUpdatedMap;
+  anchor: ViroAnchor;
+};
+
+export type ViroARAnchorRemovedEvent = {
+  anchor: ViroAnchor;
+};
+
+export type ViroCameraARHitTestEvent = {
+  hitTestResults: ViroARHitTestResult[];
+  cameraOrientation: number[];
+};
+
+export type ViroCameraARHitTest = {
+  hitTestResults: ViroARHitTestResult[];
+  cameraOrientation: {
+    position: Viro3DPoint;
+    rotation: ViroRotation;
+    forward: Viro3DPoint;
+    up: Viro3DPoint;
+  };
+};
+
+export type ViroARPointCloudUpdateEvent = {
+  pointCloud: ViroARPointCloud;
+};
+
+// Tracking state constants
+export enum ViroTrackingStateConstants {
+  TRACKING_NORMAL = 0,
+  TRACKING_LIMITED = 1,
+  TRACKING_UNAVAILABLE = 2,
+}
+
+export enum ViroARTrackingReasonConstants {
+  TRACKING_REASON_NONE = 0,
+  TRACKING_REASON_EXCESSIVE_MOTION = 1,
+  TRACKING_REASON_INSUFFICIENT_FEATURES = 2,
+}
+
+export type ViroTrackingState =
+  | ViroTrackingStateConstants.TRACKING_NORMAL
+  | ViroTrackingStateConstants.TRACKING_LIMITED
+  | ViroTrackingStateConstants.TRACKING_UNAVAILABLE;
+
+export type ViroTrackingReason =
+  | ViroARTrackingReasonConstants.TRACKING_REASON_NONE
+  | ViroARTrackingReasonConstants.TRACKING_REASON_EXCESSIVE_MOTION
+  | ViroARTrackingReasonConstants.TRACKING_REASON_INSUFFICIENT_FEATURES;
+
+export type ViroTrackingUpdatedEvent = {
+  state: ViroTrackingState;
+  reason: ViroTrackingReason;
+};
+
+// Recording constants
+export enum ViroRecordingErrorConstants {
+  RECORD_ERROR_NONE = 0,
+  RECORD_ERROR_UNKNOWN = 1,
+  RECORD_ERROR_NO_PERMISSION = 2,
+  RECORD_ERROR_INITIALIZATION = 3,
+  RECORD_ERROR_WRITE_TO_FILE = 4,
+  RECORD_ERROR_ALREADY_RUNNING = 5,
+  RECORD_ERROR_ALREADY_STOPPED = 6,
+}
+
+// Other event types
+export type ViroErrorEvent = {
+  error: Error;
+};
+
+export type ViroCollisionEvent = {
+  viroTag: string;
+  collidedPoint: Viro3DPoint;
+  collidedNormal: Viro3DPoint;
+};
+
+export type ViroPlatformInfo = {
+  platform: string;
+  headset: string;
+  controller: string;
+};
+
+export type ViroPlatformEvent = {
+  platformInfoViro: ViroPlatformInfo;
+};
+
+export type ViroPlatformUpdateEvent = {
+  platformInfoViro: ViroPlatformInfo;
+};
+
+export type ViroCameraTransform = {
+  position: Viro3DPoint;
+  rotation: ViroRotation;
+  forward: Viro3DPoint;
+  up: Viro3DPoint;
+};
+
+export type ViroCameraTransformEvent = {
+  cameraTransform: number[];
+};
+
+export type ViroWorldOrigin = {
+  position: Viro3DPoint;
+  rotation: ViroRotation;
+};
+
+export type ViroNativeTransformUpdateEvent = {
+  position: Viro3DPoint;
+};
+
+export type ViroControllerStatus = any;
+
+export type ViroControllerStatusEvent = {
+  controllerStatus: ViroControllerStatus;
+  source: ViroSource;
+};
+
+export type ViroExitViroEvent = {};
+
+// Animation events
+export type ViroAnimationStartEvent = {};
+export type ViroAnimationFinishEvent = {};
+
+// Loading events
+export type ViroLoadStartEvent = {};
+export type ViroLoadEndEvent = {
+  success: boolean;
+};
+export type ViroLoadErrorEvent = ViroErrorEvent;
+
+// Video events
+export type ViroVideoBufferStartEvent = {};
+export type ViroVideoBufferEndEvent = {};
+export type ViroVideoUpdateTimeEvent = {
+  currentTime: number;
+  totalTime: number;
+};
+export type ViroVideoErrorEvent = ViroErrorEvent;
+export type ViroVideoFinishEvent = ViroErrorEvent;
+
+// Animated component events
+export type ViroAnimatedComponentStartEvent = {};
+export type ViroAnimatedComponentFinishEvent = {};
+
+// Portal events
+export type ViroPortalEnterEvent = any;
+export type ViroPortalExitEvent = any;
+
+// Sound events
+export type ViroSoundFinishEvent = any;
+
+// Ambient light events
+export type ViroAmbientLightInfo = {
+  intensity: number;
+  color: string;
+};
+
+export type ViroAmbientLightUpdateEvent = {
+  ambientLightInfo: ViroAmbientLightInfo;
+};
+
+// AR support response
+export type ViroARSupportResponse = {
+  supported: boolean;
+  reason?: string;
+};

package/fabric-interop/components/Types/ViroUtils.ts

@@ -0,0 +1,160 @@
+/**
+ * ViroUtils
+ *
+ * Type definitions for Viro utility types.
+ */
+
+import { ImageSourcePropType, NativeMethods } from "react-native";
+
+/**
+ * Cartesian position in 3D space, stored as [x, y, z].
+ */
+export type Viro3DPoint = [
+  number, // x position
+  number, // y position
+  number, // z position
+];
+
+/**
+ * The rotation of the container around it's local axis specified as Euler angles [x, y, z].
+ * Units for each angle are specified in degrees.
+ */
+export type ViroRotation = [
+  number, // x rotation
+  number, // y rotation
+  number, // z rotation
+];
+
+/**
+ * The scale of the container in 3D space, specified as [x,y,z]. A scale of
+ * 1 represents the current size of the container. A scale value of < 1
+ * will make the container proportionally smaller while a value >1 will make
+ * the container proportionally bigger along the specified axis.
+ */
+export type ViroScale = [
+  number, // x scale
+  number, // y scale
+  number, // z scale
+];
+
+export type ViroNativeRef =
+  | (React.Component<unknown, {}, any> & Readonly<NativeMethods>)
+  | null;
+
+export type ViroPhysicsBody = {
+  /**
+   * The type of this rigid body.
+   */
+  type: ViroPhysicsBodyType;
+  /**
+   * The mass of this physics body in kg.
+   */
+  mass?: number;
+  /**
+   * Describes the shape that represents this physics body.
+   */
+  shape?: ViroPhysicsBodyShape;
+  /**
+   * The bounciness of an object. Value of 0.0 will not bounce.
+   * Value of 1.0 will bounce without any loss of energy.
+   */
+  restitution?: number;
+  /**
+   * Determines the force of resistance an object or surface encounters when moving
+   * across another. Value of 0.0 implies no friction. Value of 1.0 implies high friction.
+   */
+  friction?: number;
+  /**
+   * If false, this physics object will ignore all gravitational forces that are
+   * applied on this object.
+   */
+  useGravity?: boolean;
+  /**
+   * If false, disables all physics properties on the Viro control (as if there
+   * were no physics bodies applied).
+   */
+  enabled?: boolean;
+  /**
+   * A single force vector or an array of force vectors applied to the physics body.
+   * If an array of forces is provided, the corresponding net force will be applied.
+   * Force units are in newtons.
+   */
+  force?: number[];
+  /**
+   * A single torque vector or an array of torque vectors applied to the physics body.
+   * If an array of torque is provided, the corresponding net torque will be applied.
+   * Torque units are in newton meters.
+   */
+  torque?: number[];
+  /**
+   * Used to directly move an object without applying a force.
+   * Units are m/s. Doing so will override any forces that are already
+   * applied on this physics body.
+   */
+  velocity?: number[];
+};
+
+export type ViroPhysicsBodyType = "Dynamic" | "Kinematic" | "Static";
+
+export type ViroPhysicsBodyShape = {
+  type: ViroPhysicsBodyShapeType;
+  params: number[];
+};
+
+export type ViroPhysicsBodyShapeType = "Box" | "Sphere" | "Compound";
+
+/**
+ * A single force vector or an array of force vectors applied to the physics body.
+ * If an array of forces is provided, the corresponding net force will be applied.
+ * Force units are in newtons.
+ */
+export type ViroForce = {
+  value: Array<number>;
+  position: Array<number>;
+};
+
+export type ViroSource = ImageSourcePropType;
+
+export type ViroARPlaneType = any;
+
+export type ViroSoundRoom = {
+  // The x, y and z dimensions of the room
+  size: ViroScale;
+  wallMaterial: string;
+  ceilingMaterial: string;
+  floorMaterial: string;
+};
+
+export type ViroPhysicsWorld = {
+  gravity: number;
+  drawBounds?: boolean;
+};
+
+export type ViroRay = any;
+
+export type ViroTorque = any;
+
+export type ViroVelocity = any;
+
+export type Viro2DPoint = [number, number];
+
+export type ViroUVCoordinate = [number, number, number, number];
+
+export type ViroSoundMap = {
+  [key: string]: ViroSound;
+};
+export type ViroSound = string;
+
+export type ViroSoundPreloadResult = {
+  [key: string]: { result: any; msg: any };
+};
+
+export type ViroScene = {
+  tag: string;
+  referenceCount: number;
+  sceneClass: any;
+};
+
+export type ViroSceneDictionary = {
+  [key: string]: ViroScene;
+};

package/fabric-interop/components/Viro360Image.tsx

@@ -0,0 +1,70 @@
+/**
+ * Viro360Image
+ *
+ * A component for displaying 360-degree images.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface Viro360ImageProps extends ViroCommonProps {
+  // Image source
+  source: { uri: string } | number;
+
+  // Image properties
+  stereoMode?: "LeftRight" | "RightLeft" | "TopBottom" | "BottomTop" | "None";
+  format?: "RGBA8" | "RGB565";
+  isHdr?: boolean;
+
+  // Events
+  onLoadStart?: () => void;
+  onLoadEnd?: () => void;
+  onError?: (error: string) => void;
+}
+
+/**
+ * Viro360Image is a component for displaying 360-degree images.
+ * It creates an immersive environment using spherical panoramic images.
+ */
+export const Viro360Image: React.FC<Viro360ImageProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    source: props.source,
+    stereoMode: props.stereoMode,
+    format: props.format,
+    isHdr: props.isHdr,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("360Image", 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/Viro360Video.tsx

@@ -0,0 +1,78 @@
+/**
+ * Viro360Video
+ *
+ * A component for displaying 360-degree videos.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface Viro360VideoProps extends ViroCommonProps {
+  // Video source
+  source: { uri: string } | number;
+
+  // Video properties
+  paused?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  volume?: number;
+  stereoMode?: "LeftRight" | "RightLeft" | "TopBottom" | "BottomTop" | "None";
+
+  // Events
+  onLoadStart?: () => void;
+  onLoadEnd?: () => void;
+  onBufferStart?: () => void;
+  onBufferEnd?: () => void;
+  onFinish?: () => void;
+  onUpdateTime?: (currentTime: number, totalTime: number) => void;
+  onError?: (error: string) => void;
+}
+
+/**
+ * Viro360Video is a component for displaying 360-degree videos.
+ * It creates an immersive environment using spherical panoramic videos.
+ */
+export const Viro360Video: React.FC<Viro360VideoProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    source: props.source,
+    paused: props.paused,
+    loop: props.loop,
+    muted: props.muted,
+    volume: props.volume,
+    stereoMode: props.stereoMode,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("360Video", 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/Viro3DObject.tsx

@@ -0,0 +1,122 @@
+/**
+ * Viro3DObject
+ *
+ * A component for loading and displaying 3D models in various formats.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface Viro3DObjectProps extends ViroCommonProps {
+  // 3D model source
+  source: { uri: string } | number;
+
+  // Resources
+  resources?: ({ uri: string } | number)[];
+
+  // Model properties
+  type: "OBJ" | "VRX" | "GLTF" | "GLB" | "FBX";
+  position?: [number, number, number];
+  scale?: [number, number, number] | number;
+  rotation?: [number, number, number];
+
+  // Materials
+  materials?: string | string[];
+
+  // Morphing
+  morphTargets?: {
+    [key: string]: number;
+  };
+
+  // Animation
+  animation?: {
+    name?: string;
+    delay?: number;
+    loop?: boolean;
+    onStart?: () => void;
+    onFinish?: () => void;
+    run?: boolean;
+    interruptible?: boolean;
+  };
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+
+  // Physics props
+  highAccuracyEvents?: boolean;
+  physicsBody?: {
+    type: "Dynamic" | "Kinematic" | "Static";
+    mass?: number;
+    restitution?: number;
+    shape?: {
+      type: "Box" | "Sphere" | "Compound";
+      params?: number[];
+    };
+    friction?: number;
+    useGravity?: boolean;
+    enabled?: boolean;
+    velocity?: [number, number, number];
+    force?: {
+      value: [number, number, number];
+      position: [number, number, number];
+    };
+    torque?: [number, number, number];
+  };
+
+  // Events
+  onLoadStart?: () => void;
+  onLoadEnd?: () => void;
+  onError?: (error: string) => void;
+}
+
+/**
+ * Viro3DObject is a component for loading and displaying 3D models in various formats.
+ */
+export const Viro3DObject: React.FC<Viro3DObjectProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    source: props.source,
+    resources: props.resources,
+    type: props.type,
+    materials: props.materials,
+    morphTargets: props.morphTargets,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+    highAccuracyEvents: props.highAccuracyEvents,
+    physicsBody: props.physicsBody,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("object", 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;
+};