Add option to append animations

Add option to handle animation groups consecutive loads

inspector/src/components/actionTabs/tabs/toolsTabComponent.tsx

@@ -25,6 +25,7 @@ import { CheckBoxLineComponent } from '../lines/checkBoxLineComponent';
 import { TextLineComponent } from '../lines/textLineComponent';
 import { Scene } from 'babylonjs/scene';
 import { FileMultipleButtonLineComponent } from '../lines/fileMultipleButtonLineComponent';
+import { OptionsLineComponent } from '../lines/optionsLineComponent';
 
 export class ToolsTabComponent extends PaneComponent {
     private _videoRecorder: Nullable<VideoRecorder>;
@@ -36,6 +37,14 @@ export class ToolsTabComponent extends PaneComponent {
         super(props);
 
         this.state = { tag: "Record video" };
+
+        const sceneImportDefaults = this.props.globalState.sceneImportDefaults;
+        if (sceneImportDefaults["overwriteAnimations"] === undefined) {
+            sceneImportDefaults["overwriteAnimations"] = true;
+        }
+        if (sceneImportDefaults["animationGroupLoadingMode"] === undefined) {
+            sceneImportDefaults["animationGroupLoadingMode"] = 0; // TODO - import SceneLoaderAnimationGroupLoadingMode
+        }
     }
 
     componentDidMount() {
@@ -99,6 +108,9 @@ export class ToolsTabComponent extends PaneComponent {
 
         const scene = this.props.scene;
 
+        const overwriteAnimations = this.props.globalState.sceneImportDefaults["overwriteAnimations"];
+        const animationGroupLoadingMode = this.props.globalState.sceneImportDefaults["animationGroupLoadingMode"];
+
         var reload = function (sceneFile: File) {
             // If a scene file has been provided
             if (sceneFile) {
@@ -108,7 +120,7 @@ export class ToolsTabComponent extends PaneComponent {
                         currentGroup.play(true);
                     }
                 };
-                (BABYLON.SceneLoader as any).ImportAnimationsAsync("file:", sceneFile, scene, null, onSuccess);
+                (BABYLON.SceneLoader as any).ImportAnimationsAsync("file:", sceneFile, scene, overwriteAnimations, animationGroupLoadingMode, null, onSuccess);
             }
         };
         let filesInputAnimation = new BABYLON.FilesInput(scene.getEngine() as any, scene as any, () => { }, () => { }, () => { }, (remaining: number) => { }, () => { }, reload, () => { });
@@ -143,7 +155,7 @@ export class ToolsTabComponent extends PaneComponent {
             glb.downloadFiles();
             this._isExporting = false;
             this.forceUpdate();
-        }).catch(reason => {      
+        }).catch(reason => {
             this._isExporting = false;
             this.forceUpdate();
         });
@@ -186,6 +198,15 @@ export class ToolsTabComponent extends PaneComponent {
             return null;
         }
 
+        const sceneImportDefaults = this.props.globalState.sceneImportDefaults;
+
+        var animationGroupLoadingModes = [
+            { label: "Clean", value: 0 }, // TODO - import SceneLoaderAnimationGroupLoadingMode
+            { label: "Stop", value: 1 },
+            { label: "Sync", value: 2 },
+            { label: "NoSync", value: 3 },
+        ];
+
         return (
             <div className="pane">
                 <LineContainerComponent globalState={this.props.globalState} title="CAPTURE">
@@ -196,19 +217,19 @@ export class ToolsTabComponent extends PaneComponent {
                     <ButtonLineComponent label="Capture" onClick={() => this.captureRender()} />
                     <div className="vector3Line">
                         <FloatLineComponent label="Precision" target={this._screenShotSize} propertyName='precision' onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
-                        <CheckBoxLineComponent label="Use Width/Height" onSelect={ value => {
+                        <CheckBoxLineComponent label="Use Width/Height" onSelect={value => {
                             this._useWidthHeight = value;
                             this.forceUpdate();
                         }
                         } isSelected={() => this._useWidthHeight} />
                         {
-                        this._useWidthHeight &&
-                        <div className="secondLine">
-                            <NumericInputComponent label="Width" precision={0} step={1} value={this._screenShotSize.width ? this._screenShotSize.width : 512} onChange={value => this._screenShotSize.width = value} />
-                            <NumericInputComponent label="Height" precision={0} step={1} value={this._screenShotSize.height ? this._screenShotSize.height : 512} onChange={value => this._screenShotSize.height = value} />
-                        </div>
+                            this._useWidthHeight &&
+                            <div className="secondLine">
+                                <NumericInputComponent label="Width" precision={0} step={1} value={this._screenShotSize.width ? this._screenShotSize.width : 512} onChange={value => this._screenShotSize.width = value} />
+                                <NumericInputComponent label="Height" precision={0} step={1} value={this._screenShotSize.height ? this._screenShotSize.height : 512} onChange={value => this._screenShotSize.height = value} />
+                            </div>
                         }
-                        
+
                     </div>
                 </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="REPLAY">
@@ -216,16 +237,24 @@ export class ToolsTabComponent extends PaneComponent {
                     <ButtonLineComponent label="Reset" onClick={() => this.resetReplay()} />
                 </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="SCENE IMPORT">
-                    <FileMultipleButtonLineComponent label="Import Animations" accept="gltf" onClick={(evt: any) => this.importAnimations(evt)} />
+                    <FileMultipleButtonLineComponent label="Import animations" accept="gltf" onClick={(evt: any) => this.importAnimations(evt)} />
+                    <CheckBoxLineComponent label="Overwrite animations" target={sceneImportDefaults} propertyName="overwriteAnimations" onSelect={value => {
+                        sceneImportDefaults["overwriteAnimations"] = value;
+                        this.forceUpdate();
+                    }} />
+                    {
+                        sceneImportDefaults["overwriteAnimations"] === false &&
+                        <OptionsLineComponent label="Old animation groups loading mode" options={animationGroupLoadingModes} target={sceneImportDefaults} propertyName="animationGroupLoadingMode" />
+                    }
                 </LineContainerComponent>
                 <LineContainerComponent globalState={this.props.globalState} title="SCENE EXPORT">
                     {
-                        this._isExporting && 
+                        this._isExporting &&
                         <TextLineComponent label="Please wait..exporting" ignoreValue={true} />
                     }
                     {
-                        !this._isExporting && 
-                        <>  
+                        !this._isExporting &&
+                        <>
                             <ButtonLineComponent label="Export to GLB" onClick={() => this.exportGLTF()} />
                             <ButtonLineComponent label="Export to Babylon" onClick={() => this.exportBabylon()} />
                             {

inspector/src/components/globalState.ts

@@ -18,6 +18,8 @@ export class GlobalState {
     public onTabChangedObservable = new Observable<number>();
     public onPluginActivatedObserver: Nullable<Observer<ISceneLoaderPlugin | ISceneLoaderPluginAsync>>;
 
+    public sceneImportDefaults: { [key: string]: any } = {};
+
     public validationResults: IGLTFValidationResults;
     public onValidationResultsUpdatedObservable = new Observable<IGLTFValidationResults>();
 
@@ -109,7 +111,7 @@ export class GlobalState {
                 light.reservedDataStore.lightGizmo = new LightGizmo();
                 this.lightGizmos.push(light.reservedDataStore.lightGizmo)
                 light.reservedDataStore.lightGizmo.light = light;
-                light.reservedDataStore.lightGizmo.material.reservedDataStore = {hidden: true};
+                light.reservedDataStore.lightGizmo.material.reservedDataStore = { hidden: true };
             }
         } else if (light.reservedDataStore && light.reservedDataStore.lightGizmo) {
             this.lightGizmos.splice(this.lightGizmos.indexOf(light.reservedDataStore.lightGizmo), 1);

sandbox/index.js

@@ -47,7 +47,6 @@ if (BABYLON.Engine.isSupported()) {
     var htmlInput = document.getElementById("files");
     var btnInspector = document.getElementById("btnInspector");
     var errorZone = document.getElementById("errorZone");
-    var btnAnimationFiles = document.getElementById("animationFilesButton");
     var filesInput;
     var filesInputAnimation;
     var currentScene;
@@ -60,7 +59,6 @@ if (BABYLON.Engine.isSupported()) {
 
     btnInspector.classList.add("hidden");
     btnEnvironment.classList.add("hidden");
-    btnAnimationFiles.classList.add("hidden");
 
     canvas.addEventListener("contextmenu", function(evt) {
         evt.preventDefault();
@@ -141,7 +139,6 @@ if (BABYLON.Engine.isSupported()) {
 
         btnInspector.classList.remove("hidden");
         btnEnvironment.classList.remove("hidden");
-        btnAnimationFiles.classList.remove("hidden");
 
         // Attach camera to canvas inputs
         if (!currentScene.activeCamera || currentScene.lights.length === 0) {