@reactvision/react-viro 2.42.0 → 2.43.1

package/fabric-interop/components/ViroBox.tsx

@@ -0,0 +1,72 @@
+/**
+ * ViroBox
+ *
+ * A 3D box component with customizable dimensions and materials.
+ */
+
+import React, { useContext } from "react";
+import {
+  ViroContext,
+  ViroCommonProps,
+  useViroNode,
+  useViroEventListeners,
+  convertCommonProps,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroBoxProps extends ViroCommonProps {
+  // Box-specific props
+  width?: number;
+  height?: number;
+  length?: number;
+  materials?: string | string[];
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+
+  // Physics props
+  highAccuracyEvents?: boolean;
+}
+
+/**
+ * ViroBox is a 3D box component with customizable dimensions and materials.
+ */
+export const ViroBox: React.FC<ViroBoxProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    width: props.width ?? 1,
+    height: props.height ?? 1,
+    length: props.length ?? 1,
+    materials: props.materials,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+    highAccuracyEvents: props.highAccuracyEvents,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("box", 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,
+  });
+
+  // Box doesn't have children, so just return null
+  return null;
+};

package/fabric-interop/components/ViroButton.tsx

@@ -0,0 +1,125 @@
+/**
+ * ViroButton
+ *
+ * A component for creating interactive buttons in 3D space.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  ViroContextProvider,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroButtonProps extends ViroCommonProps {
+  // Button properties
+  source: { uri: string } | number;
+  hoverSource?: { uri: string } | number;
+  clickSource?: { uri: string } | number;
+  gazeSource?: { uri: string } | number;
+
+  // Button dimensions
+  width?: number;
+  height?: number;
+
+  // Materials
+  materials?: string | string[];
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroButton is a component for creating interactive buttons in 3D space.
+ * It provides visual feedback for different interaction states.
+ */
+export const ViroButton: React.FC<ViroButtonProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    source: props.source,
+    hoverSource: props.hoverSource,
+    clickSource: props.clickSource,
+    gazeSource: props.gazeSource,
+    width: props.width,
+    height: props.height,
+    materials: props.materials,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("button", 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: "onDrag", handler: props.onDrag },
+      { name: "onPinch", handler: props.onPinch },
+      { name: "onRotate", handler: props.onRotate },
+      {
+        name: "onFuse",
+        handler:
+          typeof props.onFuse === "function"
+            ? props.onFuse
+            : props.onFuse?.callback,
+      },
+    ];
+
+    // 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.onDrag,
+    props.onPinch,
+    props.onRotate,
+    props.onFuse,
+  ]);
+
+  // Render children with this button as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroCamera.tsx

@@ -0,0 +1,45 @@
+/**
+ * ViroCamera
+ *
+ * A component for controlling the scene camera.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  ViroContextProvider,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroCameraProps extends ViroCommonProps {
+  // Camera properties
+  fieldOfView?: number;
+  focalPoint?: [number, number, number];
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroCamera is a component for controlling the scene camera.
+ * It allows customization of camera properties and behavior.
+ */
+export const ViroCamera: React.FC<ViroCameraProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    fieldOfView: props.fieldOfView,
+    focalPoint: props.focalPoint,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("camera", nativeProps);
+
+  // Render children with this camera as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroController.tsx

