implement drag

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

@@ -1406,6 +1406,12 @@ export class AnimationCurveEditorComponent extends React.Component<
     }
   }
 
+  setCurrentFrame(direction: number) {
+    this.setState({
+      currentFrame: this.state.currentFrame + direction,
+    });
+  }
+
   changeAnimationLimit(limit: number) {
     this.setState({
       animationLimit: limit,
@@ -1594,6 +1600,9 @@ export class AnimationCurveEditorComponent extends React.Component<
                   panningX={(panningX: number) => {
                     this.setState({ panningX: panningX });
                   }}
+                  setCurrentFrame={(direction: number) =>
+                    this.setCurrentFrame(direction)
+                  }
                 >
                   {/* Multiple Curves  */}
                   {this.state.selectedPathData?.map((curve, i) => (
@@ -1611,28 +1620,6 @@ export class AnimationCurveEditorComponent extends React.Component<
                     ></path>
                   ))}
 
-                  {/* {this.state.valueAxisLength.map((f, i) => {
-                    return (
-                      <svg key={i}>
-                        <text
-                          x='-4'
-                          y={f.value}
-                          dx='0'
-                          dy='1'
-                          style={{ fontSize: `${0.2 * this.state.scale}em` }}
-                        >
-                          {f.label.toFixed(1)}
-                        </text>
-                        <line
-                          x1={-((this.state.frameAxisLength.length * 10) / 2)}
-                          y1={f.value}
-                          x2={this.state.frameAxisLength.length * 10}
-                          y2={f.value}
-                        ></line>
-                      </svg>
-                    );
-                  })} */}
-
                   {this.setValueLines().map((line, i) => {
                     return (
                       <text
@@ -1711,10 +1698,13 @@ export class AnimationCurveEditorComponent extends React.Component<
                               fill='white'
                             />
                             <text
-                              x='-0.6%'
+                              x='0'
                               y='1%'
+                              textAnchor='middle'
                               style={{
                                 fontSize: `${0.17 * this.state.scale}em`,
+                                pointerEvents: 'none',
+                                fontWeight: 600,
                               }}
                             >
                               {f.label}

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

@@ -1127,6 +1127,10 @@
         width: 100%;
         outline: none;
 
+        .svg-playhead {
+          cursor: pointer;
+        }
+
         svg {
           overflow: visible;
         }

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

@@ -13,6 +13,7 @@ interface ISvgDraggableAreaProps {
   removeSelectedKeyframes: (points: IKeyframeSvgPoint[]) => void;
   panningY: (panningY: number) => void;
   panningX: (panningX: number) => void;
+  setCurrentFrame: (direction: number) => void;
 }
 
 export class SvgDraggableArea extends React.Component<
@@ -25,6 +26,7 @@ export class SvgDraggableArea extends React.Component<
   private _draggableArea: React.RefObject<SVGSVGElement>;
   private _panStart: Vector2;
   private _panStop: Vector2;
+  private _playheadDrag: number;
 
   constructor(props: ISvgDraggableAreaProps) {
     super(props);
@@ -33,6 +35,7 @@ export class SvgDraggableArea extends React.Component<
     this._draggableArea = React.createRef();
     this._panStart = new Vector2(0, 0);
     this._panStop = new Vector2(0, 0);
+    this._playheadDrag = 0;
 
     this.state = { panX: 0, panY: 0 };
   }
@@ -66,6 +69,11 @@ export class SvgDraggableArea extends React.Component<
       }
     }
 
+    if (e.target.classList.contains('svg-playhead')) {
+      this._active = true;
+      this._playheadDrag = e.clientX;
+    }
+
     if (e.target.classList.contains('pannable')) {
       this._active = true;
       this._panStart.set(e.clientX, e.clientY);
@@ -86,6 +94,13 @@ export class SvgDraggableArea extends React.Component<
             this._panStop.set(e.clientX, e.clientY);
             this.panDirection();
           }
+        }
+        if (e.target.classList.contains('svg-playhead')) {
+          if (this._playheadDrag < e.clientX) {
+            this.props.setCurrentFrame(1);
+          } else {
+            this.props.setCurrentFrame(-1);
+          }
         } else {
           var newPoints = [...this.props.keyframeSvgPoints];
 
@@ -223,7 +238,13 @@ export class SvgDraggableArea extends React.Component<
     return (
       <>
         <svg
-          style={{ width: 30, height: 364, position: 'absolute', zIndex: 1 }}
+          style={{
+            width: 30,
+            height: 364,
+            position: 'absolute',
+            zIndex: 1,
+            pointerEvents: 'none',
+          }}
         >
           <rect x='0' y='0' width='30px' height='100%' fill='#ffffff1c'></rect>
         </svg>