@babylonjs/inspector 9.0.0 → 9.2.0

package/lib/components/curveEditor/curveEditorContext.d.ts

@@ -0,0 +1,267 @@
+import { type Dispatch, type FunctionComponent, type PropsWithChildren, type SetStateAction } from "react";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type Animation } from "@babylonjs/core/Animations/animation.js";
+import { type TargetedAnimation, type AnimationGroup } from "@babylonjs/core/Animations/animationGroup.js";
+import { type Scene } from "@babylonjs/core/scene.js";
+import { type IAnimatable } from "@babylonjs/core/Animations/animatable.interface.js";
+import { type AnimationKeyInterpolation } from "@babylonjs/core/Animations/animationKey.js";
+import { type CurveData } from "./canvas/curveData";
+/**
+ * Represents a key point on a curve
+ */
+export type KeyPoint = {
+    /** The curve data this key point belongs to */
+    curve: CurveData;
+    /** The key index in the animation */
+    keyId: number;
+};
+/** Payload sent when a main key point is designated for multi-point coordination */
+export type MainKeyPointInfo = {
+    x: number;
+    y: number;
+    curve: CurveData;
+    keyId: number;
+};
+/** Payload sent when the main key point moves during drag */
+export type MainKeyPointPosition = {
+    x: number;
+    y: number;
+};
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+/**
+ * Options for active animation changed event
+ */
+export type ActiveAnimationChangedOptions = {
+    /** Whether to evaluate keys */
+    evaluateKeys?: boolean;
+    /** Whether to update frame */
+    frame?: boolean;
+    /** Whether to update range */
+    range?: boolean;
+};
+/**
+ * State for the curve editor
+ */
+export type CurveEditorState = {
+    /** Editor title */
+    title: string;
+    /** All animations in the editor */
+    animations: Nullable<Animation[] | TargetedAnimation[]>;
+    /** The scene */
+    scene: Scene;
+    /** Target animatable */
+    target: Nullable<IAnimatable>;
+    /** Root animation group if any */
+    rootAnimationGroup: Nullable<AnimationGroup>;
+    /** Currently active/selected animations */
+    activeAnimations: Animation[];
+    /** Active color channels by animation ID */
+    activeChannels: {
+        [key: number]: string;
+    };
+    /** Currently selected key points */
+    activeKeyPoints: Nullable<KeyPoint[]>;
+    /** The main/primary selected key point */
+    mainKeyPoint: Nullable<KeyPoint>;
+    /** Snippet ID for sharing */
+    snippetId: string;
+    /** Whether using targeted animations */
+    useTargetAnimations: boolean;
+    /** Current playhead frame */
+    activeFrame: number;
+    /** Start of visible/play range */
+    fromKey: number;
+    /** End of visible/play range */
+    toKey: number;
+    /** Whether to use existing play range */
+    useExistingPlayRange: boolean;
+    /** Playback direction */
+    forwardAnimation: boolean;
+    /** Whether animation is playing */
+    isPlaying: boolean;
+    /** Total clip length in frames */
+    clipLength: number;
+    /** Minimum reference frame */
+    referenceMinFrame: number;
+    /** Maximum reference frame */
+    referenceMaxFrame: number;
+    /** Whether an input is focused */
+    focusedInput: boolean;
+    /** Lock last frame value */
+    lockLastFrameValue: boolean;
+    /** Lock last frame frame number */
+    lockLastFrameFrame: boolean;
+};
+/**
+ * Actions available in the curve editor
+ */
+export type CurveEditorActions = {
+    /** Set active animations */
+    setActiveAnimations: Dispatch<SetStateAction<Animation[]>>;
+    /** Set active frame */
+    setActiveFrame: Dispatch<SetStateAction<number>>;
+    /** Set from key */
+    setFromKey: Dispatch<SetStateAction<number>>;
+    /** Set to key */
+    setToKey: Dispatch<SetStateAction<number>>;
+    /** Set is playing */
+    setIsPlaying: Dispatch<SetStateAction<boolean>>;
+    /** Set clip length */
+    setClipLength: Dispatch<SetStateAction<number>>;
+    /** Set reference max frame */
+    setReferenceMaxFrame: Dispatch<SetStateAction<number>>;
+    /** Set focused input */
+    setFocusedInput: Dispatch<SetStateAction<boolean>>;
+    /** Set active key points */
+    setActiveKeyPoints: Dispatch<SetStateAction<Nullable<KeyPoint[]>>>;
+    /** Set main key point */
+    setMainKeyPoint: Dispatch<SetStateAction<Nullable<KeyPoint>>>;
+    /** Set active channels */
+    setActiveChannels: Dispatch<SetStateAction<{
+        [key: number]: string;
+    }>>;
+    /** Play animation */
+    play: (forward: boolean) => void;
+    /** Stop animation */
+    stop: () => void;
+    /** Move to specific frame */
+    moveToFrame: (frame: number) => void;
+    /** Refresh target state */
+    refreshTarget: () => void;
+    /** Clear key point selection */
+    clearSelection: () => void;
+    /** Enable a channel for an animation */
+    enableChannel: (animation: Animation, color: string) => void;
+    /** Disable a channel for an animation */
+    disableChannel: (animation: Animation) => void;
+    /** Check if channel is enabled */
+    isChannelEnabled: (animation: Animation, color: string) => boolean;
+    /** Get active channel color */
+    getActiveChannel: (animation: Animation) => string | undefined;
+    /** Reset all active channels */
+    resetAllActiveChannels: () => void;
+    /** Get previous key frame */
+    getPrevKey: () => Nullable<number>;
+    /** Get next key frame */
+    getNextKey: () => Nullable<number>;
+    /** Prepare the editor */
+    prepare: () => void;
+};
+/**
+ * Observables for curve editor events
+ */
+export type CurveEditorObservables = {
+    /** Fired when active animation changes */
+    onActiveAnimationChanged: Observable<ActiveAnimationChangedOptions>;
+    /** Fired when active key point changes */
+    onActiveKeyPointChanged: Observable<void>;
+    /** Fired when host window is resized */
+    onHostWindowResized: Observable<void>;
+    /** Fired to select all keys */
+    onSelectAllKeys: Observable<void>;
+    /** Fired when active key frame changes */
+    onActiveKeyFrameChanged: Observable<number>;
+    /** Fired when frame is set */
+    onFrameSet: Observable<number>;
+    /** Fired when frame is manually entered */
+    onFrameManuallyEntered: Observable<number>;
+    /** Fired when main key point is set for multi-point coordination */
+    onMainKeyPointSet: Observable<MainKeyPointInfo>;
+    /** Fired when main key point moves during drag */
+    onMainKeyPointMoved: Observable<MainKeyPointPosition>;
+    /** Fired when value is set */
+    onValueSet: Observable<number>;
+    /** Fired when value is manually entered */
+    onValueManuallyEntered: Observable<number>;
+    /** Fired when frame is required */
+    onFrameRequired: Observable<void>;
+    /** Fired when create or update key point is required */
+    onCreateOrUpdateKeyPointRequired: Observable<void>;
+    /** Fired when flatten tangent is required */
+    onFlattenTangentRequired: Observable<void>;
+    /** Fired when linear tangent is required */
+    onLinearTangentRequired: Observable<void>;
+    /** Fired when break tangent is required */
+    onBreakTangentRequired: Observable<void>;
+    /** Fired when unify tangent is required */
+    onUnifyTangentRequired: Observable<void>;
+    /** Fired when step tangent is required */
+    onStepTangentRequired: Observable<void>;
+    /** Fired when animation should be deleted */
+    onDeleteAnimation: Observable<Animation>;
+    /** Fired when graph is moved */
+    onGraphMoved: Observable<number>;
+    /** Fired when graph is scaled */
+    onGraphScaled: Observable<number>;
+    /** Fired when range is updated */
+    onRangeUpdated: Observable<void>;
+    /** Fired when move to frame is required */
+    onMoveToFrameRequired: Observable<number>;
+    /** Fired when animation state changes */
+    onAnimationStateChanged: Observable<void>;
+    /** Fired when delete active key points is required */
+    onDeleteKeyActiveKeyPoints: Observable<void>;
+    /** Fired when selection rectangle is moved */
+    onSelectionRectangleMoved: Observable<DOMRect>;
+    /** Fired when animations are loaded */
+    onAnimationsLoaded: Observable<void>;
+    /** Fired when clip length is increased */
+    onClipLengthIncreased: Observable<number>;
+    /** Fired when clip length is decreased */
+    onClipLengthDecreased: Observable<number>;
+    /** Fired when interpolation mode is set */
+    onInterpolationModeSet: Observable<{
+        keyId: number;
+        value: AnimationKeyInterpolation;
+    }>;
+    /** Fired when select to is activated */
+    onSelectToActivated: Observable<{
+        from: number;
+        to: number;
+    }>;
+    /** Fired when range frame bar is resized */
+    onRangeFrameBarResized: Observable<number>;
+    /** Fired when playhead is moved */
+    onPlayheadMoved: Observable<number>;
+    /** Fired when active key data changes */
+    onActiveKeyDataChanged: Observable<number>;
+};
+/**
+ * Combined context value
+ */
+export type CurveEditorContextValue = {
+    /** Editor state */
+    state: CurveEditorState;
+    /** Editor actions */
+    actions: CurveEditorActions;
+    /** Editor observables */
+    observables: CurveEditorObservables;
+};
+/**
+ * Props for the CurveEditorProvider
+ */
+export type CurveEditorProviderProps = {
+    /** The scene */
+    scene: Scene;
+    /** Target animatable */
+    target: Nullable<IAnimatable>;
+    /** Animations to edit */
+    animations: Nullable<Animation[] | TargetedAnimation[]>;
+    /** Root animation group if any */
+    rootAnimationGroup?: Nullable<AnimationGroup>;
+    /** Editor title */
+    title?: string;
+    /** Whether using targeted animations */
+    useTargetAnimations?: boolean;
+};
+/**
+ * Provider component for curve editor context
+ * @param props - Provider props including scene, target, and animations
+ * @returns The provider component with context
+ */
+export declare const CurveEditorProvider: FunctionComponent<PropsWithChildren<CurveEditorProviderProps>>;
+/**
+ * Hook to access the curve editor context
+ * @returns The curve editor context value
+ */
+export declare function useCurveEditor(): CurveEditorContextValue;

