@babylonjs/shared-ui-components 9.26.0 → 9.26.2

package/copyCommandToClipboard.d.ts

@@ -1,5 +1,5 @@
 export declare function copyCommandToClipboard(strCommand: string): void;
-export declare function getClassNameWithNamespace(obj: any): {
+export declare function getClassNameWithNamespace(obj: unknown): {
     className: string;
     babylonNamespace: string;
 };

package/copyCommandToClipboard.js

@@ -1,4 +1,3 @@
-import { GetClassName } from "@babylonjs/core/Misc/typeStore.js";
 // Check if BABYLON namespace exists
 let BabylonNamespace = "";
 const GlobalObject = typeof global !== "undefined" ? global : typeof window !== "undefined" ? window : undefined;
@@ -27,7 +26,11 @@ export function copyCommandToClipboard(strCommand) {
 // babylonNamespace is either "" (ES6) or "BABYLON."
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function getClassNameWithNamespace(obj) {
-    let className = GetClassName(obj);
+    if ((typeof obj !== "object" && typeof obj !== "function") || obj === null) {
+        return { className: "Unknown", babylonNamespace: "" };
+    }
+    const candidate = obj;
+    let className = candidate.getClassName?.() ?? candidate.constructor?.name ?? "Unknown";
     if (className.includes("BABYLON.")) {
         className = className.split("BABYLON.")[1];
     }

package/copyCommandToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"copyCommandToClipboard.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/copyCommandToClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAEnD,oCAAoC;AACpC,IAAI,gBAAgB,GAAG,EAAE,CAAC;AAC1B,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;AACjH,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE,CAAC;IACtC,IAAI,OAAa,YAAa,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;QACrD,gBAAgB,GAAG,UAAU,CAAC;IAClC,CAAC;AACL,CAAC;AAED,2EAA2E;AAC3E,iCAAiC;AACjC,gEAAgE;AAChE,MAAM,UAAU,sBAAsB,CAAC,UAAkB;IACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;QACtB,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QACrC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,MAAM,CAAC,YAAY,EAAG,CAAC,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,YAAY,EAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,MAAM,EAAE,CAAC;AACrB,CAAC;AAED,iDAAiD;AACjD,oDAAoD;AACpD,gEAAgE;AAChE,MAAM,UAAU,yBAAyB,CAAC,GAAQ;IAC9C,IAAI,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;QACjC,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AAC7D,CAAC","sourcesContent":["import { GetClassName } from \"core/Misc/typeStore\";\r\n\r\n// Check if BABYLON namespace exists\r\nlet BabylonNamespace = \"\";\r\nconst GlobalObject = typeof global !== \"undefined\" ? global : typeof window !== \"undefined\" ? window : undefined;\r\nif (typeof GlobalObject !== \"undefined\") {\r\n    if (typeof (<any>GlobalObject).BABYLON !== \"undefined\") {\r\n        BabylonNamespace = \"BABYLON.\";\r\n    }\r\n}\r\n\r\n// Inspired by previous copyToClipboard() function which was copying Color3\r\n// Copies strCommand to clipboard\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function copyCommandToClipboard(strCommand: string) {\r\n    const element = document.createElement(\"div\");\r\n    element.textContent = strCommand;\r\n    document.body.appendChild(element);\r\n\r\n    if (window.getSelection) {\r\n        const range = document.createRange();\r\n        range.selectNode(element);\r\n        window.getSelection()!.removeAllRanges();\r\n        window.getSelection()!.addRange(range);\r\n    }\r\n\r\n    document.execCommand(\"copy\");\r\n    element.remove();\r\n}\r\n\r\n// Return the class name of the considered target\r\n// babylonNamespace is either \"\" (ES6) or \"BABYLON.\"\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function getClassNameWithNamespace(obj: any): { className: string; babylonNamespace: string } {\r\n    let className = GetClassName(obj);\r\n    if (className.includes(\"BABYLON.\")) {\r\n        className = className.split(\"BABYLON.\")[1];\r\n    }\r\n    return { className, babylonNamespace: BabylonNamespace };\r\n}\r\n"]}
+{"version":3,"file":"copyCommandToClipboard.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/copyCommandToClipboard.ts"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,IAAI,gBAAgB,GAAG,EAAE,CAAC;AAC1B,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;AACjH,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE,CAAC;IACtC,IAAI,OAAa,YAAa,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;QACrD,gBAAgB,GAAG,UAAU,CAAC;IAClC,CAAC;AACL,CAAC;AAED,2EAA2E;AAC3E,iCAAiC;AACjC,gEAAgE;AAChE,MAAM,UAAU,sBAAsB,CAAC,UAAkB;IACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;QACtB,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QACrC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,MAAM,CAAC,YAAY,EAAG,CAAC,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,YAAY,EAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,MAAM,EAAE,CAAC;AACrB,CAAC;AAED,iDAAiD;AACjD,oDAAoD;AACpD,gEAAgE;AAChE,MAAM,UAAU,yBAAyB,CAAC,GAAY;IAClD,IAAI,CAAC,OAAO,GAAG,KAAK,QAAQ,IAAI,OAAO,GAAG,KAAK,UAAU,CAAC,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;QACzE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,gBAAgB,EAAE,EAAE,EAAE,CAAC;IAC1D,CAAC;IAED,MAAM,SAAS,GAAG,GAAuE,CAAC;IAC1F,IAAI,SAAS,GAAG,SAAS,CAAC,YAAY,EAAE,EAAE,IAAI,SAAS,CAAC,WAAW,EAAE,IAAI,IAAI,SAAS,CAAC;IACvF,IAAI,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;QACjC,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AAC7D,CAAC","sourcesContent":["// Check if BABYLON namespace exists\r\nlet BabylonNamespace = \"\";\r\nconst GlobalObject = typeof global !== \"undefined\" ? global : typeof window !== \"undefined\" ? window : undefined;\r\nif (typeof GlobalObject !== \"undefined\") {\r\n    if (typeof (<any>GlobalObject).BABYLON !== \"undefined\") {\r\n        BabylonNamespace = \"BABYLON.\";\r\n    }\r\n}\r\n\r\n// Inspired by previous copyToClipboard() function which was copying Color3\r\n// Copies strCommand to clipboard\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function copyCommandToClipboard(strCommand: string) {\r\n    const element = document.createElement(\"div\");\r\n    element.textContent = strCommand;\r\n    document.body.appendChild(element);\r\n\r\n    if (window.getSelection) {\r\n        const range = document.createRange();\r\n        range.selectNode(element);\r\n        window.getSelection()!.removeAllRanges();\r\n        window.getSelection()!.addRange(range);\r\n    }\r\n\r\n    document.execCommand(\"copy\");\r\n    element.remove();\r\n}\r\n\r\n// Return the class name of the considered target\r\n// babylonNamespace is either \"\" (ES6) or \"BABYLON.\"\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function getClassNameWithNamespace(obj: unknown): { className: string; babylonNamespace: string } {\r\n    if ((typeof obj !== \"object\" && typeof obj !== \"function\") || obj === null) {\r\n        return { className: \"Unknown\", babylonNamespace: \"\" };\r\n    }\r\n\r\n    const candidate = obj as { getClassName?: () => string; constructor?: { name?: string } };\r\n    let className = candidate.getClassName?.() ?? candidate.constructor?.name ?? \"Unknown\";\r\n    if (className.includes(\"BABYLON.\")) {\r\n        className = className.split(\"BABYLON.\")[1];\r\n    }\r\n    return { className, babylonNamespace: BabylonNamespace };\r\n}\r\n"]}

package/fluent/hoc/propertyLines/colorPropertyLine.d.ts

@@ -3,5 +3,15 @@ import { type PropertyLineProps } from "./propertyLine.js";
 import { type Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
 import { type ColorPickerProps } from "../../primitives/colorPicker.js";
 export type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps<Color3 | Color4>;
+/**
+ * Edits a Babylon.js Color3 value.
+ * @param props The controlled color and property-line presentation.
+ * @returns The Color3 property line.
+ */
 export declare const Color3PropertyLine: FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps<Color3>>;
+/**
+ * Edits a Babylon.js Color4 value.
+ * @param props The controlled color and property-line presentation.
+ * @returns The Color4 property line.
+ */
 export declare const Color4PropertyLine: FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps<Color4>>;

package/fluent/hoc/propertyLines/colorPropertyLine.js

@@ -1,40 +1,31 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useState } from "react";
-import { PropertyLine } from "./propertyLine.js";
-import { SyncedSliderPropertyLine } from "./syncedSliderPropertyLine.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { Color4 } from "@babylonjs/core/Maths/math.color.js";
 import { ColorPickerPopup } from "../../primitives/colorPicker.js";
+import { ControlledColorPropertyLine } from "./colorPropertyLineCore.js";
+const Picker = (props) => _jsx(ColorPickerPopup, { ...props });
+const Adapter = {
+    picker: Picker,
+    getColor: (value) => value,
+    createColor: (color, source) => {
+        if (source instanceof Color4) {
+            return new Color4(color.r, color.g, color.b, color.a ?? source.a);
+        }
+        return source.clone().set(color.r, color.g, color.b);
+    },
+};
+const ColorPropertyLine = forwardRef((props, ref) => _jsx(ControlledColorPropertyLine, { ...props, adapter: Adapter, propertyLineRef: ref }));
+ColorPropertyLine.displayName = "ColorPropertyLine";
 /**
- * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values
- * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly
- * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color
- * @returns Component wrapping a colorPicker component with a property line
+ * Edits a Babylon.js Color3 value.
+ * @param props The controlled color and property-line presentation.
+ * @returns The Color3 property line.
  */
-const ColorPropertyLine = forwardRef((props, ref) => {
-    ColorPropertyLine.displayName = "ColorPropertyLine";
-    const [color, setColor] = useState(props.value);
-    useEffect(() => {
-        setColor(props.value);
-    }, [props.value]);
-    const onSliderChange = (value, key) => {
-        let newColor;
-        if (key === "a") {
-            newColor = Color4.FromColor3(color, value);
-        }
-        else {
-            newColor = color.clone();
-            newColor[key] = value / 255;
-        }
-        setColor(newColor); // Create a new object to trigger re-render
-        props.onChange(newColor);
-    };
-    const onColorPickerChange = (newColor) => {
-        setColor(newColor);
-        props.onChange(newColor);
-    };
-    return (_jsx(PropertyLine, { ref: ref, ...props, expandedContent: color ? _jsx(ColorSliders, { color: color, onSliderChange: onSliderChange }) : undefined, children: _jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
-});
-const ColorSliders = ({ color, onSliderChange }) => (_jsxs(_Fragment, { children: [_jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), _jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), _jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color instanceof Color4 && _jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") })] }));
 export const Color3PropertyLine = ColorPropertyLine;
+/**
+ * Edits a Babylon.js Color4 value.
+ * @param props The controlled color and property-line presentation.
+ * @returns The Color4 property line.
+ */
 export const Color4PropertyLine = ColorPropertyLine;
 //# sourceMappingURL=colorPropertyLine.js.map

package/fluent/hoc/propertyLines/colorPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLine.tsx"],"names":[],"mappings":"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","sourcesContent":["import { type FunctionComponent, forwardRef, useEffect, useState } from \"react\";\r\n\r\nimport { type PropertyLineProps, PropertyLine } from \"./propertyLine\";\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\n\r\nimport { type Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup, type ColorPickerProps } from \"../../primitives/colorPicker\";\r\n\r\nexport type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps<Color3 | Color4>;\r\n\r\n/**\r\n * Reusable component which renders a color property line containing a label, colorPicker popout, and expandable RGBA values\r\n * The expandable RGBA values are synced sliders that allow the user to modify the color's RGBA values directly\r\n * @param props - PropertyLine props, replacing children with a color object so that we can properly display the color\r\n * @returns Component wrapping a colorPicker component with a property line\r\n */\r\nconst ColorPropertyLine = forwardRef<HTMLDivElement, ColorPropertyLineProps>((props, ref) => {\r\n    ColorPropertyLine.displayName = \"ColorPropertyLine\";\r\n    const [color, setColor] = useState(props.value);\r\n\r\n    useEffect(() => {\r\n        setColor(props.value);\r\n    }, [props.value]);\r\n\r\n    const onSliderChange = (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => {\r\n        let newColor: Color3 | Color4;\r\n        if (key === \"a\") {\r\n            newColor = Color4.FromColor3(color, value);\r\n        } else {\r\n            newColor = color.clone();\r\n            newColor[key] = value / 255;\r\n        }\r\n\r\n        setColor(newColor); // Create a new object to trigger re-render\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    const onColorPickerChange = (newColor: Color3 | Color4) => {\r\n        setColor(newColor);\r\n        props.onChange(newColor);\r\n    };\r\n\r\n    return (\r\n        <PropertyLine ref={ref} {...props} expandedContent={color ? <ColorSliders color={color} onSliderChange={onSliderChange} /> : undefined}>\r\n            <ColorPickerPopup {...props} onChange={onColorPickerChange} value={color} />\r\n        </PropertyLine>\r\n    );\r\n});\r\n\r\ntype ColorSlidersProps = {\r\n    color: Color3 | Color4;\r\n    onSliderChange: (value: number, key: \"r\" | \"g\" | \"b\" | \"a\") => void;\r\n};\r\n\r\nconst ColorSliders: FunctionComponent<ColorSlidersProps> = ({ color, onSliderChange }) => (\r\n    <>\r\n        <SyncedSliderPropertyLine label=\"R\" value={color.r * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"r\")} />\r\n        <SyncedSliderPropertyLine label=\"G\" value={color.g * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"g\")} />\r\n        <SyncedSliderPropertyLine label=\"B\" value={color.b * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"b\")} />\r\n        {color instanceof Color4 && <SyncedSliderPropertyLine label=\"A\" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, \"a\")} />}\r\n    </>\r\n);\r\n\r\nexport const Color3PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps<Color3>>;\r\nexport const Color4PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps<Color4>>;\r\n"]}
+{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,UAAU,EAAE,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAe,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAyB,MAAM,8BAA8B,CAAC;AACvF,OAAO,EAAE,2BAA2B,EAAiC,MAAM,yBAAyB,CAAC;AAIrG,MAAM,MAAM,GAAyD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,gBAAgB,OAAK,KAAK,GAAI,CAAC;AAChH,MAAM,OAAO,GAA8C;IACvD,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK;IAC1B,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE;QAC3B,IAAI,MAAM,YAAY,MAAM,EAAE,CAAC;YAC3B,OAAO,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC;QACtE,CAAC;QACD,OAAO,MAAM,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;IACzD,CAAC;CACJ,CAAC;AAEF,MAAM,iBAAiB,GAAG,UAAU,CAAyC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,KAAC,2BAA2B,OAAK,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,GAAG,GAAI,CAAC,CAAC;AACjL,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC;AAEpD;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAA4F,CAAC;AAC/H;;;;GAIG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG,iBAA4F,CAAC","sourcesContent":["import { type FunctionComponent, forwardRef } from \"react\";\r\n\r\nimport { type PropertyLineProps } from \"./propertyLine\";\r\n\r\nimport { type Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorPickerPopup, type ColorPickerProps } from \"../../primitives/colorPicker\";\r\nimport { ControlledColorPropertyLine, type ColorPropertyLineAdapter } from \"./colorPropertyLineCore\";\r\n\r\nexport type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps<Color3 | Color4>;\r\n\r\nconst Picker: FunctionComponent<ColorPickerProps<Color3 | Color4>> = (props) => <ColorPickerPopup {...props} />;\r\nconst Adapter: ColorPropertyLineAdapter<Color3 | Color4> = {\r\n    picker: Picker,\r\n    getColor: (value) => value,\r\n    createColor: (color, source) => {\r\n        if (source instanceof Color4) {\r\n            return new Color4(color.r, color.g, color.b, color.a ?? source.a);\r\n        }\r\n        return source.clone().set(color.r, color.g, color.b);\r\n    },\r\n};\r\n\r\nconst ColorPropertyLine = forwardRef<HTMLDivElement, ColorPropertyLineProps>((props, ref) => <ControlledColorPropertyLine {...props} adapter={Adapter} propertyLineRef={ref} />);\r\nColorPropertyLine.displayName = \"ColorPropertyLine\";\r\n\r\n/**\r\n * Edits a Babylon.js Color3 value.\r\n * @param props The controlled color and property-line presentation.\r\n * @returns The Color3 property line.\r\n */\r\nexport const Color3PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps<Color3>>;\r\n/**\r\n * Edits a Babylon.js Color4 value.\r\n * @param props The controlled color and property-line presentation.\r\n * @returns The Color4 property line.\r\n */\r\nexport const Color4PropertyLine = ColorPropertyLine as FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps<Color4>>;\r\n"]}

package/fluent/hoc/propertyLines/colorPropertyLineCore.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentType, type Ref } from "react";
+import { type StructuralColorAdapter } from "../../primitives/structuralColorPicker.js";
+import { type PrimitiveProps } from "../../primitives/primitive.js";
+import { type PropertyLineProps } from "./propertyLine.js";
+export type ColorPropertyLineAdapter<ValueT> = StructuralColorAdapter<ValueT> & Readonly<{
+    picker: ComponentType<PrimitiveProps<ValueT> & {
+        isLinearMode?: boolean;
+    }>;
+}>;
+export type ControlledColorPropertyLineProps<ValueT> = PrimitiveProps<ValueT> & PropertyLineProps<ValueT> & Readonly<{
+    adapter: ColorPropertyLineAdapter<ValueT>;
+    isLinearMode?: boolean;
+    propertyLineRef?: Ref<HTMLDivElement>;
+}>;
+/**
+ * Runtime-neutral controlled color editor with RGB or RGBA sliders and an injected picker.
+ * @param props The controlled color, runtime adapter, and property-line presentation.
+ * @returns The color property line.
+ */
+export declare const ControlledColorPropertyLine: <ValueT>(props: ControlledColorPropertyLineProps<ValueT>) => import("react/jsx-runtime").JSX.Element;

package/fluent/hoc/propertyLines/colorPropertyLineCore.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement, useEffect, useState } from "react";
+import { PropertyLine } from "./propertyLine.js";
+import { SyncedSliderPropertyLine } from "./syncedSliderPropertyLine.js";
+/**
+ * Runtime-neutral controlled color editor with RGB or RGBA sliders and an injected picker.
+ * @param props The controlled color, runtime adapter, and property-line presentation.
+ * @returns The color property line.
+ */
+export const ControlledColorPropertyLine = (props) => {
+    const { adapter, value, onChange, propertyLineRef } = props;
+    const [currentValue, setCurrentValue] = useState(value);
+    useEffect(() => {
+        setCurrentValue(value);
+    }, [value]);
+    const handleChange = (newValue) => {
+        setCurrentValue(newValue);
+        onChange(newValue);
+    };
+    const onSliderChange = (componentValue, component) => {
+        const color = adapter.getColor(currentValue);
+        handleChange(adapter.createColor({
+            ...color,
+            [component]: component === "a" ? componentValue : componentValue / 255,
+        }, currentValue));
+    };
+    const color = adapter.getColor(currentValue);
+    return (_jsx(PropertyLine, { ref: propertyLineRef, ...props, expandedContent: _jsx(ColorSliders, { color: color, onSliderChange: onSliderChange }), children: createElement(adapter.picker, {
+            value: currentValue,
+            onChange: handleChange,
+            isLinearMode: props.isLinearMode,
+            disabled: props.disabled,
+            className: props.className,
+            style: props.style,
+            title: props.title,
+        }) }));
+};
+const ColorSliders = (props) => {
+    const { color, onSliderChange } = props;
+    return (_jsxs(_Fragment, { children: [_jsx(SyncedSliderPropertyLine, { label: "R", value: color.r * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "r") }), _jsx(SyncedSliderPropertyLine, { label: "G", value: color.g * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "g") }), _jsx(SyncedSliderPropertyLine, { label: "B", value: color.b * 255, min: 0, max: 255, onChange: (value) => onSliderChange(value, "b") }), color.a === undefined ? undefined : (_jsx(SyncedSliderPropertyLine, { label: "A", value: color.a, min: 0, max: 1, step: 0.01, onChange: (value) => onSliderChange(value, "a") }))] }));
+};
+//# sourceMappingURL=colorPropertyLineCore.js.map

package/fluent/hoc/propertyLines/colorPropertyLineCore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPropertyLineCore.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLineCore.tsx"],"names":[],"mappings":"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","sourcesContent":["import { createElement, type ComponentType, type FunctionComponent, type Ref, useEffect, useState } from \"react\";\r\n\r\nimport { type StructuralColor, type StructuralColorAdapter } from \"../../primitives/structuralColorPicker\";\r\nimport { type PrimitiveProps } from \"../../primitives/primitive\";\r\nimport { type PropertyLineProps, PropertyLine } from \"./propertyLine\";\r\nimport { SyncedSliderPropertyLine } from \"./syncedSliderPropertyLine\";\r\n\r\nexport type ColorPropertyLineAdapter<ValueT> = StructuralColorAdapter<ValueT> &\r\n    Readonly<{\r\n        picker: ComponentType<PrimitiveProps<ValueT> & { isLinearMode?: boolean }>;\r\n    }>;\r\n\r\nexport type ControlledColorPropertyLineProps<ValueT> = PrimitiveProps<ValueT> &\r\n    PropertyLineProps<ValueT> &\r\n    Readonly<{\r\n        adapter: ColorPropertyLineAdapter<ValueT>;\r\n        isLinearMode?: boolean;\r\n        propertyLineRef?: Ref<HTMLDivElement>;\r\n    }>;\r\n\r\n/**\r\n * Runtime-neutral controlled color editor with RGB or RGBA sliders and an injected picker.\r\n * @param props The controlled color, runtime adapter, and property-line presentation.\r\n * @returns The color property line.\r\n */\r\nexport const ControlledColorPropertyLine = <ValueT,>(props: ControlledColorPropertyLineProps<ValueT>) => {\r\n    const { adapter, value, onChange, propertyLineRef } = props;\r\n    const [currentValue, setCurrentValue] = useState(value);\r\n\r\n    useEffect(() => {\r\n        setCurrentValue(value);\r\n    }, [value]);\r\n\r\n    const handleChange = (newValue: ValueT) => {\r\n        setCurrentValue(newValue);\r\n        onChange(newValue);\r\n    };\r\n\r\n    const onSliderChange = (componentValue: number, component: keyof StructuralColor) => {\r\n        const color = adapter.getColor(currentValue);\r\n        handleChange(\r\n            adapter.createColor(\r\n                {\r\n                    ...color,\r\n                    [component]: component === \"a\" ? componentValue : componentValue / 255,\r\n                },\r\n                currentValue\r\n            )\r\n        );\r\n    };\r\n\r\n    const color = adapter.getColor(currentValue);\r\n    return (\r\n        <PropertyLine ref={propertyLineRef} {...props} expandedContent={<ColorSliders color={color} onSliderChange={onSliderChange} />}>\r\n            {createElement(adapter.picker, {\r\n                value: currentValue,\r\n                onChange: handleChange,\r\n                isLinearMode: props.isLinearMode,\r\n                disabled: props.disabled,\r\n                className: props.className,\r\n                style: props.style,\r\n                title: props.title,\r\n            })}\r\n        </PropertyLine>\r\n    );\r\n};\r\n\r\ntype ColorSlidersProps = Readonly<{\r\n    color: StructuralColor;\r\n    onSliderChange: (value: number, component: keyof StructuralColor) => void;\r\n}>;\r\n\r\nconst ColorSliders: FunctionComponent<ColorSlidersProps> = (props) => {\r\n    const { color, onSliderChange } = props;\r\n\r\n    return (\r\n        <>\r\n            <SyncedSliderPropertyLine label=\"R\" value={color.r * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"r\")} />\r\n            <SyncedSliderPropertyLine label=\"G\" value={color.g * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"g\")} />\r\n            <SyncedSliderPropertyLine label=\"B\" value={color.b * 255} min={0} max={255} onChange={(value) => onSliderChange(value, \"b\")} />\r\n            {color.a === undefined ? undefined : (\r\n                <SyncedSliderPropertyLine label=\"A\" value={color.a} min={0} max={1} step={0.01} onChange={(value) => onSliderChange(value, \"a\")} />\r\n            )}\r\n        </>\r\n    );\r\n};\r\n"]}

