@babylonjs/gui-editor 5.21.0 → 5.22.0
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.
|
@@ -49559,7 +49559,7 @@ class ColorComponentEntry extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49559
49559
|
}
|
|
49560
49560
|
}
|
|
49561
49561
|
render() {
|
|
49562
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
49562
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-component", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-component-value", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: 1, className: "numeric-input", value: this.props.value, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-component-label", children: this.props.label })] }));
|
|
49563
49563
|
}
|
|
49564
49564
|
}
|
|
49565
49565
|
|
|
@@ -49687,29 +49687,29 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49687
49687
|
core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
|
|
49688
49688
|
const colorHexRef = colorRef.toHexString();
|
|
49689
49689
|
const hasAlpha = this.props.color instanceof core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4;
|
|
49690
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
49690
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-container" + (this.props.linearhint ? " with-hints" : ""), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-saturation", onPointerMove: (e) => this.onSaturationPointerMove(e), onPointerDown: (e) => this.onSaturationPointerDown(e), onPointerUp: (e) => this.onSaturationPointerUp(e), ref: this._saturationRef, style: {
|
|
49691
49691
|
background: colorHexRef,
|
|
49692
|
-
}
|
|
49692
|
+
}, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-white" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-black" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-cursor", style: {
|
|
49693
49693
|
top: `${-(hsv.b * 100) + 100}%`,
|
|
49694
49694
|
left: `${hsv.g * 100}%`,
|
|
49695
|
-
} })] })
|
|
49695
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-hue", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-color", style: {
|
|
49696
49696
|
background: colorHex,
|
|
49697
|
-
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
49697
|
+
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-cursor", style: {
|
|
49698
49698
|
left: `${(hsv.r / 360.0) * 100}%`,
|
|
49699
49699
|
border: `1px solid ` + colorHexRef,
|
|
49700
|
-
} }) })
|
|
49700
|
+
} }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-rgb", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "red", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
|
|
49701
49701
|
this.state.color.r = value / 255.0;
|
|
49702
49702
|
this.forceUpdate();
|
|
49703
|
-
} }) })
|
|
49703
|
+
} }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "green", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
|
|
49704
49704
|
this.state.color.g = value / 255.0;
|
|
49705
49705
|
this.forceUpdate();
|
|
49706
|
-
} }) })
|
|
49706
|
+
} }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "blue", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
|
|
49707
49707
|
this.state.color.b = value / 255.0;
|
|
49708
49708
|
this.forceUpdate();
|
|
49709
|
-
} }) })
|
|
49709
|
+
} }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "alpha" + (hasAlpha ? "" : " grayed"), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
|
|
49710
49710
|
this.setState({ alpha: value / 255.0 });
|
|
49711
49711
|
this.forceUpdate();
|
|
49712
|
-
} }) })
|
|
49712
|
+
} }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-hex", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hex-label", children: "Hex" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hex-value", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_hexColor__WEBPACK_IMPORTED_MODULE_4__.HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
|
|
49713
49713
|
if (hasAlpha) {
|
|
49714
49714
|
const color4 = core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4.FromHexString(value);
|
|
49715
49715
|
this.setState({ color: new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3(color4.r, color4.g, color4.b), alpha: color4.a });
|
|
@@ -49717,7 +49717,7 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
49717
49717
|
else {
|
|
49718
49718
|
this.setState({ color: core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.FromHexString(value) });
|
|
49719
49719
|
}
|
|
49720
|
-
} }) })
|
|
49720
|
+
} }) })] }), this.props.linearhint && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-warning", children: "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))" }))] }));
|
|
49721
49721
|
}
|
|
49722
49722
|
}
|
|
49723
49723
|
|
|
@@ -49812,7 +49812,7 @@ const MessageDialog = (props) => {
|
|
|
49812
49812
|
if (!message) {
|
|
49813
49813
|
return null;
|
|
49814
49814
|
}
|
|
49815
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
49815
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-container": true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ dialog: true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-message": true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), children: message }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-buttons": true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-button-ok": true, error: isError }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), onClick: () => setMessage(""), children: "OK" }) })] }) }));
|
|
49816
49816
|
};
|
|
49817
49817
|
|
|
49818
49818
|
|
|
@@ -49897,7 +49897,7 @@ class CheckBoxLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
49897
49897
|
};
|
|
49898
49898
|
}
|
|
49899
49899
|
if (this.props.disabled) {
|
|
49900
|
-
this.state =
|
|
49900
|
+
this.state = { ...this.state, isDisabled: this.props.disabled };
|
|
49901
49901
|
}
|
|
49902
49902
|
}
|
|
49903
49903
|
shouldComponentUpdate(nextProps, nextState) {
|
|
@@ -49947,7 +49947,7 @@ class CheckBoxLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
49947
49947
|
render() {
|
|
49948
49948
|
const icons = this.props.large ? Icons.size40 : Icons.size30;
|
|
49949
49949
|
const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;
|
|
49950
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
49950
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "checkBoxLine", 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" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.iconLabel, children: this.props.label })), this.props.faIcons && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__.FontAwesomeIcon, { className: `cbx ${this.props.disabled ? "disabled" : ""}`, icon: this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled, onClick: () => !this.props.disabled && this.onChange() })), !this.props.faIcons && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "checkBox", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("label", { className: `container lbl${this.props.disabled ? " disabled" : ""} ${this.state.isSelected ? "checked" : ""}`, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "checkbox", className: `cbx hidden ${this.state.isConflict ? "conflict" : ""}`, checked: this.state.isSelected, onChange: () => this.onChange(), disabled: !!this.props.disabled }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "icon", src: icon, alt: this.props.label })] }) }))] }));
|
|
49951
49951
|
}
|
|
49952
49952
|
}
|
|
49953
49953
|
|
|
@@ -50114,9 +50114,9 @@ class ColorLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
50114
50114
|
}
|
|
50115
50115
|
render() {
|
|
50116
50116
|
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 });
|
|
50117
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
50117
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color3Line", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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", { className: "label", title: this.props.label, children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { 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) => {
|
|
50118
50118
|
this.setColorFromString(colorString);
|
|
50119
|
-
} }) })
|
|
50119
|
+
} }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { 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", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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) }))] }))] }));
|
|
50120
50120
|
}
|
|
50121
50121
|
}
|
|
50122
50122
|
|
|
@@ -50184,17 +50184,16 @@ class ColorPickerLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
|
|
|
50184
50184
|
this.syncPositions();
|
|
50185
50185
|
}
|
|
50186
50186
|
render() {
|
|
50187
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
50188
|
-
|
|
50189
|
-
if (evt.target !== ((_b = (_a = this._floatRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.querySelector(".color-picker-cover"))) {
|
|
50187
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker", 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", { className: "color-rect-background", ref: this._floatHostRef, onClick: () => this.setState({ pickerEnabled: true }), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-rect", style: { background: this.state.hex } }) }), this.state.pickerEnabled && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-cover", onClick: (evt) => {
|
|
50188
|
+
if (evt.target !== this._floatRef.current?.ownerDocument?.querySelector(".color-picker-cover")) {
|
|
50190
50189
|
return;
|
|
50191
50190
|
}
|
|
50192
50191
|
this.setState({ pickerEnabled: false });
|
|
50193
|
-
}
|
|
50192
|
+
}, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-float", ref: this._floatRef, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__.ColorPicker, { lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
|
|
50194
50193
|
const hex = color.toHexString();
|
|
50195
50194
|
this.setState({ hex, color });
|
|
50196
50195
|
this.props.onColorChanged(hex);
|
|
50197
|
-
} }) })
|
|
50196
|
+
} }) }) }) }))] }));
|
|
50198
50197
|
}
|
|
50199
50198
|
}
|
|
50200
50199
|
|
|
@@ -50230,7 +50229,7 @@ class FileButtonLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compone
|
|
|
50230
50229
|
evt.target.value = "";
|
|
50231
50230
|
}
|
|
50232
50231
|
render() {
|
|
50233
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
50232
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "buttonLine", 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)("label", { htmlFor: "file-upload" + this._id, className: "file-upload", children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] }));
|
|
50234
50233
|
}
|
|
50235
50234
|
}
|
|
50236
50235
|
FileButtonLineComponent._IDGenerator = 0;
|
|
@@ -50413,7 +50412,7 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
50413
50412
|
}
|
|
50414
50413
|
const value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__.conflictingValuesPlaceholder ? "" : this.state.value;
|
|
50415
50414
|
const placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__.conflictingValuesPlaceholder ? _targetsProxy__WEBPACK_IMPORTED_MODULE_4__.conflictingValuesPlaceholder : "";
|
|
50416
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [!this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
50415
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [!this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine", 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" }), (!this.props.icon || this.props.label != "") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: className, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step || this.props.isInteger ? "1" : "0.01", className: "numeric-input", onKeyDown: (evt) => this.onKeyDown(evt), value: value, onBlur: () => {
|
|
50417
50416
|
this.unlock();
|
|
50418
50417
|
if (this.props.onEnter) {
|
|
50419
50418
|
this.props.onEnter(this._store);
|
|
@@ -50428,7 +50427,7 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
50428
50427
|
this.props.onDragStop(valueAsNumber);
|
|
50429
50428
|
}
|
|
50430
50429
|
this.setState({ dragging: newDragging });
|
|
50431
|
-
} }))] })
|
|
50430
|
+
} }))] }), 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()) }))] }));
|
|
50432
50431
|
}
|
|
50433
50432
|
}
|
|
50434
50433
|
|
|
@@ -50486,29 +50485,26 @@ class InputArrowsComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50486
50485
|
this.props.incrementValue(-event.movementY);
|
|
50487
50486
|
};
|
|
50488
50487
|
this._releaseListener = () => {
|
|
50489
|
-
var _a, _b, _c, _d;
|
|
50490
50488
|
this.props.setDragging(false);
|
|
50491
|
-
|
|
50492
|
-
|
|
50493
|
-
|
|
50494
|
-
|
|
50489
|
+
this._arrowsRef.current?.ownerDocument.exitPointerLock();
|
|
50490
|
+
this._arrowsRef.current?.ownerDocument.defaultView.removeEventListener("pointerup", this._releaseListener);
|
|
50491
|
+
this._arrowsRef.current?.ownerDocument.removeEventListener("pointerlockchange", this._lockChangeListener);
|
|
50492
|
+
this._arrowsRef.current?.ownerDocument.defaultView.removeEventListener("mousemove", this._drag);
|
|
50495
50493
|
};
|
|
50496
50494
|
this._lockChangeListener = () => {
|
|
50497
|
-
|
|
50498
|
-
if (((_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.pointerLockElement) !== this._arrowsRef.current) {
|
|
50495
|
+
if (this._arrowsRef.current?.ownerDocument.pointerLockElement !== this._arrowsRef.current) {
|
|
50499
50496
|
this._releaseListener();
|
|
50500
50497
|
}
|
|
50501
50498
|
};
|
|
50502
50499
|
}
|
|
50503
50500
|
render() {
|
|
50504
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
50505
|
-
|
|
50506
|
-
|
|
50507
|
-
|
|
50508
|
-
(_c = this._arrowsRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument.defaultView.addEventListener("mousemove", this._drag);
|
|
50501
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "arrows", ref: this._arrowsRef, onPointerDown: () => {
|
|
50502
|
+
this._arrowsRef.current?.ownerDocument.addEventListener("pointerlockchange", this._lockChangeListener);
|
|
50503
|
+
this._arrowsRef.current?.ownerDocument.defaultView.addEventListener("pointerup", this._releaseListener);
|
|
50504
|
+
this._arrowsRef.current?.ownerDocument.defaultView.addEventListener("mousemove", this._drag);
|
|
50509
50505
|
this.props.setDragging(true);
|
|
50510
|
-
|
|
50511
|
-
}, onDragStart: (evt) => evt.preventDefault()
|
|
50506
|
+
this._arrowsRef.current?.requestPointerLock();
|
|
50507
|
+
}, onDragStart: (evt) => evt.preventDefault(), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "upArrowIcon", src: _valueUpArrowIcon_svg__WEBPACK_IMPORTED_MODULE_2__, alt: "Increase Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "downArrowIcon", src: _valueDownArrowIcon_svg__WEBPACK_IMPORTED_MODULE_3__, alt: "Increase Value" })] }));
|
|
50512
50508
|
}
|
|
50513
50509
|
}
|
|
50514
50510
|
|
|
@@ -50602,11 +50598,11 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50602
50598
|
}
|
|
50603
50599
|
}
|
|
50604
50600
|
render() {
|
|
50605
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
50601
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "numeric", 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" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "numeric-label", title: this.props.label, children: `${this.props.label}: ` })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), onFocus: () => {
|
|
50606
50602
|
if (this.props.lockObject) {
|
|
50607
50603
|
this.props.lockObject.lock = true;
|
|
50608
50604
|
}
|
|
50609
|
-
}, onBlur: () => this.onBlur() })] }))
|
|
50605
|
+
}, onBlur: () => this.onBlur() })] }));
|
|
50610
50606
|
}
|
|
50611
50607
|
}
|
|
50612
50608
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
@@ -50695,10 +50691,9 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
50695
50691
|
this.raiseOnPropertyChanged(newValue, store);
|
|
50696
50692
|
}
|
|
50697
50693
|
render() {
|
|
50698
|
-
|
|
50699
|
-
|
|
50700
|
-
|
|
50701
|
-
}) })) }))] })));
|
|
50694
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "listLine" + (this.props.className ? " " + this.props.className : ""), 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, color: "black", className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "options", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value ?? "", children: this.props.options.map((option, i) => {
|
|
50695
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("option", { selected: option.selected, value: option.value, title: option.label, children: option.label }, option.label + i));
|
|
50696
|
+
}) }) })] }));
|
|
50702
50697
|
}
|
|
50703
50698
|
}
|
|
50704
50699
|
|
|
@@ -50883,13 +50878,13 @@ class SliderLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
50883
50878
|
return value;
|
|
50884
50879
|
}
|
|
50885
50880
|
render() {
|
|
50886
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
50881
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "sliderLine", 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" }), (!this.props.icon || this.props.label != "") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: this.props.margin ? "label withMargins" : "label", title: this.props.label, children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, isInteger: this.props.decimalCount === 0, smallUI: true, label: "", target: this.state, digits: this.props.decimalCount === undefined ? 4 : this.props.decimalCount, propertyName: "value", min: this.props.minimum, max: this.props.maximum, onEnter: () => {
|
|
50887
50882
|
const changed = this.prepareDataToRead(this.state.value);
|
|
50888
50883
|
this.onChange(changed);
|
|
50889
50884
|
}, onChange: () => {
|
|
50890
50885
|
const changed = this.prepareDataToRead(this.state.value);
|
|
50891
50886
|
this.onChange(changed);
|
|
50892
|
-
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: this.props.unit }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
50887
|
+
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: this.props.unit }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "slider", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { className: "range", type: "range", step: this.props.step, min: this.prepareDataToRead(this.props.minimum), max: this.prepareDataToRead(this.props.maximum), value: this.prepareDataToRead(this.state.value), onInput: (evt) => this.onInput(evt.target.value), onChange: (evt) => this.onChange(evt.target.value) }) })] }));
|
|
50893
50888
|
}
|
|
50894
50889
|
}
|
|
50895
50890
|
|
|
@@ -51097,7 +51092,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
51097
51092
|
const value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder ? "" : this.state.value;
|
|
51098
51093
|
const placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder ? _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder : this.props.placeholder || "";
|
|
51099
51094
|
const step = this.props.step || (this.props.roundValues ? 1 : 0.01);
|
|
51100
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
51095
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: this.props.multilines ? "textInputArea" : this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine", 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, color: "black", className: "icon" }), this.props.label !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label })), this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("textarea", { value: this.state.value, onFocus: () => {
|
|
51101
51096
|
if (this.props.lockObject) {
|
|
51102
51097
|
this.props.lockObject.lock = true;
|
|
51103
51098
|
}
|
|
@@ -51111,7 +51106,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
51111
51106
|
if (this.props.lockObject) {
|
|
51112
51107
|
this.props.lockObject.lock = false;
|
|
51113
51108
|
}
|
|
51114
|
-
} }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
51109
|
+
} }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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) => {
|
|
51115
51110
|
if (this.props.lockObject) {
|
|
51116
51111
|
this.props.lockObject.lock = false;
|
|
51117
51112
|
}
|
|
@@ -51120,7 +51115,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
51120
51115
|
if (this.props.lockObject) {
|
|
51121
51116
|
this.props.lockObject.lock = true;
|
|
51122
51117
|
}
|
|
51123
|
-
}, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), placeholder: placeholder, type: this.props.numeric ? "number" : "text", step: step }), this.props.arrows && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__.InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) }))] }))
|
|
51118
|
+
}, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), placeholder: placeholder, type: this.props.numeric ? "number" : "text", step: step }), this.props.arrows && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__.InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) }))] })), this.props.unit] }));
|
|
51124
51119
|
}
|
|
51125
51120
|
}
|
|
51126
51121
|
|
|
@@ -51161,13 +51156,12 @@ class TextLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
51161
51156
|
return null;
|
|
51162
51157
|
}
|
|
51163
51158
|
if (this.props.onLink || this.props.url) {
|
|
51164
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
51159
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "link-value", title: this.props.value, onClick: () => this.onLink(), children: this.props.url ? "doc" : this.props.value || "no name" }));
|
|
51165
51160
|
}
|
|
51166
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
51161
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "value", title: this.props.value, style: { color: this.props.color ? this.props.color : "" }, children: this.props.value || "no name" }));
|
|
51167
51162
|
}
|
|
51168
51163
|
render() {
|
|
51169
|
-
|
|
51170
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : "") }, { 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: (_b = (_a = this.props.tooltip) !== null && _a !== void 0 ? _a : this.props.label) !== null && _b !== void 0 ? _b : "" }, { children: (_c = this.props.label) !== null && _c !== void 0 ? _c : "" })), this.renderContent()] })));
|
|
51164
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : ""), 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", { className: "label", title: this.props.tooltip ?? this.props.label ?? "", children: this.props.label ?? "" }), this.renderContent()] }));
|
|
51171
51165
|
}
|
|
51172
51166
|
}
|
|
51173
51167
|
|
|
@@ -51188,10 +51182,10 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
51188
51182
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
|
|
51189
51183
|
|
|
51190
51184
|
function UnitButton(props) {
|
|
51191
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button",
|
|
51185
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: "unit", onClick: () => {
|
|
51192
51186
|
if (props.onClick && !props.locked)
|
|
51193
51187
|
props.onClick(props.unit || "");
|
|
51194
|
-
}, disabled: props.locked
|
|
51188
|
+
}, disabled: props.locked, children: props.unit }));
|
|
51195
51189
|
}
|
|
51196
51190
|
|
|
51197
51191
|
|
|
@@ -51444,7 +51438,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51444
51438
|
}
|
|
51445
51439
|
render() {
|
|
51446
51440
|
const isPasteDisabled = this.props.globalState.workbench ? this.props.globalState.workbench.pasteDisabled : true;
|
|
51447
|
-
const size = this.props.globalState.workbench ?
|
|
51441
|
+
const size = this.props.globalState.workbench ? { ...this.props.globalState.workbench.guiSize } : { width: 0, height: 0 };
|
|
51448
51442
|
const copyyIcon = this.props.globalState.selectedControls.length === 0 ? _imgs_buttonbar_copyIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_22__ : _imgs_buttonbar_copyIcon_svg__WEBPACK_IMPORTED_MODULE_19__;
|
|
51449
51443
|
const deleteeIcon = this.props.globalState.selectedControls.length === 0 ? _imgs_buttonBar_deleteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_24__ : _imgs_buttonBar_deleteIcon_svg__WEBPACK_IMPORTED_MODULE_21__;
|
|
51450
51444
|
const pasteeIcon = isPasteDisabled ? _imgs_buttonbar_pasteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_23__ : _imgs_buttonbar_pasteIcon_svg__WEBPACK_IMPORTED_MODULE_20__;
|
|
@@ -51454,7 +51448,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51454
51448
|
this.props.globalState.onResponsiveChangeObservable.notifyObservers(false);
|
|
51455
51449
|
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", false);
|
|
51456
51450
|
}
|
|
51457
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
51451
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-commands", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "commands-left", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_babylonLogo_svg__WEBPACK_IMPORTED_MODULE_16__, color: "white", className: "active", draggable: false }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandDropdownComponent__WEBPACK_IMPORTED_MODULE_8__.CommandDropdownComponent, { globalState: this.props.globalState, toRight: true, icon: _imgs_hamburgerIcon_svg__WEBPACK_IMPORTED_MODULE_11__, tooltip: "Options", items: [
|
|
51458
51452
|
{
|
|
51459
51453
|
label: "Save",
|
|
51460
51454
|
onClick: () => {
|
|
@@ -51495,24 +51489,23 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51495
51489
|
this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.PAN;
|
|
51496
51490
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Zoom", shortcut: "Z", icon: _imgs_zoomIcon_svg__WEBPACK_IMPORTED_MODULE_14__, isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM, onClick: () => {
|
|
51497
51491
|
this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM;
|
|
51498
|
-
} })] })
|
|
51492
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Copy Selcted", shortcut: "Ctrl + C", icon: copyyIcon, isActive: false, copyDeleteDisabled: this.props.globalState.selectedControls.length === 0, onClick: () => {
|
|
51499
51493
|
this.props.globalState.onCopyObservable.notifyObservers((content) => this.props.globalState.hostWindow.navigator.clipboard.writeText(content));
|
|
51500
51494
|
this.forceUpdate();
|
|
51501
51495
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Paste", shortcut: "Ctrl + V", icon: pasteeIcon, isActive: false, pasteDisabled: isPasteDisabled, onClick: async () => {
|
|
51502
51496
|
this.props.globalState.onPasteObservable.notifyObservers(await this.props.globalState.hostWindow.navigator.clipboard.readText());
|
|
51503
51497
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Delete", shortcut: "Delete", icon: deleteeIcon, isActive: false, copyDeleteDisabled: this.props.globalState.selectedControls.length === 0, onClick: () => {
|
|
51504
51498
|
this.props.globalState.selectedControls.forEach((guiNode) => {
|
|
51505
|
-
var _a;
|
|
51506
51499
|
if (guiNode != this.props.globalState.guiTexture.getChildren()[0]) {
|
|
51507
51500
|
this.props.globalState.guiTexture.removeControl(guiNode);
|
|
51508
|
-
|
|
51501
|
+
this.props.globalState.liveGuiTexture?.removeControl(guiNode);
|
|
51509
51502
|
guiNode.dispose();
|
|
51510
51503
|
}
|
|
51511
51504
|
});
|
|
51512
51505
|
this.props.globalState.setSelection([]);
|
|
51513
|
-
} })] })
|
|
51506
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Fit to Window", shortcut: "F", icon: _imgs_canvasFitIcon_svg__WEBPACK_IMPORTED_MODULE_17__, isActive: false, onClick: () => {
|
|
51514
51507
|
this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
|
|
51515
|
-
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Toggle Guides", shortcut: "G", icon: _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_15__, isActive: this.props.globalState.outlines, onClick: () => (this.props.globalState.outlines = !this.props.globalState.outlines) })] })
|
|
51508
|
+
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Toggle Guides", shortcut: "G", icon: _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_15__, isActive: this.props.globalState.outlines, onClick: () => (this.props.globalState.outlines = !this.props.globalState.outlines) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "divider padded", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: this._lockObject, label: "Artboard:", target: this.props.globalState, propertyName: "backgroundColor", disableAlpha: true }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "divider padded", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Responsive:", iconLabel: "Responsive GUIs will resize the UI layout and reflow controls to accommodate different device screen sizes", isSelected: () => core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true), onSelect: (value) => {
|
|
51516
51509
|
this.props.globalState.onResponsiveChangeObservable.notifyObservers(value);
|
|
51517
51510
|
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", value);
|
|
51518
51511
|
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("responsiveUI", value);
|
|
@@ -51555,7 +51548,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
|
51555
51548
|
this._stopUpdating = false;
|
|
51556
51549
|
this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
|
|
51557
51550
|
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.width);
|
|
51558
|
-
}, arrows: true, isInteger: true })] }))] })
|
|
51551
|
+
}, arrows: true, isInteger: true })] }))] })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "commands-right", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_18__, className: "beta-flag", draggable: false }) })] }));
|
|
51559
51552
|
}
|
|
51560
51553
|
}
|
|
51561
51554
|
|
|
@@ -51597,7 +51590,7 @@ class CommandButtonComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
51597
51590
|
else if (this.props.pasteDisabled) {
|
|
51598
51591
|
divClassName += " pasteDisabled";
|
|
51599
51592
|
}
|
|
51600
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
51593
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: divClassName, onClick: this.props.onClick, title: `${this.props.tooltip} ${this.props.shortcut ? " (" + this.props.shortcut + ")" : ""}`, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: iconClassName, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: this.props.isActive ? "active" : "", draggable: false }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-label", children: this.props.tooltip }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-label", children: this.props.tooltip })] }));
|
|
51601
51594
|
}
|
|
51602
51595
|
}
|
|
51603
51596
|
|
|
@@ -51629,7 +51622,7 @@ class CommandDropdownComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
|
|
|
51629
51622
|
render() {
|
|
51630
51623
|
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-blocker", onClick: () => {
|
|
51631
51624
|
this.setState({ isExpanded: false });
|
|
51632
|
-
} })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
51625
|
+
} })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "command-dropdown-root", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "command-dropdown" + (this.state.isExpanded ? " activated" : ""), title: this.props.tooltip, onClick: () => {
|
|
51633
51626
|
this.setState({ isExpanded: false });
|
|
51634
51627
|
const newState = !this.state.isExpanded;
|
|
51635
51628
|
const pgHost = document.getElementById("embed-host");
|
|
@@ -51637,9 +51630,9 @@ class CommandDropdownComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
|
|
|
51637
51630
|
pgHost.style.zIndex = newState ? "0" : "10";
|
|
51638
51631
|
}
|
|
51639
51632
|
this.setState({ isExpanded: newState });
|
|
51640
|
-
}
|
|
51633
|
+
}, children: [this.props.icon && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-icon", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon }) })), !this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-active" })] }), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-content sub1" + (this.props.toRight ? " toRight" : ""), children: this.props.items.map((m) => {
|
|
51641
51634
|
if (!m.fileButton) {
|
|
51642
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
51635
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "command-dropdown-label" + (m.isActive ? " active" : ""), onClick: () => {
|
|
51643
51636
|
if (!m.onClick) {
|
|
51644
51637
|
this.forceUpdate();
|
|
51645
51638
|
return;
|
|
@@ -51648,20 +51641,20 @@ class CommandDropdownComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
|
|
|
51648
51641
|
m.onClick();
|
|
51649
51642
|
this.setState({ isExpanded: false, activeState: m.label });
|
|
51650
51643
|
}
|
|
51651
|
-
}, title: m.label
|
|
51644
|
+
}, title: m.label, children: [!m.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-label-text", children: (m.isActive ? "> " : "") + m.label }), m.icon && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-icon", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: m.icon }) })), m.onCheck && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "checkBox", className: "command-dropdown-label-check", onChange: (evt) => {
|
|
51652
51645
|
this.forceUpdate();
|
|
51653
51646
|
m.onCheck(evt.target.checked);
|
|
51654
|
-
}, checked: false })), m.subItems && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
51655
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
51647
|
+
}, checked: false })), m.subItems && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-arrow", children: ">" }), m.subItems && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "sub-items ", children: m.subItems.map((s) => {
|
|
51648
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "sub-item", onClick: () => {
|
|
51656
51649
|
m.onClick();
|
|
51657
51650
|
this.setState({ isExpanded: false });
|
|
51658
|
-
}
|
|
51659
|
-
}) }))
|
|
51651
|
+
}, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "sub-item-label", children: s }) }, s));
|
|
51652
|
+
}) }))] }, m.label));
|
|
51660
51653
|
}
|
|
51661
51654
|
else {
|
|
51662
51655
|
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_2__.FileButtonLineComponent, { label: "Load", onClick: (file) => this.props.globalState.onLoadObservable.notifyObservers(file), accept: ".json" }, m.label));
|
|
51663
51656
|
}
|
|
51664
|
-
}) }))
|
|
51657
|
+
}) }))] })] }));
|
|
51665
51658
|
}
|
|
51666
51659
|
}
|
|
51667
51660
|
|
|
@@ -51718,9 +51711,9 @@ class LogComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
51718
51711
|
const h = today.getHours();
|
|
51719
51712
|
const m = today.getMinutes();
|
|
51720
51713
|
const s = today.getSeconds();
|
|
51721
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
51722
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
51723
|
-
}) }))
|
|
51714
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "log-console", ref: "log-console", children: this.state.logs.map((l, i) => {
|
|
51715
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "log" + (l.isError ? " error" : ""), children: h + ":" + m + ":" + s + ": " + l.message }, i));
|
|
51716
|
+
}) }));
|
|
51724
51717
|
}
|
|
51725
51718
|
}
|
|
51726
51719
|
|
|
@@ -51773,11 +51766,11 @@ class ParentingPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
|
51773
51766
|
}
|
|
51774
51767
|
render() {
|
|
51775
51768
|
this.getCellInfo();
|
|
51776
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
51769
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "GRID PARENTING", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Row #", target: this, propertyName: "_rowNumber", isInteger: true, min: 0, onChange: () => {
|
|
51777
51770
|
this.updateGridPosition();
|
|
51778
51771
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Column #", target: this, propertyName: "_columnNumber", isInteger: true, min: 0, onChange: () => {
|
|
51779
51772
|
this.updateGridPosition();
|
|
51780
|
-
} })] })
|
|
51773
|
+
} })] })] }));
|
|
51781
51774
|
}
|
|
51782
51775
|
}
|
|
51783
51776
|
|
|
@@ -51830,11 +51823,11 @@ class ButtonPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
|
|
|
51830
51823
|
render() {
|
|
51831
51824
|
const { rectangles, lockObject, onPropertyChangedObservable, onAddComponent } = this.props;
|
|
51832
51825
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(rectangles, onPropertyChangedObservable);
|
|
51833
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
51826
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: rectangles, 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_4__.TextLineComponent, { label: "BUTTON", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__.CommandButtonComponent, { tooltip: "Add TextBlock", icon: shared_ui_components_imgs_addTextButtonIcon_svg__WEBPACK_IMPORTED_MODULE_10__, shortcut: "", isActive: false, onClick: () => {
|
|
51834
51827
|
onAddComponent("Text");
|
|
51835
51828
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__.CommandButtonComponent, { tooltip: "Add Image", icon: shared_ui_components_imgs_addImageButtonIcon_svg__WEBPACK_IMPORTED_MODULE_11__, shortcut: "", isActive: false, onClick: () => {
|
|
51836
51829
|
onAddComponent("ButtonImage");
|
|
51837
|
-
} })] })
|
|
51830
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_9__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Stroke Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_5__.UnitButton, { unit: "PX", locked: true }), min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_9__.IconComponent, { icon: shared_ui_components_imgs_conerRadiusIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Corner Radius" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "cornerRadius", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_5__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_containerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__.ContainerPropertyGridComponent, { containers: rectangles, onPropertyChangedObservable: onPropertyChangedObservable })] }));
|
|
51838
51831
|
}
|
|
51839
51832
|
}
|
|
51840
51833
|
|
|
@@ -51882,7 +51875,7 @@ class CheckboxPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.C
|
|
|
51882
51875
|
}
|
|
51883
51876
|
render() {
|
|
51884
51877
|
const checkboxes = this.props.checkboxes;
|
|
51885
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
51878
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: checkboxes, onPropertyChangedObservable: this.props.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_5__.TextLineComponent, { label: "CHECKBOX", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Check Size Ratio" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: " ", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(checkboxes, this.props.onPropertyChangedObservable), propertyName: "checkSizeRatio", min: 0, max: 1, arrows: true, step: "0.01", digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_checkboxIconDark_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Is Checkbox Checked" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: "CHECKED", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(checkboxes, this.props.onPropertyChangedObservable), propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Thickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(checkboxes, this.props.onPropertyChangedObservable), propertyName: "thickness", label: "", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] })] }));
|
|
51886
51879
|
}
|
|
51887
51880
|
}
|
|
51888
51881
|
|
|
@@ -51922,7 +51915,7 @@ class ColorPickerPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1_
|
|
|
51922
51915
|
}
|
|
51923
51916
|
render() {
|
|
51924
51917
|
const colorPickers = this.props.colorPickers;
|
|
51925
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
51918
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: colorPickers }), (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_4__.TextLineComponent, { label: "COLOR PICKER", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_6__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_7__, label: "Color Picker Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_3__.ColorLineComponent, { label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_5__.makeTargetsProxy)(colorPickers, this.props.onPropertyChangedObservable), propertyName: "value", disableAlpha: true, lockObject: this.props.lockObject })] })] }));
|
|
51926
51919
|
}
|
|
51927
51920
|
}
|
|
51928
51921
|
|
|
@@ -52026,7 +52019,6 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
52026
52019
|
|
|
52027
52020
|
class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
52028
52021
|
constructor(props) {
|
|
52029
|
-
var _a;
|
|
52030
52022
|
super(props);
|
|
52031
52023
|
const controls = this.props.controls;
|
|
52032
52024
|
for (const control of controls) {
|
|
@@ -52036,7 +52028,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52036
52028
|
}
|
|
52037
52029
|
control.metadata._previousCenter = transformed;
|
|
52038
52030
|
}
|
|
52039
|
-
this._onPropertyChangedObserver =
|
|
52031
|
+
this._onPropertyChangedObserver = this.props.onPropertyChangedObservable?.add((event) => {
|
|
52040
52032
|
const isTransformEvent = event.property === "transformCenterX" || event.property === "transformCenterY";
|
|
52041
52033
|
for (const control of controls) {
|
|
52042
52034
|
let transformed = this._getTransformedReferenceCoordinate(control);
|
|
@@ -52073,7 +52065,6 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52073
52065
|
this.forceUpdate();
|
|
52074
52066
|
}
|
|
52075
52067
|
_checkAndUpdateValues(propertyName, value) {
|
|
52076
|
-
var _a, _b, _c;
|
|
52077
52068
|
for (const control of this.props.controls) {
|
|
52078
52069
|
// checking the previous value unit to see what it was.
|
|
52079
52070
|
const vau = control["_" + propertyName];
|
|
@@ -52086,10 +52077,10 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52086
52077
|
else if (value.charAt(value.length - 1) === "x" && value.charAt(value.length - 2) === "p") {
|
|
52087
52078
|
percentage = false;
|
|
52088
52079
|
}
|
|
52089
|
-
if (
|
|
52080
|
+
if (control.parent?.typeName === "StackPanel") {
|
|
52090
52081
|
percentage = false;
|
|
52091
52082
|
}
|
|
52092
|
-
let newValue =
|
|
52083
|
+
let newValue = value.match(/([\d.,]+)/g)?.[0];
|
|
52093
52084
|
if (!newValue) {
|
|
52094
52085
|
newValue = "0";
|
|
52095
52086
|
}
|
|
@@ -52097,7 +52088,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52097
52088
|
newValue += percentage ? "%" : "px";
|
|
52098
52089
|
const initialValue = control[propertyName];
|
|
52099
52090
|
control[propertyName] = newValue;
|
|
52100
|
-
|
|
52091
|
+
this.props.onPropertyChangedObservable?.notifyObservers({
|
|
52101
52092
|
object: control,
|
|
52102
52093
|
property: propertyName,
|
|
52103
52094
|
initialValue: initialValue,
|
|
@@ -52114,9 +52105,8 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52114
52105
|
}
|
|
52115
52106
|
}
|
|
52116
52107
|
componentWillUnmount() {
|
|
52117
|
-
var _a;
|
|
52118
52108
|
if (this._onPropertyChangedObserver) {
|
|
52119
|
-
|
|
52109
|
+
this.props.onPropertyChangedObservable?.remove(this._onPropertyChangedObserver);
|
|
52120
52110
|
}
|
|
52121
52111
|
}
|
|
52122
52112
|
render() {
|
|
@@ -52173,7 +52163,6 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52173
52163
|
}
|
|
52174
52164
|
};
|
|
52175
52165
|
const increment = (propertyName, amount, minimum, maximum) => {
|
|
52176
|
-
var _a;
|
|
52177
52166
|
for (const control of controls) {
|
|
52178
52167
|
const initialValue = control[propertyName];
|
|
52179
52168
|
const initialUnit = control["_" + propertyName]._unit;
|
|
@@ -52186,7 +52175,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52186
52175
|
if (initialUnit === gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.ValueAndUnit.UNITMODE_PERCENTAGE) {
|
|
52187
52176
|
_diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_10__.CoordinateHelper.ConvertToPercentage(control, [propertyName]);
|
|
52188
52177
|
}
|
|
52189
|
-
|
|
52178
|
+
this.props.onPropertyChangedObservable?.notifyObservers({
|
|
52190
52179
|
object: control,
|
|
52191
52180
|
property: propertyName,
|
|
52192
52181
|
initialValue: initialValue,
|
|
@@ -52211,7 +52200,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52211
52200
|
];
|
|
52212
52201
|
let horizontalDisabled = false, verticalDisabled = false, widthUnitsLocked = false, heightUnitsLocked = false;
|
|
52213
52202
|
const parent = controls[0].parent;
|
|
52214
|
-
if (
|
|
52203
|
+
if (parent?.getClassName() === "StackPanel" || parent?.getClassName() === "VirtualKeyboard") {
|
|
52215
52204
|
if (parent.isVertical) {
|
|
52216
52205
|
verticalDisabled = true;
|
|
52217
52206
|
heightUnitsLocked = true;
|
|
@@ -52221,7 +52210,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52221
52210
|
widthUnitsLocked = true;
|
|
52222
52211
|
}
|
|
52223
52212
|
}
|
|
52224
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [!this.props.hideDimensions && ((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__.jsxs)("div",
|
|
52213
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [!this.props.hideDimensions && ((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__.jsxs)("div", { className: "ge-divider alignment-bar", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__.CommandButtonComponent, { tooltip: "Left", icon: shared_ui_components_imgs_hAlignLeftIcon_svg__WEBPACK_IMPORTED_MODULE_16__, shortcut: "", isActive: horizontalAlignment === gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.HORIZONTAL_ALIGNMENT_LEFT, onClick: () => {
|
|
52225
52214
|
this._updateAlignment("horizontalAlignment", gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.HORIZONTAL_ALIGNMENT_LEFT);
|
|
52226
52215
|
}, disabled: horizontalDisabled }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__.CommandButtonComponent, { tooltip: "Center", icon: shared_ui_components_imgs_hAlignCenterIcon_svg__WEBPACK_IMPORTED_MODULE_17__, shortcut: "", isActive: horizontalAlignment === gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.HORIZONTAL_ALIGNMENT_CENTER, onClick: () => {
|
|
52227
52216
|
this._updateAlignment("horizontalAlignment", gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.HORIZONTAL_ALIGNMENT_CENTER);
|
|
@@ -52233,7 +52222,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52233
52222
|
this._updateAlignment("verticalAlignment", gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.VERTICAL_ALIGNMENT_CENTER);
|
|
52234
52223
|
}, disabled: verticalDisabled }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__.CommandButtonComponent, { tooltip: "Bottom", icon: shared_ui_components_imgs_vAlignBottomIcon_svg__WEBPACK_IMPORTED_MODULE_21__, shortcut: "", isActive: verticalAlignment === gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.VERTICAL_ALIGNMENT_BOTTOM, onClick: () => {
|
|
52235
52224
|
this._updateAlignment("verticalAlignment", gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.VERTICAL_ALIGNMENT_BOTTOM);
|
|
52236
|
-
}, disabled: verticalDisabled })] })
|
|
52225
|
+
}, disabled: verticalDisabled })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_positionIcon_svg__WEBPACK_IMPORTED_MODULE_22__, label: "Position" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "X", delayInput: true, value: getValue("_left"), onChange: (newValue) => this._checkAndUpdateValues("left", newValue), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_left"), onClick: (unit) => convertUnits(unit, "left") }), arrows: true, arrowsIncrement: (amount) => increment("left", amount) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "Y", delayInput: true, value: getValue("_top"), onChange: (newValue) => this._checkAndUpdateValues("top", newValue), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_top"), onClick: (unit) => convertUnits(unit, "top") }), arrows: true, arrowsIncrement: (amount) => increment("top", amount) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_23__, label: "Size" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "W", delayInput: true, value: getValue("_width"), onChange: (newValue) => {
|
|
52237
52226
|
for (const control of controls) {
|
|
52238
52227
|
if (control.typeName === "Image") {
|
|
52239
52228
|
control.autoScale = false;
|
|
@@ -52263,19 +52252,19 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52263
52252
|
}
|
|
52264
52253
|
}
|
|
52265
52254
|
this._checkAndUpdateValues("height", newValue);
|
|
52266
|
-
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_height"), locked: heightUnitsLocked, onClick: (unit) => convertUnits(unit, "height") }), arrows: true, arrowsIncrement: (amount) => increment("height", amount) })] })
|
|
52255
|
+
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_height"), locked: heightUnitsLocked, onClick: (unit) => convertUnits(unit, "height") }), arrows: true, arrowsIncrement: (amount) => increment("height", amount) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_verticalMarginIcon_svg__WEBPACK_IMPORTED_MODULE_24__, label: "Vertical Padding" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "T", delayInput: true, value: getValue("_paddingTop"), onChange: (newValue) => {
|
|
52267
52256
|
this._checkAndUpdateValues("paddingTop", newValue);
|
|
52268
52257
|
this._markChildrenAsDirty();
|
|
52269
52258
|
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingTop"), onClick: (unit) => convertUnits(unit, "paddingTop") }), arrows: true, arrowsIncrement: (amount) => increment("paddingTop", amount, 0) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "B", delayInput: true, value: getValue("_paddingBottom"), onChange: (newValue) => {
|
|
52270
52259
|
this._checkAndUpdateValues("paddingBottom", newValue);
|
|
52271
52260
|
this._markChildrenAsDirty();
|
|
52272
|
-
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingBottom"), onClick: (unit) => convertUnits(unit, "paddingBottom") }), arrows: true, arrowsIncrement: (amount) => increment("paddingBottom", amount, 0) })] })
|
|
52261
|
+
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingBottom"), onClick: (unit) => convertUnits(unit, "paddingBottom") }), arrows: true, arrowsIncrement: (amount) => increment("paddingBottom", amount, 0) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_horizontalMarginIcon_svg__WEBPACK_IMPORTED_MODULE_25__, label: "Horizontal Padding" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "L", delayInput: true, value: getValue("_paddingLeft"), onChange: (newValue) => {
|
|
52273
52262
|
this._checkAndUpdateValues("paddingLeft", newValue);
|
|
52274
52263
|
this._markChildrenAsDirty();
|
|
52275
52264
|
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingLeft"), onClick: (unit) => convertUnits(unit, "paddingLeft") }), arrows: true, arrowsIncrement: (amount) => increment("paddingLeft", amount) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "R", delayInput: true, value: getValue("_paddingRight"), onChange: (newValue) => {
|
|
52276
52265
|
this._checkAndUpdateValues("paddingRight", newValue);
|
|
52277
52266
|
this._markChildrenAsDirty();
|
|
52278
|
-
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingRight"), onClick: (unit) => convertUnits(unit, "paddingRight") }), arrows: true, arrowsIncrement: (amount) => increment("paddingRight", amount) })] })), (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_12__.IconComponent, { icon: shared_ui_components_imgs_descendantsOnlyPaddingIcon_svg__WEBPACK_IMPORTED_MODULE_26__, label: "Makes padding affect only the descendants of this control" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "ONLY PAD DESCENDANTS", target: proxy, propertyName: "descendentsOnlyPadding" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "TRANSFORMATION", value: " ", color: "grey" }), (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_12__.IconComponent, { icon: shared_ui_components_imgs_scaleIcon_svg__WEBPACK_IMPORTED_MODULE_27__, label: "Scale" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "scaleX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "scaleY", arrows: true, digits: 2, step: "0.0005" })] })), (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_12__.IconComponent, { icon: shared_ui_components_imgs_pivotIcon_svg__WEBPACK_IMPORTED_MODULE_28__, label: "Transform Center" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "transformCenterX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "transformCenterY", arrows: true, digits: 2, step: "0.0005" })] })), (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_12__.IconComponent, { icon: shared_ui_components_imgs_rotationIcon_svg__WEBPACK_IMPORTED_MODULE_29__, label: "Rotation" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { iconLabel: "Rotation", lockObject: this.props.lockObject, label: "", target: proxy, decimalCount: 2, propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "RAD", locked: true }) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "APPEARANCE", value: " ", color: "grey" }), controls.every((control) => control.color !== undefined && control.typeName !== "Image" && control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker") && ((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_12__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_30__, label: "Outline Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Outline Color", target: proxy, propertyName: "color" })] }))), controls.every((control) => control.background !== undefined) && ((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_12__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_31__, label: "Background Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Background Color", target: proxy, propertyName: "background" })] }))), (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_12__.IconComponent, { icon: shared_ui_components_imgs_alphaIcon_svg__WEBPACK_IMPORTED_MODULE_32__, label: "Alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01 })] })), (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_12__.IconComponent, { icon: shared_ui_components_imgs_shadowColorIcon_svg__WEBPACK_IMPORTED_MODULE_33__, label: "Shadow Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "shadowColor", disableAlpha: true })] })), (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_12__.IconComponent, { icon: shared_ui_components_imgs_shadowOffsetXIcon_svg__WEBPACK_IMPORTED_MODULE_34__, label: "Shadow Offset" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "shadowOffsetX", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "shadowOffsetY", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 })] })), (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_12__.IconComponent, { icon: shared_ui_components_imgs_shadowBlurIcon_svg__WEBPACK_IMPORTED_MODULE_35__, label: "Shadow Blur" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "shadowBlur", arrows: true, min: 0, digits: 2 })] })), showTextProperties && ((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)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "FONT STYLE", 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_12__.IconComponent, { icon: shared_ui_components_imgs_fontFamilyIcon_svg__WEBPACK_IMPORTED_MODULE_36__, label: "Font Family" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "fontFamily" })] })), (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_12__.IconComponent, { icon: shared_ui_components_imgs_fontWeightIcon_svg__WEBPACK_IMPORTED_MODULE_37__, label: "Font Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "fontWeight" })] })), (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_12__.IconComponent, { icon: shared_ui_components_imgs_fontStyleIcon_svg__WEBPACK_IMPORTED_MODULE_38__, label: "Font Style" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "", target: proxy, propertyName: "fontStyle", options: fontStyleOptions, onSelect: (newValue) => {
|
|
52267
|
+
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingRight"), onClick: (unit) => convertUnits(unit, "paddingRight") }), arrows: true, arrowsIncrement: (amount) => increment("paddingRight", amount) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_descendantsOnlyPaddingIcon_svg__WEBPACK_IMPORTED_MODULE_26__, label: "Makes padding affect only the descendants of this control" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "ONLY PAD DESCENDANTS", target: proxy, propertyName: "descendentsOnlyPadding" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "TRANSFORMATION", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_scaleIcon_svg__WEBPACK_IMPORTED_MODULE_27__, label: "Scale" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "scaleX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "scaleY", arrows: true, digits: 2, step: "0.0005" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_pivotIcon_svg__WEBPACK_IMPORTED_MODULE_28__, label: "Transform Center" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "transformCenterX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "transformCenterY", arrows: true, digits: 2, step: "0.0005" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_rotationIcon_svg__WEBPACK_IMPORTED_MODULE_29__, label: "Rotation" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { iconLabel: "Rotation", lockObject: this.props.lockObject, label: "", target: proxy, decimalCount: 2, propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "RAD", locked: true }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "APPEARANCE", value: " ", color: "grey" }), controls.every((control) => control.color !== undefined && control.typeName !== "Image" && control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_30__, label: "Outline Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Outline Color", target: proxy, propertyName: "color" })] })), controls.every((control) => control.background !== undefined) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_31__, label: "Background Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Background Color", target: proxy, propertyName: "background" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_alphaIcon_svg__WEBPACK_IMPORTED_MODULE_32__, label: "Alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowColorIcon_svg__WEBPACK_IMPORTED_MODULE_33__, label: "Shadow Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "shadowColor", disableAlpha: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowOffsetXIcon_svg__WEBPACK_IMPORTED_MODULE_34__, label: "Shadow Offset" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "shadowOffsetX", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "shadowOffsetY", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowBlurIcon_svg__WEBPACK_IMPORTED_MODULE_35__, label: "Shadow Blur" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "shadowBlur", arrows: true, min: 0, digits: 2 })] }), showTextProperties && ((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)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "FONT STYLE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontFamilyIcon_svg__WEBPACK_IMPORTED_MODULE_36__, label: "Font Family" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "fontFamily" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontWeightIcon_svg__WEBPACK_IMPORTED_MODULE_37__, label: "Font Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "fontWeight" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontStyleIcon_svg__WEBPACK_IMPORTED_MODULE_38__, label: "Font Style" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "", target: proxy, propertyName: "fontStyle", options: fontStyleOptions, onSelect: (newValue) => {
|
|
52279
52268
|
proxy.fontStyle = ["", "italic", "oblique"][newValue];
|
|
52280
52269
|
}, extractValue: () => {
|
|
52281
52270
|
switch (proxy.fontStyle) {
|
|
@@ -52286,7 +52275,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
52286
52275
|
default:
|
|
52287
52276
|
return 0;
|
|
52288
52277
|
}
|
|
52289
|
-
} })] })
|
|
52278
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontSizeIcon_svg__WEBPACK_IMPORTED_MODULE_39__, label: "Font Size" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", numbersOnly: true, value: getValue("_fontSize"), onChange: (newValue) => this._checkAndUpdateValues("fontSize", newValue), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_fontSize"), onClick: (unit) => convertUnits(unit, "fontSize") }), arrows: true, arrowsIncrement: (amount) => increment("fontSize", amount, 0) })] })] }))] }));
|
|
52290
52279
|
}
|
|
52291
52280
|
}
|
|
52292
52281
|
|
|
@@ -52326,7 +52315,7 @@ class ContainerPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
|
52326
52315
|
render() {
|
|
52327
52316
|
const { containers, onPropertyChangedObservable } = this.props;
|
|
52328
52317
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_3__.makeTargetsProxy)(containers, onPropertyChangedObservable);
|
|
52329
|
-
return ((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__.jsxs)("div",
|
|
52318
|
+
return ((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__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_4__.IconComponent, { icon: shared_ui_components_imgs_clipContentsIcon_svg__WEBPACK_IMPORTED_MODULE_5__, label: "Clips content outside the bounding box of this control" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "CLIP CONTENT", target: proxy, propertyName: "clipContent" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_4__.IconComponent, { icon: shared_ui_components_imgs_clipChildrenIcon_svg__WEBPACK_IMPORTED_MODULE_6__, label: "Clips child controls to this control's shape" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "CLIP CHILDREN", target: proxy, propertyName: "clipChildren" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_4__.IconComponent, { icon: shared_ui_components_imgs_autoStretchWidthIcon_svg__WEBPACK_IMPORTED_MODULE_7__, label: "Makes the container's width automatically adapt to its children" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "ADAPT WIDTH TO CHILDREN", target: proxy, propertyName: "adaptWidthToChildren" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_4__.IconComponent, { icon: shared_ui_components_imgs_autoStretchHeightIcon_svg__WEBPACK_IMPORTED_MODULE_8__, label: "Makes the container's height automatically adapt to its children" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "ADAPT HEIGHT TO CHILDREN", target: proxy, propertyName: "adaptHeightToChildren" })] })] }));
|
|
52330
52319
|
}
|
|
52331
52320
|
}
|
|
52332
52321
|
|
|
@@ -52356,7 +52345,7 @@ class ControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
|
|
|
52356
52345
|
}
|
|
52357
52346
|
render() {
|
|
52358
52347
|
const controls = this.props.controls;
|
|
52359
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
52348
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "pane", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: controls, onPropertyChangedObservable: this.props.onPropertyChangedObservable }) }));
|
|
52360
52349
|
}
|
|
52361
52350
|
}
|
|
52362
52351
|
|
|
@@ -52413,7 +52402,7 @@ class DisplayGridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1_
|
|
|
52413
52402
|
render() {
|
|
52414
52403
|
const { displayGrids, lockObject, onPropertyChangedObservable } = this.props;
|
|
52415
52404
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(displayGrids, onPropertyChangedObservable);
|
|
52416
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
52405
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: displayGrids, 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_3__.TextLineComponent, { label: "DISPLAY GRID", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Cell Size" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "W", target: proxy, propertyName: "cellWidth", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "H", target: proxy, propertyName: "cellHeight", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_displayGridLine1Icon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Show Minor Lines" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "SHOW MINOR LINES", onValueChanged: () => this.forceUpdate(), target: proxy, propertyName: "_displayMinorLines" })] }), proxy._displayMinorLines && ((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__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Minor Line Tickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "", target: proxy, propertyName: "minorLineTickness", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Minor Line Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "minorLineColor", onPropertyChangedObservable: onPropertyChangedObservable })] })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_displayGridLine2Icon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Show Major Lines" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "SHOW MAJOR LINES", onValueChanged: () => this.forceUpdate(), target: proxy, propertyName: "_displayMajorLines" })] }), proxy._displayMajorLines && ((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__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Major Line Tickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "", target: proxy, propertyName: "majorLineTickness", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Major Line Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "majorLineColor", onPropertyChangedObservable: onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_frequencyIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Major Line Frequency" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "", target: proxy, propertyName: "majorLineFrequency", onPropertyChangedObservable: onPropertyChangedObservable, arrows: true })] })] }))] }));
|
|
52417
52406
|
}
|
|
52418
52407
|
}
|
|
52419
52408
|
|
|
@@ -52458,7 +52447,7 @@ class EllipsePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
|
|
|
52458
52447
|
render() {
|
|
52459
52448
|
const { ellipses, onPropertyChangedObservable, lockObject } = this.props;
|
|
52460
52449
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_5__.makeTargetsProxy)(ellipses, onPropertyChangedObservable);
|
|
52461
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
52450
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: ellipses, 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_4__.TextLineComponent, { label: "ELLIPSE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Stroke Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.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_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_containerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_6__.ContainerPropertyGridComponent, { containers: ellipses, onPropertyChangedObservable: onPropertyChangedObservable })] }));
|
|
52462
52451
|
}
|
|
52463
52452
|
}
|
|
52464
52453
|
|
|
@@ -52521,14 +52510,14 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
|
52521
52510
|
}
|
|
52522
52511
|
renderRows() {
|
|
52523
52512
|
return this._rowDefinitions.map((rd, i) => {
|
|
52524
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
52513
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: this._removingRow && i === this._rowEditFlags.length - 1 ? "ge-grid-remove" : this._rowEditFlags[i] ? "ge-grid-edit" : "ge-grid", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-grid-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", icon: shared_ui_components_imgs_gridColumnIconDark_svg__WEBPACK_IMPORTED_MODULE_6__, iconLabel: `Row ${i}`, value: rd, numbersOnly: true, onChange: (newValue) => {
|
|
52525
52514
|
this._rowDefinitions[i] = newValue;
|
|
52526
52515
|
this._rowEditFlags[i] = true;
|
|
52527
52516
|
this._editedRow = true;
|
|
52528
52517
|
this._removingRow = false;
|
|
52529
52518
|
this._rowChild = false;
|
|
52530
52519
|
this.forceUpdate();
|
|
52531
|
-
} }, `rText${i}`), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: `[${i}]`, value: "", color: "grey" }), this._removingRow && i === this._rowEditFlags.length - 1 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_deleteGridElementDark_svg__WEBPACK_IMPORTED_MODULE_7__, label: " ", value: " ", color: "grey" })), this._rowEditFlags[i] && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_valueChangedGridDark_svg__WEBPACK_IMPORTED_MODULE_8__, label: " ", value: " ", color: "grey" })] })
|
|
52520
|
+
} }, `rText${i}`), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: `[${i}]`, value: "", color: "grey" }), this._removingRow && i === this._rowEditFlags.length - 1 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_deleteGridElementDark_svg__WEBPACK_IMPORTED_MODULE_7__, label: " ", value: " ", color: "grey" })), this._rowEditFlags[i] && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_valueChangedGridDark_svg__WEBPACK_IMPORTED_MODULE_8__, label: " ", value: " ", color: "grey" })] }) }, `r${i}`));
|
|
52532
52521
|
});
|
|
52533
52522
|
}
|
|
52534
52523
|
setRowValues() {
|
|
@@ -52559,14 +52548,14 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
|
52559
52548
|
}
|
|
52560
52549
|
renderColumns() {
|
|
52561
52550
|
return this._columnDefinitions.map((cd, i) => {
|
|
52562
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
52551
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: this._removingColumn && i === this._columnEditFlags.length - 1 ? "ge-grid-remove" : this._columnEditFlags[i] ? "ge-grid-edit" : "ge-grid", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-grid-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", icon: shared_ui_components_imgs_gridRowIconDark_svg__WEBPACK_IMPORTED_MODULE_9__, iconLabel: `Column ${i}`, value: cd, numbersOnly: true, onChange: (newValue) => {
|
|
52563
52552
|
this._columnDefinitions[i] = newValue;
|
|
52564
52553
|
this._columnEditFlags[i] = true;
|
|
52565
52554
|
this._editedColumn = true;
|
|
52566
52555
|
this._removingColumn = false;
|
|
52567
52556
|
this._columnChild = false;
|
|
52568
52557
|
this.forceUpdate();
|
|
52569
|
-
} }, `ctext${i}`), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: `[${i}]`, value: "", color: "grey" }), this._removingColumn && i === this._columnEditFlags.length - 1 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_deleteGridElementDark_svg__WEBPACK_IMPORTED_MODULE_7__, label: " ", value: " ", color: "grey" })), this._columnEditFlags[i] && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_valueChangedGridDark_svg__WEBPACK_IMPORTED_MODULE_8__, label: " ", value: " ", color: "grey" })] })
|
|
52558
|
+
} }, `ctext${i}`), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: `[${i}]`, value: "", color: "grey" }), this._removingColumn && i === this._columnEditFlags.length - 1 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_deleteGridElementDark_svg__WEBPACK_IMPORTED_MODULE_7__, label: " ", value: " ", color: "grey" })), this._columnEditFlags[i] && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_valueChangedGridDark_svg__WEBPACK_IMPORTED_MODULE_8__, label: " ", value: " ", color: "grey" })] }) }, `c${i}`));
|
|
52570
52559
|
});
|
|
52571
52560
|
}
|
|
52572
52561
|
resizeRow() {
|
|
@@ -52688,8 +52677,7 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
|
52688
52677
|
this.setColumnValues();
|
|
52689
52678
|
}
|
|
52690
52679
|
checkValue(value, percent) {
|
|
52691
|
-
|
|
52692
|
-
let newValue = (_a = value.match(/([0-9.,]+)/g)) === null || _a === void 0 ? void 0 : _a[0];
|
|
52680
|
+
let newValue = value.match(/([0-9.,]+)/g)?.[0];
|
|
52693
52681
|
if (!newValue) {
|
|
52694
52682
|
newValue = "0";
|
|
52695
52683
|
}
|
|
@@ -52718,13 +52706,13 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
|
52718
52706
|
if (grid !== this._previousGrid) {
|
|
52719
52707
|
this.resetValues();
|
|
52720
52708
|
}
|
|
52721
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
52709
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: grids, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: "GRID", value: " ", color: "grey" }), this.renderRows(), this.props.grids.length === 1 && ((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)("div", { className: "ge-gridLine", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-grid-button-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Add Row", icon: shared_ui_components_imgs_addGridElementDark_svg__WEBPACK_IMPORTED_MODULE_10__, shortcut: "", isActive: false, onClick: () => {
|
|
52722
52710
|
let total = 0;
|
|
52723
52711
|
let count = 0;
|
|
52724
52712
|
for (let i = 0; i < grid.rowCount; ++i) {
|
|
52725
52713
|
const rd = grid.getRowDefinition(i);
|
|
52726
|
-
if (rd
|
|
52727
|
-
total += rd
|
|
52714
|
+
if (rd?.isPercentage) {
|
|
52715
|
+
total += rd?.getValue(grid.host);
|
|
52728
52716
|
count++;
|
|
52729
52717
|
}
|
|
52730
52718
|
}
|
|
@@ -52735,7 +52723,7 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
|
52735
52723
|
let hasChild = false;
|
|
52736
52724
|
for (let i = 0; i < grid.columnCount; ++i) {
|
|
52737
52725
|
const child = grid.cells[grid.rowCount - 1 + ":" + i];
|
|
52738
|
-
if (child
|
|
52726
|
+
if (child?.children.length) {
|
|
52739
52727
|
hasChild = true;
|
|
52740
52728
|
break;
|
|
52741
52729
|
//(grid.rowCount > 1 && !this._removingRow)
|
|
@@ -52754,25 +52742,24 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
|
52754
52742
|
this.resetValues();
|
|
52755
52743
|
this.forceUpdate();
|
|
52756
52744
|
} })] })), this._removingRow && ((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)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Confirm", icon: shared_ui_components_imgs_confirmGridElementDark_svg__WEBPACK_IMPORTED_MODULE_12__, shortcut: "", isActive: false, onClick: () => {
|
|
52757
|
-
var _a;
|
|
52758
52745
|
grid.removeRowDefinition(grid.rowCount - 1);
|
|
52759
52746
|
this.setRowValues();
|
|
52760
52747
|
this.resizeRow();
|
|
52761
52748
|
this.forceUpdate();
|
|
52762
52749
|
this._removingRow = false;
|
|
52763
52750
|
this._rowChild = false;
|
|
52764
|
-
|
|
52751
|
+
this.props.onUpdateRequiredObservable?.notifyObservers();
|
|
52765
52752
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Cancel", icon: shared_ui_components_imgs_cancelGridElementDark_svg__WEBPACK_IMPORTED_MODULE_13__, shortcut: "", isActive: false, onClick: () => {
|
|
52766
52753
|
this._removingRow = false;
|
|
52767
52754
|
this._rowChild = false;
|
|
52768
52755
|
this.forceUpdate();
|
|
52769
|
-
} })] }))] })
|
|
52756
|
+
} })] }))] }) }), this._rowChild && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: "This row is not empty. Removing it will delete all contained controls. Do you want to remove this row and delete all controls within?", value: " ", color: "grey" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), this.renderColumns(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-grid-button-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Add Column", icon: shared_ui_components_imgs_addGridElementDark_svg__WEBPACK_IMPORTED_MODULE_10__, shortcut: "", isActive: false, onClick: () => {
|
|
52770
52757
|
let total = 0;
|
|
52771
52758
|
let count = 0;
|
|
52772
52759
|
for (let i = 0; i < grid.columnCount; ++i) {
|
|
52773
52760
|
const cd = grid.getColumnDefinition(i);
|
|
52774
|
-
if (cd
|
|
52775
|
-
total += cd
|
|
52761
|
+
if (cd?.isPercentage) {
|
|
52762
|
+
total += cd?.getValue(grid.host);
|
|
52776
52763
|
count++;
|
|
52777
52764
|
}
|
|
52778
52765
|
}
|
|
@@ -52783,7 +52770,7 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
|
52783
52770
|
let hasChild = false;
|
|
52784
52771
|
for (let i = 0; i < grid.rowCount; ++i) {
|
|
52785
52772
|
const child = grid.cells[i + ":" + (grid.columnCount - 1)];
|
|
52786
|
-
if (child
|
|
52773
|
+
if (child?.children.length) {
|
|
52787
52774
|
hasChild = true;
|
|
52788
52775
|
break;
|
|
52789
52776
|
}
|
|
@@ -52801,19 +52788,18 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
|
52801
52788
|
this.resetValues();
|
|
52802
52789
|
this.forceUpdate();
|
|
52803
52790
|
} })] })), this._removingColumn && ((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)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Confirm", icon: shared_ui_components_imgs_confirmGridElementDark_svg__WEBPACK_IMPORTED_MODULE_12__, shortcut: "", isActive: false, onClick: () => {
|
|
52804
|
-
var _a;
|
|
52805
52791
|
grid.removeColumnDefinition(grid.columnCount - 1);
|
|
52806
52792
|
this.setColumnValues();
|
|
52807
52793
|
this.resizeColumn();
|
|
52808
52794
|
this.forceUpdate();
|
|
52809
52795
|
this._removingColumn = false;
|
|
52810
52796
|
this._columnChild = false;
|
|
52811
|
-
|
|
52797
|
+
this.props.onUpdateRequiredObservable?.notifyObservers();
|
|
52812
52798
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Cancel", icon: shared_ui_components_imgs_cancelGridElementDark_svg__WEBPACK_IMPORTED_MODULE_13__, shortcut: "", isActive: false, onClick: () => {
|
|
52813
52799
|
this._removingColumn = false;
|
|
52814
52800
|
this._columnChild = false;
|
|
52815
52801
|
this.forceUpdate();
|
|
52816
|
-
} })] })), " "] })
|
|
52802
|
+
} })] })), " "] }), this._columnChild && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: "This column is not empty. Removing it will delete all contained controls. Do you want to remove this column and delete all controls within?", value: " ", color: "grey" }) }))] }))] }));
|
|
52817
52803
|
}
|
|
52818
52804
|
}
|
|
52819
52805
|
|
|
@@ -52859,7 +52845,7 @@ class ImageBasedSliderPropertyGridComponent extends react__WEBPACK_IMPORTED_MODU
|
|
|
52859
52845
|
}
|
|
52860
52846
|
render() {
|
|
52861
52847
|
const imageBasedSliders = this.props.imageBasedSliders;
|
|
52862
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
52848
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: imageBasedSliders, onPropertyChangedObservable: this.props.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_4__.TextLineComponent, { label: "IMAGE LINKS", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_thumbImageLinkIcon_svg__WEBPACK_IMPORTED_MODULE_8__, label: "Thumb Image Link" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: this.props.lockObject, target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(imageBasedSliders.map((slider) => slider.thumbImage), this.props.onPropertyChangedObservable), label: "", propertyName: "source" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_valueBarImageLinkIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Value Bar Image Link" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: this.props.lockObject, target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(imageBasedSliders.map((slider) => slider.valueBarImage), this.props.onPropertyChangedObservable), label: "", propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_sliderBackgroundImageIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Background Image Link" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: this.props.lockObject, target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(imageBasedSliders.map((slider) => slider.backgroundImage), this.props.onPropertyChangedObservable), label: "", propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_5__.SliderPropertyGridComponent, { sliders: imageBasedSliders, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
|
|
52863
52849
|
}
|
|
52864
52850
|
}
|
|
52865
52851
|
|
|
@@ -52991,25 +52977,25 @@ class ImagePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Comp
|
|
|
52991
52977
|
const maxCells = this.getMaxCells();
|
|
52992
52978
|
const maxCellWidth = Math.max(...images.map((image) => image.imageWidth));
|
|
52993
52979
|
const maxCellHeight = Math.max(...images.map((image) => image.imageHeight));
|
|
52994
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
52980
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: images, onPropertyChangedObservable: this.props.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_8__.TextLineComponent, { label: "IMAGE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_imageLinkIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Source" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "source" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_cropIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Crop" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "L", target: proxy, propertyName: "sourceLeft", numeric: true, arrows: true, min: 0, placeholder: "0", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "T", target: proxy, propertyName: "sourceTop", numeric: true, arrows: true, min: 0, placeholder: "0", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_cropIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Crop" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "W", target: proxy, propertyName: "sourceWidth", numeric: true, arrows: true, min: 0, placeholder: Math.max(...images.map((image) => image.imageWidth)).toString(), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "H", target: proxy, propertyName: "sourceHeight", numeric: true, arrows: true, min: 0, placeholder: Math.max(...images.map((image) => image.imageHeight)).toString(), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_autoResizeIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Autoscale" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "AUTOSCALE", target: proxy, propertyName: "autoScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_stretchFillIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Stretch" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: " ", options: stretchOptions, target: proxy, propertyName: "stretch", onSelect: (value) => this.setState({ mode: value }) })] }), images.length === 1 && image.stretch === gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__.Image.STRETCH_NINE_PATCH && ((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__.jsxs)("div", { 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_cropIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Slice Horizontal" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "L", target: image, propertyName: "sliceLeft", onChange: () => {
|
|
52995
52981
|
image.populateNinePatchSlicesFromImage = false;
|
|
52996
52982
|
this.forceUpdate();
|
|
52997
52983
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "R", target: image, propertyName: "sliceRight", onChange: () => {
|
|
52998
52984
|
image.populateNinePatchSlicesFromImage = false;
|
|
52999
52985
|
this.forceUpdate();
|
|
53000
|
-
} })] })
|
|
52986
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_cropIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Slice Vertical" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "T", target: image, propertyName: "sliceTop", onChange: () => {
|
|
53001
52987
|
image.populateNinePatchSlicesFromImage = false;
|
|
53002
52988
|
this.forceUpdate();
|
|
53003
52989
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "B", target: image, propertyName: "sliceBottom", onChange: () => {
|
|
53004
52990
|
image.populateNinePatchSlicesFromImage = false;
|
|
53005
52991
|
this.forceUpdate();
|
|
53006
|
-
} })] })
|
|
52992
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_autoResizeIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Populate Nine Patch Slices From Image" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "SLICE FROM IMAGE", target: image, propertyName: "populateNinePatchSlicesFromImage", onValueChanged: () => {
|
|
53007
52993
|
this.forceUpdate();
|
|
53008
52994
|
image._markAsDirty();
|
|
53009
|
-
} })] })
|
|
52995
|
+
} })] })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { iconLabel: "animationSheet", icon: shared_ui_components_imgs_animationSheetIcon_svg__WEBPACK_IMPORTED_MODULE_16__, label: "ANIMATION SHEET", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(images, this.props.onPropertyChangedObservable, (target) => target.cellId !== -1), onValueChanged: () => {
|
|
53010
52996
|
this.toggleAnimations(!animationSheet);
|
|
53011
52997
|
this.forceUpdate();
|
|
53012
|
-
} }), animationSheet && ((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)("div",
|
|
52998
|
+
} }), animationSheet && ((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)("div", { className: "ge-divider double", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { iconLabel: "Cell Id", icon: shared_ui_components_imgs_cellIDIcon_svg__WEBPACK_IMPORTED_MODULE_17__, lockObject: this.props.lockObject, label: "", isInteger: true, target: proxy, propertyName: "cellId", min: 0, max: maxCells }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { icon: shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_18__, lockObject: this.props.lockObject, label: "W", target: proxy, propertyName: "cellWidth", isInteger: true, onChange: () => this.updateCellSize(), min: 1, max: maxCellWidth }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "H", target: proxy, propertyName: "cellHeight", isInteger: true, onChange: () => this.updateCellSize(), min: 1, max: maxCellHeight })] })] }))] }));
|
|
53013
52999
|
}
|
|
53014
53000
|
}
|
|
53015
53001
|
|
|
@@ -53082,7 +53068,7 @@ class InputTextPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
|
53082
53068
|
render() {
|
|
53083
53069
|
const { inputTexts, onPropertyChangedObservable, lockObject } = this.props;
|
|
53084
53070
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__.makeTargetsProxy)(inputTexts, onPropertyChangedObservable);
|
|
53085
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
53071
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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", { 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", { 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", { 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", { 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", { 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", { 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", { 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", { 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", { 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", { 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", { 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", { 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" })] })] }));
|
|
53086
53072
|
}
|
|
53087
53073
|
}
|
|
53088
53074
|
|
|
@@ -53161,7 +53147,7 @@ class LinePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
|
53161
53147
|
});
|
|
53162
53148
|
}
|
|
53163
53149
|
const dashString = dashes.join(",");
|
|
53164
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
53150
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "LINE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_linePoint1Icon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Position 1" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: lockObject, label: "X", target: proxy, propertyName: "x1" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: lockObject, label: "Y", target: proxy, propertyName: "y1" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_linePoint2Icon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Position 2" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: lockObject, label: "X", target: proxy, propertyName: "x2" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: lockObject, label: "Y", target: proxy, propertyName: "y2" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Line Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "lineWidth", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), min: 0, arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_lineDashIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Dash Pattern" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, value: dashString, onChange: (newValue) => this.onDashChange(newValue) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { hideDimensions: true, lockObject: lockObject, controls: lines, onPropertyChangedObservable: onPropertyChangedObservable })] }));
|
|
53165
53151
|
}
|
|
53166
53152
|
}
|
|
53167
53153
|
|
|
@@ -53211,7 +53197,7 @@ class RadioButtonPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1_
|
|
|
53211
53197
|
}
|
|
53212
53198
|
render() {
|
|
53213
53199
|
const radioButtons = this.props.radioButtons;
|
|
53214
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
53200
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: radioButtons, onPropertyChangedObservable: this.props.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_6__.TextLineComponent, { label: "RADIO BUTTON", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Stroke Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(radioButtons, this.props.onPropertyChangedObservable), propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_9__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_scaleIcon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Check Size Ratio" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(radioButtons, this.props.onPropertyChangedObservable), propertyName: "checkSizeRatio", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_9__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Name of Group" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(radioButtons, this.props.onPropertyChangedObservable), propertyName: "group" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_checkboxIconDark_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Is Checked" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "CHECKED", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(radioButtons, this.props.onPropertyChangedObservable), propertyName: "isChecked" })] })] }));
|
|
53215
53201
|
}
|
|
53216
53202
|
}
|
|
53217
53203
|
|
|
@@ -53258,7 +53244,7 @@ class RectanglePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
|
53258
53244
|
render() {
|
|
53259
53245
|
const { rectangles, lockObject, onPropertyChangedObservable } = this.props;
|
|
53260
53246
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_5__.makeTargetsProxy)(rectangles, onPropertyChangedObservable);
|
|
53261
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
53247
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: rectangles, 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_4__.TextLineComponent, { label: "RECTANGLE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Stroke Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_conerRadiusIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Corner Radius" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "cornerRadius", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_containerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_6__.ContainerPropertyGridComponent, { containers: rectangles, onPropertyChangedObservable: onPropertyChangedObservable })] }));
|
|
53262
53248
|
}
|
|
53263
53249
|
}
|
|
53264
53250
|
|
|
@@ -53313,7 +53299,7 @@ class ScrollViewerPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1
|
|
|
53313
53299
|
render() {
|
|
53314
53300
|
const { scrollViewers, onPropertyChangedObservable, lockObject } = this.props;
|
|
53315
53301
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(scrollViewers, onPropertyChangedObservable);
|
|
53316
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
53302
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: scrollViewers, onPropertyChangedObservable: this.props.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_4__.TextLineComponent, { label: "SCROLLVIEWER", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_scrollViewerPrecisionIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Wheel Precision" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "wheelPrecision", arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_widthIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Bar Size" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "barSize", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "e-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Bar Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "barColor" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Bar Background Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "barBackground" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Stroke Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_conerRadiusIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Corner Radius" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(scrollViewers, onPropertyChangedObservable), propertyName: "cornerRadius", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] })] }));
|
|
53317
53303
|
}
|
|
53318
53304
|
}
|
|
53319
53305
|
|
|
@@ -53345,7 +53331,7 @@ class SliderGenericPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
|
53345
53331
|
}
|
|
53346
53332
|
render() {
|
|
53347
53333
|
const sliders = this.props.sliders;
|
|
53348
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
53334
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: sliders, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_3__.SliderPropertyGridComponent, { sliders: sliders, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
|
|
53349
53335
|
}
|
|
53350
53336
|
}
|
|
53351
53337
|
|
|
@@ -53408,7 +53394,7 @@ class SliderPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
|
|
|
53408
53394
|
render() {
|
|
53409
53395
|
const { sliders, onPropertyChangedObservable } = this.props;
|
|
53410
53396
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(sliders, onPropertyChangedObservable);
|
|
53411
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
53397
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(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_5__.TextLineComponent, { label: "SLIDER", value: " ", color: "grey" }), sliders.every((slider) => slider.typeName === "Slider") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Border Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_6__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "borderColor" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_verticalSliderIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Vertical" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "VERTICAL", target: proxy, propertyName: "isVertical" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_barOffsetIcon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Bar Offset" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "barOffset" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_sliderValueMinimumIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Minimum Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "minimum", arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_sliderValueMaximumIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Maximum Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "maximum", arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_sliderValueIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Initial Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "value", arrows: true })] }), (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_5__.TextLineComponent, { label: "THUMB", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_showThumbIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Display Thumb" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "DISPLAY THUMB", target: proxy, propertyName: "displayThumb", onValueChanged: () => this.forceUpdate() })] }), proxy.displayThumb && ((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__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_thumbCircleIcon_svg__WEBPACK_IMPORTED_MODULE_16__, label: "Thumb Circular" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "CIRCULAR", target: proxy, propertyName: "isThumbCircle" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_clampSliderValueIcon_svg__WEBPACK_IMPORTED_MODULE_17__, label: "Thumb Clamped to Edges" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "CLAMPED", target: proxy, propertyName: "isThumbClamped" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_widthIcon_svg__WEBPACK_IMPORTED_MODULE_18__, label: "Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "thumbWidth" })] })] }))] }));
|
|
53412
53398
|
}
|
|
53413
53399
|
}
|
|
53414
53400
|
|
|
@@ -53463,7 +53449,7 @@ class StackPanelPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__
|
|
|
53463
53449
|
render() {
|
|
53464
53450
|
const { stackPanels, lockObject, onPropertyChangedObservable } = this.props;
|
|
53465
53451
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(stackPanels, onPropertyChangedObservable);
|
|
53466
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
53452
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: stackPanels, 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_6__.TextLineComponent, { label: "STACKPANEL", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_9__.IconComponent, { icon: shared_ui_components_imgs_alignVerticalIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Determines if children are stacked horizontally or vertically" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: proxy.isVertical ? "ALIGNMENT: VERTICAL" : "ALIGNMENT: HORIZONTAL", target: proxy, propertyName: "isVertical", onValueChanged: () => {
|
|
53467
53453
|
for (const panel of stackPanels) {
|
|
53468
53454
|
for (const child of panel.children) {
|
|
53469
53455
|
if (proxy.isVertical) {
|
|
@@ -53483,7 +53469,7 @@ class StackPanelPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__
|
|
|
53483
53469
|
}
|
|
53484
53470
|
}
|
|
53485
53471
|
this.forceUpdate();
|
|
53486
|
-
} })] })
|
|
53472
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_9__.IconComponent, { icon: shared_ui_components_imgs_stackPanelSpacingIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Spacing between children" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: lockObject, label: " ", target: proxy, propertyName: "spacing", onChange: () => stackPanels.forEach((panel) => panel._markAsDirty()), 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 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_containerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__.ContainerPropertyGridComponent, { containers: stackPanels, onPropertyChangedObservable: onPropertyChangedObservable })] }));
|
|
53487
53473
|
}
|
|
53488
53474
|
}
|
|
53489
53475
|
|
|
@@ -53553,7 +53539,7 @@ class TextBlockPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
|
53553
53539
|
{ label: "Ellipsis", value: gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__.TextWrapping.Ellipsis },
|
|
53554
53540
|
{ label: "Word wrap", value: gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__.TextWrapping.WordWrap },
|
|
53555
53541
|
];
|
|
53556
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
53542
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: textBlocks, onPropertyChangedObservable: this.props.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: "TEXTBLOCK", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_fontFamilyIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "text" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_resizeToFitIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Automatically resize the text block to fit the size of the text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "RESIZE TO FIT", target: proxy, propertyName: "resizeToFit" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_wordWrapIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Text Wrapping" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: " ", options: wrappingOptions, target: proxy, propertyName: "textWrapping" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_LineSpacingIcon_svg__WEBPACK_IMPORTED_MODULE_16__, label: "Line Spacing" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "lineSpacing" })] }), (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: "OUTLINE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_17__, label: "Outline Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_11__.FloatLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "outlineWidth", arrows: true, min: 0, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_12__.UnitButton, { unit: "PX", locked: true }), step: "0.01" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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_18__, label: "Outline Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "outlineColor" })] })] }));
|
|
53557
53543
|
}
|
|
53558
53544
|
}
|
|
53559
53545
|
|
|
@@ -53686,10 +53672,9 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
53686
53672
|
});
|
|
53687
53673
|
};
|
|
53688
53674
|
this.saveToSnippetServer = async () => {
|
|
53689
|
-
var _a;
|
|
53690
53675
|
const adt = this.props.globalState.guiTexture;
|
|
53691
53676
|
const content = JSON.stringify(adt.serializeContent());
|
|
53692
|
-
const savePromise =
|
|
53677
|
+
const savePromise = this.props.globalState.customSave?.action || this.saveToSnippetServerHelper;
|
|
53693
53678
|
savePromise(content, adt)
|
|
53694
53679
|
.then((snippetId) => {
|
|
53695
53680
|
adt.snippetId = snippetId;
|
|
@@ -53774,9 +53759,8 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
53774
53759
|
this.props.globalState.workbench.loadFromSnippet(snippedId);
|
|
53775
53760
|
}
|
|
53776
53761
|
renderNode(nodes) {
|
|
53777
|
-
var _a;
|
|
53778
53762
|
const node = nodes[0];
|
|
53779
|
-
return ((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__.jsxs)("div",
|
|
53763
|
+
return ((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__.jsxs)("div", { id: "header", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: this.renderControlIcon(nodes) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "title", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_21__.TextInputLineComponent, { noUnderline: true, lockObject: this._lockObject, target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_26__.makeTargetsProxy)(nodes, this.props.globalState.onPropertyChangedObservable), propertyName: "name", onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }) })] }), this.renderProperties(nodes), node?.parent?.typeName === "Grid" && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_parentingPropertyGridComponent__WEBPACK_IMPORTED_MODULE_22__.ParentingPropertyGridComponent, { control: node, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, lockObject: this._lockObject }))] }));
|
|
53780
53764
|
}
|
|
53781
53765
|
/**
|
|
53782
53766
|
* returns the class name of a list of controls if they share a class, or an empty string if not
|
|
@@ -53888,7 +53872,7 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
53888
53872
|
if (this.props.globalState.guiTexture == undefined)
|
|
53889
53873
|
return null;
|
|
53890
53874
|
const nodesToRender = this.props.globalState.selectedControls.length > 0 ? this.props.globalState.selectedControls : [this.props.globalState.workbench.trueRootContainer];
|
|
53891
|
-
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
53875
|
+
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "ge-propertyTab", children: this.renderNode(nodesToRender) });
|
|
53892
53876
|
}
|
|
53893
53877
|
}
|
|
53894
53878
|
|
|
@@ -53950,15 +53934,14 @@ class ControlTreeItemComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Compon
|
|
|
53950
53934
|
this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
|
|
53951
53935
|
}
|
|
53952
53936
|
render() {
|
|
53953
|
-
var _a;
|
|
53954
53937
|
const control = this.props.control;
|
|
53955
53938
|
let bracket = "";
|
|
53956
|
-
if (
|
|
53939
|
+
if (control.parent?.typeName === "Grid") {
|
|
53957
53940
|
bracket = control.parent.getChildCellInfo(this.props.control);
|
|
53958
53941
|
}
|
|
53959
53942
|
const draggingSelf = this.props.globalState.draggedControl === control;
|
|
53960
53943
|
const controlType = _controlTypes__WEBPACK_IMPORTED_MODULE_6__.ControlTypes.find((type) => type.className === control.getClassName());
|
|
53961
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
53944
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "controlTools", children: [controlType && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "controlType icon", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: controlType.icon, alt: controlType.className }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_treeItemLabelComponent__WEBPACK_IMPORTED_MODULE_1__.TreeItemLabelComponent, { label: control.name, bracket: bracket, onClick: () => this.props.onClick(), onChange: (name) => this.onRename(name), setRenaming: (renaming) => this.setState({ isRenaming: renaming }), renaming: this.state.isRenaming }), !draggingSelf && this.props.isDragOver && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.CENTER && control instanceof gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5__.Container && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "makeChild icon", onClick: () => this.highlight(), title: "Make Child", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_makeChildOfContainerIcon_svg__WEBPACK_IMPORTED_MODULE_10__ }) }) })), !this.state.isRenaming && this.props.isHovered && this.props.globalState.draggedControl === null && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.NONE && ((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)("div", { className: "addComponent icon", onClick: () => this.highlight(), title: "Add component (Not Implemented)", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_makeComponentIcon_svg__WEBPACK_IMPORTED_MODULE_9__ }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "visibility icon", onClick: () => this.switchVisibility(), title: "Show/Hide control", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.state.isVisible ? _imgs_visibilityActiveIcon_svg__WEBPACK_IMPORTED_MODULE_8__ : _imgs_visibilityNotActiveIcon_svg__WEBPACK_IMPORTED_MODULE_7__ }) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_extensionsComponent__WEBPACK_IMPORTED_MODULE_2__.ExtensionsComponent, { target: control, extensibilityGroups: this.props.extensibilityGroups })] }));
|
|
53962
53945
|
}
|
|
53963
53946
|
}
|
|
53964
53947
|
|
|
@@ -54018,11 +54001,11 @@ class ExtensionsComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
|
|
|
54018
54001
|
if (options.length === 0) {
|
|
54019
54002
|
return null;
|
|
54020
54003
|
}
|
|
54021
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
54004
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { ref: this._extensionRef, className: "extensions", onClick: () => this.showPopup(), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Additional options", className: "icon", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_1__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_2__.faEllipsisH }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { ref: (input) => {
|
|
54022
54005
|
this._popup = input;
|
|
54023
|
-
}, tabIndex: -1, className: this.state.popupVisible ? "popup show" : "popup", onBlur: () => this.setState({ popupVisible: false })
|
|
54024
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
54025
|
-
}) })
|
|
54006
|
+
}, tabIndex: -1, className: this.state.popupVisible ? "popup show" : "popup", onBlur: () => this.setState({ popupVisible: false }), children: options.map((extensibility) => {
|
|
54007
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "popupMenu", onClick: () => extensibility.action(this.props.target), children: extensibility.label }, extensibility.label));
|
|
54008
|
+
}) })] }));
|
|
54026
54009
|
}
|
|
54027
54010
|
}
|
|
54028
54011
|
|
|
@@ -54056,7 +54039,7 @@ class SceneExplorerFilterComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
|
|
|
54056
54039
|
super(props);
|
|
54057
54040
|
}
|
|
54058
54041
|
render() {
|
|
54059
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
54042
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "filter", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", placeholder: "Filter", onChange: (evt) => this.props.onFilter(evt.target.value) }) }));
|
|
54060
54043
|
}
|
|
54061
54044
|
}
|
|
54062
54045
|
class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
@@ -54207,7 +54190,7 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
54207
54190
|
return null;
|
|
54208
54191
|
}
|
|
54209
54192
|
const guiElements = scene.textures.filter((t) => t.getClassName() === "AdvancedDynamicTexture");
|
|
54210
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
54193
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "tree", onDrop: () => {
|
|
54211
54194
|
this.props.globalState.onDropObservable.notifyObservers();
|
|
54212
54195
|
this.props.globalState.onParentingChangeObservable.notifyObservers(null);
|
|
54213
54196
|
}, onDragOver: (event) => {
|
|
@@ -54219,7 +54202,7 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
54219
54202
|
else {
|
|
54220
54203
|
this.props.globalState.selectionLock = false;
|
|
54221
54204
|
}
|
|
54222
|
-
}, onContextMenu: (ev) => ev.preventDefault()
|
|
54205
|
+
}, onContextMenu: (ev) => ev.preventDefault(), children: guiElements && guiElements.length > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_treeItemComponent__WEBPACK_IMPORTED_MODULE_2__.TreeItemComponent, { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, selectedEntities: this.props.globalState.selectedControls, items: guiElements, label: "GUI", offset: 1, filter: this.state.filter })) }));
|
|
54223
54206
|
}
|
|
54224
54207
|
onClose() {
|
|
54225
54208
|
if (!this.props.onClose) {
|
|
@@ -54234,7 +54217,7 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
54234
54217
|
this.props.onPopup();
|
|
54235
54218
|
}
|
|
54236
54219
|
render() {
|
|
54237
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
54220
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "ge-sceneExplorer", tabIndex: 0, onKeyDown: (keyEvent) => this.processKeys(keyEvent), children: [this.props.children, this.renderContent()] }));
|
|
54238
54221
|
}
|
|
54239
54222
|
}
|
|
54240
54223
|
|
|
@@ -54279,7 +54262,7 @@ class TreeItemExpandableHeaderComponent extends react__WEBPACK_IMPORTED_MODULE_1
|
|
|
54279
54262
|
}
|
|
54280
54263
|
render() {
|
|
54281
54264
|
const chevron = this.props.isExpanded ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_expandedIcon_svg__WEBPACK_IMPORTED_MODULE_7__, className: "icon" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_collapsedIcon_svg__WEBPACK_IMPORTED_MODULE_8__, className: "icon" });
|
|
54282
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
54265
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "expandableHeader", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "text", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "arrow icon", onClick: () => this.props.onClick(), children: chevron }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "text-value", children: this.props.label })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "expandAll icon", onClick: () => this.expandAll(), title: this.props.isExpanded ? "Collapse all" : "Expand all", children: chevron })] }));
|
|
54283
54266
|
}
|
|
54284
54267
|
}
|
|
54285
54268
|
class TreeItemRootHeaderComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
@@ -54287,7 +54270,7 @@ class TreeItemRootHeaderComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
|
|
|
54287
54270
|
super(props);
|
|
54288
54271
|
}
|
|
54289
54272
|
render() {
|
|
54290
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
54273
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "expandableHeader", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "text", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "arrow icon", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__.faBan }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "text-value", children: this.props.label })] }) }));
|
|
54291
54274
|
}
|
|
54292
54275
|
}
|
|
54293
54276
|
class TreeItemComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
@@ -54321,9 +54304,9 @@ class TreeItemComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
54321
54304
|
TreeItemComponent._ContextMenuUniqueIdGenerator++;
|
|
54322
54305
|
return null;
|
|
54323
54306
|
}
|
|
54324
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.ContextMenu,
|
|
54325
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.MenuItem,
|
|
54326
|
-
}) }))
|
|
54307
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.ContextMenu, { id: "contextmenu#" + TreeItemComponent._ContextMenuUniqueIdGenerator++, className: "context-menu", children: this.props.contextMenuItems.map((c) => {
|
|
54308
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.MenuItem, { onClick: () => c.action(), children: c.label }, c.label));
|
|
54309
|
+
}) }));
|
|
54327
54310
|
}
|
|
54328
54311
|
render() {
|
|
54329
54312
|
let items = this.props.items;
|
|
@@ -54335,14 +54318,14 @@ class TreeItemComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
54335
54318
|
items = [];
|
|
54336
54319
|
}
|
|
54337
54320
|
else {
|
|
54338
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
54321
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "groupContainer", style: marginStyle, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: this.props.label }) }));
|
|
54339
54322
|
}
|
|
54340
54323
|
}
|
|
54341
54324
|
if (!items.length) {
|
|
54342
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
54325
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "groupContainer", style: marginStyle, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.ContextMenuTrigger, { id: "contextmenu#" + TreeItemComponent._ContextMenuUniqueIdGenerator, children: [this.renderContextMenu(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(TreeItemRootHeaderComponent, { label: this.props.label })] }) }));
|
|
54343
54326
|
}
|
|
54344
54327
|
if (!this.state.isExpanded) {
|
|
54345
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
54328
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "groupContainer", style: marginStyle, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.ContextMenuTrigger, { id: "contextmenu#" + TreeItemComponent._ContextMenuUniqueIdGenerator, children: [this.renderContextMenu(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(TreeItemExpandableHeaderComponent, { isExpanded: false, label: this.props.label, onClick: () => this.switchExpandedState(), onExpandAll: (expand) => this.expandAll(expand) })] }) }));
|
|
54346
54329
|
}
|
|
54347
54330
|
const sortedItems = _tools__WEBPACK_IMPORTED_MODULE_5__.Tools.SortAndFilter(null, items)[0].getChildren();
|
|
54348
54331
|
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: sortedItems.map((item) => {
|
|
@@ -54389,16 +54372,16 @@ class TreeItemLabelComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
|
54389
54372
|
render() {
|
|
54390
54373
|
// if editing, overwrite string with local value
|
|
54391
54374
|
const label = this.props.renaming ? this.state.value : this.props.label || "No Name";
|
|
54392
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
54375
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "title", onClick: () => this.onClick(), children: this.props.renaming ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", onBlur: () => this.onBlur(), autoFocus: true, value: label, onChange: (ev) => {
|
|
54393
54376
|
this.props.onChange(ev.target.value);
|
|
54394
54377
|
this.setState({ value: ev.target.value });
|
|
54395
54378
|
}, onKeyDown: (ev) => {
|
|
54396
54379
|
if (ev.key === "Enter")
|
|
54397
54380
|
this.onBlur();
|
|
54398
|
-
}, className: "titleText" })) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
54381
|
+
}, className: "titleText" })) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "titleText", onDoubleClick: () => {
|
|
54399
54382
|
this.props.setRenaming(true);
|
|
54400
54383
|
this.setState({ value: label });
|
|
54401
|
-
}
|
|
54384
|
+
}, children: label })) }));
|
|
54402
54385
|
}
|
|
54403
54386
|
}
|
|
54404
54387
|
|
|
@@ -54560,7 +54543,7 @@ class TreeItemSelectableComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Com
|
|
|
54560
54543
|
className += this.state.dragOver && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.ABOVE && entity.parent ? " seAbove" : "";
|
|
54561
54544
|
className += this.state.dragOver && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.BELOW && entity.parent ? " seBelow" : "";
|
|
54562
54545
|
const styleName = className === "itemContainer seAbove" || className === "itemContainer seBelow" ? lineMarginStyle : marginStyle;
|
|
54563
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
54546
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: className, style: styleName, onPointerUp: () => {
|
|
54564
54547
|
this.onSelect();
|
|
54565
54548
|
}, onPointerEnter: () => this.setState({ isHovered: true }), onPointerLeave: () => this.setState({ isHovered: false }), onDragStart: () => {
|
|
54566
54549
|
this.props.globalState.draggedControl = this.props.entity;
|
|
@@ -54581,7 +54564,7 @@ class TreeItemSelectableComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Com
|
|
|
54581
54564
|
else {
|
|
54582
54565
|
this.setState({ dragOver: false });
|
|
54583
54566
|
}
|
|
54584
|
-
}
|
|
54567
|
+
}, children: [hasChildren && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "arrow icon", onClick: (event) => {
|
|
54585
54568
|
this.switchExpandedState();
|
|
54586
54569
|
if (event.shiftKey) {
|
|
54587
54570
|
while (hasChildren) {
|
|
@@ -54595,7 +54578,7 @@ class TreeItemSelectableComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Com
|
|
|
54595
54578
|
entity.reservedDataStore.isExpanded = true;
|
|
54596
54579
|
}
|
|
54597
54580
|
}
|
|
54598
|
-
}
|
|
54581
|
+
}, children: chevron })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_entities_gui_controlTreeItemComponent__WEBPACK_IMPORTED_MODULE_5__.ControlTreeItemComponent, { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, control: entity, onClick: () => { }, isHovered: this.state.isHovered, isDragOver: this.state.dragOver, dragOverLocation: this.state.dragOverLocation })] }), this.renderChildren(isExpanded)] }));
|
|
54599
54582
|
}
|
|
54600
54583
|
dragOver(event) {
|
|
54601
54584
|
this.updateDragOverLocation(event);
|
|
@@ -55064,7 +55047,7 @@ class CoordinateHelper {
|
|
|
55064
55047
|
const ratio = property === "left" || property === "width" || property === "paddingLeft" || property === "paddingRight" ? ratioX : ratioY;
|
|
55065
55048
|
const newValue = (guiControl[`${property}InPixels`] * 100) / ratio;
|
|
55066
55049
|
guiControl[property] = `${newValue.toFixed(2)}%`;
|
|
55067
|
-
onPropertyChangedObservable
|
|
55050
|
+
onPropertyChangedObservable?.notifyObservers({
|
|
55068
55051
|
object: guiControl,
|
|
55069
55052
|
initialValue,
|
|
55070
55053
|
value: guiControl[property],
|
|
@@ -55076,13 +55059,12 @@ class CoordinateHelper {
|
|
|
55076
55059
|
return Math.floor(value * 100) / 100;
|
|
55077
55060
|
}
|
|
55078
55061
|
static ConvertToPixels(guiControl, properties = ["left", "top", "width", "height"], onPropertyChangedObservable) {
|
|
55079
|
-
var _a;
|
|
55080
55062
|
// make sure we are using the latest measures for the control
|
|
55081
|
-
guiControl._processMeasures(
|
|
55063
|
+
guiControl._processMeasures(guiControl.parent?._currentMeasure, guiControl.host);
|
|
55082
55064
|
for (const property of properties) {
|
|
55083
55065
|
const initialValue = guiControl[property];
|
|
55084
55066
|
guiControl[`_${property}`] = new gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__.ValueAndUnit(this.Round(guiControl[`${property}InPixels`]), gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__.ValueAndUnit.UNITMODE_PIXEL);
|
|
55085
|
-
onPropertyChangedObservable
|
|
55067
|
+
onPropertyChangedObservable?.notifyObservers({
|
|
55086
55068
|
object: guiControl,
|
|
55087
55069
|
initialValue,
|
|
55088
55070
|
value: guiControl[property],
|
|
@@ -55426,7 +55408,7 @@ class GizmoGeneric extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
|
|
|
55426
55408
|
}
|
|
55427
55409
|
}
|
|
55428
55410
|
render() {
|
|
55429
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
55411
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "gizmo", children: [lines.map((line, index) => {
|
|
55430
55412
|
const start = this.state.scalePoints[line[0]];
|
|
55431
55413
|
const end = this.state.scalePoints[line[1]];
|
|
55432
55414
|
// the vector between start and end
|
|
@@ -55439,7 +55421,7 @@ class GizmoGeneric extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
|
|
|
55439
55421
|
width: `${length}px`,
|
|
55440
55422
|
transform: `translate(-50%, -50%) rotate(${angle}rad)`,
|
|
55441
55423
|
} }, index));
|
|
55442
|
-
}), this.state.scalePoints.map((scalePoint, index) => ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.GizmoScalePoint, { clickable: this.state.scalePointDragging === -1 && !scalePoint.isPivot && !this.state.isRotating, scalePoint: scalePoint, onDrag: () => this._beginDraggingScalePoint(index), onRotate: () => this._beginRotate(), onUp: () => this._onUp(), canRotate: true }, index)))] }))
|
|
55424
|
+
}), this.state.scalePoints.map((scalePoint, index) => ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.GizmoScalePoint, { clickable: this.state.scalePointDragging === -1 && !scalePoint.isPivot && !this.state.isRotating, scalePoint: scalePoint, onDrag: () => this._beginDraggingScalePoint(index), onRotate: () => this._beginRotate(), onUp: () => this._onUp(), canRotate: true }, index)))] }));
|
|
55443
55425
|
}
|
|
55444
55426
|
}
|
|
55445
55427
|
|
|
@@ -55502,10 +55484,14 @@ function GizmoLine(props) {
|
|
|
55502
55484
|
const position = positions[index];
|
|
55503
55485
|
const rtt = _coordinateHelper__WEBPACK_IMPORTED_MODULE_3__.CoordinateHelper.NodeToRTTSpace(control, position.x, position.y);
|
|
55504
55486
|
const canvas = _coordinateHelper__WEBPACK_IMPORTED_MODULE_3__.CoordinateHelper.RttToCanvasSpace(rtt.x, rtt.y);
|
|
55505
|
-
return
|
|
55487
|
+
return {
|
|
55488
|
+
...point,
|
|
55489
|
+
position: canvas,
|
|
55490
|
+
rotation: control.rotation,
|
|
55491
|
+
};
|
|
55506
55492
|
}));
|
|
55507
55493
|
};
|
|
55508
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
55494
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "gizmo", children: scalePoints.map((point, index) => ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.GizmoScalePoint, { scalePoint: point, clickable: true, onDrag: () => { }, onRotate: () => { }, onUp: () => { }, overrideCursor: "not-allowed", canRotate: false }, index))) }));
|
|
55509
55495
|
}
|
|
55510
55496
|
|
|
55511
55497
|
|
|
@@ -55610,7 +55596,7 @@ function GizmoScalePoint(props) {
|
|
|
55610
55596
|
left: (scalePointContainerSize - scaleClickAreaSize) / 2 - scaleClickAreaOffset * scalePoint.horizontalPosition,
|
|
55611
55597
|
cursor,
|
|
55612
55598
|
};
|
|
55613
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
55599
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { style: style, className: "scale-point-container", children: [canRotate && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "rotate-click-area", onPointerDown: onRotate, style: rotateClickAreaStyle }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "scale-click-area", draggable: true, onDragStart: (evt) => evt.preventDefault(), onPointerDown: (event) => {
|
|
55614
55600
|
// if left mouse button down
|
|
55615
55601
|
if (event.buttons & 1) {
|
|
55616
55602
|
onDrag();
|
|
@@ -55619,7 +55605,7 @@ function GizmoScalePoint(props) {
|
|
|
55619
55605
|
if (event.buttons & 1) {
|
|
55620
55606
|
onDrag();
|
|
55621
55607
|
}
|
|
55622
|
-
}, onPointerUp: onUp, style: { cursor } })] }))
|
|
55608
|
+
}, onPointerUp: onUp, style: { cursor } })] }));
|
|
55623
55609
|
}
|
|
55624
55610
|
|
|
55625
55611
|
|
|
@@ -55875,7 +55861,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
55875
55861
|
}
|
|
55876
55862
|
// sets the size of the GUI and makes all necessary adjustments
|
|
55877
55863
|
set guiSize(value) {
|
|
55878
|
-
this._guiSize =
|
|
55864
|
+
this._guiSize = { ...value };
|
|
55879
55865
|
this._visibleRegionContainer.widthInPixels = this._guiSize.width;
|
|
55880
55866
|
this._visibleRegionContainer.heightInPixels = this._guiSize.height;
|
|
55881
55867
|
this.props.globalState.onResizeObservable.notifyObservers(this._guiSize);
|
|
@@ -55933,7 +55919,6 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
55933
55919
|
this.props.globalState.deleteSelectedNodes();
|
|
55934
55920
|
}
|
|
55935
55921
|
pasteFromClipboard(clipboardContents) {
|
|
55936
|
-
var _a;
|
|
55937
55922
|
try {
|
|
55938
55923
|
const parsed = JSON.parse(clipboardContents);
|
|
55939
55924
|
if (parsed.GUIClipboard) {
|
|
@@ -55941,7 +55926,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
55941
55926
|
for (const control of parsed.controls) {
|
|
55942
55927
|
newSelection.push(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.Parse(control, this.props.globalState.guiTexture));
|
|
55943
55928
|
}
|
|
55944
|
-
if (
|
|
55929
|
+
if (newSelection[0].parent?.typeName != "StackPanel") {
|
|
55945
55930
|
this._currLeft += CONTROL_OFFSET;
|
|
55946
55931
|
this._currTop += CONTROL_OFFSET;
|
|
55947
55932
|
}
|
|
@@ -55952,14 +55937,13 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
55952
55937
|
return true;
|
|
55953
55938
|
}
|
|
55954
55939
|
}
|
|
55955
|
-
catch
|
|
55940
|
+
catch {
|
|
55956
55941
|
// don't need an error message
|
|
55957
55942
|
}
|
|
55958
55943
|
core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Logger.Warn("Paste attempted, but clipboard content was invalid.");
|
|
55959
55944
|
return false;
|
|
55960
55945
|
}
|
|
55961
55946
|
CopyGUIControl(original) {
|
|
55962
|
-
var _a, _b;
|
|
55963
55947
|
const serializationObject = {};
|
|
55964
55948
|
original.serialize(serializationObject);
|
|
55965
55949
|
const newControl = gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.Parse(serializationObject, this.props.globalState.guiTexture);
|
|
@@ -55967,12 +55951,12 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
55967
55951
|
//insert the new control into the adt or parent container
|
|
55968
55952
|
this.props.globalState.workbench.appendBlock(newControl);
|
|
55969
55953
|
this.props.globalState.guiTexture.removeControl(newControl);
|
|
55970
|
-
if (
|
|
55954
|
+
if (original.parent?.typeName === "Grid") {
|
|
55971
55955
|
const cell = _tools__WEBPACK_IMPORTED_MODULE_5__.Tools.GetCellInfo(original.parent, original);
|
|
55972
55956
|
original.parent.addControl(newControl, cell.x, cell.y);
|
|
55973
55957
|
}
|
|
55974
55958
|
else {
|
|
55975
|
-
|
|
55959
|
+
original.parent?.addControl(newControl);
|
|
55976
55960
|
}
|
|
55977
55961
|
let index = 1;
|
|
55978
55962
|
while (this.props.globalState.guiTexture.getDescendants(false).filter(
|
|
@@ -56096,11 +56080,10 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
56096
56080
|
this._engine.dispose();
|
|
56097
56081
|
}
|
|
56098
56082
|
loadFromJson(serializationObject) {
|
|
56099
|
-
var _a;
|
|
56100
56083
|
this.removeEditorTransformation();
|
|
56101
56084
|
this.props.globalState.setSelection([]);
|
|
56102
56085
|
if (this.props.globalState.liveGuiTexture) {
|
|
56103
|
-
|
|
56086
|
+
this.props.globalState.liveGuiTexture?.parseContent(serializationObject, true);
|
|
56104
56087
|
this.synchronizeLiveGUI();
|
|
56105
56088
|
}
|
|
56106
56089
|
else {
|
|
@@ -56111,11 +56094,10 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
56111
56094
|
this.loadToEditor();
|
|
56112
56095
|
}
|
|
56113
56096
|
async loadFromSnippet(snippetId) {
|
|
56114
|
-
var _a;
|
|
56115
56097
|
this.removeEditorTransformation();
|
|
56116
56098
|
this.props.globalState.setSelection([]);
|
|
56117
56099
|
if (this.props.globalState.liveGuiTexture) {
|
|
56118
|
-
await
|
|
56100
|
+
await this.props.globalState.liveGuiTexture?.parseFromSnippetAsync(snippetId, true);
|
|
56119
56101
|
this.synchronizeLiveGUI();
|
|
56120
56102
|
}
|
|
56121
56103
|
else {
|
|
@@ -56145,14 +56127,13 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
56145
56127
|
}
|
|
56146
56128
|
}
|
|
56147
56129
|
appendBlock(guiElement) {
|
|
56148
|
-
var _a;
|
|
56149
56130
|
if (this.props.globalState.liveGuiTexture) {
|
|
56150
56131
|
this.props.globalState.liveGuiTexture.addControl(guiElement);
|
|
56151
56132
|
}
|
|
56152
56133
|
this.addEditorBehavior(guiElement);
|
|
56153
56134
|
guiElement.getDescendants(true).forEach((desc) => this.addEditorBehavior(desc));
|
|
56154
56135
|
if (this.props.globalState.selectedControls.length != 0) {
|
|
56155
|
-
|
|
56136
|
+
this.props.globalState.selectedControls[0].parent?.addControl(guiElement);
|
|
56156
56137
|
}
|
|
56157
56138
|
else {
|
|
56158
56139
|
this.trueRootContainer.addControl(guiElement);
|
|
@@ -56161,7 +56142,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
56161
56142
|
}
|
|
56162
56143
|
parent(dropLocationControl) {
|
|
56163
56144
|
const draggedControl = this.props.globalState.draggedControl;
|
|
56164
|
-
const draggedControlParent = draggedControl
|
|
56145
|
+
const draggedControlParent = draggedControl?.parent;
|
|
56165
56146
|
if (draggedControlParent && draggedControl) {
|
|
56166
56147
|
if (this._isNotChildInsert(dropLocationControl, draggedControl)) {
|
|
56167
56148
|
//checking to make sure the element is not being inserted into a child
|
|
@@ -56240,7 +56221,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
56240
56221
|
_tools__WEBPACK_IMPORTED_MODULE_5__.Tools.ReorderGrid(grid, index, draggedControl, cellInfo);
|
|
56241
56222
|
}
|
|
56242
56223
|
_isNotChildInsert(control, draggedControl) {
|
|
56243
|
-
while (control
|
|
56224
|
+
while (control?.parent) {
|
|
56244
56225
|
if (control.parent == draggedControl) {
|
|
56245
56226
|
return false;
|
|
56246
56227
|
}
|
|
@@ -56382,9 +56363,8 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
56382
56363
|
}
|
|
56383
56364
|
}
|
|
56384
56365
|
onDown(evt) {
|
|
56385
|
-
var _a;
|
|
56386
56366
|
this._pointerTravelDistance = 0;
|
|
56387
|
-
|
|
56367
|
+
this._rootContainer.current?.setPointerCapture(evt.pointerId);
|
|
56388
56368
|
if (this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT) {
|
|
56389
56369
|
this._mouseStartPoint = this.getScaledPointerPosition();
|
|
56390
56370
|
}
|
|
@@ -56411,10 +56391,9 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
56411
56391
|
}
|
|
56412
56392
|
}
|
|
56413
56393
|
onUp(evt) {
|
|
56414
|
-
var _a;
|
|
56415
56394
|
this._mouseStartPoint = null;
|
|
56416
56395
|
this._constraintDirection = ConstraintDirection.NONE;
|
|
56417
|
-
|
|
56396
|
+
this._rootContainer.current?.releasePointerCapture(evt.pointerId);
|
|
56418
56397
|
this._panning = false;
|
|
56419
56398
|
if (this._processSelectionOnUp) {
|
|
56420
56399
|
if (Math.sqrt(this._pointerTravelDistance) <= MAX_POINTER_TRAVEL_DISTANCE) {
|
|
@@ -56487,16 +56466,14 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
56487
56466
|
this._liveGuiTextureRerender = true;
|
|
56488
56467
|
});
|
|
56489
56468
|
this._liveRenderObserver = this.props.globalState.liveGuiTexture.onEndRenderObservable.add(() => {
|
|
56490
|
-
var _a;
|
|
56491
56469
|
// return the GUI to the editor mode
|
|
56492
|
-
|
|
56470
|
+
this.props.globalState.guiTexture?.markAsDirty();
|
|
56493
56471
|
this._liveGuiTextureRerender = false;
|
|
56494
56472
|
});
|
|
56495
56473
|
this._scene.onAfterRenderObservable.add(() => {
|
|
56496
|
-
var _a;
|
|
56497
56474
|
if (this._nextLiveGuiRender > 0 && Date.now() > this._nextLiveGuiRender) {
|
|
56498
56475
|
this._nextLiveGuiRender = -1;
|
|
56499
|
-
|
|
56476
|
+
this.props.globalState.liveGuiTexture?.markAsDirty();
|
|
56500
56477
|
}
|
|
56501
56478
|
});
|
|
56502
56479
|
}
|
|
@@ -56512,8 +56489,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
56512
56489
|
if (this.props.globalState.liveGuiTexture) {
|
|
56513
56490
|
this._trueRootContainer.getDescendants().forEach((desc) => desc.dispose());
|
|
56514
56491
|
this.props.globalState.liveGuiTexture.rootContainer.getDescendants(true).forEach((desc) => {
|
|
56515
|
-
|
|
56516
|
-
(_a = this.props.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(desc);
|
|
56492
|
+
this.props.globalState.liveGuiTexture?.removeControl(desc);
|
|
56517
56493
|
this.appendBlock(desc);
|
|
56518
56494
|
});
|
|
56519
56495
|
this.props.globalState.guiTexture.snippetId = this.props.globalState.liveGuiTexture.snippetId;
|
|
@@ -56768,20 +56744,19 @@ class GlobalState {
|
|
|
56768
56744
|
};
|
|
56769
56745
|
this.hostDocument.addEventListener("copy", (event) => {
|
|
56770
56746
|
if (!isElementEditable(event.target)) {
|
|
56771
|
-
this.onCopyObservable.notifyObservers((content) =>
|
|
56747
|
+
this.onCopyObservable.notifyObservers((content) => event.clipboardData?.setData("text/plain", content));
|
|
56772
56748
|
event.preventDefault();
|
|
56773
56749
|
}
|
|
56774
56750
|
});
|
|
56775
56751
|
this.hostDocument.addEventListener("cut", (event) => {
|
|
56776
56752
|
if (!isElementEditable(event.target)) {
|
|
56777
|
-
this.onCutObservable.notifyObservers((content) =>
|
|
56753
|
+
this.onCutObservable.notifyObservers((content) => event.clipboardData?.setData("text/plain", content));
|
|
56778
56754
|
event.preventDefault();
|
|
56779
56755
|
}
|
|
56780
56756
|
});
|
|
56781
56757
|
this.hostDocument.addEventListener("paste", (event) => {
|
|
56782
|
-
var _a;
|
|
56783
56758
|
if (!isElementEditable(event.target)) {
|
|
56784
|
-
this.onPasteObservable.notifyObservers(
|
|
56759
|
+
this.onPasteObservable.notifyObservers(event.clipboardData?.getData("text") || "");
|
|
56785
56760
|
event.preventDefault();
|
|
56786
56761
|
}
|
|
56787
56762
|
});
|
|
@@ -56852,16 +56827,16 @@ class GlobalState {
|
|
|
56852
56827
|
deleteSelectedNodes() {
|
|
56853
56828
|
for (const control of this.selectedControls) {
|
|
56854
56829
|
const guiTextureParent = this._findParentControlInTexture(this.guiTexture, control);
|
|
56855
|
-
guiTextureParent
|
|
56830
|
+
guiTextureParent?.removeControl(control);
|
|
56856
56831
|
if (this.liveGuiTexture) {
|
|
56857
56832
|
const allDescendants = control.getDescendants();
|
|
56858
56833
|
for (const descendant of allDescendants) {
|
|
56859
56834
|
const liveGuiTextureDescendantParent = this._findParentControlInTexture(this.liveGuiTexture, descendant);
|
|
56860
|
-
liveGuiTextureDescendantParent
|
|
56835
|
+
liveGuiTextureDescendantParent?.removeControl(descendant);
|
|
56861
56836
|
descendant.dispose();
|
|
56862
56837
|
}
|
|
56863
56838
|
const liveGuiTextureParent = this._findParentControlInTexture(this.liveGuiTexture, control);
|
|
56864
|
-
liveGuiTextureParent
|
|
56839
|
+
liveGuiTextureParent?.removeControl(control);
|
|
56865
56840
|
}
|
|
56866
56841
|
control.dispose();
|
|
56867
56842
|
}
|
|
@@ -57603,12 +57578,10 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
57603
57578
|
}
|
|
57604
57579
|
}
|
|
57605
57580
|
showWaitScreen() {
|
|
57606
|
-
|
|
57607
|
-
(_a = this.props.globalState.hostDocument.querySelector(".wait-screen")) === null || _a === void 0 ? void 0 : _a.classList.remove("hidden");
|
|
57581
|
+
this.props.globalState.hostDocument.querySelector(".wait-screen")?.classList.remove("hidden");
|
|
57608
57582
|
}
|
|
57609
57583
|
hideWaitScreen() {
|
|
57610
|
-
|
|
57611
|
-
(_a = this.props.globalState.hostDocument.querySelector(".wait-screen")) === null || _a === void 0 ? void 0 : _a.classList.add("hidden");
|
|
57584
|
+
this.props.globalState.hostDocument.querySelector(".wait-screen")?.classList.add("hidden");
|
|
57612
57585
|
}
|
|
57613
57586
|
onPointerDown(evt) {
|
|
57614
57587
|
if (evt.button !== 0)
|
|
@@ -57653,13 +57626,13 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
57653
57626
|
}
|
|
57654
57627
|
render() {
|
|
57655
57628
|
const classForElement = this.state.toolbarExpand ? "left-panel" : "left-panel expand";
|
|
57656
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_4__.Portal,
|
|
57629
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_4__.Portal, { globalState: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "ge-header", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-bar", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_commandBarComponent__WEBPACK_IMPORTED_MODULE_11__.CommandBarComponent, { globalState: this.props.globalState }) }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "gui-editor-workbench-root", style: {
|
|
57657
57630
|
gridTemplateColumns: this.buildColumnLayout(),
|
|
57658
57631
|
}, onMouseDown: (evt) => {
|
|
57659
57632
|
if (evt.target.nodeName === "INPUT") {
|
|
57660
57633
|
return;
|
|
57661
57634
|
}
|
|
57662
|
-
}, ref: this._rootRef, onPointerUp: (evt) => this.onPointerUp(evt)
|
|
57635
|
+
}, ref: this._rootRef, onPointerUp: (evt) => this.onPointerUp(evt), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: classForElement, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "leftGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "diagram-container", onDrop: (event) => {
|
|
57663
57636
|
event.preventDefault();
|
|
57664
57637
|
this.props.globalState.onDropObservable.notifyObservers();
|
|
57665
57638
|
this.props.globalState.onParentingChangeObservable.notifyObservers(null);
|
|
@@ -57667,7 +57640,7 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
57667
57640
|
event.preventDefault();
|
|
57668
57641
|
}, style: {
|
|
57669
57642
|
backgroundColor: this.props.globalState.backgroundColor.toHexString(),
|
|
57670
|
-
}
|
|
57643
|
+
}, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_artBoard__WEBPACK_IMPORTED_MODULE_13__.ArtBoardComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_workbench__WEBPACK_IMPORTED_MODULE_8__.WorkbenchComponent, { ref: "workbenchCanvas", globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_12__.GizmoWrapper, { globalState: this.props.globalState })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "right-panel", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "rightGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_3__.PropertyTabComponent, { globalState: this.props.globalState })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_log_logComponent__WEBPACK_IMPORTED_MODULE_5__.LogComponent, { globalState: this.props.globalState })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_components_MessageDialog__WEBPACK_IMPORTED_MODULE_9__.MessageDialog, { message: this.state.message, isError: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "blocker", children: "GUI Editor runs only on desktop" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "wait-screen hidden", children: "Processing...please wait" })] }));
|
|
57671
57644
|
}
|
|
57672
57645
|
onCreate(value) {
|
|
57673
57646
|
const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__.GUINodeTools.CreateControlFromString(value);
|
|
@@ -57679,23 +57652,23 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
57679
57652
|
}
|
|
57680
57653
|
createBlackLine() {
|
|
57681
57654
|
const icon = this.state.toolbarExpand ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_17__, className: "icon" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_18__, className: "icon" });
|
|
57682
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
57655
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "blackLine", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "arrow", onClick: () => this.switchExpandedState(), children: icon }) }));
|
|
57683
57656
|
}
|
|
57684
57657
|
createToolbarHelper(ct) {
|
|
57685
57658
|
return ct.map((type) => {
|
|
57686
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
|
57659
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "toolbar-label", onDragStart: () => {
|
|
57687
57660
|
this._draggedItem = type.className;
|
|
57688
57661
|
}, onClick: () => {
|
|
57689
57662
|
this.onCreate(type.className);
|
|
57690
|
-
}, title: type.className
|
|
57663
|
+
}, title: type.className, children: type.icon && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "toolbar-icon", draggable: true, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: type.icon, alt: type.className, width: "40px", height: "40px" }) })) }, type.className));
|
|
57691
57664
|
});
|
|
57692
57665
|
}
|
|
57693
57666
|
createToolbar() {
|
|
57694
57667
|
if (this.state.toolbarExpand) {
|
|
57695
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
57668
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "toolbarGrab", children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "toolbar-content-sub1", children: this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes) })] }) }));
|
|
57696
57669
|
}
|
|
57697
57670
|
else {
|
|
57698
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
|
57671
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "toolbarGrab expanded", children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "toolbar-content-sub1", children: [this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.slice(0, Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.length / 2))), this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.slice(Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.length / 2)))] })] }) }));
|
|
57699
57672
|
}
|
|
57700
57673
|
}
|
|
57701
57674
|
}
|