Skip to content

[Fluent, Inspectorv2] New gradient, list, and gradientList components; Add particleSystemProperties to inspectorv2 #16863

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Jul 10, 2025
Merged

[Fluent, Inspectorv2] New gradient, list, and gradientList components; Add particleSystemProperties to inspectorv2 #16863

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
7377969
fluent gradients for NME
Jul 7, 2025
cb26c86
add list, gradient, and gradientList components. add particleSystemPr…
Jul 9, 2025
2d33a6a
remove old lineList rename file
Jul 9, 2025
f5c759c
merge w master
Jul 9, 2025
40715c1
add syncedslider logic to updateOnlyOnRelease, ensure rerenders occur…
Jul 9, 2025
0281099
Merge branch 'master' of https://github.com/BabylonJS/Babylon.js into…
Jul 9, 2025
cfc3513
rename floatinput to numberinput
Jul 9, 2025
825dc0d
remove unused imports
Jul 9, 2025
e123a29
Delete packages/dev/sharedUiComponents/src/fluent/hoc/previewPanel.tsx
georginahalpern Jul 9, 2025
566edfb
pr comments
Jul 10, 2025
4c374c9
Merge branch 'fluentGradients' of https://github.com/georginahalpern/…
Jul 10, 2025
084e46b
merge
Jul 10, 2025
982b520
style change and import fix
Jul 10, 2025
e6c1ab8
synced slider
Jul 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/dev/inspector-v2/src/components/properties/lights/areaLightSetupProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { RectAreaLight } from "core/index";
import type { FunctionComponent } from "react";

import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
import { FloatInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";

import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
Expand All @@ -18,9 +18,9 @@ export const AreaLightSetupProperties: FunctionComponent<{ context: RectAreaLigh
<Color3PropertyLine label="Diffuse" value={diffuseColor} onChange={(val) => (areaLight.diffuse = val)} />
<Color3PropertyLine label="Specular" value={specularColor} onChange={(val) => (areaLight.specular = val)} />
<Vector3PropertyLine label="Position" value={position} onChange={(val) => (areaLight.position = val)} />
<BoundProperty component={FloatInputPropertyLine} label="Width" target={areaLight} propertyKey="width" />
<BoundProperty component={FloatInputPropertyLine} label="Height" target={areaLight} propertyKey="height" />
<BoundProperty component={FloatInputPropertyLine} label="Intensity" target={areaLight} propertyKey="intensity" />
<BoundProperty component={NumberInputPropertyLine} label="Width" target={areaLight} propertyKey="width" />
<BoundProperty component={NumberInputPropertyLine} label="Height" target={areaLight} propertyKey="height" />
<BoundProperty component={NumberInputPropertyLine} label="Intensity" target={areaLight} propertyKey="intensity" />
</>
);
};
4 changes: 2 additions & 2 deletions ...ges/dev/inspector-v2/src/components/properties/lights/directionalLightSetupProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { DirectionalLight } from "core/index";
import type { FunctionComponent } from "react";

import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
import { FloatInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";

import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
Expand All @@ -20,7 +20,7 @@ export const DirectionalLightSetupProperties: FunctionComponent<{ context: Direc
<Vector3PropertyLine label="Direction" value={direction} onChange={(val) => (directionalLight.direction = val)} />
<Color3PropertyLine label="Diffuse" value={diffuseColor} onChange={(val) => (directionalLight.diffuse = val)} />
<Color3PropertyLine label="Specular" value={specularColor} onChange={(val) => (directionalLight.specular = val)} />
<BoundProperty component={FloatInputPropertyLine} label="Intensity" target={directionalLight} propertyKey="intensity" />
<BoundProperty component={NumberInputPropertyLine} label="Intensity" target={directionalLight} propertyKey="intensity" />
</>
);
};
4 changes: 2 additions & 2 deletions ...ges/dev/inspector-v2/src/components/properties/lights/hemisphericLightSetupProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { HemisphericLight } from "core/index";
import type { FunctionComponent } from "react";

