@babylonjs/shared-ui-components 5.28.0 → 5.29.0

package/stories/lines/NumericInputComponent.stories.d.ts

@@ -1,11 +1,11 @@
-import { NumericInputComponent } from "../../components/lines/NumericInputComponent";
-declare const _default: {
-    component: typeof NumericInputComponent;
-};
-export default _default;
-export declare const Default: {
-    args: {
-        label: string;
-        value: number;
-    };
-};
+import { NumericInputComponent } from "../../components/lines/NumericInputComponent";
+declare const _default: {
+    component: typeof NumericInputComponent;
+};
+export default _default;
+export declare const Default: {
+    args: {
+        label: string;
+        value: number;
+    };
+};

package/stories/lines/NumericInputComponent.stories.js

@@ -1,6 +1,6 @@
-import { NumericInputComponent } from "../../components/lines/NumericInputComponent.js";
-export default { component: NumericInputComponent };
-export const Default = {
-    args: { label: "test", value: 1 },
-};
+import { NumericInputComponent } from "../../components/lines/NumericInputComponent.js";
+export default { component: NumericInputComponent };
+export const Default = {
+    args: { label: "test", value: 1 },
+};
 //# sourceMappingURL=NumericInputComponent.stories.js.map

package/stringTools.d.ts

@@ -1,11 +1,11 @@
-export declare class StringTools {
-    private static _SaveAs;
-    private static _Click;
-    /**
-     * Download a string into a file that will be saved locally by the browser
-     * @param document
-     * @param content defines the string to download locally as a file
-     * @param filename
-     */
-    static DownloadAsFile(document: HTMLDocument, content: string, filename: string): void;
-}
+export declare class StringTools {
+    private static _SaveAs;
+    private static _Click;
+    /**
+     * Download a string into a file that will be saved locally by the browser
+     * @param document
+     * @param content defines the string to download locally as a file
+     * @param filename
+     */
+    static DownloadAsFile(document: HTMLDocument, content: string, filename: string): void;
+}

package/stringTools.js

