@babylonjs/shared-ui-components 5.28.0 → 5.29.0

package/lines/fileMultipleButtonLineComponent.js

@@ -1,21 +1,21 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-export class FileMultipleButtonLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._id = FileMultipleButtonLineComponent._IDGenerator++;
-        this._uploadInputRef = React.createRef();
-    }
-    onChange(evt) {
-        const files = evt.target.files;
-        if (files && files.length) {
-            this.props.onClick(evt);
-        }
-        evt.target.value = "";
-    }
-    render() {
-        return (_jsxs("div", { className: "buttonLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("label", { htmlFor: "file-upload" + this._id, className: "file-upload", children: this.props.label }), _jsx("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt), multiple: true })] }));
-    }
-}
-FileMultipleButtonLineComponent._IDGenerator = 0;
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export class FileMultipleButtonLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._id = FileMultipleButtonLineComponent._IDGenerator++;
+        this._uploadInputRef = React.createRef();
+    }
+    onChange(evt) {
+        const files = evt.target.files;
+        if (files && files.length) {
+            this.props.onClick(evt);
+        }
+        evt.target.value = "";
+    }
+    render() {
+        return (_jsxs("div", { className: "buttonLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("label", { htmlFor: "file-upload" + this._id, className: "file-upload", children: this.props.label }), _jsx("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt), multiple: true })] }));
+    }
+}
+FileMultipleButtonLineComponent._IDGenerator = 0;
 //# sourceMappingURL=fileMultipleButtonLineComponent.js.map

package/lines/floatLineComponent.d.ts

@@ -1,50 +1,50 @@
-import * as React from "react";
-import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
-interface IFloatLineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    lockObject: LockObject;
-    onChange?: (newValue: number) => void;
-    isInteger?: boolean;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    additionalClass?: string;
-    step?: string;
-    digits?: number;
-    useEuler?: boolean;
-    min?: number;
-    max?: number;
-    smallUI?: boolean;
-    onEnter?: (newValue: number) => void;
-    icon?: string;
-    iconLabel?: string;
-    defaultValue?: number;
-    arrows?: boolean;
-    unit?: React.ReactNode;
-    onDragStart?: (newValue: number) => void;
-    onDragStop?: (newValue: number) => void;
-}
-export declare class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
-    value: string;
-    dragging: boolean;
-}> {
-    private _localChange;
-    private _store;
-    constructor(props: IFloatLineComponentProps);
-    componentWillUnmount(): void;
-    getValueString(value: any): string;
-    shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
-        value: string;
-        dragging: boolean;
-    }): boolean;
-    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
-    updateValue(valueString: string): void;
-    lock(): void;
-    unlock(): void;
-    incrementValue(amount: number, processStep?: boolean): void;
-    onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+interface IFloatLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    lockObject: LockObject;
+    onChange?: (newValue: number) => void;
+    isInteger?: boolean;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    additionalClass?: string;
+    step?: string;
+    digits?: number;
+    useEuler?: boolean;
+    min?: number;
+    max?: number;
+    smallUI?: boolean;
+    onEnter?: (newValue: number) => void;
+    icon?: string;
+    iconLabel?: string;
+    defaultValue?: number;
+    arrows?: boolean;
+    unit?: React.ReactNode;
+    onDragStart?: (newValue: number) => void;
+    onDragStop?: (newValue: number) => void;
+}
+export declare class FloatLineComponent extends React.Component<IFloatLineComponentProps, {
+    value: string;
+    dragging: boolean;
+}> {
+    private _localChange;
+    private _store;
+    constructor(props: IFloatLineComponentProps);
+    componentWillUnmount(): void;
+    getValueString(value: any): string;
+    shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: {
+        value: string;
+        dragging: boolean;
+    }): boolean;
+    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+    updateValue(valueString: string): void;
+    lock(): void;
+    unlock(): void;
+    incrementValue(amount: number, processStep?: boolean): void;
+    onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/floatLineComponent.js

