Skip to content

Commit b5c2cb7

Browse files
georginahalpernGeorgina
georginahalpern
and
Georgina
authored
[InspectorV2/Fluent] BoundProperty auto-detects known compoundProperties and uses their compoundPropertyHooks (#17033)
BoundProperty now detects whether the passed in property is of type vector , color, or quaternion and uses the corresponding compound hook automatically, that way caller doesn't need to know about this nuance. In future would be nice to expand this to be more flexible so that we can still use boundproperty with other complex hooks, but the typing was a bit too complex for what I needed at the moment Co-authored-by: Georgina <[email protected]>
1 parent 4a5ad2a commit b5c2cb7

File tree

9 files changed

+73
-93
lines changed

9 files changed

+73
-93
lines changed

‎packages/dev/inspector-v2/src/components/properties/boundProperty.tsx

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import type { ComponentType, ComponentProps } from "react";
22
import { forwardRef } from "react";
33

4-
import { useProperty } from "../../hooks/compoundPropertyHooks";
4+
import { useProperty, useQuaternionProperty, useVector3Property, useColor3Property, useColor4Property } from "../../hooks/compoundPropertyHooks";
5+
import { Quaternion, Vector3 } from "core/Maths/math.vector";
6+
import { Color3, Color4 } from "core/Maths/math.color";
57

68
/**
79
* Helper type to check if a type includes null or undefined
@@ -51,7 +53,22 @@ function BoundPropertyCoreImpl<TargetT extends object, PropertyKeyT extends keyo
5153
) {
5254
// eslint-disable-next-line @typescript-eslint/naming-convention
5355
const { target, propertyKey, convertTo, convertFrom, component: Component, ...rest } = props;
54-
const value = useProperty(target, propertyKey);
56+
let hook: (target: TargetT, propertyKey: PropertyKeyT) => TargetT[PropertyKeyT] = useProperty;
57+
58+
// Auto-detect the appropriate hook based on property type. In future can expand this to support any custom hook passed in
59+
const propertyValue = target[propertyKey] as unknown;
60+
if (typeof propertyValue === "object" && propertyValue !== null) {
61+
if (propertyValue instanceof Vector3) {
62+
hook = useVector3Property;
63+
} else if (propertyValue instanceof Quaternion) {
64+
hook = useQuaternionProperty;
65+
} else if (propertyValue instanceof Color3) {
66+
hook = useColor3Property;
67+
} else if (propertyValue instanceof Color4) {
68+
hook = useColor4Property;
69+
}
70+
}
71+
const value = hook(target, propertyKey);
5572
const convertedValue = convertTo ? convertTo(value) : value;
5673

5774
const propsToSend = {

‎packages/dev/inspector-v2/src/components/properties/lights/areaLightProperties.tsx

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,17 @@ import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLine
55
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
66
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
77

8-
import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
98
import { BoundProperty } from "../boundProperty";
109

1110
export const AreaLightSetupProperties: FunctionComponent<{ context: RectAreaLight }> = ({ context: areaLight }) => {
12-
const position = useVector3Property(areaLight, "position");
13-
const diffuseColor = useColor3Property(areaLight, "diffuse");
14-
const specularColor = useColor3Property(areaLight, "specular");
15-
1611
return (
1712
<>
18-
<Color3PropertyLine label="Diffuse" value={diffuseColor} onChange={(val) => (areaLight.diffuse = val)} />
19-
<Color3PropertyLine label="Specular" value={specularColor} onChange={(val) => (areaLight.specular = val)} />
20-
<Vector3PropertyLine label="Position" value={position} onChange={(val) => (areaLight.position = val)} />
21-
<BoundProperty component={NumberInputPropertyLine} label="Width" target={areaLight} propertyKey="width" />
22-
<BoundProperty component={NumberInputPropertyLine} label="Height" target={areaLight} propertyKey="height" />
23-
<BoundProperty component={NumberInputPropertyLine} label="Intensity" target={areaLight} propertyKey="intensity" />
13+
<BoundProperty label="Diffuse" component={Color3PropertyLine} target={areaLight} propertyKey="diffuse" />
14+
<BoundProperty label="Specular" component={Color3PropertyLine} target={areaLight} propertyKey="specular" />
15+
<BoundProperty label="Position" component={Vector3PropertyLine} target={areaLight} propertyKey="position" />
16+
<BoundProperty label="Width" component={NumberInputPropertyLine} target={areaLight} propertyKey="width" />
17+
<BoundProperty label="Height" component={NumberInputPropertyLine} target={areaLight} propertyKey="height" />
18+
<BoundProperty label="Intensity" component={NumberInputPropertyLine} target={areaLight} propertyKey="intensity" />
2419
</>
2520
);
2621
};

‎packages/dev/inspector-v2/src/components/properties/lights/directionalLightProperties.tsx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,22 +5,16 @@ import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLine
55
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
66
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
77

8-
import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
98
import { BoundProperty } from "../boundProperty";
109

1110
export const DirectionalLightSetupProperties: FunctionComponent<{ context: DirectionalLight }> = ({ context: directionalLight }) => {
12-
const position = useVector3Property(directionalLight, "position");
13-
const direction = useVector3Property(directionalLight, "direction");
14-
const diffuseColor = useColor3Property(directionalLight, "diffuse");
15-
const specularColor = useColor3Property(directionalLight, "specular");
16-
1711
return (
1812
<>
19-
<Vector3PropertyLine label="Position" value={position} onChange={(val) => (directionalLight.position = val)} />
20-
<Vector3PropertyLine label="Direction" value={direction} onChange={(val) => (directionalLight.direction = val)} />
21-
<Color3PropertyLine label="Diffuse" value={diffuseColor} onChange={(val) => (directionalLight.diffuse = val)} />
22-
<Color3PropertyLine label="Specular" value={specularColor} onChange={(val) => (directionalLight.specular = val)} />
23-
<BoundProperty component={NumberInputPropertyLine} label="Intensity" target={directionalLight} propertyKey="intensity" />
13+
<BoundProperty label="Position" component={Vector3PropertyLine} target={directionalLight} propertyKey="position" />
14+
<BoundProperty label="Direction" component={Vector3PropertyLine} target={directionalLight} propertyKey="direction" />
15+
<BoundProperty label="Diffuse" component={Color3PropertyLine} target={directionalLight} propertyKey="diffuse" />
16+
<BoundProperty label="Specular" component={Color3PropertyLine} target={directionalLight} propertyKey="specular" />
17+
<BoundProperty label="Intensity" component={NumberInputPropertyLine} target={directionalLight} propertyKey="intensity" />
2418
</>
2519
);
2620
};

‎packages/dev/inspector-v2/src/components/properties/lights/hemisphericLightProperties.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,15 @@ import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLine
55
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
66
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
77

8-
import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
98
import { BoundProperty } from "../boundProperty";
109

1110
export const HemisphericLightSetupProperties: FunctionComponent<{ context: HemisphericLight }> = ({ context: hemisphericLight }) => {
12-
const direction = useVector3Property(hemisphericLight, "direction");
13-
const diffuseColor = useColor3Property(hemisphericLight, "diffuse");
14-
const groundColor = useColor3Property(hemisphericLight, "groundColor");
15-
1611
return (
1712
<>
18-
<Vector3PropertyLine label="Direction" value={direction} onChange={(val) => (hemisphericLight.direction = val)} />
19-
<Color3PropertyLine label="Diffuse" value={diffuseColor} onChange={(val) => (hemisphericLight.diffuse = val)} />
20-
<Color3PropertyLine label="Ground" value={groundColor} onChange={(val) => (hemisphericLight.groundColor = val)} />
21-
<BoundProperty component={NumberInputPropertyLine} label="Intensity" target={hemisphericLight} propertyKey="intensity" />
13+
<BoundProperty label="Direction" component={Vector3PropertyLine} target={hemisphericLight} propertyKey="direction" />
14+
<BoundProperty label="Diffuse" component={Color3PropertyLine} target={hemisphericLight} propertyKey="diffuse" />
15+
<BoundProperty label="Ground" component={Color3PropertyLine} target={hemisphericLight} propertyKey="groundColor" />
16+
<BoundProperty label="Intensity" component={NumberInputPropertyLine} target={hemisphericLight} propertyKey="intensity" />
2217
</>
2318
);
2419
};

‎packages/dev/inspector-v2/src/components/properties/lights/pointLightProperties.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,15 @@ import { Color3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLine
55
import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/inputPropertyLine";
66
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
77

8-
import { useColor3Property, useVector3Property } from "../../../hooks/compoundPropertyHooks";
98
import { BoundProperty } from "../boundProperty";
109

1110
export const PointLightSetupProperties: FunctionComponent<{ context: PointLight }> = ({ context: pointLight }) => {
12-
const position = useVector3Property(pointLight, "position");
13-
const diffuseColor = useColor3Property(pointLight, "diffuse");
14-
const groundColor = useColor3Property(pointLight, "specular");
15-
1611
return (
1712
<>
18-
<Color3PropertyLine label="Diffuse" value={diffuseColor} onChange={(val) => (pointLight.diffuse = val)} />
19-
<Color3PropertyLine label="Specular" value={groundColor} onChange={(val) => (pointLight.specular = val)} />
20-
<Vector3PropertyLine label="Position" value={position} onChange={(val) => (pointLight.position = val)} />
21-
<BoundProperty component={NumberInputPropertyLine} label="Intensity" target={pointLight} propertyKey="intensity" />
13+
<BoundProperty label="Diffuse" component={Color3PropertyLine} target={pointLight} propertyKey="diffuse" />
14+
<BoundProperty label="Specular" component={Color3PropertyLine} target={pointLight} propertyKey="specular" />
15+
<BoundProperty label="Position" component={Vector3PropertyLine} target={pointLight} propertyKey="position" />
16+
<BoundProperty label="Intensity" component={NumberInputPropertyLine} target={pointLight} propertyKey="intensity" />
2217
</>
2318
);
2419
};

‎packages/dev/inspector-v2/src/components/properties/lights/spotLightProperties.tsx

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,38 @@ import { NumberInputPropertyLine } from "shared-ui-components/fluent/hoc/propert
77
import { SyncedSliderPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/syncedSliderPropertyLine";
88
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
99

10-
import { useColor3Property, useProperty, useVector3Property } from "../../../hooks/compoundPropertyHooks";
10+
import { BoundProperty } from "../boundProperty";
1111

1212
export const SpotLightSetupProperties: FunctionComponent<{ context: SpotLight }> = ({ context: spotLight }) => {
13-
const position = useVector3Property(spotLight, "position");
14-
const direction = useVector3Property(spotLight, "direction");
15-
const diffuseColor = useColor3Property(spotLight, "diffuse");
16-
const groundColor = useColor3Property(spotLight, "specular");
17-
const angle = useProperty(spotLight, "angle");
18-
const innerAngle = useProperty(spotLight, "innerAngle");
19-
const exponent = useProperty(spotLight, "exponent");
20-
2113
return (
2214
<>
23-
<Color3PropertyLine label="Diffuse" value={diffuseColor} onChange={(val) => (spotLight.diffuse = val)} />
24-
<Color3PropertyLine label="Specular" value={groundColor} onChange={(val) => (spotLight.specular = val)} />
25-
<Vector3PropertyLine label="Direction" value={direction} onChange={(val) => (spotLight.direction = val)} />
26-
<Vector3PropertyLine label="Position" value={position} onChange={(val) => (spotLight.position = val)} />
27-
<SyncedSliderPropertyLine label="Angle" value={Tools.ToDegrees(angle)} min={0} max={90} step={0.1} onChange={(value) => (spotLight.angle = Tools.ToRadians(value))} />
28-
<SyncedSliderPropertyLine
29-
label="Inner Angle"
30-
value={Tools.ToDegrees(innerAngle)}
15+
<BoundProperty label="Diffuse" component={Color3PropertyLine} target={spotLight} propertyKey="diffuse" />
16+
<BoundProperty label="Specular" component={Color3PropertyLine} target={spotLight} propertyKey="specular" />
17+
<BoundProperty label="Direction" component={Vector3PropertyLine} target={spotLight} propertyKey="direction" />
18+
<BoundProperty label="Position" component={Vector3PropertyLine} target={spotLight} propertyKey="position" />
19+
<BoundProperty
20+
label="Angle"
21+
component={SyncedSliderPropertyLine}
22+
target={spotLight}
23+
propertyKey="angle"
24+
convertTo={Tools.ToDegrees}
25+
convertFrom={Tools.ToRadians}
26+
min={0}
27+
max={90}
28+
step={0.1}
29+
/>
30+
<BoundProperty
31+
label="InnerAngle"
32+
component={SyncedSliderPropertyLine}
33+
target={spotLight}
34+
propertyKey="innerAngle"
35+
convertTo={Tools.ToDegrees}
36+
convertFrom={Tools.ToRadians}
3137
min={0}
3238
max={90}
3339
step={0.1}
34-
onChange={(value) => (spotLight.innerAngle = Tools.ToRadians(value))}
3540
/>
36-
<NumberInputPropertyLine label="Exponent" value={exponent} onChange={(value) => (spotLight.exponent = value)} />
41+
<BoundProperty label="Exponent" component={NumberInputPropertyLine} target={spotLight} propertyKey="exponent" />
3742
</>
3843
);
3944
};

‎packages/dev/inspector-v2/src/components/properties/nodes/abstractMeshProperties.tsx

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { StringifiedPropertyLine } from "shared-ui-components/fluent/hoc/propert
2727
import { SwitchPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/switchPropertyLine";
2828
import { SyncedSliderPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/syncedSliderPropertyLine";
2929
import { TextPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/textPropertyLine";
30-
import { useColor3Property, useProperty } from "../../../hooks/compoundPropertyHooks";
30+
import { useProperty } from "../../../hooks/compoundPropertyHooks";
3131
import { useObservableState } from "../../../hooks/observableHooks";
3232
import { BoundProperty } from "../boundProperty";
3333

@@ -123,33 +123,17 @@ export const AbstractMeshOutlineOverlayProperties: FunctionComponent<{ mesh: Abs
123123
const { mesh } = props;
124124

125125
const renderOverlay = useProperty(mesh, "renderOverlay");
126-
const overlayColor = useColor3Property(mesh, "overlayColor");
127126
const renderOutline = useProperty(mesh, "renderOutline");
128-
const outlineColor = useColor3Property(mesh, "outlineColor");
129127

130128
return (
131129
<>
132-
<BoundProperty component={SwitchPropertyLine} label="Render Overlay" target={mesh} propertyKey={"renderOverlay"} />
130+
<BoundProperty component={SwitchPropertyLine} label="Render Overlay" target={mesh} propertyKey="renderOverlay" />
133131
<Collapse visible={renderOverlay}>
134-
<Color3PropertyLine
135-
key="OverlayColor"
136-
label="Overlay Color"
137-
value={overlayColor}
138-
onChange={(color) => {
139-
mesh.overlayColor = color;
140-
}}
141-
/>
132+
<BoundProperty label="Overlay Color" component={Color3PropertyLine} target={mesh} propertyKey="overlayColor" />
142133
</Collapse>
143-
<BoundProperty component={SwitchPropertyLine} label="Render Outline" target={mesh} propertyKey={"renderOutline"} />
134+
<BoundProperty component={SwitchPropertyLine} label="Render Outline" target={mesh} propertyKey="renderOutline" />
144135
<Collapse visible={renderOutline}>
145-
<Color3PropertyLine
146-
key="OutlineColor"
147-
label="Outline Color"
148-
value={outlineColor}
149-
onChange={(color) => {
150-
mesh.outlineColor = color;
151-
}}
152-
/>
136+
<BoundProperty label="Outline Color" component={Color3PropertyLine} target={mesh} propertyKey="outlineColor" />
153137
</Collapse>
154138
</>
155139
);

‎packages/dev/inspector-v2/src/components/properties/sprites/spriteTransformProperties.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,17 @@ import type { ISettingsContext } from "../../../services/settingsContext";
55

66
import { SyncedSliderPropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/syncedSliderPropertyLine";
77
import { Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
8-
import { useVector3Property } from "../../../hooks/compoundPropertyHooks";
98
import { useAngleConverters } from "../../../hooks/settingsHooks";
109
import { BoundProperty } from "../boundProperty";
1110

1211
export const SpriteTransformProperties: FunctionComponent<{ sprite: Sprite; settings: ISettingsContext }> = (props) => {
1312
const { sprite, settings } = props;
1413

15-
const position = useVector3Property(sprite, "position");
16-
1714
const [toDisplayAngle, fromDisplayAngle, useDegrees] = useAngleConverters(settings);
1815

1916
return (
2017
<>
21-
<Vector3PropertyLine key="PositionTransform" label="Position" value={position} onChange={(val) => (sprite.position = val)} />
18+
<BoundProperty component={Vector3PropertyLine} label="Position" target={sprite} propertyKey="position" />
2219
<BoundProperty
2320
component={SyncedSliderPropertyLine}
2421
key="Angle"

‎packages/dev/inspector-v2/src/components/properties/transformProperties.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,22 @@ import type { Nullable, Quaternion, Vector3 } from "core/index";
44
import type { ISettingsContext } from "../../services/settingsContext";
55

66
import { QuaternionPropertyLine, RotationVectorPropertyLine, Vector3PropertyLine } from "shared-ui-components/fluent/hoc/propertyLines/vectorPropertyLine";
7-
import { useQuaternionProperty, useVector3Property } from "../../hooks/compoundPropertyHooks";
7+
import { useQuaternionProperty } from "../../hooks/compoundPropertyHooks";
88
import { useObservableState } from "../../hooks/observableHooks";
9+
import { BoundProperty } from "./boundProperty";
910

1011
export type Transform = { position: Vector3; rotation: Vector3; rotationQuaternion: Nullable<Quaternion>; scaling: Vector3 };
1112

1213
export const TransformProperties: FunctionComponent<{ transform: Transform; settings: ISettingsContext }> = (props) => {
1314
const { transform, settings } = props;
1415

15-
const position = useVector3Property(transform, "position");
16-
const rotation = useVector3Property(transform, "rotation");
1716
const quatRotation = useQuaternionProperty(transform, "rotationQuaternion");
18-
const scaling = useVector3Property(transform, "scaling");
1917

2018
const useDegrees = useObservableState(() => settings.useDegrees, settings.settingsChangedObservable);
2119

2220
return (
2321
<>
24-
<Vector3PropertyLine key="PositionTransform" label="Position" value={position} onChange={(val) => (transform.position = val)} />
22+
<BoundProperty component={Vector3PropertyLine} label="Position" target={transform} propertyKey="position" />
2523
{quatRotation ? (
2624
<QuaternionPropertyLine
2725
key="QuaternionRotationTransform"
@@ -31,9 +29,9 @@ export const TransformProperties: FunctionComponent<{ transform: Transform; sett
3129
useDegrees={useDegrees}
3230
/>
3331
) : (
34-
<RotationVectorPropertyLine key="RotationTransform" label="Rotation" value={rotation} onChange={(val) => (transform.rotation = val)} useDegrees={useDegrees} />
32+
<BoundProperty component={RotationVectorPropertyLine} label="Rotation" target={transform} propertyKey="rotation" useDegrees={useDegrees} />
3533
)}
36-
<Vector3PropertyLine key="ScalingTransform" label="Scaling" value={scaling} onChange={(val) => (transform.scaling = val)} />
34+
<BoundProperty component={Vector3PropertyLine} label="Scaling" target={transform} propertyKey="scaling" />
3735
</>
3836
);
3937
};

0 commit comments

Comments
 (0)