@babylonjs/shared-ui-components 8.52.0 → 8.52.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fluent/hoc/propertyLines/vectorPropertyLine.d.ts +3 -1
- package/fluent/hoc/propertyLines/vectorPropertyLine.js +12 -11
- package/fluent/hoc/propertyLines/vectorPropertyLine.js.map +1 -1
- package/fluent/hooks/keyboardHooks.d.ts +4 -1
- package/fluent/hooks/keyboardHooks.js +8 -2
- package/fluent/hooks/keyboardHooks.js.map +1 -1
- package/fluent/primitives/gradient.js +1 -1
- package/fluent/primitives/gradient.js.map +1 -1
- package/fluent/primitives/slider.d.ts +23 -0
- package/fluent/primitives/slider.js +56 -0
- package/fluent/primitives/slider.js.map +1 -0
- package/fluent/primitives/spinButton.d.ts +12 -0
- package/fluent/primitives/spinButton.js +175 -100
- package/fluent/primitives/spinButton.js.map +1 -1
- package/fluent/primitives/syncedSlider.d.ts +2 -0
- package/fluent/primitives/syncedSlider.js +5 -13
- package/fluent/primitives/syncedSlider.js.map +1 -1
- package/nodeGraphSystem/graphFrame.js +3 -0
- package/nodeGraphSystem/graphFrame.js.map +1 -1
- package/nodeGraphSystem/graphNode.module.scss +2 -4
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { FunctionComponent } from "react";
|
|
2
|
+
import type { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
|
|
2
3
|
import type { PrimitiveProps } from "../../primitives/primitive.js";
|
|
3
4
|
import type { PropertyLineProps } from "./propertyLine.js";
|
|
4
|
-
import type { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
|
|
5
5
|
import { Quaternion, Vector2, Vector4 } from "@babylonjs/core/Maths/math.vector.js";
|
|
6
6
|
export type TensorPropertyLineProps<V extends Vector2 | Vector3 | Vector4 | Quaternion> = PropertyLineProps<V> & PrimitiveProps<V> & {
|
|
7
7
|
/**
|
|
@@ -20,6 +20,8 @@ export type TensorPropertyLineProps<V extends Vector2 | Vector3 | Vector4 | Quat
|
|
|
20
20
|
* Internal spinbutton's step
|
|
21
21
|
*/
|
|
22
22
|
step?: number;
|
|
23
|
+
/** Optional fixed precision (number of decimal digits). Overrides the automatically computed display precision. */
|
|
24
|
+
precision?: number;
|
|
23
25
|
/**
|
|
24
26
|
* If passed, the UX will use the conversion functions to display/update values
|
|
25
27
|
*/
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
2
|
import { Body1 } from "@fluentui/react-components";
|
|
4
|
-
import {
|
|
5
|
-
import { SyncedSliderPropertyLine } from "./syncedSliderPropertyLine.js";
|
|
3
|
+
import { useEffect, useState } from "react";
|
|
6
4
|
import { Quaternion, Vector2, Vector4 } from "@babylonjs/core/Maths/math.vector.js";
|
|
7
5
|
import { Tools } from "@babylonjs/core/Misc/tools.js";
|
|
8
6
|
import { CalculatePrecision } from "../../primitives/utils.js";
|
|
7
|
+
import { NumberInputPropertyLine } from "./inputPropertyLine.js";
|
|
8
|
+
import { PropertyLine } from "./propertyLine.js";
|
|
9
|
+
import { TextPropertyLine } from "./textPropertyLine.js";
|
|
9
10
|
const HasZ = (vector) => !(vector instanceof Vector2);
|
|
10
11
|
const HasW = (vector) => vector instanceof Vector4 || vector instanceof Quaternion;
|
|
11
12
|
/**
|
|
@@ -30,21 +31,21 @@ const TensorPropertyLine = (props) => {
|
|
|
30
31
|
useEffect(() => {
|
|
31
32
|
setVector(props.value);
|
|
32
33
|
}, [props.value, props.expandedContent]);
|
|
33
|
-
return (_jsx(PropertyLine, { ...props, expandedContent: vector ? _jsx(VectorSliders, { vector: vector, min: min, max: max, unit: props.unit, step: props.step, converted: converted, onChange: onChange }) : undefined, children: _jsx(Body1, { children: `[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : ""}${HasW(props.value) ? `, ${formatted(props.value.w)}` : ""}]` }) }));
|
|
34
|
+
return (_jsx(PropertyLine, { ...props, expandedContent: _jsxs(_Fragment, { children: [props.expandedContent, vector ? (_jsx(VectorSliders, { vector: vector, min: min, max: max, unit: props.unit, step: props.step, precision: props.precision, converted: converted, onChange: onChange })) : undefined] }), children: _jsx(Body1, { children: `[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : ""}${HasW(props.value) ? `, ${formatted(props.value.w)}` : ""}]` }) }));
|
|
34
35
|
};
|
|
35
|
-
const VectorSliders = ({ vector, min, max, unit, step, converted, onChange }) => (_jsxs(_Fragment, { children: [_jsx(
|
|
36
|
+
const VectorSliders = ({ vector, min, max, unit, step, precision, converted, onChange }) => (_jsxs(_Fragment, { children: [_jsx(NumberInputPropertyLine, { label: "X", value: converted(vector.x), min: min, max: max, onChange: (val) => onChange(val, "x"), unit: unit, step: step, precision: precision }), _jsx(NumberInputPropertyLine, { label: "Y", value: converted(vector.y), min: min, max: max, onChange: (val) => onChange(val, "y"), unit: unit, step: step, precision: precision }), HasZ(vector) && (_jsx(NumberInputPropertyLine, { label: "Z", value: converted(vector.z), min: min, max: max, onChange: (val) => onChange(val, "z"), unit: unit, step: step, precision: precision })), HasW(vector) && (_jsx(NumberInputPropertyLine, { label: "W", value: converted(vector.w), min: min, max: max, onChange: (val) => onChange(val, "w"), unit: unit, step: step, precision: precision }))] }));
|
|
36
37
|
const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
|
|
37
38
|
export const RotationVectorPropertyLine = (props) => {
|
|
38
39
|
RotationVectorPropertyLine.displayName = "RotationVectorPropertyLine";
|
|
39
|
-
const
|
|
40
|
-
const
|
|
41
|
-
return (_jsx(Vector3PropertyLine, { ...props, unit: props.useDegrees ? "
|
|
40
|
+
const step = props.useDegrees ? 1 : 0.01;
|
|
41
|
+
const precision = props.useDegrees ? 1 : 2;
|
|
42
|
+
return (_jsx(Vector3PropertyLine, { ...props, unit: props.useDegrees ? "°" : "rad", valueConverter: props.useDegrees ? ToDegreesConverter : undefined, step: step, precision: precision }));
|
|
42
43
|
};
|
|
43
44
|
const QuaternionPropertyLineInternal = TensorPropertyLine;
|
|
44
45
|
export const QuaternionPropertyLine = (props) => {
|
|
45
46
|
QuaternionPropertyLine.displayName = "QuaternionPropertyLine";
|
|
46
|
-
const
|
|
47
|
-
const
|
|
47
|
+
const step = props.useDegrees ? 1 : 0.01;
|
|
48
|
+
const precision = props.useDegrees ? 1 : 2;
|
|
48
49
|
const [quat, setQuat] = useState(props.value);
|
|
49
50
|
useEffect(() => {
|
|
50
51
|
setQuat(props.value);
|
|
@@ -59,7 +60,7 @@ export const QuaternionPropertyLine = (props) => {
|
|
|
59
60
|
const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
|
|
60
61
|
onQuatChange(quat);
|
|
61
62
|
};
|
|
62
|
-
return useEuler ? (_jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter,
|
|
63
|
+
return useEuler ? (_jsx(Vector3PropertyLine, { ...restProps, nullable: false, ignoreNullable: false, value: quat.toEulerAngles(), valueConverter: ToDegreesConverter, onChange: onEulerChange, unit: props.useDegrees ? "°" : "rad", step: step, precision: precision, expandedContent: _jsx(TextPropertyLine, { label: "Quaternion", value: `[${quat.x.toFixed(4)}, ${quat.y.toFixed(4)}, ${quat.z.toFixed(4)}, ${quat.w.toFixed(4)}]` }) })) : (_jsx(QuaternionPropertyLineInternal, { ...props, nullable: false, value: quat, onChange: onQuatChange, unit: props.useDegrees ? "°" : "rad", step: step, precision: precision }));
|
|
63
64
|
};
|
|
64
65
|
export const Vector2PropertyLine = TensorPropertyLine;
|
|
65
66
|
export const Vector3PropertyLine = TensorPropertyLine;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/vectorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from \"react\";\r\nimport type { FunctionComponent } from \"react\";\r\n\r\nimport { Body1 } from \"@fluentui/react-components\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport type { PrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport { Quaternion, Vector2, Vector4 } from \"core/Maths/math.vector\";\r\nimport { Tools } from \"core/Misc/tools\";\r\nimport { CalculatePrecision } from \"../../primitives/utils\";\r\n\r\nexport type TensorPropertyLineProps<V extends Vector2 | Vector3 | Vector4 | Quaternion> = PropertyLineProps<V> &\r\n PrimitiveProps<V> & {\r\n /**\r\n * If passed, all sliders will use this for the min value\r\n */\r\n min?: number;\r\n /**\r\n * If passed, all sliders will use this for the max value\r\n */\r\n max?: number;\r\n /**\r\n * Will be displayed in the input UI to indicate the unit of measurement\r\n */\r\n unit?: string;\r\n\r\n /**\r\n * Internal spinbutton's step\r\n */\r\n step?: number;\r\n /**\r\n * If passed, the UX will use the conversion functions to display/update values\r\n */\r\n valueConverter?: {\r\n /**\r\n * Will call from(val) before displaying in the UX\r\n */\r\n from: (val: number) => number;\r\n /**\r\n * Will call to(val) before calling onChange\r\n */\r\n to: (val: number) => number;\r\n };\r\n };\r\n\r\nconst HasZ = (vector: Vector2 | Vector3 | Vector4 | Quaternion): vector is Vector3 => !(vector instanceof Vector2);\r\nconst HasW = (vector: Vector2 | Vector3 | Vector4 | Quaternion): vector is Vector4 => vector instanceof Vector4 || vector instanceof Quaternion;\r\n\r\n/**\r\n * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values\r\n * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)\r\n * @param props\r\n * @returns\r\n */\r\nconst TensorPropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2 | Vector3 | Vector4 | Quaternion>> = (props) => {\r\n TensorPropertyLine.displayName = \"TensorPropertyLine\";\r\n const converted = (val: number) => (props.valueConverter ? props.valueConverter.from(val) : val);\r\n const formatted = (val: number) => converted(val).toFixed(props.step !== undefined ? Math.max(0, CalculatePrecision(props.step)) : 2);\r\n\r\n const [vector, setVector] = useState(props.value);\r\n const { min, max } = props;\r\n\r\n const onChange = (val: number, key: \"x\" | \"y\" | \"z\" | \"w\") => {\r\n const value = props.valueConverter ? props.valueConverter.to(val) : val;\r\n const newVector = vector.clone();\r\n (newVector as Vector4)[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe\r\n\r\n setVector(newVector);\r\n props.onChange(newVector);\r\n };\r\n\r\n useEffect(() => {\r\n setVector(props.value);\r\n }, [props.value, props.expandedContent]);\r\n\r\n return (\r\n <PropertyLine\r\n {...props}\r\n expandedContent={\r\n vector ? <VectorSliders vector={vector} min={min} max={max} unit={props.unit} step={props.step} converted={converted} onChange={onChange} /> : undefined\r\n }\r\n >\r\n <Body1>{`[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : \"\"}${HasW(props.value) ? `, ${formatted(props.value.w)}` : \"\"}]`}</Body1>\r\n </PropertyLine>\r\n );\r\n};\r\n\r\ntype VectorSlidersProps<V extends Vector2 | Vector3 | Vector4 | Quaternion> = {\r\n vector: V;\r\n min?: number;\r\n max?: number;\r\n unit?: string;\r\n step?: number;\r\n converted: (val: number) => number;\r\n onChange: (val: number, key: \"x\" | \"y\" | \"z\" | \"w\") => void;\r\n};\r\n\r\nconst VectorSliders = <V extends Vector2 | Vector3 | Vector4 | Quaternion>({ vector, min, max, unit, step, converted, onChange }: VectorSlidersProps<V>) => (\r\n <>\r\n <SyncedSliderPropertyLine label=\"X\" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, \"x\")} unit={unit} step={step} />\r\n <SyncedSliderPropertyLine label=\"Y\" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, \"y\")} unit={unit} step={step} />\r\n {HasZ(vector) && <SyncedSliderPropertyLine label=\"Z\" value={converted(vector.z)} min={min} max={max} onChange={(val) => onChange(val, \"z\")} unit={unit} step={step} />}\r\n {HasW(vector) && <SyncedSliderPropertyLine label=\"W\" value={converted(vector.w)} min={min} max={max} onChange={(val) => onChange(val, \"w\")} unit={unit} step={step} />}\r\n </>\r\n);\r\n\r\ntype RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3> & {\r\n /**\r\n * Display angles as degrees instead of radians\r\n */\r\n useDegrees?: boolean;\r\n};\r\n\r\nconst ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => {\r\n RotationVectorPropertyLine.displayName = \"RotationVectorPropertyLine\";\r\n const min = props.useDegrees ? 0 : undefined;\r\n const max = props.useDegrees ? 360 : undefined;\r\n return (\r\n <Vector3PropertyLine\r\n {...props}\r\n unit={props.useDegrees ? \"deg\" : \"rad\"}\r\n valueConverter={props.useDegrees ? ToDegreesConverter : undefined}\r\n min={min}\r\n max={max}\r\n step={0.001}\r\n />\r\n );\r\n};\r\n\r\ntype QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {\r\n /**\r\n * Display angles as degrees instead of radians\r\n */\r\n useDegrees?: boolean;\r\n /**\r\n * Display angles as Euler angles instead of quaternions\r\n */\r\n useEuler?: boolean;\r\n};\r\nconst QuaternionPropertyLineInternal = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Quaternion>>;\r\nexport const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps> = (props) => {\r\n QuaternionPropertyLine.displayName = \"QuaternionPropertyLine\";\r\n const min = props.useDegrees ? 0 : undefined;\r\n const max = props.useDegrees ? 360 : undefined;\r\n const [quat, setQuat] = useState(props.value);\r\n\r\n useEffect(() => {\r\n setQuat(props.value);\r\n }, [props.value]);\r\n\r\n // Extract only the properties that exist on QuaternionPropertyLineProps\r\n const { useEuler, ...restProps } = props;\r\n\r\n const onQuatChange = (val: Quaternion) => {\r\n setQuat(val);\r\n props.onChange(val);\r\n };\r\n\r\n const onEulerChange = (val: Vector3) => {\r\n const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);\r\n onQuatChange(quat);\r\n };\r\n\r\n return useEuler ? (\r\n <Vector3PropertyLine\r\n {...restProps}\r\n nullable={false}\r\n ignoreNullable={false}\r\n value={quat.toEulerAngles()}\r\n valueConverter={ToDegreesConverter}\r\n min={min}\r\n max={max}\r\n onChange={onEulerChange}\r\n unit={props.useDegrees ? \"deg\" : \"rad\"}\r\n />\r\n ) : (\r\n <QuaternionPropertyLineInternal {...props} nullable={false} value={quat} min={min} max={max} onChange={onQuatChange} unit={props.useDegrees ? \"deg\" : \"rad\"} />\r\n );\r\n};\r\nexport const Vector2PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector2>>;\r\nexport const Vector3PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector3>>;\r\nexport const Vector4PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector4>>;\r\n"]}
|
|
1
|
+
{"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/vectorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\n\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport type { PrimitiveProps } from \"../../primitives/primitive\";\r\nimport type { PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { Body1 } from \"@fluentui/react-components\";\r\nimport { useEffect, useState } from \"react\";\r\n\r\nimport { Quaternion, Vector2, Vector4 } from \"core/Maths/math.vector\";\r\nimport { Tools } from \"core/Misc/tools\";\r\nimport { CalculatePrecision } from \"../../primitives/utils\";\r\nimport { NumberInputPropertyLine } from \"./inputPropertyLine\";\r\nimport { PropertyLine } from \"./propertyLine\";\r\nimport { TextPropertyLine } from \"./textPropertyLine\";\r\n\r\nexport type TensorPropertyLineProps<V extends Vector2 | Vector3 | Vector4 | Quaternion> = PropertyLineProps<V> &\r\n PrimitiveProps<V> & {\r\n /**\r\n * If passed, all sliders will use this for the min value\r\n */\r\n min?: number;\r\n /**\r\n * If passed, all sliders will use this for the max value\r\n */\r\n max?: number;\r\n /**\r\n * Will be displayed in the input UI to indicate the unit of measurement\r\n */\r\n unit?: string;\r\n /**\r\n * Internal spinbutton's step\r\n */\r\n step?: number;\r\n /** Optional fixed precision (number of decimal digits). Overrides the automatically computed display precision. */\r\n precision?: number;\r\n /**\r\n * If passed, the UX will use the conversion functions to display/update values\r\n */\r\n valueConverter?: {\r\n /**\r\n * Will call from(val) before displaying in the UX\r\n */\r\n from: (val: number) => number;\r\n /**\r\n * Will call to(val) before calling onChange\r\n */\r\n to: (val: number) => number;\r\n };\r\n };\r\n\r\nconst HasZ = (vector: Vector2 | Vector3 | Vector4 | Quaternion): vector is Vector3 => !(vector instanceof Vector2);\r\nconst HasW = (vector: Vector2 | Vector3 | Vector4 | Quaternion): vector is Vector4 => vector instanceof Vector4 || vector instanceof Quaternion;\r\n\r\n/**\r\n * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values\r\n * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)\r\n * @param props\r\n * @returns\r\n */\r\nconst TensorPropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2 | Vector3 | Vector4 | Quaternion>> = (props) => {\r\n TensorPropertyLine.displayName = \"TensorPropertyLine\";\r\n const converted = (val: number) => (props.valueConverter ? props.valueConverter.from(val) : val);\r\n const formatted = (val: number) => converted(val).toFixed(props.step !== undefined ? Math.max(0, CalculatePrecision(props.step)) : 2);\r\n\r\n const [vector, setVector] = useState(props.value);\r\n const { min, max } = props;\r\n\r\n const onChange = (val: number, key: \"x\" | \"y\" | \"z\" | \"w\") => {\r\n const value = props.valueConverter ? props.valueConverter.to(val) : val;\r\n const newVector = vector.clone();\r\n (newVector as Vector4)[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe\r\n\r\n setVector(newVector);\r\n props.onChange(newVector);\r\n };\r\n\r\n useEffect(() => {\r\n setVector(props.value);\r\n }, [props.value, props.expandedContent]);\r\n\r\n return (\r\n <PropertyLine\r\n {...props}\r\n expandedContent={\r\n <>\r\n {props.expandedContent}\r\n {vector ? (\r\n <VectorSliders\r\n vector={vector}\r\n min={min}\r\n max={max}\r\n unit={props.unit}\r\n step={props.step}\r\n precision={props.precision}\r\n converted={converted}\r\n onChange={onChange}\r\n />\r\n ) : undefined}\r\n </>\r\n }\r\n >\r\n <Body1>{`[${formatted(props.value.x)}, ${formatted(props.value.y)}${HasZ(props.value) ? `, ${formatted(props.value.z)}` : \"\"}${HasW(props.value) ? `, ${formatted(props.value.w)}` : \"\"}]`}</Body1>\r\n </PropertyLine>\r\n );\r\n};\r\n\r\ntype VectorSlidersProps<V extends Vector2 | Vector3 | Vector4 | Quaternion> = {\r\n vector: V;\r\n min?: number;\r\n max?: number;\r\n unit?: string;\r\n step?: number;\r\n precision?: number;\r\n converted: (val: number) => number;\r\n onChange: (val: number, key: \"x\" | \"y\" | \"z\" | \"w\") => void;\r\n};\r\n\r\nconst VectorSliders = <V extends Vector2 | Vector3 | Vector4 | Quaternion>({ vector, min, max, unit, step, precision, converted, onChange }: VectorSlidersProps<V>) => (\r\n <>\r\n <NumberInputPropertyLine label=\"X\" value={converted(vector.x)} min={min} max={max} onChange={(val) => onChange(val, \"x\")} unit={unit} step={step} precision={precision} />\r\n <NumberInputPropertyLine label=\"Y\" value={converted(vector.y)} min={min} max={max} onChange={(val) => onChange(val, \"y\")} unit={unit} step={step} precision={precision} />\r\n {HasZ(vector) && (\r\n <NumberInputPropertyLine\r\n label=\"Z\"\r\n value={converted(vector.z)}\r\n min={min}\r\n max={max}\r\n onChange={(val) => onChange(val, \"z\")}\r\n unit={unit}\r\n step={step}\r\n precision={precision}\r\n />\r\n )}\r\n {HasW(vector) && (\r\n <NumberInputPropertyLine\r\n label=\"W\"\r\n value={converted(vector.w)}\r\n min={min}\r\n max={max}\r\n onChange={(val) => onChange(val, \"w\")}\r\n unit={unit}\r\n step={step}\r\n precision={precision}\r\n />\r\n )}\r\n </>\r\n);\r\n\r\ntype RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3> & {\r\n /**\r\n * Display angles as degrees instead of radians\r\n */\r\n useDegrees?: boolean;\r\n};\r\n\r\nconst ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => {\r\n RotationVectorPropertyLine.displayName = \"RotationVectorPropertyLine\";\r\n const step = props.useDegrees ? 1 : 0.01;\r\n const precision = props.useDegrees ? 1 : 2;\r\n return (\r\n <Vector3PropertyLine\r\n {...props}\r\n unit={props.useDegrees ? \"°\" : \"rad\"}\r\n valueConverter={props.useDegrees ? ToDegreesConverter : undefined}\r\n step={step}\r\n precision={precision}\r\n />\r\n );\r\n};\r\n\r\ntype QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {\r\n /**\r\n * Display angles as degrees instead of radians\r\n */\r\n useDegrees?: boolean;\r\n /**\r\n * Display angles as Euler angles instead of quaternions\r\n */\r\n useEuler?: boolean;\r\n};\r\nconst QuaternionPropertyLineInternal = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Quaternion>>;\r\nexport const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps> = (props) => {\r\n QuaternionPropertyLine.displayName = \"QuaternionPropertyLine\";\r\n const step = props.useDegrees ? 1 : 0.01;\r\n const precision = props.useDegrees ? 1 : 2;\r\n const [quat, setQuat] = useState(props.value);\r\n\r\n useEffect(() => {\r\n setQuat(props.value);\r\n }, [props.value]);\r\n\r\n // Extract only the properties that exist on QuaternionPropertyLineProps\r\n const { useEuler, ...restProps } = props;\r\n\r\n const onQuatChange = (val: Quaternion) => {\r\n setQuat(val);\r\n props.onChange(val);\r\n };\r\n\r\n const onEulerChange = (val: Vector3) => {\r\n const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);\r\n onQuatChange(quat);\r\n };\r\n\r\n return useEuler ? (\r\n <Vector3PropertyLine\r\n {...restProps}\r\n nullable={false}\r\n ignoreNullable={false}\r\n value={quat.toEulerAngles()}\r\n valueConverter={ToDegreesConverter}\r\n onChange={onEulerChange}\r\n unit={props.useDegrees ? \"°\" : \"rad\"}\r\n step={step}\r\n precision={precision}\r\n expandedContent={<TextPropertyLine label=\"Quaternion\" value={`[${quat.x.toFixed(4)}, ${quat.y.toFixed(4)}, ${quat.z.toFixed(4)}, ${quat.w.toFixed(4)}]`} />}\r\n />\r\n ) : (\r\n <QuaternionPropertyLineInternal {...props} nullable={false} value={quat} onChange={onQuatChange} unit={props.useDegrees ? \"°\" : \"rad\"} step={step} precision={precision} />\r\n );\r\n};\r\nexport const Vector2PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector2>>;\r\nexport const Vector3PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector3>>;\r\nexport const Vector4PropertyLine = TensorPropertyLine as FunctionComponent<TensorPropertyLineProps<Vector4>>;\r\n"]}
|
|
@@ -4,5 +4,8 @@ type KeyCallbacks = {
|
|
|
4
4
|
onKeyUp?: (e: KeyboardEvent) => void;
|
|
5
5
|
};
|
|
6
6
|
export declare function useKeyListener(callbacks: KeyCallbacks, options?: WindowOptions): void;
|
|
7
|
-
|
|
7
|
+
type KeyStateOptions = WindowOptions & {
|
|
8
|
+
preventDefault?: boolean;
|
|
9
|
+
};
|
|
10
|
+
export declare function useKeyState(key: string, options?: KeyStateOptions): boolean;
|
|
8
11
|
export {};
|
|
@@ -23,14 +23,20 @@ export function useKeyState(key, options) {
|
|
|
23
23
|
useKeyListener({
|
|
24
24
|
onKeyDown: useCallback((e) => {
|
|
25
25
|
if (e.key === key) {
|
|
26
|
+
if (options?.preventDefault) {
|
|
27
|
+
e.preventDefault();
|
|
28
|
+
}
|
|
26
29
|
setIsPressed(true);
|
|
27
30
|
}
|
|
28
|
-
}, [key]),
|
|
31
|
+
}, [key, options?.preventDefault]),
|
|
29
32
|
onKeyUp: useCallback((e) => {
|
|
30
33
|
if (e.key === key) {
|
|
34
|
+
if (options?.preventDefault) {
|
|
35
|
+
e.preventDefault();
|
|
36
|
+
}
|
|
31
37
|
setIsPressed(false);
|
|
32
38
|
}
|
|
33
|
-
}, [key]),
|
|
39
|
+
}, [key, options?.preventDefault]),
|
|
34
40
|
}, options);
|
|
35
41
|
useEventListener("window", "blur", useCallback(() => setIsPressed(false), []), options); // Reset state on window blur to avoid stuck keys
|
|
36
42
|
return isPressed;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"keyboardHooks.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hooks/keyboardHooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,MAAM,UAAU,cAAc,CAAC,SAAuB,EAAE,OAAuB;IAC3E,MAAM,WAAW,GAAG,IAAI,GAAG,CAAgE;QACvF,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC;QAChC,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC;KAC/B,CAAC,CAAC;IAEH,KAAK,MAAM,SAAS,IAAI,CAAC,SAAS,EAAE,OAAO,CAAU,EAAE,CAAC;QACpD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC3C,IAAI,OAAO,EAAE,CAAC;YACV,kDAAkD;YAClD,MAAM,cAAc,GAAG,CAAC,CAAgB,EAAE,EAAE;gBACxC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;oBACZ,OAAO,CAAC,CAAC,CAAC,CAAC;gBACf,CAAC;YACL,CAAC,CAAC;YAEF,gBAAgB,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;QACrE,CAAC;IACL,CAAC;AACL,CAAC;
|
|
1
|
+
{"version":3,"file":"keyboardHooks.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/hooks/keyboardHooks.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,MAAM,UAAU,cAAc,CAAC,SAAuB,EAAE,OAAuB;IAC3E,MAAM,WAAW,GAAG,IAAI,GAAG,CAAgE;QACvF,CAAC,SAAS,EAAE,SAAS,CAAC,SAAS,CAAC;QAChC,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC;KAC/B,CAAC,CAAC;IAEH,KAAK,MAAM,SAAS,IAAI,CAAC,SAAS,EAAE,OAAO,CAAU,EAAE,CAAC;QACpD,MAAM,OAAO,GAAG,WAAW,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAC3C,IAAI,OAAO,EAAE,CAAC;YACV,kDAAkD;YAClD,MAAM,cAAc,GAAG,CAAC,CAAgB,EAAE,EAAE;gBACxC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;oBACZ,OAAO,CAAC,CAAC,CAAC,CAAC;gBACf,CAAC;YACL,CAAC,CAAC;YAEF,gBAAgB,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,EAAE,OAAO,CAAC,CAAC;QACrE,CAAC;IACL,CAAC;AACL,CAAC;AAMD,MAAM,UAAU,WAAW,CAAC,GAAW,EAAE,OAAyB;IAC9D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,cAAc,CACV;QACI,SAAS,EAAE,WAAW,CAClB,CAAC,CAAgB,EAAE,EAAE;YACjB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAChB,IAAI,OAAO,EAAE,cAAc,EAAE,CAAC;oBAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACvB,CAAC;gBACD,YAAY,CAAC,IAAI,CAAC,CAAC;YACvB,CAAC;QACL,CAAC,EACD,CAAC,GAAG,EAAE,OAAO,EAAE,cAAc,CAAC,CACjC;QACD,OAAO,EAAE,WAAW,CAChB,CAAC,CAAgB,EAAE,EAAE;YACjB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;gBAChB,IAAI,OAAO,EAAE,cAAc,EAAE,CAAC;oBAC1B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACvB,CAAC;gBACD,YAAY,CAAC,KAAK,CAAC,CAAC;YACxB,CAAC;QACL,CAAC,EACD,CAAC,GAAG,EAAE,OAAO,EAAE,cAAc,CAAC,CACjC;KACJ,EACD,OAAO,CACV,CAAC;IAEF,gBAAgB,CACZ,QAAQ,EACR,MAAM,EACN,WAAW,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,EAC1C,OAAO,CACV,CAAC,CAAC,iDAAiD;IAEpD,OAAO,SAAS,CAAC;AACrB,CAAC","sourcesContent":["import type { WindowOptions } from \"./eventHooks\";\r\n\r\nimport { useCallback, useState } from \"react\";\r\n\r\nimport { useEventListener } from \"./eventHooks\";\r\n\r\ntype KeyCallbacks = {\r\n onKeyDown?: (e: KeyboardEvent) => void;\r\n onKeyUp?: (e: KeyboardEvent) => void;\r\n};\r\n\r\nexport function useKeyListener(callbacks: KeyCallbacks, options?: WindowOptions) {\r\n const callbackMap = new Map<\"keydown\" | \"keyup\", ((e: KeyboardEvent) => void) | undefined>([\r\n [\"keydown\", callbacks.onKeyDown],\r\n [\"keyup\", callbacks.onKeyUp],\r\n ]);\r\n\r\n for (const eventType of [\"keydown\", \"keyup\"] as const) {\r\n const handler = callbackMap.get(eventType);\r\n if (handler) {\r\n // Ignore repeated events from holding down a key.\r\n const guardedHandler = (e: KeyboardEvent) => {\r\n if (!e.repeat) {\r\n handler(e);\r\n }\r\n };\r\n\r\n useEventListener(\"document\", eventType, guardedHandler, options);\r\n }\r\n }\r\n}\r\n\r\ntype KeyStateOptions = WindowOptions & {\r\n preventDefault?: boolean;\r\n};\r\n\r\nexport function useKeyState(key: string, options?: KeyStateOptions): boolean {\r\n const [isPressed, setIsPressed] = useState(false);\r\n\r\n useKeyListener(\r\n {\r\n onKeyDown: useCallback(\r\n (e: KeyboardEvent) => {\r\n if (e.key === key) {\r\n if (options?.preventDefault) {\r\n e.preventDefault();\r\n }\r\n setIsPressed(true);\r\n }\r\n },\r\n [key, options?.preventDefault]\r\n ),\r\n onKeyUp: useCallback(\r\n (e: KeyboardEvent) => {\r\n if (e.key === key) {\r\n if (options?.preventDefault) {\r\n e.preventDefault();\r\n }\r\n setIsPressed(false);\r\n }\r\n },\r\n [key, options?.preventDefault]\r\n ),\r\n },\r\n options\r\n );\r\n\r\n useEventListener(\r\n \"window\",\r\n \"blur\",\r\n useCallback(() => setIsPressed(false), []),\r\n options\r\n ); // Reset state on window blur to avoid stuck keys\r\n\r\n return isPressed;\r\n}\r\n"]}
|
|
@@ -49,7 +49,7 @@ const Gradient = (props) => {
|
|
|
49
49
|
// Only use compact mode when there are numeric values (spinbuttons) taking up space
|
|
50
50
|
const hasNumericValues = !(gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4) ||
|
|
51
51
|
(gradient.value2 !== undefined && !(gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4));
|
|
52
|
-
return (_jsxs("div", { id: "gradientContainer", className: classes.container, children: [_jsx("div", { className: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (_jsx(ColorPickerPopup, { value: gradient.value1, onChange: (color) => gradientChange({ ...gradient, value1: color }) })) : (_jsx(SyncedSliderInput, { step: 0.01, value: gradient.value1, onChange: (val) => gradientChange({ ...gradient, value1: val }), compact: true })) }), gradient.value2 !== undefined && (_jsx("div", { className: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (_jsx(ColorPickerPopup, { value: gradient.value2, onChange: (color) => gradientChange({ ...gradient, value2: color }) })) : (_jsx(SyncedSliderInput, { step: 0.01, value: gradient.value2, onChange: (val) => gradientChange({ ...gradient, value2: val }), compact: true })) })), _jsx("div", { className: classes.stepSliderWrapper, children: _jsx(SyncedSliderInput, { notifyOnlyOnRelease: true, min: 0, max: 1, step: 0.01, value: gradient.step, onChange: (val) => gradientChange({ ...gradient, step: val }), compact: hasNumericValues, growSlider: !hasNumericValues }) })] }));
|
|
52
|
+
return (_jsxs("div", { id: "gradientContainer", className: classes.container, children: [_jsx("div", { className: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (_jsx(ColorPickerPopup, { value: gradient.value1, onChange: (color) => gradientChange({ ...gradient, value1: color }) })) : (_jsx(SyncedSliderInput, { step: 0.01, precision: 2, value: gradient.value1, onChange: (val) => gradientChange({ ...gradient, value1: val }), compact: true })) }), gradient.value2 !== undefined && (_jsx("div", { className: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper, children: gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (_jsx(ColorPickerPopup, { value: gradient.value2, onChange: (color) => gradientChange({ ...gradient, value2: color }) })) : (_jsx(SyncedSliderInput, { step: 0.01, precision: 2, value: gradient.value2, onChange: (val) => gradientChange({ ...gradient, value2: val }), compact: true })) })), _jsx("div", { className: classes.stepSliderWrapper, children: _jsx(SyncedSliderInput, { notifyOnlyOnRelease: true, min: 0, max: 1, step: 0.01, precision: 2, value: gradient.step, onChange: (val) => gradientChange({ ...gradient, step: val }), compact: hasNumericValues, growSlider: !hasNumericValues }) })] }));
|
|
53
53
|
};
|
|
54
54
|
const FactorGradientCast = Gradient;
|
|
55
55
|
const Color3GradientCast = Gradient;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gradient.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/gradient.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { useEffect, useState } from \"react\";\r\nimport { makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nimport { SyncedSliderInput } from \"./syncedSlider\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"./colorPicker\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport { GradientBlockColorStep } from \"core/Materials/Node/Blocks/gradientBlock\";\r\n\r\nconst useGradientStyles = makeStyles({\r\n container: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacingHorizontalXS, // Reduced gap\r\n width: \"100%\",\r\n minWidth: 0,\r\n overflow: \"hidden\",\r\n },\r\n // Wrapper for factor spin buttons - fixed width, doesn't grow\r\n valueWrapper: {\r\n flex: \"0 0 auto\", // Fixed size, no grow, no shrink\r\n },\r\n // Wrapper for color pickers - fixed size since they're just swatches\r\n colorWrapper: {\r\n flex: \"0 0 auto\",\r\n alignContent: \"center\",\r\n },\r\n // Wrapper for the step slider - takes remaining space and can shrink\r\n stepSliderWrapper: {\r\n flex: \"1 1 0\", // Grow to fill available space\r\n minWidth: \"100px\", // Minimum to fit slider + spinbutton\r\n },\r\n});\r\n\r\ntype GradientProps<T extends number | Color3 | Color4> = {\r\n value1: T;\r\n value2?: T;\r\n step: number;\r\n};\r\n\r\n/**\r\n * Gradient component that displays 1 or 2 color or number inputs next to a slider\r\n * @param props - Component props containing gradient value and change handlers\r\n * @returns A React component\r\n */\r\nconst Gradient: FunctionComponent<PrimitiveProps<GradientProps<number | Color3 | Color4>>> = (props) => {\r\n Gradient.displayName = \"Gradient\";\r\n const [gradient, setGradient] = useState(props.value);\r\n const classes = useGradientStyles();\r\n\r\n useEffect(() => {\r\n setGradient(props.value); // Re-render if props.value changes\r\n }, [props.value]);\r\n\r\n const gradientChange = (newGradient: GradientProps<number | Color3 | Color4>) => {\r\n setGradient(newGradient);\r\n props.onChange(newGradient);\r\n };\r\n // Only use compact mode when there are numeric values (spinbuttons) taking up space\r\n const hasNumericValues =\r\n !(gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4) ||\r\n (gradient.value2 !== undefined && !(gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4));\r\n\r\n return (\r\n <div id=\"gradientContainer\" className={classes.container}>\r\n <div className={gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n {gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (\r\n <ColorPickerPopup value={gradient.value1} onChange={(color) => gradientChange({ ...gradient, value1: color })} />\r\n ) : (\r\n <SyncedSliderInput step={0.01} value={gradient.value1} onChange={(val) => gradientChange({ ...gradient, value1: val })} compact />\r\n )}\r\n </div>\r\n {gradient.value2 !== undefined && (\r\n <div className={gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n {gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (\r\n <ColorPickerPopup value={gradient.value2} onChange={(color) => gradientChange({ ...gradient, value2: color })} />\r\n ) : (\r\n <SyncedSliderInput step={0.01} value={gradient.value2} onChange={(val) => gradientChange({ ...gradient, value2: val })} compact />\r\n )}\r\n </div>\r\n )}\r\n\r\n <div className={classes.stepSliderWrapper}>\r\n <SyncedSliderInput\r\n notifyOnlyOnRelease={true}\r\n min={0}\r\n max={1}\r\n step={0.01}\r\n value={gradient.step}\r\n onChange={(val) => gradientChange({ ...gradient, step: val })}\r\n compact={hasNumericValues}\r\n growSlider={!hasNumericValues}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nconst FactorGradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<number>>>;\r\nconst Color3GradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<Color3>>>;\r\nconst Color4GradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<Color4>>>;\r\n\r\n/**\r\n * Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step\r\n * @param props - Component props containing FactorGradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const FactorGradientComponent: FunctionComponent<PrimitiveProps<FactorGradient>> = (props) => {\r\n return (\r\n <FactorGradientCast\r\n {...props}\r\n value={{ value1: props.value.factor1, value2: props.value.factor2, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new FactorGradient(gradient.step, gradient.value1, gradient.value2))}\r\n />\r\n );\r\n};\r\n/**\r\n * Component wrapper for Color3Gradient that provides color picker and gradient step slider\r\n * @param props - Component props containing Color3Gradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const Color3GradientComponent: FunctionComponent<PrimitiveProps<Color3Gradient>> = (props) => {\r\n return (\r\n <Color3GradientCast\r\n {...props}\r\n value={{ value1: props.value.color, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new Color3Gradient(gradient.step, gradient.value1))}\r\n />\r\n );\r\n};\r\n/**\r\n * Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider\r\n * @param props - Component props containing Color4Gradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const Color4GradientComponent: FunctionComponent<PrimitiveProps<Color4Gradient>> = (props) => {\r\n return (\r\n <Color4GradientCast\r\n {...props}\r\n value={{ value1: props.value.color1, value2: props.value.color2, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new Color4Gradient(gradient.step, gradient.value1, gradient.value2))}\r\n />\r\n );\r\n};\r\n/**\r\n * Component wrapper for GradientBlockColorStep that provides color picker and step slider\r\n * @param props - Component props containing GradientBlockColorStep value and change handler\r\n * @returns A React component\r\n */\r\nexport const ColorStepGradientComponent: FunctionComponent<PrimitiveProps<GradientBlockColorStep>> = (props) => {\r\n return (\r\n <Color3GradientCast\r\n {...props}\r\n value={{ value1: props.value.color, step: props.value.step }}\r\n onChange={(gradient) => props.onChange(new GradientBlockColorStep(gradient.step, gradient.value1))}\r\n />\r\n );\r\n};\r\n"]}
|
|
1
|
+
{"version":3,"file":"gradient.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/gradient.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { useEffect, useState } from \"react\";\r\nimport { makeStyles, tokens } from \"@fluentui/react-components\";\r\n\r\nimport { SyncedSliderInput } from \"./syncedSlider\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup } from \"./colorPicker\";\r\nimport { Color3Gradient, ColorGradient as Color4Gradient, FactorGradient } from \"core/Misc/gradients\";\r\nimport { GradientBlockColorStep } from \"core/Materials/Node/Blocks/gradientBlock\";\r\n\r\nconst useGradientStyles = makeStyles({\r\n container: {\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n gap: tokens.spacingHorizontalXS, // Reduced gap\r\n width: \"100%\",\r\n minWidth: 0,\r\n overflow: \"hidden\",\r\n },\r\n // Wrapper for factor spin buttons - fixed width, doesn't grow\r\n valueWrapper: {\r\n flex: \"0 0 auto\", // Fixed size, no grow, no shrink\r\n },\r\n // Wrapper for color pickers - fixed size since they're just swatches\r\n colorWrapper: {\r\n flex: \"0 0 auto\",\r\n alignContent: \"center\",\r\n },\r\n // Wrapper for the step slider - takes remaining space and can shrink\r\n stepSliderWrapper: {\r\n flex: \"1 1 0\", // Grow to fill available space\r\n minWidth: \"100px\", // Minimum to fit slider + spinbutton\r\n },\r\n});\r\n\r\ntype GradientProps<T extends number | Color3 | Color4> = {\r\n value1: T;\r\n value2?: T;\r\n step: number;\r\n};\r\n\r\n/**\r\n * Gradient component that displays 1 or 2 color or number inputs next to a slider\r\n * @param props - Component props containing gradient value and change handlers\r\n * @returns A React component\r\n */\r\nconst Gradient: FunctionComponent<PrimitiveProps<GradientProps<number | Color3 | Color4>>> = (props) => {\r\n Gradient.displayName = \"Gradient\";\r\n const [gradient, setGradient] = useState(props.value);\r\n const classes = useGradientStyles();\r\n\r\n useEffect(() => {\r\n setGradient(props.value); // Re-render if props.value changes\r\n }, [props.value]);\r\n\r\n const gradientChange = (newGradient: GradientProps<number | Color3 | Color4>) => {\r\n setGradient(newGradient);\r\n props.onChange(newGradient);\r\n };\r\n // Only use compact mode when there are numeric values (spinbuttons) taking up space\r\n const hasNumericValues =\r\n !(gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4) ||\r\n (gradient.value2 !== undefined && !(gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4));\r\n\r\n return (\r\n <div id=\"gradientContainer\" className={classes.container}>\r\n <div className={gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n {gradient.value1 instanceof Color3 || gradient.value1 instanceof Color4 ? (\r\n <ColorPickerPopup value={gradient.value1} onChange={(color) => gradientChange({ ...gradient, value1: color })} />\r\n ) : (\r\n <SyncedSliderInput step={0.01} precision={2} value={gradient.value1} onChange={(val) => gradientChange({ ...gradient, value1: val })} compact />\r\n )}\r\n </div>\r\n {gradient.value2 !== undefined && (\r\n <div className={gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? classes.colorWrapper : classes.valueWrapper}>\r\n {gradient.value2 instanceof Color3 || gradient.value2 instanceof Color4 ? (\r\n <ColorPickerPopup value={gradient.value2} onChange={(color) => gradientChange({ ...gradient, value2: color })} />\r\n ) : (\r\n <SyncedSliderInput step={0.01} precision={2} value={gradient.value2} onChange={(val) => gradientChange({ ...gradient, value2: val })} compact />\r\n )}\r\n </div>\r\n )}\r\n\r\n <div className={classes.stepSliderWrapper}>\r\n <SyncedSliderInput\r\n notifyOnlyOnRelease={true}\r\n min={0}\r\n max={1}\r\n step={0.01}\r\n precision={2}\r\n value={gradient.step}\r\n onChange={(val) => gradientChange({ ...gradient, step: val })}\r\n compact={hasNumericValues}\r\n growSlider={!hasNumericValues}\r\n />\r\n </div>\r\n </div>\r\n );\r\n};\r\n\r\nconst FactorGradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<number>>>;\r\nconst Color3GradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<Color3>>>;\r\nconst Color4GradientCast = Gradient as FunctionComponent<PrimitiveProps<GradientProps<Color4>>>;\r\n\r\n/**\r\n * Component wrapper for FactorGradient that provides slider inputs for factor1, factor2, and gradient step\r\n * @param props - Component props containing FactorGradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const FactorGradientComponent: FunctionComponent<PrimitiveProps<FactorGradient>> = (props) => {\r\n return (\r\n <FactorGradientCast\r\n {...props}\r\n value={{ value1: props.value.factor1, value2: props.value.factor2, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new FactorGradient(gradient.step, gradient.value1, gradient.value2))}\r\n />\r\n );\r\n};\r\n/**\r\n * Component wrapper for Color3Gradient that provides color picker and gradient step slider\r\n * @param props - Component props containing Color3Gradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const Color3GradientComponent: FunctionComponent<PrimitiveProps<Color3Gradient>> = (props) => {\r\n return (\r\n <Color3GradientCast\r\n {...props}\r\n value={{ value1: props.value.color, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new Color3Gradient(gradient.step, gradient.value1))}\r\n />\r\n );\r\n};\r\n/**\r\n * Component wrapper for Color4Gradient that provides color pickers for color1, color2, and gradient step slider\r\n * @param props - Component props containing Color4Gradient value and change handler\r\n * @returns A React component\r\n */\r\nexport const Color4GradientComponent: FunctionComponent<PrimitiveProps<Color4Gradient>> = (props) => {\r\n return (\r\n <Color4GradientCast\r\n {...props}\r\n value={{ value1: props.value.color1, value2: props.value.color2, step: props.value.gradient }}\r\n onChange={(gradient) => props.onChange(new Color4Gradient(gradient.step, gradient.value1, gradient.value2))}\r\n />\r\n );\r\n};\r\n/**\r\n * Component wrapper for GradientBlockColorStep that provides color picker and step slider\r\n * @param props - Component props containing GradientBlockColorStep value and change handler\r\n * @returns A React component\r\n */\r\nexport const ColorStepGradientComponent: FunctionComponent<PrimitiveProps<GradientBlockColorStep>> = (props) => {\r\n return (\r\n <Color3GradientCast\r\n {...props}\r\n value={{ value1: props.value.color, step: props.value.step }}\r\n onChange={(gradient) => props.onChange(new GradientBlockColorStep(gradient.step, gradient.value1))}\r\n />\r\n );\r\n};\r\n"]}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { FunctionComponent } from "react";
|
|
2
|
+
import type { PrimitiveProps } from "./primitive.js";
|
|
3
|
+
export type SliderProps = PrimitiveProps<number> & {
|
|
4
|
+
/** Minimum value for the slider */
|
|
5
|
+
min?: number;
|
|
6
|
+
/** Maximum value for the slider */
|
|
7
|
+
max?: number;
|
|
8
|
+
/** Step size for the slider */
|
|
9
|
+
step?: number;
|
|
10
|
+
/** When true, onChange is only called when the user releases the slider, not during drag */
|
|
11
|
+
notifyOnlyOnRelease?: boolean;
|
|
12
|
+
/** Optional pointer down handler */
|
|
13
|
+
onPointerDown?: () => void;
|
|
14
|
+
/** Optional pointer up handler */
|
|
15
|
+
onPointerUp?: () => void;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* A slider primitive that wraps the Fluent UI Slider with step scaling, drag tracking, and optional notify-on-release behavior.
|
|
19
|
+
* Follows the same pattern as other primitives (e.g. Switch) — no wrapper divs, just the Fluent component with logic.
|
|
20
|
+
* @param props
|
|
21
|
+
* @returns Slider component
|
|
22
|
+
*/
|
|
23
|
+
export declare const Slider: FunctionComponent<SliderProps>;
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Slider as FluentSlider } from "@fluentui/react-components";
|
|
3
|
+
import { useEffect, useState, useRef, useContext } from "react";
|
|
4
|
+
import { ToolContext } from "../hoc/fluentToolWrapper.js";
|
|
5
|
+
/**
|
|
6
|
+
* A slider primitive that wraps the Fluent UI Slider with step scaling, drag tracking, and optional notify-on-release behavior.
|
|
7
|
+
* Follows the same pattern as other primitives (e.g. Switch) — no wrapper divs, just the Fluent component with logic.
|
|
8
|
+
* @param props
|
|
9
|
+
* @returns Slider component
|
|
10
|
+
*/
|
|
11
|
+
export const Slider = (props) => {
|
|
12
|
+
Slider.displayName = "Slider";
|
|
13
|
+
const { size } = useContext(ToolContext);
|
|
14
|
+
const [value, setValue] = useState(props.value ?? 0);
|
|
15
|
+
const pendingValueRef = useRef(undefined);
|
|
16
|
+
const isDraggingRef = useRef(false);
|
|
17
|
+
// NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.
|
|
18
|
+
// To avoid this, we scale the min/max based on the step so we can always make step undefined.
|
|
19
|
+
// The actual step size in the Fluent slider is 1 when it is set to undefined.
|
|
20
|
+
const min = props.min ?? 0;
|
|
21
|
+
const max = props.max ?? 100;
|
|
22
|
+
const step = props.step ?? 1;
|
|
23
|
+
useEffect(() => {
|
|
24
|
+
!isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging
|
|
25
|
+
}, [props.value]);
|
|
26
|
+
const handleSliderChange = (_, data) => {
|
|
27
|
+
const newValue = data.value * step;
|
|
28
|
+
setValue(newValue);
|
|
29
|
+
if (props.notifyOnlyOnRelease) {
|
|
30
|
+
// Store the value but don't notify parent yet
|
|
31
|
+
pendingValueRef.current = newValue;
|
|
32
|
+
}
|
|
33
|
+
else {
|
|
34
|
+
// Notify parent as slider changes
|
|
35
|
+
props.onChange(newValue);
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
const handleSliderPointerDown = () => {
|
|
39
|
+
isDraggingRef.current = true;
|
|
40
|
+
};
|
|
41
|
+
const handleSliderPointerUp = () => {
|
|
42
|
+
if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {
|
|
43
|
+
props.onChange(pendingValueRef.current);
|
|
44
|
+
pendingValueRef.current = undefined;
|
|
45
|
+
}
|
|
46
|
+
isDraggingRef.current = false;
|
|
47
|
+
};
|
|
48
|
+
return (_jsx(FluentSlider, { className: props.className, size: size, min: min / step, max: max / step, step: undefined, value: value / step, disabled: props.disabled, onChange: handleSliderChange, onPointerDown: () => {
|
|
49
|
+
handleSliderPointerDown();
|
|
50
|
+
props.onPointerDown?.();
|
|
51
|
+
}, onPointerUp: () => {
|
|
52
|
+
handleSliderPointerUp();
|
|
53
|
+
props.onPointerUp?.();
|
|
54
|
+
} }));
|
|
55
|
+
};
|
|
56
|
+
//# sourceMappingURL=slider.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/slider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAEpE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAiBvD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC5D,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,MAAM,CAAS,SAAS,CAAC,CAAC;IAClD,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAEpC,iGAAiG;IACjG,8FAA8F;IAC9F,8EAA8E;IAC9E,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3B,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACX,CAAC,aAAa,CAAC,OAAO,IAAI,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,uFAAuF;IACjJ,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,IAAwB,EAAE,EAAE;QACtF,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QACnC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAEnB,IAAI,KAAK,CAAC,mBAAmB,EAAE,CAAC;YAC5B,8CAA8C;YAC9C,eAAe,CAAC,OAAO,GAAG,QAAQ,CAAC;QACvC,CAAC;aAAM,CAAC;YACJ,kCAAkC;YAClC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC7B,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACjC,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC;IACjC,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE;QAC/B,IAAI,KAAK,CAAC,mBAAmB,IAAI,aAAa,CAAC,OAAO,IAAI,eAAe,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC9F,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;YACxC,eAAe,CAAC,OAAO,GAAG,SAAS,CAAC;QACxC,CAAC;QACD,aAAa,CAAC,OAAO,GAAG,KAAK,CAAC;IAClC,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,YAAY,IACT,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,GAAG,EAAE,GAAG,GAAG,IAAI,EACf,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,QAAQ,EAAE,kBAAkB,EAC5B,aAAa,EAAE,GAAG,EAAE;YAChB,uBAAuB,EAAE,CAAC;YAC1B,KAAK,CAAC,aAAa,EAAE,EAAE,CAAC;QAC5B,CAAC,EACD,WAAW,EAAE,GAAG,EAAE;YACd,qBAAqB,EAAE,CAAC;YACxB,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC;QAC1B,CAAC,GACH,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { Slider as FluentSlider } from \"@fluentui/react-components\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState, useRef, useContext } from \"react\";\r\nimport type { PrimitiveProps } from \"./primitive\";\r\nimport { ToolContext } from \"../hoc/fluentToolWrapper\";\r\n\r\nexport type SliderProps = PrimitiveProps<number> & {\r\n /** Minimum value for the slider */\r\n min?: number;\r\n /** Maximum value for the slider */\r\n max?: number;\r\n /** Step size for the slider */\r\n step?: number;\r\n /** When true, onChange is only called when the user releases the slider, not during drag */\r\n notifyOnlyOnRelease?: boolean;\r\n /** Optional pointer down handler */\r\n onPointerDown?: () => void;\r\n /** Optional pointer up handler */\r\n onPointerUp?: () => void;\r\n};\r\n\r\n/**\r\n * A slider primitive that wraps the Fluent UI Slider with step scaling, drag tracking, and optional notify-on-release behavior.\r\n * Follows the same pattern as other primitives (e.g. Switch) — no wrapper divs, just the Fluent component with logic.\r\n * @param props\r\n * @returns Slider component\r\n */\r\nexport const Slider: FunctionComponent<SliderProps> = (props) => {\r\n Slider.displayName = \"Slider\";\r\n const { size } = useContext(ToolContext);\r\n const [value, setValue] = useState<number>(props.value ?? 0);\r\n const pendingValueRef = useRef<number>(undefined);\r\n const isDraggingRef = useRef(false);\r\n\r\n // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n // The actual step size in the Fluent slider is 1 when it is set to undefined.\r\n const min = props.min ?? 0;\r\n const max = props.max ?? 100;\r\n const step = props.step ?? 1;\r\n\r\n useEffect(() => {\r\n !isDraggingRef.current && setValue(props.value ?? 0); // Update local state when props.value changes as long as user is not actively dragging\r\n }, [props.value]);\r\n\r\n const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n const newValue = data.value * step;\r\n setValue(newValue);\r\n\r\n if (props.notifyOnlyOnRelease) {\r\n // Store the value but don't notify parent yet\r\n pendingValueRef.current = newValue;\r\n } else {\r\n // Notify parent as slider changes\r\n props.onChange(newValue);\r\n }\r\n };\r\n\r\n const handleSliderPointerDown = () => {\r\n isDraggingRef.current = true;\r\n };\r\n\r\n const handleSliderPointerUp = () => {\r\n if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {\r\n props.onChange(pendingValueRef.current);\r\n pendingValueRef.current = undefined;\r\n }\r\n isDraggingRef.current = false;\r\n };\r\n\r\n return (\r\n <FluentSlider\r\n className={props.className}\r\n size={size}\r\n min={min / step}\r\n max={max / step}\r\n step={undefined}\r\n value={value / step}\r\n disabled={props.disabled}\r\n onChange={handleSliderChange}\r\n onPointerDown={() => {\r\n handleSliderPointerDown();\r\n props.onPointerDown?.();\r\n }}\r\n onPointerUp={() => {\r\n handleSliderPointerUp();\r\n props.onPointerUp?.();\r\n }}\r\n />\r\n );\r\n};\r\n"]}
|
|
@@ -8,9 +8,17 @@ export type SpinButtonProps = PrimitiveProps<number> & {
|
|
|
8
8
|
unit?: string;
|
|
9
9
|
forceInt?: boolean;
|
|
10
10
|
validator?: (value: number) => boolean;
|
|
11
|
+
/** Optional fixed precision (number of decimal digits). Overrides the automatically computed display precision. */
|
|
12
|
+
precision?: number;
|
|
11
13
|
/** Optional className for the input element */
|
|
12
14
|
inputClassName?: string;
|
|
15
|
+
/** When true, hides the drag-to-scrub button */
|
|
16
|
+
disableDragButton?: boolean;
|
|
13
17
|
};
|
|
18
|
+
/**
|
|
19
|
+
* A numeric input with a vertical drag-to-scrub icon (ArrowsBidirectionalRegular rotated 90°).
|
|
20
|
+
* Click-and-drag up/down on the icon to increment/decrement the value.
|
|
21
|
+
*/
|
|
14
22
|
export declare const SpinButton: import("react").ForwardRefExoticComponent<import("./primitive.js").BasePrimitiveProps & {
|
|
15
23
|
value: number;
|
|
16
24
|
infoLabel?: import("./infoLabel.js").InfoLabelParentProps;
|
|
@@ -25,6 +33,10 @@ export declare const SpinButton: import("react").ForwardRefExoticComponent<impor
|
|
|
25
33
|
unit?: string;
|
|
26
34
|
forceInt?: boolean;
|
|
27
35
|
validator?: (value: number) => boolean;
|
|
36
|
+
/** Optional fixed precision (number of decimal digits). Overrides the automatically computed display precision. */
|
|
37
|
+
precision?: number;
|
|
28
38
|
/** Optional className for the input element */
|
|
29
39
|
inputClassName?: string;
|
|
40
|
+
/** When true, hides the drag-to-scrub button */
|
|
41
|
+
disableDragButton?: boolean;
|
|
30
42
|
} & import("react").RefAttributes<HTMLInputElement>>;
|