@babylonjs/inspector 9.0.0 → 9.2.0

package/lib/cli/protocol.d.ts

@@ -0,0 +1,180 @@
+/**
+ * Serializable description of a command argument, used in protocol messages.
+ */
+export type CommandArgInfo = {
+    /** The name of the argument. */
+    name: string;
+    /** A human-readable description of the argument. */
+    description: string;
+    /** Whether this argument is required. */
+    required?: boolean;
+};
+/**
+ * Serializable description of a command, used in protocol messages.
+ */
+export type CommandInfo = {
+    /** A unique identifier for the command. */
+    id: string;
+    /** A human-readable description of the command. */
+    description: string;
+    /** The arguments this command accepts. */
+    args?: CommandArgInfo[];
+};
+/**
+ * Serializable description of a session, used in protocol messages.
+ */
+export type SessionInfo = {
+    /** The numeric session identifier. */
+    id: number;
+    /** The display name of the session. */
+    name: string;
+    /** ISO 8601 timestamp of when the session connected. */
+    connectedAt: string;
+};
+/**
+ * CLI → Bridge: Request the list of active browser sessions.
+ */
+export type SessionsRequest = {
+    /** The message type discriminator. */
+    type: "sessions";
+};
+/**
+ * CLI → Bridge: Request the list of commands available from a session.
+ */
+export type CommandsRequest = {
+    /** The message type discriminator. */
+    type: "commands";
+    /** The session to query for commands. */
+    sessionId: number;
+};
+/**
+ * CLI → Bridge: Execute a command on a session.
+ */
+export type ExecRequest = {
+    /** The message type discriminator. */
+    type: "exec";
+    /** The session to execute the command on. */
+    sessionId: number;
+    /** The identifier of the command to execute. */
+    commandId: string;
+    /** Key-value pairs of arguments for the command. */
+    args: Record<string, string>;
+};
+/**
+ * CLI → Bridge: Stop the bridge process.
+ */
+export type StopRequest = {
+    /** The message type discriminator. */
+    type: "stop";
+};
+/**
+ * All messages that the CLI sends to the bridge.
+ */
+export type CliRequest = SessionsRequest | CommandsRequest | ExecRequest | StopRequest;
+/**
+ * Bridge → CLI: Response with the list of active sessions.
+ */
+export type SessionsResponse = {
+    /** The message type discriminator. */
+    type: "sessionsResponse";
+    /** The list of active sessions. */
+    sessions: SessionInfo[];
+};
+/**
+ * Bridge → CLI: Response with the list of commands from a session.
+ */
+export type CommandsResponse = {
+    /** The message type discriminator. */
+    type: "commandsResponse";
+    /** The list of available commands, if successful. */
+    commands?: CommandInfo[];
+    /** An error message, if the request failed. */
+    error?: string;
+};
+/**
+ * Bridge → CLI: Response with the result of a command execution.
+ */
+export type ExecResponse = {
+    /** The message type discriminator. */
+    type: "execResponse";
+    /** The result of the command execution, if successful. */
+    result?: string;
+    /** An error message, if the execution failed. */
+    error?: string;
+};
+/**
+ * Bridge → CLI: Acknowledgement that the bridge is stopping.
+ */
+export type StopResponse = {
+    /** The message type discriminator. */
+    type: "stopResponse";
+    /** Whether the bridge stopped successfully. */
+    success: boolean;
+};
+/**
+ * All messages that the bridge sends to the CLI.
+ */
+export type CliResponse = SessionsResponse | CommandsResponse | ExecResponse | StopResponse;
+/**
+ * Browser → Bridge: Register a new session.
+ */
+export type RegisterRequest = {
+    /** The message type discriminator. */
+    type: "register";
+    /** The display name for this session. */
+    name: string;
+};
+/**
+ * Browser → Bridge: Response to a listCommands request from the bridge.
+ */
+export type CommandListResponse = {
+    /** The message type discriminator. */
+    type: "commandListResponse";
+    /** The identifier of the original request. */
+    requestId: string;
+    /** The list of registered commands. */
+    commands: CommandInfo[];
+};
+/**
+ * Browser → Bridge: Response to an execCommand request from the bridge.
+ */
+export type CommandResponse = {
+    /** The message type discriminator. */
+    type: "commandResponse";
+    /** The identifier of the original request. */
+    requestId: string;
+    /** The result of the command execution, if successful. */
+    result?: string;
+    /** An error message, if the execution failed. */
+    error?: string;
+};
+/**
+ * All messages that the browser sends to the bridge.
+ */
+export type BrowserRequest = RegisterRequest | CommandListResponse | CommandResponse;
+/**
+ * Bridge → Browser: Request the list of registered commands.
+ */
+export type ListCommandsRequest = {
+    /** The message type discriminator. */
+    type: "listCommands";
+    /** A unique identifier for this request. */
+    requestId: string;
+};
+/**
+ * Bridge → Browser: Request execution of a command.
+ */
+export type ExecCommandRequest = {
+    /** The message type discriminator. */
+    type: "execCommand";
+    /** A unique identifier for this request. */
+    requestId: string;
+    /** The identifier of the command to execute. */
+    commandId: string;
+    /** Key-value pairs of arguments for the command. */
+    args: Record<string, string>;
+};
+/**
+ * All messages that the bridge sends to the browser.
+ */
+export type BrowserResponse = ListCommandsRequest | ExecCommandRequest;

