Merge pull request #8626 from toledoal/deletekey

Fix

dist/preview release/what's new.md

@@ -9,7 +9,7 @@
 - Reflection probes can now be used to give accurate shading with PBR ([CraigFeldpsar](https://github.com/craigfeldspar) and ([Sebavan](https://github.com/sebavan/)))
 - Added SubSurfaceScattering on PBR materials ([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 entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
+- Added Curve editor to manage selected 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

@@ -644,9 +644,21 @@ export class AnimationCurveEditorComponent extends React.Component<
     }
 
     setFlatTangent() {
+        const keyframes = this.state.svgKeyframes?.filter((kf) => kf.selected).map((k) => this.decodeCurveId(k.id));
+
         if (this.state.selected !== null) {
-            let animation = this.state.selected;
-            this.setState({ isFlatTangentMode: true }, () => this.selectAnimation(animation));
+            let currentAnimation = this.state.selected;
+            const keys = currentAnimation.getKeys();
+
+            keyframes?.forEach((k) => {
+                const keyframe = keys[k.order];
+                keyframe.inTangent = this.returnZero(currentAnimation.dataType);
+                keyframe.outTangent = this.returnZero(currentAnimation.dataType);
+            });
+
+            currentAnimation.setKeys(keys);
+
+            this.selectAnimation(currentAnimation, this.state.selectedCoordinate);
         }
     }
 
@@ -692,6 +704,31 @@ export class AnimationCurveEditorComponent extends React.Component<
                 }
             }
 
+            // calculate point between prevkeyframe and nextkeyframe.
+            const previousKFs = keys.filter((kf) => kf.frame < x);
+            const nextKFs = keys.filter((kf) => kf.frame > x);
+            const prev = previousKFs.slice(-1)[0];
+            const next = nextKFs[0];
+
+            if (prev === undefined && next) {
+                y = next.value;
+            }
+
+            if (prev && next === undefined) {
+                y = prev.value;
+            }
+
+            if (prev && next) {
+                const value1 = new Vector2(prev.frame, prev.value);
+                const tangent1 = new Vector2(prev.outTangent, prev.outTangent);
+                const value2 = new Vector2(next.frame, next.value);
+                const tangent2 = new Vector2(next.inTangent, next.inTangent);
+
+                const amount = (x - prev.frame) / (next.frame - prev.frame);
+                const newV = Vector2.Hermite(value1, tangent1, value2, tangent2, amount);
+                y = newV.y;
+            }
+
             arrayValue[this.state.selectedCoordinate] = y;
 
             let actualValue = this.setValueAsType(currentAnimation.dataType, arrayValue);
@@ -721,7 +758,7 @@ export class AnimationCurveEditorComponent extends React.Component<
 
                 currentAnimation.setKeys(filteredKeys);
 
-                this.selectAnimation(currentAnimation);
+                this.selectAnimation(currentAnimation, this.state.selectedCoordinate);
             }
         }
     }
@@ -746,7 +783,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 currentAnimation.setKeys(filteredKeys);
                 this.deselectKeyframes();
 
-                this.selectAnimation(currentAnimation);
+                this.selectAnimation(currentAnimation, this.state.selectedCoordinate);
             }
         }
     }

inspector/src/components/actionTabs/tabs/propertyGrids/animations/curveEditor.scss

@@ -508,14 +508,15 @@ body {
     align-items: flex-start;
     justify-content: flex-start;
     flex-direction: column;
-    height: 465px;
+    height: calc(100vh - 40px);
 
     .row {
-      width: 1024px;
-      height: 427px;
+      width: auto;
+      height: auto;
       display: flex;
       flex-flow: row;
       background-color: #333333;
+      margin-bottom: auto;
     }
 
     .row-bottom {
@@ -660,7 +661,7 @@ body {
         }
 
         .timeline-wrapper {
-          margin-top: -45px;
+          margin-top: -31px;
           margin-left: -2px;
         }
 
@@ -671,6 +672,7 @@ body {
           padding-left: 46px;
           padding-right: 46px;
           margin-left: 10px;
+          margin-top: -10px;
 
           .stop-container {
             width: 40px;
@@ -930,7 +932,7 @@ body {
         display: block;
         position: absolute;
         background-color: #111111;
-        height: 377px;
+        height: calc(100vh - 120px);
         z-index: 10;
 
         .sub-header {

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

@@ -211,7 +211,7 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
             this._draggableArea.current?.style.setProperty("cursor", "initial");
         }
 
-        if (e.keyCode === 8) {
+        if (e.keyCode === 8 || e.keyCode === 46) {
             const pointsToDelete = this.props.keyframeSvgPoints.filter((kf) => kf.selected);
             this.props.removeSelectedKeyframes(pointsToDelete);
         }