@reactvision/react-viro 2.43.0 → 2.43.1

package/fabric-interop/components/ViroPolyline.tsx

@@ -0,0 +1,71 @@
+/**
+ * ViroPolyline
+ *
+ * A component for rendering a 3D polyline.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroPolylineProps extends ViroCommonProps {
+  // Polyline points
+  points: [number, number, number][];
+
+  // Polyline properties
+  thickness?: number;
+
+  // Materials
+  materials?: string | string[];
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+}
+
+/**
+ * ViroPolyline is a component for rendering a 3D polyline.
+ * It allows you to create a line that connects a series of points in 3D space.
+ */
+export const ViroPolyline: React.FC<ViroPolylineProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    points: props.points,
+    thickness: props.thickness ?? 0.1,
+    materials: props.materials,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("polyline", 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/ViroPortal.tsx

@@ -0,0 +1,91 @@
+/**
+ * ViroPortal
+ *
+ * A component for creating portal entrances.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  ViroContextProvider,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroPortalProps extends ViroCommonProps {
+  // Portal properties
+  passable?: boolean;
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroPortal is a component for creating portal entrances.
+ * It allows users to transition between different scenes or environments.
+ */
+export const ViroPortal: React.FC<ViroPortalProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    passable: props.passable,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("portal", nativeProps);
+
+  // Register event handlers
+  React.useEffect(() => {
+    const nativeViro = getNativeViro();
+    if (!nativeViro) return;
+
+    const eventHandlers = [
+      { name: "onHover", handler: props.onHover },
+      { name: "onClick", handler: props.onClick },
+      { name: "onClickState", handler: props.onClickState },
+      { name: "onTouch", handler: props.onTouch },
+      { name: "onCollision", handler: props.onCollision },
+    ];
+
+    // Register all event handlers and store callback IDs for cleanup
+    const registeredCallbacks = eventHandlers
+      .filter(({ handler }) => !!handler)
+      .map(({ name, handler }) => {
+        const callbackId = `${nodeId}_${name}`;
+
+        // Register the callback in the global registry
+        if (typeof global !== "undefined" && global.registerViroEventCallback) {
+          global.registerViroEventCallback(callbackId, handler);
+        }
+
+        // Register with native code
+        nativeViro.registerEventCallback(nodeId, name, callbackId);
+        return { name, callbackId };
+      });
+
+    // Cleanup when unmounting
+    return () => {
+      const nativeViro = getNativeViro();
+      if (!nativeViro) return;
+
+      // Unregister all event handlers
+      registeredCallbacks.forEach(({ name, callbackId }) => {
+        nativeViro.unregisterEventCallback(nodeId, name, callbackId);
+      });
+    };
+  }, [
+    nodeId,
+    props.onHover,
+    props.onClick,
+    props.onClickState,
+    props.onTouch,
+    props.onCollision,
+  ]);
+
+  // Render children with this portal as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroPortalScene.tsx

@@ -0,0 +1,43 @@
+/**
+ * ViroPortalScene
+ *
+ * A component for portal scene content.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  ViroContextProvider,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroPortalSceneProps extends ViroCommonProps {
+  // Portal scene properties
+  passable?: boolean;
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroPortalScene is a component for portal scene content.
+ * It defines the content that appears inside a portal.
+ */
+export const ViroPortalScene: React.FC<ViroPortalSceneProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    passable: props.passable,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("portalScene", nativeProps);
+
+  // Render children with this portal scene as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroQuad.tsx

@@ -0,0 +1,82 @@
+/**
+ * ViroQuad
+ *
+ * A component for rendering a 2D quad in 3D space.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  useViroEventListeners,
+  convertCommonProps,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroQuadProps extends ViroCommonProps {
+  // Quad properties
+  width?: number;
+  height?: number;
+
+  // UV coordinates
+  uvCoordinates?: [
+    [number, number],
+    [number, number],
+    [number, number],
+    [number, number],
+  ];
+
+  // Materials
+  materials?: string | string[];
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+
+  // Physics props
+  arShadowReceiver?: boolean;
+}
+
+/**
+ * ViroQuad is a component for rendering a 2D quad in 3D space.
+ * It's a flat rectangular surface that can be used for various purposes,
+ * such as displaying images, videos, or creating simple geometric shapes.
+ */
+export const ViroQuad: React.FC<ViroQuadProps> = (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("quad", 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,
+  });
+
+  // Quad doesn't have children, so just return null
+  return null;
+};

