@babylonjs/shared-ui-components 8.5.0 → 8.6.1

package/components/layout/utils.js

@@ -5,6 +5,7 @@
  * @param row
  * @returns
  */
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export const getPosInLayout = (layout, column, row) => {
     if (!layout.columns) {
         throw new Error("Attempted to get position on empty layout");
@@ -24,6 +25,7 @@ export const getPosInLayout = (layout, column, row) => {
  * @param column
  * @param row
  */
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export const removeLayoutRowAndRedistributePercentages = (layout, column, row) => {
     if (!layout.columns) {
         throw new Error("Attempted to get position on empty layout");
@@ -54,6 +56,7 @@ export const removeLayoutRowAndRedistributePercentages = (layout, column, row) =
  * @param p2 the number
  * @returns the sum of the percentage string and the number
  */
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export const addPercentageStringToNumber = (p1, p2) => {
     // Convert both values to numbers
     const np1 = Number.parseFloat(p1.replace("%", ""));
@@ -66,6 +69,7 @@ export const addPercentageStringToNumber = (p1, p2) => {
  * @param p the percentage string
  * @returns the parsed number
  */
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export const parsePercentage = (p) => {
     return Number.parseFloat(p.replace("%", ""));
 };

package/components/layout/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAY,EAAgC,EAAE;IACzG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QACpB,OAAO,YAAY,CAAC;IACxB,CAAC;IACD,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yCAAyC,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAW,EAAE,EAAE;IACrG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;IAC9D,CAAC;IACD,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;IACnC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;IAChE,CAAC;IACD,yBAAyB;IACzB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEjC,uDAAuD;IACvD,MAAM,SAAS,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;IACxE,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;QACnC,GAAG,CAAC,MAAM,GAAG,2BAA2B,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,GAAG,CAAC;IAC1E,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAAU,EAAE,EAAU,EAAU,EAAE;IAC1E,iCAAiC;IACjC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IACnD,MAAM,GAAG,GAAG,EAAE,CAAC;IAEf,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;IACrB,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAS,EAAU,EAAE;IACjD,OAAO,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;AACjD,CAAC,CAAC","sourcesContent":["import type { Layout, LayoutColumn, LayoutTabsRow } from \"./types\";\r\n\r\n/**\r\n * Given a column and row number in the layout, return the corresponding column/row\r\n * @param layout\r\n * @param column\r\n * @param row\r\n * @returns\r\n */\r\nexport const getPosInLayout = (layout: Layout, column: number, row?: number): LayoutColumn | LayoutTabsRow => {\r\n    if (!layout.columns) {\r\n        throw new Error(\"Attempted to get position on empty layout\");\r\n    }\r\n    const columnLayout = layout.columns[column];\r\n    if (!columnLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout column\");\r\n    }\r\n    if (row === undefined) {\r\n        return columnLayout;\r\n    }\r\n    return columnLayout.rows[row];\r\n};\r\n\r\n/**\r\n * Remove a row in position row, column from the layout, and redistribute heights of remaining rows\r\n * @param layout\r\n * @param column\r\n * @param row\r\n */\r\nexport const removeLayoutRowAndRedistributePercentages = (layout: Layout, column: number, row: number) => {\r\n    if (!layout.columns) {\r\n        throw new Error(\"Attempted to get position on empty layout\");\r\n    }\r\n    const columnLayout = layout.columns[column];\r\n    if (!columnLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout column\");\r\n    }\r\n    const rowLayout = columnLayout.rows[row];\r\n    if (!rowLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout row\");\r\n    }\r\n    const rowHeight = rowLayout.height;\r\n    if (rowHeight === undefined) {\r\n        throw new Error(\"Attempted to remove a row with no height\");\r\n    }\r\n    // Remove row from layout\r\n    columnLayout.rows.splice(row, 1);\r\n\r\n    // Redistribute this row's height to the remaining rows\r\n    const percToAdd = parsePercentage(rowHeight) / columnLayout.rows.length;\r\n    columnLayout.rows.forEach((row: any) => {\r\n        row.height = addPercentageStringToNumber(row.height, percToAdd) + \"%\";\r\n    });\r\n};\r\n\r\n/**\r\n * Add a percentage string to a number\r\n * @param p1 the percentage string\r\n * @param p2 the number\r\n * @returns the sum of the percentage string and the number\r\n */\r\nexport const addPercentageStringToNumber = (p1: string, p2: number): number => {\r\n    // Convert both values to numbers\r\n    const np1 = Number.parseFloat(p1.replace(\"%\", \"\"));\r\n    const np2 = p2;\r\n\r\n    const nr = np1 + np2;\r\n    return nr;\r\n};\r\n\r\n/**\r\n * Parses a percentage string into a number\r\n * @param p the percentage string\r\n * @returns the parsed number\r\n */\r\nexport const parsePercentage = (p: string): number => {\r\n    return Number.parseFloat(p.replace(\"%\", \"\"));\r\n};\r\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/layout/utils.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAY,EAAgC,EAAE;IACzG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;QACpB,OAAO,YAAY,CAAC;IACxB,CAAC;IACD,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,yCAAyC,GAAG,CAAC,MAAc,EAAE,MAAc,EAAE,GAAW,EAAE,EAAE;IACrG,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;QAClB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5C,IAAI,CAAC,YAAY,EAAE,CAAC;QAChB,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IACjE,CAAC;IACD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACzC,IAAI,CAAC,SAAS,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;IAC9D,CAAC;IACD,MAAM,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC;IACnC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAC1B,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;IAChE,CAAC;IACD,yBAAyB;IACzB,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAEjC,uDAAuD;IACvD,MAAM,SAAS,GAAG,eAAe,CAAC,SAAS,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC;IACxE,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;QACnC,GAAG,CAAC,MAAM,GAAG,2BAA2B,CAAC,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,GAAG,CAAC;IAC1E,CAAC,CAAC,CAAC;AACP,CAAC,CAAC;AAEF;;;;;GAKG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAAU,EAAE,EAAU,EAAU,EAAE;IAC1E,iCAAiC;IACjC,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;IACnD,MAAM,GAAG,GAAG,EAAE,CAAC;IAEf,MAAM,EAAE,GAAG,GAAG,GAAG,GAAG,CAAC;IACrB,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AAEF;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,CAAS,EAAU,EAAE;IACjD,OAAO,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;AACjD,CAAC,CAAC","sourcesContent":["import type { Layout, LayoutColumn, LayoutTabsRow } from \"./types\";\r\n\r\n/**\r\n * Given a column and row number in the layout, return the corresponding column/row\r\n * @param layout\r\n * @param column\r\n * @param row\r\n * @returns\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const getPosInLayout = (layout: Layout, column: number, row?: number): LayoutColumn | LayoutTabsRow => {\r\n    if (!layout.columns) {\r\n        throw new Error(\"Attempted to get position on empty layout\");\r\n    }\r\n    const columnLayout = layout.columns[column];\r\n    if (!columnLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout column\");\r\n    }\r\n    if (row === undefined) {\r\n        return columnLayout;\r\n    }\r\n    return columnLayout.rows[row];\r\n};\r\n\r\n/**\r\n * Remove a row in position row, column from the layout, and redistribute heights of remaining rows\r\n * @param layout\r\n * @param column\r\n * @param row\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const removeLayoutRowAndRedistributePercentages = (layout: Layout, column: number, row: number) => {\r\n    if (!layout.columns) {\r\n        throw new Error(\"Attempted to get position on empty layout\");\r\n    }\r\n    const columnLayout = layout.columns[column];\r\n    if (!columnLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout column\");\r\n    }\r\n    const rowLayout = columnLayout.rows[row];\r\n    if (!rowLayout) {\r\n        throw new Error(\"Attempted to get an invalid layout row\");\r\n    }\r\n    const rowHeight = rowLayout.height;\r\n    if (rowHeight === undefined) {\r\n        throw new Error(\"Attempted to remove a row with no height\");\r\n    }\r\n    // Remove row from layout\r\n    columnLayout.rows.splice(row, 1);\r\n\r\n    // Redistribute this row's height to the remaining rows\r\n    const percToAdd = parsePercentage(rowHeight) / columnLayout.rows.length;\r\n    columnLayout.rows.forEach((row: any) => {\r\n        row.height = addPercentageStringToNumber(row.height, percToAdd) + \"%\";\r\n    });\r\n};\r\n\r\n/**\r\n * Add a percentage string to a number\r\n * @param p1 the percentage string\r\n * @param p2 the number\r\n * @returns the sum of the percentage string and the number\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const addPercentageStringToNumber = (p1: string, p2: number): number => {\r\n    // Convert both values to numbers\r\n    const np1 = Number.parseFloat(p1.replace(\"%\", \"\"));\r\n    const np2 = p2;\r\n\r\n    const nr = np1 + np2;\r\n    return nr;\r\n};\r\n\r\n/**\r\n * Parses a percentage string into a number\r\n * @param p the percentage string\r\n * @returns the parsed number\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const parsePercentage = (p: string): number => {\r\n    return Number.parseFloat(p.replace(\"%\", \"\"));\r\n};\r\n"]}

package/components/lines/ColorLineComponent.js

@@ -8,7 +8,7 @@ import { ColorPickerLineComponent } from "./ColorPickerLineComponent.js";
 import * as style from "./ColorLineComponent.module.scss";
 import copyIcon from "../../imgs/copy.svg";
 import { JoinClassNames } from "../classNames.js";
-const emptyColor = new Color4(0, 0, 0, 0);
+const EmptyColor = new Color4(0, 0, 0, 0);
 export class ColorLineComponent extends React.Component {
     constructor(props) {
         super(props);
@@ -35,8 +35,9 @@ export class ColorLineComponent extends React.Component {
     getValue(props = this.props) {
         const target = props.target;
         const property = target[props.propertyName];
-        if (!property)
-            return emptyColor;
+        if (!property) {
+            return EmptyColor;
+        }
         if (typeof property === "string") {
             // if (property === conflictingValuesPlaceholder) {
             //     return emptyColor;
@@ -112,7 +113,7 @@ export class ColorLineComponent extends React.Component {
     }
     _convertToColor(color) {
         if (color === "" || color === "transparent") {
-            return emptyColor;
+            return EmptyColor;
         }
         if (color.substring(0, 1) !== "#" || (color.length !== 7 && color.length !== 9)) {
             const d = document.createElement("div");

package/components/lines/ColorLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/ColorLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { NumericInputComponent } from \"./NumericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../../propertyChangedEvent\";\r\nimport { ColorPickerLineComponent } from \"./ColorPickerLineComponent\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport * as style from \"./ColorLineComponent.module.scss\";\r\n\r\nimport copyIcon from \"../../imgs/copy.svg\";\r\nimport { JoinClassNames } from \"../classNames\";\r\nconst emptyColor = new Color4(0, 0, 0, 0);\r\n\r\nexport interface IColorLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    onPropertyChangedObservable: Observable<PropertyChangedEvent>;\r\n    onChange?: () => void;\r\n    isLinear?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    disableAlpha?: boolean;\r\n    lockObject: LockObject;\r\n}\r\n\r\ninterface IColorLineComponentState {\r\n    isExpanded: boolean;\r\n    color: Color4;\r\n}\r\n\r\nexport class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {\r\n    constructor(props: IColorLineComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { isExpanded: false, color: this.getValue() };\r\n\r\n        const target = this.props.target;\r\n        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState) {\r\n        const stateColor = nextState.color;\r\n        const propsColor = this.getValue(nextProps);\r\n        if (stateColor !== this.state.color) {\r\n            nextState.color = stateColor;\r\n            return true;\r\n        }\r\n        if (propsColor !== this.state.color) {\r\n            nextState.color = propsColor;\r\n            return true;\r\n        }\r\n        if (nextState.isExpanded !== this.state.isExpanded) {\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    getValue(props = this.props): Color4 {\r\n        const target = props.target;\r\n        const property = target[props.propertyName];\r\n        if (!property) return emptyColor;\r\n        if (typeof property === \"string\") {\r\n            // if (property === conflictingValuesPlaceholder) {\r\n            //     return emptyColor;\r\n            // }\r\n            return this._convertToColor(property);\r\n        } else {\r\n            if (props.isLinear) {\r\n                return property.toGammaSpace();\r\n            }\r\n            return property.clone();\r\n        }\r\n    }\r\n\r\n    setColorFromString(colorString: string) {\r\n        const color = this._convertToColor(colorString);\r\n        this.setColor(color);\r\n    }\r\n\r\n    setColor(newColor: Color4) {\r\n        this.setState({ color: newColor.clone() });\r\n        if (this.props.isLinear) {\r\n            newColor.toLinearSpaceToRef(newColor);\r\n        }\r\n        // whether to set properties to color3 or color4\r\n        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;\r\n\r\n        const target = this.props.target;\r\n        const initialValue = target[this.props.propertyName];\r\n        const value = typeof target[this.props.propertyName] === \"string\" ? setColor.toHexString() : setColor;\r\n        // make the change\r\n        target[this.props.propertyName] = value;\r\n        // notify observers\r\n        if (this.props.onPropertyChangedObservable) {\r\n            this.props.onPropertyChangedObservable.notifyObservers({\r\n                object: target,\r\n                property: this.props.propertyName,\r\n                value,\r\n                initialValue,\r\n            });\r\n        }\r\n\r\n        if (this.props.onChange) {\r\n            this.props.onChange();\r\n        }\r\n    }\r\n\r\n    switchExpandState() {\r\n        this.setState({ isExpanded: !this.state.isExpanded });\r\n    }\r\n\r\n    updateStateR(value: number) {\r\n        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));\r\n    }\r\n\r\n    updateStateG(value: number) {\r\n        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));\r\n    }\r\n\r\n    updateStateB(value: number) {\r\n        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));\r\n    }\r\n\r\n    updateStateA(value: number) {\r\n        if (this.props.disableAlpha) {\r\n            return;\r\n        }\r\n        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));\r\n    }\r\n\r\n    copyToClipboard() {\r\n        const element = document.createElement(\"div\");\r\n        element.textContent = this.state.color.toHexString();\r\n        document.body.appendChild(element);\r\n\r\n        if (window.getSelection) {\r\n            const range = document.createRange();\r\n            range.selectNode(element);\r\n            window.getSelection()!.removeAllRanges();\r\n            window.getSelection()!.addRange(range);\r\n        }\r\n\r\n        document.execCommand(\"copy\");\r\n        element.remove();\r\n    }\r\n\r\n    private _convertToColor(color: string): Color4 {\r\n        if (color === \"\" || color === \"transparent\") {\r\n            return emptyColor;\r\n        }\r\n\r\n        if (color.substring(0, 1) !== \"#\" || (color.length !== 7 && color.length !== 9)) {\r\n            const d = document.createElement(\"div\");\r\n            d.style.color = color;\r\n            document.body.append(d);\r\n            const rgb = window.getComputedStyle(d).color;\r\n            document.body.removeChild(d);\r\n\r\n            const rgbArray = rgb\r\n                .substring(4, rgb.length - 1)\r\n                .replace(/ /g, \"\")\r\n                .split(\",\");\r\n\r\n            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;\r\n\r\n            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);\r\n        }\r\n\r\n        if (this.props.disableAlpha) {\r\n            const color3 = Color3.FromHexString(color);\r\n            return new Color4(color3.r, color3.g, color3.b, 1.0);\r\n        }\r\n\r\n        return Color4.FromHexString(color);\r\n    }\r\n\r\n    private _toColor3(color: Color4) {\r\n        return new Color3(color.r, color.g, color.b);\r\n    }\r\n\r\n    override render() {\r\n        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n        return (\r\n            <div className={style.color3Line}>\r\n                <div className={style.firstLine}>\r\n                    {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                    <div className={style.label} title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                    <div className={style.color3}>\r\n                        <ColorPickerLineComponent\r\n                            lockObject={this.props.lockObject}\r\n                            linearHint={this.props.isLinear}\r\n                            value={this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color}\r\n                            onColorChanged={(colorString) => {\r\n                                this.setColorFromString(colorString);\r\n                            }}\r\n                        />\r\n                    </div>\r\n                    <div className={JoinClassNames(style, \"copy\", \"hoverIcon\")} onClick={() => this.copyToClipboard()} title=\"Copy to clipboard\">\r\n                        <img src={copyIcon} alt=\"Copy\" />\r\n                    </div>\r\n                    <div className={JoinClassNames(\"expand\", \"hoverIcon\")} onClick={() => this.switchExpandState()} title=\"Expand\">\r\n                        {chevron}\r\n                    </div>\r\n                </div>\r\n                {this.state.isExpanded && (\r\n                    <div className={style.secondLine}>\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"r\"\r\n                            labelTooltip=\"Red\"\r\n                            value={this.state.color.r}\r\n                            onChange={(value) => this.updateStateR(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"g\"\r\n                            labelTooltip=\"Green\"\r\n                            value={this.state.color.g}\r\n                            onChange={(value) => this.updateStateG(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"b\"\r\n                            labelTooltip=\"Blue\"\r\n                            value={this.state.color.b}\r\n                            onChange={(value) => this.updateStateB(value)}\r\n                        />\r\n                        {this.props.disableAlpha || (\r\n                            <NumericInputComponent\r\n                                lockObject={this.props.lockObject}\r\n                                label=\"a\"\r\n                                labelTooltip=\"Alpha\"\r\n                                value={this.state.color.a}\r\n                                onChange={(value) => this.updateStateA(value)}\r\n                            />\r\n                        )}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"ColorLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/ColorLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { NumericInputComponent } from \"./NumericInputComponent\";\r\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\r\nimport { faMinus, faPlus } from \"@fortawesome/free-solid-svg-icons\";\r\nimport type { PropertyChangedEvent } from \"../../propertyChangedEvent\";\r\nimport { ColorPickerLineComponent } from \"./ColorPickerLineComponent\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport * as style from \"./ColorLineComponent.module.scss\";\r\n\r\nimport copyIcon from \"../../imgs/copy.svg\";\r\nimport { JoinClassNames } from \"../classNames\";\r\nconst EmptyColor = new Color4(0, 0, 0, 0);\r\n\r\nexport interface IColorLineComponentProps {\r\n    label: string;\r\n    target: any;\r\n    propertyName: string;\r\n    onPropertyChangedObservable: Observable<PropertyChangedEvent>;\r\n    onChange?: () => void;\r\n    isLinear?: boolean;\r\n    icon?: string;\r\n    iconLabel?: string;\r\n    disableAlpha?: boolean;\r\n    lockObject: LockObject;\r\n}\r\n\r\ninterface IColorLineComponentState {\r\n    isExpanded: boolean;\r\n    color: Color4;\r\n}\r\n\r\nexport class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {\r\n    constructor(props: IColorLineComponentProps) {\r\n        super(props);\r\n\r\n        this.state = { isExpanded: false, color: this.getValue() };\r\n\r\n        const target = this.props.target;\r\n        target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate\r\n    }\r\n\r\n    override shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState) {\r\n        const stateColor = nextState.color;\r\n        const propsColor = this.getValue(nextProps);\r\n        if (stateColor !== this.state.color) {\r\n            nextState.color = stateColor;\r\n            return true;\r\n        }\r\n        if (propsColor !== this.state.color) {\r\n            nextState.color = propsColor;\r\n            return true;\r\n        }\r\n        if (nextState.isExpanded !== this.state.isExpanded) {\r\n            return true;\r\n        }\r\n        return false;\r\n    }\r\n\r\n    getValue(props = this.props): Color4 {\r\n        const target = props.target;\r\n        const property = target[props.propertyName];\r\n        if (!property) {\r\n            return EmptyColor;\r\n        }\r\n        if (typeof property === \"string\") {\r\n            // if (property === conflictingValuesPlaceholder) {\r\n            //     return emptyColor;\r\n            // }\r\n            return this._convertToColor(property);\r\n        } else {\r\n            if (props.isLinear) {\r\n                return property.toGammaSpace();\r\n            }\r\n            return property.clone();\r\n        }\r\n    }\r\n\r\n    setColorFromString(colorString: string) {\r\n        const color = this._convertToColor(colorString);\r\n        this.setColor(color);\r\n    }\r\n\r\n    setColor(newColor: Color4) {\r\n        this.setState({ color: newColor.clone() });\r\n        if (this.props.isLinear) {\r\n            newColor.toLinearSpaceToRef(newColor);\r\n        }\r\n        // whether to set properties to color3 or color4\r\n        const setColor = this.props.disableAlpha ? this._toColor3(newColor) : newColor;\r\n\r\n        const target = this.props.target;\r\n        const initialValue = target[this.props.propertyName];\r\n        const value = typeof target[this.props.propertyName] === \"string\" ? setColor.toHexString() : setColor;\r\n        // make the change\r\n        target[this.props.propertyName] = value;\r\n        // notify observers\r\n        if (this.props.onPropertyChangedObservable) {\r\n            this.props.onPropertyChangedObservable.notifyObservers({\r\n                object: target,\r\n                property: this.props.propertyName,\r\n                value,\r\n                initialValue,\r\n            });\r\n        }\r\n\r\n        if (this.props.onChange) {\r\n            this.props.onChange();\r\n        }\r\n    }\r\n\r\n    switchExpandState() {\r\n        this.setState({ isExpanded: !this.state.isExpanded });\r\n    }\r\n\r\n    updateStateR(value: number) {\r\n        this.setColor(new Color4(value, this.state.color.g, this.state.color.b, this.state.color.a));\r\n    }\r\n\r\n    updateStateG(value: number) {\r\n        this.setColor(new Color4(this.state.color.r, value, this.state.color.b, this.state.color.a));\r\n    }\r\n\r\n    updateStateB(value: number) {\r\n        this.setColor(new Color4(this.state.color.r, this.state.color.g, value, this.state.color.a));\r\n    }\r\n\r\n    updateStateA(value: number) {\r\n        if (this.props.disableAlpha) {\r\n            return;\r\n        }\r\n        this.setColor(new Color4(this.state.color.r, this.state.color.g, this.state.color.b, value));\r\n    }\r\n\r\n    copyToClipboard() {\r\n        const element = document.createElement(\"div\");\r\n        element.textContent = this.state.color.toHexString();\r\n        document.body.appendChild(element);\r\n\r\n        if (window.getSelection) {\r\n            const range = document.createRange();\r\n            range.selectNode(element);\r\n            window.getSelection()!.removeAllRanges();\r\n            window.getSelection()!.addRange(range);\r\n        }\r\n\r\n        document.execCommand(\"copy\");\r\n        element.remove();\r\n    }\r\n\r\n    private _convertToColor(color: string): Color4 {\r\n        if (color === \"\" || color === \"transparent\") {\r\n            return EmptyColor;\r\n        }\r\n\r\n        if (color.substring(0, 1) !== \"#\" || (color.length !== 7 && color.length !== 9)) {\r\n            const d = document.createElement(\"div\");\r\n            d.style.color = color;\r\n            document.body.append(d);\r\n            const rgb = window.getComputedStyle(d).color;\r\n            document.body.removeChild(d);\r\n\r\n            const rgbArray = rgb\r\n                .substring(4, rgb.length - 1)\r\n                .replace(/ /g, \"\")\r\n                .split(\",\");\r\n\r\n            const alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;\r\n\r\n            return new Color4(parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);\r\n        }\r\n\r\n        if (this.props.disableAlpha) {\r\n            const color3 = Color3.FromHexString(color);\r\n            return new Color4(color3.r, color3.g, color3.b, 1.0);\r\n        }\r\n\r\n        return Color4.FromHexString(color);\r\n    }\r\n\r\n    private _toColor3(color: Color4) {\r\n        return new Color3(color.r, color.g, color.b);\r\n    }\r\n\r\n    override render() {\r\n        const chevron = this.state.isExpanded ? <FontAwesomeIcon icon={faMinus} /> : <FontAwesomeIcon icon={faPlus} />;\r\n\r\n        return (\r\n            <div className={style.color3Line}>\r\n                <div className={style.firstLine}>\r\n                    {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} className=\"icon\" />}\r\n                    <div className={style.label} title={this.props.label}>\r\n                        {this.props.label}\r\n                    </div>\r\n                    <div className={style.color3}>\r\n                        <ColorPickerLineComponent\r\n                            lockObject={this.props.lockObject}\r\n                            linearHint={this.props.isLinear}\r\n                            value={this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color}\r\n                            onColorChanged={(colorString) => {\r\n                                this.setColorFromString(colorString);\r\n                            }}\r\n                        />\r\n                    </div>\r\n                    <div className={JoinClassNames(style, \"copy\", \"hoverIcon\")} onClick={() => this.copyToClipboard()} title=\"Copy to clipboard\">\r\n                        <img src={copyIcon} alt=\"Copy\" />\r\n                    </div>\r\n                    <div className={JoinClassNames(\"expand\", \"hoverIcon\")} onClick={() => this.switchExpandState()} title=\"Expand\">\r\n                        {chevron}\r\n                    </div>\r\n                </div>\r\n                {this.state.isExpanded && (\r\n                    <div className={style.secondLine}>\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"r\"\r\n                            labelTooltip=\"Red\"\r\n                            value={this.state.color.r}\r\n                            onChange={(value) => this.updateStateR(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"g\"\r\n                            labelTooltip=\"Green\"\r\n                            value={this.state.color.g}\r\n                            onChange={(value) => this.updateStateG(value)}\r\n                        />\r\n                        <NumericInputComponent\r\n                            lockObject={this.props.lockObject}\r\n                            label=\"b\"\r\n                            labelTooltip=\"Blue\"\r\n                            value={this.state.color.b}\r\n                            onChange={(value) => this.updateStateB(value)}\r\n                        />\r\n                        {this.props.disableAlpha || (\r\n                            <NumericInputComponent\r\n                                lockObject={this.props.lockObject}\r\n                                label=\"a\"\r\n                                labelTooltip=\"Alpha\"\r\n                                value={this.state.color.a}\r\n                                onChange={(value) => this.updateStateA(value)}\r\n                            />\r\n                        )}\r\n                    </div>\r\n                )}\r\n            </div>\r\n        );\r\n    }\r\n}\r\n"]}

package/components/lines/FileButtonLineComponent.d.ts

@@ -7,7 +7,7 @@ export interface IFileButtonLineComponentProps {
     iconLabel?: string;
 }
 export declare class FileButtonLineComponent extends React.Component<IFileButtonLineComponentProps> {
-    private static _IDGenerator;
+    private static _IdGenerator;
     private _id;
     private _uploadInputRef;
     constructor(props: IFileButtonLineComponentProps);

package/components/lines/FileButtonLineComponent.js

@@ -4,7 +4,7 @@ import * as styles from "./FileButtonLineComponent.module.scss";
 export class FileButtonLineComponent extends React.Component {
     constructor(props) {
         super(props);
-        this._id = FileButtonLineComponent._IDGenerator++;
+        this._id = FileButtonLineComponent._IdGenerator++;
         this._uploadInputRef = React.createRef();
     }
     onChange(evt) {
@@ -18,5 +18,5 @@ export class FileButtonLineComponent extends React.Component {
         return (_jsxs("div", { className: styles.buttonLine, children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel }), _jsx("label", { htmlFor: "file-upload" + this._id, className: styles.fileUpload, 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;
+FileButtonLineComponent._IdGenerator = 0;
 //# sourceMappingURL=FileButtonLineComponent.js.map

package/components/lines/FileButtonLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileButtonLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/FileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,MAAM,MAAM,uCAAuC,CAAC;AAUhE,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,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,UAAU,aAC5B,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,GAAI,EACzG,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,YACjE,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,AAAJ,CAAK","sourcesContent":["import * as React from \"react\";\r\nimport * as styles from \"./FileButtonLineComponent.module.scss\";\r\n\r\nexport interface 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    override render() {\r\n        return (\r\n            <div className={styles.buttonLine}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} />}\r\n                <label htmlFor={\"file-upload\" + this._id} className={styles.fileUpload}>\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"]}
+{"version":3,"file":"FileButtonLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/FileButtonLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,MAAM,MAAM,uCAAuC,CAAC;AAUhE,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,CAAC;YACxB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QACjC,CAAC;QAED,GAAG,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;IAC1B,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,eAAK,SAAS,EAAE,MAAM,CAAC,UAAU,aAC5B,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,GAAI,EACzG,gBAAO,OAAO,EAAE,aAAa,GAAG,IAAI,CAAC,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,UAAU,YACjE,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,AAAJ,CAAK","sourcesContent":["import * as React from \"react\";\r\nimport * as styles from \"./FileButtonLineComponent.module.scss\";\r\n\r\nexport interface 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    override render() {\r\n        return (\r\n            <div className={styles.buttonLine}>\r\n                {this.props.icon && <img src={this.props.icon} title={this.props.iconLabel} alt={this.props.iconLabel} />}\r\n                <label htmlFor={\"file-upload\" + this._id} className={styles.fileUpload}>\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/components/lines/OptionsLineComponent.js

@@ -11,11 +11,11 @@ var OptionStates;
     OptionStates[OptionStates["Default"] = 0] = "Default";
     OptionStates[OptionStates["Adding"] = 1] = "Adding";
 })(OptionStates || (OptionStates = {}));
-const _OptionAddKey = "addCustomOption";
+const OptionAddKey = "addCustomOption";
 export const OptionsLineComponent = (props) => {
     const [optionState, setOptionState] = useState(OptionStates.Default); // State of the component
     const onOptionChange = (evt) => {
-        if (evt.target.value === _OptionAddKey) {
+        if (evt.target.value === OptionAddKey) {
             setOptionState(OptionStates.Adding);
         }
         else {
@@ -32,6 +32,6 @@ export const OptionsLineComponent = (props) => {
     const onCancelOptionAdd = () => {
         setOptionState(OptionStates.Default);
     };
-    return (_jsxs("div", { className: style.optionsLine, children: [optionState === OptionStates.Adding && (_jsx(TextInputWithSubmit, { submitValue: onOptionAdd, placeholder: props.addOptionPlaceholder, validateValue: props.validateNewOptionValue, cancelSubmit: onCancelOptionAdd })), optionState === OptionStates.Default && (_jsxs("select", { className: style.optionsSelect, onChange: onOptionChange, value: props.selectedOptionValue, children: [props.onOptionAdded && (_jsx("option", { value: _OptionAddKey, children: props.addOptionText ?? "Custom" }, _OptionAddKey)), props.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.id)))] }))] }));
+    return (_jsxs("div", { className: style.optionsLine, children: [optionState === OptionStates.Adding && (_jsx(TextInputWithSubmit, { submitValue: onOptionAdd, placeholder: props.addOptionPlaceholder, validateValue: props.validateNewOptionValue, cancelSubmit: onCancelOptionAdd })), optionState === OptionStates.Default && (_jsxs("select", { className: style.optionsSelect, onChange: onOptionChange, value: props.selectedOptionValue, children: [props.onOptionAdded && (_jsx("option", { value: OptionAddKey, children: props.addOptionText ?? "Custom" }, OptionAddKey)), props.options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.id)))] }))] }));
 };
 //# sourceMappingURL=OptionsLineComponent.js.map

package/components/lines/OptionsLineComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"OptionsLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/OptionsLineComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,oCAAoC,CAAC;AAsB5D;;;GAGG;AACH,IAAK,YAGJ;AAHD,WAAK,YAAY;IACb,qDAAW,CAAA;IACX,mDAAU,CAAA;AACd,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,MAAM,aAAa,GAAG,iBAAiB,CAAC;AAExC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAiC,EAAE,EAAE;IACtE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,yBAAyB;IAE/F,MAAM,cAAc,GAAG,CAAC,GAAmC,EAAE,EAAE;QAC3D,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,KAAK,aAAa,EAAE,CAAC;YACrC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACJ,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,KAAK,CAAC;QAC5B,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC5F,KAAK,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,WAAW,aAC5B,WAAW,KAAK,YAAY,CAAC,MAAM,IAAI,CACpC,KAAC,mBAAmB,IAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,KAAK,CAAC,oBAAoB,EACvC,aAAa,EAAE,KAAK,CAAC,sBAAsB,EAC3C,YAAY,EAAE,iBAAiB,GACjC,CACL,EACA,WAAW,KAAK,YAAY,CAAC,OAAO,IAAI,CACrC,kBAAQ,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,CAAC,mBAAmB,aAC7F,KAAK,CAAC,aAAa,IAAI,CACpB,iBAA4B,KAAK,EAAE,aAAa,YAC3C,KAAK,CAAC,aAAa,IAAI,QAAQ,IADvB,aAAa,CAEjB,CACZ,EACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,iBAAwB,KAAK,EAAE,MAAM,CAAC,KAAK,YACtC,MAAM,CAAC,KAAK,IADJ,MAAM,CAAC,EAAE,CAEb,CACZ,CAAC,IACG,CACZ,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { ChangeEvent } from \"react\";\r\nimport { useState } from \"react\";\r\nimport { TextInputWithSubmit } from \"../TextInputWithSubmit\";\r\nimport * as style from \"./OptionsLineComponent.module.scss\";\r\n\r\n/**\r\n * This components represents an options menu with optional\r\n * customizable properties. Option IDs should be unique.\r\n */\r\nexport interface IOption {\r\n    label: string;\r\n    value: string;\r\n    id: string;\r\n}\r\n\r\nexport interface IOptionsLineComponentProps {\r\n    options: IOption[];\r\n    addOptionPlaceholder?: string; // Placeholder text to display when adding a new option\r\n    onOptionAdded?: (newOption: IOption) => void; // Optional function that can be used to add a new option to the menu\r\n    onOptionSelected: (selectedOptionValue: string) => void;\r\n    selectedOptionValue: string; // The value of the currently selected option\r\n    validateNewOptionValue?: (newOptionValue: string) => boolean; // Optional function that can be used to validate the value of a new option\r\n    addOptionText?: string; // Optional text to display on the add option button\r\n}\r\n\r\n/**\r\n * We have two possible states. The user starts in the Default option, and can choose to\r\n * add a new option.\r\n */\r\nenum OptionStates {\r\n    Default = 0, // Default state,\r\n    Adding = 1, // State when the user is adding a new option to the menu\r\n}\r\n\r\nconst _OptionAddKey = \"addCustomOption\";\r\n\r\nexport const OptionsLineComponent = (props: IOptionsLineComponentProps) => {\r\n    const [optionState, setOptionState] = useState(OptionStates.Default); // State of the component\r\n\r\n    const onOptionChange = (evt: ChangeEvent<HTMLSelectElement>) => {\r\n        if (evt.target.value === _OptionAddKey) {\r\n            setOptionState(OptionStates.Adding);\r\n        } else {\r\n            props.onOptionSelected(evt.target.value);\r\n        }\r\n    };\r\n\r\n    const onOptionAdd = (value: string) => {\r\n        const newOptionText = value;\r\n        const newOption = { label: newOptionText, value: newOptionText, id: Date.now().toString() };\r\n        props.onOptionAdded?.(newOption);\r\n        props.onOptionSelected(newOption.value);\r\n        setOptionState(OptionStates.Default);\r\n    };\r\n\r\n    const onCancelOptionAdd = () => {\r\n        setOptionState(OptionStates.Default);\r\n    };\r\n\r\n    return (\r\n        <div className={style.optionsLine}>\r\n            {optionState === OptionStates.Adding && (\r\n                <TextInputWithSubmit\r\n                    submitValue={onOptionAdd}\r\n                    placeholder={props.addOptionPlaceholder}\r\n                    validateValue={props.validateNewOptionValue}\r\n                    cancelSubmit={onCancelOptionAdd}\r\n                />\r\n            )}\r\n            {optionState === OptionStates.Default && (\r\n                <select className={style.optionsSelect} onChange={onOptionChange} value={props.selectedOptionValue}>\r\n                    {props.onOptionAdded && (\r\n                        <option key={_OptionAddKey} value={_OptionAddKey}>\r\n                            {props.addOptionText ?? \"Custom\"}\r\n                        </option>\r\n                    )}\r\n                    {props.options.map((option) => (\r\n                        <option key={option.id} value={option.value}>\r\n                            {option.label}\r\n                        </option>\r\n                    ))}\r\n                </select>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"OptionsLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/OptionsLineComponent.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,KAAK,KAAK,MAAM,oCAAoC,CAAC;AAsB5D;;;GAGG;AACH,IAAK,YAGJ;AAHD,WAAK,YAAY;IACb,qDAAW,CAAA;IACX,mDAAU,CAAA;AACd,CAAC,EAHI,YAAY,KAAZ,YAAY,QAGhB;AAED,MAAM,YAAY,GAAG,iBAAiB,CAAC;AAEvC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,KAAiC,EAAE,EAAE;IACtE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,yBAAyB;IAE/F,MAAM,cAAc,GAAG,CAAC,GAAmC,EAAE,EAAE;QAC3D,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,KAAK,YAAY,EAAE,CAAC;YACpC,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACxC,CAAC;aAAM,CAAC;YACJ,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAa,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,KAAK,CAAC;QAC5B,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC;QAC5F,KAAK,CAAC,aAAa,EAAE,CAAC,SAAS,CAAC,CAAC;QACjC,KAAK,CAAC,gBAAgB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC3B,cAAc,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,WAAW,aAC5B,WAAW,KAAK,YAAY,CAAC,MAAM,IAAI,CACpC,KAAC,mBAAmB,IAChB,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,KAAK,CAAC,oBAAoB,EACvC,aAAa,EAAE,KAAK,CAAC,sBAAsB,EAC3C,YAAY,EAAE,iBAAiB,GACjC,CACL,EACA,WAAW,KAAK,YAAY,CAAC,OAAO,IAAI,CACrC,kBAAQ,SAAS,EAAE,KAAK,CAAC,aAAa,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,KAAK,CAAC,mBAAmB,aAC7F,KAAK,CAAC,aAAa,IAAI,CACpB,iBAA2B,KAAK,EAAE,YAAY,YACzC,KAAK,CAAC,aAAa,IAAI,QAAQ,IADvB,YAAY,CAEhB,CACZ,EACA,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,iBAAwB,KAAK,EAAE,MAAM,CAAC,KAAK,YACtC,MAAM,CAAC,KAAK,IADJ,MAAM,CAAC,EAAE,CAEb,CACZ,CAAC,IACG,CACZ,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { ChangeEvent } from \"react\";\r\nimport { useState } from \"react\";\r\nimport { TextInputWithSubmit } from \"../TextInputWithSubmit\";\r\nimport * as style from \"./OptionsLineComponent.module.scss\";\r\n\r\n/**\r\n * This components represents an options menu with optional\r\n * customizable properties. Option IDs should be unique.\r\n */\r\nexport interface IOption {\r\n    label: string;\r\n    value: string;\r\n    id: string;\r\n}\r\n\r\nexport interface IOptionsLineComponentProps {\r\n    options: IOption[];\r\n    addOptionPlaceholder?: string; // Placeholder text to display when adding a new option\r\n    onOptionAdded?: (newOption: IOption) => void; // Optional function that can be used to add a new option to the menu\r\n    onOptionSelected: (selectedOptionValue: string) => void;\r\n    selectedOptionValue: string; // The value of the currently selected option\r\n    validateNewOptionValue?: (newOptionValue: string) => boolean; // Optional function that can be used to validate the value of a new option\r\n    addOptionText?: string; // Optional text to display on the add option button\r\n}\r\n\r\n/**\r\n * We have two possible states. The user starts in the Default option, and can choose to\r\n * add a new option.\r\n */\r\nenum OptionStates {\r\n    Default = 0, // Default state,\r\n    Adding = 1, // State when the user is adding a new option to the menu\r\n}\r\n\r\nconst OptionAddKey = \"addCustomOption\";\r\n\r\nexport const OptionsLineComponent = (props: IOptionsLineComponentProps) => {\r\n    const [optionState, setOptionState] = useState(OptionStates.Default); // State of the component\r\n\r\n    const onOptionChange = (evt: ChangeEvent<HTMLSelectElement>) => {\r\n        if (evt.target.value === OptionAddKey) {\r\n            setOptionState(OptionStates.Adding);\r\n        } else {\r\n            props.onOptionSelected(evt.target.value);\r\n        }\r\n    };\r\n\r\n    const onOptionAdd = (value: string) => {\r\n        const newOptionText = value;\r\n        const newOption = { label: newOptionText, value: newOptionText, id: Date.now().toString() };\r\n        props.onOptionAdded?.(newOption);\r\n        props.onOptionSelected(newOption.value);\r\n        setOptionState(OptionStates.Default);\r\n    };\r\n\r\n    const onCancelOptionAdd = () => {\r\n        setOptionState(OptionStates.Default);\r\n    };\r\n\r\n    return (\r\n        <div className={style.optionsLine}>\r\n            {optionState === OptionStates.Adding && (\r\n                <TextInputWithSubmit\r\n                    submitValue={onOptionAdd}\r\n                    placeholder={props.addOptionPlaceholder}\r\n                    validateValue={props.validateNewOptionValue}\r\n                    cancelSubmit={onCancelOptionAdd}\r\n                />\r\n            )}\r\n            {optionState === OptionStates.Default && (\r\n                <select className={style.optionsSelect} onChange={onOptionChange} value={props.selectedOptionValue}>\r\n                    {props.onOptionAdded && (\r\n                        <option key={OptionAddKey} value={OptionAddKey}>\r\n                            {props.addOptionText ?? \"Custom\"}\r\n                        </option>\r\n                    )}\r\n                    {props.options.map((option) => (\r\n                        <option key={option.id} value={option.value}>\r\n                            {option.label}\r\n                        </option>\r\n                    ))}\r\n                </select>\r\n            )}\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/GraphLinesContainer.js

@@ -13,6 +13,7 @@ export const GraphLinesContainer = (props) => {
             return item.parentContainerId === props.id;
         },
         collect: (monitor) => ({
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
             start: monitor.getItem(),
             delta: monitor.getDifferenceFromInitialOffset(),
         }),

package/components/reactGraphSystem/GraphLinesContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GraphLinesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphLinesContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAYvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqD,CAAC,KAAK,EAAE,EAAE;IAC3F,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC/C,MAAM,EAAE,WAAW;QACnB,OAAO,EAAE,CAAC,IAAS,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,CAAC;QAC/C,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,KAAK,EAAE,OAAO,CAAC,OAAO,EAAS;YAC/B,KAAK,EAAE,OAAO,CAAC,8BAA8B,EAAS;SACzD,CAAC;KACL,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,OAAO,aACxC,yBACI,iBAAQ,EAAE,EAAE,aAAa,EAAE,WAAW,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,MAAM,YACzF,eAAM,CAAC,EAAC,uBAAuB,EAAC,MAAM,EAAC,OAAO,GAAG,GAC5C,GACN,EACN,KAAK,CAAC,QAAQ,EACd,KAAK,IAAI,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,IAAI,CACzG,KAAC,SAAS,IAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,CACzG,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport type { DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { GraphLine, MarkerArrowId } from \"./GraphLine\";\r\n\r\n/**\r\n * props for the GraphLineContainer\r\n */\r\nexport interface IGraphLinesContainerProps {\r\n    /**\r\n     * id of the container\r\n     */\r\n    id: string;\r\n}\r\n\r\n/**\r\n * this component handles the dragging of new connections\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphLinesContainer: FC<PropsWithChildren<IGraphLinesContainerProps>> = (props) => {\r\n    const [{ start, delta }, dropRef] = useDrop(() => ({\r\n        accept: \"connector\",\r\n        canDrop: (item: any) => {\r\n            return item.parentContainerId === props.id;\r\n        },\r\n        collect: (monitor: DropTargetMonitor) => ({\r\n            start: monitor.getItem() as any,\r\n            delta: monitor.getDifferenceFromInitialOffset() as any,\r\n        }),\r\n    }));\r\n    return (\r\n        <svg width=\"100%\" height=\"100%\" ref={dropRef}>\r\n            <defs>\r\n                <marker id={MarkerArrowId} markerWidth=\"15\" markerHeight=\"15\" refX=\"5\" refY=\"5\" orient=\"auto\">\r\n                    <path d=\"M 0 0 L 10 5 L 0 10 z\" stroke=\"black\" />\r\n                </marker>\r\n            </defs>\r\n            {props.children}\r\n            {start && start.parentContainerId === props.id && start.x !== undefined && start.y !== undefined && delta && (\r\n                <GraphLine x1={start.x} y1={start.y} x2={start.x + delta.x} y2={start.y + delta.y} selected={false} />\r\n            )}\r\n        </svg>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"GraphLinesContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphLinesContainer.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAYvD;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAqD,CAAC,KAAK,EAAE,EAAE;IAC3F,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC/C,MAAM,EAAE,WAAW;QACnB,OAAO,EAAE,CAAC,IAAS,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,CAAC;QAC/C,CAAC;QACD,OAAO,EAAE,CAAC,OAA0B,EAAE,EAAE,CAAC,CAAC;YACtC,4EAA4E;YAC5E,KAAK,EAAE,OAAO,CAAC,OAAO,EAAS;YAC/B,KAAK,EAAE,OAAO,CAAC,8BAA8B,EAAS;SACzD,CAAC;KACL,CAAC,CAAC,CAAC;IACJ,OAAO,CACH,eAAK,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM,EAAC,GAAG,EAAE,OAAO,aACxC,yBACI,iBAAQ,EAAE,EAAE,aAAa,EAAE,WAAW,EAAC,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,MAAM,YACzF,eAAM,CAAC,EAAC,uBAAuB,EAAC,MAAM,EAAC,OAAO,GAAG,GAC5C,GACN,EACN,KAAK,CAAC,QAAQ,EACd,KAAK,IAAI,KAAK,CAAC,iBAAiB,KAAK,KAAK,CAAC,EAAE,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,CAAC,CAAC,KAAK,SAAS,IAAI,KAAK,IAAI,CACzG,KAAC,SAAS,IAAC,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAI,CACzG,IACC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC, PropsWithChildren } from \"react\";\r\nimport type { DropTargetMonitor } from \"react-dnd\";\r\nimport { useDrop } from \"react-dnd\";\r\nimport { GraphLine, MarkerArrowId } from \"./GraphLine\";\r\n\r\n/**\r\n * props for the GraphLineContainer\r\n */\r\nexport interface IGraphLinesContainerProps {\r\n    /**\r\n     * id of the container\r\n     */\r\n    id: string;\r\n}\r\n\r\n/**\r\n * this component handles the dragging of new connections\r\n * @param props\r\n * @returns\r\n */\r\nexport const GraphLinesContainer: FC<PropsWithChildren<IGraphLinesContainerProps>> = (props) => {\r\n    const [{ start, delta }, dropRef] = useDrop(() => ({\r\n        accept: \"connector\",\r\n        canDrop: (item: any) => {\r\n            return item.parentContainerId === props.id;\r\n        },\r\n        collect: (monitor: DropTargetMonitor) => ({\r\n            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\r\n            start: monitor.getItem() as any,\r\n            delta: monitor.getDifferenceFromInitialOffset() as any,\r\n        }),\r\n    }));\r\n    return (\r\n        <svg width=\"100%\" height=\"100%\" ref={dropRef}>\r\n            <defs>\r\n                <marker id={MarkerArrowId} markerWidth=\"15\" markerHeight=\"15\" refX=\"5\" refY=\"5\" orient=\"auto\">\r\n                    <path d=\"M 0 0 L 10 5 L 0 10 z\" stroke=\"black\" />\r\n                </marker>\r\n            </defs>\r\n            {props.children}\r\n            {start && start.parentContainerId === props.id && start.x !== undefined && start.y !== undefined && delta && (\r\n                <GraphLine x1={start.x} y1={start.y} x2={start.x + delta.x} y2={start.y + delta.y} selected={false} />\r\n            )}\r\n        </svg>\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/NodeRenderer.js

@@ -6,7 +6,7 @@ import { SingleGraphNode } from "./GraphNode.js";
 import { GraphNodesContainer } from "./GraphNodesContainer.js";
 import { GraphLinesContainer } from "./GraphLinesContainer.js";
 import { GraphContextManager } from "./GraphContextManager.js";
-const fullscreenStyle = { width: "100%", height: "100%" };
+const FullscreenStyle = { width: "100%", height: "100%" };
 /**
  * This component is a bridge between the app logic related to the graph, and the actual rendering
  * of it. It manages the nodes' positions and selection states.
@@ -57,7 +57,7 @@ export const NodeRenderer = (props) => {
         };
     }, [selectedLine, selectedNode]);
     const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);
-    return (_jsx("div", { style: fullscreenStyle, children: _jsx(GraphContextManager.Provider, { value: graphContext, children: _jsxs(GraphContainer, { children: [_jsx(GraphNodesContainer, { id: props.id, onNodeMoved: updatePos, children: nodes.map(({ id, label, customData }) => {
+    return (_jsx("div", { style: FullscreenStyle, children: _jsx(GraphContextManager.Provider, { value: graphContext, children: _jsxs(GraphContainer, { children: [_jsx(GraphNodesContainer, { id: props.id, onNodeMoved: updatePos, children: nodes.map(({ id, label, customData }) => {
                             const posInRecord = pos[id] || { x: 0, y: 0 };
                             // eslint-disable-next-line @typescript-eslint/naming-convention
                             const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];

package/components/reactGraphSystem/NodeRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"NodeRenderer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/NodeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType, PropsWithChildren } from \"react\";\r\nimport { useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { SingleGraphNode } from \"./GraphNode\";\r\nimport { GraphNodesContainer } from \"./GraphNodesContainer\";\r\nimport { GraphLinesContainer } from \"./GraphLinesContainer\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst fullscreenStyle = { width: \"100%\", height: \"100%\" };\r\n\r\nexport type IVisualRecordsType = Record<string, { x: number; y: number }>;\r\nexport type IConnectionType = { id: string; sourceId: string; targetId: string };\r\nexport type ICustomDataType = { type: string; value: any };\r\nexport type INodeType = { id: string; label: string; customData?: ICustomDataType };\r\n\r\n/**\r\n * props for the node renderer\r\n */\r\nexport interface INodeRendererProps {\r\n    /**\r\n     * array of connections between nodes\r\n     */\r\n    connections: IConnectionType[];\r\n    /**\r\n     * function called when a new connection is created\r\n     */\r\n    updateConnections: (sourceId: string, targetId: string) => void;\r\n    /**\r\n     * function called when a connection is deleted\r\n     */\r\n    deleteLine: (lineId: string) => void;\r\n    /**\r\n     * function called when a node is deleted\r\n     */\r\n    deleteNode: (nodeId: string) => void;\r\n    /**\r\n     * array of all nodes\r\n     */\r\n    nodes: INodeType[];\r\n    /**\r\n     * id of the node to highlight\r\n     */\r\n    highlightedNode?: Nullable<string>;\r\n    /**\r\n     * function to be called if a node is selected\r\n     */\r\n    selectNode?: (nodeId: Nullable<string>) => void;\r\n    /**\r\n     * id of this renderer\r\n     */\r\n    id: string;\r\n    /**\r\n     * optional list of custom components to be rendered inside nodes of\r\n     * a certain type\r\n     */\r\n    customComponents?: Record<string, ComponentType<any>>;\r\n}\r\n\r\n/**\r\n * This component is a bridge between the app logic related to the graph, and the actual rendering\r\n * of it. It manages the nodes' positions and selection states.\r\n * @param props\r\n * @returns\r\n */\r\nexport const NodeRenderer = (props: PropsWithChildren<INodeRendererProps>) => {\r\n    const { nodes, connections, updateConnections, highlightedNode } = props;\r\n    // Store the nodes positions\r\n    const [pos, setPos] = useState<IVisualRecordsType>({});\r\n    const [selectedLine, setSelectedLine] = useState<string | null>(null);\r\n    const [selectedNode, setSelectedNode] = useState<string | null>(null);\r\n\r\n    const updatePos = (id: string, x: number, y: number) => {\r\n        setPos((currentPos) => {\r\n            const currPos = currentPos[id] || { x: 0, y: 0 };\r\n            currentPos[id] = { x: currPos.x + x, y: currPos.y + y };\r\n            return { ...currentPos };\r\n        });\r\n    };\r\n\r\n    const onNodesConnected = (sourceId: string, targetId: string) => {\r\n        updateConnections(sourceId, targetId);\r\n    };\r\n\r\n    const onLineSelected = (lineId: string) => {\r\n        setSelectedLine(lineId);\r\n        setSelectedNode(null);\r\n    };\r\n\r\n    const onNodeSelected = (nodeId: string) => {\r\n        setSelectedNode(nodeId);\r\n        setSelectedLine(null);\r\n    };\r\n\r\n    useEffect(() => {\r\n        props.selectNode && props.selectNode(selectedNode);\r\n    }, [selectedNode]);\r\n\r\n    const onKeyDown = (evt: KeyboardEvent) => {\r\n        if (evt.key === \"Delete\") {\r\n            if (selectedLine) {\r\n                props.deleteLine(selectedLine);\r\n            } else if (selectedNode) {\r\n                props.deleteNode(selectedNode);\r\n            }\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        document.addEventListener(\"keydown\", onKeyDown);\r\n        return () => {\r\n            document.removeEventListener(\"keydown\", onKeyDown);\r\n        };\r\n    }, [selectedLine, selectedNode]);\r\n\r\n    const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);\r\n    return (\r\n        <div style={fullscreenStyle}>\r\n            <GraphContextManager.Provider value={graphContext}>\r\n                <GraphContainer>\r\n                    <GraphNodesContainer id={props.id} onNodeMoved={updatePos}>\r\n                        {nodes.map(({ id, label, customData }) => {\r\n                            const posInRecord = pos[id] || { x: 0, y: 0 };\r\n                            // eslint-disable-next-line @typescript-eslint/naming-convention\r\n                            const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];\r\n                            return (\r\n                                <SingleGraphNode\r\n                                    parentContainerId={props.id}\r\n                                    key={id}\r\n                                    id={id}\r\n                                    name={label}\r\n                                    x={posInRecord.x}\r\n                                    y={posInRecord.y}\r\n                                    selected={id === selectedNode}\r\n                                    highlighted={id === highlightedNode}\r\n                                >\r\n                                    {CustomComponent && <CustomComponent {...customData.value} />}\r\n                                </SingleGraphNode>\r\n                            );\r\n                        })}\r\n                    </GraphNodesContainer>\r\n                    <GraphLinesContainer id={props.id}>\r\n                        {connections.map(({ id, sourceId, targetId }) => {\r\n                            const sourcePos = pos[sourceId] || { x: 0, y: 0 };\r\n                            const targetPos = pos[targetId] || { x: 0, y: 0 };\r\n                            return <GraphLine key={id} id={id} x1={sourcePos.x} y1={sourcePos.y} x2={targetPos.x} y2={targetPos.y} selected={id === selectedLine} />;\r\n                        })}\r\n                    </GraphLinesContainer>\r\n                </GraphContainer>\r\n            </GraphContextManager.Provider>\r\n        </div>\r\n    );\r\n};\r\n"]}
+{"version":3,"file":"NodeRenderer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/NodeRenderer.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType, PropsWithChildren } from \"react\";\r\nimport { useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { SingleGraphNode } from \"./GraphNode\";\r\nimport { GraphNodesContainer } from \"./GraphNodesContainer\";\r\nimport { GraphLinesContainer } from \"./GraphLinesContainer\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\nimport type { Nullable } from \"core/types\";\r\n\r\nconst FullscreenStyle = { width: \"100%\", height: \"100%\" };\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type IVisualRecordsType = Record<string, { x: number; y: number }>;\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type IConnectionType = { id: string; sourceId: string; targetId: string };\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type ICustomDataType = { type: string; value: any };\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport type INodeType = { id: string; label: string; customData?: ICustomDataType };\r\n\r\n/**\r\n * props for the node renderer\r\n */\r\nexport interface INodeRendererProps {\r\n    /**\r\n     * array of connections between nodes\r\n     */\r\n    connections: IConnectionType[];\r\n    /**\r\n     * function called when a new connection is created\r\n     */\r\n    updateConnections: (sourceId: string, targetId: string) => void;\r\n    /**\r\n     * function called when a connection is deleted\r\n     */\r\n    deleteLine: (lineId: string) => void;\r\n    /**\r\n     * function called when a node is deleted\r\n     */\r\n    deleteNode: (nodeId: string) => void;\r\n    /**\r\n     * array of all nodes\r\n     */\r\n    nodes: INodeType[];\r\n    /**\r\n     * id of the node to highlight\r\n     */\r\n    highlightedNode?: Nullable<string>;\r\n    /**\r\n     * function to be called if a node is selected\r\n     */\r\n    selectNode?: (nodeId: Nullable<string>) => void;\r\n    /**\r\n     * id of this renderer\r\n     */\r\n    id: string;\r\n    /**\r\n     * optional list of custom components to be rendered inside nodes of\r\n     * a certain type\r\n     */\r\n    customComponents?: Record<string, ComponentType<any>>;\r\n}\r\n\r\n/**\r\n * This component is a bridge between the app logic related to the graph, and the actual rendering\r\n * of it. It manages the nodes' positions and selection states.\r\n * @param props\r\n * @returns\r\n */\r\nexport const NodeRenderer = (props: PropsWithChildren<INodeRendererProps>) => {\r\n    const { nodes, connections, updateConnections, highlightedNode } = props;\r\n    // Store the nodes positions\r\n    const [pos, setPos] = useState<IVisualRecordsType>({});\r\n    const [selectedLine, setSelectedLine] = useState<string | null>(null);\r\n    const [selectedNode, setSelectedNode] = useState<string | null>(null);\r\n\r\n    const updatePos = (id: string, x: number, y: number) => {\r\n        setPos((currentPos) => {\r\n            const currPos = currentPos[id] || { x: 0, y: 0 };\r\n            currentPos[id] = { x: currPos.x + x, y: currPos.y + y };\r\n            return { ...currentPos };\r\n        });\r\n    };\r\n\r\n    const onNodesConnected = (sourceId: string, targetId: string) => {\r\n        updateConnections(sourceId, targetId);\r\n    };\r\n\r\n    const onLineSelected = (lineId: string) => {\r\n        setSelectedLine(lineId);\r\n        setSelectedNode(null);\r\n    };\r\n\r\n    const onNodeSelected = (nodeId: string) => {\r\n        setSelectedNode(nodeId);\r\n        setSelectedLine(null);\r\n    };\r\n\r\n    useEffect(() => {\r\n        props.selectNode && props.selectNode(selectedNode);\r\n    }, [selectedNode]);\r\n\r\n    const onKeyDown = (evt: KeyboardEvent) => {\r\n        if (evt.key === \"Delete\") {\r\n            if (selectedLine) {\r\n                props.deleteLine(selectedLine);\r\n            } else if (selectedNode) {\r\n                props.deleteNode(selectedNode);\r\n            }\r\n        }\r\n    };\r\n\r\n    useEffect(() => {\r\n        document.addEventListener(\"keydown\", onKeyDown);\r\n        return () => {\r\n            document.removeEventListener(\"keydown\", onKeyDown);\r\n        };\r\n    }, [selectedLine, selectedNode]);\r\n\r\n    const graphContext = useMemo(() => ({ updatePos, onNodesConnected, onLineSelected, onNodeSelected }), []);\r\n    return (\r\n        <div style={FullscreenStyle}>\r\n            <GraphContextManager.Provider value={graphContext}>\r\n                <GraphContainer>\r\n                    <GraphNodesContainer id={props.id} onNodeMoved={updatePos}>\r\n                        {nodes.map(({ id, label, customData }) => {\r\n                            const posInRecord = pos[id] || { x: 0, y: 0 };\r\n                            // eslint-disable-next-line @typescript-eslint/naming-convention\r\n                            const CustomComponent = customData && customData.type && props.customComponents && props.customComponents[customData.type];\r\n                            return (\r\n                                <SingleGraphNode\r\n                                    parentContainerId={props.id}\r\n                                    key={id}\r\n                                    id={id}\r\n                                    name={label}\r\n                                    x={posInRecord.x}\r\n                                    y={posInRecord.y}\r\n                                    selected={id === selectedNode}\r\n                                    highlighted={id === highlightedNode}\r\n                                >\r\n                                    {CustomComponent && <CustomComponent {...customData.value} />}\r\n                                </SingleGraphNode>\r\n                            );\r\n                        })}\r\n                    </GraphNodesContainer>\r\n                    <GraphLinesContainer id={props.id}>\r\n                        {connections.map(({ id, sourceId, targetId }) => {\r\n                            const sourcePos = pos[sourceId] || { x: 0, y: 0 };\r\n                            const targetPos = pos[targetId] || { x: 0, y: 0 };\r\n                            return <GraphLine key={id} id={id} x1={sourcePos.x} y1={sourcePos.y} x2={targetPos.x} y2={targetPos.y} selected={id === selectedLine} />;\r\n                        })}\r\n                    </GraphLinesContainer>\r\n                </GraphContainer>\r\n            </GraphContextManager.Provider>\r\n        </div>\r\n    );\r\n};\r\n"]}

package/components/reactGraphSystem/useGraphContext.js

@@ -4,6 +4,7 @@ import { GraphContextManager } from "./GraphContextManager.js";
  * utility hook to assist using the graph context
  * @returns
  */
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export const useGraphContext = () => {
     const context = useContext(GraphContextManager);
     return context;

package/components/reactGraphSystem/useGraphContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"useGraphContext.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/useGraphContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;GAGG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAChD,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import { useContext } from \"react\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\n\r\n/**\r\n * utility hook to assist using the graph context\r\n * @returns\r\n */\r\nexport const useGraphContext = () => {\r\n    const context = useContext(GraphContextManager);\r\n    return context;\r\n};\r\n"]}
+{"version":3,"file":"useGraphContext.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/useGraphContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D;;;GAGG;AACH,gEAAgE;AAChE,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,EAAE;IAChC,MAAM,OAAO,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAChD,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import { useContext } from \"react\";\r\nimport { GraphContextManager } from \"./GraphContextManager\";\r\n\r\n/**\r\n * utility hook to assist using the graph context\r\n * @returns\r\n */\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport const useGraphContext = () => {\r\n    const context = useContext(GraphContextManager);\r\n    return context;\r\n};\r\n"]}

package/constToOptionsMaps.d.ts

@@ -1,7 +1,7 @@
 /**
  * Used by both particleSystem and alphaBlendModes
  */
-export declare const commonBlendModes: {
+export declare const CommonBlendModes: {
     label: string;
     value: number;
 }[];
@@ -10,14 +10,14 @@ export declare const commonBlendModes: {
  * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference
  * the ParticleSystem.FOO consts explicitly (as the underlying const values are different - they get mapped to engine consts within baseParticleSystem.ts)
  */
-export declare const blendModeOptions: {
+export declare const BlendModeOptions: {
     label: string;
     value: number;
 }[];
 /**
  * Used to populated the alphaMode dropdown in our various tools (Node Editor, Inspector, etc.)
  */
-export declare const alphaModeOptions: {
+export declare const AlphaModeOptions: {
     label: string;
     value: number;
 }[];

package/constToOptionsMaps.js

@@ -3,7 +3,7 @@ import { ParticleSystem } from "@babylonjs/core/Particles.js";
 /**
  * Used by both particleSystem and alphaBlendModes
  */
-export const commonBlendModes = [
+export const CommonBlendModes = [
     { label: "Maximized", value: Constants.ALPHA_MAXIMIZED },
     { label: "Pre-multiplied", value: Constants.ALPHA_PREMULTIPLIED },
     { label: "Pre-multiplied Porter Duff", value: Constants.ALPHA_PREMULTIPLIED_PORTERDUFF },
@@ -21,22 +21,22 @@ export const commonBlendModes = [
  * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference
  * the ParticleSystem.FOO consts explicitly (as the underlying const values are different - they get mapped to engine consts within baseParticleSystem.ts)
  */
-export const blendModeOptions = [
+export const BlendModeOptions = [
     { label: "Add", value: ParticleSystem.BLENDMODE_ADD },
     { label: "Multiply", value: ParticleSystem.BLENDMODE_MULTIPLY },
     { label: "Multiply Add", value: ParticleSystem.BLENDMODE_MULTIPLYADD },
     { label: "One One", value: ParticleSystem.BLENDMODE_ONEONE },
     { label: "Standard", value: ParticleSystem.BLENDMODE_STANDARD },
     { label: "Subtract", value: ParticleSystem.BLENDMODE_SUBTRACT },
-].concat(commonBlendModes);
+].concat(CommonBlendModes);
 /**
  * Used to populated the alphaMode dropdown in our various tools (Node Editor, Inspector, etc.)
  */
-export const alphaModeOptions = [
+export const AlphaModeOptions = [
     { label: "Combine", value: Constants.ALPHA_COMBINE },
     { label: "One One", value: Constants.ALPHA_ONEONE },
     { label: "Add", value: Constants.ALPHA_ADD },
     { label: "Subtract", value: Constants.ALPHA_SUBTRACT },
     { label: "Multiply", value: Constants.ALPHA_MULTIPLY },
-].concat(commonBlendModes);
+].concat(CommonBlendModes);
 //# sourceMappingURL=constToOptionsMaps.js.map

package/constToOptionsMaps.js.map

@@ -1 +1 @@
-{"version":3,"file":"constToOptionsMaps.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/constToOptionsMaps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,mCAAqB;AACzC,OAAO,EAAE,cAAc,EAAE,qCAAuB;AAEhD;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IACjE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,SAAS,CAAC,8BAA8B,EAAE;IACxF,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,CAAC,gBAAgB,EAAE;IAC3D,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IAChE,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,kBAAkB,EAAE;IAChE,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,iCAAiC,EAAE,KAAK,EAAE,SAAS,CAAC,6BAA6B,EAAE;IAC5F,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,oBAAoB,EAAE;IAClE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,SAAS,CAAC,sBAAsB,EAAE;CACzE,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,aAAa,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,gBAAgB,EAAE;IAC5D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;CAClE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE;IACpD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,YAAY,EAAE;IACnD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE;IAC5C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;IACtD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;CACzD,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { Constants } from \"core/Engines\";\r\nimport { ParticleSystem } from \"core/Particles\";\r\n\r\n/**\r\n * Used by both particleSystem and alphaBlendModes\r\n */\r\nexport const commonBlendModes = [\r\n    { label: \"Maximized\", value: Constants.ALPHA_MAXIMIZED },\r\n    { label: \"Pre-multiplied\", value: Constants.ALPHA_PREMULTIPLIED },\r\n    { label: \"Pre-multiplied Porter Duff\", value: Constants.ALPHA_PREMULTIPLIED_PORTERDUFF },\r\n    { label: \"Screen Mode\", value: Constants.ALPHA_SCREENMODE },\r\n    { label: \"OneOne OneOne\", value: Constants.ALPHA_ONEONE_ONEONE },\r\n    { label: \"Alpha to Color\", value: Constants.ALPHA_ALPHATOCOLOR },\r\n    { label: \"Reverse One Minus\", value: Constants.ALPHA_REVERSEONEMINUS },\r\n    { label: \"Source+Dest * (1 - SourceAlpha)\", value: Constants.ALPHA_SRC_DSTONEMINUSSRCALPHA },\r\n    { label: \"OneOne OneZero\", value: Constants.ALPHA_ONEONE_ONEZERO },\r\n    { label: \"Exclusion\", value: Constants.ALPHA_EXCLUSION },\r\n    { label: \"Layer Accumulate\", value: Constants.ALPHA_LAYER_ACCUMULATE },\r\n];\r\n\r\n/**\r\n * Used to populated the blendMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference\r\n * the ParticleSystem.FOO consts explicitly (as the underlying const values are different - they get mapped to engine consts within baseParticleSystem.ts)\r\n */\r\nexport const blendModeOptions = [\r\n    { label: \"Add\", value: ParticleSystem.BLENDMODE_ADD },\r\n    { label: \"Multiply\", value: ParticleSystem.BLENDMODE_MULTIPLY },\r\n    { label: \"Multiply Add\", value: ParticleSystem.BLENDMODE_MULTIPLYADD },\r\n    { label: \"One One\", value: ParticleSystem.BLENDMODE_ONEONE },\r\n    { label: \"Standard\", value: ParticleSystem.BLENDMODE_STANDARD },\r\n    { label: \"Subtract\", value: ParticleSystem.BLENDMODE_SUBTRACT },\r\n].concat(commonBlendModes);\r\n\r\n/**\r\n * Used to populated the alphaMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n */\r\nexport const alphaModeOptions = [\r\n    { label: \"Combine\", value: Constants.ALPHA_COMBINE },\r\n    { label: \"One One\", value: Constants.ALPHA_ONEONE },\r\n    { label: \"Add\", value: Constants.ALPHA_ADD },\r\n    { label: \"Subtract\", value: Constants.ALPHA_SUBTRACT },\r\n    { label: \"Multiply\", value: Constants.ALPHA_MULTIPLY },\r\n].concat(commonBlendModes);\r\n"]}
+{"version":3,"file":"constToOptionsMaps.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/constToOptionsMaps.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,mCAAqB;AACzC,OAAO,EAAE,cAAc,EAAE,qCAAuB;AAEhD;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IACjE,EAAE,KAAK,EAAE,4BAA4B,EAAE,KAAK,EAAE,SAAS,CAAC,8BAA8B,EAAE;IACxF,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,SAAS,CAAC,gBAAgB,EAAE;IAC3D,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,CAAC,mBAAmB,EAAE;IAChE,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,kBAAkB,EAAE;IAChE,EAAE,KAAK,EAAE,mBAAmB,EAAE,KAAK,EAAE,SAAS,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,iCAAiC,EAAE,KAAK,EAAE,SAAS,CAAC,6BAA6B,EAAE;IAC5F,EAAE,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,CAAC,oBAAoB,EAAE;IAClE,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE;IACxD,EAAE,KAAK,EAAE,kBAAkB,EAAE,KAAK,EAAE,SAAS,CAAC,sBAAsB,EAAE;CACzE,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,cAAc,CAAC,aAAa,EAAE;IACrD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,CAAC,qBAAqB,EAAE;IACtE,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,gBAAgB,EAAE;IAC5D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;IAC/D,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,cAAc,CAAC,kBAAkB,EAAE;CAClE,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAE3B;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,aAAa,EAAE;IACpD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,CAAC,YAAY,EAAE;IACnD,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,CAAC,SAAS,EAAE;IAC5C,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;IACtD,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,cAAc,EAAE;CACzD,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import { Constants } from \"core/Engines\";\r\nimport { ParticleSystem } from \"core/Particles\";\r\n\r\n/**\r\n * Used by both particleSystem and alphaBlendModes\r\n */\r\nexport const CommonBlendModes = [\r\n    { label: \"Maximized\", value: Constants.ALPHA_MAXIMIZED },\r\n    { label: \"Pre-multiplied\", value: Constants.ALPHA_PREMULTIPLIED },\r\n    { label: \"Pre-multiplied Porter Duff\", value: Constants.ALPHA_PREMULTIPLIED_PORTERDUFF },\r\n    { label: \"Screen Mode\", value: Constants.ALPHA_SCREENMODE },\r\n    { label: \"OneOne OneOne\", value: Constants.ALPHA_ONEONE_ONEONE },\r\n    { label: \"Alpha to Color\", value: Constants.ALPHA_ALPHATOCOLOR },\r\n    { label: \"Reverse One Minus\", value: Constants.ALPHA_REVERSEONEMINUS },\r\n    { label: \"Source+Dest * (1 - SourceAlpha)\", value: Constants.ALPHA_SRC_DSTONEMINUSSRCALPHA },\r\n    { label: \"OneOne OneZero\", value: Constants.ALPHA_ONEONE_ONEZERO },\r\n    { label: \"Exclusion\", value: Constants.ALPHA_EXCLUSION },\r\n    { label: \"Layer Accumulate\", value: Constants.ALPHA_LAYER_ACCUMULATE },\r\n];\r\n\r\n/**\r\n * Used to populated the blendMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n * The below ParticleSystem consts were defined before new Engine alpha blend modes were added, so we have to reference\r\n * the ParticleSystem.FOO consts explicitly (as the underlying const values are different - they get mapped to engine consts within baseParticleSystem.ts)\r\n */\r\nexport const BlendModeOptions = [\r\n    { label: \"Add\", value: ParticleSystem.BLENDMODE_ADD },\r\n    { label: \"Multiply\", value: ParticleSystem.BLENDMODE_MULTIPLY },\r\n    { label: \"Multiply Add\", value: ParticleSystem.BLENDMODE_MULTIPLYADD },\r\n    { label: \"One One\", value: ParticleSystem.BLENDMODE_ONEONE },\r\n    { label: \"Standard\", value: ParticleSystem.BLENDMODE_STANDARD },\r\n    { label: \"Subtract\", value: ParticleSystem.BLENDMODE_SUBTRACT },\r\n].concat(CommonBlendModes);\r\n\r\n/**\r\n * Used to populated the alphaMode dropdown in our various tools (Node Editor, Inspector, etc.)\r\n */\r\nexport const AlphaModeOptions = [\r\n    { label: \"Combine\", value: Constants.ALPHA_COMBINE },\r\n    { label: \"One One\", value: Constants.ALPHA_ONEONE },\r\n    { label: \"Add\", value: Constants.ALPHA_ADD },\r\n    { label: \"Subtract\", value: Constants.ALPHA_SUBTRACT },\r\n    { label: \"Multiply\", value: Constants.ALPHA_MULTIPLY },\r\n].concat(CommonBlendModes);\r\n"]}

package/copyCommandToClipboard.js

@@ -1,14 +1,15 @@
 import { GetClassName } from "@babylonjs/core/Misc/typeStore.js";
 // Check if BABYLON namespace exists
-let babylonNamespace = "";
-const globalObject = typeof global !== "undefined" ? global : typeof window !== "undefined" ? window : undefined;
-if (typeof globalObject !== "undefined") {
-    if (typeof globalObject.BABYLON !== "undefined") {
-        babylonNamespace = "BABYLON.";
+let BabylonNamespace = "";
+const GlobalObject = typeof global !== "undefined" ? global : typeof window !== "undefined" ? window : undefined;
+if (typeof GlobalObject !== "undefined") {
+    if (typeof GlobalObject.BABYLON !== "undefined") {
+        BabylonNamespace = "BABYLON.";
     }
 }
 // Inspired by previous copyToClipboard() function which was copying Color3
 // Copies strCommand to clipboard
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export function copyCommandToClipboard(strCommand) {
     const element = document.createElement("div");
     element.textContent = strCommand;
@@ -24,11 +25,12 @@ export function copyCommandToClipboard(strCommand) {
 }
 // Return the class name of the considered target
 // babylonNamespace is either "" (ES6) or "BABYLON."
+// eslint-disable-next-line @typescript-eslint/naming-convention
 export function getClassNameWithNamespace(obj) {
     let className = GetClassName(obj);
     if (className.includes("BABYLON.")) {
         className = className.split("BABYLON.")[1];
     }
-    return { className, babylonNamespace };
+    return { className, babylonNamespace: BabylonNamespace };
 }
 //# sourceMappingURL=copyCommandToClipboard.js.map

package/copyCommandToClipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"copyCommandToClipboard.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/copyCommandToClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,0CAA4B;AAEnD,oCAAoC;AACpC,IAAI,gBAAgB,GAAG,EAAE,CAAC;AAC1B,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;AACjH,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE,CAAC;IACtC,IAAI,OAAa,YAAa,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;QACrD,gBAAgB,GAAG,UAAU,CAAC;IAClC,CAAC;AACL,CAAC;AAED,2EAA2E;AAC3E,iCAAiC;AACjC,MAAM,UAAU,sBAAsB,CAAC,UAAkB;IACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;QACtB,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QACrC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,MAAM,CAAC,YAAY,EAAG,CAAC,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,YAAY,EAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,MAAM,EAAE,CAAC;AACrB,CAAC;AAED,iDAAiD;AACjD,oDAAoD;AACpD,MAAM,UAAU,yBAAyB,CAAC,GAAQ;IAC9C,IAAI,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;QACjC,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;AAC3C,CAAC","sourcesContent":["import { GetClassName } from \"core/Misc/typeStore\";\r\n\r\n// Check if BABYLON namespace exists\r\nlet babylonNamespace = \"\";\r\nconst globalObject = typeof global !== \"undefined\" ? global : typeof window !== \"undefined\" ? window : undefined;\r\nif (typeof globalObject !== \"undefined\") {\r\n    if (typeof (<any>globalObject).BABYLON !== \"undefined\") {\r\n        babylonNamespace = \"BABYLON.\";\r\n    }\r\n}\r\n\r\n// Inspired by previous copyToClipboard() function which was copying Color3\r\n// Copies strCommand to clipboard\r\nexport function copyCommandToClipboard(strCommand: string) {\r\n    const element = document.createElement(\"div\");\r\n    element.textContent = strCommand;\r\n    document.body.appendChild(element);\r\n\r\n    if (window.getSelection) {\r\n        const range = document.createRange();\r\n        range.selectNode(element);\r\n        window.getSelection()!.removeAllRanges();\r\n        window.getSelection()!.addRange(range);\r\n    }\r\n\r\n    document.execCommand(\"copy\");\r\n    element.remove();\r\n}\r\n\r\n// Return the class name of the considered target\r\n// babylonNamespace is either \"\" (ES6) or \"BABYLON.\"\r\nexport function getClassNameWithNamespace(obj: any): { className: string; babylonNamespace: string } {\r\n    let className = GetClassName(obj);\r\n    if (className.includes(\"BABYLON.\")) {\r\n        className = className.split(\"BABYLON.\")[1];\r\n    }\r\n    return { className, babylonNamespace };\r\n}\r\n"]}
+{"version":3,"file":"copyCommandToClipboard.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/copyCommandToClipboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,0CAA4B;AAEnD,oCAAoC;AACpC,IAAI,gBAAgB,GAAG,EAAE,CAAC;AAC1B,MAAM,YAAY,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;AACjH,IAAI,OAAO,YAAY,KAAK,WAAW,EAAE,CAAC;IACtC,IAAI,OAAa,YAAa,CAAC,OAAO,KAAK,WAAW,EAAE,CAAC;QACrD,gBAAgB,GAAG,UAAU,CAAC;IAClC,CAAC;AACL,CAAC;AAED,2EAA2E;AAC3E,iCAAiC;AACjC,gEAAgE;AAChE,MAAM,UAAU,sBAAsB,CAAC,UAAkB;IACrD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC;IACjC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAEnC,IAAI,MAAM,CAAC,YAAY,EAAE,CAAC;QACtB,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;QACrC,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC1B,MAAM,CAAC,YAAY,EAAG,CAAC,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,YAAY,EAAG,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,MAAM,EAAE,CAAC;AACrB,CAAC;AAED,iDAAiD;AACjD,oDAAoD;AACpD,gEAAgE;AAChE,MAAM,UAAU,yBAAyB,CAAC,GAAQ;IAC9C,IAAI,SAAS,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC,IAAI,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC;QACjC,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC;AAC7D,CAAC","sourcesContent":["import { GetClassName } from \"core/Misc/typeStore\";\r\n\r\n// Check if BABYLON namespace exists\r\nlet BabylonNamespace = \"\";\r\nconst GlobalObject = typeof global !== \"undefined\" ? global : typeof window !== \"undefined\" ? window : undefined;\r\nif (typeof GlobalObject !== \"undefined\") {\r\n    if (typeof (<any>GlobalObject).BABYLON !== \"undefined\") {\r\n        BabylonNamespace = \"BABYLON.\";\r\n    }\r\n}\r\n\r\n// Inspired by previous copyToClipboard() function which was copying Color3\r\n// Copies strCommand to clipboard\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function copyCommandToClipboard(strCommand: string) {\r\n    const element = document.createElement(\"div\");\r\n    element.textContent = strCommand;\r\n    document.body.appendChild(element);\r\n\r\n    if (window.getSelection) {\r\n        const range = document.createRange();\r\n        range.selectNode(element);\r\n        window.getSelection()!.removeAllRanges();\r\n        window.getSelection()!.addRange(range);\r\n    }\r\n\r\n    document.execCommand(\"copy\");\r\n    element.remove();\r\n}\r\n\r\n// Return the class name of the considered target\r\n// babylonNamespace is either \"\" (ES6) or \"BABYLON.\"\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport function getClassNameWithNamespace(obj: any): { className: string; babylonNamespace: string } {\r\n    let className = GetClassName(obj);\r\n    if (className.includes(\"BABYLON.\")) {\r\n        className = className.split(\"BABYLON.\")[1];\r\n    }\r\n    return { className, babylonNamespace: BabylonNamespace };\r\n}\r\n"]}

package/historyStack.js

@@ -69,8 +69,9 @@ export class HistoryStack {
         this._locked = false;
     }
     _generateJSONDiff(obj1, obj2) {
-        if (obj1 === obj2)
+        if (obj1 === obj2) {
             return undefined;
+        }
         if (obj1 === null || obj2 === null || typeof obj1 !== "object" || typeof obj2 !== "object") {
             if (obj1 !== obj2 && obj2 === undefined) {
                 return "@d@";