@babylonjs/shared-ui-components 8.12.1 → 8.13.1

package/lines/optionsLineComponent.js

@@ -2,6 +2,9 @@ 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";
+import { PropertyLine } from "../fluent/hoc/propertyLine.js";
+import { Dropdown } from "../fluent/primitives/dropdown.js";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const Null_Value = Number.MAX_SAFE_INTEGER;
 export class OptionsLine extends React.Component {
@@ -65,23 +68,31 @@ export class OptionsLine extends React.Component {
     }
     // Copy to clipboard the code this option actually does
     // Example : material.sideOrientation = 1;
-    onCopyClick() {
+    onCopyClickStr() {
         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.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
             const strCommand = targetName + "." + targetProperty + " = " + value + ";// (debugNode as " + babylonNamespace + className + ")";
-            copyCommandToClipboard(strCommand);
+            return strCommand;
         }
         else {
-            copyCommandToClipboard("undefined");
+            return "undefined";
         }
     }
-    render() {
+    _renderFluent() {
+        return (_jsx(PropertyLine, { label: this.props.label, onCopy: () => this.onCopyClickStr(), children: _jsx(Dropdown, { options: this.props.options, onChange: (val) => {
+                    val !== undefined && this.updateValue(val.toString());
+                }, value: this.state.value }) }));
+    }
+    _renderOriginal() {
         return (_jsxs("div", { className: "listLine" + (this.props.className ? " " + this.props.className : ""), children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "options", children: _jsx("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value ?? "", children: this.props.options.map((option, i) => {
                             return (_jsx("option", { selected: option.selected, value: option.value, title: option.label, children: option.label }, option.label + i));
-                        }) }) }), _jsx("div", { className: "copy hoverIcon", onClick: () => this.onCopyClick(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) })] }));
+                        }) }) }), _jsx("div", { className: "copy hoverIcon", onClick: () => copyCommandToClipboard(this.onCopyClickStr()), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) })] }));
+    }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this._renderFluent() : this._renderOriginal()) });
     }
 }
 //# sourceMappingURL=optionsLineComponent.js.map

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\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    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.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            copyCommandToClipboard(strCommand);\r\n        } else {\r\n            copyCommandToClipboard(\"undefined\");\r\n        }\r\n    }\r\n\r\n    override render() {\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={() => this.onCopyClick()} title=\"Copy to clipboard\">\r\n                    <img src={copyIcon} alt=\"Copy\" />\r\n                </div>\r\n            </div>\r\n        );\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: 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 | undefined) => {\r\n                        val !== undefined && 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/sliderLineComponent.d.ts

@@ -34,6 +34,8 @@ export declare class SliderLineComponent extends React.Component<ISliderLineComp
     onInput(newValueString: any): void;
     prepareDataToRead(value: number): number;
     onCopyClick(): 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/sliderLineComponent.js

@@ -4,6 +4,8 @@ import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyComman
 import { Tools } from "@babylonjs/core/Misc/tools.js";
 import { FloatLineComponent } from "./floatLineComponent.js";
 import copyIcon from "../imgs/copy.svg";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
+import { SyncedSliderLine } from "../fluent/hoc/syncedSliderLine.js";
 export class SliderLineComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -98,7 +100,10 @@ export class SliderLineComponent extends React.Component {
             copyCommandToClipboard("undefined");
         }
     }
-    render() {
+    renderFluent() {
+        return (_jsx(SyncedSliderLine, { label: this.props.label, value: this.state.value, onChange: (val) => this.onChange(val), step: this.props.step, min: this.props.minimum, max: this.props.maximum }));
+    }
+    renderOriginal() {
         return (_jsxs("div", { className: "sliderLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), (!this.props.icon || this.props.label != "") && (_jsx("div", { className: this.props.margin ? "label withMargins" : "label", title: this.props.label, children: this.props.label })), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, isInteger: this.props.decimalCount === 0, smallUI: true, label: "", target: this.state, digits: this.props.decimalCount === undefined ? 4 : this.props.decimalCount, propertyName: "value", min: this.props.allowOverflow ? undefined : this.props.minimum, max: this.props.allowOverflow ? undefined : this.props.maximum, onEnter: () => {
                         const changed = this.prepareDataToRead(this.state.value);
                         this.onChange(changed);
@@ -107,5 +112,8 @@ export class SliderLineComponent extends React.Component {
                         this.onChange(changed);
                     }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: this.props.unit }), _jsx("div", { className: "slider", children: _jsx("input", { className: "range" + (this.props.allowOverflow && (this.state.value > this.props.maximum || this.state.value < this.props.minimum) ? " overflow" : ""), type: "range", step: this.props.step, min: this.prepareDataToRead(this.props.minimum), max: this.prepareDataToRead(this.props.maximum), value: this.prepareDataToRead(this.state.value), onInput: (evt) => this.onInput(evt.target.value), onChange: (evt) => this.onChange(evt.target.value) }) }), _jsx("div", { className: "copy hoverIcon", onClick: () => this.onCopyClick(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) })] }));
     }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
+    }
 }
 //# sourceMappingURL=sliderLineComponent.js.map

