Comments

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

@@ -2,13 +2,21 @@ import * as React from "react";
 import { Vector2 } from "babylonjs/Maths/math.vector";
 
 interface IAnchorSvgPointProps {
+    // Keyframe point
     control: Vector2;
+    // Anchor point
     anchor: Vector2;
+    // Is currently active
     active: boolean;
+    // Type of control point (left/right)
     type: string;
+    // keyframe index
     index: string;
+    // Is selected
     selected: boolean;
+    // Event to set selected
     selectControlPoint: (id: string) => void;
+    // How many frames are currently in the canvas
     framesInCanvasView: { from: number; to: number };
 }
 

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

@@ -2552,11 +2552,13 @@ export class AnimationCurveEditorComponent extends React.Component<
     render() {
         return (
             <div ref={this._editor} id="animation-curve-editor">
+                {/* Notifies if there is a warning or error */}
                 <Notification
                     message={this.state.notification}
                     open={this.state.notification !== "" ? true : false}
                     close={this.clearNotification}
                 />
+                {/* Renders the actions to perform on the selected keyframe and control points */}
                 <GraphActionsBar
                     setKeyframeValue={this.setKeyframeValueFromInput}
                     enabled={this.state.selected === null || this.state.selected === undefined ? false : true}
@@ -2574,9 +2576,10 @@ export class AnimationCurveEditorComponent extends React.Component<
                     flatTangent={this.setFlatTangent}
                     frameRange={{ max: this.state.maxFrame, min: this.state.minFrame }}
                 />
-
+                {/* Animation list and edit controls */}
                 <div className="content">
                     <div className="row">
+                        {/* Renders the edition controls for the animations */}
                         <EditorControls
                             deselectAnimation={this.deselectAnimation}
                             selectAnimation={this.selectAnimation}
@@ -2591,7 +2594,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                             setFps={this.setFramesPerSecond}
                             setIsLooping={this.setIsLooping}
                         />
-
+                        {/* Renders the main canvas to render the curves */}
                         <div ref={this._graphCanvas} className="graph-chart" onWheel={this.zoom}>
                             {this.state.svgKeyframes && (
                                 <SvgDraggableArea
@@ -2612,6 +2615,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                     framesInCanvasView={this.state.framesInCanvasView}
                                     framesResized={this.state.framesResized}
                                 >
+                                    {/* Render the value axis labels */}
                                     {this.setValueLines().map((line, i) => {
                                         return (
                                             <text
@@ -2631,7 +2635,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                             </text>
                                         );
                                     })}
-
+                                    {/* Render the value axis lines for the canvas */}
                                     {this.setValueLines().map((line, i) => {
                                         return (
                                             <line
@@ -2644,7 +2648,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                         );
                                     })}
 
-                                    {/* Multiple Curves  */}
+                                    {/* Renders the curves. Supports multiple curves  */}
                                     {this.state.selectedPathData?.map((curve, i) => (
                                         <path
                                             key={i}
@@ -2660,6 +2664,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                         ></path>
                                     ))}
 
+                                    {/* Render selected curve keyframes */}
                                     {this.state.svgKeyframes.map((keyframe, i) => (
                                         <KeyframeSvgPoint
                                             key={`${keyframe.id}_${i}`}
@@ -2676,6 +2681,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                         />
                                     ))}
 
+                                    {/* Renders clickable area for frames  */}
                                     <rect
                                         onClick={(e) => this.moveFrameTo(e)}
                                         x={-((this.state.frameAxisLength.length * 10) / 2)}
@@ -2685,7 +2691,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                         fill="#222"
                                         style={{ cursor: "pointer" }}
                                     ></rect>
-
+                                    {/* Renders frame axis labels  */}
                                     {this.state.frameAxisLength.map((f, i) => (
                                         <svg key={i} x="0" y={96 + this.state.panningY + "%"} className="frame-contain">
                                             <text
@@ -2708,7 +2714,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                                             ) : null}
                                         </svg>
                                     ))}
-
+                                    {/* Renders the playhead */}
                                     {this.state.selected && this.state.currentFrame !== undefined ? (
                                         <svg x="0" y={96 + this.state.panningY + "%"}>
                                             <line
@@ -2745,6 +2751,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                         </div>
                     </div>
                     <div className="row-bottom">
+                        {/* Renders the timeline of the editor  */}
                         <Timeline
                             currentFrame={this.state.currentFrame}
                             playPause={this.playPause}

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

@@ -82,11 +82,13 @@ export class AnimationListTree extends React.Component<
         };
     }
 
+    /**
+     * Set the animation list if has changed properties
+     * @param prevProps previous properties
+     */
     componentDidUpdate(prevProps: IAnimationListTreeProps) {
         if (this.props.entity instanceof TargetedAnimation) {
-            if (
-                (this.props.entity as TargetedAnimation).animation !== (prevProps.entity as TargetedAnimation).animation
-            ) {
+            if ((this.props.entity as TargetedAnimation).animation !== (prevProps.entity as TargetedAnimation).animation) {
                 this.setState({
                     animationList: this.generateList(),
                     animations: (this.props.entity as TargetedAnimation).animation,
@@ -102,6 +104,9 @@ export class AnimationListTree extends React.Component<
         }
     }
 
+    /**
+     * Delete animation from list
+     */
     deleteAnimation = () => {
         let currentSelected = this.props.selected;
         if (this.props.entity instanceof TargetedAnimation) {
@@ -134,6 +139,11 @@ export class AnimationListTree extends React.Component<
         }
     };
 
+    /**
+     * Update the animations collection
+     * @param newValue new animation list
+     * @param previousValue previous animation list
+     */
     raiseOnPropertyChanged(newValue: Animation[], previousValue: Animation[]) {
         if (!this.props.onPropertyChangedObservable) {
             return;
@@ -147,6 +157,9 @@ export class AnimationListTree extends React.Component<
         });
     }
 
+    /**
+     * Renders the animation list
+     */
     generateList() {
         let animationList =
             (this.props.entity as IAnimatable).animations &&
@@ -165,6 +178,10 @@ export class AnimationListTree extends React.Component<
         return animationList ?? null;
     }
 
+    /**
+     * Open or closes the animation to show its coordinate animations
+     * @param index Animation index
+     */
     toggleProperty(index: number) {
         if (this.state.animationList) {
             const updated = this.state.animationList.map((a) => {
@@ -177,79 +194,75 @@ export class AnimationListTree extends React.Component<
         }
     }
 
+    /**
+     * Select the animation to render
+     * @param animation Selected animation
+     * @param coordinate Selected coordinate (x, y, z)
+     * @param index Index
+     */
     setSelectedCoordinate(animation: Animation, coordinate: SelectedCoordinate, index: number) {
         this.setState({ selectedCoordinate: coordinate, selectedAnimation: index });
         this.props.selectAnimation(animation, coordinate);
     }
 
-    coordinateItem(
-        i: number,
-        animation: Animation,
-        coordinate: string,
-        color: string,
-        selectedCoordinate: SelectedCoordinate
-    ) {
+    /**
+     * Renders the coordinate belonging to an animation
+     * @param i Index
+     * @param animation Selected animation
+     * @param coordinate Coordinate name
+     * @param color Color identifier
+     * @param selectedCoordinate Selected coordinate (x, y, z)
+     */
+    coordinateItem(i: number, animation: Animation, coordinate: string, color: string, selectedCoordinate: SelectedCoordinate) {
         const setSelectedCoordinate = () => this.setSelectedCoordinate(animation, selectedCoordinate, i);
         const handleClass = `handle-indicator ${
             this.state.selectedCoordinate === selectedCoordinate && this.state.selectedAnimation === i ? "show" : "hide"
         }`;
         return (
-            <li
-                key={`${i}_${coordinate}`}
-                id={`${i}_${coordinate}`}
-                className="property"
-                style={{ color: color }}
-                onClick={setSelectedCoordinate}
-            >
+            <li key={`${i}_${coordinate}`} id={`${i}_${coordinate}`} className="property" style={{ color: color }} onClick={setSelectedCoordinate}>
                 <div className={handleClass}></div>
                 {animation.targetProperty} {coordinate.toUpperCase()}
             </li>
         );
     }
 
+    /**
+     * Render animation
+     * @param animation selected animations
+     * @param i index
+     * @param childrenElements its coordinate (x,y,z) animations
+     */
     typeAnimationItem(animation: Animation, i: number, childrenElements: ItemCoordinate[]) {
         const editAnimation = () => this.props.editAnimation(animation);
         const selectAnimation = () => this.props.selectAnimation(animation);
         const toggle = () => this.toggleProperty(i);
         return (
-            <li
-                className={
-                    this.props.selected && this.props.selected.name === animation.name
-                        ? "property sub active"
-                        : "property sub"
-                }
-                key={i}
-            >
+            <li className={this.props.selected && this.props.selected.name === animation.name ? "property sub active" : "property sub"} key={i}>
                 <div
-                    className={`animation-arrow ${
-                        this.state.animationList && this.state.animationList[i].open ? "" : "flip"
-                    }`}
+                    className={`animation-arrow ${this.state.animationList && this.state.animationList[i].open ? "" : "flip"}`}
                     onClick={toggle}
                 ></div>
                 <p onClick={selectAnimation}>{animation.targetProperty}</p>
                 <IconButtonLineComponent tooltip="Options" icon="small animation-options" onClick={editAnimation} />
                 {!((this.props.entity as TargetedAnimation).getClassName() === "TargetedAnimation") ? (
                     this.props.selected && this.props.selected.name === animation.name ? (
-                        <IconButtonLineComponent
-                            tooltip="Remove"
-                            icon="small animation-delete"
-                            onClick={this.deleteAnimation}
-                        />
+                        <IconButtonLineComponent tooltip="Remove" icon="small animation-delete" onClick={this.deleteAnimation} />
                     ) : (
                         <div className="spacer"></div>
                     )
                 ) : null}
-                <ul
-                    className={`sub-list ${
-                        this.state.animationList && this.state.animationList[i].open ? "" : "hidden"
-                    }`}
-                >
+                <ul className={`sub-list ${this.state.animationList && this.state.animationList[i].open ? "" : "hidden"}`}>
                     {childrenElements.map((c) => this.coordinateItem(i, animation, c.id, c.color, c.coordinate))}
                 </ul>
             </li>
         );
     }
 
+    /**
+     * Render animation item
+     * @param animation Selected aniamtion
+     * @param i index
+     */
     setListItem(animation: Animation, i: number) {
         switch (animation.dataType) {
             case Animation.ANIMATIONTYPE_FLOAT:
@@ -257,28 +270,16 @@ export class AnimationListTree extends React.Component<
                 const selectAnimation = () => this.props.selectAnimation(animation, 0);
                 return (
                     <li
-                        className={
-                            this.props.selected && this.props.selected.name === animation.name
-                                ? "property active"
-                                : "property"
-                        }
+                        className={this.props.selected && this.props.selected.name === animation.name ? "property active" : "property"}
                         key={i}
                         onClick={selectAnimation}
                     >
                         <div className={`animation-bullet`}></div>
                         <p>{animation.targetProperty}</p>
-                        <IconButtonLineComponent
-                            tooltip="Options"
-                            icon="small animation-options"
-                            onClick={editAnimation}
-                        />
+                        <IconButtonLineComponent tooltip="Options" icon="small animation-options" onClick={editAnimation} />
                         {!(this.props.entity instanceof TargetedAnimation) ? (
                             this.props.selected && this.props.selected.name === animation.name ? (
-                                <IconButtonLineComponent
-                                    tooltip="Remove"
-                                    icon="small animation-delete"
-                                    onClick={this.deleteAnimation}
-                                />
+                                <IconButtonLineComponent tooltip="Remove" icon="small animation-delete" onClick={this.deleteAnimation} />
                             ) : (
                                 <div className="spacer"></div>
                             )

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

@@ -50,6 +50,9 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
         }
     };
 
+    /**
+     * Set animation to initial keyframe
+     */
     moveToAnimationStart = () => {
         const startKeyframe = this.props.keyframes && this.props.keyframes[0];
         if (startKeyframe !== null) {
@@ -59,6 +62,9 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
         }
     };
 
+    /**
+     * Set animation to the last keyframe
+     */
     moveToAnimationEnd = () => {
         const endKeyframe = this.props.keyframes && this.props.keyframes[this.props.keyframes.length - 1];
         if (endKeyframe !== null) {
@@ -68,6 +74,7 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
         }
     };
 
+    /** Move to next keyframe */
     nextKeyframe = () => {
         if (this.props.keyframes !== null) {
             let first = this.props.keyframes.find((kf) => kf.frame > this.props.currentFrame);
@@ -79,6 +86,7 @@ export class Controls extends React.Component<IControlsProps, { selected: IAnima
         }
     };
 
+    /** Move to previous keyframe */
     previousKeyframe = () => {
         if (this.props.keyframes !== null) {
             let keyframes = [...this.props.keyframes];

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

@@ -132,6 +132,9 @@ export class EditorControls extends React.Component<IEditorControlsProps, IEdito
         this.props.setIsLooping();
     };
 
+    /**
+     * This avoids using lambda functions in JSX
+     */
     handleFirstTab = () => {
         this.handleTabs(0);
     };

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

@@ -53,13 +53,19 @@ export class GraphActionsBar extends React.Component<
         this.state = { frame, value, min: this.props.frameRange.min, max: this.props.frameRange.max };
     }
 
-    // Listen to keyup changes to handle if the input event has ended or change
+    /**
+     * Listen to keyup changes to handle if the input event has ended or change
+     */
     componentDidMount() {
         this._frameInput.current?.addEventListener("keyup", this.isEnterKeyUp.bind(this));
         this._valueInput.current?.addEventListener("keyup", this.isEnterKeyUp.bind(this));
     }
 
-    // Set the changing state of frame, value and range of the actionablekeyframe
+    /**
+     * Set the changing state of frame, value and range of the actionablekeyframe
+     * @param prevProps previous props
+     * @param prevState previous state
+     */
     componentDidUpdate(prevProps: IGraphActionsBarProps, prevState: any) {
         if (prevProps.actionableKeyframe !== this.props.actionableKeyframe) {
             const { frame, value } = this.selectedKeyframeChanged(this.props.actionableKeyframe);
@@ -90,13 +96,18 @@ export class GraphActionsBar extends React.Component<
         return { frame, value };
     }
 
-    // Remove listeners
+    /**
+     * Remove listeners
+     */
     componentWillUnmount() {
         this._frameInput.current?.removeEventListener("keyup", this.isEnterKeyUp.bind(this));
         this._valueInput.current?.removeEventListener("keyup", this.isEnterKeyUp.bind(this));
     }
 
-    // Trigger the change on the keyframe
+    /**
+     * Trigger the change on the keyframe
+     * @param event Enter keyevent
+     */
     isEnterKeyUp(event: KeyboardEvent) {
         event.preventDefault();
 
@@ -106,7 +117,10 @@ export class GraphActionsBar extends React.Component<
         }
     }
 
-    // Trigger the chnage on the keyframe on blur
+    /**
+     * Trigger the chnage on the keyframe on blur
+     * @param event Focus event
+     */
     onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
         event.preventDefault();
         if (event.target.value !== "") {
@@ -115,7 +129,9 @@ export class GraphActionsBar extends React.Component<
         }
     };
 
-    // Gets the keyframe frame
+    /**
+     * Gets the keyframe frame
+     */
     getFrame() {
         let frame;
         if (this.state.frame === "") {
@@ -127,7 +143,9 @@ export class GraphActionsBar extends React.Component<
         return frame;
     }
 
-    // Gets the keyframe value
+    /**
+     * Gets the keyframe value
+     */
     getValue() {
         let value;
         if (this.state.value !== "") {
@@ -138,13 +156,19 @@ export class GraphActionsBar extends React.Component<
         return value;
     }
 
-    // Set keyframe value state
+    /**
+     * Set keyframe value state
+     * @param e Input event
+     */
     handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         e.preventDefault();
         this.setState({ value: e.target.value });
     };
 
-    // Set the keyframe frame state
+    /**
+     * Set the keyframe frame state
+     * @param e Input event
+     */
     handleFrameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         e.preventDefault();
         this.setState({ frame: e.target.value });

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

@@ -62,6 +62,10 @@ export class KeyframeSvgPoint extends React.Component<IKeyframeSvgPointProps> {
         super(props);
     }
 
+    /**
+     * Select a keyframe. If the control key is pressed, multiselect keyframes
+     * @param e Mouse event
+     */
     select = (e: React.MouseEvent<SVGImageElement>) => {
         e.preventDefault();
         let multiSelect = false;
@@ -71,6 +75,10 @@ export class KeyframeSvgPoint extends React.Component<IKeyframeSvgPointProps> {
         this.props.selectKeyframe(this.props.id, multiSelect);
     };
 
+    /**
+     * Send the ID of the selected keyframe
+     * @param type Type of selected keyframe
+     */
     selectedControlPointId = (type: string) => {
         this.props.selectedControlPoint(type, this.props.id);
     };

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

@@ -44,11 +44,19 @@ export class LoadSnippet extends React.Component<ILoadSnippetProps, { snippetId:
         this.state = { snippetId: "" };
     }
 
+    /**
+     * Set the animations snippet id
+     * @param value Snippet ID
+     */
     change = (value: string) => {
         this.setState({ snippetId: value });
         this.props.setSnippetId(value);
     };
 
+    /**
+     * Select a local file to load animations
+     * @param file File name
+     */
     loadFromFile = (file: File) => {
         Tools.ReadFile(
             file,
@@ -79,6 +87,9 @@ export class LoadSnippet extends React.Component<ILoadSnippetProps, { snippetId:
         );
     };
 
+    /**
+     * Load animations from server identified with a snippet id
+     */
     loadFromSnippet = () => {
         if (this.state.snippetId !== "") {
             //Notify observers

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

@@ -51,6 +51,10 @@ export class SaveSnippet extends React.Component<ISaveSnippetProps, { selectedAn
         this.state = { selectedAnimations: animList ?? [] };
     }
 
+    /**
+     * Set the selected animations to save
+     * @param e Input event
+     */
     handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         e.preventDefault();
 
@@ -66,6 +70,9 @@ export class SaveSnippet extends React.Component<ISaveSnippetProps, { selectedAn
         this.setState({ selectedAnimations: updated });
     };
 
+    /**
+     * Stringify the selected animation
+     */
     stringifySelectedAnimations() {
         const content: string[] = [];
         this.state.selectedAnimations.forEach((animation) => {
@@ -79,11 +86,17 @@ export class SaveSnippet extends React.Component<ISaveSnippetProps, { selectedAn
         return JSON.stringify(content);
     }
 
+    /**
+     * Save the selected animations to a local file
+     */
     saveToFile = () => {
         const content = this.stringifySelectedAnimations();
         Tools.Download(new Blob([content]), "animations.json");
     };
 
+    /**
+     * Save the selected animations if a snippet ID is set
+     */
     saveToSnippet = () => {
         if (this.props.snippetId !== "") {
             let serverId = this.props.snippetId;

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

@@ -73,7 +73,9 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
         this.state = { panX: 0, panY: 0 };
     }
 
-    // Listen to key events to be able to drag and set the correct canvas client width
+    /**
+     * Listen to key events to be able to drag and set the correct canvas client width
+    */
     componentDidMount() {
         this._draggableArea.current?.addEventListener("keydown", this.keyDown.bind(this));
         this._draggableArea.current?.addEventListener("keyup", this.keyUp.bind(this));
@@ -82,7 +84,10 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
         }, 500);
     }
 
-    // Makes sure the canvas has resposition correctly
+    /**
+     * Makes sure the canvas has resposition correctly
+     * @param prevProps previous props
+     */
     componentDidUpdate(prevProps: ISvgDraggableAreaProps) {
         if (
             this.props.positionCanvas !== prevProps.positionCanvas &&
@@ -101,6 +106,10 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
         }
     }
 
+    /**
+     * Identify the type of target of the mouse event
+     * @param e SVG Mouse Event
+     */
     dragStart = (e: React.MouseEvent<SVGSVGElement, MouseEvent>): void => {
         e.preventDefault();
         if ((e.target as SVGSVGElement).classList.contains("draggable")) {
@@ -140,6 +149,10 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
         }
     };
 
+    /**
+     * Handle dragging
+     * @param e SVG Mouse Event
+     */
     drag = (e: React.MouseEvent<SVGSVGElement, MouseEvent>): void => {
         if (this._active) {
             e.preventDefault();
@@ -258,22 +271,26 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps, {
             directionY = 1; //bottom
         }
 
+        // Establish the pan buffer we have to start moving the canvas
         const bufferX = this._movedX === 0 ? 1 : Math.abs(this._movedX - this._panStop.x);
         const bufferY = this._movedY === 0 ? 1 : Math.abs(this._movedY - this._panStop.y);
 
         let xMulti = 0;
+        // Evaluate if mouse move is too little to move the canvas
         if (bufferX >= this._dragBuffer) {
             xMulti = Math.round(Math.abs(bufferX - this._dragBuffer) / 2.5);
         }
-
+        // Evaluate if mouse move is too little to move the canvas
         let yMulti = 0;
         if (bufferY >= this._dragBuffer) {
             yMulti = Math.round(Math.abs(bufferY - this._dragBuffer) / 2.5);
         }
 
+        // Set last moved value
         this._movedX = this._panStop.x;
         this._movedY = this._panStop.y;
 
+        // Establish new pan value
         let newX = this.state.panX + directionX * xMulti;
         let newY = this.state.panY + directionY * yMulti;
 

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

@@ -95,6 +95,7 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
         }
     }
 
+    /** Listen to keyup events and set the initial lenght of the scrollbar */
     componentDidMount() {
         setTimeout(() => {
             this.setState({
@@ -105,6 +106,7 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
         this._inputAnimationLimit.current?.addEventListener("keyup", this.isEnterKeyUp.bind(this));
     }
 
+    /** Recalculate the scrollwidth if a window resize happens */
     componentDidUpdate(prevProps: ITimelineProps) {
         if (prevProps.animationLimit !== this.props.animationLimit) {
             this.setState({ limitValue: this.props.animationLimit });
@@ -116,10 +118,15 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
         }
     }
 
+    /** Remove key event listener */
     componentWillUnmount() {
         this._inputAnimationLimit.current?.removeEventListener("keyup", this.isEnterKeyUp.bind(this));
     }
 
+    /**
+     * Set component state if enter key is pressed
+     * @param event enter key event
+     */
     isEnterKeyUp(event: KeyboardEvent) {
         event.preventDefault();
         if (event.key === "Enter") {
@@ -127,11 +134,16 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
         }
     }
 
+    /**
+     * Detect blur event
+     * @param event Blur event
+     */
     onInputBlur(event: React.FocusEvent<HTMLInputElement>) {
         event.preventDefault();
         this.setControlState();
     }
 
+    /** Set component state (scrollbar width, position, and start and end) */
     setControlState() {
         this.props.onAnimationLimitChange(this.state.limitValue);
         const newEnd = Math.round(this.state.limitValue / 2);
@@ -270,6 +282,8 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
 
     /**
      * Check if the frame is being used as a Keyframe by the animation
+     * @param frame number of frame
+     * @param direction frame increment or decrement
      */
     isFrameBeingUsed(frame: number, direction: number) {
         let used = this.props.keyframes?.find((kf) => kf.frame === frame);
@@ -480,12 +494,14 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
         }
     }
 
+    /* Overrides default DOM drag */
     dragDomFalse = () => false;
 
     render() {
         return (
             <>
                 <div className="timeline">
+                    {/* Renders the play animation controls */}
                     <Controls
                         keyframes={this.props.keyframes}
                         selected={this.props.selected}
@@ -497,6 +513,7 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
                         scrollable={this._scrollable}
                     />
                     <div className="timeline-wrapper">
+                        {/* Renders the timeline that displays the animation keyframes */}
                         <div
                             ref={this._scrollable}
                             className="display-line"
@@ -514,6 +531,7 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
                                 onMouseUp={this.dragEnd}
                                 onMouseLeave={this.dragEnd}
                             >
+                                {/* Renders the visible frames */}
                                 {this.state.selectionLength.map((frame, i) => {
                                     return (
                                         <svg key={`tl_${frame}`}>
@@ -583,7 +601,7 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
                                 })}
                             </svg>
                         </div>
-
+                        {/* Timeline scrollbar that has drag events */}
                         <div
                             className="timeline-scroll-handle"
                             onMouseMove={this.scrollDrag}
@@ -598,6 +616,7 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
                                     ref={this._scrollbarHandle}
                                     style={{ width: this.state.scrollWidth }}
                                 >
+                                    {/* Handle that resizes the scrollbar to the left */}
                                     <div className="left-grabber">
                                         <div className="left-draggable">
                                             <div className="grabber"></div>
@@ -607,7 +626,7 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
                                         <div className="text">{this.state.start}</div>
                                     </div>
                                     <div className="scrollbar"></div>
-
+                                    {/* Handle that resizes the scrollbar to the right */}
                                     <div className="right-grabber">
                                         <div className="text">{this.state.end}</div>
                                         <div className="right-draggable">
@@ -619,7 +638,7 @@ export class Timeline extends React.Component<ITimelineProps, ITimelineState> {
                                 </div>
                             </div>
                         </div>
-
+                        {/* Handles the limit of number of frames in the selected animation */}
                         <div className="input-frame">
                             <input
                                 ref={this._inputAnimationLimit}