package/fluent/hoc/propertyLines/vectorPropertyLine.d.ts

@@ -1,59 +1,42 @@
 import { type FunctionComponent } from "react";
-import { type Vector3, Quaternion, Vector2, Vector4 } from "@babylonjs/core/Maths/math.vector.js";
-import { type PrimitiveProps } from "../../primitives/primitive.js";
-import { type PropertyLineProps } from "./propertyLine.js";
-export type TensorPropertyLineProps<V extends Vector2 | Vector3 | Vector4 | Quaternion> = PropertyLineProps<V> & PrimitiveProps<V> & {
-    /**
-     * If passed, all sliders will use this for the min value
-     */
-    min?: number;
-    /**
-     * If passed, all sliders will use this for the max value
-     */
-    max?: number;
-    /**
-     * Will be displayed in the input UI to indicate the unit of measurement
-     */
-    unit?: string;
-    /**
-     * Internal spinbutton's step
-     */
-    step?: number;
-    /** Optional fixed precision (number of decimal digits). Overrides the automatically computed display precision. */
-    precision?: number;
-    /**
-     * If passed, the UX will use the conversion functions to display/update values
-     */
-    valueConverter?: {
-        /**
-         * Will call from(val) before displaying in the UX
-         */
-        from: (val: number) => number;
-        /**
-         * Will call to(val) before calling onChange
-         */
-        to: (val: number) => number;
-    };
-};
+import { Quaternion, type Vector2, type Vector3, type Vector4 } from "@babylonjs/core/Maths/math.vector.js";
+import { type TensorPropertyLineProps as RuntimeNeutralTensorPropertyLineProps } from "./vectorPropertyLineCore.js";
+export type TensorPropertyLineProps<ValueT extends Vector2 | Vector3 | Vector4 | Quaternion> = RuntimeNeutralTensorPropertyLineProps<ValueT>;
 type RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3> & {
-    /**
-     * Display angles as degrees instead of radians
-     */
     useDegrees?: boolean;
 };
