Merge pull request #8618 from toledoal/dragkeyframe

Dragkeyframe

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 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

@@ -483,32 +483,36 @@ export class AnimationCurveEditorComponent extends React.Component<
         }
 
         if (newFrame > keys[index].frame) {
-            const nextKf = keys[index + 1];
-
-            if (nextKf) {
-                if (nextKf.frame <= newFrame) {
-                    keys[index].frame = keys[index].frame;
-                } else {
-                    keys[index].frame = newFrame;
+            if (index === keys.length - 1) {
+                keys[index].frame = newFrame;
+            } else {
+                const nextKf = keys[index + 1];
+                if (nextKf) {
+                    if (nextKf.frame <= newFrame) {
+                        keys[index].frame = keys[index].frame;
+                    } else {
+                        keys[index].frame = newFrame;
+                    }
                 }
             }
         }
 
         if (newFrame < keys[index].frame) {
-            const prevKf = keys[index - 1];
-            if (prevKf) {
-                if (prevKf.frame >= newFrame) {
-                    keys[index].frame = keys[index].frame;
-                } else {
-                    keys[index].frame = newFrame;
+            if (index === 0) {
+                keys[index].frame = newFrame;
+            } else {
+                const prevKf = keys[index - 1];
+                if (prevKf) {
+                    if (prevKf.frame >= newFrame) {
+                        keys[index].frame = keys[index].frame;
+                    } else {
+                        keys[index].frame = newFrame;
+                    }
                 }
             }
         }
 
-        //let updatedValue = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * this._scaleFactor; // this value comes inverted svg from 0 = 100 to 100 = 0
-        //let updatedValue = ((100 - updatedSvgKeyFrame.keyframePoint.y) / 100) * 2; // this value comes inverted svg from 0 = 100 to 100 = 0
-        //let updatedValue = ((100 - updatedSvgKeyFrame.keyframePoint.y) / 100) * this._scaleFactor;
-        let updatedValue = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * this._scaleFactor; //?
+        let updatedValue = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * this._scaleFactor;
 
         const updatedValueInCoordinate = this.updateValuePerCoordinate(animation.dataType, keys[index].value, updatedValue, coordinate);