Panning X Y

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

@@ -351,17 +351,6 @@ export class AddAnimation extends React.Component<
         style={{ display: this.props.isOpen ? 'block' : 'none' }}
       >
         <div className='sub-content'>
-          {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
@@ -423,6 +412,12 @@ export class AddAnimation extends React.Component<
                   : () => this.addAnimation()
               }
             />
+            {this.props.entity.animations?.length !== 0 ? (
+              <ButtonLineComponent
+                label={'Cancel'}
+                onClick={this.props.close}
+              />
+            ) : null}
           </div>
         </div>
       </div>

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

@@ -71,6 +71,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     fps: number;
     isLooping: boolean;
     panningY: number;
+    panningX: number;
   }
 > {
   private _snippetUrl = 'https://snippet.babylonjs.com';
@@ -171,6 +172,7 @@ export class AnimationCurveEditorComponent extends React.Component<
       fps: 60,
       isLooping: true,
       panningY: 0,
+      panningX: 0,
     };
   }
 
@@ -215,6 +217,23 @@ export class AnimationCurveEditorComponent extends React.Component<
     return [...halfNegative, ...halfPositive];
   }
 
+  setValueLines() {
+    const initialValues = new Array(10).fill(0).map((s, i) => {
+      return { value: i * 10, label: -i };
+    });
+
+    const valueHeight = Math.abs(Math.round(this.state.panningY / 10));
+    const sign = Math.sign(this.state.panningY);
+
+    const pannedValues = new Array(valueHeight).fill(0).map((s, i) => {
+      return sign === -1
+        ? { value: -i * 10, label: i }
+        : { value: (i + 10) * 10, label: (i + 10) * -1 };
+    });
+
+    return [...initialValues, ...pannedValues];
+  }
+
   setAxesLength() {
     let length = this.state.animationLimit * 2;
     let newlength = Math.round(this._canvasLength * this.state.scale);
@@ -539,29 +558,50 @@ export class AnimationCurveEditorComponent extends React.Component<
    */
   handleFrameChange(event: React.ChangeEvent<HTMLInputElement>) {
     event.preventDefault();
-    this.changeCurrentFrame(parseInt(event.target.value));
+    let frame = 0;
+
+    if (
+      isNaN(event.target.valueAsNumber) ||
+      event.target.value.indexOf('.') !== -1
+    ) {
+      this.setState({
+        notification: 'Frame input only accepts integer values',
+      });
+    } else {
+      frame = parseInt(event.target.value);
+      this.changeCurrentFrame(frame);
+    }
   }
 
   handleValueChange(event: React.ChangeEvent<HTMLInputElement>) {
     event.preventDefault();
-    this.setState({ currentValue: parseFloat(event.target.value) }, () => {
-      if (this.state.selected !== null) {
-        let animation = this.state.selected;
-        let keys = animation.getKeys();
-
-        let isKeyframe = keys.find((k) => k.frame === this.state.currentFrame);
-        if (isKeyframe) {
-          let updatedKeys = keys.map((k) => {
-            if (k.frame === this.state.currentFrame) {
-              k.value = this.state.currentValue;
-            }
-            return k;
-          });
-          this.state.selected.setKeys(updatedKeys);
-          this.selectAnimation(animation);
+
+    if (isNaN(event.target.valueAsNumber)) {
+      this.setState({
+        notification: 'Value input only numeric values',
+      });
+    } else {
+      this.setState({ currentValue: parseFloat(event.target.value) }, () => {
+        if (this.state.selected !== null) {
+          let animation = this.state.selected;
+          let keys = animation.getKeys();
+
+          let isKeyframe = keys.find(
+            (k) => k.frame === this.state.currentFrame
+          );
+          if (isKeyframe) {
+            let updatedKeys = keys.map((k) => {
+              if (k.frame === this.state.currentFrame) {
+                k.value = this.state.currentValue;
+              }
+              return k;
+            });
+            this.state.selected.setKeys(updatedKeys);
+            this.selectAnimation(animation);
+          }
         }
-      }
-    });
+      });
+    }
   }
 
   setFlatTangent() {
@@ -1574,6 +1614,9 @@ export class AnimationCurveEditorComponent extends React.Component<
                   panningY={(panningY: number) => {
                     this.setState({ panningY: panningY });
                   }}
+                  panningX={(panningX: number) => {
+                    this.setState({ panningX: panningX });
+                  }}
                 >
                   {/* Multiple Curves  */}
                   {this.state.selectedPathData?.map((curve, i) => (
@@ -1591,7 +1634,7 @@ export class AnimationCurveEditorComponent extends React.Component<
                     ></path>
                   ))}
 
-                  {this.state.valueAxisLength.map((f, i) => {
+                  {/* {this.state.valueAxisLength.map((f, i) => {
                     return (
                       <svg key={i}>
                         <text
@@ -1611,6 +1654,32 @@ export class AnimationCurveEditorComponent extends React.Component<
                         ></line>
                       </svg>
                     );
+                  })} */}
+
+                  {this.setValueLines().map((line, i) => {
+                    return (
+                      <text
+                        x={this.state.panningX - 5}
+                        y={line.value}
+                        dx='0'
+                        dy='1'
+                        style={{ fontSize: `${0.2 * this.state.scale}em` }}
+                      >
+                        {line.label}
+                      </text>
+                    );
+                  })}
+
+                  {this.setValueLines().map((line, i) => {
+                    return (
+                      <line
+                        key={i}
+                        x1={-((this.state.frameAxisLength.length * 10) / 2)}
+                        y1={line.value}
+                        x2={this.state.frameAxisLength.length * 10}
+                        y2={line.value}
+                      ></line>
+                    );
                   })}
 
                   <rect

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

@@ -950,16 +950,17 @@
 
           .confirm-buttons {
             grid-column-start: 2;
+            column-count: 2;
 
             .buttonLine {
               button {
-                width: 60px;
+                width: 52px;
                 height: 20px;
                 background-color: rgb(68, 68, 68);
                 color: white;
                 font-size: 12px;
                 line-height: 11px;
-                margin: 5px;
+                margin: 4px;
                 font-size: 10px;
                 font-family: acumin-pro-condensed;
                 border: none;
@@ -1209,7 +1210,6 @@
 
   .buttonLine {
     height: 30px;
-    display: grid;
     align-items: center;
     justify-items: stretch;
 

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

@@ -230,7 +230,7 @@ export class EditorControls extends React.Component<
           <AddAnimation
             isOpen={this.state.isAnimationTabOpen}
             close={() => {
-              this.setState({ isAnimationTabOpen: false });
+              this.setState({ isAnimationTabOpen: false, isEditTabOpen: true });
             }}
             entity={this.props.entity as IAnimatable}
             setNotificationMessage={(message: string) => {

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

@@ -45,9 +45,9 @@ export class GraphActionsBar extends React.Component<IGraphActionsBarProps> {
           <div className='action-input'>
             <input
               type='number'
-              value={this.props.currentValue.toFixed(3)}
+              value={this.props.currentValue}
               onChange={this.props.handleValueChange}
-              step='0.001'
+              step='0.1'
             />
           </div>
           <IconButtonLineComponent

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

@@ -12,6 +12,7 @@ interface ISvgDraggableAreaProps {
   deselectKeyframes: () => void;
   removeSelectedKeyframes: (points: IKeyframeSvgPoint[]) => void;
   panningY: (panningY: number) => void;
+  panningX: (panningX: number) => void;
 }
 
 export class SvgDraggableArea extends React.Component<
@@ -155,6 +156,9 @@ export class SvgDraggableArea extends React.Component<
       panY: Math.round(newY),
     });
     this.props.panningY(Math.round(newY));
+    this.props.panningX(Math.round(newX));
+
+    console.log(Math.round(newX));
   }
 
   panTo(direction: string, value: number) {
@@ -223,7 +227,7 @@ export class SvgDraggableArea extends React.Component<
         <svg
           style={{ width: 30, height: 364, position: 'absolute', zIndex: 1 }}
         >
-          <rect x='0' y='0' width='30px' height='100%' fill='#222'></rect>
+          <rect x='0' y='0' width='30px' height='100%' fill='#ffffff1c'></rect>
         </svg>
         <svg
           className='linear pannable'
@@ -242,6 +246,7 @@ export class SvgDraggableArea extends React.Component<
           )} ${Math.round(this.props.scale * 100)}`}
         >
           {this.props.children}
+
           {this.props.keyframeSvgPoints.map((keyframe, i) => (
             <KeyframeSvgPoint
               key={`${keyframe.id}_${i}`}