@babylonjs/shared-ui-components 5.28.0

package/lines/textInputLineComponent.js

@@ -0,0 +1,155 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { conflictingValuesPlaceholder } from "./targetsProxy.js";
+import { InputArrowsComponent } from "./inputArrowsComponent.js";
+export class TextInputLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        const emptyValue = this.props.numeric ? "0" : "";
+        this.state = {
+            value: (this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName]) || emptyValue,
+            dragging: false,
+        };
+    }
+    componentWillUnmount() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this._localChange) {
+            this._localChange = false;
+            return true;
+        }
+        const newValue = nextProps.value !== undefined ? nextProps.value : nextProps.target[nextProps.propertyName];
+        if (newValue !== nextState.value) {
+            nextState.value = newValue || "";
+            return true;
+        }
+        if (nextState.dragging != this.state.dragging || nextProps.unit !== this.props.unit) {
+            return true;
+        }
+        return false;
+    }
+    raiseOnPropertyChanged(newValue, previousValue) {
+        if (this.props.onChange) {
+            this.props.onChange(newValue);
+            return;
+        }
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName,
+            value: newValue,
+            initialValue: previousValue,
+        });
+    }
+    getCurrentNumericValue(value) {
+        const numeric = parseFloat(value);
+        if (!isNaN(numeric)) {
+            return numeric;
+        }
+        if (this.props.placeholder !== undefined) {
+            const placeholderNumeric = parseFloat(this.props.placeholder);
+            if (!isNaN(placeholderNumeric)) {
+                return placeholderNumeric;
+            }
+        }
+        return 0;
+    }
+    updateValue(value, valueToValidate) {
+        if (this.props.numbersOnly) {
+            if (/[^0-9.\p\x%-]/g.test(value)) {
+                return;
+            }
+            if (!value) {
+                value = "0";
+            }
+            //Removing starting zero if there is a number of a minus after it.
+            if (value.search(/0+[0-9-]/g) === 0) {
+                value = value.substr(1);
+            }
+        }
+        if (this.props.numeric) {
+            let numericValue = this.getCurrentNumericValue(value);
+            if (this.props.roundValues) {
+                numericValue = Math.round(numericValue);
+            }
+            if (this.props.min !== undefined) {
+                numericValue = Math.max(this.props.min, numericValue);
+            }
+            if (this.props.max !== undefined) {
+                numericValue = Math.min(this.props.max, numericValue);
+            }
+            value = numericValue.toString();
+        }
+        this._localChange = true;
+        const store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName];
+        if (this.props.validator && valueToValidate) {
+            if (this.props.validator(valueToValidate) == false) {
+                value = store;
+            }
+        }
+        this.setState({ value: value });
+        if (this.props.propertyName && !this.props.delayInput) {
+            this.props.target[this.props.propertyName] = value;
+        }
+        this.raiseOnPropertyChanged(value, store);
+    }
+    incrementValue(amount) {
+        if (this.props.step) {
+            amount *= this.props.step;
+        }
+        if (this.props.arrowsIncrement) {
+            this.props.arrowsIncrement(amount);
+            return;
+        }
+        const currentValue = this.getCurrentNumericValue(this.state.value);
+        this.updateValue((currentValue + amount).toFixed(2));
+    }
+    onKeyDown(event) {
+        if (this.props.arrows) {
+            if (event.key === "ArrowUp") {
+                this.incrementValue(1);
+                event.preventDefault();
+            }
+            if (event.key === "ArrowDown") {
+                this.incrementValue(-1);
+                event.preventDefault();
+            }
+        }
+    }
+    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 (_jsxs("div", { className: this.props.multilines ? "textInputArea" : this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine", 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", { value: this.state.value, onFocus: () => {
+                            if (this.props.lockObject) {
+                                this.props.lockObject.lock = true;
+                            }
+                        }, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => {
+                            if (evt.keyCode !== 13) {
+                                return;
+                            }
+                            this.updateValue(this.state.value);
+                        }, onBlur: (evt) => {
+                            this.updateValue(evt.target.value, evt.target.value);
+                            if (this.props.lockObject) {
+                                this.props.lockObject.lock = false;
+                            }
+                        } }) })), !this.props.multilines && (_jsxs("div", { className: `value${this.props.noUnderline === true ? " noUnderline" : ""}${this.props.arrows ? " hasArrows" : ""}${this.state.dragging ? " dragging" : ""}`, children: [_jsx("input", { value: value, onBlur: (evt) => {
+                                if (this.props.lockObject) {
+                                    this.props.lockObject.lock = false;
+                                }
+                                this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName]) || "", evt.target.value);
+                            }, onFocus: () => {
+                                if (this.props.lockObject) {
+                                    this.props.lockObject.lock = true;
+                                }
+                            }, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), placeholder: placeholder, type: this.props.numeric ? "number" : "text", step: step }), this.props.arrows && (_jsx(InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) }))] })), this.props.unit] }));
+    }
+}
+//# sourceMappingURL=textInputLineComponent.js.map

