@babylonjs/shared-ui-components 5.28.0

package/lines/fileButtonLineComponent.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+interface IFileButtonLineComponentProps {
+    label: string;
+    onClick: (file: File) => void;
+    accept: string;
+    icon?: string;
+    iconLabel?: string;
+}
+export declare class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
+    private static _IDGenerator;
+    private _id;
+    private _uploadInputRef;
+    constructor(props: IFileButtonLineComponentProps);
+    onChange(evt: any): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/fileButtonLineComponent.js

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

package/lines/fileButtonLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileButtonLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/fileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,OAAO,uBAAwB,SAAQ,KAAK,CAAC,SAAwC;IAKvF,YAAY,KAAoC;QAC5C,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,uBAAuB,CAAC,YAAY,EAAE,CAAC;QAKjD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;SAChC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACF,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,aACtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAI,IAC9I,CACT,CAAC;IACN,CAAC;;AA5Bc,oCAAY,GAAG,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\n\r\ninterface IFileButtonLineComponentProps {\r\n    label: string;\r\n    onClick: (file: File) => void;\r\n    accept: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {\r\n    private static _IDGenerator = 0;\r\n    private _id = FileButtonLineComponent._IDGenerator++;\r\n    private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n    constructor(props: IFileButtonLineComponentProps) {\r\n        super(props);\r\n        this._uploadInputRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            this.props.onClick(files[0]);\r\n        }\r\n\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"buttonLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n                    {this.props.label}\r\n                </label>\r\n                <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} />\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/fileMultipleButtonLineComponent.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+interface IFileMultipleButtonLineComponentProps {
+    label: string;
+    onClick: (event: any) => void;
+    accept: string;
+    icon?: string;
+    iconLabel?: string;
+}
+export declare class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {
+    private static _IDGenerator;
+    private _id;
+    private _uploadInputRef;
+    constructor(props: IFileMultipleButtonLineComponentProps);
+    onChange(evt: any): void;
+    render(): JSX.Element;
+}
+export {};

package/lines/fileMultipleButtonLineComponent.js

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

package/lines/fileMultipleButtonLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileMultipleButtonLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/fileMultipleButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,OAAO,+BAAgC,SAAQ,KAAK,CAAC,SAAgD;IAKvG,YAAY,KAA4C;QACpD,KAAK,CAAC,KAAK,CAAC,CAAC;QAJT,QAAG,GAAG,+BAA+B,CAAC,YAAY,EAAE,CAAC;QAKzD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IAC7C,CAAC;IAED,QAAQ,CAAC,GAAQ;QACb,MAAM,KAAK,GAAW,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC;QACvC,IAAI,KAAK,IAAI,KAAK,CAAC,MAAM,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;SAC3B;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACF,OAAO,CACH,eAAK,SAAS,EAAC,YAAY,aACtB,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAC,aAAa,YAC5D,IAAI,CAAC,KAAK,CAAC,KAAK,GACb,EACR,gBAAO,GAAG,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,EAAC,MAAM,EAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,QAAQ,SAAG,IACvJ,CACT,CAAC;IACN,CAAC;;AA5Bc,4CAAY,GAAG,CAAC,CAAC","sourcesContent":["import * as React from \"react\";\r\n\r\ninterface IFileMultipleButtonLineComponentProps {\r\n    label: string;\r\n    onClick: (event: any) => void;\r\n    accept: string;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class FileMultipleButtonLineComponent extends React.Component<IFileMultipleButtonLineComponentProps> {\r\n    private static _IDGenerator = 0;\r\n    private _id = FileMultipleButtonLineComponent._IDGenerator++;\r\n    private _uploadInputRef: React.RefObject<HTMLInputElement>;\r\n\r\n    constructor(props: IFileMultipleButtonLineComponentProps) {\r\n        super(props);\r\n        this._uploadInputRef = React.createRef();\r\n    }\r\n\r\n    onChange(evt: any) {\r\n        const files: File[] = evt.target.files;\r\n        if (files && files.length) {\r\n            this.props.onClick(evt);\r\n        }\r\n\r\n        evt.target.value = \"\";\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div className=\"buttonLine\">\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                <label htmlFor={\"file-upload\" + this._id} className=\"file-upload\">\r\n                    {this.props.label}\r\n                </label>\r\n                <input ref={this._uploadInputRef} id={\"file-upload\" + this._id} type=\"file\" accept={this.props.accept} onChange={(evt) => this.onChange(evt)} multiple />\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/floatLineComponent.d.ts

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

package/lines/floatLineComponent.js

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

package/lines/floatLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/floatLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\n\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { SliderLineComponent } from \"./sliderLineComponent\";\r\nimport { Tools } from \"core/Misc/tools\";\r\nimport { conflictingValuesPlaceholder } from \"./targetsProxy\";\r\nimport { InputArrowsComponent } from \"./inputArrowsComponent\";\r\n\r\ninterface IFloatLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    lockObject: LockObject;\r\n    onChange?: (newValue: number) => void;\r\n    isInteger?: boolean;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    additionalClass?: string;\r\n    step?: string;\r\n    digits?: number;\r\n    useEuler?: boolean;\r\n    min?: number;\r\n    max?: number;\r\n    smallUI?: boolean;\r\n    onEnter?: (newValue: number) => void;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    defaultValue?: number;\r\n    arrows?: boolean;\r\n    unit?: React.ReactNode;\r\n    onDragStart?: (newValue: number) => void;\r\n    onDragStop?: (newValue: number) => void;\r\n}\r\n\r\nexport class FloatLineComponent extends React.Component<IFloatLineComponentProps, { value: string; dragging: boolean }> {\r\n    private _localChange = false;\r\n    private _store: number;\r\n\r\n    constructor(props: IFloatLineComponentProps) {\r\n        super(props);\r\n\r\n        const currentValue = this.props.target[this.props.propertyName];\r\n        this.state = { value: this.getValueString(currentValue), dragging: false };\r\n        this._store = currentValue;\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        this.unlock();\r\n    }\r\n\r\n    getValueString(value: any): string {\r\n        if (value) {\r\n            if (value === conflictingValuesPlaceholder) {\r\n                return conflictingValuesPlaceholder;\r\n            } else if (this.props.isInteger) {\r\n                return value.toFixed(0);\r\n            } else {\r\n                return value.toFixed(this.props.digits || 4);\r\n            }\r\n        }\r\n        return \"0\";\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IFloatLineComponentProps, nextState: { value: string; dragging: boolean }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = nextProps.target[nextProps.propertyName];\r\n        const newValueString = this.getValueString(newValue);\r\n\r\n        if (newValueString !== nextState.value) {\r\n            nextState.value = newValueString;\r\n            return true;\r\n        }\r\n\r\n        if (nextState.dragging != this.state.dragging || nextProps.unit !== this.props.unit) {\r\n            return true;\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\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: newValue,\r\n            initialValue: previousValue,\r\n        });\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        let valueAsNumber: number;\r\n\r\n        if (this.props.isInteger) {\r\n            valueAsNumber = parseInt(valueString);\r\n        } else {\r\n            valueAsNumber = parseFloat(valueString);\r\n        }\r\n\r\n        if (!isNaN(valueAsNumber)) {\r\n            if (this.props.min !== undefined) {\r\n                if (valueAsNumber < this.props.min) {\r\n                    valueAsNumber = this.props.min;\r\n                    valueString = valueAsNumber.toString();\r\n                }\r\n            }\r\n            if (this.props.max !== undefined) {\r\n                if (valueAsNumber > this.props.max) {\r\n                    valueAsNumber = this.props.max;\r\n                    valueString = valueAsNumber.toString();\r\n                }\r\n            }\r\n        } else if (this.props.defaultValue != null) {\r\n            valueAsNumber = this.props.defaultValue;\r\n        }\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.target[this.props.propertyName] = valueAsNumber;\r\n        this.raiseOnPropertyChanged(valueAsNumber, this._store);\r\n\r\n        this._store = valueAsNumber;\r\n    }\r\n\r\n    lock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = true;\r\n        }\r\n    }\r\n\r\n    unlock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    incrementValue(amount: number, processStep: boolean = true) {\r\n        if (processStep && this.props.step) {\r\n            amount *= parseFloat(this.props.step);\r\n        }\r\n\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(2));\r\n    }\r\n\r\n    onKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\r\n        const step = parseFloat(this.props.step || this.props.isInteger ? \"1\" : \"0.01\");\r\n        const handleArrowKey = (sign: number) => {\r\n            if (event.shiftKey) {\r\n                sign *= 10;\r\n                if (event.ctrlKey || event.metaKey) {\r\n                    sign *= 10;\r\n                }\r\n            }\r\n\r\n            this.incrementValue(sign * step, false);\r\n            event.preventDefault();\r\n        };\r\n\r\n        if (event.key === \"ArrowUp\") {\r\n            handleArrowKey(1);\r\n        } else if (event.key === \"ArrowDown\") {\r\n            handleArrowKey(-1);\r\n        }\r\n        if (event.key === \"Enter\" && this.props.onEnter) {\r\n            this.props.onEnter(this._store);\r\n        }\r\n    }\r\n\r\n    render() {\r\n        let valueAsNumber: number;\r\n\r\n        if (this.props.isInteger) {\r\n            valueAsNumber = parseInt(this.state.value);\r\n        } else {\r\n            valueAsNumber = parseFloat(this.state.value);\r\n        }\r\n\r\n        let className = this.props.smallUI ? \"short\" : \"value\";\r\n        if (this.state.dragging) {\r\n            className += \" dragging\";\r\n        }\r\n        if (this.props.arrows) {\r\n            className += \" hasArrows\";\r\n        }\r\n\r\n        const value = this.state.value === conflictingValuesPlaceholder ? \"\" : this.state.value;\r\n        const placeholder = this.state.value === conflictingValuesPlaceholder ? conflictingValuesPlaceholder : \"\";\r\n        return (\r\n            <>\r\n                {!this.props.useEuler && (\r\n                    <div className={this.props.additionalClass ? this.props.additionalClass + \" floatLine\" : \"floatLine\"}>\r\n                        {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                        {(!this.props.icon || this.props.label != \"\") && (\r\n                            <div className=\"label\" title={this.props.label}>\r\n                                {this.props.label}\r\n                            </div>\r\n                        )}\r\n                        <div className={className}>\r\n                            <input\r\n                                type={\"number\"}\r\n                                step={this.props.step || this.props.isInteger ? \"1\" : \"0.01\"}\r\n                                className=\"numeric-input\"\r\n                                onKeyDown={(evt) => this.onKeyDown(evt)}\r\n                                value={value}\r\n                                onBlur={() => {\r\n                                    this.unlock();\r\n                                    if (this.props.onEnter) {\r\n                                        this.props.onEnter(this._store);\r\n                                    }\r\n                                }}\r\n                                placeholder={placeholder}\r\n                                onFocus={() => this.lock()}\r\n                                onChange={(evt) => this.updateValue(evt.target.value)}\r\n                            />\r\n                            {this.props.arrows && (\r\n                                <InputArrowsComponent\r\n                                    incrementValue={(amount) => this.incrementValue(amount)}\r\n                                    setDragging={(newDragging) => {\r\n                                        const currentDragging = this.state.dragging;\r\n                                        // drag stopped\r\n                                        if (!currentDragging && newDragging && this.props.onDragStart) {\r\n                                            this.props.onDragStart(valueAsNumber);\r\n                                        } else if (currentDragging && !newDragging && this.props.onDragStop) {\r\n                                            this.props.onDragStop(valueAsNumber);\r\n                                        }\r\n                                        this.setState({ dragging: newDragging });\r\n                                    }}\r\n                                />\r\n                            )}\r\n                        </div>\r\n                        {this.props.unit}\r\n                    </div>\r\n                )}\r\n                {this.props.useEuler && (\r\n                    <SliderLineComponent\r\n                        lockObject={this.props.lockObject}\r\n                        label={this.props.label}\r\n                        minimum={0}\r\n                        maximum={360}\r\n                        step={0.1}\r\n                        directValue={Tools.ToDegrees(valueAsNumber)}\r\n                        onChange={(value) => this.updateValue(Tools.ToRadians(value).toString())}\r\n                    />\r\n                )}\r\n            </>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/hexLineComponent.d.ts

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

package/lines/hexLineComponent.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+export class HexLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this._localChange = false;
+        this._propertyChange = true;
+        const currentValue = this.props.target[this.props.propertyName];
+        this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 3)) : "0" };
+        this._store = currentValue;
+    }
+    componentWillUnmount() {
+        this.unlock();
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        if (this._localChange) {
+            this._localChange = false;
+            return true;
+        }
+        const newValue = nextProps.target[nextProps.propertyName];
+        const newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 3)) : "0";
+        if (newValueString !== nextState.value) {
+            nextState.value = newValueString;
+            return true;
+        }
+        return false;
+    }
+    raiseOnPropertyChanged(newValue, previousValue) {
+        var _a;
+        if (this.props.onChange) {
+            this.props.onChange(newValue);
+        }
+        if (!this.props.onPropertyChangedObservable) {
+            return;
+        }
+        this.props.onPropertyChangedObservable.notifyObservers({
+            object: (_a = this.props.replaySourceReplacement) !== null && _a !== void 0 ? _a : this.props.target,
+            property: this.props.propertyName,
+            value: newValue,
+            initialValue: previousValue,
+        });
+    }
+    convertToHexString(valueString) {
+        while (valueString.length < 10) {
+            valueString += "0";
+        }
+        return valueString;
+    }
+    updateValue(valueString, raisePropertyChanged) {
+        if (valueString.substr(0, 2) != "0x") {
+            if (valueString.substr(0, 1) != "0") {
+                valueString = "0x" + valueString;
+            }
+            else {
+                valueString = "0x" + valueString.substr(1);
+            }
+        }
+        const valueSubstr = valueString.substr(2);
+        if (valueSubstr != "" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {
+            return;
+        }
+        if (valueString.length > 10) {
+            return;
+        }
+        const valueStringAsHex = this.convertToHexString(valueString);
+        let valueAsNumber;
+        valueAsNumber = parseInt(valueStringAsHex);
+        if (!isNaN(valueAsNumber) && this.props.min !== undefined) {
+            if (valueAsNumber < this.props.min) {
+                valueAsNumber = this.props.min;
+                valueString = valueAsNumber.toString();
+            }
+        }
+        this._localChange = true;
+        if (isNaN(valueAsNumber)) {
+            return;
+        }
+        this.setState({ value: valueString });
+        if (raisePropertyChanged) {
+            this._propertyChange = true;
+            this.props.target[this.props.propertyName] = valueAsNumber;
+            this.raiseOnPropertyChanged(valueAsNumber, this._store);
+        }
+        else {
+            this._propertyChange = false;
+        }
+        this._store = valueAsNumber;
+    }
+    lock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = true;
+        }
+    }
+    unlock() {
+        if (this.props.lockObject) {
+            this.props.lockObject.lock = false;
+        }
+    }
+    render() {
+        let valueAsHex;
+        if (this._propertyChange) {
+            const valueAsNumber = parseInt(this.state.value);
+            valueAsHex = valueAsNumber.toString(16);
+            let hex0String = "";
+            for (let i = 0; i < 8 - valueAsHex.length; i++) {
+                //padding the '0's
+                hex0String += "0";
+            }
+            valueAsHex = "0x" + hex0String + valueAsHex.toUpperCase();
+        }
+        else {
+            valueAsHex = this.state.value;
+        }
+        return (_jsx("div", { children: !this.props.useEuler && (_jsxs("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "value", children: _jsx("input", { type: "string", className: "hex-input", value: valueAsHex, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value, false), onKeyDown: (evt) => {
+                                if (evt.keyCode !== 13) {
+                                    return;
+                                }
+                                this.updateValue(this.state.value, true);
+                            } }) })] })) }));
+    }
+}
+//# sourceMappingURL=hexLineComponent.js.map

