@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.
@@ -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 react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
42822
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
42823
- /* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./commandButtonComponent */ "./components/commandButtonComponent.tsx");
42824
- /* harmony import */ var _commandDropdownComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./commandDropdownComponent */ "./components/commandDropdownComponent.tsx");
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 (this.props.globalState.workbench.isContainer(guiControl)) {
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 (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-commands" },
42897
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "commands-left" },
42898
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: logoIcon, color: "white", className: "active" }),
42899
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandDropdownComponent__WEBPACK_IMPORTED_MODULE_3__["CommandDropdownComponent"], { globalState: this.props.globalState, toRight: true, icon: hamburgerIcon, tooltip: "Options", items: [
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 () { _this.props.globalState.onSaveObservable.notifyObservers(); }
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 () { _this.props.globalState.onSnippetSaveObservable.notifyObservers(); }
42909
- }, {
42915
+ onClick: function () {
42916
+ _this.props.globalState.onSnippetSaveObservable.notifyObservers();
42917
+ },
42918
+ },
42919
+ {
42910
42920
  label: "Load from snippet",
42911
- onClick: function () { _this.props.globalState.onSnippetLoadObservable.notifyObservers(); }
42912
- }, {
42921
+ onClick: function () {
42922
+ _this.props.globalState.onSnippetLoadObservable.notifyObservers();
42923
+ },
42924
+ },
42925
+ {
42913
42926
  label: "Help",
42914
- onClick: function () { window.open('https://doc.babylonjs.com/toolsAndResources/tools/guiEditor', '_blank'); }
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 () { window.open('https://forum.babylonjs.com/t/introducing-the-gui-editor-alpha/24578', '_blank'); }
42933
+ onClick: function () {
42934
+ window.open("https://forum.babylonjs.com/t/introducing-the-gui-editor-alpha/24578", "_blank");
42935
+ },
42919
42936
  },
42920
42937
  ] }),
42921
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Select", icon: pointerIcon, shortcut: "S", isActive: this._selecting, onClick: function () { if (!_this._selecting)
42922
- _this.props.globalState.onSelectionButtonObservable.notifyObservers(); } }),
42923
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Move", icon: moveIcon, shortcut: "M", isActive: this._moving, onClick: function () { if (!_this._moving)
42924
- _this.props.globalState.onMoveObservable.notifyObservers(); } }),
42925
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Pan", icon: handIcon, shortcut: "P", isActive: this._panning, onClick: function () { if (!_this._panning)
42926
- _this.props.globalState.onPanObservable.notifyObservers(); } }),
42927
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Zoom", shortcut: "Z", icon: zoomIcon, isActive: this._zooming, onClick: function () { if (!_this._zooming)
42928
- _this.props.globalState.onZoomObservable.notifyObservers(); } }),
42929
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Fit to Window", shortcut: "F", icon: canvasFitIcon, isActive: false, onClick: function () { _this.props.globalState.onFitToWindowObservable.notifyObservers(); } }),
42930
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Toggle Guides", shortcut: "G", icon: guidesIcon, isActive: this._outlines, onClick: function () { _this.props.globalState.onOutlinesObservable.notifyObservers(); } })),
42931
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "commands-right" })));
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
- }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
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
- return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-button " + (this.props.isActive ? "active" : ""), onClick: this.props.onClick, title: this.props.tooltip + " " + (this.props.shortcut ? " (" + this.props.shortcut + ")" : "") },
42962
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-button-icon " + (this.props.isActive ? "active" : "") },
42963
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, color: "white", className: this.props.isActive ? "active" : "" })),
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
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-blocker", onClick: function () {
43002
- _this.setState({ isExpanded: false });
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"]("div", { className: "command-dropdown-icon" },
43017
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon })),
43018
- !this.props.icon &&
43019
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-active" })),
43020
- this.state.isExpanded &&
43021
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-content sub1" + (this.props.toRight ? " toRight" : "") }, this.props.items.map(function (m) {
43022
- if (!m.fileButton) {
43023
- return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-label" + (m.isActive ? " active" : ""), key: m.label, onClick: function () {
43024
- if (!m.onClick) {
43025
- _this.forceUpdate();
43026
- return;
43027
- }
43028
- if (!m.subItems) {
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, activeState: m.label });
43031
- }
43032
- }, title: m.label },
43033
- !m.icon &&
43034
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-label-text" }, (m.isActive ? "> " : "") + m.label),
43035
- m.icon &&
43036
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-dropdown-icon" },
43037
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: m.icon })),
43038
- m.onCheck &&
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: "Check size ratio", target: checkbox, propertyName: "checkSizeRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43262
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { label: "Checked", target: checkbox, propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
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) === 'x' && value.charAt(value.length - 2) === 'p') {
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 = '0';
43497
+ newValue = "0";
43402
43498
  }