package/fabric-interop/components/ViroScene.tsx

@@ -0,0 +1,117 @@
+/**
+ * ViroScene
+ *
+ * A scene component that manages a 3D scene with scene lifecycle management.
+ */
+
+import React, { useEffect, useRef } from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  useViroEventListeners,
+  convertCommonProps,
+  ViroContextProvider,
+} from "./ViroUtils";
+import {
+  createScene,
+  activateScene,
+  deactivateScene,
+  destroyScene,
+  getSceneState,
+  generateNodeId,
+} from "../NativeViro";
+
+export interface ViroSceneProps extends ViroCommonProps {
+  // Scene-specific props
+  postProcessEffects?: string[];
+  soundRoom?: {
+    size: [number, number, number];
+    wallMaterial?: string;
+    ceilingMaterial?: string;
+    floorMaterial?: string;
+  };
+  physicsWorld?: {
+    gravity: [number, number, number];
+    drawBounds?: boolean;
+  };
+
+  // Scene lifecycle events
+  onSceneLoad?: () => void;
+  onSceneLoadStart?: () => void;
+  onSceneLoadEnd?: () => void;
+  onSceneError?: (error: string) => void;
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroScene is a 3D scene component that manages scene lifecycle and contains other Viro components.
+ */
+export const ViroScene: React.FC<ViroSceneProps> = (props) => {
+  const sceneId = useRef<string>(generateNodeId());
+
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    postProcessEffects: props.postProcessEffects,
+    soundRoom: props.soundRoom,
+    physicsWorld: props.physicsWorld,
+  };
+
+  // Create the scene node using our enhanced scene management
+  const nodeId = useViroNode("scene", nativeProps);
+
+  // Scene lifecycle management
+  useEffect(() => {
+    // Create the scene with our scene manager
+    createScene(sceneId.current, "scene", nativeProps);
+
+    // Activate the scene
+    activateScene(sceneId.current);
+
+    // Cleanup when unmounting
+    return () => {
+      // Deactivate and destroy the scene
+      deactivateScene(sceneId.current);
+      destroyScene(sceneId.current);
+    };
+  }, []);
+
+  // Update scene properties when they change
+  useEffect(() => {
+    // Scene properties are updated through the node system
+    // The scene manager will handle the lifecycle
+  }, [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,
+  });
+
+  // Scene lifecycle event handlers
+  useViroEventListeners(nodeId, {
+    onLoadStart: props.onSceneLoadStart,
+    onLoadEnd: props.onSceneLoadEnd,
+    onError: props.onSceneError,
+  });
+
+  // Provide the scene node ID as context for children
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroSceneNavigator.tsx

@@ -0,0 +1,71 @@
+/**
+ * ViroSceneNavigator
+ *
+ * A component for rendering 3D scenes.
+ */
+
+import React, { useState, useEffect } from "react";
+import { ViroFabricContainer } from "../ViroFabricContainer";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroSceneNavigatorProps {
+  // Scene properties
+  initialScene: {
+    scene: React.ComponentType<any>;
+  };
+
+  // Camera properties
+  hdrEnabled?: boolean;
+  pbrEnabled?: boolean;
+  bloomEnabled?: boolean;
+  shadowsEnabled?: boolean;
+  multisamplingEnabled?: boolean;
+
+  // Events
+  onCameraTransformUpdate?: (transform: any) => void;
+
+  // Style
+  style?: React.CSSProperties;
+}
+
+/**
+ * ViroSceneNavigator is a component for rendering 3D scenes.
+ * It provides a container for 3D scenes and handles the scene lifecycle.
+ */
+export const ViroSceneNavigator: React.FC<ViroSceneNavigatorProps> = (
+  props
+) => {
+  const [apiKey] = useState<string>(() => {
+    // Generate a random API key for demo purposes
+    return `viro-${Math.random().toString(36).substring(2, 15)}`;
+  });
+
+  // Initialize scene
+  useEffect(() => {
+    const nativeViro = getNativeViro();
+    if (!nativeViro) return;
+
+    // Initialize Viro
+    nativeViro.initialize();
+
+    // Cleanup when unmounting
+    return () => {
+      // Cleanup code here
+    };
+  }, []);
+
+  // Create the scene component
+  const SceneComponent = props.initialScene.scene;
+
+  // Render the 3D scene
+  return (
+    <ViroFabricContainer
+      style={props.style}
+      debug={false}
+      arEnabled={false}
+      onCameraTransformUpdate={props.onCameraTransformUpdate}
+    >
+      <SceneComponent />
+    </ViroFabricContainer>
+  );
+};

package/fabric-interop/components/ViroSkyBox.tsx

@@ -0,0 +1,75 @@
+/**
+ * ViroSkyBox
+ *
+ * A component for creating skybox environments.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroSkyBoxProps extends ViroCommonProps {
+  // Skybox source
+  source: {
+    nx: { uri: string } | number;
+    px: { uri: string } | number;
+    ny: { uri: string } | number;
+    py: { uri: string } | number;
+    nz: { uri: string } | number;
+    pz: { uri: string } | number;
+  };
+
+  // Skybox properties
+  format?: "RGBA8" | "RGB565";
+  isHdr?: boolean;
+
+  // Events
+  onLoadStart?: () => void;
+  onLoadEnd?: () => void;
+  onError?: (error: string) => void;
+}
+
+/**
+ * ViroSkyBox is a component for creating skybox environments.
+ * It uses six cube faces to create an immersive 360-degree environment.
+ */
+export const ViroSkyBox: React.FC<ViroSkyBoxProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    source: props.source,
+    format: props.format,
+    isHdr: props.isHdr,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("skyBox", 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/ViroSound.tsx

@@ -0,0 +1,71 @@
+/**
+ * ViroSound
+ *
+ * A component for playing audio in the scene.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroSoundProps extends ViroCommonProps {
+  // Audio source
+  source: { uri: string } | number;
+
+  // Audio properties
+  paused?: boolean;
+  volume?: number;
+  muted?: boolean;
+  loop?: boolean;
+
+  // Events
+  onFinish?: () => void;
+  onError?: (error: string) => void;
+}
+
+/**
+ * ViroSound is a component for playing audio in the scene.
+ * It provides basic audio playback functionality.
+ */
+export const ViroSound: React.FC<ViroSoundProps> = (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,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("sound", 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/ViroSoundField.tsx

@@ -0,0 +1,75 @@
+/**
+ * ViroSoundField
+ *
+ * A component for playing ambient audio field in the scene.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroSoundFieldProps extends ViroCommonProps {
+  // Audio source
+  source: { uri: string } | number;
+
+  // Audio properties
+  paused?: boolean;
+  volume?: number;
+  muted?: boolean;
+  loop?: boolean;
+
+  // Sound field properties
+  rotation?: [number, number, number];
+
+  // Events
+  onFinish?: () => void;
+  onError?: (error: string) => void;
+}
+
+/**
+ * ViroSoundField is a component for playing ambient audio field in the scene.
+ * It provides 360-degree ambient audio that surrounds the listener.
+ */
+export const ViroSoundField: React.FC<ViroSoundFieldProps> = (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,
+    rotation: props.rotation,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("soundField", 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;
+};