@@ -1,176 +1,176 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import { SliderLineComponent } from "./sliderLineComponent.js";
-import { Tools } from "@babylonjs/core/Misc/tools.js";
-import { conflictingValuesPlaceholder } from "./targetsProxy.js";
-import { InputArrowsComponent } from "./inputArrowsComponent.js";
-export class FloatLineComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this._localChange = false;
-        const currentValue = this.props.target[this.props.propertyName];
-        this.state = { value: this.getValueString(currentValue), dragging: false };
-        this._store = currentValue;
-    }
-    componentWillUnmount() {
-        this.unlock();
-    }
-    getValueString(value) {
-        if (value) {
-            if (value === conflictingValuesPlaceholder) {
-                return conflictingValuesPlaceholder;
-            }
-            else if (this.props.isInteger) {
-                return value.toFixed(0);
-            }
-            else {
-                return value.toFixed(this.props.digits || 4);
-            }
-        }
-        return "0";
-    }
-    shouldComponentUpdate(nextProps, nextState) {
-        if (this._localChange) {
-            this._localChange = false;
-            return true;
-        }
-        const newValue = nextProps.target[nextProps.propertyName];
-        const newValueString = this.getValueString(newValue);
-        if (newValueString !== nextState.value) {
-            nextState.value = newValueString;
-            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);
-        }
-        if (!this.props.onPropertyChangedObservable) {
-            return;
-        }
-        this.props.onPropertyChangedObservable.notifyObservers({
-            object: this.props.target,
-            property: this.props.propertyName,
-            value: newValue,
-            initialValue: previousValue,
-        });
-    }
-    updateValue(valueString) {
-        if (/[^0-9.-]/g.test(valueString)) {
-            return;
-        }
-        let valueAsNumber;
-        if (this.props.isInteger) {
-            valueAsNumber = parseInt(valueString);
-        }
-        else {
-            valueAsNumber = parseFloat(valueString);
-        }
-        if (!isNaN(valueAsNumber)) {
-            if (this.props.min !== undefined) {
-                if (valueAsNumber < this.props.min) {
-                    valueAsNumber = this.props.min;
-                    valueString = valueAsNumber.toString();
-                }
-            }
-            if (this.props.max !== undefined) {
-                if (valueAsNumber > this.props.max) {
-                    valueAsNumber = this.props.max;
-                    valueString = valueAsNumber.toString();
-                }
-            }
-        }
-        else if (this.props.defaultValue != null) {
-            valueAsNumber = this.props.defaultValue;
-        }
-        this._localChange = true;
-        this.setState({ value: valueString });
-        if (isNaN(valueAsNumber)) {
-            return;
-        }
-        this.props.target[this.props.propertyName] = valueAsNumber;
-        this.raiseOnPropertyChanged(valueAsNumber, this._store);
-        this._store = valueAsNumber;
-    }
-    lock() {
-        if (this.props.lockObject) {
-            this.props.lockObject.lock = true;
-        }
-    }
-    unlock() {
-        if (this.props.lockObject) {
-            this.props.lockObject.lock = false;
-        }
-    }
-    incrementValue(amount, processStep = true) {
-        if (processStep && this.props.step) {
-            amount *= parseFloat(this.props.step);
-        }
-        let currentValue = parseFloat(this.state.value);
-        if (isNaN(currentValue)) {
-            currentValue = 0;
-        }
-        this.updateValue((currentValue + amount).toFixed(2));
-    }
-    onKeyDown(event) {
-        const step = parseFloat(this.props.step || this.props.isInteger ? "1" : "0.01");
-        const handleArrowKey = (sign) => {
-            if (event.shiftKey) {
-                sign *= 10;
-                if (event.ctrlKey || event.metaKey) {
-                    sign *= 10;
-                }
-            }
-            this.incrementValue(sign * step, false);
-            event.preventDefault();
-        };
-        if (event.key === "ArrowUp") {
-            handleArrowKey(1);
-        }
-        else if (event.key === "ArrowDown") {
-            handleArrowKey(-1);
-        }
-        if (event.key === "Enter" && this.props.onEnter) {
-            this.props.onEnter(this._store);
-        }
-    }
-    render() {
-        let valueAsNumber;
-        if (this.props.isInteger) {
-            valueAsNumber = parseInt(this.state.value);
-        }
-        else {
-            valueAsNumber = parseFloat(this.state.value);
-        }
-        let className = this.props.smallUI ? "short" : "value";
-        if (this.state.dragging) {
-            className += " dragging";
-        }
-        if (this.props.arrows) {
-            className += " hasArrows";
-        }
-        const value = this.state.value === conflictingValuesPlaceholder ? "" : this.state.value;
-        const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : "";
-        return (_jsxs(_Fragment, { children: [!this.props.useEuler && (_jsxs("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine", 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: "label", title: this.props.label, children: this.props.label })), _jsxs("div", { className: className, children: [_jsx("input", { type: "number", step: this.props.step || this.props.isInteger ? "1" : "0.01", className: "numeric-input", onKeyDown: (evt) => this.onKeyDown(evt), value: value, onBlur: () => {
-                                        this.unlock();
-                                        if (this.props.onEnter) {
-                                            this.props.onEnter(this._store);
-                                        }
-                                    }, placeholder: placeholder, onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value) }), this.props.arrows && (_jsx(InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (newDragging) => {
-                                        const currentDragging = this.state.dragging;
-                                        // drag stopped
-                                        if (!currentDragging && newDragging && this.props.onDragStart) {
-                                            this.props.onDragStart(valueAsNumber);
-                                        }
-                                        else if (currentDragging && !newDragging && this.props.onDragStop) {
-                                            this.props.onDragStop(valueAsNumber);
-                                        }
-                                        this.setState({ dragging: newDragging });
-                                    } }))] }), this.props.unit] })), this.props.useEuler && (_jsx(SliderLineComponent, { lockObject: this.props.lockObject, label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: Tools.ToDegrees(valueAsNumber), onChange: (value) => this.updateValue(Tools.ToRadians(value).toString()) }))] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { SliderLineComponent } from "./sliderLineComponent.js";
+import { Tools } from "@babylonjs/core/Misc/tools.js";
+import { conflictingValuesPlaceholder } from "./targetsProxy.js";
+import { InputArrowsComponent } from "./inputArrowsComponent.js";
+export class FloatLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        const currentValue = this.props.target[this.props.propertyName];
+        this.state = { value: this.getValueString(currentValue), dragging: false };
+        this._store = currentValue;
+    }
+    componentWillUnmount() {
+        this.unlock();
+    }
+    getValueString(value) {
+        if (value) {
+            if (value === conflictingValuesPlaceholder) {
+                return conflictingValuesPlaceholder;
+            }
+            else if (this.props.isInteger) {
+                return value.toFixed(0);
+            }
+            else {
+                return value.toFixed(this.props.digits || 4);
+            }
+        }
+        return "0";
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this._localChange) {
+            this._localChange = false;
+            return true;
+        }
+        const newValue = nextProps.target[nextProps.propertyName];
+        const newValueString = this.getValueString(newValue);
+        if (newValueString !== nextState.value) {
+            nextState.value = newValueString;
+            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);
+        }
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName,
+            value: newValue,
+            initialValue: previousValue,
+        });
+    }
+    updateValue(valueString) {
+        if (/[^0-9.-]/g.test(valueString)) {
+            return;
+        }
+        let valueAsNumber;
+        if (this.props.isInteger) {
+            valueAsNumber = parseInt(valueString);
+        }
+        else {
+            valueAsNumber = parseFloat(valueString);
+        }
+        if (!isNaN(valueAsNumber)) {
+            if (this.props.min !== undefined) {
+                if (valueAsNumber < this.props.min) {
+                    valueAsNumber = this.props.min;
+                    valueString = valueAsNumber.toString();
+                }
+            }
+            if (this.props.max !== undefined) {
+                if (valueAsNumber > this.props.max) {
+                    valueAsNumber = this.props.max;
+                    valueString = valueAsNumber.toString();
+                }
+            }
+        }
+        else if (this.props.defaultValue != null) {
+            valueAsNumber = this.props.defaultValue;
+        }
+        this._localChange = true;
+        this.setState({ value: valueString });
+        if (isNaN(valueAsNumber)) {
+            return;
+        }
+        this.props.target[this.props.propertyName] = valueAsNumber;
+        this.raiseOnPropertyChanged(valueAsNumber, this._store);
+        this._store = valueAsNumber;
+    }
+    lock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = true;
+        }
+    }
+    unlock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+    incrementValue(amount, processStep = true) {
+        if (processStep && this.props.step) {
+            amount *= parseFloat(this.props.step);
+        }
+        let currentValue = parseFloat(this.state.value);
+        if (isNaN(currentValue)) {
+            currentValue = 0;
+        }
+        this.updateValue((currentValue + amount).toFixed(2));
+    }
+    onKeyDown(event) {
+        const step = parseFloat(this.props.step || this.props.isInteger ? "1" : "0.01");
+        const handleArrowKey = (sign) => {
+            if (event.shiftKey) {
+                sign *= 10;
+                if (event.ctrlKey || event.metaKey) {
+                    sign *= 10;
+                }
+            }
+            this.incrementValue(sign * step, false);
+            event.preventDefault();
+        };
+        if (event.key === "ArrowUp") {
+            handleArrowKey(1);
+        }
+        else if (event.key === "ArrowDown") {
+            handleArrowKey(-1);
+        }
+        if (event.key === "Enter" && this.props.onEnter) {
+            this.props.onEnter(this._store);
+        }
+    }
+    render() {
+        let valueAsNumber;
+        if (this.props.isInteger) {
+            valueAsNumber = parseInt(this.state.value);
+        }
+        else {
+            valueAsNumber = parseFloat(this.state.value);
+        }
+        let className = this.props.smallUI ? "short" : "value";
+        if (this.state.dragging) {
+            className += " dragging";
+        }
+        if (this.props.arrows) {
+            className += " hasArrows";
+        }
+        const value = this.state.value === conflictingValuesPlaceholder ? "" : this.state.value;
+        const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : "";
+        return (_jsxs(_Fragment, { children: [!this.props.useEuler && (_jsxs("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine", 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: "label", title: this.props.label, children: this.props.label })), _jsxs("div", { className: className, children: [_jsx("input", { type: "number", step: this.props.step || this.props.isInteger ? "1" : "0.01", className: "numeric-input", onKeyDown: (evt) => this.onKeyDown(evt), value: value, onBlur: () => {
+                                        this.unlock();
+                                        if (this.props.onEnter) {
+                                            this.props.onEnter(this._store);
+                                        }
+                                    }, placeholder: placeholder, onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value) }), this.props.arrows && (_jsx(InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (newDragging) => {
+                                        const currentDragging = this.state.dragging;
+                                        // drag stopped
+                                        if (!currentDragging && newDragging && this.props.onDragStart) {
+                                            this.props.onDragStart(valueAsNumber);
+                                        }
+                                        else if (currentDragging && !newDragging && this.props.onDragStop) {
+                                            this.props.onDragStop(valueAsNumber);
+                                        }
+                                        this.setState({ dragging: newDragging });
+                                    } }))] }), this.props.unit] })), this.props.useEuler && (_jsx(SliderLineComponent, { lockObject: this.props.lockObject, label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: Tools.ToDegrees(valueAsNumber), onChange: (value) => this.updateValue(Tools.ToRadians(value).toString()) }))] }));
+    }
+}
 //# sourceMappingURL=floatLineComponent.js.map