package/lines/textInputLineComponent.js.map

@@ -0,0 +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}\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    componentWillUnmount() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    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.numbersOnly) {\r\n            if (/[^0-9.\\p\\x%-]/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.substr(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        this.raiseOnPropertyChanged(value, store);\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.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    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            <div className={this.props.multilines ? \"textInputArea\" : this.props.unit !== undefined ? \"textInputLine withUnits\" : \"textInputLine\"}>\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                            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                        />\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                            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                        />\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"]}

package/lines/textLineComponent.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+interface ITextLineComponentProps {
+    label?: string;
+    value?: string;
+    color?: string;
+    underline?: boolean;
+    onLink?: () => void;
+    url?: string;
+    ignoreValue?: boolean;
+    additionalClass?: string;
+    icon?: string;
+    iconLabel?: string;
+    tooltip?: string;
+}
+export declare class TextLineComponent extends React.Component<ITextLineComponentProps> {
+    constructor(props: ITextLineComponentProps);
+    onLink(): void;
+    renderContent(): JSX.Element | null;
+    render(): JSX.Element;
+}
+export {};

package/lines/textLineComponent.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export class TextLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    onLink() {
+        if (this.props.url) {
+            window.open(this.props.url, "_blank");
+            return;
+        }
+        if (!this.props.onLink) {
+            return;
+        }
+        this.props.onLink();
+    }
+    renderContent() {
+        if (this.props.ignoreValue) {
+            return null;
+        }
+        if (this.props.onLink || this.props.url) {
+            return (_jsx("div", { className: "link-value", title: this.props.value, onClick: () => this.onLink(), children: this.props.url ? "doc" : this.props.value || "no name" }));
+        }
+        return (_jsx("div", { className: "value", title: this.props.value, style: { color: this.props.color ? this.props.color : "" }, children: this.props.value || "no name" }));
+    }
+    render() {
+        var _a, _b, _c;
+        return (_jsxs("div", { className: this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : ""), 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: (_b = (_a = this.props.tooltip) !== null && _a !== void 0 ? _a : this.props.label) !== null && _b !== void 0 ? _b : "", children: (_c = this.props.label) !== null && _c !== void 0 ? _c : "" }), this.renderContent()] }));
+    }
+}
+//# sourceMappingURL=textLineComponent.js.map