package/lib/components/curveEditor/rangeSelector.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Range selector component - a draggable scrollbar for selecting frame range
+ * @returns The range selector component
+ */
+export declare const RangeSelector: FunctionComponent;

package/lib/components/curveEditor/sideBar/addAnimationPanel.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionComponent } from "react";
+type AddAnimationPanelProps = {
+    onClose: () => void;
+};
+/**
+ * Panel for adding new animations
+ * @returns The add animation panel component
+ */
+export declare const AddAnimationPanel: FunctionComponent<AddAnimationPanelProps>;
+export {};

package/lib/components/curveEditor/sideBar/animationList.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Animation list component showing all animations
+ * @returns Animation list component
+ */
+export declare const AnimationList: FunctionComponent;

package/lib/components/curveEditor/sideBar/editAnimationPanel.d.ts

@@ -0,0 +1,12 @@
+import { type FunctionComponent } from "react";
+import { type Animation } from "@babylonjs/core/Animations/animation.js";
+type EditAnimationPanelProps = {
+    animation: Animation;
+    onClose: () => void;
+};
+/**
+ * Panel for editing animation properties
+ * @returns The edit animation panel component
+ */
+export declare const EditAnimationPanel: FunctionComponent<EditAnimationPanelProps>;
+export {};

package/lib/components/curveEditor/sideBar/loadAnimationPanel.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionComponent } from "react";
+type LoadAnimationPanelProps = {
+    onClose: () => void;
+};
+/**
+ * Panel for loading animations from file or snippet server
+ * @returns The load animation panel component
+ */
+export declare const LoadAnimationPanel: FunctionComponent<LoadAnimationPanelProps>;
+export {};

