declare module INSPECTOR { export type ModularToolOptions = { /** * The namespace for the tool, used for scoping persisted settings and other storage. */ namespace: string; /** * The container element where the tool will be rendered. */ containerElement: HTMLElement; /** * The service definitions to be registered with the tool. */ serviceDefinitions: readonly WeaklyTypedServiceDefinition[]; /** * The theme mode to use. If not specified, the default is "system", which uses the system/browser preference, and the last used mode is persisted. */ themeMode?: ThemeMode; /** * Whether to show the theme selector in the toolbar. Default is true. */ showThemeSelector?: boolean; /** * The extension feeds that provide optional extensions the user can install. */ extensionFeeds?: readonly IExtensionFeed[]; } & ShellServiceOptions; /** * Creates a modular tool with a base set of common tool services, including the toolbar/side pane basic UI layout. * @param options The options for the tool. * @returns A token that can be used to dispose of the tool. */ export function MakeModularTool(options: ModularToolOptions): BABYLON.IDisposable; type LayoutMode = "inline" | "overlay"; export type InspectorOptions = Omit & { autoResizeEngine?: boolean; layoutMode?: LayoutMode; }; export type InspectorToken = BABYLON.IDisposable & { readonly isDisposed: boolean; readonly onDisposed: BABYLON.IReadonlyObservable; }; export function ShowInspector(scene: BABYLON.Scene, options?: Partial): InspectorToken; export type { EntityDisplayInfo, SceneExplorerCommand, SceneExplorerCommandProvider, SceneExplorerSection } from "./components/scene/sceneExplorer"; export type { IPropertiesService } from "./services/panes/properties/propertiesService"; export type { ISceneExplorerService } from "./services/panes/scene/sceneExplorerService"; export type { IDebugService } from "./services/panes/debugService"; export type { ISettingsService } from "./services/panes/settingsService"; export type { IStatsService } from "./services/panes/statsService"; export type { IToolsService } from "./services/panes/toolsService"; export type { IThemeService } from "./services/themeService"; export type { ISettingsStore, SettingDescriptor } from "./services/settingsStore"; export type { IGizmoService, GizmoMode } from "./services/gizmoService"; export type { IShellService, ToolbarItemDefinition, SidePaneDefinition, CentralContentDefinition } from "./services/shellService"; export var LightTheme: any; export var DarkTheme: any; export var UserFeedbackServiceDefinition: ServiceDefinition<[], [IShellService]>; export type any = "system" | "light" | "dark"; export var any SettingDescriptor; export class any implements BABYLON.IDisposable { private readonly _settingsStore; private readonly _darkModeMediaQuery; private readonly _onChanged; private readonly _onDarkModeMediaQueryChange; private readonly _settingsStoreObserver; constructor(_settingsStore: ISettingsStore); get onChanged(): BABYLON.IReadonlyObservable; get mode(): any; set mode(value: any); get isDark(): boolean; toggle(): void; dispose(): void; } export var any unique symbol; /** * Exposes the current theme used by the application. */ export interface IThemeService extends IService { /** * Whether the current theme is the dark variant or not. */ readonly isDark: boolean; /** * The current theme mode, which can be either "light", "dark" or "system". When set to "system", the theme will match the user's OS-level preference and update automatically when it changes. */ mode: any; /** * Toggles the theme mode between light and dark. If the current mode is "system", it will toggle based on the current OS-level preference. */ toggle(): void; /** * The current theme used by the application. */ readonly theme: any; /** * Observable that fires whenever the theme changes. */ readonly onChanged: BABYLON.IReadonlyObservable; } export var any ServiceDefinition<[IThemeService], [ISettingsStore]>; export var ThemeSelectorServiceDefinition: ServiceDefinition<[], [IShellService]>; export var ShellSettingsServiceDefinition: ServiceDefinition<[], [ISettingsService]>; export var SidePaneDockOverridesSettingDescriptor: SettingDescriptor | undefined>>; export var LeftSidePaneWidthAdjustSettingDescriptor: SettingDescriptor; export var LeftSidePaneHeightAdjustSettingDescriptor: SettingDescriptor; export var RightSidePaneWidthAdjustSettingDescriptor: SettingDescriptor; export var RightSidePaneHeightAdjustSettingDescriptor: SettingDescriptor; export type HorizontalLocation = "left" | "right"; export type VerticalLocation = "top" | "bottom"; /** * Describes an item that can be added to one of the shell's toolbars. */ export type ToolbarItemDefinition = { /** * A unique key for the toolbar item. */ key: string; /** * The component to render for the toolbar item. */ component: React.ComponentType; /** * An optional order for the toolbar item, relative to other items. * Defaults to 0. */ order?: number; /** * The horizontal location of the toolbar item. * Can be either "left" or "right". * In "compact" toolbar mode, "left" and "right" mean the "compact" toolbars at the top/bottom of the left/right side panes. * In "full" toolbar mode, "left" and "right" mean the left side and right side of the full width toolbars above/below the side panes. */ horizontalLocation: HorizontalLocation; /** * The vertical location of the toolbar item. * Can be either "top" or "bottom". */ verticalLocation: VerticalLocation; /** * An optional display name for the toolbar item, used for teaching moments, tooltips, etc. */ displayName?: string; /** * An optional flag to suppress the teaching moment for this toolbar item. * Defaults to false. * Teaching moments are more helpful for dynamically added items, possibly from extensions. */ suppressTeachingMoment?: boolean; }; /** * Describes a side pane that can be added to the shell's left or right side. */ export type SidePaneDefinition = { /** * A unique key for the side pane. */ key: string; /** * An icon component to render for the pane tab. */ icon: React.ComponentType; /** * The component to render for the side pane's content. */ content: React.ComponentType; /** * An optional order for the side pane, relative to other panes. * Defaults to 0. */ order?: number; /** * The horizontal location of the side pane. * Can be either "left" or "right". */ horizontalLocation: HorizontalLocation; /** * The vertical location of the side pane. * Can be either "top" or "bottom". */ verticalLocation: VerticalLocation; /** * The title of the side pane, displayed as a standardized header at the top of the pane. */ title: string; /** * An optional flag to suppress the teaching moment for this side pane. * Defaults to false. * Teaching moments are more helpful for dynamically added panes, possibly from extensions. */ suppressTeachingMoment?: boolean; /** * Keep the pane mounted even when it is not visible. This is useful if you don't want the * user to lose the complex visual state when switching between tabs. */ keepMounted?: boolean; }; type RegisteredSidePane = { readonly key: string; select(): void; }; type SidePaneContainer = { readonly isDocked: boolean; dock(): void; undock(): void; readonly isCollapsed: boolean; collapse(): void; expand(): void; }; /** * Describes content that can be added to the shell's central area (between the side panes and toolbars - e.g. the main content). */ export type CentralContentDefinition = { /** * A unique key for the central content. */ key: string; /** * The component to render for the central content. */ component: React.ComponentType; /** * An optional order for content, relative to other central content. * Defaults to 0. */ order?: number; }; export var RootComponentServiceIdentity: unique symbol; /** * Exposes a top level component that should be rendered as the React root. */ export interface IRootComponentService extends IService { /** * The root component that should be rendered as the React root. */ readonly rootComponent: React.ComponentType; } export var ShellServiceIdentity: unique symbol; /** * Provides a shell for the application, including toolbars, side panes, and central content. * This service allows adding toolbar items, side panes, and central content dynamically. */ export interface IShellService extends IService { /** * Adds a new item to one of the shell's toolbars. * @param item Defines the item to add. */ addToolbarItem(item: Readonly): BABYLON.IDisposable; /** * Adds a new side pane to the shell. * @param pane Defines the side pane to add. */ addSidePane(pane: Readonly): BABYLON.IDisposable; /** * Adds new central content to the shell. * @param content Defines the content area to add. */ addCentralContent(content: Readonly): BABYLON.IDisposable; /** * The left side pane container. */ readonly leftSidePaneContainer: BABYLON.Nullable; /** * The right side pane container. */ readonly rightSidePaneContainer: BABYLON.Nullable; /** * The side panes currently present in the shell. */ readonly sidePanes: readonly RegisteredSidePane[]; } type ToolbarMode = "full" | "compact"; /** * Options for configuring the shell service. */ export type ShellServiceOptions = { /** * The default width of the left side pane. */ leftPaneDefaultWidth?: number; /** * The minimum width of the left side pane. */ leftPaneMinWidth?: number; /** * The default width of the right side pane. */ rightPaneDefaultWidth?: number; /** * The minimum width of the right side pane. */ rightPaneMinWidth?: number; /** * The mode of the toolbars. * Can be either "full" (default) or "compact". * In "full" mode, toolbars are displayed above and below the side panes. * In "compact" mode, toolbars are displayed at the top and bottom of the left and right side panes. */ toolbarMode?: ToolbarMode; /** * Whether the left side pane should start collapsed. Default is false. */ leftPaneDefaultCollapsed?: boolean; /** * Whether the right side pane should start collapsed. Default is false. */ rightPaneDefaultCollapsed?: boolean; /** * A function that can remap the default location of side panes. * @param sidePane The side pane to remap. * @returns The new location for the side pane. */ sidePaneRemapper?: (sidePane: Readonly) => BABYLON.Nullable<{ horizontalLocation: HorizontalLocation; verticalLocation: VerticalLocation; }>; }; export function MakeShellServiceDefinition({ leftPaneDefaultWidth, leftPaneMinWidth, rightPaneDefaultWidth, rightPaneMinWidth, leftPaneDefaultCollapsed, rightPaneDefaultCollapsed, toolbarMode, sidePaneRemapper, }?: ShellServiceOptions): ServiceDefinition<[IShellService, IRootComponentService], []>; export var SettingsStoreIdentity: unique symbol; export type SettingDescriptor = { readonly key: string; readonly defaultValue: T; }; export interface ISettingsStore extends IService { onChanged: BABYLON.IReadonlyObservable; readSetting(descriptor: SettingDescriptor): T; writeSetting(descriptor: SettingDescriptor, value: T): void; } export class SettingsStore implements ISettingsStore { private readonly _namespace; private readonly _onChanged; constructor(_namespace: string); get onChanged(): BABYLON.IReadonlyObservable>; readSetting(descriptor: SettingDescriptor): T; writeSetting(descriptor: SettingDescriptor, value: T): void; } export var SelectionServiceIdentity: unique symbol; /** * Tracks the currently selected entity. */ export interface ISelectionService extends IService { /** * Gets or sets the currently selected entity. */ selectedEntity: BABYLON.Nullable; /** * An observable that notifies when the selected entity changes. */ readonly onSelectedEntityChanged: BABYLON.IReadonlyObservable; } export var SelectionServiceDefinition: ServiceDefinition<[ISelectionService], [IShellService, ISettingsStore, ISettingsService]>; export var SceneContextIdentity: unique symbol; /** * SceneContext provides the current scene, but could have different implementations depending on the context (e.g. inspector, sandbox, etc.) */ export interface ISceneContext extends IService { /** * Gets the current scene. */ readonly currentScene: BABYLON.Nullable; /** * Observable that fires whenever the current scene changes. */ readonly currentSceneObservable: BABYLON.IReadonlyObservable>; } export var PickingServiceDefinition: ServiceDefinition<[], [ISceneContext, IShellService, ISelectionService, IGizmoService, ISettingsService]>; export var MiniStatsServiceDefinition: ServiceDefinition<[], [ISceneContext, IShellService]>; export var HighlightSelectedEntitySettingDescriptor: SettingDescriptor; export var HighlightServiceDefinition: ServiceDefinition<[], [ISelectionService, ISceneContext, ISettingsStore, IThemeService, IGizmoService]>; export var CompactModeSettingDescriptor: SettingDescriptor; export var UseDegreesSettingDescriptor: SettingDescriptor; export var UseEulerSettingDescriptor: SettingDescriptor; export var DisableCopySettingDescriptor: SettingDescriptor; export var GizmoToolbarServiceDefinition: ServiceDefinition<[], [IShellService, IGizmoService, ISceneContext]>; type Reference = { value: T; } & BABYLON.IDisposable; export type GizmoMode = "translate" | "rotate" | "scale" | "boundingBox"; export var GizmoServiceIdentity: unique symbol; export interface IGizmoService extends IService { getUtilityLayer(scene: BABYLON.Scene, layer?: string): Reference; getCameraGizmo(camera: BABYLON.Camera): Reference; getLightGizmo(light: BABYLON.Light): Reference; getCameraGizmos(scene: BABYLON.Scene): readonly BABYLON.CameraGizmo[]; getLightGizmos(scene: BABYLON.Scene): readonly BABYLON.LightGizmo[]; gizmoMode: GizmoMode | undefined; readonly onGizmoModeChanged: BABYLON.IReadonlyObservable; coordinatesMode: BABYLON.GizmoCoordinatesMode; readonly onCoordinatesModeChanged: BABYLON.IReadonlyObservable; gizmoCamera: BABYLON.Camera | null; readonly onCameraGizmoChanged: BABYLON.IReadonlyObservable; } export var GizmoServiceDefinition: ServiceDefinition<[IGizmoService], [ISceneContext, ISelectionService]>; export var ExtensionListServiceDefinition: ServiceDefinition<[], [IShellService]>; export var TextureEditorServiceIdentity: unique symbol; /** * Allows tools to be added to the texture editor, and also exposes a React component that is the texture editor with all the tools configured. */ export interface ITextureEditorService extends IService { /** * Adds a new tool to the texture editor. * @param toolProvider A provider that can create instances of the tool. * @returns A disposable that removes the tool from the texture editor when disposed. */ addTool(toolProvider: TextureEditorToolProvider): BABYLON.IDisposable; /** * The texture editor component with all the registered tools. */ readonly component: ComponentType; } export var TextureEditorServiceDefinition: ServiceDefinition<[ITextureEditorService], []>; /** * Rectangle selection tool for selecting regions of the texture */ export var RectangleSelect: TextureEditorToolProvider; export var Paintbrush: TextureEditorToolProvider; /** * Floodfill tool for filling regions with a solid color */ export var Floodfill: TextureEditorToolProvider; /** * Eyedropper tool for picking colors from the texture */ export var Eyedropper: TextureEditorToolProvider; export var Contrast: TextureEditorToolProvider; export var ToolsServiceIdentity: unique symbol; /** * A service that provides tools for the user to generate artifacts or perform actions on entities. */ export interface IToolsService extends IService { /** * Adds a new section (e.g. "Export", "Capture", etc.). * @param section A description of the section to add. */ addSection(section: DynamicAccordionSection): BABYLON.IDisposable; /** * Adds content to one or more sections. * @param content A description of the content to add. */ addSectionContent(content: DynamicAccordionSectionContent): BABYLON.IDisposable; } /** * A collection of usually optional, dynamic extensions. * Common examples includes importing/exporting, or other general creation tools. */ export var ToolsServiceDefinition: ServiceDefinition<[IToolsService], [IShellService, ISceneContext]>; export var StatsServiceIdentity: unique symbol; /** * Allows new sections or content to be added to the stats pane. */ export interface IStatsService extends IService { /** * Adds a new section (e.g. "Count", "Frame Steps Duration", etc.). * @param section A description of the section to add. */ addSection(section: DynamicAccordionSection): BABYLON.IDisposable; /** * Adds content to one or more sections. * @param content A description of the content to add. */ addSectionContent(content: DynamicAccordionSectionContent): BABYLON.IDisposable; } /** * Provides a scene stats pane. */ export var StatsServiceDefinition: ServiceDefinition<[IStatsService], [IShellService, ISceneContext]>; export var SettingsServiceIdentity: unique symbol; /** * Allows new sections or content to be added to the Settings pane. */ export interface ISettingsService extends IService { /** * Adds a new section to the settings pane. * @param section A description of the section to add. */ addSection(section: DynamicAccordionSection): BABYLON.IDisposable; /** * Adds content to one or more sections in the settings pane. * @param content A description of the content to add. */ addSectionContent(content: DynamicAccordionSectionContent): BABYLON.IDisposable; } export var SettingsServiceDefinition: ServiceDefinition<[ISettingsService], [IShellService, ISceneContext]>; export var DebugServiceIdentity: unique symbol; /** * Allows new sections or content to be added to the debug pane. */ export interface IDebugService extends IService { /** * Adds a new section. * @param section A description of the section to add. */ addSection(section: DynamicAccordionSection): BABYLON.IDisposable; /** * Adds content to one or more sections. * @param content A description of the content to add. */ addSectionContent(content: DynamicAccordionSectionContent): BABYLON.IDisposable; } export var DebugServiceDefinition: ServiceDefinition<[IDebugService], [IShellService, ISceneContext]>; export var ReflectorServiceDefinition: ServiceDefinition<[], [IToolsService]>; var _default: { readonly serviceDefinitions: readonly [ServiceDefinition<[], [IToolsService]>]; }; export var ExportServiceDefinition: ServiceDefinition<[], [IToolsService]>; export var CaptureToolsDefinition: ServiceDefinition<[], [IToolsService]>; export var GLTFValidationServiceDefinition: ServiceDefinition<[], [IToolsService]>; export var GLTFLoaderServiceIdentity: unique symbol; var CurrentLoaderOptions: { capturePerformanceCounters: false; loggingEnabled: false; } & { alwaysComputeBoundingBox: boolean; alwaysComputeSkeletonRootNode: boolean; animationStartMode: import("loaders/glTF/glTFFileLoader").GLTFLoaderAnimationStartMode; compileMaterials: boolean; compileShadowGenerators: boolean; coordinateSystemMode: import("loaders/glTF/glTFFileLoader").GLTFLoaderCoordinateSystemMode; createInstances: boolean; loadAllMaterials: boolean; loadMorphTargets: boolean; loadNodeAnimations: boolean; loadOnlyMaterials: boolean; loadSkins: boolean; skipMaterials: boolean; targetFps: number; transparencyAsCoverage: boolean; useClipPlane: boolean; useGltfTextureNames: boolean; useRangeRequests: boolean; useSRGBBuffers: boolean; validate: boolean; useOpenPBR: boolean; dontUseTransmissionHelper: boolean; }; export type GLTFLoaderOptionsType = typeof CurrentLoaderOptions; var CurrentExtensionOptions: { EXT_lights_image_based: { enabled: true; }; EXT_mesh_gpu_instancing: { enabled: true; }; EXT_texture_webp: { enabled: true; }; EXT_texture_avif: { enabled: true; }; KHR_draco_mesh_compression: { enabled: true; }; KHR_materials_pbrSpecularGlossiness: { enabled: true; }; KHR_materials_clearcoat: { enabled: true; }; KHR_materials_iridescence: { enabled: true; }; KHR_materials_anisotropy: { enabled: true; }; KHR_materials_emissive_strength: { enabled: true; }; KHR_materials_ior: { enabled: true; }; KHR_materials_sheen: { enabled: true; }; KHR_materials_specular: { enabled: true; }; KHR_materials_unlit: { enabled: true; }; KHR_materials_variants: { enabled: true; }; KHR_materials_transmission: { enabled: true; }; KHR_materials_diffuse_transmission: { enabled: true; }; KHR_materials_volume: { enabled: true; }; KHR_materials_dispersion: { enabled: true; }; KHR_materials_diffuse_roughness: { enabled: true; }; KHR_mesh_quantization: { enabled: true; }; KHR_lights_punctual: { enabled: true; }; EXT_lights_area: { enabled: true; }; KHR_texture_basisu: { enabled: true; }; KHR_texture_transform: { enabled: true; }; KHR_xmp_json_ld: { enabled: true; }; MSFT_lod: { enabled: true; maxLODsToLoad: number; }; MSFT_minecraftMesh: { enabled: true; }; MSFT_sRGBFactors: { enabled: true; }; MSFT_audio_emitter: { enabled: true; }; }; export type GLTFExtensionOptionsType = typeof CurrentExtensionOptions; export var GLTFLoaderOptionsServiceDefinition: ServiceDefinition<[], [IToolsService]>; export var GLTFAnimationImportServiceDefinition: ServiceDefinition<[], [IToolsService]>; export var TextureExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var SpriteManagerExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var SoundExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var SkeletonExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var SceneExplorerServiceIdentity: unique symbol; /** * Allows new sections or commands to be added to the scene explorer pane. */ export interface ISceneExplorerService extends IService { /** * Adds a new section (e.g. "Nodes", "Materials", etc.) (this includes all descendants within the scene graph). * @param section A description of the section to add. */ addSection(section: SceneExplorerSection): BABYLON.IDisposable; /** * Adds a new command (e.g. "Delete", "Rename", etc.) that can be executed on entities in the scene explorer. * @param command A description of the command to add. */ addEntityCommand(command: SceneExplorerCommandProvider): BABYLON.IDisposable; /** * Adds a new command that can be executed on sections in the scene explorer. * @param command A description of the command to add. */ addSectionCommand(command: SceneExplorerCommandProvider): BABYLON.IDisposable; } /** * Provides a scene explorer pane that enables browsing the scene graph and executing commands on entities. */ export var SceneExplorerServiceDefinition: ServiceDefinition<[ISceneExplorerService], [ISceneContext, IShellService, ISelectionService]>; export var RenderingPipelineExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var PostProcessExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var ParticleSystemExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var NodeExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext, IGizmoService]>; export var MaterialExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var GuiExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var FrameGraphExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var EffectLayerExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var DisposableCommandServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export enum DefaultSectionsOrder { Nodes = 100, Skeletons = 200, Materials = 300, Textures = 400, PostProcesses = 500, RenderingPipelines = 600, EffectLayers = 700, ParticleSystems = 800, SpriteManagers = 900, AnimationGroups = 1000, GUIs = 1100, FrameGraphs = 1200, Atmosphere = 1300, Sounds = 1400 } export enum DefaultCommandsOrder { SpritePlay = 600, LightActive = 700, CameraActive = 700, GizmoActive = 800, AnimationGroupPlay = 900, FrameGraphPlay = 900, MeshBoundingBox = 1000, GuiHighlight = 1000, MeshVisibility = 1100, GuiVisibility = 1100, EditNodeMaterial = 1100, EditParticleSystem = 1100, EditNodeGeometry = 1100, EditNodeRenderGraph = 1100, Dispose = 10000 } export var AtmosphereExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var AnimationGroupExplorerServiceDefinition: ServiceDefinition<[], [ISceneExplorerService, ISceneContext]>; export var TransformPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var TexturePropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ITextureEditorService]>; export var SpritePropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ISelectionService]>; export var SkeletonPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ISelectionService]>; export var ScenePropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ISelectionService]>; export var RenderingPipelinePropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var PropertiesServiceIdentity: unique symbol; type PropertiesSectionContent = { /** * A unique key for the the content. */ key: string; /** * A predicate function to determine if the content applies to the given entity. */ predicate: (entity: unknown) => entity is EntityT; } & { content: readonly Omit, "key">[]; }; /** * Allows new sections or content to be added to the properties pane. */ export interface IPropertiesService extends IService { /** * Adds a new section (e.g. "General", "Transforms", etc.). * @param section A description of the section to add. */ addSection(section: DynamicAccordionSection): BABYLON.IDisposable; /** * Adds content to one or more sections. * @param content A description of the content to add. */ addSectionContent(content: PropertiesSectionContent): BABYLON.IDisposable; /** * Highlights the specified sections temporarily to draw the user's attention to them. * @remarks All other sections are collapsed (but can be expanded by the user) until a different entity is selected. * @param sectionIds The identities of the sections to highlight. */ highlightSections(sectionIds: readonly string[]): void; /** * An observable that notifies when a property has been changed by the user. * @remarks This observable only fires for changes made through the properties pane. */ readonly onPropertyChanged: BABYLON.IReadonlyObservable; } /** * Provides a properties pane that enables displaying and editing properties of an entity such as a mesh or a texture. */ export var PropertiesServiceDefinition: ServiceDefinition<[IPropertiesService], [IShellService, ISelectionService]>; export var PostProcessPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var PhysicsPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var ParticleSystemPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ISelectionService]>; export var NodePropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ISelectionService]>; export var MetadataPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var MaterialPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ISelectionService]>; export var LightPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var FrameGraphPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var EffectLayerPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var CommonPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var ControlPropertiesSectionIdentity: unique symbol; export var CollisionPropertiesSectionIdentity: unique symbol; export var LimitsPropertiesSectionIdentity: unique symbol; export var BehaviorsPropertiesSectionIdentity: unique symbol; export var CameraPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var AudioPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; export var AtmospherePropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ISelectionService, ISceneContext]>; export var AnimationPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ISelectionService, ISceneContext]>; export var AnimationGroupPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService, ISelectionService]>; /** * A helper to create a service factory function from a class constructor. * @param constructor The class to create a factory function for. * @returns A factory function that creates an instance of the class. */ export function ConstructorFactory any>(constructor: Class): (...args: ConstructorParameters) => InstanceType; var Contract: unique symbol; /** * This interface must be implemented by all service contracts. */ export interface IService { /** * @internal */ readonly [Contract]?: ContractIdentity; } type ExtractContractIdentity> = ServiceContract extends IService ? ContractIdentity : never; type ExtractContractIdentities[]> = { [Index in keyof ServiceContracts]: ExtractContractIdentity; }; type UnionToIntersection = (Union extends any ? (k: Union) => void : never) extends (k: infer Intersection) => void ? Intersection : never; type MaybePromise = T | Promise; /** * A factory function responsible for creating a service instance. * Consumed services are passed as arguments to the factory function. * The returned value must implement all produced services, and may BABYLON.IDisposable. * If not services are produced, the returned value may implement BABYLON.IDisposable, otherwise it may return void. */ export type ServiceFactory[], Consumes extends IService[]> = (...dependencies: [...Consumes, abortSignal?: AbortSignal]) => MaybePromise | void : Partial & UnionToIntersection>; /** * Defines a service, which is a logical unit that consumes other services (dependencies), and optionally produces services that can be consumed by other services (dependents). */ export type ServiceDefinition[] = [], Consumes extends IService[] = []> = { /** * A human readable name for the service to help with debugging. */ friendlyName: string; /** * A function that instantiates the service. */ factory: ServiceFactory; } & (Produces extends [] ? { /** * An empty list or undefined, since the type specification has indicated no contracts are produced. */ produces?: []; } : { /** * The list of contract identities that this service produces for consumption by other services. */ produces: ExtractContractIdentities; }) & (Consumes extends [] ? { /** * An empty list or undefined, since the type specification has indicated that no other services are consumed. */ consumes?: []; } : { /** * The list of contract identities of other services that this service consumes. */ consumes: ExtractContractIdentities; }); export type WeaklyTypedServiceDefinition = Omit[] | [], IService[] | []>, "factory"> & { /** * A factory function responsible for creating a service instance. */ factory: (...args: any) => ReturnType[] | [], IService[] | []>["factory"]>; }; /** * A service container manages the lifetimes of a set of services. * It takes care of instantiating the services in the correct order based on their dependencies, * passing dependencies through to services, and disposing of services when the container is disposed. */ export class ServiceContainer implements BABYLON.IDisposable { private readonly _friendlyName; private _isDisposed; private readonly _serviceDefinitions; private readonly _serviceDependents; private readonly _serviceInstances; constructor(_friendlyName: string); /** * Adds a set of service definitions in the service container. * The services are sorted based on their dependencies. * @param args The service definitions to register, and optionally an abort signal. * @returns A disposable that will remove the service definition from the service container. */ addServicesAsync(...args: WeaklyTypedServiceDefinition[] | [...serviceDefinitions: WeaklyTypedServiceDefinition[], abortSignal: AbortSignal]): Promise; /** * Registers a service definition in the service container. * @param serviceDefinition The service definition to register. * @param abortSignal An optional abort signal. * @returns A disposable that will remove the service definition from the service container. */ addServiceAsync[] = [], Consumes extends IService[] = []>(serviceDefinition: ServiceDefinition, abortSignal?: AbortSignal): Promise; private _addServiceAsync; private _removeService; /** * Disposes the service container and all contained services. */ dispose(): void; } /** * Defines which channels of the texture to retrieve with {@link TextureHelper.GetTextureDataAsync}. */ export type TextureChannelsToDisplay = { /** * True if the red channel should be included. */ R: boolean; /** * True if the green channel should be included. */ G: boolean; /** * True if the blue channel should be included. */ B: boolean; /** * True if the alpha channel should be included. */ A: boolean; }; /** * Gets the data of the specified texture by rendering it to an intermediate RGBA texture and retrieving the bytes from it. * This is convienent to get 8-bit RGBA values for a texture in a GPU compressed format. * @param texture the source texture * @param width the width of the result, which does not have to match the source texture width * @param height the height of the result, which does not have to match the source texture height * @param face if the texture has multiple faces, the face index to use for the source * @param channels a filter for which of the RGBA channels to return in the result * @param lod if the texture has multiple LODs, the lod index to use for the source * @returns the 8-bit texture data */ export function ApplyChannelsToTextureDataAsync(texture: BABYLON.BaseTexture, width: number, height: number, face: number, channels: TextureChannelsToDisplay, lod?: number): Promise; /** * Shared utilities for snippet server operations (save/load). */ /** * Persist a snippet ID to local storage for quick reuse. * @param storageKey The local storage key to use. * @param snippetId The snippet ID to persist. * @param maxItems Maximum number of items to store (default 50). */ export function PersistSnippetId(storageKey: string, snippetId: string, maxItems?: number): void; /** * Configuration for saving to the snippet server. */ export type SaveToSnippetConfig = { /** The base URL of the snippet server. */ snippetUrl: string; /** The current snippet ID (if updating an existing snippet). */ currentSnippetId?: string; /** The serialized content to save. */ content: string; /** The key name for the payload (e.g., "particleSystem", "spriteManager"). */ payloadKey: string; /** Optional local storage key for persisting snippet IDs. */ storageKey?: string; /** Optional friendly name for the entity type (used in alerts). */ entityName?: string; }; /** * Result from saving to the snippet server. */ export type SaveToSnippetResult = { /** The new snippet ID. */ snippetId: string; /** The previous snippet ID (or "_BLANK" if none). */ oldSnippetId: string; }; /** * Save content to the snippet server. * @param config Configuration for the save operation. * @returns Promise resolving to the save result. */ export function SaveToSnippetServer(config: SaveToSnippetConfig): Promise; /** * Configuration for loading from the snippet server. */ export type LoadFromSnippetConfig = { /** The base URL of the snippet server. */ snippetUrl: string; /** The snippet ID to load. */ snippetId: string; /** Optional friendly name for the entity type (used in alerts). */ entityName?: string; }; /** * Load content from the snippet server. * @param config Configuration for the load operation. * @returns Promise resolving to the parsed response object. */ export function LoadFromSnippetServer(config: LoadFromSnippetConfig): Promise; /** * Prompt the user for a snippet ID. * @param message The prompt message. * @returns The trimmed snippet ID, or null if cancelled/empty. */ export function PromptForSnippetId(message?: string): string | null; /** * Notify the playground about a snippet ID change (for code replacement). * NOTE this is an anti-pattern, instead playground should hook in and observe changes / update its own code * This is a legacy approach and should not be copied elsewhere * @param oldSnippetId The previous snippet ID. * @param newSnippetId The new snippet ID. * @param parseMethodName The name of the parse method (e.g., "SpriteManager.ParseFromSnippetAsync"). */ export function NotifyPlaygroundOfSnippetChange(oldSnippetId: string, newSnippetId: string, parseMethodName: string): void; /** * A collection of items that can be observed for changes. */ export class ObservableCollection { private readonly _items; private readonly _keys; private readonly _observable; /** * An observable that notifies observers when the collection changes. */ get observable(): BABYLON.IReadonlyObservable; /** * The items in the collection. */ get items(): readonly T[]; /** * Adds an item to the collection. * @param item The item to add. * @returns A disposable that removes the item from the collection when disposed. */ add(item: T): BABYLON.IDisposable; } export function EditNodeRenderGraph(nodeRenderGraph: BABYLON.NodeRenderGraph): Promise; export function EditParticleSystem(particleSystem: BABYLON.ParticleSystem): Promise; export function EditNodeMaterial(material: BABYLON.NodeMaterial): Promise; export function GetNodeGeometry(mesh: BABYLON.Mesh): BABYLON.Nullable; export function EditNodeGeometry(nodeGeometry: BABYLON.NodeGeometry, hostScene: BABYLON.Scene): Promise; /** * Performs a topological sort on a graph. * @param graph The set of nodes that make up the graph. * @param getAdjacentNodes A function that returns the adjacent nodes for a given node. * @param onSortedNode A function that is called for each node in the sorted order. * @remarks * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils. */ export function SortGraph(graph: Iterable, getAdjacentNodes: (node: NodeT) => Iterable, onSortedNode: (node: NodeT) => void): void; /** * Traverses a graph. * @param graph The set of nodes that make up the graph. * @param getAdjacentNodes A function that returns the adjacent nodes for a given node. * @param onBeforeTraverse A function that is called before traversing each node. * @param onAfterTraverse A function that is called after traversing each node. * @remarks * This function allocates. Do not use it in the hot path. Instead use an instance of GraphUtils. */ export function TraverseGraph(graph: Iterable, getAdjacentNodes: (node: NodeT) => Iterable | null | undefined, onBeforeTraverse?: (node: NodeT) => void, onAfterTraverse?: (node: NodeT) => void): void; /** * A utility class for performing graph operations. * @remarks * The class allocates new objects, but each operation (e.g. sort, traverse) is allocation free. This is useful when used in the hot path. */ export class GraphUtils { private readonly _traversalState; private _isTraversing; /** * Performs a topological sort on a graph. * @param graph The set of nodes that make up the graph. * @param getAdjacentNodes A function that returns the adjacent nodes for a given node. * @param onSortedNode A function that is called for each node in the sorted order. */ sort(graph: Iterable, getAdjacentNodes: (node: NodeT) => Iterable, onSortedNode: (node: NodeT) => void): void; /** * Traverses a graph. * @param graph The set of nodes that make up the graph. * @param getAdjacentNodes A function that returns the adjacent nodes for a given node. * @param onBeforeTraverse A function that is called before traversing each node. * @param onAfterTraverse A function that is called after traversing each node. */ traverse(graph: Iterable, getAdjacentNodes: (node: NodeT) => Iterable | null | undefined, onBeforeTraverse?: (node: NodeT) => void, onAfterTraverse?: (node: NodeT) => void): void; private _traverseCore; } /** * Asserts that the given value is truthy. * @param value The value to check. */ export function Assert(value: unknown): asserts value; export function GroupBy(items: T[], getKey: (item: T) => K): { key: K; items: T[]; }[]; export var LegacyPropertiesSectionMapping: { readonly GENERAL: "General"; readonly CUSTOM: "Custom"; readonly COMMANDS: "Commands"; readonly DEBUG: "Debug"; readonly ADVANCED: "Advanced"; readonly PROPERTIES: "Properties"; readonly TRANSFORMATIONS: "Transform"; readonly TRANSFORMS: "Transform"; readonly TRANSFORM: "Transform"; readonly ANIMATION: "Animation"; readonly "ANIMATION RANGES": "Animation Ranges"; readonly ANIMATIONS: "Animation"; readonly "ANIMATION GENERAL CONTROL": "Animation Control"; readonly CONTROLS: "Control"; readonly INFOS: "Info"; readonly COLLISIONS: "Collision"; readonly LIMITS: "Limits"; readonly BEHAVIORS: "Behaviors"; readonly TRANSPARENCY: "Transparency"; readonly STENCIL: "Stencil"; readonly "STENCIL - FRONT": "Stencil Front"; readonly "STENCIL - BACK": "Stencil Back"; readonly TEXTURES: "Textures"; readonly "LIGHTING & COLORS": "Lighting & Colors"; readonly LEVELS: "Levels"; readonly "NORMAL MAP": "Normal Map"; readonly RENDERING: "Rendering"; readonly CHANNELS: "Channels"; readonly "METALLIC WORKFLOW": "Metallic Workflow"; readonly "CLEAR COAT": "Clear Coat"; readonly IRIDESCENCE: "Iridescence"; readonly ANISOTROPIC: "Anisotropic"; readonly SHEEN: "Sheen"; readonly SUBSURFACE: "Subsurface"; readonly BASE: "Base"; readonly SPECULAR: "Specular"; readonly COAT: "Coat"; readonly FUZZ: "Fuzz"; readonly EMISSION: "Emission"; readonly "THIN FILM": "Thin Film"; readonly GEOMETRY: "Geometry"; readonly SKY: "Sky"; readonly CHILDREN: "Children"; readonly DISPLAY: "Display"; readonly "DISPLAY OPTIONS": "Display Options"; readonly "NODE GEOMETRY": "Node Geometry"; readonly "MORPH TARGETS": "Morph Targets"; readonly PHYSICS: "Physics"; readonly OCCLUSIONS: "Occlusions"; readonly "EDGE RENDERING": "Edge Rendering"; readonly "OUTLINE & OVERLAY": "Outlines & Overlays"; readonly SETUP: "Setup"; readonly SHADOWS: "Shadows"; readonly "SHADOW GENERATOR": "Shadow Generator"; readonly "NODE PARTICLE EDITOR": "Node Particle Editor"; readonly FILE: "File"; readonly SNIPPET: "Snippet"; readonly ATTRACTORS: "Attractors"; readonly IMPOSTORS: "Impostors"; readonly EMITTER: "Emitter"; readonly SIZE: "Size"; readonly LIFETIME: "Lifetime"; readonly COLORS: "Color"; readonly ROTATION: "Rotation"; readonly SPRITESHEET: "Spritesheet"; readonly CELLS: "Cells"; readonly CELL: "Cell"; readonly SCALE: "Scale"; readonly CONFIGURATION: "Configuration"; readonly BLOOM: "Bloom"; readonly "CHROMATIC ABERRATION": "Chromatic Aberration"; readonly "DEPTH OF FIELD": "Depth of Field"; readonly FXAA: "FXAA"; readonly "GLOW LAYER": "Glow Layer"; readonly GRAIN: "Grain"; readonly "IMAGE PROCESSING": "Image Processing"; readonly SHARPEN: "Sharpen"; readonly OPTIONS: "Options"; readonly SSAO: "SSAO"; readonly Denoiser: "Denoiser"; readonly SSR: "SSR"; readonly "Voxel Shadows": "Voxel Shadows"; readonly "Screenspace Shadows": "Screenspace Shadows"; readonly "Automatic thickness computation": "Automatic Thickness Computation"; readonly Blur: "Blur"; readonly Attenuations: "Attenuations"; readonly "Color space": "Color Space"; readonly "RENDERING MODE": "Rendering"; readonly ENVIRONMENT: "Environment"; readonly "MATERIAL IMAGE PROCESSING": "Material Image Processing"; readonly PREVIEW: "Preview"; readonly "ADVANCED TEXTURE PROPERTIES": "Advanced Texture Properties"; readonly TASKS: "Tasks"; readonly METADATA: "Metadata"; readonly "XMP METADATA": "XMP Metadata"; readonly VARIANTS: "Variants"; readonly INPUTS: "Inputs"; }; type PropertyChangedEvent = { object: any; property: string; value: any; initialValue: any; allowNullValue?: boolean; }; /** * Converts Inspector v1 options to Inspector v2 options. * @param v1Options Inspector v1 options. * @returns Inspector v2 options. */ export function ConvertOptions(v1Options: Partial): Partial; /** * @deprecated This class only exists for backward compatibility. Use the module-level ShowInspector function instead. */ export class Inspector { private static _CurrentInstance; private static _PopupToggler; private static _SectionHighlighter; private static _SidePaneOpenCounter; private static get _OpenedPane(); static readonly OnSelectionChangeObservable: BABYLON.Observable; static readonly OnPropertyChangedObservable: BABYLON.Observable; static MarkLineContainerTitleForHighlighting(title: string): void; static MarkMultipleLineContainerTitlesForHighlighting(titles: string[]): void; static PopupEmbed(): void; static PopupSceneExplorer(): void; static PopupInspector(): void; static get IsVisible(): boolean; static Show(scene: BABYLON.Scene, userOptions: Partial): void; private static _Show; static Hide(): void; private static _SetNewScene; } export var LegacyInspectableObjectPropertiesServiceDefinition: ServiceDefinition<[], [IPropertiesService]>; class DebugLayerEx extends BABYLON.DebugLayer { show(config?: BABYLON.IInspectorOptions): Promise; } var DebugLayerExKey: unique symbol; interface Scene { /** * @internal * Backing field */ [DebugLayerExKey]?: DebugLayerEx; } /** * Attaches Inspector v2 to Scene.debugLayer. */ export function AttachDebugLayer(): void; /** * Detaches Inspector v2 from Scene.debugLayer. */ export function DetachDebugLayer(): void; /** * Gets the property descriptor for a property on an object, including inherited properties. * @param target The object containing the property. * @param propertyKey The key of the property to get the descriptor for. * @returns The owner of the property (which may be different from the target in the case of inheritance) along with the property descriptor, or null if the property is not found. */ export function GetPropertyDescriptor(target: T, propertyKey: keyof T): BABYLON.Nullable<[owner: object, descriptor: PropertyDescriptor]>; /** * Checks if a property is readonly. * @param propertyDescriptor The property descriptor to check. * @returns True if the property is readonly, false otherwise. */ export function IsPropertyReadonly(propertyDescriptor: PropertyDescriptor): boolean; export type PropertyHooks = { /** * This function will be called after the hooked property is set. * @param value The new value that was set on the property. */ afterSet?: (value: T) => void; }; /** * Intercepts a property on an object and allows you to add hooks that will be called when the property is get or set. * @param target The object containing the property to intercept. * @param propertyKey The key of the property to intercept. * @param hooks The hooks to call when the property is get or set. * @returns A disposable that removes the hooks when disposed and returns the object to its original state. */ export function InterceptProperty(target: T, propertyKey: string extends K ? never : number extends K ? never : symbol extends K ? never : K, hooks: PropertyHooks>): BABYLON.IDisposable; export function InterceptProperty(target: T, propertyKey: keyof T, hooks: PropertyHooks): BABYLON.IDisposable; export type FunctionHooks = { /** * This function will be called after the hooked function is called. * @param args The arguments that were passed to the original function. */ afterCall?: (...args: Args) => void; }; /** * Intercepts a function on an object and allows you to add hooks that will be called during function execution. * @param target The object containing the function to intercept. * @param propertyKey The key of the property that is a function (this is the function that will be intercepted). * @param hooks The hooks to call during the function execution. * @returns A disposable that removes the hooks when disposed and returns the object to its original state. */ export function InterceptFunction(target: T, propertyKey: string extends K ? never : number extends K ? never : symbol extends K ? never : K, hooks: NonNullable extends (...args: infer Args) => unknown ? FunctionHooks : FunctionHooks): BABYLON.IDisposable; export function InterceptFunction(target: T, propertyKey: keyof T, hooks: FunctionHooks): BABYLON.IDisposable; export type GrowDirection = "end" | "start" | "up" | "down"; export type UseResizeHandleParams = { /** * The direction in which the element is considered growing in size ('end', 'start', 'up', or 'down'). */ growDirection: GrowDirection; /** * The name of the CSS variable that will be set on the wrapper element to reflect the current size of the element. */ variableName: string; /** * A callback that will be called when the element is resized. * * @remarks The passed function should be memoized for better performance. */ onChange?: (value: number) => void; /** * The minimum change allowed (e.g. the smallest negative number allowed). */ minValue?: number; /** * The maximum change allowed (e.g. the largest positive number allowed). */ maxValue?: number; }; /** * A custom hook that helps with element resizing. * @param params The parameters for the resize handle. * @returns An object containing refs and a function to set the value. */ export function useResizeHandle(params: UseResizeHandleParams): { elementRef: import("react").Dispatch>; handleRef: import("react").Dispatch>; setValue: (value: number) => void; }; /** * Return a copied array and re-render when array mutators run. * Intercept add/remove/change functions because the underlying APIs update internal arrays in-place. * @param target The target object containing the observable array, or null if the array is not applicable. * @param getItems A function to get the current items in the array. * @param addFn The name of the function to add an item to the array. * @param removeFn The name of the function to remove an item from the array. * @param changeFn The name of the function to change an item in the array. * @returns A copied array that re-renders when array mutators run. */ export function useObservableArray(target: TargetT | null, getItems: () => ReadonlyArray | null | undefined, addFn: keyof TargetT, removeFn: keyof TargetT, changeFn?: keyof TargetT): ItemT[]; export function useThemeMode(): { readonly isDarkMode: boolean; readonly themeMode: ThemeMode; readonly setThemeMode: (mode: ThemeMode) => void; readonly toggleThemeMode: () => void | undefined; }; export function useTheme(invert?: boolean): import("@fluentui/tokens").Theme; /** * Creates a hook for managing teaching moment state. * @param name The unique name of the teaching moment. * @returns A hook that returns the teaching moment state. */ export function MakeTeachingMoment(name: string): (suppress?: boolean) => { readonly shouldDisplay: boolean; readonly onDismissed: () => void; readonly reset: () => void; }; /** * Creates a hook for managing teaching moment state for a dialog. * @param name The unique name of the teaching moment. * @returns A hook that returns the teaching moment state for a dialog. */ export function MakeDialogTeachingMoment(name: string): (suppress?: boolean) => { readonly shouldDisplay: boolean; readonly onOpenChange: (e: unknown, data: any) => void; readonly reset: () => void; }; /** * Creates a hook for managing teaching moment state for a popover. * @param name The unique name of the teaching moment. * @returns A hook that returns the teaching moment state for a popover. */ export function MakePopoverTeachingMoment(name: string): (suppress?: boolean) => { readonly shouldDisplay: boolean; readonly positioningRef: import("react").Dispatch>>; readonly targetRef: import("react").Dispatch>>; readonly onOpenChange: (e: unknown, data: any) => void; readonly reset: () => void; }; export function useSetting(descriptor: SettingDescriptor): [T, React.Dispatch>, () => void]; /** * Gets functions used to convert to/from display values for angles based on the current settings. * @returns A tuple containing the functions to convert to and from display values. */ export function useAngleConverters(): readonly [(angle: number, wrap?: boolean) => number, (angle: number, wrap?: boolean) => number, boolean]; /** * Custom hook to manage a resource with automatic disposal. The resource is created once initially, and recreated * if the factory function or any dependency changes. Whenever the resource is recreated, the previous instance is * disposed. The final instance is disposed when the component using this hook unmounts. * @param factory A function that creates the resource. * @param deps An optional dependency list. When any dependency changes, the resource is disposed and recreated. * @returns The created resource. */ export function useResource(factory: () => T, deps?: React.DependencyList): T; /** * Custom hook to manage an asynchronous resource with automatic disposal. The resource is created once initially, and recreated * if the factory function or any dependency changes. Whenever the resource is recreated, the previous instance is * disposed. The final instance is disposed when the component using this hook unmounts. * @param factory A function that creates the resource. * @param deps An optional dependency list. When any dependency changes, the resource is disposed and recreated. * @returns The created resource. */ export function useAsyncResource(factory: (abortSignal: AbortSignal) => Promise, deps?: React.DependencyList): T | undefined; /** * Creates a polling observable that notifies its observers at a specified interval. * @param delay The polling interval in milliseconds. * @returns A readonly observable that can be used to subscribe to polling notifications. */ export function usePollingObservable(delay: number): BABYLON.IReadonlyObservable; /** * Returns the current value of the accessor and updates it when the specified event is fired on the specified element. * @param accessor A function that returns the current value. * @param element The element to listen for the event on. * @param eventNames The names of the events to listen for. * @returns The current value of the accessor. * * @remarks If the accessor function is not idempotent (e.g. it returns a different array or object instance each time it is called), * then there is a good chance it should be wrapped in a `useCallback` to prevent unnecessary re-renders or re-render infinite loops. */ export function useEventfulState(accessor: () => T, element: HTMLElement | null | undefined, ...eventNames: string[]): T; /** * Returns the current value of the accessor and updates it when any of the specified observables change. * @param accessor A function that returns the current value. * @param observables The observables to listen for changes on. * @returns The current value of the accessor. * @remarks If the accessor function is not idempotent (e.g. it returns a different array or object instance each time it is called), * then there is a good chance it should be wrapped in a `useCallback` to prevent unnecessary re-renders or re-render infinite loops. */ export function useObservableState(accessor: () => T, ...observables: Array): T; /** * Returns a copy of the items in the collection and updates it when the collection changes. * @param collection The collection to observe. * @returns A copy of the items in the collection. */ export function useObservableCollection(collection: ObservableCollection): T[]; /** * Returns a copy of the items in the collection sorted by the order property and updates it when the collection changes. * @param collection The collection to observe. * @returns A copy of the items in the collection sorted by the order property. */ export function useOrderedObservableCollection>(collection: ObservableCollection): T[]; /** * Provides an observable that fires when a specified function/property is called/set. * @param type The type of the interceptor, either "function" or "property". * @param target The object containing the function/property to intercept. * @param propertyKey The key of the function/property to intercept. * @returns An observable that fires when the function/property is called/set. */ export function useInterceptObservable(type: "function" | "property", target: T | null | undefined, propertyKey: keyof T): BABYLON.IReadonlyObservable; type PropertyKeys = { [PropertyKeyT in keyof TargetT]: TargetT[PropertyKeyT] extends PropertyT | null | undefined ? PropertyKeyT : never; }[keyof TargetT]; export function useProperty(target: TargetT, propertyKey: PropertyKeyT): TargetT[PropertyKeyT]; export function useProperty(target: TargetT | null | undefined, propertyKey: PropertyKeyT): TargetT[PropertyKeyT] | undefined; export function useVector3Property>(target: TargetT, propertyKey: PropertyKeyT): TargetT[PropertyKeyT]; export function useVector3Property>(target: TargetT | null | undefined, propertyKey: PropertyKeyT): TargetT[PropertyKeyT] | undefined; export function useColor3Property>(target: TargetT, propertyKey: PropertyKeyT): TargetT[PropertyKeyT]; export function useColor3Property>(target: TargetT | null | undefined, propertyKey: PropertyKeyT): TargetT[PropertyKeyT] | undefined; export function useColor4Property>(target: TargetT, propertyKey: PropertyKeyT): TargetT[PropertyKeyT]; export function useColor4Property>(target: TargetT | null | undefined, propertyKey: PropertyKeyT): TargetT[PropertyKeyT] | null; export function useQuaternionProperty>(target: TargetT, propertyKey: PropertyKeyT): TargetT[PropertyKeyT]; export function useQuaternionProperty>(target: TargetT | null | undefined, propertyKey: PropertyKeyT): TargetT[PropertyKeyT] | undefined; /** * Creates a hook for a concrete value. For example, if the value is a BABYLON.Vector3, * it will return a hook that can intercept a change to the BABYLON.Vector3 property or * any of its components (x, y, z). * @param value The current value of a property that will be hooked. * @returns A hook function that can be used to observe changes to the property. */ export function MakePropertyHook(value: unknown): typeof useProperty; type SpriteManagersContentProps = { scene: BABYLON.Scene; selectionService: ISelectionService; }; /** * Sprite Managers content component * @param props - Component props * @returns React component */ export var SpriteManagersContent: React.FunctionComponent; type SettingsPopoverProps = { /** Controlled open state */ open?: boolean; /** Callback when open state changes */ onOpenChange?: (open: boolean) => void; }; /** * Settings popover component * @param props * @returns */ export var SettingsPopover: React.FunctionComponent>; type RenderingPipelinesContentProps = { scene: BABYLON.Scene; selectionService: ISelectionService; }; /** * Rendering Pipelines content component * @param props - Component props * @returns React component */ export var RenderingPipelinesContent: React.FunctionComponent; export var CreateToolsServiceDefinition: ServiceDefinition<[], [IShellService, ISceneContext, ISelectionService]>; var _default: { readonly serviceDefinitions: readonly [ServiceDefinition<[], [IShellService, ISceneContext, ISelectionService]>]; }; type CreatedEntity = { name: string; }; type QuickCreateSectionProps = { children: React.ReactNode; }; /** * Container component for quick create sections that provides consistent column layout with spacing * @param props - Component props * @returns React component */ export var QuickCreateSection: React.FunctionComponent; type QuickCreateRowProps = { children: React.ReactNode; }; /** * Container component for quick create rows that provides consistent row layout for button + settings popover * @param props - Component props * @returns React component */ export var QuickCreateRow: React.FunctionComponent; type QuickCreateItemProps = { /** The selection service used by the go-to-entity button */ selectionService: ISelectionService; /** Label for the quick-create button */ label: string; /** Called when the quick-create button is clicked. Return the created entity (or a Promise that resolves to it) for toast + go-to. */ onCreate: () => CreatedEntity | Promise; /** Optional override for the settings popover's Create button. If omitted, the popover's Create button calls `onCreate`. */ onSettingsCreate?: () => CreatedEntity | Promise; /** Optional settings popover content (form fields). When provided, a settings popover with a Create button is rendered next to the quick-create button. */ children?: React.ReactNode; }; /** * Reusable row component for entity creation. Renders a quick-create button, an optional settings popover * (with a baked-in Create button), and a "go to entity" button. Manages its own state for the last created entity * and shows a toast on creation. * @param props - The label, creation handler, selection service, and optional settings content * @returns A row with a button, optional settings popover, and go-to-entity button */ export var QuickCreateItem: React.FunctionComponent; type ParticlesContentProps = { scene: BABYLON.Scene; selectionService: ISelectionService; }; /** * Particles content component * @param props - Component props * @returns React component */ export var ParticlesContent: React.FunctionComponent; /** * @internal */ export var MeshesContent: React.FunctionComponent<{ scene: BABYLON.Scene; selectionService: ISelectionService; }>; type MaterialsContentProps = { scene: BABYLON.Scene; selectionService: ISelectionService; }; /** * Materials content component * @param props - Component props * @returns React component */ export var MaterialsContent: React.FunctionComponent; type LightsContentProps = { scene: BABYLON.Scene; selectionService: ISelectionService; }; /** * Lights content component * @param props - Component props * @returns React component */ export var LightsContent: React.FunctionComponent; type FrameGraphsContentProps = { scene: BABYLON.Scene; selectionService: ISelectionService; }; /** * Frame Graphs content component * @param props - Component props * @returns React component */ export var FrameGraphsContent: React.FunctionComponent; type CamerasContentProps = { scene: BABYLON.Scene; selectionService: ISelectionService; }; /** * Cameras content component * @param props - Component props * @returns React component */ export var CamerasContent: React.FunctionComponent; /** * Represents a loaded extension. */ export interface IExtension { /** * The metadata for the extension. */ readonly metadata: ExtensionMetadata; /** * Whether the extension is currently being installed, uninstalled, enabled, or disabled. */ readonly isStateChanging: boolean; /** * Whether the extension is enabled. */ readonly isInstalled: boolean; /** * Installs the extension. */ installAsync(): Promise; /** * Uninstalls the extension. */ uninstallAsync(): Promise; /** * Adds a handler that is called when the state of the extension changes. * @param handler The handler to add. * @returns A disposable that removes the handler when disposed. */ addStateChangedHandler(handler: () => void): BABYLON.IDisposable; } /** * Provides information about an extension installation failure. */ export type InstallFailedInfo = { /** * The metadata of the extension that failed to install. */ extension: ExtensionMetadata; /** * The error that occurred during the installation. */ error: unknown; }; /** * Represents a query for loaded extensions. */ export interface IExtensionQuery { /** * The total number of extensions that satisfy the query. */ readonly totalCount: number; /** * Fetches a range of extensions from the query. * @param index The index of the first extension to fetch. * @param count The number of extensions to fetch. * @returns A promise that resolves to the extensions. */ getExtensionsAsync(index: number, count: number): Promise; } /** * Manages the installation, uninstallation, enabling, and disabling of extensions. */ export class ExtensionManager implements BABYLON.IDisposable { private readonly _namespace; private readonly _serviceContainer; private readonly _feeds; private readonly _onInstallFailed; private readonly _installedExtensions; private readonly _stateChangedHandlers; private constructor(); /** * Creates a new instance of the ExtensionManager. * This will automatically rehydrate previously installed and enabled extensions. * @param namespace The namespace to use for storing extension state in local storage. * @param serviceContainer The service container to use. * @param feeds The extension feeds to include. * @param onInstallFailed A callback that is called when an extension installation fails. * @returns A promise that resolves to the new instance of the ExtensionManager. */ static CreateAsync(namespace: string, serviceContainer: ServiceContainer, feeds: readonly IExtensionFeed[], onInstallFailed: (info: InstallFailedInfo) => void): Promise; /** * Gets the names of the feeds that are included in the extension manager. * @returns The names of the feeds. */ get feedNames(): string[]; /** * Queries the extension manager for extensions. * @param filter The filter to apply to the query. * @param feeds The feeds to include in the query. * @param installedOnly Whether to only include installed extensions. * @returns A promise that resolves to the extension query. */ queryExtensionsAsync(filter?: string, feeds?: string[], installedOnly?: boolean): Promise; /** * Disposes the extension manager. */ dispose(): void; private _getInstalledExtensionStorageKey; private _updateInstalledExtensionsStorage; private _installAsync; private _uninstallAsync; private _enableAsync; private _disableAsync; private _addStateChangedHandler; private _createExtension; private _createInstalledExtension; } export type PersonMetadata = { /** * The name of the person. */ readonly name: string; /** * The email address of the person. */ readonly email?: string; /** * The URL to the person's website. */ readonly url?: string; /** * The Babylon forum username of the person. */ readonly forumUserName?: string; }; export type ExtensionMetadata = { /** * The name of the extension. */ readonly name: string; /** * The version of the extension (as valid semver). */ readonly version?: string; /** * The description of the extension. */ readonly description: string; /** * The keywords of the extension. */ readonly keywords?: readonly string[]; /** * The URL to the extension homepage. */ readonly homepage?: string; /** * Specify the place where your code lives. This is helpful for people who want to contribute. */ readonly repository?: string; /** * The URL to your extension's issue tracker and / or the email address to which issues should be reported. These are helpful for people who encounter issues with your extension. */ readonly bugs?: string; /** * A license for your package so that people know how they are permitted to use it, and any restrictions you're placing on it. */ readonly license?: string; /** * The primary author of the extension. */ readonly author?: string | PersonMetadata; /** * The contributors to the extension. */ readonly contributors?: readonly (string | PersonMetadata)[]; }; export type ExtensionModule = { /** */ default: { /** * The services that are included with the extension. */ serviceDefinitions?: readonly WeaklyTypedServiceDefinition[]; }; }; /** * Represents a query to fetch subset ranges of extension metadata from a feed. */ export interface IExtensionMetadataQuery { /** * The total number of extensions that satisfy the query. */ readonly totalCount: number; /** * Fetches a range of extension metadata from the feed. * @param index The index of the first extension to fetch. * @param count The number of extensions to fetch. * @returns A promise that resolves to the extension metadata. */ getExtensionMetadataAsync(index: number, count: number): Promise; } /** * Represents a feed/source of extensions. */ export interface IExtensionFeed { /** * The name of the feed. */ readonly name: string; /** * Creates an extension metadata query given a filter. * @param filter The filter to apply to the query. * @returns A promise that resolves to the extension metadata query. */ queryExtensionsAsync(filter?: string): Promise; /** * Gets the extension module for the specified extension. * @param name The name of the extension. * @returns A promise that resolves to the extension module. */ getExtensionModuleAsync(name: string): Promise; } /** * Well-known default built in extensions for the Inspector. */ export var DefaultInspectorExtensionFeed: BuiltInsExtensionFeed; export type BuiltInExtension = ExtensionMetadata & { /** * Gets the extension module, typically dynamically importing the extension. * @returns The extension module (e.g. a collection of ServiceDefinitions). */ getExtensionModuleAsync(): Promise; }; /** * A simple extension feed implementation that provides a fixed set of "built in" extensions. * "Built in" in this context means extensions that are known at bundling time, and included * in the bundle. Each extension can be dynamically imported so they are split into separate * bundle chunks and downloaded only when first installed. */ export class BuiltInsExtensionFeed implements IExtensionFeed { readonly name: string; private readonly _extensions; constructor(name: string, extensions: Iterable); queryExtensionsAsync(filter?: string): Promise; getExtensionModuleAsync(name: string): Promise; } export var SettingsStoreContext: import("react").Context; export function useSettingsStore(): ISettingsStore | undefined; export type PropertyChangeInfo = { readonly entity: unknown; readonly propertyKey: PropertyKey; readonly oldValue: unknown; readonly newValue: unknown; }; export type PropertyContext = { readonly onPropertyChanged: BABYLON.Observable; }; export var PropertyContext: import("react").Context; export function usePropertyChangedNotifier(): (entity: ObjectT, propertyKey: PropertyT, oldValue: ObjectT[PropertyT], newValue: ObjectT[PropertyT]) => void; export type ExtensionManagerContext = { readonly extensionManager: ExtensionManager; }; export var ExtensionManagerContext: import("react").Context; export function useExtensionManager(): ExtensionManager | undefined; export var UXContextProvider: React.FunctionComponent; export var Theme: React.FunctionComponent; type TeachingMomentState = ReturnType>; type TeachingMomentProps = Pick & { title: string; description: string; }; /** * A component that displays a teaching moment popover. * @param props Props for the teaching moment popover. * @returns The teaching moment popover. */ export var TeachingMoment: React.FunctionComponent; export var PickingToolbar: React.FunctionComponent<{ scene: BABYLON.Scene; selectEntity: (entity: unknown) => void; gizmoService: IGizmoService; ignoreBackfaces?: boolean; highlightSelectedEntity?: boolean; onHighlightSelectedEntityChange?: (value: boolean) => void; }>; /** * Used to apply common styles to panes. */ export var SidePaneContainer: import("react").ForwardRefExoticComponent, HTMLDivElement>, "ref"> & import("react").RefAttributes>; export var GizmoToolbar: React.FunctionComponent<{ gizmoService: IGizmoService; sceneContext: ISceneContext; }>; 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; }>; export type DynamicAccordionSectionContent = 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: React.ComponentType<{ context: ContextT; }>; }>; export type SectionsImperativeRef = { highlightSections: (sections: readonly string[]) => void; }; export function ExtensibleAccordion(props: React.PropsWithChildren<{ sections: readonly DynamicAccordionSection[]; sectionContent: readonly DynamicAccordionSectionContent[]; context: ContextT; sectionsRef?: React.Ref; } & INSPECTOR.SharedUIComponents.AccordionProps>): import("react/jsx-runtime").JSX.Element; type ErrorBoundaryProps = { /** Child components to render */ children: React.ReactNode; /** Optional fallback UI to show on error */ fallback?: React.ReactNode; /** Optional callback when an error occurs */ onError?: (error: Error, errorInfo: React.ErrorInfo) => void; /** Optional name for identifying this boundary in logs */ name?: string; }; type ErrorBoundaryState = { hasError: boolean; error: Error | null; errorInfo: React.ErrorInfo | null; }; /** * Error boundary component that catches JavaScript errors in child components * and displays a fallback UI instead of crashing the entire application. */ export class ErrorBoundary extends React.Component { constructor(props: ErrorBoundaryProps); static getDerivedStateFromError(error: Error): Partial; componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void; private _handleRetry; render(): string | number | boolean | Iterable | import("react/jsx-runtime").JSX.Element | null | undefined; } export var ToolsPane: typeof ExtensibleAccordion; export var ReflectorTools: React.FunctionComponent<{ scene: BABYLON.Scene; }>; export var ExportBabylonTools: React.FunctionComponent<{ scene: BABYLON.Scene; }>; export var ExportGltfTools: import("react").ForwardRefExoticComponent<{ scene: BABYLON.Scene; } & { spinnerSize?: import("@fluentui/react-spinner").SpinnerProps["size"]; spinnerLabel?: string; } & import("react").RefAttributes>; export var GLTFValidationTool: React.FunctionComponent<{ validationResults: BABYLON.GLTF2.IGLTFValidationResults; }>; export var GLTFLoaderOptionsTool: React.FunctionComponent<{ loaderOptions: GLTFLoaderOptionsType; }>; export var GLTFExtensionOptionsTool: React.FunctionComponent<{ extensionOptions: GLTFExtensionOptionsType; }>; export var GLTFAnimationImportTool: React.FunctionComponent<{ scene: BABYLON.Scene; }>; export var VideoCaptureTool: React.FunctionComponent<{ scene: BABYLON.Scene; }>; export var ScreenshotTool: React.FunctionComponent<{ scene: BABYLON.Scene; }>; export var SceneReplayTool: React.FunctionComponent<{ scene: BABYLON.Scene; }>; export var GIFCaptureTool: import("react").ForwardRefExoticComponent<{ scene: BABYLON.Scene; } & { spinnerSize?: import("@fluentui/react-spinner").SpinnerProps["size"]; spinnerLabel?: string; } & import("react").RefAttributes>; export var EquirectangularCaptureTool: React.FunctionComponent<{ scene: BABYLON.Scene; }>; type ToolBarProps = { tools: readonly { name: string; icon: React.ComponentType; }[]; changeTool: (toolIndex: number) => void; activeToolIndex: number; metadata: IMetadata; setMetadata: (data: any) => void; hasAlpha: boolean; }; /** * Toolbar component for texture editing tools * @param props - The toolbar properties * @returns The toolbar component */ export var ToolBar: React.FunctionComponent; /** * Parameters passed to tools for interaction with the texture editor */ export interface IToolParameters { /** The visible scene in the editor. Useful for adding pointer and keyboard events. */ scene: BABYLON.Scene; /** The 2D canvas which you can sample pixel data from. Tools should not paint directly on this canvas. */ canvas2D: HTMLCanvasElement; /** The 3D scene which tools can add post processes to. */ scene3D: BABYLON.Scene; /** The size of the texture. */ size: BABYLON.ISize; /** Pushes the editor texture back to the original scene. This should be called every time a tool makes any modification to a texture. */ updateTexture: () => void; /** The metadata object which is shared between all tools. Feel free to store any information here. Do not set this directly: instead call setMetadata. */ metadata: IMetadata; /** Call this when you want to mutate the metadata. */ setMetadata: (data: any) => void; /** Returns the texture coordinates under the cursor */ getMouseCoordinates: (pointerInfo: BABYLON.PointerInfo) => BABYLON.Vector2; /** Provides a canvas that you can use the canvas API to paint on. */ startPainting: () => Promise; /** After you have painted on your canvas, call this method to push the updates back to the texture. */ updatePainting: () => void; /** Call this when you are finished painting. */ stopPainting: () => void; /** Returns whether the tool should be allowed to interact */ interactionEnabled: () => boolean; } export type TextureEditorTool = { /** * Called when the tool is activated from the toolbar. */ activate: () => void; /** * Called when the tool is deactivated from the toolbar. */ deactivate: () => void; /** * Optional: Called when the user resets the texture or uploads a new texture. Tools may want to reset their state when this happens. */ reset?: () => void; /** * Optional: React component for tool-specific settings UI. */ settingsComponent?: React.ComponentType; }; export type TextureEditorToolContext = { getParameters(): IToolParameters; }; export type TextureEditorToolProvider = { /** * An optional order for the section, relative to other commands. * Defaults to 0. */ order?: number; /** * The name of the tool. */ name: string; /** * The icon component for the tool. */ icon: React.ComponentType; /** * Whether the tool uses postprocesses. */ is3D?: boolean; /** * Optional system cursor name to use when tool is active (e.g. 'crosshair', 'pointer') */ cursor?: string; /** * Instantiates the tool. * @param context The context for the tool. * @returns The instantiated tool. */ getTool: (context: TextureEditorToolContext) => TextureEditorTool; }; /** * Metadata shared between tools in the texture editor */ export interface IMetadata { /** Current paint color in hex format */ color: string; /** Current paint alpha value 0-1 */ alpha: number; /** Current selection coordinates */ select: { /** Left edge of selection */ x1: number; /** Top edge of selection */ y1: number; /** Right edge of selection */ x2: number; /** Bottom edge of selection */ y2: number; }; } export type TextureEditorProps = { texture: BABYLON.BaseTexture; toolProviders?: readonly TextureEditorToolProvider[]; window?: Window; onUpdate?: () => void; }; /** * Main texture editor component * @param props - The texture editor properties * @returns The texture editor component */ export var TextureEditor: React.FunctionComponent; type StatusBarProps = { texture: BABYLON.BaseTexture; mipLevel: number; }; /** * Displays status information about the texture * @param props - The status bar properties * @returns The status bar component */ export var StatusBar: React.FunctionComponent; type PropertiesBarProps = { texture: BABYLON.BaseTexture; size: BABYLON.ISize; saveTexture: () => void; pixelData: IPixelData; face: number; setFace: (face: number) => void; resetTexture: () => void; resizeTexture: (width: number, height: number) => void; uploadTexture: (file: File) => void; mipLevel: number; setMipLevel: (mipLevel: number) => void; }; /** * Properties bar component showing texture info and actions * @param props - The properties bar properties * @returns The properties bar component */ export var PropertiesBar: React.FunctionComponent; /** * Represents a color channel in the texture editor */ export type Channel = { /** Whether the channel is visible */ visible: boolean; /** Whether the channel is editable */ editable: boolean; /** Display name for the channel */ name: string; /** Channel identifier */ id: "R" | "G" | "B" | "A"; }; type ChannelsBarProps = { channels: Channel[]; setChannels: (channels: Channel[]) => void; }; /** * Displays channel visibility and editability controls * @param props - The channels bar properties * @returns The channels bar component */ export var ChannelsBar: React.FunctionComponent; export var canvasShader: { path: { vertexSource: string; fragmentSource: string; }; options: { attributes: string[]; uniforms: string[]; }; }; export type CanvasManagerTool = { readonly is3D: boolean; activate(): void; deactivate(): void; reset(): void; }; export interface IPixelData { x?: number; y?: number; r?: number; g?: number; b?: number; a?: number; } export class TextureCanvasManager { private readonly _engine; private readonly _scene; private readonly _camera; private readonly _cameraPos; private _scale; private _isPanning; private _mouseX; private _mouseY; private readonly _uiCanvas; private _size; /** The canvas we paint onto using the canvas API */ private readonly _2DCanvas; /** The canvas we apply post processes to */ private readonly _3DCanvas; /** The canvas which handles channel filtering */ private readonly _channelsTexture; private readonly _3DEngine; private readonly _3DPlane; private readonly _3DCanvasTexture; private readonly _3DScene; private _channels; private _face; private _mipLevel; /** The texture from the original engine that we invoked the editor on */ private readonly _originalTexture; /** This is a hidden texture which is only responsible for holding the actual texture memory in the original engine */ private _target; private readonly _originalTextureProperties; /** Keeps track of whether we have modified the texture */ private _didEdit; private _plane; private readonly _planeMaterial; /** Tracks which keys are currently pressed */ private _keyMap; /** Tracks which mouse buttons are currently pressed */ private _buttonsPressed; private readonly ZOOM_MOUSE_SPEED; private readonly ZOOM_KEYBOARD_SPEED; private readonly ZOOM_IN_KEY; private readonly ZOOM_OUT_KEY; private readonly PAN_SPEED; private readonly PAN_KEY; private readonly MIN_SCALE; private readonly GRID_SCALE; private readonly MAX_SCALE; private readonly SELECT_ALL_KEY; private readonly SAVE_KEY; private readonly RESET_KEY; private readonly DESELECT_KEY; /** The number of milliseconds between texture updates */ private readonly PUSH_FREQUENCY; private _tool; private _setPixelData; private _setMipLevel; private readonly _window; private _metadata; private _editing3D; private readonly _onUpdate; private _setMetadata; private _imageData; private _canPush; private _shouldPush; private readonly _paintCanvas; constructor(texture: BABYLON.BaseTexture, window: Window, canvasUI: HTMLCanvasElement, canvas2D: HTMLCanvasElement, canvas3D: HTMLCanvasElement, setPixelData: (pixelData: IPixelData) => void, metadata: IMetadata, onUpdate: () => void, setMetadata: (metadata: any) => void, setMipLevel: (level: number) => void); updateTexture(): Promise; private pushTexture; startPainting(): Promise; updatePainting(): void; stopPainting(): void; private updateDisplay; set channels(channels: Channel[]); paintPixelsOnCanvas(pixelData: Uint8Array, canvas: HTMLCanvasElement): void; grabOriginalTexture(): Promise>; getMouseCoordinates(pointerInfo: BABYLON.PointerInfo): BABYLON.Vector2; get scene(): BABYLON.Scene; get canvas2D(): HTMLCanvasElement; get size(): BABYLON.ISize; set tool(tool: BABYLON.Nullable); get tool(): BABYLON.Nullable; set face(face: number); set mipLevel(mipLevel: number); /** Returns the 3D scene used for postprocesses */ get scene3D(): BABYLON.Scene; set metadata(metadata: IMetadata); private makePlane; reset(): void; resize(newSize: BABYLON.ISize): Promise; setSize(size: BABYLON.ISize): void; upload(file: File): void; saveTexture(): void; toolInteractionEnabled(): boolean; dispose(): void; } export var SystemStats: React.FunctionComponent<{ context: BABYLON.Scene; }>; export var StatsPane: typeof ExtensibleAccordion; export var PerformanceStats: React.FunctionComponent<{ context: BABYLON.Scene; }>; export var FrameStepsStats: React.FunctionComponent<{ context: BABYLON.Scene; }>; export var CountStats: React.FunctionComponent<{ context: BABYLON.Scene; }>; export var SceneMaterialImageProcessingProperties: React.FunctionComponent<{ scene: BABYLON.Scene; }>; export var ScenePhysicsProperties: React.FunctionComponent<{ scene: BABYLON.Scene; }>; export var SceneCollisionsProperties: React.FunctionComponent<{ scene: BABYLON.Scene; }>; export var SceneShadowsProperties: React.FunctionComponent<{ scene: BABYLON.Scene; }>; export var SceneRenderingProperties: React.FunctionComponent<{ scene: BABYLON.Scene; selectionService: ISelectionService; }>; /** * Props for drop-only event handlers on a section header. */ export type DropProps = { onDragOver: (e: React.DragEvent) => void; onDragLeave: (e: React.DragEvent) => void; onDrop: (e: React.DragEvent) => void; }; /** * Props for drag-drop event handlers on a tree item. */ export type DragDropProps = { draggable: boolean; onDragStart: (e: React.DragEvent) => void; onDragEnd: (e: React.DragEvent) => void; } & DropProps; /** * Options for the drag-drop hook. */ export type SceneExplorerDragDropOptions = { /** Called after a successful drop with the dragged entity and target (entity or null for section root). */ onDrop?: (draggedEntity: unknown, targetEntity: unknown | null) => void; }; /** * Hook that provides drag-drop functionality for the scene explorer. * Uses vanilla HTML5 drag and drop APIs. * @param options Optional callbacks for drag-drop events. * @returns State and props factory for drag-drop functionality. */ export function useSceneExplorerDragDrop(options?: SceneExplorerDragDropOptions): { draggedEntity: unknown; dropTarget: unknown; dropTargetIsRoot: boolean; createDragProps: (entity: unknown, getName: () => string, dragDropConfig?: SceneExplorerDragDropConfig) => DragDropProps; createSectionDropProps: (dragDropConfig: SceneExplorerDragDropConfig | undefined) => DropProps; }; export type EntityDisplayInfo = Partial & Readonly<{ /** * The name of the entity to display in the BABYLON.Scene Explorer tree. */ name: string; /** * An observable that notifies when the display info (such as the name) changes. */ onChange?: BABYLON.IReadonlyObservable; }>; /** * Configuration for drag-and-drop behavior within a section. */ export type SceneExplorerDragDropConfig = Readonly<{ /** * Determines whether an entity can be dragged. * @param entity The entity to check. * @returns True if the entity can be dragged, false otherwise. */ canDrag: (entity: T) => boolean; /** * Determines whether an entity can be dropped onto a target. * @param draggedEntity The entity being dragged. * @param targetEntity The potential drop target entity, or null if dropping onto the section root. * @returns True if the drop is allowed, false otherwise. */ canDrop: (draggedEntity: T, targetEntity: T | null) => boolean; /** * Called when a drag-and-drop operation completes. * @param draggedEntity The entity that was dragged. * @param targetEntity The entity it was dropped onto, or null if dropped onto the section root. */ onDrop: (draggedEntity: T, targetEntity: T | null) => void; }>; export type SceneExplorerSection = Readonly<{ /** * The display name of the section (e.g. "Nodes", "Materials", etc.). */ displayName: string; /** * An optional order for the section, relative to other sections. * Defaults to 0. */ order?: number; /** * A function that returns the root entities for this section. */ getRootEntities: () => readonly T[]; /** * An optional function that returns the children of a given entity. */ getEntityChildren?: (entity: T) => readonly T[]; /** * Gets the display information for a given entity. * This is ideally "live" display info (e.g. updates to the display info are taken into account and communicated via the observable). * This means in many cases the display info will need to be disposed when it is no longer needed so observable registrations can be removed. */ getEntityDisplayInfo: (entity: T) => EntityDisplayInfo; /** * An optional icon component to render for the entity. */ entityIcon?: React.ComponentType<{ entity: T; }>; /** * A function that returns an array of observables for when entities are added to the scene. */ getEntityAddedObservables: () => readonly BABYLON.IReadonlyObservable[]; /** * A function that returns an array of observables for when entities are removed from the scene. */ getEntityRemovedObservables: () => readonly BABYLON.IReadonlyObservable[]; /** * A function that returns an array of observables for when entities are moved (e.g. re-parented) within the scene. */ getEntityMovedObservables?: () => readonly BABYLON.IReadonlyObservable[]; /** * Optional configuration for drag-and-drop behavior within this section. * If not provided, drag-and-drop is disabled for this section. */ dragDropConfig?: SceneExplorerDragDropConfig; }>; type InlineCommand = { /** * An icon component to render for the command. Required for inline commands. */ icon: React.ComponentType; /** * The mode of the command. Inline commands are shown directly in the tree item layout. Inline by default. */ mode?: "inline"; }; type ContextMenuCommand = { /** * An icon component to render for the command. Optional for context menu commands. */ icon?: React.ComponentType; /** * The mode of the command. Context menu commands are shown in the context menu for the tree item. */ mode: "contextMenu"; }; type CommandMode = NonNullable<(InlineCommand | ContextMenuCommand)["mode"]>; type ActionCommand = { readonly type: "action"; /** * The function that executes the command. */ execute(): unknown | Promise; }; type ToggleCommand = { readonly type: "toggle"; /** * A boolean indicating if the command is enabled. */ isEnabled: boolean; }; type CommandType = (ActionCommand | ToggleCommand)["type"]; export type SceneExplorerCommand = Partial & Readonly<{ /** * The display name of the command (e.g. "Delete", "Rename", etc.). */ displayName: string; /** * An optional array of hotkeys that trigger the command. */ hotKey?: { keyCode: string; control?: boolean; alt?: boolean; shift?: boolean; meta?: boolean; }; /** * An observable that notifies when the command state changes. */ onChange?: BABYLON.IReadonlyObservable; }> & (ModeT extends "inline" ? InlineCommand : ContextMenuCommand) & (TypeT extends "action" ? ActionCommand : ToggleCommand); export type SceneExplorerCommandProvider = Readonly<{ /** * An optional order for the section, relative to other commands. * Defaults to 0. */ order?: number; /** * A predicate function that determines if the command is applicable to the given context. */ predicate: (context: unknown) => context is ContextT; /** * Gets the command information for the given context. */ getCommand: (context: ContextT) => SceneExplorerCommand; }>; var ActionCommand: React.FunctionComponent<{ command: SceneExplorerCommand<"inline", "action">; }>; var ToggleCommand: React.FunctionComponent<{ command: SceneExplorerCommand<"inline", "toggle">; }>; export var SceneExplorer: React.FunctionComponent<{ sections: readonly SceneExplorerSection[]; entityCommandProviders: readonly SceneExplorerCommandProvider[]; sectionCommandProviders: readonly SceneExplorerCommandProvider[]; scene: BABYLON.Scene; selectedEntity?: unknown; setSelectedEntity?: (entity: unknown) => void; }>; export type Transform = { position: BABYLON.Vector3; rotation: BABYLON.Vector3; rotationQuaternion: BABYLON.Nullable; scaling: BABYLON.Vector3; }; export var TransformProperties: React.FunctionComponent<{ transform: Transform; }>; export var PropertiesPane: typeof ExtensibleAccordion; export interface IMetadataContainer { metadata: unknown; } /** * Component to display metadata properties of an entity. * @param props - The properties for the component. * @returns A React component that displays metadata properties. */ export var MetadataProperties: React.FunctionComponent<{ entity: IMetadataContainer; }>; /** Props for the LinkToEntity component */ export type LinkToEntityProps = { /** The entity to link to, or null if no entity is available */ entity: BABYLON.Nullable<{ name: string; reservedDataStore?: Record; }>; /** The selection service used to navigate to the entity */ selectionService: ISelectionService; }; /** * A clickable link that navigates to a specific entity in the inspector. * Renders nothing when the entity is null or hidden. * @param props - The entity and selection service * @returns A link component, or null */ export var LinkToEntity: React.FunctionComponent; /** * A property line that links to a specific entity in the scene. * @param props an entity and a selection service * @returns A link property line component. */ export var LinkToEntityPropertyLine: React.FunctionComponent & LinkToEntityProps>; /** * Generates a string representation of a value for clipboard copy. * Handles primitives, vectors, colors, quaternions, and other Babylon.js types. * @param value - The value to convert to a string * @returns A string that can be used to recreate the value */ export function GenerateCopyString(value: unknown): string; type CommonEntity = { readonly id?: number; readonly uniqueId?: number; name?: string; getClassName?: () => string; }; export function IsCommonEntity(entity: unknown): entity is CommonEntity; export var CommonGeneralProperties: React.FunctionComponent<{ commonEntity: CommonEntity; }>; export var DisposableGeneralProperties: React.FunctionComponent<{ disposableEntity: BABYLON.IDisposable; }>; /** * Helper type to check if a type includes null or undefined */ type IsNullable = null extends T ? true : undefined extends T ? true : false; /** * Base props for BoundProperty */ type BaseBoundPropertyProps> = Omit, "value" | "onChange" | "nullable" | "defaultValue" | "ignoreNullable"> & { component: ComponentT; target: TargetT | null | undefined; propertyKey: PropertyKeyT; /** Optional propertyPath used to generate the copyString if path to property is not equal to entity.target */ propertyPath?: string; convertTo?: (value: TargetT[PropertyKeyT]) => TargetT[PropertyKeyT]; convertFrom?: (value: TargetT[PropertyKeyT]) => TargetT[PropertyKeyT]; }; /** * Enhanced BoundProperty props that enforces strict nullable handling */ export type BoundPropertyProps> = BaseBoundPropertyProps & (IsNullable extends true ? { defaultValue: null; nullable?: never; ignoreNullable?: never; } | (ComponentProps extends { nullable?: boolean; } ? { nullable: true; defaultValue: NonNullable; ignoreNullable?: never; } | { ignoreNullable: true; defaultValue: NonNullable; nullable?: never; } : never) : {}); function BoundPropertyImpl>(props: BoundPropertyProps, ref?: any): import("react/jsx-runtime").JSX.Element | null; /** * Intercepts the passed in component's target[propertyKey] with useInterceptObservable and sets component state using useObservableState. * Renders the passed in component with value as the new observableState value and onChange as a callback to set the target[propertyKey] value. * * NOTE: BoundProperty has strict nullable enforcement! * * If Target[PropertyKey] is Nullable, caller has three options: * 1. `nullable: true` + `defaultValue: NonNullable` - Shows enable/disable checkbox UI * 2. `ignoreNullable: true` + `defaultValue: NonNullable` - Shows disabled state when null * 3. `defaultValue: null` - Skips nullable handling entirely, passes value through as-is * * @param props BoundPropertyProps with strict nullable validation * @returns JSX element */ export var BoundProperty: typeof BoundPropertyImpl; /** * Mutually exclusive propertyPath or functionPath - one required */ type RequiredPropertyPath = { propertyPath: string; functionPath?: never; } | { functionPath: string; propertyPath?: never; }; /** * Props for Property component - a simpler version of BoundProperty that only handles onCopy functionality * Pass in the full propertyPath from entity to property (e.g. "meshes[0].position.x") to ensure copyString is accurate * Use functionPath for function-based properties (e.g. "setEnabled" generates "debugNode.setEnabled(value)") */ export type PropertyProps> = Omit, "onCopy"> & { component: ComponentT; } & RequiredPropertyPath; function PropertyImpl>(props: PropertyProps, ref?: any): import("react/jsx-runtime").JSX.Element; /** * A simpler version of BoundProperty that only provides the onCopy functionality. * Does not bind the value/onChange - those must be provided by the caller. * Use this when you need copy support but have custom value/onChange handling. * * @param props PropertyProps with propertyName for copy support * @returns JSX element */ export var Property: typeof PropertyImpl; export var GeneralAtmosphereProperties: React.FunctionComponent<{ entity: ADDONS.Atmosphere; }>; export var ScatteringAndAbsorptionProperties: React.FunctionComponent<{ entity: ADDONS.Atmosphere; }>; export var MultipleScatteringProperties: React.FunctionComponent<{ entity: ADDONS.Atmosphere; }>; export var AerialPerspectiveProperties: React.FunctionComponent<{ entity: ADDONS.Atmosphere; }>; export var DiffuseIrradianceProperties: React.FunctionComponent<{ entity: ADDONS.Atmosphere; }>; export var RenderingOptionsProperties: React.FunctionComponent<{ entity: ADDONS.Atmosphere; }>; export var ThinTextureGeneralProperties: React.FunctionComponent<{ texture: BABYLON.ThinTexture; }>; export var ThinTextureSamplingProperties: React.FunctionComponent<{ texture: BABYLON.ThinTexture; }>; export var TexturePreviewProperties: React.FunctionComponent<{ texture: BABYLON.Texture; }>; export var TextureGeneralProperties: React.FunctionComponent<{ texture: BABYLON.Texture; }>; export var TextureTransformProperties: React.FunctionComponent<{ texture: BABYLON.Texture; }>; export type TexturePreviewImperativeRef = { refresh: () => Promise; }; export type TexturePreviewProps = { texture: BABYLON.BaseTexture; disableToolbar?: boolean; maxWidth?: string; maxHeight?: string; offsetX?: number; offsetY?: number; width?: number; height?: number; imperativeRef?: React.Ref; }; export var TexturePreview: React.FunctionComponent; export var TextureFormat: ({ label: string; normalizable: boolean; value: number; hideType?: undefined; compressed?: undefined; } | { label: string; normalizable: boolean; hideType: boolean; value: number; compressed?: undefined; } | { label: string; normalizable: boolean; compressed: boolean; value: number; hideType?: undefined; })[]; export function FindTextureFormat(format: number): { label: string; normalizable: boolean; value: number; hideType?: undefined; compressed?: undefined; } | { label: string; normalizable: boolean; hideType: boolean; value: number; compressed?: undefined; } | { label: string; normalizable: boolean; compressed: boolean; value: number; hideType?: undefined; } | null; export var TextureType: { label: string; normalizable: boolean; value: number; }[]; export function FindTextureType(type: number): { label: string; normalizable: boolean; value: number; } | null; export var RenderTargetTextureGeneralProperties: React.FunctionComponent<{ texture: BABYLON.RenderTargetTexture; }>; export var MultiRenderTargetGeneralProperties: React.FunctionComponent<{ texture: BABYLON.MultiRenderTarget; }>; export var CubeTextureTransformProperties: React.FunctionComponent<{ texture: BABYLON.CubeTexture; }>; export var BaseTexturePreviewProperties: React.FunctionComponent<{ texture: BABYLON.BaseTexture; textureEditor: React.ComponentType; }>; export var BaseTextureGeneralProperties: React.FunctionComponent<{ texture: BABYLON.BaseTexture; }>; export var BaseTextureCharacteristicProperties: React.FunctionComponent<{ texture: BABYLON.BaseTexture; }>; export var BaseTextureTransformProperties: React.FunctionComponent<{ texture: BABYLON.BaseTexture; }>; export var AdvancedDynamicTextureGeneralProperties: import("react").ForwardRefExoticComponent<{ texture: BABYLON.GUI.AdvancedDynamicTexture; } & { spinnerSize?: import("@fluentui/react-spinner").SpinnerProps["size"]; spinnerLabel?: string; } & import("react").RefAttributes>; export var AdvancedDynamicTexturePreviewProperties: React.FunctionComponent<{ texture: BABYLON.GUI.AdvancedDynamicTexture; }>; export var SpriteGeneralProperties: React.FunctionComponent<{ sprite: BABYLON.Sprite; selectionService: ISelectionService; }>; export var SpriteTransformProperties: React.FunctionComponent<{ sprite: BABYLON.Sprite; }>; export var SpriteAnimationProperties: React.FunctionComponent<{ sprite: BABYLON.Sprite; }>; export var SpriteOtherProperties: React.FunctionComponent<{ sprite: BABYLON.Sprite; }>; export var SpriteCellProperties: React.FunctionComponent<{ sprite: BABYLON.Sprite; }>; export var SpriteManagerGeneralProperties: React.FunctionComponent<{ spriteManager: BABYLON.SpriteManager; selectionService: ISelectionService; }>; export var SpriteManagerOtherProperties: React.FunctionComponent<{ spriteManager: BABYLON.SpriteManager; }>; export var SpriteManagerCellProperties: React.FunctionComponent<{ spriteManager: BABYLON.SpriteManager; }>; export var SpriteManagerFileProperties: React.FunctionComponent<{ spriteManager: BABYLON.SpriteManager; selectionService: ISelectionService; }>; export var SpriteManagerSnippetProperties: React.FunctionComponent<{ spriteManager: BABYLON.SpriteManager; selectionService: ISelectionService; }>; export var SpriteManagerActionsProperties: React.FunctionComponent<{ spriteManager: BABYLON.SpriteManager; selectionService: ISelectionService; }>; export var SkeletonGeneralProperties: React.FunctionComponent<{ skeleton: BABYLON.Skeleton; }>; export var SkeletonViewerProperties: React.FunctionComponent<{ skeleton: BABYLON.Skeleton; }>; export var BoneGeneralProperties: React.FunctionComponent<{ bone: BABYLON.Bone; selectionService: ISelectionService; }>; export var SSRRenderingPipelineSSRProperties: React.FunctionComponent<{ pipeline: BABYLON.SSRRenderingPipeline; }>; export var SSRRenderingPipelineThicknessProperties: React.FunctionComponent<{ pipeline: BABYLON.SSRRenderingPipeline; }>; export var SSRRenderingPipelineBlurProperties: React.FunctionComponent<{ pipeline: BABYLON.SSRRenderingPipeline; }>; export var SSRRenderingPipelineAttenuationProperties: React.FunctionComponent<{ pipeline: BABYLON.SSRRenderingPipeline; }>; export var SSRRenderingPipelineColorSpaceProperties: React.FunctionComponent<{ pipeline: BABYLON.SSRRenderingPipeline; }>; export var SSAORenderingPipelineProperties: React.FunctionComponent<{ pipeline: BABYLON.SSAORenderingPipeline; }>; export var SSAO2RenderingPipelineSSAOProperties: React.FunctionComponent<{ pipeline: BABYLON.SSAO2RenderingPipeline; }>; export var SSAO2RenderingPipelineDenoiserProperties: React.FunctionComponent<{ pipeline: BABYLON.SSAO2RenderingPipeline; }>; export var PostProcessRenderPipelineSamplesProperties: React.FunctionComponent<{ pipeline: BABYLON.PostProcessRenderPipeline; }>; export var LensRenderingPipelineOptionsProperties: React.FunctionComponent<{ pipeline: BABYLON.LensRenderingPipeline; }>; export var LensRenderingPipelineDepthOfFieldProperties: React.FunctionComponent<{ pipeline: BABYLON.LensRenderingPipeline; }>; export var IblShadowsRenderPipelineVoxelProperties: React.FunctionComponent<{ pipeline: BABYLON.IblShadowsRenderPipeline; }>; export var IblShadowsRenderPipelineScreenspaceProperties: React.FunctionComponent<{ pipeline: BABYLON.IblShadowsRenderPipeline; }>; export var IblShadowsRenderPipelineDebugProperties: React.FunctionComponent<{ pipeline: BABYLON.IblShadowsRenderPipeline; }>; export var DefaultRenderingPipelineBloomProperties: React.FunctionComponent<{ pipeline: BABYLON.DefaultRenderingPipeline; }>; export var DefaultRenderingPipelineChromaticAberrationProperties: React.FunctionComponent<{ pipeline: BABYLON.DefaultRenderingPipeline; }>; export var DefaultRenderingPipelineDepthOfFieldProperties: React.FunctionComponent<{ pipeline: BABYLON.DefaultRenderingPipeline; }>; export var DefaultRenderingPipelineFxaaGlowProperties: React.FunctionComponent<{ pipeline: BABYLON.DefaultRenderingPipeline; }>; export var DefaultRenderingPipelineGrainProperties: React.FunctionComponent<{ pipeline: BABYLON.DefaultRenderingPipeline; }>; export var DefaultRenderingPipelineImageProcessingProperties: React.FunctionComponent<{ pipeline: BABYLON.DefaultRenderingPipeline; }>; export var DefaultRenderingPipelineSharpenProperties: React.FunctionComponent<{ pipeline: BABYLON.DefaultRenderingPipeline; }>; /** * The properties component for a post process. * @param props - The properties component props containing the post process. * @returns JSX.Element */ export var PostProcessProperties: React.FunctionComponent<{ postProcess: BABYLON.PostProcess; }>; export var TransformNodePhysicsProperties: React.FunctionComponent<{ node: BABYLON.TransformNode; }>; /** * Display general (high-level) information about a particle system. * @param props Component props. * @returns Render property lines. */ export var ParticleSystemSystemProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem | BABYLON.GPUParticleSystem; selectionService: ISelectionService; }>; /** * Display spritesheet-related properties for a particle system. * @param props Component props. * @returns Render property lines. */ export var ParticleSystemSpritesheetProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem | BABYLON.GPUParticleSystem; }>; /** * Display size-related properties for a particle system. * @param props Component props. * @returns Render property lines. */ export var ParticleSystemSizeProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem | BABYLON.GPUParticleSystem; }>; /** * Display rotation-related properties for a particle system. * @param props Component props. * @returns Render property lines. */ export var ParticleSystemRotationProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem | BABYLON.GPUParticleSystem; }>; /** * Display the NPE blocks that are marked as visible in the inspector. * @param props Component props. * @returns Render property lines. */ export var ParticleSystemNodeEditorProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem; selectionService: ISelectionService; }>; /** * Display lifetime-related properties for a particle system. * @param props Component props. * @returns Render property lines. */ export var ParticleSystemLifetimeProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem | BABYLON.GPUParticleSystem; }>; /** * Display emitter-related properties for a particle system. * @param props Component props. * @returns Render property lines. */ export var ParticleSystemEmitterProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem | BABYLON.GPUParticleSystem; selectionService: ISelectionService; }>; /** * Display emission-related properties for a particle system. * @param props Component props. * @returns Render property lines. */ export var ParticleSystemEmissionProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem | BABYLON.GPUParticleSystem; }>; /** * Display commands that can be applied to a particle system inside Inspector. * @param props Component props. * @returns Render property lines. */ export var ParticleSystemCommandProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem | BABYLON.GPUParticleSystem; selectionService: ISelectionService; }>; /** * Display color-related properties for a particle system. * @param props Component props. * @returns Render property lines. */ export var ParticleSystemColorProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem | BABYLON.GPUParticleSystem; }>; /** * Display attractor-related properties for a particle system. * Supports both CPU particle systems (editable) and Node particle systems (read-only). * @param props Component props. * @returns Render property lines. */ export var ParticleSystemAttractorProperties: React.FunctionComponent<{ particleSystem: BABYLON.ParticleSystem; }>; type AttractorListProps = { scene: BABYLON.Scene; attractorSource: IAttractorSource; }; /** * Component that displays a list of attractors with debug visualization and editing controls. * Supports both CPU particle systems (editable) and Node particle systems (read-only). * @param props The component props containing the scene and attractor source. * @returns The rendered AttractorList component. */ export var AttractorList: React.FunctionComponent; /** * Represents an attractor in a normalized way that works for both CPU and Node particle systems. */ export interface IAttractorData { /** The position of the attractor */ position: BABYLON.Vector3; /** The strength of the attractor (null if dynamically computed) */ strength: number | null; /** Sets the strength of the attractor */ setStrength: (value: number) => void; /** The original attractor object (CPU) or BABYLON.UpdateAttractorBlock (Node) */ source: BABYLON.Attractor | BABYLON.UpdateAttractorBlock; /** Whether this attractor is read-only (position and strength cannot be edited in inspector) */ isReadOnly: boolean; } /** * Interface for an attractor source that provides attractors from different particle system types. */ export interface IAttractorSource { /** The attractors from the source */ attractors: IAttractorData[]; /** Add a new attractor (only for CPU particle systems) */ addAttractor?: (attractor?: BABYLON.Attractor) => void; /** Remove an attractor (only for CPU particle systems) */ removeAttractor?: (attractor: BABYLON.Attractor) => void; } /** * Creates an IAttractorData adapter from a CPU particle system BABYLON.Attractor. * @param attractor The CPU particle system attractor * @returns The IAttractorData adapter */ export function CreateCPUAttractorData(attractor: BABYLON.Attractor): IAttractorData; /** * Creates an IAttractorData adapter from a Node particle system BABYLON.UpdateAttractorBlock. * @param block The BABYLON.UpdateAttractorBlock from a Node particle system * @returns The IAttractorData adapter */ export function CreateNodeAttractorData(block: BABYLON.UpdateAttractorBlock): IAttractorData; /** * Creates an IAttractorSource for a CPU particle system. * @param system The CPU particle system * @param attractors The current attractors array (from useObservableArray hook) * @returns The IAttractorSource adapter */ export function CreateCPUAttractorSource(system: BABYLON.ParticleSystem, attractors: BABYLON.Attractor[]): IAttractorSource; /** * Creates an IAttractorSource for a Node particle system. * @param nodeSet The BABYLON.NodeParticleSystemSet * @returns The IAttractorSource adapter */ export function CreateNodeAttractorSource(nodeSet: BABYLON.NodeParticleSystemSet): IAttractorSource; type AttractorProps = { attractorData: IAttractorData; id: number; impostorScale: number; impostorColor: BABYLON.Color3; impostorMaterial: BABYLON.StandardMaterial; scene: BABYLON.Scene; isControlled: (impostor: BABYLON.AbstractMesh) => boolean; onControl: (impostor?: BABYLON.AbstractMesh) => void; }; /** * Represents the UX of an attractor, a sphere with a color/size whose position matches that of the underlying attractor * @param props * @returns */ export var AttractorComponent: React.FunctionComponent; export var NodeGeneralProperties: React.FunctionComponent<{ node: BABYLON.Node; selectionService: ISelectionService; }>; export var MeshGeneralProperties: React.FunctionComponent<{ mesh: BABYLON.Mesh; }>; export var MeshDisplayProperties: React.FunctionComponent<{ mesh: BABYLON.Mesh; }>; export var MeshMorphTargetsProperties: React.FunctionComponent<{ mesh: BABYLON.Mesh; }>; export var GaussianSplattingDisplayProperties: React.FunctionComponent<{ mesh: BABYLON.GaussianSplattingMesh; }>; export var AbstractMeshGeneralProperties: React.FunctionComponent<{ mesh: BABYLON.AbstractMesh; selectionService: ISelectionService; }>; export var AbstractMeshDisplayProperties: React.FunctionComponent<{ mesh: BABYLON.AbstractMesh; }>; export var AbstractMeshAdvancedProperties: React.FunctionComponent<{ mesh: BABYLON.AbstractMesh; }>; export var AbstractMeshOutlineOverlayProperties: React.FunctionComponent<{ mesh: BABYLON.AbstractMesh; }>; export var AbstractMeshOcclusionsProperties: React.FunctionComponent<{ mesh: BABYLON.AbstractMesh; }>; export var AbstractMeshEdgeRenderingProperties: React.FunctionComponent<{ mesh: BABYLON.AbstractMesh; }>; export var AbstractMeshDebugProperties: React.FunctionComponent<{ mesh: BABYLON.AbstractMesh; }>; export var StandardMaterialGeneralProperties: React.FunctionComponent<{ material: BABYLON.StandardMaterial; }>; export var StandardMaterialTransparencyProperties: React.FunctionComponent<{ material: BABYLON.StandardMaterial; }>; export var StandardMaterialTexturesProperties: React.FunctionComponent<{ material: BABYLON.StandardMaterial; selectionService: ISelectionService; }>; /** * Displays the levels properties of a standard material. * @param props - The required properties * @returns A JSX element representing the levels properties. */ export var StandardMaterialLevelsProperties: React.FunctionComponent<{ standardMaterial: BABYLON.StandardMaterial; }>; /** * Displays the lighting and color properties of a standard material. * @param props - The required properties * @returns A JSX element representing the lighting and color properties. */ export var StandardMaterialLightingAndColorProperties: React.FunctionComponent<{ standardMaterial: BABYLON.StandardMaterial; }>; export var SkyMaterialProperties: React.FunctionComponent<{ material: BABYLON.SkyMaterial; }>; interface PBRSheenConfiguration { _useRoughness: boolean; } export var LightFalloffOptions: [{ readonly label: "Physical"; readonly value: 0; }, { readonly label: "glTF"; readonly value: 1; }, { readonly label: "Standard"; readonly value: 2; }]; export var RealTimeFilteringQualityOptions: [{ readonly label: "Low"; readonly value: 8; }, { readonly label: "Medium"; readonly value: 16; }, { readonly label: "High"; readonly value: 64; }]; export var BaseDiffuseModelOptions: [{ readonly label: "Lambert"; readonly value: 2; }, { readonly label: "Burley"; readonly value: 1; }, { readonly label: "OpenPBR"; readonly value: 0; }]; export var DielectricSpecularModelOptions: [{ readonly label: "glTF"; readonly value: 0; }, { readonly label: "OpenPBR"; readonly value: 1; }]; export var ConductorSpecularModelOptions: [{ readonly label: "glTF"; readonly value: 0; }, { readonly label: "OpenPBR"; readonly value: 1; }]; export var DebugMode: [{ readonly label: "None"; readonly value: 0; }, { readonly label: "Normalized position"; readonly value: 1; }, { readonly label: "Normals"; readonly value: 2; }, { readonly label: "Tangents"; readonly value: 3; }, { readonly label: "Bitangents"; readonly value: 4; }, { readonly label: "Bump Normals"; readonly value: 5; }, { readonly label: "UV1"; readonly value: 6; }, { readonly label: "UV2"; readonly value: 7; }, { readonly label: "ClearCoat Normals"; readonly value: 8; }, { readonly label: "ClearCoat Tangents"; readonly value: 9; }, { readonly label: "ClearCoat Bitangents"; readonly value: 10; }, { readonly label: "Anisotropic Normals"; readonly value: 11; }, { readonly label: "Anisotropic Tangents"; readonly value: 12; }, { readonly label: "Anisotropic Bitangents"; readonly value: 13; }, { readonly label: "Albedo Map"; readonly value: 20; }, { readonly label: "Ambient Map"; readonly value: 21; }, { readonly label: "Opacity Map"; readonly value: 22; }, { readonly label: "Emissive Map"; readonly value: 23; }, { readonly label: "Light Map"; readonly value: 24; }, { readonly label: "Metallic Map"; readonly value: 25; }, { readonly label: "Reflectivity Map"; readonly value: 26; }, { readonly label: "ClearCoat Map"; readonly value: 27; }, { readonly label: "ClearCoat Tint Map"; readonly value: 28; }, { readonly label: "Sheen Map"; readonly value: 29; }, { readonly label: "Anisotropic Map"; readonly value: 30; }, { readonly label: "Thickness Map"; readonly value: 31; }, { readonly label: "Bump Map"; readonly value: 32; }, { readonly label: "Env Refraction"; readonly value: 40; }, { readonly label: "Env Reflection"; readonly value: 41; }, { readonly label: "Env Clear Coat"; readonly value: 42; }, { readonly label: "Direct Diffuse"; readonly value: 50; }, { readonly label: "Direct Specular"; readonly value: 51; }, { readonly label: "Direct Clear Coat"; readonly value: 52; }, { readonly label: "Direct Sheen"; readonly value: 53; }, { readonly label: "Env Irradiance"; readonly value: 54; }, { readonly label: "Surface Albedo"; readonly value: 60; }, { readonly label: "Reflectance 0"; readonly value: 61; }, { readonly label: "Metallic"; readonly value: 62; }, { readonly label: "Metallic F0"; readonly value: 71; }, { readonly label: "Roughness"; readonly value: 63; }, { readonly label: "AlphaG"; readonly value: 64; }, { readonly label: "NdotV"; readonly value: 65; }, { readonly label: "ClearCoat Color"; readonly value: 66; }, { readonly label: "ClearCoat Roughness"; readonly value: 67; }, { readonly label: "ClearCoat NdotV"; readonly value: 68; }, { readonly label: "Transmittance"; readonly value: 69; }, { readonly label: "Refraction Transmittance"; readonly value: 70; }, { readonly label: "Glossiness"; readonly value: 72; }, { readonly label: "Base Color"; readonly value: 73; }, { readonly label: "Specular Color"; readonly value: 74; }, { readonly label: "Emissive Color"; readonly value: 75; }, { readonly label: "SEO"; readonly value: 80; }, { readonly label: "EHO"; readonly value: 81; }, { readonly label: "Energy Factor"; readonly value: 82; }, { readonly label: "Specular Reflectance"; readonly value: 83; }, { readonly label: "Clear Coat Reflectance"; readonly value: 84; }, { readonly label: "Sheen Reflectance"; readonly value: 85; }, { readonly label: "Luminance Over Alpha"; readonly value: 86; }, { readonly label: "Alpha"; readonly value: 87; }, { readonly label: "Albedo Alpha"; readonly value: 88; }, { readonly label: "Ambient occlusion color"; readonly value: 89; }]; export var PBRBaseMaterialGeneralProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; }>; export var PBRBaseMaterialTransparencyProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; }>; export var PBRBaseMaterialChannelsProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; selectionService: ISelectionService; }>; export var PBRBaseMaterialLightingAndColorProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; }>; export var PBRBaseMaterialMetallicWorkflowProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; selectionService: ISelectionService; }>; export var PBRBaseMaterialClearCoatProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; selectionService: ISelectionService; }>; export var PBRBaseMaterialIridescenceProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; selectionService: ISelectionService; }>; export var PBRBaseMaterialAnisotropicProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; selectionService: ISelectionService; }>; export var PBRBaseMaterialSheenProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; selectionService: ISelectionService; }>; export var PBRBaseMaterialSubSurfaceProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; selectionService: ISelectionService; }>; export var PBRBaseMaterialLevelProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; }>; export var PBRBaseMaterialRenderingProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; }>; export var PBRBaseMaterialAdvancedProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; }>; export var PBRBaseMaterialDebugProperties: React.FunctionComponent<{ material: BABYLON.PBRBaseMaterial; }>; /** * Displays the base layer properties of an OpenPBR material. * @param props - The required properties * @returns A JSX element representing the base layer properties. */ export var OpenPBRMaterialBaseProperties: React.FunctionComponent<{ material: BABYLON.OpenPBRMaterial; }>; /** * Displays the specular layer properties of an OpenPBR material. * @param props - The required properties * @returns A JSX element representing the specular layer properties. */ export var OpenPBRMaterialSpecularProperties: React.FunctionComponent<{ material: BABYLON.OpenPBRMaterial; }>; export var OpenPBRMaterialTransmissionProperties: React.FunctionComponent<{ material: BABYLON.OpenPBRMaterial; }>; /** * Displays the coat layer properties of an OpenPBR material. * @param props - The required properties * @returns A JSX element representing the coat layer properties. */ export var OpenPBRMaterialCoatProperties: React.FunctionComponent<{ material: BABYLON.OpenPBRMaterial; }>; /** * Displays the fuzz layer properties of an OpenPBR material. * @param props - The required properties * @returns A JSX element representing the fuzz layer properties. */ export var OpenPBRMaterialFuzzProperties: React.FunctionComponent<{ material: BABYLON.OpenPBRMaterial; }>; /** * Displays the emission properties of an OpenPBR material. * @param props - The required properties * @returns A JSX element representing the emission properties. */ export var OpenPBRMaterialEmissionProperties: React.FunctionComponent<{ material: BABYLON.OpenPBRMaterial; }>; /** * Displays the thin film properties of an OpenPBR material. * @param props - The required properties * @returns A JSX element representing the thin film properties. */ export var OpenPBRMaterialThinFilmProperties: React.FunctionComponent<{ material: BABYLON.OpenPBRMaterial; }>; /** * Displays the geometry properties of an OpenPBR material. * @param props - The required properties * @returns A JSX element representing the geometry properties. */ export var OpenPBRMaterialGeometryProperties: React.FunctionComponent<{ material: BABYLON.OpenPBRMaterial; }>; type MaterialWithPublicNormalMaps = { invertNormalMapX: boolean; invertNormalMapY: boolean; }; type MaterialWithInternalNormalMaps = { _invertNormalMapX: boolean; _invertNormalMapY: boolean; }; export type MaterialWithNormalMaps = MaterialWithPublicNormalMaps | MaterialWithInternalNormalMaps; /** * Displays the normal map properties of a standard material. * @param props - The required properties * @returns A JSX element representing the normal map properties. */ export var NormalMapProperties: React.FunctionComponent<{ material: MaterialWithNormalMaps; }>; export var NodeMaterialGeneralProperties: React.FunctionComponent<{ material: BABYLON.NodeMaterial; }>; export var NodeMaterialInputProperties: React.FunctionComponent<{ material: BABYLON.NodeMaterial; }>; export var MultiMaterialChildrenProperties: React.FunctionComponent<{ multiMaterial: BABYLON.MultiMaterial; selectionService: ISelectionService; }>; export var MaterialGeneralProperties: React.FunctionComponent<{ material: BABYLON.Material; }>; export var MaterialTransparencyProperties: React.FunctionComponent<{ material: BABYLON.Material; }>; export var MaterialStencilProperties: React.FunctionComponent<{ material: BABYLON.Material; }>; export var SpotLightSetupProperties: React.FunctionComponent<{ context: BABYLON.SpotLight; }>; export var ShadowsSetupProperties: React.FunctionComponent<{ context: BABYLON.ShadowLight; }>; export var ShadowGeneratorSetupProperties: React.FunctionComponent<{ context: BABYLON.ShadowLight; }>; export var PointLightSetupProperties: React.FunctionComponent<{ context: BABYLON.PointLight; }>; export var HemisphericLightSetupProperties: React.FunctionComponent<{ context: BABYLON.HemisphericLight; }>; export var DirectionalLightSetupProperties: React.FunctionComponent<{ context: BABYLON.DirectionalLight; }>; export var DirectionalLightDebugProperties: React.FunctionComponent<{ context: BABYLON.DirectionalLight; }>; export var AreaLightSetupProperties: React.FunctionComponent<{ context: BABYLON.RectAreaLight; }>; export var FrameGraphTaskProperties: React.FunctionComponent<{ frameGraph: BABYLON.FrameGraph; }>; export var FrameGraphGeneralProperties: React.FunctionComponent<{ frameGraph: BABYLON.FrameGraph; }>; export var TargetCameraTransformProperties: React.FunctionComponent<{ camera: BABYLON.TargetCamera; }>; export var TargetCameraControlProperties: React.FunctionComponent<{ camera: BABYLON.TargetCamera; }>; export var GeospatialCameraTransformProperties: React.FunctionComponent<{ camera: BABYLON.GeospatialCamera; }>; export var GeospatialCameraCollisionProperties: React.FunctionComponent<{ camera: BABYLON.GeospatialCamera; }>; export var GeospatialCameraLimitsProperties: React.FunctionComponent<{ camera: BABYLON.GeospatialCamera; }>; export var FreeCameraTransformProperties: React.FunctionComponent<{ camera: BABYLON.FreeCamera; }>; export var FreeCameraControlProperties: React.FunctionComponent<{ camera: BABYLON.FreeCamera; }>; export var FreeCameraCollisionProperties: React.FunctionComponent<{ camera: BABYLON.FreeCamera; }>; export var FollowCameraTransformProperties: React.FunctionComponent<{ camera: BABYLON.FollowCamera; }>; export var FollowCameraLimitsProperties: React.FunctionComponent<{ camera: BABYLON.FollowCamera; }>; /** * The general properties component for a camera. * @param props - The component props containing the camera and settings context. * @returns JSX.Element */ export var CameraGeneralProperties: React.FunctionComponent<{ camera: BABYLON.Camera; }>; export var ArcRotateCameraTransformProperties: React.FunctionComponent<{ camera: BABYLON.ArcRotateCamera; }>; export var ArcRotateCameraControlProperties: React.FunctionComponent<{ camera: BABYLON.ArcRotateCamera; }>; export var ArcRotateCameraCollisionProperties: React.FunctionComponent<{ camera: BABYLON.ArcRotateCamera; }>; export var ArcRotateCameraLimitsProperties: React.FunctionComponent<{ camera: BABYLON.ArcRotateCamera; }>; export var ArcRotateCameraBehaviorsProperties: React.FunctionComponent<{ camera: BABYLON.ArcRotateCamera; }>; export var SoundGeneralProperties: React.FunctionComponent<{ sound: BABYLON.Sound; }>; export var SoundCommandProperties: React.FunctionComponent<{ sound: BABYLON.Sound; }>; export var TargetedAnimationGeneralProperties: React.FunctionComponent<{ targetedAnimation: BABYLON.TargetedAnimation; selectionService: ISelectionService; }>; export interface IAnimationRangeContainer { getAnimationRanges(): BABYLON.Nullable[]; } export interface IAnimatableContainer { getAnimatables(): BABYLON.IAnimatable[]; } interface Animatable { animationPropertiesOverride?: BABYLON.AnimationPropertiesOverride; } export var AnimationsProperties: React.FunctionComponent<{ scene: BABYLON.Scene; entity: Partial; }>; export var AnimationGroupControlProperties: React.FunctionComponent<{ animationGroup: BABYLON.AnimationGroup; }>; export var AnimationGroupInfoProperties: React.FunctionComponent<{ animationGroup: BABYLON.AnimationGroup; }>; type PerformanceViewerProps = { scene: BABYLON.Scene; layoutObservable: BABYLON.Observable; returnToLiveObservable: BABYLON.Observable; performanceCollector: BABYLON.PerformanceViewerCollector; initialGraphSize?: BABYLON.Vector2; }; export var PerformanceViewer: React.FunctionComponent; interface IPerformanceSidebarProps { collector: BABYLON.PerformanceViewerCollector; onVisibleRangeChangedObservable?: BABYLON.Observable; } export var PerformanceSidebar: React.FunctionComponent; /** * Defines a structure to hold max, min and a optional current. */ export type PerfMinMax = { min: number; max: number; current?: number; }; /** * Defines structure of the object which contains information related to panning. */ export type PerfMousePanningPosition = { xPos: number; delta: number; }; /** * Defines structure of the object which contains information regarding the bounds of each dataset we want to consider. */ export type PerfIndexBounds = { start: number; end: number; }; export type PerfLayoutSize = { width: number; height: number; }; /** * Defines the structure of the meta object for the tooltip that appears when hovering over a performance graph! */ export type PerfTooltip = { text: string; color: string; }; /** * Defines the structure of a cache object used to store the result of measureText(). */ export type PerfTextMeasureCache = { text: string; width: number; }; /** * Defines a structure defining the available space in a drawable area. */ export type GraphDrawableArea = { top: number; left: number; bottom: number; right: number; }; /** * Defines the structure representing necessary ticker information. */ export type PerfTicker = PerfMinMax & { id: string; text: string; }; export type VisibleRangeChangedObservableProps = { valueMap: Map; }; /** * Defines what settings our canvas graphing service accepts */ export type CanvasGraphServiceSettings = { datasets: BABYLON.IPerfDatasets; onVisibleRangeChangedObservable?: BABYLON.Observable; }; /** * Defines the structure representing the preprocessable tooltip information. */ export type TooltipPreprocessedInformation = { xForActualTimestamp: number; numberOfTooltipItems: number; longestText: string; focusedId: string; }; export type PerfTooltipHoverPosition = { xPos: number; yPos: number; }; /** * Defines the supported timestamp units. */ export enum TimestampUnit { Milliseconds = 0, Seconds = 1, Minutes = 2, Hours = 3 } /** * This class acts as the main API for graphing. Here is where you will find methods to let the service know new data needs to be drawn, * let it know something has been resized, etc! */ export class CanvasGraphService { private _ctx; private _width; private _height; private _sizeOfWindow; private _ticks; private _panPosition; private _position; private _datasetBounds; private _globalTimeMinMax; private _hoverPosition; private _drawableArea; private _axisHeight; private _tooltipItems; private _tooltipTextCache; private _tickerTextCache; private _tickerItems; private _preprocessedTooltipInfo; private _numberOfTickers; private _onVisibleRangeChangedObservable?; private readonly _addonFontLineHeight; private readonly _defaultLineHeight; /** * The datasets to render. */ readonly datasets: BABYLON.IPerfDatasets; /** * Metadata for each dataset. */ metadata: Map; /** * Creates an instance of CanvasGraphService. * * @param canvas a pointer to the canvas dom element we would like to write to. * @param settings settings for our service. */ constructor(canvas: HTMLCanvasElement, settings: CanvasGraphServiceSettings); /** * This method lets the service know it should get ready to update what it is displaying. */ update: () => void; /** * Update the canvas graph service with the new height and width of the canvas. * @param size The new size of the canvas. */ resize(size: PerfLayoutSize): void; /** * Force resets the position in the data, effectively returning to the most current data. */ resetDataPosition(): void; private _prevPointById; private _prevValueById; /** * This method draws the data and sets up the appropriate scales. */ private _draw; private _drawTickers; /** * Returns the index of the closest time for the datasets. * Uses a modified binary search to get value. * * @param targetTime the time we want to get close to. * @returns index of the item with the closest time to the targetTime */ private _getClosestPointToTimestamp; /** * This is a convenience method to get the number of collected slices. * @returns the total number of collected slices. */ private _getNumberOfSlices; /** * Draws the time axis, adjusts the drawable area for the graph. * * @param timeMinMax the minimum and maximum for the time axis. * @param drawableArea the current allocated drawable area. */ private _drawTimeAxis; /** * Given a timestamp (should be the maximum timestamp in view), this function returns the maximum unit the timestamp contains. * This information can be used for formatting purposes. * @param timestamp the maximum timestamp to find the maximum timestamp unit for. * @returns The maximum unit the timestamp has. */ private _getTimestampUnit; /** * Given a timestamp and the interval unit, this function will parse the timestamp to the appropriate format. * @param timestamp The timestamp to parse * @param intervalUnit The maximum unit of the maximum timestamp in an interval. * @returns a string representing the parsed timestamp. */ private _parseTimestamp; /** * Generates a list of ticks given the min and max of the axis, and the space available in the axis. * * @param minMax the minimum and maximum values of the axis * @param spaceAvailable the total amount of space we have allocated to our axis */ private _generateTicks; /** * Nice number algorithm based on psueudo code defined in "Graphics Gems" by Andrew S. Glassner. * This will find a "nice" number approximately equal to num. * * @param num The number we want to get close to. * @param shouldRound if true we will round the number, otherwise we will get the ceiling. * @returns a "nice" number approximately equal to num. */ private _niceNumber; /** * Gets the min and max as a single object from an array of numbers. * @param bounds * @param offset * @returns the min and max of the array. */ private _getMinMax; /** * Converts a single number to a pixel coordinate in a single axis by normalizing the data to a [0, 1] scale using the minimum and maximum values. * * @param num the number we want to get the pixel coordinate for * @param minMax the min and max of the dataset in the axis we want the pixel coordinate for. * @param startingPixel the starting pixel coordinate (this means it takes account for any offset). * @param spaceAvailable the total space available in this axis. * @param shouldFlipValue if we should use a [1, 0] scale instead of a [0, 1] scale. * @returns the pixel coordinate of the value in a single axis. */ private _getPixelForNumber; /** * Add in any necessary event listeners. * * @param canvas The canvas we want to attach listeners to. */ private _attachEventListeners; /** * We remove all event listeners we added. * * @param canvas The canvas we want to remove listeners from. */ private _removeEventListeners; /** * Handles what to do when we are hovering over the canvas and not panning. * * @param event A reference to the event to be handled. */ private _handleDataHover; /** * Debounced processing and drawing of tooltip. */ private _debouncedTooltip; /** * Handles what to do when we stop hovering over the canvas. */ private _handleStopHover; /** * Given a line defined by P1: (x1, y1) and P2: (x2, y2) get the distance of P0 (x0, y0) from the line. * https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_two_points * @param x1 x position of point P1 * @param y1 y position of point P1 * @param x2 x position of point P2 * @param y2 y position of point P2 * @param x0 x position of point P0 * @param y0 y position of point P0 * @returns distance of P0 from the line defined by P1 and P2 */ private _getDistanceFromLine; /** * This method does preprocessing calculations for the tooltip. * @param pos the position of our mouse. * @param drawableArea the remaining drawable area. */ private _preprocessTooltip; /** * Draws the tooltip given the area it is allowed to draw in and the current pixel position. * * @param pos the position of the mouse cursor in pixels (x, y). * @param drawableArea the available area we can draw in. */ private _drawTooltip; /** * Gets the number from a pixel position given the minimum and maximum value in range, and the starting pixel and the ending pixel. * * @param pixel current pixel position we want to get the number for. * @param minMax the minimum and maximum number in the range. * @param startingPixel position of the starting pixel in range. * @param endingPixel position of ending pixel in range. * @param shouldFlip if we should use a [1, 0] scale instead of a [0, 1] scale. * @returns number corresponding to pixel position */ private _getNumberFromPixel; /** * The handler for when we want to zoom in and out of the graph. * * @param event a mouse wheel event. */ private _handleZoom; /** * Initializes the panning object and attaches appropriate listener. * * @param event the mouse event containing positional information. */ private _handlePanStart; /** * While panning this event will keep track of the delta and update the "positions". * * @param event The mouse event that contains positional information. */ private _handlePan; /** * Clears the panning object and removes the appropriate listener. */ private _handlePanStop; /** * Method which returns true if the data should become realtime, false otherwise. * * @returns if the data should become realtime or not. */ private _shouldBecomeRealtime; /** * Will generate a playhead with a futurebox that takes up (1-scalefactor)*100% of the canvas. * * @param drawableArea The remaining drawable area. * @param scaleFactor The Percentage between 0.0 and 1.0 of the canvas the data gets drawn on. */ private _drawPlayheadRegion; /** * Method to do cleanup when the object is done being used. * */ destroy(): void; /** * This method clears the canvas */ clear(): void; } type CanvasGraphProps = { scene: BABYLON.Scene; collector: BABYLON.PerformanceViewerCollector; layoutObservable?: BABYLON.Observable; returnToPlayheadObservable?: BABYLON.Observable; onVisibleRangeChangedObservable?: BABYLON.Observable; initialGraphSize?: BABYLON.Vector2; }; export var CanvasGraph: React.FunctionComponent; export var HelpersDebugSectionIdentity: unique symbol; export var TextureChannelsDebugSectionIdentity: unique symbol; export var FeaturesDebugSectionIdentity: unique symbol; export var DebugPane: typeof ExtensibleAccordion; /** * Top toolbar for the curve editor with frame/value inputs and action buttons * @returns The top bar component */ export var TopBar: React.FunctionComponent; /** * Sidebar component for the curve editor with animation list and controls * @returns The sidebar component */ export var SideBar: React.FunctionComponent; /** * Range selector component - a draggable scrollbar for selecting frame range * @returns The range selector component */ export var RangeSelector: React.FunctionComponent; /** * 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; }; /** * 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: BABYLON.Nullable; /** The scene */ scene: BABYLON.Scene; /** Target animatable */ target: BABYLON.Nullable; /** Root animation group if any */ rootAnimationGroup: BABYLON.Nullable; /** Currently active/selected animations */ activeAnimations: BABYLON.Animation[]; /** Active color channels by animation ID */ activeChannels: { [key: number]: string; }; /** Currently selected key points */ activeKeyPoints: BABYLON.Nullable; /** The main/primary selected key point */ mainKeyPoint: BABYLON.Nullable; /** 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: React.Dispatch>; /** Set active frame */ setActiveFrame: React.Dispatch>; /** Set from key */ setFromKey: React.Dispatch>; /** Set to key */ setToKey: React.Dispatch>; /** Set is playing */ setIsPlaying: React.Dispatch>; /** Set clip length */ setClipLength: React.Dispatch>; /** Set reference max frame */ setReferenceMaxFrame: React.Dispatch>; /** Set focused input */ setFocusedInput: React.Dispatch>; /** Set active key points */ setActiveKeyPoints: React.Dispatch>>; /** Set active channels */ setActiveChannels: React.Dispatch>; /** 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: BABYLON.Animation, color: string) => void; /** Disable a channel for an animation */ disableChannel: (animation: BABYLON.Animation) => void; /** Check if channel is enabled */ isChannelEnabled: (animation: BABYLON.Animation, color: string) => boolean; /** Get active channel color */ getActiveChannel: (animation: BABYLON.Animation) => string | undefined; /** Reset all active channels */ resetAllActiveChannels: () => void; /** Get previous key frame */ getPrevKey: () => BABYLON.Nullable; /** Get next key frame */ getNextKey: () => BABYLON.Nullable; /** Prepare the editor */ prepare: () => void; }; /** * Observables for curve editor events */ export type CurveEditorObservables = { /** Fired when active animation changes */ onActiveAnimationChanged: BABYLON.Observable; /** Fired when active key point changes */ onActiveKeyPointChanged: BABYLON.Observable; /** Fired when host window is resized */ onHostWindowResized: BABYLON.Observable; /** Fired to select all keys */ onSelectAllKeys: BABYLON.Observable; /** Fired when active key frame changes */ onActiveKeyFrameChanged: BABYLON.Observable; /** Fired when frame is set */ onFrameSet: BABYLON.Observable; /** Fired when frame is manually entered */ onFrameManuallyEntered: BABYLON.Observable; /** Fired when main key point is set */ onMainKeyPointSet: BABYLON.Observable; /** Fired when main key point is moved */ onMainKeyPointMoved: BABYLON.Observable; /** Fired when value is set */ onValueSet: BABYLON.Observable; /** Fired when value is manually entered */ onValueManuallyEntered: BABYLON.Observable; /** Fired when frame is required */ onFrameRequired: BABYLON.Observable; /** Fired when create or update key point is required */ onCreateOrUpdateKeyPointRequired: BABYLON.Observable; /** Fired when flatten tangent is required */ onFlattenTangentRequired: BABYLON.Observable; /** Fired when linear tangent is required */ onLinearTangentRequired: BABYLON.Observable; /** Fired when break tangent is required */ onBreakTangentRequired: BABYLON.Observable; /** Fired when unify tangent is required */ onUnifyTangentRequired: BABYLON.Observable; /** Fired when step tangent is required */ onStepTangentRequired: BABYLON.Observable; /** Fired when animation should be deleted */ onDeleteAnimation: BABYLON.Observable; /** Fired when graph is moved */ onGraphMoved: BABYLON.Observable; /** Fired when graph is scaled */ onGraphScaled: BABYLON.Observable; /** Fired when range is updated */ onRangeUpdated: BABYLON.Observable; /** Fired when move to frame is required */ onMoveToFrameRequired: BABYLON.Observable; /** Fired when animation state changes */ onAnimationStateChanged: BABYLON.Observable; /** Fired when delete active key points is required */ onDeleteKeyActiveKeyPoints: BABYLON.Observable; /** Fired when selection rectangle is moved */ onSelectionRectangleMoved: BABYLON.Observable; /** Fired when animations are loaded */ onAnimationsLoaded: BABYLON.Observable; /** Fired when clip length is increased */ onClipLengthIncreased: BABYLON.Observable; /** Fired when clip length is decreased */ onClipLengthDecreased: BABYLON.Observable; /** Fired when interpolation mode is set */ onInterpolationModeSet: BABYLON.Observable<{ keyId: number; value: BABYLON.AnimationKeyInterpolation; }>; /** Fired when select to is activated */ onSelectToActivated: BABYLON.Observable<{ from: number; to: number; }>; /** Fired when range frame bar is resized */ onRangeFrameBarResized: BABYLON.Observable; /** Fired when playhead is moved */ onPlayheadMoved: BABYLON.Observable; /** Fired when active key data changes */ onActiveKeyDataChanged: BABYLON.Observable; }; /** * 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: BABYLON.Scene; /** Target animatable */ target: BABYLON.Nullable; /** Animations to edit */ animations: BABYLON.Nullable; /** Root animation group if any */ rootAnimationGroup?: BABYLON.Nullable; /** 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 var CurveEditorProvider: React.FunctionComponent>; /** * Hook to access the curve editor context * @returns The curve editor context value */ export function useCurveEditor(): CurveEditorContextValue; /** * 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 var 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 var 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 const DefaultCurveColor = "#ffffff"; /** * Graph UI colors */ export var 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"; }; /** * Props for the CurveEditorButton component */ export type CurveEditorButtonProps = { /** The scene */ scene: BABYLON.Scene; /** Target animatable */ target: BABYLON.Nullable; /** Animations to edit */ animations: BABYLON.Nullable; /** Root animation group if any */ rootAnimationGroup?: BABYLON.Nullable; /** Editor title */ title?: string; /** Whether using targeted animations */ useTargetAnimations?: boolean; /** Button label */ label?: string; }; /** * Button component that opens the BABYLON.Animation Curve Editor in a popup window * @param props - The component props * @returns The button component */ export var CurveEditorButton: React.FunctionComponent; /** * Props for the CurveEditor component */ export type CurveEditorProps = { /** The scene */ scene: BABYLON.Scene; /** Target animatable */ target: BABYLON.Nullable; /** Animations to edit */ animations: BABYLON.Nullable; /** Root animation group if any */ rootAnimationGroup?: BABYLON.Nullable; /** Editor title */ title?: string; /** Whether using targeted animations */ useTargetAnimations?: boolean; }; /** * BABYLON.Animation Curve Editor component for editing animation keyframes and curves * @param props - The component props * @returns The curve editor component */ export var CurveEditor: React.FunctionComponent; /** * Bottom bar component with playback controls and frame navigation. * @returns The BottomBar component. */ export var BottomBar: React.FunctionComponent; type SaveAnimationPanelProps = { onClose: () => void; }; /** * Panel for saving animations to file or snippet server * @returns The save animation panel component */ export var SaveAnimationPanel: React.FunctionComponent; type LoadAnimationPanelProps = { onClose: () => void; }; /** * Panel for loading animations from file or snippet server * @returns The load animation panel component */ export var LoadAnimationPanel: React.FunctionComponent; type EditAnimationPanelProps = { animation: BABYLON.Animation; onClose: () => void; }; /** * Panel for editing animation properties * @returns The edit animation panel component */ export var EditAnimationPanel: React.FunctionComponent; /** * Animation list component showing all animations * @returns Animation list component */ export var AnimationList: React.FunctionComponent; type AddAnimationPanelProps = { onClose: () => void; }; /** * Panel for adding new animations * @returns The add animation panel component */ export var AddAnimationPanel: React.FunctionComponent; type RangeFrameBarProps = { width: number; }; /** * Range frame bar showing frame tick marks and keyframe indicators * @returns The range frame bar component */ export var RangeFrameBar: React.FunctionComponent; 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 var PlayHead: React.FunctionComponent; /** Selection state for key points */ export enum SelectionState { None = 0, Selected = 1, Siblings = 2 } /** Props for the KeyPointComponent */ interface IKeyPointComponentProps { x: number; y: number; getPreviousX: () => BABYLON.Nullable; getNextX: () => BABYLON.Nullable; 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 var KeyPointComponent: React.FunctionComponent; type GraphProps = { width: number; height: number; }; /** * Main graph area for displaying and editing animation curves * @returns The graph component */ export var Graph: React.FunctionComponent; 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 var FrameBar: React.FunctionComponent; export interface KeyEntry { frame: number; value: number; inTangent?: number; outTangent?: number; lockedTangent: boolean; interpolation?: BABYLON.AnimationKeyInterpolation; } export class CurveData { static readonly SampleRate = 50; keys: KeyEntry[]; animation: BABYLON.Animation; color: string; onDataUpdatedObservable: BABYLON.Observable; property?: string; tangentBuilder?: () => any; setDefaultInTangent?: (keyId: number) => any; setDefaultOutTangent?: (keyId: number) => any; static readonly TangentLength = 50; constructor(color: string, animation: BABYLON.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: BABYLON.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; } 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 var Curve: React.FunctionComponent; /** * Main canvas area containing the graph, playhead, and frame bars * @returns The canvas component */ export var Canvas: React.FunctionComponent; /** * Range selector component - a draggable scrollbar for selecting frame range * @returns The range selector component */ export var RangeSelector: React.FunctionComponent; } declare module INSPECTOR.SharedUIComponents { /** * Copy all styles from a document to another document or shadow root * @param source document to copy styles from * @param target document or shadow root to copy styles to */ export function CopyStyles(source: Document, target: DocumentOrShadowRoot): void; /** * Merges classNames by array of strings or conditions * @param classNames Array of className strings or truthy conditions * @returns A concatenated string, suitable for the className attribute */ export function MergeClassNames(classNames: ClassNameCondition[]): string; /** * className (replicating React type) or a tuple with the second member being any truthy value ["className", true] */ type ClassNameCondition = string | undefined | [string, any]; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class StringTools { private static _SaveAs; private static _Click; /** * Download a string into a file that will be saved locally by the browser * @param document * @param content defines the string to download locally as a file * @param filename */ static DownloadAsFile(document: HTMLDocument, content: string, filename: string): void; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class PropertyChangedEvent { object: any; property: string; value: any; initialValue: any; allowNullValue?: boolean; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Create a popup window * @param title default title for the popup * @param options options for the popup * @returns the parent control of the popup */ export function CreatePopup(title: string, options: Partial<{ onParentControlCreateCallback?: (parentControl: HTMLDivElement) => void; onWindowCreateCallback?: (newWindow: Window) => void; width?: number; height?: number; }>): HTMLDivElement | null; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Class handling undo / redo operations */ export class HistoryStack implements BABYLON.IDisposable { private _historyStack; private _redoStack; private _activeData; private readonly _maxHistoryLength; private _locked; private _dataProvider; private _applyUpdate; /** * Gets or sets a boolean indicating if the stack is enabled */ isEnabled: boolean; /** * Constructor * @param dataProvider defines the data provider function * @param applyUpdate defines the code to execute when undo/redo operation is required */ constructor(dataProvider: () => any, applyUpdate: (data: any) => void); /** * Process key event to handle undo / redo * @param evt defines the keyboard event to process * @returns true if the event was processed */ processKeyEvent(evt: KeyboardEvent): boolean; /** * Resets the stack */ reset(): void; /** * Remove the n-1 element of the stack */ collapseLastTwo(): void; private _generateJSONDiff; private _applyJSONDiff; private _copy; /** * Stores the current state */ storeAsync(): Promise; /** * Checks if there is any data in the history stack */ get hasData(): boolean; /** * Undo the latest operation */ undo(): void; /** * Redo the latest undo operation */ redo(): void; /** * Disposes the stack */ dispose(): void; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export function copyCommandToClipboard(strCommand: string): void; export function getClassNameWithNamespace(obj: any): { className: string; babylonNamespace: string; }; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Used by both particleSystem and alphaBlendModes */ export var CommonBlendModes: { label: string; value: number; }[]; /** * Used to populated the blendMode dropdown in our various tools (Node Editor, Inspector, etc.) * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference * the ParticleSystem.FOO consts explicitly (as the underlying var values are different - they get mapped to engine consts within baseParticleSystem.ts) */ export var BlendModeOptions: { label: string; value: number; }[]; /** * Used to populated the alphaMode dropdown in our various tools (Node Editor, Inspector, etc.) */ export var AlphaModeOptions: { label: string; value: number; }[]; /** * Used to populate the billboardMode dropdown for particle systems. */ export var ParticleBillboardModeOptions: { label: string; value: number; }[]; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Class used to provide lock mechanism */ export class LockObject { /** * Gets or set if the lock is engaged */ lock: boolean; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ITextBlockPropertyGridComponentProps { textBlock: BABYLON.GUI.TextBlock; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class TextBlockPropertyGridComponent extends React.Component { constructor(props: ITextBlockPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IStackPanelPropertyGridComponentProps { stackPanel: BABYLON.GUI.StackPanel; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class StackPanelPropertyGridComponent extends React.Component { constructor(props: IStackPanelPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ISliderPropertyGridComponentProps { slider: BABYLON.GUI.Slider; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class SliderPropertyGridComponent extends React.Component { constructor(props: ISliderPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IScrollViewerPropertyGridComponentProps { scrollViewer: BABYLON.GUI.ScrollViewer; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class ScrollViewerPropertyGridComponent extends React.Component { constructor(props: IScrollViewerPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IRectanglePropertyGridComponentProps { rectangle: BABYLON.GUI.Rectangle; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class RectanglePropertyGridComponent extends React.Component { constructor(props: IRectanglePropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IRadioButtonPropertyGridComponentProps { radioButtons: BABYLON.GUI.RadioButton[]; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class RadioButtonPropertyGridComponent extends React.Component { constructor(props: IRadioButtonPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ILinePropertyGridComponentProps { line: BABYLON.GUI.Line; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class LinePropertyGridComponent extends React.Component { constructor(props: ILinePropertyGridComponentProps); onDashChange(value: string): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IInputTextPropertyGridComponentProps { inputText: BABYLON.GUI.InputText; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class InputTextPropertyGridComponent extends React.Component { constructor(props: IInputTextPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IImagePropertyGridComponentProps { image: BABYLON.GUI.Image; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class ImagePropertyGridComponent extends React.Component { constructor(props: IImagePropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IImageBasedSliderPropertyGridComponentProps { imageBasedSlider: BABYLON.GUI.ImageBasedSlider; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class ImageBasedSliderPropertyGridComponent extends React.Component { constructor(props: IImageBasedSliderPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IGridPropertyGridComponentProps { grid: BABYLON.GUI.Grid; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class GridPropertyGridComponent extends React.Component { constructor(props: IGridPropertyGridComponentProps); renderRows(): import("react/jsx-runtime").JSX.Element[]; renderColumns(): import("react/jsx-runtime").JSX.Element[]; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IEllipsePropertyGridComponentProps { ellipse: BABYLON.GUI.Ellipse; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class EllipsePropertyGridComponent extends React.Component { constructor(props: IEllipsePropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IControlPropertyGridComponentProps { control: BABYLON.GUI.Control; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class ControlPropertyGridComponent extends React.Component { constructor(props: IControlPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ICommonControlPropertyGridComponentProps { controls?: BABYLON.GUI.Control[]; control?: BABYLON.GUI.Control; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class CommonControlPropertyGridComponent extends React.Component { constructor(props: ICommonControlPropertyGridComponentProps); renderGridInformation(control: BABYLON.GUI.Control): import("react/jsx-runtime").JSX.Element | null; render(): import("react/jsx-runtime").JSX.Element | undefined; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IColorPickerPropertyGridComponentProps { colorPicker: BABYLON.GUI.ColorPicker; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class ColorPickerPropertyGridComponent extends React.Component { constructor(props: IColorPickerPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ICheckboxPropertyGridComponentProps { checkbox: BABYLON.GUI.Checkbox; lockObject: INSPECTOR.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class CheckboxPropertyGridComponent extends React.Component { constructor(props: ICheckboxPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Splitter component properties */ export interface ISplitterProps { /** * Unique identifier */ id?: string; /** * Splitter size */ size: number; /** * Minimum size for the controlled element */ minSize?: number; /** * Maximum size for the controlled element */ maxSize?: number; /** * Initial size for the controlled element */ initialSize?: number; /** * Defines the controlled side */ controlledSide: INSPECTOR.SharedUIComponents.ControlledSize; /** * refObject to the splitter element */ refObject?: React.RefObject; } /** * Creates a splitter component * @param props defines the splitter properties * @returns the splitter component */ export var Splitter: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export enum ControlledSize { First = 0, Second = 1 } export enum SplitDirection { Horizontal = 0, Vertical = 1 } /** * Context used to share data with splitters */ export interface ISplitContext { /** * Split direction */ direction: SplitDirection; /** * Function called by splitters to update the offset * @param offset new offet * @param source source element * @param controlledSide defined controlled element */ drag: (offset: number, source: HTMLElement, controlledSide: ControlledSize) => void; /** * Function called by splitters to begin dragging */ beginDrag: () => void; /** * Function called by splitters to end dragging */ endDrag: () => void; /** * Sync sizes for the elements * @param source source element * @param controlledSide defined controlled element * @param size size of the controlled element * @param minSize minimum size for the controlled element * @param maxSize maximum size for the controlled element */ sync: (source: HTMLElement, controlledSide: ControlledSize, size?: number, minSize?: number, maxSize?: number) => void; } export var SplitContext: import("react").Context; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Split container properties */ export interface ISplitContainerProps { /** * Unique identifier */ id?: string; /** * Split direction */ direction: INSPECTOR.SharedUIComponents.SplitDirection; /** * Minimum size for the floating elements */ floatingMinSize?: number; /** * RefObject to the root div element */ containerRef?: React.RefObject; /** * Optional class name */ className?: string; /** * Pointer down * @param event pointer events */ onPointerDown?: (event: React.PointerEvent) => void; /** * Pointer move * @param event pointer events */ onPointerMove?: (event: React.PointerEvent) => void; /** * Pointer up * @param event pointer events */ onPointerUp?: (event: React.PointerEvent) => void; /** * Drop * @param event drag events */ onDrop?: (event: React.DragEvent) => void; /** * Drag over * @param event drag events */ onDragOver?: (event: React.DragEvent) => void; } /** * Creates a split container component * @param props defines the split container properties * @returns the split container component */ export var SplitContainer: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class TypeLedger { static PortDataBuilder: (port: INSPECTOR.SharedUIComponents.NodePort, nodeContainer: INSPECTOR.SharedUIComponents.INodeContainer) => INSPECTOR.SharedUIComponents.IPortData; static NodeDataBuilder: (data: any, nodeContainer: INSPECTOR.SharedUIComponents.INodeContainer) => INSPECTOR.SharedUIComponents.INodeData; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export const IsFramePortData: (variableToCheck: any) => variableToCheck is INSPECTOR.SharedUIComponents.FramePortData; export const RefreshNode: (node: INSPECTOR.SharedUIComponents.GraphNode, visitedNodes?: Set, visitedLinks?: Set, canvas?: INSPECTOR.SharedUIComponents.GraphCanvasComponent) => void; export const BuildFloatUI: (container: HTMLDivElement, document: Document, displayName: string, isInteger: boolean, source: any, propertyName: string, onChange: () => void, min?: number, max?: number, visualPropertiesRefresh?: Array<() => void>, additionalClassName?: string) => void; export function GetListOfAcceptedTypes>(types: T, allValue: number, autoDetectValue: number, port: { acceptedConnectionPointTypes: number[]; excludedConnectionPointTypes: number[]; type: number; }, skips?: number[]): string[]; export function GetConnectionErrorMessage>(sourceType: number, types: T, allValue: number, autoDetectValue: number, port: { acceptedConnectionPointTypes: number[]; excludedConnectionPointTypes: number[]; type: number; }, skips?: number[]): string; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class StateManager { data: any; hostDocument: Document; lockObject: any; modalIsDisplayed: boolean; historyStack: INSPECTOR.SharedUIComponents.HistoryStack; activeNode: BABYLON.Nullable; onSearchBoxRequiredObservable: BABYLON.Observable<{ x: number; y: number; }>; onSelectionChangedObservable: BABYLON.Observable>; onFrameCreatedObservable: BABYLON.Observable; onUpdateRequiredObservable: BABYLON.Observable; onGraphNodeRemovalObservable: BABYLON.Observable; onSelectionBoxMoved: BABYLON.Observable; onCandidateLinkMoved: BABYLON.Observable>; onCandidatePortSelectedObservable: BABYLON.Observable>; onNewNodeCreatedObservable: BABYLON.Observable; onRebuildRequiredObservable: BABYLON.Observable; onNodeMovedObservable: BABYLON.Observable; onErrorMessageDialogRequiredObservable: BABYLON.Observable; onExposePortOnFrameObservable: BABYLON.Observable; onGridSizeChanged: BABYLON.Observable; onNewBlockRequiredObservable: BABYLON.Observable<{ type: string; targetX: number; targetY: number; needRepositioning?: boolean; smartAdd?: boolean; }>; onHighlightNodeObservable: BABYLON.Observable<{ data: any; active: boolean; }>; onPreviewCommandActivated: BABYLON.Observable; exportData: (data: any, frame?: BABYLON.Nullable) => string; isElbowConnectionAllowed: (nodeA: INSPECTOR.SharedUIComponents.FrameNodePort | INSPECTOR.SharedUIComponents.NodePort, nodeB: INSPECTOR.SharedUIComponents.FrameNodePort | INSPECTOR.SharedUIComponents.NodePort) => boolean; isDebugConnectionAllowed: (nodeA: INSPECTOR.SharedUIComponents.FrameNodePort | INSPECTOR.SharedUIComponents.NodePort, nodeB: INSPECTOR.SharedUIComponents.FrameNodePort | INSPECTOR.SharedUIComponents.NodePort) => boolean; applyNodePortDesign: (data: INSPECTOR.SharedUIComponents.IPortData, element: HTMLElement, imgHost: HTMLImageElement, pip: HTMLDivElement) => boolean; getPortColor: (portData: INSPECTOR.SharedUIComponents.IPortData) => string; storeEditorData: (serializationObject: any, frame?: BABYLON.Nullable) => void; getEditorDataMap: () => { [key: number]: number; }; getScene?: () => BABYLON.Scene; createDefaultInputData: (rootData: any, portData: INSPECTOR.SharedUIComponents.IPortData, nodeContainer: INSPECTOR.SharedUIComponents.INodeContainer) => BABYLON.Nullable<{ data: INSPECTOR.SharedUIComponents.INodeData; name: string; }>; private _isRebuildQueued; queueRebuildCommand(): void; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface ISearchBoxComponentProps { stateManager: INSPECTOR.SharedUIComponents.StateManager; } /** * The search box component. */ export class SearchBoxComponent extends React.Component { private _handleEscKey; private _targetX; private _targetY; private _nodes; constructor(props: ISearchBoxComponentProps); hide(): void; onFilterChange(evt: React.ChangeEvent): void; onNewNodeRequested(name: string): void; onKeyDown(evt: React.KeyboardEvent): void; renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element | null; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class PropertyLedger { static DefaultControl: React.ComponentClass; static RegisteredControls: { [key: string]: React.ComponentClass; }; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class NodePort { portData: IPortData; node: INSPECTOR.SharedUIComponents.GraphNode; protected _element: HTMLDivElement; protected _portContainer: HTMLElement; protected _imgHost: HTMLImageElement; protected _pip: HTMLDivElement; protected _stateManager: INSPECTOR.SharedUIComponents.StateManager; protected _portLabelElement: Element; protected _onCandidateLinkMovedObserver: BABYLON.Nullable>>; protected _onSelectionChangedObserver: BABYLON.Nullable>>; protected _exposedOnFrame: boolean; protected _portUIcontainer?: HTMLDivElement; delegatedPort: BABYLON.Nullable; get element(): HTMLDivElement; get container(): HTMLElement; get portName(): string; set portName(newName: string); refreshLabel(): void; get disabled(): boolean; hasLabel(): boolean; get exposedOnFrame(): boolean; set exposedOnFrame(value: boolean); get exposedPortPosition(): number; set exposedPortPosition(value: number); private _isConnectedToNodeOutsideOfFrame; refresh(): void; constructor(portContainer: HTMLElement, portData: IPortData, node: INSPECTOR.SharedUIComponents.GraphNode, stateManager: INSPECTOR.SharedUIComponents.StateManager, portUIcontainer?: HTMLDivElement); remove(): void; dispose(): void; static CreatePortElement(portData: IPortData, node: INSPECTOR.SharedUIComponents.GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable, stateManager: INSPECTOR.SharedUIComponents.StateManager): NodePort; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class NodeLink { private _graphCanvas; private _portA; private _portB?; private _nodeA; private _nodeB?; private _path; private _selectionPath; private _onSelectionChangedObserver; private _isVisible; private _isTargetCandidate; private _gradient; onDisposedObservable: BABYLON.Observable; get isTargetCandidate(): boolean; set isTargetCandidate(value: boolean); get isVisible(): boolean; set isVisible(value: boolean); get portA(): INSPECTOR.SharedUIComponents.FrameNodePort | INSPECTOR.SharedUIComponents.NodePort; get portB(): INSPECTOR.SharedUIComponents.FrameNodePort | INSPECTOR.SharedUIComponents.NodePort | undefined; get nodeA(): INSPECTOR.SharedUIComponents.GraphNode; get nodeB(): INSPECTOR.SharedUIComponents.GraphNode | undefined; intersectsWith(rect: DOMRect): boolean; update(endX?: number, endY?: number, straight?: boolean): void; get path(): SVGPathElement; get selectionPath(): SVGPathElement; constructor(graphCanvas: INSPECTOR.SharedUIComponents.GraphCanvasComponent, portA: INSPECTOR.SharedUIComponents.NodePort, nodeA: INSPECTOR.SharedUIComponents.GraphNode, portB?: INSPECTOR.SharedUIComponents.NodePort, nodeB?: INSPECTOR.SharedUIComponents.GraphNode); onClick(evt: MouseEvent): void; dispose(notify?: boolean): void; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class NodeLedger { static RegisteredNodeNames: string[]; static NameFormatter: (name: string) => string; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class GraphNode { content: INSPECTOR.SharedUIComponents.INodeData; private static _IdGenerator; private _visual; private _headerContainer; private _headerIcon; private _headerIconImg; private _headerCollapseImg; private _header; private _headerCollapse; private _connections; private _optionsContainer; private _inputsContainer; private _outputsContainer; private _content; private _comments; private _executionTime; private _selectionBorder; private _inputPorts; private _outputPorts; private _links; private _x; private _y; private _gridAlignedX; private _gridAlignedY; private _mouseStartPointX; private _mouseStartPointY; private _stateManager; private _onSelectionChangedObserver; private _onSelectionBoxMovedObserver; private _onFrameCreatedObserver; private _onUpdateRequiredObserver; private _onHighlightNodeObserver; private _ownerCanvas; private _displayManager; private _isVisible; private _enclosingFrameId; private _lastClick; _visualPropertiesRefresh: Array<() => void>; addClassToVisual(className: string): void; removeClassFromVisual(className: string): void; get isCollapsed(): boolean; get isVisible(): boolean; set isVisible(value: boolean); private _upateNodePortNames; get outputPorts(): INSPECTOR.SharedUIComponents.NodePort[]; get inputPorts(): INSPECTOR.SharedUIComponents.NodePort[]; get links(): INSPECTOR.SharedUIComponents.NodeLink[]; get gridAlignedX(): number; get gridAlignedY(): number; get x(): number; set x(value: number); get y(): number; set y(value: number); get width(): number; get height(): number; get id(): number; get name(): string; get enclosingFrameId(): number; set enclosingFrameId(value: number); setIsSelected(value: boolean, marqueeSelection: boolean): void; get rootElement(): HTMLDivElement; constructor(content: INSPECTOR.SharedUIComponents.INodeData, stateManager: INSPECTOR.SharedUIComponents.StateManager); isOverlappingFrame(frame: INSPECTOR.SharedUIComponents.GraphFrame): boolean; getPortForPortData(portData: INSPECTOR.SharedUIComponents.IPortData): INSPECTOR.SharedUIComponents.NodePort | null; getPortDataForPortDataContent(data: any): INSPECTOR.SharedUIComponents.IPortData | null; getLinksForPortDataContent(data: any): INSPECTOR.SharedUIComponents.NodeLink[]; getLinksForPortData(portData: INSPECTOR.SharedUIComponents.IPortData): INSPECTOR.SharedUIComponents.NodeLink[]; private _refreshFrames; _refreshLinks(): void; refresh(): void; private _expand; private _searchMiddle; private _onDown; cleanAccumulation(useCeil?: boolean): void; private _onUp; private _onMove; renderProperties(): BABYLON.Nullable; _forceRebuild(source: any, propertyName: string, notifiers?: BABYLON.IEditablePropertyOption["notifiers"]): void; private _isCollapsed; /** * Collapse the node */ collapse(): void; /** * Expand the node */ expand(): void; private _portUICount; private _buildInputPorts; private _removeInputPort; appendVisual(root: HTMLDivElement, owner: INSPECTOR.SharedUIComponents.GraphCanvasComponent): void; dispose(): void; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export enum FramePortPosition { Top = 0, Middle = 1, Bottom = 2 } export class GraphFrame { private readonly _collapsedWidth; private static _FrameCounter; private static _FramePortCounter; private _name; private _color; private _x; private _y; private _gridAlignedX; private _gridAlignedY; private _width; private _height; element: HTMLDivElement; private _borderElement; private _headerElement; private _headerTextElement; private _headerCollapseElement; private _headerCloseElement; private _headerFocusElement; private _commentsElement; private _portContainer; private _outputPortContainer; private _inputPortContainer; private _nodes; private _ownerCanvas; private _mouseStartPointX; private _mouseStartPointY; private _onSelectionChangedObserver; private _onGraphNodeRemovalObserver; private _onExposePortOnFrameObserver; private _onNodeLinkDisposedObservers; private _isCollapsed; private _frameInPorts; private _frameOutPorts; private _controlledPorts; private _exposedInPorts; private _exposedOutPorts; private _id; private _comments; private _frameIsResizing; private _resizingDirection; private _minFrameHeight; private _minFrameWidth; private _mouseXLimit; onExpandStateChanged: BABYLON.Observable; private readonly _closeSVG; private readonly _expandSVG; private readonly _collapseSVG; private readonly _focusSVG; get id(): number; get isCollapsed(): boolean; private _createInputPort; private _markFramePortPositions; private _createFramePorts; private _removePortFromExposedWithNode; private _removePortFromExposedWithLink; private _createInputPorts; private _createOutputPorts; redrawFramePorts(): void; set isCollapsed(value: boolean); get nodes(): INSPECTOR.SharedUIComponents.GraphNode[]; get ports(): INSPECTOR.SharedUIComponents.FrameNodePort[]; get name(): string; set name(value: string); get color(): BABYLON.Color3; set color(value: BABYLON.Color3); get x(): number; set x(value: number); get y(): number; set y(value: number); get width(): number; set width(value: number); get height(): number; set height(value: number); get comments(): string; set comments(comments: string); constructor(candidate: BABYLON.Nullable, canvas: INSPECTOR.SharedUIComponents.GraphCanvasComponent, doNotCaptureNodes?: boolean); private _isFocused; /** * Enter/leave focus mode */ switchFocusMode(): void; refresh(): void; addNode(node: INSPECTOR.SharedUIComponents.GraphNode): void; removeNode(node: INSPECTOR.SharedUIComponents.GraphNode): void; syncNode(node: INSPECTOR.SharedUIComponents.GraphNode): void; cleanAccumulation(): void; private _onDown; move(newX: number, newY: number, align?: boolean): void; private _onUp; _moveFrame(offsetX: number, offsetY: number): void; private _onMove; moveFramePortUp(nodePort: INSPECTOR.SharedUIComponents.FrameNodePort): void; private _movePortUp; moveFramePortDown(nodePort: INSPECTOR.SharedUIComponents.FrameNodePort): void; private _movePortDown; private _initResizing; private _cleanUpResizing; private _updateMinHeightWithComments; private _isResizingTop; private _isResizingRight; private _isResizingBottom; private _isResizingLeft; private _onRightHandlePointerDown; private _onRightHandlePointerMove; private _moveRightHandle; private _onRightHandlePointerUp; private _onBottomHandlePointerDown; private _onBottomHandlePointerMove; private _moveBottomHandle; private _onBottomHandlePointerUp; private _onLeftHandlePointerDown; private _onLeftHandlePointerMove; private _moveLeftHandle; private _onLeftHandlePointerUp; private _onTopHandlePointerDown; private _onTopHandlePointerMove; private _moveTopHandle; private _onTopHandlePointerUp; private _onTopRightHandlePointerDown; private _onTopRightHandlePointerMove; private _moveTopRightHandle; private _onTopRightHandlePointerUp; private _onBottomRightHandlePointerDown; private _onBottomRightHandlePointerMove; private _moveBottomRightHandle; private _onBottomRightHandlePointerUp; private _onBottomLeftHandlePointerDown; private _onBottomLeftHandlePointerMove; private _moveBottomLeftHandle; private _onBottomLeftHandlePointerUp; private _onTopLeftHandlePointerDown; private _onTopLeftHandlePointerMove; private _moveTopLeftHandle; private _onTopLeftHandlePointerUp; private _expandLeft; private _expandTop; private _expandRight; private _expandBottom; dispose(): void; private _serializePortData; serialize(saveCollapsedState: boolean): INSPECTOR.SharedUIComponents.IFrameData; export(): void; adjustPorts(): void; static Parse(serializationData: INSPECTOR.SharedUIComponents.IFrameData, canvas: INSPECTOR.SharedUIComponents.GraphCanvasComponent, map?: { [key: number]: number; }): GraphFrame; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IGraphCanvasComponentProps { stateManager: INSPECTOR.SharedUIComponents.StateManager; onEmitNewNode: (nodeData: INSPECTOR.SharedUIComponents.INodeData) => INSPECTOR.SharedUIComponents.GraphNode; } export class GraphCanvasComponent extends React.Component implements INSPECTOR.SharedUIComponents.INodeContainer { static readonly NodeWidth = 100; private readonly _minZoom; private readonly _maxZoom; private _hostCanvasRef; private _hostCanvas; private _graphCanvasRef; private _graphCanvas; private _selectionContainerRef; private _selectionContainer; private _frameContainerRef; private _frameContainer; private _svgCanvasRef; private _svgCanvas; private _rootContainerRef; private _rootContainer; private _nodes; private _links; private _mouseStartPointX; private _mouseStartPointY; private _dropPointX; private _dropPointY; private _selectionStartX; private _selectionStartY; private _candidateLinkedHasMoved; private _x; private _y; private _lastx; private _lasty; private _zoom; private _selectedNodes; private _selectedLink; private _selectedPort; private _candidateLink; private _candidatePort; private _gridSize; private _selectionBox; private _selectedFrames; private _frameCandidate; private _frames; private _nodeDataContentList; private _altKeyIsPressed; private _shiftKeyIsPressed; private _multiKeyIsPressed; private _oldY; _frameIsMoving: boolean; _isLoading: boolean; _targetLinkCandidate: BABYLON.Nullable; private _isCopyingOrPasting; private _copiedNodes; private _copiedFrames; get gridSize(): number; set gridSize(value: number); get stateManager(): INSPECTOR.SharedUIComponents.StateManager; get nodes(): INSPECTOR.SharedUIComponents.GraphNode[]; get links(): INSPECTOR.SharedUIComponents.NodeLink[]; get frames(): INSPECTOR.SharedUIComponents.GraphFrame[]; get zoom(): number; set zoom(value: number); get x(): number; set x(value: number); get y(): number; set y(value: number); get selectedNodes(): INSPECTOR.SharedUIComponents.GraphNode[]; get selectedLink(): BABYLON.Nullable; get selectedFrames(): INSPECTOR.SharedUIComponents.GraphFrame[]; get selectedPort(): BABYLON.Nullable; get canvasContainer(): HTMLDivElement; get hostCanvas(): HTMLDivElement; get svgCanvas(): HTMLElement; get selectionContainer(): HTMLDivElement; get frameContainer(): HTMLDivElement; private _selectedFrameAndNodesConflict; constructor(props: IGraphCanvasComponentProps); populateConnectedEntriesBeforeRemoval(item: INSPECTOR.SharedUIComponents.GraphNode, items: INSPECTOR.SharedUIComponents.GraphNode[], inputs: BABYLON.Nullable[], outputs: BABYLON.Nullable[]): void; automaticRewire(inputs: BABYLON.Nullable[], outputs: BABYLON.Nullable[], firstOnly?: boolean): void; smartAddOverLink(node: INSPECTOR.SharedUIComponents.GraphNode, link: INSPECTOR.SharedUIComponents.NodeLink): void; smartAddOverNode(node: INSPECTOR.SharedUIComponents.GraphNode, source: INSPECTOR.SharedUIComponents.GraphNode): void; deleteSelection(onRemove: (nodeData: INSPECTOR.SharedUIComponents.INodeData) => void, autoReconnect?: boolean): void; handleKeyDownAsync(evt: KeyboardEvent, onRemove: (nodeData: INSPECTOR.SharedUIComponents.INodeData) => void, mouseLocationX: number, mouseLocationY: number, dataGenerator: (nodeData: INSPECTOR.SharedUIComponents.INodeData) => Promise>, rootElement: HTMLDivElement): Promise; pasteSelectionAsync(copiedNodes: INSPECTOR.SharedUIComponents.GraphNode[], currentX: number, currentY: number, dataGenerator: (nodeData: INSPECTOR.SharedUIComponents.INodeData) => Promise>, selectNew?: boolean): Promise; reconnectNewNodes(nodeIndex: number, newNodes: INSPECTOR.SharedUIComponents.GraphNode[], sourceNodes: INSPECTOR.SharedUIComponents.GraphNode[], done: boolean[]): void; getCachedData(): any[]; removeDataFromCache(data: any): void; createNodeFromObject(nodeData: INSPECTOR.SharedUIComponents.INodeData, onNodeCreated: (data: any) => void, recursion?: boolean): INSPECTOR.SharedUIComponents.GraphNode; getGridPosition(position: number, useCeil?: boolean): number; getGridPositionCeil(position: number): number; updateTransform(): void; onKeyUp(): void; findNodeFromData(data: any): INSPECTOR.SharedUIComponents.GraphNode; reset(): void; connectPorts(pointA: INSPECTOR.SharedUIComponents.IPortData, pointB: INSPECTOR.SharedUIComponents.IPortData): void; removeLink(link: INSPECTOR.SharedUIComponents.NodeLink): void; appendNode(nodeData: INSPECTOR.SharedUIComponents.INodeData): INSPECTOR.SharedUIComponents.GraphNode; distributeGraph(): void; componentDidMount(): void; onMove(evt: React.PointerEvent): void; onDown(evt: React.PointerEvent): void; onUp(evt: React.PointerEvent): void; onWheel(evt: React.WheelEvent): void; zoomToFit(): void; processCandidatePort(): void; connectNodes(nodeA: INSPECTOR.SharedUIComponents.GraphNode, pointA: INSPECTOR.SharedUIComponents.IPortData, nodeB: INSPECTOR.SharedUIComponents.GraphNode, pointB: INSPECTOR.SharedUIComponents.IPortData): void; drop(newNode: INSPECTOR.SharedUIComponents.GraphNode, targetX: number, targetY: number, offsetX: number, offsetY: number): void; processEditorData(editorData: INSPECTOR.SharedUIComponents.IEditorData): void; reOrganize(editorData?: BABYLON.Nullable, isImportingAFrame?: boolean): void; addFrame(frameData: INSPECTOR.SharedUIComponents.IFrameData): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class FrameNodePort extends INSPECTOR.SharedUIComponents.NodePort { portData: INSPECTOR.SharedUIComponents.IPortData; node: INSPECTOR.SharedUIComponents.GraphNode; private _parentFrameId; private _isInput; private _framePortPosition; private _framePortId; private _onFramePortPositionChangedObservable; get parentFrameId(): number; get onFramePortPositionChangedObservable(): BABYLON.Observable; get isInput(): boolean; get framePortId(): number; get framePortPosition(): INSPECTOR.SharedUIComponents.FramePortPosition; set framePortPosition(position: INSPECTOR.SharedUIComponents.FramePortPosition); constructor(portContainer: HTMLElement, portData: INSPECTOR.SharedUIComponents.IPortData, node: INSPECTOR.SharedUIComponents.GraphNode, stateManager: INSPECTOR.SharedUIComponents.StateManager, isInput: boolean, framePortId: number, parentFrameId: number); static CreateFrameNodePortElement(portData: INSPECTOR.SharedUIComponents.IPortData, node: INSPECTOR.SharedUIComponents.GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable, stateManager: INSPECTOR.SharedUIComponents.StateManager, isInput: boolean, framePortId: number, parentFrameId: number): FrameNodePort; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export class DisplayLedger { static RegisteredControls: { [key: string]: any; }; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Function used to force a rebuild of the node system * @param source source object * @param stateManager defines the state manager to use * @param propertyName name of the property that has been changed * @param notifiers list of notifiers to use * @param engageActiveRefresh if active refresh should be engaged */ export function ForceRebuild(source: any, stateManager: INSPECTOR.SharedUIComponents.StateManager, propertyName: string, notifiers?: BABYLON.IEditablePropertyOption["notifiers"], engageActiveRefresh?: boolean): void; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type FramePortData = { frame: INSPECTOR.SharedUIComponents.GraphFrame; port: INSPECTOR.SharedUIComponents.FrameNodePort; }; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface ISelectionChangedOptions { selection: BABYLON.Nullable; forceKeepSelection?: boolean; marqueeSelection?: boolean; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IPropertyComponentProps { stateManager: INSPECTOR.SharedUIComponents.StateManager; nodeData: INSPECTOR.SharedUIComponents.INodeData; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export enum PortDataDirection { /** Input */ Input = 0, /** Output */ Output = 1 } export enum PortDirectValueTypes { Float = 0, Int = 1 } export interface IPortDirectValueDefinition { /** * Gets the source object */ source: any; /** * Gets the property name used to store the value */ propertyName: string; /** * Gets or sets the min value accepted for this point if nothing is connected */ valueMin: BABYLON.Nullable; /** * Gets or sets the max value accepted for this point if nothing is connected */ valueMax: BABYLON.Nullable; /** * Gets or sets the type of the value */ valueType: PortDirectValueTypes; } export interface IPortData { data: any; name: string; internalName: string; isExposedOnFrame: boolean; exposedPortPosition: number; isConnected: boolean; isInactive: boolean; direction: PortDataDirection; ownerData: any; connectedPort: BABYLON.Nullable; needDualDirectionValidation: boolean; hasEndpoints: boolean; endpoints: BABYLON.Nullable; directValueDefinition?: IPortDirectValueDefinition; updateDisplayName: (newName: string) => void; canConnectTo: (port: IPortData) => boolean; connectTo: (port: IPortData) => void; disconnectFrom: (port: IPortData) => void; checkCompatibilityState(port: IPortData): number; getCompatibilityIssueMessage(issue: number, targetNode: INSPECTOR.SharedUIComponents.GraphNode, targetPort: IPortData): string; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface INodeLocationInfo { blockId: number; x: number; y: number; isCollapsed: boolean; } export interface IFrameData { x: number; y: number; width: number; height: number; color: number[]; name: string; isCollapsed: boolean; blocks: number[]; comments: string; } export interface IEditorData { locations: INodeLocationInfo[]; x: number; y: number; zoom: number; frames?: IFrameData[]; map?: { [key: number]: number; }; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface INodeData { data: any; name: string; uniqueId: number; isInput: boolean; comments: string; executionTime?: number; refreshCallback?: () => void; prepareHeaderIcon: (iconDiv: HTMLDivElement, img: HTMLImageElement) => void; getClassName: () => string; dispose: () => void; getPortByName: (name: string) => BABYLON.Nullable; inputs: INSPECTOR.SharedUIComponents.IPortData[]; outputs: INSPECTOR.SharedUIComponents.IPortData[]; invisibleEndpoints?: BABYLON.Nullable; isConnectedToOutput?: () => boolean; isActive?: boolean; setIsActive?: (value: boolean) => void; canBeActivated?: boolean; onInputCountChanged?: () => void; onInputRemoved?: (index: number) => void; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface INodeContainer { nodes: INSPECTOR.SharedUIComponents.GraphNode[]; appendNode(data: INSPECTOR.SharedUIComponents.INodeData): INSPECTOR.SharedUIComponents.GraphNode; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface VisualContentDescription { [key: string]: HTMLElement; } export interface IDisplayManager { getHeaderClass(data: INSPECTOR.SharedUIComponents.INodeData): string; shouldDisplayPortLabels(data: INSPECTOR.SharedUIComponents.IPortData): boolean; updatePreviewContent(data: INSPECTOR.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; updateFullVisualContent?(data: INSPECTOR.SharedUIComponents.INodeData, visualContent: VisualContentDescription): void; getBackgroundColor(data: INSPECTOR.SharedUIComponents.INodeData): string; getHeaderText(data: INSPECTOR.SharedUIComponents.INodeData): string; onSelectionChanged?(data: INSPECTOR.SharedUIComponents.INodeData, selectedData: BABYLON.Nullable, manager: INSPECTOR.SharedUIComponents.StateManager): void; onDispose?(nodeData: INSPECTOR.SharedUIComponents.INodeData, manager: INSPECTOR.SharedUIComponents.StateManager): void; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IVector4LineComponentProps { label: string; target?: any; propertyName?: string; step?: number; onChange?: (newvalue: BABYLON.Vector4) => void; useEuler?: boolean; onPropertyChangedObservable?: BABYLON.Observable; icon?: string; iconLabel?: string; value?: BABYLON.Vector4; lockObject: INSPECTOR.SharedUIComponents.LockObject; } export class Vector4LineComponent extends React.Component { static defaultProps: { step: number; }; private _localChange; constructor(props: IVector4LineComponentProps); getCurrentValue(): any; shouldComponentUpdate(nextProps: IVector4LineComponentProps, nextState: { isExpanded: boolean; value: BABYLON.Vector4; }): boolean; switchExpandState(): void; raiseOnPropertyChanged(previousValue: BABYLON.Vector4): void; updateVector4(): void; updateStateX(value: number): void; updateStateY(value: number): void; updateStateZ(value: number): void; updateStateW(value: number): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IVector3LineComponentProps { label: string; target?: any; propertyName?: string; step?: number; onChange?: (newvalue: BABYLON.Vector3) => void; useEuler?: boolean; onPropertyChangedObservable?: BABYLON.Observable; noSlider?: boolean; icon?: string; iconLabel?: string; lockObject: INSPECTOR.SharedUIComponents.LockObject; directValue?: BABYLON.Vector3; additionalCommands?: JSX.Element[]; } export class Vector3LineComponent extends React.Component { static defaultProps: { step: number; }; private _localChange; constructor(props: IVector3LineComponentProps); getCurrentValue(): any; shouldComponentUpdate(nextProps: IVector3LineComponentProps, nextState: { isExpanded: boolean; value: BABYLON.Vector3; }): boolean; switchExpandState(): void; raiseOnPropertyChanged(previousValue: BABYLON.Vector3): void; updateVector3(): void; updateStateX(value: number): void; updateStateY(value: number): void; updateStateZ(value: number): void; onCopyClick(): string; renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IVector2LineComponentProps { label: string; target: any; propertyName: string; step?: number; onChange?: (newvalue: BABYLON.Vector2) => void; onPropertyChangedObservable?: BABYLON.Observable; icon?: string; iconLabel?: string; lockObject: INSPECTOR.SharedUIComponents.LockObject; } export class Vector2LineComponent extends React.Component { static defaultProps: { step: number; }; private _localChange; constructor(props: IVector2LineComponentProps); shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: { isExpanded: boolean; value: BABYLON.Vector2; }): boolean; switchExpandState(): void; raiseOnPropertyChanged(previousValue: BABYLON.Vector2): void; updateStateX(value: number): void; updateStateY(value: number): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IValueLineComponentProps { label: string; value: number; color?: string; fractionDigits?: number; units?: string; icon?: string; iconLabel?: string; } export class ValueLineComponent extends React.Component { constructor(props: IValueLineComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IUnitButtonProps { unit: string; locked?: boolean; onClick?: (unit: string) => void; } export function UnitButton(props: IUnitButtonProps): import("react/jsx-runtime").JSX.Element; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ITextureButtonLineProps { label: string; scene: BABYLON.Scene; onClick: (file: File) => void; onLink: (texture: BABYLON.BaseTexture) => void; accept: string; } interface ITextureButtonLineState { isOpen: boolean; } export class TextureButtonLine extends React.Component { private static _IdGenerator; private _id; private _uploadInputRef; constructor(props: ITextureButtonLineProps); onChange(evt: any): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ITextLineComponentProps { label?: string; value?: string; color?: string; underline?: boolean; onLink?: () => void; url?: string; ignoreValue?: boolean; additionalClass?: string; icon?: string; iconLabel?: string; tooltip?: string; onCopy?: true | (() => string); } export class TextLineComponent extends React.Component { constructor(props: ITextLineComponentProps); onLink(): void; copyFn(): (() => string) | undefined; renderContent(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element | null; renderOriginal(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element; renderFluent(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface ITextInputLineComponentProps { label?: string; lockObject?: INSPECTOR.SharedUIComponents.LockObject; target?: any; propertyName?: string; value?: string; onChange?: (value: string) => void; onPropertyChangedObservable?: BABYLON.Observable; icon?: string; iconLabel?: string; noUnderline?: boolean; numbersOnly?: boolean; delayInput?: boolean; arrows?: boolean; arrowsIncrement?: (amount: number) => void; step?: number; numeric?: boolean; roundValues?: boolean; min?: number; max?: number; placeholder?: string; unit?: React.ReactNode; validator?: (value: string) => boolean; multilines?: boolean; throttlePropertyChangedNotification?: boolean; throttlePropertyChangedNotificationDelay?: number; disabled?: boolean; } export class TextInputLineComponent extends React.Component { private _localChange; constructor(props: ITextInputLineComponentProps); componentWillUnmount(): void; shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: { value: string; dragging: boolean; }): boolean; raiseOnPropertyChanged(newValue: string, previousValue: string): void; getCurrentNumericValue(value: string): number; updateValue(value: string, valueToValidate?: string): void; incrementValue(amount: number): void; onKeyDown(event: React.KeyboardEvent): void; renderFluent(value: string, placeholder: string, step: number): import("react/jsx-runtime").JSX.Element; renderOriginal(value: string, placeholder: string, step: number): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export const conflictingValuesPlaceholder = "\u2014"; /** * * @param targets a list of selected targets * @param onPropertyChangedObservable * @param getProperty * @returns a proxy object that can be passed as a target into the input */ export function makeTargetsProxy(targets: Type[], onPropertyChangedObservable?: BABYLON.Observable, getProperty?: (target: Type, property: keyof Type) => any): any; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ISliderLineComponentProps { label: string; target?: any; propertyName?: string; minimum: number; maximum: number; step: number; directValue?: number; useEuler?: boolean; onChange?: (value: number) => void; onInput?: (value: number) => void; onPropertyChangedObservable?: BABYLON.Observable; decimalCount?: number; margin?: boolean; icon?: string; iconLabel?: string; lockObject: INSPECTOR.SharedUIComponents.LockObject; unit?: React.ReactNode; allowOverflow?: boolean; } export class SliderLineComponent extends React.Component { private _localChange; constructor(props: ISliderLineComponentProps); shouldComponentUpdate(nextProps: ISliderLineComponentProps, nextState: { value: number; }): boolean; onChange(newValueString: any): void; onInput(newValueString: any): void; prepareDataToRead(value: number): number; onCopyClick(): void; renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IRadioButtonLineComponentProps { onSelectionChangedObservable: BABYLON.Observable; label: string; isSelected: () => boolean; onSelect: () => void; icon?: string; iconLabel?: string; } export class RadioButtonLineComponent extends React.Component { private _onSelectionChangedObserver; constructor(props: IRadioButtonLineComponentProps); componentDidMount(): void; componentWillUnmount(): void; onChange(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export var Null_Value: number; export interface IOptionsLineProps { label: string; target: any; propertyName: string; options: readonly BABYLON.IInspectableOptions[]; noDirectUpdate?: boolean; onSelect?: (value: number | string) => void; extractValue?: (target: any) => number | string; onPropertyChangedObservable?: BABYLON.Observable; allowNullValue?: boolean; icon?: string; iconLabel?: string; className?: string; valuesAreStrings?: boolean; defaultIfNull?: number; } export class OptionsLine extends React.Component { private _localChange; private _remapValueIn; private _remapValueOut; private _getValue; constructor(props: IOptionsLineProps); shouldComponentUpdate(nextProps: IOptionsLineProps, nextState: { value: number; }): boolean; raiseOnPropertyChanged(newValue: number, previousValue: number): void; setValue(value: string | number): void; updateValue(valueString: string): void; onCopyClickStr(): string; private _renderFluent; private _renderOriginal; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface INumericInputProps { label: string; labelTooltip?: string; value: number; step?: number; onChange: (value: number) => void; precision?: number; icon?: string; iconLabel?: string; lockObject: INSPECTOR.SharedUIComponents.LockObject; } export class NumericInput extends React.Component { static defaultProps: { step: number; }; private _localChange; constructor(props: INumericInputProps); componentWillUnmount(): void; shouldComponentUpdate(nextProps: INumericInputProps, nextState: { value: string; }): boolean; updateValue(valueString: string): void; onBlur(): void; incrementValue(amount: number): void; onKeyDown(evt: React.KeyboardEvent): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IMessageLineComponentProps { text: string; color?: string; icon?: any; } export class MessageLineComponent extends React.Component { constructor(props: IMessageLineComponentProps); renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IMatrixLineComponentProps { label: string; target: any; propertyName: string; step?: number; onChange?: (newValue: BABYLON.Matrix) => void; onModeChange?: (mode: number) => void; onPropertyChangedObservable?: BABYLON.Observable; mode?: number; lockObject: INSPECTOR.SharedUIComponents.LockObject; } export class MatrixLineComponent extends React.Component { private _localChange; constructor(props: IMatrixLineComponentProps); shouldComponentUpdate(nextProps: IMatrixLineComponentProps, nextState: { value: BABYLON.Matrix; mode: number; angle: number; }): boolean; raiseOnPropertyChanged(previousValue: BABYLON.Vector3): void; updateMatrix(): void; updateRow(value: BABYLON.Vector4, row: number): void; updateBasedOnMode(value: number): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ILinkButtonComponentProps { label: string; buttonLabel: string; url?: string; onClick: () => void; icon?: any; onIconClick?: () => void; } export class LinkButtonComponent extends React.Component { constructor(props: ILinkButtonComponentProps); onLink(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ILineWithFileButtonComponentProps { title: string; closed?: boolean; multiple?: boolean; label: string; iconImage: any; onIconClick: (file: File) => void; accept: string; uploadName?: string; } export class LineWithFileButtonComponent extends React.Component { private _uploadRef; constructor(props: ILineWithFileButtonComponentProps); onChange(evt: any): void; switchExpandedState(): void; renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ILineContainerComponentProps { selection?: INSPECTOR.SharedUIComponents.ISelectedLineContainer; title: string; children: any[] | any; closed?: boolean; } export class LineContainerComponent extends React.Component { constructor(props: ILineContainerComponentProps); switchExpandedState(): void; renderHeader(): import("react/jsx-runtime").JSX.Element; componentDidMount(): void; renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IInputArrowsComponentProps { incrementValue: (amount: number) => void; setDragging: (dragging: boolean) => void; } export class InputArrowsComponent extends React.Component { private _arrowsRef; private _drag; private _releaseListener; private _lockChangeListener; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IIndentedTextLineComponentProps { value?: string; color?: string; underline?: boolean; onLink?: () => void; url?: string; additionalClass?: string; } export class IndentedTextLineComponent extends React.Component { constructor(props: IIndentedTextLineComponentProps); onLink(): void; renderContent(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IIconComponentProps { icon: string; label?: string; } export class IconComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface ISelectedLineContainer { selectedLineContainerTitles: Array; selectedLineContainerTitlesNoFocus: Array; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IHexLineComponentProps { label: string; target: any; propertyName: string; lockObject?: INSPECTOR.SharedUIComponents.LockObject; onChange?: (newValue: number) => void; isInteger?: boolean; replaySourceReplacement?: string; onPropertyChangedObservable?: BABYLON.Observable; additionalClass?: string; step?: string; digits?: number; useEuler?: boolean; min?: number; icon?: string; iconLabel?: string; } export class HexLineComponent extends React.Component { private _localChange; private _store; private _propertyChange; constructor(props: IHexLineComponentProps); componentWillUnmount(): void; shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: { value: string; }): boolean; raiseOnPropertyChanged(newValue: number, previousValue: number): void; convertToHexString(valueString: string): string; updateValue(valueString: string, raisePropertyChanged: boolean): void; lock(): void; unlock(): void; onCopyClick(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IFloatLineComponentProps { label: string; target: any; propertyName: string; lockObject: INSPECTOR.SharedUIComponents.LockObject; onChange?: (newValue: number) => void; isInteger?: boolean; onPropertyChangedObservable?: BABYLON.Observable; additionalClass?: string; step?: string; digits?: number; useEuler?: boolean; min?: number; max?: number; smallUI?: boolean; onEnter?: (newValue: number) => void; icon?: string; iconLabel?: string; defaultValue?: number; arrows?: boolean; unit?: React.ReactNode; onDragStart?: (newValue: number) => void; onDragStop?: (newValue: number) => void; disabled?: boolean; } export class FloatLineComponent extends React.Component { private _localChange; private _store; constructor(props: IFloatLineComponentProps); componentWillUnmount(): void; getValueString(value: any, props: IFloatLineComponentProps): string; shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: { value: string; dragging: boolean; }): boolean; raiseOnPropertyChanged(newValue: number, previousValue: number): void; updateValue(valueString: string): void; lock(): void; unlock(): void; incrementValue(amount: number, processStep?: boolean): void; onKeyDown(event: React.KeyboardEvent): void; onCopyClick(): void; renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IFileMultipleButtonLineComponentProps { label: string; onClick: (event: any) => void; accept: string; icon?: string; iconLabel?: string; } export class FileMultipleButtonLineComponent extends React.Component { private static _IdGenerator; private _id; private _uploadInputRef; constructor(props: IFileMultipleButtonLineComponentProps); onChange(evt: any): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface IFileButtonLineProps { label: string; onClick: (file: File) => void; accept: string; icon?: string; iconLabel?: string; } export class FileButtonLine extends React.Component { private static _IdGenerator; private _id; private _uploadInputRef; constructor(props: IFileButtonLineProps); onChange(evt: any): void; renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type DraggableLineWithButtonProps = { format: string; data: string; tooltip: string; iconImage: any; onIconClick: (value: string) => void; iconTitle: string; lenSuffixToRemove?: number; }; export var DraggableLineWithButtonComponent: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type DraggableLineComponentProps = Omit; export var DraggableLineComponent: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IColorPickerLineProps { value: BABYLON.Color4 | BABYLON.Color3; linearHint?: boolean; onColorChanged: (newOne: string) => void; icon?: string; iconLabel?: string; shouldPopRight?: boolean; lockObject?: INSPECTOR.SharedUIComponents.LockObject; } interface IColorPickerComponentState { pickerEnabled: boolean; color: BABYLON.Color3 | BABYLON.Color4; hex: string; } export class ColorPickerLine extends React.Component { private _floatRef; private _floatHostRef; constructor(props: IColorPickerLineProps); syncPositions(): void; shouldComponentUpdate(nextProps: IColorPickerLineProps, nextState: IColorPickerComponentState): boolean; getHexString(props?: Readonly): string; componentDidUpdate(): void; componentDidMount(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IColorLineProps { label: string; target?: any; propertyName: string; onPropertyChangedObservable?: BABYLON.Observable; onChange?: () => void; isLinear?: boolean; icon?: string; iconLabel?: string; disableAlpha?: boolean; lockObject: INSPECTOR.SharedUIComponents.LockObject; } interface IColorLineComponentState { isExpanded: boolean; color: BABYLON.Color4; } export class ColorLine extends React.Component { constructor(props: IColorLineProps); shouldComponentUpdate(nextProps: IColorLineProps, nextState: IColorLineComponentState): boolean; getValue(props?: Readonly): BABYLON.Color4; setColorFromString(colorString: string): void; setColor(newColor: BABYLON.Color4): void; switchExpandState(): void; updateStateR(value: number): void; updateStateG(value: number): void; updateStateB(value: number): void; updateStateA(value: number): void; private _convertToColor; private _toColor3; onCopyClick(): void; renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IColor4LineComponentProps { label: string; target?: any; propertyName: string; onPropertyChangedObservable?: BABYLON.Observable; onChange?: () => void; isLinear?: boolean; icon?: string; iconLabel?: string; lockObject: INSPECTOR.SharedUIComponents.LockObject; } export class Color4LineComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IColor3LineComponentProps { label: string; target: any; propertyName: string; onPropertyChangedObservable?: BABYLON.Observable; isLinear?: boolean; icon?: string; lockObject: INSPECTOR.SharedUIComponents.LockObject; iconLabel?: string; onChange?: () => void; } export class Color3LineComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface ICheckBoxLineComponentProps { label?: string; target?: any; propertyName?: string; isSelected?: boolean | (() => boolean); onSelect?: (value: boolean) => void; onValueChanged?: () => void; onPropertyChangedObservable?: BABYLON.Observable; disabled?: boolean; icon?: string; iconLabel?: string; faIcons?: { enabled: any; disabled: any; }; large?: boolean; } export class CheckBoxLineComponent extends React.Component { private _localChange; constructor(props: ICheckBoxLineComponentProps); shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; isConflict: boolean; }): boolean; onChange(): void; onCopyClick(): void; renderOriginal(): import("react/jsx-runtime").JSX.Element; renderFluent(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IButtonLineComponentProps { label: string; onClick: () => void; icon?: string; iconLabel?: string; isDisabled?: boolean; } export class ButtonLineComponent extends React.Component { constructor(props: IButtonLineComponentProps); renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IBooleanLineComponentProps { label: string; value: boolean; icon?: string; iconLabel?: string; } export class BooleanLineComponent extends React.Component { constructor(props: IBooleanLineComponentProps); renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export var MeshIcon: import("@fluentui/react-icons").FluentIcon; export var TranslateIcon: import("@fluentui/react-icons").FluentIcon; export var MaterialIcon: import("@fluentui/react-icons").FluentIcon; export var FlatTangentIcon: import("@fluentui/react-icons").FluentIcon; export var LinearTangentIcon: import("@fluentui/react-icons").FluentIcon; export var BreakTangentIcon: import("@fluentui/react-icons").FluentIcon; export var UnifyTangentIcon: import("@fluentui/react-icons").FluentIcon; export var StepTangentIcon: import("@fluentui/react-icons").FluentIcon; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export var TokenMap: { px2: string; px4: string; px6: string; px8: string; px10: string; px12: string; px14: string; px16: string; px20: string; px24: string; px28: string; px32: string; px36: string; px40: string; }; export var CustomTokens: { inputWidth: string; lineHeight: string; lineHeightSmall: string; dividerGap: string; dividerGapSmall: string; labelMinWidth: string; sliderMinWidth: string; sliderMaxWidth: string; rightAlignOffset: string; }; export var UniformWidthStyling: any; export const useInputStyles: () => Record<"input" | "invalid" | "container" | "inputSlot", string>; export function HandleOnBlur(event: React.FocusEvent): void; export function HandleKeyDown(event: React.KeyboardEvent): void; /** * Fluent's CalculatePrecision function * https://github.com/microsoft/fluentui/blob/dcbf775d37938eacffa37922fc0b43a3cdd5753f/packages/utilities/src/math.ts#L91C1 * * Calculates a number's precision based on the number of trailing * zeros if the number does not have a decimal indicated by a negative * precision. Otherwise, it calculates the number of digits after * the decimal point indicated by a positive precision. * * @param value - the value to determine the precision of * @returns the calculated precision */ export function CalculatePrecision(value: number): number; export function ValidateColorHex(val: string): boolean; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type UploadButtonProps = Omit & { /** * Callback when files are selected */ onUpload: (files: FileList) => void; /** * File types to accept (e.g., ".jpg, .png, .dds") */ accept?: string; /** * Text label to display on the button (optional) */ label?: string; }; /** * A button that triggers a file upload dialog. * Combines a Button with a hidden file input. * @param props UploadButtonProps * @returns UploadButton component */ export var UploadButton: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type TooltipProps = { content?: BABYLON.Nullable; children: React.ReactElement; }; export var Tooltip: import("react").ForwardRefExoticComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type ToggleButtonProps = Omit & { value: boolean; checkedIcon: any; uncheckedIcon?: any; onChange: (checked: boolean) => void; }; /** * Toggles between two states using a button with icons. * If no disabledIcon is provided, the button will toggle between visual enabled/disabled states without an icon change * * @param props * @returns */ export var ToggleButton: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type ToastContextType = { showToast: (message: string) => void; }; export var ToastProvider: React.FunctionComponent; /** * Hook to show toast notifications. * @returns Object with showToast function that accepts a message string */ export function useToast(): ToastContextType; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type TextureSelectorProps = INSPECTOR.SharedUIComponents.PrimitiveProps> & { /** * The scene to get textures from */ scene: BABYLON.Scene; /** * File types to accept for upload */ accept?: string; /** * Whether to only allow cube textures */ cubeOnly?: boolean; } & Omit, "getEntities" | "getName">; /** * A primitive component with a ComboBox for selecting from existing scene textures * and a button for uploading new texture files. * @param props TextureSelectorProps * @returns TextureSelector component */ export var TextureSelector: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type TextareaProps = INSPECTOR.SharedUIComponents.PrimitiveProps & { placeholder?: string; }; /** * This is a texarea box that stops propagation of change/keydown events * @param props * @returns */ export var Textarea: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type TextInputProps = INSPECTOR.SharedUIComponents.PrimitiveProps & { validator?: (value: string) => boolean; validateOnlyOnBlur?: boolean; }; export var TextInput: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type SyncedSliderProps = INSPECTOR.SharedUIComponents.PrimitiveProps & { /** Minimum value for the slider */ min?: number; /** Maximum value for the slider */ max?: number; /** Step size for the slider */ step?: number; /** Displayed in the ux to indicate unit of measurement */ unit?: string; /** When true, onChange is only called when the user releases the slider, not during drag */ notifyOnlyOnRelease?: boolean; /** When true, slider grows to fill space and SpinButton is fixed at 65px */ compact?: boolean; /** When true, slider grows to fill all available space (no maxWidth constraint) */ growSlider?: boolean; }; /** * Component which synchronizes a slider and an input field, allowing the user to change the value using either control * @param props * @returns SyncedSlider component */ export var SyncedSliderInput: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type SwitchProps = INSPECTOR.SharedUIComponents.PrimitiveProps; /** * This is a primitive fluent boolean switch component whose only knowledge is the shared styling across all tools * @param props * @returns Switch component */ export var Switch: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type SpinButtonProps = INSPECTOR.SharedUIComponents.PrimitiveProps & { min?: number; max?: number; /** Determines how much the spinbutton increments with the arrow keys. Note this also determines the precision value (# of decimals in display value) * i.e. if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2. */ step?: number; unit?: string; forceInt?: boolean; validator?: (value: number) => boolean; /** Optional className for the input element */ inputClassName?: string; }; export var SpinButton: import("react").ForwardRefExoticComponent void; } & { min?: number; max?: number; /** Determines how much the spinbutton increments with the arrow keys. Note this also determines the precision value (# of decimals in display value) * i.e. if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2. */ step?: number; unit?: string; forceInt?: boolean; validator?: (value: number) => boolean; /** Optional className for the input element */ inputClassName?: string; } & import("react").RefAttributes>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type SkeletonSelectorProps = INSPECTOR.SharedUIComponents.PrimitiveProps> & { /** * The scene to get skeletons from */ scene: BABYLON.Scene; /** * Optional filter function to filter which skeletons are shown */ filter?: (skeleton: BABYLON.Skeleton) => boolean; } & Omit, "getEntities" | "getName">; /** * A primitive component with a ComboBox for selecting from existing scene skeletons. * @param props SkeletonSelectorProps * @returns SkeletonSelector component */ export var SkeletonSelector: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type SearchBoxProps = { items: string[]; onItemSelected: (item: string) => void; title?: string; }; /** * SearchBox component that displays a popup with search functionality * @param props - The component props * @returns The search box component */ export var SearchBox: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type SearchProps = { onChange: (val: string) => void; placeholder?: string; }; export var SearchBar: import("react").ForwardRefExoticComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type BasePrimitiveProps = { /** * Optional flag to disable the component, preventing any interaction. */ disabled?: boolean; /** * Optional class name to apply custom styles to the component. */ className?: string; /** * Optional style object to apply custom inline styles to the top-level HTML element. */ style?: React.CSSProperties; /** * Optional title for the component, used for tooltips or accessibility. */ title?: string; }; export type ImmutablePrimitiveProps = BasePrimitiveProps & { /** * The value of the property to be displayed and modified. */ value: ValueT; /** * Optional information to display as an infoLabel popup aside the component. */ infoLabel?: INSPECTOR.SharedUIComponents.InfoLabelParentProps; }; export type PrimitiveProps = ImmutablePrimitiveProps & { /** * Called when the primitive value changes */ onChange: (value: T) => void; }; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type PositionedPopoverProps = { x: number; y: number; visible: boolean; hide: () => void; }; /** * PositionedPopover component that shows a popover at specific coordinates * @param props - The component props * @returns The positioned popover component */ export var PositionedPopover: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type PopoverWithIconProps = { icon: any; trigger?: never; }; type PopoverWithTriggerProps = { icon?: never; trigger: React.ReactElement; }; type PopoverBaseProps = { /** Controlled open state */ open?: boolean; /** Callback when open state changes */ onOpenChange?: (open: boolean) => void; /** Positioning of the popover */ positioning?: any; /** Custom class for the surface */ surfaceClassName?: string; }; type PopoverProps = PopoverBaseProps & (PopoverWithIconProps | PopoverWithTriggerProps); export var Popover: import("react").ForwardRefExoticComponent & import("react").RefAttributes>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type NodeSelectorProps = INSPECTOR.SharedUIComponents.PrimitiveProps> & { /** * The scene to get nodes from */ scene: BABYLON.Scene; /** * Optional filter function to filter which nodes are shown */ filter?: (node: BABYLON.Node) => boolean; } & Omit, "getEntities" | "getName">; /** * A primitive component with a ComboBox for selecting from existing scene nodes. * @param props NodeSelectorProps * @returns NodeSelector component */ export var NodeSelector: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type MessageBarProps = { message: string; title?: string; docLink?: string; intent: "info" | "success" | "warning" | "error"; staticItem?: boolean; }; export var MessageBar: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type MaterialSelectorProps = INSPECTOR.SharedUIComponents.PrimitiveProps> & { /** * The scene to get materials from */ scene: BABYLON.Scene; /** * Optional filter function to filter which materials are shown */ filter?: (material: BABYLON.Material) => boolean; } & Omit, "getEntities" | "getName">; /** * A primitive component with a ComboBox for selecting from existing scene materials. * @param props MaterialSelectorProps * @returns MaterialSelector component */ export var MaterialSelector: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Represents an item in a list */ export type ListItem = { /** Unique identifier for the item */ id: number; /** The data associated with the item */ data: T; /** Value to use for sorting the list */ sortBy: number; }; type ListProps = { items: ListItem[]; renderItem: (item: ListItem, index: number) => React.ReactNode; onDelete?: (item: ListItem, index: number) => void; onAdd?: (item?: ListItem) => void; addButtonLabel?: string; }; /** * For cases where you may want to add / remove items from a list via a trash can button / copy button, this HOC can be used * @returns A React component that renders a list of items with add/delete functionality * @param props - The properties for the List component */ export function List(props: ListProps): React.ReactElement; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type LinkProps = INSPECTOR.SharedUIComponents.ImmutablePrimitiveProps & { /** * Used if you want to handle the link click yourself */ onLink?: () => void; /** * The URL the link points to */ url?: string; /** * Defines whether to open the link in current tab or new tab. Default is new */ target?: "current" | "new"; /**Force link size */ size?: "small" | "medium"; }; export var Link: import("react").ForwardRefExoticComponent void; /** * The URL the link points to */ url?: string; /** * Defines whether to open the link in current tab or new tab. Default is new */ target?: "current" | "new"; /**Force link size */ size?: "small" | "medium"; } & { children?: import("react").ReactNode | undefined; } & import("react").RefAttributes>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type LazyComponentProps = { spinnerSize?: any; spinnerLabel?: string; }; /** * Creates a lazy component wrapper that only calls the async function to get the underlying component when the lazy component is actually mounted. * This allows deferring imports until they are needed. While the underlying component is being loaded, a spinner is displayed. * @param getComponentAsync A function that returns a promise resolving to the component. * @param defaultProps Options for the loading spinner. * @returns A React component that displays a spinner while loading the async component. */ export function MakeLazyComponent>(getComponentAsync: () => Promise, defaultProps?: LazyComponentProps): import("react").ForwardRefExoticComponent & LazyComponentProps> & import("react").RefAttributes | ComponentT>>>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type InfoLabelProps = { htmlFor: string; info?: JSX.Element; label: string; className?: string; /** * When true, applies flex layout styling to the label slot for proper truncation in flex containers */ flexLabel?: boolean; /** * Handler for right-click context menu. Also triggers on Ctrl+click. */ onContextMenu?: React.MouseEventHandler; }; export type InfoLabelParentProps = Omit; /** * Renders a label with an optional popup containing more info * @param props * @returns */ export var InfoLabel: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Component wrapper for BABYLON.FactorGradient that provides slider inputs for factor1, factor2, and gradient step * @param props - Component props containing BABYLON.FactorGradient value and change handler * @returns A React component */ export var FactorGradientComponent: React.FunctionComponent>; /** * Component wrapper for BABYLON.Color3Gradient that provides color picker and gradient step slider * @param props - Component props containing BABYLON.Color3Gradient value and change handler * @returns A React component */ export var Color3GradientComponent: React.FunctionComponent>; /** * Component wrapper for BABYLON.ColorGradient that provides color pickers for color1, color2, and gradient step slider * @param props - Component props containing BABYLON.ColorGradient value and change handler * @returns A React component */ export var Color4GradientComponent: React.FunctionComponent>; /** * Component wrapper for BABYLON.GradientBlockColorStep that provides color picker and step slider * @param props - Component props containing BABYLON.GradientBlockColorStep value and change handler * @returns A React component */ export var ColorStepGradientComponent: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type Entity = { uniqueId: number; }; /** * Props for the EntitySelector component */ export type EntitySelectorProps = (PrimitiveProps> | INSPECTOR.SharedUIComponents.ImmutablePrimitiveProps>) & { /** * Function to get the list of entities to choose from */ getEntities: () => T[]; /** * Function to get the display name from an entity */ getName: (entity: T) => string; /** * Optional filter function to filter which entities are shown */ filter?: (entity: T) => boolean; /** * Callback when the entity link is clicked */ onLink: (entity: T) => void; /** * Optional default value that enables clearing the current linked entity */ defaultValue?: T; }; /** * A generic primitive component with a ComboBox for selecting from a list of entities. * Supports entities with duplicate names by using uniqueId for identity. * @param props ChooseEntityProps * @returns EntitySelector component */ export function EntitySelector(props: EntitySelectorProps): JSX.Element; export namespace EntitySelector { var displayName: string; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type AcceptedDropdownValue = string | number; export type DropdownOption = { /** * Defines the visible part of the option */ label: string; /** * Defines the value part of the option */ value: T; }; export type DropdownProps = INSPECTOR.SharedUIComponents.PrimitiveProps & { options: readonly DropdownOption[]; }; /** * Renders a fluent UI dropdown component for the options passed in, and an additional 'Not Defined' option if null is set to true * This component can handle both null and undefined values * @param props * @returns dropdown component */ export var Dropdown: React.FunctionComponent>; export var NumberDropdown: React.FunctionComponent>; export var StringDropdown: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type DraggableLineProps = { format: string; data: string; tooltip: string; label: string; onDelete?: () => void; }; export var DraggableLine: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Represents a single menu item in the context menu. */ export type ContextMenuItemProps = { /** * Unique key for the menu item. */ key: string; /** * The text label displayed for the menu item. */ label: string; /** * Optional icon to display alongside the menu item. */ icon?: any; /** * Called when the menu item is clicked. */ onClick?: () => void; /** * Whether the menu item is disabled. */ disabled?: boolean; /** * Optional secondary text displayed alongside the label. */ secondaryContent?: string; }; /** * Represents a divider in the context menu. */ export type ContextMenuDividerProps = { /** * Unique key for the divider. */ key: string; /** * Indicates this is a divider item. */ type: "divider"; }; /** * Represents a group of menu items with an optional header. */ export type ContextMenuGroupProps = { /** * Unique key for the group. */ key: string; /** * Indicates this is a group item. */ type: "group"; /** * Optional header text for the group. */ header?: string; /** * The menu items within the group. */ items: ContextMenuItem[]; }; /** * Union type representing all possible menu items. */ export type ContextMenuItem = ContextMenuItemProps | ContextMenuDividerProps | ContextMenuGroupProps; type ContextMenuWithIconProps = { /** * Icon to use as the trigger button. */ icon: any; trigger?: never; }; type ContextMenuWithTriggerProps = { icon?: never; /** * Custom trigger element for opening the menu. */ trigger: React.ReactElement; }; export type ContextMenuProps = INSPECTOR.SharedUIComponents.BasePrimitiveProps & (ContextMenuWithIconProps | ContextMenuWithTriggerProps) & { /** * Array of menu items to display. */ items: ContextMenuItem[]; /** * Positioning of the menu relative to the trigger. */ positioning?: any; /** * Called when the menu open state changes. */ onOpenChange?: (open: boolean) => void; }; /** * A wrapper around Fluent UI's Menu component providing a simplified API for context menus. * Supports menu items with icons, dividers, and grouped items. */ export var ContextMenu: import("react").ForwardRefExoticComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * An option object for the ComboBox with separate label and value. */ export type ComboBoxOption = { /** * Defines the visible part of the option */ label: string; /** * Defines the value part of the option */ value: string; }; export type ComboBoxProps = INSPECTOR.SharedUIComponents.PrimitiveProps & { /** * Label for the ComboBox */ label: string; /** * Options to display as label/value pairs */ options: ComboBoxOption[]; /** * The default open state when open is uncontrolled */ defaultOpen?: boolean; }; /** * Wrapper around a Fluent ComboBox that allows for filtering options. * @param props * @returns */ export var ComboBox: import("react").ForwardRefExoticComponent void; } & { /** * Label for the ComboBox */ label: string; /** * Options to display as label/value pairs */ options: ComboBoxOption[]; /** * The default open state when open is uncontrolled */ defaultOpen?: boolean; } & import("react").RefAttributes>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type ColorPickerProps = { isLinearMode?: boolean; } & INSPECTOR.SharedUIComponents.PrimitiveProps; export var ColorPickerPopup: import("react").ForwardRefExoticComponent<{ isLinearMode?: boolean; } & BasePrimitiveProps & { value: BABYLON.Color3 | BABYLON.Color4; infoLabel?: InfoLabelParentProps; } & { onChange: (value: BABYLON.Color3 | BABYLON.Color4) => void; } & import("react").RefAttributes>; export type InputHexProps = INSPECTOR.SharedUIComponents.PrimitiveProps & { linearHex?: boolean; isLinearMode?: boolean; }; /** * Component which displays the passed in color's HEX value, either in linearSpace (if linearHex is true) or in gamma space * When the hex color is changed by user, component calculates the new BABYLON.Color3/4 value and calls onChange * * Component uses the isLinearMode boolean to display an informative label regarding linear / gamma space * @param props - The properties for the InputHexField component. * @returns */ export var InputHexField: React.FunctionComponent; type HsvKey = "h" | "s" | "v"; type InputHsvFieldProps = INSPECTOR.SharedUIComponents.PrimitiveProps & { hsvKey: HsvKey; max: number; scale?: number; }; /** * In the HSV (Hue, Saturation, Value) color model, Hue (H) ranges from 0 to 360 degrees, representing the color's position on the color wheel. * Saturation (S) ranges from 0 to 100%, indicating the intensity or purity of the color, with 0 being shades of gray and 100 being a fully saturated color. * Value (V) ranges from 0 to 100%, representing the brightness of the color, with 0 being black and 100 being the brightest. * @param props - The properties for the InputHsvField component. */ export var InputHsvField: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type CollapseProps = { visible: boolean; orientation?: "horizontal" | "vertical"; }; /** * Wraps the passed in children with a fluent collapse component, handling smooth animation when visible prop changes * NOTE: When passing in children, prefer react fragment over empty div to avoid bloating the react tree with an unnecessary div * @param props * @returns */ export var Collapse: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * This is a primitive fluent checkbox that can both read and write checked state * @param props * @returns Checkbox component */ export var Checkbox: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type ButtonProps = INSPECTOR.SharedUIComponents.BasePrimitiveProps & { onClick?: (e?: React.MouseEvent) => unknown | Promise; icon?: any; appearance?: "subtle" | "transparent" | "primary" | "secondary"; label?: string; }; export var Button: import("react").ForwardRefExoticComponent) => unknown | Promise; icon?: any; appearance?: "subtle" | "transparent" | "primary" | "secondary"; label?: string; } & import("react").RefAttributes>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Props: `AccordionSectionBlock`. */ export type AccordionSectionBlockProps = { /** The ID of the `AccordionSectionBlock`, unique within the `Accordion` instance. */ sectionId: string; }; /** * Props: `AccordionSectionItem`. */ export type AccordionSectionItemProps = { /** The ID of the `AccordionSectionItem`, unique within the `AccordionSectionBlock` instance. */ uniqueId: string; /** The searchable text label for the item. */ label?: string; /** Whether the item is not interactable. */ staticItem?: boolean; }; /** * Wrapper component that must encapsulate individual items. * - Renders the pin button and tracks the pinned state of the item. * - Renders the hide button and tracks the hidden state of the item. * - Filters items based on the current search term. * * @param props - `AccordionSectionItemProps` * @returns `Portal` if pinned; `null` if hidden/filtered; `children` otherwise. */ export var AccordionSectionItem: React.FunctionComponent>; /** * Props: `AccordionSection`. */ export type AccordionSectionProps = { /** The text label shown in the section header. */ title: string; /** Indicates whether the `AccordionSection` is initially collapsed. */ collapseByDefault?: boolean; }; /** * Wrapper component that must encapsulate the section body. * * @param props - `AccordionSectionProps` * @returns `div` */ export var AccordionSection: React.FunctionComponent>; /** * Props: `Accordion`. */ export type AccordionProps = { /** The unique ID of the `Accordion` instance. */ uniqueId?: string; /** The list of sections to be highlighted. */ highlightSections?: readonly string[]; /** Enables the pinned items feature. */ enablePinnedItems?: boolean; /** Enables the hidden items feature. */ enableHiddenItems?: boolean; /** Enables the search items feature. */ enableSearchItems?: boolean; }; export var Accordion: React.ForwardRefExoticComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Immutable state for the Accordion. */ export type AccordionState = { /** IDs of pinned items (persisted to localStorage). */ pinnedIds: string[]; /** IDs of hidden items (persisted to localStorage). */ hiddenIds: string[]; /** Current search/filter term. */ searchTerm: string; /** Whether edit mode is active (shows pin/hide controls). */ editMode: boolean; }; /** * Actions that can be dispatched to update accordion state. */ export type AccordionAction = { type: "SET_SEARCH_TERM"; term: string; } | { type: "SET_EDIT_MODE"; enabled: boolean; } | { type: "TOGGLE_PINNED"; itemId: string; } | { type: "TOGGLE_HIDDEN"; itemId: string; } | { type: "MOVE_PINNED_UP"; itemId: string; } | { type: "REMOVE_STALE_IDS"; activeIds: Set; } | { type: "SHOW_ALL"; } | { type: "HIDE_ALL_VISIBLE"; visibleItemIds: string[]; }; /** * Feature flags for the Accordion (immutable after initialization). */ export type AccordionFeatures = { /** Whether pinning is enabled. */ pinning: boolean; /** Whether hiding is enabled. */ hiding: boolean; /** Whether search is enabled. */ search: boolean; }; /** * Context value for the Accordion component. */ export type AccordionContextValue = { /** The unique ID of the Accordion instance. */ accordionId: string; /** State for the Accordion, managed via dispatch function. */ state: AccordionState; /** Dispatch function to update state. */ dispatch: React.Dispatch; /** Feature flags. */ features: AccordionFeatures; /** Ref for the pinned items portal container. */ pinnedContainerRef: React.RefObject; /** Map of registered item IDs to labels (for duplicate detection and section empty checks). */ registeredItemIds: Map; }; export var AccordionContext: import("react").Context; /** * Hook to create and manage the AccordionContext value. * * @param props - INSPECTOR.SharedUIComponents.AccordionProps * @returns AccordionContextValue, or undefined if no features are enabled or no uniqueId is provided. */ export function useAccordionContext(props: INSPECTOR.SharedUIComponents.AccordionProps): AccordionContextValue | undefined; /** * Context value for an AccordionSectionBlock. */ export type AccordionSectionBlockContextValue = { /** The section ID. */ sectionId: string; }; export var AccordionSectionBlockContext: import("react").Context; /** * Hook to create the AccordionSectionBlockContext value. * * @param props - INSPECTOR.SharedUIComponents.AccordionSectionBlockProps * @returns AccordionSectionBlockContextValue and isEmpty state */ export function useAccordionSectionBlockContext(props: INSPECTOR.SharedUIComponents.AccordionSectionBlockProps): { context: AccordionSectionBlockContextValue; isEmpty: boolean; }; /** * Context to track whether we're inside an AccordionSectionItem. * Used to prevent nested items from being individually manageable. */ export var AccordionItemDepthContext: import("react").Context; /** * Derived item state, computed from the accordion state during render. */ export type AccordionItemState = { /** The globally unique item ID. */ itemUniqueId: string; /** Whether this item is nested inside another AccordionSectionItem. */ isNested: boolean; /** Whether this item is pinned. */ isPinned: boolean; /** Whether this item is hidden. */ isHidden: boolean; /** Whether this item matches the current search term. */ isMatch: boolean; /** The index of this item in the pinned list (for ordering). */ pinnedIndex: number; /** Whether this pinned item can be moved up (is not first in the pinned list). */ canMoveUp: boolean; /** Whether edit mode is active. */ inEditMode: boolean; /** Callbacks to modify state. */ actions: { togglePinned: () => void; toggleHidden: () => void; movePinnedUp: () => void; }; }; /** * Hook to compute item state from accordion context. * * @param props - INSPECTOR.SharedUIComponents.AccordionSectionItemProps * @returns AccordionItemState, or undefined if no accordion context or nested item. */ export function useAccordionSectionItemState(props: INSPECTOR.SharedUIComponents.AccordionSectionItemProps): AccordionItemState | undefined; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * A hook that provides a transient state value and a "pulse" function to set it. * The transient value is meant to be consumed immediately after being set, and will be cleared on the next render. * @typeParam T The type of the transient value. * @returns A tuple containing the transient value and a function to "pulse" the state. */ export function useImpulse(): [T | undefined, (value: T) => void]; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type KeyCallbacks = { onKeyDown?: (e: KeyboardEvent) => void; onKeyUp?: (e: KeyboardEvent) => void; }; export function useKeyListener(callbacks: KeyCallbacks, options?: INSPECTOR.SharedUIComponents.WindowOptions): void; export function useKeyState(key: string, options?: INSPECTOR.SharedUIComponents.WindowOptions): boolean; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type WindowOptions = { current?: boolean; primary?: boolean; }; export function useEventListener(source: "document", eventName: EventT, handler: (e: DocumentEventMap[EventT]) => void, options?: WindowOptions): void; export function useEventListener(source: "window", eventName: EventT, handler: (e: WindowEventMap[EventT]) => void, options?: WindowOptions): void; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type TextureUploadUpdateProps = { /** * Existing texture to update via updateURL */ texture: BABYLON.BaseTexture; /** * Callback after texture is updated */ onChange?: (texture: BABYLON.BaseTexture) => void; scene?: never; cubeOnly?: never; }; type TextureUploadCreateProps = { /** * The scene to create the texture in */ scene: BABYLON.Scene; /** * Callback when a new texture is created */ onChange: (texture: BABYLON.BaseTexture) => void; /** * Whether to create cube textures */ cubeOnly?: boolean; texture?: never; }; type TextureUploadProps = TextureUploadUpdateProps | TextureUploadCreateProps; /** * A button that uploads a file and either: * - Updates an existing Texture or CubeTexture via updateURL (if texture prop is provided) * - Creates a new Texture or CubeTexture (if scene/onChange props are provided) * @param props TextureUploadProps * @returns UploadButton component that handles texture upload */ export var TextureUpload: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type PaneProps = { title: string; icon?: any; }; export var Pane: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type GradientListProps = { label: string; gradients: BABYLON.Nullable>; addGradient: (step?: T) => void; removeGradient: (step: T, index: number) => void; onChange: (newGradient: T, index: number) => void; }; export var FactorGradientList: React.FunctionComponent>; export var Color3GradientList: React.FunctionComponent>; export var Color4GradientList: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type UiSize = "small" | "medium"; export type ToolHostProps = { /** * Will ensure all of the controls within the tool are of the same scale */ size?: UiSize; /** * Allows host to pass in a theme */ customTheme?: any; /** * Can be set to true to disable the copy button in the tool's property lines. Default is false (copy enabled) */ disableCopy?: boolean; /** * Name of the tool displayed in the UX */ toolName: string; /** * Override the qsp detection for fluent */ useFluent?: boolean; }; export var ToolContext: import("react").Context<{ readonly useFluent: boolean; readonly disableCopy: boolean; readonly toolName: string; readonly size: UiSize | undefined; }>; /** * For tools which are ready to move over the fluent, wrap the root of the tool (or the panel which you want fluentized) with this component * Today we will only enable fluent if the URL has the `newUX` query parameter is truthy * @param props * @returns */ export var FluentToolWrapper: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type FileUploadLineProps = Omit & { onClick: (files: FileList) => void; label: string; accept: string; }; /** * A full-width line with an upload button. * For just the button without the line wrapper, use UploadButton directly. * @returns An UploadButton wrapped in a LineContainer */ export var FileUploadLine: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type ChildWindowOptions = { /** * The default width of the child window in pixels. * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved. */ defaultWidth?: number; /** * The default height of the child window in pixels. * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved. */ defaultHeight?: number; /** * The default left position of the child window in pixels. * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved. */ defaultLeft?: number; /** * The default top position of the child window in pixels. * @remarks Ignored if the ChildWindow was passed an id and previous bounds were saved. */ defaultTop?: number; /** * The title of the child window. * @remarks If not provided, the id will be used instead (if any). */ title?: string; }; export type ChildWindow = { /** * Opens the child window. * @param options Options for opening the child window. */ open: (options?: ChildWindowOptions) => void; /** * Closes the child window. */ close: () => void; }; export type ChildWindowProps = { /** * An optional unique identity for the child window. * @remarks If provided, the child window's bounds will be saved/restored using this identity. */ id?: string; /** * Called when the open state of the child window changes. * @param isOpen Whether the child window is open. */ onOpenChange?: (isOpen: boolean) => void; /** * A ref that exposes the ChildWindow imperative API. */ imperativeRef?: React.Ref; }; /** * Allows displaying a child window that can contain child components. * @param props Props for the child window. * @returns The child window component. */ export var ChildWindow: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type ButtonLineProps = Omit & { label: string; uniqueId?: string; }; /** * Wraps a button with a label in a line container * @param props Button props plus a label * @returns A button inside a line */ export var ButtonLine: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type TensorPropertyLineProps = INSPECTOR.SharedUIComponents.PropertyLineProps & INSPECTOR.SharedUIComponents.PrimitiveProps & { /** * If passed, all sliders will use this for the min value */ min?: number; /** * If passed, all sliders will use this for the max value */ max?: number; /** * Will be displayed in the input UI to indicate the unit of measurement */ unit?: string; /** * Internal spinbutton's step */ step?: number; /** * If passed, the UX will use the conversion functions to display/update values */ valueConverter?: { /** * Will call from(val) before displaying in the UX */ from: (val: number) => number; /** * Will call to(val) before calling onChange */ to: (val: number) => number; }; }; type RotationVectorPropertyLineProps = TensorPropertyLineProps & { /** * Display angles as degrees instead of radians */ useDegrees?: boolean; }; export var RotationVectorPropertyLine: React.FunctionComponent; type QuaternionPropertyLineProps = TensorPropertyLineProps & { /** * Display angles as degrees instead of radians */ useDegrees?: boolean; /** * Display angles as Euler angles instead of quaternions */ useEuler?: boolean; }; export var QuaternionPropertyLine: React.FunctionComponent; export var Vector2PropertyLine: React.FunctionComponent>; export var Vector3PropertyLine: React.FunctionComponent>; export var Vector4PropertyLine: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Wraps text in a property line * @param props - INSPECTOR.SharedUIComponents.PropertyLineProps and TextProps * @returns property-line wrapped text */ export var TextPropertyLine: React.FunctionComponent & INSPECTOR.SharedUIComponents.ImmutablePrimitiveProps>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Wraps textarea in a property line * @param props - INSPECTOR.SharedUIComponents.PropertyLineProps and TextProps * @returns property-line wrapped text */ export var TextAreaPropertyLine: React.FunctionComponent & INSPECTOR.SharedUIComponents.TextareaProps>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type SyncedSliderPropertyProps = INSPECTOR.SharedUIComponents.SyncedSliderProps & INSPECTOR.SharedUIComponents.PropertyLineProps; /** * Renders a simple wrapper around the SyncedSliderInput * @param props * @returns */ export var SyncedSliderPropertyLine: import("react").ForwardRefExoticComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Wraps a switch in a property line * @param props - The properties for the switch and property line * @returns A React element representing the property line with a switch */ export var SwitchPropertyLine: React.FunctionComponent & INSPECTOR.SharedUIComponents.SwitchProps>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type StringifiedPropertyLineProps = INSPECTOR.SharedUIComponents.PropertyLineProps & INSPECTOR.SharedUIComponents.ImmutablePrimitiveProps & { precision?: number; units?: string; }; /** * Expects a numerical value and converts it toFixed(if precision is supplied) or toLocaleString * Can pass optional units to be appending to the end of the string * @param props * @returns */ export var StringifiedPropertyLine: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export var SpinButtonPropertyLine: React.FunctionComponent & INSPECTOR.SharedUIComponents.SpinButtonProps>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type BasePropertyLineProps = { /** * The name of the property to display in the property line. */ label: string; /** * The ID of the property line to be used when the label cannot be used as a persistent ID. * * Note that when a property line is used within an accordion section, this ID must be unique within that section in order * for property pinning and filtering to work correctly. If not, error will be shown in console. */ uniqueId?: string; /** * Optional description for the property, shown on hover of the info icon */ description?: string; /** * Optional function returning a string to copy to clipboard. */ onCopy?: () => string; /** * Link to the documentation for this property, available from the info icon either linked from the description (if provided) or default 'docs' text */ docLink?: string; }; type NullableProperty = { nullable: true; ignoreNullable: false; value: ValueT; onChange: (value: ValueT) => void; defaultValue?: ValueT; }; type IgnoreNullable = { ignoreNullable: true; nullable: false; value: ValueT; onChange: (value: ValueT) => void; defaultValue: ValueT; }; type NonNullableProperty = { nullable?: false; ignoreNullable?: false; }; type ExpandableProperty = { /** * If supplied, an 'expand' icon will be shown which, when clicked, renders this component within the property line. */ expandedContent: JSX.Element; /** * If true, the expanded content will be shown by default. */ expandByDefault?: boolean; }; type NonExpandableProperty = { expandedContent?: undefined; }; export type PropertyLineProps = BasePropertyLineProps & (NullableProperty | NonNullableProperty | IgnoreNullable) & (ExpandableProperty | NonExpandableProperty); /** * A reusable component that renders a property line with a label and child content, and an optional description, copy button, and expandable section. * * @param props - The properties for the PropertyLine component. * @returns A React element representing the property line. * */ export var PropertyLine: import("react").ForwardRefExoticComponent> & import("react").RefAttributes>; export var LineContainer: import("react").ForwardRefExoticComponent & INSPECTOR.SharedUIComponents.AccordionSectionItemProps>, "ref"> & import("react").RefAttributes>; export var PlaceholderPropertyLine: React.FunctionComponent & PropertyLineProps>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Wraps a link in a property line * @param props - INSPECTOR.SharedUIComponents.PropertyLineProps and INSPECTOR.SharedUIComponents.LinkProps * @returns property-line wrapped link */ export var LinkPropertyLine: React.FunctionComponent & INSPECTOR.SharedUIComponents.LinkProps>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Wraps a text input in a property line * @param props - INSPECTOR.SharedUIComponents.PropertyLineProps and InputProps * @returns property-line wrapped input component */ export var TextInputPropertyLine: React.FunctionComponent>; export type NumberInputPropertyLineProps = INSPECTOR.SharedUIComponents.SpinButtonProps & INSPECTOR.SharedUIComponents.PropertyLineProps; /** * Wraps a number input in a property line * To force integer values, use forceInt param (this is distinct from the 'step' param, which will still allow submitting an integer value. forceInt will not) * @param props - INSPECTOR.SharedUIComponents.PropertyLineProps and InputProps * @returns property-line wrapped input component */ export var NumberInputPropertyLine: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type HexPropertyLineProps = INSPECTOR.SharedUIComponents.NumberInputPropertyLineProps & { numBits?: 32 | 24 | 16 | 8; }; /** * Takes a number representing a Hex value and converts it to a hex string then wraps the TextInput in a PropertyLine * @param props - PropertyLineProps * @returns property-line wrapped textbox that converts to/from hex number representation */ export var HexPropertyLine: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type NodeSelectorPropertyLineProps = INSPECTOR.SharedUIComponents.PropertyLineProps> & INSPECTOR.SharedUIComponents.NodeSelectorProps; type MaterialSelectorPropertyLineProps = INSPECTOR.SharedUIComponents.PropertyLineProps> & INSPECTOR.SharedUIComponents.MaterialSelectorProps; type TextureSelectorPropertyLineProps = INSPECTOR.SharedUIComponents.PropertyLineProps> & INSPECTOR.SharedUIComponents.TextureSelectorProps; type SkeletonSelectorPropertyLineProps = INSPECTOR.SharedUIComponents.PropertyLineProps> & INSPECTOR.SharedUIComponents.SkeletonSelectorProps; export const NodeSelectorPropertyLine: (props: NodeSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element; export const MaterialSelectorPropertyLine: (props: MaterialSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element; export const TextureSelectorPropertyLine: (props: TextureSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element; export const SkeletonSelectorPropertyLine: (props: SkeletonSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type DropdownPropertyLineProps = INSPECTOR.SharedUIComponents.DropdownProps & INSPECTOR.SharedUIComponents.PropertyLineProps; /** * Wraps a dropdown in a property line * @param props - INSPECTOR.SharedUIComponents.PropertyLineProps and INSPECTOR.SharedUIComponents.DropdownProps * @returns property-line wrapped dropdown */ export var DropdownPropertyLine: import("react").ForwardRefExoticComponent & import("react").RefAttributes>; /** * Dropdown component for number values. */ export var NumberDropdownPropertyLine: React.FunctionComponent>; /** * Dropdown component for string values */ export var StringDropdownPropertyLine: React.FunctionComponent>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { type ComboBoxPropertyLineProps = INSPECTOR.SharedUIComponents.ComboBoxProps & INSPECTOR.SharedUIComponents.PropertyLineProps; /** * A property line with a filterable ComboBox * @param props - INSPECTOR.SharedUIComponents.ComboBoxProps & INSPECTOR.SharedUIComponents.PropertyLineProps * @returns property-line wrapped ComboBox component */ export var ComboBoxPropertyLine: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type ColorPropertyLineProps = INSPECTOR.SharedUIComponents.ColorPickerProps & INSPECTOR.SharedUIComponents.PropertyLineProps; export var Color3PropertyLine: React.FunctionComponent & INSPECTOR.SharedUIComponents.PropertyLineProps>; export var Color4PropertyLine: React.FunctionComponent & INSPECTOR.SharedUIComponents.PropertyLineProps>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Wraps a checkbox in a property line * @param props - INSPECTOR.SharedUIComponents.PropertyLineProps and CheckboxProps * @returns property-line wrapped checkbox */ export var CheckboxPropertyLine: React.FunctionComponent & INSPECTOR.SharedUIComponents.PrimitiveProps>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Displays an icon indicating enabled (green check) or disabled (red cross) state * @param props - The properties for the PropertyLine, including the boolean value to display. * @returns A PropertyLine component with a PresenceBadge indicating the boolean state. */ export var BooleanBadgePropertyLine: React.FunctionComponent & INSPECTOR.SharedUIComponents.ImmutablePrimitiveProps>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * A wrapper component for the property tab that provides a consistent layout and styling. * It uses a Pane and an Accordion to organize the content, so its direct children * must have 'title' props to be compatible with the Accordion structure. * @param props The props to pass to the component. * @returns The rendered component. */ export var PropertyTabComponentBase: React.FunctionComponent; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export function ClassNames(names: any, styleObject: any): string; export function JoinClassNames(styleObject: any, ...names: string[]): string; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type ToggleProps = { toggled: "on" | "mixed" | "off"; onToggle?: () => void; padded?: boolean; color?: "dark" | "light"; }; export var Toggle: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface ITextInputProps { label?: string; placeholder?: string; submitValue: (newValue: string) => void; validateValue?: (value: string) => boolean; cancelSubmit?: () => void; } /** * This component represents a text input that can be submitted or cancelled on buttons * @param props properties * @returns TextInputWithSubmit element */ export const TextInputWithSubmit: (props: ITextInputProps) => import("react/jsx-runtime").JSX.Element; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface MessageDialogProps { message: string; isError: boolean; onClose?: () => void; } export var MessageDialog: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type LabelProps = { text: string; children?: React.ReactChild; color?: "dark" | "light"; }; export var Label: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type IconProps = { color?: "dark" | "light"; icon: string; }; export var Icon: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type ButtonComponentProps = { disabled?: boolean; active?: boolean; onClick?: () => void; color: "light" | "dark"; size: "default" | "small" | "wide" | "smaller"; title?: string; backgroundColor?: string; }; export var ButtonComponent: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * utility hook to assist using the graph context * @returns */ export const useGraphContext: () => IGraphContext; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type IVisualRecordsType = Record; export type IConnectionType = { id: string; sourceId: string; targetId: string; }; export type ICustomDataType = { type: string; value: any; }; export type INodeType = { id: string; label: string; customData?: ICustomDataType; }; /** * props for the node renderer */ export interface INodeRendererProps { /** * array of connections between nodes */ connections: IConnectionType[]; /** * function called when a new connection is created */ updateConnections: (sourceId: string, targetId: string) => void; /** * function called when a connection is deleted */ deleteLine: (lineId: string) => void; /** * function called when a node is deleted */ deleteNode: (nodeId: string) => void; /** * array of all nodes */ nodes: INodeType[]; /** * id of the node to highlight */ highlightedNode?: BABYLON.Nullable; /** * function to be called if a node is selected */ selectNode?: (nodeId: BABYLON.Nullable) => void; /** * id of this renderer */ id: string; /** * optional list of custom components to be rendered inside nodes of * a certain type */ customComponents?: Record>; } /** * This component is a bridge between the app logic related to the graph, and the actual rendering * of it. It manages the nodes' positions and selection states. * @param props * @returns */ export const NodeRenderer: (props: React.PropsWithChildren) => import("react/jsx-runtime").JSX.Element; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IGraphContainerProps { onNodeMoved: (id: string, x: number, y: number) => void; id: string; } /** * This component contains all the nodes and handles their dragging * @param props properties * @returns graph node container element */ export var GraphNodesContainer: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IGraphNodeProps { id: string; name: string; x: number; y: number; selected?: boolean; width?: number; height?: number; highlighted?: boolean; parentContainerId: string; } export var SingleGraphNode: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * props for the GraphLineContainer */ export interface IGraphLinesContainerProps { /** * id of the container */ id: string; } /** * this component handles the dragging of new connections * @param props * @returns */ export var GraphLinesContainer: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * props for the GraphLine component */ export interface IGraphLineProps { /** * id of the line. temporary lines can have no id */ id?: string; /** * starting x pos of the line */ x1: number; /** * ending x pos of the line */ x2: number; /** * starting y pos of the line */ y1: number; /** * ending y pos of the line */ y2: number; /** * is the line selected */ selected?: boolean; /** * does the line have a direction */ directional?: boolean; } export const MarkerArrowId = "arrow"; /** * This component draws a SVG line between two points, with an optional marker * indicating direction * @param props properties * @returns graph line element */ export var GraphLine: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * this context is used to pass callbacks to the graph nodes and connections */ export interface IGraphContext { onNodesConnected?: (sourceId: string, targetId: string) => void; onLineSelected?: (lineId: string) => void; onNodeSelected?: (nodeId: string) => void; } export var GraphContextManager: import("react").Context; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IGraphContainerProps { } /** * This component is just a simple container to keep the nodes and lines containers * together * @param props * @returns */ export var GraphContainer: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Props for the connector */ export interface IGraphConnectorHandlerProps { /** * id of the parent node */ parentId: string; /** * x position of the parent node */ parentX: number; /** * y position of the parent node */ parentY: number; /** * x position of the connector relative to the parent node */ offsetX?: number; /** * y position of the connector relative to the parent node */ offsetY?: number; /** * width of the parent node */ parentWidth: number; /** * height of the parent node */ parentHeight: number; /** * id of the container where its parent node is */ parentContainerId: string; } /** * This component is used to initiate a connection between two nodes. Simply * drag the handle in a node and drop it in another node to create a connection. * @returns connector element */ export var GraphConnectorHandler: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * This components represents an options menu with optional * customizable properties. Option IDs should be unique. */ export interface IOption { label: string; value: string; id: string; } export interface IOptionsLineComponentProps { options: IOption[]; addOptionPlaceholder?: string; onOptionAdded?: (newOption: IOption) => void; onOptionSelected: (selectedOptionValue: string) => void; selectedOptionValue: string; validateNewOptionValue?: (newOptionValue: string) => boolean; addOptionText?: string; } export const OptionsLineComponent: (props: IOptionsLineComponentProps) => import("react/jsx-runtime").JSX.Element; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface INumericInputComponentProps { label: string; labelTooltip?: string; value: number; step?: number; onChange: (value: number) => void; precision?: number; icon?: string; iconLabel?: string; lockObject: INSPECTOR.SharedUIComponents.LockObject; } export class NumericInputComponent extends React.Component { static defaultProps: { step: number; }; private _localChange; constructor(props: INumericInputComponentProps); componentWillUnmount(): void; shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: { value: string; }): boolean; updateValue(valueString: string): void; onBlur(): void; incrementValue(amount: number): void; onKeyDown(evt: React.KeyboardEvent): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IFileButtonLineComponentProps { label: string; onClick: (file: File) => void; accept: string; icon?: string; iconLabel?: string; } export class FileButtonLineComponent extends React.Component { private static _IdGenerator; private _id; private _uploadInputRef; constructor(props: IFileButtonLineComponentProps); onChange(evt: any): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IColorPickerLineComponentProps { value: BABYLON.Color4 | BABYLON.Color3; linearHint?: boolean; onColorChanged: (newOne: string) => void; icon?: string; iconLabel?: string; shouldPopRight?: boolean; lockObject?: INSPECTOR.SharedUIComponents.LockObject; backgroundColor?: string; } interface IColorPickerComponentState { pickerEnabled: boolean; color: BABYLON.Color3 | BABYLON.Color4; hex: string; } export class ColorPickerLineComponent extends React.Component { private _floatRef; private _floatHostRef; private _coverRef; constructor(props: IColorPickerLineComponentProps); syncPositions(): void; shouldComponentUpdate(nextProps: IColorPickerLineComponentProps, nextState: IColorPickerComponentState): boolean; getHexString(props?: Readonly): string; componentDidUpdate(): void; componentDidMount(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Given a column and row number in the layout, return the corresponding column/row * @param layout * @param column * @param row * @returns */ export const getPosInLayout: (layout: INSPECTOR.SharedUIComponents.Layout, column: number, row?: number) => INSPECTOR.SharedUIComponents.LayoutColumn | INSPECTOR.SharedUIComponents.LayoutTabsRow; /** * Remove a row in position row, column from the layout, and redistribute heights of remaining rows * @param layout * @param column * @param row */ export const removeLayoutRowAndRedistributePercentages: (layout: INSPECTOR.SharedUIComponents.Layout, column: number, row: number) => void; /** * Add a percentage string to a number * @param p1 the percentage string * @param p2 the number * @returns the sum of the percentage string and the number */ export const addPercentageStringToNumber: (p1: string, p2: number) => number; /** * Parses a percentage string into a number * @param p the percentage string * @returns the parsed number */ export const parsePercentage: (p: string) => number; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export type LayoutTab = { /** * Tab id */ id: string; /** * React component rendered by tab */ component: React.ReactElement; /** * Tab title */ title: string; }; export type LayoutTabsRow = { /** * row id */ id: string; /** * row height in its containing column */ height: string; /** * selected tab in row */ selectedTab: string; /** * list of tabs contained in row */ tabs: LayoutTab[]; }; export type LayoutColumn = { /** * column id */ id: string; /** * column width in the grid */ width: string; /** * column rows */ rows: LayoutTabsRow[]; }; export type Layout = { /** * layout columns */ columns?: LayoutColumn[]; }; export type TabDrag = { /** * row number of the tab being dragged */ rowNumber: number; /** * column number of the tab being dragged */ columnNumber: number; /** * the tabs being dragged */ tabs: { /** * id of tab being dragged */ id: string; }[]; }; export enum ElementTypes { RESIZE_BAR = "0", TAB = "1", TAB_GROUP = "2", NONE = "2" } export enum ResizeDirections { ROW = "row", COLUMN = "column" } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export var LayoutContext: import("react").Context<{ /** * The layout object */ layout: INSPECTOR.SharedUIComponents.Layout; /** * Function to set the layout object in the context */ setLayout: (layout: INSPECTOR.SharedUIComponents.Layout) => void; }>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Arguments for the TabsContainer component. */ export interface IFlexibleTabsContainerProps { /** * The tabs to display */ tabs: INSPECTOR.SharedUIComponents.LayoutTab[]; /** * Row index of component in layout */ rowIndex: number; /** * Column index of component in layout */ columnIndex: number; /** * Which tab is selected in the layout */ selectedTab?: string; } /** * This component contains a set of tabs of which only one is visible at a time. * The tabs can also be dragged from and to different containers. * @param props properties * @returns tabs container element */ export var FlexibleTabsContainer: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Arguments for the FlexibleTab component. */ export interface IFlexibleTabProps { /** * The tab's title. */ title: string; /** * If the tab is currently selected or not */ selected: boolean; /** * What happens when the user clicks on the tab */ onClick: () => void; /** * The object that will be sent to the drag event */ item: INSPECTOR.SharedUIComponents.TabDrag; /** * What happens when the user drops another tab after this one */ onTabDroppedAction: (item: INSPECTOR.SharedUIComponents.TabDrag) => void; } /** * A component that renders a tab that the user can click * to activate or drag to reorder. It also listens for * drop events if the user wants to drop another tab * after it. * @param props properties * @returns FlexibleTab element */ export var FlexibleTab: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Arguments for the ResizeBar component. */ export interface IFlexibleRowResizerProps { /** * Row number of the component that is being resized */ rowNumber: number; /** * Column number of the component being resized */ columnNumber: number; /** * If the resizing happens in row or column direction */ direction: INSPECTOR.SharedUIComponents.ResizeDirections; } /** * The item that will be sent to the drag event */ export type ResizeItem = { /** * If the resizing happens in row or column direction */ direction: INSPECTOR.SharedUIComponents.ResizeDirections; /** * The row number of the component that is being resized */ rowNumber: number; /** * the column number of the component being resized */ columnNumber: number; }; /** * A component that renders a bar that the user can drag to resize. * @param props properties * @returns resize bar element */ export var FlexibleResizeBar: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Arguments for the INSPECTOR.SharedUIComponents.Layout component. */ export interface IFlexibleGridLayoutProps { /** * A definition of the layout which can be changed by the user */ layoutDefinition: INSPECTOR.SharedUIComponents.Layout; } /** * This component represents a grid layout that can be resized and rearranged * by the user. * @param props properties * @returns layout element */ export var FlexibleGridLayout: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Arguments for the GridContainer component. */ export interface IFlexibleGridContainerProps { } /** * Component responsible for mapping the layout to the actual components * @returns GridContainer element */ export var FlexibleGridContainer: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Arguments for the FlexibleDropZone component. */ export interface IFlexibleDropZoneProps { /** * The row number of the component in the layout */ rowNumber: number; /** * The column number of the component in the layout */ columnNumber: number; } /** * This component contains the drag and drop zone for the resize bars that * allow redefining width and height of layout elements * @param props properties * @returns drop zone element */ export var FlexibleDropZone: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Arguments for the DragHandler component. */ export interface IFlexibleDragHandlerProps { /** * The size of the containing element. Used to calculate the percentage of * space occupied by the component */ containerSize: { width: number; height: number; }; } /** * This component receives the drop events and updates the layout accordingly * @param props properties * @returns DragHandler element */ export var FlexibleDragHandler: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Arguments for the Column component. */ export interface IFlexibleColumnProps { /** * Width of column */ width: string; } /** * This component represents a single column in the layout. It receives a width * that it occupies and the content to display * @param props * @returns */ export var FlexibleColumn: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Arguments for the DraggableIcon component. */ export interface IDraggableIconProps { /** * Icon source */ src: string; /** * Object that will be passed to the drag event */ item: INSPECTOR.SharedUIComponents.TabDrag; /** * Type of drag event */ type: INSPECTOR.SharedUIComponents.ElementTypes; } /** * An icon that can be dragged by the user * @param props properties * @returns draggable icon element */ export var DraggableIcon: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IHexColorProps { value: string; expectedLength: number; onChange: (value: string) => void; lockObject: INSPECTOR.SharedUIComponents.LockObject; } export class HexColorComponent extends React.Component { constructor(props: IHexColorProps); shouldComponentUpdate(nextProps: IHexColorProps, nextState: { hex: string; }): boolean; lock(): void; unlock(): void; updateHexValue(valueString: string): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Interface used to specify creation options for color picker */ export interface IColorPickerComponentProps { color: BABYLON.Color3 | BABYLON.Color4; linearhint?: boolean; debugMode?: boolean; onColorChanged?: (color: BABYLON.Color3 | BABYLON.Color4) => void; lockObject: INSPECTOR.SharedUIComponents.LockObject; backgroundColor?: string; } /** * Interface used to specify creation options for color picker */ export interface IColorPickerState { color: BABYLON.Color3; alpha: number; } /** * Class used to create a color picker */ export class ColorPickerComponent extends React.Component { private _saturationRef; private _hueRef; private _isSaturationPointerDown; private _isHuePointerDown; constructor(props: IColorPickerComponentProps); shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerState): boolean; onSaturationPointerDown(evt: React.PointerEvent): void; onSaturationPointerUp(evt: React.PointerEvent): void; onSaturationPointerMove(evt: React.PointerEvent): void; onHuePointerDown(evt: React.PointerEvent): void; onHuePointerUp(evt: React.PointerEvent): void; onHuePointerMove(evt: React.PointerEvent): void; private _evaluateSaturation; private _evaluateHue; componentDidUpdate(): void; raiseOnColorChanged(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IColorComponentEntryProps { value: number; label: string; max?: number; min?: number; onChange: (value: number) => void; disabled?: boolean; lockObject: INSPECTOR.SharedUIComponents.LockObject; } export class ColorComponentComponentEntry extends React.Component { constructor(props: IColorComponentEntryProps); updateValue(valueString: string): void; lock(): void; unlock(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { interface ICommandDropdownComponentProps { icon?: string; tooltip: string; defaultValue?: string; items: { label: string; icon?: string; fileButton?: boolean; onClick?: () => void; onCheck?: (value: boolean) => void; storeKey?: string; isActive?: boolean; defaultValue?: boolean | string; subItems?: string[]; }[]; toRight?: boolean; } export class CommandDropdownComponent extends React.Component { constructor(props: ICommandDropdownComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface ICommandButtonComponentProps { tooltip: string; shortcut?: string; icon: string; iconLabel?: string; isActive: boolean; onClick: () => void; disabled?: boolean; } export var CommandButtonComponent: React.FC; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface ICommandBarComponentProps { onSaveButtonClicked?: () => void; onSaveToSnippetButtonClicked?: () => void; onLoadFromSnippetButtonClicked?: () => void; onHelpButtonClicked?: () => void; onGiveFeedbackButtonClicked?: () => void; onSelectButtonClicked?: () => void; onPanButtonClicked?: () => void; onZoomButtonClicked?: () => void; onFitButtonClicked?: () => void; onArtboardColorChanged?: (newColor: string) => void; artboardColor?: string; artboardColorPickerColor?: string; } export var CommandBarComponent: React.FC>; } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IHexColorProps { value: string; expectedLength: number; onChange: (value: string) => void; lockObject: INSPECTOR.SharedUIComponents.LockObject; } export class HexColor extends React.Component { constructor(props: IHexColorProps); shouldComponentUpdate(nextProps: IHexColorProps, nextState: { hex: string; }): boolean; lock(): void; unlock(): void; updateHexValue(valueString: string): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { /** * Interface used to specify creation options for color picker */ export interface IColorPickerProps { color: BABYLON.Color3 | BABYLON.Color4; linearhint?: boolean; debugMode?: boolean; onColorChanged?: (color: BABYLON.Color3 | BABYLON.Color4) => void; lockObject: INSPECTOR.SharedUIComponents.LockObject; } /** * Interface used to specify creation options for color picker */ export interface IColorPickerState { color: BABYLON.Color3; alpha: number; } /** * Class used to create a color picker */ export class ColorPicker extends React.Component { private _saturationRef; private _hueRef; private _isSaturationPointerDown; private _isHuePointerDown; constructor(props: IColorPickerProps); shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean; onSaturationPointerDown(evt: React.PointerEvent): void; onSaturationPointerUp(evt: React.PointerEvent): void; onSaturationPointerMove(evt: React.PointerEvent): void; onHuePointerDown(evt: React.PointerEvent): void; onHuePointerUp(evt: React.PointerEvent): void; onHuePointerMove(evt: React.PointerEvent): void; private _evaluateSaturation; private _evaluateHue; componentDidUpdate(): void; raiseOnColorChanged(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { } declare module INSPECTOR.SharedUIComponents { export interface IColorComponentEntryProps { value: number; label: string; max?: number; min?: number; onChange: (value: number) => void; disabled?: boolean; lockObject: INSPECTOR.SharedUIComponents.LockObject; } export class ColorComponentEntry extends React.Component { constructor(props: IColorComponentEntryProps); updateValue(valueString: string): void; lock(): void; unlock(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare module INSPECTOR { }