@babylonjs/shared-ui-components 8.15.1 → 8.16.1

package/fluent/primitives/searchBox.d.ts

@@ -0,0 +1,6 @@
+type SearchProps = {
+    onChange: (val: string) => void;
+    placeholder?: string;
+};
+export declare const SearchBox: (props: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/fluent/primitives/searchBox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Field, SearchBox as FluentSearchBox, makeStyles } from "@fluentui/react-components";
+const useStyles = makeStyles({
+    search: {
+        minWidth: "50px",
+    },
+});
+export const SearchBox = (props) => {
+    const classes = useStyles();
+    const onChange = (_, data) => {
+        props.onChange(data.value);
+    };
+    return (_jsx(Field, { children: _jsx(FluentSearchBox, { className: classes.search, placeholder: props.placeholder, onChange: onChange }) }));
+};
+//# sourceMappingURL=searchBox.js.map

package/fluent/primitives/searchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchBox.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/searchBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,SAAS,IAAI,eAAe,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAQ7F,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAkB,EAAE,EAAE;IAC5C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,QAAQ,GAAgE,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE;QACtF,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,KAAK,cACF,KAAC,eAAe,IAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC9F,CACX,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { Field, SearchBox as FluentSearchBox, makeStyles } from \"@fluentui/react-components\";\r\nimport type { InputOnChangeData } from \"@fluentui/react-components\";\r\nimport type { SearchBoxChangeEvent } from \"@fluentui/react-components\";\r\n\r\ntype SearchProps = {\r\n    onChange: (val: string) => void;\r\n    placeholder?: string;\r\n};\r\nconst useStyles = makeStyles({\r\n    search: {\r\n        minWidth: \"50px\",\r\n    },\r\n});\r\nexport const SearchBox = (props: SearchProps) => {\r\n    const classes = useStyles();\r\n    const onChange: (ev: SearchBoxChangeEvent, data: InputOnChangeData) => void = (_, data) => {\r\n        props.onChange(data.value);\r\n    };\r\n\r\n    return (\r\n        <Field>\r\n            <FluentSearchBox className={classes.search} placeholder={props.placeholder} onChange={onChange} />\r\n        </Field>\r\n    );\r\n};\r\n"]}

package/fluent/primitives/syncedSlider.d.ts

@@ -1,12 +1,17 @@
 import type { FunctionComponent } from "react";
 import type { BaseComponentProps } from "../hoc/propertyLine.js";
 export type SyncedSliderProps = BaseComponentProps<number> & {
+    /** Minimum value for the slider */
     min?: number;
+    /** Maximum value for the slider */
     max?: number;
+    /** Step size for the slider */
     step?: number;
+    /** When true, onChange is only called when the user releases the slider, not during drag */
+    notifyOnlyOnRelease?: boolean;
 };
 /**
- * Component which synchronizes a slider and an input field, allowing the user to change a value using either control
+ * Component which synchronizes a slider and an input field, allowing the user to change the value using either control
  * @param props
  * @returns SyncedSlider component
  */

