On reposition canvas show in value

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

@@ -1413,8 +1413,22 @@ export class AnimationCurveEditorComponent extends React.Component<
         }
     }
 
-    setCanvasPosition(frame: number) {
-        this.setState({ panningX: (frame - 10) * 10, repositionCanvas: true });
+    setCanvasPosition(keyframe: IAnimationKey) {
+        if (this.state.selected) {
+            const positionX = (keyframe.frame - 10) * 10;
+
+            let value = 0;
+            if (keyframe.value === null) {
+                value = this.state.panningY;
+            } else {
+                value = this.getValueAsArray(this.state.selected.dataType, keyframe.value)[this.state.selectedCoordinate];
+            }
+
+            const centerCanvas = this._heightScale / 2;
+            const positionY = centerCanvas - value * centerCanvas;
+
+            this.setState({ panningX: positionX, panningY: positionY, repositionCanvas: true });
+        }
     }
 
     setCurrentFrame(direction: number) {
@@ -1571,7 +1585,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                         this.setState({ panningX: panningX });
                                     }}
                                     setCurrentFrame={(direction: number) => this.setCurrentFrame(direction)}
-                                    positionCanvas={this.state.panningX}
+                                    positionCanvas={new Vector2(this.state.panningX, this.state.panningY)}
                                     repositionCanvas={this.state.repositionCanvas}
                                     canvasPositionEnded={() => this.setState({ repositionCanvas: false })}
                                     resetActionableKeyframe={() => this.resetActionableKeyframe()}
@@ -1682,7 +1696,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                             keyframes={this.state.selected && this.state.selected.getKeys()}
                             selected={this.state.selected && this.state.selected.getKeys()[0]}
                             fps={this.state.fps}
-                            repositionCanvas={(frame: number) => this.setCanvasPosition(frame)}
+                            repositionCanvas={(keyframe: IAnimationKey) => this.setCanvasPosition(keyframe)}
                         ></Timeline>
                     </div>
                 </div>

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

@@ -7,7 +7,7 @@ interface IControlsProps {
     selected: IAnimationKey | null;
     currentFrame: number;
     onCurrentFrameChange: (frame: number) => void;
-    repositionCanvas: (frame: number) => void;
+    repositionCanvas: (keyframe: IAnimationKey) => void;
     playPause: (direction: number) => void;
     isPlaying: boolean;
     scrollable: React.RefObject<HTMLDivElement>;
@@ -40,18 +40,22 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
     }
 
     moveToAnimationStart() {
-        const start = this.props.keyframes && this.props.keyframes[0].frame;
-        if (start !== undefined && typeof start === "number") {
-            this.props.onCurrentFrameChange(start);
-            this.props.repositionCanvas(start);
+        const startKeyframe = this.props.keyframes && this.props.keyframes[0];
+        if (startKeyframe !== null) {
+            if (startKeyframe.frame !== undefined && typeof startKeyframe.frame === "number") {
+                this.props.onCurrentFrameChange(startKeyframe.frame);
+            }
+            this.props.repositionCanvas(startKeyframe);
         }
     }
 
     moveToAnimationEnd() {
-        const end = this.props.keyframes && this.props.keyframes[this.props.keyframes.length - 1].frame;
-        if (end !== undefined && typeof end === "number") {
-            this.props.onCurrentFrameChange(end);
-            this.props.repositionCanvas(end);
+        const endKeyframe = this.props.keyframes && this.props.keyframes[this.props.keyframes.length - 1];
+        if (endKeyframe !== null) {
+            if (endKeyframe.frame !== undefined && typeof endKeyframe.frame === "number") {
+                this.props.onCurrentFrameChange(endKeyframe.frame);
+                this.props.repositionCanvas(endKeyframe);
+            }
         }
     }
 
@@ -60,7 +64,7 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
             let first = this.props.keyframes.find((kf) => kf.frame > this.props.currentFrame);
             if (first) {
                 this.props.onCurrentFrameChange(first.frame);
-                this.props.repositionCanvas(first.frame);
+                this.props.repositionCanvas(first);
                 this.setState({ selected: first });
                 (this.props.scrollable.current as HTMLDivElement).scrollLeft = first.frame * this._sizeOfKeyframe;
             }
@@ -73,7 +77,7 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
             let first = keyframes.reverse().find((kf) => kf.frame < this.props.currentFrame);
             if (first) {
                 this.props.onCurrentFrameChange(first.frame);
-                this.props.repositionCanvas(first.frame);
+                this.props.repositionCanvas(first);
                 this.setState({ selected: first });
                 (this.props.scrollable.current as HTMLDivElement).scrollLeft = -(first.frame * this._sizeOfKeyframe);
             }

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

@@ -14,7 +14,7 @@ interface ISvgDraggableAreaProps {
     panningY: (panningY: number) => void;
     panningX: (panningX: number) => void;
     setCurrentFrame: (direction: number) => void;
-    positionCanvas?: number;
+    positionCanvas?: Vector2;
     repositionCanvas?: boolean;
     canvasPositionEnded: () => void;
     resetActionableKeyframe: () => void;
@@ -61,7 +61,7 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
 
     componentWillReceiveProps(newProps: ISvgDraggableAreaProps) {
         if (newProps.positionCanvas !== this.props.positionCanvas && newProps.positionCanvas !== undefined && newProps.repositionCanvas) {
-            this.setState({ panX: newProps.positionCanvas }, () => {
+            this.setState({ panX: newProps.positionCanvas.x, panY: newProps.positionCanvas.y }, () => {
                 this.props.canvasPositionEnded();
             });
         }

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

@@ -13,7 +13,7 @@ interface ITimelineProps {
     isPlaying: boolean;
     animationLimit: number;
     fps: number;
-    repositionCanvas: (frame: number) => void;
+    repositionCanvas: (keyframe: IAnimationKey) => void;
 }
 
 export class Timeline extends React.Component<
@@ -148,7 +148,8 @@ export class Timeline extends React.Component<
             const unit = Math.round(containerWidth / this.state.selectionLength.length);
             const frame = Math.round((event.clientX - 233) / unit) + this.state.start;
             this.props.onCurrentFrameChange(frame);
-            this.props.repositionCanvas(frame);
+            const possibleEmptyKeyframe: IAnimationKey = { frame: frame, value: null };
+            this.props.repositionCanvas(possibleEmptyKeyframe);
         }
     }