Loading and Saving snippets (BabylonJS#8409)

* loading1

* pending observer changes

* whats new

* Fixing naming

* Fixing bug

Co-authored-by: Alejandro Toledo <[email protected]>

Author: toledoal

dist/preview release/what's new.md

@@ -8,7 +8,7 @@
 - Added HDR texture filtering tools to the sandbox ([Sebavan](https://github.com/sebavan/))
 - Reflection probes can now be used to give accurate shading with PBR ([CraigFeldpsar](https://github.com/craigfeldspar) and ([Sebavan](https://github.com/sebavan/)))
 - Added editing of PBR materials, Post processes and Particle fragment shaders in the node material editor ([Popov72](https://github.com/Popov72))
-- Added Curve editor to manage selected entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
+- Added Curve editor to manage entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
 - Added support in `ShadowGenerator` for fast fake soft transparent shadows ([Popov72](https://github.com/Popov72))
 - Added support for **thin instances** for faster mesh instances. [Doc](https://doc.babylonjs.com/how_to/how_to_use_thininstances) ([Popov72](https://github.com/Popov72))
 

inspector/src/components/actionTabs/tabs/propertyGrids/animations/animationCurveEditorComponent.tsx

@@ -18,6 +18,7 @@ import { TargetedAnimation } from 'babylonjs/Animations/animationGroup';
 import { EditorControls } from './editorControls';
 import { SelectedCoordinate } from './animationListTree';
 import { LockObject } from '../lockObject';
+import { GlobalState } from '../../../../globalState';
 import { Nullable } from 'babylonjs/types';
 import { Observer } from 'babylonjs/Misc/observable';
 
@@ -29,6 +30,7 @@ interface IAnimationCurveEditorComponentProps {
   scene: Scene;
   entity: IAnimatable | TargetedAnimation;
   lockObject: LockObject;
+  globalState: GlobalState;
 }
 
 interface ICanvasAxis {
@@ -68,6 +70,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     selectedCoordinate: number;
   }
 > {
+  private _snippetUrl = 'https://snippet.babylonjs.com';
   // Height scale *Review this functionaliy
   private _heightScale: number = 100;
   // Canvas Length *Review this functionality
@@ -692,6 +695,18 @@ export class AnimationCurveEditorComponent extends React.Component<
       case Animation.ANIMATIONTYPE_VECTOR2:
         type = Vector2.Zero();
         break;
+      case Animation.ANIMATIONTYPE_QUATERNION:
+        type = Quaternion.Zero();
+        break;
+      case Animation.ANIMATIONTYPE_COLOR3:
+        type = new Color3(0, 0, 0);
+        break;
+      case Animation.ANIMATIONTYPE_COLOR4:
+        type = new Color4(0, 0, 0, 0);
+        break;
+      case Animation.ANIMATIONTYPE_SIZE:
+        type = new Size(0, 0);
+        break;
     }
     return type;
   }
@@ -789,12 +804,12 @@ export class AnimationCurveEditorComponent extends React.Component<
               if (this.state !== undefined) {
                 let emptyTangents = keyframes.map((kf, i) => {
                   if (i === 0) {
-                    kf.outTangent = 0;
+                    kf.outTangent = this.returnZero(valueType);
                   } else if (i === keyframes.length - 1) {
-                    kf.inTangent = 0;
+                    kf.inTangent = this.returnZero(valueType);
                   } else {
-                    kf.inTangent = 0;
-                    kf.outTangent = 0;
+                    kf.inTangent = this.returnZero(valueType);
+                    kf.outTangent = this.returnZero(valueType);
                   }
                   return kf;
                 });
@@ -1410,6 +1425,8 @@ export class AnimationCurveEditorComponent extends React.Component<
               setNotificationMessage={(message: string) => {
                 this.setState({ notification: message });
               }}
+              globalState={this.props.globalState}
+              snippetServer={this._snippetUrl}
             />
 
             <div
@@ -1475,17 +1492,15 @@ export class AnimationCurveEditorComponent extends React.Component<
                     );
                   })}
 
-                  <svg>
-                    <rect
-                      onClick={(e) => this.moveFrameTo(e)}
-                      x='0%'
-                      y='91%'
-                      width='105%'
-                      height='10%'
-                      fill='#222'
-                      style={{ cursor: 'pointer' }}
-                    ></rect>
-                  </svg>
+                  <rect
+                    onClick={(e) => this.moveFrameTo(e)}
+                    x='0%'
+                    y='91%'
+                    width='105%'
+                    height='10%'
+                    fill='#222'
+                    style={{ cursor: 'pointer' }}
+                  ></rect>
 
                   {this.state.frameAxisLength.map((f, i) => (
                     <svg key={i} x='0' y='96%'>