-export declare const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps>;
 type QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {
-    /**
-     * Display angles as degrees instead of radians
-     */
     useDegrees?: boolean;
-    /**
-     * Display angles as Euler angles instead of quaternions
-     */
     useEuler?: boolean;
 };
-export declare const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps>;
+/**
+ * Edits a Babylon.js Vector2 value.
+ * @param props The controlled vector and property-line presentation.
+ * @returns The Vector2 property line.
+ */
 export declare const Vector2PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2>>;
+/**
+ * Edits a Babylon.js Vector3 value.
+ * @param props The controlled vector and property-line presentation.
+ * @returns The Vector3 property line.
+ */
 export declare const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3>>;
+/**
+ * Edits a Babylon.js Vector4 value.
+ * @param props The controlled vector and property-line presentation.
+ * @returns The Vector4 property line.
+ */
 export declare const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4>>;
+/**
+ * Edits a Babylon.js Euler rotation value.
+ * @param props The controlled rotation and property-line presentation.
+ * @returns The Euler rotation property line.
+ */
+export declare const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps>;
+/**
+ * Edits a Babylon.js Quaternion value with optional Euler presentation.
+ * @param props The controlled quaternion and property-line presentation.
+ * @returns The quaternion property line.
+ */
+export declare const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps>;
 export {};

