Importing the Animation Curve Editor React Component

Questions
,
1

I’m attempting to utilize the Animation Curve Editor more directly with a Custom Wrapper component to utilize it for creating animation data for some custom mesh data.

Looking for any clarification or possible solutions to importing these React components from the inspector module.

I’m getting errors when attempting to import the defined module of @babylonjs/inspector/components/actionTabs/tabs/propertyGrids/animations/curveEditor/animationCurveEditorComponent

I’d assume with the module being defined in the inspector.module.d.ts that it would be accessible .

I attempted this with a basic Typescript / Webpack app to try and prove it out.
Modifying the first js app from Babylon.js docs

included the following…


import { AnimationCurveEditorComponent } from "@babylonjs/inspector/components/actionTabs/tabs/propertyGrids/animations/curveEditor/animationCurveEditorComponent";

// TODO - after I get the import
const globalState: any = null;
const context: any = null;

const container = document.getElementById("app");
const root = createRoot(container!); // createRoot(container!) if you use TypeScript
root.render(
  <AnimationCurveEditorComponent globalState={globalState} context={context} />
);


Attempted CodePen (though it doesn’t build)

Thank you.

2

cc @RaananW

3

The inspector’s es6 version is actually (still) bundled. It is a single file that doesn’t export all componenst as you would expect. Some work has been done to actually deliver the inspector as compiled sources (like the rest of our es6 packages), but it was not done yet. So, for the time being, it is impossible to do that with the compiled package.
What you can do is compile on your own and use the compiled sources. However, this will still require a bundler, as we are importing (s)css files that need to be processed.

2 Likes