package/lib/components/curveEditor/sideBar/saveAnimationPanel.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionComponent } from "react";
+type SaveAnimationPanelProps = {
+    onClose: () => void;
+};
+/**
+ * Panel for saving animations to file or snippet server
+ * @returns The save animation panel component
+ */
+export declare const SaveAnimationPanel: FunctionComponent<SaveAnimationPanelProps>;
+export {};

package/lib/components/curveEditor/sideBar.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Sidebar component for the curve editor with animation list and controls
+ * @returns The sidebar component
+ */
+export declare const SideBar: FunctionComponent;

package/lib/components/curveEditor/topBar.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Top toolbar for the curve editor with frame/value inputs and action buttons
+ * @returns The top bar component
+ */
+export declare const TopBar: FunctionComponent;

package/lib/components/debug/debugPane.d.ts

@@ -0,0 +1,6 @@
+import { type Scene } from "@babylonjs/core/index.js";
+import { ExtensibleAccordion } from "../extensibleAccordion";
+export declare const HelpersDebugSectionIdentity: unique symbol;
+export declare const TextureChannelsDebugSectionIdentity: unique symbol;
+export declare const FeaturesDebugSectionIdentity: unique symbol;
+export declare const DebugPane: typeof ExtensibleAccordion<Scene>;

package/lib/components/errorBoundary.d.ts

