@babylonjs/shared-ui-components 9.26.0 → 9.26.2
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/copyCommandToClipboard.d.ts +1 -1
- package/copyCommandToClipboard.js +5 -2
- package/copyCommandToClipboard.js.map +1 -1
- package/fluent/hoc/propertyLines/colorPropertyLine.d.ts +10 -0
- package/fluent/hoc/propertyLines/colorPropertyLine.js +24 -33
- package/fluent/hoc/propertyLines/colorPropertyLine.js.map +1 -1
- package/fluent/hoc/propertyLines/colorPropertyLineCore.d.ts +20 -0
- package/fluent/hoc/propertyLines/colorPropertyLineCore.js +42 -0
- package/fluent/hoc/propertyLines/colorPropertyLineCore.js.map +1 -0
- package/fluent/hoc/propertyLines/vectorPropertyLine.d.ts +30 -47
- package/fluent/hoc/propertyLines/vectorPropertyLine.js +80 -65
- package/fluent/hoc/propertyLines/vectorPropertyLine.js.map +1 -1
- package/fluent/hoc/propertyLines/vectorPropertyLineCore.d.ts +70 -0
- package/fluent/hoc/propertyLines/vectorPropertyLineCore.js +68 -0
- package/fluent/hoc/propertyLines/vectorPropertyLineCore.js.map +1 -0
- package/fluent/primitives/accordion.contexts.js +27 -6
- package/fluent/primitives/accordion.contexts.js.map +1 -1
- package/fluent/primitives/spinButton.js +1 -2
- package/fluent/primitives/spinButton.js.map +1 -1
- package/fluent/primitives/structuralColorPicker.d.ts +21 -0
- package/fluent/primitives/structuralColorPicker.js +123 -0
- package/fluent/primitives/structuralColorPicker.js.map +1 -0
- package/lite/fluent/hoc/propertyLines/colorPropertyLine.d.ts +10 -0
- package/lite/fluent/hoc/propertyLines/colorPropertyLine.js +50 -0
- package/lite/fluent/hoc/propertyLines/colorPropertyLine.js.map +1 -0
- package/lite/fluent/hoc/propertyLines/vectorPropertyLine.d.ts +28 -0
- package/lite/fluent/hoc/propertyLines/vectorPropertyLine.js +89 -0
- package/lite/fluent/hoc/propertyLines/vectorPropertyLine.js.map +1 -0
- package/lite/index.d.ts +2 -0
- package/lite/index.js +3 -0
- package/lite/index.js.map +1 -0
- package/nodeGraphSystem/graphFrame.module.scss +4 -1
- package/package.json +28 -1
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { GetClassName } from "@babylonjs/core/Misc/typeStore.js";
|
|
2
1
|
// Check if BABYLON namespace exists
|
|
3
2
|
let BabylonNamespace = "";
|
|
4
3
|
const GlobalObject = typeof global !== "undefined" ? global : typeof window !== "undefined" ? window : undefined;
|
|
@@ -27,7 +26,11 @@ export function copyCommandToClipboard(strCommand) {
|
|
|
27
26
|
// babylonNamespace is either "" (ES6) or "BABYLON."
|
|
28
27
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
29
28
|
export function getClassNameWithNamespace(obj) {
|
|
30
|
-
|
|
29
|
+
if ((typeof obj !== "object" && typeof obj !== "function") || obj === null) {
|
|
30
|
+
return { className: "Unknown", babylonNamespace: "" };
|
|
31
|
+
}
|
|
32
|
+
const candidate = obj;
|
|
33
|
+
let className = candidate.getClassName?.() ?? candidate.constructor?.name ?? "Unknown";
|
|
31
34
|
if (className.includes("BABYLON.")) {
|
|
32
35
|
className = className.split("BABYLON.")[1];
|
|
33
36
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"copyCommandToClipboard.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/copyCommandToClipboard.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"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"]}
|
|
@@ -3,5 +3,15 @@ import { type PropertyLineProps } from "./propertyLine.js";
|
|
|
3
3
|
import { type Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
|
|
4
4
|
import { type ColorPickerProps } from "../../primitives/colorPicker.js";
|
|
5
5
|
export type ColorPropertyLineProps = ColorPickerProps<Color3 | Color4> & PropertyLineProps<Color3 | Color4>;
|
|
6
|
+
/**
|
|
7
|
+
* Edits a Babylon.js Color3 value.
|
|
8
|
+
* @param props The controlled color and property-line presentation.
|
|
9
|
+
* @returns The Color3 property line.
|
|
10
|
+
*/
|
|
6
11
|
export declare const Color3PropertyLine: FunctionComponent<ColorPickerProps<Color3> & PropertyLineProps<Color3>>;
|
|
12
|
+
/**
|
|
13
|
+
* Edits a Babylon.js Color4 value.
|
|
14
|
+
* @param props The controlled color and property-line presentation.
|
|
15
|
+
* @returns The Color4 property line.
|
|
16
|
+
*/
|
|
7
17
|
export declare const Color4PropertyLine: FunctionComponent<ColorPickerProps<Color4> & PropertyLineProps<Color4>>;
|
|
@@ -1,40 +1,31 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
import { forwardRef
|
|
3
|
-
import { PropertyLine } from "./propertyLine.js";
|
|
4
|
-
import { SyncedSliderPropertyLine } from "./syncedSliderPropertyLine.js";
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { forwardRef } from "react";
|
|
5
3
|
import { Color4 } from "@babylonjs/core/Maths/math.color.js";
|
|
6
4
|
import { ColorPickerPopup } from "../../primitives/colorPicker.js";
|
|
5
|
+
import { ControlledColorPropertyLine } from "./colorPropertyLineCore.js";
|
|
6
|
+
const Picker = (props) => _jsx(ColorPickerPopup, { ...props });
|
|
7
|
+
const Adapter = {
|
|
8
|
+
picker: Picker,
|
|
9
|
+
getColor: (value) => value,
|
|
10
|
+
createColor: (color, source) => {
|
|
11
|
+
if (source instanceof Color4) {
|
|
12
|
+
return new Color4(color.r, color.g, color.b, color.a ?? source.a);
|
|
13
|
+
}
|
|
14
|
+
return source.clone().set(color.r, color.g, color.b);
|
|
15
|
+
},
|
|
16
|
+
};
|
|
17
|
+
const ColorPropertyLine = forwardRef((props, ref) => _jsx(ControlledColorPropertyLine, { ...props, adapter: Adapter, propertyLineRef: ref }));
|
|
18
|
+
ColorPropertyLine.displayName = "ColorPropertyLine";
|
|
7
19
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
* @
|
|
11
|
-
* @returns Component wrapping a colorPicker component with a property line
|
|
20
|
+
* Edits a Babylon.js Color3 value.
|
|
21
|
+
* @param props The controlled color and property-line presentation.
|
|
22
|
+
* @returns The Color3 property line.
|
|
12
23
|
*/
|
|
13
|
-
const ColorPropertyLine = forwardRef((props, ref) => {
|
|
14
|
-
ColorPropertyLine.displayName = "ColorPropertyLine";
|
|
15
|
-
const [color, setColor] = useState(props.value);
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
setColor(props.value);
|
|
18
|
-
}, [props.value]);
|
|
19
|
-
const onSliderChange = (value, key) => {
|
|
20
|
-
let newColor;
|
|
21
|
-
if (key === "a") {
|
|
22
|
-
newColor = Color4.FromColor3(color, value);
|
|
23
|
-
}
|
|
24
|
-
else {
|
|
25
|
-
newColor = color.clone();
|
|
26
|
-
newColor[key] = value / 255;
|
|
27
|
-
}
|
|
28
|
-
setColor(newColor); // Create a new object to trigger re-render
|
|
29
|
-
props.onChange(newColor);
|
|
30
|
-
};
|
|
31
|
-
const onColorPickerChange = (newColor) => {
|
|
32
|
-
setColor(newColor);
|
|
33
|
-
props.onChange(newColor);
|
|
34
|
-
};
|
|
35
|
-
return (_jsx(PropertyLine, { ref: ref, ...props, expandedContent: color ? _jsx(ColorSliders, { color: color, onSliderChange: onSliderChange }) : undefined, children: _jsx(ColorPickerPopup, { ...props, onChange: onColorPickerChange, value: color }) }));
|
|
36
|
-
});
|
|
37
|
-
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") })] }));
|
|
38
24
|
export const Color3PropertyLine = ColorPropertyLine;
|
|
25
|
+
/**
|
|
26
|
+
* Edits a Babylon.js Color4 value.
|
|
27
|
+
* @param props The controlled color and property-line presentation.
|
|
28
|
+
* @returns The Color4 property line.
|
|
29
|
+
*/
|
|
39
30
|
export const Color4PropertyLine = ColorPropertyLine;
|
|
40
31
|
//# sourceMappingURL=colorPropertyLine.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"colorPropertyLine.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLine.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,UAAU,EAAE,
|
|
1
|
+
{"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"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { type ComponentType, type Ref } from "react";
|
|
2
|
+
import { type StructuralColorAdapter } from "../../primitives/structuralColorPicker.js";
|
|
3
|
+
import { type PrimitiveProps } from "../../primitives/primitive.js";
|
|
4
|
+
import { type PropertyLineProps } from "./propertyLine.js";
|
|
5
|
+
export type ColorPropertyLineAdapter<ValueT> = StructuralColorAdapter<ValueT> & Readonly<{
|
|
6
|
+
picker: ComponentType<PrimitiveProps<ValueT> & {
|
|
7
|
+
isLinearMode?: boolean;
|
|
8
|
+
}>;
|
|
9
|
+
}>;
|
|
10
|
+
export type ControlledColorPropertyLineProps<ValueT> = PrimitiveProps<ValueT> & PropertyLineProps<ValueT> & Readonly<{
|
|
11
|
+
adapter: ColorPropertyLineAdapter<ValueT>;
|
|
12
|
+
isLinearMode?: boolean;
|
|
13
|
+
propertyLineRef?: Ref<HTMLDivElement>;
|
|
14
|
+
}>;
|
|
15
|
+
/**
|
|
16
|
+
* Runtime-neutral controlled color editor with RGB or RGBA sliders and an injected picker.
|
|
17
|
+
* @param props The controlled color, runtime adapter, and property-line presentation.
|
|
18
|
+
* @returns The color property line.
|
|
19
|
+
*/
|
|
20
|
+
export declare const ControlledColorPropertyLine: <ValueT>(props: ControlledColorPropertyLineProps<ValueT>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { createElement, useEffect, useState } from "react";
|
|
3
|
+
import { PropertyLine } from "./propertyLine.js";
|
|
4
|
+
import { SyncedSliderPropertyLine } from "./syncedSliderPropertyLine.js";
|
|
5
|
+
/**
|
|
6
|
+
* Runtime-neutral controlled color editor with RGB or RGBA sliders and an injected picker.
|
|
7
|
+
* @param props The controlled color, runtime adapter, and property-line presentation.
|
|
8
|
+
* @returns The color property line.
|
|
9
|
+
*/
|
|
10
|
+
export const ControlledColorPropertyLine = (props) => {
|
|
11
|
+
const { adapter, value, onChange, propertyLineRef } = props;
|
|
12
|
+
const [currentValue, setCurrentValue] = useState(value);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
setCurrentValue(value);
|
|
15
|
+
}, [value]);
|
|
16
|
+
const handleChange = (newValue) => {
|
|
17
|
+
setCurrentValue(newValue);
|
|
18
|
+
onChange(newValue);
|
|
19
|
+
};
|
|
20
|
+
const onSliderChange = (componentValue, component) => {
|
|
21
|
+
const color = adapter.getColor(currentValue);
|
|
22
|
+
handleChange(adapter.createColor({
|
|
23
|
+
...color,
|
|
24
|
+
[component]: component === "a" ? componentValue : componentValue / 255,
|
|
25
|
+
}, currentValue));
|
|
26
|
+
};
|
|
27
|
+
const color = adapter.getColor(currentValue);
|
|
28
|
+
return (_jsx(PropertyLine, { ref: propertyLineRef, ...props, expandedContent: _jsx(ColorSliders, { color: color, onSliderChange: onSliderChange }), children: createElement(adapter.picker, {
|
|
29
|
+
value: currentValue,
|
|
30
|
+
onChange: handleChange,
|
|
31
|
+
isLinearMode: props.isLinearMode,
|
|
32
|
+
disabled: props.disabled,
|
|
33
|
+
className: props.className,
|
|
34
|
+
style: props.style,
|
|
35
|
+
title: props.title,
|
|
36
|
+
}) }));
|
|
37
|
+
};
|
|
38
|
+
const ColorSliders = (props) => {
|
|
39
|
+
const { color, onSliderChange } = props;
|
|
40
|
+
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") }))] }));
|
|
41
|
+
};
|
|
42
|
+
//# sourceMappingURL=colorPropertyLineCore.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colorPropertyLineCore.js","sourceRoot":"","sources":["../../../../../../dev/sharedUiComponents/src/fluent/hoc/propertyLines/colorPropertyLineCore.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAwD,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAIjH,OAAO,EAA0B,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AAetE;;;;GAIG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAU,KAA+C,EAAE,EAAE;IACpG,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,GAAG,KAAK,CAAC;IAC5D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,SAAS,CAAC,GAAG,EAAE;QACX,eAAe,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,YAAY,GAAG,CAAC,QAAgB,EAAE,EAAE;QACtC,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC1B,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,cAAsB,EAAE,SAAgC,EAAE,EAAE;QAChF,MAAM,KAAK,GAAG,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;QAC7C,YAAY,CACR,OAAO,CAAC,WAAW,CACf;YACI,GAAG,KAAK;YACR,CAAC,SAAS,CAAC,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,GAAG,GAAG;SACzE,EACD,YAAY,CACf,CACJ,CAAC;IACN,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC;IAC7C,OAAO,CACH,KAAC,YAAY,IAAC,GAAG,EAAE,eAAe,KAAM,KAAK,EAAE,eAAe,EAAE,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,GAAI,YACzH,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE;YAC3B,KAAK,EAAE,YAAY;YACnB,QAAQ,EAAE,YAAY;YACtB,YAAY,EAAE,KAAK,CAAC,YAAY;YAChC,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,KAAK,EAAE,KAAK,CAAC,KAAK;YAClB,KAAK,EAAE,KAAK,CAAC,KAAK;SACrB,CAAC,GACS,CAClB,CAAC;AACN,CAAC,CAAC;AAOF,MAAM,YAAY,GAAyC,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAExC,OAAO,CACH,8BACI,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAC/H,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAC/H,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,EAC9H,KAAK,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CACjC,KAAC,wBAAwB,IAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,GAAI,CACtI,IACF,CACN,CAAC;AACN,CAAC,CAAC","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"]}
|
|
@@ -1,59 +1,42 @@
|
|
|
1
1
|
import { type FunctionComponent } from "react";
|
|
2
|
-
import { type
|
|
3
|
-
import { type
|
|
4
|
-
|
|
5
|
-
export type TensorPropertyLineProps<V extends Vector2 | Vector3 | Vector4 | Quaternion> = PropertyLineProps<V> & PrimitiveProps<V> & {
|
|
6
|
-
/**
|
|
7
|
-
* If passed, all sliders will use this for the min value
|
|
8
|
-
*/
|
|
9
|
-
min?: number;
|
|
10
|
-
/**
|
|
11
|
-
* If passed, all sliders will use this for the max value
|
|
12
|
-
*/
|
|
13
|
-
max?: number;
|
|
14
|
-
/**
|
|
15
|
-
* Will be displayed in the input UI to indicate the unit of measurement
|
|
16
|
-
*/
|
|
17
|
-
unit?: string;
|
|
18
|
-
/**
|
|
19
|
-
* Internal spinbutton's step
|
|
20
|
-
*/
|
|
21
|
-
step?: number;
|
|
22
|
-
/** Optional fixed precision (number of decimal digits). Overrides the automatically computed display precision. */
|
|
23
|
-
precision?: number;
|
|
24
|
-
/**
|
|
25
|
-
* If passed, the UX will use the conversion functions to display/update values
|
|
26
|
-
*/
|
|
27
|
-
valueConverter?: {
|
|
28
|
-
/**
|
|
29
|
-
* Will call from(val) before displaying in the UX
|
|
30
|
-
*/
|
|
31
|
-
from: (val: number) => number;
|
|
32
|
-
/**
|
|
33
|
-
* Will call to(val) before calling onChange
|
|
34
|
-
*/
|
|
35
|
-
to: (val: number) => number;
|
|
36
|
-
};
|
|
37
|
-
};
|
|
2
|
+
import { Quaternion, type Vector2, type Vector3, type Vector4 } from "@babylonjs/core/Maths/math.vector.js";
|
|
3
|
+
import { type TensorPropertyLineProps as RuntimeNeutralTensorPropertyLineProps } from "./vectorPropertyLineCore.js";
|
|
4
|
+
export type TensorPropertyLineProps<ValueT extends Vector2 | Vector3 | Vector4 | Quaternion> = RuntimeNeutralTensorPropertyLineProps<ValueT>;
|
|
38
5
|
type RotationVectorPropertyLineProps = TensorPropertyLineProps<Vector3> & {
|
|
39
|
-
/**
|
|
40
|
-
* Display angles as degrees instead of radians
|
|
41
|
-
*/
|
|
42
6
|
useDegrees?: boolean;
|
|
43
7
|
};
|
|
44
|
-
export declare const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps>;
|
|
45
8
|
type QuaternionPropertyLineProps = TensorPropertyLineProps<Quaternion> & {
|
|
46
|
-
/**
|
|
47
|
-
* Display angles as degrees instead of radians
|
|
48
|
-
*/
|
|
49
9
|
useDegrees?: boolean;
|
|
50
|
-
/**
|
|
51
|
-
* Display angles as Euler angles instead of quaternions
|
|
52
|
-
*/
|
|
53
10
|
useEuler?: boolean;
|
|
54
11
|
};
|
|
55
|
-
|
|
12
|
+
/**
|
|
13
|
+
* Edits a Babylon.js Vector2 value.
|
|
14
|
+
* @param props The controlled vector and property-line presentation.
|
|
15
|
+
* @returns The Vector2 property line.
|
|
16
|
+
*/
|
|
56
17
|
export declare const Vector2PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector2>>;
|
|
18
|
+
/**
|
|
19
|
+
* Edits a Babylon.js Vector3 value.
|
|
20
|
+
* @param props The controlled vector and property-line presentation.
|
|
21
|
+
* @returns The Vector3 property line.
|
|
22
|
+
*/
|
|
57
23
|
export declare const Vector3PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector3>>;
|
|
24
|
+
/**
|
|
25
|
+
* Edits a Babylon.js Vector4 value.
|
|
26
|
+
* @param props The controlled vector and property-line presentation.
|
|
27
|
+
* @returns The Vector4 property line.
|
|
28
|
+
*/
|
|
58
29
|
export declare const Vector4PropertyLine: FunctionComponent<TensorPropertyLineProps<Vector4>>;
|
|
30
|
+
/**
|
|
31
|
+
* Edits a Babylon.js Euler rotation value.
|
|
32
|
+
* @param props The controlled rotation and property-line presentation.
|
|
33
|
+
* @returns The Euler rotation property line.
|
|
34
|
+
*/
|
|
35
|
+
export declare const RotationVectorPropertyLine: FunctionComponent<RotationVectorPropertyLineProps>;
|
|
36
|
+
/**
|
|
37
|
+
* Edits a Babylon.js Quaternion value with optional Euler presentation.
|
|
38
|
+
* @param props The controlled quaternion and property-line presentation.
|
|
39
|
+
* @returns The quaternion property line.
|
|
40
|
+
*/
|
|
41
|
+
export declare const QuaternionPropertyLine: FunctionComponent<QuaternionPropertyLineProps>;
|
|
59
42
|
export {};
|
|
@@ -1,68 +1,83 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
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 }));
|
|
43
|
-
};
|
|
44
|
-
const QuaternionPropertyLineInternal = TensorPropertyLine;
|
|
45
|
-
export const QuaternionPropertyLine = (props) => {
|
|
46
|
-
QuaternionPropertyLine.displayName = "QuaternionPropertyLine";
|
|
47
|
-
const step = props.useDegrees ? 1 : 0.01;
|
|
48
|
-
const precision = props.useDegrees ? 1 : 2;
|
|
49
|
-
const [quat, setQuat] = useState(props.value);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
setQuat(props.value);
|
|
52
|
-
}, [props.value]);
|
|
53
|
-
// Extract only the properties that exist on QuaternionPropertyLineProps
|
|
54
|
-
const { useEuler, ...restProps } = props;
|
|
55
|
-
const onQuatChange = (val) => {
|
|
56
|
-
setQuat(val);
|
|
57
|
-
props.onChange(val);
|
|
58
|
-
};
|
|
59
|
-
const onEulerChange = (val) => {
|
|
60
|
-
const quat = Quaternion.FromEulerAngles(val.x, val.y, val.z);
|
|
61
|
-
onQuatChange(quat);
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Quaternion } from "@babylonjs/core/Maths/math.vector.js";
|
|
3
|
+
import { ControlledQuaternionPropertyLine, ControlledRotationVectorPropertyLine, ControlledTensorPropertyLine, } from "./vectorPropertyLineCore.js";
|
|
4
|
+
function CreateCoreTensorAdapter(components) {
|
|
5
|
+
return {
|
|
6
|
+
components,
|
|
7
|
+
getComponent: (value, component) => {
|
|
8
|
+
switch (component) {
|
|
9
|
+
case "x":
|
|
10
|
+
return value.x;
|
|
11
|
+
case "y":
|
|
12
|
+
return value.y;
|
|
13
|
+
case "z":
|
|
14
|
+
return "z" in value ? value.z : 0;
|
|
15
|
+
case "w":
|
|
16
|
+
return "w" in value ? value.w : 0;
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
withComponent: (value, component, componentValue) => {
|
|
20
|
+
const result = value.clone();
|
|
21
|
+
switch (component) {
|
|
22
|
+
case "x":
|
|
23
|
+
result.x = componentValue;
|
|
24
|
+
break;
|
|
25
|
+
case "y":
|
|
26
|
+
result.y = componentValue;
|
|
27
|
+
break;
|
|
28
|
+
case "z":
|
|
29
|
+
if ("z" in result) {
|
|
30
|
+
result.z = componentValue;
|
|
31
|
+
}
|
|
32
|
+
break;
|
|
33
|
+
case "w":
|
|
34
|
+
if ("w" in result) {
|
|
35
|
+
result.w = componentValue;
|
|
36
|
+
}
|
|
37
|
+
break;
|
|
38
|
+
}
|
|
39
|
+
return result;
|
|
40
|
+
},
|
|
62
41
|
};
|
|
63
|
-
|
|
42
|
+
}
|
|
43
|
+
const Vector2Adapter = CreateCoreTensorAdapter(["x", "y"]);
|
|
44
|
+
const Vector3Adapter = CreateCoreTensorAdapter(["x", "y", "z"]);
|
|
45
|
+
const Vector4Adapter = CreateCoreTensorAdapter(["x", "y", "z", "w"]);
|
|
46
|
+
const QuaternionTensorAdapter = CreateCoreTensorAdapter(["x", "y", "z", "w"]);
|
|
47
|
+
const QuaternionAdapter = {
|
|
48
|
+
quaternion: QuaternionTensorAdapter,
|
|
49
|
+
euler: Vector3Adapter,
|
|
50
|
+
fromEuler: (value) => Quaternion.FromEulerAngles(value.x, value.y, value.z),
|
|
51
|
+
toEuler: (value) => value.toEulerAngles(),
|
|
64
52
|
};
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
53
|
+
/**
|
|
54
|
+
* Edits a Babylon.js Vector2 value.
|
|
55
|
+
* @param props The controlled vector and property-line presentation.
|
|
56
|
+
* @returns The Vector2 property line.
|
|
57
|
+
*/
|
|
58
|
+
export const Vector2PropertyLine = (props) => _jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector2Adapter });
|
|
59
|
+
/**
|
|
60
|
+
* Edits a Babylon.js Vector3 value.
|
|
61
|
+
* @param props The controlled vector and property-line presentation.
|
|
62
|
+
* @returns The Vector3 property line.
|
|
63
|
+
*/
|
|
64
|
+
export const Vector3PropertyLine = (props) => _jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector3Adapter });
|
|
65
|
+
/**
|
|
66
|
+
* Edits a Babylon.js Vector4 value.
|
|
67
|
+
* @param props The controlled vector and property-line presentation.
|
|
68
|
+
* @returns The Vector4 property line.
|
|
69
|
+
*/
|
|
70
|
+
export const Vector4PropertyLine = (props) => _jsx(ControlledTensorPropertyLine, { ...props, adapter: Vector4Adapter });
|
|
71
|
+
/**
|
|
72
|
+
* Edits a Babylon.js Euler rotation value.
|
|
73
|
+
* @param props The controlled rotation and property-line presentation.
|
|
74
|
+
* @returns The Euler rotation property line.
|
|
75
|
+
*/
|
|
76
|
+
export const RotationVectorPropertyLine = (props) => (_jsx(ControlledRotationVectorPropertyLine, { ...props, adapter: Vector3Adapter }));
|
|
77
|
+
/**
|
|
78
|
+
* Edits a Babylon.js Quaternion value with optional Euler presentation.
|
|
79
|
+
* @param props The controlled quaternion and property-line presentation.
|
|
80
|
+
* @returns The quaternion property line.
|
|
81
|
+
*/
|
|
82
|
+
export const QuaternionPropertyLine = (props) => _jsx(ControlledQuaternionPropertyLine, { ...props, adapter: QuaternionAdapter });
|
|
68
83
|
//# sourceMappingURL=vectorPropertyLine.js.map
|
|
@@ -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 { 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"]}
|
|
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 { 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"]}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { type PrimitiveProps } from "../../primitives/primitive.js";
|
|
2
|
+
import { type PropertyLineProps } from "./propertyLine.js";
|
|
3
|
+
export type TensorComponent = "x" | "y" | "z" | "w";
|
|
4
|
+
export type TensorValue2 = Readonly<{
|
|
5
|
+
x: number;
|
|
6
|
+
y: number;
|
|
7
|
+
}>;
|
|
8
|
+
export type TensorValue3 = TensorValue2 & Readonly<{
|
|
9
|
+
z: number;
|
|
10
|
+
}>;
|
|
11
|
+
export type TensorValue4 = TensorValue3 & Readonly<{
|
|
12
|
+
w: number;
|
|
13
|
+
}>;
|
|
14
|
+
export type TensorPropertyLineProps<ValueT> = PropertyLineProps<ValueT> & PrimitiveProps<ValueT> & {
|
|
15
|
+
min?: number;
|
|
16
|
+
max?: number;
|
|
17
|
+
unit?: string;
|
|
18
|
+
step?: number;
|
|
19
|
+
precision?: number;
|
|
20
|
+
valueConverter?: {
|
|
21
|
+
from: (value: number) => number;
|
|
22
|
+
to: (value: number) => number;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
export type TensorValueAdapter<ValueT> = Readonly<{
|
|
26
|
+
components: readonly TensorComponent[];
|
|
27
|
+
getComponent: (value: ValueT, component: TensorComponent) => number;
|
|
28
|
+
withComponent: (value: ValueT, component: TensorComponent, componentValue: number) => ValueT;
|
|
29
|
+
}>;
|
|
30
|
+
type ControlledTensorPropertyLineProps<ValueT> = TensorPropertyLineProps<ValueT> & Readonly<{
|
|
31
|
+
adapter: TensorValueAdapter<ValueT>;
|
|
32
|
+
}>;
|
|
33
|
+
/**
|
|
34
|
+
* Runtime-neutral controlled editor for two-, three-, and four-component numeric values.
|
|
35
|
+
* @param props The value, change callback, component adapter, and property-line presentation.
|
|
36
|
+
* @returns The tensor property line.
|
|
37
|
+
*/
|
|
38
|
+
export declare const ControlledTensorPropertyLine: <ValueT>(props: ControlledTensorPropertyLineProps<ValueT>) => import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
export declare const RadiansToDegreesConverter: {
|
|
40
|
+
from: (value: number) => number;
|
|
41
|
+
to: (value: number) => number;
|
|
42
|
+
};
|
|
43
|
+
type ControlledRotationVectorPropertyLineProps<ValueT> = TensorPropertyLineProps<ValueT> & Readonly<{
|
|
44
|
+
adapter: TensorValueAdapter<ValueT>;
|
|
45
|
+
useDegrees?: boolean;
|
|
46
|
+
}>;
|
|
47
|
+
/**
|
|
48
|
+
* Runtime-neutral controlled Euler rotation editor.
|
|
49
|
+
* @param props The rotation value, runtime adapter, and display options.
|
|
50
|
+
* @returns The rotation property line.
|
|
51
|
+
*/
|
|
52
|
+
export declare const ControlledRotationVectorPropertyLine: <ValueT>(props: ControlledRotationVectorPropertyLineProps<ValueT>) => import("react/jsx-runtime").JSX.Element;
|
|
53
|
+
export type QuaternionValueAdapter<QuaternionT, EulerT> = Readonly<{
|
|
54
|
+
quaternion: TensorValueAdapter<QuaternionT>;
|
|
55
|
+
euler: TensorValueAdapter<EulerT>;
|
|
56
|
+
fromEuler: (value: EulerT, source: QuaternionT) => QuaternionT;
|
|
57
|
+
toEuler: (value: QuaternionT) => EulerT;
|
|
58
|
+
}>;
|
|
59
|
+
type ControlledQuaternionPropertyLineProps<QuaternionT, EulerT> = TensorPropertyLineProps<QuaternionT> & Readonly<{
|
|
60
|
+
adapter: QuaternionValueAdapter<QuaternionT, EulerT>;
|
|
61
|
+
useDegrees?: boolean;
|
|
62
|
+
useEuler?: boolean;
|
|
63
|
+
}>;
|
|
64
|
+
/**
|
|
65
|
+
* Runtime-neutral controlled quaternion editor with optional Euler presentation.
|
|
66
|
+
* @param props The quaternion value, runtime conversion adapter, and display options.
|
|
67
|
+
* @returns The quaternion or Euler property line.
|
|
68
|
+
*/
|
|
69
|
+
export declare const ControlledQuaternionPropertyLine: <QuaternionT, EulerT>(props: ControlledQuaternionPropertyLineProps<QuaternionT, EulerT>) => import("react/jsx-runtime").JSX.Element;
|
|
70
|
+
export {};
|