package/lines/textLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/textLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAAkC;IAC3E,YAAY,KAA8B;QACtC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAChB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YACtC,OAAO;SACV;QACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACpB,OAAO;SACV;QAED,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;IACxB,CAAC;IAED,aAAa;QACT,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YACxB,OAAO,IAAI,CAAC;SACf;QAED,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YACrC,OAAO,CACH,cAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,YAC5E,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,GACrD,CACT,CAAC;SACL;QACD,OAAO,CACH,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,YACrG,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,GAC5B,CACT,CAAC;IACN,CAAC;IAED,MAAM;;QACF,OAAO,CACH,eAAK,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,aAC1I,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,MAAA,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,mCAAI,IAAI,CAAC,KAAK,CAAC,KAAK,mCAAI,EAAE,YACrE,MAAA,IAAI,CAAC,KAAK,CAAC,KAAK,mCAAI,EAAE,GACrB,EACL,IAAI,CAAC,aAAa,EAAE,IACnB,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\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}\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\r\n        if (this.props.onLink || this.props.url) {\r\n            return (\r\n                <div className=\"link-value\" title={this.props.value} 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={this.props.value} 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    render() {\r\n        return (\r\n            <div className={this.props.underline ? \"textLine underline\" : \"textLine\" + (this.props.additionalClass ? \" \" + this.props.additionalClass : \"\")}>\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            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/unitButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface IUnitButtonProps {
+    unit: string;
+    locked?: boolean;
+    onClick?: (unit: string) => void;
+}
+export declare function UnitButton(props: IUnitButtonProps): JSX.Element;
+export {};

package/lines/unitButton.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function UnitButton(props) {
+    return (_jsx("button", { className: "unit", onClick: () => {
+            if (props.onClick && !props.locked)
+                props.onClick(props.unit || "");
+        }, disabled: props.locked, children: props.unit }));
+}
+//# sourceMappingURL=unitButton.js.map

package/lines/unitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unitButton.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/unitButton.tsx"],"names":[],"mappings":";AAMA,MAAM,UAAU,UAAU,CAAC,KAAuB;IAC9C,OAAO,CACH,iBACI,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,GAAG,EAAE;YACV,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM;gBAAE,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC;QACxE,CAAC,EACD,QAAQ,EAAE,KAAK,CAAC,MAAM,YAErB,KAAK,CAAC,IAAI,GACN,CACZ,CAAC;AACN,CAAC","sourcesContent":["interface IUnitButtonProps {\r\n    unit: string;\r\n    locked?: boolean;\r\n    onClick?: (unit: string) => void;\r\n}\r\n\r\nexport function UnitButton(props: IUnitButtonProps) {\r\n    return (\r\n        <button\r\n            className={\"unit\"}\r\n            onClick={() => {\r\n                if (props.onClick && !props.locked) props.onClick(props.unit || \"\");\r\n            }}\r\n            disabled={props.locked}\r\n        >\r\n            {props.unit}\r\n        </button>\r\n    );\r\n}\r\n"]}

package/lines/valueLineComponent.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+interface IValueLineComponentProps {
+    label: string;
+    value: number;
+    color?: string;
+    fractionDigits?: number;
+    units?: string;
+    icon?: string;
+    iconLabel?: string;
+}
+export declare class ValueLineComponent extends React.Component<IValueLineComponentProps> {
+    constructor(props: IValueLineComponentProps);
+    render(): JSX.Element;
+}
+export {};

package/lines/valueLineComponent.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export class ValueLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const digits = this.props.fractionDigits !== undefined ? this.props.fractionDigits : 2;
+        const value = this.props.value.toFixed(digits) + (this.props.units ? " " + this.props.units : "");
+        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: "value", style: { color: this.props.color ? this.props.color : "" }, children: value })] }));
+    }
+}
+//# sourceMappingURL=valueLineComponent.js.map

