UI fixes

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

@@ -7,6 +7,7 @@ import { Vector2, Vector3, Quaternion } from 'babylonjs/Maths/math.vector';
 import { Size } from 'babylonjs/Maths/math.size';
 import { Color3, Color4 } from 'babylonjs/Maths/math.color';
 import { IAnimatable } from 'babylonjs/Animations/animatable.interface';
+import { IAnimationKey } from 'babylonjs';
 
 interface IAddAnimationProps {
   isOpen: boolean;
@@ -14,8 +15,10 @@ interface IAddAnimationProps {
   entity: IAnimatable;
   onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
   setNotificationMessage: (message: string) => void;
-  changed: () => void;
+  finishedUpdate: () => void;
+  addedNewAnimation: () => void;
   fps: number;
+  selectedToUpdate?: Animation | undefined;
 }
 
 export class AddAnimation extends React.Component<
@@ -26,17 +29,95 @@ export class AddAnimation extends React.Component<
     animationType: string;
     loopMode: number;
     animationTargetPath: string;
+    isUpdating: boolean;
   }
 > {
   constructor(props: IAddAnimationProps) {
     super(props);
-    this.state = {
-      animationName: '',
-      animationTargetPath: '',
-      animationType: 'Float',
-      loopMode: Animation.ANIMATIONLOOPMODE_CYCLE,
-      animationTargetProperty: '',
-    };
+
+    if (this.props.selectedToUpdate !== undefined) {
+      this.state = {
+        animationName: this.props.selectedToUpdate.name,
+        animationTargetPath: '',
+        animationType: this.getTypeAsString(
+          this.props.selectedToUpdate.dataType
+        ),
+        loopMode:
+          this.props.selectedToUpdate.loopMode ??
+          Animation.ANIMATIONLOOPMODE_CYCLE,
+        animationTargetProperty: this.props.selectedToUpdate.targetProperty,
+        isUpdating: true,
+      };
+    } else {
+      this.state = {
+        animationName: '',
+        animationTargetPath: '',
+        animationType: 'Float',
+        loopMode: Animation.ANIMATIONLOOPMODE_CYCLE,
+        animationTargetProperty: '',
+        isUpdating: this.props.selectedToUpdate ? true : false,
+      };
+    }
+  }
+
+  componentWillReceiveProps(nextProps: IAddAnimationProps) {
+    if (
+      nextProps.selectedToUpdate !== undefined &&
+      nextProps.selectedToUpdate !== this.props.selectedToUpdate
+    ) {
+      this.setState({
+        animationName: nextProps.selectedToUpdate.name,
+        animationTargetPath: '',
+        animationType: this.getTypeAsString(
+          nextProps.selectedToUpdate.dataType
+        ),
+        loopMode:
+          nextProps.selectedToUpdate.loopMode ??
+          Animation.ANIMATIONLOOPMODE_CYCLE,
+        animationTargetProperty: nextProps.selectedToUpdate.targetProperty,
+        isUpdating: true,
+      });
+    } else {
+      if (nextProps.isOpen === true && nextProps.isOpen !== this.props.isOpen)
+        this.setState({
+          animationName: '',
+          animationTargetPath: '',
+          animationType: 'Float',
+          loopMode: Animation.ANIMATIONLOOPMODE_CYCLE,
+          animationTargetProperty: '',
+          isUpdating: false,
+        });
+    }
+  }
+
+  updateAnimation() {
+    if (this.props.selectedToUpdate !== undefined) {
+      const oldNameValue = this.props.selectedToUpdate.name;
+      this.props.selectedToUpdate.name = this.state.animationName;
+      this.raiseOnPropertyUpdated(
+        oldNameValue,
+        this.state.animationName,
+        'name'
+      );
+
+      const oldLoopModeValue = this.props.selectedToUpdate.loopMode;
+      this.props.selectedToUpdate.loopMode = this.state.loopMode;
+      this.raiseOnPropertyUpdated(
+        oldLoopModeValue,
+        this.state.loopMode,
+        'loopMode'
+      );
+
+      const oldTargetPropertyValue = this.props.selectedToUpdate.targetProperty;
+      this.props.selectedToUpdate.targetProperty = this.state.animationTargetProperty;
+      this.raiseOnPropertyUpdated(
+        oldTargetPropertyValue,
+        this.state.animationTargetProperty,
+        'targetProperty'
+      );
+
+      this.props.finishedUpdate();
+    }
   }
 
   getAnimationTypeofChange(selected: string) {
@@ -64,10 +145,37 @@ export class AddAnimation extends React.Component<
         dataType = Animation.ANIMATIONTYPE_COLOR4;
         break;
     }
-
     return dataType;
   }
 
