Resize width

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

@@ -92,6 +92,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         canvasLength: number;
         lastKeyframeCreated: Nullable<string>;
         canvasWidthScale: number;
+        valuesPositionResize: number;
     }
 > {
     private _snippetUrl = "https://snippet.babylonjs.com";
@@ -106,6 +107,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     private _isPlaying: boolean = false;
     private _graphCanvas: React.RefObject<HTMLDivElement>;
     private _editor: React.RefObject<HTMLDivElement>;
+    private _editorWindow: Window;
 
     //private _selectedCurve: React.RefObject<SVGPathElement>;
     private _svgCanvas: React.RefObject<SvgDraggableArea>;
@@ -136,16 +138,10 @@ export class AnimationCurveEditorComponent extends React.Component<
         } else {
             this._isTargetedAnimation = false;
 
-            let hasAnimations =
-                this.props.entity.animations !== undefined || this.props.entity.animations !== null
-                    ? this.props.entity.animations
-                    : false;
+            let hasAnimations = this.props.entity.animations !== undefined || this.props.entity.animations !== null ? this.props.entity.animations : false;
             initialSelection = hasAnimations !== false ? hasAnimations && hasAnimations[0] : null;
 
-            initialLerpMode =
-                initialSelection !== undefined
-                    ? this.analizeAnimationForLerp(this.props.entity.animations && initialSelection)
-                    : false;
+            initialLerpMode = initialSelection !== undefined ? this.analizeAnimationForLerp(this.props.entity.animations && initialSelection) : false;
             initialPathData = initialSelection && this.getPathData(initialSelection);
             initialPathData = initialPathData === null || initialPathData === undefined ? undefined : initialPathData;
         }
@@ -166,9 +162,7 @@ export class AnimationCurveEditorComponent extends React.Component<
             isTangentMode: false,
             isBrokenMode: false,
             lerpMode: initialLerpMode,
-            playheadOffset: this._graphCanvas.current
-                ? this._graphCanvas.current.children[0].clientWidth / (_canvasLength * 10)
-                : 0,
+            playheadOffset: this._graphCanvas.current ? this._graphCanvas.current.children[0].clientWidth / (_canvasLength * 10) : 0,
             frameAxisLength: this.setFrameAxis(_canvasLength),
             valueAxisLength: new Array(10).fill(0).map((s, i) => {
                 return { value: i * 10, label: valueInd[i] };
@@ -191,11 +185,17 @@ export class AnimationCurveEditorComponent extends React.Component<
             valueScale: CurveScale.default,
             lastKeyframeCreated: null,
             canvasWidthScale: 200,
+            valuesPositionResize: 2,
         };
     }
 
     componentDidMount() {
         this.state.selected && this.selectAnimation(this.state.selected);
+
+        if (this._editor.current && this._editor.current.ownerDocument && this._editor.current.ownerDocument.defaultView) {
+            this._editorWindow = this._editor.current.ownerDocument.defaultView;
+            this._editorWindow.addEventListener("resize", this.onWindowResizeWidth.bind(this));
+        }
     }
 
     componentDidUpdate(prevProps: IAnimationCurveEditorComponentProps, prevState: any) {
@@ -313,9 +313,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     resetPlayheadOffset() {
         if (this._graphCanvas && this._graphCanvas.current) {
             this.setState({
-                playheadOffset:
-                    this._graphCanvas.current.children[0].clientWidth /
-                    (this.state.canvasLength * 10 * this.state.scale),
+                playheadOffset: this._graphCanvas.current.children[0].clientWidth / (this.state.canvasLength * 10 * this.state.scale),
             });
         }
     }
@@ -427,12 +425,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         });
     };
 
-    updateValuePerCoordinate(
-        dataType: number,
-        value: number | Vector2 | Vector3 | Color3 | Color4 | Size | Quaternion,
-        newValue: number,
-        coordinate?: number
-    ) {
+    updateValuePerCoordinate(dataType: number, value: number | Vector2 | Vector3 | Color3 | Color4 | Size | Quaternion, newValue: number, coordinate?: number) {
         if (dataType === Animation.ANIMATIONTYPE_FLOAT) {
             value = newValue;
         }
@@ -586,15 +579,9 @@ export class AnimationCurveEditorComponent extends React.Component<
             }
         }
 