package/lines/hexLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hexLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/hexLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\n\r\ninterface IHexLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    lockObject?: LockObject;\r\n    onChange?: (newValue: number) => void;\r\n    isInteger?: boolean;\r\n    replaySourceReplacement?: string;\r\n    onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n    additionalClass?: string;\r\n    step?: string;\r\n    digits?: number;\r\n    useEuler?: boolean;\r\n    min?: number;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n}\r\n\r\nexport class HexLineComponent extends React.Component<IHexLineComponentProps, { value: string }> {\r\n    private _localChange = false;\r\n    private _store: number;\r\n    private _propertyChange = true;\r\n\r\n    constructor(props: IHexLineComponentProps) {\r\n        super(props);\r\n\r\n        const currentValue = this.props.target[this.props.propertyName];\r\n        this.state = { value: currentValue ? (this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(this.props.digits || 3)) : \"0\" };\r\n        this._store = currentValue;\r\n    }\r\n\r\n    componentWillUnmount() {\r\n        this.unlock();\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: IHexLineComponentProps, nextState: { value: string }) {\r\n        if (this._localChange) {\r\n            this._localChange = false;\r\n            return true;\r\n        }\r\n\r\n        const newValue = nextProps.target[nextProps.propertyName];\r\n        const newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 3)) : \"0\";\r\n\r\n        if (newValueString !== nextState.value) {\r\n            nextState.value = newValueString;\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    raiseOnPropertyChanged(newValue: number, previousValue: number) {\r\n        if (this.props.onChange) {\r\n            this.props.onChange(newValue);\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.replaySourceReplacement ?? this.props.target,\r\n            property: this.props.propertyName,\r\n            value: newValue,\r\n            initialValue: previousValue,\r\n        });\r\n    }\r\n\r\n    convertToHexString(valueString: string): string {\r\n        while (valueString.length < 10) {\r\n            valueString += \"0\";\r\n        }\r\n        return valueString;\r\n    }\r\n\r\n    updateValue(valueString: string, raisePropertyChanged: boolean) {\r\n        if (valueString.substr(0, 2) != \"0x\") {\r\n            if (valueString.substr(0, 1) != \"0\") {\r\n                valueString = \"0x\" + valueString;\r\n            } else {\r\n                valueString = \"0x\" + valueString.substr(1);\r\n            }\r\n        }\r\n\r\n        const valueSubstr = valueString.substr(2);\r\n        if (valueSubstr != \"\" && /^[0-9A-Fa-f]+$/g.test(valueSubstr) == false) {\r\n            return;\r\n        }\r\n\r\n        if (valueString.length > 10) {\r\n            return;\r\n        }\r\n\r\n        const valueStringAsHex = this.convertToHexString(valueString);\r\n        let valueAsNumber: number;\r\n\r\n        valueAsNumber = parseInt(valueStringAsHex);\r\n\r\n        if (!isNaN(valueAsNumber) && this.props.min !== undefined) {\r\n            if (valueAsNumber < this.props.min) {\r\n                valueAsNumber = this.props.min;\r\n                valueString = valueAsNumber.toString();\r\n            }\r\n        }\r\n\r\n        this._localChange = true;\r\n\r\n        if (isNaN(valueAsNumber)) {\r\n            return;\r\n        }\r\n\r\n        this.setState({ value: valueString });\r\n        if (raisePropertyChanged) {\r\n            this._propertyChange = true;\r\n            this.props.target[this.props.propertyName] = valueAsNumber;\r\n            this.raiseOnPropertyChanged(valueAsNumber, this._store);\r\n        } else {\r\n            this._propertyChange = false;\r\n        }\r\n\r\n        this._store = valueAsNumber;\r\n    }\r\n\r\n    lock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = true;\r\n        }\r\n    }\r\n\r\n    unlock() {\r\n        if (this.props.lockObject) {\r\n            this.props.lockObject.lock = false;\r\n        }\r\n    }\r\n\r\n    render() {\r\n        let valueAsHex: string;\r\n        if (this._propertyChange) {\r\n            const valueAsNumber = parseInt(this.state.value);\r\n            valueAsHex = valueAsNumber.toString(16);\r\n            let hex0String = \"\";\r\n            for (let i = 0; i < 8 - valueAsHex.length; i++) {\r\n                //padding the '0's\r\n                hex0String += \"0\";\r\n            }\r\n            valueAsHex = \"0x\" + hex0String + valueAsHex.toUpperCase();\r\n        } else {\r\n            valueAsHex = this.state.value;\r\n        }\r\n\r\n        return (\r\n            <div>\r\n                {!this.props.useEuler && (\r\n                    <div className={this.props.additionalClass ? this.props.additionalClass + \" floatLine\" : \"floatLine\"}>\r\n                        {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                        <div className=\"label\" title={this.props.label}>\r\n                            {this.props.label}\r\n                        </div>\r\n                        <div className=\"value\">\r\n                            <input\r\n                                type=\"string\"\r\n                                className=\"hex-input\"\r\n                                value={valueAsHex}\r\n                                onBlur={() => this.unlock()}\r\n                                onFocus={() => this.lock()}\r\n                                onChange={(evt) => this.updateValue(evt.target.value, false)}\r\n                                onKeyDown={(evt) => {\r\n                                    if (evt.keyCode !== 13) {\r\n                                        return;\r\n                                    }\r\n                                    this.updateValue(this.state.value, true);\r\n                                }}\r\n                            />\r\n                        </div>\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/iSelectedLineContainer.d.ts

@@ -0,0 +1,4 @@
+export interface ISelectedLineContainer {
+    selectedLineContainerTitles: Array<string>;
+    selectedLineContainerTitlesNoFocus: Array<string>;
+}

package/lines/iSelectedLineContainer.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=iSelectedLineContainer.js.map

package/lines/iSelectedLineContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iSelectedLineContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/iSelectedLineContainer.ts"],"names":[],"mappings":"","sourcesContent":["export interface ISelectedLineContainer {\r\n    selectedLineContainerTitles: Array<string>;\r\n    selectedLineContainerTitlesNoFocus: Array<string>;\r\n}\r\n"]}

package/lines/iconButtonLineComponent.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface IIconButtonLineComponentProps {
+    icon: string;
+    onClick: () => void;
+    tooltip: string;
+    active?: boolean;
+}
+export declare class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {
+    constructor(props: IIconButtonLineComponentProps);
+    render(): JSX.Element;
+}

package/lines/iconButtonLineComponent.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export class IconButtonLineComponent extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (_jsx("div", { style: { backgroundColor: this.props.active ? "#111111" : "" }, title: this.props.tooltip, className: `icon ${this.props.icon}`, onClick: () => this.props.onClick() }));
+    }
+}
+//# sourceMappingURL=iconButtonLineComponent.js.map

package/lines/iconButtonLineComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButtonLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/iconButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,MAAM,OAAO,uBAAwB,SAAQ,KAAK,CAAC,SAAwC;IACvF,YAAY,KAAoC;QAC5C,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,MAAM;QACF,OAAO,CACH,cACI,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAC9D,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EACzB,SAAS,EAAE,QAAQ,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,EACpC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,GACrC,CACL,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\n\r\nexport interface IIconButtonLineComponentProps {\r\n    icon: string;\r\n    onClick: () => void;\r\n    tooltip: string;\r\n    active?: boolean;\r\n}\r\n\r\nexport class IconButtonLineComponent extends React.Component<IIconButtonLineComponentProps> {\r\n    constructor(props: IIconButtonLineComponentProps) {\r\n        super(props);\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div\r\n                style={{ backgroundColor: this.props.active ? \"#111111\" : \"\" }}\r\n                title={this.props.tooltip}\r\n                className={`icon ${this.props.icon}`}\r\n                onClick={() => this.props.onClick()}\r\n            />\r\n        );\r\n    }\r\n}\r\n"]}

package/lines/iconComponent.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+interface IIconComponentProps {
+    icon: string;
+    label?: string;
+}
+export declare class IconComponent extends React.Component<IIconComponentProps> {
+    render(): JSX.Element;
+}
+export {};

package/lines/iconComponent.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+export class IconComponent extends React.Component {
+    render() {
+        return _jsx("img", { src: this.props.icon, title: this.props.label, alt: this.props.label, color: "black", className: "icon", onDragStart: (evt) => evt.preventDefault() });
+    }
+}
+//# sourceMappingURL=iconComponent.js.map

package/lines/iconComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/lines/iconComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,OAAO,aAAc,SAAQ,KAAK,CAAC,SAA8B;IACnE,MAAM;QACF,OAAO,cAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAC,OAAO,EAAC,SAAS,EAAC,MAAM,EAAC,WAAW,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,cAAc,EAAE,GAAI,CAAC;IACpK,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\n\r\ninterface IIconComponentProps {\r\n    icon: string;\r\n    label?: string;\r\n}\r\n\r\nexport class IconComponent extends React.Component<IIconComponentProps> {\r\n    render() {\r\n        return <img src={this.props.icon} title={this.props.label} alt={this.props.label} color=\"black\" className=\"icon\" onDragStart={(evt) => evt.preventDefault()} />;\r\n    }\r\n}\r\n"]}