Merge pull request #8187 from toledoal/wheel-and-zoom

Wheel and zoom

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) =>