@babylonjs/shared-ui-components 5.28.0

package/lines/indentedTextLineComponent.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+interface IIndentedTextLineComponentProps {
+    value?: string;
+    color?: string;
+    underline?: boolean;
+    onLink?: () => void;
+    url?: string;
+    additionalClass?: string;
+}
+export declare class IndentedTextLineComponent extends React.Component<IIndentedTextLineComponentProps> {
+    constructor(props: IIndentedTextLineComponentProps);
+    onLink(): void;
+    renderContent(): JSX.Element;
+    render(): JSX.Element;
+}
+export {};

package/lines/indentedTextLineComponent.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export class IndentedTextLineComponent 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.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() {
+        return (_jsx("div", { className: "indented " + (this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : "")), children: this.renderContent() }));
+    }
+}
+//# sourceMappingURL=indentedTextLineComponent.js.map

package/lines/indentedTextLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"indentedTextLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/indentedTextLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,OAAO,yBAA0B,SAAQ,KAAK,CAAC,SAA0C;IAC3F,YAAY,KAAsC;QAC9C,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAChB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;YACtC,OAAO;SACV;QACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACpB,OAAO;SACV;QAED,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;IACxB,CAAC;IAED,aAAa;QACT,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YACrC,OAAO,CACH,cAAK,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,YAC5E,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,GACrD,CACT,CAAC;SACL;QACD,OAAO,CACH,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,YACrG,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,SAAS,GAC5B,CACT,CAAC;IACN,CAAC;IAED,MAAM;QACF,OAAO,CACH,cAAK,SAAS,EAAE,WAAW,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,YAC1J,IAAI,CAAC,aAAa,EAAE,GACnB,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\n\r\ninterface IIndentedTextLineComponentProps {\r\n    value?: string;\r\n    color?: string;\r\n    underline?: boolean;\r\n    onLink?: () => void;\r\n    url?: string;\r\n    additionalClass?: string;\r\n}\r\n\r\nexport class IndentedTextLineComponent extends React.Component<IIndentedTextLineComponentProps> {\r\n    constructor(props: IIndentedTextLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    onLink() {\r\n        if (this.props.url) {\r\n            window.open(this.props.url, \"_blank\");\r\n            return;\r\n        }\r\n        if (!this.props.onLink) {\r\n            return;\r\n        }\r\n\r\n        this.props.onLink();\r\n    }\r\n\r\n    renderContent() {\r\n        if (this.props.onLink || this.props.url) {\r\n            return (\r\n                <div className=\"link-value\" title={this.props.value} onClick={() => this.onLink()}>\r\n                    {this.props.url ? \"doc\" : this.props.value || \"no name\"}\r\n                </div>\r\n            );\r\n        }\r\n        return (\r\n            <div className=\"value\" title={this.props.value} style={{ color: this.props.color ? this.props.color : \"\" }}>\r\n                {this.props.value || \"no name\"}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className={\"indented \" + (this.props.underline ? \"textLine underline\" : \"textLine\" + (this.props.additionalClass ? \" \" + this.props.additionalClass : \"\"))}>\r\n                {this.renderContent()}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/inputArrowsComponent.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+interface IInputArrowsComponentProps {
+    incrementValue: (amount: number) => void;
+    setDragging: (dragging: boolean) => void;
+}
+export declare class InputArrowsComponent extends React.Component<IInputArrowsComponentProps> {
+    private _arrowsRef;
+    private _drag;
+    private _releaseListener;
+    private _lockChangeListener;
+    render(): JSX.Element;
+}
+export {};