-        let updatedValue =
-            ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * this._scaleFactor;
+        let updatedValue = ((this._heightScale - updatedSvgKeyFrame.keyframePoint.y) / this._heightScale) * this._scaleFactor;
 
-        const updatedValueInCoordinate = this.updateValuePerCoordinate(
-            animation.dataType,
-            keys[index].value,
-            updatedValue,
-            coordinate
-        );
+        const updatedValueInCoordinate = this.updateValuePerCoordinate(animation.dataType, keys[index].value, updatedValue, coordinate);
 
         keys[index].value = updatedValueInCoordinate;
 
@@ -611,12 +598,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         this.selectAnimation(animation, coordinate);
     };
 
-    updateLeftControlPoint(
-        updatedSvgKeyFrame: IKeyframeSvgPoint,
-        key: IAnimationKey,
-        dataType: number,
-        coordinate: number
-    ) {
+    updateLeftControlPoint(updatedSvgKeyFrame: IKeyframeSvgPoint, key: IAnimationKey, dataType: number, coordinate: number) {
         if (updatedSvgKeyFrame.isLeftActive) {
             if (updatedSvgKeyFrame.leftControlPoint !== null) {
                 // Rotate Control Points
@@ -627,16 +609,11 @@ export class AnimationCurveEditorComponent extends React.Component<
 
                 let distanceAmplitudeOfX = updatedSvgKeyFrame.leftControlPoint.x - distanceWithPreviousKeyframe;
 
-                let slope =
-                    (updatedSvgKeyFrame.leftControlPoint.y - updatedSvgKeyFrame.keyframePoint.y) /
-                    (updatedSvgKeyFrame.leftControlPoint.x - updatedSvgKeyFrame.keyframePoint.x);
+                let slope = (updatedSvgKeyFrame.leftControlPoint.y - updatedSvgKeyFrame.keyframePoint.y) / (updatedSvgKeyFrame.leftControlPoint.x - updatedSvgKeyFrame.keyframePoint.x);
 
-                let newValueOfY =
-                    (distanceAmplitudeOfX - updatedSvgKeyFrame.leftControlPoint.x) * slope +
-                    updatedSvgKeyFrame.keyframePoint.y;
+                let newValueOfY = (distanceAmplitudeOfX - updatedSvgKeyFrame.leftControlPoint.x) * slope + updatedSvgKeyFrame.keyframePoint.y;
 
-                let updatedValue =
-                    ((newValueOfY - updatedSvgKeyFrame.keyframePoint.y) * this._scaleFactor) / this._heightScale;
+                let updatedValue = ((newValueOfY - updatedSvgKeyFrame.keyframePoint.y) * this._scaleFactor) / this._heightScale;
 
                 if (updatedValue > -100 && updatedValue < 100) {
                     key.inTangent = this.updateValuePerCoordinate(dataType, key.inTangent, updatedValue, coordinate);
@@ -653,12 +630,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         }
     }
 
-    updateRightControlPoint(
-        updatedSvgKeyFrame: IKeyframeSvgPoint,
-        key: IAnimationKey,
-        dataType: number,
-        coordinate: number
-    ) {
+    updateRightControlPoint(updatedSvgKeyFrame: IKeyframeSvgPoint, key: IAnimationKey, dataType: number, coordinate: number) {
         if (updatedSvgKeyFrame.isRightActive) {
             if (updatedSvgKeyFrame.rightControlPoint !== null) {
                 // Rotate Control Points
@@ -667,16 +639,11 @@ export class AnimationCurveEditorComponent extends React.Component<
 
                 let distanceAmplitudeOfX = updatedSvgKeyFrame.rightControlPoint.x + distanceWithNextKeyframe;
 
-                let slope =
-                    (updatedSvgKeyFrame.rightControlPoint.y - updatedSvgKeyFrame.keyframePoint.y) /
-                    (updatedSvgKeyFrame.rightControlPoint.x - updatedSvgKeyFrame.keyframePoint.x);
+                let slope = (updatedSvgKeyFrame.rightControlPoint.y - updatedSvgKeyFrame.keyframePoint.y) / (updatedSvgKeyFrame.rightControlPoint.x - updatedSvgKeyFrame.keyframePoint.x);
 
-                let newValueOfY =
-                    (distanceAmplitudeOfX - updatedSvgKeyFrame.rightControlPoint.x) * slope +
-                    updatedSvgKeyFrame.keyframePoint.y;
+                let newValueOfY = (distanceAmplitudeOfX - updatedSvgKeyFrame.rightControlPoint.x) * slope + updatedSvgKeyFrame.keyframePoint.y;
 
-                let updatedValue =
-                    ((newValueOfY - updatedSvgKeyFrame.keyframePoint.y) * this._scaleFactor) / this._heightScale;
+                let updatedValue = ((newValueOfY - updatedSvgKeyFrame.keyframePoint.y) * this._scaleFactor) / this._heightScale;
 
                 if (updatedValue > -100 && updatedValue < 100) {
                     key.outTangent = this.updateValuePerCoordinate(dataType, key.outTangent, updatedValue, coordinate);
@@ -698,8 +665,7 @@ export class AnimationCurveEditorComponent extends React.Component<
             let indexOfKeyframe = this.state.svgKeyframes.indexOf(updatedSvgKeyFrame);
             let previousKeyframe = this.state.svgKeyframes[indexOfKeyframe - 1];
             if (previousKeyframe?.keyframePoint) {
-                distanceWithPreviousKeyframe =
-                    Vector2.Distance(updatedSvgKeyFrame.keyframePoint, previousKeyframe.keyframePoint) / 2;
+                distanceWithPreviousKeyframe = Vector2.Distance(updatedSvgKeyFrame.keyframePoint, previousKeyframe.keyframePoint) / 2;
             }
         }
 
@@ -708,8 +674,7 @@ export class AnimationCurveEditorComponent extends React.Component<
             let indexOfKeyframe = this.state.svgKeyframes.indexOf(updatedSvgKeyFrame);
             let nextKeyframe = this.state.svgKeyframes[indexOfKeyframe + 1];
             if (nextKeyframe?.keyframePoint) {
-                distanceWithNextKeyframe =
-                    Vector2.Distance(nextKeyframe.keyframePoint, updatedSvgKeyFrame.keyframePoint) / 2;
+                distanceWithNextKeyframe = Vector2.Distance(nextKeyframe.keyframePoint, updatedSvgKeyFrame.keyframePoint) / 2;
             }
         }
 
@@ -769,12 +734,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     };
 
     setKeyframeValue = () => {
-        if (
-            this.state.actionableKeyframe.frame !== "" &&
-            this.state.actionableKeyframe.frame !== undefined &&
-            this.state.actionableKeyframe.value !== "" &&
-            this.state.actionableKeyframe.value !== undefined
-        ) {
+        if (this.state.actionableKeyframe.frame !== "" && this.state.actionableKeyframe.frame !== undefined && this.state.actionableKeyframe.value !== "" && this.state.actionableKeyframe.value !== undefined) {
             if (this.state.selected !== null) {
                 let currentSelected = this.state.svgKeyframes?.find((kf) => kf.selected);
                 if (currentSelected) {
@@ -829,9 +789,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     setBrokenMode = () => {
         if (this.state.selected !== null) {
             let animation = this.state.selected;
-            this.setState({ isBrokenMode: !this.state.isBrokenMode }, () =>
-                this.selectAnimation(animation, this.state.selectedCoordinate)
-            );
+            this.setState({ isBrokenMode: !this.state.isBrokenMode }, () => this.selectAnimation(animation, this.state.selectedCoordinate));
         }
     };
 
@@ -839,9 +797,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         const animation = this.state.selected;
         if (this.state.svgKeyframes && animation) {
             const keys = animation.getKeys();
-            const selectedControlPoint = this.state.svgKeyframes.find(
-                (keyframe: IKeyframeSvgPoint) => keyframe.selected && (keyframe.isLeftActive || keyframe.isRightActive)
-            );
+            const selectedControlPoint = this.state.svgKeyframes.find((keyframe: IKeyframeSvgPoint) => keyframe.selected && (keyframe.isLeftActive || keyframe.isRightActive));
             if (selectedControlPoint !== null && selectedControlPoint) {
                 const { order, coordinate } = this.decodeCurveId(selectedControlPoint.id);
                 const key = keys[order];
@@ -1118,15 +1074,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         if (keyframes === undefined || keyframes.length === 0) {
             return undefined;
         } else {
-            const {
-                easingMode,
-                easingType,
-                usesTangents,
-                valueType,
-                highestFrame,
-                name,
-                targetProperty,
-            } = this.getAnimationData(animation);
+            const { easingMode, easingType, usesTangents, valueType, highestFrame, name, targetProperty } = this.getAnimationData(animation);
 
             //keyframes = this.flatTangents(keyframes, valueType); // This will break because we are using setState before mounted...
             const startKey = keyframes[0];
@@ -1140,9 +1088,7 @@ export class AnimationCurveEditorComponent extends React.Component<
 
                 const curveColor = valueType === Animation.ANIMATIONTYPE_FLOAT ? colors[4] : colors[d];
                 // START OF LINE/CURVE
-                let data: string | undefined = `M${startKey.frame * this._pixelFrameUnit}, ${
-                    this._heightScale - startValue[d] * middle
-                }`; //
+                let data: string | undefined = `M${startKey.frame * this._pixelFrameUnit}, ${this._heightScale - startValue[d] * middle}`; //
 
                 if (this.state) {
                     if (usesTangents) {
@@ -1182,11 +1128,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         let framesPerSecond = animation.framePerSecond;
         let highestFrame = animation.getHighestFrame();
         //let serialized = animation.serialize();
-        let usesTangents =
-            animation.getKeys().find((kf) => kf.hasOwnProperty("inTangent") || kf.hasOwnProperty("outTangent")) !==
-            undefined
-                ? true
-                : false;
+        let usesTangents = animation.getKeys().find((kf) => kf.hasOwnProperty("inTangent") || kf.hasOwnProperty("outTangent")) !== undefined ? true : false;
         let valueType = animation.dataType;
         // easing properties
         let easingType, easingMode;
@@ -1214,14 +1156,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         };
     }
 
-    curvePathWithTangents(
-        keyframes: IAnimationKey[],
-        data: string,
-        middle: number,
-        type: number,
-        coordinate: number,
-        animationName: string
-    ) {
+    curvePathWithTangents(keyframes: IAnimationKey[], data: string, middle: number, type: number, coordinate: number, animationName: string) {
         keyframes.forEach((key, i) => {
             // Create a unique id for curve
             const curveId = this.encodeCurveId(animationName, i);
@@ -1275,10 +1210,8 @@ export class AnimationCurveEditorComponent extends React.Component<
                 defaultTangent = null;
             }
 
-            var inT =
-                key.inTangent === undefined ? defaultTangent : this.getValueAsArray(type, key.inTangent)[coordinate];
-            var outT =
-                key.outTangent === undefined ? defaultTangent : this.getValueAsArray(type, key.outTangent)[coordinate];
+            var inT = key.inTangent === undefined ? defaultTangent : this.getValueAsArray(type, key.inTangent)[coordinate];
+            var outT = key.outTangent === undefined ? defaultTangent : this.getValueAsArray(type, key.outTangent)[coordinate];
 
             let y = this._heightScale - keyframe_valueAsArray * middle;
 
@@ -1298,10 +1231,7 @@ export class AnimationCurveEditorComponent extends React.Component<
 
             if (i === 0) {
                 svgKeyframe = {
-                    keyframePoint: new Vector2(
-                        key.frame * this._pixelFrameUnit,
-                        this._heightScale - keyframe_valueAsArray * middle
-                    ),
+                    keyframePoint: new Vector2(key.frame * this._pixelFrameUnit, this._heightScale - keyframe_valueAsArray * middle),
                     rightControlPoint: outTangent,
                     leftControlPoint: null,
                     id: curveId,
@@ -1316,10 +1246,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 }
             } else {
                 svgKeyframe = {
-                    keyframePoint: new Vector2(
-                        key.frame * this._pixelFrameUnit,
-                        this._heightScale - keyframe_valueAsArray * middle
-                    ),
+                    keyframePoint: new Vector2(key.frame * this._pixelFrameUnit, this._heightScale - keyframe_valueAsArray * middle),
                     rightControlPoint: outTangent,
                     leftControlPoint: inTangent,
                     id: curveId,
@@ -1413,14 +1340,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 let intermediatePoint75 = new Vector2((pointB.x - pointA.x) * v + pointA.x, yInt75);
 
                 // Gets the four control points of bezier curve
-                let controlPoints = this.interpolateControlPoints(
-                    pointA,
-                    intermediatePoint25,
-                    u,
-                    intermediatePoint75,
-                    v,
-                    pointB
-                );
+                let controlPoints = this.interpolateControlPoints(pointA, intermediatePoint25, u, intermediatePoint75, v, pointB);
 
                 if (controlPoints !== undefined) {
                     this.setKeyframePoint(controlPoints, i, keyframes.length);
@@ -1460,14 +1380,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         this._svgKeyframes.push(svgKeyframe);
     }
 
-    interpolateControlPoints(
-        p0: Vector2,
-        p1: Vector2,
-        u: number,
-        p2: Vector2,
-        v: number,
-        p3: Vector2
-    ): Vector2[] | undefined {
+    interpolateControlPoints(p0: Vector2, p1: Vector2, u: number, p2: Vector2, v: number, p3: Vector2): Vector2[] | undefined {
         let a = 0.0;
         let b = 0.0;
         let c = 0.0;
@@ -1605,12 +1518,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 if (keys.length !== 0) {
                     const firstFrame = keys[0].frame;
                     const LastFrame = this.state.selected.getHighestFrame();
-                    this._mainAnimatable = this.props.scene.beginAnimation(
-                        target,
-                        firstFrame,
-                        LastFrame,
-                        this.state.isLooping
-                    );
+                    this._mainAnimatable = this.props.scene.beginAnimation(target, firstFrame, LastFrame, this.state.isLooping);
                     this._mainAnimatable.stop();
                 }
             }
@@ -1672,9 +1580,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         if (animation) {
             const hasKeyframe = animation.getKeys().find((x) => x.frame === frame);
             const currentValue = this.calculateCurrentPointInCurve(frame);
-            const value = hasKeyframe
-                ? this.getValueAsArray(animation.dataType, hasKeyframe.value)[this.state.selectedCoordinate]
-                : currentValue ?? 0;
+            const value = hasKeyframe ? this.getValueAsArray(animation.dataType, hasKeyframe.value)[this.state.selectedCoordinate] : currentValue ?? 0;
             const keyframe: IAnimationKey = { frame, value };
             this.setState(
                 {
@@ -1693,10 +1599,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     };
 
     calculateCurrentPointInCurve = (frame: number): number | undefined => {
-        if (
-            this.state.selectedPathData !== undefined &&
-            this.state.selectedPathData[this.state.selectedCoordinate] !== undefined
-        ) {
+        if (this.state.selectedPathData !== undefined && this.state.selectedPathData[this.state.selectedCoordinate] !== undefined) {
             const selectedCurve = this.state.selectedPathData[this.state.selectedCoordinate].domCurve.current;
             if (selectedCurve !== null) {
                 const curveLength = selectedCurve.getTotalLength();
@@ -1705,10 +1608,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                 const currentPointInCurve = selectedCurve.getPointAtLength(frameValue);
                 const middle = this._heightScale / 2;
 
-                const offset =
-                    (currentPointInCurve?.y * this._heightScale - this._heightScale ** 2 / 2) /
-                    middle /
-                    this._heightScale;
+                const offset = (currentPointInCurve?.y * this._heightScale - this._heightScale ** 2 / 2) / middle / this._heightScale;
 
                 const unit = Math.sign(offset);
                 const currentValue = unit === -1 ? Math.abs(offset + unit) : unit - offset;
@@ -1732,9 +1632,7 @@ export class AnimationCurveEditorComponent extends React.Component<
             if (keyframe.value === null) {
                 value = this.state.panningY;
             } else {
-                value = this.getValueAsArray(this.state.selected.dataType, keyframe.value)[
-                    this.state.selectedCoordinate
-                ];
+                value = this.getValueAsArray(this.state.selected.dataType, keyframe.value)[this.state.selectedCoordinate];
             }
 
             const valueScale = this._heightScale / this._scaleFactor;
@@ -1795,20 +1693,10 @@ export class AnimationCurveEditorComponent extends React.Component<
                     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
-                        );
+                        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
-                        );
+                        this._mainAnimatable = this.props.scene.beginAnimation(target, LastFrame, firstFrame, this.state.isLooping);
                     }
                     if (!this.state.isLooping && this._mainAnimatable) {
                         this._mainAnimatable.onAnimationEnd = () => this.playPause(0);
@@ -1902,14 +1790,23 @@ export class AnimationCurveEditorComponent extends React.Component<
         // remove zoom
     };
 
+    onWindowResizeWidth = () => {
+        if (this._graphCanvas.current) {
+            const defaultWidth = 781;
+            const defaultSvgProportion = 1.8;
+            const proportionResized = (defaultSvgProportion / 2) * 10;
+            const svgWidth = 200;
+            const width = (this._graphCanvas.current.clientWidth / svgWidth) * defaultSvgProportion;
+            const percentResize = (this._graphCanvas.current.clientWidth * 100) / defaultWidth;
+            const value = (percentResize - 100) * -1;
+            this.setState({ valuesPositionResize: value - width + proportionResized });
+        }
+    };
+
     render() {
         return (
             <div ref={this._editor} id="animation-curve-editor">
-                <Notification
-                    message={this.state.notification}
-                    open={this.state.notification !== "" ? true : false}
-                    close={this.clearNotification}
-                />
+                <Notification message={this.state.notification} open={this.state.notification !== "" ? true : false} close={this.clearNotification} />
                 <GraphActionsBar
                     setKeyframeValue={this.setKeyframeValueFromInput}
                     enabled={this.state.selected === null || this.state.selected === undefined ? false : true}
@@ -1960,35 +1857,30 @@ export class AnimationCurveEditorComponent extends React.Component<
                                     repositionCanvas={this.state.repositionCanvas}
                                     canvasPositionEnded={this.canvasPositionEnded}
                                     keyframeSvgPoints={this.state.svgKeyframes}
-                                    resetActionableKeyframe={this.resetActionableKeyframe}>
+                                    resetActionableKeyframe={this.resetActionableKeyframe}
+                                >
                                     {this.setValueLines(this.state.valueScale).map((line, i) => {
                                         return (
                                             <text
                                                 key={`value_inline_${i}`}
                                                 x={this.state.panningX - 5}
                                                 y={line.value}
-                                                dx="2"
+                                                dx={this.state.valuesPositionResize}
                                                 textAnchor="middle"
                                                 dy="-1"
                                                 style={{
                                                     fontSize: `${0.18 * this.state.scale}em`,
                                                     fontWeight: "bold",
                                                     textAlign: "center",
-                                                }}>
+                                                }}
+                                            >
                                                 {line.label}
                                             </text>
                                         );
                                     })}
 
                                     {this.setValueLines(this.state.valueScale).map((line, i) => {
-                                        return (
-                                            <line
-                                                key={i}
-                                                x1={-((this.state.frameAxisLength.length * 10) / 2)}
-                                                y1={line.value}
-                                                x2={this.state.frameAxisLength.length * 10}
-                                                y2={line.value}></line>
-                                        );
+                                        return <line key={i} x1={-((this.state.frameAxisLength.length * 10) / 2)} y1={line.value} x2={this.state.frameAxisLength.length * 10} y2={line.value}></line>;
                                     })}
 
                                     {/* Multiple Curves  */}
@@ -2003,7 +1895,8 @@ export class AnimationCurveEditorComponent extends React.Component<
                                                 stroke: curve.color,
                                                 fill: "none",
                                                 strokeWidth: "0.5",
-                                            }}></path>
+                                            }}
+                                        ></path>
                                     ))}
 
                                     {this.state.svgKeyframes.map((keyframe, i) => (
@@ -2021,33 +1914,16 @@ export class AnimationCurveEditorComponent extends React.Component<
                                         />
                                     ))}
 
-                                    <rect
-                                        onClick={(e) => this.moveFrameTo(e)}
-                                        x={-((this.state.frameAxisLength.length * 10) / 2)}
-                                        y={91 + this.state.panningY + "%"}
-                                        width={this.state.frameAxisLength.length * 10}
-                                        height="9%"
-                                        fill="#222"
-                                        style={{ cursor: "pointer" }}></rect>
+                                    <rect onClick={(e) => this.moveFrameTo(e)} x={-((this.state.frameAxisLength.length * 10) / 2)} y={91 + this.state.panningY + "%"} width={this.state.frameAxisLength.length * 10} height="9%" fill="#222" style={{ cursor: "pointer" }}></rect>
 
                                     {this.state.frameAxisLength.map((f, i) => (
                                         <svg key={i} x="0" y={96 + this.state.panningY + "%"} className="frame-contain">
-                                            <text
-                                                x={f.value}
-                                                y="1px"
-                                                dx="2px"
-                                                style={{ fontSize: `${0.2 * this.state.scale}em` }}>
+                                            <text x={f.value} y="1px" dx="2px" style={{ fontSize: `${0.2 * this.state.scale}em` }}>
                                                 {f.label}
                                             </text>
                                             <line x1={f.value} y1="0" x2={f.value} y2="5%"></line>
 
-                                            {f.value % this.state.fps === 0 && f.value !== 0 ? (
-                                                <line
-                                                    x1={f.value * this._pixelFrameUnit}
-                                                    y1="-100%"
-                                                    x2={f.value * this._pixelFrameUnit}
-                                                    y2="5%"></line>
-                                            ) : null}
+                                            {f.value % this.state.fps === 0 && f.value !== 0 ? <line x1={f.value * this._pixelFrameUnit} y1="-100%" x2={f.value * this._pixelFrameUnit} y2="5%"></line> : null}
 
                                             {this.state.selected && this.isCurrentFrame(f.label) ? (
                                                 <svg>
@@ -2062,13 +1938,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                                         }}
                                                     />
                                                     <svg x={f.value} y="-1">
-                                                        <circle
-                                                            className="svg-playhead"
-                                                            cx="0"
-                                                            cy="0"
-                                                            r="2%"
-                                                            fill="white"
-                                                        />
+                                                        <circle className="svg-playhead" cx="0" cy="0" r="2%" fill="white" />
                                                         <text
                                                             x="0"
                                                             y="1%"
@@ -2077,7 +1947,8 @@ export class AnimationCurveEditorComponent extends React.Component<
                                                                 fontSize: `${0.17 * this.state.scale}em`,
                                                                 pointerEvents: "none",
                                                                 fontWeight: 600,
-                                                            }}>
+                                                            }}
+                                                        >
                                                             {f.label}
                                                         </text>
                                                     </svg>
@@ -2096,7 +1967,8 @@ export class AnimationCurveEditorComponent extends React.Component<
                                     pointerEvents: "none",
                                     backgroundColor: "rgb(188 188 188 / 11%)",
                                     top: 40,
-                                }}></div>
+                                }}
+                            ></div>
                             <ScaleLabel current={this.state.valueScale} />
                         </div>
                     </div>
@@ -2112,7 +1984,8 @@ 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={this.setCanvasPosition}></Timeline>
+                            repositionCanvas={this.setCanvasPosition}
+                        ></Timeline>
                     </div>
                 </div>
             </div>

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

@@ -188,7 +188,7 @@ export class AnimationGridComponent extends React.Component<IAnimationGridCompon
                             })}
 
                             {this._isCurveEditorOpen && (
-                                <PopupComponent id="curve-editor" title="Curve Animation Editor" size={{ width: 1024, height: 490 }} onOpen={(window: Window) => {}} onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>
+                                <PopupComponent id="curve-editor" title="Curve Animation Editor" size={{ width: 1024, height: 512 }} onOpen={(window: Window) => {}} onClose={(window: Window) => this.onCloseAnimationCurveEditor(window)}>
                                     <AnimationCurveEditorComponent scene={this.props.scene} entity={animatableAsAny} lockObject={this.props.lockObject} playOrPause={() => this.playOrPause()} globalState={this.props.globalState} />
                                 </PopupComponent>
                             )}

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

@@ -1144,6 +1144,7 @@
             height: 364px;
             width: 782px;
             width: calc(100vw - 247px);
+            min-width: 781px;
 
             .switch-button {
                 background-color: black;