Merge pull request #8468 from toledoal/bug-flickeringdrag

Fix for flickering scrollbar bug

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

@@ -197,12 +197,9 @@ export class AnimationCurveEditorComponent extends React.Component<
     e.nativeEvent.stopImmediatePropagation();
     let scaleX = 1;
     if (Math.sign(e.deltaY) === -1) {
-      scaleX = this.state.scale - 0.01;
-    } else {
-      scaleX = this.state.scale + 0.01;
+      scaleX = this.state.scale; //- 0.01; //+ 0.01;
     }
-    console.log(scaleX);
-    //this.setState({ scale: scaleX }, this.setAxesLength);
+    this.setState({ scale: scaleX });
   }
 
   setFrameAxis(currentLength: number) {
@@ -251,18 +248,6 @@ export class AnimationCurveEditorComponent extends React.Component<
 
     let valueLines = Math.round((this.state.scale * this._heightScale) / 10);
 
-    let halfNegative = new Array(length / 2).fill(0).map((s, i) => {
-      return { value: -i * 10, label: -i };
-    });
-
-    let halfPositive = new Array(length / 2).fill(0).map((s, i) => {
-      return { value: i * 10, label: i };
-    });
-
-    let mixed = [...halfNegative, ...halfPositive];
-
-    console.log(mixed);
-
     let newFrameLength = new Array(length).fill(0).map((s, i) => {
       return { value: i * 10, label: i };
     });
@@ -1198,11 +1183,8 @@ export class AnimationCurveEditorComponent extends React.Component<
           pointB
         );
 
-        if (controlPoints === undefined) {
-          console.log('error getting bezier control points');
-        } else {
+        if (controlPoints !== undefined) {
           this.setKeyframePoint(controlPoints, i, keyframes.length);
-
           data += ` C${controlPoints[1].x} ${controlPoints[1].y} ${controlPoints[2].x} ${controlPoints[2].y} ${controlPoints[3].x} ${controlPoints[3].y}`;
         }
       }
@@ -1311,17 +1293,9 @@ export class AnimationCurveEditorComponent extends React.Component<
 
     if (coordinate === undefined) {
       this.playStopAnimation();
-
       updatedPath = this.getPathData(animation);
-
-      if (updatedPath === undefined) {
-        console.log('no keyframes in this animation');
-      }
     } else {
       let curves = this.getPathData(animation);
-      if (curves === undefined) {
-        console.log('no keyframes in this animation');
-      }
 
       updatedPath = [];
 

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

@@ -290,7 +290,6 @@ export class AnimationListTree extends React.Component<
           },
         ]);
       default:
-        console.log('not recognized');
         return null;
     }
   }

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

@@ -152,9 +152,7 @@ export class AnimationGridComponent extends React.Component<
 
   onCloseAnimationCurveEditor(window: Window | null) {
     this._isCurveEditorOpen = false;
-    if (window === null) {
-      console.log('Window already closed');
-    } else {
+    if (window !== null) {
       window.close();
     }
   }

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/playhead.tsx

@@ -27,9 +27,6 @@ export class Playhead extends React.Component<IPlayheadProps> {
     e.preventDefault();
     if (this._active) {
       let moved = e.pageX - this._direction;
-
-      let framesToMove = Math.round(Math.abs(moved) / 2);
-      console.log(framesToMove);
       if (Math.sign(moved) === -1) {
         this.props.onCurrentFrameChange(this.props.frame - 1);
       } else {

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

@@ -157,8 +157,6 @@ export class SvgDraggableArea extends React.Component<
     });
     this.props.panningY(Math.round(newY));
     this.props.panningX(Math.round(newX));
-
-    console.log(Math.round(newX));
   }
 
   panTo(direction: string, value: number) {

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

@@ -209,13 +209,11 @@ export class Timeline extends React.Component<
       ) {
         let updatedKeyframe = this.props.keyframes[this.state.activeKeyframe];
         if (this._direction > e.clientX) {
-          console.log(`Dragging left ${this.state.activeKeyframe}`);
           let used = this.isFrameBeingUsed(updatedKeyframe.frame - 1, -1);
           if (used) {
             updatedKeyframe.frame = used;
           }
         } else {
-          console.log(`Dragging Right ${this.state.activeKeyframe}`);
           let used = this.isFrameBeingUsed(updatedKeyframe.frame + 1, 1);
           if (used) {
             updatedKeyframe.frame = used;
@@ -264,7 +262,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 +271,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 +286,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 +314,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 +344,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 +373,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),
+        });
       }
     }
   }