Merge pull request #8247 from toledoal/handles

Handles

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))
 - 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/anchorSvgPoint.tsx

@@ -9,6 +9,7 @@ interface IAnchorSvgPointProps {
    type: string;
    index: string;
    selected: boolean;
+   selectControlPoint: (id: string) => void;
 }
 
 
@@ -16,14 +17,18 @@ export class AnchorSvgPoint extends React.Component<IAnchorSvgPointProps>{
     constructor(props: IAnchorSvgPointProps) {
         super(props);
     }
+
+    select(){
+        this.props.selectControlPoint(this.props.type);
+    }
     
     render() {
         return (
         <>
-            <svg x={this.props.control.x} y={this.props.control.y} style={{overflow:'visible'}}>
-                <circle type={this.props.type} data-id={this.props.index} className={`draggable control-point ${this.props.active ? 'active' : ''}`} cx="0" cy="0"  r="2" stroke="none" strokeWidth="0" fill={this.props.active ? "blue" : "black"}   />
+            <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="2" stroke="white" strokeWidth={this.props.selected ? 1 : 0}  fill={this.props.active ? "blue" : "black"}   />
             </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} stroke="green" strokeWidth="0.75" />
+            <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" />
         </>
         )
     }

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

@@ -152,13 +152,14 @@
                     p {
                         font-weight: bolder;
                         font-variant: all-small-caps;
+                        display: inline;
                     }
                     cursor: pointer;
                     &:before {
                         content: '';
                         display: inline-block;
-                        height: 1em;
-                        width: 1em;
+                        height: 0.7em;
+                        width: 0.7em;
                         background-size: contain;
                         background-repeat: no-repeat;
                         margin-right:0.5em; 

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

@@ -8,6 +8,8 @@ interface IGraphActionsBarProps {
    handleValueChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    handleFrameChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
    flatTangent: () => void;
+   brokeTangents: () => void;
+   brokenMode: boolean;
    currentValue: number;
    currentFrame: number;
 }
@@ -30,7 +32,8 @@ export class GraphActionsBar extends React.Component<IGraphActionsBarProps>{
                </div>
               <ButtonLineComponent label={"Add Keyframe"} onClick={this.props.addKeyframe} />
               <ButtonLineComponent label={"Remove Keyframe"} onClick={this.props.removeKeyframe} />
-              <ButtonLineComponent label={"Flat Tangent"} onClick={this.props.flatTangent} />
+              <ButtonLineComponent label={"Flat Tangents"} onClick={this.props.flatTangent} />
+              <ButtonLineComponent label={this.props.brokenMode ? "Broken Mode On" : "Broken Mode Off" } onClick={this.props.brokeTangents} />
            </div>
         )
     }

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

@@ -7,6 +7,9 @@ export interface IKeyframeSvgPoint {
     rightControlPoint: Vector2 | null;
     leftControlPoint: Vector2 | null;
     id: string;
+    selected: boolean;
+    isLeftActive: boolean;
+    isRightActive: boolean;
 }
 
 interface IKeyframeSvgPointProps {
@@ -14,6 +17,11 @@ interface IKeyframeSvgPointProps {
     leftControlPoint: Vector2 | null;
     rightControlPoint: Vector2 | null;
     id: string;
+    selected: boolean;
+    selectKeyframe: (id: string) => void;
+    selectedControlPoint: (type: string, id: string) => void;
+    isLeftActive: boolean;
+    isRightActive: boolean;
 }
 
 export class KeyframeSvgPoint extends React.Component<IKeyframeSvgPointProps>{ 
@@ -22,14 +30,18 @@ export class KeyframeSvgPoint extends React.Component<IKeyframeSvgPointProps>{
         super(props);
     }
 
+    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'}}>
-                    <circle data-id={this.props.id} className="draggable" cx="0" cy="0"  r="2" stroke="none" strokeWidth="0" fill="red" />
+                <svg className="draggable" x={this.props.keyframePoint.x} y={this.props.keyframePoint.y} style={{overflow:'visible', cursor: 'pointer'}} >
+                    <circle data-id={this.props.id} className="draggable" cx="0" cy="0"  r="2" stroke="none" strokeWidth="0" fill={this.props.selected ? "red" : "black"} onClick={() => this.select()}/>
                 </svg>
-               { this.props.leftControlPoint && <AnchorSvgPoint type="left" index={this.props.id} control={this.props.leftControlPoint} anchor={this.props.keyframePoint} active={false} selected={false}/>} 
-               { this.props.rightControlPoint &&  <AnchorSvgPoint type="right" index={this.props.id} control={this.props.rightControlPoint} anchor={this.props.keyframePoint} active={false} selected={false}/>}
+               { 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,6 +7,8 @@ interface ISvgDraggableAreaProps {
     updatePosition: (updatedKeyframe: IKeyframeSvgPoint, index: number) => void;
     scale: number;
     viewBoxScale: number;
+    selectKeyframe: (id: string) => void;
+    selectedControlPoint: (type: string, id: string) => void;
 }
 
 export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
@@ -35,8 +37,7 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
             this._width = this._draggableArea.current?.clientWidth !== undefined ? this._draggableArea.current?.clientWidth : 0;
             console.log(this._width);
         }, 500);
-        
-    }  
+    }
 
     dragStart(e: React.TouchEvent<SVGSVGElement>): void;
     dragStart(e: React.MouseEvent<SVGSVGElement, MouseEvent>): void;
@@ -187,7 +188,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)}
@@ -204,7 +205,17 @@ export class SvgDraggableArea extends React.Component<ISvgDraggableAreaProps>{
 
                     {this.props.children}
                     {this.props.keyframeSvgPoints.map((keyframe, i) =>
-                        <KeyframeSvgPoint key={i} id={i.toString()} keyframePoint={keyframe.keyframePoint} leftControlPoint={keyframe.leftControlPoint} rightControlPoint={keyframe.rightControlPoint} />
+                        <KeyframeSvgPoint
+                            key={i}
+                            id={i.toString()}
+                            keyframePoint={keyframe.keyframePoint} 
+                            leftControlPoint={keyframe.leftControlPoint} 
+                            rightControlPoint={keyframe.rightControlPoint}
+                            isLeftActive={keyframe.isLeftActive}
+                            isRightActive={keyframe.isRightActive}
+                            selected={keyframe.selected} 
+                            selectedControlPoint={(type: string, id: string) => this.props.selectedControlPoint(type, id)}
+                            selectKeyframe={(id: string) => this.props.selectKeyframe(id)} />
                     )}
                 </svg>
             </>)