@babylonjs/shared-ui-components 5.28.0 → 5.30.0

package/lines/textInputLineComponent.js

@@ -1,155 +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] }));
-    }
-}
+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/textLineComponent.d.ts

@@ -1,21 +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 {};
+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

@@ -1,31 +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()] }));
-    }
-}
+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/unitButton.d.ts

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

@@ -1,8 +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 }));
-}
+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/valueLineComponent.d.ts

@@ -1,15 +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 {};
+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

@@ -1,13 +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 })] }));
-    }
-}
+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/vector2LineComponent.d.ts

@@ -1,36 +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 {};
+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 {};