import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
import { FloatInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";

import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
Expand All @@ -18,7 +18,7 @@ export const HemisphericLightSetupProperties: FunctionComponent<{ context: Hemis
<Vector3PropertyLine label="Direction" value={direction} onChange={(val) => (hemisphericLight.direction = val)} />
<Color3PropertyLine label="Diffuse" value={diffuseColor} onChange={(val) => (hemisphericLight.diffuse = val)} />
<Color3PropertyLine label="Ground" value={groundColor} onChange={(val) => (hemisphericLight.groundColor = val)} />
<BoundProperty component={FloatInputPropertyLine} label="Intensity" target={hemisphericLight} propertyKey="intensity" />
<BoundProperty component={NumberInputPropertyLine} label="Intensity" target={hemisphericLight} propertyKey="intensity" />
</>
);
};
4 changes: 2 additions & 2 deletions packages/dev/inspector-v2/src/components/properties/lights/pointLightSetupProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import type { PointLight } from "core/index";
import type { FunctionComponent } from "react";

import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
import { FloatInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";

import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
Expand All @@ -18,7 +18,7 @@ export const PointLightSetupProperties: FunctionComponent<{ context: PointLight
<Color3PropertyLine label="Diffuse" value={diffuseColor} onChange={(val) => (pointLight.diffuse = val)} />
<Color3PropertyLine label="Specular" value={groundColor} onChange={(val) => (pointLight.specular = val)} />
<Vector3PropertyLine label="Position" value={position} onChange={(val) => (pointLight.position = val)} />
<BoundProperty component={FloatInputPropertyLine} label="Intensity" target={pointLight} propertyKey="intensity" />
<BoundProperty component={NumberInputPropertyLine} label="Intensity" target={pointLight} propertyKey="intensity" />
</>
);
};
6 changes: 3 additions & 3 deletions packages/dev/inspector-v2/src/components/properties/lights/shadowsSetupProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import type { FunctionComponent } from "react";

import { Collapse } from "@fluentui/react-motion-components-preview";

import { FloatInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";

import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/switchPropertyLine";
import { useProperty } from "../../../hooks/compoundPropertyHooks";
Expand All @@ -20,8 +20,8 @@ export const ShadowsSetupProperties: FunctionComponent<{ context: ShadowLight }>
<BoundProperty component={SwitchPropertyLine} label="Shadows Enabled" target={shadowLight} propertyKey="shadowEnabled" />
<Collapse visible={shadowsEnabled}>
<div>
<FloatInputPropertyLine label="Shadows Near Plane" value={shadowsMinZ ?? 0} onChange={(value) => (shadowLight.shadowMinZ = value)} />
<FloatInputPropertyLine label="Shadows Far Plane" value={shadowsMaxZ ?? 0} onChange={(value) => (shadowLight.shadowMaxZ = value)} />
<NumberInputPropertyLine label="Shadows Near Plane" value={shadowsMinZ ?? 0} onChange={(value) => (shadowLight.shadowMinZ = value)} />
<NumberInputPropertyLine label="Shadows Far Plane" value={shadowsMaxZ ?? 0} onChange={(value) => (shadowLight.shadowMaxZ = value)} />
</div>
</Collapse>
</>
Expand Down
4 changes: 2 additions & 2 deletions packages/dev/inspector-v2/src/components/properties/lights/spotLightSetupProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { FunctionComponent } from "react";

import { Tools } from "core/Misc/tools";
import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/colorPropertyLine";
import { FloatInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { SyncedSliderLine } from "shared-ui-components/fluent/hoc/syncedSliderLine";
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";

Expand Down Expand Up @@ -33,7 +33,7 @@ export const SpotLightSetupProperties: FunctionComponent<{ context: SpotLight }>
step={0.1}
onChange={(value) => (spotLight.innerAngle = Tools.ToRadians(value))}
/>
<FloatInputPropertyLine label="Exponent" value={exponent} onChange={(value) => (spotLight.exponent = value)} />
<NumberInputPropertyLine label="Exponent" value={exponent} onChange={(value) => (spotLight.exponent = value)} />
</>
);
};
78 changes: 78 additions & 0 deletions packages/dev/inspector-v2/src/components/properties/particleSystemProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import type { FactorGradient, ColorGradient as Color4Gradient, IParticleSystem, IValueGradient } from "core/index";