43403
- newValue = (negative ? '-' : '') + newValue;
43404
- newValue += percentage ? '%' : 'px';
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 () { _this._updateAlignment("horizontalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT); } }),
43422
- 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 () { _this._updateAlignment("horizontalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_CENTER); } }),
43423
- 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 () { _this._updateAlignment("horizontalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_RIGHT); } }),
43424
- 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 () { _this._updateAlignment("verticalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_TOP); } }),
43425
- 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 () { _this._updateAlignment("verticalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER); } }),
43426
- 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 () { _this._updateAlignment("verticalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_BOTTOM); } })),
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 === '0' || 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"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { iconLabel: "Color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function (newValue) {
43474
- if (newValue === "") {
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"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { iconLabel: "Shadow Color", icon: shadowColorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
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"]("hr", { className: "ge" }),
43491
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "FONT STYLE", value: " ", color: "grey" }),
43492
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43493
- 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 }),
43494
- 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 })),
43495
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43496
- 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 }),
43497
- 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 }))));
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 _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
43556
- /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
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"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { min: 1, isInteger: true, lockObject: this.props.lockObject, label: "Cell Width", target: displayGrid, propertyName: "cellWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43576
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { min: 1, isInteger: true, lockObject: this.props.lockObject, label: "Cell Height", target: displayGrid, propertyName: "cellHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43577
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { min: 1, isInteger: true, lockObject: this.props.lockObject, label: "Minor Line Tickness", target: displayGrid, propertyName: "minorLineTickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43578
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "minorLineColor", target: displayGrid, propertyName: "minorLineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43579
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { min: 1, isInteger: true, lockObject: this.props.lockObject, label: "Major Line Tickness", target: displayGrid, propertyName: "majorLineTickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43580
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Major Line Color", target: displayGrid, propertyName: "majorLineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43581
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { min: 1, isInteger: true, lockObject: this.props.lockObject, label: "Major Line Frequency", target: displayGrid, propertyName: "majorLineFrequency", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
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 _sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/buttonLineComponent */ "./sharedUiComponents/lines/buttonLineComponent.tsx");
43652
- /* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
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-divider" },
43678
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { lockObject: _this.props.lockObject, key: "rText" + i, label: "Row " + i, value: rd, numbersOnly: true, onChange: function (newValue) {
43679
- _this._rowDefinitions[i] = newValue;
43680
- _this._rowEditFlags[i] = true;
43681
- _this._editedRow = true;
43682
- _this.forceUpdate();
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-divider" },
43716
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { lockObject: _this.props.lockObject, key: "ctext" + i, label: "Column " + i, value: cd, numbersOnly: true, onChange: function (newValue) {
43717
- _this._columnDefinitions[i] = newValue;
43718
- _this._columnEditFlags[i] = true;
43719
- _this._editedColumn = true;
43720
- _this.forceUpdate();
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 = '0';
43976
+ newValue = "0";
43847
43977
  }
43848
- newValue += percent ? '%' : 'px';
43978
+ newValue += percent ? "%" : "px";
43849
43979
  return newValue;
43850
43980
  };
43851
43981
  GridPropertyGridComponent.prototype.checkPercentage = function (value) {
43852
- var toSearch = 'px';
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._removingColumn = false;
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
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "ADD ROW", onClick: function () {
43872
- var total = 0;
43873
- var count = 0;
43874
- for (var i = 0; i < grid.rowCount; ++i) {
43875
- var rd = grid.getRowDefinition(i);
43876
- if (rd === null || rd === void 0 ? void 0 : rd.isPercentage) {
43877
- total += rd === null || rd === void 0 ? void 0 : rd.getValue(grid.host);
43878
- count++;
43879
- }
43880
- }
43881
- grid.addRowDefinition(total / count, false);
43882
- _this.setRowValues();
43883
- _this.resizeRow();
43884
- _this.forceUpdate();
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
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "CANCEL", onClick: function () {
43917
- _this._removingRow = false;
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
- this.renderRows(),
43921
- this._editedRow && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "RECALCULATE ROW CHANGES", onClick: function () {
43922
- _this.resizeRow();
43923
- _this.forceUpdate();
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
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "ADD COLUMN", onClick: function () {
43927
- var total = 0;
43928
- var count = 0;
43929
- for (var i = 0; i < grid.columnCount; ++i) {
43930
- var cd = grid.getColumnDefinition(i);
43931
- if (cd === null || cd === void 0 ? void 0 : cd.isPercentage) {
43932
- total += cd === null || cd === void 0 ? void 0 : cd.getValue(grid.host);
43933
- count++;
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
- grid.addColumnDefinition(total / count, false);
43937
- _this.setColumnValues();
43938
- _this.resizeColumn();
43939
- _this.forceUpdate();
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._removingColumn = true;
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
- this._removingColumn &&
43963
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
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"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "CANCEL", onClick: function () {
43973
- _this._removingColumn = false;
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
- this.renderColumns(),
43977
- this._editedColumn && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_4__["ButtonLineComponent"], { label: "RECALCULATE COLUMN CHANGES", onClick: function () {
43978
- _this.resizeColumn();
43979
- _this.forceUpdate();
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: "Source", target: image, propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
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"], { label: "Autoscale", target: image, propertyName: "autoScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44100
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__["OptionsLineComponent"], { label: "Stretch", options: stretchOptions, target: image, propertyName: "stretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: function (value) { return _this.setState({ mode: value }); } }),
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: "Cell Id", isInteger: true, target: image, propertyName: "cellId", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
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: "Text", target: inputText, propertyName: "text", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44154
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Prompt", target: inputText, propertyName: "promptMessage", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44155
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Max width", target: inputText, propertyName: "maxWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44156
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Highlight color", target: inputText, propertyName: "textHighlightColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44157
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__["SliderLineComponent"], { label: "Highligher opacity", minimum: 0, maximum: 1, step: 0.01, target: inputText, propertyName: "highligherOpacity", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44158
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { label: "On focus select all", target: inputText, propertyName: "onFocusSelectAll", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44159
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Focused background", target: inputText, propertyName: "focusedBackground", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44160
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Margin", target: inputText, propertyName: "margin", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44161
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { label: "Auto stretch width", target: inputText, propertyName: "autoStretchWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44162
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Thickness", target: inputText, propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44163
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Placeholder text", target: inputText, propertyName: "placeholderText", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44164
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Placeholder color", target: inputText, propertyName: "placeholderColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
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: "X1", target: line, propertyName: "x1", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44223
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Y1", target: line, propertyName: "y1", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
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: "X2", target: line, propertyName: "x2", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44226
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Y2", target: line, propertyName: "y2", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44227
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Dash pattern", target: line, value: line.dash.join(","), onChange: function (newValue) { return _this.onDashChange(newValue); } })));
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: "Group", target: radioButton, propertyName: "group", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
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 _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
44353
- /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
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"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "RECTANGLE", value: " ", color: "grey" }),
44371
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Thickness", target: scrollViewer, propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44372
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Corner radius", target: scrollViewer, propertyName: "cornerRadius", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
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"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "SCROLLVIEWER", value: " ", color: "grey" }),
44375
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Bar size", target: scrollViewer, propertyName: "barSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44376
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Bar color", target: scrollViewer, propertyName: "barColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44377
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Bar background", target: scrollViewer, propertyName: "barBackground", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44378
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Wheel precision", target: scrollViewer, propertyName: "wheelPrecision", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
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"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Border color", target: slider, propertyName: "borderColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44424
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { label: "Display thumb", target: slider, propertyName: "displayThumb", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44425
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { label: "Thumb circle", target: slider, propertyName: "isThumbCircle", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44426
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { label: "Vertical", target: slider, propertyName: "isVertical", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44427
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { label: "Thumb clamped", target: slider, propertyName: "isThumbClamped", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44428
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Bar offset", target: slider, propertyName: "barOffset", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44429
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Thumb width", target: slider, propertyName: "thumbWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44430
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Minimum", target: slider, propertyName: "minimum", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44431
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Maximum", target: slider, propertyName: "maximum", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44432
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Value", target: slider, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
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"], { label: "Clip children", target: stackPanel, propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44474
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { label: "Vertical", target: stackPanel, propertyName: "isVertical", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
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: "Text", target: textBlock, propertyName: "text", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44530
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__["CheckBoxLineComponent"], { label: "Resize to fit", target: textBlock, propertyName: "resizeToFit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44531
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__["OptionsLineComponent"], { label: "Wrapping", options: wrappingOptions, target: textBlock, propertyName: "textWrapping", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44532
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Line spacing", target: textBlock, propertyName: "lineSpacing", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
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: "Outline width", target: textBlock, propertyName: "outlineWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44536
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Outline color", target: textBlock, propertyName: "outlineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
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).then(function (snippetId) {
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.writeText(adt.snippetId).then(function () {
44924
+ navigator.clipboard
44925
+ .writeText(adt.snippetId)
44926
+ .then(function () {
44740
44927
  alert(alertMessage + ". The ID was copied to your clipboard.");
44741
- }).catch(function (err) {
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
- }).catch(function (err) {
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 button = this.state.currentNode;
44889
- return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_rectanglePropertyGridComponent__WEBPACK_IMPORTED_MODULE_17__["RectanglePropertyGridComponent"], { key: "buttonMenu", rectangle: button, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
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
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_parentingPropertyGridComponent__WEBPACK_IMPORTED_MODULE_29__["ParentingPropertyGridComponent"], { control: this.state.currentNode, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, lockObject: this._lockObject }),
45005
- this.state.currentNode !== this.props.globalState.guiTexture.getChildren()[0] &&
45006
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
45007
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
45008
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: "DELETE ELEMENT", onClick: function () {
45009
- var _a;
45010
- (_a = _this.state.currentNode) === null || _a === void 0 ? void 0 : _a.dispose();
45011
- _this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
45012
- } }),
45013
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: "COPY ELEMENT", onClick: function () {
45014
- if (_this.state.currentNode) {
45015
- _this.props.globalState.workbench.CopyGUIControl(_this.state.currentNode);
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
- 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) {
45041
- _this._sizeOption = value;
45042
- if (_this._sizeOption !== (_sizeOptions.length)) {
45043
- var newSize = _sizeValues[_this._sizeOption];
45044
- _this.props.globalState.workbench.resizeGuiTexture(newSize);
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
- !_babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["DataStorage"].ReadBoolean("Responsive", true) &&
45049
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
45050
- 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) {
45051
- if (!isNaN(newvalue)) {
45052
- _this.props.globalState.workbench.resizeGuiTexture(new _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["Vector2"](newvalue, textureSize.y));
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
- (!draggingSelf && this.props.dragOverHover && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].CENTER && this.props.globalState.workbench.isContainer(control)) && react__WEBPACK_IMPORTED_MODULE_3__["createElement"](react__WEBPACK_IMPORTED_MODULE_3__["Fragment"], null,
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
- (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,
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) { _this._popup = input; }, tabIndex: -1, className: this.state.popupVisible ? "popup show" : "popup", onBlur: function () { return _this.setState({ popupVisible: false }); } }, options.map(function (extensibility) {
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: (10 * (this.props.offset + 0.5)) + "px"
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 (children.map(function (item, i) {
45931
+ return children.map(function (item, i) {
45736
45932
  if (item.name == "Art-Board-Background") {
45737
- return (null);
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: (10 * (this.props.offset + 0.5)) - 20 + "px"
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 && this.props.globalState.workbench.isContainer(entity) ? " parent" : "";
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 += (this.dragOverHover && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].ABOVE && this.props.globalState.draggedControl != null && entity.parent) ? " seAbove" : "";
45778
- className += (this.dragOverHover && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].BELOW && this.props.globalState.draggedControl != null && entity.parent) ? " seBelow" : "";
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 () { _this.onSelect(); }, onDragStart: function (event) {
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.globalState.workbench.isContainer(this.props.entity)) {
45804
- if (y < CONTROL_HEIGHT / 3) { //split in thirds
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) { //split in half
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++) { //skip the first node, the background
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 (this.props.globalState.workbench.isContainer(guiControl)) {
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 - (this._cameraRadias / 1.5);
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++) { //skip the first node, the background
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) { //insert the new control into the adt or parent container
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(//search if there are any copies
46161
- function (//search if there are any copies
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 (this.isContainer(node)) {
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 (this.isContainer(guiControl)) {
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)) { //checking to make sure the element is not being inserted into a child
46321
- if (dropLocationControl != null) { //the control you are dragging onto top
46322
- if (this.props.globalState.workbench.isContainer(dropLocationControl) && //dropping inside a contrainer control
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) { //dropping inside the controls parent container
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) { //special case for grid
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 = (this._textureMesh.scaling.x);
46438
- var ratioY = (this._textureMesh.scaling.z);
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 ((this._isOverGUINode.length === 0) && !evt.button) {
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
- var _this = this;
46524
- // Get the canvas element from the DOM.
46525
- var canvas = document.getElementById("workbench-canvas");
46526
- this._canvas = canvas;
46527
- // Associate a Babylon Engine to it.
46528
- this._engine = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Engine"](canvas);
46529
- // Create our first scene.
46530
- this._scene = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Scene"](this._engine);
46531
- var clearColor = 204 / 255.0;
46532
- this._scene.clearColor = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Color4"](clearColor, clearColor, clearColor, 1.0);
46533
- var 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);
46534
- light.intensity = 0.9;
46535
- var textureSize = 1024;
46536
- this._textureMesh = Object(_babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["CreateGround"])("GuiCanvas", { width: 1, height: 1, subdivisions: 1 }, this._scene);
46537
- this._textureMesh.scaling.x = textureSize;
46538
- this._textureMesh.scaling.z = textureSize;
46539
- this.globalState.guiTexture = _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["AdvancedDynamicTexture"].CreateForMesh(this._textureMesh, textureSize, textureSize, true);
46540
- this._textureMesh.showBoundingBox = true;
46541
- this.artBoardBackground = new _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Rectangle"]("Art-Board-Background");
46542
- this.artBoardBackground.width = "100%";
46543
- this.artBoardBackground.height = "100%";
46544
- this.artBoardBackground.background = "white";
46545
- this.artBoardBackground.thickness = 0;
46546
- this.globalState.guiTexture.addControl(this.artBoardBackground);
46547
- this.setCameraRadius();
46548
- 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);
46549
- this._camera.maxZ = this._cameraMaxRadiasFactor * 2;
46550
- this.addControls(this._scene, this._camera);
46551
- this._scene.getEngine().onCanvasPointerOutObservable.clear();
46552
- this._scene.doNotHandleCursors = true;
46553
- // Watch for browser/canvas resize events
46554
- window.addEventListener("resize", function () {
46555
- _this._engine.resize();
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 react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
46857
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
46858
- /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-dom */ "../../../../node_modules/react-dom/index.js");
46859
- /* harmony import */ var react_dom__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_dom__WEBPACK_IMPORTED_MODULE_1__);
46860
- /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./globalState */ "./globalState.ts");
46861
- /* harmony import */ var _workbenchEditor__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./workbenchEditor */ "./workbenchEditor.tsx");
46862
- /* harmony import */ var _sharedUiComponents_lines_popup__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./sharedUiComponents/lines/popup */ "./sharedUiComponents/lines/popup.ts");
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
- if (this._CurrentState) {
46880
- var popupWindow = _sharedUiComponents_lines_popup__WEBPACK_IMPORTED_MODULE_4__["Popup"]["gui-editor"];
46881
- if (popupWindow) {
46882
- popupWindow.close();
46883
- }
46884
- if (options.currentSnippetToken) {
46885
- try {
46886
- this._CurrentState.workbench.loadFromSnippet(options.currentSnippetToken);
46887
- }
46888
- catch (error) {
46889
- //swallow and continue
46890
- }
46891
- }
46892
- return;
46893
- }
46894
- var hostElement = options.hostElement;
46895
- if (!hostElement) {
46896
- hostElement = _sharedUiComponents_lines_popup__WEBPACK_IMPORTED_MODULE_4__["Popup"].CreatePopup("BABYLON.JS GUI EDITOR", "gui-editor", 1000, 800);
46897
- }
46898
- var globalState = new _globalState__WEBPACK_IMPORTED_MODULE_2__["GlobalState"]();
46899
- globalState.hostElement = hostElement;
46900
- globalState.hostDocument = hostElement.ownerDocument;
46901
- globalState.customSave = options.customSave;
46902
- globalState.customLoad = options.customLoad;
46903
- globalState.hostWindow = hostElement.ownerDocument.defaultView;
46904
- var graphEditor = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_workbenchEditor__WEBPACK_IMPORTED_MODULE_3__["WorkbenchEditor"], {
46905
- globalState: globalState,
46906
- });
46907
- react_dom__WEBPACK_IMPORTED_MODULE_1__["render"](graphEditor, hostElement);
46908
- // create the middle workbench canvas
46909
- if (!globalState.guiTexture) {
46910
- globalState.workbench.createGUICanvas();
46911
- if (options.currentSnippetToken) {
46912
- try {
46913
- globalState.workbench.loadFromSnippet(options.currentSnippetToken);
46914
- }
46915
- catch (error) {
46916
- //swallow and continue
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 = "Transparent";
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", "https://playground.babylonjs.com/textures/grass.png");
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", "https://playground.babylonjs.com/textures/grass.png");
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 = "Transparent";
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 && (valueAsNumber > this.props.max)) {
47598
+ if (this.props.max != undefined && valueAsNumber > this.props.max) {
47363
47599
  valueAsNumber = this.props.max;
47364
47600
  }
47365
- if (this.props.min != undefined && (valueAsNumber < this.props.min)) {
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 (nextProps.color.toHexString() !== this.props.color.toHexString() ||
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 - (top / this._saturationRef.current.clientHeight)));
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 (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); } }));
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 ? ' 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
- _this.state = { isExpanded: false, color: _this.props.target[_this.props.propertyName].clone() };
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 currentState = this.props.isLinear ? nextProps.target[nextProps.propertyName].toGammaSpace() : nextProps.target[nextProps.propertyName];
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] = newColor;
48096
- if (this.props.isLinear) {
48097
- this.props.target[this.props.propertyName] = newColor.toLinearSpace();
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 = _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__["Color3"].FromHexString(newValue);
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.setPropertyValue(this.state.color);
48134
- this.setState({ color: this.state.color });
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.setPropertyValue(this.state.color);
48142
- this.setState({ color: this.state.color });
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.setPropertyValue(this.state.color);
48150
- this.setState({ color: this.state.color });
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('div');
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('copy');
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.color.toHexString();
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
- (this.props.icon && this.props.lockObject) &&
48182
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "", target: this, propertyName: "_colorString", onChange: function (newValue) { return _this.convert(newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
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"]("div", { className: "secondLine" },
48188
- 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); } }),
48189
- 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); } }),
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"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
48270
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-cover", onClick: function (evt) {
48271
- var _a, _b;
48272
- 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"))) {
48273
- return;
48274
- }
48275
- _this.setState({ pickerEnabled: false });
48276
- } },
48277
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-float", ref: this._floatRef },
48278
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__["ColorPicker"], { color: color, linearhint: this.props.linearHint, onColorChanged: function (color) {
48279
- var hex = color.toHexString();
48280
- _this.setState({ hex: hex, color: color });
48281
- _this.props.onColorChanged(hex);
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"]("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine" },
48464
- this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
48465
- (!this.props.icon || this.props.label != "") &&
48466
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label),
48467
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: className },
48468
- 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) {
48469
- if (evt.keyCode !== 13) {
48470
- return;
48471
- }
48472
- if (_this.props.onEnter) {
48473
- _this.props.onEnter(_this._store);
48474
- }
48475
- }, value: this.state.value, onBlur: function () {
48476
- _this.unlock();
48477
- if (_this.props.onEnter) {
48478
- _this.props.onEnter(_this._store);
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) { var changed = _this.prepareDataToRead(_this.state.value); _this.onChange(changed); } }),
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, '_blank');
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" : (this.props.value || "no name")));
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") //all
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 () { _this.onCreate("Rectangle"); }
49828
+ onClick: function () {
49829
+ _this.onCreate("Rectangle");
49830
+ },
49460
49831
  },