@@ -1,89 +1,89 @@
-export class StringTools {
-    /*
-     * Based on FileSaver.js
-     * A saveAs() FileSaver implementation.
-     *
-     * By Eli Grey, http://eligrey.com
-     *
-     * License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
-     * source  : http://purl.eligrey.com/github/FileSaver.js
-     */
-    static _SaveAs(blob, name, document) {
-        if ("download" in HTMLAnchorElement.prototype) {
-            const URL = window.URL || window.webkitURL;
-            const a = document.createElement("a");
-            a.download = name;
-            a.rel = "noopener"; // tabnabbing
-            a.href = URL.createObjectURL(blob);
-            setTimeout(() => {
-                URL.revokeObjectURL(a.href);
-            }, 4e4); // 40s
-            setTimeout(() => {
-                this._Click(a, document);
-            }, 0);
-            return;
-        }
-        // Open a popup immediately do go around popup blocker
-        // Mostly only available on user interaction and the fileReader is async so...
-        let popup = open("", "_blank");
-        if (popup) {
-            popup.document.title = popup.document.body.innerText = "downloading...";
-        }
-        const force = blob.type === "application/octet-stream";
-        const isSafari = /constructor/i.test(window.HTMLElement) || window.safari;
-        const isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);
-        if ((isChromeIOS || (force && isSafari)) && typeof FileReader !== "undefined") {
-            // Safari doesn't allow downloading of blob URLs
-            const reader = new FileReader();
-            reader.onloadend = () => {
-                let url = reader.result;
-                url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, "data:attachment/file;");
-                if (popup) {
-                    popup.location.href = url;
-                }
-                else {
-                    location = url;
-                }
-                popup = null;
-            };
-            reader.readAsDataURL(blob);
-        }
-        else {
-            const URL = window.URL || window.webkitURL;
-            const url = URL.createObjectURL(blob);
-            if (popup) {
-                popup.location.href = url;
-            }
-            else {
-                location.href = url;
-            }
-            popup = null;
-            setTimeout(function () {
-                URL.revokeObjectURL(url);
-            }, 4e4);
-        }
-    }
-    static _Click(node, document) {
-        try {
-            node.dispatchEvent(new MouseEvent("click"));
-        }
-        catch (e) {
-            const evt = document.createEvent("MouseEvents");
-            evt.initMouseEvent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
-            node.dispatchEvent(evt);
-        }
-    }
-    /**
-     * Download a string into a file that will be saved locally by the browser
-     * @param document
-     * @param content defines the string to download locally as a file
-     * @param filename
-     */
-    static DownloadAsFile(document, content, filename) {
-        const blob = new Blob([content], {
-            type: "application/octet-stream",
-        });
-        this._SaveAs(blob, filename, document);
-    }
-}
+export class StringTools {
+    /*
+     * Based on FileSaver.js
+     * A saveAs() FileSaver implementation.
+     *
+     * By Eli Grey, http://eligrey.com
+     *
+     * License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
+     * source  : http://purl.eligrey.com/github/FileSaver.js
+     */
+    static _SaveAs(blob, name, document) {
+        if ("download" in HTMLAnchorElement.prototype) {
+            const URL = window.URL || window.webkitURL;
+            const a = document.createElement("a");
+            a.download = name;
+            a.rel = "noopener"; // tabnabbing
+            a.href = URL.createObjectURL(blob);
+            setTimeout(() => {
+                URL.revokeObjectURL(a.href);
+            }, 4e4); // 40s
+            setTimeout(() => {
+                this._Click(a, document);
+            }, 0);
+            return;
+        }
+        // Open a popup immediately do go around popup blocker
+        // Mostly only available on user interaction and the fileReader is async so...
+        let popup = open("", "_blank");
+        if (popup) {
+            popup.document.title = popup.document.body.innerText = "downloading...";
+        }
+        const force = blob.type === "application/octet-stream";
+        const isSafari = /constructor/i.test(window.HTMLElement) || window.safari;
+        const isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);
+        if ((isChromeIOS || (force && isSafari)) && typeof FileReader !== "undefined") {
+            // Safari doesn't allow downloading of blob URLs
+            const reader = new FileReader();
+            reader.onloadend = () => {
+                let url = reader.result;
+                url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, "data:attachment/file;");
+                if (popup) {
+                    popup.location.href = url;
+                }
+                else {
+                    location = url;
+                }
+                popup = null;
+            };
+            reader.readAsDataURL(blob);
+        }
+        else {
+            const URL = window.URL || window.webkitURL;
+            const url = URL.createObjectURL(blob);
+            if (popup) {
+                popup.location.href = url;
+            }
+            else {
+                location.href = url;
+            }
+            popup = null;
+            setTimeout(function () {
+                URL.revokeObjectURL(url);
+            }, 4e4);
+        }
+    }
+    static _Click(node, document) {
+        try {
+            node.dispatchEvent(new MouseEvent("click"));
+        }
+        catch (e) {
+            const evt = document.createEvent("MouseEvents");
+            evt.initMouseEvent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+            node.dispatchEvent(evt);
+        }
+    }
+    /**
+     * Download a string into a file that will be saved locally by the browser
+     * @param document
+     * @param content defines the string to download locally as a file
+     * @param filename
+     */
+    static DownloadAsFile(document, content, filename) {
+        const blob = new Blob([content], {
+            type: "application/octet-stream",
+        });
+        this._SaveAs(blob, filename, document);
+    }
+}
 //# sourceMappingURL=stringTools.js.map

package/tabs/propertyGrids/gui/checkboxPropertyGridComponent.d.ts