package/lines/inputArrowsComponent.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import upArrowIcon from "./valueUpArrowIcon.svg";
+import downArrowIcon from "./valueDownArrowIcon.svg";
+export class InputArrowsComponent extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._arrowsRef = React.createRef();
+        this._drag = (event) => {
+            this.props.incrementValue(-event.movementY);
+        };
+        this._releaseListener = () => {
+            var _a, _b, _c, _d;
+            this.props.setDragging(false);
+            (_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.exitPointerLock();
+            (_b = this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.defaultView.removeEventListener("pointerup", this._releaseListener);
+            (_c = this._arrowsRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument.removeEventListener("pointerlockchange", this._lockChangeListener);
+            (_d = this._arrowsRef.current) === null || _d === void 0 ? void 0 : _d.ownerDocument.defaultView.removeEventListener("mousemove", this._drag);
+        };
+        this._lockChangeListener = () => {
+            var _a;
+            if (((_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.pointerLockElement) !== this._arrowsRef.current) {
+                this._releaseListener();
+            }
+        };
+    }
+    render() {
+        return (_jsxs("div", { className: "arrows", ref: this._arrowsRef, onPointerDown: () => {
+                var _a, _b, _c, _d;
+                (_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.addEventListener("pointerlockchange", this._lockChangeListener);
+                (_b = this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.defaultView.addEventListener("pointerup", this._releaseListener);
+                (_c = this._arrowsRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument.defaultView.addEventListener("mousemove", this._drag);
+                this.props.setDragging(true);
+                (_d = this._arrowsRef.current) === null || _d === void 0 ? void 0 : _d.requestPointerLock();
+            }, onDragStart: (evt) => evt.preventDefault(), children: [_jsx("img", { className: "upArrowIcon", src: upArrowIcon, alt: "Increase Value" }), _jsx("img", { className: "downArrowIcon", src: downArrowIcon, alt: "Increase Value" })] }));
+    }
+}
+//# sourceMappingURL=inputArrowsComponent.js.map

package/lines/inputArrowsComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inputArrowsComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/inputArrowsComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,WAAW,MAAM,wBAAwB,CAAC;AACjD,OAAO,aAAa,MAAM,0BAA0B,CAAC;AAOrD,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAqC;IAArF;;QACY,eAAU,GAAG,KAAK,CAAC,SAAS,EAAkB,CAAC;QAC/C,UAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;YAClC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAChD,CAAC,CAAC;QACM,qBAAgB,GAAG,GAAG,EAAE;;YAC5B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;YAC9B,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,eAAe,EAAE,CAAC;YACzD,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,WAAW,CAAE,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;YAC5G,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;YAC1G,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,WAAW,CAAE,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACrG,CAAC,CAAC;QACM,wBAAmB,GAAG,GAAG,EAAE;;YAC/B,IAAI,CAAA,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,kBAAkB,MAAK,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE;gBACvF,IAAI,CAAC,gBAAgB,EAAE,CAAC;aAC3B;QACL,CAAC,CAAC;IAqBN,CAAC;IAnBG,MAAM;QACF,OAAO,CACH,eACI,SAAS,EAAC,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,UAAU,EACpB,aAAa,EAAE,GAAG,EAAE;;gBAChB,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;gBACvG,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,WAAW,CAAE,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;gBACzG,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,aAAa,CAAC,WAAW,CAAE,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC9F,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;gBAC7B,MAAA,IAAI,CAAC,UAAU,CAAC,OAAO,0CAAE,kBAAkB,EAAE,CAAC;YAClD,CAAC,EACD,WAAW,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,cAAc,EAAE,aAE1C,cAAK,SAAS,EAAC,aAAa,EAAC,GAAG,EAAE,WAAW,EAAE,GAAG,EAAC,gBAAgB,GAAG,EACtE,cAAK,SAAS,EAAC,eAAe,EAAC,GAAG,EAAE,aAAa,EAAE,GAAG,EAAC,gBAAgB,GAAG,IACxE,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\n\r\nimport upArrowIcon from \"./valueUpArrowIcon.svg\";\r\nimport downArrowIcon from \"./valueDownArrowIcon.svg\";\r\n\r\ninterface IInputArrowsComponentProps {\r\n    incrementValue: (amount: number) => void;\r\n    setDragging: (dragging: boolean) => void;\r\n}\r\n\r\nexport class InputArrowsComponent extends React.Component<IInputArrowsComponentProps> {\r\n    private _arrowsRef = React.createRef<HTMLDivElement>();\r\n    private _drag = (event: MouseEvent) => {\r\n        this.props.incrementValue(-event.movementY);\r\n    };\r\n    private _releaseListener = () => {\r\n        this.props.setDragging(false);\r\n        this._arrowsRef.current?.ownerDocument.exitPointerLock();\r\n        this._arrowsRef.current?.ownerDocument.defaultView!.removeEventListener(\"pointerup\", this._releaseListener);\r\n        this._arrowsRef.current?.ownerDocument.removeEventListener(\"pointerlockchange\", this._lockChangeListener);\r\n        this._arrowsRef.current?.ownerDocument.defaultView!.removeEventListener(\"mousemove\", this._drag);\r\n    };\r\n    private _lockChangeListener = () => {\r\n        if (this._arrowsRef.current?.ownerDocument.pointerLockElement !== this._arrowsRef.current) {\r\n            this._releaseListener();\r\n        }\r\n    };\r\n\r\n    render() {\r\n        return (\r\n            <div\r\n                className=\"arrows\"\r\n                ref={this._arrowsRef}\r\n                onPointerDown={() => {\r\n                    this._arrowsRef.current?.ownerDocument.addEventListener(\"pointerlockchange\", this._lockChangeListener);\r\n                    this._arrowsRef.current?.ownerDocument.defaultView!.addEventListener(\"pointerup\", this._releaseListener);\r\n                    this._arrowsRef.current?.ownerDocument.defaultView!.addEventListener(\"mousemove\", this._drag);\r\n                    this.props.setDragging(true);\r\n                    this._arrowsRef.current?.requestPointerLock();\r\n                }}\r\n                onDragStart={(evt) => evt.preventDefault()}\r\n            >\r\n                <img className=\"upArrowIcon\" src={upArrowIcon} alt=\"Increase Value\" />\r\n                <img className=\"downArrowIcon\" src={downArrowIcon} alt=\"Increase Value\" />\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/lineContainerComponent.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { ISelectedLineContainer } from "./iSelectedLineContainer";
+interface ILineContainerComponentProps {
+    selection?: ISelectedLineContainer;
+    title: string;
+    children: any[] | any;
+    closed?: boolean;
+}
+export declare class LineContainerComponent extends React.Component<ILineContainerComponentProps, {
+    isExpanded: boolean;
+    isHighlighted: boolean;
+}> {
+    constructor(props: ILineContainerComponentProps);
+    switchExpandedState(): void;
+    renderHeader(): JSX.Element;
+    componentDidMount(): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/lineContainerComponent.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { DataStorage } from "@babylonjs/core/Misc/dataStorage.js";
+import downArrow from "./downArrow.svg";
+export class LineContainerComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);
+        this.state = { isExpanded: initialState, isHighlighted: false };
+    }
+    switchExpandedState() {
+        const newState = !this.state.isExpanded;
+        DataStorage.WriteBoolean(this.props.title, newState);
+        this.setState({ isExpanded: newState });
+    }
+    renderHeader() {
+        const className = this.state.isExpanded ? "collapse" : "collapse closed";
+        return (_jsxs("div", { className: "header", onClick: () => this.switchExpandedState(), children: [_jsx("div", { className: "title", children: this.props.title }), _jsx("div", { className: className, children: _jsx("img", { className: "img", title: this.props.title, src: downArrow }) })] }));
+    }
+    componentDidMount() {
+        if (!this.props.selection) {
+            return;
+        }
+        if (this.props.selection.selectedLineContainerTitles.length === 0 && this.props.selection.selectedLineContainerTitlesNoFocus.length === 0) {
+            return;
+        }
+        if (this.props.selection.selectedLineContainerTitles.indexOf(this.props.title) > -1) {
+            setTimeout(() => {
+                this.props.selection.selectedLineContainerTitles = [];
+            });
+            this.setState({ isExpanded: true, isHighlighted: true });
+            window.setTimeout(() => {
+                this.setState({ isHighlighted: false });
+            }, 5000);
+        }
+        else if (this.props.selection.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {
+            this.setState({ isExpanded: true, isHighlighted: false });
+        }
+        else {
+            this.setState({ isExpanded: false });
+        }
+    }
+    render() {
+        if (!this.state.isExpanded) {
+            return (_jsx("div", { className: "paneContainer", children: _jsx("div", { className: "paneContainer-content", children: this.renderHeader() }) }));
+        }
+        return (_jsxs("div", { className: "paneContainer", children: [_jsxs("div", { className: "paneContainer-content", children: [this.renderHeader(), _jsx("div", { className: "paneList", children: this.props.children })] }), _jsx("div", { className: "paneContainer-highlight-border" + (!this.state.isHighlighted ? " transparent" : "") })] }));
+    }
+}
+//# sourceMappingURL=lineContainerComponent.js.map

package/lines/lineContainerComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lineContainerComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/lineContainerComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { DataStorage } from \"core/Misc/dataStorage\";\r\nimport type { ISelectedLineContainer } from \"./iSelectedLineContainer\";\r\nimport downArrow from \"./downArrow.svg\";\r\n\r\ninterface ILineContainerComponentProps {\r\n    selection?: ISelectedLineContainer;\r\n    title: string;\r\n    children: any[] | any;\r\n    closed?: boolean;\r\n}\r\n\r\nexport class LineContainerComponent extends React.Component<ILineContainerComponentProps, { isExpanded: boolean; isHighlighted: boolean }> {\r\n    constructor(props: ILineContainerComponentProps) {\r\n        super(props);\r\n\r\n        const initialState = DataStorage.ReadBoolean(this.props.title, !this.props.closed);\r\n\r\n        this.state = { isExpanded: initialState, isHighlighted: false };\r\n    }\r\n\r\n    switchExpandedState(): void {\r\n        const newState = !this.state.isExpanded;\r\n\r\n        DataStorage.WriteBoolean(this.props.title, newState);\r\n\r\n        this.setState({ isExpanded: newState });\r\n    }\r\n\r\n    renderHeader() {\r\n        const className = this.state.isExpanded ? \"collapse\" : \"collapse closed\";\r\n\r\n        return (\r\n            <div className=\"header\" onClick={() => this.switchExpandedState()}>\r\n                <div className=\"title\">{this.props.title}</div>\r\n                <div className={className}>\r\n                    <img className=\"img\" title={this.props.title} src={downArrow} />\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n\r\n    componentDidMount() {\r\n        if (!this.props.selection) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.length === 0 && this.props.selection.selectedLineContainerTitlesNoFocus.length === 0) {\r\n            return;\r\n        }\r\n\r\n        if (this.props.selection.selectedLineContainerTitles.indexOf(this.props.title) > -1) {\r\n            setTimeout(() => {\r\n                this.props.selection!.selectedLineContainerTitles = [];\r\n            });\r\n\r\n            this.setState({ isExpanded: true, isHighlighted: true });\r\n\r\n            window.setTimeout(() => {\r\n                this.setState({ isHighlighted: false });\r\n            }, 5000);\r\n        } else if (this.props.selection.selectedLineContainerTitlesNoFocus.indexOf(this.props.title) > -1) {\r\n            this.setState({ isExpanded: true, isHighlighted: false });\r\n        } else {\r\n            this.setState({ isExpanded: false });\r\n        }\r\n    }\r\n\r\n    render() {\r\n        if (!this.state.isExpanded) {\r\n            return (\r\n                <div className=\"paneContainer\">\r\n                    <div className=\"paneContainer-content\">{this.renderHeader()}</div>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        return (\r\n            <div className=\"paneContainer\">\r\n                <div className=\"paneContainer-content\">\r\n                    {this.renderHeader()}\r\n                    <div className=\"paneList\">{this.props.children}</div>\r\n                </div>\r\n                <div className={\"paneContainer-highlight-border\" + (!this.state.isHighlighted ? \" transparent\" : \"\")}></div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/linkButtonComponent.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { IconProp } from "@fortawesome/fontawesome-svg-core";
+interface ILinkButtonComponentProps {
+    label: string;
+    buttonLabel: string;
+    url?: string;
+    onClick: () => void;
+    icon?: IconProp;
+    onIconClick?: () => void;
+}
+export declare class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {
+    constructor(props: ILinkButtonComponentProps);
+    onLink(): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/linkButtonComponent.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+export class LinkButtonComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    onLink() {
+        if (this.props.url) {
+            window.open(this.props.url, "_blank");
+        }
+    }
+    render() {
+        return (_jsxs("div", { className: "linkButtonLine", children: [_jsx("div", { className: "link", title: this.props.label, onClick: () => this.onLink(), children: this.props.label }), _jsx("div", { className: "link-button", children: _jsx("button", { onClick: () => this.props.onClick(), children: this.props.buttonLabel }) }), this.props.icon && (_jsx("div", { className: "link-icon hoverIcon", onClick: () => {
+                        if (this.props.onIconClick) {
+                            this.props.onIconClick();
+                        }
+                    }, children: _jsx(FontAwesomeIcon, { icon: this.props.icon }) }))] }));
+    }
+}
+//# sourceMappingURL=linkButtonComponent.js.map

package/lines/linkButtonComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkButtonComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/linkButtonComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAWjE,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IAC/E,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAChB,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;SACzC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,eAAK,SAAS,EAAE,gBAAgB,aAC5B,cAAK,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,YACtE,IAAI,CAAC,KAAK,CAAC,KAAK,GACf,EACN,cAAK,SAAS,EAAC,aAAa,YACxB,iBAAQ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,YAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAU,GAC5E,EACL,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAChB,cACI,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,GAAG,EAAE;wBACV,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;4BACxB,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;yBAC5B;oBACL,CAAC,YAED,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,GACxC,CACT,IACC,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n\r\ninterface ILinkButtonComponentProps {\r\n    label: string;\r\n    buttonLabel: string;\r\n    url?: string;\r\n    onClick: () => void;\r\n    icon?: IconProp;\r\n    onIconClick?: () => void;\r\n}\r\n\r\nexport class LinkButtonComponent extends React.Component<ILinkButtonComponentProps> {\r\n    constructor(props: ILinkButtonComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    onLink() {\r\n        if (this.props.url) {\r\n            window.open(this.props.url, \"_blank\");\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className={\"linkButtonLine\"}>\r\n                <div className=\"link\" title={this.props.label} onClick={() => this.onLink()}>\r\n                    {this.props.label}\r\n                </div>\r\n                <div className=\"link-button\">\r\n                    <button onClick={() => this.props.onClick()}>{this.props.buttonLabel}</button>\r\n                </div>\r\n                {this.props.icon && (\r\n                    <div\r\n                        className=\"link-icon hoverIcon\"\r\n                        onClick={() => {\r\n                            if (this.props.onIconClick) {\r\n                                this.props.onIconClick();\r\n                            }\r\n                        }}\r\n                    >\r\n                        <FontAwesomeIcon icon={this.props.icon} />\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/matrixLineComponent.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import type { Vector3, Vector4 } from "@babylonjs/core/Maths/math.vector.js";
+import { Matrix } 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 IMatrixLineComponentProps {
+    label: string;
+    target: any;
+    propertyName: string;
+    step?: number;
+    onChange?: (newValue: Matrix) => void;
+    onModeChange?: (mode: number) => void;
+    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;
+    mode?: number;
+    lockObject: LockObject;
+}
+export declare class MatrixLineComponent extends React.Component<IMatrixLineComponentProps, {
+    value: Matrix;
+    mode: number;
+    angle: number;
+}> {
+    private _localChange;
+    constructor(props: IMatrixLineComponentProps);
+    shouldComponentUpdate(nextProps: IMatrixLineComponentProps, nextState: {
+        value: Matrix;
+        mode: number;
+        angle: number;
+    }): boolean;
+    raiseOnPropertyChanged(previousValue: Vector3): void;
+    updateMatrix(): void;
+    updateRow(value: Vector4, row: number): void;
+    updateBasedOnMode(value: number): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/matrixLineComponent.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Matrix, Quaternion } from "@babylonjs/core/Maths/math.vector.js";
+import { Vector4LineComponent } from "./vector4LineComponent.js";
+import { OptionsLineComponent } from "./optionsLineComponent.js";
+import { SliderLineComponent } from "./sliderLineComponent.js";
+export class MatrixLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        const matrix = this.props.target[this.props.propertyName].clone();
+        let angle = 0;
+        if (this.props.mode) {
+            const quat = new Quaternion();
+            matrix.decompose(undefined, quat);
+            const euler = quat.toEulerAngles();
+            switch (this.props.mode) {
+                case 1:
+                    angle = euler.x;
+                    break;
+                case 2:
+                    angle = euler.y;
+                    break;
+                case 3:
+                    angle = euler.z;
+                    break;
+            }
+        }
+        this.state = { value: matrix, mode: this.props.mode || 0, angle: angle };
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const nextPropsValue = nextProps.target[nextProps.propertyName];
+        if (!nextPropsValue.equals(nextState.value) || this._localChange) {
+            nextState.value = nextPropsValue.clone();
+            this._localChange = false;
+            return true;
+        }
+        return nextState.mode !== this.state.mode || nextState.angle !== this.state.angle;
+    }
+    raiseOnPropertyChanged(previousValue) {
+        if (this.props.onChange) {
+            this.props.onChange(this.state.value);
+        }
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: this.props.target,
+            property: this.props.propertyName,
+            value: this.state.value,
+            initialValue: previousValue,
+        });
+    }
+    updateMatrix() {
+        const store = this.props.target[this.props.propertyName].clone();
+        this.props.target[this.props.propertyName] = this.state.value;
+        this.setState({ value: store });
+        this.raiseOnPropertyChanged(store);
+    }
+    updateRow(value, row) {
+        this._localChange = true;
+        this.state.value.setRow(row, value);
+        this.updateMatrix();
+    }
+    updateBasedOnMode(value) {
+        switch (this.state.mode) {
+            case 1: {
+                Matrix.RotationXToRef(this.state.angle, this.state.value);
+                break;
+            }
+            case 2: {
+                Matrix.RotationYToRef(this.state.angle, this.state.value);
+                break;
+            }
+            case 3: {
+                Matrix.RotationZToRef(this.state.angle, this.state.value);
+                break;
+            }
+        }
+        this.updateMatrix();
+        this.setState({ angle: value });
+    }
+    render() {
+        const modeOptions = [
+            { label: "User-defined", value: 0 },
+            { label: "Rotation over X axis", value: 1 },
+            { label: "Rotation over Y axis", value: 2 },
+            { label: "Rotation over Z axis", value: 3 },
+        ];
+        return (_jsxs("div", { className: "vector3Line", children: [_jsx("div", { className: "firstLine", children: _jsx("div", { className: "label", title: this.props.label, children: this.props.label }) }), _jsx("div", { className: "secondLine", children: _jsx(OptionsLineComponent, { label: "Mode", className: "no-right-margin", options: modeOptions, target: this, noDirectUpdate: true, propertyName: "", extractValue: () => {
+                            return this.state.mode;
+                        }, onSelect: (value) => {
+                            this.props.target[this.props.propertyName] = Matrix.Identity();
+                            Matrix.IdentityToRef(this.state.value);
+                            this.setState({ mode: value, angle: 0 });
+                            this.updateMatrix();
+                            if (this.props.onModeChange) {
+                                this.props.onModeChange(value);
+                            }
+                        } }) }), this.state.mode === 0 && (_jsxs("div", { className: "secondLine", children: [_jsx(Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #0", value: this.state.value.getRow(0), onChange: (value) => this.updateRow(value, 0) }), _jsx(Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #1", value: this.state.value.getRow(1), onChange: (value) => this.updateRow(value, 1) }), _jsx(Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #2", value: this.state.value.getRow(2), onChange: (value) => this.updateRow(value, 2) }), _jsx(Vector4LineComponent, { lockObject: this.props.lockObject, label: "Row #3", value: this.state.value.getRow(3), onChange: (value) => this.updateRow(value, 3) })] })), this.state.mode !== 0 && (_jsx("div", { className: "secondLine", children: _jsx(SliderLineComponent, { label: "Angle", lockObject: this.props.lockObject, minimum: 0, maximum: 2 * Math.PI, useEuler: true, step: 0.1, directValue: this.state.angle, onChange: (value) => this.updateBasedOnMode(value) }) }))] }));
+    }
+}
+//# sourceMappingURL=matrixLineComponent.js.map

package/lines/matrixLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"matrixLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/matrixLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Vector3, Vector4 } from \"core/Maths/math.vector\";\r\nimport { Matrix, Quaternion } from \"core/Maths/math.vector\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport { Vector4LineComponent } from \"./vector4LineComponent\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport { OptionsLineComponent } from \"./optionsLineComponent\";\r\nimport { SliderLineComponent } from \"./sliderLineComponent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface IMatrixLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    step?: number;\r\n    onChange?: (newValue: Matrix) => void;\r\n    onModeChange?: (mode: number) => void;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    mode?: number;\r\n    lockObject: LockObject;\r\n}\r\n\r\nexport class MatrixLineComponent extends React.Component<IMatrixLineComponentProps, { value: Matrix; mode: number; angle: number }> {\r\n    private _localChange = false;\r\n\r\n    constructor(props: IMatrixLineComponentProps) {\r\n        super(props);\r\n\r\n        const matrix: Matrix = this.props.target[this.props.propertyName].clone();\r\n\r\n        let angle = 0;\r\n\r\n        if (this.props.mode) {\r\n            const quat = new Quaternion();\r\n            matrix.decompose(undefined, quat);\r\n\r\n            const euler = quat.toEulerAngles();\r\n\r\n            switch (this.props.mode) {\r\n                case 1:\r\n                    angle = euler.x;\r\n                    break;\r\n                case 2:\r\n                    angle = euler.y;\r\n                    break;\r\n                case 3:\r\n                    angle = euler.z;\r\n                    break;\r\n            }\r\n        }\r\n\r\n        this.state = { value: matrix, mode: this.props.mode || 0, angle: angle };\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IMatrixLineComponentProps, nextState: { value: Matrix; mode: number; angle: number }) {\r\n        const nextPropsValue = nextProps.target[nextProps.propertyName];\r\n\r\n        if (!nextPropsValue.equals(nextState.value) || this._localChange) {\r\n            nextState.value = nextPropsValue.clone();\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n        return nextState.mode !== this.state.mode || nextState.angle !== this.state.angle;\r\n    }\r\n\r\n    raiseOnPropertyChanged(previousValue: Vector3) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(this.state.value);\r\n        }\r\n\r\n        if (!this.props.onPropertyChangedObservable) {\r\n            return;\r\n        }\r\n        this.props.onPropertyChangedObservable.notifyObservers({\r\n            object: this.props.target,\r\n            property: this.props.propertyName,\r\n            value: this.state.value,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    updateMatrix() {\r\n        const store = this.props.target[this.props.propertyName].clone();\r\n        this.props.target[this.props.propertyName] = this.state.value;\r\n\r\n        this.setState({ value: store });\r\n\r\n        this.raiseOnPropertyChanged(store);\r\n    }\r\n\r\n    updateRow(value: Vector4, row: number) {\r\n        this._localChange = true;\r\n\r\n        this.state.value.setRow(row, value);\r\n        this.updateMatrix();\r\n    }\r\n\r\n    updateBasedOnMode(value: number) {\r\n        switch (this.state.mode) {\r\n            case 1: {\r\n                Matrix.RotationXToRef(this.state.angle, this.state.value);\r\n                break;\r\n            }\r\n            case 2: {\r\n                Matrix.RotationYToRef(this.state.angle, this.state.value);\r\n                break;\r\n            }\r\n            case 3: {\r\n                Matrix.RotationZToRef(this.state.angle, this.state.value);\r\n                break;\r\n            }\r\n        }\r\n        this.updateMatrix();\r\n\r\n        this.setState({ angle: value });\r\n    }\r\n\r\n    render() {\r\n        const modeOptions = [\r\n            { label: \"User-defined\", value: 0 },\r\n            { label: \"Rotation over X axis\", value: 1 },\r\n            { label: \"Rotation over Y axis\", value: 2 },\r\n            { label: \"Rotation over Z axis\", value: 3 },\r\n        ];\r\n\r\n        return (\r\n            <div className=\"vector3Line\">\r\n                <div className=\"firstLine\">\r\n                    <div className=\"label\" title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                </div>\r\n                <div className=\"secondLine\">\r\n                    <OptionsLineComponent\r\n                        label=\"Mode\"\r\n                        className=\"no-right-margin\"\r\n                        options={modeOptions}\r\n                        target={this}\r\n                        noDirectUpdate={true}\r\n                        propertyName={\"\"}\r\n                        extractValue={() => {\r\n                            return this.state.mode;\r\n                        }}\r\n                        onSelect={(value: any) => {\r\n                            this.props.target[this.props.propertyName] = Matrix.Identity();\r\n                            Matrix.IdentityToRef(this.state.value);\r\n                            this.setState({ mode: value, angle: 0 });\r\n\r\n                            this.updateMatrix();\r\n\r\n                            if (this.props.onModeChange) {\r\n                                this.props.onModeChange(value);\r\n                            }\r\n                        }}\r\n                    />\r\n                </div>\r\n                {this.state.mode === 0 && (\r\n                    <div className=\"secondLine\">\r\n                        <Vector4LineComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"Row #0\"\r\n                            value={this.state.value.getRow(0)!}\r\n                            onChange={(value) => this.updateRow(value, 0)}\r\n                        />\r\n                        <Vector4LineComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"Row #1\"\r\n                            value={this.state.value.getRow(1)!}\r\n                            onChange={(value) => this.updateRow(value, 1)}\r\n                        />\r\n                        <Vector4LineComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"Row #2\"\r\n                            value={this.state.value.getRow(2)!}\r\n                            onChange={(value) => this.updateRow(value, 2)}\r\n                        />\r\n                        <Vector4LineComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"Row #3\"\r\n                            value={this.state.value.getRow(3)!}\r\n                            onChange={(value) => this.updateRow(value, 3)}\r\n                        />\r\n                    </div>\r\n                )}\r\n                {this.state.mode !== 0 && (\r\n                    <div className=\"secondLine\">\r\n                        <SliderLineComponent\r\n                            label=\"Angle\"\r\n                            lockObject={this.props.lockObject}\r\n                            minimum={0}\r\n                            maximum={2 * Math.PI}\r\n                            useEuler={true}\r\n                            step={0.1}\r\n                            directValue={this.state.angle}\r\n                            onChange={(value) => this.updateBasedOnMode(value)}\r\n                        />\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/messageLineComponent.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import type { IconProp } from "@fortawesome/fontawesome-svg-core";
+interface IMessageLineComponentProps {
+    text: string;
+    color?: string;
+    icon?: IconProp;
+}
+export declare class MessageLineComponent extends React.Component<IMessageLineComponentProps> {
+    constructor(props: IMessageLineComponentProps);
+    render(): JSX.Element;
+}
+export {};

package/lines/messageLineComponent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+export class MessageLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        if (this.props.icon) {
+            return (_jsxs("div", { className: "iconMessageLine", children: [_jsx("div", { className: "icon", style: { color: this.props.color ? this.props.color : "" }, children: _jsx(FontAwesomeIcon, { icon: this.props.icon }) }), _jsx("div", { className: "value", title: this.props.text, children: this.props.text })] }));
+        }
+        return (_jsx("div", { className: "messageLine", children: _jsx("div", { className: "value", title: this.props.text, style: { color: this.props.color ? this.props.color : "" }, children: this.props.text }) }));
+    }
+}
+//# sourceMappingURL=messageLineComponent.js.map

package/lines/messageLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messageLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/messageLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAQjE,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAqC;IACjF,YAAY,KAAiC;QACzC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;YACjB,OAAO,CACH,eAAK,SAAS,EAAC,iBAAiB,aAC5B,cAAK,SAAS,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,YAC5E,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,GAAI,GACxC,EACN,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,YACxC,IAAI,CAAC,KAAK,CAAC,IAAI,GACd,IACJ,CACT,CAAC;SACL;QAED,OAAO,CACH,cAAK,SAAS,EAAC,aAAa,YACxB,cAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,YACpG,IAAI,CAAC,KAAK,CAAC,IAAI,GACd,GACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\n\r\ninterface IMessageLineComponentProps {\r\n    text: string;\r\n    color?: string;\r\n    icon?: IconProp;\r\n}\r\n\r\nexport class MessageLineComponent extends React.Component<IMessageLineComponentProps> {\r\n    constructor(props: IMessageLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    render() {\r\n        if (this.props.icon) {\r\n            return (\r\n                <div className=\"iconMessageLine\">\r\n                    <div className=\"icon\" style={{ color: this.props.color ? this.props.color : \"\" }}>\r\n                        <FontAwesomeIcon icon={this.props.icon} />\r\n                    </div>\r\n                    <div className=\"value\" title={this.props.text}>\r\n                        {this.props.text}\r\n                    </div>\r\n                </div>\r\n            );\r\n        }\r\n\r\n        return (\r\n            <div className=\"messageLine\">\r\n                <div className=\"value\" title={this.props.text} style={{ color: this.props.color ? this.props.color : \"\" }}>\r\n                    {this.props.text}\r\n                </div>\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/numericInputComponent.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import type { LockObject } from "../tabs/propertyGrids/lockObject";
+interface INumericInputComponentProps {
+    label: string;
+    value: number;
+    step?: number;
+    onChange: (value: number) => void;
+    precision?: number;
+    icon?: string;
+    iconLabel?: string;
+    lockObject: LockObject;
+}
+export declare class NumericInputComponent extends React.Component<INumericInputComponentProps, {
+    value: string;
+}> {
+    static defaultProps: {
+        step: number;
+    };
+    private _localChange;
+    constructor(props: INumericInputComponentProps);
+    componentWillUnmount(): void;
+    shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: {
+        value: string;
+    }): boolean;
+    updateValue(valueString: string): void;
+    onBlur(): void;
+    incrementValue(amount: number): void;
+    onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/numericInputComponent.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export class NumericInputComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        this.state = { value: this.props.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3) };
+    }
+    componentWillUnmount() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this._localChange) {
+            return true;
+        }
+        if (nextProps.value.toString() !== nextState.value) {
+            nextState.value = nextProps.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3);
+            return true;
+        }
+        return false;
+    }
+    updateValue(valueString) {
+        if (/[^0-9.-]/g.test(valueString)) {
+            return;
+        }
+        const valueAsNumber = parseFloat(valueString);
+        this._localChange = true;
+        this.setState({ value: valueString });
+        if (isNaN(valueAsNumber)) {
+            return;
+        }
+        this.props.onChange(valueAsNumber);
+    }
+    onBlur() {
+        this._localChange = false;
+        const valueAsNumber = parseFloat(this.state.value);
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+        if (isNaN(valueAsNumber)) {
+            this.props.onChange(this.props.value);
+            return;
+        }
+        this.props.onChange(valueAsNumber);
+    }
+    incrementValue(amount) {
+        let currentValue = parseFloat(this.state.value);
+        if (isNaN(currentValue)) {
+            currentValue = 0;
+        }
+        this.updateValue((currentValue + amount).toFixed(this.props.precision !== undefined ? this.props.precision : 3));
+    }
+    onKeyDown(evt) {
+        const step = this.props.step || 1;
+        const handleArrowKey = (sign) => {
+            if (evt.shiftKey) {
+                sign *= 10;
+                if (evt.ctrlKey || evt.metaKey) {
+                    sign *= 10;
+                }
+            }
+            this.incrementValue(sign * step);
+            evt.preventDefault();
+        };
+        if (evt.key === "ArrowUp") {
+            handleArrowKey(1);
+        }
+        else if (evt.key === "ArrowDown") {
+            handleArrowKey(-1);
+        }
+    }
+    render() {
+        return (_jsxs("div", { className: "numeric", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && (_jsx("div", { className: "numeric-label", title: this.props.label, children: `${this.props.label}: ` })), _jsx("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), onFocus: () => {
+                        if (this.props.lockObject) {
+                            this.props.lockObject.lock = true;
+                        }
+                    }, onBlur: () => this.onBlur() })] }));
+    }
+}
+// eslint-disable-next-line @typescript-eslint/naming-convention
+NumericInputComponent.defaultProps = {
+    step: 1,
+};
+//# sourceMappingURL=numericInputComponent.js.map

package/lines/numericInputComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numericInputComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/numericInputComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface INumericInputComponentProps {\r\n    label: string;\r\n    value: number;\r\n    step?: number;\r\n    onChange: (value: number) => void;\r\n    precision?: number;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    lockObject: LockObject;\r\n}\r\n\r\nexport class NumericInputComponent extends React.Component<INumericInputComponentProps, { value: string }> {\r\n    // eslint-disable-next-line @typescript-eslint/naming-convention\r\n    static defaultProps = {\r\n        step: 1,\r\n    };\r\n\r\n    private _localChange = false;\r\n    constructor(props: INumericInputComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { value: this.props.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3) };\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: INumericInputComponentProps, nextState: { value: string }) {\r\n        if (this._localChange) {\r\n            return true;\r\n        }\r\n\r\n        if (nextProps.value.toString() !== nextState.value) {\r\n            nextState.value = nextProps.value.toFixed(this.props.precision !== undefined ? this.props.precision : 3);\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    updateValue(valueString: string) {\r\n        if (/[^0-9.-]/g.test(valueString)) {\r\n            return;\r\n        }\r\n\r\n        const valueAsNumber = parseFloat(valueString);\r\n\r\n        this._localChange = true;\r\n        this.setState({ value: valueString });\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            return;\r\n        }\r\n\r\n        this.props.onChange(valueAsNumber);\r\n    }\r\n\r\n    onBlur() {\r\n        this._localChange = false;\r\n        const valueAsNumber = parseFloat(this.state.value);\r\n\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            this.props.onChange(this.props.value);\r\n            return;\r\n        }\r\n\r\n        this.props.onChange(valueAsNumber);\r\n    }\r\n\r\n    incrementValue(amount: number) {\r\n        let currentValue = parseFloat(this.state.value);\r\n        if (isNaN(currentValue)) {\r\n            currentValue = 0;\r\n        }\r\n        this.updateValue((currentValue + amount).toFixed(this.props.precision !== undefined ? this.props.precision : 3));\r\n    }\r\n\r\n    onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {\r\n        const step = this.props.step || 1;\r\n        const handleArrowKey = (sign: number) => {\r\n            if (evt.shiftKey) {\r\n                sign *= 10;\r\n                if (evt.ctrlKey || evt.metaKey) {\r\n                    sign *= 10;\r\n                }\r\n            }\r\n\r\n            this.incrementValue(sign * step);\r\n            evt.preventDefault();\r\n        };\r\n\r\n        if (evt.key === \"ArrowUp\") {\r\n            handleArrowKey(1);\r\n        } else if (evt.key === \"ArrowDown\") {\r\n            handleArrowKey(-1);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"numeric\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                {this.props.label && (\r\n                    <div className=\"numeric-label\" title={this.props.label}>\r\n                        {`${this.props.label}: `}\r\n                    </div>\r\n                )}\r\n                <input\r\n                    type=\"number\"\r\n                    step={this.props.step}\r\n                    className=\"numeric-input\"\r\n                    value={this.state.value}\r\n                    onChange={(evt) => this.updateValue(evt.target.value)}\r\n                    onKeyDown={(evt) => this.onKeyDown(evt)}\r\n                    onFocus={() => {\r\n                        if (this.props.lockObject) {\r\n                            this.props.lockObject.lock = true;\r\n                        }\r\n                    }}\r\n                    onBlur={() => this.onBlur()}\r\n                />\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}