@@ -0,0 +1,87 @@
+/**
+ * ViroController
+ *
+ * A component for VR controller interaction.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  ViroContextProvider,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroControllerProps extends ViroCommonProps {
+  // Controller properties
+  controllerVisibility?: boolean;
+  reticleVisibility?: boolean;
+
+  // Events
+  onControllerUpdate?: (event: any) => void;
+  onMove?: (event: any) => void;
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroController is a component for VR controller interaction.
+ * It provides controller tracking and interaction capabilities.
+ */
+export const ViroController: React.FC<ViroControllerProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    controllerVisibility: props.controllerVisibility,
+    reticleVisibility: props.reticleVisibility,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("controller", nativeProps);
+
+  // Register event handlers
+  React.useEffect(() => {
+    const nativeViro = getNativeViro();
+    if (!nativeViro) return;
+
+    const eventHandlers = [
+      { name: "onControllerUpdate", handler: props.onControllerUpdate },
+      { name: "onMove", handler: props.onMove },
+    ];
+
+    // 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.onControllerUpdate, props.onMove]);
+
+  // Render children with this controller as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroDirectionalLight.tsx

@@ -0,0 +1,84 @@
+/**
+ * ViroDirectionalLight
+ *
+ * A component for adding directional lighting to a scene.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroDirectionalLightProps extends ViroCommonProps {
+  // Light properties
+  color?: string;
+  intensity?: number;
+  temperature?: number;
+  direction?: [number, number, number];
+  influenceBitMask?: number;
+
+  // Shadow properties
+  castsShadow?: boolean;
+  shadowOpacity?: number;
+  shadowOrthographicSize?: number;
+  shadowOrthographicPosition?: [number, number, number];
+  shadowMapSize?: number;
+  shadowBias?: number;
+  shadowNearZ?: number;
+  shadowFarZ?: number;
+}
+
+/**
+ * ViroDirectionalLight is a component for adding directional lighting to a scene.
+ * Directional light is a type of light that illuminates all objects in the scene
+ * from a specific direction, similar to sunlight.
+ */
+export const ViroDirectionalLight: React.FC<ViroDirectionalLightProps> = (
+  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,
+    influenceBitMask: props.influenceBitMask,
+    castsShadow: props.castsShadow,
+    shadowOpacity: props.shadowOpacity,
+    shadowOrthographicSize: props.shadowOrthographicSize,
+    shadowOrthographicPosition: props.shadowOrthographicPosition,
+    shadowMapSize: props.shadowMapSize,
+    shadowBias: props.shadowBias,
+    shadowNearZ: props.shadowNearZ,
+    shadowFarZ: props.shadowFarZ,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("directionalLight", 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/ViroFlexView.tsx

@@ -0,0 +1,146 @@
+/**
+ * ViroFlexView
+ *
+ * A component for creating flexible layouts in 3D space.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  ViroContextProvider,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroFlexViewProps extends ViroCommonProps {
+  // Layout properties
+  width?: number;
+  height?: number;
+
+  // Flex properties
+  flex?: number;
+  flexDirection?: "row" | "column";
+  justifyContent?:
+    | "flex-start"
+    | "flex-end"
+    | "center"
+    | "space-between"
+    | "space-around";
+  alignItems?: "flex-start" | "flex-end" | "center" | "stretch";
+  padding?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  margin?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+
+  // Visual properties
+  backgroundColor?: string;
+  borderRadius?: number;
+  borderWidth?: number;
+  borderColor?: string;
+
+  // Materials
+  materials?: string | string[];
+
+  // Children components
+  children?: React.ReactNode;
+}
+
+/**
+ * ViroFlexView is a component for creating flexible layouts in 3D space.
+ * It allows you to arrange child components using flexbox-like layout rules.
+ */
+export const ViroFlexView: React.FC<ViroFlexViewProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    width: props.width,
+    height: props.height,
+    flex: props.flex,
+    flexDirection: props.flexDirection,
+    justifyContent: props.justifyContent,
+    alignItems: props.alignItems,
+    padding: props.padding,
+    paddingTop: props.paddingTop,
+    paddingBottom: props.paddingBottom,
+    paddingLeft: props.paddingLeft,
+    paddingRight: props.paddingRight,
+    margin: props.margin,
+    marginTop: props.marginTop,
+    marginBottom: props.marginBottom,
+    marginLeft: props.marginLeft,
+    marginRight: props.marginRight,
+    backgroundColor: props.backgroundColor,
+    borderRadius: props.borderRadius,
+    borderWidth: props.borderWidth,
+    borderColor: props.borderColor,
+    materials: props.materials,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("flexView", 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: "onDrag", handler: props.onDrag },
+      { name: "onPinch", handler: props.onPinch },
+      { name: "onRotate", handler: props.onRotate },
+    ];
+
+    // 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.onDrag,
+    props.onPinch,
+    props.onRotate,
+  ]);
+
+  // Render children with this flex view as their parent
+  return (
+    <ViroContextProvider value={nodeId}>{props.children}</ViroContextProvider>
+  );
+};

package/fabric-interop/components/ViroGeometry.tsx

@@ -0,0 +1,78 @@
+/**
+ * ViroGeometry
+ *
+ * A component for rendering custom 3D geometry.
+ */
+
+import React from "react";
+import {
+  ViroCommonProps,
+  useViroNode,
+  convertCommonProps,
+  useViroEventListeners,
+} from "./ViroUtils";
+import { getNativeViro } from "./ViroGlobal";
+
+export interface ViroGeometryProps extends ViroCommonProps {
+  // Geometry data
+  vertices: [number, number, number][];
+  normals?: [number, number, number][];
+  texcoords?: [number, number][];
+  triangleIndices: number[][];
+
+  // Materials
+  materials?: string | string[];
+
+  // Lighting props
+  lightReceivingBitMask?: number;
+  shadowCastingBitMask?: number;
+
+  // Physics props
+  type?: "Dynamic" | "Kinematic" | "Static";
+}
+
+/**
+ * ViroGeometry is a component for rendering custom 3D geometry.
+ * It allows you to create custom 3D shapes by specifying vertices, normals,
+ * texture coordinates, and triangle indices.
+ */
+export const ViroGeometry: React.FC<ViroGeometryProps> = (props) => {
+  // Convert common props to the format expected by the native code
+  const nativeProps = {
+    ...convertCommonProps(props),
+    vertices: props.vertices,
+    normals: props.normals,
+    texcoords: props.texcoords,
+    triangleIndices: props.triangleIndices,
+    materials: props.materials,
+    lightReceivingBitMask: props.lightReceivingBitMask,
+    shadowCastingBitMask: props.shadowCastingBitMask,
+    type: props.type,
+  };
+
+  // Create the node (parent will be determined by context)
+  const nodeId = useViroNode("geometry", 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;
+};