Fixes

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

@@ -40,16 +40,47 @@ export class AnchorSvgPoint extends React.Component<IAnchorSvgPointProps, { visi
         const visibleCircleClass = `draggable control-point ${this.props.active ? "active" : ""}`;
         const nonVisibleCircleClass = `control-point ${this.props.active ? "active" : ""}`;
         const strokeVisibleCircle = this.props.selected ? 1 : 0;
-        const visibleCircle = this.props.selected ? "red" : "#e9db1e";
+        const visibleCircle = this.props.selected ? "#ffc017" : "black";
         return (
             <>
-                <svg x={this.state.visiblePoint.x} y={this.state.visiblePoint.y} style={{ overflow: "visible" }} onClick={this.select}>
-                    <circle type={this.props.type} data-id={this.props.index} className={visibleCircleClass} cx="0" cy="0" r="0.75%" stroke="aqua" strokeWidth={strokeVisibleCircle} fill={visibleCircle} />
+                <line
+                    className={`control-point ${this.props.active ? "active" : ""}`}
+                    x1={this.props.anchor.x}
+                    y1={this.props.anchor.y}
+                    x2={this.state.visiblePoint.x}
+                    y2={this.state.visiblePoint.y}
+                    strokeWidth="0.8%"
+                />
+                <svg
+                    x={this.state.visiblePoint.x}
+                    y={this.state.visiblePoint.y}
+                    style={{ overflow: "visible" }}
+                    onClick={this.select}>
+                    <circle
+                        type={this.props.type}
+                        data-id={this.props.index}
+                        className={visibleCircleClass}
+                        cx="0"
+                        cy="0"
+                        r="0.75%"
+                        stroke="aqua"
+                        strokeWidth={strokeVisibleCircle}
+                        fill={visibleCircle}
+                    />
                 </svg>
                 <svg x={this.props.control.x} y={this.props.control.y} style={{ overflow: "visible", display: "none" }}>
-                    <circle type={this.props.type} data-id={this.props.index} className={nonVisibleCircleClass} cx="0" cy="0" r="0.7%" stroke="white" strokeWidth={0} fill={"white"} />
+                    <circle
+                        type={this.props.type}
+                        data-id={this.props.index}
+                        className={nonVisibleCircleClass}
+                        cx="0"
+                        cy="0"
+                        r="0.7%"
+                        stroke="white"
+                        strokeWidth={0}
+                        fill={"white"}
+                    />
                 </svg>
-                <line className={`control-point ${this.props.active ? "active" : ""}`} x1={this.props.anchor.x} y1={this.props.anchor.y} x2={this.state.visiblePoint.x} y2={this.state.visiblePoint.y} strokeWidth="0.8%" />
             </>
         );
     }

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

@@ -789,6 +789,10 @@ export class AnimationCurveEditorComponent extends React.Component<
                         this.forceFrameZeroToExist(updatedKeys);
                         this.state.selected.setKeys(updatedKeys);
                         this.selectAnimation(animation);
+                        this.setCanvasPosition({
+                            frame: this.state.actionableKeyframe.frame as number,
+                            value: this.state.actionableKeyframe.value,
+                        });
                     }
                 }
             }
@@ -894,8 +898,6 @@ export class AnimationCurveEditorComponent extends React.Component<
                 const recentlyCreated = {
                     frame: x,
                     value: actualValue,
-                    inTangent: emptyValue,
-                    outTangent: emptyValue,
                 };
 
                 keys.push(recentlyCreated);