package/lines/valueLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"valueLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/valueLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,MAAM,OAAO,kBAAmB,SAAQ,KAAK,CAAC,SAAmC;IAC7E,YAAY,KAA+B;QACvC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;QACvF,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAElG,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,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,YAC5E,KAAK,GACJ,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\n\r\ninterface IValueLineComponentProps {\r\n    label: string;\r\n    value: number;\r\n    color?: string;\r\n    fractionDigits?: number;\r\n    units?: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class ValueLineComponent extends React.Component<IValueLineComponentProps> {\r\n    constructor(props: IValueLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    render() {\r\n        const digits = this.props.fractionDigits !== undefined ? this.props.fractionDigits : 2;\r\n        const value = this.props.value.toFixed(digits) + (this.props.units ? \" \" + this.props.units : \"\");\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=\"value\" style={{ color: this.props.color ? this.props.color : \"\" }}>\r\n                    {value}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/vector2LineComponent.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+interface IVector2LineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    step?: number;
+    onChange?: (newvalue: Vector2) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    icon?: string;
+    iconLabel?: string;
+    lockObject: LockObject;
+}
+export declare class Vector2LineComponent extends React.Component<IVector2LineComponentProps, {
+    isExpanded: boolean;
+    value: Vector2;
+}> {
+    static defaultProps: {
+        step: number;
+    };
+    private _localChange;
+    constructor(props: IVector2LineComponentProps);
+    shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: {
+        isExpanded: boolean;
+        value: Vector2;
+    }): boolean;
+    switchExpandState(): void;
+    raiseOnPropertyChanged(previousValue: Vector2): void;
+    updateStateX(value: number): void;
+    updateStateY(value: number): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/vector2LineComponent.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { NumericInputComponent } from "./numericInputComponent.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+export class Vector2LineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        this.state = { isExpanded: false, value: this.props.target[this.props.propertyName].clone() };
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const nextPropsValue = nextProps.target[nextProps.propertyName];
+        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
+            nextState.value = nextPropsValue.clone();
+            this._localChange = false;
+            return true;
+        }
+        return false;
+    }
+    switchExpandState() {
+        this._localChange = true;
+        this.setState({ isExpanded: !this.state.isExpanded });
+    }
+    raiseOnPropertyChanged(previousValue) {
+        if (this.props.onChange) {
+            this.props.onChange(this.state.value);
+        }
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName,
+            value: this.state.value,
+            initialValue: previousValue,
+        });
+    }
+    updateStateX(value) {
+        this._localChange = true;
+        const store = this.state.value.clone();
+        this.props.target[this.props.propertyName].x = value;
+        this.state.value.x = value;
+        this.setState({ value: this.state.value });
+        this.raiseOnPropertyChanged(store);
+    }
+    updateStateY(value) {
+        this._localChange = true;
+        const store = this.state.value.clone();
+        this.props.target[this.props.propertyName].y = value;
+        this.state.value.y = value;
+        this.setState({ value: this.state.value });
+        this.raiseOnPropertyChanged(store);
+    }
+    render() {
+        const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
+        return (_jsxs("div", { className: "vector3Line", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsxs("div", { className: "firstLine", title: this.props.label, children: [_jsx("div", { className: "label", children: this.props.label }), _jsx("div", { className: "vector", children: `X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}` }), _jsx("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "x", step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "y", step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) })] }))] }));
+    }
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+Vector2LineComponent.defaultProps = {
+    step: 0.001, // cm
+};
+//# sourceMappingURL=vector2LineComponent.js.map

package/lines/vector2LineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vector2LineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/vector2LineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\n\r\nimport { NumericInputComponent } from \"./numericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface IVector2LineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    step?: number;\r\n    onChange?: (newvalue: Vector2) => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    lockObject: LockObject;\r\n}\r\n\r\nexport class Vector2LineComponent extends React.Component<IVector2LineComponentProps, { isExpanded: boolean; value: Vector2 }> {\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static defaultProps = {\r\n        step: 0.001, // cm\r\n    };\r\n\r\n    private _localChange = false;\r\n\r\n    constructor(props: IVector2LineComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { isExpanded: false, value: this.props.target[this.props.propertyName].clone() };\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IVector2LineComponentProps, nextState: { isExpanded: boolean; value: Vector2 }) {\r\n        const nextPropsValue = nextProps.target[nextProps.propertyName];\r\n\r\n        if (!nextPropsValue.equals(nextState.value) || this._localChange) {\r\n            nextState.value = nextPropsValue.clone();\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    switchExpandState() {\r\n        this._localChange = true;\r\n        this.setState({ isExpanded: !this.state.isExpanded });\r\n    }\r\n\r\n    raiseOnPropertyChanged(previousValue: Vector2) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(this.state.value);\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.target,\r\n            property: this.props.propertyName,\r\n            value: this.state.value,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    updateStateX(value: number) {\r\n        this._localChange = true;\r\n\r\n        const store = this.state.value.clone();\r\n        this.props.target[this.props.propertyName].x = value;\r\n        this.state.value.x = value;\r\n        this.setState({ value: this.state.value });\r\n\r\n        this.raiseOnPropertyChanged(store);\r\n    }\r\n\r\n    updateStateY(value: number) {\r\n        this._localChange = true;\r\n\r\n        const store = this.state.value.clone();\r\n        this.props.target[this.props.propertyName].y = value;\r\n        this.state.value.y = value;\r\n        this.setState({ value: this.state.value });\r\n\r\n        this.raiseOnPropertyChanged(store);\r\n    }\r\n\r\n    render() {\r\n        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n        return (\r\n            <div className=\"vector3Line\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <div className=\"firstLine\" title={this.props.label}>\r\n                    <div className=\"label\">{this.props.label}</div>\r\n                    <div className=\"vector\">{`X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}`}</div>\r\n                    <div className=\"expand hoverIcon\" onClick={() => this.switchExpandState()} title=\"Expand\">\r\n                        {chevron}\r\n                    </div>\r\n                </div>\r\n                {this.state.isExpanded && (\r\n                    <div className=\"secondLine\">\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"x\"\r\n                            step={this.props.step}\r\n                            value={this.state.value.x}\r\n                            onChange={(value) => this.updateStateX(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"y\"\r\n                            step={this.props.step}\r\n                            value={this.state.value.y}\r\n                            onChange={(value) => this.updateStateY(value)}\r\n                        />\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/vector3LineComponent.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+import type { Vector3 } from "@babylonjs/core/Maths/math.vector.js";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+interface IVector3LineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    step?: number;
+    onChange?: (newvalue: Vector3) => void;
+    useEuler?: boolean;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    noSlider?: boolean;
+    icon?: string;
+    iconLabel?: string;
+    lockObject: LockObject;
+}
+export declare class Vector3LineComponent extends React.Component<IVector3LineComponentProps, {
+    isExpanded: boolean;
+    value: Vector3;
+}> {
+    static defaultProps: {
+        step: number;
+    };
+    private _localChange;
+    constructor(props: IVector3LineComponentProps);
+    getCurrentValue(): any;
+    shouldComponentUpdate(nextProps: IVector3LineComponentProps, nextState: {
+        isExpanded: boolean;
+        value: Vector3;
+    }): boolean;
+    switchExpandState(): void;
+    raiseOnPropertyChanged(previousValue: Vector3): void;
+    updateVector3(): void;
+    updateStateX(value: number): void;
+    updateStateY(value: number): void;
+    updateStateZ(value: number): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/vector3LineComponent.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { NumericInputComponent } from "../lines/numericInputComponent.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { SliderLineComponent } from "../lines/sliderLineComponent.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+export class Vector3LineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        this.state = { isExpanded: false, value: this.getCurrentValue().clone() };
+    }
+    getCurrentValue() {
+        return this.props.target[this.props.propertyName];
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const nextPropsValue = this.getCurrentValue();
+        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
+            nextState.value = nextPropsValue.clone();
+            this._localChange = false;
+            return true;
+        }
+        return false;
+    }
+    switchExpandState() {
+        this._localChange = true;
+        this.setState({ isExpanded: !this.state.isExpanded });
+    }
+    raiseOnPropertyChanged(previousValue) {
+        if (this.props.onChange) {
+            this.props.onChange(this.state.value);
+        }
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName,
+            value: this.state.value,
+            initialValue: previousValue,
+        });
+    }
+    updateVector3() {
+        const store = this.props.target[this.props.propertyName].clone();
+        this.props.target[this.props.propertyName] = this.state.value;
+        this.setState({ value: store });
+        this.raiseOnPropertyChanged(store);
+    }
+    updateStateX(value) {
+        this._localChange = true;
+        this.state.value.x = value;
+        this.updateVector3();
+    }
+    updateStateY(value) {
+        this._localChange = true;
+        this.state.value.y = value;
+        this.updateVector3();
+    }
+    updateStateZ(value) {
+        this._localChange = true;
+        this.state.value.z = value;
+        this.updateVector3();
+    }
+    render() {
+        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 })] }), this.state.isExpanded && !this.props.useEuler && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInputComponent, { label: "x", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.x, onChange: (value) => this.updateStateX(value) }), _jsx(NumericInputComponent, { label: "y", lockObject: this.props.lockObject, step: this.props.step, value: this.state.value.y, onChange: (value) => this.updateStateY(value) }), _jsx(NumericInputComponent, { 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(NumericInputComponent, { 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(NumericInputComponent, { 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(NumericInputComponent, { lockObject: this.props.lockObject, label: "z", step: this.props.step, value: Tools.ToDegrees(this.state.value.z), onChange: (value) => this.updateStateZ(Tools.ToRadians(value)) })] }))] }));
+    }
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+Vector3LineComponent.defaultProps = {
+    step: 0.001, // cm
+};
+//# sourceMappingURL=vector3LineComponent.js.map