package/lib/components/curveEditor/bottomBar/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/bottomBar.d.ts

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Bottom bar component with playback controls and frame navigation.
+ * @returns The BottomBar component.
+ */
+export declare const BottomBar: FunctionComponent;

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

@@ -0,0 +1,6 @@
+import { type FunctionComponent } from "react";
+/**
+ * Main canvas area containing the graph, playhead, and frame bars
+ * @returns The canvas component
+ */
+export declare const Canvas: FunctionComponent;

package/lib/components/curveEditor/canvas/curve.d.ts

@@ -0,0 +1,14 @@
+import { type FunctionComponent } from "react";
+import { type CurveData } from "./curveData";
+type CurveProps = {
+    curve: CurveData;
+    convertX: (frame: number) => number;
+    convertY: (value: number) => number;
+};
+/**
+ * Curve component that renders an animation curve path
+ * @param props - The curve props
+ * @returns The rendered curve SVG element
+ */
+export declare const Curve: FunctionComponent<CurveProps>;
+export {};

package/lib/components/curveEditor/canvas/curveData.d.ts

@@ -0,0 +1,40 @@
+import { Animation } from "@babylonjs/core/Animations/animation.js";
+import { AnimationKeyInterpolation } from "@babylonjs/core/Animations/animationKey.js";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+export interface KeyEntry {
+    frame: number;
+    value: number;
+    inTangent?: number;
+    outTangent?: number;
+    lockedTangent: boolean;
+    interpolation?: AnimationKeyInterpolation;
+}
+export declare class CurveData {
+    static readonly SampleRate = 50;
+    keys: KeyEntry[];
+    animation: Animation;
+    color: string;
+    onDataUpdatedObservable: Observable<void>;
+    property?: string;
+    tangentBuilder?: () => any;
+    setDefaultInTangent?: (keyId: number) => any;
+    setDefaultOutTangent?: (keyId: number) => any;
+    siblings: CurveData[];
+    static readonly TangentLength = 50;
+    constructor(color: string, animation: Animation, property?: string, tangentBuilder?: () => any, setDefaultInTangent?: (keyId: number) => any, setDefaultOutTangent?: (keyId: number) => any);
+    getPathData(convertX: (x: number) => number, convertY: (y: number) => number): string;
+    updateLockedTangentMode(keyIndex: number, enabled: boolean): void;
+    updateInterpolationMode(keyIndex: number, interpolationMode: AnimationKeyInterpolation): void;
+    getInControlPoint(keyIndex: number): number | undefined;
+    getOutControlPoint(keyIndex: number): number | undefined;
+    hasDefinedOutTangent(keyIndex: number): boolean;
+    evaluateOutTangent(keyIndex: number): number;
+    hasDefinedInTangent(keyIndex: number): boolean;
+    evaluateInTangent(keyIndex: number): number;
+    storeDefaultInTangent(keyIndex: number): void;
+    storeDefaultOutTangent(keyIndex: number): void;
+    updateInTangentFromControlPoint(keyId: number, slope: number): void;
+    updateOutTangentFromControlPoint(keyId: number, slope: number): void;
+    updateKeyFrame(keyId: number, frame: number): void;
+    updateKeyValue(keyId: number, value: number): void;
+}

package/lib/components/curveEditor/canvas/frameBar.d.ts

@@ -0,0 +1,12 @@
+import { type FunctionComponent } from "react";
+type FrameBarProps = {
+    /** Width of the frame bar */
+    width: number;
+};
+/**
+ * Frame bar showing frame numbers along the top of the graph
+ * @param props - The component props
+ * @returns The frame bar component
+ */
+export declare const FrameBar: FunctionComponent<FrameBarProps>;
+export {};

package/lib/components/curveEditor/canvas/graph.d.ts

@@ -0,0 +1,11 @@
+import { type FunctionComponent } from "react";
+type GraphProps = {
+    width: number;
+    height: number;
+};
+/**
+ * Main graph area for displaying and editing animation curves
+ * @returns The graph component
+ */
+export declare const Graph: FunctionComponent<GraphProps>;
+export {};

package/lib/components/curveEditor/canvas/keyPoint.d.ts