package/lines/sliderLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"sliderLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/sliderLineComponent.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 { Tools } from \"core/Misc/tools\";\r\nimport { FloatLineComponent } from \"./floatLineComponent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\n\r\ninterface ISliderLineComponentProps {\r\n    label: string;\r\n    target?: any;\r\n    propertyName?: string;\r\n    minimum: number;\r\n    maximum: number;\r\n    step: number;\r\n    directValue?: number;\r\n    useEuler?: boolean;\r\n    onChange?: (value: number) => void;\r\n    onInput?: (value: number) => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    decimalCount?: number;\r\n    margin?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    lockObject: LockObject;\r\n    unit?: React.ReactNode;\r\n    allowOverflow?: boolean;\r\n}\r\n\r\nexport class SliderLineComponent extends React.Component<ISliderLineComponentProps, { value: number }> {\r\n    private _localChange = false;\r\n    constructor(props: ISliderLineComponentProps) {\r\n        super(props);\r\n\r\n        if (this.props.directValue !== undefined) {\r\n            this.state = {\r\n                value: this.props.directValue,\r\n            };\r\n        } else {\r\n            let value = this.props.target![this.props.propertyName!];\r\n\r\n            if (value === undefined) {\r\n                value = this.props.maximum;\r\n            }\r\n            this.state = { value: value };\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: ISliderLineComponentProps, nextState: { value: number }) {\r\n        if (nextProps.directValue !== undefined) {\r\n            nextState.value = nextProps.directValue;\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.label !== this.props.label) {\r\n            return true;\r\n        }\r\n\r\n        let currentState = nextProps.target![nextProps.propertyName!];\r\n        if (currentState === undefined) {\r\n            currentState = nextProps.maximum;\r\n        }\r\n\r\n        if (currentState !== nextState.value || this._localChange || nextProps.maximum !== this.props.maximum || nextProps.minimum !== this.props.minimum) {\r\n            nextState.value = currentState;\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.unit !== this.props.unit) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    onChange(newValueString: any) {\r\n        if (newValueString === \"—\") {\r\n            return;\r\n        }\r\n        this._localChange = true;\r\n        let newValue = parseFloat(newValueString);\r\n\r\n        if (this.props.useEuler) {\r\n            newValue = Tools.ToRadians(newValue);\r\n        }\r\n\r\n        if (this.props.target) {\r\n            if (this.props.onPropertyChangedObservable) {\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: this.state.value,\r\n                });\r\n            }\r\n\r\n            this.props.target[this.props.propertyName!] = newValue;\r\n        }\r\n\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n        }\r\n\r\n        this.setState({ value: newValue });\r\n    }\r\n\r\n    onInput(newValueString: any) {\r\n        const newValue = parseFloat(newValueString);\r\n        if (this.props.onInput) {\r\n            this.props.onInput(newValue);\r\n        }\r\n    }\r\n\r\n    prepareDataToRead(value: number) {\r\n        if (value === null) {\r\n            value = 0;\r\n        }\r\n\r\n        if (this.props.useEuler) {\r\n            return Tools.ToDegrees(value);\r\n        }\r\n\r\n        return value;\r\n    }\r\n\r\n    // Copy to clipboard the code this slider actually does\r\n    // Example : ImageProcessingConfiguration.contrast = 1;\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        return (\r\n            <div className=\"sliderLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {(!this.props.icon || this.props.label != \"\") && (\r\n                    <div className={this.props.margin ? \"label withMargins\" : \"label\"} title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                <FloatLineComponent\r\n                    lockObject={this.props.lockObject}\r\n                    isInteger={this.props.decimalCount === 0}\r\n                    smallUI={true}\r\n                    label=\"\"\r\n                    target={this.state}\r\n                    digits={this.props.decimalCount === undefined ? 4 : this.props.decimalCount}\r\n                    propertyName=\"value\"\r\n                    min={this.props.allowOverflow ? undefined : this.props.minimum}\r\n                    max={this.props.allowOverflow ? undefined : this.props.maximum}\r\n                    onEnter={() => {\r\n                        const changed = this.prepareDataToRead(this.state.value);\r\n                        this.onChange(changed);\r\n                    }}\r\n                    onChange={() => {\r\n                        const changed = this.prepareDataToRead(this.state.value);\r\n                        this.onChange(changed);\r\n                    }}\r\n                    onPropertyChangedObservable={this.props.onPropertyChangedObservable}\r\n                    unit={this.props.unit}\r\n                />\r\n                <div className=\"slider\">\r\n                    <input\r\n                        className={\"range\" + (this.props.allowOverflow && (this.state.value > this.props.maximum || this.state.value < this.props.minimum) ? \" overflow\" : \"\")}\r\n                        type=\"range\"\r\n                        step={this.props.step}\r\n                        min={this.prepareDataToRead(this.props.minimum)}\r\n                        max={this.prepareDataToRead(this.props.maximum)}\r\n                        value={this.prepareDataToRead(this.state.value)}\r\n                        onInput={(evt) => this.onInput((evt.target as HTMLInputElement).value)}\r\n                        onChange={(evt) => this.onChange(evt.target.value)}\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    }\r\n}\r\n"]}
+{"version":3,"file":"sliderLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/sliderLineComponent.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 { Tools } from \"core/Misc/tools\";\r\nimport { FloatLineComponent } from \"./floatLineComponent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\nimport { SyncedSliderLine } from \"../fluent/hoc/syncedSliderLine\";\r\n\r\ninterface ISliderLineComponentProps {\r\n    label: string;\r\n    target?: any;\r\n    propertyName?: string;\r\n    minimum: number;\r\n    maximum: number;\r\n    step: number;\r\n    directValue?: number;\r\n    useEuler?: boolean;\r\n    onChange?: (value: number) => void;\r\n    onInput?: (value: number) => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    decimalCount?: number;\r\n    margin?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    lockObject: LockObject;\r\n    unit?: React.ReactNode;\r\n    allowOverflow?: boolean;\r\n}\r\n\r\nexport class SliderLineComponent extends React.Component<ISliderLineComponentProps, { value: number }> {\r\n    private _localChange = false;\r\n    constructor(props: ISliderLineComponentProps) {\r\n        super(props);\r\n\r\n        if (this.props.directValue !== undefined) {\r\n            this.state = {\r\n                value: this.props.directValue,\r\n            };\r\n        } else {\r\n            let value = this.props.target![this.props.propertyName!];\r\n\r\n            if (value === undefined) {\r\n                value = this.props.maximum;\r\n            }\r\n            this.state = { value: value };\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: ISliderLineComponentProps, nextState: { value: number }) {\r\n        if (nextProps.directValue !== undefined) {\r\n            nextState.value = nextProps.directValue;\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.label !== this.props.label) {\r\n            return true;\r\n        }\r\n\r\n        let currentState = nextProps.target![nextProps.propertyName!];\r\n        if (currentState === undefined) {\r\n            currentState = nextProps.maximum;\r\n        }\r\n\r\n        if (currentState !== nextState.value || this._localChange || nextProps.maximum !== this.props.maximum || nextProps.minimum !== this.props.minimum) {\r\n            nextState.value = currentState;\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.unit !== this.props.unit) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    onChange(newValueString: any) {\r\n        if (newValueString === \"—\") {\r\n            return;\r\n        }\r\n        this._localChange = true;\r\n        let newValue = parseFloat(newValueString);\r\n\r\n        if (this.props.useEuler) {\r\n            newValue = Tools.ToRadians(newValue);\r\n        }\r\n\r\n        if (this.props.target) {\r\n            if (this.props.onPropertyChangedObservable) {\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: this.state.value,\r\n                });\r\n            }\r\n\r\n            this.props.target[this.props.propertyName!] = newValue;\r\n        }\r\n\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n        }\r\n\r\n        this.setState({ value: newValue });\r\n    }\r\n\r\n    onInput(newValueString: any) {\r\n        const newValue = parseFloat(newValueString);\r\n        if (this.props.onInput) {\r\n            this.props.onInput(newValue);\r\n        }\r\n    }\r\n\r\n    prepareDataToRead(value: number) {\r\n        if (value === null) {\r\n            value = 0;\r\n        }\r\n\r\n        if (this.props.useEuler) {\r\n            return Tools.ToDegrees(value);\r\n        }\r\n\r\n        return value;\r\n    }\r\n\r\n    // Copy to clipboard the code this slider actually does\r\n    // Example : ImageProcessingConfiguration.contrast = 1;\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    renderFluent() {\r\n        return (\r\n            <SyncedSliderLine\r\n                label={this.props.label}\r\n                value={this.state.value}\r\n                onChange={(val) => this.onChange(val)}\r\n                step={this.props.step}\r\n                min={this.props.minimum}\r\n                max={this.props.maximum}\r\n            />\r\n        );\r\n    }\r\n\r\n    renderOriginal() {\r\n        return (\r\n            <div className=\"sliderLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {(!this.props.icon || this.props.label != \"\") && (\r\n                    <div className={this.props.margin ? \"label withMargins\" : \"label\"} title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                <FloatLineComponent\r\n                    lockObject={this.props.lockObject}\r\n                    isInteger={this.props.decimalCount === 0}\r\n                    smallUI={true}\r\n                    label=\"\"\r\n                    target={this.state}\r\n                    digits={this.props.decimalCount === undefined ? 4 : this.props.decimalCount}\r\n                    propertyName=\"value\"\r\n                    min={this.props.allowOverflow ? undefined : this.props.minimum}\r\n                    max={this.props.allowOverflow ? undefined : this.props.maximum}\r\n                    onEnter={() => {\r\n                        const changed = this.prepareDataToRead(this.state.value);\r\n                        this.onChange(changed);\r\n                    }}\r\n                    onChange={() => {\r\n                        const changed = this.prepareDataToRead(this.state.value);\r\n                        this.onChange(changed);\r\n                    }}\r\n                    onPropertyChangedObservable={this.props.onPropertyChangedObservable}\r\n                    unit={this.props.unit}\r\n                />\r\n                <div className=\"slider\">\r\n                    <input\r\n                        className={\"range\" + (this.props.allowOverflow && (this.state.value > this.props.maximum || this.state.value < this.props.minimum) ? \" overflow\" : \"\")}\r\n                        type=\"range\"\r\n                        step={this.props.step}\r\n                        min={this.prepareDataToRead(this.props.minimum)}\r\n                        max={this.prepareDataToRead(this.props.maximum)}\r\n                        value={this.prepareDataToRead(this.state.value)}\r\n                        onInput={(evt) => this.onInput((evt.target as HTMLInputElement).value)}\r\n                        onChange={(evt) => this.onChange(evt.target.value)}\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    }\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.d.ts

@@ -1,4 +1,5 @@
-import * as React from "react";
+import type { ReactNode, KeyboardEvent } from "react";
+import { Component } from "react";
 import type { Observable } from "@babylonjs/core/Misc/observable.js";
 import type { PropertyChangedEvent } from "../propertyChangedEvent.js";
 import type { LockObject } from "../tabs/propertyGrids/lockObject.js";
@@ -23,14 +24,14 @@ export interface ITextInputLineComponentProps {
     min?: number;
     max?: number;
     placeholder?: string;
-    unit?: React.ReactNode;
+    unit?: ReactNode;
     validator?: (value: string) => boolean;
     multilines?: boolean;
     throttlePropertyChangedNotification?: boolean;
     throttlePropertyChangedNotificationDelay?: number;
     disabled?: boolean;
 }
-export declare class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, {
+export declare class TextInputLineComponent extends Component<ITextInputLineComponentProps, {
     value: string;
     dragging: boolean;
 }> {
@@ -45,6 +46,8 @@ export declare class TextInputLineComponent extends React.Component<ITextInputLi
     getCurrentNumericValue(value: string): number;
     updateValue(value: string, valueToValidate?: string): void;
     incrementValue(amount: number): void;
-    onKeyDown(event: React.KeyboardEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    renderFluent(value: string, placeholder: string, step: number): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(value: string, placeholder: string, step: number): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/lines/textInputLineComponent.js

@@ -1,9 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
+import { Component } from "react";
 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 { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
 let ThrottleTimerId = -1;
-export class TextInputLineComponent extends React.Component {
+export class TextInputLineComponent extends Component {
     constructor(props) {
         super(props);
         this._localChange = false;
@@ -136,10 +140,10 @@ export class TextInputLineComponent extends React.Component {
             }
         }
     }
-    render() {
-        const value = this.state.value === conflictingValuesPlaceholder ? "" : this.state.value;
-        const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : this.props.placeholder || "";
-        const step = this.props.step || (this.props.roundValues ? 1 : 0.01);
+    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 })) }));
+    }
+    renderOriginal(value, placeholder, step) {
         const className = this.props.multilines ? "textInputArea" : this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine";
         return (_jsxs("div", { className: className, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }), this.props.label !== undefined && (_jsx("div", { className: "label", title: this.props.label, children: this.props.label })), this.props.multilines && (_jsx(_Fragment, { children: _jsx("textarea", { className: this.props.disabled ? "disabled" : "", value: this.state.value, onFocus: () => {
                             if (this.props.lockObject) {
@@ -166,5 +170,11 @@ export class TextInputLineComponent extends React.Component {
                                 }
                             }, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), placeholder: placeholder, type: this.props.numeric ? "number" : "text", step: step, disabled: this.props.disabled }), this.props.arrows && (_jsx(InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) }))] })), this.props.unit] }));
     }