package/fluent/primitives/syncedSlider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { makeStyles, Slider, tokens } from "@fluentui/react-components";
-import { Input } from "./input.js";
-import { useEffect, useState } from "react";
+import { NumberInput } from "./input.js";
+import { useEffect, useState, useRef } from "react";
 const useSyncedSliderStyles = makeStyles({
     syncedSlider: {
         display: "flex",
@@ -11,21 +11,23 @@ const useSyncedSliderStyles = makeStyles({
     },
     slider: {
         flexGrow: 1, // Let slider grow
-        minWidth: 0, // Allow shrink if needed
+        minWidth: "40px", // Minimum width for slider to remain usable
     },
     input: {
-        width: "80px", // Fixed width for number input
+        width: "40px", // Fixed width for input - always 40px
         flexShrink: 0,
     },
 });
 /**
- * Component which synchronizes a slider and an input field, allowing the user to change a value using either control
+ * Component which synchronizes a slider and an input field, allowing the user to change the value using either control
  * @param props
  * @returns SyncedSlider component
  */
 export const SyncedSliderInput = (props) => {
     const classes = useSyncedSliderStyles();
     const [value, setValue] = useState(props.value);
+    const pendingValueRef = useRef(undefined);
+    const isDraggingRef = useRef(false);
     // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.
     // To avoid this, we scale the min/max based on the step so we can always make step undefined.
     // The actual step size in the Fluent slider is 1 when it is ste to undefined.
@@ -33,20 +35,35 @@ export const SyncedSliderInput = (props) => {
     const max = props.max ?? 100;
     const step = props.step ?? 1;
     useEffect(() => {
-        setValue(props.value ?? ""); // Update local state when props.value changes
+        !isDraggingRef.current && setValue(props.value ?? ""); // Update local state when props.value changes as long as user is not actively dragging
     }, [props.value]);
     const handleSliderChange = (_, data) => {
-        const value = data.value * step;
-        setValue(value);
-        props.onChange(value); // Notify parent
+        const newValue = data.value * step;
+        setValue(newValue);
+        if (props.notifyOnlyOnRelease) {
+            // Store the value but don't notify parent yet
+            pendingValueRef.current = newValue;
+            isDraggingRef.current = true;
+        }
+        else {
+            // Notify parent as slider changes
+            props.onChange(newValue);
+        }
+    };
+    const handleSliderPointerUp = () => {
+        if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {
+            props.onChange(pendingValueRef.current);
+            pendingValueRef.current = undefined;
+            isDraggingRef.current = false;
+        }
     };
     const handleInputChange = (value) => {
         const newValue = Number(value);
         if (!isNaN(newValue)) {
             setValue(newValue);
-            props.onChange(newValue); // Notify parent
+            props.onChange(newValue); // Input always updates immediately
         }
     };
-    return (_jsxs("div", { className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (_jsx(Slider, { ...props, size: "small", className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange })), _jsx(Input, { ...props, className: classes.input, value: Math.round(value / step) * step, onChange: handleInputChange, step: step })] }));
+    return (_jsxs("div", { className: classes.syncedSlider, children: [props.min !== undefined && props.max !== undefined && (_jsx(Slider, { ...props, size: "small", className: classes.slider, min: min / step, max: max / step, step: undefined, value: value / step, onChange: handleSliderChange, onPointerUp: handleSliderPointerUp })), _jsx(NumberInput, { ...props, className: classes.input, value: Math.round(value / step) * step, onChange: handleInputChange, step: step })] }));
 };
 //# sourceMappingURL=syncedSlider.js.map

package/fluent/primitives/syncedSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,qBAAqB,GAAG,UAAU,CAAC;IACrC,YAAY,EAAE;QACV,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM;QACxC,KAAK,EAAE,MAAM,EAAE,4BAA4B;KAC9C;IACD,MAAM,EAAE;QACJ,QAAQ,EAAE,CAAC,EAAE,kBAAkB;QAC/B,QAAQ,EAAE,CAAC,EAAE,yBAAyB;KACzC;IACD,KAAK,EAAE;QACH,KAAK,EAAE,MAAM,EAAE,+BAA+B;QAC9C,UAAU,EAAE,CAAC;KAChB;CACJ,CAAC,CAAC;AAQH;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAyC,CAAC,KAAK,EAAE,EAAE;IAC7E,MAAM,OAAO,GAAG,qBAAqB,EAAE,CAAC;IACxC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,KAAK,CAAC,KAAK,CAAC,CAAC;IAExD,iGAAiG;IACjG,8FAA8F;IAC9F,8EAA8E;IAC9E,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;IAC3B,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,IAAI,GAAG,CAAC;IAC7B,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE7B,SAAS,CAAC,GAAG,EAAE;QACX,QAAQ,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,8CAA8C;IAC/E,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;IAElB,MAAM,kBAAkB,GAAG,CAAC,CAAgC,EAAE,IAAwB,EAAE,EAAE;QACtF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;QAChC,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,gBAAgB;IAC3C,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAsB,EAAE,EAAE;QACjD,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;QAC/B,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YACnB,QAAQ,CAAC,QAAQ,CAAC,CAAC;YACnB,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,gBAAgB;QAC9C,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,OAAO,CAAC,YAAY,aAC/B,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,CACnD,KAAC,MAAM,OAAK,KAAK,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,OAAO,CAAC,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,kBAAkB,GAAI,CACtK,EACD,KAAC,KAAK,OAAK,KAAK,EAAE,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,QAAQ,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,GAAI,IAC7H,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider, tokens } from \"@fluentui/react-components\";\r\nimport { Input } from \"./input\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n    syncedSlider: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalXXS, // 2px\r\n        width: \"100%\", // Only fill available space\r\n    },\r\n    slider: {\r\n        flexGrow: 1, // Let slider grow\r\n        minWidth: 0, // Allow shrink if needed\r\n    },\r\n    input: {\r\n        width: \"80px\", // Fixed width for number input\r\n        flexShrink: 0,\r\n    },\r\n});\r\n\r\nexport type SyncedSliderProps = BaseComponentProps<number> & {\r\n    min?: number;\r\n    max?: number;\r\n    step?: number;\r\n};\r\n\r\n/**\r\n * Component which synchronizes a slider and an input field, allowing the user to change a value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n */\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n    const classes = useSyncedSliderStyles();\r\n    const [value, setValue] = useState<number>(props.value);\r\n\r\n    // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n    // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n    // The actual step size in the Fluent slider is 1 when it is ste to undefined.\r\n    const min = props.min ?? 0;\r\n    const max = props.max ?? 100;\r\n    const step = props.step ?? 1;\r\n\r\n    useEffect(() => {\r\n        setValue(props.value ?? \"\"); // Update local state when props.value changes\r\n    }, [props.value]);\r\n\r\n    const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n        const value = data.value * step;\r\n        setValue(value);\r\n        props.onChange(value); // Notify parent\r\n    };\r\n\r\n    const handleInputChange = (value: string | number) => {\r\n        const newValue = Number(value);\r\n        if (!isNaN(newValue)) {\r\n            setValue(newValue);\r\n            props.onChange(newValue); // Notify parent\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.syncedSlider}>\r\n            {props.min !== undefined && props.max !== undefined && (\r\n                <Slider {...props} size=\"small\" className={classes.slider} min={min / step} max={max / step} step={undefined} value={value / step} onChange={handleSliderChange} />\r\n            )}\r\n            <Input {...props} className={classes.input} value={Math.round(value / step) * step} onChange={handleInputChange} step={step} />\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"syncedSlider.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/fluent/primitives/syncedSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { SliderOnChangeData } from \"@fluentui/react-components\";\r\nimport { makeStyles, Slider, tokens } from \"@fluentui/react-components\";\r\nimport { NumberInput } from \"./input\";\r\nimport type { ChangeEvent, FunctionComponent } from \"react\";\r\nimport { useEffect, useState, useRef } from \"react\";\r\nimport type { BaseComponentProps } from \"../hoc/propertyLine\";\r\n\r\nconst useSyncedSliderStyles = makeStyles({\r\n    syncedSlider: {\r\n        display: \"flex\",\r\n        alignItems: \"center\",\r\n        gap: tokens.spacingHorizontalXXS, // 2px\r\n        width: \"100%\", // Only fill available space\r\n    },\r\n    slider: {\r\n        flexGrow: 1, // Let slider grow\r\n        minWidth: \"40px\", // Minimum width for slider to remain usable\r\n    },\r\n    input: {\r\n        width: \"40px\", // Fixed width for input - always 40px\r\n        flexShrink: 0,\r\n    },\r\n});\r\n\r\nexport type SyncedSliderProps = BaseComponentProps<number> & {\r\n    /** Minimum value for the slider */\r\n    min?: number;\r\n    /** Maximum value for the slider */\r\n    max?: number;\r\n    /** Step size for the slider */\r\n    step?: number;\r\n    /** When true, onChange is only called when the user releases the slider, not during drag */\r\n    notifyOnlyOnRelease?: boolean;\r\n};\r\n\r\n/**\r\n * Component which synchronizes a slider and an input field, allowing the user to change the value using either control\r\n * @param props\r\n * @returns SyncedSlider component\r\n */\r\nexport const SyncedSliderInput: FunctionComponent<SyncedSliderProps> = (props) => {\r\n    const classes = useSyncedSliderStyles();\r\n    const [value, setValue] = useState<number>(props.value);\r\n    const pendingValueRef = useRef<number>(undefined);\r\n    const isDraggingRef = useRef(false);\r\n\r\n    // NOTE: The Fluent slider will add tick marks if the step prop is anything other than undefined.\r\n    // To avoid this, we scale the min/max based on the step so we can always make step undefined.\r\n    // The actual step size in the Fluent slider is 1 when it is ste to undefined.\r\n    const min = props.min ?? 0;\r\n    const max = props.max ?? 100;\r\n    const step = props.step ?? 1;\r\n\r\n    useEffect(() => {\r\n        !isDraggingRef.current && setValue(props.value ?? \"\"); // Update local state when props.value changes as long as user is not actively dragging\r\n    }, [props.value]);\r\n\r\n    const handleSliderChange = (_: ChangeEvent<HTMLInputElement>, data: SliderOnChangeData) => {\r\n        const newValue = data.value * step;\r\n        setValue(newValue);\r\n\r\n        if (props.notifyOnlyOnRelease) {\r\n            // Store the value but don't notify parent yet\r\n            pendingValueRef.current = newValue;\r\n            isDraggingRef.current = true;\r\n        } else {\r\n            // Notify parent as slider changes\r\n            props.onChange(newValue);\r\n        }\r\n    };\r\n\r\n    const handleSliderPointerUp = () => {\r\n        if (props.notifyOnlyOnRelease && isDraggingRef.current && pendingValueRef.current !== undefined) {\r\n            props.onChange(pendingValueRef.current);\r\n            pendingValueRef.current = undefined;\r\n            isDraggingRef.current = false;\r\n        }\r\n    };\r\n\r\n    const handleInputChange = (value: string | number) => {\r\n        const newValue = Number(value);\r\n        if (!isNaN(newValue)) {\r\n            setValue(newValue);\r\n            props.onChange(newValue); // Input always updates immediately\r\n        }\r\n    };\r\n\r\n    return (\r\n        <div className={classes.syncedSlider}>\r\n            {props.min !== undefined && props.max !== undefined && (\r\n                <Slider\r\n                    {...props}\r\n                    size=\"small\"\r\n                    className={classes.slider}\r\n                    min={min / step}\r\n                    max={max / step}\r\n                    step={undefined}\r\n                    value={value / step}\r\n                    onChange={handleSliderChange}\r\n                    onPointerUp={handleSliderPointerUp}\r\n                />\r\n            )}\r\n            <NumberInput {...props} className={classes.input} value={Math.round(value / step) * step} onChange={handleInputChange} step={step} />\r\n        </div>\r\n    );\r\n};\r\n"]}

package/lines/booleanLineComponent.d.ts

