[InspectorV2] Particle attractor PR comments

packages/dev/inspector-v2/src/components/properties/particles/attractor.tsx

@@ -69,9 +69,8 @@ export const AttractorComponent: FunctionComponent<AttractorProps> = (props) =>
     const classes = useAttractorStyles();
     const [shown, setShown] = useState(true);
 
-    // Create observer and cleanup on unmount (we can't use useResource since Observer is not an IDisposable)
+    // Create observer and cleanup on unmount via useEffect below (we can't use useResource since Observer is not an IDisposable)
     const sceneOnAfterRenderObserverRef = useRef<Observer<Scene>>();
-    useEffect(() => () => sceneOnAfterRenderObserverRef.current?.remove(), []);
 
     // We only want to recreate the impostor mesh and associated if id, scene, or attractor/impostor changes
     const impostor = useResource(useCallback(() => CreateImpostor(id, scene, attractor, impostorScale, impostorMaterial), [id, scene, attractor]));
@@ -87,11 +86,15 @@ export const AttractorComponent: FunctionComponent<AttractorProps> = (props) =>
                 label.render(scene.getViewMatrix(), scene.getProjectionMatrix());
             }
         });
+        return () => {
+            sceneOnAfterRenderObserverRef.current?.remove();
+        };
     }, [impostor, label, props.impostorColor]);
 
+    // If impostor or impostorScale change, update impostor scaling
     useEffect(() => {
         impostor.scaling.setAll(impostorScale);
-    }, [impostorScale]);
+    }, [impostor, impostorScale]);
 
     return (
         <div className={classes.container}>

packages/dev/inspector-v2/src/components/properties/particles/attractorList.tsx

@@ -15,7 +15,6 @@ import { useResource } from "../../../hooks/resourceHooks";
 import { AttractorComponent } from "./attractor";
 type AttractorListProps = {
     scene: Scene;
-    gizmoManager: GizmoManager;
     attractors: Array<Attractor>;
     system: ParticleSystem;
 };
@@ -52,7 +51,7 @@ export const AttractorList: FunctionComponent<AttractorListProps> = (props) => {
 
     // All impostors share a scale and material/color (for now!)
     const [impostorScale, setImpostorScale] = useState(1);
-    const [impostorColor, setImpostorColor] = useState<Color3>(() => Color3.White());
+    const [impostorColor, setImpostorColor] = useState(() => Color3.White());
     const impostorMaterial = useResource(useCallback(() => CreateSharedMaterial(scene, impostorColor), [scene]));
 
     // All impostors share a gizmoManager. controlledImpostor state ensures re-render of children so that their gizmoEnabled toggle is accurate

packages/dev/inspector-v2/src/components/properties/particles/particleSystemProperties.tsx

@@ -1,5 +1,4 @@
 import type { FactorGradient, ColorGradient as Color4Gradient, IValueGradient, ParticleSystem } from "core/index";
-import { GizmoManager } from "core/Gizmos";
 
 import { Color3, Color4 } from "core/Maths/math.color";
 import { useCallback } from "react";
@@ -72,13 +71,12 @@ export const ParticleSystemColorProperties: FunctionComponent<{ particleSystem:
 
 export const ParticleSystemAttractorProperties: FunctionComponent<{ particleSystem: ParticleSystem }> = (props) => {
     const { particleSystem: system } = props;
-    const gizmoManager = new GizmoManager(system.getScene()!);
 
     const attractors = useParticleSystemProperty(system, "attractors", "property", "addAttractor", "removeAttractor");
 
     return (
         <>
-            <AttractorList gizmoManager={gizmoManager} attractors={attractors} scene={system.getScene()!} system={system} />
+            <AttractorList attractors={attractors} scene={system.getScene()!} system={system} />
         </>
     );
 };