+    render() {
+        const value = this.state.value === conflictingValuesPlaceholder ? "" : this.state.value;
+        const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : this.props.placeholder || "";
+        const step = this.props.step || (this.props.roundValues ? 1 : 0.01);
+        return (_jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent(value, placeholder, step) : this.renderOriginal(value, placeholder, step)) }));
+    }
 }
 //# sourceMappingURL=textInputLineComponent.js.map

package/lines/textInputLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"textInputLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textInputLineComponent.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\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport { InputArrowsComponent } from \"./inputArrowsComponent\";\r\n\r\nexport interface ITextInputLineComponentProps {\r\n    label?: string;\r\n    lockObject?: LockObject;\r\n    target?: any;\r\n    propertyName?: string;\r\n    value?: string;\r\n    onChange?: (value: string) => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    noUnderline?: boolean;\r\n    numbersOnly?: boolean;\r\n    delayInput?: boolean;\r\n    arrows?: boolean;\r\n    arrowsIncrement?: (amount: number) => void;\r\n    step?: number;\r\n    numeric?: boolean;\r\n    roundValues?: boolean;\r\n    min?: number;\r\n    max?: number;\r\n    placeholder?: string;\r\n    unit?: React.ReactNode;\r\n    validator?: (value: string) => boolean;\r\n    multilines?: boolean;\r\n    throttlePropertyChangedNotification?: boolean;\r\n    throttlePropertyChangedNotificationDelay?: number;\r\n    disabled?: boolean;\r\n}\r\n\r\nlet ThrottleTimerId = -1;\r\n\r\nexport class TextInputLineComponent extends React.Component<ITextInputLineComponentProps, { value: string; dragging: boolean }> {\r\n    private _localChange = false;\r\n\r\n    constructor(props: ITextInputLineComponentProps) {\r\n        super(props);\r\n\r\n        const emptyValue = this.props.numeric ? \"0\" : \"\";\r\n\r\n        this.state = {\r\n            value: (this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!]) || emptyValue,\r\n            dragging: false,\r\n        };\r\n    }\r\n\r\n    override componentWillUnmount() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: { value: string; dragging: boolean }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = nextProps.value !== undefined ? nextProps.value : nextProps.target[nextProps.propertyName!];\r\n        if (newValue !== nextState.value) {\r\n            nextState.value = newValue || \"\";\r\n            return true;\r\n        }\r\n\r\n        if (nextState.dragging != this.state.dragging || nextProps.unit !== this.props.unit) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: string, previousValue: string) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n            return;\r\n        }\r\n\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        });\r\n    }\r\n\r\n    getCurrentNumericValue(value: string) {\r\n        const numeric = parseFloat(value);\r\n        if (!isNaN(numeric)) {\r\n            return numeric;\r\n        }\r\n        if (this.props.placeholder !== undefined) {\r\n            const placeholderNumeric = parseFloat(this.props.placeholder);\r\n            if (!isNaN(placeholderNumeric)) {\r\n                return placeholderNumeric;\r\n            }\r\n        }\r\n        return 0;\r\n    }\r\n\r\n    updateValue(value: string, valueToValidate?: string) {\r\n        if (this.props.disabled) {\r\n            return;\r\n        }\r\n        if (this.props.numbersOnly) {\r\n            if (/[^0-9.px%-]/g.test(value)) {\r\n                return;\r\n            }\r\n            if (!value) {\r\n                value = \"0\";\r\n            }\r\n\r\n            //Removing starting zero if there is a number of a minus after it.\r\n            if (value.search(/0+[0-9-]/g) === 0) {\r\n                value = value.substring(1);\r\n            }\r\n        }\r\n\r\n        if (this.props.numeric) {\r\n            let numericValue = this.getCurrentNumericValue(value);\r\n            if (this.props.roundValues) {\r\n                numericValue = Math.round(numericValue);\r\n            }\r\n            if (this.props.min !== undefined) {\r\n                numericValue = Math.max(this.props.min, numericValue);\r\n            }\r\n            if (this.props.max !== undefined) {\r\n                numericValue = Math.min(this.props.max, numericValue);\r\n            }\r\n            value = numericValue.toString();\r\n        }\r\n\r\n        this._localChange = true;\r\n        const store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!];\r\n\r\n        if (this.props.validator && valueToValidate) {\r\n            if (this.props.validator(valueToValidate) == false) {\r\n                value = store;\r\n            }\r\n        }\r\n\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.propertyName && !this.props.delayInput) {\r\n            this.props.target[this.props.propertyName] = value;\r\n        }\r\n\r\n        if (this.props.throttlePropertyChangedNotification) {\r\n            if (ThrottleTimerId >= 0) {\r\n                window.clearTimeout(ThrottleTimerId);\r\n            }\r\n            ThrottleTimerId = window.setTimeout(() => {\r\n                this.raiseOnPropertyChanged(value, store);\r\n            }, this.props.throttlePropertyChangedNotificationDelay ?? 200);\r\n        } else {\r\n            this.raiseOnPropertyChanged(value, store);\r\n        }\r\n    }\r\n\r\n    incrementValue(amount: number) {\r\n        if (this.props.step) {\r\n            amount *= this.props.step;\r\n        }\r\n        if (this.props.arrowsIncrement) {\r\n            this.props.arrowsIncrement(amount);\r\n            return;\r\n        }\r\n        const currentValue = this.getCurrentNumericValue(this.state.value);\r\n        this.updateValue((currentValue + amount).toFixed(2));\r\n    }\r\n\r\n    onKeyDown(event: React.KeyboardEvent) {\r\n        if (!this.props.disabled && this.props.arrows) {\r\n            if (event.key === \"ArrowUp\") {\r\n                this.incrementValue(1);\r\n                event.preventDefault();\r\n            }\r\n            if (event.key === \"ArrowDown\") {\r\n                this.incrementValue(-1);\r\n                event.preventDefault();\r\n            }\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        const value = this.state.value === conflictingValuesPlaceholder ? \"\" : this.state.value;\r\n        const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : this.props.placeholder || \"\";\r\n        const step = this.props.step || (this.props.roundValues ? 1 : 0.01);\r\n        const className = this.props.multilines ? \"textInputArea\" : this.props.unit !== undefined ? \"textInputLine withUnits\" : \"textInputLine\";\r\n        return (\r\n            <div className={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                {this.props.label !== undefined && (\r\n                    <div className=\"label\" title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                {this.props.multilines && (\r\n                    <>\r\n                        <textarea\r\n                            className={this.props.disabled ? \"disabled\" : \"\"}\r\n                            value={this.state.value}\r\n                            onFocus={() => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = true;\r\n                                }\r\n                            }}\r\n                            onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            onKeyDown={(evt) => {\r\n                                if (evt.keyCode !== 13) {\r\n                                    return;\r\n                                }\r\n                                this.updateValue(this.state.value);\r\n                            }}\r\n                            onBlur={(evt) => {\r\n                                this.updateValue(evt.target.value, evt.target.value);\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = false;\r\n                                }\r\n                            }}\r\n                            disabled={this.props.disabled}\r\n                        />\r\n                    </>\r\n                )}\r\n                {!this.props.multilines && (\r\n                    <div\r\n                        className={`value${this.props.noUnderline === true ? \" noUnderline\" : \"\"}${this.props.arrows ? \" hasArrows\" : \"\"}${this.state.dragging ? \" dragging\" : \"\"}`}\r\n                    >\r\n                        <input\r\n                            className={this.props.disabled ? \"disabled\" : \"\"}\r\n                            value={value}\r\n                            onBlur={(evt) => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = false;\r\n                                }\r\n                                this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!]) || \"\", evt.target.value);\r\n                            }}\r\n                            onFocus={() => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = true;\r\n                                }\r\n                            }}\r\n                            onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            onKeyDown={(evt) => this.onKeyDown(evt)}\r\n                            placeholder={placeholder}\r\n                            type={this.props.numeric ? \"number\" : \"text\"}\r\n                            step={step}\r\n                            disabled={this.props.disabled}\r\n                        />\r\n                        {this.props.arrows && (\r\n                            <InputArrowsComponent incrementValue={(amount) => this.incrementValue(amount)} setDragging={(dragging) => this.setState({ dragging })} />\r\n                        )}\r\n                    </div>\r\n                )}\r\n                {this.props.unit}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"textInputLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textInputLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode, KeyboardEvent } from \"react\";\r\nimport { Component } 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 { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport { InputArrowsComponent } from \"./inputArrowsComponent\";\r\nimport { PropertyLine } from \"../fluent/hoc/propertyLine\";\r\nimport { Textarea } from \"../fluent/primitives/textarea\";\r\nimport { Input } from \"../fluent/primitives/input\";\r\nimport { ToolContext } from \"../fluent/hoc/fluentToolWrapper\";\r\n\r\nexport interface ITextInputLineComponentProps {\r\n    label?: string;\r\n    lockObject?: LockObject;\r\n    target?: any;\r\n    propertyName?: string;\r\n    value?: string;\r\n    onChange?: (value: string) => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    noUnderline?: boolean;\r\n    numbersOnly?: boolean;\r\n    delayInput?: boolean;\r\n    arrows?: boolean;\r\n    arrowsIncrement?: (amount: number) => void;\r\n    step?: number;\r\n    numeric?: boolean;\r\n    roundValues?: boolean;\r\n    min?: number;\r\n    max?: number;\r\n    placeholder?: string;\r\n    unit?: ReactNode;\r\n    validator?: (value: string) => boolean;\r\n    multilines?: boolean;\r\n    throttlePropertyChangedNotification?: boolean;\r\n    throttlePropertyChangedNotificationDelay?: number;\r\n    disabled?: boolean;\r\n}\r\n\r\nlet ThrottleTimerId = -1;\r\n\r\nexport class TextInputLineComponent extends Component<ITextInputLineComponentProps, { value: string; dragging: boolean }> {\r\n    private _localChange = false;\r\n\r\n    constructor(props: ITextInputLineComponentProps) {\r\n        super(props);\r\n\r\n        const emptyValue = this.props.numeric ? \"0\" : \"\";\r\n\r\n        this.state = {\r\n            value: (this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!]) || emptyValue,\r\n            dragging: false,\r\n        };\r\n    }\r\n\r\n    override componentWillUnmount() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: ITextInputLineComponentProps, nextState: { value: string; dragging: boolean }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = nextProps.value !== undefined ? nextProps.value : nextProps.target[nextProps.propertyName!];\r\n        if (newValue !== nextState.value) {\r\n            nextState.value = newValue || \"\";\r\n            return true;\r\n        }\r\n\r\n        if (nextState.dragging != this.state.dragging || nextProps.unit !== this.props.unit) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: string, previousValue: string) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\r\n            return;\r\n        }\r\n\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        });\r\n    }\r\n\r\n    getCurrentNumericValue(value: string) {\r\n        const numeric = parseFloat(value);\r\n        if (!isNaN(numeric)) {\r\n            return numeric;\r\n        }\r\n        if (this.props.placeholder !== undefined) {\r\n            const placeholderNumeric = parseFloat(this.props.placeholder);\r\n            if (!isNaN(placeholderNumeric)) {\r\n                return placeholderNumeric;\r\n            }\r\n        }\r\n        return 0;\r\n    }\r\n\r\n    updateValue(value: string, valueToValidate?: string) {\r\n        if (this.props.disabled) {\r\n            return;\r\n        }\r\n        if (this.props.numbersOnly) {\r\n            if (/[^0-9.px%-]/g.test(value)) {\r\n                return;\r\n            }\r\n            if (!value) {\r\n                value = \"0\";\r\n            }\r\n\r\n            //Removing starting zero if there is a number of a minus after it.\r\n            if (value.search(/0+[0-9-]/g) === 0) {\r\n                value = value.substring(1);\r\n            }\r\n        }\r\n\r\n        if (this.props.numeric) {\r\n            let numericValue = this.getCurrentNumericValue(value);\r\n            if (this.props.roundValues) {\r\n                numericValue = Math.round(numericValue);\r\n            }\r\n            if (this.props.min !== undefined) {\r\n                numericValue = Math.max(this.props.min, numericValue);\r\n            }\r\n            if (this.props.max !== undefined) {\r\n                numericValue = Math.min(this.props.max, numericValue);\r\n            }\r\n            value = numericValue.toString();\r\n        }\r\n\r\n        this._localChange = true;\r\n        const store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!];\r\n\r\n        if (this.props.validator && valueToValidate) {\r\n            if (this.props.validator(valueToValidate) == false) {\r\n                value = store;\r\n            }\r\n        }\r\n\r\n        this.setState({ value: value });\r\n\r\n        if (this.props.propertyName && !this.props.delayInput) {\r\n            this.props.target[this.props.propertyName] = value;\r\n        }\r\n\r\n        if (this.props.throttlePropertyChangedNotification) {\r\n            if (ThrottleTimerId >= 0) {\r\n                window.clearTimeout(ThrottleTimerId);\r\n            }\r\n            ThrottleTimerId = window.setTimeout(() => {\r\n                this.raiseOnPropertyChanged(value, store);\r\n            }, this.props.throttlePropertyChangedNotificationDelay ?? 200);\r\n        } else {\r\n            this.raiseOnPropertyChanged(value, store);\r\n        }\r\n    }\r\n\r\n    incrementValue(amount: number) {\r\n        if (this.props.step) {\r\n            amount *= this.props.step;\r\n        }\r\n        if (this.props.arrowsIncrement) {\r\n            this.props.arrowsIncrement(amount);\r\n            return;\r\n        }\r\n        const currentValue = this.getCurrentNumericValue(this.state.value);\r\n        this.updateValue((currentValue + amount).toFixed(2));\r\n    }\r\n\r\n    onKeyDown(event: KeyboardEvent) {\r\n        if (!this.props.disabled && this.props.arrows) {\r\n            if (event.key === \"ArrowUp\") {\r\n                this.incrementValue(1);\r\n                event.preventDefault();\r\n            }\r\n            if (event.key === \"ArrowDown\") {\r\n                this.incrementValue(-1);\r\n                event.preventDefault();\r\n            }\r\n        }\r\n    }\r\n\r\n    renderFluent(value: string, placeholder: string, step: number) {\r\n        return (\r\n            <PropertyLine label={this.props.label || \"\"}>\r\n                {this.props.multilines ? (\r\n                    <Textarea value={this.state.value} onChange={(evt) => this.updateValue(evt.target.value)} disabled={this.props.disabled} />\r\n                ) : (\r\n                    <Input value={value} onChange={(val) => this.updateValue(val.toString())} step={step} disabled={this.props.disabled} />\r\n                )}\r\n            </PropertyLine>\r\n        );\r\n    }\r\n\r\n    renderOriginal(value: string, placeholder: string, step: number) {\r\n        const className = this.props.multilines ? \"textInputArea\" : this.props.unit !== undefined ? \"textInputLine withUnits\" : \"textInputLine\";\r\n        return (\r\n            <div className={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                {this.props.label !== undefined && (\r\n                    <div className=\"label\" title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                )}\r\n                {this.props.multilines && (\r\n                    <>\r\n                        <textarea\r\n                            className={this.props.disabled ? \"disabled\" : \"\"}\r\n                            value={this.state.value}\r\n                            onFocus={() => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = true;\r\n                                }\r\n                            }}\r\n                            onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            onKeyDown={(evt) => {\r\n                                if (evt.keyCode !== 13) {\r\n                                    return;\r\n                                }\r\n                                this.updateValue(this.state.value);\r\n                            }}\r\n                            onBlur={(evt) => {\r\n                                this.updateValue(evt.target.value, evt.target.value);\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = false;\r\n                                }\r\n                            }}\r\n                            disabled={this.props.disabled}\r\n                        />\r\n                    </>\r\n                )}\r\n                {!this.props.multilines && (\r\n                    <div\r\n                        className={`value${this.props.noUnderline === true ? \" noUnderline\" : \"\"}${this.props.arrows ? \" hasArrows\" : \"\"}${this.state.dragging ? \" dragging\" : \"\"}`}\r\n                    >\r\n                        <input\r\n                            className={this.props.disabled ? \"disabled\" : \"\"}\r\n                            value={value}\r\n                            onBlur={(evt) => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = false;\r\n                                }\r\n                                this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName!]) || \"\", evt.target.value);\r\n                            }}\r\n                            onFocus={() => {\r\n                                if (this.props.lockObject) {\r\n                                    this.props.lockObject.lock = true;\r\n                                }\r\n                            }}\r\n                            onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            onKeyDown={(evt) => this.onKeyDown(evt)}\r\n                            placeholder={placeholder}\r\n                            type={this.props.numeric ? \"number\" : \"text\"}\r\n                            step={step}\r\n                            disabled={this.props.disabled}\r\n                        />\r\n                        {this.props.arrows && (\r\n                            <InputArrowsComponent incrementValue={(amount) => this.incrementValue(amount)} setDragging={(dragging) => this.setState({ dragging })} />\r\n                        )}\r\n                    </div>\r\n                )}\r\n                {this.props.unit}\r\n            </div>\r\n        );\r\n    }\r\n    override render() {\r\n        const value = this.state.value === conflictingValuesPlaceholder ? \"\" : this.state.value;\r\n        const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : this.props.placeholder || \"\";\r\n        const step = this.props.step || (this.props.roundValues ? 1 : 0.01);\r\n        return (\r\n            <ToolContext.Consumer>\r\n                {({ useFluent }) => (useFluent ? this.renderFluent(value, placeholder, step) : this.renderOriginal(value, placeholder, step))}\r\n            </ToolContext.Consumer>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/textLineComponent.d.ts

