npm - @babylonjs/shared-ui-components - Versions diffs - 7.6.0 → 7.6.1 - Mend

@babylonjs/shared-ui-components 7.6.0 → 7.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (55) hide show

package/components/colorPicker/ColorComponentEntry.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ export interface IColorComponentEntryProps {
     disabled?: boolean;
     lockObject: LockObject;
 }
-export declare class ColorComponentEntry extends React.Component<IColorComponentEntryProps> {
+export declare class ColorComponentComponentEntry extends React.Component<IColorComponentEntryProps> {
     constructor(props: IColorComponentEntryProps);
     updateValue(valueString: string): void;
     lock(): void;

package/components/colorPicker/ColorComponentEntry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import style from "./ColorComponentEntry.modules.scss";
-export class ColorComponentEntry extends React.Component {
+export class ColorComponentComponentEntry extends React.Component {
     constructor(props) {
         super(props);
     }

package/components/colorPicker/ColorComponentEntry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorComponentEntry.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/ColorComponentEntry.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,oCAAoC,CAAC;AAYvD,MAAM,OAAO,~~mBAAoB~~,SAAQ,KAAK,CAAC,SAAoC;~~IAC/E~~,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,WAAW,CAAC,WAAmB;QAC3B,IAAI,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC/B,OAAO;SACV;QAED,IAAI,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;QAE1C,IAAI,KAAK,CAAC,aAAa,CAAC,EAAE;YACtB,OAAO;SACV;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAC/D,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAC/D,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;SAClC;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;SACrC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;SACtC;IACL,CAAC;IAEe,MAAM;QAClB,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,oBAAoB,aACtC,cAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,YAC3C,gBACI,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,EACrD,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAC/B,GACA,EACN,cAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAO,IACvE,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorComponentEntry.modules.scss\";\r\n\r\nexport interface IColorComponentEntryProps {\r\n value: number;\r\n label: string;\r\n max?: number;\r\n min?: number;\r\n onChange: (value: number) => void;\r\n disabled?: boolean;\r\n lockObject: LockObject;\r\n}\r\n\r\nexport class ~~ColorComponentEntry~~ extends React.Component<IColorComponentEntryProps> {\r\n constructor(props: IColorComponentEntryProps) {\r\n super(props);\r\n }\r\n\r\n updateValue(valueString: string) {\r\n if (/[^0-9.-]/g.test(valueString)) {\r\n return;\r\n }\r\n\r\n let valueAsNumber = parseInt(valueString);\r\n\r\n if (isNaN(valueAsNumber)) {\r\n return;\r\n }\r\n if (this.props.max != undefined && valueAsNumber > this.props.max) {\r\n valueAsNumber = this.props.max;\r\n }\r\n if (this.props.min != undefined && valueAsNumber < this.props.min) {\r\n valueAsNumber = this.props.min;\r\n }\r\n\r\n this.props.onChange(valueAsNumber);\r\n }\r\n\r\n lock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = true;\r\n }\r\n }\r\n\r\n unlock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = false;\r\n }\r\n }\r\n\r\n public override render() {\r\n return (\r\n <div className={style.colorPickerComponent}>\r\n <div className={style.colorPickerComponentValue}>\r\n <input\r\n type=\"number\"\r\n step={1}\r\n className=\"numeric-input\"\r\n value={this.props.value}\r\n onBlur={() => this.unlock()}\r\n onFocus={() => this.lock()}\r\n onChange={(evt) => this.updateValue(evt.target.value)}\r\n disabled={this.props.disabled}\r\n />\r\n </div>\r\n <div className={style.colorPickerComponentLabel}>{this.props.label}</div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"ColorComponentEntry.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/ColorComponentEntry.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,oCAAoC,CAAC;AAYvD,MAAM,OAAO,4BAA6B,SAAQ,KAAK,CAAC,SAAoC;IACxF,YAAY,KAAgC;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC;IAED,WAAW,CAAC,WAAmB;QAC3B,IAAI,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE;YAC/B,OAAO;SACV;QAED,IAAI,aAAa,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;QAE1C,IAAI,KAAK,CAAC,aAAa,CAAC,EAAE;YACtB,OAAO;SACV;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAC/D,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;SAClC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE;YAC/D,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;SAClC;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;IACvC,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;SACrC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;SACtC;IACL,CAAC;IAEe,MAAM;QAClB,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,oBAAoB,aACtC,cAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,YAC3C,gBACI,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,eAAe,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,EACrD,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,GAC/B,GACA,EACN,cAAK,SAAS,EAAE,KAAK,CAAC,yBAAyB,YAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAO,IACvE,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorComponentEntry.modules.scss\";\r\n\r\nexport interface IColorComponentEntryProps {\r\n value: number;\r\n label: string;\r\n max?: number;\r\n min?: number;\r\n onChange: (value: number) => void;\r\n disabled?: boolean;\r\n lockObject: LockObject;\r\n}\r\n\r\nexport class ColorComponentComponentEntry extends React.Component<IColorComponentEntryProps> {\r\n constructor(props: IColorComponentEntryProps) {\r\n super(props);\r\n }\r\n\r\n updateValue(valueString: string) {\r\n if (/[^0-9.-]/g.test(valueString)) {\r\n return;\r\n }\r\n\r\n let valueAsNumber = parseInt(valueString);\r\n\r\n if (isNaN(valueAsNumber)) {\r\n return;\r\n }\r\n if (this.props.max != undefined && valueAsNumber > this.props.max) {\r\n valueAsNumber = this.props.max;\r\n }\r\n if (this.props.min != undefined && valueAsNumber < this.props.min) {\r\n valueAsNumber = this.props.min;\r\n }\r\n\r\n this.props.onChange(valueAsNumber);\r\n }\r\n\r\n lock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = true;\r\n }\r\n }\r\n\r\n unlock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = false;\r\n }\r\n }\r\n\r\n public override render() {\r\n return (\r\n <div className={style.colorPickerComponent}>\r\n <div className={style.colorPickerComponentValue}>\r\n <input\r\n type=\"number\"\r\n step={1}\r\n className=\"numeric-input\"\r\n value={this.props.value}\r\n onBlur={() => this.unlock()}\r\n onFocus={() => this.lock()}\r\n onChange={(evt) => this.updateValue(evt.target.value)}\r\n disabled={this.props.disabled}\r\n />\r\n </div>\r\n <div className={style.colorPickerComponentLabel}>{this.props.label}</div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/components/colorPicker/ColorPicker.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import type { LockObject } from "../../tabs/propertyGrids/lockObject";
 /**
  * Interface used to specify creation options for color picker
  */
-export interface IColorPickerProps {
+export interface IColorPickerComponentProps {
     color: Color3 | Color4;
     linearhint?: boolean;
     debugMode?: boolean;
@@ -22,13 +22,13 @@ export interface IColorPickerState {
 /**
  * Class used to create a color picker
  */
-export declare class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {
+export declare class ColorPickerComponent extends React.Component<IColorPickerComponentProps, IColorPickerState> {
     private _saturationRef;
     private _hueRef;
     private _isSaturationPointerDown;
     private _isHuePointerDown;
-    constructor(props: IColorPickerProps);
-    shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState): boolean;
+    constructor(props: IColorPickerComponentProps);
+    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerState): boolean;
     onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>): void;
     onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>): void;
     onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>): void;

package/components/colorPicker/ColorPicker.js CHANGED Viewed

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
-import { ColorComponentEntry } from "./ColorComponentEntry.js";
-import { HexColor } from "./HexColor.js";
+import { ColorComponentComponentEntry } from "./ColorComponentEntry.js";
+import { HexColorComponent } from "./HexColor.js";
 import style from "./ColorPicker.modules.scss";
 import { ClassNames } from "../classNames.js";
 import { Logger } from "@babylonjs/core/Misc/logger.js";
 /**
  * Class used to create a color picker
  */
-export class ColorPicker extends React.Component {
+export class ColorPickerComponent extends React.Component {
     constructor(props) {
         super(props);
         if (this.props.color instanceof Color4) {
@@ -113,19 +113,19 @@ export class ColorPicker extends React.Component {
                             } }), _jsx("div", { className: style.colorPickerHueSlider, ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e), children: _jsx("div", { className: style.colorPickerHueCursor, style: {
                                     left: `${(hsv.r / 360.0) * 100}%`,
                                     border: `1px solid ` + colorHexRef,
-                                } }) })] }), _jsxs("div", { className: style.colorPickerRgb, children: [_jsx("div", { className: style.red, children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
+                                } }) })] }), _jsxs("div", { className: style.colorPickerRgb, children: [_jsx("div", { className: style.red, children: _jsx(ColorComponentComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
                                     this.state.color.r = value / 255.0;
                                     this.forceUpdate();
-                                } }) }), _jsx("div", { className: style.green, children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
+                                } }) }), _jsx("div", { className: style.green, children: _jsx(ColorComponentComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
                                     this.state.color.g = value / 255.0;
                                     this.forceUpdate();
-                                } }) }), _jsx("div", { className: style.blue, children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
+                                } }) }), _jsx("div", { className: style.blue, children: _jsx(ColorComponentComponentEntry, { lockObject: this.props.lockObject, label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
                                     this.state.color.b = value / 255.0;
                                     this.forceUpdate();
-                                } }) }), _jsx("div", { className: ClassNames({ alpha: true, grayed: hasAlpha }, style), children: _jsx(ColorComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
+                                } }) }), _jsx("div", { className: ClassNames({ alpha: true, grayed: hasAlpha }, style), children: _jsx(ColorComponentComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
                                     this.setState({ alpha: value / 255.0 });
                                     this.forceUpdate();
-                                } }) })] }), _jsx(HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
+                                } }) })] }), _jsx(HexColorComponent, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
                         if (hasAlpha) {
                             const color4 = Color4.FromHexString(value);
                             this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });

