declare namespace BABYLON.NodeEditor { export class SerializationTools { static UpdateLocations(material: BABYLON.NodeMaterial, globalState: GlobalState, frame?: BABYLON.Nullable): void; static Serialize(material: BABYLON.NodeMaterial, globalState: GlobalState, frame?: BABYLON.Nullable): string; static Deserialize(serializationObject: any, globalState: GlobalState): void; static AddFrameToMaterial(serializationObject: any, globalState: GlobalState, currentMaterial: BABYLON.NodeMaterial): void; } interface IPortalProps { globalState: GlobalState; } export class Portal extends React.Component> { render(): React.ReactPortal; } /** * Interface used to specify creation options for the node editor */ export interface INodeEditorOptions { nodeMaterial: BABYLON.NodeMaterial; hostElement?: HTMLElement; customSave?: { label: string; action: (data: string) => Promise; }; customLoadObservable?: BABYLON.Observable; backgroundColor?: BABYLON.Color4; } /** * Class used to create a node editor */ export class NodeEditor { private static _CurrentState; private static _PopupWindow; /** * Show the node editor * @param options defines the options to use to configure the node editor */ static Show(options: INodeEditorOptions): void; } /** * Vite dev server entry point for the Node Material Editor. * * Architecture mirrors the playground: * - public/index.js loads babylon from babylonServer (port 1337) as UMD bundles, * creates a NodeMaterial, and calls BABYLON.NodeEditor.Show(hostElement, …). * - The Vite middleware shim at /babylon.nodeEditor.js captures those args and * fires a "babylonNodeEditorReady" CustomEvent. * - This module listens for that event and THEN dynamically imports the editor. * * The dynamic import is critical: all `import { X } from "core/…"` in the editor * source are rewritten by babylonDevExternalsPlugin to `const { X } = window.BABYLON ?? {}`. * Those bindings must be evaluated AFTER window.BABYLON is populated by the CDN * loader, otherwise they capture undefined. Dynamic import defers the module graph * evaluation until after the event fires (i.e. after BABYLON is ready). */ type ShowArgs = Parameters<(typeof import("./nodeEditor"))["NodeEditor"]["Show"]>; function StartEditor(args: ShowArgs): Promise; var Win: Record; interface IGraphEditorProps { globalState: GlobalState; } interface IGraphEditorState { showPreviewPopUp: boolean; message: string; isError: boolean; } interface IInternalPreviewAreaOptions extends BABYLON.IInspectorOptions { popup: boolean; original: boolean; explorerWidth?: string; inspectorWidth?: string; embedHostWidth?: string; } export class GraphEditor extends React.Component { private _graphCanvasRef; private _diagramContainerRef; private _graphCanvas; private _historyStack; private _previewManager; private _mouseLocationX; private _mouseLocationY; private _onWidgetKeyUpPointer; private _previewHost; private _popUpWindow; appendBlock(dataToAppend: BABYLON.NodeMaterialBlock | BABYLON.NodeEditor.SharedUIComponents.INodeData, recursion?: boolean): BABYLON.NodeEditor.SharedUIComponents.GraphNode; addValueNode(type: string): BABYLON.NodeEditor.SharedUIComponents.GraphNode; prepareHistoryStack(): void; componentDidMount(): void; componentWillUnmount(): void; constructor(props: IGraphEditorProps); zoomToFit(): void; buildMaterial(): void; build(ignoreEditorData?: boolean): void; loadGraph(): void; showWaitScreen(): void; hideWaitScreen(): void; reOrganize(editorData?: BABYLON.Nullable, isImportingAFrame?: boolean): void; onWheel: (evt: WheelEvent) => void; emitNewBlock(blockType: string, targetX: number, targetY: number): BABYLON.NodeEditor.SharedUIComponents.GraphNode | undefined; dropNewBlock(event: React.DragEvent): void; handlePopUp: () => void; handleClosingPopUp: () => void; initiatePreviewArea: (canvas?: HTMLCanvasElement) => void; createPopUp: () => void; createPreviewMeshControlHostAsync: (options: IInternalPreviewAreaOptions, parentControl: BABYLON.Nullable) => Promise; createPreviewHostAsync: (options: IInternalPreviewAreaOptions, parentControl: BABYLON.Nullable) => Promise; fixPopUpStyles: (document: Document) => void; render(): import("react/jsx-runtime").JSX.Element; } export class GlobalState { hostElement: HTMLElement; hostDocument: Document; hostWindow: Window; stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager; onBuiltObservable: BABYLON.Observable; onResetRequiredObservable: BABYLON.Observable; onClearUndoStack: BABYLON.Observable; onZoomToFitRequiredObservable: BABYLON.Observable; onReOrganizedRequiredObservable: BABYLON.Observable; onLogRequiredObservable: BABYLON.Observable; onIsLoadingChanged: BABYLON.Observable; onLightUpdated: BABYLON.Observable; onBackgroundHDRUpdated: BABYLON.Observable; onPreviewBackgroundChanged: BABYLON.Observable; onBackFaceCullingChanged: BABYLON.Observable; onDepthPrePassChanged: BABYLON.Observable; onAnimationCommandActivated: BABYLON.Observable; onImportFrameObservable: BABYLON.Observable; onPopupClosedObservable: BABYLON.Observable; onDropEventReceivedObservable: BABYLON.Observable; onGetNodeFromBlock: (block: BABYLON.NodeMaterialBlock) => BABYLON.NodeEditor.SharedUIComponents.GraphNode; previewType: PreviewType; previewFile: File; envType: PreviewType; envFile: File; particleSystemBlendMode: number; listOfCustomPreviewFiles: File[]; rotatePreview: boolean; backgroundColor: BABYLON.Color4; backFaceCulling: boolean; depthPrePass: boolean; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; hemisphericLight: boolean; directionalLight0: boolean; directionalLight1: boolean; backgroundHDR: boolean; controlCamera: boolean; _mode: BABYLON.NodeMaterialModes; _engine: number; pointerOverCanvas: boolean; filesInput: BABYLON.FilesInput; onRefreshPreviewMeshControlComponentRequiredObservable: BABYLON.Observable; previewTexture: BABYLON.Nullable; pickingTexture: BABYLON.Nullable; onPreviewSceneAfterRenderObservable: BABYLON.Observable; onPreviewUpdatedObservable: BABYLON.Observable; debugBlocksToRefresh: BABYLON.NodeMaterialDebugBlock[]; forcedDebugBlock: BABYLON.Nullable; mcpSessionUrl: string | null; mcpSessionConnected: boolean; mcpEventSource: EventSource | null; onMcpSessionStateChangedObservable: BABYLON.Observable; /** Gets the mode */ get mode(): BABYLON.NodeMaterialModes; /** Sets the mode */ set mode(m: BABYLON.NodeMaterialModes); /** Gets the engine */ get engine(): number; /** Sets the engine */ set engine(e: number); private _nodeMaterial; /** * Gets the current node material */ get nodeMaterial(): BABYLON.NodeMaterial; /** * Sets the current node material */ set nodeMaterial(nodeMaterial: BABYLON.NodeMaterial); customSave?: { label: string; action: (data: string) => Promise; }; constructor(); storeEditorData(serializationObject: any, frame?: BABYLON.Nullable): void; } export class BlockTools { static GetBlockFromString(data: string, scene: BABYLON.Scene, nodeMaterial: BABYLON.NodeMaterial): BABYLON.AmbientOcclusionBlock | BABYLON.NodeMaterialDebugBlock | BABYLON.MatrixSplitterBlock | BABYLON.StorageWriteBlock | BABYLON.StorageReadBlock | BABYLON.LoopBlock | BABYLON.ColorConverterBlock | BABYLON.NodeMaterialTeleportInBlock | BABYLON.NodeMaterialTeleportOutBlock | BABYLON.HeightToNormalBlock | BABYLON.ElbowBlock | BABYLON.TwirlBlock | BABYLON.VoronoiNoiseBlock | BABYLON.ScreenSpaceBlock | BABYLON.CloudBlock | BABYLON.MatrixBuilderBlock | BABYLON.DesaturateBlock | BABYLON.RefractBlock | BABYLON.ReflectBlock | BABYLON.DerivativeBlock | BABYLON.Rotate2dBlock | BABYLON.PannerBlock | BABYLON.NormalBlendBlock | BABYLON.WorleyNoise3DBlock | BABYLON.SimplexPerlin3DBlock | BABYLON.BonesBlock | BABYLON.InstancesBlock | BABYLON.MorphTargetsBlock | BABYLON.DiscardBlock | BABYLON.PrePassTextureBlock | BABYLON.ImageProcessingBlock | BABYLON.ColorMergerBlock | BABYLON.VectorMergerBlock | BABYLON.ColorSplitterBlock | BABYLON.VectorSplitterBlock | BABYLON.TextureBlock | BABYLON.ReflectionTextureBlock | BABYLON.LightBlock | BABYLON.FogBlock | BABYLON.VertexOutputBlock | BABYLON.FragmentOutputBlock | BABYLON.PrePassOutputBlock | BABYLON.AddBlock | BABYLON.ClampBlock | BABYLON.ScaleBlock | BABYLON.CrossBlock | BABYLON.DotBlock | BABYLON.PowBlock | BABYLON.MultiplyBlock | BABYLON.TransformBlock | BABYLON.TrigonometryBlock | BABYLON.RemapBlock | BABYLON.NormalizeBlock | BABYLON.FresnelBlock | BABYLON.LerpBlock | BABYLON.NLerpBlock | BABYLON.DivideBlock | BABYLON.SubtractBlock | BABYLON.ModBlock | BABYLON.StepBlock | BABYLON.SmoothStepBlock | BABYLON.OneMinusBlock | BABYLON.ReciprocalBlock | BABYLON.ViewDirectionBlock | BABYLON.LightInformationBlock | BABYLON.MaxBlock | BABYLON.MinBlock | BABYLON.LengthBlock | BABYLON.DistanceBlock | BABYLON.NegateBlock | BABYLON.PerturbNormalBlock | BABYLON.TBNBlock | BABYLON.RandomNumberBlock | BABYLON.ReplaceColorBlock | BABYLON.PosterizeBlock | BABYLON.ArcTan2Block | BABYLON.GradientBlock | BABYLON.FrontFacingBlock | BABYLON.MeshAttributeExistsBlock | BABYLON.WaveBlock | BABYLON.InputBlock | BABYLON.PBRMetallicRoughnessBlock | BABYLON.SheenBlock | BABYLON.AnisotropyBlock | BABYLON.ReflectionBlock | BABYLON.ClearCoatBlock | BABYLON.RefractionBlock | BABYLON.SubSurfaceBlock | BABYLON.IridescenceBlock | BABYLON.CurrentScreenBlock | BABYLON.ParticleTextureBlock | BABYLON.ParticleRampGradientBlock | BABYLON.ParticleBlendMultiplyBlock | BABYLON.FragCoordBlock | BABYLON.ScreenSizeBlock | BABYLON.SceneDepthBlock | BABYLON.ConditionalBlock | BABYLON.ImageSourceBlock | BABYLON.ClipPlanesBlock | BABYLON.FragDepthBlock | BABYLON.ShadowMapBlock | BABYLON.TriPlanarBlock | BABYLON.MatrixTransposeBlock | BABYLON.MatrixDeterminantBlock | BABYLON.CurveBlock | BABYLON.GaussianSplattingBlock | BABYLON.GaussianBlock | BABYLON.SplatReaderBlock | null; static GetColorFromConnectionNodeType(type: BABYLON.NodeMaterialBlockConnectionPointTypes): string; static GetConnectionNodeTypeFromString(type: string): BABYLON.NodeMaterialBlockConnectionPointTypes.Float | BABYLON.NodeMaterialBlockConnectionPointTypes.Vector2 | BABYLON.NodeMaterialBlockConnectionPointTypes.Vector3 | BABYLON.NodeMaterialBlockConnectionPointTypes.Vector4 | BABYLON.NodeMaterialBlockConnectionPointTypes.Color3 | BABYLON.NodeMaterialBlockConnectionPointTypes.Color4 | BABYLON.NodeMaterialBlockConnectionPointTypes.Matrix | BABYLON.NodeMaterialBlockConnectionPointTypes.AutoDetect; static GetStringFromConnectionNodeType(type: BABYLON.NodeMaterialBlockConnectionPointTypes): "" | "Float" | "Vector2" | "Vector3" | "Vector4" | "Matrix" | "Color3" | "Color4"; } interface ITextureLineComponentProps { texture: BABYLON.BaseTexture; width: number; height: number; globalState?: any; hideChannelSelect?: boolean; } export interface ITextureLineComponentState { displayRed: boolean; displayGreen: boolean; displayBlue: boolean; displayAlpha: boolean; face: number; } export class TextureLineComponent extends React.Component { private _canvasRef; constructor(props: ITextureLineComponentProps); shouldComponentUpdate(): boolean; componentDidMount(): void; componentDidUpdate(): void; updatePreview(): void; static UpdatePreview(previewCanvas: HTMLCanvasElement, texture: BABYLON.BaseTexture, width: number, options: ITextureLineComponentState, onReady?: () => void, globalState?: any): Promise; render(): import("react/jsx-runtime").JSX.Element; } export interface ICheckBoxLineComponentProps { label: string; target?: any; propertyName?: string; isSelected?: () => boolean; onSelect?: (value: boolean) => void; onValueChanged?: () => void; onPropertyChangedObservable?: BABYLON.Observable; disabled?: boolean; } export class CheckBoxLineComponent extends React.Component { private static _UniqueIdSeed; private _uniqueId; private _localChange; constructor(props: ICheckBoxLineComponentProps); shouldComponentUpdate(nextProps: ICheckBoxLineComponentProps, nextState: { isSelected: boolean; isDisabled: boolean; }): boolean; onChange(): void; renderFluent(): import("react/jsx-runtime").JSX.Element; renderOriginal(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } export const RegisterTypeLedger: () => void; export const RegisterToPropertyTabManagers: () => void; export const RegisterToDisplayManagers: () => void; export const RegisterNodePortDesign: (stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager) => void; export const RegisterExportData: (stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager) => void; export const RegisterElbowSupport: (stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager) => void; export const RegisterDefaultInput: (stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager) => void; export const RegisterDebugSupport: (stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager) => void; export class ConnectionPointPortData implements BABYLON.NodeEditor.SharedUIComponents.IPortData { private _connectedPort; private _nodeContainer; data: BABYLON.NodeMaterialConnectionPoint; get name(): string; get internalName(): string; get isExposedOnFrame(): boolean; set isExposedOnFrame(value: boolean); get exposedPortPosition(): number; set exposedPortPosition(value: number); get isConnected(): boolean; get isInactive(): boolean; get connectedPort(): BABYLON.Nullable; set connectedPort(value: BABYLON.Nullable); get direction(): BABYLON.NodeEditor.SharedUIComponents.PortDataDirection; get ownerData(): BABYLON.NodeMaterialBlock; get needDualDirectionValidation(): boolean; get hasEndpoints(): boolean; get endpoints(): BABYLON.NodeEditor.SharedUIComponents.IPortData[]; constructor(connectionPoint: BABYLON.NodeMaterialConnectionPoint, nodeContainer: BABYLON.NodeEditor.SharedUIComponents.INodeContainer); updateDisplayName(newName: string): void; connectTo(port: BABYLON.NodeEditor.SharedUIComponents.IPortData): void; canConnectTo(port: BABYLON.NodeEditor.SharedUIComponents.IPortData): boolean; disconnectFrom(port: BABYLON.NodeEditor.SharedUIComponents.IPortData): void; checkCompatibilityState(port: BABYLON.NodeEditor.SharedUIComponents.IPortData): 0 | BABYLON.NodeMaterialConnectionPointCompatibilityStates.TypeIncompatible | BABYLON.NodeMaterialConnectionPointCompatibilityStates.TargetIncompatible | BABYLON.NodeMaterialConnectionPointCompatibilityStates.HierarchyIssue; getCompatibilityIssueMessage(issue: number, targetNode: BABYLON.NodeEditor.SharedUIComponents.GraphNode, targetPort: BABYLON.NodeEditor.SharedUIComponents.IPortData): string; } export class BlockNodeData implements BABYLON.NodeEditor.SharedUIComponents.INodeData { data: BABYLON.NodeMaterialBlock; private _inputs; private _outputs; get uniqueId(): number; get name(): string; getClassName(): string; get isInput(): boolean; get inputs(): BABYLON.NodeEditor.SharedUIComponents.IPortData[]; get outputs(): BABYLON.NodeEditor.SharedUIComponents.IPortData[]; get comments(): string; set comments(value: string); get executionTime(): number; getPortByName(name: string): BABYLON.NodeEditor.SharedUIComponents.IPortData | null; dispose(): void; prepareHeaderIcon(iconDiv: HTMLDivElement, img: HTMLImageElement): void; get invisibleEndpoints(): BABYLON.NodeMaterialTeleportOutBlock[] | null; constructor(data: BABYLON.NodeMaterialBlock, nodeContainer: BABYLON.NodeEditor.SharedUIComponents.INodeContainer); get canBeActivated(): boolean; get isActive(): any; setIsActive(value: boolean): void; } export class VectorMergerPropertyTabComponent extends React.Component { constructor(props: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps); render(): import("react/jsx-runtime").JSX.Element; } type ReflectionTexture = BABYLON.ReflectionTextureBlock | BABYLON.ReflectionBlock | BABYLON.RefractionBlock; type AnyTexture = BABYLON.TextureBlock | ReflectionTexture | BABYLON.CurrentScreenBlock | BABYLON.ParticleTextureBlock | BABYLON.TriPlanarBlock; export class TexturePropertyTabComponent extends React.Component { get textureBlock(): AnyTexture; constructor(props: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps); UNSAFE_componentWillUpdate(nextProps: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps, nextState: { isEmbedded: boolean; loadAsCubeTexture: boolean; }): void; private _generateRandomForCache; updateAfterTextureLoad(): void; removeTexture(): void; _prepareTexture(): void; /** * Replaces the texture of the node * @param file the file of the texture to use */ replaceTexture(file: File): void; replaceTextureWithUrl(url: string): void; render(): import("react/jsx-runtime").JSX.Element; } export class TeleportOutPropertyTabComponent extends React.Component { private _onUpdateRequiredObserver; constructor(props: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps); componentDidMount(): void; componentWillUnmount(): void; render(): import("react/jsx-runtime").JSX.Element; } export interface IFrameNodePortPropertyTabComponentProps { stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager; nodePort: BABYLON.NodeEditor.SharedUIComponents.NodePort; } export class NodePortPropertyTabComponent extends React.Component { constructor(props: IFrameNodePortPropertyTabComponentProps); toggleExposeOnFrame(value: boolean): void; render(): import("react/jsx-runtime").JSX.Element; } export class LightPropertyTabComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } export class LightInformationPropertyTabComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } export class InputPropertyTabComponent extends React.Component { private _onValueChangedObserver; constructor(props: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps); componentDidMount(): void; componentWillUnmount(): void; renderValue(globalState: GlobalState): import("react/jsx-runtime").JSX.Element | null; setDefaultValue(): void; render(): import("react/jsx-runtime").JSX.Element; } export class ImageSourcePropertyTabComponent extends React.Component { get imageSourceBlock(): BABYLON.ImageSourceBlock; constructor(props: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps); UNSAFE_componentWillUpdate(nextProps: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps, nextState: { isEmbedded: boolean; loadAsCubeTexture: boolean; }): void; private _generateRandomForCache; updateAfterTextureLoad(): void; removeTexture(): void; _prepareTexture(): void; /** * Replaces the texture of the node * @param file the file of the texture to use */ replaceTexture(file: File): void; replaceTextureWithUrl(url: string): void; render(): import("react/jsx-runtime").JSX.Element; } interface IGradientStepComponentProps { stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager; step: BABYLON.GradientBlockColorStep; lineIndex: number; onDelete: () => void; onUpdateStep: () => void; onCheckForReOrder: () => void; onCopy?: () => void; } export class GradientStepComponent extends React.Component { constructor(props: IGradientStepComponentProps); updateColor(color: string): void; updateStep(gradient: number): void; onPointerUp(): void; render(): import("react/jsx-runtime").JSX.Element; } export class GradientPropertyTabComponent extends React.Component { private _onValueChangedObserver; constructor(props: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps); componentDidMount(): void; componentWillUnmount(): void; forceRebuild(): void; deleteStep(step: BABYLON.GradientBlockColorStep): void; copyStep(step: BABYLON.GradientBlockColorStep): void; addNewStep(): void; checkForReOrder(): void; renderOriginal(): import("react/jsx-runtime").JSX.Element; renderFluent(): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } export class DefaultPropertyTabComponent extends React.Component { constructor(props: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps); render(): import("react/jsx-runtime").JSX.Element; } /** * NOTE This is intentionally a function to avoid another wrapper JSX element around the lineContainerComponent, and will ensure * the lineContainerComponent gets properly rendered as a child of the Accordion * @param props * @returns */ export function GetGeneralProperties(props: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps): import("react/jsx-runtime").JSX.Element; /** * NOTE This is intentionally a function to avoid another wrapper JSX element around the lineContainerComponent, and will ensure * the lineContainerComponent gets properly rendered as a child of the Accordion * @param props * @returns */ export function GetGenericProperties(props: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps): import("react/jsx-runtime").JSX.Element; export interface IFramePropertyTabComponentProps { globalState: GlobalState; frame: BABYLON.NodeEditor.SharedUIComponents.GraphFrame; } export class FramePropertyTabComponent extends React.Component { private _onFrameExpandStateChangedObserver; constructor(props: IFramePropertyTabComponentProps); componentDidMount(): void; componentWillUnmount(): void; render(): import("react/jsx-runtime").JSX.Element; } export interface IFrameNodePortPropertyTabComponentProps { stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager; globalState: GlobalState; frameNodePort: BABYLON.NodeEditor.SharedUIComponents.FrameNodePort; frame: BABYLON.NodeEditor.SharedUIComponents.GraphFrame; } export class FrameNodePortPropertyTabComponent extends React.Component { private _onFramePortPositionChangedObserver; private _onSelectionChangedObserver; constructor(props: IFrameNodePortPropertyTabComponentProps); componentWillUnmount(): void; render(): import("react/jsx-runtime").JSX.Element; } export class DebugNodePropertyTabComponent extends React.Component { refreshAll(): void; render(): import("react/jsx-runtime").JSX.Element; } export class ColorMergerPropertyTabComponent extends React.Component { constructor(props: BABYLON.NodeEditor.SharedUIComponents.IPropertyComponentProps); render(): import("react/jsx-runtime").JSX.Element; } export class TrigonometryDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class TextureDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { private _previewCanvas; private _previewImage; getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class TeleportOutDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { private _hasHighlights; getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; onSelectionChanged(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, selectedData: BABYLON.Nullable, manager: BABYLON.NodeEditor.SharedUIComponents.StateManager): void; onDispose(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, manager: BABYLON.NodeEditor.SharedUIComponents.StateManager): void; } export class TeleportInDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { private _hasHighlights; getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; onSelectionChanged(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, selectedData: BABYLON.Nullable, manager: BABYLON.NodeEditor.SharedUIComponents.StateManager): void; onDispose(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, manager: BABYLON.NodeEditor.SharedUIComponents.StateManager): void; } export class RemapDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; private _extractInputValue; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class PBRDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class OutputDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class MeshAttributeExistsDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; updatePreviewContent(): void; } export class LoopDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class InputDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; static GetBaseType(type: BABYLON.NodeMaterialBlockConnectionPointTypes): string; getBackgroundColor(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class ImageSourceDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { private _previewCanvas; private _previewImage; getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class GradientDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class ElbowDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; updatePreviewContent(_nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, _contentArea: HTMLDivElement): void; updateFullVisualContent(data: BABYLON.NodeEditor.SharedUIComponents.INodeData, visualContent: BABYLON.NodeEditor.SharedUIComponents.VisualContentDescription): void; } export class DiscardDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class DepthSourceDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; updatePreviewContent(): void; } export class DebugDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { private _previewCanvas; private _previewImage; private _onPreviewSceneAfterRenderObserver; getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; onSelectionChanged?(data: BABYLON.NodeEditor.SharedUIComponents.INodeData, selectedData: BABYLON.Nullable, manager: BABYLON.NodeEditor.SharedUIComponents.StateManager): void; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; updateFullVisualContent(data: BABYLON.NodeEditor.SharedUIComponents.INodeData, visualContent: BABYLON.NodeEditor.SharedUIComponents.VisualContentDescription): void; } export class CurveDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } export class ConditionalDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; updatePreviewContent(): void; } export class ClampDisplayManager implements BABYLON.NodeEditor.SharedUIComponents.IDisplayManager { getHeaderClass(): string; shouldDisplayPortLabels(): boolean; getHeaderText(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getBackgroundColor(): string; updatePreviewContent(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; } interface IPropertyTabComponentProps { globalState: GlobalState; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; } interface IPropertyTabComponentState { currentNode: BABYLON.Nullable; currentFrame: BABYLON.Nullable; currentFrameNodePort: BABYLON.Nullable; currentNodePort: BABYLON.Nullable; uploadInProgress: boolean; } export class PropertyTabComponent extends React.Component { private _onBuiltObserver; private _modeSelect; constructor(props: IPropertyTabComponentProps); componentDidMount(): void; componentWillUnmount(): void; processInputBlockUpdate(ib: BABYLON.InputBlock): void; renderInputBlock(block: BABYLON.InputBlock): import("react/jsx-runtime").JSX.Element | null; load(file: File): void; loadFrame(file: File): void; save(): void; customSave(): void; saveSFE(): Promise; saveToSnippetServer(): void; loadFromSnippet(): void; changeMode(value: any, force?: boolean, loadDefault?: boolean): boolean; render(): import("react/jsx-runtime").JSX.Element | null | undefined; } interface IInputsPropertyTabComponentProps { globalState: GlobalState; inputs: BABYLON.InputBlock[]; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; } /** * NOTE if being used within a PropertyTabComponentBase (which is a wrapper for Accordion), call as a function rather than * rendering as a component. This will avoid a wrapper JSX element existing before the lineContainerComponent and will ensure * the lineContainerComponent gets properly rendered as a child of the Accordion * @param props * @returns */ export function GetInputProperties(props: IInputsPropertyTabComponentProps): import("react/jsx-runtime").JSX.Element; interface IVector4PropertyTabComponentProps { globalState: GlobalState; inputBlock: BABYLON.InputBlock; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; } export class Vector4PropertyTabComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } interface IVector3PropertyTabComponentProps { globalState: GlobalState; inputBlock: BABYLON.InputBlock; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; } export class Vector3PropertyTabComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } interface IVector2PropertyTabComponentProps { globalState: GlobalState; inputBlock: BABYLON.InputBlock; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; } export class Vector2PropertyTabComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } interface IMatrixPropertyTabComponentProps { globalState: GlobalState; inputBlock: BABYLON.InputBlock; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; } export class MatrixPropertyTabComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } interface IFloatPropertyTabComponentProps { globalState: GlobalState; inputBlock: BABYLON.InputBlock; } export class FloatPropertyTabComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } interface IColor4PropertyTabComponentProps { globalState: GlobalState; inputBlock: BABYLON.InputBlock; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; } export class Color4PropertyTabComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } interface IColor3PropertyTabComponentProps { globalState: GlobalState; inputBlock: BABYLON.InputBlock; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; } export class Color3PropertyTabComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } export enum PreviewType { Sphere = 0, Box = 1, Torus = 2, Cylinder = 3, Plane = 4, ShaderBall = 5, DefaultParticleSystem = 6, Bubbles = 7, Smoke = 8, Rain = 9, Explosion = 10, Fire = 11, Parrot = 12, BricksSkull = 13, Plants = 14, Custom = 15, Room = 16 } interface IPreviewMeshControlComponent { globalState: GlobalState; togglePreviewAreaComponent: () => void; onMounted?: () => void; } export class PreviewMeshControlComponent extends React.Component { private _colorInputRef; private _filePickerRef; private _envPickerRef; private _onResetRequiredObserver; private _onDropEventObserver; private _onRefreshPreviewMeshControlComponentRequiredObserver; constructor(props: IPreviewMeshControlComponent); componentWillUnmount(): void; componentDidMount(): void; changeMeshType(newOne: PreviewType): void; useCustomMesh(evt: any): void; useCustomEnv(evt: any): void; onPopUp(): void; changeAnimation(): void; changeBackground(value: string): void; changeBackgroundClick(): void; render(): import("react/jsx-runtime").JSX.Element; } export class PreviewManager { private _nodeMaterial; private _onBuildObserver; private _onPreviewCommandActivatedObserver; private _onAnimationCommandActivatedObserver; private _onUpdateRequiredObserver; private _onPreviewBackgroundChangedObserver; private _onBackFaceCullingChangedObserver; private _onDepthPrePassChangedObserver; private _onLightUpdatedObserver; private _onBackgroundHDRUpdatedObserver; private _engine; private _scene; private _meshes; private _camera; private _material; private _globalState; private _currentType; private _lightParent; private _postprocess; private _proceduralTexture; private _particleSystem; private _layer; private _hdrSkyBox; private _hdrTexture; private _serializeMaterial; /** * Create a new Preview Manager * @param targetCanvas defines the canvas to render to * @param globalState defines the global state */ constructor(targetCanvas: HTMLCanvasElement, globalState: GlobalState); _initAsync(targetCanvas: HTMLCanvasElement): Promise; private _reset; private _handleAnimations; private _prepareLights; private _prepareBackgroundHDR; private _prepareScene; /** * Default Environment URL */ static DefaultEnvironmentURL: string; private _refreshPreviewMesh; private _loadParticleSystem; private _forceCompilationAsync; private _updatePreview; dispose(): void; } interface IPreviewAreaComponentProps { globalState: GlobalState; onMounted?: () => void; } export class PreviewAreaComponent extends React.Component { private _onIsLoadingChangedObserver; private _onResetRequiredObserver; private _consoleRef; constructor(props: IPreviewAreaComponentProps); componentDidMount(): void; componentWillUnmount(): void; changeBackFaceCulling(value: boolean): void; changeDepthPrePass(value: boolean): void; _onPointerOverCanvas: () => void; _onPointerOutCanvas: () => void; changeParticleSystemBlendMode(newOne: number): void; processPointerMove(e: React.PointerEvent): Promise; onKeyUp(e: React.KeyboardEvent): void; render(): import("react/jsx-runtime").JSX.Element; } interface INodeListComponentProps { globalState: GlobalState; } export class NodeListComponent extends React.Component { private _onResetRequiredObserver; private static _Tooltips; private _customFrameList; private _customBlockList; constructor(props: INodeListComponentProps); componentWillUnmount(): void; filterContent(filter: string): void; loadCustomFrame(file: File): void; removeItem(value: string): void; loadCustomBlock(file: File): void; removeCustomBlock(value: string): void; renderFluent(blockMenu: JSX.Element[]): import("react/jsx-runtime").JSX.Element; renderOriginal(blockMenu: JSX.Element[]): import("react/jsx-runtime").JSX.Element; render(): import("react/jsx-runtime").JSX.Element; } interface IMcpSessionComponentProps { globalState: GlobalState; } /** * Panel that connects to a live MCP session for bidirectional material sync. * @param props - Component props. * @returns The React element. */ export var McpSessionComponent: React.FunctionComponent; interface ILogComponentProps { globalState: GlobalState; } export class LogEntry { message: string; isError: boolean; time: Date; constructor(message: string, isError: boolean); } export class LogComponent extends React.Component { private _logConsoleRef; constructor(props: ILogComponentProps); componentDidMount(): void; componentDidUpdate(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export class PropertyChangedEvent { object: any; property: string; value: any; initialValue: any; allowNullValue?: boolean; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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; /** * Whether an undo operation is available */ get canUndo(): boolean; /** * Whether a redo operation is available */ get canRedo(): boolean; /** * Undo the latest operation */ undo(): void; /** * Redo the latest undo operation */ redo(): void; /** * Disposes the stack */ dispose(): void; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export function copyCommandToClipboard(strCommand: string): void; export function getClassNameWithNamespace(obj: any): { className: string; babylonNamespace: string; }; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Class used to provide lock mechanism */ export class LockObject { /** * Gets or set if the lock is engaged */ lock: boolean; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface ITextBlockPropertyGridComponentProps { textBlock: BABYLON.GUI.TextBlock; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class TextBlockPropertyGridComponent extends React.Component { constructor(props: ITextBlockPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IStackPanelPropertyGridComponentProps { stackPanel: BABYLON.GUI.StackPanel; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class StackPanelPropertyGridComponent extends React.Component { constructor(props: IStackPanelPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface ISliderPropertyGridComponentProps { slider: BABYLON.GUI.Slider; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class SliderPropertyGridComponent extends React.Component { constructor(props: ISliderPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IScrollViewerPropertyGridComponentProps { scrollViewer: BABYLON.GUI.ScrollViewer; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class ScrollViewerPropertyGridComponent extends React.Component { constructor(props: IScrollViewerPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IRectanglePropertyGridComponentProps { rectangle: BABYLON.GUI.Rectangle; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class RectanglePropertyGridComponent extends React.Component { constructor(props: IRectanglePropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IRadioButtonPropertyGridComponentProps { radioButtons: BABYLON.GUI.RadioButton[]; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class RadioButtonPropertyGridComponent extends React.Component { constructor(props: IRadioButtonPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface ILinePropertyGridComponentProps { line: BABYLON.GUI.Line; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IInputTextPropertyGridComponentProps { inputText: BABYLON.GUI.InputText; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class InputTextPropertyGridComponent extends React.Component { constructor(props: IInputTextPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IImagePropertyGridComponentProps { image: BABYLON.GUI.Image; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class ImagePropertyGridComponent extends React.Component { constructor(props: IImagePropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IImageBasedSliderPropertyGridComponentProps { imageBasedSlider: BABYLON.GUI.ImageBasedSlider; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class ImageBasedSliderPropertyGridComponent extends React.Component { constructor(props: IImageBasedSliderPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IGridPropertyGridComponentProps { grid: BABYLON.GUI.Grid; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IEllipsePropertyGridComponentProps { ellipse: BABYLON.GUI.Ellipse; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class EllipsePropertyGridComponent extends React.Component { constructor(props: IEllipsePropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IControlPropertyGridComponentProps { control: BABYLON.GUI.Control; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class ControlPropertyGridComponent extends React.Component { constructor(props: IControlPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface ICommonControlPropertyGridComponentProps { controls?: BABYLON.GUI.Control[]; control?: BABYLON.GUI.Control; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IColorPickerPropertyGridComponentProps { colorPicker: BABYLON.GUI.ColorPicker; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class ColorPickerPropertyGridComponent extends React.Component { constructor(props: IColorPickerPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface ICheckboxPropertyGridComponentProps { checkbox: BABYLON.GUI.Checkbox; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; onPropertyChangedObservable?: BABYLON.Observable; } export class CheckboxPropertyGridComponent extends React.Component { constructor(props: ICheckboxPropertyGridComponentProps); render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Split container properties */ export interface ISplitContainerProps { /** * Unique identifier */ id?: string; /** * Split direction */ direction: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * ## `.babylonproj` project file format * * The `.babylonproj` zip on disk packages three layers: * 1. **SmartAsset registry** — URL references to external assets (glb/gltf/textures * loaded via SAM). Local blob/data assets are bundled inside the zip and * extracted to fresh blob URLs on load. * 2. **OverrideManager state** — declarative property overrides applied after load. * 3. **Companion `.babylon`** — meshes, lights, cameras, transform nodes, and * materials that are *not* tracked by SAM (i.e. user-created scene content). * Plus a `companionBindings` side table mapping material texture slots back * to SAM-tracked textures so re-attachment works without embedding texture * bytes in the companion. * * ### What round-trips cleanly * - SAM-tracked assets (re-fetched from their URLs or extracted from the zip) * - User-created `Mesh` geometry, `Material`s (Standard/PBR/Multi/Node), and * `*Texture` slot bindings to SAM textures * - `Light`s, `Camera`s, `TransformNode`s, scene/material image processing, * clear color, fog, environment intensity * - Property overrides on any of the above * * ### Known gaps (not preserved on save/load) * - `PostProcess` attachments to cameras (a post-process attaches to a *specific* * camera instance; we dispose+recreate cameras, leaving post-processes orphaned). * - `AdvancedDynamicTexture` GUI controls — not in `.babylon` format. * - Audio (`Sound` / `AudioEngine` state). * - Particle systems with runtime state, baked vertex animations. * - Complex shader-driven content like GaussianSplatting: the mesh round-trips * but its companion utility materials (`gaussianSplattingDepth`, `ProxyMaterial`) * get duplicated on each load cycle. * - Skeleton animation playback state. * * If you hit a "the scene looks different after load" issue, it's almost * certainly one of the gaps above rather than camera or mesh state drift. */ /** * Reserved smart asset key for user-created objects (materials, lights, cameras) * that are persisted as a companion `.babylon` file alongside the project JSON. */ export const ProjectLocalsKey = "__project_locals__"; /** * The result of serializing a project. Contains the project JSON and, * if the scene has user-created objects, a companion `.babylon` blob. */ export interface IProjectBundle { /** The project JSON document (assets + overrides, no embedded scene data). */ readonly project: ISerializedProject; /** * A companion `.babylon` file containing user-created objects not owned by * any smart asset. Undefined if there are no such objects. */ readonly companionBabylon?: Blob; } /** * Maps each user-created material (by name) to its texture-slot bindings. * A binding records "this `*Texture` slot on this material should be * re-attached to the SmartAsset registered under this key" so that texture * references survive a save/load round-trip without embedding the texture * data inside the companion `.babylon`. */ export type CompanionTextureBindings = Record>; /** * A versioned project file that composes a smart asset map with overrides. * This is the unified on-disk format for persisting a complete project. */ export interface ISerializedProject { /** Schema version. Must be 2 for the current version. */ readonly version: 2; /** Smart asset key→URL mappings (from SmartAssetManager). */ readonly assets: BABYLON.ISerializedSmartAssetMap["assets"]; /** Property overrides (from OverrideManager). */ readonly overrides: BABYLON.NodeEditor.SharedUIComponents.IOverrideEntry[]; /** * Optional bindings that re-attach SmartAsset-tracked textures to * user-created material slots after the companion `.babylon` loads. * Omitted when no user-created material references a SmartAsset texture. */ readonly companionBindings?: CompanionTextureBindings; } /** * Serializes a scene's smart asset map and override registry into a project * bundle. User-created objects (materials, lights, cameras not owned by any * smart asset) are serialized into a companion `.babylon` file rather than * embedded in the project JSON. * * Both managers are looked up (and created if missing) via their respective * `Get…Manager(scene)` accessors, so this function can be called on any scene. * * @param scene - The scene to serialize. * @param baseUrl - Optional base URL for making asset paths relative. * @returns A project bundle containing the JSON document and optional companion file. */ export function SerializeProject(scene: BABYLON.Scene, baseUrl?: string): IProjectBundle; /** * Loads a project file from a URL, File, or pre-parsed object. * Registers all asset entries on the scene's SmartAssetManager, loads all * assets (including the companion `.babylon` for user-created objects), then * applies all overrides via the OverrideManager. * * For loading the `.babylonproj` zip on-disk format, use {@link LoadProjectFileAsync} * instead — it extracts the zip and then calls this function with the embedded * JSON document. * * @param scene - The scene to populate. * @param source - A URL string, File object, or pre-parsed ISerializedProject. * @param rootUrl - Optional root URL for resolving relative asset paths. */ export function LoadProjectAsync(scene: BABYLON.Scene, source: string | File | ISerializedProject, rootUrl?: string): Promise; /** * Validates and parses a serialized project document. * @param data - The raw data to validate (typically parsed JSON). * @returns The validated project document. * @throws If the data does not conform to the expected schema. */ export function DeserializeProject(data: unknown): ISerializedProject; /** * Serializes a scene's project (smart assets + overrides) into a `.babylonproj` * zip bundle. * * The zip contains: * - `project.json` — the project document (assets + overrides) * - `__project_locals__.babylon` — companion file for user-created objects (if any) * - Bundled local asset files (blobs the user dragged in from disk) * * Remote URLs (http/https) are left as references and not bundled. * * @param scene - The scene to serialize. * @returns A Blob containing the zip bundle. */ export function SaveProjectFileAsync(scene: BABYLON.Scene): Promise; /** * Loads a `.babylonproj` zip bundle into a scene. Extracts all files, creates * blob URLs for bundled assets, and loads the project through SAM. * * @param scene - The scene to load the project into. * @param zipFile - The `.babylonproj` zip file to load. */ export function LoadProjectFileAsync(scene: BABYLON.Scene, zipFile: File): Promise; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Stateful handle for a scene's property override registry. * * Override behavior is exposed through module-level functions rather than * class methods so callers can import only the operations they need. * * Overrides are property diffs applied to scene objects identified by name. * They persist across reloads and are typically saved alongside a project * file. The override manager is fully independent of any other scene * subsystem (SmartAssetManager, loaders, etc.) — it works with any object * in the scene's standard collections (meshes, materials, lights, …) * regardless of how that object was created. * * When multiple objects share a name (e.g. two materials both called * "Default" loaded from different glTFs), {@link BABYLON.NodeEditor.SharedUIComponents.IOverrideEntry.targetIndex} * disambiguates: it stores the object's position among same-named siblings * at capture time and is used to pick the correct one at apply time. * * @example * ```typescript * AddOverride(scene, { * targetType: "materials", * targetName: "canPaint", * targetIndex: 0, * propertyPath: "albedoColor", * value: [1, 0, 0], * }); * ``` */ export type OverrideManager = { /** * The scene this manager is attached to. */ readonly scene: BABYLON.Scene; /** * Fires whenever the override registry or applied state changes. */ readonly onChangedObservable: BABYLON.Observable; }; /** * Returns the OverrideManager attached to the given scene, creating and * attaching one if none exists. * @param scene - The scene to look up or attach a manager to. * @returns The existing or newly created OverrideManager. */ export function GetOverrideManager(scene: BABYLON.Scene): OverrideManager; /** * Adds an observer that is notified whenever an OverrideManager is created. * @param callback - The callback to invoke with each newly created manager. * @returns The observer registration. */ export function AddOverrideManagerCreatedObserver(callback: (manager: OverrideManager) => void): BABYLON.Observer; /** * Options for {@link AddOverride}. */ export type AddOverrideOptions = { /** * If the `originalValue` field is present, the override is recorded *without* * re-applying it (the caller is presumed to have already mutated the entity) * and the field's content is captured as the property's pre-override * "original" so {@link RemoveOverride} can restore it later. * * Inspector-driven edits use this: by the time `onPropertyChanged` fires, * the binding has already written the new value, but it still has the prior * value in hand. Without this seeding path, an override created via * Inspector could never be reverted (the manager would have no record of * the pre-edit value). * * If the field is absent, the override is applied normally and the original * is captured by reading the property's current value on first apply. */ readonly originalValue?: unknown; }; /** * Adds an override entry and immediately applies it. * If an override with the same target coordinates already exists, it is replaced. * * When the caller has already mutated the target (e.g. an Inspector edit), * pass `{ originalValue }` containing the property's prior value — this seeds * the original-value map (so {@link RemoveOverride} can restore it) and skips * the redundant apply step. * @param scene - The scene whose override registry to update. * @param entry - The override to add. * @param options - Optional behavior modifiers; see {@link AddOverrideOptions}. */ export function AddOverride(scene: BABYLON.Scene, entry: BABYLON.NodeEditor.SharedUIComponents.IOverrideEntry, options?: AddOverrideOptions): void; /** * Removes a single override matching the given coordinates. Restores the * original value if one was captured. * @param scene - The scene whose override registry to update. * @param targetType - The target type. * @param targetName - The target object name. * @param targetIndex - The target index among same-named siblings. * @param propertyPath - The property path to un-override. * @returns True if an override was removed. */ export function RemoveOverride(scene: BABYLON.Scene, targetType: BABYLON.NodeEditor.SharedUIComponents.OverrideTargetType, targetName: string, targetIndex: number, propertyPath: string): boolean; /** * Returns all overrides currently registered with the scene. * @param scene - The scene whose override registry to read. * @returns A read-only array of override entries. */ export function GetOverrides(scene: BABYLON.Scene): readonly BABYLON.NodeEditor.SharedUIComponents.IOverrideEntry[]; /** * Removes all overrides, optionally restoring original values. * @param scene - The scene whose override registry to clear. * @param restoreOriginals - If true, restores all captured original values. */ export function ClearOverrides(scene: BABYLON.Scene, restoreOriginals?: boolean): void; /** * Updates the target coordinates on the override matching a specific (type, * old-name, old-index) so it follows an entity rename. Used by capture services * to keep overrides attached to a specific object after the user renames it. * * Only the override at the exact `(targetType, oldName, oldIndex)` slot is * updated, so other same-named siblings keep their own overrides untouched. * * @param scene - The scene whose override registry to update. * @param targetType - The target type. * @param oldName - The previous name of the renamed entity. * @param oldIndex - The previous index of the renamed entity among same-named siblings. * @param newName - The new name of the renamed entity. * @param newIndex - The new index of the renamed entity among same-named siblings. */ export function RenameOverrideTarget(scene: BABYLON.Scene, targetType: BABYLON.NodeEditor.SharedUIComponents.OverrideTargetType, oldName: string, oldIndex: number, newName: string, newIndex: number): void; /** * Rewrites override *values* that reference an entity by name when that entity * has been renamed. Mirrors {@link RenameOverrideTarget} but operates on the * `value` field rather than the `targetName` field, so overrides whose value * is `"ref:oldName"` (material/light/camera references) or `"texture:oldName"` * (non-SmartAsset texture references) follow the rename instead of silently * pointing at a non-existent entity. * * SmartAsset texture references (`"samTexture:"`) are unaffected because * the SmartAsset key is decoupled from the texture's runtime `name` field. * * @param scene - The scene whose override registry to update. * @param valueScheme - Which encoded-reference prefix to rewrite: `"ref"` for * material/light/camera references, `"texture"` for non-SAM textures. * @param oldName - The previous name embedded in the reference. * @param newName - The new name embedded in the reference. */ export function RenameOverrideValueReferences(scene: BABYLON.Scene, valueScheme: "ref" | "texture", oldName: string, newName: string): void; /** * Applies all overrides to their current targets in the scene. * * Call this after any scene mutation that might have invalidated previously * applied state (asset reload, object recreation, project load). The override * manager does not auto-subscribe to other scene subsystems — coordination is * the caller's responsibility, which keeps the override system independent. * @param scene - The scene whose overrides to apply. */ export function ApplyAllOverrides(scene: BABYLON.Scene): void; /** * Serializes all overrides to a JSON-compatible array. * The on-disk shape is identical to the in-memory `IOverrideEntry`. * @param scene - The scene whose overrides to serialize. * @returns An array of override entries (shallow copies). */ export function SerializeOverrides(scene: BABYLON.Scene): BABYLON.NodeEditor.SharedUIComponents.IOverrideEntry[]; /** * Loads overrides from a serialized array and applies them. * @param scene - The scene whose override registry to populate. * @param data - Array of override entries. */ export function DeserializeAndApplyOverrides(scene: BABYLON.Scene, data: BABYLON.NodeEditor.SharedUIComponents.IOverrideEntry[]): void; /** * Disposes the manager, clearing all overrides and detaching it from its scene. * Safe to call multiple times; subsequent calls are no-ops. Automatically invoked when the * owning scene is disposed. * @param manager - The override manager state. */ export function DisposeOverrideManager(manager: OverrideManager): void; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Defines the shape of an override entry — a property diff applied to a * scene object identified by name. Overrides target any object in the * scene's standard collections (meshes, materials, lights, etc.) regardless * of how that object was created. */ export interface IOverrideEntry { /** The type of object to target (e.g., "meshes", "materials", "lights"). */ readonly targetType: OverrideTargetType; /** The name of the target object. Use "" for scene-level overrides. */ readonly targetName: string; /** * Disambiguator for when multiple objects in `scene[targetType]` share the * same `targetName`. The override applies to the N-th match (0-based) at * apply time. When names are unique, use 0. */ readonly targetIndex: number; /** Dot-separated property path on the target (e.g., "albedoColor", "position.x"). */ readonly propertyPath: string; /** The override value. */ readonly value: OverrideValue; } /** * The types of scene objects that can be targeted by overrides. */ export type OverrideTargetType = "meshes" | "transformNodes" | "materials" | "textures" | "lights" | "cameras" | "animationGroups" | "scene"; /** * An override value. Supports scalars, color/vector arrays, object references, * and null (used to clear a slot, e.g. removing a material assignment). * - number: scalar property (e.g., intensity, alpha) * - string: string property, or "ref:name" / "samTexture:key" / "texture:name" object reference * - boolean: boolean property * - number[]: array property mapped to Vector3, Color3, Color4, etc. * - null: explicitly clear an object-typed slot */ export type OverrideValue = number | string | boolean | number[] | null; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export class TypeLedger { static PortDataBuilder: (port: BABYLON.NodeEditor.SharedUIComponents.NodePort, nodeContainer: BABYLON.NodeEditor.SharedUIComponents.INodeContainer) => BABYLON.NodeEditor.SharedUIComponents.IPortData; static NodeDataBuilder: (data: any, nodeContainer: BABYLON.NodeEditor.SharedUIComponents.INodeContainer) => BABYLON.NodeEditor.SharedUIComponents.INodeData; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export const IsFramePortData: (variableToCheck: any) => variableToCheck is BABYLON.NodeEditor.SharedUIComponents.FramePortData; export const RefreshNode: (node: BABYLON.NodeEditor.SharedUIComponents.GraphNode, visitedNodes?: Set, visitedLinks?: Set, canvas?: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export class StateManager { data: any; hostDocument: Document; lockObject: any; modalIsDisplayed: boolean; historyStack: BABYLON.NodeEditor.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>; /** The source port data for the current drag operation, used for design-time compatibility checks */ candidateSourcePortData: BABYLON.Nullable; /** When true, ports glow red during drag when hovering over an incompatible target. Default false. */ enablePortCompatibilityHighlight: boolean; /** When true, nodes can display validation and breakpoint badge overlays. Default false. */ enableNodeBadges: boolean; 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: BABYLON.NodeEditor.SharedUIComponents.FrameNodePort | BABYLON.NodeEditor.SharedUIComponents.NodePort, nodeB: BABYLON.NodeEditor.SharedUIComponents.FrameNodePort | BABYLON.NodeEditor.SharedUIComponents.NodePort) => boolean; isDebugConnectionAllowed: (nodeA: BABYLON.NodeEditor.SharedUIComponents.FrameNodePort | BABYLON.NodeEditor.SharedUIComponents.NodePort, nodeB: BABYLON.NodeEditor.SharedUIComponents.FrameNodePort | BABYLON.NodeEditor.SharedUIComponents.NodePort) => boolean; applyNodePortDesign: (data: BABYLON.NodeEditor.SharedUIComponents.IPortData, element: HTMLElement, imgHost: HTMLImageElement, pip: HTMLDivElement) => boolean; getPortColor: (portData: BABYLON.NodeEditor.SharedUIComponents.IPortData) => string; storeEditorData: (serializationObject: any, frame?: BABYLON.Nullable) => void; getEditorDataMap: () => { [key: number]: number; }; getScene?: () => BABYLON.Scene; createDefaultInputData: (rootData: any, portData: BABYLON.NodeEditor.SharedUIComponents.IPortData, nodeContainer: BABYLON.NodeEditor.SharedUIComponents.INodeContainer) => BABYLON.Nullable<{ data: BABYLON.NodeEditor.SharedUIComponents.INodeData; name: string; }>; private _isRebuildQueued; queueRebuildCommand(): void; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface ISearchBoxComponentProps { stateManager: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export class PropertyLedger { static DefaultControl: React.ComponentClass; static RegisteredControls: { [key: string]: React.ComponentClass; }; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export class NodePort { portData: BABYLON.NodeEditor.SharedUIComponents.IPortData; node: BABYLON.NodeEditor.SharedUIComponents.GraphNode; protected _element: HTMLDivElement; protected _portContainer: HTMLElement; protected _imgHost: HTMLImageElement; protected _pip: HTMLDivElement; protected _stateManager: BABYLON.NodeEditor.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: BABYLON.NodeEditor.SharedUIComponents.IPortData, node: BABYLON.NodeEditor.SharedUIComponents.GraphNode, stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager, portUIcontainer?: HTMLDivElement); remove(): void; dispose(): void; static CreatePortElement(portData: BABYLON.NodeEditor.SharedUIComponents.IPortData, node: BABYLON.NodeEditor.SharedUIComponents.GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable, stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager): NodePort; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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; private _flowAnimationActive; onDisposedObservable: BABYLON.Observable; get isTargetCandidate(): boolean; set isTargetCandidate(value: boolean); get isVisible(): boolean; set isVisible(value: boolean); get portA(): BABYLON.NodeEditor.SharedUIComponents.FrameNodePort | BABYLON.NodeEditor.SharedUIComponents.NodePort; get portB(): BABYLON.NodeEditor.SharedUIComponents.FrameNodePort | BABYLON.NodeEditor.SharedUIComponents.NodePort | undefined; get nodeA(): BABYLON.NodeEditor.SharedUIComponents.GraphNode; get nodeB(): BABYLON.NodeEditor.SharedUIComponents.GraphNode | undefined; intersectsWith(rect: DOMRect): boolean; update(endX?: number, endY?: number, straight?: boolean): void; get path(): SVGPathElement; get selectionPath(): SVGPathElement; constructor(graphCanvas: BABYLON.NodeEditor.SharedUIComponents.GraphCanvasComponent, portA: BABYLON.NodeEditor.SharedUIComponents.NodePort, nodeA: BABYLON.NodeEditor.SharedUIComponents.GraphNode, portB?: BABYLON.NodeEditor.SharedUIComponents.NodePort, nodeB?: BABYLON.NodeEditor.SharedUIComponents.GraphNode); onClick(evt: MouseEvent): void; /** Ensure the shared SVG glow filter exists, return its id * @param svg the SVG element to check for the filter and add it to if not present * @returns the id of the glow filter to use in this SVG */ private static _EnsureGlowFilter; /** * Triggers a brief animated dot traveling along the link path from port A to port B. * @param durationMs how long the animation takes (default 600ms) * @param color the color of the dot (default green) */ triggerFlowAnimation(durationMs?: number, color?: string): void; /** * Disposes this visual link. * @param notify - Whether to notify observers that the link was disposed. * @param disconnectPorts - Whether to disconnect the underlying port data. */ dispose(notify?: boolean, disconnectPorts?: boolean): void; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export class NodeLedger { static RegisteredNodeNames: string[]; static NameFormatter: (name: string) => string; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * A free-floating sticky note annotation on the graph canvas. * * Sticky notes are lightweight, text-only overlays that live in the frame container. * They support dragging, resizing, and inline editing of both title and body text. * Unlike frames, they do not group or contain nodes. */ export class GraphStickyNote { /** The root DOM element for this sticky note. */ element: HTMLDivElement; private _ownerCanvas; private _id; private _x; private _y; private _width; private _height; private _name; private _body; private _color; private _headerElement; private _titleElement; private _bodyElement; private _resizeHandle; private _mouseStartX; private _mouseStartY; private _isDragging; private _isResizing; private _resizeStartW; private _resizeStartH; /** Unique ID for this sticky note */ get id(): number; /** X position in canvas space */ get x(): number; /** X position in canvas space */ set x(value: number); /** Y position in canvas space */ get y(): number; /** Y position in canvas space */ set y(value: number); /** Width in pixels */ get width(): number; /** Width in pixels */ set width(value: number); /** Height in pixels */ get height(): number; /** Height in pixels */ set height(value: number); /** Display name */ get name(): string; /** Display name */ set name(value: string); /** Body text content */ get body(): string; /** Body text content */ set body(value: string); /** Background color CSS value */ get color(): string; /** Background color CSS value */ set color(value: string); /** * Create a new sticky note on the canvas. * @param canvas - the owning graph canvas component */ constructor(canvas: BABYLON.NodeEditor.SharedUIComponents.GraphCanvasComponent); /** * Mark this note as visually selected or deselected. * @param selected - whether the note is selected */ setIsSelected(selected: boolean): void; /** * Serialize this sticky note to a plain data object. * @returns the serialized data */ serialize(): BABYLON.NodeEditor.SharedUIComponents.IStickyNoteData; /** * Create a sticky note from serialized data. * @param data - the serialized sticky note data * @param canvas - the owning graph canvas * @returns the new sticky note instance */ static Parse(data: BABYLON.NodeEditor.SharedUIComponents.IStickyNoteData, canvas: BABYLON.NodeEditor.SharedUIComponents.GraphCanvasComponent): GraphStickyNote; /** * Remove this sticky note from the canvas and clean up. */ dispose(): void; private _onDragStart; private _onDragMoveHandler; private _onDragEndHandler; private _onResizeStart; private _onResizeMoveHandler; private _onResizeEndHandler; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** A search result pointing to either a node or a frame. */ interface ISearchResult { node?: BABYLON.NodeEditor.SharedUIComponents.GraphNode; frame?: BABYLON.NodeEditor.SharedUIComponents.GraphFrame; label: string; } /** * Props for the GraphSearchComponent. */ export interface IGraphSearchComponentProps { /** The graph canvas to search within */ canvas: BABYLON.NodeEditor.SharedUIComponents.GraphCanvasComponent; } /** Internal state for GraphSearchComponent. */ interface IGraphSearchState { /** Whether the search overlay is visible */ visible: boolean; /** The current search query */ query: string; /** Index of the currently focused result */ currentIndex: number; /** Matching search results */ results: ISearchResult[]; } /** * An overlay search bar for finding nodes and frames in the graph by name or type. * Triggered via an observable; press Escape or the close button to dismiss. */ export class GraphSearchComponent extends React.Component { private _inputRef; private _escHandler; /** @internal */ constructor(props: IGraphSearchComponentProps); /** Show the search bar and focus the input. */ show(): void; /** Hide the search bar and clear highlights. */ hide(): void; private _search; private _applyHighlights; private _clearHighlights; private _navigateTo; private _goNext; private _goPrev; private _onKeyDown; /** @internal */ componentWillUnmount(): void; /** @internal */ render(): import("react/jsx-runtime").JSX.Element | null; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export class GraphNode { content: BABYLON.NodeEditor.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 _validationBadge; private _breakpointBadge; 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>; /** Direct access to the execution time label element for lightweight updates */ get executionTimeElement(): HTMLDivElement; addClassToVisual(className: string): void; removeClassFromVisual(className: string): void; /** * Shows a validation badge on the node header. * @param severity - "error" | "warning" | null. Pass null to hide the badge. * @param tooltip - tooltip text shown on hover. * @param onClick - optional callback invoked when the badge is clicked. */ setValidationState(severity: "error" | "warning" | null, tooltip?: string, onClick?: () => void): void; /** * Shows or hides a breakpoint indicator on the node. * @param active - true to show the red breakpoint dot, false to hide. * @param paused - true if execution is currently paused on this breakpoint. */ setBreakpointState(active: boolean, paused?: boolean): void; get isCollapsed(): boolean; get isVisible(): boolean; set isVisible(value: boolean); private _upateNodePortNames; get outputPorts(): BABYLON.NodeEditor.SharedUIComponents.NodePort[]; get inputPorts(): BABYLON.NodeEditor.SharedUIComponents.NodePort[]; get links(): BABYLON.NodeEditor.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: BABYLON.NodeEditor.SharedUIComponents.INodeData, stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager); isOverlappingFrame(frame: BABYLON.NodeEditor.SharedUIComponents.GraphFrame): boolean; getPortForPortData(portData: BABYLON.NodeEditor.SharedUIComponents.IPortData): BABYLON.NodeEditor.SharedUIComponents.NodePort | null; getPortDataForPortDataContent(data: any): BABYLON.NodeEditor.SharedUIComponents.IPortData | null; getLinksForPortDataContent(data: any): BABYLON.NodeEditor.SharedUIComponents.NodeLink[]; getLinksForPortData(portData: BABYLON.NodeEditor.SharedUIComponents.IPortData): BABYLON.NodeEditor.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; private _buildOutputPorts; private _removeOutputPort; appendVisual(root: HTMLDivElement, owner: BABYLON.NodeEditor.SharedUIComponents.GraphCanvasComponent): void; /** * Disposes this visual graph node. * @param disposeContent - Whether to dispose the underlying node content and disconnect links. */ dispose(disposeContent?: boolean): void; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Props for the GraphMinimapComponent. * This component can be reused by any editor that uses BABYLON.NodeEditor.SharedUIComponents.GraphCanvasComponent. */ export interface IGraphMinimapComponentProps { /** The graph canvas to visualize */ canvas: BABYLON.NodeEditor.SharedUIComponents.GraphCanvasComponent; /** How long (ms) the minimap stays visible after the last interaction. Default 1500. */ hideDelayMs?: number; /** Width of the minimap in pixels. Default 200. */ width?: number; /** Height of the minimap in pixels. Default 140. */ height?: number; } /** * A minimap overlay that shows a scaled-down overview of the node graph. * It appears when the user zooms or pans and auto-hides after a delay. * Clicking/dragging on the minimap pans the canvas to that position. * * This is a reusable component that works with any BABYLON.NodeEditor.SharedUIComponents.GraphCanvasComponent-based editor * (Flow Graph Editor, Node Material Editor, Node Geometry Editor, etc.). */ export class GraphMinimapComponent extends React.Component { private _canvasRef; private _containerRef; private _rafId; private _hideTimer; private _visible; private _isDragging; /** Track last canvas state to detect changes driven by external APIs (zoomToFit, etc.) */ private _lastX; private _lastY; private _lastZoom; /** Stored transform values for minimap hit-testing */ private _mapScale; private _mapOffsetX; private _mapOffsetY; private _mapTotalMinX; private _mapTotalMinY; private get _hideDelay(); private get _width(); private get _height(); /** @internal */ componentDidMount(): void; /** @internal */ componentWillUnmount(): void; /** * Show the minimap and schedule auto-hide. */ private _show; private _applyVisibility; /** * Main render loop — polls the canvas state every frame and redraws * the minimap when a change is detected. */ private _tick; /** * Compute the bounding box of all nodes and frames in graph-space. * @returns the min/max coordinates of the graph content */ private _computeGraphBounds; /** * Draw the minimap onto the element. */ private _draw; /** * Convert a pointer event on the minimap to graph-space coordinates and * pan the canvas to center on that point. * @param evt - the pointer event from the minimap */ private _panToMinimapPoint; private _onPointerDown; private _onPointerMove; private _onPointerUp; /** @internal */ render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 _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; 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(): BABYLON.NodeEditor.SharedUIComponents.GraphNode[]; get ports(): BABYLON.NodeEditor.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: BABYLON.NodeEditor.SharedUIComponents.GraphCanvasComponent, doNotCaptureNodes?: boolean); private _isFocused; /** * Enter/leave focus mode */ switchFocusMode(): void; refresh(): void; addNode(node: BABYLON.NodeEditor.SharedUIComponents.GraphNode): void; removeNode(node: BABYLON.NodeEditor.SharedUIComponents.GraphNode): void; syncNode(node: BABYLON.NodeEditor.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: BABYLON.NodeEditor.SharedUIComponents.FrameNodePort): void; private _movePortUp; moveFramePortDown(nodePort: BABYLON.NodeEditor.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): BABYLON.NodeEditor.SharedUIComponents.IFrameData; export(): void; adjustPorts(): void; static Parse(serializationData: BABYLON.NodeEditor.SharedUIComponents.IFrameData, canvas: BABYLON.NodeEditor.SharedUIComponents.GraphCanvasComponent, map?: { [key: number]: number; }): GraphFrame; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IGraphCanvasComponentProps { stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager; onEmitNewNode: (nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData) => BABYLON.NodeEditor.SharedUIComponents.GraphNode; /** When true, a minimap overlay is shown during zoom/pan. Default false. */ enableMinimap?: boolean; /** When true, sticky note annotations can be created and managed on the canvas. Default false. */ enableStickyNotes?: boolean; /** When true, Ctrl+F opens a find-in-graph search bar. Default false. */ enableFindInGraph?: boolean; /** When true, ports glow red during drag when hovering over an incompatible target. Default false. */ enablePortCompatibilityHighlight?: boolean; /** When true, nodes can display validation and breakpoint badge overlays. Default false. */ enableNodeBadges?: boolean; } export class GraphCanvasComponent extends React.Component implements BABYLON.NodeEditor.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 _stickyNotes; private _selectedStickyNotes; private _nodeDataContentList; private _altKeyIsPressed; private _shiftKeyIsPressed; private _multiKeyIsPressed; private _oldY; private _keyUpHandler; private _keyDownHandler; private _blurHandler; _frameIsMoving: boolean; _isLoading: boolean; _targetLinkCandidate: BABYLON.Nullable; private _isCopyingOrPasting; private _copiedNodes; private _copiedFrames; private _searchRef; get gridSize(): number; set gridSize(value: number); get stateManager(): BABYLON.NodeEditor.SharedUIComponents.StateManager; get nodes(): BABYLON.NodeEditor.SharedUIComponents.GraphNode[]; get links(): BABYLON.NodeEditor.SharedUIComponents.NodeLink[]; get frames(): BABYLON.NodeEditor.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(): BABYLON.NodeEditor.SharedUIComponents.GraphNode[]; get selectedLink(): BABYLON.Nullable; get selectedFrames(): BABYLON.NodeEditor.SharedUIComponents.GraphFrame[]; get stickyNotes(): BABYLON.NodeEditor.SharedUIComponents.GraphStickyNote[]; get selectedStickyNotes(): BABYLON.NodeEditor.SharedUIComponents.GraphStickyNote[]; get selectedPort(): BABYLON.Nullable; get canvasContainer(): HTMLDivElement; get hostCanvas(): HTMLDivElement; get svgCanvas(): HTMLElement; get selectionContainer(): HTMLDivElement; get frameContainer(): HTMLDivElement; private _selectedFrameAndNodesConflict; private _deselectAllStickyNotes; constructor(props: IGraphCanvasComponentProps); populateConnectedEntriesBeforeRemoval(item: BABYLON.NodeEditor.SharedUIComponents.GraphNode, items: BABYLON.NodeEditor.SharedUIComponents.GraphNode[], inputs: BABYLON.Nullable[], outputs: BABYLON.Nullable[]): void; automaticRewire(inputs: BABYLON.Nullable[], outputs: BABYLON.Nullable[], firstOnly?: boolean): void; smartAddOverLink(node: BABYLON.NodeEditor.SharedUIComponents.GraphNode, link: BABYLON.NodeEditor.SharedUIComponents.NodeLink): void; smartAddOverNode(node: BABYLON.NodeEditor.SharedUIComponents.GraphNode, source: BABYLON.NodeEditor.SharedUIComponents.GraphNode): void; deleteSelection(onRemove: (nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData) => void, autoReconnect?: boolean): void; handleKeyDownAsync(evt: KeyboardEvent, onRemove: (nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData) => void, mouseLocationX: number, mouseLocationY: number, dataGenerator: (nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData) => Promise>, rootElement: HTMLDivElement): Promise; pasteSelectionAsync(copiedNodes: BABYLON.NodeEditor.SharedUIComponents.GraphNode[], currentX: number, currentY: number, dataGenerator: (nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData) => Promise>, selectNew?: boolean): Promise; reconnectNewNodes(nodeIndex: number, newNodes: BABYLON.NodeEditor.SharedUIComponents.GraphNode[], sourceNodes: BABYLON.NodeEditor.SharedUIComponents.GraphNode[], done: boolean[]): void; getCachedData(): any[]; removeDataFromCache(data: any): void; createNodeFromObject(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, onNodeCreated: (data: any) => void, recursion?: boolean): BABYLON.NodeEditor.SharedUIComponents.GraphNode; getGridPosition(position: number, useCeil?: boolean): number; getGridPositionCeil(position: number): number; updateTransform(): void; onKeyUp(): void; findNodeFromData(data: any): BABYLON.NodeEditor.SharedUIComponents.GraphNode; /** * Clears the canvas visuals. * @param disposeContent - Whether to dispose the underlying graph data while clearing visuals. */ reset(disposeContent?: boolean): void; connectPorts(pointA: BABYLON.NodeEditor.SharedUIComponents.IPortData, pointB: BABYLON.NodeEditor.SharedUIComponents.IPortData): void; removeLink(link: BABYLON.NodeEditor.SharedUIComponents.NodeLink): void; appendNode(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData): BABYLON.NodeEditor.SharedUIComponents.GraphNode; distributeGraph(): void; componentDidMount(): void; componentWillUnmount(): void; onMove(evt: React.PointerEvent): void; onDown(evt: React.PointerEvent): void; onUp(evt: React.PointerEvent): void; onWheel(evt: React.WheelEvent): void; zoomToFit(): void; /** * Pans the canvas so the given node is visible and roughly centered. * @param node - the node to bring into view */ zoomToNode(node: BABYLON.NodeEditor.SharedUIComponents.GraphNode): void; processCandidatePort(): void; connectNodes(nodeA: BABYLON.NodeEditor.SharedUIComponents.GraphNode, pointA: BABYLON.NodeEditor.SharedUIComponents.IPortData, nodeB: BABYLON.NodeEditor.SharedUIComponents.GraphNode, pointB: BABYLON.NodeEditor.SharedUIComponents.IPortData): void; drop(newNode: BABYLON.NodeEditor.SharedUIComponents.GraphNode, targetX: number, targetY: number, offsetX: number, offsetY: number): void; processEditorData(editorData: BABYLON.NodeEditor.SharedUIComponents.IEditorData): void; reOrganize(editorData?: BABYLON.Nullable, isImportingAFrame?: boolean): void; addFrame(frameData: BABYLON.NodeEditor.SharedUIComponents.IFrameData): void; /** * Create a new sticky note at the given canvas-space position. * @param x - x position in canvas space * @param y - y position in canvas space * @returns the created sticky note */ addStickyNote(x: number, y: number): BABYLON.NodeEditor.SharedUIComponents.GraphStickyNote | null; /** * Open the find-in-graph search bar, if enabled. */ showSearch(): void; render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export class FrameNodePort extends BABYLON.NodeEditor.SharedUIComponents.NodePort { portData: BABYLON.NodeEditor.SharedUIComponents.IPortData; node: BABYLON.NodeEditor.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(): BABYLON.NodeEditor.SharedUIComponents.FramePortPosition; set framePortPosition(position: BABYLON.NodeEditor.SharedUIComponents.FramePortPosition); constructor(portContainer: HTMLElement, portData: BABYLON.NodeEditor.SharedUIComponents.IPortData, node: BABYLON.NodeEditor.SharedUIComponents.GraphNode, stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager, isInput: boolean, framePortId: number, parentFrameId: number); static CreateFrameNodePortElement(portData: BABYLON.NodeEditor.SharedUIComponents.IPortData, node: BABYLON.NodeEditor.SharedUIComponents.GraphNode, root: HTMLElement, displayManager: BABYLON.Nullable, stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager, isInput: boolean, framePortId: number, parentFrameId: number): FrameNodePort; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export class DisplayLedger { static RegisteredControls: { [key: string]: any; }; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.SharedUIComponents.StateManager, propertyName: string, notifiers?: BABYLON.IEditablePropertyOption["notifiers"], engageActiveRefresh?: boolean): void; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type FramePortData = { frame: BABYLON.NodeEditor.SharedUIComponents.GraphFrame; port: BABYLON.NodeEditor.SharedUIComponents.FrameNodePort; }; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface ISelectionChangedOptions { selection: BABYLON.Nullable; forceKeepSelection?: boolean; marqueeSelection?: boolean; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IPropertyComponentProps { stateManager: BABYLON.NodeEditor.SharedUIComponents.StateManager; nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export enum PortDataDirection { /** Input */ Input = 0, /** Output */ Output = 1 } export enum PortDirectValueTypes { Float = 0, Int = 1, String = 2 } 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: BABYLON.NodeEditor.SharedUIComponents.GraphNode, targetPort: IPortData): string; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 IStickyNoteData { x: number; y: number; width: number; height: number; name: string; body: string; color?: string; } export interface IEditorData { locations: INodeLocationInfo[]; x: number; y: number; zoom: number; frames?: IFrameData[]; stickyNotes?: IStickyNoteData[]; map?: { [key: number]: number; }; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.SharedUIComponents.IPortData[]; outputs: BABYLON.NodeEditor.SharedUIComponents.IPortData[]; invisibleEndpoints?: BABYLON.Nullable; isConnectedToOutput?: () => boolean; isActive?: boolean; setIsActive?: (value: boolean) => void; canBeActivated?: boolean; onInputCountChanged?: () => void; onInputRemoved?: (index: number) => void; onOutputCountChanged?: () => void; onOutputRemoved?: (index: number) => void; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface INodeContainer { nodes: BABYLON.NodeEditor.SharedUIComponents.GraphNode[]; appendNode(data: BABYLON.NodeEditor.SharedUIComponents.INodeData): BABYLON.NodeEditor.SharedUIComponents.GraphNode; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface VisualContentDescription { [key: string]: HTMLElement; } export interface IDisplayManager { getHeaderClass(data: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; shouldDisplayPortLabels(data: BABYLON.NodeEditor.SharedUIComponents.IPortData): boolean; updatePreviewContent(data: BABYLON.NodeEditor.SharedUIComponents.INodeData, contentArea: HTMLDivElement): void; updateFullVisualContent?(data: BABYLON.NodeEditor.SharedUIComponents.INodeData, visualContent: VisualContentDescription): void; getBackgroundColor(data: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; getHeaderText(data: BABYLON.NodeEditor.SharedUIComponents.INodeData): string; onSelectionChanged?(data: BABYLON.NodeEditor.SharedUIComponents.INodeData, selectedData: BABYLON.Nullable, manager: BABYLON.NodeEditor.SharedUIComponents.StateManager): void; onDispose?(nodeData: BABYLON.NodeEditor.SharedUIComponents.INodeData, manager: BABYLON.NodeEditor.SharedUIComponents.StateManager): void; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { 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 BABYLON.NodeEditor.SharedUIComponents.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?: BABYLON.NodeEditor.SharedUIComponents.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 BABYLON.NodeEditor.SharedUIComponents.IExtensionFeed[]; /** * An optional parent BABYLON.NodeEditor.SharedUIComponents.ServiceContainer. Dependencies not found in the tool's own container * will be resolved from this parent. */ parentContainer?: BABYLON.NodeEditor.SharedUIComponents.ServiceContainer; /** * When true, all teaching moments are disabled and will not be shown. */ disableTeachingMoments?: boolean; } & BABYLON.NodeEditor.SharedUIComponents.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): { dispose: () => Promise; }; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Options for creating a modular bridge container. * @experimental * @internal */ export type ModularBridgeOptions = { /** * WebSocket port for the bridge's browser port. Defaults to 4400. */ port?: number; /** * Session display name reported to the bridge. Defaults to `document.title`. */ name?: string; /** * Whether the bridge should automatically enable trying to connect. * Defaults to true. */ autoEnable?: boolean; /** * Additional service definitions to register with the bridge container. */ serviceDefinitions?: readonly BABYLON.NodeEditor.SharedUIComponents.WeaklyTypedServiceDefinition[]; }; /** * A token returned by {@link MakeModularBridge} that owns the headless * {@link BABYLON.NodeEditor.SharedUIComponents.ServiceContainer}. Dispose it to tear down the bridge and all services. * @experimental * @internal */ export type ModularBridgeToken = BABYLON.IDisposable & { /** * The headless BABYLON.NodeEditor.SharedUIComponents.ServiceContainer that hosts the bridge. */ readonly serviceContainer: BABYLON.NodeEditor.SharedUIComponents.ServiceContainer; /** * Whether this token has been disposed. */ readonly isDisposed: boolean; }; /** * Creates a headless {@link BABYLON.NodeEditor.SharedUIComponents.ServiceContainer} that hosts a bridge service. * * The returned token owns the container. Dispose it to tear down the bridge. * * @param options Optional configuration for the bridge. * @returns A {@link ModularBridgeToken} that owns the container. * @experimental * @internal */ export function MakeModularBridge(options?: ModularBridgeOptions): ModularBridgeToken; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export var LightTheme: any; export var DarkTheme: any; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * The unique identity symbol for the toast service. */ export var ToastServiceIdentity: unique symbol; /** * Provides the ability to show toast notifications from non-React code (e.g. Observable callbacks). */ export interface IToastService extends BABYLON.NodeEditor.SharedUIComponents.IService { /** * Shows a toast notification with the given message. * @param message The message to display. * @param options Optional toast configuration such as intent. */ showToast(message: string, options?: BABYLON.NodeEditor.SharedUIComponents.ToastOptions): void; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Represents the theme mode preference. */ export type ThemeMode = "system" | "light" | "dark"; /** * The setting descriptor for persisting the theme mode preference. */ export var ThemeModeSettingDescriptor: BABYLON.NodeEditor.SharedUIComponents.SettingDescriptor; /** * Resolves the current theme based on user preference and system settings. * Listens for changes to both the persisted theme mode and the OS-level dark mode preference. */ export class ThemeResolver implements BABYLON.IDisposable { private readonly _settingsStore; private readonly _darkModeMediaQuery; private readonly _onChanged; private readonly _onDarkModeMediaQueryChange; private readonly _settingsStoreObserver; constructor(_settingsStore: BABYLON.NodeEditor.SharedUIComponents.ISettingsStore); get onChanged(): BABYLON.IReadonlyObservable; get mode(): ThemeMode; set mode(value: ThemeMode); get isDark(): boolean; toggle(): void; dispose(): void; } /** * The unique identity symbol for the theme service. */ export var ThemeServiceIdentity: unique symbol; /** * Exposes the current theme used by the application. */ export interface IThemeService extends BABYLON.NodeEditor.SharedUIComponents.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: ThemeMode; /** * 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 ThemeServiceDefinition: BABYLON.NodeEditor.SharedUIComponents.ServiceDefinition<[IThemeService], [ISettingsStore]>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export var ThemeSelectorServiceDefinition: BABYLON.NodeEditor.SharedUIComponents.ServiceDefinition<[], [IShellService]>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export var ShellSettingsServiceDefinition: BABYLON.NodeEditor.SharedUIComponents.ServiceDefinition<[], [ISettingsService]>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Setting descriptor for persisting side pane dock location overrides. */ export var SidePaneDockOverridesSettingDescriptor: BABYLON.NodeEditor.SharedUIComponents.SettingDescriptor | undefined>>; /** * Setting descriptor for persisting the left side pane width adjustment. */ export var LeftSidePaneWidthAdjustSettingDescriptor: BABYLON.NodeEditor.SharedUIComponents.SettingDescriptor; /** * Setting descriptor for persisting the left side pane height adjustment. */ export var LeftSidePaneHeightAdjustSettingDescriptor: BABYLON.NodeEditor.SharedUIComponents.SettingDescriptor; /** * Setting descriptor for persisting the right side pane width adjustment. */ export var RightSidePaneWidthAdjustSettingDescriptor: BABYLON.NodeEditor.SharedUIComponents.SettingDescriptor; /** * Setting descriptor for persisting the right side pane height adjustment. */ export var RightSidePaneHeightAdjustSettingDescriptor: BABYLON.NodeEditor.SharedUIComponents.SettingDescriptor; /** * Represents a horizontal location in the shell layout. */ export type HorizontalLocation = "left" | "right"; /** * Represents a vertical location in the shell layout. */ export type VerticalLocation = "top" | "bottom"; type TeachingMomentInfo = boolean | { readonly title: string; readonly description: string; }; /** * 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 teaching moment info. The default assumes the toolbar item was added by an extension and provides a generic title and description based on the display name or id, which is helpful for discoverability of new items. * Set this to false to suppress the teaching moment, which may be desirable for built in items or items that are added in a non-dynamic way. * Set it to an object with a title and description to provide a custom teaching moment, which may be desirable if the generic title and description are not sufficient. * Teaching moments are more helpful for dynamically added items, possibly from extensions. */ teachingMoment?: TeachingMomentInfo; }; /** * 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 teaching moment info. The default assumes the side pane was added by an extension and provides a generic title and description based on the display name or id, which is helpful for discoverability of new items. * Set this to false to suppress the teaching moment, which may be desirable for built in items or items that are added in a non-dynamic way. * Set it to an object with a title and description to provide a custom teaching moment, which may be desirable if the generic title and description are not sufficient. * Teaching moments are more helpful for dynamically added panes, possibly from extensions. */ teachingMoment?: TeachingMomentInfo; /** * 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; }; /** * The unique identity symbol for the root component service. */ export var RootComponentServiceIdentity: unique symbol; /** * Exposes a top level component that should be rendered as the React root. */ export interface IRootComponentService extends BABYLON.NodeEditor.SharedUIComponents.IService { /** * The root component that should be rendered as the React root. */ readonly rootComponent: React.ComponentType; } /** * The unique identity symbol for the shell service. */ 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 BABYLON.NodeEditor.SharedUIComponents.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): BABYLON.NodeEditor.SharedUIComponents.ServiceDefinition<[IShellService, IRootComponentService], []>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * The unique identity symbol for the settings store service. */ export var SettingsStoreIdentity: unique symbol; /** * Describes a setting by its key and default value. */ export type SettingDescriptor = { /** * The unique key used to identify this setting in the store. */ readonly key: string; /** * The default value to use when the setting has not been explicitly set. */ readonly defaultValue: T; }; /** * Provides a key-value store for persisting user settings. */ export interface ISettingsStore extends BABYLON.NodeEditor.SharedUIComponents.IService { /** * An observable that notifies when a setting has changed, providing the key of the changed setting. */ onChanged: BABYLON.IReadonlyObservable; /** * Reads a setting from the store. * @param descriptor The descriptor of the setting to read. * @returns The current value of the setting, or the default value if it has not been set. */ readSetting(descriptor: SettingDescriptor): T; /** * Writes a setting to the store. * @param descriptor The descriptor of the setting to write. * @param value The value to write. */ writeSetting(descriptor: SettingDescriptor, value: T): void; } /** * Default implementation of {@link ISettingsStore} that persists settings using browser local storage. */ export class SettingsStore implements ISettingsStore { private readonly _namespace; private readonly _onChanged; /** * Creates a new settings store. * @param _namespace A namespace used to scope the settings keys to avoid collisions with other stores. */ constructor(_namespace: string); get onChanged(): BABYLON.IReadonlyObservable>; readSetting(descriptor: SettingDescriptor): T; writeSetting(descriptor: SettingDescriptor, value: T): void; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * The unique identity symbol for the settings service. */ export var SettingsServiceIdentity: unique symbol; /** * Allows new sections or content to be added to the Settings pane. */ export interface ISettingsService extends BABYLON.NodeEditor.SharedUIComponents.IService { /** * Adds a new section to the settings pane. * @param section A description of the section to add. */ addSection(section: BABYLON.NodeEditor.SharedUIComponents.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: BABYLON.NodeEditor.SharedUIComponents.DynamicAccordionSectionContent): BABYLON.IDisposable; } export var SettingsServiceDefinition: BABYLON.NodeEditor.SharedUIComponents.ServiceDefinition<[ISettingsService], [IShellService]>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * The unique identity symbol for the react context service. */ export var ReactContextServiceIdentity: unique symbol; export type ReactContextHandle = BABYLON.IDisposable & { updateValue: (newValue: T) => void; }; /** * ReactContextService allows global React contexts to be added/removed/updated. */ export interface IReactContextService extends BABYLON.NodeEditor.SharedUIComponents.IService { addContext(provider: React.Context["Provider"], initialValue: T, options?: { order?: number; }): ReactContextHandle; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export var CompactModeSettingDescriptor: BABYLON.NodeEditor.SharedUIComponents.SettingDescriptor; export var DisableCopySettingDescriptor: BABYLON.NodeEditor.SharedUIComponents.SettingDescriptor; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export var ExtensionListServiceDefinition: BABYLON.NodeEditor.SharedUIComponents.ServiceDefinition<[], [IShellService]>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type DialogOptions = { type: "alert"; intent?: any; title: string; content?: JSX.Element; }; /** * The unique identity symbol for the dialog service. */ export var DialogServiceIdentity: unique symbol; /** * Provides the ability to show dialog from non-React code (e.g. Observable callbacks). */ export interface IDialogService extends BABYLON.NodeEditor.SharedUIComponents.IService { /** * Shows a dialog with the given content. * @param options The dialog options to display. */ showDialog(options: DialogOptions): void; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Serializable description of a command argument, used in protocol messages. */ export type CommandArgInfo = { /** The name of the argument. */ name: string; /** A human-readable description of the argument. */ description: string; /** Whether this argument is required. */ required?: boolean; /** The type of the argument. Defaults to "string". When "file", the CLI reads the file and sends its contents. */ type?: "string" | "file"; }; /** * Serializable description of a command, used in protocol messages. */ export type CommandInfo = { /** A unique identifier for the command. */ id: string; /** A human-readable description of the command. */ description: string; /** The arguments this command accepts. */ args?: CommandArgInfo[]; }; /** * Serializable description of a session, used in protocol messages. */ export type SessionInfo = { /** The numeric session identifier. */ id: number; /** The display name of the session. */ name: string; /** ISO 8601 timestamp of when the session connected. */ connectedAt: string; }; /** * CLI → Bridge: Request the list of active browser sessions. */ export type SessionsRequest = { /** The message type discriminator. */ type: "sessions"; }; /** * CLI → Bridge: Request the list of commands available from a session. */ export type CommandsRequest = { /** The message type discriminator. */ type: "commands"; /** The session to query for commands. */ sessionId: number; }; /** * CLI → Bridge: Execute a command on a session. */ export type ExecRequest = { /** The message type discriminator. */ type: "exec"; /** The session to execute the command on. */ sessionId: number; /** The identifier of the command to execute. */ commandId: string; /** Key-value pairs of arguments for the command. */ args: Record; }; /** * CLI → Bridge: Stop the bridge process. */ export type StopRequest = { /** The message type discriminator. */ type: "stop"; }; /** * All messages that the CLI sends to the bridge. */ export type CliRequest = SessionsRequest | CommandsRequest | ExecRequest | StopRequest; /** * Bridge → CLI: Response with the list of active sessions. */ export type SessionsResponse = { /** The message type discriminator. */ type: "sessionsResponse"; /** The list of active sessions. */ sessions: SessionInfo[]; }; /** * Bridge → CLI: Response with the list of commands from a session. */ export type CommandsResponse = { /** The message type discriminator. */ type: "commandsResponse"; /** The list of available commands, if successful. */ commands?: CommandInfo[]; /** An error message, if the request failed. */ error?: string; }; /** * Bridge → CLI: Response with the result of a command execution. */ export type ExecResponse = { /** The message type discriminator. */ type: "execResponse"; /** The result of the command execution, if successful. */ result?: string; /** An error message, if the execution failed. */ error?: string; }; /** * Bridge → CLI: Acknowledgement that the bridge is stopping. */ export type StopResponse = { /** The message type discriminator. */ type: "stopResponse"; /** Whether the bridge stopped successfully. */ success: boolean; }; /** * All messages that the bridge sends to the CLI. */ export type CliResponse = SessionsResponse | CommandsResponse | ExecResponse | StopResponse; /** * Browser → Bridge: Register a new session. */ export type RegisterRequest = { /** The message type discriminator. */ type: "register"; /** The display name for this session. */ name: string; }; /** * Browser → Bridge: Response to a listCommands request from the bridge. */ export type CommandListResponse = { /** The message type discriminator. */ type: "commandListResponse"; /** The identifier of the original request. */ requestId: string; /** The list of registered commands. */ commands: CommandInfo[]; }; /** * Browser → Bridge: Response to an execCommand request from the bridge. */ export type CommandResponse = { /** The message type discriminator. */ type: "commandResponse"; /** The identifier of the original request. */ requestId: string; /** The result of the command execution, if successful. */ result?: string; /** An error message, if the execution failed. */ error?: string; }; /** * Browser → Bridge: Response to a getInfo request from the bridge. */ export type InfoResponse = { /** The message type discriminator. */ type: "infoResponse"; /** The identifier of the original request. */ requestId: string; /** The current display name of the session. */ name: string; }; /** * All messages that the browser sends to the bridge. */ export type BrowserRequest = RegisterRequest | CommandListResponse | CommandResponse | InfoResponse; /** * Bridge → Browser: Request the list of registered commands. */ export type ListCommandsRequest = { /** The message type discriminator. */ type: "listCommands"; /** A unique identifier for this request. */ requestId: string; }; /** * Bridge → Browser: Request execution of a command. */ export type ExecCommandRequest = { /** The message type discriminator. */ type: "execCommand"; /** A unique identifier for this request. */ requestId: string; /** The identifier of the command to execute. */ commandId: string; /** Key-value pairs of arguments for the command. */ args: Record; }; /** * Bridge → Browser: Request current session information. */ export type GetInfoRequest = { /** The message type discriminator. */ type: "getInfo"; /** A unique identifier for this request. */ requestId: string; }; /** * All messages that the bridge sends to the browser. */ export type BrowserResponse = ListCommandsRequest | ExecCommandRequest | GetInfoRequest; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Options for the CLI bridge service. * @experimental * @internal */ export type BridgeServiceOptions = { /** * The WebSocket port for the bridge's browser port. */ port: number; /** * The session display name sent to the bridge. * Can be a getter to provide a dynamic value that is re-read * each time the bridge queries session information. */ name: string; /** * Whether to automatically enable connecting when the service is created. */ autoEnable: boolean; }; /** * Creates the service definition for the CLI Bridge Service. * @param options The options for connecting to the bridge. * @returns A service definition that produces an BABYLON.NodeEditor.SharedUIComponents.IBridgeCommandRegistry and BABYLON.NodeEditor.SharedUIComponents.ICliConnectionStatus. * @experimental * @internal */ export function MakeBridgeServiceDefinition(options: BridgeServiceOptions): BABYLON.NodeEditor.SharedUIComponents.ServiceDefinition<[IBridgeCommandRegistry, BABYLON.NodeEditor.SharedUIComponents.ICliConnectionStatus], []>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * The service identity for the CLI connection status. * @experimental * @internal */ export var CliConnectionStatusIdentity: unique symbol; /** * Provides the connection status and enable/disable control for the CLI bridge. * @experimental * @internal */ export interface ICliConnectionStatus extends BABYLON.NodeEditor.SharedUIComponents.IService { /** * Whether the bridge is enabled. When true, the bridge actively tries to * maintain a WebSocket connection. When false, the bridge is disconnected * and idle. */ isEnabled: boolean; /** * Whether the bridge WebSocket is currently connected. */ readonly isConnected: boolean; /** * Observable that fires when either {@link isEnabled} or {@link isConnected} changes. */ readonly onConnectionStatusChanged: BABYLON.IReadonlyObservable; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * The type of a bridge command argument, which determines how * the CLI processes the value before sending it to the browser. * @experimental * @internal */ export type BridgeCommandArgType = "string" | "file"; /** * Describes an argument for a bridge command. * @experimental * @internal */ export type BridgeCommandArg = { /** * The name of the argument. */ name: string; /** * A description of the argument. */ description: string; /** * Whether the argument is required. */ required?: boolean; /** * The type of the argument. Defaults to "string". * When set to "file", the CLI reads the file at the given path * and passes its contents as the argument value. */ type?: BridgeCommandArgType; }; /** * Describes a command that can be invoked from the bridge. * @experimental * @internal */ export type BridgeCommandDescriptor = { /** * A unique identifier for the command. */ id: string; /** * A human-readable description of what the command does. */ description: string; /** * The arguments that this command accepts. */ args?: BridgeCommandArg[]; /** * Executes the command with the given arguments and returns a result string. * @param args A map of argument names to their values. * @returns A promise that resolves to the result string. */ executeAsync: (args: Record) => Promise; }; /** * The service identity for the bridge command registry. * @experimental * @internal */ export var BridgeCommandRegistryIdentity: unique symbol; /** * A registry for commands that can be invoked from the bridge. * @experimental * @internal */ export interface IBridgeCommandRegistry extends BABYLON.NodeEditor.SharedUIComponents.IService { /** * Registers a command that can be invoked from the bridge. * @param descriptor The command descriptor. * @returns A disposable token that unregisters the command when disposed. */ addCommand(descriptor: BridgeCommandDescriptor): BABYLON.IDisposable; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * 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; /** * 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 implement BABYLON.IDisposable. * If no services are produced, the returned value may implement BABYLON.IDisposable, otherwise it may return void. */ export type ServiceFactory[], Consumes extends IService[]> = (...dependencies: [...Consumes]) => Produces extends [] ? Partial | 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; }); } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type WeaklyTypedServiceDefinition = Omit[] | [], BABYLON.NodeEditor.SharedUIComponents.IService[] | []>, "factory"> & { /** * A factory function responsible for creating a service instance. */ factory: (...args: any) => ReturnType[] | [], BABYLON.NodeEditor.SharedUIComponents.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 readonly _parent?; private _isDisposed; private readonly _serviceDefinitions; private readonly _serviceDependents; private readonly _serviceInstances; private readonly _children; /** * Creates a new ServiceContainer. * @param _friendlyName A human-readable name for debugging. * @param _parent An optional parent container. Dependencies not found locally will be resolved from the parent. */ constructor(_friendlyName: string, _parent?: ServiceContainer | undefined); /** * Adds a set of service definitions to the service container. * The services are sorted based on their dependencies. * @param serviceDefinitions The service definitions to register. * @returns A disposable that will remove the service definitions from the service container. */ addServices(...serviceDefinitions: WeaklyTypedServiceDefinition[]): BABYLON.IDisposable; /** * Registers a service definition in the service container. * @param serviceDefinition The service definition to register. * @returns A disposable that will remove the service definition from the service container. */ addService[] = [], Consumes extends BABYLON.NodeEditor.SharedUIComponents.IService[] = []>(serviceDefinition: BABYLON.NodeEditor.SharedUIComponents.ServiceDefinition): BABYLON.IDisposable; private _addService; /** * Resolves a dependency by contract identity for a consuming service. * Checks local services first, then walks up the parent chain. * Registers the consumer as a dependent in whichever container owns the dependency. * @param contract The contract identity to resolve. * @param consumer The service definition that consumes this dependency. * @returns The resolved service instance. */ private _resolveDependency; /** * Removes a consumer from the dependent set for a given contract, checking locally first then the parent chain. * @param contract The contract identity. * @param consumer The service definition to remove as a dependent. */ private _removeDependentFromChain; private _removeService; /** * Disposes the service container and all contained services. * Throws if this container is still a parent of any live child containers. */ dispose(): void; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * 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; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * 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; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Asserts that the given value is truthy. * @param value The value to check. */ export function Assert(value: unknown): asserts value; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Hook that provides the current theme mode state and controls for changing it. * @returns An object with the current dark mode state, theme mode, and functions to set or toggle the theme. */ export function useThemeMode(): { readonly isDarkMode: boolean; readonly themeMode: BABYLON.NodeEditor.SharedUIComponents.ThemeMode; readonly setThemeMode: (mode: BABYLON.NodeEditor.SharedUIComponents.ThemeMode) => void; readonly toggleThemeMode: () => void | undefined; }; /** * Hook that returns the current Fluent UI theme based on the active theme mode. * @param invert If true, inverts the theme (returns light theme in dark mode and vice versa). Defaults to false. * @returns The current Fluent UI theme object. */ export function useTheme(invert?: boolean): import("@fluentui/tokens").Theme; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * 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; }; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Hook that reads and writes a setting from the settings store. * @param descriptor The setting descriptor that identifies the setting and its default value. * @returns A tuple of [currentValue, setValue, resetValue] similar to React's useState. */ export function useSetting(descriptor: BABYLON.NodeEditor.SharedUIComponents.SettingDescriptor): [T, React.Dispatch>, () => void]; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * 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; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * 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: BABYLON.NodeEditor.SharedUIComponents.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: BABYLON.NodeEditor.SharedUIComponents.ObservableCollection): T[]; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Represents a loaded extension. */ export interface IExtension { /** * The metadata for the extension. */ readonly metadata: BABYLON.NodeEditor.SharedUIComponents.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: BABYLON.NodeEditor.SharedUIComponents.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: BABYLON.NodeEditor.SharedUIComponents.ServiceContainer, feeds: readonly BABYLON.NodeEditor.SharedUIComponents.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; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { 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; /** * A base64 encoded PNG image to use as the person's avatar. */ readonly avatar?: 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 BABYLON.NodeEditor.SharedUIComponents.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; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type BuiltInExtension = BABYLON.NodeEditor.SharedUIComponents.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 BABYLON.NodeEditor.SharedUIComponents.IExtensionFeed { readonly name: string; private readonly _extensions; constructor(name: string, extensions: Iterable); queryExtensionsAsync(filter?: string): Promise; getExtensionModuleAsync(name: string): Promise; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type TeachingMomentsContext = { /** * When true, all teaching moments are suppressed regardless of any caller-supplied * `suppress` argument and regardless of whether the user has previously dismissed * the teaching moment. */ disabled: boolean; }; export var TeachingMomentsContext: import("react").Context; /** * Returns the teaching moments context provided by the surrounding modular tool framework. * @returns The current teaching moments context. */ export function useTeachingMomentsContext(): TeachingMomentsContext; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export var SettingsStoreContext: import("react").Context; export function useSettingsStore(): BABYLON.NodeEditor.SharedUIComponents.ISettingsStore | undefined; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type ExtensionManagerContext = { readonly extensionManager: BABYLON.NodeEditor.SharedUIComponents.ExtensionManager; }; export var ExtensionManagerContext: import("react").Context; export function useExtensionManager(): BABYLON.NodeEditor.SharedUIComponents.ExtensionManager | undefined; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type DialogContext = { showDialog: (options: BABYLON.NodeEditor.SharedUIComponents.DialogOptions) => void; }; export var DialogContext: import("react").Context; /** * Returns the showDialog function provided by the surrounding modular tool framework. * If called outside of a DialogContext provider, falls back to the default context * value, whose showDialog implementation invokes the browser's blocking `alert` with * the dialog title. * @returns A function that displays a dialog when called. */ export function useDialog(): DialogContext; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export var UXContextProvider: React.FunctionComponent; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * A themed Fluent UI provider that applies the current theme mode (light or dark). * @param props Fluent provider props, plus an optional `invert` flag to swap the theme. * When `targetDocument` is provided and differs from the inherited Fluent * document (e.g. when rendering into a popup window), a Griffel renderer * scoped to that document is created so styles are injected into it. * When omitted, `targetDocument` is inherited from the ambient Fluent * context so nested Theme components do not lose cross-window targeting. * @returns The themed Fluent UI provider component. */ export var Theme: React.FunctionComponent; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * The state returned by the teaching moment hook. */ type TeachingMomentState = ReturnType>; /** * Props for the {@link TeachingMoment} component. */ 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; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Used to apply common styles to panes. */ export var SidePaneContainer: import("react").ForwardRefExoticComponent, HTMLDivElement>, "ref"> & import("react").RefAttributes>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Describes a section within a dynamic accordion that can be added at runtime. */ export type DynamicAccordionSection = Readonly<{ /** * A unique identity for the section, which can be referenced by section content. */ identity: string; /** * An optional order for the section, relative to other sections. * Defaults to 0. */ order?: number; /** * An optional flag indicating whether the section should be collapsed by default. * Defaults to false. */ collapseByDefault?: boolean; }>; /** * Describes content that belongs to a section within a dynamic accordion. */ export type DynamicAccordionSectionContent = 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; }>; }>; /** * Imperative handle for controlling section highlights on the extensible accordion. */ export type SectionsImperativeRef = { /** * Highlights the specified sections, collapsing all others until the context changes. * @param sections The identity strings of the sections to highlight. */ highlightSections: (sections: readonly string[]) => void; }; /** * An accordion component that supports dynamically adding sections and section content at runtime. * Combines statically defined children sections with dynamically registered sections and content. * @param props The accordion props including sections, section content, context, and an optional imperative ref. * @returns The extensible accordion component. */ export function ExtensibleAccordion(props: React.PropsWithChildren<{ sections: readonly DynamicAccordionSection[]; sectionContent: readonly DynamicAccordionSectionContent[]; context: ContextT; sectionsRef?: React.Ref; } & BABYLON.NodeEditor.SharedUIComponents.AccordionProps>): import("react/jsx-runtime").JSX.Element; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Props for the {@link ErrorBoundary} component. */ 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; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Options used to open an MCP editor session event stream. */ export interface IMcpEditorSessionEventSourceOptions { /** Base session URL, such as `http://localhost:3001/session/`. */ sessionUrl: string; /** Called whenever the server sends a document update. */ onDocument: (document: unknown) => void; /** Called when the server explicitly closes the session. */ onSessionClosed: (reason: string) => void; /** Called when the EventSource reports a connection error. */ onConnectionError: () => void; } /** * Normalize a user-provided MCP editor session URL. * @param sessionUrl - The URL entered by the user or returned by an MCP tool. * @returns The URL without trailing slash characters. */ export function NormalizeMcpEditorSessionUrl(sessionUrl: string): string; /** * Open an EventSource for server-to-editor MCP session updates. * @param options - Event stream options and callbacks. * @returns The opened EventSource. Call `CloseMcpEditorSessionEventSource` to disconnect it. */ export function OpenMcpEditorSessionEventSource(options: IMcpEditorSessionEventSourceOptions): EventSource; /** * Close an MCP editor session EventSource if one is active. * @param eventSource - EventSource to close. */ export function CloseMcpEditorSessionEventSource(eventSource: EventSource | null | undefined): void; /** * Post a document JSON payload to an MCP editor session. * @param sessionUrl - Base session URL, such as `http://localhost:3001/session/`. * @param document - Serialized JSON document to send to the MCP server. * @param legacyDocumentRoute - Optional compatibility route to try when `/document` is unavailable. * @returns The final fetch response from the standard or compatibility route. */ export function PostMcpEditorSessionDocumentAsync(sessionUrl: string, document: string, legacyDocumentRoute?: string): Promise; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IVector2LineComponentProps { label: string; target: any; propertyName: string; step?: number; onChange?: (newvalue: BABYLON.Vector2) => void; onPropertyChangedObservable?: BABYLON.Observable; icon?: string; iconLabel?: string; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IUnitButtonProps { unit: string; locked?: boolean; onClick?: (unit: string) => void; } export function UnitButton(props: IUnitButtonProps): import("react/jsx-runtime").JSX.Element; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface ITextInputLineComponentProps { label?: string; lockObject?: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface INumericInputProps { label: string; labelTooltip?: string; value: number; step?: number; onChange: (value: number) => void; precision?: number; icon?: string; iconLabel?: string; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface ILineContainerComponentProps { selection?: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IIconComponentProps { icon: string; label?: string; } export class IconComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface ISelectedLineContainer { selectedLineContainerTitles: Array; selectedLineContainerTitlesNoFocus: Array; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IHexLineComponentProps { label: string; target: any; propertyName: string; lockObject?: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface IFloatLineComponentProps { label: string; target: any; propertyName: string; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type DraggableLineComponentProps = Omit; export var DraggableLineComponent: React.FunctionComponent; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IColorPickerLineProps { value: BABYLON.Color4 | BABYLON.Color3; linearHint?: boolean; onColorChanged: (newOne: string) => void; icon?: string; iconLabel?: string; shouldPopRight?: boolean; lockObject?: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IColorLineProps { label: string; target?: any; propertyName: string; onPropertyChangedObservable?: BABYLON.Observable; onChange?: () => void; isLinear?: boolean; icon?: string; iconLabel?: string; disableAlpha?: boolean; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IColor4LineComponentProps { label: string; target?: any; propertyName: string; onPropertyChangedObservable?: BABYLON.Observable; onChange?: () => void; isLinear?: boolean; icon?: string; iconLabel?: string; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; } export class Color4LineComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IColor3LineComponentProps { label: string; target: any; propertyName: string; onPropertyChangedObservable?: BABYLON.Observable; isLinear?: boolean; icon?: string; lockObject: BABYLON.NodeEditor.SharedUIComponents.LockObject; iconLabel?: string; onChange?: () => void; } export class Color3LineComponent extends React.Component { render(): import("react/jsx-runtime").JSX.Element; } } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: { valueWidth: 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<"invalid" | "container" | "inputSlot" | "inputFill", 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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Props for the Tooltip primitive. */ export type TooltipProps = { /** The tooltip content. If null/empty, the tooltip is not rendered. */ content?: BABYLON.Nullable; /** Optional positioning passed through to the underlying FluentTooltip. */ positioning?: any["positioning"]; /** The element that the tooltip is attached to. */ children: React.ReactElement; }; export var Tooltip: import("react").ForwardRefExoticComponent>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type ToggleButtonProps = Omit & { value: boolean; checkedIcon: any; uncheckedIcon?: any; onChange: (checked: boolean) => void; titlePositioning?: any["positioning"]; }; /** * 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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Options for showing a toast notification. */ export type ToastOptions = { /** * The intent of the toast notification. Defaults to "info". */ intent?: any; }; type ToastContextType = { showToast: (message: string, options?: ToastOptions) => void; }; /** * Imperative handle exposed by {@link ToastProvider} via its `imperativeRef` prop. */ export type ToastHandle = { /** * Shows a toast notification with the given message. * @param message The message to display. * @param options Optional toast configuration. */ showToast: (message: string, options?: ToastOptions) => void; }; export type ToastProviderProps = React.PropsWithChildren<{ /** * A ref that exposes the {@link ToastHandle} imperative API. */ imperativeRef?: React.Ref; }>; /** * Provides toast notification functionality to child components via context and an optional imperative ref. * @returns The toast provider component tree. */ 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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type TextureSelectorProps = BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type TextareaProps = BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type TextInputProps = BABYLON.NodeEditor.SharedUIComponents.PrimitiveProps & { validator?: (value: string) => boolean; validateOnlyOnBlur?: boolean; }; export var TextInput: React.FunctionComponent; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type SyncedSliderProps = BABYLON.NodeEditor.SharedUIComponents.PrimitiveProps & { /** Minimum value for the slider */ min?: number; /** Maximum value for the slider */ max?: number; /** Step size for the slider */ step?: number; /** Optional fixed precision (number of decimal digits). Overrides the automatically computed display precision. */ precision?: 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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type SwitchProps = BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type SpinButtonProps = BABYLON.NodeEditor.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 fixed precision (number of decimal digits). Overrides the automatically computed display precision. */ precision?: number; /** Optional className for the input element */ inputClassName?: string; /** When true, hides the drag-to-scrub button */ disableDragButton?: boolean; }; /** * A numeric input with a vertical drag-to-scrub icon (ArrowsBidirectionalRegular rotated 90°). * Click-and-drag up/down on the icon to increment/decrement the value. */ 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 fixed precision (number of decimal digits). Overrides the automatically computed display precision. */ precision?: number; /** Optional className for the input element */ inputClassName?: string; /** When true, hides the drag-to-scrub button */ disableDragButton?: boolean; } & import("react").RefAttributes>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type SliderProps = BABYLON.NodeEditor.SharedUIComponents.PrimitiveProps & { /** Minimum value for the slider */ min?: number; /** Maximum value for the slider */ max?: number; /** Step size for the slider */ step?: number; /** When true, onChange is only called when the user releases the slider, not during drag */ notifyOnlyOnRelease?: boolean; /** Optional pointer down handler */ onPointerDown?: () => void; /** Optional pointer up handler */ onPointerUp?: () => void; }; /** * A slider primitive that wraps the Fluent UI Slider with step scaling, drag tracking, and optional notify-on-release behavior. * Follows the same pattern as other primitives (e.g. Switch) — no wrapper divs, just the Fluent component with logic. * @param props * @returns Slider component */ export var Slider: React.FunctionComponent; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type SkeletonSelectorProps = BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type SearchProps = { onChange: (val: string) => void; placeholder?: string; }; export var SearchBar: import("react").ForwardRefExoticComponent>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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?: BABYLON.NodeEditor.SharedUIComponents.InfoLabelParentProps; }; export type PrimitiveProps = ImmutablePrimitiveProps & { /** * Called when the primitive value changes */ onChange: (value: T) => void; }; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type NodeSelectorProps = BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type MessageBarProps = { message: string; title?: string; docLink?: string; intent: "info" | "success" | "warning" | "error"; staticItem?: boolean; }; export var MessageBar: React.FunctionComponent; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type MaterialSelectorProps = BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type LinkProps = BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type LazyComponentProps = { spinnerSize?: any["size"]; 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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type Entity = { uniqueId: number; }; /** * Props for the EntitySelector component */ export type EntitySelectorProps = (PrimitiveProps> | BABYLON.NodeEditor.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?: BABYLON.Nullable; }; /** * 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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 = BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type DraggableLineProps = { format: string; data: string; tooltip: string; label: string; onDelete?: () => void; }; export var DraggableLine: React.FunctionComponent; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Props for an action button in the dialog footer. */ export type DialogActionProps = { /** Button label text. */ label: string; /** Click handler. */ onClick: () => void; /** Button appearance. Defaults to "secondary". */ appearance?: "primary" | "secondary"; }; /** * Props for the shared Dialog primitive. */ export type DialogProps = { /** Whether the dialog is open. */ open: boolean; /** Dialog title. */ title: string; /** Dialog content (body). */ children: React.ReactNode; /** Action buttons rendered in the footer. */ actions?: DialogActionProps[]; /** Called when the dialog is dismissed via the close button. */ onDismiss?: () => void; }; /** * A shared dialog component wrapping Fluent UI Dialog with Babylon conventions. * * @example * ```tsx * setIsOpen(false)} * actions={[ * { label: "Cancel", onClick: () => setIsOpen(false) }, * { label: "Confirm", onClick: handleConfirm, appearance: "primary" }, * ]} * > * Are you sure you want to proceed? * * ``` * * @param props - The dialog props. * @returns The dialog element. */ export var Dialog: React.FC; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 = BABYLON.NodeEditor.SharedUIComponents.BasePrimitiveProps & (ContextMenuWithIconProps | ContextMenuWithTriggerProps) & { /** * Array of menu items to display. */ items: ContextMenuItem[]; /** * Positioning of the menu relative to the trigger. */ positioning?: any["positioning"]; /** * 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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 = BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type ColorPickerProps = { isLinearMode?: boolean; } & BABYLON.NodeEditor.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 = BABYLON.NodeEditor.SharedUIComponents.PrimitiveProps & { isLinear?: boolean; isPropertyLinear?: boolean; }; /** * Component which displays the passed in color's HEX value in the currently selected color space. * When the hex color is changed by user, component calculates the new BABYLON.Color3/4 value and calls onChange. * @param props - The properties for the InputHexField component. * @returns */ export var InputHexField: React.FunctionComponent; type HsvKey = "h" | "s" | "v"; type InputHsvFieldProps = BABYLON.NodeEditor.SharedUIComponents.PrimitiveProps & { hsvKey: HsvKey; isFloat: boolean; }; /** * 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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type ClusteredLightContainerSelectorProps = BABYLON.NodeEditor.SharedUIComponents.PrimitiveProps> & { /** * The scene to get clustered light containers from */ scene: BABYLON.Scene; /** * Optional filter function to filter which clustered light containers are shown */ filter?: (container: BABYLON.ClusteredLightContainer) => boolean; } & Omit, "getEntities" | "getName">; /** * A primitive component with a ComboBox for selecting from existing scene clustered light containers. * @param props ClusteredLightContainerSelectorProps * @returns ClusteredLightContainerSelector component */ export var ClusteredLightContainerSelector: React.FunctionComponent; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type ButtonProps = BABYLON.NodeEditor.SharedUIComponents.BasePrimitiveProps & { /** Callback invoked when the button is clicked. */ onClick?: (e?: React.MouseEvent) => unknown | Promise; /** Optional icon rendered inside the button. */ icon?: any; /** Fluent button appearance. */ appearance?: "subtle" | "transparent" | "primary" | "secondary"; /** Optional visible button label. */ label?: string; /** Optional accessible label when the visible label is absent or insufficient. */ ariaLabel?: string; }; export var Button: import("react").ForwardRefExoticComponent) => unknown | Promise; /** Optional icon rendered inside the button. */ icon?: any; /** Fluent button appearance. */ appearance?: "subtle" | "transparent" | "primary" | "secondary"; /** Optional visible button label. */ label?: string; /** Optional accessible label when the visible label is absent or insufficient. */ ariaLabel?: string; } & import("react").RefAttributes>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 - BABYLON.NodeEditor.SharedUIComponents.AccordionProps * @returns AccordionContextValue, or undefined if no features are enabled or no uniqueId is provided. */ export function useAccordionContext(props: BABYLON.NodeEditor.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 - BABYLON.NodeEditor.SharedUIComponents.AccordionSectionBlockProps * @returns AccordionSectionBlockContextValue and isEmpty state */ export function useAccordionSectionBlockContext(props: BABYLON.NodeEditor.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 - BABYLON.NodeEditor.SharedUIComponents.AccordionSectionItemProps * @returns AccordionItemState, or undefined if no accordion context or nested item. */ export function useAccordionSectionItemState(props: BABYLON.NodeEditor.SharedUIComponents.AccordionSectionItemProps): AccordionItemState | undefined; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type KeyCallbacks = { onKeyDown?: (e: KeyboardEvent) => void; onKeyUp?: (e: KeyboardEvent) => void; }; export function useKeyListener(callbacks: KeyCallbacks, options?: BABYLON.NodeEditor.SharedUIComponents.WindowOptions): void; type KeyStateOptions = BABYLON.NodeEditor.SharedUIComponents.WindowOptions & { preventDefault?: boolean; }; export function useKeyState(key: string, options?: KeyStateOptions): boolean; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Options for opening a popup browser window via {@link OpenPopupWindow}. */ export type PopupWindowOptions = { /** * Title set on the popup document. */ title?: string; /** * Default width of the popup in pixels. * @remarks Ignored if `id` is provided and a previously saved width exists. */ defaultWidth?: number; /** * Default height of the popup in pixels. * @remarks Ignored if `id` is provided and a previously saved height exists. */ defaultHeight?: number; /** * Default screen-X position of the popup in pixels. * @remarks Ignored if `id` is provided and a previously saved position exists. */ defaultLeft?: number; /** * Default screen-Y position of the popup in pixels. * @remarks Ignored if `id` is provided and a previously saved position exists. */ defaultTop?: number; /** * Optional unique identity. When provided, the popup's bounds are saved to and * restored from `localStorage` under the key `Babylon/Settings/PopupWindow/{id}/Bounds`. */ id?: string; /** * Optional callback invoked when the popup is closed externally — e.g. the user dismisses * the popup, or the browser tab/window itself is unloaded. NOT called when the consumer * closes the popup via {@link PopupWindowHandle.dispose} (the consumer already knows about * that closure). */ onClose?: () => void; }; /** * Handle returned from {@link OpenPopupWindow}. */ export type PopupWindowHandle = { /** * The popup `Window` object. May become `closed` if the user dismisses the popup. */ readonly popupWindow: Window; /** * A flex container element appended to the popup body. Render the tool into this element. */ readonly hostElement: HTMLDivElement; /** * Closes the popup window and removes any listeners installed on the parent. * Safe to call multiple times. */ dispose: () => void; }; /** * Opens a new browser popup window suitable for hosting a Fluent-based modular tool. * * The popup body is configured for full-bleed flex layout and a host `
` is appended * for the tool to render into. Fluent style targeting (Griffel `RendererProvider`, * `FluentProvider` with `targetDocument`) is the caller's responsibility — typically wired * up by `MakeModularTool`, which derives `targetDocument` from `containerElement.ownerDocument`. * * **Must be called synchronously in response to a user interaction** (e.g. button click) — * otherwise the browser will block the popup as a scripted popup. * * @param options Window options. See {@link PopupWindowOptions}. * @returns A handle to the popup window and its host element, plus a `dispose` to close it. * `null` if the popup was blocked by the browser. */ export function OpenPopupWindow(options?: PopupWindowOptions): PopupWindowHandle | null; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type PaneProps = { title: string; icon?: any; }; export var Pane: React.FunctionComponent>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type TensorPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps & BABYLON.NodeEditor.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; /** Optional fixed precision (number of decimal digits). Overrides the automatically computed display precision. */ precision?: 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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Wraps text in a property line * @param props - BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps and TextProps * @returns property-line wrapped text */ export var TextPropertyLine: React.FunctionComponent & BABYLON.NodeEditor.SharedUIComponents.ImmutablePrimitiveProps>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Wraps textarea in a property line * @param props - BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps and TextProps * @returns property-line wrapped text */ export var TextAreaPropertyLine: React.FunctionComponent & BABYLON.NodeEditor.SharedUIComponents.TextareaProps>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type SyncedSliderPropertyProps = BABYLON.NodeEditor.SharedUIComponents.SyncedSliderProps & BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps; /** * Renders a simple wrapper around the SyncedSliderInput * @param props * @returns */ export var SyncedSliderPropertyLine: import("react").ForwardRefExoticComponent>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 & BABYLON.NodeEditor.SharedUIComponents.SwitchProps>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type StringifiedPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps & BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export var SpinButtonPropertyLine: React.FunctionComponent & BABYLON.NodeEditor.SharedUIComponents.SpinButtonProps>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 & BABYLON.NodeEditor.SharedUIComponents.AccordionSectionItemProps>, "ref"> & import("react").RefAttributes>; export var PlaceholderPropertyLine: React.FunctionComponent & PropertyLineProps>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Wraps a link in a property line * @param props - BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps and BABYLON.NodeEditor.SharedUIComponents.LinkProps * @returns property-line wrapped link */ export var LinkPropertyLine: React.FunctionComponent & BABYLON.NodeEditor.SharedUIComponents.LinkProps>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Wraps a text input in a property line * @param props - BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps and InputProps * @returns property-line wrapped input component */ export var TextInputPropertyLine: React.FunctionComponent>; export type NumberInputPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.SpinButtonProps & BABYLON.NodeEditor.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 - BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps and InputProps * @returns property-line wrapped input component */ export var NumberInputPropertyLine: React.FunctionComponent; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type HexPropertyLineProps = BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type NodeSelectorPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps> & BABYLON.NodeEditor.SharedUIComponents.NodeSelectorProps; type MaterialSelectorPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps> & BABYLON.NodeEditor.SharedUIComponents.MaterialSelectorProps; type TextureSelectorPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps> & BABYLON.NodeEditor.SharedUIComponents.TextureSelectorProps; type SkeletonSelectorPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps> & BABYLON.NodeEditor.SharedUIComponents.SkeletonSelectorProps; type ClusteredLightContainerSelectorPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps> & BABYLON.NodeEditor.SharedUIComponents.ClusteredLightContainerSelectorProps; 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; export const ClusteredLightContainerSelectorPropertyLine: (props: ClusteredLightContainerSelectorPropertyLineProps) => import("react/jsx-runtime").JSX.Element; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type DropdownPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.DropdownProps & BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps; /** * Wraps a dropdown in a property line * @param props - BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps and BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { type ComboBoxPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.ComboBoxProps & BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps; /** * A property line with a filterable ComboBox * @param props - BABYLON.NodeEditor.SharedUIComponents.ComboBoxProps & BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps * @returns property-line wrapped ComboBox component */ export var ComboBoxPropertyLine: React.FunctionComponent; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type ColorPropertyLineProps = BABYLON.NodeEditor.SharedUIComponents.ColorPickerProps & BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps; export var Color3PropertyLine: React.FunctionComponent & BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps>; export var Color4PropertyLine: React.FunctionComponent & BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Wraps a checkbox in a property line * @param props - BABYLON.NodeEditor.SharedUIComponents.PropertyLineProps and CheckboxProps * @returns property-line wrapped checkbox */ export var CheckboxPropertyLine: React.FunctionComponent & BABYLON.NodeEditor.SharedUIComponents.PrimitiveProps>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 & BABYLON.NodeEditor.SharedUIComponents.ImmutablePrimitiveProps>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export function ClassNames(names: any, styleObject: any): string; export function JoinClassNames(styleObject: any, ...names: string[]): string; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type ToggleProps = { toggled: "on" | "mixed" | "off"; onToggle?: () => void; padded?: boolean; color?: "dark" | "light"; }; export var Toggle: React.FC; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface MessageDialogProps { message: string; isError: boolean; onClose?: () => void; } export var MessageDialog: React.FC; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type LabelProps = { text: string; children?: React.ReactChild; color?: "dark" | "light"; }; export var Label: React.FC; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export type IconProps = { color?: "dark" | "light"; icon: string; }; export var Icon: React.FC; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * utility hook to assist using the graph context * @returns */ export const useGraphContext: () => IGraphContext; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { interface INumericInputComponentProps { label: string; labelTooltip?: string; value: number; step?: number; onChange: (value: number) => void; precision?: number; icon?: string; iconLabel?: string; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IColorPickerLineComponentProps { value: BABYLON.Color4 | BABYLON.Color3; linearHint?: boolean; onColorChanged: (newOne: string) => void; icon?: string; iconLabel?: string; shouldPopRight?: boolean; lockObject?: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.SharedUIComponents.Layout, column: number, row?: number) => BABYLON.NodeEditor.SharedUIComponents.LayoutColumn | BABYLON.NodeEditor.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: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export var LayoutContext: import("react").Context<{ /** * The layout object */ layout: BABYLON.NodeEditor.SharedUIComponents.Layout; /** * Function to set the layout object in the context */ setLayout: (layout: BABYLON.NodeEditor.SharedUIComponents.Layout) => void; }>; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Arguments for the TabsContainer component. */ export interface IFlexibleTabsContainerProps { /** * The tabs to display */ tabs: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.SharedUIComponents.TabDrag; /** * What happens when the user drops another tab after this one */ onTabDroppedAction: (item: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.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: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Arguments for the BABYLON.NodeEditor.SharedUIComponents.Layout component. */ export interface IFlexibleGridLayoutProps { /** * A definition of the layout which can be changed by the user */ layoutDefinition: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { /** * Arguments for the DraggableIcon component. */ export interface IDraggableIconProps { /** * Icon source */ src: string; /** * Object that will be passed to the drag event */ item: BABYLON.NodeEditor.SharedUIComponents.TabDrag; /** * Type of drag event */ type: BABYLON.NodeEditor.SharedUIComponents.ElementTypes; } /** * An icon that can be dragged by the user * @param props properties * @returns draggable icon element */ export var DraggableIcon: React.FC; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IHexColorProps { value: string; expectedLength: number; onChange: (value: string) => void; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IColorComponentEntryProps { value: number; label: string; max?: number; min?: number; onChange: (value: number) => void; disabled?: boolean; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface ICommandButtonComponentProps { tooltip: string; shortcut?: string; icon: string; iconLabel?: string; isActive: boolean; onClick: () => void; disabled?: boolean; } export var CommandButtonComponent: React.FC; } declare namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IHexColorProps { value: string; expectedLength: number; onChange: (value: string) => void; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.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: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { } declare namespace BABYLON.NodeEditor.SharedUIComponents { export interface IColorComponentEntryProps { value: number; label: string; max?: number; min?: number; onChange: (value: number) => void; disabled?: boolean; lockObject: BABYLON.NodeEditor.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 namespace BABYLON.NodeEditor { }