package/fluent/hoc/propertyLines/vectorPropertyLine.js

@@ -1,68 +1,83 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Quaternion, Vector2, Vector4 } from "@babylonjs/core/Maths/math.vector.js";
-import { PropertyLine } from "./propertyLine.js";
-import { Body1 } from "@fluentui/react-components";
-import { Tools } from "@babylonjs/core/Misc/tools.js";
-import { CalculatePrecision } from "../../primitives/utils.js";
-import { NumberInputPropertyLine } from "./inputPropertyLine.js";
-import { TextPropertyLine } from "./textPropertyLine.js";
-const HasZ = (vector) => !(vector instanceof Vector2);
-const HasW = (vector) => vector instanceof Vector4 || vector instanceof Quaternion;
-/**
- * Reusable component which renders a vector property line containing a label, vector value, and expandable XYZW values
- * The expanded section contains a slider/input box for each component of the vector (x, y, z, w)
- * @param props
- * @returns
- */
-const TensorPropertyLine = (props) => {
-    TensorPropertyLine.displayName = "TensorPropertyLine";
-    const converted = (val) => (props.valueConverter ? props.valueConverter.from(val) : val);
-    const formatted = (val) => converted(val).toFixed(props.step !== undefined ? Math.max(0, CalculatePrecision(props.step)) : 2);
-    const [vector, setVector] = useState(props.value);
-    const { min, max } = props;
-    const onChange = (val, key) => {
-        const value = props.valueConverter ? props.valueConverter.to(val) : val;
-        const newVector = vector.clone();
-        newVector[key] = value; // The syncedSlider for 'w' is only rendered when vector is a Vector4, so this is safe
-        setVector(newVector);
-        props.onChange(newVector);
-    };
-    useEffect(() => {
-        setVector(props.value);
-    }, [props.value, props.expandedContent]);
-    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)}` : ""}]` }) }));
-};
-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 }))] }));
-const ToDegreesConverter = { from: Tools.ToDegrees, to: Tools.ToRadians };
-export const RotationVectorPropertyLine = (props) => {
-    RotationVectorPropertyLine.displayName = "RotationVectorPropertyLine";
-    const step = props.useDegrees ? 1 : 0.01;
-    const precision = props.useDegrees ? 1 : 2;
-    return (_jsx(Vector3PropertyLine, { ...props, unit: props.useDegrees ? "°" : "rad", valueConverter: props.useDegrees ? ToDegreesConverter : undefined, step: step, precision: precision }));
-};
-const QuaternionPropertyLineInternal = TensorPropertyLine;
-export const QuaternionPropertyLine = (props) => {
-    QuaternionPropertyLine.displayName = "QuaternionPropertyLine";
-    const step = props.useDegrees ? 1 : 0.01;
-    const precision = props.useDegrees ? 1 : 2;
-    const [quat, setQuat] = useState(props.value);
-    useEffect(() => {
-        setQuat(props.value);
-    }, [props.value]);
-    // Extract only the properties that exist on QuaternionPropertyLineProps
-    const { useEuler, ...restProps } = props;
-    const onQuatChange = (val) => {
-        setQuat(val);
-        props.onChange(val);
-    };
-    const onEulerChange = (val) => {
-        const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
-        onQuatChange(quat);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Quaternion } from "@babylonjs/core/Maths/math.vector.js";
+import { ControlledQuaternionPropertyLine, ControlledRotationVectorPropertyLine, ControlledTensorPropertyLine, } from "./vectorPropertyLineCore.js";
+function CreateCoreTensorAdapter(components) {
+    return {
+        components,
+        getComponent: (value, component) => {
+            switch (component) {
+                case "x":
+                    return value.x;
+                case "y":
+                    return value.y;
+                case "z":
+                    return "z" in value ? value.z : 0;
+                case "w":
+                    return "w" in value ? value.w : 0;
+            }
+        },
+        withComponent: (value, component, componentValue) => {
+            const result = value.clone();
+            switch (component) {
+                case "x":
+                    result.x = componentValue;
+                    break;
+                case "y":
+                    result.y = componentValue;
+                    break;
+                case "z":
+                    if ("z" in result) {
+                        result.z = componentValue;
+                    }
+                    break;
+                case "w":
+                    if ("w" in result) {
+                        result.w = componentValue;
+                    }
+                    break;
+            }
+            return result;
+        },
     };
-    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 }));
+}
+const Vector2Adapter = CreateCoreTensorAdapter(["x", "y"]);
+const Vector3Adapter = CreateCoreTensorAdapter(["x", "y", "z"]);
+const Vector4Adapter = CreateCoreTensorAdapter(["x", "y", "z", "w"]);
+const QuaternionTensorAdapter = CreateCoreTensorAdapter(["x", "y", "z", "w"]);
+const QuaternionAdapter = {
+    quaternion: QuaternionTensorAdapter,
+    euler: Vector3Adapter,
+    fromEuler: (value) => Quaternion.FromEulerAngles(value.x, value.y, value.z),
+    toEuler: (value) => value.toEulerAngles(),
 };