+  getTypeAsString(type: number) {
+    let typeAsString = 'Float';
+    switch (type) {
+      case Animation.ANIMATIONTYPE_FLOAT:
+        typeAsString = 'Float';
+        break;
+      case Animation.ANIMATIONTYPE_QUATERNION:
+        typeAsString = 'Quaternion';
+        break;
+      case Animation.ANIMATIONTYPE_VECTOR3:
+        typeAsString = 'Vector3';
+        break;
+      case Animation.ANIMATIONTYPE_VECTOR2:
+        typeAsString = 'Vector2';
+        break;
+      case Animation.ANIMATIONTYPE_SIZE:
+        typeAsString = 'Size';
+        break;
+      case Animation.ANIMATIONTYPE_COLOR3:
+        typeAsString = 'Color3';
+        break;
+      case Animation.ANIMATIONTYPE_COLOR4:
+        typeAsString = 'Color4';
+        break;
+    }
+    return typeAsString;
+  }
+
   addAnimation() {
     if (
       this.state.animationName != '' &&
@@ -139,52 +247,37 @@ export class AddAnimation extends React.Component<
 
       if (matched) {
         let startValue;
-        let endValue;
         let outTangent;
-        let inTangent;
+
         // Default start and end values for new animations
         switch (animationDataType) {
           case Animation.ANIMATIONTYPE_FLOAT:
             startValue = 1;
-            endValue = 1;
             outTangent = 0;
-            inTangent = 0;
             break;
           case Animation.ANIMATIONTYPE_VECTOR2:
             startValue = new Vector2(1, 1);
-            endValue = new Vector2(1, 1);
             outTangent = Vector2.Zero();
-            inTangent = Vector2.Zero();
             break;
           case Animation.ANIMATIONTYPE_VECTOR3:
             startValue = new Vector3(1, 1, 1);
-            endValue = new Vector3(1, 1, 1);
             outTangent = Vector3.Zero();
-            inTangent = Vector3.Zero();
             break;
           case Animation.ANIMATIONTYPE_QUATERNION:
             startValue = new Quaternion(1, 1, 1, 1);
-            endValue = new Quaternion(1, 1, 1, 1);
             outTangent = Quaternion.Zero();
-            inTangent = Quaternion.Zero();
             break;
           case Animation.ANIMATIONTYPE_COLOR3:
             startValue = new Color3(1, 1, 1);
-            endValue = new Color3(1, 1, 1);
             outTangent = new Color3(0, 0, 0);
-            inTangent = new Color3(0, 0, 0);
             break;
           case Animation.ANIMATIONTYPE_COLOR4:
             startValue = new Color4(1, 1, 1, 1);
-            endValue = new Color4(1, 1, 1, 1);
             outTangent = new Color4(0, 0, 0, 0);
-            inTangent = new Color4(0, 0, 0, 0);
             break;
           case Animation.ANIMATIONTYPE_SIZE:
             startValue = new Size(1, 1);
-            endValue = new Size(1, 1);
             outTangent = Size.Zero();
-            inTangent = Size.Zero();
             break;
           default:
             console.log('not recognized');
@@ -220,19 +313,13 @@ export class AddAnimation extends React.Component<
           );
 
           // Start with two keyframes
-          var keys = [];
+          var keys: IAnimationKey[] = [];
           keys.push({
             frame: 0,
             value: startValue,
             outTangent: outTangent,
           });
 
-          keys.push({
-            inTangent: inTangent,
-            frame: 100,
-            value: endValue,
-          });
-
           animation.setKeys(keys);
 
           if (this.props.entity.animations) {
@@ -243,8 +330,7 @@ export class AddAnimation extends React.Component<
             ];
             this.raiseOnPropertyChanged(updatedCollection, store);
             this.props.entity.animations = updatedCollection;
-            this.props.changed();
-            this.props.close();
+            this.props.addedNewAnimation();
             //Cleaning form fields
             this.setState({
               animationName: '',
@@ -280,6 +366,23 @@ export class AddAnimation extends React.Component<
     });
   }
 
+  raiseOnPropertyUpdated(
+    newValue: string | number | undefined,
+    previousValue: string | number,
+    property: string
+  ) {
+    if (!this.props.onPropertyChangedObservable) {
+      return;
+    }
+
+    this.props.onPropertyChangedObservable.notifyObservers({
+      object: this.props.selectedToUpdate,
+      property: property,
+      value: newValue,
+      initialValue: previousValue,
+    });
+  }
+
   handleNameChange(event: React.ChangeEvent<HTMLInputElement>) {
     event.preventDefault();
     this.setState({ animationName: event.target.value.trim() });
@@ -312,15 +415,17 @@ export class AddAnimation extends React.Component<
         style={{ display: this.props.isOpen ? 'block' : 'none' }}
       >
         <div className='sub-content'>
-          <div className='label-input'>
-            <label>Target Path</label>
-            <input
-              type='text'
-              value={this.state.animationTargetPath}
-              onChange={(e) => this.handlePathChange(e)}
-              disabled
-            ></input>
-          </div>
+          {this.state.isUpdating ? null : (
+            <div className='label-input'>
+              <label>Target Path</label>
+              <input
+                type='text'
+                value={this.state.animationTargetPath}
+                onChange={(e) => this.handlePathChange(e)}
+                disabled
+              ></input>
+            </div>
+          )}
           <div className='label-input'>
             <label>Display Name</label>
             <input
@@ -337,21 +442,23 @@ export class AddAnimation extends React.Component<
               onChange={(e) => this.handlePropertyChange(e)}
             ></input>
           </div>
-          <div className='label-input'>
-            <label>Type</label>
-            <select
-              onChange={(e) => this.handleTypeChange(e)}
-              value={this.state.animationType}
-            >
-              <option value='Float'>Float</option>
-              <option value='Vector3'>Vector3</option>
-              <option value='Vector2'>Vector2</option>
-              <option value='Quaternion'>Quaternion</option>
-              <option value='Color3'>Color3</option>
-              <option value='Color4'>Color4</option>
-              <option value='Size'>Size</option>
-            </select>
-          </div>
+          {this.state.isUpdating ? null : (
+            <div className='label-input'>
+              <label>Type</label>
+              <select
+                onChange={(e) => this.handleTypeChange(e)}
+                value={this.state.animationType}
+              >
+                <option value='Float'>Float</option>
+                <option value='Vector3'>Vector3</option>
+                <option value='Vector2'>Vector2</option>
+                <option value='Quaternion'>Quaternion</option>
+                <option value='Color3'>Color3</option>
+                <option value='Color4'>Color4</option>
+                <option value='Size'>Size</option>
+              </select>
+            </div>
+          )}
           <div className='label-input'>
             <label>Loop Mode</label>
             <select
@@ -369,8 +476,12 @@ export class AddAnimation extends React.Component<
           </div>
           <div className='confirm-buttons'>
             <ButtonLineComponent
-              label={'Create'}
-              onClick={() => this.addAnimation()}
+              label={this.state.isUpdating ? 'Update' : 'Create'}
+              onClick={
+                this.state.isUpdating
+                  ? () => this.updateAnimation()
+                  : () => this.addAnimation()
+              }
             />
           </div>
         </div>

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

@@ -1,36 +1,57 @@
-
-import * as React from "react";
+import * as React from 'react';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
 
 interface IAnchorSvgPointProps {
-    control: Vector2;
-    anchor: Vector2;
-    active: boolean;
-    type: string;
-    index: string;
-    selected: boolean;
-    selectControlPoint: (id: string) => void;
+  control: Vector2;
+  anchor: Vector2;
+  active: boolean;
+  type: string;
+  index: string;
+  selected: boolean;
+  selectControlPoint: (id: string) => void;
 }
 
+export class AnchorSvgPoint extends React.Component<IAnchorSvgPointProps> {
+  constructor(props: IAnchorSvgPointProps) {
+    super(props);
+  }
 
-export class AnchorSvgPoint extends React.Component<IAnchorSvgPointProps>{
-    constructor(props: IAnchorSvgPointProps) {
-        super(props);
-    }
-
-    select() {
-        this.props.selectControlPoint(this.props.type);
-    }
+  select() {
+    this.props.selectControlPoint(this.props.type);
+  }
 
-    render() {
-        return (
-            <>
-                <svg x={this.props.control.x} y={this.props.control.y} style={{ overflow: 'visible' }} onClick={() => this.select()}>
-                    <circle type={this.props.type} data-id={this.props.index} className={`draggable control-point ${this.props.active ? 'active' : ''}`} cx="0" cy="0" r="1" stroke="white" strokeWidth={this.props.selected ? 0 : 0} fill={this.props.active ? "#e9db1e" : "white"} />
-                </svg>
-                <line className={`control-point ${this.props.active ? 'active' : ''}`} x1={this.props.anchor.x} y1={this.props.anchor.y} x2={this.props.control.x} y2={this.props.control.y} strokeWidth="1" />
-            </>
-        )
-    }
+  render() {
+    return (
+      <>
+        <svg
+          x={this.props.control.x}
+          y={this.props.control.y}
+          style={{ overflow: 'visible' }}
+          onClick={() => this.select()}
+        >
+          <circle
+            type={this.props.type}
+            data-id={this.props.index}
+            className={`draggable control-point ${
+              this.props.active ? 'active' : ''
+            }`}
+            cx='0'
+            cy='0'
+            r='0.7%'
+            stroke='white'
+            strokeWidth={this.props.selected ? 0 : 0}
+            fill={this.props.active ? '#e9db1e' : 'white'}
+          />
+        </svg>
+        <line
+          className={`control-point ${this.props.active ? 'active' : ''}`}
+          x1={this.props.anchor.x}
+          y1={this.props.anchor.y}
+          x2={this.props.control.x}
+          y2={this.props.control.y}
+          strokeWidth='0.8%'
+        />
+      </>
+    );
+  }
 }
-

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

@@ -8,7 +8,6 @@ import { IAnimationKey } from 'babylonjs/Animations/animationKey';
 import { IKeyframeSvgPoint } from './keyframeSvgPoint';
 import { SvgDraggableArea } from './svgDraggableArea';
 import { Timeline } from './timeline';
-import { Playhead } from './playhead';
 import { Notification } from './notification';
 import { GraphActionsBar } from './graphActionsBar';
 import { Scene } from 'babylonjs/scene';
@@ -85,6 +84,8 @@ export class AnimationCurveEditorComponent extends React.Component<
   private _svgCanvas: React.RefObject<SvgDraggableArea>;
   private _isTargetedAnimation: boolean;
 
+  private _pixelFrameUnit: number;
+
   private _onBeforeRenderObserver: Nullable<Observer<Scene>>;
   private _mainAnimatable: Nullable<Animatable>;
   constructor(props: IAnimationCurveEditorComponentProps) {
@@ -95,6 +96,8 @@ export class AnimationCurveEditorComponent extends React.Component<
     //this._selectedCurve = React.createRef();
     this._svgCanvas = React.createRef();
 
+    this._pixelFrameUnit = 10;
+
     console.log(this.props.entity instanceof TargetedAnimation);
 
     let initialSelection;
@@ -165,7 +168,7 @@ export class AnimationCurveEditorComponent extends React.Component<
       selectedPathData: initialPathData,
       selectedCoordinate: 0,
       animationLimit: 120,
-      fps: 0,
+      fps: 60,
     };
   }
 
@@ -256,10 +259,16 @@ export class AnimationCurveEditorComponent extends React.Component<
    * Keyframe Manipulation
    * This section handles events from SvgDraggableArea.
    */
-  selectKeyframe(id: string) {
+  selectKeyframe(id: string, multiselect: boolean) {
+    let selectedKeyFrame = this.state.svgKeyframes?.find((kf) => kf.id === id)
+      ?.selected;
+    if (!multiselect) {
+      this.deselectKeyframes();
+    }
+
     let updatedKeyframes = this.state.svgKeyframes?.map((kf) => {
       if (kf.id === id) {
-        kf.selected = !kf.selected;
+        kf.selected = !selectedKeyFrame;
       }
       return kf;
     });
@@ -284,6 +293,16 @@ export class AnimationCurveEditorComponent extends React.Component<
     this.setState({ svgKeyframes: updatedKeyframes });
   }
 
+  deselectKeyframes() {
+    let updatedKeyframes = this.state.svgKeyframes?.map((kf) => {
+      kf.isLeftActive = false;
+      kf.isRightActive = false;
+      kf.selected = false;
+      return kf;
+    });
+    this.setState({ svgKeyframes: updatedKeyframes });
+  }
+
   updateValuePerCoordinate(
     dataType: number,
     value: number | Vector2 | Vector3 | Color3 | Color4 | Size | Quaternion,
@@ -398,7 +417,9 @@ export class AnimationCurveEditorComponent extends React.Component<
       ) {
         newFrame = 1;
       } else {
-        newFrame = Math.round(updatedSvgKeyFrame.keyframePoint.x);
+        newFrame = Math.round(
+          updatedSvgKeyFrame.keyframePoint.x / this._pixelFrameUnit
+        );
       }
     }
 
@@ -589,6 +610,36 @@ export class AnimationCurveEditorComponent extends React.Component<
     }
   }
 
+  removeKeyframes(points: IKeyframeSvgPoint[]) {
+    if (this.state.selected !== null) {
+      let currentAnimation = this.state.selected;
+
+      const indexesToRemove = points.map((p) => {
+        return {
+          index: parseInt(p.id.split('_')[3]),
+          coordinate: parseInt(p.id.split('_')[2]),
+        };
+      });
+
+      if (currentAnimation.dataType === Animation.ANIMATIONTYPE_FLOAT) {
+        let keys = currentAnimation.getKeys();
+
+        let filteredKeys = keys.filter((_, i) => {
+          if (indexesToRemove.find((x) => x.index === i)) {
+            return false;
+          } else {
+            return true;
+          }
+        });
+
+        currentAnimation.setKeys(filteredKeys);
+        this.deselectKeyframes();
+
+        this.selectAnimation(currentAnimation);
+      }
+    }
+  }
+
   addKeyFrame(event: React.MouseEvent<SVGSVGElement>) {
     event.preventDefault();
 
@@ -778,9 +829,9 @@ 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._heightScale - startValue[d] * middle
-        }`; //
+        let data: string | undefined = `M${
+          startKey.frame * this._pixelFrameUnit
+        }, ${this._heightScale - startValue[d] * middle}`; //
 
         if (this.state && this.state.lerpMode) {
           data = this.linearInterpolation(keyframes, data, middle);
@@ -912,13 +963,18 @@ export class AnimationCurveEditorComponent extends React.Component<
       let inTangent;
       let defaultWeight = 5;
 
+      let defaultTangent: number | null = null;
+      if (i !== 0 || i !== keyframes.length - 1) {
+        defaultTangent = 0;
+      }
+
       var inT =
         key.inTangent === undefined
-          ? null
+          ? defaultTangent
           : this.getValueAsArray(type, key.inTangent)[coordinate];
       var outT =
         key.outTangent === undefined
-          ? null
+          ? defaultTangent
           : this.getValueAsArray(type, key.outTangent)[coordinate];
 
       let y = this._heightScale - keyframe_valueAsArray * middle;
@@ -937,14 +993,20 @@ export class AnimationCurveEditorComponent extends React.Component<
 
       if (inT !== null) {
         let valueIn = y * inT + y;
-        inTangent = new Vector2(key.frame - defaultWeight, valueIn);
+        inTangent = new Vector2(
+          key.frame * this._pixelFrameUnit - defaultWeight,
+          valueIn
+        );
       } else {
         inTangent = null;
       }
 
       if (outT !== null) {
         let valueOut = y * outT + y;
-        outTangent = new Vector2(key.frame + defaultWeight, valueOut);
+        outTangent = new Vector2(
+          key.frame * this._pixelFrameUnit + defaultWeight,
+          valueOut
+        );
       } else {
         outTangent = null;
       }
@@ -952,7 +1014,7 @@ export class AnimationCurveEditorComponent extends React.Component<
       if (i === 0) {
         svgKeyframe = {
           keyframePoint: new Vector2(
-            key.frame,
+            key.frame * this._pixelFrameUnit,
             this._heightScale - keyframe_valueAsArray * middle
           ),
           rightControlPoint: outTangent,
@@ -968,7 +1030,7 @@ export class AnimationCurveEditorComponent extends React.Component<
       } else {
         svgKeyframe = {
           keyframePoint: new Vector2(
-            key.frame,
+            key.frame * this._pixelFrameUnit,
             this._heightScale - keyframe_valueAsArray * middle
           ),
           rightControlPoint: outTangent,
@@ -1164,6 +1226,15 @@ export class AnimationCurveEditorComponent extends React.Component<
     return [controlA, controlB, controlC, controlD];
   }
 
+  deselectAnimation() {
+    this.setState({
+      selected: null,
+      svgKeyframes: [],
+      selectedPathData: [],
+      selectedCoordinate: 0,
+    });
+  }
+
   /**
    * Core functions
    * This section handles main Curve Editor Functions.
@@ -1364,7 +1435,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         (e.clientX - CTM.e) / CTM.a,
         (e.clientY - CTM.f) / CTM.d
       );
-      let selectedFrame = Math.round(position.x);
+      let selectedFrame = Math.round(position.x / this._pixelFrameUnit);
       this.setState({ currentFrame: selectedFrame });
     }
   }
@@ -1427,6 +1498,7 @@ export class AnimationCurveEditorComponent extends React.Component<
         <div className='content'>
           <div className='row'>
             <EditorControls
+              deselectAnimation={() => this.deselectAnimation()}
               selectAnimation={(
                 animation: Animation,
                 axis?: SelectedCoordinate
@@ -1453,13 +1525,19 @@ export class AnimationCurveEditorComponent extends React.Component<
               {this.state.svgKeyframes && (
                 <SvgDraggableArea
                   ref={this._svgCanvas}
-                  selectKeyframe={(id: string) => this.selectKeyframe(id)}
+                  selectKeyframe={(id: string, multiselect: boolean) =>
+                    this.selectKeyframe(id, multiselect)
+                  }
                   viewBoxScale={this.state.frameAxisLength.length}
                   scale={this.state.scale}
                   keyframeSvgPoints={this.state.svgKeyframes}
+                  removeSelectedKeyframes={(points: IKeyframeSvgPoint[]) =>
+                    this.removeKeyframes(points)
+                  }
                   selectedControlPoint={(type: string, id: string) =>
                     this.selectedControlPoint(type, id)
                   }
+                  deselectKeyframes={() => this.deselectKeyframes()}
                   updatePosition={(
                     updatedSvgKeyFrame: IKeyframeSvgPoint,
                     id: string
@@ -1530,44 +1608,51 @@ export class AnimationCurveEditorComponent extends React.Component<
                       </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}
+                          y1='-100'
+                          x2={f.value}
+                          y2='5%'
+                        ></line>
+                      ) : null}
+
                       {this.isCurrentFrame(f.label) ? (
                         <svg>
                           <line
                             x1={f.value}
                             y1='0'
                             x2={f.value}
-                            y2='40'
+                            y2='-100%'
                             style={{
-                              stroke: 'rgba(18, 80, 107, 0.26)',
-                              strokeWidth: 6,
+                              stroke: 'white',
+                              strokeWidth: 0.4,
                             }}
                           />
+                          <svg x={f.value} y='-1'>
+                            <circle
+                              className='svg-playhead'
+                              cx='0'
+                              cy='0'
+                              r='2%'
+                              fill='white'
+                            />
+                            <text
+                              x='-0.6%'
+                              y='1%'
+                              style={{
+                                fontSize: `${0.17 * this.state.scale}em`,
+                              }}
+                            >
+                              {f.label}
+                            </text>
+                          </svg>
                         </svg>
                       ) : null}
-
-                      {f.value % this.state.fps === 0 && f.value !== 0 ? (
-                        <line
-                          x1={f.value}
-                          y1='-100'
-                          x2={f.value}
-                          y2='5%'
-                        ></line>
-                      ) : null}
                     </svg>
                   ))}
                 </SvgDraggableArea>
               )}
-
-              {this.state.selected === null ||
-              this.state.selected === undefined ? null : (
-                <Playhead
-                  frame={this.state.currentFrame}
-                  offset={this.state.playheadOffset}
-                  onCurrentFrameChange={(frame: number) =>
-                    this.changeCurrentFrame(frame)
-                  }
-                />
-              )}
             </div>
           </div>
           <div className='row-bottom'>

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

@@ -17,6 +17,8 @@ interface IAnimationListTreeProps {
     coordinate?: SelectedCoordinate
   ) => void;
   empty: () => void;
+  editAnimation: (selected: Animation) => void;
+  deselectAnimation: () => void;
 }
 
 interface Item {
@@ -73,6 +75,7 @@ export class AnimationListTree extends React.Component<
           .entity as IAnimatable).animations = updatedAnimations as Nullable<
           Animation[]
         >;
+        this.props.deselectAnimation();
         this._list = this.generateList();
       }
     }
@@ -96,10 +99,6 @@ export class AnimationListTree extends React.Component<
     return animationList ?? null;
   }
 
-  editAnimation() {
-    console.log('Edit animation'); // TODO. Implement the edit options here
-  }
-
   toggleProperty(index: number) {
     if (this._list !== null) {
       let item = this._list[index];
@@ -139,7 +138,7 @@ export class AnimationListTree extends React.Component<
               <IconButtonLineComponent
                 tooltip='Options'
                 icon='small animation-options'
-                onClick={() => this.editAnimation()}
+                onClick={() => this.props.editAnimation(animation)}
               />
               {!(this.props.entity instanceof TargetedAnimation) ? (
                 this.props.selected &&
@@ -203,7 +202,7 @@ export class AnimationListTree extends React.Component<
               <IconButtonLineComponent
                 tooltip='Options'
                 icon='small animation-options'
-                onClick={() => this.editAnimation()}
+                onClick={() => this.props.editAnimation(animation)}
               />
               {!(this.props.entity instanceof TargetedAnimation) ? (
                 this.props.selected &&

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

@@ -25,6 +25,7 @@ interface IEditorControlsProps {
   setFps: (fps: number) => void;
   globalState: GlobalState;
   snippetServer: string;
+  deselectAnimation: () => void;
 }
 
 export class EditorControls extends React.Component<
@@ -39,6 +40,7 @@ export class EditorControls extends React.Component<
     framesPerSecond: number;
     snippetId: string;
     loopMode: number;
+    selected: Animation | undefined;
   }
 > {
   constructor(props: IEditorControlsProps) {
@@ -56,11 +58,11 @@ export class EditorControls extends React.Component<
       animationsCount: count,
       framesPerSecond: 60,
       snippetId: '',
+      selected: undefined,
     };
   }
 
   animationAdded() {
-    // select recently created animation/first coordinate...
     this.setState({
       animationsCount: this.recountAnimations(),
       isEditTabOpen: true,
@@ -68,6 +70,14 @@ export class EditorControls extends React.Component<
     });
   }
 
+  finishedUpdate() {
+    this.setState({
+      isEditTabOpen: true,
+      isAnimationTabOpen: false,
+      selected: undefined,
+    });
+  }
+
   recountAnimations() {
     return (this.props.entity as IAnimatable).animations?.length ?? 0;
   }
@@ -160,6 +170,16 @@ export class EditorControls extends React.Component<
     });
   }
 
+  editAnimation(selected: Animation) {
+    this.setState({
+      selected: selected,
+      isEditTabOpen: false,
+      isAnimationTabOpen: true,
+      isLoadTabOpen: false,
+      isSaveTabOpen: false,
+    });
+  }
+
   render() {
     return (
       <div className='animation-list'>
@@ -229,9 +249,11 @@ export class EditorControls extends React.Component<
             setNotificationMessage={(message: string) => {
               this.props.setNotificationMessage(message);
             }}
-            changed={() => this.animationAdded()}
+            addedNewAnimation={() => this.animationAdded()}
             onPropertyChangedObservable={this.props.onPropertyChangedObservable}
             fps={this.state.framesPerSecond}
+            selectedToUpdate={this.state.selected}
+            finishedUpdate={() => this.finishedUpdate()}
           />
         )}
 
@@ -262,12 +284,16 @@ export class EditorControls extends React.Component<
 
         {this.state.isEditTabOpen ? (
           <AnimationListTree
+            deselectAnimation={() => this.props.deselectAnimation()}
             isTargetedAnimation={this.props.isTargetedAnimation}
             entity={this.props.entity}
             selected={this.props.selected}
             onPropertyChangedObservable={this.props.onPropertyChangedObservable}
             empty={() => this.emptiedList()}
             selectAnimation={this.props.selectAnimation}
+            editAnimation={(selected: Animation) =>
+              this.editAnimation(selected)
+            }
           />
         ) : null}
       </div>

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

@@ -78,12 +78,6 @@ export class GraphActionsBar extends React.Component<IGraphActionsBarProps> {
             onClick={this.props.setLerpMode}
           />
         </div>
-        <div
-          className='icon close'
-          onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
-            this.props.close(event)
-          }
-        ></div>
       </div>
     );
   }

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

@@ -1,59 +1,101 @@
-import * as React from "react";
+import * as React from 'react';
 import { Vector2 } from 'babylonjs/Maths/math.vector';
 import { AnchorSvgPoint } from './anchorSvgPoint';
 
-const keyInactive = require("./assets/keyInactiveIcon.svg") as string;
+const keyInactive = require('./assets/keyInactiveIcon.svg') as string;
 //const keyActive = require("./assets/keyActiveIcon.svg") as string; uncomment when setting active multiselect
-const keySelected = require("./assets/keySelectedIcon.svg") as string;
+const keySelected = require('./assets/keySelectedIcon.svg') as string;
 
 export interface IKeyframeSvgPoint {
-    keyframePoint: Vector2;
-    rightControlPoint: Vector2 | null;
-    leftControlPoint: Vector2 | null;
-    id: string;
-    selected: boolean;
-    isLeftActive: boolean;
-    isRightActive: boolean;
-    curveId?: ICurveMetaData;
+  keyframePoint: Vector2;
+  rightControlPoint: Vector2 | null;
+  leftControlPoint: Vector2 | null;
+  id: string;
+  selected: boolean;
+  isLeftActive: boolean;
+  isRightActive: boolean;
+  curveId?: ICurveMetaData;
 }
 
 export interface ICurveMetaData {
-    id: number;
-    animationName: string;
-    property: string;
+  id: number;
+  animationName: string;
+  property: string;
 }
 
 interface IKeyframeSvgPointProps {
-    keyframePoint: Vector2;
-    leftControlPoint: Vector2 | null;
-    rightControlPoint: Vector2 | null;
-    id: string;
-    selected: boolean;
-    selectKeyframe: (id: string) => void;
-    selectedControlPoint: (type: string, id: string) => void;
-    isLeftActive: boolean;
-    isRightActive: boolean;
+  keyframePoint: Vector2;
+  leftControlPoint: Vector2 | null;
+  rightControlPoint: Vector2 | null;
+  id: string;
+  selected: boolean;
+  selectKeyframe: (id: string, multiselect: boolean) => void;
+  selectedControlPoint: (type: string, id: string) => void;
+  isLeftActive: boolean;
+  isRightActive: boolean;
 }
 
-export class KeyframeSvgPoint extends React.Component<IKeyframeSvgPointProps>{
+export class KeyframeSvgPoint extends React.Component<IKeyframeSvgPointProps> {
+  constructor(props: IKeyframeSvgPointProps) {
+    super(props);
+  }
 
-    constructor(props: IKeyframeSvgPointProps) {
-        super(props);
+  select(e: React.MouseEvent<SVGImageElement>) {
+    e.preventDefault();
+    let multiSelect = false;
+    if (e.buttons === 0 && e.ctrlKey) {
+      multiSelect = true;
     }
+    this.props.selectKeyframe(this.props.id, multiSelect);
+  }
 
-    select() {
-        this.props.selectKeyframe(this.props.id);
-    }
-
-    render() {
-        return (
-            <>
-                <svg className="draggable" x={this.props.keyframePoint.x} y={this.props.keyframePoint.y} style={{ overflow: 'visible', cursor: 'pointer' }} >
-                    <image data-id={this.props.id} className="draggable" x="-1" y="-1.5" width="3" height="3" href={this.props.selected ? keySelected : keyInactive} onClick={() => this.select()} />
-                </svg>
-                {this.props.leftControlPoint && <AnchorSvgPoint type="left" index={this.props.id} control={this.props.leftControlPoint} anchor={this.props.keyframePoint} active={this.props.selected} selected={this.props.isLeftActive} selectControlPoint={(type: string) => this.props.selectedControlPoint(type, this.props.id)} />}
-                {this.props.rightControlPoint && <AnchorSvgPoint type="right" index={this.props.id} control={this.props.rightControlPoint} anchor={this.props.keyframePoint} active={this.props.selected} selected={this.props.isRightActive} selectControlPoint={(type: string) => this.props.selectedControlPoint(type, this.props.id)} />}
-            </>
-        )
-    }
-} 
+  render() {
+    return (
+      <>
+        <svg
+          className='draggable'
+          x={this.props.keyframePoint.x}
+          y={this.props.keyframePoint.y}
+          style={{ overflow: 'visible', cursor: 'pointer' }}
+        >
+          <image
+            data-id={this.props.id}
+            className='draggable'
+            x='-1'
+            y='-1.5'
+            width='3'
+            height='3'
+            href={this.props.selected ? keySelected : keyInactive}
+            onClick={(e) => this.select(e)}
+          />
+        </svg>
+        {this.props.leftControlPoint && (
+          <AnchorSvgPoint
+            type='left'
+            index={this.props.id}
+            control={this.props.leftControlPoint}
+            anchor={this.props.keyframePoint}
+            active={this.props.selected}
+            selected={this.props.isLeftActive}
+            selectControlPoint={(type: string) =>
+              this.props.selectedControlPoint(type, this.props.id)
+            }
+          />
+        )}
+        {this.props.rightControlPoint && (
+          <AnchorSvgPoint
+            type='right'
+            index={this.props.id}
+            control={this.props.rightControlPoint}
+            anchor={this.props.keyframePoint}
+            active={this.props.selected}
+            selected={this.props.isRightActive}
+            selectControlPoint={(type: string) =>
+              this.props.selectedControlPoint(type, this.props.id)
+            }
+          />
+        )}
+      </>
+    );
+  }
+}

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

@@ -7,8 +7,10 @@ interface ISvgDraggableAreaProps {
   updatePosition: (updatedKeyframe: IKeyframeSvgPoint, id: string) => void;
   scale: number;
   viewBoxScale: number;
-  selectKeyframe: (id: string) => void;
+  selectKeyframe: (id: string, multiselect: boolean) => void;
   selectedControlPoint: (type: string, id: string) => void;
+  deselectKeyframes: () => void;
+  removeSelectedKeyframes: (points: IKeyframeSvgPoint[]) => void;
 }
 
 export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps> {
@@ -61,7 +63,7 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps> {
     }
 
     if (e.target.classList.contains('pannable')) {
-      if (e.buttons === 1 && e.ctrlKey) {
+      if (e.buttons === 1 && e.shiftKey) {
         this._panStart.set(e.clientX, e.clientY);
       }
     }
@@ -83,8 +85,10 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps> {
           // Check for NaN values here.
           if (this._isCurrentPointControl === 'left') {
             point.leftControlPoint = coord;
+            point.isLeftActive = true;
           } else if (this._isCurrentPointControl === 'right') {
             point.rightControlPoint = coord;
+            point.isRightActive = true;
           } else {
             point.keyframePoint = coord;
           }
@@ -191,11 +195,36 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps> {
     if (e.keyCode === 17) {
       this._draggableArea.current?.style.setProperty('cursor', 'initial');
     }
+
+    if (e.keyCode === 8) {
+      const pointsToDelete = this.props.keyframeSvgPoints.filter(
+        (kf) => kf.selected
+      );
+      this.props.removeSelectedKeyframes(pointsToDelete);
+    }
   }
 
   focus(e: React.MouseEvent<SVGSVGElement>) {
     e.preventDefault();
     this._draggableArea.current?.focus();
+
+    if ((e.target as SVGSVGElement).className.baseVal == 'linear pannable') {
+      if (this.isControlPointActive()) {
+        this.props.deselectKeyframes();
+      }
+    }
+  }
+
+  isControlPointActive() {
+    const activeControlPoints = this.props.keyframeSvgPoints.filter(
+      (x) => x.isLeftActive || x.isRightActive
+    );
+    if (activeControlPoints.length !== 0) {
+      return false;
+    } else {
+      return true;
+    }
+    console.log(activeControlPoints);
   }
 
   render() {
@@ -232,7 +261,9 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps> {
               selectedControlPoint={(type: string, id: string) =>
                 this.props.selectedControlPoint(type, id)
               }
-              selectKeyframe={(id: string) => this.props.selectKeyframe(id)}
+              selectKeyframe={(id: string, multiselect: boolean) =>
+                this.props.selectKeyframe(id, multiselect)
+              }
             />
           ))}
         </svg>

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

@@ -71,11 +71,15 @@ export class Timeline extends React.Component<
 
   calculateScrollWidth(start: number, end: number) {
     if (this._scrollContainer.current && this.props.animationLimit !== 0) {
-      const containerWidth = this._scrollContainer.current.clientWidth;
+      const containerWidth = this._scrollContainer.current.clientWidth - 6;
       const scrollFrameLimit = this.props.animationLimit;
       const scrollFrameLength = end - start;
-      const widthPercentage = (scrollFrameLength * 100) / scrollFrameLimit;
-      const scrollPixelWidth = (widthPercentage * containerWidth) / 100;
+      const widthPercentage = Math.round(
+        (scrollFrameLength * 100) / scrollFrameLimit
+      );
+      const scrollPixelWidth = Math.round(
+        (widthPercentage * containerWidth) / 100
+      );
       if (scrollPixelWidth === Infinity || scrollPixelWidth > containerWidth) {
         return containerWidth;
       }
@@ -312,7 +316,7 @@ export class Timeline extends React.Component<
       const scrollContainerWith = this._scrollContainer.current.clientWidth;
       const startPixel = moved - 233;
       const limitRight =
-        scrollContainerWith - (this.state.scrollWidth || 0) - 5;
+        scrollContainerWith - (this.state.scrollWidth || 0) - 3;
 
       if (moved > 233 && startPixel < limitRight) {
         this._scrollbarHandle.current.style.left = moved + 'px';
@@ -346,11 +350,17 @@ export class Timeline extends React.Component<
       const frameChange = (resizePercentage * this.state.end) / 100;
       const framesTo = Math.round(frameChange);
 
-      this.setState({
-        end: framesTo,
-        scrollWidth: this.calculateScrollWidth(this.state.start, framesTo),
-        selectionLength: this.range(this.state.start, framesTo),
-      });
+      if (framesTo <= this.state.start + 20) {
+        console.log('broke');
+      } else {
+        if (framesTo <= this.props.animationLimit) {
+          this.setState({
+            end: framesTo,
+            scrollWidth: this.calculateScrollWidth(this.state.start, framesTo),
+            selectionLength: this.range(this.state.start, framesTo),
+          });
+        }
+      }
     }
   }
 
@@ -365,21 +375,30 @@ export class Timeline extends React.Component<
 
       const frameChange = (resizePercentage * this.state.end) / 100;
 
-      let framesTo;
+      let framesTo: number;
       if (Math.sign(moving) === 1) {
         framesTo = this.state.start + Math.round(frameChange);
       } else {
         framesTo = this.state.start - Math.round(frameChange);
       }
-      let Toleft = framesTo * pixelFrameRatio + 233;
 
-      this._scrollbarHandle.current.style.left = Toleft + 'px';
-
-      this.setState({
-        start: framesTo,
-        scrollWidth: this.calculateScrollWidth(framesTo, this.state.end),
-        selectionLength: this.range(framesTo, this.state.end),
-      });
+      if (framesTo >= this.state.end - 20) {
+        console.log('broke');
+      } else {
+        this.setState(
+          {
+            start: framesTo,
+            scrollWidth: this.calculateScrollWidth(framesTo, this.state.end),
+            selectionLength: this.range(framesTo, this.state.end),
+          },
+          () => {
+            let Toleft = framesTo * pixelFrameRatio + 233;
+            if (this._scrollbarHandle.current) {
+              this._scrollbarHandle.current.style.left = Toleft + 'px';
+            }
+          }
+        );
+      }
     }
   }