49461
49832
  {
49462
49833
  label: "Ellipse",
49463
49834
  icon: ellipseIcon,
49464
- onClick: function () { _this.onCreate("Ellipse"); }
49835
+ onClick: function () {
49836
+ _this.onCreate("Ellipse");
49837
+ },
49465
49838
  },
49466
49839
  {
49467
49840
  label: "StackPanel",
49468
49841
  icon: stackPanelIcon,
49469
- onClick: function () { _this.onCreate("StackPanel"); }
49842
+ onClick: function () {
49843
+ _this.onCreate("StackPanel");
49844
+ },
49470
49845
  },
49471
49846
  {
49472
49847
  label: "Grid",
49473
49848
  icon: gridIcon,
49474
- onClick: function () { _this.onCreate("Grid"); }
49849
+ onClick: function () {
49850
+ _this.onCreate("Grid");
49851
+ },
49475
49852
  },
49476
49853
  {
49477
49854
  label: "ScrollViewer",
49478
49855
  icon: scrollbarIcon,
49479
- onClick: function () { _this.onCreate("ScrollViewer"); }
49856
+ onClick: function () {
49857
+ _this.onCreate("ScrollViewer");
49858
+ },
49480
49859
  },
49481
49860
  {
49482
49861
  label: "Line",
49483
49862
  icon: lineIcon,
49484
- onClick: function () { _this.onCreate("Line"); }
49863
+ onClick: function () {
49864
+ _this.onCreate("Line");
49865
+ },
49485
49866
  },
