Merge pull request #8189 from BabylonJS/master

Nightly

dist/preview release/inspector/babylon.inspector.d.ts

@@ -546,6 +546,8 @@ declare module INSPECTOR {
     interface ISvgDraggableAreaProps {
         keyframeSvgPoints: IKeyframeSvgPoint[];
         updatePosition: (updatedKeyframe: IKeyframeSvgPoint, index: number) => void;
+        scale: number;
+        viewBoxScale: number;
     }
     export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps> {
         private _active;
@@ -554,6 +556,7 @@ declare module INSPECTOR {
         private _draggableArea;
         private _panStart;
         private _panStop;
+        private _width;
         constructor(props: ISvgDraggableAreaProps);
         componentDidMount(): void;
         dragStart(e: React.TouchEvent<SVGSVGElement>): void;
@@ -627,6 +630,7 @@ declare module INSPECTOR {
     }
     interface ICanvasAxis {
         value: number;
+        label: number;
     }
     export class AnimationCurveEditorComponent extends React.Component<IAnimationCurveEditorComponentProps, {
         animations: BABYLON.Animation[];
@@ -640,11 +644,13 @@ declare module INSPECTOR {
         currentFrame: number;
         currentValue: number;
         frameAxisLength: ICanvasAxis[];
+        valueAxisLength: ICanvasAxis[];
         flatTangent: boolean;
+        scale: number;
+        playheadOffset: number;
     }> {
-        readonly _heightScale: number;
+        private _heightScale;
         readonly _canvasLength: number;
-        private _playheadOffset;
         private _newAnimations;
         private _svgKeyframes;
         private _frames;
@@ -652,6 +658,9 @@ declare module INSPECTOR {
         private _graphCanvas;
         constructor(props: IAnimationCurveEditorComponentProps);
         componentDidMount(): void;
+        resetPlayheadOffset(): void;
+        setAxesLength(): void;
+        getValueLabel(i: number): number;
         handleNameChange(event: React.ChangeEvent<HTMLInputElement>): void;
         handleValueChange(event: React.ChangeEvent<HTMLInputElement>): void;
         handleTypeChange(event: React.ChangeEvent<HTMLSelectElement>): void;
@@ -690,6 +699,7 @@ declare module INSPECTOR {
         interpolateControlPoints(p0: BABYLON.Vector2, p1: BABYLON.Vector2, u: number, p2: BABYLON.Vector2, v: number, p3: BABYLON.Vector2): BABYLON.Vector2[] | undefined;
         changeCurrentFrame(frame: number): void;
         setFlatTangent(): void;
+        zoom(e: React.WheelEvent<HTMLDivElement>): void;
         render(): JSX.Element;
     }
 }

dist/preview release/inspector/babylon.inspector.module.d.ts

@@ -622,6 +622,8 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
     interface ISvgDraggableAreaProps {
         keyframeSvgPoints: IKeyframeSvgPoint[];
         updatePosition: (updatedKeyframe: IKeyframeSvgPoint, index: number) => void;
+        scale: number;
+        viewBoxScale: number;
     }
     export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps> {
         private _active;
@@ -630,6 +632,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         private _draggableArea;
         private _panStart;
         private _panStop;
+        private _width;
         constructor(props: ISvgDraggableAreaProps);
         componentDidMount(): void;
         dragStart(e: React.TouchEvent<SVGSVGElement>): void;
@@ -715,6 +718,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
     }
     interface ICanvasAxis {
         value: number;
+        label: number;
     }
     export class AnimationCurveEditorComponent extends React.Component<IAnimationCurveEditorComponentProps, {
         animations: Animation[];
@@ -728,11 +732,13 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         currentFrame: number;
         currentValue: number;
         frameAxisLength: ICanvasAxis[];
+        valueAxisLength: ICanvasAxis[];
         flatTangent: boolean;
+        scale: number;
+        playheadOffset: number;
     }> {
-        readonly _heightScale: number;
+        private _heightScale;
         readonly _canvasLength: number;
-        private _playheadOffset;
         private _newAnimations;
         private _svgKeyframes;
         private _frames;
@@ -740,6 +746,9 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         private _graphCanvas;
         constructor(props: IAnimationCurveEditorComponentProps);
         componentDidMount(): void;
+        resetPlayheadOffset(): void;
+        setAxesLength(): void;
+        getValueLabel(i: number): number;
         handleNameChange(event: React.ChangeEvent<HTMLInputElement>): void;
         handleValueChange(event: React.ChangeEvent<HTMLInputElement>): void;
         handleTypeChange(event: React.ChangeEvent<HTMLSelectElement>): void;
@@ -778,6 +787,7 @@ declare module "babylonjs-inspector/components/actionTabs/tabs/propertyGrids/ani
         interpolateControlPoints(p0: Vector2, p1: Vector2, u: number, p2: Vector2, v: number, p3: Vector2): Vector2[] | undefined;
         changeCurrentFrame(frame: number): void;
         setFlatTangent(): void;
+        zoom(e: React.WheelEvent<HTMLDivElement>): void;
         render(): JSX.Element;
     }
 }
@@ -3648,6 +3658,8 @@ declare module INSPECTOR {
     interface ISvgDraggableAreaProps {
         keyframeSvgPoints: IKeyframeSvgPoint[];
         updatePosition: (updatedKeyframe: IKeyframeSvgPoint, index: number) => void;
+        scale: number;
+        viewBoxScale: number;
     }
     export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps> {
         private _active;
@@ -3656,6 +3668,7 @@ declare module INSPECTOR {
         private _draggableArea;
         private _panStart;
         private _panStop;
+        private _width;
         constructor(props: ISvgDraggableAreaProps);
         componentDidMount(): void;
         dragStart(e: React.TouchEvent<SVGSVGElement>): void;
@@ -3729,6 +3742,7 @@ declare module INSPECTOR {
     }
     interface ICanvasAxis {
         value: number;
+        label: number;
     }
     export class AnimationCurveEditorComponent extends React.Component<IAnimationCurveEditorComponentProps, {
         animations: BABYLON.Animation[];
@@ -3742,11 +3756,13 @@ declare module INSPECTOR {
         currentFrame: number;
         currentValue: number;
         frameAxisLength: ICanvasAxis[];
+        valueAxisLength: ICanvasAxis[];
         flatTangent: boolean;
+        scale: number;
+        playheadOffset: number;
     }> {
-        readonly _heightScale: number;
+        private _heightScale;
         readonly _canvasLength: number;
-        private _playheadOffset;
         private _newAnimations;
         private _svgKeyframes;
         private _frames;
@@ -3754,6 +3770,9 @@ declare module INSPECTOR {
         private _graphCanvas;
         constructor(props: IAnimationCurveEditorComponentProps);
         componentDidMount(): void;
+        resetPlayheadOffset(): void;
+        setAxesLength(): void;
+        getValueLabel(i: number): number;
         handleNameChange(event: React.ChangeEvent<HTMLInputElement>): void;
         handleValueChange(event: React.ChangeEvent<HTMLInputElement>): void;
         handleTypeChange(event: React.ChangeEvent<HTMLSelectElement>): void;
@@ -3792,6 +3811,7 @@ declare module INSPECTOR {
         interpolateControlPoints(p0: BABYLON.Vector2, p1: BABYLON.Vector2, u: number, p2: BABYLON.Vector2, v: number, p3: BABYLON.Vector2): BABYLON.Vector2[] | undefined;
         changeCurrentFrame(frame: number): void;
         setFlatTangent(): void;
+        zoom(e: React.WheelEvent<HTMLDivElement>): void;
         render(): JSX.Element;
     }
 }

dist/preview release/what's new.md

@@ -8,7 +8,7 @@
 - Added HDR texture filtering tools to the sandbox ([Sebavan](https://github.com/sebavan/))
 - Reflection probes can now be used to give accurate shading with PBR ([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 create and view selected entity's animations in the Inspector ([pixelspace](https://github.com/devpixelspace))
+- Added Curve editor to create and view entity's animations in the Inspector ([pixelspace](https://github.com/devpixelspace))
 - Added support in `ShadowGenerator` for fast fake soft transparent shadows ([Popov72](https://github.com/Popov72))
 
 ## Updates

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

@@ -168,11 +168,12 @@
             overflow-y: scroll;
             scroll-behavior: smooth;
             background-color: #444444;
+            height: 100%;
 
             .linear{
-                height: 360px;
                 overflow: visible;
-                border: 0px solid lightgrey;
+                border: 1px solid lightgrey;
+                height: 100%;
 
                 svg {
                     overflow: visible;

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

@@ -5,6 +5,8 @@ import { KeyframeSvgPoint, IKeyframeSvgPoint } from './keyframeSvgPoint';
 interface ISvgDraggableAreaProps {
     keyframeSvgPoints: IKeyframeSvgPoint[];
     updatePosition: (updatedKeyframe: IKeyframeSvgPoint, index: number) => void;
+    scale: number;
+    viewBoxScale: number;
 }
 
 export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
@@ -15,6 +17,7 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
     private _draggableArea: React.RefObject<SVGSVGElement>;
     private _panStart: Vector2;
     private _panStop: Vector2;
+    private _width: number;
 
     constructor(props: ISvgDraggableAreaProps) {
         super(props);
@@ -28,6 +31,11 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
     componentDidMount() {
         this._draggableArea.current?.addEventListener("keydown", this.keyDown.bind(this));
         this._draggableArea.current?.addEventListener("keyup", this.keyUp.bind(this));
+        setTimeout(() => {
+            this._width = this._draggableArea.current?.clientWidth !== undefined ? this._draggableArea.current?.clientWidth : 0;
+            console.log(this._width);
+        }, 500);
+        
     }  
 
     dragStart(e: React.TouchEvent<SVGSVGElement>): void;
@@ -179,7 +187,7 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
     render() {
         return (
             <>
-                <svg className="linear pannable" ref={this._draggableArea}  tabIndex={0}
+                <svg className="linear pannable" ref={this._draggableArea}  tabIndex={0} 
 
                     onMouseMove={(e) => this.drag(e)}
                     onTouchMove={(e) => this.drag(e)}
@@ -192,7 +200,7 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
                     // Add way to add new keyframe
                     onClick={(e) => this.focus(e)}
 
-                    viewBox="0 0 200 100">
+                    viewBox={`0 0 ${Math.round(this.props.scale * 200)} ${Math.round(this.props.scale * 100)}`}>
 
                     {this.props.children}
                     {this.props.keyframeSvgPoints.map((keyframe, i) =>