@@ -7,5 +7,7 @@ export interface IBooleanLineComponentProps {
 }
 export declare class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {
     constructor(props: IBooleanLineComponentProps);
+    renderFluent(): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/lines/booleanLineComponent.js

@@ -2,14 +2,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheck, faTimesCircle } from "@fortawesome/free-solid-svg-icons";
+import { ReadonlyBooleanLine } from "shared-ui-components/fluent/hoc/readonlyBooleanLine";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 export class BooleanLineComponent extends React.Component {
     constructor(props) {
         super(props);
     }
-    render() {
+    renderFluent() {
+        return _jsx(ReadonlyBooleanLine, { label: this.props.label, value: this.props.value });
+    }
+    renderOriginal() {
         const check = this.props.value ? _jsx(FontAwesomeIcon, { icon: faCheck }) : _jsx(FontAwesomeIcon, { icon: faTimesCircle });
         const className = this.props.value ? "value check" : "value uncheck";
         return (_jsxs("div", { className: "textLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: className, children: check })] }));
     }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
+    }
 }
 //# sourceMappingURL=booleanLineComponent.js.map

package/lines/booleanLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"booleanLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/booleanLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAS3E,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAqC;IACjF,YAAY,KAAiC;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAEQ,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,GAAI,CAAC;QAC/G,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;QAErE,OAAO,CACH,eAAK,SAAS,EAAC,UAAU,aACpB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,cAAK,SAAS,EAAE,SAAS,YAAG,KAAK,GAAO,IACtC,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faTimesCircle } from \"@fortawesome/free-solid-svg-icons\";\r\n\r\nexport interface IBooleanLineComponentProps {\r\n    label: string;\r\n    value: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {\r\n    constructor(props: IBooleanLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    override render() {\r\n        const check = this.props.value ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faTimesCircle} />;\r\n        const className = this.props.value ? \"value check\" : \"value uncheck\";\r\n\r\n        return (\r\n            <div className=\"textLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className={className}>{check}</div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"booleanLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/booleanLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,qDAAqD,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAShF,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAqC;IACjF,YAAY,KAAiC;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IACD,YAAY;QACR,OAAO,KAAC,mBAAmB,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,GAAI,CAAC;IACrF,CAAC;IAED,cAAc;QACV,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,CAAC,CAAC,CAAC,KAAC,eAAe,IAAC,IAAI,EAAE,aAAa,GAAI,CAAC;QAC/G,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,eAAe,CAAC;QAErE,OAAO,CACH,eAAK,SAAS,EAAC,UAAU,aACpB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,cAAK,SAAS,EAAE,SAAS,YAAG,KAAK,GAAO,IACtC,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faCheck, faTimesCircle } from \"@fortawesome/free-solid-svg-icons\";\r\nimport { ReadonlyBooleanLine } from \"shared-ui-components/fluent/hoc/readonlyBooleanLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface IBooleanLineComponentProps {\r\n    label: string;\r\n    value: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class BooleanLineComponent extends React.Component<IBooleanLineComponentProps> {\r\n    constructor(props: IBooleanLineComponentProps) {\r\n        super(props);\r\n    }\r\n    renderFluent() {\r\n        return <ReadonlyBooleanLine label={this.props.label} value={this.props.value} />;\r\n    }\r\n\r\n    renderOriginal() {\r\n        const check = this.props.value ? <FontAwesomeIcon icon={faCheck} /> : <FontAwesomeIcon icon={faTimesCircle} />;\r\n        const className = this.props.value ? \"value check\" : \"value uncheck\";\r\n\r\n        return (\r\n            <div className=\"textLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className={className}>{check}</div>\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/fileButtonLineComponent.js

@@ -16,7 +16,7 @@ export class FileButtonLine extends React.Component {
         evt.target.value = "";
     }
     renderFluent() {
-        return _jsx(FileUploadLine, { ...this.props });
+        return _jsx(FileUploadLine, { ...this.props, onClick: (file) => this.props.onClick(file[0]) });
     }
     renderOriginal() {
         return (_jsxs("div", { className: "buttonLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("label", { htmlFor: "file-upload" + this._id, className: "file-upload", children: this.props.label }), _jsx("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] }));

package/lines/fileButtonLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"fileButtonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAUhF,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA+B;IAKrE,YAAY,KAA2B;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,cAAc,CAAC,YAAY,EAAE,CAAC;QAKxC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,YAAY;QACR,OAAO,KAAC,cAAc,OAAK,IAAI,CAAC,KAAK,GAAI,CAAC;IAC9C,CAAC;IAED,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,aACtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;;AAnCc,2BAAY,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import * as React from \"react\";\r\nimport { FileUploadLine } from \"../fluent/hoc/fileUploadLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface IFileButtonLineProps {\r\n    label: string;\r\n    onClick: (file: File) => void;\r\n    accept: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLine extends React.Component<IFileButtonLineProps> {\r\n    private static _IdGenerator = 0;\r\n    private _id = FileButtonLine._IdGenerator++;\r\n    private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n    constructor(props: IFileButtonLineProps) {\r\n        super(props);\r\n        this._uploadInputRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            this.props.onClick(files[0]);\r\n        }\r\n\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    renderFluent() {\r\n        return <FileUploadLine {...this.props} />;\r\n    }\r\n\r\n    renderOriginal() {\r\n        return (\r\n            <div className=\"buttonLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n                    {this.props.label}\r\n                </label>\r\n                <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"fileButtonLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,mDAAmD,CAAC;AAUhF,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,SAA+B;IAKrE,YAAY,KAA2B;QACnC,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,cAAc,CAAC,YAAY,EAAE,CAAC;QAKxC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,YAAY;QACR,OAAO,KAAC,cAAc,OAAK,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAI,CAAC;IAC9F,CAAC;IAED,cAAc;QACV,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,aACtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;IACQ,MAAM;QACX,OAAO,KAAC,WAAW,CAAC,QAAQ,cAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,GAAwB,CAAC;IACvI,CAAC;;AAnCc,2BAAY,GAAG,CAAC,AAAJ,CAAK","sourcesContent":["import * as React from \"react\";\r\nimport { FileUploadLine } from \"../fluent/hoc/fileUploadLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface IFileButtonLineProps {\r\n    label: string;\r\n    onClick: (file: File) => void;\r\n    accept: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLine extends React.Component<IFileButtonLineProps> {\r\n    private static _IdGenerator = 0;\r\n    private _id = FileButtonLine._IdGenerator++;\r\n    private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n    constructor(props: IFileButtonLineProps) {\r\n        super(props);\r\n        this._uploadInputRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            this.props.onClick(files[0]);\r\n        }\r\n\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    renderFluent() {\r\n        return <FileUploadLine {...this.props} onClick={(file) => this.props.onClick(file[0])} />;\r\n    }\r\n\r\n    renderOriginal() {\r\n        return (\r\n            <div className=\"buttonLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n                    {this.props.label}\r\n                </label>\r\n                <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/hexLineComponent.d.ts

@@ -35,6 +35,7 @@ export declare class HexLineComponent extends React.Component<IHexLineComponentP
     updateValue(valueString: string, raisePropertyChanged: boolean): void;
     lock(): void;
     unlock(): void;
+    onCopyClick(): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/hexLineComponent.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyCommandToClipboard.js";
+import copyIcon from "../imgs/copy.svg";
 export class HexLineComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -95,6 +97,19 @@ export class HexLineComponent extends React.Component {
             this.props.lockObject.lock = false;
         }
     }
+    onCopyClick() {
+        if (this.props && this.props.target) {
+            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);
+            const targetName = "globalThis.debugNode";
+            const targetProperty = this.props.propertyName;
+            const value = this.props.target[this.props.propertyName];
+            const strCommand = targetName + "." + targetProperty + " = " + value + ";// (debugNode as " + babylonNamespace + className + ")";
+            copyCommandToClipboard(strCommand);
+        }
+        else {
+            copyCommandToClipboard("undefined");
+        }
+    }
     render() {
         let valueAsHex;
         if (this._propertyChange) {
@@ -115,7 +130,7 @@ export class HexLineComponent extends React.Component {
                                     return;
                                 }
                                 this.updateValue(this.state.value, true);
-                            } }) })] })) }));
+                            } }) }), _jsx("div", { className: "copy hoverIcon", onClick: () => this.onCopyClick(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) })] })) }));
     }
 }
 //# sourceMappingURL=hexLineComponent.js.map