49486
49867
  {
49487
49868
  label: "Text",
49488
49869
  icon: textBoxIcon,
49489
- onClick: function () { _this.onCreate("Text"); }
49870
+ onClick: function () {
49871
+ _this.onCreate("Text");
49872
+ },
49490
49873
  },
49491
49874
  {
49492
49875
  label: "InputText",
49493
49876
  icon: inputFieldIcon,
49494
- onClick: function () { _this.onCreate("InputText"); }
49877
+ onClick: function () {
49878
+ _this.onCreate("InputText");
49879
+ },
49495
49880
  },
49496
49881
  {
49497
49882
  label: "InputPassword",
49498
49883
  icon: passwordFieldIcon,
49499
- onClick: function () { _this.onCreate("InputPassword"); }
49884
+ onClick: function () {
49885
+ _this.onCreate("InputPassword");
49886
+ },
49500
49887
  },
49501
49888
  {
49502
49889
  label: "Image",
49503
49890
  icon: imageIcon,
49504
- onClick: function () { _this.onCreate("Image"); }
49891
+ onClick: function () {
49892
+ _this.onCreate("Image");
49893
+ },
49505
49894
  },
49506
49895
  {
49507
49896
  label: "DisplayGrid",
49508
49897
  icon: displaygridIcon,
49509
- onClick: function () { _this.onCreate("DisplayGrid"); }
49898
+ onClick: function () {
49899
+ _this.onCreate("DisplayGrid");
49900
+ },
49510
49901
  },
