scrollWidth default

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

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

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

@@ -51,6 +51,7 @@ export class Timeline extends React.Component<
         this._marginScrollbar = 3;
 
         const limit = Math.round(this.props.animationLimit / 2);
+        const scrollWidth = this.calculateScrollWidth(0, limit);
 
         if (this.props.selected !== null) {
             this.state = {
@@ -58,7 +59,7 @@ export class Timeline extends React.Component<
                 activeKeyframe: null,
                 start: 0,
                 end: limit,
-                scrollWidth: this.calculateScrollWidth(0, limit),
+                scrollWidth: scrollWidth,
                 selectionLength: this.range(0, limit),
                 limitValue: this.props.animationLimit,
             };
@@ -66,9 +67,11 @@ export class Timeline extends React.Component<
     }
 
     componentDidMount() {
-        this.setState({
-            scrollWidth: this.calculateScrollWidth(this.state.start, this.state.end),
-        });
+        setTimeout(() => {
+            this.setState({
+                scrollWidth: this.calculateScrollWidth(this.state.start, this.state.end),
+            });
+        }, 0);
 
         this._inputAnimationLimit.current?.addEventListener("keyup", this.isEnterKeyUp.bind(this));
     }
@@ -110,9 +113,7 @@ export class Timeline extends React.Component<
                     scrollWidth: this.calculateScrollWidth(0, newEnd),
                 });
                 if (this._scrollbarHandle.current && this._scrollContainer.current) {
-                    this._scrollbarHandle.current.style.left = `${
-                        this._scrollContainer.current.getBoundingClientRect().left + this._marginScrollbar
-                    }px`;
+                    this._scrollbarHandle.current.style.left = `${this._scrollContainer.current.getBoundingClientRect().left + this._marginScrollbar}px`;
                 }
             }
         );
