@babylonjs/gui-editor 5.0.0-alpha.58 → 5.0.0-alpha.62
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.
- package/babylon.guiEditor.max.js +1051 -651
- package/babylon.guiEditor.max.js.map +1 -1
- package/babylon.guiEditor.module.d.ts +194 -168
- package/package.json +2 -2
package/babylon.guiEditor.max.js
CHANGED
@@ -10076,7 +10076,7 @@ module.exports = exports;
|
|
10076
10076
|
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ "../../../../node_modules/css-loader/dist/runtime/api.js");
|
10077
10077
|
exports = ___CSS_LOADER_API_IMPORT___(false);
|
10078
10078
|
// Module
|
10079
|
-
exports.push([module.i, ":root {\n --backgroundGrey: #aaaaaa;\n --spacingHeight: 30px; }\n\nhr.ge {\n border: 1px solid #d0cece; }\n\n#ge-propertyTab {\n user-select: none;\n color: black;\n background: #e2e2e2;\n font-family: \"acumin-pro-condensed\"; }\n #ge-propertyTab #header {\n height: 30px;\n font-size: 16px;\n color: white;\n background: white;\n grid-row: 1;\n text-align: center;\n display: grid;\n grid-template-columns: 30px 1fr;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n #ge-propertyTab #header #logo {\n position: relative;\n background: white;\n grid-column: 1;\n width: 32px;\n height: 32px;\n left: 0;\n display: flex;\n align-self: center;\n justify-self: center; }\n #ge-propertyTab #header #title {\n background: white;\n color: black;\n grid-column: 2;\n display: grid;\n align-items: center;\n text-align: center; }\n #ge-propertyTab .range {\n -webkit-appearance: none;\n width: 120px;\n height: 2px;\n background: black;\n border-radius: 5px;\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s; }\n #ge-propertyTab .range:hover {\n opacity: 1; }\n #ge-propertyTab .range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #e2e2e2;\n border: solid;\n border-width: thin;\n cursor: pointer; }\n #ge-propertyTab .range::-moz-range-thumb {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: black;\n cursor: pointer; }\n #ge-propertyTab input[type=\"color\"] {\n -webkit-appearance: none;\n border: 1px solid rgba(255, 255, 255, 0.5);\n padding: 0;\n width: 30px;\n height: 20px; }\n #ge-propertyTab input[type=\"color\"]::-webkit-color-swatch-wrapper {\n padding: 0; }\n #ge-propertyTab input[type=\"color\"]::-webkit-color-swatch {\n border: none; }\n #ge-propertyTab .sliderLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: auto auto auto 1fr; }\n #ge-propertyTab .sliderLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .sliderLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .sliderLine .slider {\n grid-column: 4;\n grid-row: 1;\n margin-right: 5px;\n width: 90%;\n display: flex;\n align-items: center;\n padding-left: 5px; }\n #ge-propertyTab .sliderLine .floatLine {\n grid-column: 3;\n padding-left: 15px; }\n #ge-propertyTab .sliderLine .floatLine .label {\n grid-column: 1;\n display: none;\n align-items: center; }\n #ge-propertyTab .sliderLine .floatLine .short {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .sliderLine .floatLine .short input {\n width: 40px;\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .sliderLine .floatLine .short input::-webkit-outer-spin-button,\n #ge-propertyTab .sliderLine .floatLine .short input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n #ge-propertyTab .sliderLine .floatLine .short input[type=number] {\n -moz-appearance: textfield; }\n #ge-propertyTab .ge-divider {\n display: grid;\n grid-template-columns: auto auto auto auto auto auto; }\n #ge-propertyTab .textInputLine {\n user-select: none;\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 2fr 1fr; }\n #ge-propertyTab .textInputLine .label {\n grid-column: 2;\n padding-left: 5px;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .textInputLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textInputLine .value {\n display: flex;\n align-items: center;\n padding-left: 15px;\n grid-column: 3;\n background: transparent; }\n #ge-propertyTab .textInputLine .value input {\n width: calc(100% - 5px);\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .textInputLine .noUnderline input {\n border-bottom: transparent; }\n #ge-propertyTab .textInputArea {\n padding-left: 5px;\n height: 100%;\n display: grid;\n grid-template-columns: 1fr 120px; }\n #ge-propertyTab .textInputArea .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textInputArea .value {\n display: flex;\n align-items: center;\n grid-column: 2; }\n #ge-propertyTab .textInputArea .value textarea {\n width: calc(150% - 5px);\n margin-left: -50%;\n height: 40px; }\n #ge-propertyTab .paneContainer {\n margin-top: 3px;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%; }\n #ge-propertyTab .paneContainer .paneList {\n border-left: 3px solid transparent; }\n #ge-propertyTab .paneContainer:hover .paneList {\n border-left: 3px solid rgba(51, 122, 183, 0.8); }\n #ge-propertyTab .paneContainer:hover .paneContainer-content .header .title {\n border-left: 3px solid #337ab7; }\n #ge-propertyTab .paneContainer .paneContainer-highlight-border {\n grid-row: 1;\n grid-column: 1;\n opacity: 1;\n border: 3px solid red;\n transition: opacity 250ms;\n pointer-events: none; }\n #ge-propertyTab .paneContainer .paneContainer-highlight-border.transparent {\n opacity: 0; }\n #ge-propertyTab .paneContainer .paneContainer-content {\n grid-row: 1;\n grid-column: 1; }\n #ge-propertyTab .paneContainer .paneContainer-content .header {\n display: grid;\n grid-template-columns: 1fr auto;\n background: #cccccc;\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n padding-right: 5px;\n cursor: pointer; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .title {\n border-left: 3px solid transparent;\n padding-left: 5px;\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .collapse {\n grid-column: 2;\n display: flex;\n align-items: center;\n justify-items: center;\n transform-origin: center; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .collapse.closed {\n transform: rotate(180deg); }\n #ge-propertyTab .paneContainer .paneContainer-content .paneList > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n #ge-propertyTab .paneContainer .paneContainer-content .fragment > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n #ge-propertyTab .color-picker {\n height: 150px;\n width: 15px; }\n #ge-propertyTab .color-picker .color-rect {\n height: 15px;\n border: 1px black solid;\n cursor: pointer; }\n #ge-propertyTab .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px; }\n #ge-propertyTab .color-picker .color-picker-float {\n z-index: 2;\n position: absolute; }\n #ge-propertyTab .gradient-step {\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 20px 30px 40px auto 20px 30px;\n padding-top: 5px;\n padding-left: 5px;\n padding-bottom: 5px; }\n #ge-propertyTab .gradient-step .step {\n grid-row: 1;\n grid-column: 1; }\n #ge-propertyTab .gradient-step .color {\n grid-row: 1;\n grid-column: 2;\n cursor: pointer; }\n #ge-propertyTab .gradient-step .step-value {\n margin-left: 5px;\n grid-row: 1;\n grid-column: 3;\n text-align: right;\n margin-right: 5px; }\n #ge-propertyTab .gradient-step .step-slider {\n grid-row: 1;\n grid-column: 4;\n display: grid;\n justify-content: stretch;\n align-content: center;\n margin-right: -5px;\n padding-left: 12px; }\n #ge-propertyTab .gradient-step .step-slider input {\n width: 90%; }\n #ge-propertyTab .gradient-step .gradient-copy {\n grid-row: 1;\n grid-column: 5;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .gradient-step .gradient-copy .img {\n height: 20px;\n width: 20px; }\n #ge-propertyTab .gradient-step .gradient-copy .img:hover {\n cursor: pointer; }\n #ge-propertyTab .gradient-step .gradient-delete {\n grid-row: 1;\n grid-column: 6;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .gradient-step .gradient-delete .img {\n height: 20px;\n width: 20px; }\n #ge-propertyTab .gradient-step .gradient-delete .img:hover {\n cursor: pointer; }\n #ge-propertyTab .command-button {\n cursor: pointer;\n width: auto; }\n #ge-propertyTab .command-button .command-label {\n display: none; }\n #ge-propertyTab .command-button .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n color: white;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .command-button:hover {\n background-color: white; }\n #ge-propertyTab .command-button .active {\n transform-origin: center;\n background-color: white; }\n #ge-propertyTab .command-button img.active {\n background-color: white; }\n #ge-propertyTab .floatLine {\n user-select: none;\n padding-left: 5px;\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid;\n grid-template-columns: auto auto 2fr 1fr; }\n #ge-propertyTab .floatLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .floatLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .floatLine .value {\n display: flex;\n padding-left: 15px;\n align-items: center;\n grid-column: 3;\n background: transparent; }\n #ge-propertyTab .floatLine .value input {\n width: calc(100% - 5px);\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .floatLine .short {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #ge-propertyTab .floatLine .short input {\n width: 27px; }\n #ge-propertyTab .floatLine .short input::-webkit-outer-spin-button,\n #ge-propertyTab .floatLine .short input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n #ge-propertyTab .floatLine .short input[type=number] {\n -moz-appearance: textfield; }\n #ge-propertyTab .vector3Line {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid; }\n #ge-propertyTab .vector3Line .firstLine {\n display: grid;\n grid-template-columns: 1fr auto 20px;\n height: var(--spacingHeight); }\n #ge-propertyTab .vector3Line .firstLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .vector3Line .firstLine .vector {\n grid-column: 2;\n display: flex;\n align-items: center;\n text-align: right;\n opacity: 0.8; }\n #ge-propertyTab .vector3Line .firstLine .expand {\n grid-column: 3;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-propertyTab .vector3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #ge-propertyTab .vector3Line .secondLine .no-right-margin {\n margin-right: 0; }\n #ge-propertyTab .vector3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #ge-propertyTab .vector3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #ge-propertyTab .vector3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #ge-propertyTab .buttonLine {\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid;\n align-items: center;\n justify-items: stretch;\n padding-bottom: 5px; }\n #ge-propertyTab .buttonLine input[type=\"file\"] {\n display: none; }\n #ge-propertyTab .buttonLine .file-upload {\n background: var(--backgroundGrey);\n border: 1px solid #424242;\n margin: 5px 10px;\n color: white;\n padding: 4px 5px;\n padding-top: 0px;\n opacity: 0.9;\n cursor: pointer;\n text-align: center;\n border-radius: 4px; }\n #ge-propertyTab .buttonLine .file-upload:hover {\n opacity: 1.0; }\n #ge-propertyTab .buttonLine .file-upload:active {\n transform: scale(0.98);\n transform-origin: 0.5 0.5; }\n #ge-propertyTab .buttonLine button {\n background: var(--backgroundGrey);\n border: 1px solid #424242;\n margin: 5px 10px 5px 10px;\n color: white;\n padding: 4px 5px;\n opacity: 0.9;\n border-radius: 4px; }\n #ge-propertyTab .buttonLine button:hover {\n opacity: 1.0; }\n #ge-propertyTab .buttonLine button:active {\n background: #282828; }\n #ge-propertyTab .buttonLine button:focus {\n border: 1px solid #424242;\n outline: 0px; }\n #ge-propertyTab .numeric {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: 1fr 120px auto; }\n #ge-propertyTab .numeric .numeric-label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .numeric .number {\n display: flex;\n align-items: center;\n grid-column: 2;\n height: 10px; }\n #ge-propertyTab .numeric .number .input {\n width: calc(100% - 5px);\n height: 10px; }\n #ge-propertyTab .checkBoxLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 1fr; }\n #ge-propertyTab .checkBoxLine .label {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #ge-propertyTab .checkBoxLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .checkBoxLine .checkBox {\n grid-column: 3;\n display: flex;\n align-items: center;\n padding-left: 15px; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl {\n position: relative;\n display: block;\n height: 14px;\n width: 34px;\n margin-right: 5px;\n border-radius: 100px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl:after {\n position: absolute;\n left: 3px;\n top: 1px;\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 100px;\n background: #e2e2e2;\n box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);\n content: '';\n transition: all 0.15s ease;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl:active:after {\n transform: scale(1.15, 0.85); }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label {\n background: transparent; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label:after {\n left: 20px;\n background: black;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label.disabled {\n background: black;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label.disabled:after {\n left: 20px;\n background: #555555;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx ~ label.disabled {\n background: #555555;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .hidden {\n display: none; }\n #ge-propertyTab .listLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto 1fr auto; }\n #ge-propertyTab .listLine .label {\n grid-column: 2;\n display: none;\n align-items: center; }\n #ge-propertyTab .listLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .listLine .options {\n grid-column: 2;\n display: flex;\n align-items: center;\n margin-right: 5px; }\n #ge-propertyTab .listLine .options select {\n width: 120px;\n height: 25px;\n border: transparent;\n border-radius: 4px; }\n #ge-propertyTab .color3Line {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid; }\n #ge-propertyTab .color3Line .firstLine {\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 1fr; }\n #ge-propertyTab .color3Line .firstLine .label {\n grid-column: 2;\n padding-left: 5px;\n display: none;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .color3Line .firstLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .color3Line .firstLine .textInputLine {\n grid-column: 3;\n margin-top: 5px; }\n #ge-propertyTab .color3Line .firstLine .color3 {\n grid-column: 2;\n margin-top: 12px;\n display: flex;\n align-items: center; }\n #ge-propertyTab .color3Line .firstLine .color3 input {\n margin-right: 5px; }\n #ge-propertyTab .color3Line .firstLine .copy {\n grid-column: 4;\n display: none;\n align-items: center;\n justify-items: center;\n cursor: pointer;\n color: black; }\n #ge-propertyTab .color3Line .firstLine .copy img {\n height: 100%;\n width: 20px; }\n #ge-propertyTab .color3Line .firstLine .expand {\n grid-column: 4;\n display: none;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-propertyTab .color3Line .firstLine .expand img {\n height: 100%;\n width: 20px; }\n #ge-propertyTab .color3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #ge-propertyTab .color3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #ge-propertyTab .color3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #ge-propertyTab .color3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #ge-propertyTab .textLine {\n padding-left: 5px;\n padding-bottom: 5px;\n padding-top: 5px;\n height: auto;\n display: grid;\n grid-template-columns: 1fr auto; }\n #ge-propertyTab .textLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textLine .link-value {\n grid-column: 2;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: end;\n opacity: 0.8;\n margin: 5px;\n margin-top: 6px;\n max-width: 140px;\n text-decoration: underline;\n cursor: pointer; }\n #ge-propertyTab .textLine .value {\n grid-column: 2;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: end;\n opacity: 0.8;\n margin: 5px;\n margin-top: 6px;\n max-width: 200px;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n user-select: text; }\n #ge-propertyTab .textLine .value.check {\n color: green; }\n #ge-propertyTab .textLine .value.uncheck {\n color: red; }\n", ""]);
|
10079
|
+
exports.push([module.i, ":root {\n --backgroundGrey: #aaaaaa;\n --spacingHeight: 30px; }\n\nhr.ge {\n border: 1px solid #d0cece; }\n\n#ge-propertyTab {\n user-select: none;\n color: black;\n background: #e2e2e2;\n font-family: \"acumin-pro-condensed\"; }\n #ge-propertyTab #header {\n height: 30px;\n font-size: 16px;\n color: white;\n background: white;\n grid-row: 1;\n text-align: center;\n display: grid;\n grid-template-columns: 30px 1fr;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n #ge-propertyTab #header #logo {\n position: relative;\n background: white;\n grid-column: 1;\n width: 32px;\n height: 32px;\n left: 0;\n display: flex;\n align-self: center;\n justify-self: center; }\n #ge-propertyTab #header #title {\n background: white;\n color: black;\n grid-column: 2;\n display: grid;\n align-items: center;\n text-align: center; }\n #ge-propertyTab .range {\n -webkit-appearance: none;\n width: 120px;\n height: 2px;\n background: black;\n border-radius: 5px;\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s; }\n #ge-propertyTab .range:hover {\n opacity: 1; }\n #ge-propertyTab .range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #e2e2e2;\n border: solid;\n border-width: thin;\n cursor: pointer; }\n #ge-propertyTab .range::-moz-range-thumb {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: black;\n cursor: pointer; }\n #ge-propertyTab input[type=\"color\"] {\n -webkit-appearance: none;\n border: 1px solid rgba(255, 255, 255, 0.5);\n padding: 0;\n width: 30px;\n height: 20px; }\n #ge-propertyTab input[type=\"color\"]::-webkit-color-swatch-wrapper {\n padding: 0; }\n #ge-propertyTab input[type=\"color\"]::-webkit-color-swatch {\n border: none; }\n #ge-propertyTab .sliderLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: auto auto auto 1fr; }\n #ge-propertyTab .sliderLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .sliderLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .sliderLine .slider {\n grid-column: 4;\n grid-row: 1;\n margin-right: 5px;\n width: 90%;\n display: flex;\n align-items: center;\n padding-left: 5px; }\n #ge-propertyTab .sliderLine .floatLine {\n grid-column: 3;\n padding-left: 15px; }\n #ge-propertyTab .sliderLine .floatLine .label {\n grid-column: 1;\n display: none;\n align-items: center; }\n #ge-propertyTab .sliderLine .floatLine .short {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .sliderLine .floatLine .short input {\n width: 40px;\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .sliderLine .floatLine .short input::-webkit-outer-spin-button,\n #ge-propertyTab .sliderLine .floatLine .short input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n #ge-propertyTab .sliderLine .floatLine .short input[type=number] {\n -moz-appearance: textfield; }\n #ge-propertyTab .ge-divider {\n display: grid;\n grid-template-columns: auto auto auto auto auto auto; }\n #ge-propertyTab .ge-grid-divider {\n display: grid;\n grid-template-columns: 150px 1fr auto; }\n #ge-propertyTab .ge-grid-divider .textLine {\n grid-column: auto; }\n #ge-propertyTab .ge-grid-button-divider {\n display: grid;\n grid-template-columns: 60px 60px 60px 60px; }\n #ge-propertyTab .ge-grid-remove {\n display: grid;\n background-color: #c2c2c2;\n margin-bottom: 5px;\n filter: invert(1); }\n #ge-propertyTab .ge-grid-edit {\n display: grid;\n background-color: #878787;\n margin-bottom: 5px;\n filter: invert(1); }\n #ge-propertyTab .ge-grid {\n display: grid;\n margin-bottom: 5px; }\n #ge-propertyTab .textInputLine {\n user-select: none;\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 2fr 1fr; }\n #ge-propertyTab .textInputLine .label {\n grid-column: 2;\n padding-left: 5px;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .textInputLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textInputLine .value {\n display: flex;\n align-items: center;\n padding-left: 15px;\n grid-column: 3;\n background: transparent; }\n #ge-propertyTab .textInputLine .value input {\n width: calc(100% - 5px);\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .textInputLine .noUnderline input {\n border-bottom: transparent; }\n #ge-propertyTab .textInputArea {\n padding-left: 5px;\n height: 100%;\n display: grid;\n grid-template-columns: 1fr 120px; }\n #ge-propertyTab .textInputArea .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textInputArea .value {\n display: flex;\n align-items: center;\n grid-column: 2; }\n #ge-propertyTab .textInputArea .value textarea {\n width: calc(150% - 5px);\n margin-left: -50%;\n height: 40px; }\n #ge-propertyTab .paneContainer {\n margin-top: 3px;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%; }\n #ge-propertyTab .paneContainer .paneList {\n border-left: 3px solid transparent; }\n #ge-propertyTab .paneContainer:hover .paneList {\n border-left: 3px solid rgba(51, 122, 183, 0.8); }\n #ge-propertyTab .paneContainer:hover .paneContainer-content .header .title {\n border-left: 3px solid #337ab7; }\n #ge-propertyTab .paneContainer .paneContainer-highlight-border {\n grid-row: 1;\n grid-column: 1;\n opacity: 1;\n border: 3px solid red;\n transition: opacity 250ms;\n pointer-events: none; }\n #ge-propertyTab .paneContainer .paneContainer-highlight-border.transparent {\n opacity: 0; }\n #ge-propertyTab .paneContainer .paneContainer-content {\n grid-row: 1;\n grid-column: 1; }\n #ge-propertyTab .paneContainer .paneContainer-content .header {\n display: grid;\n grid-template-columns: 1fr auto;\n background: #cccccc;\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n padding-right: 5px;\n cursor: pointer; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .title {\n border-left: 3px solid transparent;\n padding-left: 5px;\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .collapse {\n grid-column: 2;\n display: flex;\n align-items: center;\n justify-items: center;\n transform-origin: center; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .collapse.closed {\n transform: rotate(180deg); }\n #ge-propertyTab .paneContainer .paneContainer-content .paneList > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n #ge-propertyTab .paneContainer .paneContainer-content .fragment > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n #ge-propertyTab .color-picker {\n height: 150px;\n width: 15px; }\n #ge-propertyTab .color-picker .color-rect {\n height: 15px;\n border: 1px black solid;\n cursor: pointer; }\n #ge-propertyTab .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px; }\n #ge-propertyTab .color-picker .color-picker-float {\n z-index: 2;\n position: absolute; }\n #ge-propertyTab .gradient-step {\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 20px 30px 40px auto 20px 30px;\n padding-top: 5px;\n padding-left: 5px;\n padding-bottom: 5px; }\n #ge-propertyTab .gradient-step .step {\n grid-row: 1;\n grid-column: 1; }\n #ge-propertyTab .gradient-step .color {\n grid-row: 1;\n grid-column: 2;\n cursor: pointer; }\n #ge-propertyTab .gradient-step .step-value {\n margin-left: 5px;\n grid-row: 1;\n grid-column: 3;\n text-align: right;\n margin-right: 5px; }\n #ge-propertyTab .gradient-step .step-slider {\n grid-row: 1;\n grid-column: 4;\n display: grid;\n justify-content: stretch;\n align-content: center;\n margin-right: -5px;\n padding-left: 12px; }\n #ge-propertyTab .gradient-step .step-slider input {\n width: 90%; }\n #ge-propertyTab .gradient-step .gradient-copy {\n grid-row: 1;\n grid-column: 5;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .gradient-step .gradient-copy .img {\n height: 20px;\n width: 20px; }\n #ge-propertyTab .gradient-step .gradient-copy .img:hover {\n cursor: pointer; }\n #ge-propertyTab .gradient-step .gradient-delete {\n grid-row: 1;\n grid-column: 6;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .gradient-step .gradient-delete .img {\n height: 20px;\n width: 20px; }\n #ge-propertyTab .gradient-step .gradient-delete .img:hover {\n cursor: pointer; }\n #ge-propertyTab .command-button {\n cursor: pointer;\n width: auto; }\n #ge-propertyTab .command-button .command-label {\n display: none; }\n #ge-propertyTab .command-button .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n color: white;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .command-button:hover {\n background-color: white; }\n #ge-propertyTab .command-button .active {\n transform-origin: center;\n background-color: white; }\n #ge-propertyTab .command-button img.active {\n background-color: white; }\n #ge-propertyTab .command-button-alt {\n cursor: pointer;\n width: 40px;\n margin-left: 5px;\n margin-right: 5px;\n background-color: white; }\n #ge-propertyTab .command-button-alt .command-label {\n display: none; }\n #ge-propertyTab .command-button-alt .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .command-button-alt:hover {\n background-color: #c2c2c2;\n filter: invert(1); }\n #ge-propertyTab .command-button-alt-disabled {\n cursor: pointer;\n pointer-events: none;\n width: 40px;\n margin-left: 5px;\n margin-right: 5px;\n background-color: white; }\n #ge-propertyTab .command-button-alt-disabled .command-label {\n display: none; }\n #ge-propertyTab .command-button-alt-disabled .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .command-button-alt-disabled img {\n filter: invert(1); }\n #ge-propertyTab .command-button-alt-active {\n cursor: pointer;\n pointer-events: none;\n width: 40px;\n margin-left: 5px;\n margin-right: 5px;\n background-color: #c2c2c2;\n filter: invert(1); }\n #ge-propertyTab .command-button-alt-active .command-label {\n display: none; }\n #ge-propertyTab .command-button-alt-active .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .floatLine {\n user-select: none;\n padding-left: 5px;\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid;\n grid-template-columns: auto auto 2fr 1fr; }\n #ge-propertyTab .floatLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .floatLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .floatLine .value {\n display: flex;\n padding-left: 15px;\n align-items: center;\n grid-column: 3;\n background: transparent; }\n #ge-propertyTab .floatLine .value input {\n width: calc(100% - 5px);\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .floatLine .short {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #ge-propertyTab .floatLine .short input {\n width: 27px; }\n #ge-propertyTab .floatLine .short input::-webkit-outer-spin-button,\n #ge-propertyTab .floatLine .short input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n #ge-propertyTab .floatLine .short input[type=number] {\n -moz-appearance: textfield; }\n #ge-propertyTab .vector3Line {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid; }\n #ge-propertyTab .vector3Line .firstLine {\n display: grid;\n grid-template-columns: 1fr auto 20px;\n height: var(--spacingHeight); }\n #ge-propertyTab .vector3Line .firstLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .vector3Line .firstLine .vector {\n grid-column: 2;\n display: flex;\n align-items: center;\n text-align: right;\n opacity: 0.8; }\n #ge-propertyTab .vector3Line .firstLine .expand {\n grid-column: 3;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-propertyTab .vector3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #ge-propertyTab .vector3Line .secondLine .no-right-margin {\n margin-right: 0; }\n #ge-propertyTab .vector3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #ge-propertyTab .vector3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #ge-propertyTab .vector3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #ge-propertyTab .buttonLine {\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid;\n align-items: center;\n justify-items: stretch;\n padding-bottom: 5px; }\n #ge-propertyTab .buttonLine input[type=\"file\"] {\n display: none; }\n #ge-propertyTab .buttonLine .file-upload {\n background: var(--backgroundGrey);\n border: 1px solid #424242;\n margin: 5px 10px;\n color: white;\n padding: 4px 5px;\n padding-top: 0px;\n opacity: 0.9;\n cursor: pointer;\n text-align: center;\n border-radius: 4px; }\n #ge-propertyTab .buttonLine .file-upload:hover {\n opacity: 1.0; }\n #ge-propertyTab .buttonLine .file-upload:active {\n transform: scale(0.98);\n transform-origin: 0.5 0.5; }\n #ge-propertyTab .buttonLine button {\n background: var(--backgroundGrey);\n border: 1px solid #424242;\n margin: 5px 10px 5px 10px;\n color: white;\n padding: 4px 5px;\n opacity: 0.9;\n border-radius: 4px; }\n #ge-propertyTab .buttonLine button:hover {\n opacity: 1.0; }\n #ge-propertyTab .buttonLine button:active {\n background: #282828; }\n #ge-propertyTab .buttonLine button:focus {\n border: 1px solid #424242;\n outline: 0px; }\n #ge-propertyTab .numeric {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: 1fr 120px auto; }\n #ge-propertyTab .numeric .numeric-label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .numeric .number {\n display: flex;\n align-items: center;\n grid-column: 2;\n height: 10px; }\n #ge-propertyTab .numeric .number .input {\n width: calc(100% - 5px);\n height: 10px; }\n #ge-propertyTab .checkBoxLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 1fr; }\n #ge-propertyTab .checkBoxLine .label {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #ge-propertyTab .checkBoxLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .checkBoxLine .checkBox {\n grid-column: 3;\n display: flex;\n align-items: center;\n padding-left: 15px; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl {\n position: relative;\n display: block;\n height: 14px;\n width: 34px;\n margin-right: 5px;\n border-radius: 100px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl:after {\n position: absolute;\n left: 3px;\n top: 1px;\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 100px;\n background: #e2e2e2;\n box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);\n content: '';\n transition: all 0.15s ease;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl:active:after {\n transform: scale(1.15, 0.85); }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label {\n background: transparent; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label:after {\n left: 20px;\n background: black;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label.disabled {\n background: black;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label.disabled:after {\n left: 20px;\n background: #555555;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx ~ label.disabled {\n background: #555555;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .hidden {\n display: none; }\n #ge-propertyTab .listLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto 1fr auto; }\n #ge-propertyTab .listLine .label {\n grid-column: 2;\n display: none;\n align-items: center; }\n #ge-propertyTab .listLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .listLine .options {\n grid-column: 2;\n padding-left: 15px;\n display: flex;\n align-items: center;\n margin-right: 5px; }\n #ge-propertyTab .listLine .options select {\n width: 120px;\n height: 25px;\n border: transparent;\n border-radius: 4px; }\n #ge-propertyTab .color3Line {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid; }\n #ge-propertyTab .color3Line .firstLine {\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 1fr; }\n #ge-propertyTab .color3Line .firstLine .label {\n grid-column: 2;\n padding-left: 5px;\n display: none;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .color3Line .firstLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .color3Line .firstLine .textInputLine {\n grid-column: 3;\n padding-left: 0px; }\n #ge-propertyTab .color3Line .firstLine .color3 {\n grid-column: 2;\n margin-top: 6px;\n display: flex;\n align-items: center; }\n #ge-propertyTab .color3Line .firstLine .color3 input {\n margin-right: 5px; }\n #ge-propertyTab .color3Line .firstLine .copy {\n grid-column: 4;\n display: none;\n align-items: center;\n justify-items: center;\n cursor: pointer;\n color: black; }\n #ge-propertyTab .color3Line .firstLine .copy img {\n height: 100%;\n width: 20px; }\n #ge-propertyTab .color3Line .firstLine .expand {\n grid-column: 4;\n display: none;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-propertyTab .color3Line .firstLine .expand img {\n height: 100%;\n width: 20px; }\n #ge-propertyTab .color3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #ge-propertyTab .color3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #ge-propertyTab .color3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #ge-propertyTab .color3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #ge-propertyTab .textLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: auto;\n display: grid;\n grid-template-columns: auto auto 2fr 1fr; }\n #ge-propertyTab .textLine .label {\n grid-column: 2;\n padding-left: 5px;\n padding-top: 4px;\n display: flex;\n align-items: left;\n min-width: 15px; }\n #ge-propertyTab .textLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textLine .link-value {\n grid-column: 2;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: end;\n opacity: 0.8;\n margin: 5px;\n margin-top: 6px;\n max-width: 140px;\n text-decoration: underline;\n cursor: pointer; }\n #ge-propertyTab .textLine .value {\n display: none;\n grid-column: 3;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: end;\n opacity: 0.8;\n margin: 5px;\n margin-top: 6px;\n max-width: 200px;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n user-select: text; }\n #ge-propertyTab .textLine .value.check {\n color: green; }\n #ge-propertyTab .textLine .value.uncheck {\n color: red; }\n", ""]);
|
10080
10080
|
// Exports
|
10081
10081
|
module.exports = exports;
|
10082
10082
|
|
@@ -42818,10 +42818,13 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
42818
42818
|
__webpack_require__.r(__webpack_exports__);
|
42819
42819
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CommandBarComponent", function() { return CommandBarComponent; });
|
42820
42820
|
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
|
42821
|
-
/* harmony import */ var
|
42822
|
-
/* harmony import */ var
|
42823
|
-
/* harmony import */ var
|
42824
|
-
/* harmony import */ var
|
42821
|
+
/* harmony import */ var _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/container */ "@babylonjs/gui/2D/controls/button");
|
42822
|
+
/* harmony import */ var _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_1__);
|
42823
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
|
42824
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
|
42825
|
+
/* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./commandButtonComponent */ "./components/commandButtonComponent.tsx");
|
42826
|
+
/* harmony import */ var _commandDropdownComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./commandDropdownComponent */ "./components/commandDropdownComponent.tsx");
|
42827
|
+
|
42825
42828
|
|
42826
42829
|
|
42827
42830
|
|
@@ -42885,7 +42888,7 @@ var CommandBarComponent = /** @class */ (function (_super) {
|
|
42885
42888
|
var _this = this;
|
42886
42889
|
guiControl.isHighlighted = this._outlines;
|
42887
42890
|
guiControl.highlightLineWidth = 5;
|
42888
|
-
if (
|
42891
|
+
if (guiControl instanceof _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_1__["Container"]) {
|
42889
42892
|
guiControl.children.forEach(function (child) {
|
42890
42893
|
_this.updateNodeOutline(child);
|
42891
42894
|
});
|
@@ -42893,45 +42896,71 @@ var CommandBarComponent = /** @class */ (function (_super) {
|
|
42893
42896
|
};
|
42894
42897
|
CommandBarComponent.prototype.render = function () {
|
42895
42898
|
var _this = this;
|
42896
|
-
return (
|
42897
|
-
|
42898
|
-
|
42899
|
-
|
42899
|
+
return (react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "ge-commands" },
|
42900
|
+
react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "commands-left" },
|
42901
|
+
react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("img", { src: logoIcon, color: "white", className: "active" }),
|
42902
|
+
react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandDropdownComponent__WEBPACK_IMPORTED_MODULE_4__["CommandDropdownComponent"], { globalState: this.props.globalState, toRight: true, icon: hamburgerIcon, tooltip: "Options", items: [
|
42900
42903
|
{
|
42901
42904
|
label: "Save",
|
42902
|
-
onClick: function () {
|
42903
|
-
|
42905
|
+
onClick: function () {
|
42906
|
+
_this.props.globalState.onSaveObservable.notifyObservers();
|
42907
|
+
},
|
42908
|
+
},
|
42909
|
+
{
|
42904
42910
|
label: "Load",
|
42905
|
-
fileButton: true
|
42906
|
-
},
|
42911
|
+
fileButton: true,
|
42912
|
+
},
|
42913
|
+
{
|
42907
42914
|
label: "Save to snippet",
|
42908
|
-
onClick: function () {
|
42909
|
-
|
42915
|
+
onClick: function () {
|
42916
|
+
_this.props.globalState.onSnippetSaveObservable.notifyObservers();
|
42917
|
+
},
|
42918
|
+
},
|
42919
|
+
{
|
42910
42920
|
label: "Load from snippet",
|
42911
|
-
onClick: function () {
|
42912
|
-
|
42921
|
+
onClick: function () {
|
42922
|
+
_this.props.globalState.onSnippetLoadObservable.notifyObservers();
|
42923
|
+
},
|
42924
|
+
},
|
42925
|
+
{
|
42913
42926
|
label: "Help",
|
42914
|
-
onClick: function () {
|
42927
|
+
onClick: function () {
|
42928
|
+
window.open("https://doc.babylonjs.com/toolsAndResources/tools/guiEditor", "_blank");
|
42929
|
+
},
|
42915
42930
|
},
|
42916
42931
|
{
|
42917
42932
|
label: "Give feedback",
|
42918
|
-
onClick: function () {
|
42933
|
+
onClick: function () {
|
42934
|
+
window.open("https://forum.babylonjs.com/t/introducing-the-gui-editor-alpha/24578", "_blank");
|
42935
|
+
},
|
42919
42936
|
},
|
42920
42937
|
] }),
|
42921
|
-
|
42922
|
-
_this.
|
42923
|
-
|
42924
|
-
|
42925
|
-
|
42926
|
-
_this.
|
42927
|
-
|
42928
|
-
|
42929
|
-
|
42930
|
-
|
42931
|
-
|
42938
|
+
react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Select", icon: pointerIcon, shortcut: "S", isActive: this._selecting, onClick: function () {
|
42939
|
+
if (!_this._selecting)
|
42940
|
+
_this.props.globalState.onSelectionButtonObservable.notifyObservers();
|
42941
|
+
} }),
|
42942
|
+
react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Move", icon: moveIcon, shortcut: "M", isActive: this._moving, onClick: function () {
|
42943
|
+
if (!_this._moving)
|
42944
|
+
_this.props.globalState.onMoveObservable.notifyObservers();
|
42945
|
+
} }),
|
42946
|
+
react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Pan", icon: handIcon, shortcut: "P", isActive: this._panning, onClick: function () {
|
42947
|
+
if (!_this._panning)
|
42948
|
+
_this.props.globalState.onPanObservable.notifyObservers();
|
42949
|
+
} }),
|
42950
|
+
react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Zoom", shortcut: "Z", icon: zoomIcon, isActive: this._zooming, onClick: function () {
|
42951
|
+
if (!_this._zooming)
|
42952
|
+
_this.props.globalState.onZoomObservable.notifyObservers();
|
42953
|
+
} }),
|
42954
|
+
react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Fit to Window", shortcut: "F", icon: canvasFitIcon, isActive: false, onClick: function () {
|
42955
|
+
_this.props.globalState.onFitToWindowObservable.notifyObservers();
|
42956
|
+
} }),
|
42957
|
+
react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Toggle Guides", shortcut: "G", icon: guidesIcon, isActive: this._outlines, onClick: function () {
|
42958
|
+
_this.props.globalState.onOutlinesObservable.notifyObservers();
|
42959
|
+
} })),
|
42960
|
+
react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "commands-right" })));
|
42932
42961
|
};
|
42933
42962
|
return CommandBarComponent;
|
42934
|
-
}(
|
42963
|
+
}(react__WEBPACK_IMPORTED_MODULE_2__["Component"]));
|
42935
42964
|
|
42936
42965
|
|
42937
42966
|
|
@@ -42958,9 +42987,18 @@ var CommandButtonComponent = /** @class */ (function (_super) {
|
|
42958
42987
|
return _super.call(this, props) || this;
|
42959
42988
|
}
|
42960
42989
|
CommandButtonComponent.prototype.render = function () {
|
42961
|
-
|
42962
|
-
|
42963
|
-
|
42990
|
+
var divClassName = this.props.altStyle ?
|
42991
|
+
"command-button-alt" + (this.props.disabled ? "-disabled" : "") + (this.props.isActive ? "-" : "") :
|
42992
|
+
"command-button ";
|
42993
|
+
var iconClassName = "command-button-icon ";
|
42994
|
+
if (this.props.isActive) {
|
42995
|
+
divClassName += "active";
|
42996
|
+
iconClassName += "active";
|
42997
|
+
}
|
42998
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: divClassName, onClick: this.props.onClick, title: this.props.tooltip + " " + (this.props.shortcut ? " (" + this.props.shortcut + ")" : "") },
|
42999
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: iconClassName },
|
43000
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: this.props.isActive ? "active" : "" })),
|
43001
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-label" }, this.props.tooltip),
|
42964
43002
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-label" }, this.props.tooltip)));
|
42965
43003
|
};
|
42966
43004
|
return CommandButtonComponent;
|
@@ -42997,14 +43035,12 @@ var CommandDropdownComponent = /** @class */ (function (_super) {
|
|
42997
43035
|
CommandDropdownComponent.prototype.render = function () {
|
42998
43036
|
var _this = this;
|
42999
43037
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
43000
|
-
this.state.isExpanded &&
|
43001
|
-
|
43002
|
-
|
43003
|
-
} }),
|
43038
|
+
this.state.isExpanded && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-blocker", onClick: function () {
|
43039
|
+
_this.setState({ isExpanded: false });
|
43040
|
+
} })),
|
43004
43041
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-root" },
|
43005
43042
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown" + (this.state.isExpanded ? " activated" : ""), title: this.props.tooltip, onClick: function () {
|
43006
43043
|
_this.setState({ isExpanded: false });
|
43007
|
-
;
|
43008
43044
|
var newState = !_this.state.isExpanded;
|
43009
43045
|
var pgHost = document.getElementById("embed-host");
|
43010
43046
|
if (pgHost) {
|
@@ -43012,49 +43048,41 @@ var CommandDropdownComponent = /** @class */ (function (_super) {
|
|
43012
43048
|
}
|
43013
43049
|
_this.setState({ isExpanded: newState });
|
43014
43050
|
} },
|
43015
|
-
this.props.icon &&
|
43016
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("
|
43017
|
-
|
43018
|
-
|
43019
|
-
|
43020
|
-
|
43021
|
-
|
43022
|
-
|
43023
|
-
|
43024
|
-
|
43025
|
-
|
43026
|
-
|
43027
|
-
}
|
43028
|
-
|
43051
|
+
this.props.icon && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-icon" },
|
43052
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon }))),
|
43053
|
+
!this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-active" })),
|
43054
|
+
this.state.isExpanded && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-content sub1" + (this.props.toRight ? " toRight" : "") }, this.props.items.map(function (m) {
|
43055
|
+
if (!m.fileButton) {
|
43056
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-label" + (m.isActive ? " active" : ""), key: m.label, onClick: function () {
|
43057
|
+
if (!m.onClick) {
|
43058
|
+
_this.forceUpdate();
|
43059
|
+
return;
|
43060
|
+
}
|
43061
|
+
if (!m.subItems) {
|
43062
|
+
m.onClick();
|
43063
|
+
_this.setState({ isExpanded: false, activeState: m.label });
|
43064
|
+
}
|
43065
|
+
}, title: m.label },
|
43066
|
+
!m.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-label-text" }, (m.isActive ? "> " : "") + m.label),
|
43067
|
+
m.icon && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-icon" },
|
43068
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: m.icon }))),
|
43069
|
+
m.onCheck && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkBox", className: "command-dropdown-label-check", onChange: function (evt) {
|
43070
|
+
_this.forceUpdate();
|
43071
|
+
m.onCheck(evt.target.checked);
|
43072
|
+
}, checked: false })),
|
43073
|
+
m.subItems && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-arrow" }, ">"),
|
43074
|
+
m.subItems && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "sub-items " }, m.subItems.map(function (s) {
|
43075
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { key: s, className: "sub-item", onClick: function () {
|
43029
43076
|
m.onClick();
|
43030
|
-
_this.setState({ isExpanded: false
|
43031
|
-
}
|
43032
|
-
|
43033
|
-
|
43034
|
-
|
43035
|
-
|
43036
|
-
|
43037
|
-
|
43038
|
-
|
43039
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkBox", className: "command-dropdown-label-check", onChange: function (evt) {
|
43040
|
-
_this.forceUpdate();
|
43041
|
-
m.onCheck(evt.target.checked);
|
43042
|
-
}, checked: false }),
|
43043
|
-
m.subItems &&
|
43044
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-arrow" }, ">"),
|
43045
|
-
m.subItems &&
|
43046
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "sub-items " }, m.subItems.map(function (s) {
|
43047
|
-
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { key: s, className: "sub-item", onClick: function () {
|
43048
|
-
m.onClick();
|
43049
|
-
_this.setState({ isExpanded: false });
|
43050
|
-
} },
|
43051
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "sub-item-label" }, s)));
|
43052
|
-
}))));
|
43053
|
-
}
|
43054
|
-
else {
|
43055
|
-
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_2__["FileButtonLineComponent"], { key: m.label, label: "Load", onClick: function (file) { return _this.props.globalState.onLoadObservable.notifyObservers(file); }, accept: ".json" }));
|
43056
|
-
}
|
43057
|
-
})))));
|
43077
|
+
_this.setState({ isExpanded: false });
|
43078
|
+
} },
|
43079
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "sub-item-label" }, s)));
|
43080
|
+
})))));
|
43081
|
+
}
|
43082
|
+
else {
|
43083
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_2__["FileButtonLineComponent"], { key: m.label, label: "Load", onClick: function (file) { return _this.props.globalState.onLoadObservable.notifyObservers(file); }, accept: ".json" }));
|
43084
|
+
}
|
43085
|
+
}))))));
|
43058
43086
|
};
|
43059
43087
|
return CommandDropdownComponent;
|
43060
43088
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -43222,6 +43250,69 @@ var ParentingPropertyGridComponent = /** @class */ (function (_super) {
|
|
43222
43250
|
|
43223
43251
|
|
43224
43252
|
|
43253
|
+
/***/ }),
|
43254
|
+
|
43255
|
+
/***/ "./components/propertyTab/propertyGrids/gui/buttonPropertyGridComponent.tsx":
|
43256
|
+
/*!**********************************************************************************!*\
|
43257
|
+
!*** ./components/propertyTab/propertyGrids/gui/buttonPropertyGridComponent.tsx ***!
|
43258
|
+
\**********************************************************************************/
|
43259
|
+
/*! exports provided: ButtonPropertyGridComponent */
|
43260
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
43261
|
+
|
43262
|
+
"use strict";
|
43263
|
+
__webpack_require__.r(__webpack_exports__);
|
43264
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ButtonPropertyGridComponent", function() { return ButtonPropertyGridComponent; });
|
43265
|
+
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
|
43266
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
|
43267
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
43268
|
+
/* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
|
43269
|
+
/* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
|
43270
|
+
/* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
|
43271
|
+
/* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
|
43272
|
+
/* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../commandButtonComponent */ "./components/commandButtonComponent.tsx");
|
43273
|
+
|
43274
|
+
|
43275
|
+
|
43276
|
+
|
43277
|
+
|
43278
|
+
|
43279
|
+
|
43280
|
+
var conerRadiusIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/conerRadiusIcon.svg */ "./sharedUiComponents/imgs/conerRadiusIcon.svg");
|
43281
|
+
var clipContentsIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/clipContentsIcon.svg */ "./sharedUiComponents/imgs/clipContentsIcon.svg");
|
43282
|
+
var strokeWeightIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/strokeWeightIcon.svg */ "./sharedUiComponents/imgs/strokeWeightIcon.svg");
|
43283
|
+
var addImageButtonIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/addImageButtonIcon.svg */ "./sharedUiComponents/imgs/addImageButtonIcon.svg");
|
43284
|
+
var addTextButtonIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/addTextButtonIcon.svg */ "./sharedUiComponents/imgs/addTextButtonIcon.svg");
|
43285
|
+
var ButtonPropertyGridComponent = /** @class */ (function (_super) {
|
43286
|
+
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ButtonPropertyGridComponent, _super);
|
43287
|
+
function ButtonPropertyGridComponent(props) {
|
43288
|
+
return _super.call(this, props) || this;
|
43289
|
+
}
|
43290
|
+
ButtonPropertyGridComponent.prototype.render = function () {
|
43291
|
+
var _this = this;
|
43292
|
+
var rectangle = this.props.rectangle;
|
43293
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
|
43294
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: rectangle, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43295
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
43296
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "RECTANGLE", value: " ", color: "grey" }),
|
43297
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Clip Content", icon: clipContentsIcon, label: "", target: rectangle, propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43298
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
43299
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Stroke Weight", icon: strokeWeightIcon, lockObject: this.props.lockObject, label: "", target: rectangle, propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43300
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Corner Radius", icon: conerRadiusIcon, lockObject: this.props.lockObject, label: "", target: rectangle, propertyName: "cornerRadius", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
43301
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
43302
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "BUTTON", value: " ", color: "grey" }),
|
43303
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
43304
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__["CommandButtonComponent"], { tooltip: "Add TextBlock", icon: addTextButtonIcon, shortcut: "", isActive: false, onClick: function () {
|
43305
|
+
_this.props.onAddComponent("Text");
|
43306
|
+
} }),
|
43307
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__["CommandButtonComponent"], { tooltip: "Add Image", icon: addImageButtonIcon, shortcut: "", isActive: false, onClick: function () {
|
43308
|
+
_this.props.onAddComponent("ButtonImage");
|
43309
|
+
} }))));
|
43310
|
+
};
|
43311
|
+
return ButtonPropertyGridComponent;
|
43312
|
+
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
43313
|
+
|
43314
|
+
|
43315
|
+
|
43225
43316
|
/***/ }),
|
43226
43317
|
|
43227
43318
|
/***/ "./components/propertyTab/propertyGrids/gui/checkboxPropertyGridComponent.tsx":
|
@@ -43247,6 +43338,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
43247
43338
|
|
43248
43339
|
|
43249
43340
|
|
43341
|
+
var fillColorIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/fillColorIcon.svg */ "./sharedUiComponents/imgs/fillColorIcon.svg");
|
43342
|
+
var sizeIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/sizeIcon.svg */ "./sharedUiComponents/imgs/sizeIcon.svg");
|
43250
43343
|
var CheckboxPropertyGridComponent = /** @class */ (function (_super) {
|
43251
43344
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CheckboxPropertyGridComponent, _super);
|
43252
43345
|
function CheckboxPropertyGridComponent(props) {
|
@@ -43258,8 +43351,8 @@ var CheckboxPropertyGridComponent = /** @class */ (function (_super) {
|
|
43258
43351
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: checkbox, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43259
43352
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
43260
43353
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "CHECKBOX", value: " ", color: "grey" }),
|
43261
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "
|
43262
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], {
|
43354
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Check size ratio", icon: sizeIcon, lockObject: this.props.lockObject, label: "", target: checkbox, propertyName: "checkSizeRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43355
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Checked", icon: fillColorIcon, label: "", target: checkbox, propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
|
43263
43356
|
};
|
43264
43357
|
return CheckboxPropertyGridComponent;
|
43265
43358
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -43331,6 +43424,9 @@ __webpack_require__.r(__webpack_exports__);
|
|
43331
43424
|
/* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../commandButtonComponent */ "./components/commandButtonComponent.tsx");
|
43332
43425
|
/* harmony import */ var _babylonjs_core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @babylonjs/core/Misc/dataStorage */ "@babylonjs/core/Misc/observable");
|
43333
43426
|
/* harmony import */ var _babylonjs_core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_8__);
|
43427
|
+
/* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
|
43428
|
+
|
43429
|
+
|
43334
43430
|
|
43335
43431
|
|
43336
43432
|
|
@@ -43386,11 +43482,11 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
43386
43482
|
var _a, _b;
|
43387
43483
|
//check if it contains either a px or a % sign
|
43388
43484
|
var percentage = this._responsive;
|
43389
|
-
var negative = value.charAt(0) ===
|
43390
|
-
if (value.charAt(value.length - 1) ===
|
43485
|
+
var negative = value.charAt(0) === "-";
|
43486
|
+
if (value.charAt(value.length - 1) === "%") {
|
43391
43487
|
percentage = true;
|
43392
43488
|
}
|
43393
|
-
else if (value.charAt(value.length - 1) ===
|
43489
|
+
else if (value.charAt(value.length - 1) === "x" && value.charAt(value.length - 2) === "p") {
|
43394
43490
|
percentage = false;
|
43395
43491
|
}
|
43396
43492
|
if (((_a = this.props.control.parent) === null || _a === void 0 ? void 0 : _a.typeName) === "StackPanel") {
|
@@ -43398,10 +43494,10 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
43398
43494
|
}
|
43399
43495
|
var newValue = (_b = value.match(/([\d\.\,]+)/g)) === null || _b === void 0 ? void 0 : _b[0];
|
43400
43496
|
if (!newValue) {
|
43401
|
-
newValue =
|
43497
|
+
newValue = "0";
|
43402
43498
|
}
|
43403
|
-
newValue = (negative ?
|
43404
|
-
newValue += percentage ?
|
43499
|
+
newValue = (negative ? "-" : "") + newValue;
|
43500
|
+
newValue += percentage ? "%" : "px";
|
43405
43501
|
this.props.control[propertyName] = newValue;
|
43406
43502
|
this.forceUpdate();
|
43407
43503
|
};
|
@@ -43418,12 +43514,24 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
43418
43514
|
this._height = this.props.control.height;
|
43419
43515
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
|
43420
43516
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
43421
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__["CommandButtonComponent"], { tooltip: "Left", icon: hAlignLeftIcon, shortcut: "", isActive: horizontalAlignment === _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT, onClick: function () {
|
43422
|
-
|
43423
|
-
|
43424
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__["CommandButtonComponent"], { tooltip: "
|
43425
|
-
|
43426
|
-
|
43517
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__["CommandButtonComponent"], { tooltip: "Left", icon: hAlignLeftIcon, shortcut: "", isActive: horizontalAlignment === _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT, onClick: function () {
|
43518
|
+
_this._updateAlignment("horizontalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT);
|
43519
|
+
} }),
|
43520
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__["CommandButtonComponent"], { tooltip: "Center", icon: hAlignCenterIcon, shortcut: "", isActive: horizontalAlignment === _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_CENTER, onClick: function () {
|
43521
|
+
_this._updateAlignment("horizontalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_CENTER);
|
43522
|
+
} }),
|
43523
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__["CommandButtonComponent"], { tooltip: "Right", icon: hAlignRightIcon, shortcut: "", isActive: horizontalAlignment === _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_RIGHT, onClick: function () {
|
43524
|
+
_this._updateAlignment("horizontalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_RIGHT);
|
43525
|
+
} }),
|
43526
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__["CommandButtonComponent"], { tooltip: "Top", icon: vAlignTopIcon, shortcut: "", isActive: verticalAlignment === _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP, onClick: function () {
|
43527
|
+
_this._updateAlignment("verticalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP);
|
43528
|
+
} }),
|
43529
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__["CommandButtonComponent"], { tooltip: "Center", icon: vAlignCenterIcon, shortcut: "", isActive: verticalAlignment === _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER, onClick: function () {
|
43530
|
+
_this._updateAlignment("verticalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER);
|
43531
|
+
} }),
|
43532
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__["CommandButtonComponent"], { tooltip: "Bottom", icon: vAlignBottomIcon, shortcut: "", isActive: verticalAlignment === _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_BOTTOM, onClick: function () {
|
43533
|
+
_this._updateAlignment("verticalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_BOTTOM);
|
43534
|
+
} })),
|
43427
43535
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
43428
43536
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Position", icon: positionIcon, lockObject: this.props.lockObject, label: "X", target: control, propertyName: "left", onChange: function (newValue) { return _this._checkAndUpdateValues("left", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43429
43537
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "Y", target: control, propertyName: "top", onChange: function (newValue) { return _this._checkAndUpdateValues("top", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
@@ -43433,7 +43541,7 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
43433
43541
|
control.autoScale = false;
|
43434
43542
|
}
|
43435
43543
|
else if (_this.props.control.typeName === "ColorPicker") {
|
43436
|
-
if (newValue ===
|
43544
|
+
if (newValue === "0" || newValue === "-") {
|
43437
43545
|
newValue = "1";
|
43438
43546
|
}
|
43439
43547
|
}
|
@@ -43469,32 +43577,24 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
43469
43577
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__["SliderLineComponent"], { iconLabel: "Rotation", lockObject: this.props.lockObject, icon: rotationIcon, label: "R", target: control, decimalCount: 2, propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43470
43578
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
|
43471
43579
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "APPEARANCE", value: " ", color: "grey" }),
|
43472
|
-
control.color !== undefined &&
|
43473
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43474
|
-
|
43475
|
-
control.color = "Transparent";
|
43476
|
-
}
|
43477
|
-
} }),
|
43478
|
-
control.background !== undefined &&
|
43479
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { iconLabel: "Background", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function (newValue) {
|
43480
|
-
if (newValue === "") {
|
43481
|
-
control.background = "Transparent";
|
43482
|
-
}
|
43483
|
-
} }),
|
43580
|
+
(control.color !== undefined && control.typeName !== "Image" &&
|
43581
|
+
control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker") && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_9__["Color3LineComponent"], { iconLabel: "Color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
43582
|
+
control.background !== undefined && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_9__["Color3LineComponent"], { iconLabel: "Background", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
43484
43583
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__["SliderLineComponent"], { lockObject: this.props.lockObject, iconLabel: "Alpha", icon: alphaIcon, label: "", target: control, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43485
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43584
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_9__["Color3LineComponent"], { iconLabel: "Shadow Color", icon: shadowColorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43486
43585
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
43487
43586
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { iconLabel: "Shadow Offset X", icon: shadowOffsetXIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "shadowOffsetX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43488
43587
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { iconLabel: "Shadow Offset Y", icon: shadowOffsetYIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "shadowOffsetY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
43489
43588
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { iconLabel: "Shadow Blur", icon: shadowBlurIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "shadowBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43490
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("
|
43491
|
-
|
43492
|
-
|
43493
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43494
|
-
|
43495
|
-
|
43496
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43497
|
-
|
43589
|
+
(control instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"] || control.typeName === "TextBlock") && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
43590
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
|
43591
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "FONT STYLE", value: " ", color: "grey" }),
|
43592
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
43593
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { iconLabel: "Font Family", icon: fontFamilyIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "fontFamily", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43594
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { iconLabel: "Font Size", icon: fontSizeIcon, lockObject: this.props.lockObject, label: "", target: control, numbersOnly: true, propertyName: "fontSize", onChange: function (newValue) { return _this._checkAndUpdateValues("fontSize", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
43595
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
43596
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { iconLabel: "Font Weight", icon: shadowBlurIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "fontWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43597
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { iconLabel: "Font Style", icon: fontStyleIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "fontStyle", onPropertyChangedObservable: this.props.onPropertyChangedObservable })))));
|
43498
43598
|
};
|
43499
43599
|
return CommonControlPropertyGridComponent;
|
43500
43600
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -43552,14 +43652,18 @@ __webpack_require__.r(__webpack_exports__);
|
|
43552
43652
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
43553
43653
|
/* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
|
43554
43654
|
/* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
|
43555
|
-
/* harmony import */ var
|
43556
|
-
/* harmony import */ var
|
43655
|
+
/* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
|
43656
|
+
/* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
|
43557
43657
|
|
43558
43658
|
|
43559
43659
|
|
43560
43660
|
|
43561
43661
|
|
43562
43662
|
|
43663
|
+
var sizeIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/sizeIcon.svg */ "./sharedUiComponents/imgs/sizeIcon.svg");
|
43664
|
+
var colorIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/colorIcon.svg */ "./sharedUiComponents/imgs/colorIcon.svg");
|
43665
|
+
var conerRadiusIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/conerRadiusIcon.svg */ "./sharedUiComponents/imgs/conerRadiusIcon.svg");
|
43666
|
+
var strokeWeightIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/strokeWeightIcon.svg */ "./sharedUiComponents/imgs/strokeWeightIcon.svg");
|
43563
43667
|
var DisplayGridPropertyGridComponent = /** @class */ (function (_super) {
|
43564
43668
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(DisplayGridPropertyGridComponent, _super);
|
43565
43669
|
function DisplayGridPropertyGridComponent(props) {
|
@@ -43572,13 +43676,13 @@ var DisplayGridPropertyGridComponent = /** @class */ (function (_super) {
|
|
43572
43676
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
43573
43677
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { label: "DISPLAY GRID", value: " ", color: "grey" }),
|
43574
43678
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
43575
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43576
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43577
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43578
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43579
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43580
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43581
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43679
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Cell Size", icon: sizeIcon, min: 1, isInteger: true, lockObject: this.props.lockObject, label: "W", target: displayGrid, propertyName: "cellWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43680
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { min: 1, isInteger: true, lockObject: this.props.lockObject, label: "H", target: displayGrid, propertyName: "cellHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
43681
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Minor Line Tickness", icon: strokeWeightIcon, min: 1, isInteger: true, lockObject: this.props.lockObject, label: "", target: displayGrid, propertyName: "minorLineTickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43682
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__["Color3LineComponent"], { iconLabel: "Minor Line Color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: displayGrid, propertyName: "minorLineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43683
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Major Line Tickness", icon: strokeWeightIcon, min: 1, isInteger: true, lockObject: this.props.lockObject, label: "", target: displayGrid, propertyName: "majorLineTickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43684
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__["Color3LineComponent"], { iconLabel: "Major Line Color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: displayGrid, propertyName: "majorLineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43685
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Major Line Frequency", icon: conerRadiusIcon, min: 1, isInteger: true, lockObject: this.props.lockObject, label: "", target: displayGrid, propertyName: "majorLineFrequency", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
|
43582
43686
|
};
|
43583
43687
|
return DisplayGridPropertyGridComponent;
|
43584
43688
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -43648,14 +43752,22 @@ __webpack_require__.r(__webpack_exports__);
|
|
43648
43752
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
43649
43753
|
/* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
|
43650
43754
|
/* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
|
43651
|
-
/* harmony import */ var
|
43652
|
-
/* harmony import */ var
|
43755
|
+
/* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
|
43756
|
+
/* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../commandButtonComponent */ "./components/commandButtonComponent.tsx");
|
43653
43757
|
|
43654
43758
|
|
43655
43759
|
|
43656
43760
|
|
43657
43761
|
|
43658
43762
|
|
43763
|
+
var gridColumnIconDark = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/gridColumnIconDark.svg */ "./sharedUiComponents/imgs/gridColumnIconDark.svg");
|
43764
|
+
var gridRowIconDark = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/gridColumnIconDark.svg */ "./sharedUiComponents/imgs/gridColumnIconDark.svg"); //needs change
|
43765
|
+
var confirmGridElementDark = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/confirmGridElementDark.svg */ "./sharedUiComponents/imgs/confirmGridElementDark.svg");
|
43766
|
+
var subtractGridElementDark = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/subtractGridElementDark.svg */ "./sharedUiComponents/imgs/subtractGridElementDark.svg");
|
43767
|
+
var addGridElementDark = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/addGridElementDark.svg */ "./sharedUiComponents/imgs/addGridElementDark.svg");
|
43768
|
+
var cancelGridElementDark = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/cancelGridElementDark.svg */ "./sharedUiComponents/imgs/cancelGridElementDark.svg");
|
43769
|
+
var valueChangedGridDark = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/valueChangedGridDark.svg */ "./sharedUiComponents/imgs/valueChangedGridDark.svg");
|
43770
|
+
var deleteGridElementDark = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/deleteGridElementDark.svg */ "./sharedUiComponents/imgs/deleteGridElementDark.svg");
|
43659
43771
|
var GridPropertyGridComponent = /** @class */ (function (_super) {
|
43660
43772
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(GridPropertyGridComponent, _super);
|
43661
43773
|
function GridPropertyGridComponent(props) {
|
@@ -43669,18 +43781,28 @@ var GridPropertyGridComponent = /** @class */ (function (_super) {
|
|
43669
43781
|
_this._columnDefinitions = [];
|
43670
43782
|
_this._editedRow = false;
|
43671
43783
|
_this._editedColumn = false;
|
43784
|
+
_this._rowChild = false;
|
43785
|
+
_this._columnChild = false;
|
43672
43786
|
return _this;
|
43673
43787
|
}
|
43674
43788
|
GridPropertyGridComponent.prototype.renderRows = function () {
|
43675
43789
|
var _this = this;
|
43676
43790
|
return (this._rowDefinitions.map(function (rd, i) {
|
43677
|
-
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { key: "r" + i, className: "ge-
|
43678
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43679
|
-
|
43680
|
-
|
43681
|
-
|
43682
|
-
|
43683
|
-
|
43791
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { key: "r" + i, className: _this._removingRow && i === _this._rowEditFlags.length - 1 ? "ge-grid-remove" : _this._rowEditFlags[i] ? "ge-grid-edit" : "ge-grid" },
|
43792
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-grid-divider" },
|
43793
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: _this.props.lockObject, key: "rText" + i, label: "", icon: gridColumnIconDark, iconLabel: "Row " + i, value: rd, numbersOnly: true, onChange: function (newValue) {
|
43794
|
+
_this._rowDefinitions[i] = newValue;
|
43795
|
+
_this._rowEditFlags[i] = true;
|
43796
|
+
_this._editedRow = true;
|
43797
|
+
_this._removingRow = false;
|
43798
|
+
_this._rowChild = false;
|
43799
|
+
_this.forceUpdate();
|
43800
|
+
} }),
|
43801
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { tooltip: "", label: "[" + i + "]", value: "", color: "grey" }),
|
43802
|
+
_this._removingRow && i === _this._rowEditFlags.length - 1 &&
|
43803
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { icon: deleteGridElementDark, label: " ", value: " ", color: "grey" }),
|
43804
|
+
_this._rowEditFlags[i] &&
|
43805
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { icon: valueChangedGridDark, label: " ", value: " ", color: "grey" }))));
|
43684
43806
|
}));
|
43685
43807
|
};
|
43686
43808
|
GridPropertyGridComponent.prototype.setRowValues = function () {
|
@@ -43712,13 +43834,21 @@ var GridPropertyGridComponent = /** @class */ (function (_super) {
|
|
43712
43834
|
GridPropertyGridComponent.prototype.renderColumns = function () {
|
43713
43835
|
var _this = this;
|
43714
43836
|
return (this._columnDefinitions.map(function (cd, i) {
|
43715
|
-
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { key: "c" + i, className: "ge-
|
43716
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43717
|
-
|
43718
|
-
|
43719
|
-
|
43720
|
-
|
43721
|
-
|
43837
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { key: "c" + i, className: _this._removingColumn && i === _this._columnEditFlags.length - 1 ? "ge-grid-remove" : _this._columnEditFlags[i] ? "ge-grid-edit" : "ge-grid" },
|
43838
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-grid-divider" },
|
43839
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: _this.props.lockObject, key: "ctext" + i, label: "", icon: gridRowIconDark, iconLabel: "Column " + i, value: cd, numbersOnly: true, onChange: function (newValue) {
|
43840
|
+
_this._columnDefinitions[i] = newValue;
|
43841
|
+
_this._columnEditFlags[i] = true;
|
43842
|
+
_this._editedColumn = true;
|
43843
|
+
_this._removingColumn = false;
|
43844
|
+
_this._columnChild = false;
|
43845
|
+
_this.forceUpdate();
|
43846
|
+
} }),
|
43847
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { tooltip: "", label: "[" + i + "]", value: "", color: "grey" }),
|
43848
|
+
_this._removingColumn && i === _this._columnEditFlags.length - 1 &&
|
43849
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { icon: deleteGridElementDark, label: " ", value: " ", color: "grey" }),
|
43850
|
+
_this._columnEditFlags[i] &&
|
43851
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { icon: valueChangedGridDark, label: " ", value: " ", color: "grey" }))));
|
43722
43852
|
}));
|
43723
43853
|
};
|
43724
43854
|
GridPropertyGridComponent.prototype.resizeRow = function () {
|
@@ -43843,104 +43973,118 @@ var GridPropertyGridComponent = /** @class */ (function (_super) {
|
|
43843
43973
|
var _a;
|
43844
43974
|
var newValue = (_a = value.match(/([0-9.,]+)/g)) === null || _a === void 0 ? void 0 : _a[0];
|
43845
43975
|
if (!newValue) {
|
43846
|
-
newValue =
|
43976
|
+
newValue = "0";
|
43847
43977
|
}
|
43848
|
-
newValue += percent ?
|
43978
|
+
newValue += percent ? "%" : "px";
|
43849
43979
|
return newValue;
|
43850
43980
|
};
|
43851
43981
|
GridPropertyGridComponent.prototype.checkPercentage = function (value) {
|
43852
|
-
var toSearch =
|
43982
|
+
var toSearch = "px";
|
43853
43983
|
return value.substring(value.length - toSearch.length, value.length) !== toSearch;
|
43854
43984
|
};
|
43985
|
+
GridPropertyGridComponent.prototype.resetValues = function () {
|
43986
|
+
var grid = this.props.grid;
|
43987
|
+
this._removingColumn = false;
|
43988
|
+
this._removingRow = false;
|
43989
|
+
this._columnChild = false;
|
43990
|
+
this._rowChild = false;
|
43991
|
+
this._previousGrid = grid;
|
43992
|
+
this.setRowValues();
|
43993
|
+
this.setColumnValues();
|
43994
|
+
this.resizeColumn();
|
43995
|
+
this.resizeRow();
|
43996
|
+
};
|
43855
43997
|
GridPropertyGridComponent.prototype.render = function () {
|
43856
43998
|
var _this = this;
|
43857
43999
|
var grid = this.props.grid;
|
43858
44000
|
if (grid !== this._previousGrid) {
|
43859
|
-
this.
|
43860
|
-
this._removingRow = false;
|
43861
|
-
this._previousGrid = grid;
|
43862
|
-
this.setRowValues();
|
43863
|
-
this.setColumnValues();
|
43864
|
-
this.resizeColumn();
|
43865
|
-
this.resizeRow();
|
44001
|
+
this.resetValues();
|
43866
44002
|
}
|
43867
44003
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
|
43868
44004
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: grid, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
43869
44005
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
|
43870
44006
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { tooltip: "", label: "GRID", value: " ", color: "grey" }),
|
43871
|
-
|
43872
|
-
|
43873
|
-
|
43874
|
-
|
43875
|
-
|
43876
|
-
|
43877
|
-
|
43878
|
-
|
43879
|
-
|
43880
|
-
|
43881
|
-
|
43882
|
-
|
43883
|
-
|
43884
|
-
|
43885
|
-
|
43886
|
-
" ",
|
43887
|
-
(grid.rowCount > 1 && !this._removingRow) && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "REMOVE ROW", onClick: function () {
|
43888
|
-
var hasChild = false;
|
43889
|
-
for (var i = 0; i < grid.columnCount; ++i) {
|
43890
|
-
var child = grid.cells[(grid.rowCount - 1) + ":" + i];
|
43891
|
-
if (child === null || child === void 0 ? void 0 : child.children.length) {
|
43892
|
-
hasChild = true;
|
43893
|
-
break;
|
43894
|
-
}
|
43895
|
-
}
|
43896
|
-
if (hasChild) {
|
43897
|
-
_this._removingRow = true;
|
43898
|
-
}
|
43899
|
-
else {
|
43900
|
-
grid.removeRowDefinition(grid.rowCount - 1);
|
43901
|
-
_this.setRowValues();
|
43902
|
-
_this.resizeRow();
|
43903
|
-
}
|
43904
|
-
_this.forceUpdate();
|
43905
|
-
} }),
|
43906
|
-
this._removingRow &&
|
43907
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
43908
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_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" }),
|
43909
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "REMOVE", onClick: function () {
|
43910
|
-
grid.removeRowDefinition(grid.rowCount - 1);
|
43911
|
-
_this.setRowValues();
|
43912
|
-
_this.resizeRow();
|
44007
|
+
this.renderRows(),
|
44008
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-gridLine" },
|
44009
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-grid-button-divider" },
|
44010
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Add Row", icon: addGridElementDark, shortcut: "", isActive: false, onClick: function () {
|
44011
|
+
var total = 0;
|
44012
|
+
var count = 0;
|
44013
|
+
for (var i = 0; i < grid.rowCount; ++i) {
|
44014
|
+
var rd = grid.getRowDefinition(i);
|
44015
|
+
if (rd === null || rd === void 0 ? void 0 : rd.isPercentage) {
|
44016
|
+
total += rd === null || rd === void 0 ? void 0 : rd.getValue(grid.host);
|
44017
|
+
count++;
|
44018
|
+
}
|
44019
|
+
}
|
44020
|
+
grid.addRowDefinition(total / count, false);
|
44021
|
+
_this.resetValues();
|
43913
44022
|
_this.forceUpdate();
|
43914
|
-
_this._removingRow = false;
|
43915
44023
|
} }),
|
43916
|
-
|
43917
|
-
|
44024
|
+
" ",
|
44025
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Remove Row", icon: subtractGridElementDark, shortcut: "", isActive: this._removingRow, disabled: grid.rowCount <= 1, onClick: function () {
|
44026
|
+
var hasChild = false;
|
44027
|
+
for (var i = 0; i < grid.columnCount; ++i) {
|
44028
|
+
var child = grid.cells[(grid.rowCount - 1) + ":" + i];
|
44029
|
+
if (child === null || child === void 0 ? void 0 : child.children.length) {
|
44030
|
+
hasChild = true;
|
44031
|
+
break;
|
44032
|
+
//(grid.rowCount > 1 && !this._removingRow)
|
44033
|
+
}
|
44034
|
+
}
|
44035
|
+
_this.resetValues();
|
44036
|
+
if (hasChild) {
|
44037
|
+
_this._rowChild = true;
|
44038
|
+
}
|
44039
|
+
_this._removingRow = true;
|
43918
44040
|
_this.forceUpdate();
|
43919
|
-
} })
|
43920
|
-
|
43921
|
-
|
43922
|
-
|
43923
|
-
|
43924
|
-
|
44041
|
+
} }),
|
44042
|
+
this._editedRow &&
|
44043
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
44044
|
+
" ",
|
44045
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
|
44046
|
+
_this.resizeRow();
|
44047
|
+
_this.forceUpdate();
|
44048
|
+
} }),
|
44049
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
|
44050
|
+
_this.resetValues();
|
44051
|
+
_this.forceUpdate();
|
44052
|
+
} })),
|
44053
|
+
this._removingRow &&
|
44054
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
44055
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
|
44056
|
+
grid.removeRowDefinition(grid.rowCount - 1);
|
44057
|
+
_this.setRowValues();
|
44058
|
+
_this.resizeRow();
|
44059
|
+
_this.forceUpdate();
|
44060
|
+
_this._removingRow = false;
|
44061
|
+
_this._rowChild = false;
|
44062
|
+
} }),
|
44063
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
|
44064
|
+
_this._removingRow = false;
|
44065
|
+
_this._rowChild = false;
|
44066
|
+
_this.forceUpdate();
|
44067
|
+
} })))),
|
44068
|
+
this._rowChild && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
44069
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_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" })),
|
43925
44070
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
|
43926
|
-
|
43927
|
-
|
43928
|
-
|
43929
|
-
|
43930
|
-
var
|
43931
|
-
|
43932
|
-
|
43933
|
-
|
44071
|
+
this.renderColumns(),
|
44072
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-grid-button-divider" },
|
44073
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Add Column", icon: addGridElementDark, shortcut: "", isActive: false, onClick: function () {
|
44074
|
+
var total = 0;
|
44075
|
+
var count = 0;
|
44076
|
+
for (var i = 0; i < grid.columnCount; ++i) {
|
44077
|
+
var cd = grid.getColumnDefinition(i);
|
44078
|
+
if (cd === null || cd === void 0 ? void 0 : cd.isPercentage) {
|
44079
|
+
total += cd === null || cd === void 0 ? void 0 : cd.getValue(grid.host);
|
44080
|
+
count++;
|
44081
|
+
}
|
43934
44082
|
}
|
43935
|
-
|
43936
|
-
|
43937
|
-
|
43938
|
-
|
43939
|
-
|
43940
|
-
} }),
|
43941
|
-
" ",
|
43942
|
-
(grid.columnCount > 1 && !this._removingColumn) &&
|
43943
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "REMOVE COLUMN", onClick: function () {
|
44083
|
+
grid.addColumnDefinition(total / count, false);
|
44084
|
+
_this.resetValues();
|
44085
|
+
_this.forceUpdate();
|
44086
|
+
} }),
|
44087
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Remove Column", icon: subtractGridElementDark, shortcut: "", isActive: this._removingColumn, disabled: grid.columnCount <= 1, onClick: function () {
|
43944
44088
|
var hasChild = false;
|
43945
44089
|
for (var i = 0; i < grid.rowCount; ++i) {
|
43946
44090
|
var child = grid.cells[i + ":" + (grid.columnCount - 1)];
|
@@ -43949,35 +44093,40 @@ var GridPropertyGridComponent = /** @class */ (function (_super) {
|
|
43949
44093
|
break;
|
43950
44094
|
}
|
43951
44095
|
}
|
44096
|
+
_this.resetValues();
|
43952
44097
|
if (hasChild) {
|
43953
|
-
_this.
|
43954
|
-
}
|
43955
|
-
else {
|
43956
|
-
grid.removeColumnDefinition(grid.columnCount - 1);
|
43957
|
-
_this.setColumnValues();
|
43958
|
-
_this.resizeColumn();
|
44098
|
+
_this._columnChild = true;
|
43959
44099
|
}
|
44100
|
+
_this._removingColumn = true;
|
43960
44101
|
_this.forceUpdate();
|
43961
44102
|
} }),
|
43962
|
-
|
43963
|
-
|
43964
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_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" }),
|
43965
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "REMOVE", onClick: function () {
|
43966
|
-
grid.removeColumnDefinition(grid.columnCount - 1);
|
43967
|
-
_this.setColumnValues();
|
44103
|
+
this._editedColumn && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
44104
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
|
43968
44105
|
_this.resizeColumn();
|
43969
44106
|
_this.forceUpdate();
|
43970
|
-
_this._removingColumn = false;
|
43971
44107
|
} }),
|
43972
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
43973
|
-
_this.
|
44108
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
|
44109
|
+
_this.resetValues();
|
43974
44110
|
_this.forceUpdate();
|
43975
44111
|
} })),
|
43976
|
-
|
43977
|
-
|
43978
|
-
|
43979
|
-
|
43980
|
-
|
44112
|
+
this._removingColumn &&
|
44113
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
44114
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
|
44115
|
+
grid.removeColumnDefinition(grid.columnCount - 1);
|
44116
|
+
_this.setColumnValues();
|
44117
|
+
_this.resizeColumn();
|
44118
|
+
_this.forceUpdate();
|
44119
|
+
_this._removingColumn = false;
|
44120
|
+
_this._columnChild = false;
|
44121
|
+
} }),
|
44122
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
|
44123
|
+
_this._removingColumn = false;
|
44124
|
+
_this._columnChild = false;
|
44125
|
+
_this.forceUpdate();
|
44126
|
+
} })),
|
44127
|
+
" "),
|
44128
|
+
this._columnChild && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
44129
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_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" }))));
|
43981
44130
|
};
|
43982
44131
|
return GridPropertyGridComponent;
|
43983
44132
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -44083,24 +44232,24 @@ var ImagePropertyGridComponent = /** @class */ (function (_super) {
|
|
44083
44232
|
{ label: "Fill", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_FILL },
|
44084
44233
|
{ label: "Uniform", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_UNIFORM },
|
44085
44234
|
{ label: "Extend", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_EXTEND },
|
44086
|
-
{ label: "NinePatch", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_NINE_PATCH }
|
44235
|
+
{ label: "NinePatch", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_NINE_PATCH },
|
44087
44236
|
];
|
44088
44237
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
|
44089
44238
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: image, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44090
44239
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
44091
44240
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "IMAGE", value: " ", color: "grey" }),
|
44092
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44241
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { iconLabel: "Source", icon: sizeIcon, lockObject: this.props.lockObject, label: "", target: image, propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44093
44242
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
44094
44243
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Source Position", icon: positionIcon, lockObject: this.props.lockObject, label: "L", target: image, propertyName: "sourceLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44095
44244
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "T", target: image, propertyName: "sourceTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
44096
44245
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
44097
44246
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Source Size", icon: sizeIcon, lockObject: this.props.lockObject, label: "W", target: image, propertyName: "sourceWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44098
44247
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "H", target: image, propertyName: "sourceHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
44099
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], {
|
44100
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__["OptionsLineComponent"], {
|
44248
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Autoscale", icon: sizeIcon, label: "", target: image, propertyName: "autoScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44249
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__["OptionsLineComponent"], { iconLabel: "Stretch", icon: sizeIcon, label: "", options: stretchOptions, target: image, propertyName: "stretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: function (value) { return _this.setState({ mode: value }); } }),
|
44101
44250
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
44102
44251
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "ANIMATION SHEET", value: " ", color: "grey" }),
|
44103
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "
|
44252
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Cell Id", icon: sizeIcon, lockObject: this.props.lockObject, label: "", isInteger: true, target: image, propertyName: "cellId", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44104
44253
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
44105
44254
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { icon: sizeIcon, lockObject: this.props.lockObject, label: "W", target: image, propertyName: "cellWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44106
44255
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "H", target: image, propertyName: "cellHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))));
|
@@ -44131,6 +44280,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
44131
44280
|
/* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
|
44132
44281
|
/* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
|
44133
44282
|
/* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
|
44283
|
+
/* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
|
44284
|
+
|
44134
44285
|
|
44135
44286
|
|
44136
44287
|
|
@@ -44139,6 +44290,13 @@ __webpack_require__.r(__webpack_exports__);
|
|
44139
44290
|
|
44140
44291
|
|
44141
44292
|
|
44293
|
+
var fillColorIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/fillColorIcon.svg */ "./sharedUiComponents/imgs/fillColorIcon.svg");
|
44294
|
+
var strokeWeightIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/strokeWeightIcon.svg */ "./sharedUiComponents/imgs/strokeWeightIcon.svg");
|
44295
|
+
var sizeIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/sizeIcon.svg */ "./sharedUiComponents/imgs/sizeIcon.svg");
|
44296
|
+
var verticalMarginIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/verticalMarginIcon.svg */ "./sharedUiComponents/imgs/verticalMarginIcon.svg");
|
44297
|
+
var fontFamilyIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/fontFamilyIcon.svg */ "./sharedUiComponents/imgs/fontFamilyIcon.svg");
|
44298
|
+
var alphaIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/alphaIcon.svg */ "./sharedUiComponents/imgs/alphaIcon.svg");
|
44299
|
+
var colorIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/colorIcon.svg */ "./sharedUiComponents/imgs/colorIcon.svg");
|
44142
44300
|
var InputTextPropertyGridComponent = /** @class */ (function (_super) {
|
44143
44301
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(InputTextPropertyGridComponent, _super);
|
44144
44302
|
function InputTextPropertyGridComponent(props) {
|
@@ -44150,18 +44308,18 @@ var InputTextPropertyGridComponent = /** @class */ (function (_super) {
|
|
44150
44308
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: inputText, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44151
44309
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
44152
44310
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextLineComponent"], { label: "INPUT TEXT", value: " ", color: "grey" }),
|
44153
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44154
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44155
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44156
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
44157
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__["SliderLineComponent"], {
|
44158
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], {
|
44159
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44160
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44161
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], {
|
44162
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "
|
44163
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44164
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
44311
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { iconLabel: "Text", icon: fontFamilyIcon, lockObject: this.props.lockObject, label: "", target: inputText, propertyName: "text", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44312
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { iconLabel: "Prompt", icon: fontFamilyIcon, lockObject: this.props.lockObject, label: "", target: inputText, propertyName: "promptMessage", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44313
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { iconLabel: "Max width", icon: sizeIcon, lockObject: this.props.lockObject, label: "", target: inputText, propertyName: "maxWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44314
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__["Color3LineComponent"], { iconLabel: "Highlight color", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: inputText, propertyName: "textHighlightColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44315
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__["SliderLineComponent"], { iconLabel: "Highligher opacity", icon: alphaIcon, label: "", minimum: 0, maximum: 1, step: 0.01, target: inputText, propertyName: "highligherOpacity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44316
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "On focus select all", icon: verticalMarginIcon, label: "", target: inputText, propertyName: "onFocusSelectAll", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44317
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { iconLabel: "Focused background", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: inputText, propertyName: "focusedBackground", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44318
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { iconLabel: "Margin", icon: verticalMarginIcon, lockObject: this.props.lockObject, label: "", target: inputText, propertyName: "margin", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44319
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Auto stretch width", icon: sizeIcon, label: "", target: inputText, propertyName: "autoStretchWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44320
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { iconLabel: "Thickness", icon: strokeWeightIcon, lockObject: this.props.lockObject, label: "", target: inputText, propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44321
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { iconLabel: "Placeholder text", icon: fontFamilyIcon, lockObject: this.props.lockObject, label: "", target: inputText, propertyName: "placeholderText", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44322
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__["Color3LineComponent"], { iconLabel: "Placeholder color", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: inputText, propertyName: "placeholderColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
|
44165
44323
|
};
|
44166
44324
|
return InputTextPropertyGridComponent;
|
44167
44325
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -44193,6 +44351,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
44193
44351
|
|
44194
44352
|
|
44195
44353
|
|
44354
|
+
var positionIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/positionIcon.svg */ "./sharedUiComponents/imgs/positionIcon.svg");
|
44196
44355
|
var LinePropertyGridComponent = /** @class */ (function (_super) {
|
44197
44356
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(LinePropertyGridComponent, _super);
|
44198
44357
|
function LinePropertyGridComponent(props) {
|
@@ -44217,14 +44376,14 @@ var LinePropertyGridComponent = /** @class */ (function (_super) {
|
|
44217
44376
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: line, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44218
44377
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
44219
44378
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "LINE", value: " ", color: "grey" }),
|
44220
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Line width", target: line, propertyName: "lineWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44221
44379
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
44222
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44223
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44380
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Position 1", icon: positionIcon, lockObject: this.props.lockObject, label: "X", target: line, propertyName: "x1", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44381
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Y", target: line, propertyName: "y1", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
44224
44382
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
44225
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44226
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44227
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
44383
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Position 2", icon: positionIcon, lockObject: this.props.lockObject, label: "X", target: line, propertyName: "x2", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44384
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Y", target: line, propertyName: "y2", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
44385
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Line width", icon: positionIcon, lockObject: this.props.lockObject, label: "", target: line, propertyName: "lineWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44386
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Dash pattern", icon: positionIcon, lockObject: this.props.lockObject, label: "", target: line, value: line.dash.join(","), onChange: function (newValue) { return _this.onDashChange(newValue); } })));
|
44228
44387
|
};
|
44229
44388
|
return LinePropertyGridComponent;
|
44230
44389
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -44275,7 +44434,7 @@ var RadioButtonPropertyGridComponent = /** @class */ (function (_super) {
|
|
44275
44434
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
44276
44435
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Stroke Weight", icon: strokeWeightIcon, lockObject: this.props.lockObject, label: "", target: radioButton, propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44277
44436
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Check Size Ratio", icon: scaleIcon, lockObject: this.props.lockObject, label: "", target: radioButton, propertyName: "checkSizeRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
44278
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44437
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Group", icon: strokeWeightIcon, lockObject: this.props.lockObject, label: "", target: radioButton, propertyName: "group", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44279
44438
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Is Checked", icon: checkboxIcon, label: "", target: radioButton, propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
|
44280
44439
|
};
|
44281
44440
|
return RadioButtonPropertyGridComponent;
|
@@ -44349,14 +44508,18 @@ __webpack_require__.r(__webpack_exports__);
|
|
44349
44508
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
44350
44509
|
/* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
|
44351
44510
|
/* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
|
44352
|
-
/* harmony import */ var
|
44353
|
-
/* harmony import */ var
|
44511
|
+
/* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
|
44512
|
+
/* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
|
44354
44513
|
|
44355
44514
|
|
44356
44515
|
|
44357
44516
|
|
44358
44517
|
|
44359
44518
|
|
44519
|
+
var fillColorIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/fillColorIcon.svg */ "./sharedUiComponents/imgs/fillColorIcon.svg");
|
44520
|
+
var sizeIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/sizeIcon.svg */ "./sharedUiComponents/imgs/sizeIcon.svg");
|
44521
|
+
var conerRadiusIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/conerRadiusIcon.svg */ "./sharedUiComponents/imgs/conerRadiusIcon.svg");
|
44522
|
+
var strokeWeightIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/strokeWeightIcon.svg */ "./sharedUiComponents/imgs/strokeWeightIcon.svg");
|
44360
44523
|
var ScrollViewerPropertyGridComponent = /** @class */ (function (_super) {
|
44361
44524
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ScrollViewerPropertyGridComponent, _super);
|
44362
44525
|
function ScrollViewerPropertyGridComponent(props) {
|
@@ -44367,15 +44530,17 @@ var ScrollViewerPropertyGridComponent = /** @class */ (function (_super) {
|
|
44367
44530
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
|
44368
44531
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: scrollViewer, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44369
44532
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
44370
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
44371
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
44372
|
-
|
44533
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "RECTANGLE", value: " ", color: "grey" }),
|
44534
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
44535
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Stroke Weight", icon: strokeWeightIcon, lockObject: this.props.lockObject, label: "", target: scrollViewer, propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44536
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Corner Radius", icon: conerRadiusIcon, lockObject: this.props.lockObject, label: "", target: scrollViewer, propertyName: "cornerRadius", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
44373
44537
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
44374
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
44375
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
44376
|
-
|
44377
|
-
|
44378
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
44538
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "SCROLLVIEWER", value: " ", color: "grey" }),
|
44539
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
44540
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Wheel precision", icon: sizeIcon, lockObject: this.props.lockObject, label: "", target: scrollViewer, propertyName: "wheelPrecision", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44541
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Bar size", icon: sizeIcon, lockObject: this.props.lockObject, label: "", target: scrollViewer, propertyName: "barSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
44542
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__["Color3LineComponent"], { iconLabel: "Bar color", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: scrollViewer, propertyName: "barColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44543
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__["Color3LineComponent"], { iconLabel: "Bar background", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: scrollViewer, propertyName: "barBackground", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
|
44379
44544
|
};
|
44380
44545
|
return ScrollViewerPropertyGridComponent;
|
44381
44546
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -44402,6 +44567,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
44402
44567
|
/* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
|
44403
44568
|
/* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
|
44404
44569
|
/* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
|
44570
|
+
/* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
|
44405
44571
|
|
44406
44572
|
|
44407
44573
|
|
@@ -44409,6 +44575,13 @@ __webpack_require__.r(__webpack_exports__);
|
|
44409
44575
|
|
44410
44576
|
|
44411
44577
|
|
44578
|
+
|
44579
|
+
var sizeIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/sizeIcon.svg */ "./sharedUiComponents/imgs/sizeIcon.svg");
|
44580
|
+
var scaleIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/scaleIcon.svg */ "./sharedUiComponents/imgs/scaleIcon.svg");
|
44581
|
+
var horizontalMarginIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/horizontalMarginIcon.svg */ "./sharedUiComponents/imgs/horizontalMarginIcon.svg");
|
44582
|
+
var colorIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/colorIcon.svg */ "./sharedUiComponents/imgs/colorIcon.svg");
|
44583
|
+
var vAlignCenterIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/vAlignCenterIcon.svg */ "./sharedUiComponents/imgs/vAlignCenterIcon.svg");
|
44584
|
+
var clipContentsIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/clipContentsIcon.svg */ "./sharedUiComponents/imgs/clipContentsIcon.svg");
|
44412
44585
|
var SliderPropertyGridComponent = /** @class */ (function (_super) {
|
44413
44586
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(SliderPropertyGridComponent, _super);
|
44414
44587
|
function SliderPropertyGridComponent(props) {
|
@@ -44420,16 +44593,16 @@ var SliderPropertyGridComponent = /** @class */ (function (_super) {
|
|
44420
44593
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: slider, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44421
44594
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
44422
44595
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextLineComponent"], { label: "SLIDER", value: " ", color: "grey" }),
|
44423
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
44424
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], {
|
44425
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], {
|
44426
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], {
|
44427
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], {
|
44428
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44429
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44430
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "
|
44431
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "
|
44432
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "
|
44596
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_7__["Color3LineComponent"], { iconLabel: "Border color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "borderColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44597
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Display thumb", icon: clipContentsIcon, label: "", target: slider, propertyName: "displayThumb", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44598
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Thumb circle", icon: clipContentsIcon, label: "", target: slider, propertyName: "isThumbCircle", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44599
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Vertical", icon: vAlignCenterIcon, label: "", target: slider, propertyName: "isVertical", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44600
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Thumb clamped", icon: clipContentsIcon, label: "", target: slider, propertyName: "isThumbClamped", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44601
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { iconLabel: "Bar offset", icon: clipContentsIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "barOffset", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44602
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { iconLabel: "Thumb width", icon: sizeIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "thumbWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44603
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Minimum", icon: scaleIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "minimum", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44604
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Maximum", icon: scaleIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "maximum", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44605
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { iconLabel: "Value", icon: horizontalMarginIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
|
44433
44606
|
};
|
44434
44607
|
return SliderPropertyGridComponent;
|
44435
44608
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -44459,6 +44632,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
44459
44632
|
|
44460
44633
|
|
44461
44634
|
|
44635
|
+
var verticalMarginIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/verticalMarginIcon.svg */ "./sharedUiComponents/imgs/verticalMarginIcon.svg");
|
44636
|
+
var clipContentsIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/clipContentsIcon.svg */ "./sharedUiComponents/imgs/clipContentsIcon.svg");
|
44462
44637
|
var StackPanelPropertyGridComponent = /** @class */ (function (_super) {
|
44463
44638
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(StackPanelPropertyGridComponent, _super);
|
44464
44639
|
function StackPanelPropertyGridComponent(props) {
|
@@ -44470,8 +44645,8 @@ var StackPanelPropertyGridComponent = /** @class */ (function (_super) {
|
|
44470
44645
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: stackPanel, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44471
44646
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
44472
44647
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "STACKPANEL", value: " ", color: "grey" }),
|
44473
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], {
|
44474
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], {
|
44648
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Clip children", icon: clipContentsIcon, label: "", target: stackPanel, propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44649
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Vertical", icon: verticalMarginIcon, label: "", target: stackPanel, propertyName: "isVertical", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
|
44475
44650
|
};
|
44476
44651
|
return StackPanelPropertyGridComponent;
|
44477
44652
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -44501,6 +44676,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
44501
44676
|
/* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
|
44502
44677
|
/* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
|
44503
44678
|
/* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
|
44679
|
+
/* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
|
44504
44680
|
|
44505
44681
|
|
44506
44682
|
|
@@ -44510,6 +44686,10 @@ __webpack_require__.r(__webpack_exports__);
|
|
44510
44686
|
|
44511
44687
|
|
44512
44688
|
|
44689
|
+
|
44690
|
+
var fillColorIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/fillColorIcon.svg */ "./sharedUiComponents/imgs/fillColorIcon.svg");
|
44691
|
+
var fontFamilyIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/fontFamilyIcon.svg */ "./sharedUiComponents/imgs/fontFamilyIcon.svg");
|
44692
|
+
var strokeWeightIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/strokeWeightIcon.svg */ "./sharedUiComponents/imgs/strokeWeightIcon.svg");
|
44513
44693
|
var TextBlockPropertyGridComponent = /** @class */ (function (_super) {
|
44514
44694
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(TextBlockPropertyGridComponent, _super);
|
44515
44695
|
function TextBlockPropertyGridComponent(props) {
|
@@ -44526,14 +44706,14 @@ var TextBlockPropertyGridComponent = /** @class */ (function (_super) {
|
|
44526
44706
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: textBlock, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44527
44707
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
44528
44708
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "TEXTBLOCK", value: " ", color: "grey" }),
|
44529
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44530
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__["CheckBoxLineComponent"], {
|
44531
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__["OptionsLineComponent"], {
|
44532
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "
|
44709
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Text", icon: fontFamilyIcon, lockObject: this.props.lockObject, label: "", target: textBlock, propertyName: "text", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44710
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__["CheckBoxLineComponent"], { iconLabel: "Resize to fit", icon: fontFamilyIcon, label: "", target: textBlock, propertyName: "resizeToFit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44711
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__["OptionsLineComponent"], { iconLabel: "Wrapping", icon: fontFamilyIcon, label: "", options: wrappingOptions, target: textBlock, propertyName: "textWrapping", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44712
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Line spacing", icon: fontFamilyIcon, lockObject: this.props.lockObject, label: "", target: textBlock, propertyName: "lineSpacing", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44533
44713
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
44534
44714
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "OUTLINE", value: " ", color: "grey" }),
|
44535
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "
|
44536
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
44715
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__["FloatLineComponent"], { iconLabel: "Outline width", icon: strokeWeightIcon, lockObject: this.props.lockObject, label: "", target: textBlock, propertyName: "outlineWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
44716
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_9__["Color3LineComponent"], { iconLabel: "Outline color", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: textBlock, propertyName: "outlineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
|
44537
44717
|
};
|
44538
44718
|
return TextBlockPropertyGridComponent;
|
44539
44719
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -44615,6 +44795,10 @@ __webpack_require__.r(__webpack_exports__);
|
|
44615
44795
|
/* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
|
44616
44796
|
/* harmony import */ var _parentingPropertyGridComponent__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../parentingPropertyGridComponent */ "./components/parentingPropertyGridComponent.tsx");
|
44617
44797
|
/* harmony import */ var _propertyGrids_gui_displayGridPropertyGridComponent__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ./propertyGrids/gui/displayGridPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/displayGridPropertyGridComponent.tsx");
|
44798
|
+
/* harmony import */ var _propertyGrids_gui_buttonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./propertyGrids/gui/buttonPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/buttonPropertyGridComponent.tsx");
|
44799
|
+
/* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../../guiNodeTools */ "./guiNodeTools.ts");
|
44800
|
+
|
44801
|
+
|
44618
44802
|
|
44619
44803
|
|
44620
44804
|
|
@@ -44732,13 +44916,17 @@ var PropertyTabComponent = /** @class */ (function (_super) {
|
|
44732
44916
|
adt = this.props.globalState.guiTexture;
|
44733
44917
|
content = JSON.stringify(adt.serializeContent());
|
44734
44918
|
savePromise = ((_a = this.props.globalState.customSave) === null || _a === void 0 ? void 0 : _a.action) || this.saveToSnippetServerHelper;
|
44735
|
-
savePromise(content, adt)
|
44919
|
+
savePromise(content, adt)
|
44920
|
+
.then(function (snippetId) {
|
44736
44921
|
adt.snippetId = snippetId;
|
44737
44922
|
var alertMessage = "GUI saved with ID: " + adt.snippetId;
|
44738
44923
|
if (navigator.clipboard) {
|
44739
|
-
navigator.clipboard
|
44924
|
+
navigator.clipboard
|
44925
|
+
.writeText(adt.snippetId)
|
44926
|
+
.then(function () {
|
44740
44927
|
alert(alertMessage + ". The ID was copied to your clipboard.");
|
44741
|
-
})
|
44928
|
+
})
|
44929
|
+
.catch(function (err) {
|
44742
44930
|
alert(alertMessage);
|
44743
44931
|
});
|
44744
44932
|
}
|
@@ -44746,7 +44934,8 @@ var PropertyTabComponent = /** @class */ (function (_super) {
|
|
44746
44934
|
alert(alertMessage);
|
44747
44935
|
}
|
44748
44936
|
_this.props.globalState.onBuiltObservable.notifyObservers();
|
44749
|
-
})
|
44937
|
+
})
|
44938
|
+
.catch(function (err) {
|
44750
44939
|
alert(err);
|
44751
44940
|
});
|
44752
44941
|
this.forceUpdate();
|
@@ -44821,20 +45010,21 @@ var PropertyTabComponent = /** @class */ (function (_super) {
|
|
44821
45010
|
this.props.globalState.workbench.loadFromSnippet(snippedId);
|
44822
45011
|
};
|
44823
45012
|
PropertyTabComponent.prototype.renderProperties = function () {
|
45013
|
+
var _this = this;
|
44824
45014
|
var _a;
|
44825
45015
|
var className = (_a = this.state.currentNode) === null || _a === void 0 ? void 0 : _a.getClassName();
|
44826
45016
|
switch (className) {
|
44827
45017
|
case "TextBlock": {
|
44828
45018
|
var textBlock = this.state.currentNode;
|
44829
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_textBlockPropertyGridComponent__WEBPACK_IMPORTED_MODULE_12__["TextBlockPropertyGridComponent"], { textBlock: textBlock, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45019
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_textBlockPropertyGridComponent__WEBPACK_IMPORTED_MODULE_12__["TextBlockPropertyGridComponent"], { textBlock: textBlock, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44830
45020
|
}
|
44831
45021
|
case "InputText": {
|
44832
45022
|
var inputText = this.state.currentNode;
|
44833
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_inputTextPropertyGridComponent__WEBPACK_IMPORTED_MODULE_13__["InputTextPropertyGridComponent"], { inputText: inputText, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45023
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_inputTextPropertyGridComponent__WEBPACK_IMPORTED_MODULE_13__["InputTextPropertyGridComponent"], { inputText: inputText, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44834
45024
|
}
|
44835
45025
|
case "ColorPicker": {
|
44836
45026
|
var colorPicker = this.state.currentNode;
|
44837
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_colorPickerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_14__["ColorPickerPropertyGridComponent"], { colorPicker: colorPicker, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45027
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_colorPickerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_14__["ColorPickerPropertyGridComponent"], { colorPicker: colorPicker, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44838
45028
|
}
|
44839
45029
|
case "Image": {
|
44840
45030
|
var image = this.state.currentNode;
|
@@ -44842,19 +45032,19 @@ var PropertyTabComponent = /** @class */ (function (_super) {
|
|
44842
45032
|
}
|
44843
45033
|
case "Slider": {
|
44844
45034
|
var slider = this.state.currentNode;
|
44845
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_9__["SliderPropertyGridComponent"], { slider: slider, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45035
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_9__["SliderPropertyGridComponent"], { slider: slider, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44846
45036
|
}
|
44847
45037
|
case "ImageBasedSlider": {
|
44848
45038
|
var imageBasedSlider = this.state.currentNode;
|
44849
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_imageBasedSliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_16__["ImageBasedSliderPropertyGridComponent"], { imageBasedSlider: imageBasedSlider, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45039
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_imageBasedSliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_16__["ImageBasedSliderPropertyGridComponent"], { imageBasedSlider: imageBasedSlider, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44850
45040
|
}
|
44851
45041
|
case "Rectangle": {
|
44852
45042
|
var rectangle = this.state.currentNode;
|
44853
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_rectanglePropertyGridComponent__WEBPACK_IMPORTED_MODULE_17__["RectanglePropertyGridComponent"], { rectangle: rectangle, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45043
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_rectanglePropertyGridComponent__WEBPACK_IMPORTED_MODULE_17__["RectanglePropertyGridComponent"], { rectangle: rectangle, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44854
45044
|
}
|
44855
45045
|
case "StackPanel": {
|
44856
45046
|
var stackPanel = this.state.currentNode;
|
44857
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_stackPanelPropertyGridComponent__WEBPACK_IMPORTED_MODULE_18__["StackPanelPropertyGridComponent"], { stackPanel: stackPanel, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45047
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_stackPanelPropertyGridComponent__WEBPACK_IMPORTED_MODULE_18__["StackPanelPropertyGridComponent"], { stackPanel: stackPanel, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44858
45048
|
}
|
44859
45049
|
case "Grid": {
|
44860
45050
|
var grid = this.state.currentNode;
|
@@ -44862,19 +45052,19 @@ var PropertyTabComponent = /** @class */ (function (_super) {
|
|
44862
45052
|
}
|
44863
45053
|
case "ScrollViewer": {
|
44864
45054
|
var scrollViewer = this.state.currentNode;
|
44865
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_scrollViewerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_20__["ScrollViewerPropertyGridComponent"], { scrollViewer: scrollViewer, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45055
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_scrollViewerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_20__["ScrollViewerPropertyGridComponent"], { scrollViewer: scrollViewer, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44866
45056
|
}
|
44867
45057
|
case "Ellipse": {
|
44868
45058
|
var ellipse = this.state.currentNode;
|
44869
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_ellipsePropertyGridComponent__WEBPACK_IMPORTED_MODULE_21__["EllipsePropertyGridComponent"], { ellipse: ellipse, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45059
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_ellipsePropertyGridComponent__WEBPACK_IMPORTED_MODULE_21__["EllipsePropertyGridComponent"], { ellipse: ellipse, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44870
45060
|
}
|
44871
45061
|
case "Checkbox": {
|
44872
45062
|
var checkbox = this.state.currentNode;
|
44873
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_checkboxPropertyGridComponent__WEBPACK_IMPORTED_MODULE_22__["CheckboxPropertyGridComponent"], { checkbox: checkbox, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45063
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_checkboxPropertyGridComponent__WEBPACK_IMPORTED_MODULE_22__["CheckboxPropertyGridComponent"], { checkbox: checkbox, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44874
45064
|
}
|
44875
45065
|
case "RadioButton": {
|
44876
45066
|
var radioButton = this.state.currentNode;
|
44877
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_radioButtonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_11__["RadioButtonPropertyGridComponent"], { radioButton: radioButton, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45067
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_radioButtonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_11__["RadioButtonPropertyGridComponent"], { radioButton: radioButton, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44878
45068
|
}
|
44879
45069
|
case "Line": {
|
44880
45070
|
var line = this.state.currentNode;
|
@@ -44882,16 +45072,21 @@ var PropertyTabComponent = /** @class */ (function (_super) {
|
|
44882
45072
|
}
|
44883
45073
|
case "DisplayGrid": {
|
44884
45074
|
var displayGrid = this.state.currentNode;
|
44885
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_displayGridPropertyGridComponent__WEBPACK_IMPORTED_MODULE_30__["DisplayGridPropertyGridComponent"], { displayGrid: displayGrid, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45075
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_displayGridPropertyGridComponent__WEBPACK_IMPORTED_MODULE_30__["DisplayGridPropertyGridComponent"], { displayGrid: displayGrid, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44886
45076
|
}
|
44887
45077
|
case "Button": {
|
44888
|
-
var
|
44889
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
45078
|
+
var button_1 = this.state.currentNode;
|
45079
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_buttonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_31__["ButtonPropertyGridComponent"], { key: "buttonMenu", rectangle: button_1, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, onAddComponent: function (value) {
|
45080
|
+
var guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_32__["GUINodeTools"].CreateControlFromString(value);
|
45081
|
+
var newGuiNode = _this.props.globalState.workbench.createNewGuiNode(guiElement);
|
45082
|
+
button_1.addControl(newGuiNode);
|
45083
|
+
_this.props.globalState.onSelectionChangedObservable.notifyObservers(newGuiNode);
|
45084
|
+
} }));
|
44890
45085
|
}
|
44891
45086
|
}
|
44892
45087
|
if (className !== "") {
|
44893
45088
|
var control = this.state.currentNode;
|
44894
|
-
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_controlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_24__["ControlPropertyGridComponent"], { control: control, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
|
45089
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_controlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_24__["ControlPropertyGridComponent"], { control: control, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
|
44895
45090
|
}
|
44896
45091
|
return null;
|
44897
45092
|
};
|
@@ -45000,21 +45195,19 @@ var PropertyTabComponent = /** @class */ (function (_super) {
|
|
45000
45195
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "title" },
|
45001
45196
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_28__["TextInputLineComponent"], { noUnderline: true, lockObject: this._lockObject, label: "", target: this.state.currentNode, propertyName: "name", onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }))),
|
45002
45197
|
this.renderProperties(),
|
45003
|
-
((_b = (_a = this.state.currentNode) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.typeName) === "Grid" &&
|
45004
|
-
|
45005
|
-
|
45006
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
45007
|
-
|
45008
|
-
|
45009
|
-
|
45010
|
-
|
45011
|
-
|
45012
|
-
|
45013
|
-
|
45014
|
-
|
45015
|
-
|
45016
|
-
}
|
45017
|
-
} }))));
|
45198
|
+
((_b = (_a = this.state.currentNode) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.typeName) === "Grid" && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_parentingPropertyGridComponent__WEBPACK_IMPORTED_MODULE_29__["ParentingPropertyGridComponent"], { control: this.state.currentNode, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, lockObject: this._lockObject })),
|
45199
|
+
this.state.currentNode !== this.props.globalState.guiTexture.getChildren()[0] && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
45200
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
|
45201
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: "DELETE ELEMENT", onClick: function () {
|
45202
|
+
var _a;
|
45203
|
+
(_a = _this.state.currentNode) === null || _a === void 0 ? void 0 : _a.dispose();
|
45204
|
+
_this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
|
45205
|
+
} }),
|
45206
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: "COPY ELEMENT", onClick: function () {
|
45207
|
+
if (_this.state.currentNode) {
|
45208
|
+
_this.props.globalState.workbench.CopyGUIControl(_this.state.currentNode);
|
45209
|
+
}
|
45210
|
+
} })))));
|
45018
45211
|
}
|
45019
45212
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "ge-propertyTab" },
|
45020
45213
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "header" },
|
@@ -45022,8 +45215,7 @@ var PropertyTabComponent = /** @class */ (function (_super) {
|
|
45022
45215
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "title" }, "AdvancedDynamicTexture")),
|
45023
45216
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
|
45024
45217
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextLineComponent"], { tooltip: "", label: "ART BOARD", value: " ", color: "grey" }),
|
45025
|
-
this.props.globalState.workbench._scene !== undefined &&
|
45026
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_27__["Color3LineComponent"], { iconLabel: "Background Color", lockObject: this._lockObject, icon: artboardColorIcon, label: "", target: this.props.globalState.workbench._scene, propertyName: "clearColor", onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }),
|
45218
|
+
this.props.globalState.workbench._scene !== undefined && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_27__["Color3LineComponent"], { iconLabel: "Background Color", lockObject: this._lockObject, icon: artboardColorIcon, label: "", target: this.props.globalState.workbench._scene, propertyName: "clearColor", onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable })),
|
45027
45219
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
|
45028
45220
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextLineComponent"], { tooltip: "", label: "CANVAS", value: " ", color: "grey" }),
|
45029
45221
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { label: "RESPONSIVE", iconLabel: "A responsive layout for the AdvancedDynamicTexture will resize the UI layout and reflow controls to accommodate different device screen sizes", icon: responsiveIcon, isSelected: function () { return _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["DataStorage"].ReadBoolean("Responsive", true); }, onSelect: function (value) {
|
@@ -45036,27 +45228,25 @@ var PropertyTabComponent = /** @class */ (function (_super) {
|
|
45036
45228
|
}
|
45037
45229
|
_this.forceUpdate();
|
45038
45230
|
} }),
|
45039
|
-
_babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["DataStorage"].ReadBoolean("Responsive", true) &&
|
45040
|
-
|
45041
|
-
|
45042
|
-
|
45043
|
-
|
45044
|
-
|
45231
|
+
_babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["DataStorage"].ReadBoolean("Responsive", true) && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_25__["OptionsLineComponent"], { label: "", iconLabel: "Size", options: _sizeOptions, icon: canvasSizeIcon, target: this, propertyName: "_sizeOption", noDirectUpdate: true, onSelect: function (value) {
|
45232
|
+
_this._sizeOption = value;
|
45233
|
+
if (_this._sizeOption !== _sizeOptions.length) {
|
45234
|
+
var newSize = _sizeValues[_this._sizeOption];
|
45235
|
+
_this.props.globalState.workbench.resizeGuiTexture(newSize);
|
45236
|
+
}
|
45237
|
+
_this.forceUpdate();
|
45238
|
+
} })),
|
45239
|
+
!_babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["DataStorage"].ReadBoolean("Responsive", true) && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
45240
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_26__["FloatLineComponent"], { icon: canvasSizeIcon, iconLabel: "Canvas Size", label: "W", target: textureSize, propertyName: "x", isInteger: true, min: 1, max: MAX_TEXTURE_SIZE, onChange: function (newvalue) {
|
45241
|
+
if (!isNaN(newvalue)) {
|
45242
|
+
_this.props.globalState.workbench.resizeGuiTexture(new _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["Vector2"](newvalue, textureSize.y));
|
45045
45243
|
}
|
45046
|
-
_this.forceUpdate();
|
45047
45244
|
} }),
|
45048
|
-
|
45049
|
-
|
45050
|
-
|
45051
|
-
|
45052
|
-
|
45053
|
-
}
|
45054
|
-
} }),
|
45055
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_26__["FloatLineComponent"], { icon: canvasSizeIcon, label: "H", target: textureSize, propertyName: "y", isInteger: true, min: 1, max: MAX_TEXTURE_SIZE, onChange: function (newvalue) {
|
45056
|
-
if (!isNaN(newvalue)) {
|
45057
|
-
_this.props.globalState.workbench.resizeGuiTexture(new _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["Vector2"](textureSize.x, newvalue));
|
45058
|
-
}
|
45059
|
-
} })),
|
45245
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_26__["FloatLineComponent"], { icon: canvasSizeIcon, label: "H", target: textureSize, propertyName: "y", isInteger: true, min: 1, max: MAX_TEXTURE_SIZE, onChange: function (newvalue) {
|
45246
|
+
if (!isNaN(newvalue)) {
|
45247
|
+
_this.props.globalState.workbench.resizeGuiTexture(new _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["Vector2"](textureSize.x, newvalue));
|
45248
|
+
}
|
45249
|
+
} }))),
|
45060
45250
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
|
45061
45251
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextLineComponent"], { tooltip: "", label: "FILE", value: " ", color: "grey" }),
|
45062
45252
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_3__["FileButtonLineComponent"], { label: "Load", onClick: function (file) { return _this.load(file); }, accept: ".json" }),
|
@@ -45093,6 +45283,9 @@ __webpack_require__.r(__webpack_exports__);
|
|
45093
45283
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
|
45094
45284
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
|
45095
45285
|
/* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../globalState */ "./globalState.ts");
|
45286
|
+
/* harmony import */ var _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/container */ "@babylonjs/gui/2D/controls/button");
|
45287
|
+
/* harmony import */ var _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5__);
|
45288
|
+
|
45096
45289
|
|
45097
45290
|
|
45098
45291
|
|
@@ -45131,14 +45324,14 @@ var ControlTreeItemComponent = /** @class */ (function (_super) {
|
|
45131
45324
|
var draggingSelf = this.props.globalState.draggedControl === control;
|
45132
45325
|
return (react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "controlTools" },
|
45133
45326
|
react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_treeItemLabelComponent__WEBPACK_IMPORTED_MODULE_1__["TreeItemLabelComponent"], { label: name, onClick: function () { return _this.props.onClick(); }, color: "greenyellow" }),
|
45134
|
-
|
45327
|
+
!draggingSelf && this.props.dragOverHover && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].CENTER && control instanceof _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5__["Container"] && (react__WEBPACK_IMPORTED_MODULE_3__["createElement"](react__WEBPACK_IMPORTED_MODULE_3__["Fragment"], null,
|
45135
45328
|
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "makeChild icon", onClick: function () { return _this.highlight(); }, title: "Make Child" },
|
45136
|
-
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("img", { src: makeChildOfContainerIcon }))),
|
45137
|
-
|
45329
|
+
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("img", { src: makeChildOfContainerIcon })))),
|
45330
|
+
this.props.isHovered && this.props.globalState.draggedControl === null && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].NONE && (react__WEBPACK_IMPORTED_MODULE_3__["createElement"](react__WEBPACK_IMPORTED_MODULE_3__["Fragment"], null,
|
45138
45331
|
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "addComponent icon", onClick: function () { return _this.highlight(); }, title: "Add component (Not Implemented)" },
|
45139
45332
|
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("img", { src: makeComponentIcon })),
|
45140
45333
|
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "visibility icon", onClick: function () { return _this.switchVisibility(); }, title: "Show/Hide control" },
|
45141
|
-
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("img", { src: this.state.isVisible ? visibilityActiveIcon : visibilityNotActiveIcon }))),
|
45334
|
+
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("img", { src: this.state.isVisible ? visibilityActiveIcon : visibilityNotActiveIcon })))),
|
45142
45335
|
react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_extensionsComponent__WEBPACK_IMPORTED_MODULE_2__["ExtensionsComponent"], { target: control, extensibilityGroups: this.props.extensibilityGroups })));
|
45143
45336
|
};
|
45144
45337
|
return ControlTreeItemComponent;
|
@@ -45208,7 +45401,9 @@ var ExtensionsComponent = /** @class */ (function (_super) {
|
|
45208
45401
|
return (react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { ref: this.extensionRef, className: "extensions", onClick: function () { return _this.showPopup(); } },
|
45209
45402
|
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { title: "Additional options", className: "icon" },
|
45210
45403
|
react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_1__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_2__["faEllipsisH"] })),
|
45211
|
-
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { ref: function (input) {
|
45404
|
+
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { ref: function (input) {
|
45405
|
+
_this._popup = input;
|
45406
|
+
}, tabIndex: -1, className: this.state.popupVisible ? "popup show" : "popup", onBlur: function () { return _this.setState({ popupVisible: false }); } }, options.map(function (extensibility) {
|
45212
45407
|
return (react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { key: extensibility.label, className: "popupMenu", onClick: function () { return extensibility.action(_this.props.target); } }, extensibility.label));
|
45213
45408
|
}))));
|
45214
45409
|
};
|
@@ -45293,9 +45488,7 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
|
|
45293
45488
|
});
|
45294
45489
|
});
|
45295
45490
|
_this._onPropertyChangedObservable = _this.props.globalState.onPropertyChangedObservable.add(function (event) {
|
45296
|
-
if (event.property === "name" ||
|
45297
|
-
event.property === "_columnNumber" ||
|
45298
|
-
event.property === "_rowNumber") {
|
45491
|
+
if (event.property === "name" || event.property === "_columnNumber" || event.property === "_rowNumber") {
|
45299
45492
|
_this.forceUpdate();
|
45300
45493
|
}
|
45301
45494
|
});
|
@@ -45438,7 +45631,7 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
|
|
45438
45631
|
else {
|
45439
45632
|
_this.props.globalState.selectionLock = false;
|
45440
45633
|
}
|
45441
|
-
} }, guiElements && guiElements.length > 0 && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_treeItemComponent__WEBPACK_IMPORTED_MODULE_2__["TreeItemComponent"], { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, selectedEntity: this.state.selectedEntity, items: guiElements, label: "GUI", offset: 1, filter: this.state.filter })));
|
45634
|
+
} }, guiElements && guiElements.length > 0 && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_treeItemComponent__WEBPACK_IMPORTED_MODULE_2__["TreeItemComponent"], { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, selectedEntity: this.state.selectedEntity, items: guiElements, label: "GUI", offset: 1, filter: this.state.filter }))));
|
45442
45635
|
};
|
45443
45636
|
SceneExplorerComponent.prototype.onClose = function () {
|
45444
45637
|
if (!this.props.onClose) {
|
@@ -45567,7 +45760,7 @@ var TreeItemComponent = /** @class */ (function (_super) {
|
|
45567
45760
|
var _this = this;
|
45568
45761
|
var items = this.props.items;
|
45569
45762
|
var marginStyle = {
|
45570
|
-
paddingLeft:
|
45763
|
+
paddingLeft: 10 * (this.props.offset + 0.5) + "px",
|
45571
45764
|
};
|
45572
45765
|
if (!items) {
|
45573
45766
|
if (this.props.forceSubitems) {
|
@@ -45659,6 +45852,9 @@ __webpack_require__.r(__webpack_exports__);
|
|
45659
45852
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
|
45660
45853
|
/* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../globalState */ "./globalState.ts");
|
45661
45854
|
/* harmony import */ var _entities_gui_controlTreeItemComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./entities/gui/controlTreeItemComponent */ "./components/sceneExplorer/entities/gui/controlTreeItemComponent.tsx");
|
45855
|
+
/* harmony import */ var _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/container */ "@babylonjs/gui/2D/controls/button");
|
45856
|
+
/* harmony import */ var _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6__);
|
45857
|
+
|
45662
45858
|
|
45663
45859
|
|
45664
45860
|
|
@@ -45725,24 +45921,24 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
|
|
45725
45921
|
TreeItemSelectableComponent.prototype.renderChildren = function (isExpanded) {
|
45726
45922
|
var _this = this;
|
45727
45923
|
var entity = this.props.entity;
|
45728
|
-
if (!entity.getChildren && !entity.children || !isExpanded) {
|
45924
|
+
if ((!entity.getChildren && !entity.children) || !isExpanded) {
|
45729
45925
|
return null;
|
45730
45926
|
}
|
45731
45927
|
var children = _tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SortAndFilter(entity, entity.getChildren ? entity.getChildren() : entity.children);
|
45732
45928
|
if (entity.typeName === "StackPanel" || entity.typeName === "VirtualKeyboard") {
|
45733
45929
|
children.reverse();
|
45734
45930
|
}
|
45735
|
-
return
|
45931
|
+
return children.map(function (item, i) {
|
45736
45932
|
if (item.name == "Art-Board-Background") {
|
45737
|
-
return
|
45933
|
+
return null;
|
45738
45934
|
}
|
45739
45935
|
return (react__WEBPACK_IMPORTED_MODULE_3__["createElement"](TreeItemSelectableComponent, { globalState: _this.props.globalState, mustExpand: _this.props.mustExpand, extensibilityGroups: _this.props.extensibilityGroups, selectedEntity: _this.props.selectedEntity, key: i, offset: _this.props.offset + 2, entity: item, filter: _this.props.filter }));
|
45740
|
-
})
|
45936
|
+
});
|
45741
45937
|
};
|
45742
45938
|
TreeItemSelectableComponent.prototype.render = function () {
|
45743
45939
|
var _this = this;
|
45744
45940
|
var marginStyle = {
|
45745
|
-
paddingLeft:
|
45941
|
+
paddingLeft: 10 * (this.props.offset + 0.5) - 20 + "px",
|
45746
45942
|
};
|
45747
45943
|
var entity = this.props.entity;
|
45748
45944
|
if (!entity.reservedDataStore) {
|
@@ -45772,12 +45968,16 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
|
|
45772
45968
|
var className = "itemContainer"; //setting class name plus whatever extras based on states
|
45773
45969
|
className += this.state.isSelected && this.props.globalState.draggedControl === null ? " selected" : "";
|
45774
45970
|
className += this.state.isHovered && this.props.globalState.draggedControl === null ? " hover" : "";
|
45775
|
-
className += this.dragOverHover && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].CENTER &&
|
45971
|
+
className += this.dragOverHover && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].CENTER && entity instanceof _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6__["Container"] ? " parent" : "";
|
45776
45972
|
className += this.props.globalState.draggedControl === this.props.entity ? " dragged" : "";
|
45777
|
-
className +=
|
45778
|
-
|
45973
|
+
className +=
|
45974
|
+
this.dragOverHover && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].ABOVE && this.props.globalState.draggedControl != null && entity.parent ? " seAbove" : "";
|
45975
|
+
className +=
|
45976
|
+
this.dragOverHover && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].BELOW && this.props.globalState.draggedControl != null && entity.parent ? " seBelow" : "";
|
45779
45977
|
return (react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", null,
|
45780
|
-
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: className, style: marginStyle, draggable: entity.parent ? true : false, onMouseOver: function () { return _this.setState({ isHovered: true }); }, onMouseLeave: function () { return _this.setState({ isHovered: false }); }, onClick: function () {
|
45978
|
+
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: className, style: marginStyle, draggable: entity.parent ? true : false, onMouseOver: function () { return _this.setState({ isHovered: true }); }, onMouseLeave: function () { return _this.setState({ isHovered: false }); }, onClick: function () {
|
45979
|
+
_this.onSelect();
|
45980
|
+
}, onDragStart: function (event) {
|
45781
45981
|
_this.props.globalState.draggedControl = entity;
|
45782
45982
|
_this.props.globalState.onDraggingStartObservable.notifyObservers();
|
45783
45983
|
}, onDrop: function (event) {
|
@@ -45790,8 +45990,7 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
|
|
45790
45990
|
_this.dragOverHover = false;
|
45791
45991
|
_this.forceUpdate();
|
45792
45992
|
} },
|
45793
|
-
hasChildren &&
|
45794
|
-
react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "arrow icon", onClick: function () { return _this.switchExpandedState(); } }, chevron),
|
45993
|
+
hasChildren && (react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "arrow icon", onClick: function () { return _this.switchExpandedState(); } }, chevron)),
|
45795
45994
|
react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_entities_gui_controlTreeItemComponent__WEBPACK_IMPORTED_MODULE_5__["ControlTreeItemComponent"], { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, control: entity, onClick: function () { }, isHovered: this.state.isHovered, dragOverHover: this.dragOverHover, dragOverLocation: this.state.dragOverLocation })),
|
45796
45995
|
this.renderChildren(isExpanded)));
|
45797
45996
|
};
|
@@ -45800,11 +45999,12 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
|
|
45800
45999
|
var target = event.target;
|
45801
46000
|
var rect = target.getBoundingClientRect();
|
45802
46001
|
var y = event.clientY - rect.top;
|
45803
|
-
if (this.props.
|
45804
|
-
if (y < CONTROL_HEIGHT / 3) {
|
46002
|
+
if (this.props.entity instanceof _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6__["Container"]) {
|
46003
|
+
if (y < CONTROL_HEIGHT / 3) {
|
46004
|
+
//split in thirds
|
45805
46005
|
this.setState({ dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].ABOVE });
|
45806
46006
|
}
|
45807
|
-
else if (y > (2 * CONTROL_HEIGHT / 3)
|
46007
|
+
else if (y > (2 * CONTROL_HEIGHT) / 3) {
|
45808
46008
|
this.setState({ dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].BELOW });
|
45809
46009
|
}
|
45810
46010
|
else {
|
@@ -45812,7 +46012,8 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
|
|
45812
46012
|
}
|
45813
46013
|
}
|
45814
46014
|
else {
|
45815
|
-
if (y < CONTROL_HEIGHT / 2) {
|
46015
|
+
if (y < CONTROL_HEIGHT / 2) {
|
46016
|
+
//split in half
|
45816
46017
|
this.setState({ dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].ABOVE });
|
45817
46018
|
}
|
45818
46019
|
else {
|
@@ -45879,6 +46080,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
45879
46080
|
|
45880
46081
|
|
45881
46082
|
|
46083
|
+
|
46084
|
+
|
45882
46085
|
|
45883
46086
|
|
45884
46087
|
__webpack_require__(/*! ./workbenchCanvas.scss */ "./diagram/workbenchCanvas.scss");
|
@@ -45940,7 +46143,8 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
45940
46143
|
_this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
|
45941
46144
|
var index_1 = 0;
|
45942
46145
|
_this.nodes.forEach(function (node) {
|
45943
|
-
if (index_1++) {
|
46146
|
+
if (index_1++) {
|
46147
|
+
//skip the first node, the background
|
45944
46148
|
_this.selectAllGUI(node);
|
45945
46149
|
}
|
45946
46150
|
});
|
@@ -46103,7 +46307,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46103
46307
|
WorkbenchComponent.prototype.updateHitTest = function (guiControl, value) {
|
46104
46308
|
var _this = this;
|
46105
46309
|
guiControl.isHitTestVisible = value;
|
46106
|
-
if (
|
46310
|
+
if (guiControl instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
|
46107
46311
|
guiControl.children.forEach(function (child) {
|
46108
46312
|
_this.updateHitTest(child, value);
|
46109
46313
|
});
|
@@ -46119,14 +46323,15 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46119
46323
|
WorkbenchComponent.prototype.setCameraRadius = function () {
|
46120
46324
|
var size = this.props.globalState.guiTexture.getSize();
|
46121
46325
|
this._cameraRadias = size.width > size.height ? size.width : size.height;
|
46122
|
-
this._cameraRadias += this._cameraRadias -
|
46326
|
+
this._cameraRadias += this._cameraRadias - this._cameraRadias / 1.5;
|
46123
46327
|
};
|
46124
46328
|
WorkbenchComponent.prototype.copyToClipboard = function () {
|
46125
46329
|
var _this = this;
|
46126
46330
|
if (this._selectAll) {
|
46127
46331
|
var index_2 = 0;
|
46128
46332
|
this.nodes.forEach(function (node) {
|
46129
|
-
if (index_2++) {
|
46333
|
+
if (index_2++) {
|
46334
|
+
//skip the first node, the background
|
46130
46335
|
_this._clipboard.push(node);
|
46131
46336
|
}
|
46132
46337
|
});
|
@@ -46146,7 +46351,8 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46146
46351
|
var serializationObject = {};
|
46147
46352
|
original.serialize(serializationObject);
|
46148
46353
|
var newControl = _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].Parse(serializationObject, this.props.globalState.guiTexture);
|
46149
|
-
if (newControl) {
|
46354
|
+
if (newControl) {
|
46355
|
+
//insert the new control into the adt or parent container
|
46150
46356
|
this.props.globalState.workbench.appendBlock(newControl);
|
46151
46357
|
this.props.globalState.guiTexture.removeControl(newControl);
|
46152
46358
|
if (((_a = original.parent) === null || _a === void 0 ? void 0 : _a.typeName) === "Grid") {
|
@@ -46157,9 +46363,9 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46157
46363
|
(_b = original.parent) === null || _b === void 0 ? void 0 : _b.addControl(newControl);
|
46158
46364
|
}
|
46159
46365
|
var index_3 = 1;
|
46160
|
-
while (this.props.globalState.guiTexture.getDescendants(false).filter(
|
46161
|
-
|
46162
|
-
control) { return control.name === newControl.name + " Copy " + index_3; }).length) {
|
46366
|
+
while (this.props.globalState.guiTexture.getDescendants(false).filter(
|
46367
|
+
//search if there are any copies
|
46368
|
+
function (control) { return control.name === newControl.name + " Copy " + index_3; }).length) {
|
46163
46369
|
index_3++;
|
46164
46370
|
}
|
46165
46371
|
newControl.name = newControl.name + " Copy " + index_3;
|
@@ -46169,7 +46375,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46169
46375
|
WorkbenchComponent.prototype.selectAllGUI = function (node) {
|
46170
46376
|
var _this = this;
|
46171
46377
|
this.globalState.onSelectionChangedObservable.notifyObservers(node);
|
46172
|
-
if (
|
46378
|
+
if (node instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
|
46173
46379
|
node.children.forEach(function (child) {
|
46174
46380
|
_this.selectAllGUI(child);
|
46175
46381
|
});
|
@@ -46258,21 +46464,6 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46258
46464
|
this.globalState.guiTexture.addControl(guiElement);
|
46259
46465
|
return newGuiNode;
|
46260
46466
|
};
|
46261
|
-
WorkbenchComponent.prototype.isContainer = function (guiControl) {
|
46262
|
-
switch (guiControl.typeName) {
|
46263
|
-
case "Button":
|
46264
|
-
case "StackPanel":
|
46265
|
-
case "Rectangle":
|
46266
|
-
case "Ellipse":
|
46267
|
-
case "Grid":
|
46268
|
-
case "ScrollViewer":
|
46269
|
-
case "Container":
|
46270
|
-
case "VirtualKeyboard":
|
46271
|
-
return true;
|
46272
|
-
default:
|
46273
|
-
return false;
|
46274
|
-
}
|
46275
|
-
};
|
46276
46467
|
WorkbenchComponent.prototype.createNewGuiNode = function (guiControl) {
|
46277
46468
|
var _this = this;
|
46278
46469
|
guiControl.highlightLineWidth = 5;
|
@@ -46304,7 +46495,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46304
46495
|
_this._isOverGUINode.splice(index, 1);
|
46305
46496
|
}
|
46306
46497
|
});
|
46307
|
-
if (
|
46498
|
+
if (guiControl instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
|
46308
46499
|
guiControl.children.forEach(function (child) {
|
46309
46500
|
_this.createNewGuiNode(child);
|
46310
46501
|
});
|
@@ -46317,9 +46508,11 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46317
46508
|
var draggedControl = this.props.globalState.draggedControl;
|
46318
46509
|
var draggedControlParent = draggedControl === null || draggedControl === void 0 ? void 0 : draggedControl.parent;
|
46319
46510
|
if (draggedControlParent && draggedControl) {
|
46320
|
-
if (this._isNotChildInsert(dropLocationControl, draggedControl)) {
|
46321
|
-
|
46322
|
-
|
46511
|
+
if (this._isNotChildInsert(dropLocationControl, draggedControl)) {
|
46512
|
+
//checking to make sure the element is not being inserted into a child
|
46513
|
+
if (dropLocationControl != null) {
|
46514
|
+
//the control you are dragging onto top
|
46515
|
+
if (dropLocationControl instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"] && //dropping inside a contrainer control
|
46323
46516
|
this.props.globalState.draggedControlDirection === _globalState__WEBPACK_IMPORTED_MODULE_2__["DragOverLocation"].CENTER) {
|
46324
46517
|
draggedControlParent.removeControl(draggedControl);
|
46325
46518
|
dropLocationControl.addControl(draggedControl);
|
@@ -46328,7 +46521,8 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46328
46521
|
this._convertToPixels(draggedControl, dropLocationControl);
|
46329
46522
|
}
|
46330
46523
|
}
|
46331
|
-
else if (dropLocationControl.parent) {
|
46524
|
+
else if (dropLocationControl.parent) {
|
46525
|
+
//dropping inside the controls parent container
|
46332
46526
|
if (dropLocationControl.parent.typeName != "Grid") {
|
46333
46527
|
draggedControlParent.removeControl(draggedControl);
|
46334
46528
|
var index = dropLocationControl.parent.children.indexOf(dropLocationControl);
|
@@ -46340,7 +46534,8 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46340
46534
|
this._convertToPixels(draggedControl, draggedControl.parent);
|
46341
46535
|
}
|
46342
46536
|
}
|
46343
|
-
else if (dropLocationControl.parent === draggedControlParent) {
|
46537
|
+
else if (dropLocationControl.parent === draggedControlParent) {
|
46538
|
+
//special case for grid
|
46344
46539
|
this._reorderGrid(dropLocationControl.parent, draggedControl, dropLocationControl);
|
46345
46540
|
}
|
46346
46541
|
else {
|
@@ -46434,8 +46629,8 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46434
46629
|
guiControl.topInPixels += newY;
|
46435
46630
|
//convert to percentage
|
46436
46631
|
if (this._responsive) {
|
46437
|
-
var ratioX =
|
46438
|
-
var ratioY =
|
46632
|
+
var ratioX = this._textureMesh.scaling.x;
|
46633
|
+
var ratioY = this._textureMesh.scaling.z;
|
46439
46634
|
if (guiControl.parent) {
|
46440
46635
|
if (guiControl.parent.typeName === "Grid") {
|
46441
46636
|
var cellInfo = guiControl.parent.getChildCellInfo(guiControl);
|
@@ -46474,8 +46669,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46474
46669
|
var selected_1 = false;
|
46475
46670
|
this.selectedGuiNodes.forEach(function (element) {
|
46476
46671
|
if (pos) {
|
46477
|
-
selected_1 =
|
46478
|
-
_this._onMove(element, new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Vector2"](pos.x, -pos.z), new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Vector2"](x, y), false) || selected_1;
|
46672
|
+
selected_1 = _this._onMove(element, new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Vector2"](pos.x, -pos.z), new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Vector2"](x, y), false) || selected_1;
|
46479
46673
|
}
|
46480
46674
|
});
|
46481
46675
|
this._mouseStartPointX = pos ? pos.x : this._mouseStartPointX;
|
@@ -46496,7 +46690,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46496
46690
|
WorkbenchComponent.prototype.onDown = function (evt) {
|
46497
46691
|
var _a;
|
46498
46692
|
(_a = this._rootContainer.current) === null || _a === void 0 ? void 0 : _a.setPointerCapture(evt.pointerId);
|
46499
|
-
if (
|
46693
|
+
if (this._isOverGUINode.length === 0 && !evt.button) {
|
46500
46694
|
if (this._forceSelecting) {
|
46501
46695
|
this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
|
46502
46696
|
}
|
@@ -46520,46 +46714,66 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
46520
46714
|
this.isUp = true;
|
46521
46715
|
};
|
46522
46716
|
WorkbenchComponent.prototype.createGUICanvas = function () {
|
46523
|
-
|
46524
|
-
|
46525
|
-
|
46526
|
-
|
46527
|
-
|
46528
|
-
|
46529
|
-
|
46530
|
-
|
46531
|
-
|
46532
|
-
|
46533
|
-
|
46534
|
-
|
46535
|
-
|
46536
|
-
|
46537
|
-
|
46538
|
-
|
46539
|
-
|
46540
|
-
|
46541
|
-
|
46542
|
-
|
46543
|
-
|
46544
|
-
|
46545
|
-
|
46546
|
-
|
46547
|
-
|
46548
|
-
|
46549
|
-
|
46550
|
-
|
46551
|
-
|
46552
|
-
|
46553
|
-
|
46554
|
-
|
46555
|
-
|
46717
|
+
return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__awaiter"])(this, void 0, void 0, function () {
|
46718
|
+
var canvas, clearColor, light, textureSize, nodeMaterial, block;
|
46719
|
+
var _this = this;
|
46720
|
+
return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__generator"])(this, function (_a) {
|
46721
|
+
switch (_a.label) {
|
46722
|
+
case 0:
|
46723
|
+
canvas = document.getElementById("workbench-canvas");
|
46724
|
+
this._canvas = canvas;
|
46725
|
+
// Associate a Babylon Engine to it.
|
46726
|
+
this._engine = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Engine"](canvas);
|
46727
|
+
// Create our first scene.
|
46728
|
+
this._scene = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Scene"](this._engine);
|
46729
|
+
clearColor = 204 / 255.0;
|
46730
|
+
this._scene.clearColor = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Color4"](clearColor, clearColor, clearColor, 1.0);
|
46731
|
+
light = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["HemisphericLight"]("light1", _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Axis"].Y, this._scene);
|
46732
|
+
light.intensity = 0.9;
|
46733
|
+
textureSize = 1024;
|
46734
|
+
this._textureMesh = Object(_babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["CreateGround"])("GuiCanvas", { width: 1, height: 1, subdivisions: 1 }, this._scene);
|
46735
|
+
this._textureMesh.scaling.x = textureSize;
|
46736
|
+
this._textureMesh.scaling.z = textureSize;
|
46737
|
+
this.globalState.guiTexture = _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["AdvancedDynamicTexture"].CreateForMesh(this._textureMesh, textureSize, textureSize, true);
|
46738
|
+
this._textureMesh.showBoundingBox = true;
|
46739
|
+
this.artBoardBackground = new _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Rectangle"]("Art-Board-Background");
|
46740
|
+
this.artBoardBackground.width = "100%";
|
46741
|
+
this.artBoardBackground.height = "100%";
|
46742
|
+
this.artBoardBackground.background = "transparent";
|
46743
|
+
this.artBoardBackground.thickness = 0;
|
46744
|
+
this.globalState.guiTexture.addControl(this.artBoardBackground);
|
46745
|
+
nodeMaterial = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["NodeMaterial"]("NodeMaterial", this._scene);
|
46746
|
+
return [4 /*yield*/, nodeMaterial.loadAsync("GUIEditorNodeMaterial.json")];
|
46747
|
+
case 1:
|
46748
|
+
_a.sent();
|
46749
|
+
nodeMaterial.build(true);
|
46750
|
+
this._textureMesh.material = nodeMaterial;
|
46751
|
+
if (nodeMaterial) {
|
46752
|
+
block = nodeMaterial.getBlockByName("Texture");
|
46753
|
+
block.texture = this.globalState.guiTexture;
|
46754
|
+
}
|
46755
|
+
this.setCameraRadius();
|
46756
|
+
this._camera = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["ArcRotateCamera"]("Camera", -Math.PI / 2, 0, this._cameraRadias, _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Vector3"].Zero(), this._scene);
|
46757
|
+
this._camera.maxZ = this._cameraMaxRadiasFactor * 2;
|
46758
|
+
// This attaches the camera to the canvas
|
46759
|
+
this.addControls(this._scene, this._camera);
|
46760
|
+
this._scene.getEngine().onCanvasPointerOutObservable.clear();
|
46761
|
+
this._scene.doNotHandleCursors = true;
|
46762
|
+
// Watch for browser/canvas resize events
|
46763
|
+
window.addEventListener("resize", function () {
|
46764
|
+
_this._engine.resize();
|
46765
|
+
});
|
46766
|
+
this.props.globalState.onErrorMessageDialogRequiredObservable.notifyObservers("Welcome to the GUI Editor Alpha. This editor is still a work in progress. Icons are currently temporary. Please submit feedback using the \"Give feedback\" button in the menu. ");
|
46767
|
+
this._engine.runRenderLoop(function () {
|
46768
|
+
_this._scene.render();
|
46769
|
+
});
|
46770
|
+
this.globalState.onNewSceneObservable.notifyObservers(this.globalState.guiTexture.getScene());
|
46771
|
+
this.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
|
46772
|
+
return [2 /*return*/];
|
46773
|
+
}
|
46774
|
+
});
|
46556
46775
|
});
|
46557
|
-
this.props.globalState.onErrorMessageDialogRequiredObservable.notifyObservers("Welcome to the GUI Editor Alpha. This editor is still a work in progress. Please submit feedback using the \"Give feedback\" button in the menu.");
|
46558
|
-
this._engine.runRenderLoop(function () { _this._scene.render(); });
|
46559
|
-
this.globalState.onNewSceneObservable.notifyObservers(this.globalState.guiTexture.getScene());
|
46560
|
-
this.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
|
46561
46776
|
};
|
46562
|
-
;
|
46563
46777
|
//Add map-like controls to an ArcRotate camera
|
46564
46778
|
WorkbenchComponent.prototype.addControls = function (scene, camera) {
|
46565
46779
|
var _this = this;
|
@@ -46853,13 +47067,15 @@ var GlobalState = /** @class */ (function () {
|
|
46853
47067
|
"use strict";
|
46854
47068
|
__webpack_require__.r(__webpack_exports__);
|
46855
47069
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GUIEditor", function() { return GUIEditor; });
|
46856
|
-
/* harmony import */ var
|
46857
|
-
/* harmony import */ var
|
46858
|
-
/* harmony import */ var
|
46859
|
-
/* harmony import */ var
|
46860
|
-
/* harmony import */ var
|
46861
|
-
/* harmony import */ var
|
46862
|
-
/* harmony import */ var
|
47070
|
+
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
|
47071
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
|
47072
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
47073
|
+
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-dom */ "../../../../node_modules/react-dom/index.js");
|
47074
|
+
/* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_2__);
|
47075
|
+
/* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./globalState */ "./globalState.ts");
|
47076
|
+
/* harmony import */ var _workbenchEditor__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./workbenchEditor */ "./workbenchEditor.tsx");
|
47077
|
+
/* harmony import */ var _sharedUiComponents_lines_popup__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./sharedUiComponents/lines/popup */ "./sharedUiComponents/lines/popup.ts");
|
47078
|
+
|
46863
47079
|
|
46864
47080
|
|
46865
47081
|
|
@@ -46876,65 +47092,77 @@ var GUIEditor = /** @class */ (function () {
|
|
46876
47092
|
* @param options defines the options to use to configure the gui editor
|
46877
47093
|
*/
|
46878
47094
|
GUIEditor.Show = function (options) {
|
46879
|
-
|
46880
|
-
var popupWindow
|
46881
|
-
|
46882
|
-
|
46883
|
-
|
46884
|
-
|
46885
|
-
|
46886
|
-
|
46887
|
-
|
46888
|
-
|
46889
|
-
|
46890
|
-
|
46891
|
-
|
46892
|
-
|
46893
|
-
|
46894
|
-
|
46895
|
-
|
46896
|
-
|
46897
|
-
|
46898
|
-
|
46899
|
-
|
46900
|
-
|
46901
|
-
|
46902
|
-
|
46903
|
-
|
46904
|
-
|
46905
|
-
|
46906
|
-
|
46907
|
-
|
46908
|
-
|
46909
|
-
|
46910
|
-
|
46911
|
-
|
46912
|
-
|
46913
|
-
|
46914
|
-
|
46915
|
-
|
46916
|
-
|
47095
|
+
return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__awaiter"])(this, void 0, void 0, function () {
|
47096
|
+
var popupWindow, hostElement, globalState, graphEditor, error_1, popupWindow;
|
47097
|
+
return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__generator"])(this, function (_a) {
|
47098
|
+
switch (_a.label) {
|
47099
|
+
case 0:
|
47100
|
+
if (this._CurrentState) {
|
47101
|
+
popupWindow = _sharedUiComponents_lines_popup__WEBPACK_IMPORTED_MODULE_5__["Popup"]["gui-editor"];
|
47102
|
+
if (popupWindow) {
|
47103
|
+
popupWindow.close();
|
47104
|
+
}
|
47105
|
+
if (options.currentSnippetToken) {
|
47106
|
+
try {
|
47107
|
+
this._CurrentState.workbench.loadFromSnippet(options.currentSnippetToken);
|
47108
|
+
}
|
47109
|
+
catch (error) {
|
47110
|
+
//swallow and continue
|
47111
|
+
}
|
47112
|
+
}
|
47113
|
+
return [2 /*return*/];
|
47114
|
+
}
|
47115
|
+
hostElement = options.hostElement;
|
47116
|
+
if (!hostElement) {
|
47117
|
+
hostElement = _sharedUiComponents_lines_popup__WEBPACK_IMPORTED_MODULE_5__["Popup"].CreatePopup("BABYLON.JS GUI EDITOR", "gui-editor", 1000, 800);
|
47118
|
+
}
|
47119
|
+
globalState = new _globalState__WEBPACK_IMPORTED_MODULE_3__["GlobalState"]();
|
47120
|
+
globalState.hostElement = hostElement;
|
47121
|
+
globalState.hostDocument = hostElement.ownerDocument;
|
47122
|
+
globalState.customSave = options.customSave;
|
47123
|
+
globalState.customLoad = options.customLoad;
|
47124
|
+
globalState.hostWindow = hostElement.ownerDocument.defaultView;
|
47125
|
+
graphEditor = react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_workbenchEditor__WEBPACK_IMPORTED_MODULE_4__["WorkbenchEditor"], {
|
47126
|
+
globalState: globalState,
|
47127
|
+
});
|
47128
|
+
react_dom__WEBPACK_IMPORTED_MODULE_2__["render"](graphEditor, hostElement);
|
47129
|
+
if (!!globalState.guiTexture) return [3 /*break*/, 5];
|
47130
|
+
return [4 /*yield*/, globalState.workbench.createGUICanvas()];
|
47131
|
+
case 1:
|
47132
|
+
_a.sent();
|
47133
|
+
if (!options.currentSnippetToken) return [3 /*break*/, 5];
|
47134
|
+
_a.label = 2;
|
47135
|
+
case 2:
|
47136
|
+
_a.trys.push([2, 4, , 5]);
|
47137
|
+
return [4 /*yield*/, globalState.workbench.loadFromSnippet(options.currentSnippetToken)];
|
47138
|
+
case 3:
|
47139
|
+
_a.sent();
|
47140
|
+
return [3 /*break*/, 5];
|
47141
|
+
case 4:
|
47142
|
+
error_1 = _a.sent();
|
47143
|
+
return [3 /*break*/, 5];
|
47144
|
+
case 5:
|
47145
|
+
if (options.customLoadObservable) {
|
47146
|
+
options.customLoadObservable.add(function (data) {
|
47147
|
+
globalState.onResetRequiredObservable.notifyObservers();
|
47148
|
+
globalState.onBuiltObservable.notifyObservers();
|
47149
|
+
});
|
47150
|
+
}
|
47151
|
+
this._CurrentState = globalState;
|
47152
|
+
popupWindow = _sharedUiComponents_lines_popup__WEBPACK_IMPORTED_MODULE_5__["Popup"]["gui-editor"];
|
47153
|
+
if (popupWindow) {
|
47154
|
+
window.onbeforeunload = function () {
|
47155
|
+
var popupWindow = _sharedUiComponents_lines_popup__WEBPACK_IMPORTED_MODULE_5__["Popup"]["gui-editor"];
|
47156
|
+
if (popupWindow) {
|
47157
|
+
popupWindow.close();
|
47158
|
+
}
|
47159
|
+
};
|
47160
|
+
}
|
47161
|
+
window.addEventListener("beforeunload", function () { });
|
47162
|
+
return [2 /*return*/];
|
46917
47163
|
}
|
46918
|
-
}
|
46919
|
-
}
|
46920
|
-
if (options.customLoadObservable) {
|
46921
|
-
options.customLoadObservable.add(function (data) {
|
46922
|
-
globalState.onResetRequiredObservable.notifyObservers();
|
46923
|
-
globalState.onBuiltObservable.notifyObservers();
|
46924
47164
|
});
|
46925
|
-
}
|
46926
|
-
this._CurrentState = globalState;
|
46927
|
-
// Close the popup window when the page is refreshed or scene is disposed
|
46928
|
-
var popupWindow = _sharedUiComponents_lines_popup__WEBPACK_IMPORTED_MODULE_4__["Popup"]["gui-editor"];
|
46929
|
-
if (popupWindow) {
|
46930
|
-
window.onbeforeunload = function () {
|
46931
|
-
var popupWindow = _sharedUiComponents_lines_popup__WEBPACK_IMPORTED_MODULE_4__["Popup"]["gui-editor"];
|
46932
|
-
if (popupWindow) {
|
46933
|
-
popupWindow.close();
|
46934
|
-
}
|
46935
|
-
};
|
46936
|
-
}
|
46937
|
-
window.addEventListener("beforeunload", function () { });
|
47165
|
+
});
|
46938
47166
|
};
|
46939
47167
|
return GUIEditor;
|
46940
47168
|
}());
|
@@ -47006,7 +47234,7 @@ var GUINodeTools = /** @class */ (function () {
|
|
47006
47234
|
case "Rectangle":
|
47007
47235
|
element = new _babylonjs_gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__["Rectangle"]("Rectangle");
|
47008
47236
|
element.color = "#cccccc";
|
47009
|
-
element.background = "
|
47237
|
+
element.background = "transparent";
|
47010
47238
|
element.isPointerBlocker = true;
|
47011
47239
|
element.thickness = 1;
|
47012
47240
|
return element;
|
@@ -47030,7 +47258,7 @@ var GUINodeTools = /** @class */ (function () {
|
|
47030
47258
|
element.isPointerBlocker = true;
|
47031
47259
|
return element;
|
47032
47260
|
case "ImageButton":
|
47033
|
-
element = _babylonjs_gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__["Button"].CreateImageButton("Button", "Click Me",
|
47261
|
+
element = _babylonjs_gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__["Button"].CreateImageButton("Button", "Click Me", GUINodeTools.ImageControlDefaultUrl);
|
47034
47262
|
element.background = "#333333";
|
47035
47263
|
element.color = "#ffffff";
|
47036
47264
|
element.isPointerBlocker = true;
|
@@ -47042,11 +47270,18 @@ var GUINodeTools = /** @class */ (function () {
|
|
47042
47270
|
element.addKeysRow(["1", "2", "3", "\u2190"]);
|
47043
47271
|
return element;
|
47044
47272
|
case "Image":
|
47045
|
-
element = new _babylonjs_gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__["Image"]("Image",
|
47273
|
+
element = new _babylonjs_gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__["Image"]("Image", GUINodeTools.ImageControlDefaultUrl);
|
47046
47274
|
element.width = "512px";
|
47047
47275
|
element.height = "512px";
|
47048
47276
|
element.autoScale = true;
|
47049
|
-
element.color = "
|
47277
|
+
element.color = "transparent";
|
47278
|
+
element.isPointerBlocker = true;
|
47279
|
+
return element;
|
47280
|
+
case "ButtonImage":
|
47281
|
+
element = new _babylonjs_gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__["Image"]("Image", GUINodeTools.ImageControlDefaultUrl);
|
47282
|
+
element.width = "100%";
|
47283
|
+
element.height = "100%";
|
47284
|
+
element.color = "transparent";
|
47050
47285
|
element.isPointerBlocker = true;
|
47051
47286
|
return element;
|
47052
47287
|
case "InputText":
|
@@ -47120,6 +47355,7 @@ var GUINodeTools = /** @class */ (function () {
|
|
47120
47355
|
return element;
|
47121
47356
|
}
|
47122
47357
|
};
|
47358
|
+
GUINodeTools.ImageControlDefaultUrl = "https://playground.babylonjs.com/textures/grass.png";
|
47123
47359
|
return GUINodeTools;
|
47124
47360
|
}());
|
47125
47361
|
|
@@ -47359,10 +47595,10 @@ var ColorComponentEntry = /** @class */ (function (_super) {
|
|
47359
47595
|
if (isNaN(valueAsNumber)) {
|
47360
47596
|
return;
|
47361
47597
|
}
|
47362
|
-
if (this.props.max != undefined &&
|
47598
|
+
if (this.props.max != undefined && valueAsNumber > this.props.max) {
|
47363
47599
|
valueAsNumber = this.props.max;
|
47364
47600
|
}
|
47365
|
-
if (this.props.min != undefined &&
|
47601
|
+
if (this.props.min != undefined && valueAsNumber < this.props.min) {
|
47366
47602
|
valueAsNumber = this.props.min;
|
47367
47603
|
}
|
47368
47604
|
this.props.onChange(valueAsNumber);
|
@@ -47451,8 +47687,7 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
47451
47687
|
return _this;
|
47452
47688
|
}
|
47453
47689
|
ColorPicker.prototype.shouldComponentUpdate = function (nextProps, nextState) {
|
47454
|
-
return
|
47455
|
-
nextState.color.toHexString() !== this.props.color.toHexString());
|
47690
|
+
return nextProps.color.toHexString() !== this.props.color.toHexString() || nextState.color.toHexString() !== this.props.color.toHexString();
|
47456
47691
|
};
|
47457
47692
|
ColorPicker.prototype.onSaturationPointerDown = function (evt) {
|
47458
47693
|
this._evaluateSaturation(evt);
|
@@ -47488,7 +47723,7 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
47488
47723
|
var left = evt.nativeEvent.offsetX;
|
47489
47724
|
var top = evt.nativeEvent.offsetY;
|
47490
47725
|
var saturation = Math.min(1, Math.max(0.0001, left / this._saturationRef.current.clientWidth));
|
47491
|
-
var value = Math.min(1, Math.max(0.0001, 1 -
|
47726
|
+
var value = Math.min(1, Math.max(0.0001, 1 - top / this._saturationRef.current.clientHeight));
|
47492
47727
|
if (this.props.debugMode) {
|
47493
47728
|
console.log("Saturation: " + saturation);
|
47494
47729
|
console.log("Value: " + value);
|
@@ -47531,7 +47766,7 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
47531
47766
|
var hasAlpha = this.props.color instanceof _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"];
|
47532
47767
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-container" + (this.props.linearhint ? " with-hints" : "") },
|
47533
47768
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-saturation", onPointerMove: function (e) { return _this.onSaturationPointerMove(e); }, onPointerDown: function (e) { return _this.onSaturationPointerDown(e); }, onPointerUp: function (e) { return _this.onSaturationPointerUp(e); }, ref: this._saturationRef, style: {
|
47534
|
-
background: colorHexRef
|
47769
|
+
background: colorHexRef,
|
47535
47770
|
} },
|
47536
47771
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-saturation-white" }),
|
47537
47772
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-saturation-black" }),
|
@@ -47541,12 +47776,12 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
47541
47776
|
} })),
|
47542
47777
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-hue" },
|
47543
47778
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-hue-color", style: {
|
47544
|
-
background: colorHex
|
47779
|
+
background: colorHex,
|
47545
47780
|
} }),
|
47546
47781
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: function (e) { return _this.onHuePointerMove(e); }, onPointerDown: function (e) { return _this.onHuePointerDown(e); }, onPointerUp: function (e) { return _this.onHuePointerUp(e); } },
|
47547
47782
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-hue-cursor", style: {
|
47548
47783
|
left: (hsv.r / 360.0) * 100 + "%",
|
47549
|
-
border: "1px solid " + colorHexRef
|
47784
|
+
border: "1px solid " + colorHexRef,
|
47550
47785
|
} }))),
|
47551
47786
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-rgb" },
|
47552
47787
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "red" },
|
@@ -47575,8 +47810,7 @@ var ColorPicker = /** @class */ (function (_super) {
|
|
47575
47810
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_hexColor__WEBPACK_IMPORTED_MODULE_4__["HexColor"], { expectedLength: 6, value: colorHex, onChange: function (value) {
|
47576
47811
|
_this.setState({ color: _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color3"].FromHexString(value) });
|
47577
47812
|
} }))),
|
47578
|
-
this.props.linearhint &&
|
47579
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-warning" }, "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))")));
|
47813
|
+
this.props.linearhint && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-warning" }, "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))"))));
|
47580
47814
|
};
|
47581
47815
|
return ColorPicker;
|
47582
47816
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -47625,13 +47859,46 @@ var HexColor = /** @class */ (function (_super) {
|
|
47625
47859
|
};
|
47626
47860
|
HexColor.prototype.render = function () {
|
47627
47861
|
var _this = this;
|
47628
|
-
return
|
47862
|
+
return react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "string", className: "hex-input", value: this.state.hex, onChange: function (evt) { return _this.updateHexValue(evt.target.value); } });
|
47629
47863
|
};
|
47630
47864
|
return HexColor;
|
47631
47865
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
47632
47866
|
|
47633
47867
|
|
47634
47868
|
|
47869
|
+
/***/ }),
|
47870
|
+
|
47871
|
+
/***/ "./sharedUiComponents/imgs/addGridElementDark.svg":
|
47872
|
+
/*!********************************************************!*\
|
47873
|
+
!*** ./sharedUiComponents/imgs/addGridElementDark.svg ***!
|
47874
|
+
\********************************************************/
|
47875
|
+
/*! no static exports found */
|
47876
|
+
/***/ (function(module, exports) {
|
47877
|
+
|
47878
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,6.91A8.09,8.09,0,1,1,6.91,15,8.09,8.09,0,0,1,15,6.91Zm0,1.22A6.87,6.87,0,1,0,21.87,15,6.86,6.86,0,0,0,15,8.13ZM15,11a.61.61,0,0,1,.61.6v2.83h2.83a.61.61,0,0,1,0,1.22H15.61v2.83a.61.61,0,0,1-1.22,0V15.61H11.56a.61.61,0,0,1,0-1.22h2.83V11.56A.61.61,0,0,1,15,11Z' style='fill:%23333'/%3E%3C/svg%3E"
|
47879
|
+
|
47880
|
+
/***/ }),
|
47881
|
+
|
47882
|
+
/***/ "./sharedUiComponents/imgs/addImageButtonIcon.svg":
|
47883
|
+
/*!********************************************************!*\
|
47884
|
+
!*** ./sharedUiComponents/imgs/addImageButtonIcon.svg ***!
|
47885
|
+
\********************************************************/
|
47886
|
+
/*! no static exports found */
|
47887
|
+
/***/ (function(module, exports) {
|
47888
|
+
|
47889
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M18.74,15.43a4.47,4.47,0,1,1-4.48,4.47A4.47,4.47,0,0,1,18.74,15.43Zm0,1.62h-.08a.41.41,0,0,0-.32.32v2.11H16.22a.41.41,0,0,0-.32.32V20a.4.4,0,0,0,.32.33h2.11v2.11a.4.4,0,0,0,.33.33h.14a.4.4,0,0,0,.33-.33V20.3h2.11a.4.4,0,0,0,.33-.33v-.15a.4.4,0,0,0-.33-.32H19.14V17.38a.4.4,0,0,0-.33-.32Zm-2-8.57a1.84,1.84,0,1,0,1.84,1.84A1.83,1.83,0,0,0,16.77,8.48Zm0,2.45a.61.61,0,0,1-.61-.61.62.62,0,1,1,1.23,0A.61.61,0,0,1,16.77,10.93Zm-3.51,9a5.44,5.44,0,0,1,.07-.82H9.44A1.28,1.28,0,0,1,9,19l4.8-4.69a.62.62,0,0,1,.79.06l1.07,1.05a5.36,5.36,0,0,1,1.13-.61l-1.34-1.31-.11-.1a1.83,1.83,0,0,0-2.46.1L8.1,18.13A1.28,1.28,0,0,1,8,17.65V8.28A1.43,1.43,0,0,1,9.44,6.85h9.37a1.43,1.43,0,0,1,1.43,1.43v6.36a5.27,5.27,0,0,1,1.22.52V8.28a2.65,2.65,0,0,0-2.65-2.65H9.44A2.65,2.65,0,0,0,6.79,8.28v9.37A2.65,2.65,0,0,0,9.44,20.3h3.85C13.28,20.17,13.26,20,13.26,19.9Z' style='fill:%23333'/%3E%3C/svg%3E"
|
47890
|
+
|
47891
|
+
/***/ }),
|
47892
|
+
|
47893
|
+
/***/ "./sharedUiComponents/imgs/addTextButtonIcon.svg":
|
47894
|
+
/*!*******************************************************!*\
|
47895
|
+
!*** ./sharedUiComponents/imgs/addTextButtonIcon.svg ***!
|
47896
|
+
\*******************************************************/
|
47897
|
+
/*! no static exports found */
|
47898
|
+
/***/ (function(module, exports) {
|
47899
|
+
|
47900
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M18.23,14.57a4.48,4.48,0,1,1-4.47,4.48A4.48,4.48,0,0,1,18.23,14.57Zm0,1.63h-.07a.4.4,0,0,0-.33.32v2.11H15.71a.41.41,0,0,0-.32.32v.15a.42.42,0,0,0,.32.33h2.11v2.11a.4.4,0,0,0,.33.33h.14a.4.4,0,0,0,.33-.33V19.45h2.11a.42.42,0,0,0,.32-.33V19a.41.41,0,0,0-.32-.32H18.64V16.53a.4.4,0,0,0-.33-.32Zm-5.47,2.85a5.44,5.44,0,0,1,.82-2.88V7.7h3.85v1a.61.61,0,0,0,1.22,0V7.09A.61.61,0,0,0,18,6.48H7.91a.61.61,0,0,0-.61.61V8.71a.61.61,0,1,0,1.21,0v-1h3.85V18.24H11.15a.61.61,0,1,0,0,1.21h1.63C12.77,19.32,12.76,19.18,12.76,19.05Z' style='fill:%23333'/%3E%3C/svg%3E"
|
47901
|
+
|
47635
47902
|
/***/ }),
|
47636
47903
|
|
47637
47904
|
/***/ "./sharedUiComponents/imgs/alphaIcon.svg":
|
@@ -47645,6 +47912,17 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
47645
47912
|
|
47646
47913
|
/***/ }),
|
47647
47914
|
|
47915
|
+
/***/ "./sharedUiComponents/imgs/cancelGridElementDark.svg":
|
47916
|
+
/*!***********************************************************!*\
|
47917
|
+
!*** ./sharedUiComponents/imgs/cancelGridElementDark.svg ***!
|
47918
|
+
\***********************************************************/
|
47919
|
+
/*! no static exports found */
|
47920
|
+
/***/ (function(module, exports) {
|
47921
|
+
|
47922
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,6.88A8.12,8.12,0,1,1,6.88,15,8.13,8.13,0,0,1,15,6.88ZM15,8.1A6.9,6.9,0,1,0,21.9,15,6.9,6.9,0,0,0,15,8.1Zm2.8,4,.07.05a.62.62,0,0,1,.05.8l-.05.07-2,2,2,2a.62.62,0,0,1,.05.8l-.05.07a.62.62,0,0,1-.8.05L17,17.87l-2-2-2,2a.62.62,0,0,1-.8.05l-.07-.05a.62.62,0,0,1-.05-.8l.05-.07,2-2-2-2a.62.62,0,0,1-.05-.8l.05-.07a.62.62,0,0,1,.8-.05l.07.05,2,2,2-2A.62.62,0,0,1,17.8,12.08Z' style='fill:%23333'/%3E%3C/svg%3E"
|
47923
|
+
|
47924
|
+
/***/ }),
|
47925
|
+
|
47648
47926
|
/***/ "./sharedUiComponents/imgs/checkboxIconDark.svg":
|
47649
47927
|
/*!******************************************************!*\
|
47650
47928
|
!*** ./sharedUiComponents/imgs/checkboxIconDark.svg ***!
|
@@ -47689,6 +47967,28 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
47689
47967
|
|
47690
47968
|
/***/ }),
|
47691
47969
|
|
47970
|
+
/***/ "./sharedUiComponents/imgs/confirmGridElementDark.svg":
|
47971
|
+
/*!************************************************************!*\
|
47972
|
+
!*** ./sharedUiComponents/imgs/confirmGridElementDark.svg ***!
|
47973
|
+
\************************************************************/
|
47974
|
+
/*! no static exports found */
|
47975
|
+
/***/ (function(module, exports) {
|
47976
|
+
|
47977
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,6.89A8.11,8.11,0,1,1,6.89,15,8.11,8.11,0,0,1,15,6.89Zm0,1.22A6.89,6.89,0,1,0,21.89,15,6.88,6.88,0,0,0,15,8.11Zm-1,8.06,3.62-3.63a.61.61,0,0,1,.92.79l-.06.07-4,4.06a.64.64,0,0,1-.8.06l-.06-.06-2-2a.6.6,0,0,1,0-.86.6.6,0,0,1,.79-.06l.07.06,1.6,1.6,3.62-3.63Z' style='fill:%23333'/%3E%3C/svg%3E"
|
47978
|
+
|
47979
|
+
/***/ }),
|
47980
|
+
|
47981
|
+
/***/ "./sharedUiComponents/imgs/deleteGridElementDark.svg":
|
47982
|
+
/*!***********************************************************!*\
|
47983
|
+
!*** ./sharedUiComponents/imgs/deleteGridElementDark.svg ***!
|
47984
|
+
\***********************************************************/
|
47985
|
+
/*! no static exports found */
|
47986
|
+
/***/ (function(module, exports) {
|
47987
|
+
|
47988
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,8.71a2,2,0,0,1,2,1.91v.11h3.26a.47.47,0,0,1,.06.93h-.56L19,19.75a1.7,1.7,0,0,1-1.59,1.53H12.71A1.71,1.71,0,0,1,11,19.85l0-.1-.79-8.09h-.5a.46.46,0,0,1-.46-.4V11.2a.46.46,0,0,1,.4-.46H13A2,2,0,0,1,15,8.71Zm3.85,2.95h-7.7l.79,8a.78.78,0,0,0,.69.7h4.66a.77.77,0,0,0,.76-.62v-.08Zm-2.76,1.71a.47.47,0,0,1,.46.4v4.41a.46.46,0,0,1-.92.06v-4.4A.47.47,0,0,1,16.09,13.37Zm-2.18,0a.46.46,0,0,1,.46.4v4.41a.47.47,0,0,1-.93.06v-4.4A.47.47,0,0,1,13.91,13.37ZM15,9.65a1.07,1.07,0,0,0-1.08,1v.09h2.18A1.08,1.08,0,0,0,15,9.65Z' style='fill:%23333'/%3E%3C/svg%3E"
|
47989
|
+
|
47990
|
+
/***/ }),
|
47991
|
+
|
47692
47992
|
/***/ "./sharedUiComponents/imgs/fillColorIcon.svg":
|
47693
47993
|
/*!***************************************************!*\
|
47694
47994
|
!*** ./sharedUiComponents/imgs/fillColorIcon.svg ***!
|
@@ -47733,6 +48033,17 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
47733
48033
|
|
47734
48034
|
/***/ }),
|
47735
48035
|
|
48036
|
+
/***/ "./sharedUiComponents/imgs/gridColumnIconDark.svg":
|
48037
|
+
/*!********************************************************!*\
|
48038
|
+
!*** ./sharedUiComponents/imgs/gridColumnIconDark.svg ***!
|
48039
|
+
\********************************************************/
|
48040
|
+
/*! no static exports found */
|
48041
|
+
/***/ (function(module, exports) {
|
48042
|
+
|
48043
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M12.57,17.83v2.63a.61.61,0,0,0,.61.61h3.64a.61.61,0,0,0,.61-.61V17.83ZM16.82,7.71a1.82,1.82,0,0,1,1.82,1.83V20.46a1.82,1.82,0,0,1-1.82,1.83H13.18a1.82,1.82,0,0,1-1.82-1.83V9.54a1.82,1.82,0,0,1,1.82-1.83Zm.61,1.83a.61.61,0,0,0-.61-.61H13.18a.61.61,0,0,0-.61.61v2.63h4.86Zm-4.86,7.08h4.86V13.38H12.57Z' style='fill:%23333'/%3E%3C/svg%3E"
|
48044
|
+
|
48045
|
+
/***/ }),
|
48046
|
+
|
47736
48047
|
/***/ "./sharedUiComponents/imgs/hAlignCenterIcon.svg":
|
47737
48048
|
/*!******************************************************!*\
|
47738
48049
|
!*** ./sharedUiComponents/imgs/hAlignCenterIcon.svg ***!
|
@@ -47876,6 +48187,17 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
47876
48187
|
|
47877
48188
|
/***/ }),
|
47878
48189
|
|
48190
|
+
/***/ "./sharedUiComponents/imgs/subtractGridElementDark.svg":
|
48191
|
+
/*!*************************************************************!*\
|
48192
|
+
!*** ./sharedUiComponents/imgs/subtractGridElementDark.svg ***!
|
48193
|
+
\*************************************************************/
|
48194
|
+
/*! no static exports found */
|
48195
|
+
/***/ (function(module, exports) {
|
48196
|
+
|
48197
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M15,6.94A8.06,8.06,0,1,1,6.94,15,8.06,8.06,0,0,1,15,6.94Zm0,1.21A6.85,6.85,0,1,0,21.85,15,6.84,6.84,0,0,0,15,8.15Zm3.43,6.25a.6.6,0,1,1,0,1.2H11.57a.6.6,0,0,1,0-1.2Z' style='fill:%23333'/%3E%3C/svg%3E"
|
48198
|
+
|
48199
|
+
/***/ }),
|
48200
|
+
|
47879
48201
|
/***/ "./sharedUiComponents/imgs/vAlignBottomIcon.svg":
|
47880
48202
|
/*!******************************************************!*\
|
47881
48203
|
!*** ./sharedUiComponents/imgs/vAlignBottomIcon.svg ***!
|
@@ -47909,6 +48231,17 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
47909
48231
|
|
47910
48232
|
/***/ }),
|
47911
48233
|
|
48234
|
+
/***/ "./sharedUiComponents/imgs/valueChangedGridDark.svg":
|
48235
|
+
/*!**********************************************************!*\
|
48236
|
+
!*** ./sharedUiComponents/imgs/valueChangedGridDark.svg ***!
|
48237
|
+
\**********************************************************/
|
48238
|
+
/*! no static exports found */
|
48239
|
+
/***/ (function(module, exports) {
|
48240
|
+
|
48241
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M14.21,6a.62.62,0,0,0-.86,0,.62.62,0,0,0,0,.87l1.4,1.4a7.91,7.91,0,1,0,8.17,7.91v0a.58.58,0,0,0-.59-.56h0a.59.59,0,0,0-.58.61,6.7,6.7,0,1,1-7-6.7l-1.39,1.4a.6.6,0,0,0,0,.86.62.62,0,0,0,.86,0l2.44-2.44a.6.6,0,0,0,0-.86Zm4.87,7.31a.6.6,0,0,1,0,.86l-3.65,3.66a.62.62,0,0,1-.86,0L12.74,16a.61.61,0,0,1,.86-.86L15,16.57l3.22-3.22A.6.6,0,0,1,19.08,13.35Z' style='fill:%23333'/%3E%3C/svg%3E"
|
48242
|
+
|
48243
|
+
/***/ }),
|
48244
|
+
|
47912
48245
|
/***/ "./sharedUiComponents/imgs/verticalMarginIcon.svg":
|
47913
48246
|
/*!********************************************************!*\
|
47914
48247
|
!*** ./sharedUiComponents/imgs/verticalMarginIcon.svg ***!
|
@@ -48014,7 +48347,7 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
|
|
48014
48347
|
object: this.props.target,
|
48015
48348
|
property: this.props.propertyName,
|
48016
48349
|
value: !this.state.isSelected,
|
48017
|
-
initialValue: this.state.isSelected
|
48350
|
+
initialValue: this.state.isSelected,
|
48018
48351
|
});
|
48019
48352
|
}
|
48020
48353
|
this.props.target[this.props.propertyName] = !this.state.isSelected;
|
@@ -48031,7 +48364,7 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
|
|
48031
48364
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.iconLabel }, this.props.label),
|
48032
48365
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "checkBox" },
|
48033
48366
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkbox", id: "checkbox" + this._uniqueId, className: "cbx hidden", checked: this.state.isSelected, onChange: function () { return _this.onChange(); }, disabled: !!this.props.disabled }),
|
48034
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("label", { htmlFor: "checkbox" + this._uniqueId, className: "lbl" + (!!this.props.disabled ?
|
48367
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("label", { htmlFor: "checkbox" + this._uniqueId, className: "lbl" + (!!this.props.disabled ? " disabled" : "") }))));
|
48035
48368
|
};
|
48036
48369
|
CheckBoxLineComponent._UniqueIdSeed = 0;
|
48037
48370
|
return CheckBoxLineComponent;
|
@@ -48075,31 +48408,75 @@ var Color3LineComponent = /** @class */ (function (_super) {
|
|
48075
48408
|
function Color3LineComponent(props) {
|
48076
48409
|
var _this = _super.call(this, props) || this;
|
48077
48410
|
_this._localChange = false;
|
48078
|
-
|
48411
|
+
var typeName = typeof _this.props.target[_this.props.propertyName];
|
48412
|
+
if (typeName === "string") {
|
48413
|
+
var colorConverted = _this.convertToColor3(_this.props.target[_this.props.propertyName]);
|
48414
|
+
_this.state = { isExpanded: false, color: colorConverted, colorText: _this.props.target[_this.props.propertyName] };
|
48415
|
+
}
|
48416
|
+
else {
|
48417
|
+
_this.state = { isExpanded: false, color: _this.props.target[_this.props.propertyName].clone(), colorText: _this.props.target[_this.props.propertyName].toHexString() };
|
48418
|
+
}
|
48079
48419
|
if (props.isLinear) {
|
48080
48420
|
_this.state.color.toGammaSpaceToRef(_this.state.color);
|
48081
48421
|
}
|
48082
48422
|
props.target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
|
48423
|
+
_this._colorPickerOpen = false;
|
48083
48424
|
return _this;
|
48084
48425
|
}
|
48426
|
+
Color3LineComponent.prototype.convertToColor3 = function (color) {
|
48427
|
+
if (color === "" || color === "transparent") {
|
48428
|
+
return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__["Color4"](0, 0, 0, 0);
|
48429
|
+
}
|
48430
|
+
if (color.substring(0, 1) !== "#" || color.length !== 7) {
|
48431
|
+
var d = document.createElement("div");
|
48432
|
+
d.style.color = color;
|
48433
|
+
document.body.append(d);
|
48434
|
+
var rgb = window.getComputedStyle(d).color;
|
48435
|
+
document.body.removeChild(d);
|
48436
|
+
var rgbArray = rgb
|
48437
|
+
.substring(4, rgb.length - 1)
|
48438
|
+
.replace(/ /g, "")
|
48439
|
+
.split(",");
|
48440
|
+
return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__["Color3"](parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255);
|
48441
|
+
}
|
48442
|
+
return _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__["Color3"].FromHexString(color);
|
48443
|
+
};
|
48085
48444
|
Color3LineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
|
48086
|
-
var
|
48445
|
+
var isString = typeof this.props.target[this.props.propertyName] === "string";
|
48446
|
+
var currentState = isString
|
48447
|
+
? this.convertToColor3(nextProps.target[nextProps.propertyName])
|
48448
|
+
: this.props.isLinear
|
48449
|
+
? nextProps.target[nextProps.propertyName].toGammaSpace()
|
48450
|
+
: nextProps.target[nextProps.propertyName];
|
48087
48451
|
if (!currentState.equals(nextState.color) || this._localChange) {
|
48088
48452
|
nextState.color = currentState.clone();
|
48453
|
+
nextState.colorText = isString ? nextProps.target[nextProps.propertyName] : nextProps.target[nextProps.propertyName].toHexString();
|
48089
48454
|
this._localChange = false;
|
48090
48455
|
return true;
|
48091
48456
|
}
|
48092
48457
|
return false;
|
48093
48458
|
};
|
48094
|
-
Color3LineComponent.prototype.setPropertyValue = function (newColor) {
|
48095
|
-
this.props.target[this.props.propertyName]
|
48096
|
-
if (
|
48097
|
-
this.props.target[this.props.propertyName] =
|
48459
|
+
Color3LineComponent.prototype.setPropertyValue = function (newColor, newColorText) {
|
48460
|
+
var isString = typeof this.props.target[this.props.propertyName] === "string";
|
48461
|
+
if (isString) {
|
48462
|
+
this.props.target[this.props.propertyName] = newColorText;
|
48463
|
+
}
|
48464
|
+
else {
|
48465
|
+
this.props.target[this.props.propertyName] = newColor;
|
48466
|
+
if (this.props.isLinear) {
|
48467
|
+
this.props.target[this.props.propertyName] = newColor.toLinearSpace();
|
48468
|
+
}
|
48098
48469
|
}
|
48099
48470
|
};
|
48100
48471
|
Color3LineComponent.prototype.onChange = function (newValue) {
|
48101
48472
|
this._localChange = true;
|
48102
|
-
var newColor =
|
48473
|
+
var newColor = this.convertToColor3(newValue);
|
48474
|
+
if (this._colorPickerOpen && this.props.icon) {
|
48475
|
+
var savedColor = this.convertToColor3(this._colorStringSaved);
|
48476
|
+
if (savedColor.equals(newColor)) {
|
48477
|
+
newValue = this._colorStringSaved;
|
48478
|
+
}
|
48479
|
+
}
|
48103
48480
|
if (this.props.onPropertyChangedObservable) {
|
48104
48481
|
this.props.onPropertyChangedObservable.notifyObservers({
|
48105
48482
|
object: this.props.target,
|
@@ -48108,8 +48485,11 @@ var Color3LineComponent = /** @class */ (function (_super) {
|
|
48108
48485
|
initialValue: this.state.color,
|
48109
48486
|
});
|
48110
48487
|
}
|
48111
|
-
this.setPropertyValue(newColor);
|
48112
|
-
this.setState({ color: newColor });
|
48488
|
+
this.setPropertyValue(newColor, newValue);
|
48489
|
+
this.setState({ color: newColor, colorText: newValue });
|
48490
|
+
if (this.props.onValueChange) {
|
48491
|
+
this.props.onValueChange(newValue);
|
48492
|
+
}
|
48113
48493
|
};
|
48114
48494
|
Color3LineComponent.prototype.switchExpandState = function () {
|
48115
48495
|
this._localChange = true;
|
@@ -48130,28 +48510,31 @@ var Color3LineComponent = /** @class */ (function (_super) {
|
|
48130
48510
|
this._localChange = true;
|
48131
48511
|
var store = this.state.color.clone();
|
48132
48512
|
this.state.color.r = value;
|
48133
|
-
this.
|
48134
|
-
this.
|
48513
|
+
var hex = this.state.color.toHexString();
|
48514
|
+
this.setPropertyValue(this.state.color, hex);
|
48515
|
+
this.setState({ color: this.state.color, colorText: hex });
|
48135
48516
|
this.raiseOnPropertyChanged(store);
|
48136
48517
|
};
|
48137
48518
|
Color3LineComponent.prototype.updateStateG = function (value) {
|
48138
48519
|
this._localChange = true;
|
48139
48520
|
var store = this.state.color.clone();
|
48140
48521
|
this.state.color.g = value;
|
48141
|
-
this.
|
48142
|
-
this.
|
48522
|
+
var hex = this.state.color.toHexString();
|
48523
|
+
this.setPropertyValue(this.state.color, hex);
|
48524
|
+
this.setState({ color: this.state.color, colorText: hex });
|
48143
48525
|
this.raiseOnPropertyChanged(store);
|
48144
48526
|
};
|
48145
48527
|
Color3LineComponent.prototype.updateStateB = function (value) {
|
48146
48528
|
this._localChange = true;
|
48147
48529
|
var store = this.state.color.clone();
|
48148
48530
|
this.state.color.b = value;
|
48149
|
-
this.
|
48150
|
-
this.
|
48531
|
+
var hex = this.state.color.toHexString();
|
48532
|
+
this.setPropertyValue(this.state.color, hex);
|
48533
|
+
this.setState({ color: this.state.color, colorText: hex });
|
48151
48534
|
this.raiseOnPropertyChanged(store);
|
48152
48535
|
};
|
48153
48536
|
Color3LineComponent.prototype.copyToClipboard = function () {
|
48154
|
-
var element = document.createElement(
|
48537
|
+
var element = document.createElement("div");
|
48155
48538
|
element.textContent = this.state.color.toHexString();
|
48156
48539
|
document.body.appendChild(element);
|
48157
48540
|
if (window.getSelection) {
|
@@ -48160,7 +48543,7 @@ var Color3LineComponent = /** @class */ (function (_super) {
|
|
48160
48543
|
window.getSelection().removeAllRanges();
|
48161
48544
|
window.getSelection().addRange(range);
|
48162
48545
|
}
|
48163
|
-
document.execCommand(
|
48546
|
+
document.execCommand("copy");
|
48164
48547
|
element.remove();
|
48165
48548
|
};
|
48166
48549
|
Color3LineComponent.prototype.convert = function (colorString) {
|
@@ -48169,25 +48552,30 @@ var Color3LineComponent = /** @class */ (function (_super) {
|
|
48169
48552
|
Color3LineComponent.prototype.render = function () {
|
48170
48553
|
var _this = this;
|
48171
48554
|
var chevron = this.state.isExpanded ? react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_3__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__["faMinus"] }) : react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_3__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__["faPlus"] });
|
48172
|
-
this._colorString = this.state.
|
48555
|
+
this._colorString = this.state.colorText;
|
48173
48556
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3Line" },
|
48174
48557
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "firstLine", title: this.props.label },
|
48175
48558
|
this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
|
48176
48559
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label" }, this.props.label),
|
48177
48560
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3" },
|
48178
48561
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__["ColorPickerLineComponent"], { linearHint: this.props.isLinear, value: this.state.color, onColorChanged: function (color) {
|
48562
|
+
if (!_this._colorPickerOpen) {
|
48563
|
+
_this._colorStringSaved = _this._colorString;
|
48564
|
+
}
|
48565
|
+
_this._colorPickerOpen = true;
|
48179
48566
|
_this.onChange(color);
|
48180
48567
|
} })),
|
48181
|
-
|
48182
|
-
|
48568
|
+
this.props.icon && this.props.lockObject && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "", target: this, propertyName: "_colorString", onChange: function (newValue) {
|
48569
|
+
_this._colorPickerOpen = false;
|
48570
|
+
_this.convert(newValue);
|
48571
|
+
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
48183
48572
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "copy hoverIcon", onClick: function () { return _this.copyToClipboard(); }, title: "Copy to clipboard" },
|
48184
48573
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: copyIcon, alt: "" })),
|
48185
48574
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "expand hoverIcon", onClick: function () { return _this.switchExpandState(); }, title: "Expand" }, chevron)),
|
48186
|
-
this.state.isExpanded &&
|
48187
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("
|
48188
|
-
|
48189
|
-
|
48190
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__["NumericInputComponent"], { label: "b", value: this.state.color.b, onChange: function (value) { return _this.updateStateB(value); } }))));
|
48575
|
+
this.state.isExpanded && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "secondLine" },
|
48576
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__["NumericInputComponent"], { label: "r", value: this.state.color.r, onChange: function (value) { return _this.updateStateR(value); } }),
|
48577
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__["NumericInputComponent"], { label: "g", value: this.state.color.g, onChange: function (value) { return _this.updateStateG(value); } }),
|
48578
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_2__["NumericInputComponent"], { label: "b", value: this.state.color.b, onChange: function (value) { return _this.updateStateB(value); } })))));
|
48191
48579
|
};
|
48192
48580
|
return Color3LineComponent;
|
48193
48581
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -48217,9 +48605,7 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
|
|
48217
48605
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ColorPickerLineComponent, _super);
|
48218
48606
|
function ColorPickerLineComponent(props) {
|
48219
48607
|
var _this = _super.call(this, props) || this;
|
48220
|
-
_this.state = { pickerEnabled: false,
|
48221
|
-
color: _this.props.value,
|
48222
|
-
hex: _this.props.value.toHexString() };
|
48608
|
+
_this.state = { pickerEnabled: false, color: _this.props.value, hex: _this.props.value.toHexString() };
|
48223
48609
|
_this._floatRef = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
|
48224
48610
|
_this._floatHostRef = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
|
48225
48611
|
return _this;
|
@@ -48249,9 +48635,7 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
|
|
48249
48635
|
nextState.color = nextProps.value;
|
48250
48636
|
nextState.hex = nextProps.value.toHexString();
|
48251
48637
|
}
|
48252
|
-
return diffProps
|
48253
|
-
|| nextState.hex !== this.state.hex
|
48254
|
-
|| nextState.pickerEnabled !== this.state.pickerEnabled;
|
48638
|
+
return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;
|
48255
48639
|
};
|
48256
48640
|
ColorPickerLineComponent.prototype.componentDidUpdate = function () {
|
48257
48641
|
this.syncPositions();
|
@@ -48265,21 +48649,20 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
|
|
48265
48649
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker" },
|
48266
48650
|
this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
|
48267
48651
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-rect", ref: this._floatHostRef, style: { background: this.state.hex }, onClick: function () { return _this.setState({ pickerEnabled: true }); } }),
|
48268
|
-
this.state.pickerEnabled &&
|
48269
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
48270
|
-
|
48271
|
-
|
48272
|
-
|
48273
|
-
|
48274
|
-
|
48275
|
-
|
48276
|
-
|
48277
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("
|
48278
|
-
|
48279
|
-
|
48280
|
-
|
48281
|
-
|
48282
|
-
} }))))));
|
48652
|
+
this.state.pickerEnabled && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
48653
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-cover", onClick: function (evt) {
|
48654
|
+
var _a, _b;
|
48655
|
+
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"))) {
|
48656
|
+
return;
|
48657
|
+
}
|
48658
|
+
_this.setState({ pickerEnabled: false });
|
48659
|
+
} },
|
48660
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-float", ref: this._floatRef },
|
48661
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__["ColorPicker"], { color: color, linearhint: this.props.linearHint, onColorChanged: function (color) {
|
48662
|
+
var hex = color.toHexString();
|
48663
|
+
_this.setState({ hex: hex, color: color });
|
48664
|
+
_this.props.onColorChanged(hex);
|
48665
|
+
} })))))));
|
48283
48666
|
};
|
48284
48667
|
return ColorPickerLineComponent;
|
48285
48668
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -48383,7 +48766,7 @@ var FloatLineComponent = /** @class */ (function (_super) {
|
|
48383
48766
|
return true;
|
48384
48767
|
}
|
48385
48768
|
var newValue = nextProps.target[nextProps.propertyName];
|
48386
|
-
var newValueString = newValue ? this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 4) : "0";
|
48769
|
+
var newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 4)) : "0";
|
48387
48770
|
if (newValueString !== nextState.value) {
|
48388
48771
|
nextState.value = newValueString;
|
48389
48772
|
return true;
|
@@ -48401,7 +48784,7 @@ var FloatLineComponent = /** @class */ (function (_super) {
|
|
48401
48784
|
object: this.props.target,
|
48402
48785
|
property: this.props.propertyName,
|
48403
48786
|
value: newValue,
|
48404
|
-
initialValue: previousValue
|
48787
|
+
initialValue: previousValue,
|
48405
48788
|
});
|
48406
48789
|
};
|
48407
48790
|
FloatLineComponent.prototype.updateValue = function (valueString) {
|
@@ -48459,27 +48842,24 @@ var FloatLineComponent = /** @class */ (function (_super) {
|
|
48459
48842
|
}
|
48460
48843
|
var className = this.props.smallUI ? "short" : "value";
|
48461
48844
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
|
48462
|
-
!this.props.useEuler &&
|
48463
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("
|
48464
|
-
|
48465
|
-
|
48466
|
-
|
48467
|
-
|
48468
|
-
|
48469
|
-
|
48470
|
-
|
48471
|
-
|
48472
|
-
|
48473
|
-
|
48474
|
-
|
48475
|
-
|
48476
|
-
_this.
|
48477
|
-
|
48478
|
-
|
48479
|
-
|
48480
|
-
}, onFocus: function () { return _this.lock(); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } }))),
|
48481
|
-
this.props.useEuler &&
|
48482
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__["SliderLineComponent"], { label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__["Tools"].ToDegrees(valueAsNumber), onChange: function (value) { return _this.updateValue(_babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__["Tools"].ToRadians(value).toString()); } })));
|
48845
|
+
!this.props.useEuler && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine" },
|
48846
|
+
this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
|
48847
|
+
(!this.props.icon || this.props.label != "") && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label)),
|
48848
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: className },
|
48849
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "number", step: this.props.step || this.props.isInteger ? "1" : "0.01", className: "numeric-input", onKeyDown: function (evt) {
|
48850
|
+
if (evt.keyCode !== 13) {
|
48851
|
+
return;
|
48852
|
+
}
|
48853
|
+
if (_this.props.onEnter) {
|
48854
|
+
_this.props.onEnter(_this._store);
|
48855
|
+
}
|
48856
|
+
}, value: this.state.value, onBlur: function () {
|
48857
|
+
_this.unlock();
|
48858
|
+
if (_this.props.onEnter) {
|
48859
|
+
_this.props.onEnter(_this._store);
|
48860
|
+
}
|
48861
|
+
}, onFocus: function () { return _this.lock(); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } })))),
|
48862
|
+
this.props.useEuler && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__["SliderLineComponent"], { label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__["Tools"].ToDegrees(valueAsNumber), onChange: function (value) { return _this.updateValue(_babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__["Tools"].ToRadians(value).toString()); } }))));
|
48483
48863
|
};
|
48484
48864
|
return FloatLineComponent;
|
48485
48865
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -48547,8 +48927,7 @@ var NumericInputComponent = /** @class */ (function (_super) {
|
|
48547
48927
|
var _this = this;
|
48548
48928
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "numeric" },
|
48549
48929
|
this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
|
48550
|
-
this.props.label &&
|
48551
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "numeric-label", title: this.props.label }, this.props.label + ": "),
|
48930
|
+
this.props.label && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "numeric-label", title: this.props.label }, this.props.label + ": ")),
|
48552
48931
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: function (evt) { return _this.updateValue(evt); }, onBlur: function () { return _this.onBlur(); } })));
|
48553
48932
|
};
|
48554
48933
|
NumericInputComponent.defaultProps = {
|
@@ -48761,7 +49140,7 @@ var SliderLineComponent = /** @class */ (function (_super) {
|
|
48761
49140
|
_this._localChange = false;
|
48762
49141
|
if (_this.props.directValue !== undefined) {
|
48763
49142
|
_this.state = {
|
48764
|
-
value: _this.props.directValue
|
49143
|
+
value: _this.props.directValue,
|
48765
49144
|
};
|
48766
49145
|
}
|
48767
49146
|
else {
|
@@ -48801,7 +49180,7 @@ var SliderLineComponent = /** @class */ (function (_super) {
|
|
48801
49180
|
object: this.props.target,
|
48802
49181
|
property: this.props.propertyName,
|
48803
49182
|
value: newValue,
|
48804
|
-
initialValue: this.state.value
|
49183
|
+
initialValue: this.state.value,
|
48805
49184
|
});
|
48806
49185
|
}
|
48807
49186
|
this.props.target[this.props.propertyName] = newValue;
|
@@ -48830,12 +49209,14 @@ var SliderLineComponent = /** @class */ (function (_super) {
|
|
48830
49209
|
var _this = this;
|
48831
49210
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "sliderLine" },
|
48832
49211
|
this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
|
48833
|
-
(!this.props.icon || this.props.label != "") &&
|
48834
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.props.margin ? "label withMargins" : "label", title: this.props.label }, this.props.label),
|
49212
|
+
(!this.props.icon || this.props.label != "") && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.props.margin ? "label withMargins" : "label", title: this.props.label }, this.props.label)),
|
48835
49213
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_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: function () {
|
48836
49214
|
var changed = _this.prepareDataToRead(_this.state.value);
|
48837
49215
|
_this.onChange(changed);
|
48838
|
-
}, onChange: function (evt) {
|
49216
|
+
}, onChange: function (evt) {
|
49217
|
+
var changed = _this.prepareDataToRead(_this.state.value);
|
49218
|
+
_this.onChange(changed);
|
49219
|
+
} }),
|
48839
49220
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "slider" },
|
48840
49221
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("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: function (evt) { return _this.onInput(evt.target.value); }, onChange: function (evt) { return _this.onChange(evt.target.value); } }))));
|
48841
49222
|
};
|
@@ -48896,7 +49277,7 @@ var TextInputLineComponent = /** @class */ (function (_super) {
|
|
48896
49277
|
object: this.props.target,
|
48897
49278
|
property: this.props.propertyName,
|
48898
49279
|
value: newValue,
|
48899
|
-
initialValue: previousValue
|
49280
|
+
initialValue: previousValue,
|
48900
49281
|
});
|
48901
49282
|
};
|
48902
49283
|
TextInputLineComponent.prototype.updateValue = function (value) {
|
@@ -48907,7 +49288,7 @@ var TextInputLineComponent = /** @class */ (function (_super) {
|
|
48907
49288
|
if (!value) {
|
48908
49289
|
value = "0";
|
48909
49290
|
}
|
48910
|
-
//Removing starting zero if there is a number of a minus after it.
|
49291
|
+
//Removing starting zero if there is a number of a minus after it.
|
48911
49292
|
if (value.search(/0+[0-9\-]/g) === 0) {
|
48912
49293
|
value = value.substr(1);
|
48913
49294
|
}
|
@@ -48924,10 +49305,9 @@ var TextInputLineComponent = /** @class */ (function (_super) {
|
|
48924
49305
|
var _this = this;
|
48925
49306
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "textInputLine" },
|
48926
49307
|
this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "black", className: "icon" }),
|
48927
|
-
(!this.props.icon || (this.props.icon && this.props.label != "")) &&
|
48928
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label),
|
49308
|
+
(!this.props.icon || (this.props.icon && this.props.label != "")) && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label)),
|
48929
49309
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value" + (this.props.noUnderline === true ? " noUnderline" : "") },
|
48930
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: this.state.value, onBlur: function () { return _this.props.lockObject.lock = false; }, onFocus: function () { return _this.props.lockObject.lock = true; }, onChange: function (evt) { return _this.updateValue(evt.target.value); } }))));
|
49310
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: this.state.value, onBlur: function () { return (_this.props.lockObject.lock = false); }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } }))));
|
48931
49311
|
};
|
48932
49312
|
return TextInputLineComponent;
|
48933
49313
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
@@ -48958,7 +49338,7 @@ var TextLineComponent = /** @class */ (function (_super) {
|
|
48958
49338
|
}
|
48959
49339
|
TextLineComponent.prototype.onLink = function () {
|
48960
49340
|
if (this.props.url) {
|
48961
|
-
window.open(this.props.url,
|
49341
|
+
window.open(this.props.url, "_blank");
|
48962
49342
|
return;
|
48963
49343
|
}
|
48964
49344
|
if (!this.props.onLink) {
|
@@ -48972,7 +49352,7 @@ var TextLineComponent = /** @class */ (function (_super) {
|
|
48972
49352
|
return null;
|
48973
49353
|
}
|
48974
49354
|
if (this.props.onLink || this.props.url) {
|
48975
|
-
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "link-value", title: this.props.value, onClick: function () { return _this.onLink(); } }, this.props.url ? "doc" :
|
49355
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "link-value", title: this.props.value, onClick: function () { return _this.onLink(); } }, this.props.url ? "doc" : this.props.value || "no name"));
|
48976
49356
|
}
|
48977
49357
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value", title: this.props.value, style: { color: this.props.color ? this.props.color : "" } }, this.props.value || "no name"));
|
48978
49358
|
};
|
@@ -49353,8 +49733,8 @@ var WorkbenchEditor = /** @class */ (function (_super) {
|
|
49353
49733
|
if (!evt.ctrlKey || _this.props.globalState.blockKeyboardEvents) {
|
49354
49734
|
return;
|
49355
49735
|
}
|
49356
|
-
if (evt.key === "a")
|
49357
|
-
|
49736
|
+
if (evt.key === "a") {
|
49737
|
+
//all
|
49358
49738
|
evt.preventDefault();
|
49359
49739
|
}
|
49360
49740
|
}, false);
|
@@ -49362,9 +49742,6 @@ var WorkbenchEditor = /** @class */ (function (_super) {
|
|
49362
49742
|
return _this;
|
49363
49743
|
}
|
49364
49744
|
WorkbenchEditor.prototype.componentDidMount = function () {
|
49365
|
-
if (this.props.globalState.hostDocument) {
|
49366
|
-
this._workbenchCanvas = this.refs["workbenchCanvas"];
|
49367
|
-
}
|
49368
49745
|
if (navigator.userAgent.indexOf("Mobile") !== -1) {
|
49369
49746
|
(this.props.globalState.hostDocument || document).querySelector(".blocker").style.visibility = "visible";
|
49370
49747
|
}
|
@@ -49415,14 +49792,6 @@ var WorkbenchEditor = /** @class */ (function (_super) {
|
|
49415
49792
|
WorkbenchEditor.prototype.buildColumnLayout = function () {
|
49416
49793
|
return this._leftWidth + "px 4px " + this._toolBarIconSize + "px calc(100% - " + (this._leftWidth + this._toolBarIconSize + 8 + this._rightWidth) + "px) 4px " + this._rightWidth + "px";
|
49417
49794
|
};
|
49418
|
-
WorkbenchEditor.prototype.emitNewBlock = function (event) {
|
49419
|
-
var data = event.dataTransfer.getData("babylonjs-gui-node");
|
49420
|
-
var guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_6__["GUINodeTools"].CreateControlFromString(data);
|
49421
|
-
var newGuiNode = this._workbenchCanvas.appendBlock(guiElement);
|
49422
|
-
this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
|
49423
|
-
this.props.globalState.onSelectionChangedObservable.notifyObservers(newGuiNode);
|
49424
|
-
this.forceUpdate();
|
49425
|
-
};
|
49426
49795
|
WorkbenchEditor.prototype.render = function () {
|
49427
49796
|
var _this = this;
|
49428
49797
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_portal__WEBPACK_IMPORTED_MODULE_3__["Portal"], { globalState: this.props.globalState },
|
@@ -49456,88 +49825,122 @@ var WorkbenchEditor = /** @class */ (function (_super) {
|
|
49456
49825
|
{
|
49457
49826
|
label: "Rectangle",
|
49458
49827
|
icon: rectangleIcon,
|
49459
|
-
onClick: function () {
|
49828
|
+
onClick: function () {
|
49829
|
+
_this.onCreate("Rectangle");
|
49830
|
+
},
|
49460
49831
|
},
|
49461
49832
|
{
|
49462
49833
|
label: "Ellipse",
|
49463
49834
|
icon: ellipseIcon,
|
49464
|
-
onClick: function () {
|
49835
|
+
onClick: function () {
|
49836
|
+
_this.onCreate("Ellipse");
|
49837
|
+
},
|
49465
49838
|
},
|
49466
49839
|
{
|
49467
49840
|
label: "StackPanel",
|
49468
49841
|
icon: stackPanelIcon,
|
49469
|
-
onClick: function () {
|
49842
|
+
onClick: function () {
|
49843
|
+
_this.onCreate("StackPanel");
|
49844
|
+
},
|
49470
49845
|
},
|
49471
49846
|
{
|
49472
49847
|
label: "Grid",
|
49473
49848
|
icon: gridIcon,
|
49474
|
-
onClick: function () {
|
49849
|
+
onClick: function () {
|
49850
|
+
_this.onCreate("Grid");
|
49851
|
+
},
|
49475
49852
|
},
|
49476
49853
|
{
|
49477
49854
|
label: "ScrollViewer",
|
49478
49855
|
icon: scrollbarIcon,
|
49479
|
-
onClick: function () {
|
49856
|
+
onClick: function () {
|
49857
|
+
_this.onCreate("ScrollViewer");
|
49858
|
+
},
|
49480
49859
|
},
|
49481
49860
|
{
|
49482
49861
|
label: "Line",
|
49483
49862
|
icon: lineIcon,
|
49484
|
-
onClick: function () {
|
49863
|
+
onClick: function () {
|
49864
|
+
_this.onCreate("Line");
|
49865
|
+
},
|
49485
49866
|
},
|
49486
49867
|
{
|
49487
49868
|
label: "Text",
|
49488
49869
|
icon: textBoxIcon,
|
49489
|
-
onClick: function () {
|
49870
|
+
onClick: function () {
|
49871
|
+
_this.onCreate("Text");
|
49872
|
+
},
|
49490
49873
|
},
|
49491
49874
|
{
|
49492
49875
|
label: "InputText",
|
49493
49876
|
icon: inputFieldIcon,
|
49494
|
-
onClick: function () {
|
49877
|
+
onClick: function () {
|
49878
|
+
_this.onCreate("InputText");
|
49879
|
+
},
|
49495
49880
|
},
|
49496
49881
|
{
|
49497
49882
|
label: "InputPassword",
|
49498
49883
|
icon: passwordFieldIcon,
|
49499
|
-
onClick: function () {
|
49884
|
+
onClick: function () {
|
49885
|
+
_this.onCreate("InputPassword");
|
49886
|
+
},
|
49500
49887
|
},
|
49501
49888
|
{
|
49502
49889
|
label: "Image",
|
49503
49890
|
icon: imageIcon,
|
49504
|
-
onClick: function () {
|
49891
|
+
onClick: function () {
|
49892
|
+
_this.onCreate("Image");
|
49893
|
+
},
|
49505
49894
|
},
|
49506
49895
|
{
|
49507
49896
|
label: "DisplayGrid",
|
49508
49897
|
icon: displaygridIcon,
|
49509
|
-
onClick: function () {
|
49898
|
+
onClick: function () {
|
49899
|
+
_this.onCreate("DisplayGrid");
|
49900
|
+
},
|
49510
49901
|
},
|
49511
49902
|
{
|
49512
49903
|
label: "TextButton",
|
49513
49904
|
icon: buttonIcon,
|
49514
|
-
onClick: function () {
|
49905
|
+
onClick: function () {
|
49906
|
+
_this.onCreate("TextButton");
|
49907
|
+
},
|
49515
49908
|
},
|
49516
49909
|
{
|
49517
49910
|
label: "Checkbox",
|
49518
49911
|
icon: checkboxIcon,
|
49519
|
-
onClick: function () {
|
49912
|
+
onClick: function () {
|
49913
|
+
_this.onCreate("Checkbox");
|
49914
|
+
},
|
49520
49915
|
},
|
49521
49916
|
{
|
49522
49917
|
label: "RadioButton",
|
49523
49918
|
icon: radioButtonIcon,
|
49524
|
-
onClick: function () {
|
49919
|
+
onClick: function () {
|
49920
|
+
_this.onCreate("RadioButton");
|
49921
|
+
},
|
49525
49922
|
},
|
49526
49923
|
{
|
49527
49924
|
label: "Slider",
|
49528
49925
|
icon: sliderIcon,
|
49529
|
-
onClick: function () {
|
49926
|
+
onClick: function () {
|
49927
|
+
_this.onCreate("Slider");
|
49928
|
+
},
|
49530
49929
|
},
|
49531
49930
|
{
|
49532
49931
|
label: "VirtualKeyboard",
|
49533
49932
|
icon: keyboardIcon,
|
49534
|
-
onClick: function () {
|
49933
|
+
onClick: function () {
|
49934
|
+
_this.onCreate("VirtualKeyboard");
|
49935
|
+
},
|
49535
49936
|
},
|
49536
49937
|
{
|
49537
49938
|
label: "ColorPicker",
|
49538
49939
|
icon: colorPickerIcon,
|
49539
|
-
onClick: function () {
|
49540
|
-
|
49940
|
+
onClick: function () {
|
49941
|
+
_this.onCreate("ColorPicker");
|
49942
|
+
},
|
49943
|
+
},
|
49541
49944
|
];
|
49542
49945
|
};
|
49543
49946
|
WorkbenchEditor.prototype.onCreate = function (value) {
|
@@ -49561,16 +49964,13 @@ var WorkbenchEditor = /** @class */ (function (_super) {
|
|
49561
49964
|
m.onClick();
|
49562
49965
|
}
|
49563
49966
|
}, title: m.label },
|
49564
|
-
!m.icon &&
|
49565
|
-
|
49566
|
-
|
49567
|
-
|
49568
|
-
|
49569
|
-
|
49570
|
-
|
49571
|
-
_this.forceUpdate();
|
49572
|
-
m.onCheck(evt.target.checked);
|
49573
|
-
}, checked: false })));
|
49967
|
+
!m.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "toolbar-label-text" }, (m.isActive ? "> " : "") + m.label),
|
49968
|
+
m.icon && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "toolbar-icon" },
|
49969
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: m.icon }))),
|
49970
|
+
m.onCheck && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkBox", className: "toolbar-label-check", onChange: function (evt) {
|
49971
|
+
_this.forceUpdate();
|
49972
|
+
m.onCheck(evt.target.checked);
|
49973
|
+
}, checked: false }))));
|
49574
49974
|
})))));
|
49575
49975
|
};
|
49576
49976
|
return WorkbenchEditor;
|