package/lines/hexLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"hexLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/hexLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface IHexLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    lockObject?: LockObject;\r\n    onChange?: (newValue: number) => void;\r\n    isInteger?: boolean;\r\n    replaySourceReplacement?: string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    additionalClass?: string;\r\n    step?: string;\r\n    digits?: number;\r\n    useEuler?: boolean;\r\n    min?: number;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class HexLineComponent extends React.Component<IHexLineComponentProps, { value: string }> {\r\n    private _localChange = false;\r\n    private _store: number;\r\n    private _propertyChange = true;\r\n\r\n    constructor(props: IHexLineComponentProps) {\r\n        super(props);\r\n\r\n        const currentValue = this.props.target[this.props.propertyName];\r\n        this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 3)) : \"0\" };\r\n        this._store = currentValue;\r\n    }\r\n\r\n    override componentWillUnmount() {\r\n        this.unlock();\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: { value: string }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = nextProps.target[nextProps.propertyName];\r\n        const newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 3)) : \"0\";\r\n\r\n        if (newValueString !== nextState.value) {\r\n            nextState.value = newValueString;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n        }\r\n\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.replaySourceReplacement ?? this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    convertToHexString(valueString: string): string {\r\n        while (valueString.length < 10) {\r\n            valueString += \"0\";\r\n        }\r\n        return valueString;\r\n    }\r\n\r\n    updateValue(valueString: string, raisePropertyChanged: boolean) {\r\n        if (valueString.substring(0, 2) != \"0x\") {\r\n            if (valueString.substring(0, 1) != \"0\") {\r\n                valueString = \"0x\" + valueString;\r\n            } else {\r\n                valueString = \"0x\" + valueString.substr(1);\r\n            }\r\n        }\r\n\r\n        const valueSubstr = valueString.substr(2);\r\n        if (valueSubstr != \"\" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {\r\n            return;\r\n        }\r\n\r\n        if (valueString.length > 10) {\r\n            return;\r\n        }\r\n\r\n        const valueStringAsHex = this.convertToHexString(valueString);\r\n        let valueAsNumber: number;\r\n\r\n        valueAsNumber = parseInt(valueStringAsHex);\r\n\r\n        if (!isNaN(valueAsNumber) && this.props.min !== undefined) {\r\n            if (valueAsNumber < this.props.min) {\r\n                valueAsNumber = this.props.min;\r\n                valueString = valueAsNumber.toString();\r\n            }\r\n        }\r\n\r\n        this._localChange = true;\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            return;\r\n        }\r\n\r\n        this.setState({ value: valueString });\r\n        if (raisePropertyChanged) {\r\n            this._propertyChange = true;\r\n            this.props.target[this.props.propertyName] = valueAsNumber;\r\n            this.raiseOnPropertyChanged(valueAsNumber, this._store);\r\n        } else {\r\n            this._propertyChange = false;\r\n        }\r\n\r\n        this._store = valueAsNumber;\r\n    }\r\n\r\n    lock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = true;\r\n        }\r\n    }\r\n\r\n    unlock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        let valueAsHex: string;\r\n        if (this._propertyChange) {\r\n            const valueAsNumber = parseInt(this.state.value);\r\n            valueAsHex = valueAsNumber.toString(16);\r\n            let hex0String = \"\";\r\n            for (let i = 0; i < 8 - valueAsHex.length; i++) {\r\n                //padding the '0's\r\n                hex0String += \"0\";\r\n            }\r\n            valueAsHex = \"0x\" + hex0String + valueAsHex.toUpperCase();\r\n        } else {\r\n            valueAsHex = this.state.value;\r\n        }\r\n\r\n        return (\r\n            <div>\r\n                {!this.props.useEuler && (\r\n                    <div className={this.props.additionalClass ? this.props.additionalClass + \" floatLine\" : \"floatLine\"}>\r\n                        {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                        <div className=\"label\" title={this.props.label}>\r\n                            {this.props.label}\r\n                        </div>\r\n                        <div className=\"value\">\r\n                            <input\r\n                                type=\"string\"\r\n                                className=\"hex-input\"\r\n                                value={valueAsHex}\r\n                                onBlur={() => this.unlock()}\r\n                                onFocus={() => this.lock()}\r\n                                onChange={(evt) => this.updateValue(evt.target.value, false)}\r\n                                onKeyDown={(evt) => {\r\n                                    if (evt.keyCode !== 13) {\r\n                                        return;\r\n                                    }\r\n                                    this.updateValue(this.state.value, true);\r\n                                }}\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"hexLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/hexLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAC9F,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AAoBxC,MAAM,OAAO,gBAAiB,SAAQ,KAAK,CAAC,SAAoD;IAK5F,YAAY,KAA6B;QACrC,KAAK,CAAC,KAAK,CAAC,CAAC;QALT,iBAAY,GAAG,KAAK,CAAC;QAErB,oBAAe,GAAG,IAAI,CAAC;QAK3B,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QAChE,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC;QAC7I,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC;IAC/B,CAAC;IAEQ,oBAAoB;QACzB,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAEQ,qBAAqB,CAAC,SAAiC,EAAE,SAA4B;QAC1F,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QAC1D,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAEhI,IAAI,cAAc,KAAK,SAAS,CAAC,KAAK,EAAE,CAAC;YACrC,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;YACjC,OAAO,IAAI,CAAC;QAChB,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAED,sBAAsB,CAAC,QAAgB,EAAE,aAAqB;QAC1D,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACtB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,2BAA2B,EAAE,CAAC;YAC1C,OAAO;QACX,CAAC;QACD,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,eAAe,CAAC;YACnD,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,uBAAuB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;YAC/D,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY;YACjC,KAAK,EAAE,QAAQ;YACf,YAAY,EAAE,aAAa;SAC9B,CAAC,CAAC;IACP,CAAC;IAED,kBAAkB,CAAC,WAAmB;QAClC,OAAO,WAAW,CAAC,MAAM,GAAG,EAAE,EAAE,CAAC;YAC7B,WAAW,IAAI,GAAG,CAAC;QACvB,CAAC;QACD,OAAO,WAAW,CAAC;IACvB,CAAC;IAED,WAAW,CAAC,WAAmB,EAAE,oBAA6B;QAC1D,IAAI,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC;YACtC,IAAI,WAAW,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC;gBACrC,WAAW,GAAG,IAAI,GAAG,WAAW,CAAC;YACrC,CAAC;iBAAM,CAAC;gBACJ,WAAW,GAAG,IAAI,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;YAC/C,CAAC;QACL,CAAC;QAED,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,WAAW,IAAI,EAAE,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,EAAE,CAAC;YACpE,OAAO;QACX,CAAC;QAED,IAAI,WAAW,CAAC,MAAM,GAAG,EAAE,EAAE,CAAC;YAC1B,OAAO;QACX,CAAC;QAED,MAAM,gBAAgB,GAAG,IAAI,CAAC,kBAAkB,CAAC,WAAW,CAAC,CAAC;QAC9D,IAAI,aAAqB,CAAC;QAE1B,aAAa,GAAG,QAAQ,CAAC,gBAAgB,CAAC,CAAC;QAE3C,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;YACxD,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;gBACjC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;gBAC/B,WAAW,GAAG,aAAa,CAAC,QAAQ,EAAE,CAAC;YAC3C,CAAC;QACL,CAAC;QAED,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAEzB,IAAI,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YACvB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,CAAC;QACtC,IAAI,oBAAoB,EAAE,CAAC;YACvB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;YAC5B,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,GAAG,aAAa,CAAC;YAC3D,IAAI,CAAC,sBAAsB,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;QAC5D,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QACjC,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,aAAa,CAAC;IAChC,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;QACtC,CAAC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;QACvC,CAAC;IACL,CAAC;IAED,WAAW;QACP,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAClC,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,GAAG,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YACrF,MAAM,UAAU,GAAG,sBAAsB,CAAC;YAC1C,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;YAC/C,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;YACzD,MAAM,UAAU,GAAG,UAAU,GAAG,GAAG,GAAG,cAAc,GAAG,KAAK,GAAG,KAAK,GAAG,oBAAoB,GAAG,gBAAgB,GAAG,SAAS,GAAG,GAAG,CAAC;YACjI,sBAAsB,CAAC,UAAU,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACJ,sBAAsB,CAAC,WAAW,CAAC,CAAC;QACxC,CAAC;IACL,CAAC;IAEQ,MAAM;QACX,IAAI,UAAkB,CAAC;QACvB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YACjD,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACxC,IAAI,UAAU,GAAG,EAAE,CAAC;YACpB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBAC7C,kBAAkB;gBAClB,UAAU,IAAI,GAAG,CAAC;YACtB,CAAC;YACD,UAAU,GAAG,IAAI,GAAG,UAAU,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC;QAC9D,CAAC;aAAM,CAAC;YACJ,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QAClC,CAAC;QAED,OAAO,CACH,wBACK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CACrB,eAAK,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,GAAG,YAAY,CAAC,CAAC,CAAC,WAAW,aAC/F,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,cAAK,SAAS,EAAC,OAAO,YAClB,gBACI,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,WAAW,EACrB,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,EAC5D,SAAS,EAAE,CAAC,GAAG,EAAE,EAAE;gCACf,IAAI,GAAG,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;oCACrB,OAAO;gCACX,CAAC;gCACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;4BAC7C,CAAC,GACH,GACA,EACN,cAAK,SAAS,EAAC,gBAAgB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,KAAK,EAAC,mBAAmB,YACxF,cAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,MAAM,GAAG,GAC/B,IACJ,CACT,GACC,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\n\r\ninterface IHexLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    lockObject?: LockObject;\r\n    onChange?: (newValue: number) => void;\r\n    isInteger?: boolean;\r\n    replaySourceReplacement?: string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    additionalClass?: string;\r\n    step?: string;\r\n    digits?: number;\r\n    useEuler?: boolean;\r\n    min?: number;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class HexLineComponent extends React.Component<IHexLineComponentProps, { value: string }> {\r\n    private _localChange = false;\r\n    private _store: number;\r\n    private _propertyChange = true;\r\n\r\n    constructor(props: IHexLineComponentProps) {\r\n        super(props);\r\n\r\n        const currentValue = this.props.target[this.props.propertyName];\r\n        this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 3)) : \"0\" };\r\n        this._store = currentValue;\r\n    }\r\n\r\n    override componentWillUnmount() {\r\n        this.unlock();\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: { value: string }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = nextProps.target[nextProps.propertyName];\r\n        const newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 3)) : \"0\";\r\n\r\n        if (newValueString !== nextState.value) {\r\n            nextState.value = newValueString;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n        }\r\n\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.replaySourceReplacement ?? this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    convertToHexString(valueString: string): string {\r\n        while (valueString.length < 10) {\r\n            valueString += \"0\";\r\n        }\r\n        return valueString;\r\n    }\r\n\r\n    updateValue(valueString: string, raisePropertyChanged: boolean) {\r\n        if (valueString.substring(0, 2) != \"0x\") {\r\n            if (valueString.substring(0, 1) != \"0\") {\r\n                valueString = \"0x\" + valueString;\r\n            } else {\r\n                valueString = \"0x\" + valueString.substr(1);\r\n            }\r\n        }\r\n\r\n        const valueSubstr = valueString.substr(2);\r\n        if (valueSubstr != \"\" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {\r\n            return;\r\n        }\r\n\r\n        if (valueString.length > 10) {\r\n            return;\r\n        }\r\n\r\n        const valueStringAsHex = this.convertToHexString(valueString);\r\n        let valueAsNumber: number;\r\n\r\n        valueAsNumber = parseInt(valueStringAsHex);\r\n\r\n        if (!isNaN(valueAsNumber) && this.props.min !== undefined) {\r\n            if (valueAsNumber < this.props.min) {\r\n                valueAsNumber = this.props.min;\r\n                valueString = valueAsNumber.toString();\r\n            }\r\n        }\r\n\r\n        this._localChange = true;\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            return;\r\n        }\r\n\r\n        this.setState({ value: valueString });\r\n        if (raisePropertyChanged) {\r\n            this._propertyChange = true;\r\n            this.props.target[this.props.propertyName] = valueAsNumber;\r\n            this.raiseOnPropertyChanged(valueAsNumber, this._store);\r\n        } else {\r\n            this._propertyChange = false;\r\n        }\r\n\r\n        this._store = valueAsNumber;\r\n    }\r\n\r\n    lock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = true;\r\n        }\r\n    }\r\n\r\n    unlock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    onCopyClick() {\r\n        if (this.props && this.props.target) {\r\n            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n            const targetName = \"globalThis.debugNode\";\r\n            const targetProperty = this.props.propertyName;\r\n            const value = this.props.target[this.props.propertyName];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            copyCommandToClipboard(strCommand);\r\n        } else {\r\n            copyCommandToClipboard(\"undefined\");\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        let valueAsHex: string;\r\n        if (this._propertyChange) {\r\n            const valueAsNumber = parseInt(this.state.value);\r\n            valueAsHex = valueAsNumber.toString(16);\r\n            let hex0String = \"\";\r\n            for (let i = 0; i < 8 - valueAsHex.length; i++) {\r\n                //padding the '0's\r\n                hex0String += \"0\";\r\n            }\r\n            valueAsHex = \"0x\" + hex0String + valueAsHex.toUpperCase();\r\n        } else {\r\n            valueAsHex = this.state.value;\r\n        }\r\n\r\n        return (\r\n            <div>\r\n                {!this.props.useEuler && (\r\n                    <div className={this.props.additionalClass ? this.props.additionalClass + \" floatLine\" : \"floatLine\"}>\r\n                        {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                        <div className=\"label\" title={this.props.label}>\r\n                            {this.props.label}\r\n                        </div>\r\n                        <div className=\"value\">\r\n                            <input\r\n                                type=\"string\"\r\n                                className=\"hex-input\"\r\n                                value={valueAsHex}\r\n                                onBlur={() => this.unlock()}\r\n                                onFocus={() => this.lock()}\r\n                                onChange={(evt) => this.updateValue(evt.target.value, false)}\r\n                                onKeyDown={(evt) => {\r\n                                    if (evt.keyCode !== 13) {\r\n                                        return;\r\n                                    }\r\n                                    this.updateValue(this.state.value, true);\r\n                                }}\r\n                            />\r\n                        </div>\r\n                        <div className=\"copy hoverIcon\" onClick={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n                            <img src={copyIcon} alt=\"Copy\" />\r\n                        </div>\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/lineContainerComponent.d.ts