import { Color3, Color4 } from "core/Maths/math.color";
import { useCallback } from "react";
import type { FunctionComponent } from "react";

import { useInterceptObservable } from "../../hooks/instrumentationHooks";
import { useObservableState } from "../../hooks/observableHooks";
import { Color4GradientList, FactorGradientList } from "shared-ui-components/fluent/hoc/gradientList";

export const ParticleSystemProperties: FunctionComponent<{ particleSystem: IParticleSystem }> = (props) => {
const { particleSystem: system } = props;

// TODO-iv2: Perhaps a common enough pattern to create a custom hook
const emitRateGradients = useObservableState(
useCallback(() => {
const gradients = system.getEmitRateGradients();
return [...(gradients ?? [])];
}, [system]),
useInterceptObservable("function", system, "addEmitRateGradient"),
useInterceptObservable("function", system, "removeEmitRateGradient"),
useInterceptObservable("function", system, "forceRefreshGradients")
);

const colorGradients = useObservableState(
useCallback(() => {
const gradients = system.getColorGradients();
return [...(gradients ?? [])];
}, [system]),
useInterceptObservable("function", system, "addColorGradient"),
useInterceptObservable("function", system, "removeColorGradient"),
useInterceptObservable("function", system, "forceRefreshGradients")
);

return (
<>
{!system.isNodeGenerated && (
<FactorGradientList
gradients={emitRateGradients}
label="Emit rate gradient"
removeGradient={(gradient: IValueGradient) => {
system.removeEmitRateGradient(gradient.gradient);
system.forceRefreshGradients();
}}
addGradient={(gradient?: FactorGradient) => {
gradient ? system.addEmitRateGradient(gradient.gradient, gradient.factor1, gradient.factor2) : system.addEmitRateGradient(Math.random(), 50, 50);
system.forceRefreshGradients();
}}
onChange={(_gradient: FactorGradient) => {
system.forceRefreshGradients();
}}
/>
)}
{!system.isNodeGenerated && (
<Color4GradientList
gradients={colorGradients}
label="Color gradient"
removeGradient={(gradient: IValueGradient) => {
system.removeEmitRateGradient(gradient.gradient);
system.forceRefreshGradients();
}}
addGradient={(gradient?: Color4Gradient) => {
if (gradient) {
system.addColorGradient(gradient.gradient, gradient.color1, gradient.color2);
} else {
system.addColorGradient(0, Color4.FromColor3(Color3.Black()), Color4.FromColor3(Color3.Black()));
system.addColorGradient(1, Color4.FromColor3(Color3.White()), Color4.FromColor3(Color3.White()));
}
system.forceRefreshGradients();
}}
onChange={(_gradient: Color4Gradient) => {
system.forceRefreshGradients();
}}
/>
)}
</>
);
};
87 changes: 87 additions & 0 deletions packages/dev/inspector-v2/src/components/properties/particles/particleSystemProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
import type { FactorGradient, ColorGradient as Color4Gradient, IParticleSystem, IValueGradient } from "core/index";

import { Color3, Color4 } from "core/Maths/math.color";
import { useCallback } from "react";
import type { FunctionComponent } from "react";

import { useInterceptObservable } from "../../../hooks/instrumentationHooks";
import { useObservableState } from "../../../hooks/observableHooks";
import { Color4GradientList, FactorGradientList } from "shared-ui-components/fluent/hoc/gradientList";

