@reactvision/react-viro 2.42.0 → 2.43.1

package/dist/fabric-interop/components/ViroSphere.d.ts

@@ -0,0 +1,22 @@
+/**
+ * ViroSphere
+ *
+ * A 3D sphere component with customizable radius and materials.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroSphereProps extends ViroCommonProps {
+    radius?: number;
+    facesCount?: number;
+    segmentCount?: number;
+    widthSegmentCount?: number;
+    heightSegmentCount?: number;
+    materials?: string | string[];
+    lightReceivingBitMask?: number;
+    shadowCastingBitMask?: number;
+    highAccuracyEvents?: boolean;
+}
+/**
+ * ViroSphere is a 3D sphere component with customizable radius and materials.
+ */
+export declare const ViroSphere: React.FC<ViroSphereProps>;

package/dist/fabric-interop/components/ViroSphere.js

@@ -0,0 +1,49 @@
+"use strict";
+/**
+ * ViroSphere
+ *
+ * A 3D sphere component with customizable radius and materials.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroSphere = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroSphere is a 3D sphere component with customizable radius and materials.
+ */
+const ViroSphere = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.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 = (0, ViroUtils_1.useViroNode)("sphere", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.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;
+};
+exports.ViroSphere = ViroSphere;

package/dist/fabric-interop/components/ViroSpinner.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ViroSpinner
+ *
+ * A component for displaying loading spinners in 3D space.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroSpinnerProps extends ViroCommonProps {
+    type?: "light" | "dark";
+    size?: "small" | "large";
+    lightReceivingBitMask?: number;
+    shadowCastingBitMask?: number;
+}
+/**
+ * ViroSpinner is a component for displaying loading spinners in 3D space.
+ * It provides visual feedback during loading operations.
+ */
+export declare const ViroSpinner: React.FC<ViroSpinnerProps>;

package/dist/fabric-interop/components/ViroSpinner.js

@@ -0,0 +1,45 @@
+"use strict";
+/**
+ * ViroSpinner
+ *
+ * A component for displaying loading spinners in 3D space.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroSpinner = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroSpinner is a component for displaying loading spinners in 3D space.
+ * It provides visual feedback during loading operations.
+ */
+const ViroSpinner = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.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 = (0, ViroUtils_1.useViroNode)("image", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.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;
+};
+exports.ViroSpinner = ViroSpinner;

package/dist/fabric-interop/components/ViroSpotLight.d.ts

@@ -0,0 +1,30 @@
+/**
+ * ViroSpotLight
+ *
+ * A component for adding spot lighting to a scene.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroSpotLightProps extends ViroCommonProps {
+    color?: string;
+    intensity?: number;
+    temperature?: number;
+    direction?: [number, number, number];
+    innerAngle?: number;
+    outerAngle?: number;
+    attenuationStartDistance?: number;
+    attenuationEndDistance?: number;
+    influenceBitMask?: number;
+    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 declare const ViroSpotLight: React.FC<ViroSpotLightProps>;

package/dist/fabric-interop/components/ViroSpotLight.js

@@ -0,0 +1,57 @@
+"use strict";
+/**
+ * ViroSpotLight
+ *
+ * A component for adding spot lighting to a scene.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroSpotLight = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * 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.
+ */
+const ViroSpotLight = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.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 = (0, ViroUtils_1.useViroNode)("spotLight", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.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;
+};
+exports.ViroSpotLight = ViroSpotLight;

package/dist/fabric-interop/components/ViroSurface.d.ts

@@ -0,0 +1,38 @@
+/**
+ * ViroSurface
+ *
+ * A component for rendering a flat surface in 3D space.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroSurfaceProps extends ViroCommonProps {
+    width?: number;
+    height?: number;
+    uvCoordinates?: [
+        [
+            number,
+            number
+        ],
+        [
+            number,
+            number
+        ],
+        [
+            number,
+            number
+        ],
+        [
+            number,
+            number
+        ]
+    ];
+    materials?: string | string[];
+    lightReceivingBitMask?: number;
+    shadowCastingBitMask?: number;
+    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 declare const ViroSurface: React.FC<ViroSurfaceProps>;

package/dist/fabric-interop/components/ViroSurface.js

@@ -0,0 +1,48 @@
+"use strict";
+/**
+ * ViroSurface
+ *
+ * A component for rendering a flat surface in 3D space.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroSurface = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroSurface is a component for rendering a flat surface in 3D space.
+ * It's similar to ViroQuad but with additional properties for more flexibility.
+ */
+const ViroSurface = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.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 = (0, ViroUtils_1.useViroNode)("surface", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.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;
+};
+exports.ViroSurface = ViroSurface;