@@ -1298,6 +1300,8 @@ export class AnimationCurveEditorComponent extends React.Component<
                 };
                 if (outTangent !== null) {
                     data += ` C${outTangent.x} ${outTangent.y} `;
+                } else {
+                    data += ` C${svgKeyframe.keyframePoint.x} ${svgKeyframe.keyframePoint.y} `;
                 }
             } else {
                 svgKeyframe = {
@@ -1315,8 +1319,6 @@ export class AnimationCurveEditorComponent extends React.Component<
 
                 if (outTangent !== null && inTangent !== null) {
                     data += ` ${inTangent.x} ${inTangent.y} ${svgKeyframe.keyframePoint.x} ${svgKeyframe.keyframePoint.y} C${outTangent.x} ${outTangent.y}`;
-                } else if (inTangent !== null) {
-                    data += ` ${inTangent.x} ${inTangent.y} ${svgKeyframe.keyframePoint.x} ${svgKeyframe.keyframePoint.y}`;
                 }
 
                 if (outTangent === null && inTangent !== null) {
@@ -1566,15 +1568,11 @@ export class AnimationCurveEditorComponent extends React.Component<
         this.setMainAnimatable();
         if (this.state.selected) {
             const lastKeyframe = this.state.selected.getHighestFrame();
-            let limit = 120;
-            if (lastKeyframe === 0) {
-                limit = 120;
-            } else if (lastKeyframe < 50) {
-                limit = 50;
-            } else {
-                limit = lastKeyframe;
+            const currentLimit = this.state.animationLimit;
+
+            if (currentLimit < lastKeyframe) {
+                this.changeAnimationLimit(lastKeyframe);
             }
-            this.changeAnimationLimit(limit);
         }
     };
 
@@ -1762,50 +1760,45 @@ export class AnimationCurveEditorComponent extends React.Component<
                 this.props.scene.stopAnimation(target);
                 this.setState({ isPlaying: false });
                 this._isPlaying = false;
-                this.props.playOrPause && this.props.playOrPause();
-                //this.forceUpdate();
+                this.forceUpdate();
             } else {
                 if (this.state.isPlaying) {
                     this.props.scene.stopAnimation(target);
                 }
                 this.props.scene.stopAllAnimations();
                 let keys = this.state.selected.getKeys();
-                // if (keys.length !== 0) {
-                //     let firstFrame = keys[0].frame;
-                //     let LastFrame = this.state.selected.getHighestFrame();
-                //     if (direction === 1) {
-                //         this._mainAnimatable = this.props.scene.beginAnimation(
-                //             target,
-                //             firstFrame,
-                //             LastFrame,
-                //             this.state.isLooping
-                //         );
-                //     }
-                //     if (direction === -1) {
-                //         this._mainAnimatable = this.props.scene.beginAnimation(
-                //             target,
-                //             LastFrame,
-                //             firstFrame,
-                //             this.state.isLooping
-                //         );
-                //     }
-                //     if (!this.state.isLooping && this._mainAnimatable) {
-                //         this._mainAnimatable.onAnimationEnd = () => this.playPause(0);
-                //     }
-                // }
-
                 if (keys.length !== 0) {
-                    this.props.playOrPause && this.props.playOrPause();
-                    const zeroFrames = keys.filter((x) => x.frame === 0);
-                    if (zeroFrames !== undefined) {
-                        keys.shift();
+                    let firstFrame = keys[0].frame;
+                    let LastFrame = this.state.selected.getHighestFrame();
+                    if (direction === 1) {
+                        this._mainAnimatable = this.props.scene.beginAnimation(
+                            target,
+                            firstFrame,
+                            LastFrame,
+                            this.state.isLooping
+                        );
+                    }
+                    if (direction === -1) {
+                        this._mainAnimatable = this.props.scene.beginAnimation(
+                            target,
+                            LastFrame,
+                            firstFrame,
+                            this.state.isLooping
+                        );
+                    }
+                    if (!this.state.isLooping && this._mainAnimatable) {
+                        this._mainAnimatable.onAnimationEnd = () => this.playPause(0);
                     }
-                    keys.sort((a, b) => a.frame - b.frame);
-                    this._isPlaying = true;
-                    this.setState({ isPlaying: true });
                 }
+                const zeroFrames = keys.filter((x) => x.frame === 0);
+                if (zeroFrames.length > 1) {
+                    keys.shift();
+                }
+                keys.sort((a, b) => a.frame - b.frame);
 
-                //this.forceUpdate();
+                this._isPlaying = true;
+                this.setState({ isPlaying: true });
+                this.forceUpdate();
             }
         }
     };

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

@@ -1193,8 +1193,8 @@
 
                 .control-point.active {
                     display: inline;
-                    stroke: #e9db1e;
-                    stroke-width: 0.2;
+                    stroke: #ffc017;
+                    stroke-width: 0.3;
                 }
             }
 

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

@@ -310,8 +310,6 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
                     onMouseLeave={this.dragEnd}
                     onClick={this.focus}
                     viewBox={viewBoxScaling}>
-                    {this.props.children}
-
                     {this.props.keyframeSvgPoints.map((keyframe, i) => (
                         <KeyframeSvgPoint
                             key={`${keyframe.id}_${i}`}
@@ -326,6 +324,8 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
                             selectKeyframe={this.props.selectKeyframe}
                         />
                     ))}
+
+                    {this.props.children}
                 </svg>
             </>
         );