export const ParticleSystemEmissionProperties: FunctionComponent<{ particleSystem: IParticleSystem }> = (props) => {
const { particleSystem: system } = props;

// TODO-iv2: Perhaps a common enough pattern to create a custom hook
const emitRateGradients = useObservableState(
useCallback(() => {
const gradients = system.getEmitRateGradients();
return [...(gradients ?? [])];
}, [system]),
useInterceptObservable("function", system, "addEmitRateGradient"),
useInterceptObservable("function", system, "removeEmitRateGradient"),
useInterceptObservable("function", system, "forceRefreshGradients")
);

return (
<>
{!system.isNodeGenerated && (
<FactorGradientList
gradients={emitRateGradients}
label="Emit rate gradient"
removeGradient={(gradient: IValueGradient) => {
system.removeEmitRateGradient(gradient.gradient);
system.forceRefreshGradients();
}}
addGradient={(gradient?: FactorGradient) => {
gradient ? system.addEmitRateGradient(gradient.gradient, gradient.factor1, gradient.factor2) : system.addEmitRateGradient(Math.random(), 50, 50);
system.forceRefreshGradients();
}}
onChange={(_gradient: FactorGradient) => {
system.forceRefreshGradients();
}}
/>
)}
</>
);
};

export const ParticleSystemColorProperties: FunctionComponent<{ particleSystem: IParticleSystem }> = (props) => {
const { particleSystem: system } = props;

const colorGradients = useObservableState(
useCallback(() => {
const gradients = system.getColorGradients();
return [...(gradients ?? [])];
}, [system]),
useInterceptObservable("function", system, "addColorGradient"),
useInterceptObservable("function", system, "removeColorGradient"),
useInterceptObservable("function", system, "forceRefreshGradients")
);

return (
<>
{!system.isNodeGenerated && (
<Color4GradientList
gradients={colorGradients}
label="Color gradient"
removeGradient={(gradient: IValueGradient) => {
system.removeEmitRateGradient(gradient.gradient);
system.forceRefreshGradients();
}}
addGradient={(gradient?: Color4Gradient) => {
if (gradient) {
system.addColorGradient(gradient.gradient, gradient.color1, gradient.color2);
} else {
system.addColorGradient(0, Color4.FromColor3(Color3.Black()), Color4.FromColor3(Color3.Black()));
system.addColorGradient(1, Color4.FromColor3(Color3.White()), Color4.FromColor3(Color3.White()));
}
system.forceRefreshGradients();
}}
onChange={(_gradient: Color4Gradient) => {
system.forceRefreshGradients();
}}
/>
)}
</>
);
};
8 changes: 4 additions & 4 deletions packages/dev/inspector-v2/src/components/properties/physicsProperties.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { useCallback } from "react";
import { Vector3 } from "core/Maths/math.vector";
import { PhysicsMotionType, PhysicsPrestepType } from "core/Physics/v2/IPhysicsEnginePlugin";
import { NumberDropdownPropertyLine } from "shared-ui-components/fluent/hoc/dropdownPropertyLine";
import { FloatInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/inputPropertyLine";
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/vectorPropertyLine";
import { useVector3Property } from "../../hooks/compoundPropertyHooks";
import { useInterceptObservable } from "../../hooks/instrumentationHooks";
Expand Down Expand Up @@ -82,7 +82,7 @@ export const PhysicsBodyProperties: FunctionComponent<{ physicsBody: PhysicsBody
}}
/>
{/* Linear Damping */}
<FloatInputPropertyLine
<NumberInputPropertyLine
label="Linear Damping"
min={0}
max={1}
Expand All @@ -93,7 +93,7 @@ export const PhysicsBodyProperties: FunctionComponent<{ physicsBody: PhysicsBody
}}
/>
{/* Angular Damping */}
<FloatInputPropertyLine
<NumberInputPropertyLine
label="Angular Damping"
min={0}
max={1}
Expand All @@ -108,7 +108,7 @@ export const PhysicsBodyProperties: FunctionComponent<{ physicsBody: PhysicsBody
{/* Physics Mass Properties Controls */}
{massProperties && (
<>
<FloatInputPropertyLine
<NumberInputPropertyLine
label="Mass"
value={massProperties.mass ?? 0}
min={0}
Expand Down
Loading
Loading