@@ -331,10 +332,7 @@ export class Timeline extends React.Component<
             }
 
             if (!(framesTo >= this.state.end - 20)) {
-                let toleft =
-                    framesTo * unit +
-                    this._scrollContainer.current.getBoundingClientRect().left +
-                    this._marginScrollbar * 2;
+                let toleft = framesTo * unit + this._scrollContainer.current.getBoundingClientRect().left + this._marginScrollbar * 2;
                 if (this._scrollbarHandle.current) {
                     this._scrollbarHandle.current.style.left = toleft + "px";
                 }
@@ -384,11 +382,7 @@ export class Timeline extends React.Component<
                         scrollable={this._scrollable}
                     />
                     <div className="timeline-wrapper">
-                        <div
-                            ref={this._scrollable}
-                            className="display-line"
-                            onClick={this.setCurrentFrame}
-                            tabIndex={50}>
+                        <div ref={this._scrollable} className="display-line" onClick={this.setCurrentFrame} tabIndex={50}>
                             <svg
                                 style={{
                                     width: "100%",
@@ -398,39 +392,23 @@ export class Timeline extends React.Component<
                                 onMouseMove={this.drag}
                                 onMouseDown={this.dragStart}
                                 onMouseUp={this.dragEnd}
-                                onMouseLeave={this.dragEnd}>
+                                onMouseLeave={this.dragEnd}
+                            >
                                 {this.state.selectionLength.map((frame, i) => {
                                     return (
                                         <svg key={`tl_${frame}`}>
                                             {
                                                 <>
-                                                    {frame % Math.round(this.state.selectionLength.length / 20) ===
-                                                    0 ? (
+                                                    {frame % Math.round(this.state.selectionLength.length / 20) === 0 ? (
                                                         <>
-                                                            <text
-                                                                x={(i * 100) / this.state.selectionLength.length + "%"}
-                                                                y="18"
-                                                                style={{ fontSize: 10, fill: "#555555" }}>
+                                                            <text x={(i * 100) / this.state.selectionLength.length + "%"} y="18" style={{ fontSize: 10, fill: "#555555" }}>
                                                                 {frame}
                                                             </text>
-                                                            <line
-                                                                x1={(i * 100) / this.state.selectionLength.length + "%"}
-                                                                y1="22"
-                                                                x2={(i * 100) / this.state.selectionLength.length + "%"}
-                                                                y2="40"
-                                                                style={{ stroke: "#555555", strokeWidth: 0.5 }}
-                                                            />
+                                                            <line x1={(i * 100) / this.state.selectionLength.length + "%"} y1="22" x2={(i * 100) / this.state.selectionLength.length + "%"} y2="40" style={{ stroke: "#555555", strokeWidth: 0.5 }} />
                                                         </>
                                                     ) : null}
                                                     {this.getCurrentFrame(frame) ? (
-                                                        <svg
-                                                            x={
-                                                                this._scrollable.current
-                                                                    ? this._scrollable.current.clientWidth /
-                                                                      this.state.selectionLength.length /
-                                                                      2
-                                                                    : 1
-                                                            }>
+                                                        <svg x={this._scrollable.current ? this._scrollable.current.clientWidth / this.state.selectionLength.length / 2 : 1}>
                                                             <line
                                                                 x1={(i * 100) / this.state.selectionLength.length + "%"}
                                                                 y1="0"
@@ -438,10 +416,7 @@ export class Timeline extends React.Component<
                                                                 y2="40"
                                                                 style={{
                                                                     stroke: "rgba(18, 80, 107, 0.26)",
-                                                                    strokeWidth: this._scrollable.current
-                                                                        ? this._scrollable.current.clientWidth /
-                                                                          this.state.selectionLength.length
-                                                                        : 1,
+                                                                    strokeWidth: this._scrollable.current ? this._scrollable.current.clientWidth / this.state.selectionLength.length : 1,
                                                                 }}
                                                             />
                                                         </svg>
@@ -449,14 +424,7 @@ export class Timeline extends React.Component<
 
                                                     {this.getKeyframe(frame) ? (
                                                         <svg key={`kf_${i}`} tabIndex={i + 40}>
-                                                            <line
-                                                                id={`kf_${i.toString()}`}
-                                                                x1={(i * 100) / this.state.selectionLength.length + "%"}
-                                                                y1="0"
-                                                                x2={(i * 100) / this.state.selectionLength.length + "%"}
-                                                                y2="40"
-                                                                style={{ stroke: "#ffc017", strokeWidth: 1 }}
-                                                            />
+                                                            <line id={`kf_${i.toString()}`} x1={(i * 100) / this.state.selectionLength.length + "%"} y1="0" x2={(i * 100) / this.state.selectionLength.length + "%"} y2="40" style={{ stroke: "#ffc017", strokeWidth: 1 }} />
                                                         </svg>
                                                     ) : null}
                                                 </>
@@ -467,18 +435,9 @@ export class Timeline extends React.Component<
                             </svg>
                         </div>
 
-                        <div
-                            className="timeline-scroll-handle"
-                            onMouseMove={this.scrollDrag}
-                            onMouseDown={this.scrollDragStart}
-                            onMouseUp={this.scrollDragEnd}
-                            onMouseLeave={this.scrollDragEnd}
-                            onDragStart={this.dragDomFalse}>
+                        <div className="timeline-scroll-handle" onMouseMove={this.scrollDrag} onMouseDown={this.scrollDragStart} onMouseUp={this.scrollDragEnd} onMouseLeave={this.scrollDragEnd} onDragStart={this.dragDomFalse}>
                             <div className="scroll-handle" ref={this._scrollContainer} tabIndex={60}>
-                                <div
-                                    className="handle"
-                                    ref={this._scrollbarHandle}
-                                    style={{ width: this.state.scrollWidth }}>
+                                <div className="handle" ref={this._scrollbarHandle} style={{ width: this.state.scrollWidth }}>
                                     <div className="left-grabber">
                                         <div className="left-draggable">
                                             <div className="grabber"></div>
@@ -502,12 +461,7 @@ export class Timeline extends React.Component<
                         </div>
 
                         <div className="input-frame">
-                            <input
-                                ref={this._inputAnimationLimit}
-                                type="number"
-                                value={this.state.limitValue}
-                                onChange={(e) => this.handleLimitChange(e)}
-                                onBlur={(e) => this.onInputBlur(e)}></input>
+                            <input ref={this._inputAnimationLimit} type="number" value={this.state.limitValue} onChange={(e) => this.handleLimitChange(e)} onBlur={(e) => this.onInputBlur(e)}></input>
                         </div>
                     </div>
                 </div>