@babylonjs/gui-editor 5.14.0 → 5.15.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.
|
@@ -49729,7 +49729,12 @@ class HexColor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49729
49729
|
}
|
|
49730
49730
|
this.setState({ hex: valueString });
|
|
49731
49731
|
if (valueString.length !== this.props.expectedLength) {
|
|
49732
|
-
|
|
49732
|
+
if (this.props.expectedLength === 8 && valueString.length === 6) {
|
|
49733
|
+
valueString = valueString + "FF";
|
|
49734
|
+
}
|
|
49735
|
+
else {
|
|
49736
|
+
return;
|
|
49737
|
+
}
|
|
49733
49738
|
}
|
|
49734
49739
|
this.props.onChange("#" + valueString);
|
|
49735
49740
|
}
|
|
@@ -49872,10 +49877,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
49872
49877
|
/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
|
|
49873
49878
|
/* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "../../../../node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
|
|
49874
49879
|
/* harmony import */ var _colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./colorPickerComponent */ "../../../dev/sharedUiComponents/dist/lines/colorPickerComponent.js");
|
|
49875
|
-
/* harmony import */ var
|
|
49876
|
-
/* harmony import */ var
|
|
49877
|
-
/* harmony import */ var _copy_svg__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./copy.svg */ "../../../dev/sharedUiComponents/dist/lines/copy.svg");
|
|
49878
|
-
|
|
49880
|
+
/* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./targetsProxy */ "../../../dev/sharedUiComponents/dist/lines/targetsProxy.js");
|
|
49881
|
+
/* harmony import */ var _copy_svg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./copy.svg */ "../../../dev/sharedUiComponents/dist/lines/copy.svg");
|
|
49879
49882
|
|
|
49880
49883
|
|
|
49881
49884
|
|
|
@@ -49915,7 +49918,7 @@ class ColorLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49915
49918
|
if (!property)
|
|
49916
49919
|
return emptyColor;
|
|
49917
49920
|
if (typeof property === "string") {
|
|
49918
|
-
if (property ===
|
|
49921
|
+
if (property === _targetsProxy__WEBPACK_IMPORTED_MODULE_7__.conflictingValuesPlaceholder) {
|
|
49919
49922
|
return emptyColor;
|
|
49920
49923
|
}
|
|
49921
49924
|
return this._convertToColor(property);
|
|
@@ -50017,9 +50020,7 @@ class ColorLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
50017
50020
|
const chevron = this.state.isExpanded ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__.faMinus }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__.faPlus });
|
|
50018
50021
|
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "color3Line" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "firstLine" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: this.props.label }, { children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "color3" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__.ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
|
|
50019
50022
|
this.setColorFromString(colorString);
|
|
50020
|
-
} }) })), this.props.lockObject
|
|
50021
|
-
this.setColorFromString(newValue);
|
|
50022
|
-
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "copy hoverIcon", onClick: () => this.copyToClipboard(), title: "Copy to clipboard" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _copy_svg__WEBPACK_IMPORTED_MODULE_9__, alt: "Copy" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand" }, { children: chevron }))] })), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] })))] })));
|
|
50023
|
+
} }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "copy hoverIcon", onClick: () => this.copyToClipboard(), title: "Copy to clipboard" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _copy_svg__WEBPACK_IMPORTED_MODULE_8__, alt: "Copy" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand" }, { children: chevron }))] })), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "secondLine" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] })))] })));
|
|
50023
50024
|
}
|
|
50024
50025
|
}
|
|
50025
50026
|
|
|
@@ -50324,7 +50325,7 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
50324
50325
|
this.props.onDragStop(valueAsNumber);
|
|
50325
50326
|
}
|
|
50326
50327
|
this.setState({ dragging: newDragging });
|
|
50327
|
-
} }))] })), this.props.unit] }))), this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToDegrees(valueAsNumber), onChange: (value) => this.updateValue(core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToRadians(value).toString()) }))] }));
|
|
50328
|
+
} }))] })), this.props.unit] }))), this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { lockObject: this.props.lockObject, label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToDegrees(valueAsNumber), onChange: (value) => this.updateValue(core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToRadians(value).toString()) }))] }));
|
|
50328
50329
|
}
|
|
50329
50330
|
}
|
|
50330
50331
|
|
|
@@ -50902,7 +50903,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
50902
50903
|
}
|
|
50903
50904
|
return 0;
|
|
50904
50905
|
}
|
|
50905
|
-
updateValue(value) {
|
|
50906
|
+
updateValue(value, valueToValidate) {
|
|
50906
50907
|
if (this.props.numbersOnly) {
|
|
50907
50908
|
if (/[^0-9.\p\x%-]/g.test(value)) {
|
|
50908
50909
|
return;
|
|
@@ -50930,8 +50931,8 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
50930
50931
|
}
|
|
50931
50932
|
this._localChange = true;
|
|
50932
50933
|
const store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName];
|
|
50933
|
-
if (this.props.validator) {
|
|
50934
|
-
if (this.props.validator(
|
|
50934
|
+
if (this.props.validator && valueToValidate) {
|
|
50935
|
+
if (this.props.validator(valueToValidate) == false) {
|
|
50935
50936
|
value = store;
|
|
50936
50937
|
}
|
|
50937
50938
|
}
|
|
@@ -50978,15 +50979,15 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
50978
50979
|
}
|
|
50979
50980
|
this.updateValue(this.state.value);
|
|
50980
50981
|
}, onBlur: (evt) => {
|
|
50981
|
-
this.updateValue(evt.target.value);
|
|
50982
|
+
this.updateValue(evt.target.value, evt.target.value);
|
|
50982
50983
|
if (this.props.lockObject) {
|
|
50983
50984
|
this.props.lockObject.lock = false;
|
|
50984
50985
|
}
|
|
50985
|
-
} }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: `value${this.props.noUnderline === true ? " noUnderline" : ""}${this.props.arrows ? " hasArrows" : ""}${this.state.dragging ? " dragging" : ""}` }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { value: value, onBlur: () => {
|
|
50986
|
+
} }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: `value${this.props.noUnderline === true ? " noUnderline" : ""}${this.props.arrows ? " hasArrows" : ""}${this.state.dragging ? " dragging" : ""}` }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { value: value, onBlur: (evt) => {
|
|
50986
50987
|
if (this.props.lockObject) {
|
|
50987
50988
|
this.props.lockObject.lock = false;
|
|
50988
50989
|
}
|
|
50989
|
-
this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName]) || "");
|
|
50990
|
+
this.updateValue((this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName]) || "", evt.target.value);
|
|
50990
50991
|
}, onFocus: () => {
|
|
50991
50992
|
if (this.props.lockObject) {
|
|
50992
50993
|
this.props.lockObject.lock = true;
|
|
@@ -51387,7 +51388,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51387
51388
|
this.props.globalState.workbench.guiSize = newSize;
|
|
51388
51389
|
}
|
|
51389
51390
|
this.forceUpdate();
|
|
51390
|
-
} })), !core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { label: "W", target: size, propertyName: "width", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
|
|
51391
|
+
} })), !core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "W", target: size, propertyName: "width", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
|
|
51391
51392
|
if (!this._stopUpdating) {
|
|
51392
51393
|
this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
|
|
51393
51394
|
}
|
|
@@ -51396,7 +51397,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51396
51397
|
}, onDragStop: (newValue) => {
|
|
51397
51398
|
this._stopUpdating = false;
|
|
51398
51399
|
this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
|
|
51399
|
-
}, arrows: true, isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { label: "H", target: size, propertyName: "height", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
|
|
51400
|
+
}, arrows: true, isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "H", target: size, propertyName: "height", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
|
|
51400
51401
|
if (!this._stopUpdating) {
|
|
51401
51402
|
this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
|
|
51402
51403
|
}
|
|
@@ -52922,7 +52923,7 @@ class InputTextPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
|
52922
52923
|
render() {
|
|
52923
52924
|
const { inputTexts, onPropertyChangedObservable, lockObject } = this.props;
|
|
52924
52925
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__.makeTargetsProxy)(inputTexts, onPropertyChangedObservable);
|
|
52925
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: inputTexts, onPropertyChangedObservable: onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextLineComponent, { label: "INPUT TEXT", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_textIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "text" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_textInputIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Prompt Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "promptMessage" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_widthIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Max Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "maxWidth" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_marginsIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Margins" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "margin" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_16__, label: "Border Thickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_autoStretchWidthIcon_svg__WEBPACK_IMPORTED_MODULE_17__, label: "Automatically Stretch Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "AUTO STRETCH", target: proxy, propertyName: "autoStretchWidth" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_selectAllIcon_svg__WEBPACK_IMPORTED_MODULE_18__, label: "When Input is Focus, Select All" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "ON FOCUS, SELECT ALL", target: proxy, propertyName: "onFocusSelectAll" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_highlightIcon_svg__WEBPACK_IMPORTED_MODULE_19__, label: "Highlight Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "textHighlightColor" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_alphaIcon_svg__WEBPACK_IMPORTED_MODULE_20__, label: "Highlight Opacity" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { label: "", minimum: 0, maximum: 1, step: 0.01, target: proxy, propertyName: "highligherOpacity" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_21__, label: "Background Color when Focused" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "focusedBackground" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_textPlaceholderIcon_svg__WEBPACK_IMPORTED_MODULE_22__, label: "Placeholder Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "placeholderText" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_23__, label: "Placeholder Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "placeholderColor" })] }))] })));
|
|
52926
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: inputTexts, onPropertyChangedObservable: onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextLineComponent, { label: "INPUT TEXT", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_textIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "text" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_textInputIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Prompt Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "promptMessage" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_widthIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Max Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "maxWidth" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_marginsIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Margins" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "margin" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_16__, label: "Border Thickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_autoStretchWidthIcon_svg__WEBPACK_IMPORTED_MODULE_17__, label: "Automatically Stretch Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "AUTO STRETCH", target: proxy, propertyName: "autoStretchWidth" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_selectAllIcon_svg__WEBPACK_IMPORTED_MODULE_18__, label: "When Input is Focus, Select All" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "ON FOCUS, SELECT ALL", target: proxy, propertyName: "onFocusSelectAll" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_highlightIcon_svg__WEBPACK_IMPORTED_MODULE_19__, label: "Highlight Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "textHighlightColor" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_alphaIcon_svg__WEBPACK_IMPORTED_MODULE_20__, label: "Highlight Opacity" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: lockObject, label: "", minimum: 0, maximum: 1, step: 0.01, target: proxy, propertyName: "highligherOpacity" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_21__, label: "Background Color when Focused" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "focusedBackground" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_textPlaceholderIcon_svg__WEBPACK_IMPORTED_MODULE_22__, label: "Placeholder Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "placeholderText" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_23__, label: "Placeholder Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "placeholderColor" })] }))] })));
|
|
52926
52927
|
}
|
|
52927
52928
|
}
|
|
52928
52929
|
|
|
@@ -55035,14 +55036,33 @@ class GizmoGeneric extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
|
|
|
55035
55036
|
}
|
|
55036
55037
|
/**
|
|
55037
55038
|
* Update the gizmo's positions
|
|
55038
|
-
* @param force should the update be forced. otherwise it will be updated only when the pointer is down
|
|
55039
55039
|
*/
|
|
55040
55040
|
updateGizmo() {
|
|
55041
55041
|
const node = this.props.control;
|
|
55042
55042
|
// Calculating the offsets for each scale point.
|
|
55043
55043
|
const canvasBounds = new _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__.Rect(Number.MAX_VALUE, Number.MAX_VALUE, 0, 0);
|
|
55044
55044
|
const localBounds = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__.CoordinateHelper.ComputeLocalBounds(node);
|
|
55045
|
-
|
|
55045
|
+
const totalPadding = {
|
|
55046
|
+
left: 0,
|
|
55047
|
+
right: 0,
|
|
55048
|
+
top: 0,
|
|
55049
|
+
bottom: 0,
|
|
55050
|
+
};
|
|
55051
|
+
let current = node.parent;
|
|
55052
|
+
while (current !== null && current !== undefined) {
|
|
55053
|
+
totalPadding.left += current.paddingLeftInPixels;
|
|
55054
|
+
totalPadding.right += current.paddingRightInPixels;
|
|
55055
|
+
totalPadding.top += current.paddingTopInPixels;
|
|
55056
|
+
totalPadding.bottom += current.paddingBottomInPixels;
|
|
55057
|
+
current = current.parent;
|
|
55058
|
+
}
|
|
55059
|
+
const horizontalAdjustment = (totalPadding.left - totalPadding.right) * 0.5;
|
|
55060
|
+
localBounds.left += horizontalAdjustment;
|
|
55061
|
+
localBounds.right += horizontalAdjustment;
|
|
55062
|
+
const verticalAdjustment = (totalPadding.top - totalPadding.bottom) * 0.5;
|
|
55063
|
+
localBounds.top += verticalAdjustment;
|
|
55064
|
+
localBounds.bottom += verticalAdjustment;
|
|
55065
|
+
const updatedPoints = this.state.scalePoints.map((scalePoint) => {
|
|
55046
55066
|
const nodeSpace = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__.Vector2();
|
|
55047
55067
|
switch (scalePoint.horizontalPosition) {
|
|
55048
55068
|
case _gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.ScalePointPosition.Left:
|
|
@@ -55091,10 +55111,11 @@ class GizmoGeneric extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
|
|
|
55091
55111
|
scalePoint.position.x = canvas.x;
|
|
55092
55112
|
scalePoint.position.y = canvas.y;
|
|
55093
55113
|
scalePoint.rotation = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__.CoordinateHelper.GetRotation(node) * (180 / Math.PI);
|
|
55114
|
+
return scalePoint;
|
|
55094
55115
|
});
|
|
55095
55116
|
this.setState({
|
|
55096
55117
|
canvasBounds,
|
|
55097
|
-
scalePoints: [...
|
|
55118
|
+
scalePoints: [...updatedPoints],
|
|
55098
55119
|
});
|
|
55099
55120
|
}
|
|
55100
55121
|
_rotate(x, y, centerX, centerY, angle) {
|