package/lines/vector3LineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vector3LineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/vector3LineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\n\r\nimport { NumericInputComponent } from \"../lines/numericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { SliderLineComponent } from \"../lines/sliderLineComponent\";\r\nimport { Tools } from \"core/Misc/tools\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface IVector3LineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    step?: number;\r\n    onChange?: (newvalue: Vector3) => void;\r\n    useEuler?: boolean;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    noSlider?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    lockObject: LockObject;\r\n}\r\n\r\nexport class Vector3LineComponent extends React.Component<IVector3LineComponentProps, { isExpanded: boolean; value: Vector3 }> {\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static defaultProps = {\r\n        step: 0.001, // cm\r\n    };\r\n\r\n    private _localChange = false;\r\n\r\n    constructor(props: IVector3LineComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { isExpanded: false, value: this.getCurrentValue().clone() };\r\n    }\r\n\r\n    getCurrentValue() {\r\n        return this.props.target[this.props.propertyName];\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IVector3LineComponentProps, nextState: { isExpanded: boolean; value: Vector3 }) {\r\n        const nextPropsValue = this.getCurrentValue();\r\n\r\n        if (!nextPropsValue.equals(nextState.value) || this._localChange) {\r\n            nextState.value = nextPropsValue.clone();\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    switchExpandState() {\r\n        this._localChange = true;\r\n        this.setState({ isExpanded: !this.state.isExpanded });\r\n    }\r\n\r\n    raiseOnPropertyChanged(previousValue: Vector3) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(this.state.value);\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.target,\r\n            property: this.props.propertyName,\r\n            value: this.state.value,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    updateVector3() {\r\n        const store = this.props.target[this.props.propertyName].clone();\r\n        this.props.target[this.props.propertyName] = this.state.value;\r\n\r\n        this.setState({ value: store });\r\n\r\n        this.raiseOnPropertyChanged(store);\r\n    }\r\n\r\n    updateStateX(value: number) {\r\n        this._localChange = true;\r\n\r\n        this.state.value.x = value;\r\n        this.updateVector3();\r\n    }\r\n\r\n    updateStateY(value: number) {\r\n        this._localChange = true;\r\n\r\n        this.state.value.y = value;\r\n        this.updateVector3();\r\n    }\r\n\r\n    updateStateZ(value: number) {\r\n        this._localChange = true;\r\n\r\n        this.state.value.z = value;\r\n        this.updateVector3();\r\n    }\r\n\r\n    render() {\r\n        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n        return (\r\n            <div className=\"vector3Line\">\r\n                <div className=\"firstLine\">\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=\"vector\">\r\n                        {!this.props.useEuler && `X: ${this.state.value.x.toFixed(2)}, Y: ${this.state.value.y.toFixed(2)}, Z: ${this.state.value.z.toFixed(2)}`}\r\n                        {this.props.useEuler &&\r\n                            `X: ${Tools.ToDegrees(this.state.value.x).toFixed(2)}, Y: ${Tools.ToDegrees(this.state.value.y).toFixed(2)}, Z: ${Tools.ToDegrees(\r\n                                this.state.value.z\r\n                            ).toFixed(2)}`}\r\n                    </div>\r\n                    <div className=\"expand hoverIcon\" onClick={() => this.switchExpandState()} title=\"Expand\">\r\n                        {chevron}\r\n                    </div>\r\n                </div>\r\n                {this.state.isExpanded && !this.props.useEuler && (\r\n                    <div className=\"secondLine\">\r\n                        <NumericInputComponent\r\n                            label=\"x\"\r\n                            lockObject={this.props.lockObject}\r\n                            step={this.props.step}\r\n                            value={this.state.value.x}\r\n                            onChange={(value) => this.updateStateX(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            label=\"y\"\r\n                            lockObject={this.props.lockObject}\r\n                            step={this.props.step}\r\n                            value={this.state.value.y}\r\n                            onChange={(value) => this.updateStateY(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            label=\"z\"\r\n                            lockObject={this.props.lockObject}\r\n                            step={this.props.step}\r\n                            value={this.state.value.z}\r\n                            onChange={(value) => this.updateStateZ(value)}\r\n                        />\r\n                    </div>\r\n                )}\r\n                {this.state.isExpanded && this.props.useEuler && !this.props.noSlider && (\r\n                    <div className=\"secondLine\">\r\n                        <SliderLineComponent\r\n                            lockObject={this.props.lockObject}\r\n                            margin={true}\r\n                            label=\"x\"\r\n                            minimum={0}\r\n                            maximum={360}\r\n                            step={0.1}\r\n                            directValue={Tools.ToDegrees(this.state.value.x)}\r\n                            onChange={(value) => this.updateStateX(Tools.ToRadians(value))}\r\n                        />\r\n                        <SliderLineComponent\r\n                            lockObject={this.props.lockObject}\r\n                            margin={true}\r\n                            label=\"y\"\r\n                            minimum={0}\r\n                            maximum={360}\r\n                            step={0.1}\r\n                            directValue={Tools.ToDegrees(this.state.value.y)}\r\n                            onChange={(value) => this.updateStateY(Tools.ToRadians(value))}\r\n                        />\r\n                        <SliderLineComponent\r\n                            lockObject={this.props.lockObject}\r\n                            margin={true}\r\n                            label=\"z\"\r\n                            minimum={0}\r\n                            maximum={360}\r\n                            step={0.1}\r\n                            directValue={Tools.ToDegrees(this.state.value.z)}\r\n                            onChange={(value) => this.updateStateZ(Tools.ToRadians(value))}\r\n                        />\r\n                    </div>\r\n                )}\r\n                {this.state.isExpanded && this.props.useEuler && this.props.noSlider && (\r\n                    <div className=\"secondLine\">\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"x\"\r\n                            step={this.props.step}\r\n                            value={Tools.ToDegrees(this.state.value.x)}\r\n                            onChange={(value) => this.updateStateX(Tools.ToRadians(value))}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"y\"\r\n                            step={this.props.step}\r\n                            value={Tools.ToDegrees(this.state.value.y)}\r\n                            onChange={(value) => this.updateStateY(Tools.ToRadians(value))}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"z\"\r\n                            step={this.props.step}\r\n                            value={Tools.ToDegrees(this.state.value.z)}\r\n                            onChange={(value) => this.updateStateZ(Tools.ToRadians(value))}\r\n                        />\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}