-export const Vector2PropertyLine = TensorPropertyLine;
-export const Vector3PropertyLine = TensorPropertyLine;
-export const Vector4PropertyLine = TensorPropertyLine;
+/**
+ * Edits a Babylon.js Vector2 value.
+ * @param props The controlled vector and property-line presentation.
+ * @returns The Vector2 property line.
+ */
+export const Vector2PropertyLine = (props) => _jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector2Adapter });
+/**
+ * Edits a Babylon.js Vector3 value.
+ * @param props The controlled vector and property-line presentation.
+ * @returns The Vector3 property line.
+ */
+export const Vector3PropertyLine = (props) => _jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector3Adapter });
+/**
+ * Edits a Babylon.js Vector4 value.
+ * @param props The controlled vector and property-line presentation.
+ * @returns The Vector4 property line.
+ */
+export const Vector4PropertyLine = (props) => _jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector4Adapter });
+/**
+ * Edits a Babylon.js Euler rotation value.
+ * @param props The controlled rotation and property-line presentation.
+ * @returns The Euler rotation property line.
+ */
+export const RotationVectorPropertyLine = (props) => (_jsx(ControlledRotationVectorPropertyLine, { ...props, adapter: Vector3Adapter }));
+/**
+ * Edits a Babylon.js Quaternion value with optional Euler presentation.
+ * @param props The controlled quaternion and property-line presentation.
+ * @returns The quaternion property line.
+ */
+export const QuaternionPropertyLine = (props) => _jsx(ControlledQuaternionPropertyLine, { ...props, adapter: QuaternionAdapter });
 //# sourceMappingURL=vectorPropertyLine.js.map