package/dist/fabric-interop/components/ViroText.d.ts

@@ -0,0 +1,36 @@
+/**
+ * ViroText
+ *
+ * A component for rendering 3D text in the Viro scene.
+ */
+import React from "react";
+import { ViroCommonProps } from "./ViroUtils";
+export interface ViroTextProps extends ViroCommonProps {
+    text: string;
+    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";
+    width?: number;
+    height?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+    materials?: string | string[];
+    extrusionDepth?: number;
+    outerStroke?: {
+        type?: string;
+        width?: number;
+        color?: string;
+    };
+    lightReceivingBitMask?: number;
+    shadowCastingBitMask?: number;
+}
+/**
+ * ViroText is a component for rendering 3D text in the Viro scene.
+ */
+export declare const ViroText: React.FC<ViroTextProps>;

package/dist/fabric-interop/components/ViroText.js

@@ -0,0 +1,59 @@
+"use strict";
+/**
+ * ViroText
+ *
+ * A component for rendering 3D text in the Viro scene.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroText = void 0;
+const ViroUtils_1 = require("./ViroUtils");
+/**
+ * ViroText is a component for rendering 3D text in the Viro scene.
+ */
+const ViroText = (props) => {
+    // Convert common props to the format expected by the native code
+    const nativeProps = {
+        ...(0, ViroUtils_1.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 = (0, ViroUtils_1.useViroNode)("text", nativeProps);
+    // Register event handlers using our new event system
+    (0, ViroUtils_1.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;
+};
+exports.ViroText = ViroText;

package/dist/fabric-interop/components/ViroUtils.d.ts

@@ -0,0 +1,63 @@
+/**
+ * ViroUtils
+ *
+ * Common utility functions and hooks for Viro components.
+ */
+import React from "react";
+import { ViroNodeProps, ViroNodeType } from "../NativeViro";
+export declare const ViroContext: React.Context<string>;
+export declare const useViroParent: () => string;
+export declare function useViroNode(nodeType: ViroNodeType, props: ViroNodeProps, explicitParentId?: string): string;
+export declare function useViroChildren(nodeId: string, children: React.ReactNode): React.ReactNode;
+export type ViroEventHandler = (event: any, ...args: any[]) => void;
+export type ViroPosition = [number, number, number];
+export type ViroRotation = [number, number, number];
+export type ViroScale = [number, number, number] | number;
+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;
+    };
+    canClick?: boolean;
+    canHover?: boolean;
+    canTouch?: boolean;
+    canScroll?: boolean;
+    canSwipe?: boolean;
+    canDrag?: boolean;
+    canFuse?: boolean;
+    canPinch?: boolean;
+    canRotate?: boolean;
+    timeToFuse?: number;
+    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;
+}
+export declare function convertCommonProps(props: ViroCommonProps): ViroNodeProps;
+export declare function useViroEventListeners(nodeId: string, eventHandlers: Record<string, ViroEventHandler | undefined>): void;
+export declare const ViroContextProvider: ({ value, children, }: {
+    value: string;
+    children: React.ReactNode;
+}) => React.FunctionComponentElement<React.ProviderProps<string>>;

package/dist/fabric-interop/components/ViroUtils.js

@@ -0,0 +1,140 @@
+"use strict";
+/**
+ * ViroUtils
+ *
+ * Common utility functions and hooks for Viro components.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ViroContextProvider = exports.useViroParent = exports.ViroContext = void 0;
+exports.useViroNode = useViroNode;
+exports.useViroChildren = useViroChildren;
+exports.convertCommonProps = convertCommonProps;
+exports.useViroEventListeners = useViroEventListeners;
+const react_1 = __importStar(require("react"));
+const NativeViro_1 = require("../NativeViro");
+// Create a proper React Context to pass parent node IDs down the component tree
+exports.ViroContext = react_1.default.createContext("viro_root_scene");
+// Hook to get the current parent node ID
+const useViroParent = () => {
+    return react_1.default.useContext(exports.ViroContext);
+};
+exports.useViroParent = useViroParent;
+// Hook to manage a node's lifecycle
+function useViroNode(nodeType, props, explicitParentId) {
+    const nodeId = (0, react_1.useRef)((0, NativeViro_1.generateNodeId)());
+    const contextParentId = (0, exports.useViroParent)();
+    // Use explicit parent ID if provided, otherwise use context
+    const parentId = explicitParentId || contextParentId;
+    (0, react_1.useEffect)(() => {
+        // Create the node when the component mounts using our enhanced functions
+        (0, NativeViro_1.createNode)(nodeId.current, nodeType, props);
+        // Add to parent if specified
+        if (parentId) {
+            (0, NativeViro_1.addChild)(parentId, nodeId.current);
+        }
+        // Clean up when the component unmounts
+        return () => {
+            // Remove from parent if specified
+            if (parentId) {
+                (0, NativeViro_1.removeChild)(parentId, nodeId.current);
+            }
+            // Delete the node
+            (0, NativeViro_1.deleteNode)(nodeId.current);
+        };
+    }, [nodeType, parentId]);
+    // Update props when they change
+    (0, react_1.useEffect)(() => {
+        (0, NativeViro_1.updateNode)(nodeId.current, props);
+    }, [props]);
+    return nodeId.current;
+}
+// Hook to manage a node's children
+function useViroChildren(nodeId, children) {
+    // Create a context provider to pass the parent ID to children
+    return children;
+}
+// Helper to convert common props to the format expected by the native code
+function convertCommonProps(props) {
+    const { position, rotation, scale, transformBehaviors, opacity, visible, animation, ...rest } = props;
+    const convertedProps = {
+        ...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
+function useViroEventListeners(nodeId, eventHandlers) {
+    (0, react_1.useEffect)(() => {
+        // Register all event handlers and store callback IDs for cleanup
+        const registeredCallbacks = [];
+        Object.entries(eventHandlers).forEach(([eventName, handler]) => {
+            if (handler) {
+                const callbackId = (0, NativeViro_1.registerEventListener)(nodeId, eventName, handler);
+                registeredCallbacks.push({ name: eventName, callbackId });
+            }
+        });
+        // Cleanup when unmounting or dependencies change
+        return () => {
+            registeredCallbacks.forEach(({ name, callbackId }) => {
+                (0, NativeViro_1.unregisterEventListener)(nodeId, name, callbackId);
+            });
+        };
+    }, [nodeId, ...Object.values(eventHandlers)]);
+}
+// Provider component for ViroContext
+const ViroContextProvider = ({ value, children, }) => {
+    return react_1.default.createElement(exports.ViroContext.Provider, { value }, children);
+};
+exports.ViroContextProvider = ViroContextProvider;

package/dist/fabric-interop/components/ViroVRSceneNavigator.d.ts

@@ -0,0 +1,25 @@
+/**
+ * ViroVRSceneNavigator
+ *
+ * A component for rendering VR scenes.
+ */
+import React from "react";
+export interface ViroVRSceneNavigatorProps {
+    initialScene: {
+        scene: React.ComponentType<any>;
+    };
+    vrModeEnabled?: boolean;
+    hdrEnabled?: boolean;
+    pbrEnabled?: boolean;
+    bloomEnabled?: boolean;
+    shadowsEnabled?: boolean;
+    multisamplingEnabled?: boolean;
+    onCameraTransformUpdate?: (transform: any) => void;
+    onExitViro?: () => void;
+    style?: React.CSSProperties;
+}
+/**
+ * ViroVRSceneNavigator is a component for rendering VR scenes.
+ * It provides a container for VR scenes and handles the VR session lifecycle.
+ */
+export declare const ViroVRSceneNavigator: React.FC<ViroVRSceneNavigatorProps>;