@@ -14,6 +14,8 @@ export declare class LineContainerComponent extends React.Component<ILineContain
     switchExpandedState(): void;
     renderHeader(): import("react/jsx-runtime").JSX.Element;
     componentDidMount(): void;
+    renderFluent(): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/lineContainerComponent.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DataStorage } from "@babylonjs/core/Misc/dataStorage.js";
 import downArrow from "./downArrow.svg";
+import { AccordionSection } from "../fluent/primitives/accordion.js";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
 export class LineContainerComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -43,11 +45,17 @@ export class LineContainerComponent extends React.Component {
             this.setState({ isExpanded: false });
         }
     }
-    render() {
+    renderFluent() {
+        return _jsx(AccordionSection, { title: this.props.title, children: this.props.children });
+    }
+    renderOriginal() {
         if (!this.state.isExpanded) {
             return (_jsx("div", { className: "paneContainer", children: _jsx("div", { className: "paneContainer-content", children: this.renderHeader() }) }));
         }
         return (_jsxs("div", { className: "paneContainer", children: [_jsxs("div", { className: "paneContainer-content", children: [this.renderHeader(), _jsx("div", { className: "paneList", children: this.props.children })] }), _jsx("div", { className: "paneContainer-highlight-border" + (!this.state.isHighlighted ? " transparent" : "") })] }));
     }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
+    }
 }
 //# sourceMappingURL=lineContainerComponent.js.map