49511
49902
  {
49512
49903
  label: "TextButton",
49513
49904
  icon: buttonIcon,
49514
- onClick: function () { _this.onCreate("TextButton"); }
49905
+ onClick: function () {
49906
+ _this.onCreate("TextButton");
49907
+ },
49515
49908
  },
49516
49909
  {
49517
49910
  label: "Checkbox",
49518
49911
  icon: checkboxIcon,
49519
- onClick: function () { _this.onCreate("Checkbox"); }
49912
+ onClick: function () {
49913
+ _this.onCreate("Checkbox");
49914
+ },
49520
49915
  },
49521
49916
  {
49522
49917
  label: "RadioButton",
49523
49918
  icon: radioButtonIcon,
49524
- onClick: function () { _this.onCreate("RadioButton"); }
49919
+ onClick: function () {
49920
+ _this.onCreate("RadioButton");
49921
+ },
49525
49922
  },
49526
49923
  {
49527
49924
  label: "Slider",
49528
49925
  icon: sliderIcon,
49529
- onClick: function () { _this.onCreate("Slider"); }
49926
+ onClick: function () {
49927
+ _this.onCreate("Slider");
49928
+ },
49530
49929
  },
49531
49930
  {
49532
49931
  label: "VirtualKeyboard",
49533
49932
  icon: keyboardIcon,
49534
- onClick: function () { _this.onCreate("VirtualKeyboard"); }
49933
+ onClick: function () {
49934
+ _this.onCreate("VirtualKeyboard");
49935
+ },
49535
49936
  },
49536
49937
  {
49537
49938
  label: "ColorPicker",
49538
49939
  icon: colorPickerIcon,
49539
- onClick: function () { _this.onCreate("ColorPicker"); }
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
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "toolbar-label-text" }, (m.isActive ? "> " : "") + m.label),
49566
- m.icon &&
49567
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "toolbar-icon" },
49568
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: m.icon })),
49569
- m.onCheck &&
49570
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkBox", className: "toolbar-label-check", onChange: function (evt) {
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;