package/lines/hexLineComponent.d.ts

@@ -1,40 +1,40 @@
-import * as React from "react";
-import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../propertyChangedEvent";
-import type { LockObject } from "../tabs/propertyGrids/lockObject";
-interface IHexLineComponentProps {
-    label: string;
-    target: any;
-    propertyName: string;
-    lockObject?: LockObject;
-    onChange?: (newValue: number) => void;
-    isInteger?: boolean;
-    replaySourceReplacement?: string;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-    additionalClass?: string;
-    step?: string;
-    digits?: number;
-    useEuler?: boolean;
-    min?: number;
-    icon?: string;
-    iconLabel?: string;
-}
-export declare class HexLineComponent extends React.Component<IHexLineComponentProps, {
-    value: string;
-}> {
-    private _localChange;
-    private _store;
-    private _propertyChange;
-    constructor(props: IHexLineComponentProps);
-    componentWillUnmount(): void;
-    shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: {
-        value: string;
-    }): boolean;
-    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
-    convertToHexString(valueString: string): string;
-    updateValue(valueString: string, raisePropertyChanged: boolean): void;
-    lock(): void;
-    unlock(): void;
-    render(): JSX.Element;
-}
-export {};
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../propertyChangedEvent";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+interface IHexLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    lockObject?: LockObject;
+    onChange?: (newValue: number) => void;
+    isInteger?: boolean;
+    replaySourceReplacement?: string;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    additionalClass?: string;
+    step?: string;
+    digits?: number;
+    useEuler?: boolean;
+    min?: number;
+    icon?: string;
+    iconLabel?: string;
+}
+export declare class HexLineComponent extends React.Component<IHexLineComponentProps, {
+    value: string;
+}> {
+    private _localChange;
+    private _store;
+    private _propertyChange;
+    constructor(props: IHexLineComponentProps);
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: {
+        value: string;
+    }): boolean;
+    raiseOnPropertyChanged(newValue: number, previousValue: number): void;
+    convertToHexString(valueString: string): string;
+    updateValue(valueString: string, raisePropertyChanged: boolean): void;
+    lock(): void;
+    unlock(): void;
+    render(): JSX.Element;
+}
+export {};