@@ -0,0 +1,34 @@
+import { type Nullable } from "@babylonjs/core/types.js";
+import * as React from "react";
+import { type CurveData } from "./curveData";
+/** Selection state for key points */
+export declare enum SelectionState {
+    None = 0,
+    Selected = 1,
+    Siblings = 2
+}
+/** Props for the KeyPointComponent */
+interface IKeyPointComponentProps {
+    x: number;
+    y: number;
+    getPreviousX: () => Nullable<number>;
+    getNextX: () => Nullable<number>;
+    invertX: (x: number) => number;
+    invertY: (y: number) => number;
+    convertX: (x: number) => number;
+    convertY: (y: number) => number;
+    scale: number;
+    keyId: number;
+    curve: CurveData;
+    channel: string;
+    onFrameValueChanged: (value: number) => void;
+    onKeyValueChanged: (value: number) => void;
+}
+/**
+ * KeyPointComponent - Renders a single key point on the curve editor
+ * Handles selection, dragging, and tangent manipulation
+ * @param props - The component props
+ * @returns The rendered key point SVG element
+ */
+export declare const KeyPointComponent: React.FunctionComponent<IKeyPointComponentProps>;
+export default KeyPointComponent;

package/lib/components/curveEditor/canvas/playHead.d.ts

@@ -0,0 +1,12 @@
+import { type FunctionComponent } from "react";
+type PlayHeadProps = {
+    width: number;
+    height: number;
+};
+/**
+ * Playhead component showing current frame position
+ * Uses direct DOM manipulation (like v1) to avoid render cycle flashing during animation
+ * @returns The playhead component
+ */
+export declare const PlayHead: FunctionComponent<PlayHeadProps>;
+export {};

package/lib/components/curveEditor/canvas/rangeFrameBar.d.ts

@@ -0,0 +1,10 @@
+import { type FunctionComponent } from "react";
+type RangeFrameBarProps = {
+    width: number;
+};
+/**
+ * Range frame bar showing frame tick marks and keyframe indicators
+ * @returns The range frame bar component
+ */
+export declare const RangeFrameBar: FunctionComponent<RangeFrameBarProps>;
+export {};

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

@@ -0,0 +1,29 @@
+import { type FunctionComponent } 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";
+/**
+ * Props for the CurveEditor component
+ */
+export type CurveEditorProps = {
+    /** 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;
+};
+/**
+ * Animation Curve Editor component for editing animation keyframes and curves
+ * @param props - The component props
+ * @returns The curve editor component
+ */
+export declare const CurveEditor: FunctionComponent<CurveEditorProps>;

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

@@ -0,0 +1,31 @@
+import { type FunctionComponent } 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";
+/**
+ * Props for the CurveEditorButton component
+ */
+export type CurveEditorButtonProps = {
+    /** 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;
+    /** Button label */
+    label?: string;
+};
+/**
+ * Button component that opens the Animation Curve Editor in a popup window
+ * @param props - The component props
+ * @returns The button component
+ */
+export declare const CurveEditorButton: FunctionComponent<CurveEditorButtonProps>;

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

@@ -0,0 +1,56 @@
+/**
+ * Color constants for the curve editor
+ * These colors are used consistently across the curve editor UI for
+ * representing different animation channels and UI elements.
+ */
+/**
+ * Channel colors for multi-component animations (vectors, colors, quaternions)
+ */
+export declare const ChannelColors: {
+    /** Red channel / X component */
+    readonly X: "#DB3E3E";
+    /** Green channel / Y component */
+    readonly Y: "#51E22D";
+    /** Blue channel / Z component */
+    readonly Z: "#00A3FF";
+    /** W component (quaternions) */
+    readonly W: "#8700FF";
+    /** Alpha channel */
+    readonly ALPHA: "#FFFFFF";
+};
+/**
+ * Aliases for color channels (R, G, B map to X, Y, Z)
+ */
+export declare const ColorChannelColors: {
+    /** Red channel */
+    readonly R: "#DB3E3E";
+    /** Green channel */
+    readonly G: "#51E22D";
+    /** Blue channel */
+    readonly B: "#00A3FF";
+    /** Alpha channel */
+    readonly A: "#FFFFFF";
+};
+/**
+ * Default curve color for single-component (float) animations
+ */
+export declare const DefaultCurveColor = "#ffffff";
+/**
+ * Graph UI colors
+ */
+export declare const GraphColors: {
+    /** Zero line color */
+    readonly zeroLine: "#666666";
+    /** Selection rectangle stroke */
+    readonly selectionStroke: "#ffffff";
+    /** Value axis label color */
+    readonly valueAxisLabel: "#555555";
+    /** Value axis background */
+    readonly valueAxisBackground: "#111111";
+    /** Selected keypoint color (gold) */
+    readonly selectedKeypoint: "#FFD700";
+    /** Default keypoint stroke color */
+    readonly keypointStroke: "#ffffff";
+    /** Tangent handle color */
+    readonly tangentHandle: "#FFD700";
+};