Playhead drag

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

@@ -1768,6 +1768,12 @@ export class AnimationCurveEditorComponent extends React.Component<
         });
     };
 
+    setCurrentFrame2 = (frame: number) => {
+        this.setState({
+            currentFrame: frame,
+        });
+    };
+
     changeAnimationLimit = (limit: number) => {
         this.stopAnimation();
         const doubleLimit = limit * 2;
@@ -1986,7 +1992,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                     updatePosition={this.renderPoints}
                                     panningY={this.setPanningY}
                                     panningX={this.setPanningX}
-                                    setCurrentFrame={this.setCurrentFrame}
+                                    setCurrentFrame={this.setCurrentFrame2}
                                     positionCanvas={new Vector2(this.state.panningX, this.state.panningY)}
                                     repositionCanvas={this.state.repositionCanvas}
                                     canvasPositionEnded={this.canvasPositionEnded}

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

@@ -136,15 +136,17 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
                 ) {
                     const moving = e.clientX - e.currentTarget.getBoundingClientRect().left;
 
-                    const distance = moving - this._playheadDrag;
                     const draggableAreaWidth = e.currentTarget.clientWidth;
-                    const framesInCavas = 20;
-                    const unit = draggableAreaWidth / framesInCavas;
 
-                    if (Math.abs(distance) >= unit / 1.25) {
-                        this.props.setCurrentFrame(Math.sign(distance));
-                        this._playheadDrag = this._playheadDrag + distance;
-                    }
+                    const framesInDefaultCavas = 20;
+
+                    const unit = 39;
+
+                    const maxFrames = draggableAreaWidth / unit;
+                    const differentFrames = Math.round((Math.round(maxFrames) - framesInDefaultCavas) / 2);
+
+                    const newFrame = Math.round(moving / unit) - differentFrames;
+                    this.props.setCurrentFrame(newFrame);
                 } else {
                     var newPoints = [...this.props.keyframeSvgPoints];