package/components/colorPicker/ColorPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorComponentEntry } from \"./ColorComponentEntry\";\r\nimport { HexColor } from \"./HexColor\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\n\r\nimport style from \"./ColorPicker.modules.scss\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { Logger } from \"core/Misc/logger\";\r\n\r\n/*\r\n Interface used to specify creation options for color picker\r\n /\r\nexport interface IColorPickerProps {\r\n color: Color3 \| Color4;\r\n linearhint?: boolean;\r\n debugMode?: boolean;\r\n onColorChanged?: (color: Color3 \| Color4) => void;\r\n lockObject: LockObject;\r\n backgroundColor?: string;\r\n}\r\n\r\n/\r\n Interface used to specify creation options for color picker\r\n /\r\nexport interface IColorPickerState {\r\n color: Color3;\r\n alpha: number;\r\n}\r\n\r\n/\r\n Class used to create a color picker\r\n /\r\nexport class ColorPicker extends React.Component<IColorPickerProps, IColorPickerState> {\r\n private _saturationRef: React.RefObject<HTMLDivElement>;\r\n private _hueRef: React.RefObject<HTMLDivElement>;\r\n private _isSaturationPointerDown: boolean;\r\n private _isHuePointerDown: boolean;\r\n\r\n constructor(props: IColorPickerProps) {\r\n super(props);\r\n if (this.props.color instanceof Color4) {\r\n this.state = { color: new Color3(this.props.color.r, this.props.color.g, this.props.color.b), alpha: this.props.color.a };\r\n } else {\r\n this.state = { color: this.props.color.clone(), alpha: 1 };\r\n }\r\n this._saturationRef = React.createRef();\r\n this._hueRef = React.createRef();\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: IColorPickerProps, nextState: IColorPickerState) {\r\n return nextProps.color.toHexString() !== this.props.color.toHexString() \|\| nextState.color.toHexString() !== this.props.color.toHexString();\r\n }\r\n\r\n onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._evaluateSaturation(evt);\r\n this._isSaturationPointerDown = true;\r\n\r\n evt.currentTarget.setPointerCapture(evt.pointerId);\r\n }\r\n\r\n onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._isSaturationPointerDown = false;\r\n evt.currentTarget.releasePointerCapture(evt.pointerId);\r\n }\r\n\r\n onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>) {\r\n if (!this._isSaturationPointerDown) {\r\n return;\r\n }\r\n this._evaluateSaturation(evt);\r\n }\r\n\r\n onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._evaluateHue(evt);\r\n this._isHuePointerDown = true;\r\n\r\n evt.currentTarget.setPointerCapture(evt.pointerId);\r\n }\r\n\r\n onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._isHuePointerDown = false;\r\n evt.currentTarget.releasePointerCapture(evt.pointerId);\r\n }\r\n\r\n onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>) {\r\n if (!this._isHuePointerDown) {\r\n return;\r\n }\r\n this._evaluateHue(evt);\r\n }\r\n\r\n private _evaluateSaturation(evt: React.PointerEvent<HTMLDivElement>) {\r\n const left = evt.nativeEvent.offsetX;\r\n const top = evt.nativeEvent.offsetY;\r\n\r\n const saturation = Math.min(1, Math.max(0.0001, left / this._saturationRef.current!.clientWidth));\r\n const value = Math.min(1, Math.max(0.0001, 1 - top / this._saturationRef.current!.clientHeight));\r\n\r\n if (this.props.debugMode) {\r\n Logger.Log(\"Saturation: \" + saturation);\r\n Logger.Log(\"Value: \" + value);\r\n }\r\n\r\n const hsv = this.state.color.toHSV();\r\n Color3.HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);\r\n if (this.state.alpha === 0) {\r\n this.setState({ alpha: 1 });\r\n }\r\n this.setState({ color: this.state.color });\r\n }\r\n\r\n private _evaluateHue(evt: React.PointerEvent<HTMLDivElement>) {\r\n const left = evt.nativeEvent.offsetX;\r\n\r\n const hue = 360 Math.min(0.9999, Math.max(0.0001, left / this._hueRef.current!.clientWidth));\r\n\r\n if (this.props.debugMode) {\r\n Logger.Log(\"Hue: \" + hue);\r\n }\r\n\r\n const hsv = this.state.color.toHSV();\r\n Color3.HSVtoRGBToRef(hue, Math.max(hsv.g, 0.01), Math.max(hsv.b, 0.01), this.state.color);\r\n this.setState({ color: this.state.color });\r\n }\r\n\r\n override componentDidUpdate() {\r\n this.raiseOnColorChanged();\r\n }\r\n\r\n raiseOnColorChanged() {\r\n if (!this.props.onColorChanged) {\r\n return;\r\n }\r\n\r\n if (this.props.color instanceof Color4) {\r\n const newColor4 = Color4.FromColor3(this.state.color, this.state.alpha);\r\n\r\n this.props.onColorChanged(newColor4);\r\n\r\n return;\r\n }\r\n\r\n this.props.onColorChanged(this.state.color.clone());\r\n }\r\n\r\n public override render() {\r\n const color4 = Color4.FromColor3(this.state.color);\r\n color4.a = this.state.alpha;\r\n const colorHex = color4.toHexString();\r\n const hsv = this.state.color.toHSV();\r\n const colorRef = new Color3();\r\n Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);\r\n const colorHexRef = colorRef.toHexString();\r\n const hasAlpha = this.props.color instanceof Color4;\r\n\r\n return (\r\n <div\r\n className={ClassNames({ colorPickerContainer: true, withHints: this.props.linearhint }, style)}\r\n style={{ backgroundColor: this.props.backgroundColor \|\| \"inherit\" }}\r\n >\r\n <div\r\n className={style.colorPickerSaturation}\r\n onPointerMove={(e) => this.onSaturationPointerMove(e)}\r\n onPointerDown={(e) => this.onSaturationPointerDown(e)}\r\n onPointerUp={(e) => this.onSaturationPointerUp(e)}\r\n ref={this._saturationRef}\r\n style={{\r\n background: colorHexRef,\r\n }}\r\n >\r\n <div className={style.colorPickerSaturationWhite}></div>\r\n <div className={style.colorPickerSaturationBlack}></div>\r\n <div\r\n className={style.colorPickerSaturationCursor}\r\n style={{\r\n top: `${-(hsv.b * 100) + 100}%`,\r\n left: `${hsv.g * 100}%`,\r\n }}\r\n ></div>\r\n </div>\r\n <div className={style.colorPickerHue}>\r\n <div\r\n className={style.colorPickerHueColor}\r\n style={{\r\n background: colorHex,\r\n }}\r\n ></div>\r\n <div\r\n className={style.colorPickerHueSlider}\r\n ref={this._hueRef}\r\n onPointerMove={(e) => this.onHuePointerMove(e)}\r\n onPointerDown={(e) => this.onHuePointerDown(e)}\r\n onPointerUp={(e) => this.onHuePointerUp(e)}\r\n >\r\n <div\r\n className={style.colorPickerHueCursor}\r\n style={{\r\n left: `${(hsv.r / 360.0) * 100}%`,\r\n border: `1px solid ` + colorHexRef,\r\n }}\r\n ></div>\r\n </div>\r\n </div>\r\n {/* <div className=\"color-picker-alpha\"></div> /}\r\n <div className={style.colorPickerRgb}>\r\n <div className={style.red}>\r\n <ColorComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"R\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.r 255)}\r\n onChange={(value) => {\r\n this.state.color.r = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={style.green}>\r\n <ColorComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"G\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.g * 255)}\r\n onChange={(value) => {\r\n this.state.color.g = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={style.blue}>\r\n <ColorComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"B\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.b * 255)}\r\n onChange={(value) => {\r\n this.state.color.b = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={ClassNames({ alpha: true, grayed: hasAlpha }, style)}>\r\n <ColorComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"A\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.alpha * 255)}\r\n onChange={(value) => {\r\n this.setState({ alpha: value / 255.0 });\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n </div>\r\n <HexColor\r\n lockObject={this.props.lockObject}\r\n expectedLength={hasAlpha ? 8 : 6}\r\n value={colorHex}\r\n onChange={(value) => {\r\n if (hasAlpha) {\r\n const color4 = Color4.FromHexString(value);\r\n this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });\r\n } else {\r\n this.setState({ color: Color3.FromHexString(value) });\r\n }\r\n }}\r\n />\r\n {this.props.linearhint && (\r\n <div className={style.colorPickerWarning}>\r\n (Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"ColorPicker.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport { Color3, Color4 } from \"core/Maths/math.color\";\r\nimport { ColorComponentComponentEntry } from \"./ColorComponentEntry\";\r\nimport { HexColorComponent } from \"./HexColor\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\n\r\nimport style from \"./ColorPicker.modules.scss\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { Logger } from \"core/Misc/logger\";\r\n\r\n/*\r\n Interface used to specify creation options for color picker\r\n /\r\nexport interface IColorPickerComponentProps {\r\n color: Color3 \| Color4;\r\n linearhint?: boolean;\r\n debugMode?: boolean;\r\n onColorChanged?: (color: Color3 \| Color4) => void;\r\n lockObject: LockObject;\r\n backgroundColor?: string;\r\n}\r\n\r\n/\r\n Interface used to specify creation options for color picker\r\n /\r\nexport interface IColorPickerState {\r\n color: Color3;\r\n alpha: number;\r\n}\r\n\r\n/\r\n Class used to create a color picker\r\n /\r\nexport class ColorPickerComponent extends React.Component<IColorPickerComponentProps, IColorPickerState> {\r\n private _saturationRef: React.RefObject<HTMLDivElement>;\r\n private _hueRef: React.RefObject<HTMLDivElement>;\r\n private _isSaturationPointerDown: boolean;\r\n private _isHuePointerDown: boolean;\r\n\r\n constructor(props: IColorPickerComponentProps) {\r\n super(props);\r\n if (this.props.color instanceof Color4) {\r\n this.state = { color: new Color3(this.props.color.r, this.props.color.g, this.props.color.b), alpha: this.props.color.a };\r\n } else {\r\n this.state = { color: this.props.color.clone(), alpha: 1 };\r\n }\r\n this._saturationRef = React.createRef();\r\n this._hueRef = React.createRef();\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerState) {\r\n return nextProps.color.toHexString() !== this.props.color.toHexString() \|\| nextState.color.toHexString() !== this.props.color.toHexString();\r\n }\r\n\r\n onSaturationPointerDown(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._evaluateSaturation(evt);\r\n this._isSaturationPointerDown = true;\r\n\r\n evt.currentTarget.setPointerCapture(evt.pointerId);\r\n }\r\n\r\n onSaturationPointerUp(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._isSaturationPointerDown = false;\r\n evt.currentTarget.releasePointerCapture(evt.pointerId);\r\n }\r\n\r\n onSaturationPointerMove(evt: React.PointerEvent<HTMLDivElement>) {\r\n if (!this._isSaturationPointerDown) {\r\n return;\r\n }\r\n this._evaluateSaturation(evt);\r\n }\r\n\r\n onHuePointerDown(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._evaluateHue(evt);\r\n this._isHuePointerDown = true;\r\n\r\n evt.currentTarget.setPointerCapture(evt.pointerId);\r\n }\r\n\r\n onHuePointerUp(evt: React.PointerEvent<HTMLDivElement>) {\r\n this._isHuePointerDown = false;\r\n evt.currentTarget.releasePointerCapture(evt.pointerId);\r\n }\r\n\r\n onHuePointerMove(evt: React.PointerEvent<HTMLDivElement>) {\r\n if (!this._isHuePointerDown) {\r\n return;\r\n }\r\n this._evaluateHue(evt);\r\n }\r\n\r\n private _evaluateSaturation(evt: React.PointerEvent<HTMLDivElement>) {\r\n const left = evt.nativeEvent.offsetX;\r\n const top = evt.nativeEvent.offsetY;\r\n\r\n const saturation = Math.min(1, Math.max(0.0001, left / this._saturationRef.current!.clientWidth));\r\n const value = Math.min(1, Math.max(0.0001, 1 - top / this._saturationRef.current!.clientHeight));\r\n\r\n if (this.props.debugMode) {\r\n Logger.Log(\"Saturation: \" + saturation);\r\n Logger.Log(\"Value: \" + value);\r\n }\r\n\r\n const hsv = this.state.color.toHSV();\r\n Color3.HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);\r\n if (this.state.alpha === 0) {\r\n this.setState({ alpha: 1 });\r\n }\r\n this.setState({ color: this.state.color });\r\n }\r\n\r\n private _evaluateHue(evt: React.PointerEvent<HTMLDivElement>) {\r\n const left = evt.nativeEvent.offsetX;\r\n\r\n const hue = 360 Math.min(0.9999, Math.max(0.0001, left / this._hueRef.current!.clientWidth));\r\n\r\n if (this.props.debugMode) {\r\n Logger.Log(\"Hue: \" + hue);\r\n }\r\n\r\n const hsv = this.state.color.toHSV();\r\n Color3.HSVtoRGBToRef(hue, Math.max(hsv.g, 0.01), Math.max(hsv.b, 0.01), this.state.color);\r\n this.setState({ color: this.state.color });\r\n }\r\n\r\n override componentDidUpdate() {\r\n this.raiseOnColorChanged();\r\n }\r\n\r\n raiseOnColorChanged() {\r\n if (!this.props.onColorChanged) {\r\n return;\r\n }\r\n\r\n if (this.props.color instanceof Color4) {\r\n const newColor4 = Color4.FromColor3(this.state.color, this.state.alpha);\r\n\r\n this.props.onColorChanged(newColor4);\r\n\r\n return;\r\n }\r\n\r\n this.props.onColorChanged(this.state.color.clone());\r\n }\r\n\r\n public override render() {\r\n const color4 = Color4.FromColor3(this.state.color);\r\n color4.a = this.state.alpha;\r\n const colorHex = color4.toHexString();\r\n const hsv = this.state.color.toHSV();\r\n const colorRef = new Color3();\r\n Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);\r\n const colorHexRef = colorRef.toHexString();\r\n const hasAlpha = this.props.color instanceof Color4;\r\n\r\n return (\r\n <div\r\n className={ClassNames({ colorPickerContainer: true, withHints: this.props.linearhint }, style)}\r\n style={{ backgroundColor: this.props.backgroundColor \|\| \"inherit\" }}\r\n >\r\n <div\r\n className={style.colorPickerSaturation}\r\n onPointerMove={(e) => this.onSaturationPointerMove(e)}\r\n onPointerDown={(e) => this.onSaturationPointerDown(e)}\r\n onPointerUp={(e) => this.onSaturationPointerUp(e)}\r\n ref={this._saturationRef}\r\n style={{\r\n background: colorHexRef,\r\n }}\r\n >\r\n <div className={style.colorPickerSaturationWhite}></div>\r\n <div className={style.colorPickerSaturationBlack}></div>\r\n <div\r\n className={style.colorPickerSaturationCursor}\r\n style={{\r\n top: `${-(hsv.b * 100) + 100}%`,\r\n left: `${hsv.g * 100}%`,\r\n }}\r\n ></div>\r\n </div>\r\n <div className={style.colorPickerHue}>\r\n <div\r\n className={style.colorPickerHueColor}\r\n style={{\r\n background: colorHex,\r\n }}\r\n ></div>\r\n <div\r\n className={style.colorPickerHueSlider}\r\n ref={this._hueRef}\r\n onPointerMove={(e) => this.onHuePointerMove(e)}\r\n onPointerDown={(e) => this.onHuePointerDown(e)}\r\n onPointerUp={(e) => this.onHuePointerUp(e)}\r\n >\r\n <div\r\n className={style.colorPickerHueCursor}\r\n style={{\r\n left: `${(hsv.r / 360.0) * 100}%`,\r\n border: `1px solid ` + colorHexRef,\r\n }}\r\n ></div>\r\n </div>\r\n </div>\r\n {/* <div className=\"color-picker-alpha\"></div> /}\r\n <div className={style.colorPickerRgb}>\r\n <div className={style.red}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"R\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.r 255)}\r\n onChange={(value) => {\r\n this.state.color.r = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={style.green}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"G\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.g * 255)}\r\n onChange={(value) => {\r\n this.state.color.g = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={style.blue}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"B\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.color.b * 255)}\r\n onChange={(value) => {\r\n this.state.color.b = value / 255.0;\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n <div className={ClassNames({ alpha: true, grayed: hasAlpha }, style)}>\r\n <ColorComponentComponentEntry\r\n lockObject={this.props.lockObject}\r\n label=\"A\"\r\n min={0}\r\n max={255}\r\n value={Math.round(this.state.alpha * 255)}\r\n onChange={(value) => {\r\n this.setState({ alpha: value / 255.0 });\r\n this.forceUpdate();\r\n }}\r\n />\r\n </div>\r\n </div>\r\n <HexColorComponent\r\n lockObject={this.props.lockObject}\r\n expectedLength={hasAlpha ? 8 : 6}\r\n value={colorHex}\r\n onChange={(value) => {\r\n if (hasAlpha) {\r\n const color4 = Color4.FromHexString(value);\r\n this.setState({ color: new Color3(color4.r, color4.g, color4.b), alpha: color4.a });\r\n } else {\r\n this.setState({ color: Color3.FromHexString(value) });\r\n }\r\n }}\r\n />\r\n {this.props.linearhint && (\r\n <div className={style.colorPickerWarning}>\r\n (Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/components/colorPicker/HexColor.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export interface IHexColorProps {
     onChange: (value: string) => void;
     lockObject: LockObject;
 }
-export declare class HexColor extends React.Component<IHexColorProps, {
+export declare class HexColorComponent extends React.Component<IHexColorProps, {
     hex: string;
 }> {
     constructor(props: IHexColorProps);

package/components/colorPicker/HexColor.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import style from "./HexColor.modules.scss";
-export class HexColor extends React.Component {
+export class HexColorComponent extends React.Component {
     constructor(props) {
         super(props);
         this.state = { hex: this.props.value.replace("#", "") };

package/components/colorPicker/HexColor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HexColor.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/HexColor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAS5C,MAAM,OAAO,~~QAAS~~,SAAQ,KAAK,CAAC,SAA0C;~~IAC1E~~,YAAY,KAAqB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC;IAC5D,CAAC;IAEQ,qBAAqB,CAAC,SAAyB,EAAE,SAA0B;QAChF,IAAI,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACtC,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SACpD;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;SACrC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;SACtC;IACL,CAAC;IAED,cAAc,CAAC,WAAmB;QAC9B,IAAI,WAAW,IAAI,EAAE,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,EAAE;YACnE,OAAO;SACV;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC,CAAC;QAEpC,IAAI,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;YAClD,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC7D,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;aACpC;iBAAM;gBACH,OAAO;aACV;SACJ;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC;IAC3C,CAAC;IAEe,MAAM;QAClB,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,cAAc,aAChC,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,oBAAW,EACpD,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,YACrC,gBACI,IAAI,EAAC,QAAQ;wBACb,wBAAwB;wBACxB,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EACrB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1D,GACA,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./HexColor.modules.scss\";\r\n\r\nexport interface IHexColorProps {\r\n value: string;\r\n expectedLength: number;\r\n onChange: (value: string) => void;\r\n lockObject: LockObject;\r\n}\r\n\r\nexport class ~~HexColor~~ extends React.Component<IHexColorProps, { hex: string }> {\r\n constructor(props: IHexColorProps) {\r\n super(props);\r\n\r\n this.state = { hex: this.props.value.replace(\"#\", \"\") };\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: IHexColorProps, nextState: { hex: string }) {\r\n if (nextProps.value !== this.props.value) {\r\n nextState.hex = nextProps.value.replace(\"#\", \"\");\r\n }\r\n\r\n return true;\r\n }\r\n\r\n lock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = true;\r\n }\r\n }\r\n\r\n unlock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = false;\r\n }\r\n }\r\n\r\n updateHexValue(valueString: string) {\r\n if (valueString != \"\" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {\r\n return;\r\n }\r\n\r\n this.setState({ hex: valueString });\r\n\r\n if (valueString.length !== this.props.expectedLength) {\r\n if (this.props.expectedLength === 8 && valueString.length === 6) {\r\n valueString = valueString + \"FF\";\r\n } else {\r\n return;\r\n }\r\n }\r\n\r\n this.props.onChange(\"#\" + valueString);\r\n }\r\n\r\n public override render() {\r\n return (\r\n <div className={style.colorPickerHex}>\r\n <div className={style.colorPickerHexLabel}>Hex</div>\r\n <div className={style.colorPickerHexValue}>\r\n <input\r\n type=\"string\"\r\n // className=\"hex-input\"\r\n className={style.colorPickerHex}\r\n value={this.state.hex}\r\n onBlur={() => this.unlock()}\r\n onFocus={() => this.lock()}\r\n onChange={(evt) => this.updateHexValue(evt.target.value)}\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"HexColor.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/colorPicker/HexColor.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,MAAM,yBAAyB,CAAC;AAS5C,MAAM,OAAO,iBAAkB,SAAQ,KAAK,CAAC,SAA0C;IACnF,YAAY,KAAqB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC;IAC5D,CAAC;IAEQ,qBAAqB,CAAC,SAAyB,EAAE,SAA0B;QAChF,IAAI,SAAS,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACtC,SAAS,CAAC,GAAG,GAAG,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;SACpD;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,IAAI;QACA,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC;SACrC;IACL,CAAC;IAED,MAAM;QACF,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;YACvB,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;SACtC;IACL,CAAC;IAED,cAAc,CAAC,WAAmB;QAC9B,IAAI,WAAW,IAAI,EAAE,IAAI,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,KAAK,EAAE;YACnE,OAAO;SACV;QAED,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC,CAAC;QAEpC,IAAI,WAAW,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;YAClD,IAAI,IAAI,CAAC,KAAK,CAAC,cAAc,KAAK,CAAC,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;gBAC7D,WAAW,GAAG,WAAW,GAAG,IAAI,CAAC;aACpC;iBAAM;gBACH,OAAO;aACV;SACJ;QAED,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,GAAG,WAAW,CAAC,CAAC;IAC3C,CAAC;IAEe,MAAM;QAClB,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,cAAc,aAChC,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,oBAAW,EACpD,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,YACrC,gBACI,IAAI,EAAC,QAAQ;wBACb,wBAAwB;wBACxB,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EACrB,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAC1B,QAAQ,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1D,GACA,IACJ,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./HexColor.modules.scss\";\r\n\r\nexport interface IHexColorProps {\r\n value: string;\r\n expectedLength: number;\r\n onChange: (value: string) => void;\r\n lockObject: LockObject;\r\n}\r\n\r\nexport class HexColorComponent extends React.Component<IHexColorProps, { hex: string }> {\r\n constructor(props: IHexColorProps) {\r\n super(props);\r\n\r\n this.state = { hex: this.props.value.replace(\"#\", \"\") };\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: IHexColorProps, nextState: { hex: string }) {\r\n if (nextProps.value !== this.props.value) {\r\n nextState.hex = nextProps.value.replace(\"#\", \"\");\r\n }\r\n\r\n return true;\r\n }\r\n\r\n lock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = true;\r\n }\r\n }\r\n\r\n unlock() {\r\n if (this.props.lockObject) {\r\n this.props.lockObject.lock = false;\r\n }\r\n }\r\n\r\n updateHexValue(valueString: string) {\r\n if (valueString != \"\" && /^[0-9A-Fa-f]+$/g.test(valueString) == false) {\r\n return;\r\n }\r\n\r\n this.setState({ hex: valueString });\r\n\r\n if (valueString.length !== this.props.expectedLength) {\r\n if (this.props.expectedLength === 8 && valueString.length === 6) {\r\n valueString = valueString + \"FF\";\r\n } else {\r\n return;\r\n }\r\n }\r\n\r\n this.props.onChange(\"#\" + valueString);\r\n }\r\n\r\n public override render() {\r\n return (\r\n <div className={style.colorPickerHex}>\r\n <div className={style.colorPickerHexLabel}>Hex</div>\r\n <div className={style.colorPickerHexValue}>\r\n <input\r\n type=\"string\"\r\n // className=\"hex-input\"\r\n className={style.colorPickerHex}\r\n value={this.state.hex}\r\n onBlur={() => this.unlock()}\r\n onFocus={() => this.lock()}\r\n onChange={(evt) => this.updateHexValue(evt.target.value)}\r\n />\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/components/lines/ColorPickerLineComponent.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { Color4, Color3 } from "@babylonjs/core/Maths/math.color.js";
 import type { LockObject } from "../../tabs/propertyGrids/lockObject";
-export interface IColorPickerComponentProps {
+export interface IColorPickerLineComponentProps {
     value: Color4 | Color3;
     linearHint?: boolean;
     onColorChanged: (newOne: string) => void;
@@ -16,14 +16,14 @@ interface IColorPickerComponentState {
     color: Color3 | Color4;
     hex: string;
 }
-export declare class ColorPickerLineComponent extends React.Component<IColorPickerComponentProps, IColorPickerComponentState> {
+export declare class ColorPickerLineComponent extends React.Component<IColorPickerLineComponentProps, IColorPickerComponentState> {
     private _floatRef;
     private _floatHostRef;
     private _coverRef;
-    constructor(props: IColorPickerComponentProps);
+    constructor(props: IColorPickerLineComponentProps);
     syncPositions(): void;
-    shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState): boolean;
-    getHexString(props?: Readonly<IColorPickerComponentProps> & Readonly<{
+    shouldComponentUpdate(nextProps: IColorPickerLineComponentProps, nextState: IColorPickerComponentState): boolean;
+    getHexString(props?: Readonly<IColorPickerLineComponentProps> & Readonly<{
         children?: React.ReactNode;
     }>): string;
     componentDidUpdate(): void;

package/components/lines/ColorPickerLineComponent.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ColorPicker } from "../colorPicker/ColorPicker.js";
+import { ColorPickerComponent } from "../colorPicker/ColorPicker.js";
 import style from "./ColorPickerLineComponent.modules.scss";
 export class ColorPickerLineComponent extends React.Component {
     constructor(props) {
@@ -52,7 +52,7 @@ export class ColorPickerLineComponent extends React.Component {
                                 return;
                             }
                             this.setState({ pickerEnabled: false });
-                        }, children: _jsx("div", { className: style.colorPickerFloat, ref: this._floatRef, children: _jsx(ColorPicker, { backgroundColor: this.props.backgroundColor, lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
+                        }, children: _jsx("div", { className: style.colorPickerFloat, ref: this._floatRef, children: _jsx(ColorPickerComponent, { backgroundColor: this.props.backgroundColor, lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
                                     const hex = color.toHexString();
                                     this.setState({ hex, color });
                                     this.props.onColorChanged(hex);

package/components/lines/ColorPickerLineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColorPickerLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/ColorPickerLineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,~~WAAW~~,EAAE,MAAM,4BAA4B,CAAC;~~AAEzD~~,OAAO,KAAK,MAAM,yCAAyC,CAAC;AAmB5D,MAAM,OAAO,wBAAyB,SAAQ,KAAK,CAAC,~~SAAiE~~;~~IAKjH~~,YAAY,~~KAAiC~~;~~QACzC~~,KAAK,CAAC,KAAK,CAAC,CAAC;QAEb,IAAI,CAAC,KAAK,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;QAE9F,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;QACnC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;QACvC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IACvC,CAAC;IAED,aAAa;QACT,MAAM,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,OAAyB,CAAC;QACrD,MAAM,IAAI,GAAG,IAAI,CAAC,aAAa,CAAC,OAAyB,CAAC;QAE1D,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;YACf,OAAO;SACV;QAED,IAAI,GAAG,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QAC3C,MAAM,MAAM,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAElD,IAAI,GAAG,GAAG,MAAM,GAAG,EAAE,GAAG,MAAM,CAAC,WAAW,EAAE;YACxC,GAAG,GAAG,MAAM,CAAC,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;SAC1C;QAED,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE;YAC5B,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC;SACjG;aAAM;YACH,GAAG,CAAC,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,IAAI,CAAC;SAC7D;IACL,CAAC;IAEQ,qBAAqB,CAAC,~~SAAqC~~,EAAE,SAAqC;~~QACvG~~,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;QAEvE,IAAI,SAAS,EAAE;YACX,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC;YAClC,SAAS,CAAC,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;SAChD;QAED,OAAO,SAAS,IAAI,SAAS,CAAC,GAAG,KAAK,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,SAAS,CAAC,aAAa,KAAK,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC;IACjH,CAAC;IAED,YAAY,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;QAC3B,OAAO,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;IACrC,CAAC;IAEQ,kBAAkB;QACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAEQ,iBAAiB;QACtB,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC;IAEQ,MAAM;QACX,OAAO,CACH,eAAK,SAAS,EAAE,KAAK,CAAC,WAAW,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,EAAE,SAAS,EAAC,MAAM,GAAG,EAC1H,cAAK,SAAS,EAAE,KAAK,CAAC,mBAAmB,EAAE,GAAG,EAAE,IAAI,CAAC,aAAa,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,YACrH,cAAK,SAAS,EAAE,KAAK,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAQ,GAC5E,EACL,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,CACzB,4BACI,cACI,GAAG,EAAE,IAAI,CAAC,SAAS,EACnB,SAAS,EAAE,KAAK,CAAC,gBAAgB,EACjC,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE;4BACb,IAAI,GAAG,CAAC,MAAM,KAAK,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE;gCACvC,OAAO;6BACV;4BACD,IAAI,CAAC,QAAQ,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,CAAC;wBAC5C,CAAC,YAED,cAAK,SAAS,EAAE,KAAK,CAAC,gBAAgB,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,YACvD,KAAC,~~WAAW~~,~~IACR~~,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,eAAe,EAC3C,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,IAAK,EAAU,EAChD,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EACvB,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EACjC,cAAc,EAAE,CAAC,KAAsB,EAAE,EAAE;oCACvC,MAAM,GAAG,GAAW,KAAK,CAAC,WAAW,EAAE,CAAC;oCACxC,IAAI,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;oCAC9B,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;gCACnC,CAAC,GACH,GACA,GACJ,GACP,CACN,IACC,CACT,CAAC;IACN,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Color4, Color3 } from \"core/Maths/math.color\";\r\nimport { ~~ColorPicker~~ } from \"../colorPicker/ColorPicker\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorPickerLineComponent.modules.scss\";\r\n\r\nexport interface ~~IColorPickerComponentProps~~ {\r\n value: Color4 \| Color3;\r\n linearHint?: boolean;\r\n onColorChanged: (newOne: string) => void;\r\n icon?: string;\r\n iconLabel?: string;\r\n shouldPopRight?: boolean;\r\n lockObject?: LockObject;\r\n backgroundColor?: string;\r\n}\r\n\r\ninterface IColorPickerComponentState {\r\n pickerEnabled: boolean;\r\n color: Color3 \| Color4;\r\n hex: string;\r\n}\r\n\r\nexport class ColorPickerLineComponent extends React.Component<~~IColorPickerComponentProps~~, IColorPickerComponentState> {\r\n private _floatRef: React.RefObject<HTMLDivElement>;\r\n private _floatHostRef: React.RefObject<HTMLDivElement>;\r\n private _coverRef: React.RefObject<HTMLDivElement>;\r\n\r\n constructor(props: ~~IColorPickerComponentProps~~) {\r\n super(props);\r\n\r\n this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };\r\n\r\n this._floatRef = React.createRef();\r\n this._floatHostRef = React.createRef();\r\n this._coverRef = React.createRef();\r\n }\r\n\r\n syncPositions() {\r\n const div = this._floatRef.current as HTMLDivElement;\r\n const host = this._floatHostRef.current as HTMLDivElement;\r\n\r\n if (!div \|\| !host) {\r\n return;\r\n }\r\n\r\n let top = host.getBoundingClientRect().top;\r\n const height = div.getBoundingClientRect().height;\r\n\r\n if (top + height + 10 > window.innerHeight) {\r\n top = window.innerHeight - height - 10;\r\n }\r\n\r\n div.style.top = top + \"px\";\r\n if (!this.props.shouldPopRight) {\r\n div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + \"px\";\r\n } else {\r\n div.style.left = host.getBoundingClientRect().left + \"px\";\r\n }\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: ~~IColorPickerComponentProps~~, nextState: IColorPickerComponentState) {\r\n const diffProps = this.getHexString(nextProps) !== this.getHexString();\r\n\r\n if (diffProps) {\r\n nextState.color = nextProps.value;\r\n nextState.hex = this.getHexString(nextProps);\r\n }\r\n\r\n return diffProps \|\| nextState.hex !== this.state.hex \|\| nextState.pickerEnabled !== this.state.pickerEnabled;\r\n }\r\n\r\n getHexString(props = this.props) {\r\n return props.value.toHexString();\r\n }\r\n\r\n override componentDidUpdate() {\r\n this.syncPositions();\r\n }\r\n\r\n override componentDidMount() {\r\n this.syncPositions();\r\n }\r\n\r\n override render() {\r\n return (\r\n <div className={style.colorPicker}>\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.colorRectBackground} ref={this._floatHostRef} onClick={() => this.setState({ pickerEnabled: true })}>\r\n <div className={style.colorRect} style={{ background: this.state.hex }}></div>\r\n </div>\r\n {this.state.pickerEnabled && (\r\n <>\r\n <div\r\n ref={this._coverRef}\r\n className={style.colorPickerCover}\r\n onClick={(evt) => {\r\n if (evt.target !== this._coverRef.current) {\r\n return;\r\n }\r\n this.setState({ pickerEnabled: false });\r\n }}\r\n >\r\n <div className={style.colorPickerFloat} ref={this._floatRef}>\r\n <~~ColorPicker~~\r\n backgroundColor={this.props.backgroundColor}\r\n lockObject={this.props.lockObject \|\| ({} as any)}\r\n color={this.state.color}\r\n linearhint={this.props.linearHint}\r\n onColorChanged={(color: Color3 \| Color4) => {\r\n const hex: string = color.toHexString();\r\n this.setState({ hex, color });\r\n this.props.onColorChanged(hex);\r\n }}\r\n />\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"ColorPickerLineComponent.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/lines/ColorPickerLineComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\r\nimport type { Color4, Color3 } from \"core/Maths/math.color\";\r\nimport { ColorPickerComponent } from \"../colorPicker/ColorPicker\";\r\nimport type { LockObject } from \"../../tabs/propertyGrids/lockObject\";\r\nimport style from \"./ColorPickerLineComponent.modules.scss\";\r\n\r\nexport interface IColorPickerLineComponentProps {\r\n value: Color4 \| Color3;\r\n linearHint?: boolean;\r\n onColorChanged: (newOne: string) => void;\r\n icon?: string;\r\n iconLabel?: string;\r\n shouldPopRight?: boolean;\r\n lockObject?: LockObject;\r\n backgroundColor?: string;\r\n}\r\n\r\ninterface IColorPickerComponentState {\r\n pickerEnabled: boolean;\r\n color: Color3 \| Color4;\r\n hex: string;\r\n}\r\n\r\nexport class ColorPickerLineComponent extends React.Component<IColorPickerLineComponentProps, IColorPickerComponentState> {\r\n private _floatRef: React.RefObject<HTMLDivElement>;\r\n private _floatHostRef: React.RefObject<HTMLDivElement>;\r\n private _coverRef: React.RefObject<HTMLDivElement>;\r\n\r\n constructor(props: IColorPickerLineComponentProps) {\r\n super(props);\r\n\r\n this.state = { pickerEnabled: false, color: this.props.value, hex: this.getHexString(props) };\r\n\r\n this._floatRef = React.createRef();\r\n this._floatHostRef = React.createRef();\r\n this._coverRef = React.createRef();\r\n }\r\n\r\n syncPositions() {\r\n const div = this._floatRef.current as HTMLDivElement;\r\n const host = this._floatHostRef.current as HTMLDivElement;\r\n\r\n if (!div \|\| !host) {\r\n return;\r\n }\r\n\r\n let top = host.getBoundingClientRect().top;\r\n const height = div.getBoundingClientRect().height;\r\n\r\n if (top + height + 10 > window.innerHeight) {\r\n top = window.innerHeight - height - 10;\r\n }\r\n\r\n div.style.top = top + \"px\";\r\n if (!this.props.shouldPopRight) {\r\n div.style.left = host.getBoundingClientRect().left - div.getBoundingClientRect().width + \"px\";\r\n } else {\r\n div.style.left = host.getBoundingClientRect().left + \"px\";\r\n }\r\n }\r\n\r\n override shouldComponentUpdate(nextProps: IColorPickerLineComponentProps, nextState: IColorPickerComponentState) {\r\n const diffProps = this.getHexString(nextProps) !== this.getHexString();\r\n\r\n if (diffProps) {\r\n nextState.color = nextProps.value;\r\n nextState.hex = this.getHexString(nextProps);\r\n }\r\n\r\n return diffProps \|\| nextState.hex !== this.state.hex \|\| nextState.pickerEnabled !== this.state.pickerEnabled;\r\n }\r\n\r\n getHexString(props = this.props) {\r\n return props.value.toHexString();\r\n }\r\n\r\n override componentDidUpdate() {\r\n this.syncPositions();\r\n }\r\n\r\n override componentDidMount() {\r\n this.syncPositions();\r\n }\r\n\r\n override render() {\r\n return (\r\n <div className={style.colorPicker}>\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.colorRectBackground} ref={this._floatHostRef} onClick={() => this.setState({ pickerEnabled: true })}>\r\n <div className={style.colorRect} style={{ background: this.state.hex }}></div>\r\n </div>\r\n {this.state.pickerEnabled && (\r\n <>\r\n <div\r\n ref={this._coverRef}\r\n className={style.colorPickerCover}\r\n onClick={(evt) => {\r\n if (evt.target !== this._coverRef.current) {\r\n return;\r\n }\r\n this.setState({ pickerEnabled: false });\r\n }}\r\n >\r\n <div className={style.colorPickerFloat} ref={this._floatRef}>\r\n <ColorPickerComponent\r\n backgroundColor={this.props.backgroundColor}\r\n lockObject={this.props.lockObject \|\| ({} as any)}\r\n color={this.state.color}\r\n linearhint={this.props.linearHint}\r\n onColorChanged={(color: Color3 \| Color4) => {\r\n const hex: string = color.toHexString();\r\n this.setState({ hex, color });\r\n this.props.onColorChanged(hex);\r\n }}\r\n />\r\n </div>\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}

package/components/reactGraphSystem/GraphNode.d.ts CHANGED Viewed

@@ -10,4 +10,4 @@ export interface IGraphNodeProps {
     highlighted?: boolean;
     parentContainerId: string;
 }
-export declare const GraphNode: FC<IGraphNodeProps>;
+export declare const SingleGraphNode: FC<IGraphNodeProps>;

package/components/reactGraphSystem/GraphNode.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { ClassNames } from "../classNames.js";
 import { GraphConnectorHandler } from "./GraphConnectorHandle.js";
 import style from "./GraphNode.modules.scss";
 import { useGraphContext } from "./useGraphContext.js";
-export const GraphNode = (props) => {
+export const SingleGraphNode = (props) => {
     const { id, name, x, y, selected, width = 100, height = 40, highlighted, parentContainerId } = props;
     const { onNodeSelected } = useGraphContext();
     const [, dragRef] = useDrag(() => ({

package/components/reactGraphSystem/GraphNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GraphNode.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNode.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,MAAM,0BAA0B,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAcpD,MAAM,CAAC,MAAM,~~SAAS~~,GAAwB,CAAC,KAAK,EAAE,EAAE;~~IACpD~~,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACrG,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7C,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE;QAC/B,OAAO,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACnB,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;SACjC,CAAC;KACL,CAAC,EACF,EAAE,CACL,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,cACI,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,EACnE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,EAC5E,OAAO,EAAE,OAAO,YAEhB,eAAK,SAAS,EAAE,KAAK,CAAC,SAAS,aAC3B,uBAAK,IAAI,GAAM,EACf,KAAC,qBAAqB,IAClB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,EAAE,EACZ,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,MAAM,GAAG,CAAC,EACpB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,MAAM,GACtB,EACD,KAAK,CAAC,QAAQ,IACb,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { GraphConnectorHandler } from \"./GraphConnectorHandle\";\r\nimport style from \"./GraphNode.modules.scss\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n\r\nexport interface IGraphNodeProps {\r\n id: string;\r\n name: string;\r\n x: number;\r\n y: number;\r\n selected?: boolean;\r\n width?: number;\r\n height?: number;\r\n highlighted?: boolean;\r\n parentContainerId: string;\r\n}\r\n\r\nexport const ~~GraphNode~~: FC<IGraphNodeProps> = (props) => {\r\n const { id, name, x, y, selected, width = 100, height = 40, highlighted, parentContainerId } = props;\r\n const { onNodeSelected } = useGraphContext();\r\n\r\n const [, dragRef] = useDrag(\r\n () => ({\r\n type: \"node\",\r\n item: { id, parentContainerId },\r\n collect: (monitor) => ({\r\n isDrag: !!monitor.isDragging(),\r\n }),\r\n }),\r\n []\r\n );\r\n\r\n const onClick = () => {\r\n onNodeSelected && onNodeSelected(id);\r\n };\r\n\r\n return (\r\n <div\r\n ref={dragRef}\r\n className={ClassNames({ node: true, selected, highlighted }, style)}\r\n style={{ left: x, top: y, minWidth: width + \"px\", minHeight: height + \"px\" }}\r\n onClick={onClick}\r\n >\r\n <div className={style.container}>\r\n <h2>{name}</h2>\r\n <GraphConnectorHandler\r\n parentContainerId={parentContainerId}\r\n parentId={id}\r\n parentX={x}\r\n parentY={y}\r\n offsetY={-height / 2}\r\n parentWidth={width}\r\n parentHeight={height}\r\n />\r\n {props.children}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}
1	+ {"version":3,"file":"GraphNode.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/components/reactGraphSystem/GraphNode.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,MAAM,0BAA0B,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAcpD,MAAM,CAAC,MAAM,eAAe,GAAwB,CAAC,KAAK,EAAE,EAAE;IAC1D,MAAM,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,GAAG,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,EAAE,iBAAiB,EAAE,GAAG,KAAK,CAAC;IACrG,MAAM,EAAE,cAAc,EAAE,GAAG,eAAe,EAAE,CAAC;IAE7C,MAAM,CAAC,EAAE,OAAO,CAAC,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACH,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,EAAE,EAAE,EAAE,iBAAiB,EAAE;QAC/B,OAAO,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;YACnB,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE;SACjC,CAAC;KACL,CAAC,EACF,EAAE,CACL,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,cAAc,IAAI,cAAc,CAAC,EAAE,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO,CACH,cACI,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,EAAE,KAAK,CAAC,EACnE,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,EAC5E,OAAO,EAAE,OAAO,YAEhB,eAAK,SAAS,EAAE,KAAK,CAAC,SAAS,aAC3B,uBAAK,IAAI,GAAM,EACf,KAAC,qBAAqB,IAClB,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,EAAE,EACZ,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE,CAAC,MAAM,GAAG,CAAC,EACpB,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,MAAM,GACtB,EACD,KAAK,CAAC,QAAQ,IACb,GACJ,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import type { FC } from \"react\";\r\nimport { useDrag } from \"react-dnd\";\r\nimport { ClassNames } from \"../classNames\";\r\nimport { GraphConnectorHandler } from \"./GraphConnectorHandle\";\r\nimport style from \"./GraphNode.modules.scss\";\r\nimport { useGraphContext } from \"./useGraphContext\";\r\n\r\nexport interface IGraphNodeProps {\r\n id: string;\r\n name: string;\r\n x: number;\r\n y: number;\r\n selected?: boolean;\r\n width?: number;\r\n height?: number;\r\n highlighted?: boolean;\r\n parentContainerId: string;\r\n}\r\n\r\nexport const SingleGraphNode: FC<IGraphNodeProps> = (props) => {\r\n const { id, name, x, y, selected, width = 100, height = 40, highlighted, parentContainerId } = props;\r\n const { onNodeSelected } = useGraphContext();\r\n\r\n const [, dragRef] = useDrag(\r\n () => ({\r\n type: \"node\",\r\n item: { id, parentContainerId },\r\n collect: (monitor) => ({\r\n isDrag: !!monitor.isDragging(),\r\n }),\r\n }),\r\n []\r\n );\r\n\r\n const onClick = () => {\r\n onNodeSelected && onNodeSelected(id);\r\n };\r\n\r\n return (\r\n <div\r\n ref={dragRef}\r\n className={ClassNames({ node: true, selected, highlighted }, style)}\r\n style={{ left: x, top: y, minWidth: width + \"px\", minHeight: height + \"px\" }}\r\n onClick={onClick}\r\n >\r\n <div className={style.container}>\r\n <h2>{name}</h2>\r\n <GraphConnectorHandler\r\n parentContainerId={parentContainerId}\r\n parentId={id}\r\n parentX={x}\r\n parentY={y}\r\n offsetY={-height / 2}\r\n parentWidth={width}\r\n parentHeight={height}\r\n />\r\n {props.children}\r\n </div>\r\n </div>\r\n );\r\n};\r\n"]}

package/components/reactGraphSystem/NodeRenderer.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useMemo } from "react";
 import { GraphContainer } from "./GraphContainer.js";
 import { GraphLine } from "./GraphLine.js";
-import { GraphNode } from "./GraphNode.js";
+import { SingleGraphNode } from "./GraphNode.js";
 import { GraphNodesContainer } from "./GraphNodesContainer.js";
 import { GraphLinesContainer } from "./GraphLinesContainer.js";
 import { GraphContextManager } from "./GraphContextManager.js";
@@ -61,7 +61,7 @@ export const NodeRenderer = (props) => {
                             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];
-                            return (_jsx(GraphNode, { parentContainerId: props.id, id: id, name: label, x: posInRecord.x, y: posInRecord.y, selected: id === selectedNode, highlighted: id === highlightedNode, children: CustomComponent && _jsx(CustomComponent, { ...customData.value }) }, id));
+                            return (_jsx(SingleGraphNode, { parentContainerId: props.id, id: id, name: label, x: posInRecord.x, y: posInRecord.y, selected: id === selectedNode, highlighted: id === highlightedNode, children: CustomComponent && _jsx(CustomComponent, { ...customData.value }) }, id));
                         }) }), _jsx(GraphLinesContainer, { id: props.id, children: connections.map(({ id, sourceId, targetId }) => {
                             const sourcePos = pos[sourceId] || { x: 0, y: 0 };
                             const targetPos = pos[targetId] || { x: 0, y: 0 };

package/components/reactGraphSystem/NodeRenderer.js.map CHANGED Viewed

	@@ -1 +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 } from \"react\";\r\nimport { useState, useEffect, useMemo } from \"react\";\r\nimport { GraphContainer } from \"./GraphContainer\";\r\nimport { GraphLine } from \"./GraphLine\";\r\nimport { GraphNode } 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: 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 <GraphNode\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 </GraphNode>\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"]}
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 } 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: 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/lines/color3LineComponent.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { ColorLineComponent } from "./colorLineComponent.js";
+import { ColorLine } from "./colorLineComponent.js";
 export class Color3LineComponent extends React.Component {
     render() {
         const props = this.props;
-        return _jsx(ColorLineComponent, { disableAlpha: true, ...props });
+        return _jsx(ColorLine, { disableAlpha: true, ...props });
     }
 }
 //# sourceMappingURL=color3LineComponent.js.map

package/lines/color3LineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color3LineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/color3LineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,~~kBAAkB~~,EAAE,MAAM,sBAAsB,CAAC;~~AAc1D~~,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IACtE,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,OAAO,KAAC,~~kBAAkB~~,IAAC,YAAY,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;~~IACjE~~,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { ~~ColorLineComponent~~ } from \"./colorLineComponent\";\r\n\r\nexport interface IColor3LineComponentProps {\r\n label: string;\r\n target: any;\r\n propertyName: string;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n isLinear?: boolean;\r\n icon?: string;\r\n lockObject: LockObject;\r\n iconLabel?: string;\r\n onChange?: () => void;\r\n}\r\n\r\nexport class Color3LineComponent extends React.Component<IColor3LineComponentProps> {\r\n override render() {\r\n const props = this.props;\r\n return <~~ColorLineComponent~~ disableAlpha={true} {...props} />;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"color3LineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/color3LineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAcjD,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IACtE,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,OAAO,KAAC,SAAS,IAAC,YAAY,EAAE,IAAI,KAAM,KAAK,GAAI,CAAC;IACxD,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { ColorLine } from \"./colorLineComponent\";\r\n\r\nexport interface IColor3LineComponentProps {\r\n label: string;\r\n target: any;\r\n propertyName: string;\r\n onPropertyChangedObservable?: Observable<PropertyChangedEvent>;\r\n isLinear?: boolean;\r\n icon?: string;\r\n lockObject: LockObject;\r\n iconLabel?: string;\r\n onChange?: () => void;\r\n}\r\n\r\nexport class Color3LineComponent extends React.Component<IColor3LineComponentProps> {\r\n override render() {\r\n const props = this.props;\r\n return <ColorLine disableAlpha={true} {...props} />;\r\n }\r\n}\r\n"]}

package/lines/color4LineComponent.js CHANGED Viewed

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { ColorLineComponent } from "./colorLineComponent.js";
+import { ColorLine } from "./colorLineComponent.js";
 export class Color4LineComponent extends React.Component {
     render() {
         const props = this.props;
-        return _jsx(ColorLineComponent, { ...props });
+        return _jsx(ColorLine, { ...props });
     }
 }
 //# sourceMappingURL=color4LineComponent.js.map

package/lines/color4LineComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"color4LineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/color4LineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,~~kBAAkB~~,EAAE,MAAM,sBAAsB,CAAC;~~AAc1D~~,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IACtE,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,OAAO,KAAC,~~kBAAkB~~,OAAK,KAAK,GAAI,CAAC;~~IAC7C~~,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { ~~ColorLineComponent~~ } from \"./colorLineComponent\";\r\n\r\nexport interface IColor4LineComponentProps {\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 lockObject: LockObject;\r\n}\r\n\r\nexport class Color4LineComponent extends React.Component<IColor4LineComponentProps> {\r\n override render() {\r\n const props = this.props;\r\n return <~~ColorLineComponent~~ {...props} />;\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"color4LineComponent.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/lines/color4LineComponent.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAcjD,MAAM,OAAO,mBAAoB,SAAQ,KAAK,CAAC,SAAoC;IACtE,MAAM;QACX,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,OAAO,KAAC,SAAS,OAAK,KAAK,GAAI,CAAC;IACpC,CAAC;CACJ","sourcesContent":["import * as React from \"react\";\r\nimport type { Observable } from \"core/Misc/observable\";\r\nimport type { PropertyChangedEvent } from \"../propertyChangedEvent\";\r\nimport type { LockObject } from \"../tabs/propertyGrids/lockObject\";\r\nimport { ColorLine } from \"./colorLineComponent\";\r\n\r\nexport interface IColor4LineComponentProps {\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 lockObject: LockObject;\r\n}\r\n\r\nexport class Color4LineComponent extends React.Component<IColor4LineComponentProps> {\r\n override render() {\r\n const props = this.props;\r\n return <ColorLine {...props} />;\r\n }\r\n}\r\n"]}

package/lines/colorLineComponent.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import type { Observable } from "@babylonjs/core/Misc/observable.js";
 import { Color4 } from "@babylonjs/core/Maths/math.color.js";
 import type { PropertyChangedEvent } from "../propertyChangedEvent";
 import type { LockObject } from "../tabs/propertyGrids/lockObject";
-export interface IColorLineComponentProps {
+export interface IColorLineProps {
     label: string;
     target?: any;
     propertyName: string;
@@ -19,10 +19,10 @@ interface IColorLineComponentState {
     isExpanded: boolean;
     color: Color4;
 }
-export declare class ColorLineComponent extends React.Component<IColorLineComponentProps, IColorLineComponentState> {
-    constructor(props: IColorLineComponentProps);
-    shouldComponentUpdate(nextProps: IColorLineComponentProps, nextState: IColorLineComponentState): boolean;
-    getValue(props?: Readonly<IColorLineComponentProps> & Readonly<{
+export declare class ColorLine extends React.Component<IColorLineProps, IColorLineComponentState> {
+    constructor(props: IColorLineProps);
+    shouldComponentUpdate(nextProps: IColorLineProps, nextState: IColorLineComponentState): boolean;
+    getValue(props?: Readonly<IColorLineProps> & Readonly<{
         children?: React.ReactNode;
     }>): Color4;
     setColorFromString(colorString: string): void;

package/lines/colorLineComponent.js CHANGED Viewed

@@ -1,15 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Color3, Color4 } from "@babylonjs/core/Maths/math.color.js";
-import { NumericInputComponent } from "./numericInputComponent.js";
+import { NumericInput } from "./numericInputComponent.js";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { copyCommandToClipboard, getClassNameWithNamespace } from "../copyCommandToClipboard.js";
-import { ColorPickerLineComponent } from "./colorPickerComponent.js";
+import { ColorPickerLine } from "./colorPickerComponent.js";
 import { conflictingValuesPlaceholder } from "./targetsProxy.js";
 import copyIcon from "./copy.svg";
 const emptyColor = new Color4(0, 0, 0, 0);
-export class ColorLineComponent extends React.Component {
+export class ColorLine extends React.Component {
     constructor(props) {
         super(props);
         this.state = { isExpanded: false, color: this.getValue() };
@@ -149,9 +149,9 @@ export class ColorLineComponent extends React.Component {
     }
     render() {
         const chevron = this.state.isExpanded ? _jsx(FontAwesomeIcon, { icon: faMinus }) : _jsx(FontAwesomeIcon, { icon: faPlus });
-        return (_jsxs("div", { className: "color3Line", children: [_jsxs("div", { className: "firstLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "color3", children: _jsx(ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
+        return (_jsxs("div", { className: "color3Line", children: [_jsxs("div", { className: "firstLine", children: [this.props.icon && _jsx("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), _jsx("div", { className: "label", title: this.props.label, children: this.props.label }), _jsx("div", { className: "color3", children: _jsx(ColorPickerLine, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
                                     this.setColorFromString(colorString);
-                                } }) }), _jsx("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron }), _jsx("div", { className: "copy hoverIcon", onClick: () => this.onCopyClick(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) })] }), this.state.isExpanded && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), _jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (_jsx(NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] }))] }));
+                                } }) }), _jsx("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron }), _jsx("div", { className: "copy hoverIcon", onClick: () => this.onCopyClick(), title: "Copy to clipboard", children: _jsx("img", { src: copyIcon, alt: "Copy" }) })] }), this.state.isExpanded && (_jsxs("div", { className: "secondLine", children: [_jsx(NumericInput, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), _jsx(NumericInput, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), _jsx(NumericInput, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || (_jsx(NumericInput, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] }))] }));
     }
 }
 //# sourceMappingURL=colorLineComponent.js.map