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 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/curveEditor.scss

@@ -614,8 +614,12 @@
                 display: flex;
                 align-items: center;
                 cursor: pointer;
+                padding-bottom: 8px;
+                height: 36px;
+                margin-top: -8px;
                 .text {
                   pointer-events: none;
+                  margin: 0;
                 }
               }
 
@@ -623,25 +627,22 @@
               .right-draggable {
                 display: flex;
                 align-items: center;
-                pointer-events: none;
+                height: 20px;
+                width: 20px;
+                justify-content: center;
                 &:active {
                   .grabber {
-                    background-color: #555555;
+                    background-color: #3d3d3d;
                   }
                 }
               }
 
-              .left-grabber {
-                padding-left: 3px;
-              }
-              .right-grabber {
-                padding-right: 3px;
-              }
               .grabber {
                 background-color: #333333;
                 width: 2px;
                 height: 16px;
                 margin-right: 2px;
+                pointer-events: none;
               }
 
               .text {

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

@@ -264,7 +264,7 @@ export class Timeline extends React.Component<
     }
 
     if (
-      e.target.className === 'left-grabber' &&
+      e.target.className === 'left-draggable' &&
       this._scrollbarHandle.current
     ) {
       this._active = 'leftDraggable';
@@ -273,7 +273,7 @@ export class Timeline extends React.Component<
     }
 
     if (
-      e.target.className === 'right-grabber' &&
+      e.target.className === 'right-draggable' &&
       this._scrollbarHandle.current
     ) {
       this._active = 'rightDraggable';
@@ -288,8 +288,6 @@ export class Timeline extends React.Component<
     e.preventDefault();
     if (e.target.className === 'scrollbar') {
       this.moveScrollbar(e.pageX);
-    } else {
-      console.log('out');
     }
 
     if (this._active === 'leftDraggable') {
@@ -318,7 +316,8 @@ export class Timeline extends React.Component<
     ) {
       const moved = pageX - this._shiftX;
       const scrollContainerWith = this._scrollContainer.current.clientWidth;
-      const startPixel = moved - 233;
+      const startPixel =
+        moved - this._scrollContainer.current.getBoundingClientRect().left;
       const limitRight =
         scrollContainerWith - (this.state.scrollWidth || 0) - 3;
 
@@ -347,12 +346,19 @@ export class Timeline extends React.Component<
   resizeScrollbarRight(clientX: number) {
     if (this._scrollContainer.current && this._scrollbarHandle.current) {
       const moving =
-        clientX - this._scrollbarHandle.current.getBoundingClientRect().left;
+        clientX - this._scrollContainer.current.getBoundingClientRect().left;
+
+      const unit =
+        this._scrollContainer.current.clientWidth / this.props.animationLimit;
+      const priorLastFrame = this.state.end * unit;
+      const mouseMoved = moving - priorLastFrame;
 
-      const containerWidth = this.state.scrollWidth ?? 0;
-      const resizePercentage = (100 * Math.abs(moving)) / containerWidth;
-      const frameChange = (resizePercentage * this.state.end) / 100;
-      const framesTo = Math.round(frameChange);
+      let framesTo = 0;
+      if (Math.sign(mouseMoved) !== -1) {
+        framesTo = Math.round(mouseMoved / unit) + this.state.end;
+      } else {
+        framesTo = this.state.end - Math.round(Math.abs(mouseMoved) / unit);
+      }
 
       if (!(framesTo <= this.state.start + 20)) {
         if (framesTo <= this.props.animationLimit) {
@@ -369,35 +375,38 @@ export class Timeline extends React.Component<
   resizeScrollbarLeft(clientX: number) {
     if (this._scrollContainer.current && this._scrollbarHandle.current) {
       const moving =
-        clientX - this._scrollbarHandle.current.getBoundingClientRect().left;
-      const scrollContainerWith = this._scrollContainer.current.clientWidth;
-      const pixelFrameRatio = scrollContainerWith / this.props.animationLimit;
-      const containerWidth = this.state.scrollWidth ?? 0;
-      const resizePercentage = (100 * Math.abs(moving)) / containerWidth;
+        clientX - this._scrollContainer.current.getBoundingClientRect().left;
+
+      const unit =
+        this._scrollContainer.current.clientWidth / this.props.animationLimit;
+      const priorFirstFrame =
+        this.state.start !== 0 ? this.state.start * unit : 0;
+      const mouseMoved = moving - priorFirstFrame;
 
-      const frameChange = (resizePercentage * this.state.end) / 100;
+      let framesTo = 0;
 
-      let framesTo: number;
-      if (Math.sign(moving) === 1) {
-        framesTo = this.state.start + Math.round(frameChange);
+      if (Math.sign(mouseMoved) !== -1) {
+        framesTo = Math.round(mouseMoved / unit) + this.state.start;
       } else {
-        framesTo = this.state.start - Math.round(frameChange);
+        framesTo =
+          this.state.start !== 0
+            ? this.state.start - Math.round(Math.abs(mouseMoved) / unit)
+            : 0;
       }
 
       if (!(framesTo >= this.state.end - 20)) {
-        this.setState(
-          {
-            start: framesTo,
-            scrollWidth: this.calculateScrollWidth(framesTo, this.state.end),
-            selectionLength: this.range(framesTo, this.state.end),
-          },
-          () => {
-            let Toleft = framesTo * pixelFrameRatio + 233;
-            if (this._scrollbarHandle.current) {
-              this._scrollbarHandle.current.style.left = Toleft + 'px';
-            }
-          }
-        );
+        let toleft =
+          framesTo * unit +
+          this._scrollContainer.current.getBoundingClientRect().left +
+          6;
+        if (this._scrollbarHandle.current) {
+          this._scrollbarHandle.current.style.left = toleft + 'px';
+        }
+        this.setState({
+          start: framesTo,
+          scrollWidth: this.calculateScrollWidth(framesTo, this.state.end),
+          selectionLength: this.range(framesTo, this.state.end),
+        });
       }
     }
   }