zero frame

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

@@ -509,6 +509,15 @@ export class AnimationCurveEditorComponent extends React.Component<
         return value;
     }
 
+    forceFrameZeroToExist(keys: IAnimationKey[]) {
+        const zeroFrame = keys.find((x) => Math.abs(x.frame) === 0);
+        if (zeroFrame === undefined) {
+            const frame: IAnimationKey = { frame: 0, value: keys[0].value };
+            keys.push(frame);
+            keys.sort((a, b) => a.frame - b.frame);
+        }
+    }
+
     renderPoints = (updatedSvgKeyFrame: IKeyframeSvgPoint, id: string) => {
         let animation = this.state.selected as Animation;
 
@@ -570,6 +579,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         this.updateLeftControlPoint(updatedSvgKeyFrame, keys[index], animation.dataType, coordinate);
         this.updateRightControlPoint(updatedSvgKeyFrame, keys[index], animation.dataType, coordinate);
 
+        this.forceFrameZeroToExist(keys);
         animation.setKeys(keys);
 
         this.setState({
@@ -762,6 +772,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                             }
                             return k;
                         });
+                        this.forceFrameZeroToExist(updatedKeys);
                         this.state.selected.setKeys(updatedKeys);
                         this.selectAnimation(animation);
                     }
@@ -1654,7 +1665,7 @@ export class AnimationCurveEditorComponent extends React.Component<
 
     setCanvasPosition = (keyframe: IAnimationKey) => {
         if (this.state.selected) {
-            const positionX = (keyframe.frame - 10) * 10;
+            const positionX = (keyframe.frame - this._pixelFrameUnit) * this._pixelFrameUnit;
 
             let value = 0;
             if (keyframe.value === null) {
@@ -1666,7 +1677,10 @@ export class AnimationCurveEditorComponent extends React.Component<
             }
 
             const centerCanvas = this._heightScale / 2;
-            const positionY = centerCanvas - value * centerCanvas;
+            let positionY = centerCanvas - value * centerCanvas;
+            if (positionY === centerCanvas) {
+                positionY = 0;
+            }
 
             this.setState({ panningX: positionX, panningY: positionY, repositionCanvas: true });
         }
@@ -1742,6 +1756,12 @@ export class AnimationCurveEditorComponent extends React.Component<
                     }
                 }
 
+                const zeroFrames = keys.filter((x) => x.frame === 0);
+                if (zeroFrames.length > 1) {
+                    keys.shift();
+                }
+                keys.sort((a, b) => a.frame - b.frame);
+
                 this._isPlaying = true;
                 this.setState({ isPlaying: true });
                 this.forceUpdate();
@@ -1803,6 +1823,15 @@ export class AnimationCurveEditorComponent extends React.Component<
         this.setState({ notification: message });
     };
 
+    frameSelectedKeyframes = () => {
+        // get selected keyframes
+        // get adjacent keyframes
+        // found canvas boundaries
+        // zoom to fit
+        // if not selected keyframes
+        // remove zoom
+    };
+
     render() {
         return (
             <div ref={this._editor} id="animation-curve-editor">
@@ -1820,6 +1849,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                     handleValueChange={this.handleValueChange}
                     addKeyframe={this.addKeyframeClick}
                     removeKeyframe={this.removeKeyframeClick}
+                    frameSelectedKeyframes={this.frameSelectedKeyframes}
                     brokenMode={this.state.isBrokenMode}
                     brokeTangents={this.setBrokenMode}
                     lerpMode={this.state.lerpMode}

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

@@ -45,7 +45,7 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
             if (startKeyframe.frame !== undefined && typeof startKeyframe.frame === "number") {
                 this.props.onCurrentFrameChange(startKeyframe.frame);
             }
-            this.props.repositionCanvas(startKeyframe);
+            //this.props.repositionCanvas(startKeyframe);
         }
     };
 
@@ -54,7 +54,7 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
         if (endKeyframe !== null) {
             if (endKeyframe.frame !== undefined && typeof endKeyframe.frame === "number") {
                 this.props.onCurrentFrameChange(endKeyframe.frame);
-                this.props.repositionCanvas(endKeyframe);
+                //this.props.repositionCanvas(endKeyframe);
             }
         }
     };
@@ -64,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);
+                //this.props.repositionCanvas(first);
                 this.setState({ selected: first });
                 (this.props.scrollable.current as HTMLDivElement).scrollLeft = first.frame * this._sizeOfKeyframe;
             }
@@ -77,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);
+                //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/graphActionsBar.tsx

@@ -5,6 +5,7 @@ import { IActionableKeyFrame } from "./animationCurveEditorComponent";
 interface IGraphActionsBarProps {
     addKeyframe: () => void;
     removeKeyframe: () => void;
+    frameSelectedKeyframes: () => void;
     handleValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     handleFrameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
     flatTangent: () => void;
@@ -140,7 +141,7 @@ export class GraphActionsBar extends React.Component<IGraphActionsBarProps, { fr
                     <IconButtonLineComponent
                         tooltip={"Frame selected keyframes"}
                         icon="frame"
-                        onClick={this.props.removeKeyframe}
+                        onClick={this.props.frameSelectedKeyframes}
                     />
                     <IconButtonLineComponent
                         tooltip={"Flat Tangents"}