@@ -0,0 +1,31 @@
+import { type ErrorInfo, type ReactNode, Component } from "react";
+/**
+ * Props for the {@link ErrorBoundary} component.
+ */
+type ErrorBoundaryProps = {
+    /** Child components to render */
+    children: ReactNode;
+    /** Optional fallback UI to show on error */
+    fallback?: ReactNode;
+    /** Optional callback when an error occurs */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /** Optional name for identifying this boundary in logs */
+    name?: string;
+};
+type ErrorBoundaryState = {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: ErrorInfo | null;
+};
+/**
+ * Error boundary component that catches JavaScript errors in child components
+ * and displays a fallback UI instead of crashing the entire application.
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    private _handleRetry;
+    render(): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/lib/components/extensibleAccordion.d.ts

@@ -0,0 +1,67 @@
+import { type ComponentType, type PropsWithChildren, type Ref } from "react";
+import { type AccordionProps } from "@babylonjs/shared-ui-components/fluent/primitives/accordion.js";
+/**
+ * Describes a section within a dynamic accordion that can be added at runtime.
+ */
+export type DynamicAccordionSection = Readonly<{
+    /**
+     * A unique identity for the section, which can be referenced by section content.
+     */
+    identity: string;
+    /**
+     * An optional order for the section, relative to other sections.
+     * Defaults to 0.
+     */
+    order?: number;
+    /**
+     * An optional flag indicating whether the section should be collapsed by default.
+     * Defaults to false.
+     */
+    collapseByDefault?: boolean;
+}>;
+/**
+ * Describes content that belongs to a section within a dynamic accordion.
+ */
+export type DynamicAccordionSectionContent<ContextT> = Readonly<{
+    /**
+     * A unique key for the the content.
+     */
+    key: string;
+    /**
+     * The section this content belongs to.
+     */
+    section: string;
+    /**
+     * An optional order for the content within the section.
+     * Defaults to 0.
+     */
+    order?: number;
+    /**
+     * The React component that will be rendered for this content.
+     */
+    component: ComponentType<{
+        context: ContextT;
+    }>;
+}>;
+/**
+ * Imperative handle for controlling section highlights on the extensible accordion.
+ */
+export type SectionsImperativeRef = {
+    /**
+     * Highlights the specified sections, collapsing all others until the context changes.
+     * @param sections The identity strings of the sections to highlight.
+     */
+    highlightSections: (sections: readonly string[]) => void;
+};
+/**
+ * An accordion component that supports dynamically adding sections and section content at runtime.
+ * Combines statically defined children sections with dynamically registered sections and content.
+ * @param props The accordion props including sections, section content, context, and an optional imperative ref.
+ * @returns The extensible accordion component.
+ */
+export declare function ExtensibleAccordion<ContextT = unknown>(props: PropsWithChildren<{
+    sections: readonly DynamicAccordionSection[];
+    sectionContent: readonly DynamicAccordionSectionContent<ContextT>[];
+    context: ContextT;
+    sectionsRef?: Ref<SectionsImperativeRef>;
+} & AccordionProps>): import("react/jsx-runtime").JSX.Element;

package/lib/components/gizmoToolbar.d.ts

@@ -0,0 +1,7 @@
+import { type FunctionComponent } from "react";
+import { type IGizmoService } from "../services/gizmoService";
+import { type ISceneContext } from "../services/sceneContext";
+export declare const GizmoToolbar: FunctionComponent<{
+    gizmoService: IGizmoService;
+    sceneContext: ISceneContext;
+}>;

package/lib/components/pane.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Used to apply common styles to panes.
+ */
+export declare const SidePaneContainer: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/performanceViewer/canvasGraph.d.ts

@@ -0,0 +1,16 @@
+import { type PerformanceViewerCollector } from "@babylonjs/core/Misc/PerformanceViewer/performanceViewerCollector.js";
+import { type Observable } from "@babylonjs/core/Misc/observable.js";
+import { type FunctionComponent } from "react";
+import { type PerfLayoutSize, type VisibleRangeChangedObservableProps } from "./graphSupportingTypes";
+import { type Scene } from "@babylonjs/core/scene.js";
+import { type Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+type CanvasGraphProps = {
+    scene: Scene;
+    collector: PerformanceViewerCollector;
+    layoutObservable?: Observable<PerfLayoutSize>;
+    returnToPlayheadObservable?: Observable<void>;
+    onVisibleRangeChangedObservable?: Observable<VisibleRangeChangedObservableProps>;
+    initialGraphSize?: Vector2;
+};
+export declare const CanvasGraph: FunctionComponent<CanvasGraphProps>;
+export {};