package/fluent/hoc/propertyLines/vectorPropertyLine.js.map

@@ -1 +1 @@
-{"version":3,"file":"vectorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/vectorPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAgB,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAEpF,OAAO,EAA0B,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAqCtD,MAAM,IAAI,GAAG,CAAC,MAAgD,EAAqB,EAAE,CAAC,CAAC,CAAC,MAAM,YAAY,OAAO,CAAC,CAAC;AACnH,MAAM,IAAI,GAAG,CAAC,MAAgD,EAAqB,EAAE,CAAC,MAAM,YAAY,OAAO,IAAI,MAAM,YAAY,UAAU,CAAC;AAEhJ;;;;;GAKG;AACH,MAAM,kBAAkB,GAAyF,CAAC,KAAK,EAAE,EAAE;IACvH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;IACtD,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IACjG,MAAM,SAAS,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtI,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAE3B,MAAM,QAAQ,GAAG,CAAC,GAAW,EAAE,GAA0B,EAAE,EAAE;QACzD,MAAM,KAAK,GAAG,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QACxE,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,EAAE,CAAC;QAChC,SAAqB,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC,sFAAsF;QAE3H,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,KAAK,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACX,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;IAEzC,OAAO,CACH,KAAC,YAAY,OACL,KAAK,EACT,eAAe,EACX,8BACK,KAAK,CAAC,eAAe,EACrB,MAAM,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,IACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,GACpB,CACL,CAAC,CAAC,CAAC,SAAS,IACd,YAGP,KAAC,KAAK,cAAE,IAAI,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,GAAS,GACxL,CAClB,CAAC;AACN,CAAC,CAAC;AAaF,MAAM,aAAa,GAAG,CAAqD,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAyB,EAAE,EAAE,CAAC,CACnK,8BACI,KAAC,uBAAuB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,EAC1K,KAAC,uBAAuB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,EACzK,IAAI,CAAC,MAAM,CAAC,IAAI,CACb,KAAC,uBAAuB,IACpB,KAAK,EAAC,GAAG,EACT,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAC1B,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,EACrC,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,GACtB,CACL,EACA,IAAI,CAAC,MAAM,CAAC,IAAI,CACb,KAAC,uBAAuB,IACpB,KAAK,EAAC,GAAG,EACT,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAC1B,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,EACrC,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,GACtB,CACL,IACF,CACN,CAAC;AASF,MAAM,kBAAkB,GAAG,EAAE,IAAI,EAAE,KAAK,CAAC,SAAS,EAAE,EAAE,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;AAC1E,MAAM,CAAC,MAAM,0BAA0B,GAAuD,CAAC,KAAK,EAAE,EAAE;IACpG,0BAA0B,CAAC,WAAW,GAAG,4BAA4B,CAAC;IACtE,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACzC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,OAAO,CACH,KAAC,mBAAmB,OACZ,KAAK,EACT,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACpC,cAAc,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EACjE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,GACtB,CACL,CAAC;AACN,CAAC,CAAC;AAYF,MAAM,8BAA8B,GAAG,kBAA4E,CAAC;AACpH,MAAM,CAAC,MAAM,sBAAsB,GAAmD,CAAC,KAAK,EAAE,EAAE;IAC5F,sBAAsB,CAAC,WAAW,GAAG,wBAAwB,CAAC;IAC9D,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACzC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC3C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACX,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,wEAAwE;IACxE,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEzC,MAAM,YAAY,GAAG,CAAC,GAAe,EAAE,EAAE;QACrC,OAAO,CAAC,GAAG,CAAC,CAAC;QACb,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,GAAY,EAAE,EAAE;QACnC,MAAM,IAAI,GAAG,UAAU,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC;QAC7D,YAAY,CAAC,IAAI,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CACd,KAAC,mBAAmB,OACZ,SAAS,EACb,QAAQ,EAAE,KAAK,EACf,cAAc,EAAE,KAAK,EACrB,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAC3B,cAAc,EAAE,kBAAkB,EAClC,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EACpC,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,KAAC,gBAAgB,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAAI,GAC7J,CACL,CAAC,CAAC,CAAC,CACA,KAAC,8BAA8B,OAAK,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI,CAC9K,CAAC;AACN,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,mBAAmB,GAAG,kBAAyE,CAAC;AAC7G,MAAM,CAAC,MAAM,mBAAmB,GAAG,kBAAyE,CAAC;AAC7G,MAAM,CAAC,MAAM,mBAAmB,GAAG,kBAAyE,CAAC","sourcesContent":["import { type FunctionComponent, useEffect, useState } from \"react\";\r\n\r\nimport { type Vector3, Quaternion, Vector2, Vector4 } from \"core/Maths/math.vector\";\r\nimport { type PrimitiveProps } from \"../../primitives/primitive\";\r\nimport { type PropertyLineProps, PropertyLine } from \"./propertyLine\";\r\n\r\nimport { Body1 } from \"@fluentui/react-components\";\r\n\r\nimport { Tools } from \"core/Misc/tools\";\r\nimport { CalculatePrecision } from \"../../primitives/utils\";\r\nimport { NumberInputPropertyLine } from \"./inputPropertyLine\";\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"]}
+{"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 { Quaternion, type Vector2, type Vector3, type Vector4 } from \"core/Maths/math.vector\";\r\nimport {\r\n    ControlledQuaternionPropertyLine,\r\n    ControlledRotationVectorPropertyLine,\r\n    ControlledTensorPropertyLine,\r\n    type QuaternionValueAdapter,\r\n    type TensorComponent,\r\n    type TensorPropertyLineProps as RuntimeNeutralTensorPropertyLineProps,\r\n    type TensorValueAdapter,\r\n} from \"./vectorPropertyLineCore\";\r\n\r\nexport type TensorPropertyLineProps<ValueT extends Vector2 | Vector3 | Vector4 | Quaternion> = RuntimeNeutralTensorPropertyLineProps<ValueT>;\r\n\r\nfunction CreateCoreTensorAdapter<ValueT extends Vector2 | Vector3 | Vector4 | Quaternion>(components: readonly TensorComponent[]): TensorValueAdapter<ValueT> {\r\n    return {\r\n        components,\r\n        getComponent: (value, component) => {\r\n            switch (component) {\r\n                case \"x\":\r\n                    return value.x;\r\n                case \"y\":\r\n                    return value.y;\r\n                case \"z\":\r\n                    return \"z\" in value ? value.z : 0;\r\n                case \"w\":\r\n                    return \"w\" in value ? value.w : 0;\r\n            }\r\n        },\r\n        withComponent: (value, component, componentValue) => {\r\n            const result = value.clone() as ValueT;\r\n            switch (component) {\r\n                case \"x\":\r\n                    result.x = componentValue;\r\n                    break;\r\n                case \"y\":\r\n                    result.y = componentValue;\r\n                    break;\r\n                case \"z\":\r\n                    if (\"z\" in result) {\r\n                        result.z = componentValue;\r\n                    }\r\n                    break;\r\n                case \"w\":\r\n                    if (\"w\" in result) {\r\n                        result.w = componentValue;\r\n                    }\r\n                    break;\r\n            }\r\n            return result;\r\n        },\r\n    };\r\n}\r\n\r\nconst Vector2Adapter = CreateCoreTensorAdapter<Vector2>([\"x\", \"y\"]);\r\nconst Vector3Adapter = CreateCoreTensorAdapter<Vector3>([\"x\", \"y\", \"z\"]);\r\nconst Vector4Adapter = CreateCoreTensorAdapter<Vector4>([\"x\", \"y\", \"z\", \"w\"]);\r\nconst QuaternionTensorAdapter = CreateCoreTensorAdapter<Quaternion>([\"x\", \"y\", \"z\", \"w\"]);\r\nconst QuaternionAdapter: QuaternionValueAdapter<Quaternion, Vector3> = {\r\n    quaternion: QuaternionTensorAdapter,\r\n    euler: Vector3Adapter,\r\n    fromEuler: (value) => Quaternion.FromEulerAngles(value.x, value.y, value.z),\r\n    toEuler: (value) => value.toEulerAngles(),\r\n};\r\n\r\ntype RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3> & {\r\n    useDegrees?: boolean;\r\n};\r\n\r\ntype QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {\r\n    useDegrees?: boolean;\r\n    useEuler?: boolean;\r\n};\r\n\r\n/**\r\n * Edits a Babylon.js Vector2 value.\r\n * @param props The controlled vector and property-line presentation.\r\n * @returns The Vector2 property line.\r\n */\r\nexport const Vector2PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector2Adapter} />;\r\n/**\r\n * Edits a Babylon.js Vector3 value.\r\n * @param props The controlled vector and property-line presentation.\r\n * @returns The Vector3 property line.\r\n */\r\nexport const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector3Adapter} />;\r\n/**\r\n * Edits a Babylon.js Vector4 value.\r\n * @param props The controlled vector and property-line presentation.\r\n * @returns The Vector4 property line.\r\n */\r\nexport const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4>> = (props) => <ControlledTensorPropertyLine {...props} adapter={Vector4Adapter} />;\r\n/**\r\n * Edits a Babylon.js Euler rotation value.\r\n * @param props The controlled rotation and property-line presentation.\r\n * @returns The Euler rotation property line.\r\n */\r\nexport const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps> = (props) => (\r\n    <ControlledRotationVectorPropertyLine {...props} adapter={Vector3Adapter} />\r\n);\r\n/**\r\n * Edits a Babylon.js Quaternion value with optional Euler presentation.\r\n * @param props The controlled quaternion and property-line presentation.\r\n * @returns The quaternion property line.\r\n */\r\nexport const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps> = (props) => <ControlledQuaternionPropertyLine {...props} adapter={QuaternionAdapter} />;\r\n"]}

