Merge pull request #8474 from toledoal/canvas-playhead

Canvas Repositioning

dist/preview release/what's new.md

@@ -9,7 +9,7 @@
 - Reflection probes can now be used to give accurate shading with PBR ([CraigFeldpsar](https://github.com/craigfeldspar) and ([Sebavan](https://github.com/sebavan/)))
 - Added SubSurfaceScattering on PBR materials ([CraigFeldpsar](https://github.com/craigfeldspar) and ([Sebavan](https://github.com/sebavan/)))
 - Added editing of PBR materials, Post processes and Particle fragment shaders in the node material editor ([Popov72](https://github.com/Popov72))
-- Added Curve editor to manage selected entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
+- Added Curve editor to manage entity's animations and edit animation groups in Inspector ([pixelspace](https://github.com/devpixelspace))
 - Added support in `ShadowGenerator` for fast fake soft transparent shadows ([Popov72](https://github.com/Popov72))
 - Added support for **thin instances** for faster mesh instances. [Doc](https://doc.babylonjs.com/how_to/how_to_use_thininstances) ([Popov72](https://github.com/Popov72))
 

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

@@ -72,6 +72,7 @@ export class AnimationCurveEditorComponent extends React.Component<
     isLooping: boolean;
     panningY: number;
     panningX: number;
+    repositionCanvas: boolean;
   }
 > {
   private _snippetUrl = 'https://snippet.babylonjs.com';
@@ -173,6 +174,7 @@ export class AnimationCurveEditorComponent extends React.Component<
       isLooping: true,
       panningY: 0,
       panningX: 0,
+      repositionCanvas: false,
     };
   }
 
@@ -1406,6 +1408,10 @@ export class AnimationCurveEditorComponent extends React.Component<
     }
   }
 
+  setCanvasPosition(frame: number) {
+    this.setState({ panningX: (frame - 10) * 10, repositionCanvas: true });
+  }
+
   setCurrentFrame(direction: number) {
     this.setState({
       currentFrame: this.state.currentFrame + direction,
@@ -1603,6 +1609,11 @@ export class AnimationCurveEditorComponent extends React.Component<
                   setCurrentFrame={(direction: number) =>
                     this.setCurrentFrame(direction)
                   }
+                  positionCanvas={this.state.panningX}
+                  repositionCanvas={this.state.repositionCanvas}
+                  canvasPositionEnded={() =>
+                    this.setState({ repositionCanvas: false })
+                  }
                 >
                   {/* Multiple Curves  */}
                   {this.state.selectedPathData?.map((curve, i) => (
@@ -1736,6 +1747,9 @@ export class AnimationCurveEditorComponent extends React.Component<
               keyframes={this.state.selected && this.state.selected.getKeys()}
               selected={this.state.selected && this.state.selected.getKeys()[0]}
               fps={this.state.fps}
+              repositionCanvas={(frame: number) =>
+                this.setCanvasPosition(frame)
+              }
             ></Timeline>
           </div>
         </div>

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

@@ -32,7 +32,7 @@ export class GraphActionsBar extends React.Component<IGraphActionsBarProps> {
         </div>
         <div
           className='buttons-container'
-          style={{ display: this.props.enabled ? 'flex' : 'none' }}
+          style={{ pointerEvents: this.props.enabled ? 'all' : 'none' }}
         >
           <div className='action-input'>
             <input

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

@@ -14,6 +14,9 @@ interface ISvgDraggableAreaProps {
   panningY: (panningY: number) => void;
   panningX: (panningX: number) => void;
   setCurrentFrame: (direction: number) => void;
+  positionCanvas?: number;
+  repositionCanvas?: boolean;
+  canvasPositionEnded: () => void;
 }
 
 export class SvgDraggableArea extends React.Component<
@@ -56,6 +59,18 @@ export class SvgDraggableArea extends React.Component<
     }, 500);
   }
 
+  componentWillReceiveProps(newProps: ISvgDraggableAreaProps) {
+    if (
+      newProps.positionCanvas !== this.props.positionCanvas &&
+      newProps.positionCanvas !== undefined &&
+      newProps.repositionCanvas
+    ) {
+      this.setState({ panX: newProps.positionCanvas }, () => {
+        this.props.canvasPositionEnded();
+      });
+    }
+  }
+
   dragStart(e: React.TouchEvent<SVGSVGElement>): void;
   dragStart(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
   dragStart(e: any): void {

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

@@ -13,6 +13,7 @@ interface ITimelineProps {
   isPlaying: boolean;
   animationLimit: number;
   fps: number;
+  repositionCanvas: (frame: number) => void;
 }
 
 export class Timeline extends React.Component<
@@ -119,6 +120,7 @@ export class Timeline extends React.Component<
       );
       const frame = Math.round((event.clientX - 233) / unit) + this.state.start;
       this.props.onCurrentFrameChange(frame);
+      this.props.repositionCanvas(frame);
     }
   }