package/lines/lineContainerComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"lineContainerComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/lineContainerComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\nimport type { ISelectedLineContainer } from \"./iSelectedLineContainer\";\r\nimport downArrow from \"./downArrow.svg\";\r\n\r\ninterface ILineContainerComponentProps {\r\n    selection?: ISelectedLineContainer;\r\n    title: string;\r\n    children: any[] | any;\r\n    closed?: boolean;\r\n}\r\n\r\nexport class LineContainerComponent extends React.Component<ILineContainerComponentProps, { isExpanded: boolean; isHighlighted: boolean }> {\r\n    constructor(props: ILineContainerComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n\r\n        this.state = { isExpanded: initialState, isHighlighted: false };\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    renderHeader() {\r\n        const className = this.state.isExpanded ? \"collapse\" : \"collapse closed\";\r\n\r\n        return (\r\n            <div className=\"header\" onClick={() => this.switchExpandedState()}>\r\n                <div className=\"title\">{this.props.title}</div>\r\n                <div className={className}>\r\n                    <img className=\"img\" title={this.props.title} src={downArrow} />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    override componentDidMount() {\r\n        if (!this.props.selection) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.length === 0 && this.props.selection.selectedLineContainerTitlesNoFocus.length === 0) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitles = [];\r\n            });\r\n\r\n            this.setState({ isExpanded: true, isHighlighted: true });\r\n\r\n            window.setTimeout(() => {\r\n                this.setState({ isHighlighted: false });\r\n            }, 5000);\r\n        } else if (this.props.selection.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitlesNoFocus = [];\r\n            });\r\n            this.setState({ isExpanded: true, isHighlighted: false });\r\n        } else {\r\n            this.setState({ isExpanded: false });\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        if (!this.state.isExpanded) {\r\n            return (\r\n                <div className=\"paneContainer\">\r\n                    <div className=\"paneContainer-content\">{this.renderHeader()}</div>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        return (\r\n            <div className=\"paneContainer\">\r\n                <div className=\"paneContainer-content\">\r\n                    {this.renderHeader()}\r\n                    <div className=\"paneList\">{this.props.children}</div>\r\n                </div>\r\n                <div className={\"paneContainer-highlight-border\" + (!this.state.isHighlighted ? \" transparent\" : \"\")}></div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"lineContainerComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/lineContainerComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\nimport type { ISelectedLineContainer } from \"./iSelectedLineContainer\";\r\nimport downArrow from \"./downArrow.svg\";\r\nimport { AccordionSection } from \"../fluent/primitives/accordion\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface ILineContainerComponentProps {\r\n    selection?: ISelectedLineContainer;\r\n    title: string;\r\n    children: any[] | any;\r\n    closed?: boolean;\r\n}\r\n\r\nexport class LineContainerComponent extends React.Component<ILineContainerComponentProps, { isExpanded: boolean; isHighlighted: boolean }> {\r\n    constructor(props: ILineContainerComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n\r\n        this.state = { isExpanded: initialState, isHighlighted: false };\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    renderHeader() {\r\n        const className = this.state.isExpanded ? \"collapse\" : \"collapse closed\";\r\n\r\n        return (\r\n            <div className=\"header\" onClick={() => this.switchExpandedState()}>\r\n                <div className=\"title\">{this.props.title}</div>\r\n                <div className={className}>\r\n                    <img className=\"img\" title={this.props.title} src={downArrow} />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    override componentDidMount() {\r\n        if (!this.props.selection) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.length === 0 && this.props.selection.selectedLineContainerTitlesNoFocus.length === 0) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitles = [];\r\n            });\r\n\r\n            this.setState({ isExpanded: true, isHighlighted: true });\r\n\r\n            window.setTimeout(() => {\r\n                this.setState({ isHighlighted: false });\r\n            }, 5000);\r\n        } else if (this.props.selection.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitlesNoFocus = [];\r\n            });\r\n            this.setState({ isExpanded: true, isHighlighted: false });\r\n        } else {\r\n            this.setState({ isExpanded: false });\r\n        }\r\n    }\r\n\r\n    renderFluent() {\r\n        return <AccordionSection title={this.props.title}>{this.props.children}</AccordionSection>;\r\n    }\r\n\r\n    renderOriginal() {\r\n        if (!this.state.isExpanded) {\r\n            return (\r\n                <div className=\"paneContainer\">\r\n                    <div className=\"paneContainer-content\">{this.renderHeader()}</div>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        return (\r\n            <div className=\"paneContainer\">\r\n                <div className=\"paneContainer-content\">\r\n                    {this.renderHeader()}\r\n                    <div className=\"paneList\">{this.props.children}</div>\r\n                </div>\r\n                <div className={\"paneContainer-highlight-border\" + (!this.state.isHighlighted ? \" transparent\" : \"\")}></div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/lineWithFileButtonComponent.d.ts

@@ -16,6 +16,8 @@ export declare class LineWithFileButtonComponent extends React.Component<ILineWi
     constructor(props: ILineWithFileButtonComponentProps);
     onChange(evt: any): void;
     switchExpandedState(): void;
+    renderFluent(): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/lineWithFileButtonComponent.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DataStorage } from "@babylonjs/core/Misc/dataStorage.js";
+import { FileUploadLine } from "../fluent/hoc/fileUploadLine.js";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 export class LineWithFileButtonComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -22,8 +24,20 @@ export class LineWithFileButtonComponent extends React.Component {
         DataStorage.WriteBoolean(this.props.title, newState);
         this.setState({ isExpanded: newState });
     }