package/fluent/hoc/propertyLines/vectorPropertyLineCore.d.ts

@@ -0,0 +1,70 @@
+import { type PrimitiveProps } from "../../primitives/primitive.js";
+import { type PropertyLineProps } from "./propertyLine.js";
+export type TensorComponent = "x" | "y" | "z" | "w";
+export type TensorValue2 = Readonly<{
+    x: number;
+    y: number;
+}>;
+export type TensorValue3 = TensorValue2 & Readonly<{
+    z: number;
+}>;
+export type TensorValue4 = TensorValue3 & Readonly<{
+    w: number;
+}>;
+export type TensorPropertyLineProps<ValueT> = PropertyLineProps<ValueT> & PrimitiveProps<ValueT> & {
+    min?: number;
+    max?: number;
+    unit?: string;
+    step?: number;
+    precision?: number;
+    valueConverter?: {
+        from: (value: number) => number;
+        to: (value: number) => number;
+    };
+};
+export type TensorValueAdapter<ValueT> = Readonly<{
+    components: readonly TensorComponent[];
+    getComponent: (value: ValueT, component: TensorComponent) => number;
+    withComponent: (value: ValueT, component: TensorComponent, componentValue: number) => ValueT;
+}>;
+type ControlledTensorPropertyLineProps<ValueT> = TensorPropertyLineProps<ValueT> & Readonly<{
+    adapter: TensorValueAdapter<ValueT>;
+}>;
+/**
+ * Runtime-neutral controlled editor for two-, three-, and four-component numeric values.
+ * @param props The value, change callback, component adapter, and property-line presentation.
+ * @returns The tensor property line.
+ */
+export declare const ControlledTensorPropertyLine: <ValueT>(props: ControlledTensorPropertyLineProps<ValueT>) => import("react/jsx-runtime").JSX.Element;
+export declare const RadiansToDegreesConverter: {
+    from: (value: number) => number;
+    to: (value: number) => number;
+};
+type ControlledRotationVectorPropertyLineProps<ValueT> = TensorPropertyLineProps<ValueT> & Readonly<{
+    adapter: TensorValueAdapter<ValueT>;
+    useDegrees?: boolean;
+}>;
+/**
+ * Runtime-neutral controlled Euler rotation editor.
+ * @param props The rotation value, runtime adapter, and display options.
+ * @returns The rotation property line.
+ */
+export declare const ControlledRotationVectorPropertyLine: <ValueT>(props: ControlledRotationVectorPropertyLineProps<ValueT>) => import("react/jsx-runtime").JSX.Element;
+export type QuaternionValueAdapter<QuaternionT, EulerT> = Readonly<{
+    quaternion: TensorValueAdapter<QuaternionT>;
+    euler: TensorValueAdapter<EulerT>;
+    fromEuler: (value: EulerT, source: QuaternionT) => QuaternionT;
+    toEuler: (value: QuaternionT) => EulerT;
+}>;
+type ControlledQuaternionPropertyLineProps<QuaternionT, EulerT> = TensorPropertyLineProps<QuaternionT> & Readonly<{
+    adapter: QuaternionValueAdapter<QuaternionT, EulerT>;
+    useDegrees?: boolean;
+    useEuler?: boolean;
+}>;
+/**
+ * Runtime-neutral controlled quaternion editor with optional Euler presentation.
+ * @param props The quaternion value, runtime conversion adapter, and display options.
+ * @returns The quaternion or Euler property line.
+ */
+export declare const ControlledQuaternionPropertyLine: <QuaternionT, EulerT>(props: ControlledQuaternionPropertyLineProps<QuaternionT, EulerT>) => import("react/jsx-runtime").JSX.Element;
+export {};