@@ -1,15 +1,15 @@
-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";
-import type { Checkbox } from "@babylonjs/gui/2D/controls/checkbox.js";
-interface ICheckboxPropertyGridComponentProps {
-    checkbox: Checkbox;
-    lockObject: LockObject;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-}
-export declare class CheckboxPropertyGridComponent extends React.Component<ICheckboxPropertyGridComponentProps> {
-    constructor(props: ICheckboxPropertyGridComponentProps);
-    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";
+import type { Checkbox } from "@babylonjs/gui/2D/controls/checkbox.js";
+interface ICheckboxPropertyGridComponentProps {
+    checkbox: Checkbox;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+}
+export declare class CheckboxPropertyGridComponent extends React.Component<ICheckboxPropertyGridComponentProps> {
+    constructor(props: ICheckboxPropertyGridComponentProps);
+    render(): JSX.Element;
+}
+export {};

package/tabs/propertyGrids/gui/checkboxPropertyGridComponent.js

@@ -1,16 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { CommonControlPropertyGridComponent } from "../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent.js";
-import { LineContainerComponent } from "../../../lines/lineContainerComponent.js";
-import { FloatLineComponent } from "../../../lines/floatLineComponent.js";
-import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent.js";
-export class CheckboxPropertyGridComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const checkbox = this.props.checkbox;
-        return (_jsxs("div", { className: "pane", children: [_jsx(CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, control: checkbox, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsxs(LineContainerComponent, { title: "CHECKBOX", children: [_jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Check size ratio", target: checkbox, propertyName: "checkSizeRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(CheckBoxLineComponent, { label: "Checked", target: checkbox, propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CommonControlPropertyGridComponent } from "../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent.js";
+import { LineContainerComponent } from "../../../lines/lineContainerComponent.js";
+import { FloatLineComponent } from "../../../lines/floatLineComponent.js";
+import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent.js";
+export class CheckboxPropertyGridComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const checkbox = this.props.checkbox;
+        return (_jsxs("div", { className: "pane", children: [_jsx(CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, control: checkbox, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsxs(LineContainerComponent, { title: "CHECKBOX", children: [_jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Check size ratio", target: checkbox, propertyName: "checkSizeRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(CheckBoxLineComponent, { label: "Checked", target: checkbox, propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })] }));
+    }
+}
 //# sourceMappingURL=checkboxPropertyGridComponent.js.map

package/tabs/propertyGrids/gui/colorPickerPropertyGridComponent.d.ts

@@ -1,15 +1,15 @@
-import * as React from "react";
-import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../../../propertyChangedEvent";
-import type { ColorPicker } from "@babylonjs/gui/2D/controls/colorpicker.js";
-import type { LockObject } from "../lockObject";
-interface IColorPickerPropertyGridComponentProps {
-    colorPicker: ColorPicker;
-    lockObject: LockObject;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-}
-export declare class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {
-    constructor(props: IColorPickerPropertyGridComponentProps);
-    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 { ColorPicker } from "@babylonjs/gui/2D/controls/colorpicker.js";
+import type { LockObject } from "../lockObject";
+interface IColorPickerPropertyGridComponentProps {
+    colorPicker: ColorPicker;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+}
+export declare class ColorPickerPropertyGridComponent extends React.Component<IColorPickerPropertyGridComponentProps> {
+    constructor(props: IColorPickerPropertyGridComponentProps);
+    render(): JSX.Element;
+}
+export {};

package/tabs/propertyGrids/gui/colorPickerPropertyGridComponent.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { CommonControlPropertyGridComponent } from "../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent.js";
-import { LineContainerComponent } from "../../../lines/lineContainerComponent.js";
-import { Color3LineComponent } from "../../../lines/color3LineComponent.js";
-export class ColorPickerPropertyGridComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const colorPicker = this.props.colorPicker;
-        return (_jsxs("div", { className: "pane", children: [_jsx(CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, control: colorPicker, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(LineContainerComponent, { title: "COLORPICKER", children: _jsx(Color3LineComponent, { lockObject: this.props.lockObject, label: "Color", target: colorPicker, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }) })] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CommonControlPropertyGridComponent } from "../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent.js";
+import { LineContainerComponent } from "../../../lines/lineContainerComponent.js";
+import { Color3LineComponent } from "../../../lines/color3LineComponent.js";
+export class ColorPickerPropertyGridComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const colorPicker = this.props.colorPicker;
+        return (_jsxs("div", { className: "pane", children: [_jsx(CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, control: colorPicker, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(LineContainerComponent, { title: "COLORPICKER", children: _jsx(Color3LineComponent, { lockObject: this.props.lockObject, label: "Color", target: colorPicker, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }) })] }));
+    }
+}
 //# sourceMappingURL=colorPickerPropertyGridComponent.js.map

package/tabs/propertyGrids/gui/commonControlPropertyGridComponent.d.ts

@@ -1,17 +1,17 @@
-import * as React from "react";
-import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../../../propertyChangedEvent";
-import { Control } from "@babylonjs/gui/2D/controls/control.js";
-import type { LockObject } from "../../../tabs/propertyGrids/lockObject";
-interface ICommonControlPropertyGridComponentProps {
-    controls?: Control[];
-    control?: Control;
-    lockObject: LockObject;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-}
-export declare class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
-    constructor(props: ICommonControlPropertyGridComponentProps);
-    renderGridInformation(control: Control): JSX.Element | null;
-    render(): JSX.Element | undefined;
-}
-export {};
+import * as React from "react";
+import type { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { PropertyChangedEvent } from "../../../propertyChangedEvent";
+import { Control } from "@babylonjs/gui/2D/controls/control.js";
+import type { LockObject } from "../../../tabs/propertyGrids/lockObject";
+interface ICommonControlPropertyGridComponentProps {
+    controls?: Control[];
+    control?: Control;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+}
+export declare class CommonControlPropertyGridComponent extends React.Component<ICommonControlPropertyGridComponentProps> {
+    constructor(props: ICommonControlPropertyGridComponentProps);
+    renderGridInformation(control: Control): JSX.Element | null;
+    render(): JSX.Element | undefined;
+}
+export {};

package/tabs/propertyGrids/gui/commonControlPropertyGridComponent.js

@@ -1,56 +1,56 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { LineContainerComponent } from "../../../lines/lineContainerComponent.js";
-import { TextLineComponent } from "../../../lines/textLineComponent.js";
-import { Control } from "@babylonjs/gui/2D/controls/control.js";
-import { SliderLineComponent } from "../../../lines/sliderLineComponent.js";
-import { FloatLineComponent } from "../../../lines/floatLineComponent.js";
-import { TextInputLineComponent } from "../../../lines/textInputLineComponent.js";
-import { OptionsLineComponent } from "../../../lines/optionsLineComponent.js";
-import { makeTargetsProxy } from "../../../lines/targetsProxy.js";
-export class CommonControlPropertyGridComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    renderGridInformation(control) {
-        if (!control.parent) {
-            return null;
-        }
-        const gridParent = control.parent;
-        if (gridParent.rowCount === undefined) {
-            return null;
-        }
-        const grid = gridParent;
-        const childCellInfo = grid.getChildCellInfo(control);
-        if (childCellInfo === undefined) {
-            return null;
-        }
-        const cellInfos = childCellInfo.split(":");
-        return (_jsxs(LineContainerComponent, { title: "GRID", children: [_jsx(TextLineComponent, { label: "Row", value: cellInfos[0] }), _jsx(TextLineComponent, { label: "Column", value: cellInfos[1] })] }));
-    }
-    render() {
-        let controls;
-        if (this.props.controls) {
-            controls = this.props.controls;
-        }
-        else if (this.props.control) {
-            controls = [this.props.control];
-        }
-        else {
-            return;
-        }
-        const control = controls[0];
-        const horizontalOptions = [
-            { label: "Left", value: Control.HORIZONTAL_ALIGNMENT_LEFT },
-            { label: "Right", value: Control.HORIZONTAL_ALIGNMENT_RIGHT },
-            { label: "Center", value: Control.HORIZONTAL_ALIGNMENT_CENTER },
-        ];
-        const verticalOptions = [
-            { label: "Top", value: Control.VERTICAL_ALIGNMENT_TOP },
-            { label: "Bottom", value: Control.VERTICAL_ALIGNMENT_BOTTOM },
-            { label: "Center", value: Control.VERTICAL_ALIGNMENT_CENTER },
-        ];
-        return (_jsxs("div", { children: [_jsxs(LineContainerComponent, { title: "GENERAL", children: [_jsx(TextLineComponent, { label: "Class", value: control.getClassName() }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextLineComponent, { label: "Unique ID", value: control.uniqueId.toString() }), _jsx(SliderLineComponent, { lockObject: this.props.lockObject, label: "Alpha", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), control.color !== undefined && (_jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Color", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), control.background !== undefined && (_jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Background", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "ZIndex", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "zIndex", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), this.renderGridInformation(control), _jsxs(LineContainerComponent, { title: "ALIGNMENT", children: [_jsx(OptionsLineComponent, { label: "Horizontal", options: horizontalOptions, target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "horizontalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(OptionsLineComponent, { label: "Vertical", options: verticalOptions, target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "verticalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), _jsxs(LineContainerComponent, { title: "POSITION", children: [_jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Left", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "left", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Top", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "top", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Width", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "width", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Height", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "height", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding left", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "paddingLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding top", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "paddingTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding right", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "paddingRight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding bottom", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "paddingBottom", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), _jsxs(LineContainerComponent, { title: "TRANSFORMATION", closed: true, children: [_jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "ScaleX", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "scaleX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "ScaleY", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "scaleY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(SliderLineComponent, { lockObject: this.props.lockObject, label: "Rotation", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Transform center X", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Transform center Y", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), _jsxs(LineContainerComponent, { title: "FONT", closed: true, children: [_jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Family", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "fontFamily", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Size", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "fontSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Weight", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "fontWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Style", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "fontStyle", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), _jsxs(LineContainerComponent, { title: "SHADOWS", closed: true, children: [_jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Color", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Offset X", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Offset Y", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Blur", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "shadowBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })] }));
-    }
-}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { LineContainerComponent } from "../../../lines/lineContainerComponent.js";
+import { TextLineComponent } from "../../../lines/textLineComponent.js";
+import { Control } from "@babylonjs/gui/2D/controls/control.js";
+import { SliderLineComponent } from "../../../lines/sliderLineComponent.js";
+import { FloatLineComponent } from "../../../lines/floatLineComponent.js";
+import { TextInputLineComponent } from "../../../lines/textInputLineComponent.js";
+import { OptionsLineComponent } from "../../../lines/optionsLineComponent.js";
+import { makeTargetsProxy } from "../../../lines/targetsProxy.js";
+export class CommonControlPropertyGridComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    renderGridInformation(control) {
+        if (!control.parent) {
+            return null;
+        }
+        const gridParent = control.parent;
+        if (gridParent.rowCount === undefined) {
+            return null;
+        }
+        const grid = gridParent;
+        const childCellInfo = grid.getChildCellInfo(control);
+        if (childCellInfo === undefined) {
+            return null;
+        }
+        const cellInfos = childCellInfo.split(":");
+        return (_jsxs(LineContainerComponent, { title: "GRID", children: [_jsx(TextLineComponent, { label: "Row", value: cellInfos[0] }), _jsx(TextLineComponent, { label: "Column", value: cellInfos[1] })] }));
+    }
+    render() {
+        let controls;
+        if (this.props.controls) {
+            controls = this.props.controls;
+        }
+        else if (this.props.control) {
+            controls = [this.props.control];
+        }
+        else {
+            return;
+        }
+        const control = controls[0];
+        const horizontalOptions = [
+            { label: "Left", value: Control.HORIZONTAL_ALIGNMENT_LEFT },
+            { label: "Right", value: Control.HORIZONTAL_ALIGNMENT_RIGHT },
+            { label: "Center", value: Control.HORIZONTAL_ALIGNMENT_CENTER },
+        ];
+        const verticalOptions = [
+            { label: "Top", value: Control.VERTICAL_ALIGNMENT_TOP },
+            { label: "Bottom", value: Control.VERTICAL_ALIGNMENT_BOTTOM },
+            { label: "Center", value: Control.VERTICAL_ALIGNMENT_CENTER },
+        ];
+        return (_jsxs("div", { children: [_jsxs(LineContainerComponent, { title: "GENERAL", children: [_jsx(TextLineComponent, { label: "Class", value: control.getClassName() }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Name", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "name", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextLineComponent, { label: "Unique ID", value: control.uniqueId.toString() }), _jsx(SliderLineComponent, { lockObject: this.props.lockObject, label: "Alpha", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), control.color !== undefined && (_jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Color", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), control.background !== undefined && (_jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Background", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "ZIndex", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "zIndex", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), this.renderGridInformation(control), _jsxs(LineContainerComponent, { title: "ALIGNMENT", children: [_jsx(OptionsLineComponent, { label: "Horizontal", options: horizontalOptions, target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "horizontalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(OptionsLineComponent, { label: "Vertical", options: verticalOptions, target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "verticalAlignment", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), _jsxs(LineContainerComponent, { title: "POSITION", children: [_jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Left", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "left", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Top", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "top", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Width", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "width", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Height", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "height", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding left", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "paddingLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding top", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "paddingTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding right", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "paddingRight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Padding bottom", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "paddingBottom", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), _jsxs(LineContainerComponent, { title: "TRANSFORMATION", closed: true, children: [_jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "ScaleX", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "scaleX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "ScaleY", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "scaleY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(SliderLineComponent, { lockObject: this.props.lockObject, label: "Rotation", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Transform center X", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Transform center Y", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), _jsxs(LineContainerComponent, { title: "FONT", closed: true, children: [_jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Family", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "fontFamily", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Size", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "fontSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Weight", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "fontWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Style", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "fontStyle", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), _jsxs(LineContainerComponent, { title: "SHADOWS", closed: true, children: [_jsx(TextInputLineComponent, { lockObject: this.props.lockObject, label: "Color", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Offset X", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Offset Y", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetY", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), _jsx(FloatLineComponent, { lockObject: this.props.lockObject, label: "Blur", target: makeTargetsProxy(controls, this.props.onPropertyChangedObservable), propertyName: "shadowBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })] }));
+    }
+}
 //# sourceMappingURL=commonControlPropertyGridComponent.js.map

package/tabs/propertyGrids/gui/controlPropertyGridComponent.d.ts

@@ -1,15 +1,15 @@
-import * as React from "react";
-import type { Observable } from "@babylonjs/core/Misc/observable.js";
-import type { PropertyChangedEvent } from "../../../propertyChangedEvent";
-import type { Control } from "@babylonjs/gui/2D/controls/control.js";
-import type { LockObject } from "../../../tabs/propertyGrids/lockObject";
-interface IControlPropertyGridComponentProps {
-    control: Control;
-    lockObject: LockObject;
-    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
-}
-export declare class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> {
-    constructor(props: IControlPropertyGridComponentProps);
-    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 { Control } from "@babylonjs/gui/2D/controls/control.js";
+import type { LockObject } from "../../../tabs/propertyGrids/lockObject";
+interface IControlPropertyGridComponentProps {
+    control: Control;
+    lockObject: LockObject;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+}
+export declare class ControlPropertyGridComponent extends React.Component<IControlPropertyGridComponentProps> {
+    constructor(props: IControlPropertyGridComponentProps);
+    render(): JSX.Element;
+}
+export {};

package/tabs/propertyGrids/gui/controlPropertyGridComponent.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { CommonControlPropertyGridComponent } from "../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent.js";
-export class ControlPropertyGridComponent extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        const control = this.props.control;
-        return (_jsx("div", { className: "pane", children: _jsx(CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, control: control, onPropertyChangedObservable: this.props.onPropertyChangedObservable }) }));
-    }
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { CommonControlPropertyGridComponent } from "../../../tabs/propertyGrids/gui/commonControlPropertyGridComponent.js";
+export class ControlPropertyGridComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const control = this.props.control;
+        return (_jsx("div", { className: "pane", children: _jsx(CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, control: control, onPropertyChangedObservable: this.props.onPropertyChangedObservable }) }));
+    }
+}
 //# sourceMappingURL=controlPropertyGridComponent.js.map