-    render() {
+    renderFluent() {
+        return (_jsx(FileUploadLine, { label: this.props.title ?? "file-upload", accept: this.props.accept, onClick: (files) => {
+                if (files && files.length) {
+                    for (const file of files) {
+                        this.props.onIconClick(file);
+                    }
+                }
+            } }));
+    }
+    renderOriginal() {
         return (_jsxs("div", { className: "nonDraggableLine withButton", children: [this.props.label, _jsx("div", { className: "icon", title: this.props.title, children: _jsx("img", { className: "img", src: this.props.iconImage }) }), _jsxs("div", { className: "buttonLine", title: this.props.title, children: [_jsx("label", { htmlFor: this.props.uploadName ? this.props.uploadName : "file-upload", className: "file-upload" }), _jsx("input", { ref: this._uploadRef, id: this.props.uploadName ? this.props.uploadName : "file-upload", type: "file", multiple: this.props.multiple, accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] })] }));
     }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
+    }
 }
 //# sourceMappingURL=lineWithFileButtonComponent.js.map

package/lines/lineWithFileButtonComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"lineWithFileButtonComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/lineWithFileButtonComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,4CAA8B;AAapD,MAAM,OAAO,2BAA4B,SAAQ,KAAK,CAAC,SAAqE;IAExH,YAAY,KAAwC;QAChD,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,MAAM,YAAY,GAAG,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACnF,IAAI,CAAC,KAAK,GAAG,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC;QAC1C,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IACxC,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE,CAAC;YACxB,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACvB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;YACjC,CAAC;QACL,CAAC;QACD,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,mBAAmB;QACf,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC;QACxC,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACrD,IAAI,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC5C,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,eAAK,SAAS,EAAC,6BAA6B,aACvC,IAAI,CAAC,KAAK,CAAC,KAAK,EACjB,cAAK,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,YACzC,cAAK,SAAS,EAAC,KAAK,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAI,GAChD,EACN,eAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,aAC/C,gBAAO,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,EAAE,SAAS,EAAC,aAAa,GAAG,EACzG,gBACI,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,EACjE,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC7B,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EACzB,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GACvC,IACA,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\n\r\ninterface ILineWithFileButtonComponentProps {\r\n    title: string;\r\n    closed?: boolean;\r\n    multiple?: boolean;\r\n    label: string;\r\n    iconImage: any;\r\n    onIconClick: (file: File) => void;\r\n    accept: string;\r\n    uploadName?: string;\r\n}\r\n\r\nexport class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, { isExpanded: boolean }> {\r\n    private _uploadRef: React.RefObject<HTMLInputElement>;\r\n    constructor(props: ILineWithFileButtonComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n        this.state = { isExpanded: initialState };\r\n        this._uploadRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            for (const file of files) {\r\n                this.props.onIconClick(file);\r\n            }\r\n        }\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    override render() {\r\n        return (\r\n            <div className=\"nonDraggableLine withButton\">\r\n                {this.props.label}\r\n                <div className=\"icon\" title={this.props.title}>\r\n                    <img className=\"img\" src={this.props.iconImage} />\r\n                </div>\r\n                <div className=\"buttonLine\" title={this.props.title}>\r\n                    <label htmlFor={this.props.uploadName ? this.props.uploadName : \"file-upload\"} className=\"file-upload\" />\r\n                    <input\r\n                        ref={this._uploadRef}\r\n                        id={this.props.uploadName ? this.props.uploadName : \"file-upload\"}\r\n                        type=\"file\"\r\n                        multiple={this.props.multiple}\r\n                        accept={this.props.accept}\r\n                        onChange={(evt) => this.onChange(evt)}\r\n                    />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"lineWithFileButtonComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/lineWithFileButtonComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\nimport { FileUploadLine } from \"../fluent/hoc/fileUploadLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface ILineWithFileButtonComponentProps {\r\n    title: string;\r\n    closed?: boolean;\r\n    multiple?: boolean;\r\n    label: string;\r\n    iconImage: any;\r\n    onIconClick: (file: File) => void;\r\n    accept: string;\r\n    uploadName?: string;\r\n}\r\n\r\nexport class LineWithFileButtonComponent extends React.Component<ILineWithFileButtonComponentProps, { isExpanded: boolean }> {\r\n    private _uploadRef: React.RefObject<HTMLInputElement>;\r\n    constructor(props: ILineWithFileButtonComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n        this.state = { isExpanded: initialState };\r\n        this._uploadRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            for (const file of files) {\r\n                this.props.onIconClick(file);\r\n            }\r\n        }\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    renderFluent() {\r\n        return (\r\n            <FileUploadLine\r\n                label={this.props.title ?? \"file-upload\"}\r\n                accept={this.props.accept}\r\n                onClick={(files) => {\r\n                    if (files && files.length) {\r\n                        for (const file of files) {\r\n                            this.props.onIconClick(file);\r\n                        }\r\n                    }\r\n                }}\r\n            />\r\n        );\r\n    }\r\n\r\n    renderOriginal() {\r\n        return (\r\n            <div className=\"nonDraggableLine withButton\">\r\n                {this.props.label}\r\n                <div className=\"icon\" title={this.props.title}>\r\n                    <img className=\"img\" src={this.props.iconImage} />\r\n                </div>\r\n                <div className=\"buttonLine\" title={this.props.title}>\r\n                    <label htmlFor={this.props.uploadName ? this.props.uploadName : \"file-upload\"} className=\"file-upload\" />\r\n                    <input\r\n                        ref={this._uploadRef}\r\n                        id={this.props.uploadName ? this.props.uploadName : \"file-upload\"}\r\n                        type=\"file\"\r\n                        multiple={this.props.multiple}\r\n                        accept={this.props.accept}\r\n                        onChange={(evt) => this.onChange(evt)}\r\n                    />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/optionsLineComponent.d.ts

@@ -7,7 +7,7 @@ export interface IOptionsLineProps {
     label: string;
     target: any;
     propertyName: string;
-    options: IInspectableOptions[];
+    options: readonly IInspectableOptions[];
     noDirectUpdate?: boolean;
     onSelect?: (value: number | string) => void;
     extractValue?: (target: any) => number | string;

package/lines/optionsLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport type { IInspectableOptions } from \"core/Misc/iInspectable\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { PropertyLine } from \"../fluent/hoc/propertyLine\";\r\nimport { Dropdown } from \"../fluent/primitives/dropdown\";\r\nimport type { AcceptedDropdownValue } from \"../fluent/primitives/dropdown\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const Null_Value = Number.MAX_SAFE_INTEGER;\r\n\r\nexport interface IOptionsLineProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    options: IInspectableOptions[];\r\n    noDirectUpdate?: boolean;\r\n    onSelect?: (value: number | string) => void;\r\n    extractValue?: (target: any) => number | string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    allowNullValue?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    className?: string;\r\n    valuesAreStrings?: boolean;\r\n    defaultIfNull?: number;\r\n}\r\n\r\nexport class OptionsLine extends React.Component<IOptionsLineProps, { value: number | string }> {\r\n    private _localChange = false;\r\n\r\n    private _remapValueIn(value: number | null): number {\r\n        return this.props.allowNullValue && value === null ? Null_Value : value!;\r\n    }\r\n\r\n    private _remapValueOut(value: number): number | null {\r\n        return this.props.allowNullValue && value === Null_Value ? null : value;\r\n    }\r\n\r\n    private _getValue(props: IOptionsLineProps) {\r\n        if (props.extractValue) {\r\n            return props.extractValue(props.target);\r\n        }\r\n        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];\r\n    }\r\n\r\n    constructor(props: IOptionsLineProps) {\r\n        super(props);\r\n\r\n        this.state = { value: this._remapValueIn(this._getValue(props)) };\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IOptionsLineProps, nextState: { value: number }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);\r\n        if (newValue != null && newValue !== nextState.value) {\r\n            nextState.value = newValue;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n            allowNullValue: this.props.allowNullValue,\r\n        });\r\n    }\r\n\r\n    setValue(value: string | number) {\r\n        this.setState({ value: value });\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);\r\n        this._localChange = true;\r\n\r\n        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        if (!this.props.noDirectUpdate) {\r\n            this.props.target[this.props.propertyName] = this._remapValueOut(value as number);\r\n        }\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(value);\r\n        }\r\n\r\n        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        this.raiseOnPropertyChanged(newValue, store);\r\n    }\r\n\r\n    // Copy to clipboard the code this option actually does\r\n    // Example : material.sideOrientation = 1;\r\n    onCopyClickStr() {\r\n        if (this.props && this.props.target) {\r\n            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n            const targetName = \"globalThis.debugNode\";\r\n            const targetProperty = this.props.propertyName;\r\n            const value = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            return strCommand;\r\n        } else {\r\n            return \"undefined\";\r\n        }\r\n    }\r\n\r\n    private _renderFluent() {\r\n        return (\r\n            <PropertyLine label={this.props.label} onCopy={() => this.onCopyClickStr()}>\r\n                <Dropdown\r\n                    options={this.props.options}\r\n                    onChange={(val: AcceptedDropdownValue) => {\r\n                        // val != null captures both null and undefined cases\r\n                        val != null && this.updateValue(val.toString());\r\n                    }}\r\n                    value={this.state.value}\r\n                />\r\n            </PropertyLine>\r\n        );\r\n    }\r\n\r\n    private _renderOriginal() {\r\n        return (\r\n            <div className={\"listLine\" + (this.props.className ? \" \" + this.props.className : \"\")}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"options\">\r\n                    <select onChange={(evt) => this.updateValue(evt.target.value)} value={this.state.value ?? \"\"}>\r\n                        {this.props.options.map((option, i) => {\r\n                            return (\r\n                                <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>\r\n                                    {option.label}\r\n                                </option>\r\n                            );\r\n                        })}\r\n                    </select>\r\n                </div>\r\n                <div className=\"copy hoverIcon\" onClick={() => copyCommandToClipboard(this.onCopyClickStr())} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this._renderFluent() : this._renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"optionsLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/optionsLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { copyCommandToClipboard, getClassNameWithNamespace } from \"../copyCommandToClipboard\";\r\nimport type { IInspectableOptions } from \"core/Misc/iInspectable\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { PropertyLine } from \"../fluent/hoc/propertyLine\";\r\nimport { Dropdown } from \"../fluent/primitives/dropdown\";\r\nimport type { AcceptedDropdownValue } from \"../fluent/primitives/dropdown\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const Null_Value = Number.MAX_SAFE_INTEGER;\r\n\r\nexport interface IOptionsLineProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    options: readonly IInspectableOptions[];\r\n    noDirectUpdate?: boolean;\r\n    onSelect?: (value: number | string) => void;\r\n    extractValue?: (target: any) => number | string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    allowNullValue?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    className?: string;\r\n    valuesAreStrings?: boolean;\r\n    defaultIfNull?: number;\r\n}\r\n\r\nexport class OptionsLine extends React.Component<IOptionsLineProps, { value: number | string }> {\r\n    private _localChange = false;\r\n\r\n    private _remapValueIn(value: number | null): number {\r\n        return this.props.allowNullValue && value === null ? Null_Value : value!;\r\n    }\r\n\r\n    private _remapValueOut(value: number): number | null {\r\n        return this.props.allowNullValue && value === Null_Value ? null : value;\r\n    }\r\n\r\n    private _getValue(props: IOptionsLineProps) {\r\n        if (props.extractValue) {\r\n            return props.extractValue(props.target);\r\n        }\r\n        return props.target && props.propertyName ? props.target[props.propertyName] : props.options[props.defaultIfNull || 0];\r\n    }\r\n\r\n    constructor(props: IOptionsLineProps) {\r\n        super(props);\r\n\r\n        this.state = { value: this._remapValueIn(this._getValue(props)) };\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IOptionsLineProps, nextState: { value: number }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);\r\n        if (newValue != null && newValue !== nextState.value) {\r\n            nextState.value = newValue;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n            allowNullValue: this.props.allowNullValue,\r\n        });\r\n    }\r\n\r\n    setValue(value: string | number) {\r\n        this.setState({ value: value });\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);\r\n        this._localChange = true;\r\n\r\n        const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        if (!this.props.noDirectUpdate) {\r\n            this.props.target[this.props.propertyName] = this._remapValueOut(value as number);\r\n        }\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.onSelect) {\r\n            this.props.onSelect(value);\r\n        }\r\n\r\n        const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n\r\n        this.raiseOnPropertyChanged(newValue, store);\r\n    }\r\n\r\n    // Copy to clipboard the code this option actually does\r\n    // Example : material.sideOrientation = 1;\r\n    onCopyClickStr() {\r\n        if (this.props && this.props.target) {\r\n            const { className, babylonNamespace } = getClassNameWithNamespace(this.props.target);\r\n            const targetName = \"globalThis.debugNode\";\r\n            const targetProperty = this.props.propertyName;\r\n            const value = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];\r\n            const strCommand = targetName + \".\" + targetProperty + \" = \" + value + \";// (debugNode as \" + babylonNamespace + className + \")\";\r\n            return strCommand;\r\n        } else {\r\n            return \"undefined\";\r\n        }\r\n    }\r\n\r\n    private _renderFluent() {\r\n        return (\r\n            <PropertyLine label={this.props.label} onCopy={() => this.onCopyClickStr()}>\r\n                <Dropdown\r\n                    options={this.props.options}\r\n                    onChange={(val: AcceptedDropdownValue) => {\r\n                        // val != null captures both null and undefined cases\r\n                        val != null && this.updateValue(val.toString());\r\n                    }}\r\n                    value={this.state.value}\r\n                />\r\n            </PropertyLine>\r\n        );\r\n    }\r\n\r\n    private _renderOriginal() {\r\n        return (\r\n            <div className={\"listLine\" + (this.props.className ? \" \" + this.props.className : \"\")}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} color=\"black\" className=\"icon\" />}\r\n                <div className=\"label\" title={this.props.label}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"options\">\r\n                    <select onChange={(evt) => this.updateValue(evt.target.value)} value={this.state.value ?? \"\"}>\r\n                        {this.props.options.map((option, i) => {\r\n                            return (\r\n                                <option selected={option.selected} key={option.label + i} value={option.value} title={option.label}>\r\n                                    {option.label}\r\n                                </option>\r\n                            );\r\n                        })}\r\n                    </select>\r\n                </div>\r\n                <div className=\"copy hoverIcon\" onClick={() => copyCommandToClipboard(this.onCopyClickStr())} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this._renderFluent() : this._renderOriginal())}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/textInputLineComponent.js

@@ -4,7 +4,7 @@ import { conflictingValuesPlaceholder } from "./targetsProxy.js";
 import { InputArrowsComponent } from "./inputArrowsComponent.js";
 import { PropertyLine } from "../fluent/hoc/propertyLine.js";
 import { Textarea } from "../fluent/primitives/textarea.js";
-import { Input } from "../fluent/primitives/input.js";
+import { TextInput, NumberInput } from "../fluent/primitives/input.js";
 import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
 let ThrottleTimerId = -1;
 export class TextInputLineComponent extends Component {
@@ -141,7 +141,7 @@ export class TextInputLineComponent extends Component {
         }
     }
     renderFluent(value, placeholder, step) {
-        return (_jsx(PropertyLine, { label: this.props.label || "", children: this.props.multilines ? (_jsx(Textarea, { value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled })) : (_jsx(Input, { value: value, onChange: (val) => this.updateValue(val.toString()), step: step, disabled: this.props.disabled })) }));
+        return (_jsx(PropertyLine, { label: this.props.label || "", children: this.props.multilines ? (_jsx(Textarea, { value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled })) : this.props.numeric ? (_jsx(NumberInput, { value: this.getCurrentNumericValue(value), onChange: (val) => this.updateValue(val.toString()), step: step, disabled: this.props.disabled })) : (_jsx(TextInput, { value: value, onChange: (val) => this.updateValue(val.toString()), step: step, disabled: this.props.disabled })) }));
     }
     renderOriginal(value, placeholder, step) {
         const className = this.props.multilines ? "textInputArea" : this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine";