adding timeline fixes

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

@@ -15,6 +15,7 @@ interface IAddAnimationProps {
   onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
   setNotificationMessage: (message: string) => void;
   changed: () => void;
+  fps: number;
 }
 
 export class AddAnimation extends React.Component<
@@ -214,7 +215,7 @@ export class AddAnimation extends React.Component<
           let animation = new Animation(
             this.state.animationName,
             this.state.animationTargetProperty,
-            30,
+            this.props.fps,
             animationDataType
           );
 

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

@@ -152,7 +152,7 @@ export class AnimationCurveEditorComponent extends React.Component<
           (this._canvasLength * 10)
         : 0,
       frameAxisLength: new Array(this._canvasLength).fill(0).map((s, i) => {
-        return { value: i * 10, label: i * 10 };
+        return { value: i * 10, label: i };
       }),
       valueAxisLength: new Array(10).fill(0).map((s, i) => {
         return { value: i * 10, label: valueInd[i] };
@@ -164,7 +164,7 @@ export class AnimationCurveEditorComponent extends React.Component<
       isPlaying: this.isAnimationPlaying(),
       selectedPathData: initialPathData,
       selectedCoordinate: 0,
-      animationLimit: 100,
+      animationLimit: 120,
       fps: 0,
     };
   }
@@ -188,7 +188,6 @@ export class AnimationCurveEditorComponent extends React.Component<
    */
   zoom(e: React.WheelEvent<HTMLDivElement>) {
     e.nativeEvent.stopImmediatePropagation();
-    //console.log(e.deltaY);
     let scaleX = 1;
     if (Math.sign(e.deltaY) === -1) {
       scaleX = this.state.scale - 0.01;
@@ -201,7 +200,7 @@ export class AnimationCurveEditorComponent extends React.Component<
 
   setAxesLength() {
     let length = 20;
-    let newlength = Math.round(this._canvasLength * this.state.scale); // Check Undefined, or NaN
+    let newlength = Math.round(this._canvasLength * this.state.scale);
     if (!isNaN(newlength) || newlength !== undefined) {
       length = newlength;
     }
@@ -215,9 +214,9 @@ export class AnimationCurveEditorComponent extends React.Component<
     }
 
     let valueLines = Math.round((this.state.scale * this._heightScale) / 10);
-    console.log(highestFrame);
+    console.log(length);
     let newFrameLength = new Array(length).fill(0).map((s, i) => {
-      return { value: i * 10, label: i * 10 };
+      return { value: i * 10, label: i };
     });
     let newValueLength = new Array(valueLines).fill(0).map((s, i) => {
       return { value: i * 10, label: this.getValueLabel(i * 10) };
@@ -1392,6 +1391,14 @@ export class AnimationCurveEditorComponent extends React.Component<
     }
   }
 
+  getCurrentFrame(frame: number) {
+    if (this.state.currentFrame === frame) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   render() {
     return (
       <div id='animation-curve-editor'>
@@ -1521,12 +1528,27 @@ export class AnimationCurveEditorComponent extends React.Component<
                         x={f.value}
                         y='0'
                         dx='2px'
-                        style={{ fontSize: `${0.2 * this.state.scale}em` }}
+                        style={{ fontSize: `${0.17 * this.state.scale}em` }}
                       >
-                        {f.value}
+                        {f.label}
                       </text>
                       <line x1={f.value} y1='0' x2={f.value} y2='5%'></line>
 
+                      {this.getCurrentFrame(f.label) ? (
+                        <svg>
+                          <line
+                            x1={f.value}
+                            y1='0'
+                            x2={f.value}
+                            y2='40'
+                            style={{
+                              stroke: 'rgba(18, 80, 107, 0.26)',
+                              strokeWidth: 6,
+                            }}
+                          />
+                        </svg>
+                      ) : null}
+
                       {f.value % this.state.fps === 0 && f.value !== 0 ? (
                         <line
                           x1={f.value}

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

@@ -4,6 +4,7 @@ body {
 
 #animation-curve-editor {
   font-family: acumin-pro-condensed;
+  background-color: #333333;
 
   .last {
     margin-left: 3px;
@@ -507,7 +508,7 @@ body {
     align-items: flex-start;
     justify-content: flex-start;
     flex-direction: column;
-    height: 462px;
+    height: 465px;
 
     .row {
       width: 1024px;
@@ -656,7 +657,7 @@ body {
         }
 
         .timeline-wrapper {
-          margin-top: -40px;
+          margin-top: -45px;
           margin-left: -2px;
         }
 

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

@@ -54,7 +54,7 @@ export class EditorControls extends React.Component<
       isLoopActive: false,
       loopMode: Animation.ANIMATIONLOOPMODE_CYCLE,
       animationsCount: count,
-      framesPerSecond: 0,
+      framesPerSecond: 60,
       snippetId: '',
     };
   }
@@ -231,6 +231,7 @@ export class EditorControls extends React.Component<
             }}
             changed={() => this.animationAdded()}
             onPropertyChangedObservable={this.props.onPropertyChangedObservable}
+            fps={this.state.framesPerSecond}
           />
         )}
 

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

@@ -56,7 +56,7 @@ export class GraphActionsBar extends React.Component<IGraphActionsBarProps> {
             onClick={this.props.addKeyframe}
           />
           <IconButtonLineComponent
-            tooltip={'Focus'}
+            tooltip={'Frame'}
             icon='frame'
             onClick={this.props.removeKeyframe}
           />

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

@@ -49,9 +49,15 @@ export class Timeline extends React.Component<
         selected: this.props.selected,
         activeKeyframe: null,
         start: 0,
-        end: this.props.animationLimit,
-        scrollWidth: this.calculateScrollWidth(0, this.props.animationLimit),
-        selectionLength: this.range(0, 100),
+        end: Math.round(this.props.animationLimit / 2),
+        scrollWidth: this.calculateScrollWidth(
+          0,
+          Math.round(this.props.animationLimit / 2)
+        ),
+        selectionLength: this.range(
+          0,
+          Math.round(this.props.animationLimit / 2)
+        ),
       };
     }
   }
@@ -64,16 +70,20 @@ export class Timeline extends React.Component<
 
   calculateScrollWidth(start: number, end: number) {
     if (this._scrollContainer.current) {
-      const containerWidth = this._scrollContainer.current.clientWidth;
-      const scrollFrameLimit = this.props.animationLimit;
-      const scrollFrameLength = end - start;
-      const widthPercentage = (scrollFrameLength * 100) / scrollFrameLimit;
-      const scrollPixelWidth = (widthPercentage * containerWidth) / 100;
-      // check 0 values here... to avoid Infinity
-      if (scrollPixelWidth === Infinity) {
-        console.log('error infinity');
+      if (this.props.animationLimit !== 0) {
+        const containerWidth = this._scrollContainer.current.clientWidth;
+        const scrollFrameLimit = this.props.animationLimit;
+        const scrollFrameLength = end - start;
+        const widthPercentage = (scrollFrameLength * 100) / scrollFrameLimit;
+        const scrollPixelWidth = (widthPercentage * containerWidth) / 100;
+        // check 0 values here... to avoid Infinity
+        if (scrollPixelWidth === Infinity) {
+          console.log('error infinity');
+        }
+        return scrollPixelWidth;
+      } else {
+        return undefined;
       }
-      return scrollPixelWidth;
     } else {
       return undefined;
     }
@@ -98,17 +108,35 @@ export class Timeline extends React.Component<
     event.preventDefault();
   }
 
+  setCurrentFrame(event: React.MouseEvent<HTMLDivElement>) {
+    event.preventDefault();
+    if (this._scrollable.current) {
+      const containerWidth = this._scrollable.current?.clientWidth;
+      const unit = Math.round(
+        containerWidth / this.state.selectionLength.length
+      );
+      const frame = Math.round((event.clientX - 233) / unit) + this.state.start;
+      this.props.onCurrentFrameChange(frame);
+    }
+  }
+
   handleLimitChange(event: React.ChangeEvent<HTMLInputElement>) {
     event.preventDefault();
     let newLimit = parseInt(event.target.value);
     if (isNaN(newLimit)) {
       newLimit = 0;
     }
-    this.setState({
-      end: newLimit,
-      scrollWidth: this.calculateScrollWidth(this.state.start, newLimit),
-      selectionLength: this.range(this.state.start, newLimit),
-    });
+    this.setState(
+      {
+        end: newLimit,
+        selectionLength: this.range(this.state.start, newLimit),
+      },
+      () => {
+        this.setState({
+          scrollWidth: this.calculateScrollWidth(this.state.start, newLimit),
+        });
+      }
+    );
     this.props.onAnimationLimitChange(newLimit);
   }
 
@@ -370,6 +398,14 @@ export class Timeline extends React.Component<
     }
   }
 
+  getCurrentFrame(frame: number) {
+    if (this.props.currentFrame === frame) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
   render() {
     return (
       <>
@@ -384,7 +420,11 @@ export class Timeline extends React.Component<
             scrollable={this._scrollable}
           />
           <div className='timeline-wrapper'>
-            <div ref={this._scrollable} className='display-line'>
+            <div
+              ref={this._scrollable}
+              className='display-line'
+              onClick={(e) => this.setCurrentFrame(e)}
+            >
               <svg
                 style={{
                   width: '100%',
@@ -400,14 +440,6 @@ export class Timeline extends React.Component<
                 onMouseLeave={(e) => this.dragEnd(e)}
                 onDragStart={() => false}
               >
-                <line
-                  x1={this.props.currentFrame * 10}
-                  y1='0'
-                  x2={this.props.currentFrame * 10}
-                  y2='40'
-                  style={{ stroke: '#12506b', strokeWidth: 6 }}
-                />
-
                 {this.state.selectionLength.map((frame, i) => {
                   return (
                     <svg key={`tl_${frame}`}>
@@ -437,6 +469,40 @@ export class Timeline extends React.Component<
                             style={{ stroke: '#555555', strokeWidth: 0.5 }}
                           />
 
+                          {this.getCurrentFrame(frame) ? (
+                            <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'
+                                x2={
+                                  (i * 100) /
+                                    this.state.selectionLength.length +
+                                  '%'
+                                }
+                                y2='40'
+                                style={{
+                                  stroke: 'rgba(18, 80, 107, 0.26)',
+                                  strokeWidth: this._scrollable.current
+                                    ? this._scrollable.current.clientWidth /
+                                      this.state.selectionLength.length
+                                    : 1,
+                                }}
+                              />
+                            </svg>
+                          ) : null}
+
                           {this.getKeyframe(frame) ? (
                             <svg key={`kf_${i}`} tabIndex={i + 40}>
                               <line