@@ -16,7 +16,10 @@ interface ITextLineComponentProps {
 export declare class TextLineComponent extends React.Component<ITextLineComponentProps> {
     constructor(props: ITextLineComponentProps);
     onLink(): void;
-    renderContent(): import("react/jsx-runtime").JSX.Element | null;
+    copyFn(): (() => string) | undefined;
+    renderContent(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element | null;
+    renderOriginal(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element;
+    renderFluent(isLink: boolean, tooltip: string): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/textLineComponent.js

@@ -3,6 +3,9 @@ import * as React from "react";
 import copyIcon from "../imgs/copy.svg";
 import { copyCommandToClipboard } from "../copyCommandToClipboard.js";
 import { MergeClassNames } from "../styleHelper.js";
+import { TextPropertyLine } from "../fluent/hoc/textPropertyLine.js";
+import { LinkPropertyLine } from "../fluent/hoc/linkPropertyLine.js";
+import { ToolContext } from "shared-ui-components/fluent/hoc/fluentToolWrapper";
 export class TextLineComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -17,26 +20,51 @@ export class TextLineComponent extends React.Component {
         }
         this.props.onLink();
     }
-    renderContent() {
+    copyFn() {
+        const onCopy = this.props.onCopy;
+        const val = this.props.value;
+        if (onCopy === true && val !== undefined) {
+            return () => val;
+        }
+        else if (typeof onCopy === "function") {
+            return onCopy;
+        }
+        return undefined;
+    }
+    renderContent(isLink, tooltip) {
         if (this.props.ignoreValue) {
             return null;
         }
-        const title = this.props.tooltip ?? this.props.value ?? this.props.label ?? "";
-        if (this.props.onLink || this.props.url) {
-            return (_jsx("div", { className: "link-value", title: title, onClick: () => this.onLink(), children: this.props.url ? "doc" : this.props.value || "no name" }));
+        if (isLink) {
+            return (_jsx("div", { className: "link-value", title: tooltip, onClick: () => this.onLink(), children: this.props.url ? "doc" : this.props.value || "no name" }));
         }
-        return (_jsx("div", { className: "value", title: title, style: { color: this.props.color ? this.props.color : "" }, children: this.props.value || "no name" }));
+        return (_jsx("div", { className: "value", title: tooltip, style: { color: this.props.color ? this.props.color : "" }, children: this.props.value || "no name" }));
     }
-    render() {
-        return (_jsxs("div", { className: MergeClassNames(["textLine", ["underline", this.props.underline], this.props.additionalClass, ["icon", this.props.onCopy]]), 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.tooltip ?? this.props.label ?? "", children: this.props.label ?? "" }), this.renderContent(), this.props.onCopy && (_jsx("div", { className: "copy hoverIcon", onClick: () => {
-                        const onCopy = this.props.onCopy;
-                        if (onCopy === true && this.props.value !== undefined) {
-                            copyCommandToClipboard(this.props.value);
-                        }
-                        else if (typeof onCopy === "function") {
-                            copyCommandToClipboard(onCopy());
+    renderOriginal(isLink, tooltip) {
+        return (_jsxs("div", { className: MergeClassNames(["textLine", ["underline", this.props.underline], this.props.additionalClass, ["icon", this.props.onCopy]]), 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.tooltip ?? this.props.label ?? "", children: this.props.label ?? "" }), this.renderContent(isLink, tooltip), this.props.onCopy && (_jsx("div", { className: "copy hoverIcon", onClick: () => {
+                        const copyFn = this.copyFn();
+                        if (copyFn) {
+                            copyCommandToClipboard(copyFn());
                         }
                     }, title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }))] }));
     }
+    renderFluent(isLink, tooltip) {
+        const sharedProps = {
+            tooltip,
+            label: this.props.label || "",
+            onCopy: this.copyFn(),
+        };
+        if (isLink) {
+            return _jsx(LinkPropertyLine, { ...sharedProps, value: this.props.url ? "doc" : this.props.value || "no name", url: this.props.url, onLink: this.props.onLink });
+        }
+        else {
+            return _jsx(TextPropertyLine, { ...sharedProps, value: this.props.value || "" });
+        }
+    }
+    render() {
+        const tooltip = this.props.tooltip ?? this.props.value ?? this.props.label ?? "";
+        const isLink = this.props.onLink !== undefined || this.props.url !== undefined;
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent(isLink, tooltip) : this.renderOriginal(isLink, tooltip)) });
+    }
 }
 //# sourceMappingURL=textLineComponent.js.map

package/lines/textLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"textLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { copyCommandToClipboard } from \"../copyCommandToClipboard\";\r\nimport { MergeClassNames } from \"../styleHelper\";\r\n\r\ninterface ITextLineComponentProps {\r\n    label?: string;\r\n    value?: string;\r\n    color?: string;\r\n    underline?: boolean;\r\n    onLink?: () => void;\r\n    url?: string;\r\n    ignoreValue?: boolean;\r\n    additionalClass?: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    tooltip?: string;\r\n    onCopy?: true | (() => string);\r\n}\r\n\r\nexport class TextLineComponent extends React.Component<ITextLineComponentProps> {\r\n    constructor(props: ITextLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    onLink() {\r\n        if (this.props.url) {\r\n            window.open(this.props.url, \"_blank\");\r\n            return;\r\n        }\r\n        if (!this.props.onLink) {\r\n            return;\r\n        }\r\n\r\n        this.props.onLink();\r\n    }\r\n\r\n    renderContent() {\r\n        if (this.props.ignoreValue) {\r\n            return null;\r\n        }\r\n        const title = this.props.tooltip ?? this.props.value ?? this.props.label ?? \"\";\r\n\r\n        if (this.props.onLink || this.props.url) {\r\n            return (\r\n                <div className=\"link-value\" title={title} onClick={() => this.onLink()}>\r\n                    {this.props.url ? \"doc\" : this.props.value || \"no name\"}\r\n                </div>\r\n            );\r\n        }\r\n        return (\r\n            <div className=\"value\" title={title} style={{ color: this.props.color ? this.props.color : \"\" }}>\r\n                {this.props.value || \"no name\"}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    override render() {\r\n        return (\r\n            <div className={MergeClassNames([\"textLine\", [\"underline\", this.props.underline], this.props.additionalClass, [\"icon\", this.props.onCopy]])}>\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.tooltip ?? this.props.label ?? \"\"}>\r\n                    {this.props.label ?? \"\"}\r\n                </div>\r\n                {this.renderContent()}\r\n                {this.props.onCopy && (\r\n                    <div\r\n                        className=\"copy hoverIcon\"\r\n                        onClick={() => {\r\n                            const onCopy = this.props.onCopy;\r\n                            if (onCopy === true && this.props.value !== undefined) {\r\n                                copyCommandToClipboard(this.props.value);\r\n                            } else if (typeof onCopy === \"function\") {\r\n                                copyCommandToClipboard(onCopy());\r\n                            }\r\n                        }}\r\n                        title=\"Copy to clipboard\"\r\n                    >\r\n                        <img src={copyIcon} alt=\"Copy\" />\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"textLineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/textLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport copyIcon from \"../imgs/copy.svg\";\r\nimport { copyCommandToClipboard } from \"../copyCommandToClipboard\";\r\nimport { MergeClassNames } from \"../styleHelper\";\r\nimport { TextPropertyLine } from \"../fluent/hoc/textPropertyLine\";\r\nimport { LinkPropertyLine } from \"../fluent/hoc/linkPropertyLine\";\r\nimport { ToolContext } from \"shared-ui-components/fluent/hoc/fluentToolWrapper\";\r\n\r\ninterface ITextLineComponentProps {\r\n    label?: string;\r\n    value?: string;\r\n    color?: string;\r\n    underline?: boolean;\r\n    onLink?: () => void;\r\n    url?: string;\r\n    ignoreValue?: boolean;\r\n    additionalClass?: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    tooltip?: string;\r\n    onCopy?: true | (() => string);\r\n}\r\n\r\nexport class TextLineComponent extends React.Component<ITextLineComponentProps> {\r\n    constructor(props: ITextLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    onLink() {\r\n        if (this.props.url) {\r\n            window.open(this.props.url, \"_blank\");\r\n            return;\r\n        }\r\n        if (!this.props.onLink) {\r\n            return;\r\n        }\r\n\r\n        this.props.onLink();\r\n    }\r\n\r\n    copyFn() {\r\n        const onCopy = this.props.onCopy;\r\n        const val = this.props.value;\r\n        if (onCopy === true && val !== undefined) {\r\n            return () => val;\r\n        } else if (typeof onCopy === \"function\") {\r\n            return onCopy;\r\n        }\r\n        return undefined;\r\n    }\r\n\r\n    renderContent(isLink: boolean, tooltip: string) {\r\n        if (this.props.ignoreValue) {\r\n            return null;\r\n        }\r\n\r\n        if (isLink) {\r\n            return (\r\n                <div className=\"link-value\" title={tooltip} onClick={() => this.onLink()}>\r\n                    {this.props.url ? \"doc\" : this.props.value || \"no name\"}\r\n                </div>\r\n            );\r\n        }\r\n        return (\r\n            <div className=\"value\" title={tooltip} style={{ color: this.props.color ? this.props.color : \"\" }}>\r\n                {this.props.value || \"no name\"}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderOriginal(isLink: boolean, tooltip: string) {\r\n        return (\r\n            <div className={MergeClassNames([\"textLine\", [\"underline\", this.props.underline], this.props.additionalClass, [\"icon\", this.props.onCopy]])}>\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.tooltip ?? this.props.label ?? \"\"}>\r\n                    {this.props.label ?? \"\"}\r\n                </div>\r\n                {this.renderContent(isLink, tooltip)}\r\n                {this.props.onCopy && (\r\n                    <div\r\n                        className=\"copy hoverIcon\"\r\n                        onClick={() => {\r\n                            const copyFn = this.copyFn();\r\n                            if (copyFn) {\r\n                                copyCommandToClipboard(copyFn());\r\n                            }\r\n                        }}\r\n                        title=\"Copy to clipboard\"\r\n                    >\r\n                        <img src={copyIcon} alt=\"Copy\" />\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    renderFluent(isLink: boolean, tooltip: string) {\r\n        const sharedProps = {\r\n            tooltip,\r\n            label: this.props.label || \"\",\r\n            onCopy: this.copyFn(),\r\n        };\r\n        if (isLink) {\r\n            return <LinkPropertyLine {...sharedProps} value={this.props.url ? \"doc\" : this.props.value || \"no name\"} url={this.props.url} onLink={this.props.onLink} />;\r\n        } else {\r\n            return <TextPropertyLine {...sharedProps} value={this.props.value || \"\"} />;\r\n        }\r\n    }\r\n\r\n    override render() {\r\n        const tooltip = this.props.tooltip ?? this.props.value ?? this.props.label ?? \"\";\r\n        const isLink = this.props.onLink !== undefined || this.props.url !== undefined;\r\n        return <ToolContext.Consumer>{({ useFluent }) => (useFluent ? this.renderFluent(isLink, tooltip) : this.renderOriginal(isLink, tooltip))}</ToolContext.Consumer>;\r\n    }\r\n}\r\n"]}

package/lines/vector3LineComponent.d.ts

@@ -38,7 +38,9 @@ export declare class Vector3LineComponent extends React.Component<IVector3LineCo
     updateStateX(value: number): void;
     updateStateY(value: number): void;
     updateStateZ(value: number): void;
-    onCopyClick(): void;
+    onCopyClick(): string;
+    renderFluent(): import("react/jsx-runtime").JSX.Element;
+    renderOriginal(): import("react/jsx-runtime").JSX.Element;
     render(): import("react/jsx-runtime").JSX.Element;
 }
 export {};

package/lines/vector3LineComponent.js

@@ -8,6 +8,8 @@ import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyComman
 import { SliderLineComponent } from "../lines/sliderLineComponent.js";
 import { Tools } from "@babylonjs/core/Misc/tools.js";
 import copyIcon from "../imgs/copy.svg";
+import { Vector3PropertyLine } from "../fluent/hoc/vectorPropertyLine.js";
+import { ToolContext } from "../fluent/hoc/fluentToolWrapper.js";
 export class Vector3LineComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -93,16 +95,20 @@ export class Vector3LineComponent extends React.Component {
             const value = this.props.target[this.props.propertyName];
             const strVector = "new " + babylonNamespace + "Vector3(" + value.x + ", " + value.y + ", " + value.z + ")";
             const strCommand = targetName + "." + targetProperty + " = " + strVector + ";// (debugNode as " + babylonNamespace + className + ")";
-            copyCommandToClipboard(strCommand);
-        }
-        else {
-            copyCommandToClipboard("undefined");
+            return strCommand;
         }
+        return "";
     }
-    render() {
+    renderFluent() {
+        return (_jsx(Vector3PropertyLine, { label: this.props.label, onChange: (val) => this.setState({ value: val }), value: this.props.target[this.props.propertyName], onCopy: () => this.onCopyClick() }));
+    }
+    renderOriginal() {
         const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
         return (_jsxs("div", { className: "vector3Line", children: [_jsxs("div", { className: "firstLine", 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 }), _jsxs("div", { className: "vector", children: [!this.props.useEuler && `X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}`, this.props.useEuler &&
-                                    `X: ${Tools.ToDegrees(this.state.value.x).toFixed(2)}, Y: ${Tools.ToDegrees(this.state.value.y).toFixed(2)}, Z: ${Tools.ToDegrees(this.state.value.z).toFixed(2)}`] }), _jsx("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron }), _jsx("div", { className: "copy hoverIcon", onClick: () => this.onCopyClick(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }), this.props.additionalCommands && this.props.additionalCommands.map((c) => c)] }), this.state.isExpanded && !this.props.useEuler && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInput, { label: "x", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), _jsx(NumericInput, { label: "y", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) }), _jsx(NumericInput, { label: "z", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.z, onChange: (value) => this.updateStateZ(value) })] })), this.state.isExpanded && this.props.useEuler && !this.props.noSlider && (_jsxs("div", { className: "secondLine", children: [_jsx(SliderLineComponent, { lockObject: this.props.lockObject, margin: true, label: "x", minimum: 0, maximum: 360, step: 0.1, directValue: Tools.ToDegrees(this.state.value.x), onChange: (value) => this.updateStateX(Tools.ToRadians(value)) }), _jsx(SliderLineComponent, { lockObject: this.props.lockObject, margin: true, label: "y", minimum: 0, maximum: 360, step: 0.1, directValue: Tools.ToDegrees(this.state.value.y), onChange: (value) => this.updateStateY(Tools.ToRadians(value)) }), _jsx(SliderLineComponent, { lockObject: this.props.lockObject, margin: true, label: "z", minimum: 0, maximum: 360, step: 0.1, directValue: Tools.ToDegrees(this.state.value.z), onChange: (value) => this.updateStateZ(Tools.ToRadians(value)) })] })), this.state.isExpanded && this.props.useEuler && this.props.noSlider && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInput, { lockObject: this.props.lockObject, label: "x", step: this.props.step, value: Tools.ToDegrees(this.state.value.x), onChange: (value) => this.updateStateX(Tools.ToRadians(value)) }), _jsx(NumericInput, { lockObject: this.props.lockObject, label: "y", step: this.props.step, value: Tools.ToDegrees(this.state.value.y), onChange: (value) => this.updateStateY(Tools.ToRadians(value)) }), _jsx(NumericInput, { lockObject: this.props.lockObject, label: "z", step: this.props.step, value: Tools.ToDegrees(this.state.value.z), onChange: (value) => this.updateStateZ(Tools.ToRadians(value)) })] }))] }));
+                                    `X: ${Tools.ToDegrees(this.state.value.x).toFixed(2)}, Y: ${Tools.ToDegrees(this.state.value.y).toFixed(2)}, Z: ${Tools.ToDegrees(this.state.value.z).toFixed(2)}`] }), _jsx("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron }), _jsx("div", { className: "copy hoverIcon", onClick: () => copyCommandToClipboard(this.onCopyClick()), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) }), this.props.additionalCommands && this.props.additionalCommands.map((c) => c)] }), this.state.isExpanded && !this.props.useEuler && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInput, { label: "x", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), _jsx(NumericInput, { label: "y", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) }), _jsx(NumericInput, { label: "z", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.z, onChange: (value) => this.updateStateZ(value) })] })), this.state.isExpanded && this.props.useEuler && !this.props.noSlider && (_jsxs("div", { className: "secondLine", children: [_jsx(SliderLineComponent, { lockObject: this.props.lockObject, margin: true, label: "x", minimum: 0, maximum: 360, step: 0.1, directValue: Tools.ToDegrees(this.state.value.x), onChange: (value) => this.updateStateX(Tools.ToRadians(value)) }), _jsx(SliderLineComponent, { lockObject: this.props.lockObject, margin: true, label: "y", minimum: 0, maximum: 360, step: 0.1, directValue: Tools.ToDegrees(this.state.value.y), onChange: (value) => this.updateStateY(Tools.ToRadians(value)) }), _jsx(SliderLineComponent, { lockObject: this.props.lockObject, margin: true, label: "z", minimum: 0, maximum: 360, step: 0.1, directValue: Tools.ToDegrees(this.state.value.z), onChange: (value) => this.updateStateZ(Tools.ToRadians(value)) })] })), this.state.isExpanded && this.props.useEuler && this.props.noSlider && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInput, { lockObject: this.props.lockObject, label: "x", step: this.props.step, value: Tools.ToDegrees(this.state.value.x), onChange: (value) => this.updateStateX(Tools.ToRadians(value)) }), _jsx(NumericInput, { lockObject: this.props.lockObject, label: "y", step: this.props.step, value: Tools.ToDegrees(this.state.value.y), onChange: (value) => this.updateStateY(Tools.ToRadians(value)) }), _jsx(NumericInput, { lockObject: this.props.lockObject, label: "z", step: this.props.step, value: Tools.ToDegrees(this.state.value.z), onChange: (value) => this.updateStateZ(Tools.ToRadians(value)) })] }))] }));
+    }
+    render() {
+        return _jsx(ToolContext.Consumer, { children: ({ useFluent }) => (useFluent ? this.renderFluent() : this.renderOriginal()) });
     }
 }
 // eslint-disable-next-line @typescript-eslint/naming-convention