@babylonjs/gui-editor 5.0.0-beta.6 → 5.0.0-beta.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/babylon.guiEditor.max.js +835 -541
  2. package/babylon.guiEditor.max.js.map +1 -1
  3. package/babylon.guiEditor.module.d.ts +108 -72
  4. package/package.json +2 -2
package/babylon.guiEditor.max.js CHANGED
@@ -10114,7 +10114,7 @@ __webpack_require__.r(__webpack_exports__);
10114
10114
 
10115
10115
  var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default.a);
10116
10116
  // Module
10117
- ___CSS_LOADER_EXPORT___.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-divider-short {\n display: grid;\n grid-template-columns: 1fr 1fr; }\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 width: 30px; }\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 width: 30px; }\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 min-width: 100px;\n margin-left: 15px; }\n #ge-propertyTab .checkBoxLine img {\n width: 30px; }\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 width: 30px; }\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 img {\n width: 30px;\n height: 30px; }\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 width: 30px; }\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", "",{"version":3,"sources":["webpack://./components/propertyTab/propertyTab.scss"],"names":[],"mappings":"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","sourcesContent":[":root {\r\n --backgroundGrey: #aaaaaa;\r\n --spacingHeight: 30px;\r\n}\r\n\r\nhr.ge {\r\n border: 1px solid #d0cece;\r\n}\r\n\r\n#ge-propertyTab {\r\n user-select: none;\r\n $line-padding-left: 5px;\r\n $line-padding-bottom: 0px;\r\n $line-padding-top: 0px;\r\n color:black;\r\n background: #e2e2e2;\r\n font-family: \"acumin-pro-condensed\";\r\n #header {\r\n height: 30px;\r\n font-size: 16px;\r\n color: white;\r\n background: white;\r\n grid-row: 1;\r\n text-align: center;\r\n display: grid;\r\n grid-template-columns: 30px 1fr; \r\n -webkit-user-select: none; \r\n -moz-user-select: none; \r\n -ms-user-select: none; \r\n user-select: none; \r\n\r\n #logo {\r\n position: relative;\r\n background: white;\r\n grid-column: 1; \r\n width: 32px;\r\n height: 32px;\r\n left:0;\r\n display: flex;\r\n align-self: center; \r\n justify-self: center;\r\n } \r\n\r\n #title {\r\n background: white;\r\n color: black;\r\n grid-column: 2; \r\n display: grid;\r\n align-items: center; \r\n text-align: center;\r\n }\r\n }\r\n\r\n .range {\r\n -webkit-appearance: none;\r\n width: 120px;\r\n height: 2px;\r\n background: black;\r\n border-radius: 5px;\r\n outline: none;\r\n opacity: 0.7;\r\n -webkit-transition: .2s;\r\n transition: opacity .2s;\r\n }\r\n \r\n .range:hover {\r\n opacity: 1;\r\n }\r\n \r\n .range::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: #e2e2e2;\r\n border: solid;\r\n border-width: thin;\r\n cursor: pointer;\r\n }\r\n \r\n .range::-moz-range-thumb {\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: rgb(0, 0, 0);\r\n cursor: pointer;\r\n }\r\n\r\n input[type=\"color\"] {\r\n -webkit-appearance: none;\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n padding: 0;\r\n width: 30px;\r\n height: 20px;\r\n }\r\n input[type=\"color\"]::-webkit-color-swatch-wrapper {\r\n padding: 0;\r\n }\r\n input[type=\"color\"]::-webkit-color-swatch {\r\n border: none;\r\n }\r\n\r\n .sliderLine {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: var(--spacingHeight);;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: auto auto auto 1fr;\r\n\r\n .label {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n min-width: 15px;\r\n }\r\n\r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n\r\n .slider {\r\n grid-column: 4;\r\n grid-row: 1;\r\n margin-right: 5px;\r\n width: 90%;\r\n display: flex;\r\n align-items: center;\r\n padding-left: 5px;\r\n }\r\n\r\n .floatLine {\r\n grid-column: 3;\r\n padding-left: 15px;\r\n \r\n .label {\r\n grid-column: 1;\r\n display: none;\r\n align-items: center;\r\n }\r\n \r\n .short {\r\n grid-column: 1; \r\n display: flex;\r\n align-items: center;\r\n \r\n input {\r\n width: 40px;\r\n background-color: transparent;\r\n outline-color: transparent;\r\n border-left: transparent;\r\n border-right: transparent;\r\n border-top: transparent;\r\n outline-width: 0px\r\n }\r\n \r\n input::-webkit-outer-spin-button,\r\n input::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n \r\n input[type=number] {\r\n -moz-appearance: textfield;\r\n }\r\n }\r\n } \r\n } \r\n\r\n .ge-divider {\r\n display: grid;\r\n grid-template-columns: auto auto auto auto auto auto;\r\n }\r\n\r\n .ge-divider-short {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n \r\n .ge-grid-divider {\r\n display: grid;\r\n grid-template-columns: 150px 1fr auto;\r\n \r\n .textLine {\r\n grid-column: auto;\r\n \r\n }\r\n }\r\n\r\n .ge-grid-button-divider {\r\n display: grid;\r\n grid-template-columns: 60px 60px 60px 60px;\r\n }\r\n\r\n .ge-grid-remove {\r\n display: grid;\r\n background-color: #c2c2c2;\r\n margin-bottom: 5px;\r\n filter: invert(1);\r\n }\r\n\r\n .ge-grid-edit {\r\n display: grid;\r\n background-color: #878787;\r\n margin-bottom: 5px;\r\n filter: invert(1);\r\n\r\n }\r\n \r\n .ge-grid {\r\n display: grid;\r\n margin-bottom: 5px;\r\n }\r\n\r\n\r\n .textInputLine {\r\n user-select: none;\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: var(--spacingHeight);\r\n display: grid;\r\n grid-template-columns: auto auto 2fr 1fr;\r\n .label {\r\n grid-column: 2;\r\n padding-left: 5px;\r\n display: flex;\r\n align-items: center;\r\n min-width: 15px;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n }\r\n \r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .value { \r\n display: flex;\r\n align-items: center;\r\n padding-left: 15px;\r\n grid-column: 3;\r\n background: transparent;\r\n input {\r\n width: calc(100% - 5px);\r\n background-color: transparent;\r\n outline-color: transparent;\r\n border-left: transparent;\r\n border-right: transparent;\r\n border-top: transparent;\r\n outline-width: 0px\r\n }\r\n }\r\n\r\n .noUnderline {\r\n input {\r\n border-bottom: transparent;\r\n }\r\n }\r\n }\r\n \r\n .textInputArea {\r\n padding-left: $line-padding-left;\r\n height: 100%;\r\n display: grid;\r\n grid-template-columns: 1fr 120px;\r\n\r\n .label {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .value { \r\n display: flex;\r\n align-items: center;\r\n grid-column: 2;\r\n \r\n textarea {\r\n width: calc(150% - 5px);\r\n margin-left: -50%;\r\n height: 40px;\r\n }\r\n }\r\n }\r\n \r\n .paneContainer {\r\n margin-top: 3px;\r\n display:grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 100%;\r\n \r\n .paneList {\r\n border-left: 3px solid transparent;\r\n }\r\n\r\n &:hover { \r\n .paneList { \r\n border-left: 3px solid rgba(51, 122, 183, 0.8);\r\n }\r\n\r\n .paneContainer-content {\r\n .header {\r\n .title { \r\n border-left: 3px solid rgb(51, 122, 183);\r\n }\r\n }\r\n }\r\n }\r\n \r\n .paneContainer-highlight-border {\r\n grid-row: 1;\r\n grid-column: 1;\r\n opacity: 1;\r\n border: 3px solid red;\r\n transition: opacity 250ms;\r\n pointer-events: none;\r\n \r\n &.transparent {\r\n opacity: 0;\r\n }\r\n }\r\n\r\n .paneContainer-content {\r\n grid-row: 1;\r\n grid-column: 1;\r\n\r\n .header {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n background: #cccccc; \r\n height: var(--spacingHeight);\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n padding-right: 5px; \r\n cursor: pointer;\r\n \r\n .title { \r\n border-left: 3px solid transparent;\r\n padding-left: 5px;\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .collapse {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center; \r\n justify-items: center;\r\n transform-origin: center;\r\n\r\n &.closed {\r\n transform: rotate(180deg);\r\n }\r\n } \r\n }\r\n\r\n .paneList > div:not(:last-child) {\r\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .fragment > div:not(:last-child) {\r\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);\r\n }\r\n }\r\n }\r\n\r\n .color-picker {\r\n height: 150px;\r\n width: 15px;\r\n\r\n .color-rect {\r\n height: 15px;\r\n border: 1px black solid;\r\n cursor: pointer;\r\n }\r\n\r\n .color-picker-cover {\r\n position: fixed;\r\n top: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n left: 0px;\r\n }\r\n\r\n .color-picker-float {\r\n z-index: 2;\r\n position: absolute; \r\n } \r\n }\r\n\r\n .gradient-step {\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 20px 30px 40px auto 20px 30px;\r\n padding-top: 5px;\r\n padding-left: 5px;\r\n padding-bottom: 5px;\r\n\r\n .step {\r\n grid-row: 1;\r\n grid-column: 1;\r\n }\r\n \r\n .color {\r\n grid-row: 1;\r\n grid-column: 2;\r\n cursor: pointer;\r\n }\r\n\r\n .step-value { \r\n margin-left: 5px; \r\n grid-row: 1;\r\n grid-column: 3;\r\n text-align: right;\r\n margin-right: 5px;\r\n }\r\n\r\n .step-slider { \r\n grid-row: 1;\r\n grid-column: 4;\r\n display: grid;\r\n justify-content: stretch;\r\n align-content: center;\r\n margin-right: -5px;\r\n padding-left: 12px;\r\n\r\n input {\r\n width: 90%;\r\n }\r\n }\r\n\r\n .gradient-copy { \r\n grid-row: 1;\r\n grid-column: 5;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n \r\n .img {\r\n height: 20px;\r\n width: 20px;\r\n }\r\n .img:hover {\r\n cursor: pointer;\r\n }\r\n\r\n }\r\n .gradient-delete { \r\n grid-row: 1;\r\n grid-column: 6;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n .img {\r\n height: 20px;\r\n width: 20px;\r\n }\r\n .img:hover {\r\n cursor: pointer;\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n .command-button {\r\n cursor: pointer;\r\n width: auto;\r\n\r\n .command-label {\r\n display: none;\r\n } \r\n\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n color: white;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n &:hover {\r\n background-color: white;\r\n } \r\n \r\n .active {\r\n transform-origin: center;\r\n background-color: white;\r\n }\r\n\r\n img {\r\n &.active {\r\n background-color: white;\r\n }\r\n }\r\n }\r\n\r\n .command-button-alt {\r\n cursor: pointer;\r\n width: 40px;\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n .command-label {\r\n display: none;\r\n } \r\n\r\n background-color: white;\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n &:hover {\r\n background-color: #c2c2c2;\r\n filter: invert(1);\r\n } \r\n }\r\n\r\n .command-button-alt-disabled {\r\n cursor: pointer;\r\n pointer-events: none;\r\n width: 40px;\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n .command-label {\r\n display: none;\r\n } \r\n\r\n background-color: white;\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n img {\r\n filter: invert(1);\r\n }\r\n }\r\n\r\n \r\n .command-button-alt-active {\r\n cursor: pointer;\r\n pointer-events: none;\r\n width: 40px;\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n .command-label {\r\n display: none;\r\n } \r\n\r\n background-color: #c2c2c2;\r\n filter: invert(1);\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n .floatLine {\r\n user-select: none;\r\n padding-left: $line-padding-left;\r\n height: var(--spacingHeight);\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n display: grid;\r\n grid-template-columns: auto auto 2fr 1fr;\r\n\r\n .label {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n min-width: 15px;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n }\r\n\r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .value { \r\n display: flex;\r\n padding-left: 15px;\r\n align-items: center;\r\n grid-column: 3;\r\n background: transparent;\r\n input {\r\n width: calc(100% - 5px);\r\n background-color: transparent;\r\n outline-color: transparent;\r\n border-left: transparent;\r\n border-right: transparent;\r\n border-top: transparent;\r\n outline-width: 0px\r\n }\r\n }\r\n\r\n .short {\r\n grid-column: 2;\r\n \r\n display: flex;\r\n align-items: center;\r\n \r\n input {\r\n width: 27px;\r\n }\r\n \r\n input::-webkit-outer-spin-button,\r\n input::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n\r\n input[type=number] {\r\n -moz-appearance: textfield;\r\n }\r\n }\r\n }\r\n\r\n .vector3Line {\r\n padding-left:$line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top; \r\n display: grid;\r\n .firstLine {\r\n display: grid;\r\n grid-template-columns: 1fr auto 20px;\r\n height: var(--spacingHeight);\r\n\r\n .label {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .vector {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n text-align: right;\r\n opacity: 0.8;\r\n }\r\n\r\n .expand {\r\n grid-column: 3;\r\n display: grid;\r\n align-items: center;\r\n justify-items: center;\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n .secondLine {\r\n display: grid;\r\n padding-right: 5px; \r\n border-left: 1px solid rgb(51, 122, 183);\r\n\r\n .no-right-margin {\r\n margin-right: 0;\r\n }\r\n\r\n .numeric {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n }\r\n\r\n .numeric-label {\r\n text-align: right;\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center; \r\n justify-self: right;\r\n margin-right: 10px; \r\n }\r\n\r\n .numeric-value {\r\n width: 120px;\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center; \r\n border: 1px solid rgb(51, 122, 183);\r\n } \r\n }\r\n }\r\n\r\n .buttonLine {\r\n height: var(--spacingHeight);\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n display: grid;\r\n align-items: center;\r\n justify-items: stretch;\r\n padding-bottom: 5px;\r\n input[type=\"file\"] {\r\n display: none;\r\n }\r\n\r\n .file-upload { \r\n background: var(--backgroundGrey);\r\n border: 1px solid #424242;\r\n margin: 5px 10px;\r\n color:white;\r\n padding: 4px 5px;\r\n padding-top: 0px;\r\n opacity: 0.9;\r\n cursor: pointer;\r\n text-align: center;\r\n border-radius: 4px;\r\n }\r\n\r\n .file-upload:hover {\r\n opacity: 1.0;\r\n }\r\n\r\n .file-upload:active {\r\n transform: scale(0.98);\r\n transform-origin: 0.5 0.5;\r\n }\r\n\r\n button {\r\n background: var(--backgroundGrey);\r\n border: 1px solid #424242;\r\n margin: 5px 10px 5px 10px;\r\n color:white;\r\n padding: 4px 5px;\r\n opacity: 0.9;\r\n border-radius: 4px;\r\n }\r\n\r\n button:hover {\r\n opacity: 1.0;\r\n }\r\n\r\n button:active {\r\n background: #282828;\r\n } \r\n \r\n button:focus {\r\n border: 1px solid #424242;\r\n outline: 0px;\r\n } \r\n }\r\n\r\n .numeric {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: var(--spacingHeight);;\r\n display: grid;\r\n grid-template-columns: 1fr 120px auto;\r\n\r\n .numeric-label {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .number { \r\n display: flex;\r\n align-items: center;\r\n grid-column: 2;\r\n height: 10px;\r\n .input {\r\n width: calc(100% - 5px);\r\n height: 10px;\r\n }\r\n }\r\n }\r\n \r\n .checkBoxLine {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: var(--spacingHeight);\r\n display: grid;\r\n grid-template-columns: auto auto 1fr ;\r\n\r\n .label {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n min-width: 100px;\r\n margin-left: 15px;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n }\r\n \r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .checkBox {\r\n grid-column: 3;\r\n display: flex;\r\n align-items: center;\r\n padding-left: 15px;\r\n \r\n .lbl {\r\n position: relative;\r\n display: block;\r\n height: 14px;\r\n width: 34px;\r\n margin-right: 5px;\r\n border-radius: 100px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n border: solid;\r\n border-width: thin;\r\n }\r\n\r\n .lbl:after {\r\n position: absolute;\r\n left: 3px;\r\n top: 1px;\r\n display: block;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 100px;\r\n background: #e2e2e2;\r\n box-shadow: 0px 3px 3px rgba(0,0,0,0.05);\r\n content: '';\r\n transition: all 0.15s ease;\r\n border: solid;\r\n border-width: thin;\r\n }\r\n\r\n .lbl:active:after { \r\n transform: scale(1.15, 0.85); \r\n }\r\n\r\n .cbx:checked ~ label { \r\n background: transparent;\r\n \r\n }\r\n\r\n .cbx:checked ~ label:after {\r\n left: 20px;\r\n background: rgb(0, 0, 0);\r\n border: solid;\r\n border-width: thin;\r\n }\r\n\r\n .cbx:checked ~ label.disabled { \r\n background: rgb(0, 0, 0);\r\n cursor: pointer;\r\n }\r\n\r\n .cbx:checked ~ label.disabled:after {\r\n left: 20px;\r\n background: rgb(85, 85, 85);\r\n cursor: pointer;\r\n }\r\n\r\n .cbx ~ label.disabled {\r\n background: rgb(85, 85, 85);\r\n cursor: pointer;\r\n }\r\n\r\n .hidden { \r\n display: none; \r\n } \r\n } \r\n } \r\n\r\n .listLine {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: var(--spacingHeight);\r\n display: grid;\r\n grid-template-columns: auto 1fr auto ;\r\n\r\n .label {\r\n grid-column: 2;\r\n display: none;\r\n align-items: center;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n }\r\n\r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .options {\r\n grid-column: 2;\r\n padding-left: 15px;\r\n display: flex;\r\n align-items: center; \r\n margin-right: 5px;\r\n\r\n select {\r\n width: 120px;\r\n height: 25px;\r\n border: transparent;\r\n border-radius: 4px;\r\n }\r\n } \r\n } \r\n \r\n .color3Line {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n display: grid;\r\n\r\n .firstLine {\r\n height: var(--spacingHeight);\r\n display: grid;\r\n grid-template-columns: auto auto 1fr;\r\n\r\n .label {\r\n grid-column: 2;\r\n padding-left: 5px;\r\n display: none;\r\n align-items: center;\r\n min-width: 15px;\r\n }\r\n \r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n height: 30px;\r\n }\r\n \r\n .textInputLine {\r\n grid-column: 3;\r\n padding-left: 0px;\r\n }\r\n \r\n .color3 {\r\n grid-column: 2; \r\n margin-top: 6px;\r\n display: flex;\r\n align-items: center; \r\n \r\n input {\r\n margin-right: 5px;\r\n }\r\n }\r\n\r\n .copy {\r\n grid-column: 4;\r\n display: none;\r\n align-items: center;\r\n justify-items: center;\r\n cursor: pointer;\r\n color: black;\r\n img {\r\n height: 100%;\r\n width: 20px;\r\n }\r\n }\r\n\r\n .expand {\r\n grid-column: 4;\r\n display: none;\r\n align-items: center;\r\n justify-items: center;\r\n cursor: pointer;\r\n\r\n img {\r\n height: 100%;\r\n width: 20px;\r\n }\r\n }\r\n } \r\n\r\n .secondLine {\r\n display: grid;\r\n padding-right: 5px; \r\n border-left: 1px solid rgb(51, 122, 183);\r\n\r\n .numeric {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n }\r\n\r\n .numeric-label {\r\n text-align: right;\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center; \r\n justify-self: right;\r\n margin-right: 10px; \r\n }\r\n\r\n .numeric-value {\r\n width: 120px;\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center; \r\n border: 1px solid rgb(51, 122, 183);\r\n } \r\n } \r\n } \r\n \r\n .textLine {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: auto;\r\n display: grid;\r\n grid-template-columns: auto auto 2fr 1fr;\r\n .label {\r\n grid-column: 2;\r\n padding-left: 5px;\r\n padding-top: 4px;\r\n display: flex;\r\n align-items: left;\r\n min-width: 15px;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n }\r\n\r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .link-value {\r\n grid-column: 2;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n text-align: end;\r\n opacity: 0.8;\r\n margin:5px;\r\n margin-top: 6px;\r\n max-width: 140px;\r\n text-decoration: underline;\r\n cursor: pointer;\r\n }\r\n\r\n .value {\r\n display: none;\r\n grid-column: 3;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n text-align: end;\r\n opacity: 0.8;\r\n margin:5px;\r\n margin-top: 6px;\r\n max-width: 200px;\r\n -webkit-user-select: text; \r\n -moz-user-select: text; \r\n -ms-user-select: text; \r\n user-select: text; \r\n\r\n &.check {\r\n color: green;\r\n }\r\n\r\n &.uncheck {\r\n color: red;\r\n } \r\n }\r\n } \r\n\r\n}"],"sourceRoot":""}]);
10117
+ ___CSS_LOADER_EXPORT___.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-divider-short {\n display: grid;\n grid-template-columns: 1fr 1fr; }\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 width: 30px; }\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-background {\n height: 15px;\n border: 1px black solid;\n cursor: pointer;\n background: repeating-conic-gradient(#E2E2E2 0% 25%, white 0% 50%) 50%/10px 10px; }\n #ge-propertyTab .color-picker .color-rect-background .color-rect {\n height: 100%; }\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 width: 30px; }\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 min-width: 100px;\n margin-left: 15px; }\n #ge-propertyTab .checkBoxLine img {\n width: 30px; }\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.conflict ~ label:after {\n left: 10px;\n background: repeating-linear-gradient(45deg, transparent, transparent 5px, black 5px, black 10px); }\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 width: 30px; }\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 img {\n width: 30px;\n height: 30px; }\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 width: 30px; }\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", "",{"version":3,"sources":["webpack://./components/propertyTab/propertyTab.scss"],"names":[],"mappings":"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","sourcesContent":[":root {\r\n --backgroundGrey: #aaaaaa;\r\n --spacingHeight: 30px;\r\n}\r\n\r\nhr.ge {\r\n border: 1px solid #d0cece;\r\n}\r\n\r\n#ge-propertyTab {\r\n user-select: none;\r\n $line-padding-left: 5px;\r\n $line-padding-bottom: 0px;\r\n $line-padding-top: 0px;\r\n color:black;\r\n background: #e2e2e2;\r\n font-family: \"acumin-pro-condensed\";\r\n #header {\r\n height: 30px;\r\n font-size: 16px;\r\n color: white;\r\n background: white;\r\n grid-row: 1;\r\n text-align: center;\r\n display: grid;\r\n grid-template-columns: 30px 1fr; \r\n -webkit-user-select: none; \r\n -moz-user-select: none; \r\n -ms-user-select: none; \r\n user-select: none; \r\n\r\n #logo {\r\n position: relative;\r\n background: white;\r\n grid-column: 1; \r\n width: 32px;\r\n height: 32px;\r\n left:0;\r\n display: flex;\r\n align-self: center; \r\n justify-self: center;\r\n } \r\n\r\n #title {\r\n background: white;\r\n color: black;\r\n grid-column: 2; \r\n display: grid;\r\n align-items: center; \r\n text-align: center;\r\n }\r\n }\r\n\r\n .range {\r\n -webkit-appearance: none;\r\n width: 120px;\r\n height: 2px;\r\n background: black;\r\n border-radius: 5px;\r\n outline: none;\r\n opacity: 0.7;\r\n -webkit-transition: .2s;\r\n transition: opacity .2s;\r\n }\r\n \r\n .range:hover {\r\n opacity: 1;\r\n }\r\n \r\n .range::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: #e2e2e2;\r\n border: solid;\r\n border-width: thin;\r\n cursor: pointer;\r\n }\r\n \r\n .range::-moz-range-thumb {\r\n width: 14px;\r\n height: 14px;\r\n border-radius: 50%;\r\n background: rgb(0, 0, 0);\r\n cursor: pointer;\r\n }\r\n\r\n input[type=\"color\"] {\r\n -webkit-appearance: none;\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n padding: 0;\r\n width: 30px;\r\n height: 20px;\r\n }\r\n input[type=\"color\"]::-webkit-color-swatch-wrapper {\r\n padding: 0;\r\n }\r\n input[type=\"color\"]::-webkit-color-swatch {\r\n border: none;\r\n }\r\n\r\n .sliderLine {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: var(--spacingHeight);;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: auto auto auto 1fr;\r\n\r\n .label {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n min-width: 15px;\r\n }\r\n\r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n\r\n .slider {\r\n grid-column: 4;\r\n grid-row: 1;\r\n margin-right: 5px;\r\n width: 90%;\r\n display: flex;\r\n align-items: center;\r\n padding-left: 5px;\r\n }\r\n\r\n .floatLine {\r\n grid-column: 3;\r\n padding-left: 15px;\r\n \r\n .label {\r\n grid-column: 1;\r\n display: none;\r\n align-items: center;\r\n }\r\n \r\n .short {\r\n grid-column: 1; \r\n display: flex;\r\n align-items: center;\r\n \r\n input {\r\n width: 40px;\r\n background-color: transparent;\r\n outline-color: transparent;\r\n border-left: transparent;\r\n border-right: transparent;\r\n border-top: transparent;\r\n outline-width: 0px\r\n }\r\n \r\n input::-webkit-outer-spin-button,\r\n input::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n \r\n input[type=number] {\r\n -moz-appearance: textfield;\r\n }\r\n }\r\n } \r\n } \r\n\r\n .ge-divider {\r\n display: grid;\r\n grid-template-columns: auto auto auto auto auto auto;\r\n }\r\n\r\n .ge-divider-short {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n }\r\n \r\n .ge-grid-divider {\r\n display: grid;\r\n grid-template-columns: 150px 1fr auto;\r\n \r\n .textLine {\r\n grid-column: auto;\r\n \r\n }\r\n }\r\n\r\n .ge-grid-button-divider {\r\n display: grid;\r\n grid-template-columns: 60px 60px 60px 60px;\r\n }\r\n\r\n .ge-grid-remove {\r\n display: grid;\r\n background-color: #c2c2c2;\r\n margin-bottom: 5px;\r\n filter: invert(1);\r\n }\r\n\r\n .ge-grid-edit {\r\n display: grid;\r\n background-color: #878787;\r\n margin-bottom: 5px;\r\n filter: invert(1);\r\n\r\n }\r\n \r\n .ge-grid {\r\n display: grid;\r\n margin-bottom: 5px;\r\n }\r\n\r\n\r\n .textInputLine {\r\n user-select: none;\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: var(--spacingHeight);\r\n display: grid;\r\n grid-template-columns: auto auto 2fr 1fr;\r\n .label {\r\n grid-column: 2;\r\n padding-left: 5px;\r\n display: flex;\r\n align-items: center;\r\n min-width: 15px;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n }\r\n \r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .value { \r\n display: flex;\r\n align-items: center;\r\n padding-left: 15px;\r\n grid-column: 3;\r\n background: transparent;\r\n input {\r\n width: calc(100% - 5px);\r\n background-color: transparent;\r\n outline-color: transparent;\r\n border-left: transparent;\r\n border-right: transparent;\r\n border-top: transparent;\r\n outline-width: 0px\r\n }\r\n }\r\n\r\n .noUnderline {\r\n input {\r\n border-bottom: transparent;\r\n }\r\n }\r\n }\r\n \r\n .textInputArea {\r\n padding-left: $line-padding-left;\r\n height: 100%;\r\n display: grid;\r\n grid-template-columns: 1fr 120px;\r\n\r\n .label {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .value { \r\n display: flex;\r\n align-items: center;\r\n grid-column: 2;\r\n \r\n textarea {\r\n width: calc(150% - 5px);\r\n margin-left: -50%;\r\n height: 40px;\r\n }\r\n }\r\n }\r\n \r\n .paneContainer {\r\n margin-top: 3px;\r\n display:grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 100%;\r\n \r\n .paneList {\r\n border-left: 3px solid transparent;\r\n }\r\n\r\n &:hover { \r\n .paneList { \r\n border-left: 3px solid rgba(51, 122, 183, 0.8);\r\n }\r\n\r\n .paneContainer-content {\r\n .header {\r\n .title { \r\n border-left: 3px solid rgb(51, 122, 183);\r\n }\r\n }\r\n }\r\n }\r\n \r\n .paneContainer-highlight-border {\r\n grid-row: 1;\r\n grid-column: 1;\r\n opacity: 1;\r\n border: 3px solid red;\r\n transition: opacity 250ms;\r\n pointer-events: none;\r\n \r\n &.transparent {\r\n opacity: 0;\r\n }\r\n }\r\n\r\n .paneContainer-content {\r\n grid-row: 1;\r\n grid-column: 1;\r\n\r\n .header {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n background: #cccccc; \r\n height: var(--spacingHeight);\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n padding-right: 5px; \r\n cursor: pointer;\r\n \r\n .title { \r\n border-left: 3px solid transparent;\r\n padding-left: 5px;\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .collapse {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center; \r\n justify-items: center;\r\n transform-origin: center;\r\n\r\n &.closed {\r\n transform: rotate(180deg);\r\n }\r\n } \r\n }\r\n\r\n .paneList > div:not(:last-child) {\r\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .fragment > div:not(:last-child) {\r\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);\r\n }\r\n }\r\n }\r\n\r\n .color-picker {\r\n height: 150px;\r\n width: 15px;\r\n\r\n .color-rect-background {\r\n height: 15px;\r\n border: 1px black solid;\r\n cursor: pointer;\r\n background: repeating-conic-gradient(#E2E2E2 0% 25%, white 0% 50%) 50% / 10px 10px;\r\n .color-rect {\r\n height: 100%;\r\n }\r\n }\r\n\r\n .color-picker-cover {\r\n position: fixed;\r\n top: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n left: 0px;\r\n }\r\n\r\n .color-picker-float {\r\n z-index: 2;\r\n position: absolute; \r\n } \r\n }\r\n\r\n .gradient-step {\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 20px 30px 40px auto 20px 30px;\r\n padding-top: 5px;\r\n padding-left: 5px;\r\n padding-bottom: 5px;\r\n\r\n .step {\r\n grid-row: 1;\r\n grid-column: 1;\r\n }\r\n \r\n .color {\r\n grid-row: 1;\r\n grid-column: 2;\r\n cursor: pointer;\r\n }\r\n\r\n .step-value { \r\n margin-left: 5px; \r\n grid-row: 1;\r\n grid-column: 3;\r\n text-align: right;\r\n margin-right: 5px;\r\n }\r\n\r\n .step-slider { \r\n grid-row: 1;\r\n grid-column: 4;\r\n display: grid;\r\n justify-content: stretch;\r\n align-content: center;\r\n margin-right: -5px;\r\n padding-left: 12px;\r\n\r\n input {\r\n width: 90%;\r\n }\r\n }\r\n\r\n .gradient-copy { \r\n grid-row: 1;\r\n grid-column: 5;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n \r\n .img {\r\n height: 20px;\r\n width: 20px;\r\n }\r\n .img:hover {\r\n cursor: pointer;\r\n }\r\n\r\n }\r\n .gradient-delete { \r\n grid-row: 1;\r\n grid-column: 6;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n .img {\r\n height: 20px;\r\n width: 20px;\r\n }\r\n .img:hover {\r\n cursor: pointer;\r\n }\r\n\r\n }\r\n\r\n }\r\n\r\n .command-button {\r\n cursor: pointer;\r\n width: auto;\r\n\r\n .command-label {\r\n display: none;\r\n } \r\n\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n color: white;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n &:hover {\r\n background-color: white;\r\n } \r\n \r\n .active {\r\n transform-origin: center;\r\n background-color: white;\r\n }\r\n\r\n img {\r\n &.active {\r\n background-color: white;\r\n }\r\n }\r\n }\r\n\r\n .command-button-alt {\r\n cursor: pointer;\r\n width: 40px;\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n .command-label {\r\n display: none;\r\n } \r\n\r\n background-color: white;\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n &:hover {\r\n background-color: #c2c2c2;\r\n filter: invert(1);\r\n } \r\n }\r\n\r\n .command-button-alt-disabled {\r\n cursor: pointer;\r\n pointer-events: none;\r\n width: 40px;\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n .command-label {\r\n display: none;\r\n } \r\n\r\n background-color: white;\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n img {\r\n filter: invert(1);\r\n }\r\n }\r\n\r\n \r\n .command-button-alt-active {\r\n cursor: pointer;\r\n pointer-events: none;\r\n width: 40px;\r\n margin-left: 5px;\r\n margin-right: 5px;\r\n .command-label {\r\n display: none;\r\n } \r\n\r\n background-color: #c2c2c2;\r\n filter: invert(1);\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n }\r\n\r\n .floatLine {\r\n user-select: none;\r\n padding-left: $line-padding-left;\r\n height: var(--spacingHeight);\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n display: grid;\r\n grid-template-columns: auto auto 2fr 1fr;\r\n\r\n .label {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n min-width: 15px;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n }\r\n\r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .value { \r\n display: flex;\r\n padding-left: 15px;\r\n align-items: center;\r\n grid-column: 3;\r\n background: transparent;\r\n input {\r\n width: calc(100% - 5px);\r\n background-color: transparent;\r\n outline-color: transparent;\r\n border-left: transparent;\r\n border-right: transparent;\r\n border-top: transparent;\r\n outline-width: 0px\r\n }\r\n }\r\n\r\n .short {\r\n grid-column: 2;\r\n \r\n display: flex;\r\n align-items: center;\r\n \r\n input {\r\n width: 27px;\r\n }\r\n \r\n input::-webkit-outer-spin-button,\r\n input::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n\r\n input[type=number] {\r\n -moz-appearance: textfield;\r\n }\r\n }\r\n }\r\n\r\n .vector3Line {\r\n padding-left:$line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top; \r\n display: grid;\r\n .firstLine {\r\n display: grid;\r\n grid-template-columns: 1fr auto 20px;\r\n height: var(--spacingHeight);\r\n\r\n .label {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .vector {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n text-align: right;\r\n opacity: 0.8;\r\n }\r\n\r\n .expand {\r\n grid-column: 3;\r\n display: grid;\r\n align-items: center;\r\n justify-items: center;\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n .secondLine {\r\n display: grid;\r\n padding-right: 5px; \r\n border-left: 1px solid rgb(51, 122, 183);\r\n\r\n .no-right-margin {\r\n margin-right: 0;\r\n }\r\n\r\n .numeric {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n }\r\n\r\n .numeric-label {\r\n text-align: right;\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center; \r\n justify-self: right;\r\n margin-right: 10px; \r\n }\r\n\r\n .numeric-value {\r\n width: 120px;\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center; \r\n border: 1px solid rgb(51, 122, 183);\r\n } \r\n }\r\n }\r\n\r\n .buttonLine {\r\n height: var(--spacingHeight);\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n display: grid;\r\n align-items: center;\r\n justify-items: stretch;\r\n padding-bottom: 5px;\r\n input[type=\"file\"] {\r\n display: none;\r\n }\r\n\r\n .file-upload { \r\n background: var(--backgroundGrey);\r\n border: 1px solid #424242;\r\n margin: 5px 10px;\r\n color:white;\r\n padding: 4px 5px;\r\n padding-top: 0px;\r\n opacity: 0.9;\r\n cursor: pointer;\r\n text-align: center;\r\n border-radius: 4px;\r\n }\r\n\r\n .file-upload:hover {\r\n opacity: 1.0;\r\n }\r\n\r\n .file-upload:active {\r\n transform: scale(0.98);\r\n transform-origin: 0.5 0.5;\r\n }\r\n\r\n button {\r\n background: var(--backgroundGrey);\r\n border: 1px solid #424242;\r\n margin: 5px 10px 5px 10px;\r\n color:white;\r\n padding: 4px 5px;\r\n opacity: 0.9;\r\n border-radius: 4px;\r\n }\r\n\r\n button:hover {\r\n opacity: 1.0;\r\n }\r\n\r\n button:active {\r\n background: #282828;\r\n } \r\n \r\n button:focus {\r\n border: 1px solid #424242;\r\n outline: 0px;\r\n } \r\n }\r\n\r\n .numeric {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: var(--spacingHeight);;\r\n display: grid;\r\n grid-template-columns: 1fr 120px auto;\r\n\r\n .numeric-label {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .number { \r\n display: flex;\r\n align-items: center;\r\n grid-column: 2;\r\n height: 10px;\r\n .input {\r\n width: calc(100% - 5px);\r\n height: 10px;\r\n }\r\n }\r\n }\r\n \r\n .checkBoxLine {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: var(--spacingHeight);\r\n display: grid;\r\n grid-template-columns: auto auto 1fr ;\r\n\r\n .label {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n min-width: 100px;\r\n margin-left: 15px;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n }\r\n \r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .checkBox {\r\n grid-column: 3;\r\n display: flex;\r\n align-items: center;\r\n padding-left: 15px;\r\n \r\n .lbl {\r\n position: relative;\r\n display: block;\r\n height: 14px;\r\n width: 34px;\r\n margin-right: 5px;\r\n border-radius: 100px;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n border: solid;\r\n border-width: thin;\r\n }\r\n\r\n .lbl:after {\r\n position: absolute;\r\n left: 3px;\r\n top: 1px;\r\n display: block;\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 100px;\r\n background: #e2e2e2;\r\n box-shadow: 0px 3px 3px rgba(0,0,0,0.05);\r\n content: '';\r\n transition: all 0.15s ease;\r\n border: solid;\r\n border-width: thin;\r\n }\r\n\r\n .lbl:active:after { \r\n transform: scale(1.15, 0.85); \r\n }\r\n\r\n .cbx:checked ~ label { \r\n background: transparent;\r\n \r\n }\r\n\r\n .cbx:checked ~ label:after {\r\n left: 20px;\r\n background: rgb(0, 0, 0);\r\n border: solid;\r\n border-width: thin;\r\n }\r\n\r\n .cbx.conflict ~ label:after {\r\n left: 10px;\r\n background: repeating-linear-gradient(45deg, transparent, transparent 5px, black 5px, black 10px);\r\n }\r\n\r\n .cbx:checked ~ label.disabled { \r\n background: rgb(0, 0, 0);\r\n cursor: pointer;\r\n }\r\n\r\n .cbx:checked ~ label.disabled:after {\r\n left: 20px;\r\n background: rgb(85, 85, 85);\r\n cursor: pointer;\r\n }\r\n\r\n .cbx ~ label.disabled {\r\n background: rgb(85, 85, 85);\r\n cursor: pointer;\r\n }\r\n\r\n .hidden { \r\n display: none; \r\n } \r\n } \r\n } \r\n\r\n .listLine {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: var(--spacingHeight);\r\n display: grid;\r\n grid-template-columns: auto 1fr auto ;\r\n\r\n .label {\r\n grid-column: 2;\r\n display: none;\r\n align-items: center;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n }\r\n\r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .options {\r\n grid-column: 2;\r\n padding-left: 15px;\r\n display: flex;\r\n align-items: center; \r\n margin-right: 5px;\r\n\r\n select {\r\n width: 120px;\r\n height: 25px;\r\n border: transparent;\r\n border-radius: 4px;\r\n }\r\n } \r\n } \r\n \r\n .color3Line {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n display: grid;\r\n\r\n .firstLine {\r\n height: var(--spacingHeight);\r\n display: grid;\r\n grid-template-columns: auto auto 1fr;\r\n\r\n .label {\r\n grid-column: 2;\r\n padding-left: 5px;\r\n display: none;\r\n align-items: center;\r\n min-width: 15px;\r\n }\r\n \r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n height: 30px;\r\n }\r\n \r\n .textInputLine {\r\n grid-column: 3;\r\n padding-left: 0px;\r\n }\r\n \r\n .color3 {\r\n grid-column: 2; \r\n margin-top: 6px;\r\n display: flex;\r\n align-items: center; \r\n \r\n input {\r\n margin-right: 5px;\r\n }\r\n }\r\n\r\n .copy {\r\n grid-column: 4;\r\n display: none;\r\n align-items: center;\r\n justify-items: center;\r\n cursor: pointer;\r\n color: black;\r\n img {\r\n height: 100%;\r\n width: 20px;\r\n }\r\n }\r\n\r\n .expand {\r\n grid-column: 4;\r\n display: none;\r\n align-items: center;\r\n justify-items: center;\r\n cursor: pointer;\r\n\r\n img {\r\n height: 100%;\r\n width: 20px;\r\n }\r\n }\r\n } \r\n\r\n .secondLine {\r\n display: grid;\r\n padding-right: 5px; \r\n border-left: 1px solid rgb(51, 122, 183);\r\n\r\n .numeric {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n }\r\n\r\n .numeric-label {\r\n text-align: right;\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center; \r\n justify-self: right;\r\n margin-right: 10px; \r\n }\r\n\r\n .numeric-value {\r\n width: 120px;\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center; \r\n border: 1px solid rgb(51, 122, 183);\r\n } \r\n } \r\n } \r\n \r\n .textLine {\r\n padding-left: $line-padding-left;\r\n padding-bottom: $line-padding-bottom;\r\n padding-top: $line-padding-top;\r\n height: auto;\r\n display: grid;\r\n grid-template-columns: auto auto 2fr 1fr;\r\n .label {\r\n grid-column: 2;\r\n padding-left: 5px;\r\n padding-top: 4px;\r\n display: flex;\r\n align-items: left;\r\n min-width: 15px;\r\n }\r\n\r\n img {\r\n width: 30px;\r\n }\r\n\r\n .img {\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .link-value {\r\n grid-column: 2;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n text-align: end;\r\n opacity: 0.8;\r\n margin:5px;\r\n margin-top: 6px;\r\n max-width: 140px;\r\n text-decoration: underline;\r\n cursor: pointer;\r\n }\r\n\r\n .value {\r\n display: none;\r\n grid-column: 3;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n text-align: end;\r\n opacity: 0.8;\r\n margin:5px;\r\n margin-top: 6px;\r\n max-width: 200px;\r\n -webkit-user-select: text; \r\n -moz-user-select: text; \r\n -ms-user-select: text; \r\n user-select: text; \r\n\r\n &.check {\r\n color: green;\r\n }\r\n\r\n &.uncheck {\r\n color: red;\r\n } \r\n }\r\n } \r\n\r\n}"],"sourceRoot":""}]);
10118
10118
  // Exports
10119
10119
  /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
10120
10120
 
@@ -10189,7 +10189,7 @@ __webpack_require__.r(__webpack_exports__);
10189
10189
 
10190
10190
  var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default.a);
10191
10191
  // Module
10192
- ___CSS_LOADER_EXPORT___.push([module.i, ":root {\n --blackBarHeight: 55px; }\n\n#gui-editor-workbench-root {\n display: grid;\n grid-template-rows: calc(100% - 55px);\n height: 100%;\n width: 100%;\n background: #e2e2e2;\n font: 14px \"acumin-pro-condensed\"; }\n\n.wait-screen {\n display: grid;\n justify-content: center;\n align-content: center;\n height: 100%;\n width: 100%;\n background: #464646;\n opacity: 0.95;\n color: white;\n font: 24px \"acumin-pro-condensed\";\n position: absolute;\n top: 0;\n left: 0; }\n .wait-screen.hidden {\n visibility: hidden; }\n\n#leftGrab {\n grid-row: 1 / span 2;\n grid-column: 2;\n cursor: ew-resize; }\n\n#rightGrab {\n grid-row: 1 / span 2;\n grid-column: 5;\n cursor: ew-resize; }\n\n#toolbarGrab {\n background: #333333;\n grid-row: 1 / span 3;\n grid-column: 3;\n height: 100%; }\n #toolbarGrab .blackLine {\n height: 5px;\n background: black; }\n #toolbarGrab .toolbar-label {\n color: white;\n font-size: 18px;\n display: grid;\n align-items: center;\n cursor: pointer;\n user-select: none;\n grid-template-columns: 1fr 20px;\n grid-template-rows: 100%;\n position: relative; }\n #toolbarGrab .toolbar-label.active {\n font-weight: bold;\n font-size: 20px; }\n #toolbarGrab .toolbar-label:hover {\n background: var(--selectionGrey); }\n #toolbarGrab .toolbar-label:hover .sub-items {\n display: block; }\n #toolbarGrab .toolbar-icon {\n width: 40px;\n height: 40px; }\n\n.diagram-container {\n position: relative;\n display: grid;\n grid-row: 1;\n grid-column: 4;\n background: #CCCCCC;\n width: 100%;\n height: 100%;\n overflow: hidden; }\n .diagram-container .diagram {\n display: none;\n width: 100%;\n height: 100%; }\n\n.right-panel {\n grid-row: 1 / span 2;\n grid-column: 6;\n display: grid;\n grid-template-rows: 1fr 40px auto 40px;\n grid-template-columns: 100%;\n height: calc(100% - var(--blackBarHeight));\n overflow-y: auto; }\n .right-panel #propertyTab {\n grid-row: 1;\n grid-column: 1; }\n .right-panel .button {\n display: grid;\n justify-content: center;\n align-content: center;\n height: auto;\n width: calc(100% / 7);\n cursor: pointer; }\n .right-panel .button:hover {\n background: #337ab7;\n color: white;\n opacity: 0.8; }\n .right-panel .button.selected {\n background: #337ab7;\n color: white; }\n .right-panel .button.align {\n justify-content: stretch;\n text-align: center; }\n\n.blocker {\n visibility: hidden;\n position: absolute;\n width: calc(100% - 40px);\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(20, 20, 20, 0.95);\n font-family: \"acumin-pro-condensed\";\n color: white;\n font-size: 24px;\n display: grid;\n align-content: center;\n justify-content: center;\n user-select: none;\n padding: 20px;\n text-align: center; }\n\n#log-console {\n grid-row: 2;\n grid-column: 4;\n display: none; }\n\n.dialog-container {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n display: grid;\n font-family: \"acumin-pro-condensed\";\n top: 0; }\n .dialog-container .dialog {\n align-self: center;\n justify-self: center;\n min-height: 140px;\n max-width: 400px;\n border-radius: 10px;\n background: white;\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: calc(100% - 50px) 50px; }\n .dialog-container .dialog .dialog-message {\n grid-row: 1;\n grid-column: 1;\n margin-top: 20px;\n padding: 10px;\n font-size: 18px;\n color: black; }\n .dialog-container .dialog .dialog-buttons {\n grid-row: 2;\n grid-column: 1;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%;\n color: white; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok {\n cursor: pointer;\n justify-self: center;\n background: green;\n min-width: 80px;\n justify-content: center;\n display: grid;\n align-content: center;\n align-self: center;\n height: 35px;\n border-radius: 10px; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok:hover {\n opacity: 0.8; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok.error {\n background: red; }\n\n.gizmo .bounding-box-line {\n background-color: black;\n position: absolute;\n line-height: 1px;\n height: 1px;\n pointer-events: none; }\n\n.gizmo .scale-point-container {\n position: absolute;\n width: 30px;\n height: 30px; }\n .gizmo .scale-point-container .scale-point {\n top: 10px;\n left: 10px;\n position: absolute;\n width: 10px;\n height: 10px;\n background: transparent;\n outline: #7d7d7d 2px solid; }\n .gizmo .scale-point-container .rotate-click-area {\n width: 20px;\n height: 20px;\n position: absolute; }\n .gizmo .scale-point-container .scale-click-area {\n width: 20px;\n height: 20px;\n position: absolute; }\n\n.gizmo .pivot-point {\n width: 30px;\n height: 30px;\n background: transparent;\n position: absolute; }\n\n#workbench-canvas {\n position: relative; }\n\n.artboard-stroke {\n outline: 1px solid black;\n position: absolute;\n z-index: 5;\n pointer-events: none; }\n\n.artboard-background {\n position: absolute;\n background: repeating-conic-gradient(#E2E2E2 0% 25%, white 0% 50%) 50%/20px 20px;\n width: 100%;\n height: 100%; }\n", "",{"version":3,"sources":["webpack://./main.scss"],"names":[],"mappings":"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","sourcesContent":[":root {\r\n --blackBarHeight: 55px;\r\n}\r\n\r\n#gui-editor-workbench-root {\r\n display: grid;\r\n grid-template-rows: calc(100% - 55px);\r\n height: 100%;\r\n width: 100%;\r\n background: #e2e2e2;\r\n font: 14px \"acumin-pro-condensed\"; \r\n}\r\n\r\n.wait-screen {\r\n display: grid;\r\n justify-content: center;\r\n align-content: center;\r\n height: 100%;\r\n width: 100%;\r\n background: #464646;\r\n opacity: 0.95;\r\n color:white;\r\n font: 24px \"acumin-pro-condensed\"; \r\n position: absolute;\r\n top: 0;\r\n left: 0; \r\n\r\n &.hidden {\r\n visibility: hidden;\r\n }\r\n}\r\n\r\n#leftGrab {\r\n grid-row: 1 / span 2;\r\n grid-column: 2;\r\n cursor: ew-resize;\r\n}\r\n\r\n#rightGrab {\r\n grid-row: 1 / span 2;\r\n grid-column: 5;\r\n cursor: ew-resize;\r\n}\r\n\r\n\r\n#toolbarGrab {\r\n background: #333333;\r\n grid-row: 1 / span 3;\r\n grid-column: 3;\r\n height: 100%;\r\n\r\n .blackLine {\r\n height: 5px;\r\n background: black;\r\n }\r\n .toolbar-label {\r\n color:white;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n } \r\n }\r\n .toolbar-icon {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n}\r\n\r\n.diagram-container {\r\n position: relative;\r\n display: grid;\r\n grid-row: 1;\r\n grid-column: 4;\r\n background: #CCCCCC;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n\r\n .diagram {\r\n display: none;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n}\r\n\r\n.right-panel {\r\n grid-row: 1 / span 2;\r\n grid-column: 6;\r\n display: grid;\r\n grid-template-rows: 1fr 40px auto 40px;\r\n grid-template-columns: 100%;\r\n height: calc(100% - var(--blackBarHeight));\r\n overflow-y: auto;\r\n\r\n #propertyTab {\r\n grid-row: 1;\r\n grid-column: 1;\r\n } \r\n \r\n .button {\r\n display: grid;\r\n justify-content: center;\r\n align-content: center;\r\n height: auto;\r\n width: calc(100% / 7);\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background: rgb(51, 122, 183);\r\n color: white;\r\n opacity: 0.8;\r\n }\r\n\r\n &.selected {\r\n background: rgb(51, 122, 183);\r\n color: white;\r\n }\r\n \r\n &.align {\r\n justify-content: stretch;\r\n text-align: center;\r\n }\r\n } \r\n}\r\n\r\n.blocker {\r\n visibility: hidden;\r\n position: absolute;\r\n width: calc(100% - 40px);\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n\r\n background: rgba(20, 20, 20, 0.95); \r\n font-family: \"acumin-pro-condensed\";\r\n color: white;\r\n font-size: 24px;\r\n\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n\r\n user-select: none;\r\n\r\n padding: 20px;\r\n text-align: center;\r\n}\r\n\r\n#log-console {\r\n grid-row: 2;\r\n grid-column: 4;\r\n display: none;\r\n}\r\n\r\n.dialog-container {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0.1, 0.1, 0.1, 0.6);\r\n display: grid;\r\n font-family: \"acumin-pro-condensed\";\r\n top:0;\r\n\r\n .dialog {\r\n align-self: center;\r\n justify-self: center;\r\n min-height: 140px;\r\n max-width: 400px;\r\n border-radius: 10px;\r\n background: white;\r\n\r\n display: grid;\r\n grid-template-columns: 100%;\r\n grid-template-rows: calc(100% - 50px) 50px;\r\n\r\n .dialog-message {\r\n grid-row: 1;\r\n grid-column: 1;\r\n margin-top: 20px;\r\n padding: 10px;\r\n font-size: 18px;\r\n color: black;\r\n }\r\n\r\n .dialog-buttons {\r\n grid-row: 2;\r\n grid-column: 1;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 100%;\r\n color: white;\r\n\r\n .dialog-button-ok {\r\n cursor: pointer;\r\n justify-self: center;\r\n background:green;\r\n min-width: 80px;\r\n justify-content: center;\r\n display: grid;\r\n align-content: center;\r\n align-self: center;\r\n height: 35px; \r\n border-radius: 10px;\r\n\r\n &:hover {\r\n opacity: 0.8;\r\n }\r\n\r\n &.error {\r\n background: red;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n.gizmo {\r\n .bounding-box-line {\r\n background-color: black;\r\n position: absolute;\r\n line-height: 1px;\r\n height: 1px;\r\n pointer-events: none;\r\n }\r\n .scale-point-container {\r\n position: absolute;\r\n width: 30px;\r\n height: 30px;\r\n .scale-point {\r\n top: 10px;\r\n left: 10px;\r\n position: absolute;\r\n width: 10px;\r\n height: 10px;\r\n background: transparent;\r\n outline: rgb(125, 125, 125) 2px solid;\r\n }\r\n .rotate-click-area {\r\n width: 20px;\r\n height: 20px;\r\n position: absolute;\r\n }\r\n .scale-click-area {\r\n width: 20px;\r\n height: 20px;\r\n position: absolute;\r\n }\r\n }\r\n .pivot-point {\r\n width: 30px;\r\n height: 30px;\r\n background: transparent;\r\n position: absolute;\r\n }\r\n}\r\n#workbench-canvas {\r\n position: relative;\r\n}\r\n.artboard-stroke {\r\n outline: 1px solid black;\r\n position: absolute;\r\n z-index: 5;\r\n pointer-events: none;\r\n}\r\n.artboard-background {\r\n position: absolute;\r\n background: repeating-conic-gradient(#E2E2E2 0% 25%, white 0% 50%) \r\n 50% / 20px 20px;\r\n width: 100%;\r\n height: 100%;\r\n}"],"sourceRoot":""}]);
10192
+ ___CSS_LOADER_EXPORT___.push([module.i, ":root {\n --blackBarHeight: 55px; }\n\n#gui-editor-workbench-root {\n display: grid;\n grid-template-rows: calc(100% - 55px);\n height: 100%;\n width: 100%;\n background: #e2e2e2;\n font: 14px \"acumin-pro-condensed\"; }\n\n.wait-screen {\n display: grid;\n justify-content: center;\n align-content: center;\n height: 100%;\n width: 100%;\n background: #464646;\n opacity: 0.95;\n color: white;\n font: 24px \"acumin-pro-condensed\";\n position: absolute;\n top: 0;\n left: 0; }\n .wait-screen.hidden {\n visibility: hidden; }\n\n#leftGrab {\n grid-row: 1 / span 2;\n grid-column: 2;\n cursor: ew-resize; }\n\n#rightGrab {\n grid-row: 1 / span 2;\n grid-column: 5;\n cursor: ew-resize; }\n\n#toolbarGrab {\n background: #333333;\n grid-row: 1 / span 3;\n grid-column: 3;\n height: 100%; }\n #toolbarGrab .blackLine {\n height: 5px;\n background: black; }\n #toolbarGrab .toolbar-label {\n color: white;\n font-size: 18px;\n display: grid;\n align-items: center;\n cursor: pointer;\n user-select: none;\n grid-template-columns: 1fr 20px;\n grid-template-rows: 100%;\n position: relative; }\n #toolbarGrab .toolbar-label.active {\n font-weight: bold;\n font-size: 20px; }\n #toolbarGrab .toolbar-label:hover {\n background: var(--selectionGrey); }\n #toolbarGrab .toolbar-label:hover .sub-items {\n display: block; }\n #toolbarGrab .toolbar-icon {\n width: 40px;\n height: 40px; }\n\n.diagram-container {\n position: relative;\n display: grid;\n grid-row: 1;\n grid-column: 4;\n background: #CCCCCC;\n width: 100%;\n height: 100%;\n overflow: hidden; }\n .diagram-container .diagram {\n display: none;\n width: 100%;\n height: 100%; }\n\n.right-panel {\n grid-row: 1 / span 2;\n grid-column: 6;\n display: grid;\n grid-template-rows: 1fr 40px auto 40px;\n grid-template-columns: 100%;\n height: calc(100% - var(--blackBarHeight));\n overflow-y: auto; }\n .right-panel #propertyTab {\n grid-row: 1;\n grid-column: 1; }\n .right-panel .button {\n display: grid;\n justify-content: center;\n align-content: center;\n height: auto;\n width: calc(100% / 7);\n cursor: pointer; }\n .right-panel .button:hover {\n background: #337ab7;\n color: white;\n opacity: 0.8; }\n .right-panel .button.selected {\n background: #337ab7;\n color: white; }\n .right-panel .button.align {\n justify-content: stretch;\n text-align: center; }\n\n.blocker {\n visibility: hidden;\n position: absolute;\n width: calc(100% - 40px);\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(20, 20, 20, 0.95);\n font-family: \"acumin-pro-condensed\";\n color: white;\n font-size: 24px;\n display: grid;\n align-content: center;\n justify-content: center;\n user-select: none;\n padding: 20px;\n text-align: center; }\n\n#log-console {\n grid-row: 2;\n grid-column: 4;\n display: none; }\n\n.dialog-container {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n display: grid;\n font-family: \"acumin-pro-condensed\";\n top: 0; }\n .dialog-container .dialog {\n align-self: center;\n justify-self: center;\n min-height: 140px;\n max-width: 400px;\n border-radius: 10px;\n background: white;\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: calc(100% - 50px) 50px; }\n .dialog-container .dialog .dialog-message {\n grid-row: 1;\n grid-column: 1;\n margin-top: 20px;\n padding: 10px;\n font-size: 18px;\n color: black; }\n .dialog-container .dialog .dialog-buttons {\n grid-row: 2;\n grid-column: 1;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%;\n color: white; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok {\n cursor: pointer;\n justify-self: center;\n background: green;\n min-width: 80px;\n justify-content: center;\n display: grid;\n align-content: center;\n align-self: center;\n height: 35px;\n border-radius: 10px; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok:hover {\n opacity: 0.8; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok.error {\n background: red; }\n\n.gizmo .bounding-box-line {\n background-color: black;\n position: absolute;\n line-height: 1px;\n height: 1px;\n pointer-events: none; }\n\n.gizmo .scale-point-container {\n position: absolute;\n width: 30px;\n height: 30px; }\n .gizmo .scale-point-container .scale-point {\n top: 10px;\n left: 10px;\n position: absolute;\n width: 10px;\n height: 10px;\n background: transparent;\n outline: #7d7d7d 2px solid; }\n .gizmo .scale-point-container .rotate-click-area {\n width: 20px;\n height: 20px;\n position: absolute; }\n .gizmo .scale-point-container .scale-click-area {\n width: 20px;\n height: 20px;\n position: absolute; }\n\n.gizmo .pivot-point {\n width: 30px;\n height: 30px;\n background: transparent;\n position: absolute; }\n\n#workbench-canvas {\n position: relative; }\n\n.artboard-stroke {\n outline: 1px solid black;\n position: absolute;\n z-index: 5;\n pointer-events: none; }\n\n.artboard-background {\n position: absolute;\n background: repeating-conic-gradient(#E2E2E2 0% 25%, white 0% 50%) 50%/10px 10px;\n width: 100%;\n height: 100%; }\n", "",{"version":3,"sources":["webpack://./main.scss"],"names":[],"mappings":"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","sourcesContent":[":root {\r\n --blackBarHeight: 55px;\r\n}\r\n\r\n#gui-editor-workbench-root {\r\n display: grid;\r\n grid-template-rows: calc(100% - 55px);\r\n height: 100%;\r\n width: 100%;\r\n background: #e2e2e2;\r\n font: 14px \"acumin-pro-condensed\"; \r\n}\r\n\r\n.wait-screen {\r\n display: grid;\r\n justify-content: center;\r\n align-content: center;\r\n height: 100%;\r\n width: 100%;\r\n background: #464646;\r\n opacity: 0.95;\r\n color:white;\r\n font: 24px \"acumin-pro-condensed\"; \r\n position: absolute;\r\n top: 0;\r\n left: 0; \r\n\r\n &.hidden {\r\n visibility: hidden;\r\n }\r\n}\r\n\r\n#leftGrab {\r\n grid-row: 1 / span 2;\r\n grid-column: 2;\r\n cursor: ew-resize;\r\n}\r\n\r\n#rightGrab {\r\n grid-row: 1 / span 2;\r\n grid-column: 5;\r\n cursor: ew-resize;\r\n}\r\n\r\n\r\n#toolbarGrab {\r\n background: #333333;\r\n grid-row: 1 / span 3;\r\n grid-column: 3;\r\n height: 100%;\r\n\r\n .blackLine {\r\n height: 5px;\r\n background: black;\r\n }\r\n .toolbar-label {\r\n color:white;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n } \r\n }\r\n .toolbar-icon {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n}\r\n\r\n.diagram-container {\r\n position: relative;\r\n display: grid;\r\n grid-row: 1;\r\n grid-column: 4;\r\n background: #CCCCCC;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n\r\n .diagram {\r\n display: none;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n}\r\n\r\n.right-panel {\r\n grid-row: 1 / span 2;\r\n grid-column: 6;\r\n display: grid;\r\n grid-template-rows: 1fr 40px auto 40px;\r\n grid-template-columns: 100%;\r\n height: calc(100% - var(--blackBarHeight));\r\n overflow-y: auto;\r\n\r\n #propertyTab {\r\n grid-row: 1;\r\n grid-column: 1;\r\n } \r\n \r\n .button {\r\n display: grid;\r\n justify-content: center;\r\n align-content: center;\r\n height: auto;\r\n width: calc(100% / 7);\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background: rgb(51, 122, 183);\r\n color: white;\r\n opacity: 0.8;\r\n }\r\n\r\n &.selected {\r\n background: rgb(51, 122, 183);\r\n color: white;\r\n }\r\n \r\n &.align {\r\n justify-content: stretch;\r\n text-align: center;\r\n }\r\n } \r\n}\r\n\r\n.blocker {\r\n visibility: hidden;\r\n position: absolute;\r\n width: calc(100% - 40px);\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n\r\n background: rgba(20, 20, 20, 0.95); \r\n font-family: \"acumin-pro-condensed\";\r\n color: white;\r\n font-size: 24px;\r\n\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n\r\n user-select: none;\r\n\r\n padding: 20px;\r\n text-align: center;\r\n}\r\n\r\n#log-console {\r\n grid-row: 2;\r\n grid-column: 4;\r\n display: none;\r\n}\r\n\r\n.dialog-container {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0.1, 0.1, 0.1, 0.6);\r\n display: grid;\r\n font-family: \"acumin-pro-condensed\";\r\n top:0;\r\n\r\n .dialog {\r\n align-self: center;\r\n justify-self: center;\r\n min-height: 140px;\r\n max-width: 400px;\r\n border-radius: 10px;\r\n background: white;\r\n\r\n display: grid;\r\n grid-template-columns: 100%;\r\n grid-template-rows: calc(100% - 50px) 50px;\r\n\r\n .dialog-message {\r\n grid-row: 1;\r\n grid-column: 1;\r\n margin-top: 20px;\r\n padding: 10px;\r\n font-size: 18px;\r\n color: black;\r\n }\r\n\r\n .dialog-buttons {\r\n grid-row: 2;\r\n grid-column: 1;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 100%;\r\n color: white;\r\n\r\n .dialog-button-ok {\r\n cursor: pointer;\r\n justify-self: center;\r\n background:green;\r\n min-width: 80px;\r\n justify-content: center;\r\n display: grid;\r\n align-content: center;\r\n align-self: center;\r\n height: 35px; \r\n border-radius: 10px;\r\n\r\n &:hover {\r\n opacity: 0.8;\r\n }\r\n\r\n &.error {\r\n background: red;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n.gizmo {\r\n .bounding-box-line {\r\n background-color: black;\r\n position: absolute;\r\n line-height: 1px;\r\n height: 1px;\r\n pointer-events: none;\r\n }\r\n .scale-point-container {\r\n position: absolute;\r\n width: 30px;\r\n height: 30px;\r\n .scale-point {\r\n top: 10px;\r\n left: 10px;\r\n position: absolute;\r\n width: 10px;\r\n height: 10px;\r\n background: transparent;\r\n outline: rgb(125, 125, 125) 2px solid;\r\n }\r\n .rotate-click-area {\r\n width: 20px;\r\n height: 20px;\r\n position: absolute;\r\n }\r\n .scale-click-area {\r\n width: 20px;\r\n height: 20px;\r\n position: absolute;\r\n }\r\n }\r\n .pivot-point {\r\n width: 30px;\r\n height: 30px;\r\n background: transparent;\r\n position: absolute;\r\n }\r\n}\r\n#workbench-canvas {\r\n position: relative;\r\n}\r\n.artboard-stroke {\r\n outline: 1px solid black;\r\n position: absolute;\r\n z-index: 5;\r\n pointer-events: none;\r\n}\r\n.artboard-background {\r\n position: absolute;\r\n background: repeating-conic-gradient(#E2E2E2 0% 25%, white 0% 50%) 50% / 10px 10px;\r\n width: 100%;\r\n height: 100%;\r\n}"],"sourceRoot":""}]);
10193
10193
  // Exports
10194
10194
  /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
10195
10195
 
@@ -43562,6 +43562,8 @@ __webpack_require__.r(__webpack_exports__);
43562
43562
  /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
43563
43563
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
43564
43564
  /* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../commandButtonComponent */ "./components/commandButtonComponent.tsx");
43565
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
43566
+
43565
43567
 
43566
43568
 
43567
43569
 
@@ -43581,15 +43583,15 @@ var ButtonPropertyGridComponent = /** @class */ (function (_super) {
43581
43583
  }
43582
43584
  ButtonPropertyGridComponent.prototype.render = function () {
43583
43585
  var _this = this;
43584
- var rectangle = this.props.rectangle;
43586
+ var rectangles = this.props.rectangles;
43585
43587
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
43586
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: rectangle, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43588
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: rectangles, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43587
43589
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
43588
43590
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "RECTANGLE", value: " ", color: "grey" }),
43589
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { label: "CLIP CONTENT", iconLabel: "Clip Content", icon: clipContentsIcon, target: rectangle, propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43591
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { label: "CLIP CONTENT", iconLabel: "Clip Content", icon: clipContentsIcon, target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(rectangles, this.props.onPropertyChangedObservable), propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43590
43592
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43591
- 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 }),
43592
- 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 })),
43593
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(rectangles, this.props.onPropertyChangedObservable), propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43594
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(rectangles, this.props.onPropertyChangedObservable), propertyName: "cornerRadius", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43593
43595
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
43594
43596
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "BUTTON", value: " ", color: "grey" }),
43595
43597
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
@@ -43624,6 +43626,8 @@ __webpack_require__.r(__webpack_exports__);
43624
43626
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
43625
43627
  /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
43626
43628
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
43629
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
43630
+
43627
43631
 
43628
43632
 
43629
43633
 
@@ -43638,13 +43642,13 @@ var CheckboxPropertyGridComponent = /** @class */ (function (_super) {
43638
43642
  return _super.call(this, props) || this;
43639
43643
  }
43640
43644
  CheckboxPropertyGridComponent.prototype.render = function () {
43641
- var checkbox = this.props.checkbox;
43645
+ var checkboxes = this.props.checkboxes;
43642
43646
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
43643
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: checkbox, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43647
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: checkboxes, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43644
43648
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
43645
43649
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "CHECKBOX", value: " ", color: "grey" }),
43646
- 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 }),
43647
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Checked", icon: fillColorIcon, label: "CHECKED", target: checkbox, propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
43650
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(checkboxes, this.props.onPropertyChangedObservable), propertyName: "checkSizeRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43651
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Checked", icon: fillColorIcon, label: "CHECKED", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(checkboxes, this.props.onPropertyChangedObservable), propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
43648
43652
  };
43649
43653
  return CheckboxPropertyGridComponent;
43650
43654
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -43669,6 +43673,8 @@ __webpack_require__.r(__webpack_exports__);
43669
43673
  /* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
43670
43674
  /* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
43671
43675
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
43676
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
43677
+
43672
43678
 
43673
43679
 
43674
43680
 
@@ -43680,12 +43686,12 @@ var ColorPickerPropertyGridComponent = /** @class */ (function (_super) {
43680
43686
  return _super.call(this, props) || this;
43681
43687
  }
43682
43688
  ColorPickerPropertyGridComponent.prototype.render = function () {
43683
- var colorPicker = this.props.colorPicker;
43689
+ var colorPickers = this.props.colorPickers;
43684
43690
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
43685
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: colorPicker, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43691
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: colorPickers, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43686
43692
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
43687
43693
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "COLORPICKER", value: " ", color: "grey" }),
43688
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_3__["Color3LineComponent"], { label: "Color", target: colorPicker, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
43694
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_3__["Color3LineComponent"], { label: "Color", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_5__["makeTargetsProxy"])(colorPickers, this.props.onPropertyChangedObservable), propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
43689
43695
  };
43690
43696
  return ColorPickerPropertyGridComponent;
43691
43697
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -43714,8 +43720,10 @@ __webpack_require__.r(__webpack_exports__);
43714
43720
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
43715
43721
  /* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
43716
43722
  /* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../commandButtonComponent */ "./components/commandButtonComponent.tsx");
43717
- /* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
43718
- /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
43723
+ /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
43724
+ /* harmony import */ var _sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
43725
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
43726
+
43719
43727
 
43720
43728
 
43721
43729
 
@@ -43754,62 +43762,90 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
43754
43762
  Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CommonControlPropertyGridComponent, _super);
43755
43763
  function CommonControlPropertyGridComponent(props) {
43756
43764
  var _this = _super.call(this, props) || this;
43757
- _this._width = _this.props.control.width;
43758
- _this._height = _this.props.control.height;
43765
+ _this._width = 0;
43766
+ _this._height = 0;
43759
43767
  return _this;
43760
43768
  }
43761
43769
  CommonControlPropertyGridComponent.prototype._updateAlignment = function (alignment, value) {
43762
- var control = this.props.control;
43763
- if (control.typeName === "TextBlock" && this.props.control.resizeToFit === false) {
43764
- this.props.control["text" + alignment.charAt(0).toUpperCase() + alignment.slice(1)] = value;
43765
- }
43766
- else {
43767
- this.props.control[alignment] = value;
43770
+ for (var _i = 0, _a = this.props.controls; _i < _a.length; _i++) {
43771
+ var control = _a[_i];
43772
+ if (control.typeName === "TextBlock" && control.resizeToFit === false) {
43773
+ control["text" + alignment.charAt(0).toUpperCase() + alignment.slice(1)] = value;
43774
+ }
43775
+ else {
43776
+ control[alignment] = value;
43777
+ }
43768
43778
  }
43769
43779
  this.forceUpdate();
43770
43780
  };
43771
43781
  CommonControlPropertyGridComponent.prototype._checkAndUpdateValues = function (propertyName, value) {
43772
43782
  var _a, _b;
43773
- // checking the previous value unit to see what it was.
43774
- var vau = this.props.control["_" + propertyName];
43775
- var percentage = vau.isPercentage;
43776
- // now checking if the new string contains either a px or a % sign in case we need to change the unit.
43777
- var negative = value.charAt(0) === "-";
43778
- if (value.charAt(value.length - 1) === "%") {
43779
- percentage = true;
43780
- }
43781
- else if (value.charAt(value.length - 1) === "x" && value.charAt(value.length - 2) === "p") {
43782
- percentage = false;
43783
- }
43784
- if (((_a = this.props.control.parent) === null || _a === void 0 ? void 0 : _a.typeName) === "StackPanel") {
43785
- percentage = false;
43786
- }
43787
- var newValue = (_b = value.match(/([\d\.\,]+)/g)) === null || _b === void 0 ? void 0 : _b[0];
43788
- if (!newValue) {
43789
- newValue = "0";
43783
+ for (var _i = 0, _c = this.props.controls; _i < _c.length; _i++) {
43784
+ var control = _c[_i];
43785
+ // checking the previous value unit to see what it was.
43786
+ var vau = control["_" + propertyName];
43787
+ var percentage = vau.isPercentage;
43788
+ // now checking if the new string contains either a px or a % sign in case we need to change the unit.
43789
+ var negative = value.charAt(0) === "-";
43790
+ if (value.charAt(value.length - 1) === "%") {
43791
+ percentage = true;
43792
+ }
43793
+ else if (value.charAt(value.length - 1) === "x" && value.charAt(value.length - 2) === "p") {
43794
+ percentage = false;
43795
+ }
43796
+ if (((_a = control.parent) === null || _a === void 0 ? void 0 : _a.typeName) === "StackPanel") {
43797
+ percentage = false;
43798
+ }
43799
+ var newValue = (_b = value.match(/([\d\.\,]+)/g)) === null || _b === void 0 ? void 0 : _b[0];
43800
+ if (!newValue) {
43801
+ newValue = "0";
43802
+ }
43803
+ newValue = (negative ? "-" : "") + newValue;
43804
+ newValue += percentage ? "%" : "px";
43805
+ control[propertyName] = newValue;
43790
43806
  }
43791
- newValue = (negative ? "-" : "") + newValue;
43792
- newValue += percentage ? "%" : "px";
43793
- this.props.control[propertyName] = newValue;
43794
43807
  this.forceUpdate();
43795
43808
  };
43796
43809
  CommonControlPropertyGridComponent.prototype._markChildrenAsDirty = function () {
43797
- if (this.props.control instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"])
43798
- this.props.control._children.forEach(function (child) {
43799
- child._markAsDirty();
43800
- });
43810
+ for (var _i = 0, _a = this.props.controls; _i < _a.length; _i++) {
43811
+ var control = _a[_i];
43812
+ if (control instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"])
43813
+ control._children.forEach(function (child) {
43814
+ child._markAsDirty();
43815
+ });
43816
+ }
43801
43817
  };
43802
43818
  CommonControlPropertyGridComponent.prototype.render = function () {
43803
43819
  var _this = this;
43804
- var control = this.props.control;
43805
- var horizontalAlignment = this.props.control.horizontalAlignment;
43806
- var verticalAlignment = this.props.control.verticalAlignment;
43807
- if (control.typeName === "TextBlock" && this.props.control.resizeToFit === false) {
43808
- horizontalAlignment = this.props.control.textHorizontalAlignment;
43809
- verticalAlignment = this.props.control.textVerticalAlignment;
43820
+ var controls = this.props.controls;
43821
+ var firstControl = controls[0];
43822
+ var horizontalAlignment = firstControl.horizontalAlignment;
43823
+ var verticalAlignment = firstControl.verticalAlignment;
43824
+ for (var _i = 0, controls_1 = controls; _i < controls_1.length; _i++) {
43825
+ var control = controls_1[_i];
43826
+ if (control.horizontalAlignment !== horizontalAlignment) {
43827
+ horizontalAlignment = _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
43828
+ }
43829
+ if (control.verticalAlignment !== verticalAlignment) {
43830
+ verticalAlignment = _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_CENTER;
43831
+ }
43832
+ }
43833
+ if (controls.every(function (control) { return control.typeName === "TextBlock" && control.resizeToFit === false; })) {
43834
+ horizontalAlignment = firstControl.textHorizontalAlignment;
43835
+ verticalAlignment = firstControl.textVerticalAlignment;
43810
43836
  }
43811
- this._width = this.props.control.width;
43812
- this._height = this.props.control.height;
43837
+ this._width = firstControl.width;
43838
+ this._height = firstControl.height;
43839
+ for (var _a = 0, controls_2 = controls; _a < controls_2.length; _a++) {
43840
+ var control = controls_2[_a];
43841
+ if (control.width !== this._width) {
43842
+ this._width = _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["conflictingValuesPlaceholder"];
43843
+ }
43844
+ if (control.height !== this._height) {
43845
+ this._height = _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["conflictingValuesPlaceholder"];
43846
+ }
43847
+ }
43848
+ var showTextProperties = (firstControl instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"] || firstControl.typeName === "TextBlock");
43813
43849
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
43814
43850
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43815
43851
  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 () {
@@ -43831,77 +43867,88 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
43831
43867
  _this._updateAlignment("verticalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_BOTTOM);
43832
43868
  } })),
43833
43869
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43834
- 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, delayInput: true, propertyName: "left", onChange: function (newValue) { return _this._checkAndUpdateValues("left", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43835
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "Y", target: control, delayInput: true, propertyName: "top", onChange: function (newValue) { return _this._checkAndUpdateValues("top", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43870
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), delayInput: true, propertyName: "left", onChange: function (newValue) { return _this._checkAndUpdateValues("left", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43871
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "Y", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), delayInput: true, propertyName: "top", onChange: function (newValue) { return _this._checkAndUpdateValues("top", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43836
43872
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43837
43873
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Scale", icon: sizeIcon, lockObject: this.props.lockObject, label: "W", target: this, delayInput: true, propertyName: "_width", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function (newValue) {
43838
- if (control.typeName === "Image") {
43839
- control.autoScale = false;
43840
- }
43841
- else if (control instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
43842
- control.adaptWidthToChildren = false;
43843
- }
43844
- else if (_this.props.control.typeName === "ColorPicker") {
43845
- if (newValue === "0" || newValue === "-") {
43846
- newValue = "1";
43874
+ for (var _i = 0, controls_3 = controls; _i < controls_3.length; _i++) {
43875
+ var control = controls_3[_i];
43876
+ if (control.typeName === "Image") {
43877
+ control.autoScale = false;
43878
+ }
43879
+ else if (control instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
43880
+ control.adaptWidthToChildren = false;
43881
+ }
43882
+ else if (control.typeName === "ColorPicker") {
43883
+ if (newValue === "0" || newValue === "-") {
43884
+ newValue = "1";
43885
+ }
43847
43886
  }
43848
43887
  }
43849
43888
  _this._width = newValue;
43850
43889
  _this._checkAndUpdateValues("width", _this._width.toString());
43851
43890
  } }),
43852
43891
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "H", target: this, delayInput: true, propertyName: "_height", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function (newValue) {
43853
- if (control.typeName === "Image") {
43854
- control.autoScale = false;
43855
- }
43856
- else if (control instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
43857
- control.adaptHeightToChildren = false;
43858
- }
43859
- else if (_this.props.control.typeName === "ColorPicker") {
43860
- if (newValue === "0" || newValue === "-") {
43861
- newValue = "1";
43892
+ for (var _i = 0, controls_4 = controls; _i < controls_4.length; _i++) {
43893
+ var control = controls_4[_i];
43894
+ if (control.typeName === "Image") {
43895
+ control.autoScale = false;
43896
+ }
43897
+ else if (control instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
43898
+ control.adaptHeightToChildren = false;
43899
+ }
43900
+ else if (control.typeName === "ColorPicker") {
43901
+ if (newValue === "0" || newValue === "-") {
43902
+ newValue = "1";
43903
+ }
43862
43904
  }
43863
43905
  }
43864
43906
  _this._height = newValue;
43865
43907
  _this._checkAndUpdateValues("height", _this._height.toString());
43866
43908
  } })),
43867
43909
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43868
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Padding", icon: verticalMarginIcon, lockObject: this.props.lockObject, label: "B", target: control, propertyName: "paddingBottom", delayInput: true, onChange: function (newValue) { _this._checkAndUpdateValues("paddingBottom", newValue); _this._markChildrenAsDirty(); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43869
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "T", target: control, propertyName: "paddingTop", delayInput: true, onChange: function (newValue) { _this._checkAndUpdateValues("paddingTop", newValue); _this._markChildrenAsDirty(); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43910
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Padding", icon: verticalMarginIcon, lockObject: this.props.lockObject, label: "B", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "paddingBottom", delayInput: true, onChange: function (newValue) {
43911
+ _this._checkAndUpdateValues("paddingBottom", newValue);
43912
+ _this._markChildrenAsDirty();
43913
+ }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43914
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "T", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "paddingTop", delayInput: true, onChange: function (newValue) {
43915
+ _this._checkAndUpdateValues("paddingTop", newValue);
43916
+ _this._markChildrenAsDirty();
43917
+ }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43870
43918
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43871
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Horizontal Margins", icon: horizontalMarginIcon, lockObject: this.props.lockObject, label: "L", target: control, propertyName: "paddingLeft", delayInput: true, onChange: function (newValue) { _this._checkAndUpdateValues("paddingLeft", newValue); _this._markChildrenAsDirty(); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43872
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "R", target: control, delayInput: true, propertyName: "paddingRight", onChange: function (newValue) { _this._checkAndUpdateValues("paddingRight", newValue); _this._markChildrenAsDirty(); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43919
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Horizontal Margins", icon: horizontalMarginIcon, lockObject: this.props.lockObject, label: "L", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "paddingLeft", delayInput: true, onChange: function (newValue) { _this._checkAndUpdateValues("paddingLeft", newValue); _this._markChildrenAsDirty(); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43920
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "R", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), delayInput: true, propertyName: "paddingRight", onChange: function (newValue) { _this._checkAndUpdateValues("paddingRight", newValue); _this._markChildrenAsDirty(); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43873
43921
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-shot" },
43874
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__["CheckBoxLineComponent"], { iconLabel: "Padding does not affect the parameters of this control, only the descendants of this control.", icon: descendantsOnlyPaddingIcon, label: "", target: control, propertyName: "descendentsOnlyPadding", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43922
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__["CheckBoxLineComponent"], { iconLabel: "Padding does not affect the parameters of this control, only the descendants of this control.", icon: descendantsOnlyPaddingIcon, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "descendentsOnlyPadding", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43875
43923
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
43876
43924
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "TRANSFORMATION", value: " ", color: "grey" }),
43877
43925
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43878
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { iconLabel: "Transform Center", icon: positionIcon, lockObject: this.props.lockObject, label: "X", target: control, propertyName: "transformCenterX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43879
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Y", target: control, propertyName: "transformCenterY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43926
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { iconLabel: "Transform Center", icon: positionIcon, lockObject: this.props.lockObject, label: "X", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43927
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Y", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "transformCenterY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43880
43928
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43881
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { iconLabel: "Scale", icon: scaleIcon, lockObject: this.props.lockObject, label: "X", target: control, propertyName: "scaleX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43882
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Y", target: control, propertyName: "scaleY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43883
- 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 }),
43929
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { iconLabel: "Scale", icon: scaleIcon, lockObject: this.props.lockObject, label: "X", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "scaleX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43930
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "Y", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "scaleY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43931
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), decimalCount: 2, propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43884
43932
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
43885
43933
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "APPEARANCE", value: " ", color: "grey" }),
43886
- (control.color !== undefined && control.typeName !== "Image" &&
43887
- control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker") && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__["Color3LineComponent"], { iconLabel: "Color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43888
- control.background !== undefined && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__["Color3LineComponent"], { iconLabel: "Background", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43889
- 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 }),
43890
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__["Color3LineComponent"], { iconLabel: "Shadow Color", icon: shadowColorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43934
+ controls.every(function (control) { return control.color !== undefined && control.typeName !== "Image" && control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker"; }) && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__["ColorLineComponent"], { iconLabel: "Color", icon: colorIcon, lockObject: this.props.lockObject, label: "Outline Color", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43935
+ controls.every(function (control) { return control.background !== undefined; }) && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__["ColorLineComponent"], { iconLabel: "Background", icon: fillColorIcon, lockObject: this.props.lockObject, label: "Background Color", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43936
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__["SliderLineComponent"], { lockObject: this.props.lockObject, iconLabel: "Alpha", icon: alphaIcon, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43937
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__["ColorLineComponent"], { iconLabel: "Shadow Color", icon: shadowColorIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, disableAlpha: true }),
43891
43938
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43892
- 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 }),
43893
- 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 })),
43939
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43940
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "shadowOffsetY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43894
43941
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-short" },
43895
- 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 })),
43896
- (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,
43942
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "shadowBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43943
+ showTextProperties && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
43897
43944
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
43898
43945
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "FONT STYLE", value: " ", color: "grey" }),
43899
43946
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43900
- 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 }),
43901
- 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 })),
43947
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "fontFamily", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43948
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), numbersOnly: true, propertyName: "fontSize", onChange: function (newValue) { return _this._checkAndUpdateValues("fontSize", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43902
43949
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43903
- 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 }),
43904
- 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 })))));
43950
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "fontWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43951
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable), propertyName: "fontStyle", onPropertyChangedObservable: this.props.onPropertyChangedObservable })))));
43905
43952
  };
43906
43953
  return CommonControlPropertyGridComponent;
43907
43954
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -43933,9 +43980,9 @@ var ControlPropertyGridComponent = /** @class */ (function (_super) {
43933
43980
  return _super.call(this, props) || this;
43934
43981
  }
43935
43982
  ControlPropertyGridComponent.prototype.render = function () {
43936
- var control = this.props.control;
43983
+ var controls = this.props.controls;
43937
43984
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
43938
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: control, onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
43985
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: controls, onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
43939
43986
  };
43940
43987
  return ControlPropertyGridComponent;
43941
43988
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -43960,7 +44007,9 @@ __webpack_require__.r(__webpack_exports__);
43960
44007
  /* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
43961
44008
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
43962
44009
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
43963
- /* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
44010
+ /* harmony import */ var _sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
44011
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
44012
+
43964
44013
 
43965
44014
 
43966
44015
 
@@ -43977,19 +44026,19 @@ var DisplayGridPropertyGridComponent = /** @class */ (function (_super) {
43977
44026
  return _super.call(this, props) || this;
43978
44027
  }
43979
44028
  DisplayGridPropertyGridComponent.prototype.render = function () {
43980
- var displayGrid = this.props.displayGrid;
44029
+ var displayGrids = this.props.displayGrids;
43981
44030
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
43982
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: displayGrid, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44031
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: displayGrids, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43983
44032
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
43984
44033
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { label: "DISPLAY GRID", value: " ", color: "grey" }),
43985
44034
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43986
- 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 }),
43987
- 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 })),
43988
- 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 }),
43989
- 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 }),
43990
- 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 }),
43991
- 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 }),
43992
- 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 })));
44035
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(displayGrids, this.props.onPropertyChangedObservable), propertyName: "cellWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44036
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(displayGrids, this.props.onPropertyChangedObservable), propertyName: "cellHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44037
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(displayGrids, this.props.onPropertyChangedObservable), propertyName: "minorLineTickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44038
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__["ColorLineComponent"], { iconLabel: "Minor Line Color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(displayGrids, this.props.onPropertyChangedObservable), propertyName: "minorLineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44039
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(displayGrids, this.props.onPropertyChangedObservable), propertyName: "majorLineTickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44040
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__["ColorLineComponent"], { iconLabel: "Major Line Color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(displayGrids, this.props.onPropertyChangedObservable), propertyName: "majorLineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44041
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(displayGrids, this.props.onPropertyChangedObservable), propertyName: "majorLineFrequency", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
43993
44042
  };
43994
44043
  return DisplayGridPropertyGridComponent;
43995
44044
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44015,6 +44064,8 @@ __webpack_require__.r(__webpack_exports__);
44015
44064
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
44016
44065
  /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
44017
44066
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
44067
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
44068
+
44018
44069
 
44019
44070
 
44020
44071
 
@@ -44029,13 +44080,13 @@ var EllipsePropertyGridComponent = /** @class */ (function (_super) {
44029
44080
  return _super.call(this, props) || this;
44030
44081
  }
44031
44082
  EllipsePropertyGridComponent.prototype.render = function () {
44032
- var ellipse = this.props.ellipse;
44083
+ var ellipses = this.props.ellipses;
44033
44084
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44034
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: ellipse, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44085
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: ellipses, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44035
44086
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44036
44087
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "ELLIPSE", value: " ", color: "grey" }),
44037
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Clip Content", icon: clipContentsIcon, label: "CLIP CONTENT", target: ellipse, propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44038
- 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: ellipse, propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
44088
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Clip Content", icon: clipContentsIcon, label: "CLIP CONTENT", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(ellipses, this.props.onPropertyChangedObservable), propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44089
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(ellipses, this.props.onPropertyChangedObservable), propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
44039
44090
  };
44040
44091
  return EllipsePropertyGridComponent;
44041
44092
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44113,7 +44164,7 @@ var GridPropertyGridComponent = /** @class */ (function (_super) {
44113
44164
  }));
44114
44165
  };
44115
44166
  GridPropertyGridComponent.prototype.setRowValues = function () {
44116
- var grid = this.props.grid;
44167
+ var grid = this.props.grids[0];
44117
44168
  this._rowDefinitions = [];
44118
44169
  this._rowEditFlags = [];
44119
44170
  this._editedRow = false;
@@ -44126,7 +44177,7 @@ var GridPropertyGridComponent = /** @class */ (function (_super) {
44126
44177
  }
44127
44178
  };
44128
44179
  GridPropertyGridComponent.prototype.setColumnValues = function () {
44129
- var grid = this.props.grid;
44180
+ var grid = this.props.grids[0];
44130
44181
  this._columnDefinitions = [];
44131
44182
  this._columnEditFlags = [];
44132
44183
  this._editedColumn = false;
@@ -44159,7 +44210,7 @@ var GridPropertyGridComponent = /** @class */ (function (_super) {
44159
44210
  }));
44160
44211
  };
44161
44212
  GridPropertyGridComponent.prototype.resizeRow = function () {
44162
- var grid = this.props.grid;
44213
+ var grid = this.props.grids[0];
44163
44214
  var total = 0;
44164
44215
  var editCount = 0;
44165
44216
  var percentCount = 0;
@@ -44218,7 +44269,7 @@ var GridPropertyGridComponent = /** @class */ (function (_super) {
44218
44269
  this.setRowValues();
44219
44270
  };
44220
44271
  GridPropertyGridComponent.prototype.resizeColumn = function () {
44221
- var grid = this.props.grid;
44272
+ var grid = this.props.grids[0];
44222
44273
  var total = 0;
44223
44274
  var editCount = 0;
44224
44275
  var percentCount = 0;
@@ -44290,7 +44341,7 @@ var GridPropertyGridComponent = /** @class */ (function (_super) {
44290
44341
  return value.substring(value.length - toSearch.length, value.length) !== toSearch;
44291
44342
  };
44292
44343
  GridPropertyGridComponent.prototype.resetValues = function () {
44293
- var grid = this.props.grid;
44344
+ var grid = this.props.grids[0];
44294
44345
  this._removingColumn = false;
44295
44346
  this._removingRow = false;
44296
44347
  this._columnChild = false;
@@ -44303,137 +44354,140 @@ var GridPropertyGridComponent = /** @class */ (function (_super) {
44303
44354
  };
44304
44355
  GridPropertyGridComponent.prototype.render = function () {
44305
44356
  var _this = this;
44306
- var grid = this.props.grid;
44357
+ var grids = this.props.grids;
44358
+ var grid = this.props.grids[0];
44307
44359
  if (grid !== this._previousGrid) {
44308
44360
  this.resetValues();
44309
44361
  }
44310
44362
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44311
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: grid, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44363
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: grids, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44312
44364
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
44313
44365
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextLineComponent"], { tooltip: "", label: "GRID", value: " ", color: "grey" }),
44314
44366
  this.renderRows(),
44315
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-gridLine" },
44316
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-grid-button-divider" },
44317
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Add Row", icon: addGridElementDark, shortcut: "", isActive: false, onClick: function () {
44318
- var total = 0;
44319
- var count = 0;
44320
- for (var i = 0; i < grid.rowCount; ++i) {
44321
- var rd = grid.getRowDefinition(i);
44322
- if (rd === null || rd === void 0 ? void 0 : rd.isPercentage) {
44323
- total += rd === null || rd === void 0 ? void 0 : rd.getValue(grid.host);
44324
- count++;
44325
- }
44326
- }
44327
- grid.addRowDefinition(total / count, false);
44328
- _this.resetValues();
44329
- _this.forceUpdate();
44330
- } }),
44331
- " ",
44332
- 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 () {
44333
- var hasChild = false;
44334
- for (var i = 0; i < grid.columnCount; ++i) {
44335
- var child = grid.cells[(grid.rowCount - 1) + ":" + i];
44336
- if (child === null || child === void 0 ? void 0 : child.children.length) {
44337
- hasChild = true;
44338
- break;
44339
- //(grid.rowCount > 1 && !this._removingRow)
44340
- }
44341
- }
44342
- _this.resetValues();
44343
- if (hasChild) {
44344
- _this._rowChild = true;
44345
- }
44346
- _this._removingRow = true;
44347
- _this.forceUpdate();
44348
- } }),
44349
- this._editedRow &&
44350
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44351
- " ",
44352
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
44353
- _this.resizeRow();
44367
+ this.props.grids.length === 1 &&
44368
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44369
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-gridLine" },
44370
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-grid-button-divider" },
44371
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Add Row", icon: addGridElementDark, shortcut: "", isActive: false, onClick: function () {
44372
+ var total = 0;
44373
+ var count = 0;
44374
+ for (var i = 0; i < grid.rowCount; ++i) {
44375
+ var rd = grid.getRowDefinition(i);
44376
+ if (rd === null || rd === void 0 ? void 0 : rd.isPercentage) {
44377
+ total += rd === null || rd === void 0 ? void 0 : rd.getValue(grid.host);
44378
+ count++;
44379
+ }
44380
+ }
44381
+ grid.addRowDefinition(total / count, false);
44382
+ _this.resetValues();
44354
44383
  _this.forceUpdate();
44355
44384
  } }),
44356
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
44385
+ " ",
44386
+ 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 () {
44387
+ var hasChild = false;
44388
+ for (var i = 0; i < grid.columnCount; ++i) {
44389
+ var child = grid.cells[(grid.rowCount - 1) + ":" + i];
44390
+ if (child === null || child === void 0 ? void 0 : child.children.length) {
44391
+ hasChild = true;
44392
+ break;
44393
+ //(grid.rowCount > 1 && !this._removingRow)
44394
+ }
44395
+ }
44357
44396
  _this.resetValues();
44397
+ if (hasChild) {
44398
+ _this._rowChild = true;
44399
+ }
44400
+ _this._removingRow = true;
44358
44401
  _this.forceUpdate();
44359
- } })),
44360
- this._removingRow &&
44361
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44402
+ } }),
44403
+ this._editedRow &&
44404
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44405
+ " ",
44406
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
44407
+ _this.resizeRow();
44408
+ _this.forceUpdate();
44409
+ } }),
44410
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
44411
+ _this.resetValues();
44412
+ _this.forceUpdate();
44413
+ } })),
44414
+ this._removingRow &&
44415
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44416
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
44417
+ grid.removeRowDefinition(grid.rowCount - 1);
44418
+ _this.setRowValues();
44419
+ _this.resizeRow();
44420
+ _this.forceUpdate();
44421
+ _this._removingRow = false;
44422
+ _this._rowChild = false;
44423
+ } }),
44424
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
44425
+ _this._removingRow = false;
44426
+ _this._rowChild = false;
44427
+ _this.forceUpdate();
44428
+ } })))),
44429
+ this._rowChild && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44430
+ 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" })),
44431
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
44432
+ this.renderColumns(),
44433
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-grid-button-divider" },
44434
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Add Column", icon: addGridElementDark, shortcut: "", isActive: false, onClick: function () {
44435
+ var total = 0;
44436
+ var count = 0;
44437
+ for (var i = 0; i < grid.columnCount; ++i) {
44438
+ var cd = grid.getColumnDefinition(i);
44439
+ if (cd === null || cd === void 0 ? void 0 : cd.isPercentage) {
44440
+ total += cd === null || cd === void 0 ? void 0 : cd.getValue(grid.host);
44441
+ count++;
44442
+ }
44443
+ }
44444
+ grid.addColumnDefinition(total / count, false);
44445
+ _this.resetValues();
44446
+ _this.forceUpdate();
44447
+ } }),
44448
+ 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 () {
44449
+ var hasChild = false;
44450
+ for (var i = 0; i < grid.rowCount; ++i) {
44451
+ var child = grid.cells[i + ":" + (grid.columnCount - 1)];
44452
+ if (child === null || child === void 0 ? void 0 : child.children.length) {
44453
+ hasChild = true;
44454
+ break;
44455
+ }
44456
+ }
44457
+ _this.resetValues();
44458
+ if (hasChild) {
44459
+ _this._columnChild = true;
44460
+ }
44461
+ _this._removingColumn = true;
44462
+ _this.forceUpdate();
44463
+ } }),
44464
+ this._editedColumn && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44362
44465
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
44363
- grid.removeRowDefinition(grid.rowCount - 1);
44364
- _this.setRowValues();
44365
- _this.resizeRow();
44466
+ _this.resizeColumn();
44366
44467
  _this.forceUpdate();
44367
- _this._removingRow = false;
44368
- _this._rowChild = false;
44369
44468
  } }),
44370
44469
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
44371
- _this._removingRow = false;
44372
- _this._rowChild = false;
44470
+ _this.resetValues();
44373
44471
  _this.forceUpdate();
44374
- } })))),
44375
- this._rowChild && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44376
- 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" })),
44377
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
44378
- this.renderColumns(),
44379
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-grid-button-divider" },
44380
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Add Column", icon: addGridElementDark, shortcut: "", isActive: false, onClick: function () {
44381
- var total = 0;
44382
- var count = 0;
44383
- for (var i = 0; i < grid.columnCount; ++i) {
44384
- var cd = grid.getColumnDefinition(i);
44385
- if (cd === null || cd === void 0 ? void 0 : cd.isPercentage) {
44386
- total += cd === null || cd === void 0 ? void 0 : cd.getValue(grid.host);
44387
- count++;
44388
- }
44389
- }
44390
- grid.addColumnDefinition(total / count, false);
44391
- _this.resetValues();
44392
- _this.forceUpdate();
44393
- } }),
44394
- 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 () {
44395
- var hasChild = false;
44396
- for (var i = 0; i < grid.rowCount; ++i) {
44397
- var child = grid.cells[i + ":" + (grid.columnCount - 1)];
44398
- if (child === null || child === void 0 ? void 0 : child.children.length) {
44399
- hasChild = true;
44400
- break;
44401
- }
44402
- }
44403
- _this.resetValues();
44404
- if (hasChild) {
44405
- _this._columnChild = true;
44406
- }
44407
- _this._removingColumn = true;
44408
- _this.forceUpdate();
44409
- } }),
44410
- this._editedColumn && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44411
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
44412
- _this.resizeColumn();
44413
- _this.forceUpdate();
44414
- } }),
44415
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
44416
- _this.resetValues();
44417
- _this.forceUpdate();
44418
- } })),
44419
- this._removingColumn &&
44420
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44421
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
44422
- grid.removeColumnDefinition(grid.columnCount - 1);
44423
- _this.setColumnValues();
44424
- _this.resizeColumn();
44425
- _this.forceUpdate();
44426
- _this._removingColumn = false;
44427
- _this._columnChild = false;
44428
- } }),
44429
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
44430
- _this._removingColumn = false;
44431
- _this._columnChild = false;
44432
- _this.forceUpdate();
44433
- } })),
44434
- " "),
44435
- this._columnChild && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44436
- 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" }))));
44472
+ } })),
44473
+ this._removingColumn &&
44474
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44475
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Confirm", icon: confirmGridElementDark, shortcut: "", isActive: false, onClick: function () {
44476
+ grid.removeColumnDefinition(grid.columnCount - 1);
44477
+ _this.setColumnValues();
44478
+ _this.resizeColumn();
44479
+ _this.forceUpdate();
44480
+ _this._removingColumn = false;
44481
+ _this._columnChild = false;
44482
+ } }),
44483
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__["CommandButtonComponent"], { altStyle: true, tooltip: "Cancel", icon: cancelGridElementDark, shortcut: "", isActive: false, onClick: function () {
44484
+ _this._removingColumn = false;
44485
+ _this._columnChild = false;
44486
+ _this.forceUpdate();
44487
+ } })),
44488
+ " "),
44489
+ this._columnChild && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44490
+ 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" })))));
44437
44491
  };
44438
44492
  return GridPropertyGridComponent;
44439
44493
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44459,6 +44513,8 @@ __webpack_require__.r(__webpack_exports__);
44459
44513
  /* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
44460
44514
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
44461
44515
  /* harmony import */ var _sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./sliderPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/sliderPropertyGridComponent.tsx");
44516
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
44517
+
44462
44518
 
44463
44519
 
44464
44520
 
@@ -44474,15 +44530,15 @@ var ImageBasedSliderPropertyGridComponent = /** @class */ (function (_super) {
44474
44530
  return _super.call(this, props) || this;
44475
44531
  }
44476
44532
  ImageBasedSliderPropertyGridComponent.prototype.render = function () {
44477
- var imageBasedSlider = this.props.imageBasedSlider;
44533
+ var imageBasedSliders = this.props.imageBasedSliders;
44478
44534
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44479
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: imageBasedSlider, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44535
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: imageBasedSliders, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44480
44536
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44481
44537
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "IMAGE LINKS", value: " ", color: "grey" }),
44482
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { icon: thumbImageLinkIcon, lockObject: this.props.lockObject, iconLabel: "Thumb Image Link", target: imageBasedSlider.thumbImage, label: "", propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44483
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { icon: valueBarImageLinkIcon, lockObject: this.props.lockObject, iconLabel: "Value Bar Image Link", target: imageBasedSlider.valueBarImage, label: "", propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44484
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { icon: sliderBackgroundImageIcon, lockObject: this.props.lockObject, iconLabel: "Background Image Link", target: imageBasedSlider.backgroundImage, label: "", propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44485
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_5__["SliderPropertyGridComponent"], { slider: imageBasedSlider, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
44538
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { icon: thumbImageLinkIcon, lockObject: this.props.lockObject, iconLabel: "Thumb Image Link", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(imageBasedSliders.map(function (slider) { return slider.thumbImage; }), this.props.onPropertyChangedObservable), label: "", propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44539
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { icon: valueBarImageLinkIcon, lockObject: this.props.lockObject, iconLabel: "Value Bar Image Link", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(imageBasedSliders.map(function (slider) { return slider.valueBarImage; }), this.props.onPropertyChangedObservable), label: "", propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44540
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { icon: sliderBackgroundImageIcon, lockObject: this.props.lockObject, iconLabel: "Background Image Link", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(imageBasedSliders.map(function (slider) { return slider.backgroundImage; }), this.props.onPropertyChangedObservable), label: "", propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44541
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_5__["SliderPropertyGridComponent"], { sliders: imageBasedSliders, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
44486
44542
  };
44487
44543
  return ImageBasedSliderPropertyGridComponent;
44488
44544
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44512,6 +44568,8 @@ __webpack_require__.r(__webpack_exports__);
44512
44568
  /* harmony import */ var _sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/optionsLineComponent */ "./sharedUiComponents/lines/optionsLineComponent.tsx");
44513
44569
  /* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
44514
44570
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
44571
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
44572
+
44515
44573
 
44516
44574
 
44517
44575
 
@@ -44534,7 +44592,8 @@ var ImagePropertyGridComponent = /** @class */ (function (_super) {
44534
44592
  }
44535
44593
  ImagePropertyGridComponent.prototype.render = function () {
44536
44594
  var _this = this;
44537
- var image = this.props.image;
44595
+ var images = this.props.images;
44596
+ var image = images[0]; // for nine slice
44538
44597
  var stretchOptions = [
44539
44598
  { label: "None", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_NONE },
44540
44599
  { label: "Fill", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_FILL },
@@ -44543,19 +44602,19 @@ var ImagePropertyGridComponent = /** @class */ (function (_super) {
44543
44602
  { label: "NinePatch", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_NINE_PATCH },
44544
44603
  ];
44545
44604
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44546
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: image, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44605
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: images, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44547
44606
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44548
44607
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "IMAGE", value: " ", color: "grey" }),
44549
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { iconLabel: "Source", icon: imageLinkIcon, lockObject: this.props.lockObject, label: "", target: image, propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44608
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { iconLabel: "Source", icon: imageLinkIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable), propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44550
44609
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44551
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Crop", icon: cropIcon, lockObject: this.props.lockObject, label: "L", target: image, propertyName: "sourceLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44552
- 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 })),
44610
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Crop", icon: cropIcon, lockObject: this.props.lockObject, label: "L", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable), propertyName: "sourceLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44611
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "T", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable), propertyName: "sourceTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44553
44612
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44554
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "R", target: image, icon: cropIcon, iconLabel: "Crop", propertyName: "sourceWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44555
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "B", target: image, propertyName: "sourceHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44556
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Autoscale", icon: autoResizeIcon, label: "AUTOSCALE", target: image, propertyName: "autoScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44557
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__["OptionsLineComponent"], { iconLabel: "Stretch", icon: stretchFillIcon, label: "", options: stretchOptions, target: image, propertyName: "stretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: function (value) { return _this.setState({ mode: value }); } }),
44558
- image.stretch === _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_NINE_PATCH && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44613
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "R", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable), icon: cropIcon, iconLabel: "Crop", propertyName: "sourceWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44614
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "B", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable), propertyName: "sourceHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44615
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Autoscale", icon: autoResizeIcon, label: "AUTOSCALE", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable), propertyName: "autoScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44616
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__["OptionsLineComponent"], { iconLabel: "Stretch", icon: stretchFillIcon, label: "", options: stretchOptions, target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable), propertyName: "stretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: function (value) { return _this.setState({ mode: value }); } }),
44617
+ images.length === 1 && image.stretch === _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_NINE_PATCH && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44559
44618
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44560
44619
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Slice", icon: cropIcon, lockObject: this.props.lockObject, label: "L", target: image, propertyName: "sliceLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function () { image.populateNinePatchSlicesFromImage = false; _this.forceUpdate(); } }),
44561
44620
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "R", target: image, propertyName: "sliceRight", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function () { image.populateNinePatchSlicesFromImage = false; _this.forceUpdate(); } })),
@@ -44566,10 +44625,10 @@ var ImagePropertyGridComponent = /** @class */ (function (_super) {
44566
44625
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44567
44626
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "ANIMATION SHEET", value: " ", color: "grey" }),
44568
44627
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-short" },
44569
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Cell Id", icon: cellIDIcon, lockObject: this.props.lockObject, label: "", isInteger: true, target: image, propertyName: "cellId", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44628
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { iconLabel: "Cell Id", icon: cellIDIcon, lockObject: this.props.lockObject, label: "", isInteger: true, target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable), propertyName: "cellId", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44570
44629
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44571
- 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 }),
44572
- 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 }))));
44630
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { icon: sizeIcon, lockObject: this.props.lockObject, label: "W", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable), propertyName: "cellWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44631
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "H", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable), propertyName: "cellHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))));
44573
44632
  };
44574
44633
  return ImagePropertyGridComponent;
44575
44634
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44597,7 +44656,9 @@ __webpack_require__.r(__webpack_exports__);
44597
44656
  /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
44598
44657
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
44599
44658
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
44600
- /* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
44659
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
44660
+ /* harmony import */ var _sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
44661
+
44601
44662
 
44602
44663
 
44603
44664
 
@@ -44620,23 +44681,23 @@ var InputTextPropertyGridComponent = /** @class */ (function (_super) {
44620
44681
  return _super.call(this, props) || this;
44621
44682
  }
44622
44683
  InputTextPropertyGridComponent.prototype.render = function () {
44623
- var inputText = this.props.inputText;
44684
+ var inputTexts = this.props.inputTexts;
44624
44685
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44625
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: inputText, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44686
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: inputTexts, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44626
44687
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44627
44688
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextLineComponent"], { label: "INPUT TEXT", value: " ", color: "grey" }),
44628
- 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 }),
44629
- 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 }),
44630
- 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 }),
44631
- 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 }),
44632
- 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 }),
44633
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "On focus select all", icon: verticalMarginIcon, label: "ON FOCUS SELECT ALL", target: inputText, propertyName: "onFocusSelectAll", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44634
- 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 }),
44635
- 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 }),
44636
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Auto stretch width", icon: sizeIcon, label: "AUTO STRETCH", target: inputText, propertyName: "autoStretchWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44637
- 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 }),
44638
- 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 }),
44639
- 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 })));
44689
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { iconLabel: "Text", icon: fontFamilyIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "text" }),
44690
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { iconLabel: "Prompt", icon: fontFamilyIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "promptMessage" }),
44691
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "maxWidth" }),
44692
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__["ColorLineComponent"], { iconLabel: "Highlight color", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "textHighlightColor" }),
44693
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "highligherOpacity" }),
44694
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "On focus select all", icon: verticalMarginIcon, label: "ON FOCUS SELECT ALL", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "onFocusSelectAll", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44695
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__["ColorLineComponent"], { iconLabel: "Focused background", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "focusedBackground", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44696
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__["TextInputLineComponent"], { iconLabel: "Margin", icon: verticalMarginIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "margin", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44697
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Auto stretch width", icon: sizeIcon, label: "AUTO STRETCH", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "autoStretchWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44698
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__["FloatLineComponent"], { iconLabel: "Thickness", icon: strokeWeightIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44699
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "placeholderText", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44700
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__["ColorLineComponent"], { iconLabel: "Placeholder color", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__["makeTargetsProxy"])(inputTexts, this.props.onPropertyChangedObservable), propertyName: "placeholderColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
44640
44701
  };
44641
44702
  return InputTextPropertyGridComponent;
44642
44703
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44662,6 +44723,8 @@ __webpack_require__.r(__webpack_exports__);
44662
44723
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
44663
44724
  /* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
44664
44725
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
44726
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
44727
+
44665
44728
 
44666
44729
 
44667
44730
 
@@ -44675,32 +44738,58 @@ var LinePropertyGridComponent = /** @class */ (function (_super) {
44675
44738
  return _super.call(this, props) || this;
44676
44739
  }
44677
44740
  LinePropertyGridComponent.prototype.onDashChange = function (value) {
44678
- var line = this.props.line;
44679
44741
  var split = value.split(",");
44680
- line.dash = [];
44681
- split.forEach(function (v) {
44682
- var int = parseInt(v);
44683
- if (isNaN(int)) {
44684
- return;
44685
- }
44686
- line.dash.push(int);
44687
- });
44742
+ var _loop_1 = function (line) {
44743
+ line.dash = [];
44744
+ split.forEach(function (v) {
44745
+ var int = parseInt(v);
44746
+ if (isNaN(int)) {
44747
+ return;
44748
+ }
44749
+ line.dash.push(int);
44750
+ });
44751
+ };
44752
+ for (var _i = 0, _a = this.props.lines; _i < _a.length; _i++) {
44753
+ var line = _a[_i];
44754
+ _loop_1(line);
44755
+ }
44756
+ this.forceUpdate();
44688
44757
  };
44689
44758
  LinePropertyGridComponent.prototype.render = function () {
44690
44759
  var _this = this;
44691
- var line = this.props.line;
44760
+ var lines = this.props.lines;
44761
+ var dashes = lines[0].dash;
44762
+ var _loop_2 = function (line) {
44763
+ if (dashes.length === 0)
44764
+ return "break";
44765
+ if (line.dash.length !== dashes.length) {
44766
+ dashes = [];
44767
+ }
44768
+ dashes.forEach(function (dash, index) {
44769
+ if (line.dash[index] !== dash) {
44770
+ dashes = [];
44771
+ }
44772
+ });
44773
+ };
44774
+ for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
44775
+ var line = lines_1[_i];
44776
+ var state_1 = _loop_2(line);
44777
+ if (state_1 === "break")
44778
+ break;
44779
+ }
44780
+ var dashString = dashes.join(",");
44692
44781
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44693
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: line, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44782
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: lines, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44694
44783
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44695
44784
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "LINE", value: " ", color: "grey" }),
44696
44785
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44697
- 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 }),
44698
- 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 })),
44786
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(lines, this.props.onPropertyChangedObservable), propertyName: "x1", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44787
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Y", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(lines, this.props.onPropertyChangedObservable), propertyName: "y1", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44699
44788
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44700
- 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 }),
44701
- 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 })),
44702
- 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 }),
44703
- 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); } })));
44789
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(lines, this.props.onPropertyChangedObservable), propertyName: "x2", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44790
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Y", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(lines, this.props.onPropertyChangedObservable), propertyName: "y2", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44791
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(lines, this.props.onPropertyChangedObservable), propertyName: "lineWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44792
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(lines, this.props.onPropertyChangedObservable), value: dashString, onChange: function (newValue) { return _this.onDashChange(newValue); } })));
44704
44793
  };
44705
44794
  return LinePropertyGridComponent;
44706
44795
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44727,6 +44816,8 @@ __webpack_require__.r(__webpack_exports__);
44727
44816
  /* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
44728
44817
  /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
44729
44818
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
44819
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
44820
+
44730
44821
 
44731
44822
 
44732
44823
 
@@ -44743,16 +44834,16 @@ var RadioButtonPropertyGridComponent = /** @class */ (function (_super) {
44743
44834
  return _super.call(this, props) || this;
44744
44835
  }
44745
44836
  RadioButtonPropertyGridComponent.prototype.render = function () {
44746
- var radioButton = this.props.radioButton;
44837
+ var radioButtons = this.props.radioButtons;
44747
44838
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44748
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: radioButton, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44839
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: radioButtons, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44749
44840
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44750
44841
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextLineComponent"], { label: "RADIO BUTTON", value: " ", color: "grey" }),
44751
44842
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44752
- 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 }),
44753
- 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 })),
44754
- 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 }),
44755
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Is Checked", icon: checkboxIcon, label: "CHECKED", target: radioButton, propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
44843
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(radioButtons, this.props.onPropertyChangedObservable), propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44844
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(radioButtons, this.props.onPropertyChangedObservable), propertyName: "checkSizeRatio", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44845
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Group", icon: strokeWeightIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(radioButtons, this.props.onPropertyChangedObservable), propertyName: "group", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44846
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Is Checked", icon: checkboxIcon, label: "CHECKED", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(radioButtons, this.props.onPropertyChangedObservable), propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
44756
44847
  };
44757
44848
  return RadioButtonPropertyGridComponent;
44758
44849
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44778,6 +44869,8 @@ __webpack_require__.r(__webpack_exports__);
44778
44869
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
44779
44870
  /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
44780
44871
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
44872
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
44873
+
44781
44874
 
44782
44875
 
44783
44876
 
@@ -44793,15 +44886,15 @@ var RectanglePropertyGridComponent = /** @class */ (function (_super) {
44793
44886
  return _super.call(this, props) || this;
44794
44887
  }
44795
44888
  RectanglePropertyGridComponent.prototype.render = function () {
44796
- var rectangle = this.props.rectangle;
44889
+ var rectangles = this.props.rectangles;
44797
44890
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44798
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: rectangle, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44891
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: rectangles, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44799
44892
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44800
44893
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "RECTANGLE", value: " ", color: "grey" }),
44801
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Clip Content", icon: clipContentsIcon, label: "CLIP CONTENT", target: rectangle, propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44894
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__["CheckBoxLineComponent"], { iconLabel: "Clip Content", icon: clipContentsIcon, label: "CLIP CONTENT", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(rectangles, this.props.onPropertyChangedObservable), propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44802
44895
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44803
- 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 }),
44804
- 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 }))));
44896
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(rectangles, this.props.onPropertyChangedObservable), propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44897
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(rectangles, this.props.onPropertyChangedObservable), propertyName: "cornerRadius", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))));
44805
44898
  };
44806
44899
  return RectanglePropertyGridComponent;
44807
44900
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44826,7 +44919,9 @@ __webpack_require__.r(__webpack_exports__);
44826
44919
  /* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
44827
44920
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
44828
44921
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
44829
- /* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
44922
+ /* harmony import */ var _sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
44923
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
44924
+
44830
44925
 
44831
44926
 
44832
44927
 
@@ -44843,21 +44938,21 @@ var ScrollViewerPropertyGridComponent = /** @class */ (function (_super) {
44843
44938
  return _super.call(this, props) || this;
44844
44939
  }
44845
44940
  ScrollViewerPropertyGridComponent.prototype.render = function () {
44846
- var scrollViewer = this.props.scrollViewer;
44941
+ var scrollViewers = this.props.scrollViewers;
44847
44942
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44848
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: scrollViewer, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44943
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: scrollViewers, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44849
44944
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44850
44945
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "RECTANGLE", value: " ", color: "grey" }),
44851
44946
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44852
- 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 }),
44853
- 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 })),
44947
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(scrollViewers, this.props.onPropertyChangedObservable), propertyName: "thickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44948
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(scrollViewers, this.props.onPropertyChangedObservable), propertyName: "cornerRadius", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44854
44949
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44855
44950
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "SCROLLVIEWER", value: " ", color: "grey" }),
44856
44951
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44857
- 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 }),
44858
- 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 })),
44859
- 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 }),
44860
- 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 })));
44952
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(scrollViewers, this.props.onPropertyChangedObservable), propertyName: "wheelPrecision", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44953
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(scrollViewers, this.props.onPropertyChangedObservable), propertyName: "barSize", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44954
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__["ColorLineComponent"], { iconLabel: "Bar color", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(scrollViewers, this.props.onPropertyChangedObservable), propertyName: "barColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44955
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__["ColorLineComponent"], { iconLabel: "Bar background", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(scrollViewers, this.props.onPropertyChangedObservable), propertyName: "barBackground", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
44861
44956
  };
44862
44957
  return ScrollViewerPropertyGridComponent;
44863
44958
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44891,10 +44986,10 @@ var SliderGenericPropertyGridComponent = /** @class */ (function (_super) {
44891
44986
  return _super.call(this, props) || this;
44892
44987
  }
44893
44988
  SliderGenericPropertyGridComponent.prototype.render = function () {
44894
- var slider = this.props.slider;
44989
+ var sliders = this.props.sliders;
44895
44990
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44896
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: slider, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44897
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_3__["SliderPropertyGridComponent"], { slider: slider, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
44991
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: sliders, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44992
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_3__["SliderPropertyGridComponent"], { sliders: sliders, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
44898
44993
  };
44899
44994
  return SliderGenericPropertyGridComponent;
44900
44995
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44920,7 +45015,9 @@ __webpack_require__.r(__webpack_exports__);
44920
45015
  /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
44921
45016
  /* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
44922
45017
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
44923
- /* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
45018
+ /* harmony import */ var _sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
45019
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
45020
+
44924
45021
 
44925
45022
 
44926
45023
 
@@ -44944,23 +45041,23 @@ var SliderPropertyGridComponent = /** @class */ (function (_super) {
44944
45041
  return _super.call(this, props) || this;
44945
45042
  }
44946
45043
  SliderPropertyGridComponent.prototype.render = function () {
44947
- var slider = this.props.slider;
45044
+ var sliders = this.props.sliders;
44948
45045
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44949
45046
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44950
45047
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "SLIDER", value: " ", color: "grey" }),
44951
- slider.typeName === "Slider" && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_6__["Color3LineComponent"], { iconLabel: "Border color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "borderColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44952
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Display thumb", icon: showThumbIcon, label: "DISPLAY THUMB", target: slider, propertyName: "displayThumb", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44953
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Thumb circle", icon: thumbCircleIcon, label: "THUMB CIRCLE", target: slider, propertyName: "isThumbCircle", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44954
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Thumb clamped", icon: clampSliderValueIcon, label: "THUMB CLAMPED", target: slider, propertyName: "isThumbClamped", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44955
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Vertical", icon: verticalSliderIcon, label: "VERTICAL", target: slider, propertyName: "isVertical", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45048
+ sliders.every(function (slider) { return slider.typeName === "Slider"; }) && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_6__["ColorLineComponent"], { iconLabel: "Border color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(sliders, this.props.onPropertyChangedObservable), propertyName: "borderColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45049
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Display thumb", icon: showThumbIcon, label: "DISPLAY THUMB", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(sliders, this.props.onPropertyChangedObservable), propertyName: "displayThumb", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45050
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Thumb circle", icon: thumbCircleIcon, label: "THUMB CIRCLE", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(sliders, this.props.onPropertyChangedObservable), propertyName: "isThumbCircle", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45051
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Thumb clamped", icon: clampSliderValueIcon, label: "THUMB CLAMPED", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(sliders, this.props.onPropertyChangedObservable), propertyName: "isThumbClamped", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45052
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Vertical", icon: verticalSliderIcon, label: "VERTICAL", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(sliders, this.props.onPropertyChangedObservable), propertyName: "isVertical", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44956
45053
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44957
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Thumb width", icon: thumbWidthIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "thumbWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44958
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Bar offset", icon: barOffsetIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "barOffset", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
45054
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Thumb width", icon: thumbWidthIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(sliders, this.props.onPropertyChangedObservable), propertyName: "thumbWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45055
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Bar offset", icon: barOffsetIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(sliders, this.props.onPropertyChangedObservable), propertyName: "barOffset", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44959
45056
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44960
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__["FloatLineComponent"], { iconLabel: "Minimum", icon: sliderValueMinimumIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "minimum", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44961
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__["FloatLineComponent"], { iconLabel: "Maximum", icon: sliderValueMaximumIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "maximum", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
45057
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__["FloatLineComponent"], { iconLabel: "Minimum", icon: sliderValueMinimumIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(sliders, this.props.onPropertyChangedObservable), propertyName: "minimum", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45058
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__["FloatLineComponent"], { iconLabel: "Maximum", icon: sliderValueMaximumIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(sliders, this.props.onPropertyChangedObservable), propertyName: "maximum", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44962
45059
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-short" },
44963
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__["FloatLineComponent"], { iconLabel: "Value", icon: sliderValueIcon, lockObject: this.props.lockObject, label: "", target: slider, propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))));
45060
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__["FloatLineComponent"], { iconLabel: "Value", icon: sliderValueIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__["makeTargetsProxy"])(sliders, this.props.onPropertyChangedObservable), propertyName: "value", onPropertyChangedObservable: this.props.onPropertyChangedObservable }))));
44964
45061
  };
44965
45062
  return SliderPropertyGridComponent;
44966
45063
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44986,6 +45083,8 @@ __webpack_require__.r(__webpack_exports__);
44986
45083
  /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
44987
45084
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
44988
45085
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
45086
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
45087
+
44989
45088
 
44990
45089
 
44991
45090
 
@@ -45000,14 +45099,14 @@ var StackPanelPropertyGridComponent = /** @class */ (function (_super) {
45000
45099
  return _super.call(this, props) || this;
45001
45100
  }
45002
45101
  StackPanelPropertyGridComponent.prototype.render = function () {
45003
- var stackPanel = this.props.stackPanel;
45102
+ var stackPanels = this.props.stackPanels;
45004
45103
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
45005
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: stackPanel, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45104
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: stackPanels, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45006
45105
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
45007
45106
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "STACKPANEL", value: " ", color: "grey" }),
45008
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Clip children", icon: clipContentsIcon, label: "CLIP CHILDREN", target: stackPanel, propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45009
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Vertical", icon: verticalMarginIcon, label: "VERTICAL", target: stackPanel, propertyName: "isVertical", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45010
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "", icon: verticalMarginIcon, iconLabel: "spacing", target: stackPanel, propertyName: "spacing", defaultValue: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function () { return stackPanel._markAsDirty(); } })));
45107
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Clip children", icon: clipContentsIcon, label: "CLIP CHILDREN", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(stackPanels, this.props.onPropertyChangedObservable), propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45108
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Vertical", icon: verticalMarginIcon, label: "VERTICAL", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(stackPanels, this.props.onPropertyChangedObservable), propertyName: "isVertical", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45109
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "", icon: verticalMarginIcon, iconLabel: "spacing", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__["makeTargetsProxy"])(stackPanels, this.props.onPropertyChangedObservable), propertyName: "spacing", defaultValue: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function () { return stackPanels.forEach(function (panel) { return panel._markAsDirty(); }); } })));
45011
45110
  };
45012
45111
  return StackPanelPropertyGridComponent;
45013
45112
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -45037,7 +45136,9 @@ __webpack_require__.r(__webpack_exports__);
45037
45136
  /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
45038
45137
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
45039
45138
  /* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
45040
- /* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
45139
+ /* harmony import */ var _sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
45140
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
45141
+
45041
45142
 
45042
45143
 
45043
45144
 
@@ -45057,24 +45158,24 @@ var TextBlockPropertyGridComponent = /** @class */ (function (_super) {
45057
45158
  return _super.call(this, props) || this;
45058
45159
  }
45059
45160
  TextBlockPropertyGridComponent.prototype.render = function () {
45060
- var textBlock = this.props.textBlock;
45161
+ var textBlocks = this.props.textBlocks;
45061
45162
  var wrappingOptions = [
45062
45163
  { label: "Clip", value: _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__["TextWrapping"].Clip },
45063
45164
  { label: "Ellipsis", value: _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__["TextWrapping"].Ellipsis },
45064
45165
  { label: "Word wrap", value: _babylonjs_gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__["TextWrapping"].WordWrap },
45065
45166
  ];
45066
45167
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
45067
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, control: textBlock, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45168
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: textBlocks, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45068
45169
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
45069
45170
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "TEXTBLOCK", value: " ", color: "grey" }),
45070
- 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 }),
45071
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__["CheckBoxLineComponent"], { iconLabel: "Resize to fit", icon: fontFamilyIcon, label: "RESIZE TO FIT", target: textBlock, propertyName: "resizeToFit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45072
- 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 }),
45073
- 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 }),
45171
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextInputLineComponent"], { iconLabel: "Text", icon: fontFamilyIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(textBlocks, this.props.onPropertyChangedObservable), propertyName: "text", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45172
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__["CheckBoxLineComponent"], { iconLabel: "Resize to fit", icon: fontFamilyIcon, label: "RESIZE TO FIT", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(textBlocks, this.props.onPropertyChangedObservable), propertyName: "resizeToFit", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45173
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__["OptionsLineComponent"], { iconLabel: "Wrapping", icon: fontFamilyIcon, label: "", options: wrappingOptions, target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(textBlocks, this.props.onPropertyChangedObservable), propertyName: "textWrapping", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45174
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(textBlocks, this.props.onPropertyChangedObservable), propertyName: "lineSpacing", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45074
45175
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
45075
45176
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "OUTLINE", value: " ", color: "grey" }),
45076
- 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 }),
45077
- 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 })));
45177
+ 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: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(textBlocks, this.props.onPropertyChangedObservable), propertyName: "outlineWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
45178
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__["ColorLineComponent"], { iconLabel: "Outline color", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(textBlocks, this.props.onPropertyChangedObservable), propertyName: "outlineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable })));
45078
45179
  };
45079
45180
  return TextBlockPropertyGridComponent;
45080
45181
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -45152,12 +45253,14 @@ __webpack_require__.r(__webpack_exports__);
45152
45253
  /* harmony import */ var _propertyGrids_gui_controlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./propertyGrids/gui/controlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/controlPropertyGridComponent.tsx");
45153
45254
  /* harmony import */ var _sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../../sharedUiComponents/lines/optionsLineComponent */ "./sharedUiComponents/lines/optionsLineComponent.tsx");
45154
45255
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
45155
- /* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
45256
+ /* harmony import */ var _sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../../sharedUiComponents/lines/colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
45156
45257
  /* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
45157
45258
  /* harmony import */ var _parentingPropertyGridComponent__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ../parentingPropertyGridComponent */ "./components/parentingPropertyGridComponent.tsx");
45158
45259
  /* harmony import */ var _propertyGrids_gui_displayGridPropertyGridComponent__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ./propertyGrids/gui/displayGridPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/displayGridPropertyGridComponent.tsx");
45159
45260
  /* harmony import */ var _propertyGrids_gui_buttonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./propertyGrids/gui/buttonPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/buttonPropertyGridComponent.tsx");
45160
45261
  /* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ../../guiNodeTools */ "./guiNodeTools.ts");
45262
+ /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
45263
+
45161
45264
 
45162
45265
 
45163
45266
 
@@ -45363,97 +45466,117 @@ var PropertyTabComponent = /** @class */ (function (_super) {
45363
45466
  }
45364
45467
  this.props.globalState.workbench.loadFromSnippet(snippedId);
45365
45468
  };
45366
- PropertyTabComponent.prototype.renderNode = function (node) {
45469
+ ;
45470
+ PropertyTabComponent.prototype.renderNode = function (nodes) {
45367
45471
  var _a;
45472
+ var node = nodes[0];
45368
45473
  return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
45369
45474
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "header" },
45370
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { id: "logo", src: this.renderControlIcon(node) }),
45475
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { id: "logo", src: this.renderControlIcon(nodes) }),
45371
45476
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "title" },
45372
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_28__["TextInputLineComponent"], { noUnderline: true, lockObject: this._lockObject, label: "", target: node, propertyName: "name", onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }))),
45373
- this.renderProperties(node),
45477
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_28__["TextInputLineComponent"], { noUnderline: true, lockObject: this._lockObject, label: "", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_33__["makeTargetsProxy"])(nodes, this.props.globalState.onPropertyChangedObservable), propertyName: "name", onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }))),
45478
+ this.renderProperties(nodes),
45374
45479
  ((_a = node === null || node === void 0 ? void 0 : node.parent) === null || _a === void 0 ? void 0 : _a.typeName) === "Grid" && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_parentingPropertyGridComponent__WEBPACK_IMPORTED_MODULE_29__["ParentingPropertyGridComponent"], { control: node, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, lockObject: this._lockObject })));
45375
45480
  };
45376
- PropertyTabComponent.prototype.renderProperties = function (node) {
45481
+ /**
45482
+ * returns the class name of a list of controls if they share a class, or an empty string if not
45483
+ */
45484
+ PropertyTabComponent.prototype.getControlsCommonClassName = function (nodes) {
45485
+ if (nodes.length === 0)
45486
+ return "";
45487
+ var firstNode = nodes[0];
45488
+ var firstClass = firstNode.getClassName();
45489
+ for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
45490
+ var node = nodes_1[_i];
45491
+ if (node.getClassName() !== firstClass) {
45492
+ return "";
45493
+ }
45494
+ }
45495
+ return firstClass;
45496
+ };
45497
+ PropertyTabComponent.prototype.renderProperties = function (nodes) {
45377
45498
  var _this = this;
45378
- var className = node.getClassName();
45499
+ if (nodes.length === 0)
45500
+ return;
45501
+ var className = this.getControlsCommonClassName(nodes);
45379
45502
  switch (className) {
45380
45503
  case "TextBlock": {
45381
- var textBlock = node;
45382
- 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 }));
45504
+ var textBlocks = nodes;
45505
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_textBlockPropertyGridComponent__WEBPACK_IMPORTED_MODULE_12__["TextBlockPropertyGridComponent"], { textBlocks: textBlocks, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45383
45506
  }
45384
45507
  case "InputText": {
45385
- var inputText = node;
45386
- 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 }));
45508
+ var inputTexts = nodes;
45509
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_inputTextPropertyGridComponent__WEBPACK_IMPORTED_MODULE_13__["InputTextPropertyGridComponent"], { inputTexts: inputTexts, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45387
45510
  }
45388
45511
  case "ColorPicker": {
45389
- var colorPicker = node;
45390
- 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 }));
45512
+ var colorPickers = nodes;
45513
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_colorPickerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_14__["ColorPickerPropertyGridComponent"], { colorPickers: colorPickers, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45391
45514
  }
45392
45515
  case "Image": {
45393
- var image = node;
45394
- return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_imagePropertyGridComponent__WEBPACK_IMPORTED_MODULE_15__["ImagePropertyGridComponent"], { image: image, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
45516
+ var images = nodes;
45517
+ return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_imagePropertyGridComponent__WEBPACK_IMPORTED_MODULE_15__["ImagePropertyGridComponent"], { images: images, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
45395
45518
  }
45396
45519
  case "Slider": {
45397
- var slider = node;
45398
- return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_sliderGenericPropertyGridComponent__WEBPACK_IMPORTED_MODULE_9__["SliderGenericPropertyGridComponent"], { slider: slider, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45520
+ var sliders = nodes;
45521
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_sliderGenericPropertyGridComponent__WEBPACK_IMPORTED_MODULE_9__["SliderGenericPropertyGridComponent"], { sliders: sliders, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45399
45522
  }
45400
45523
  case "ImageBasedSlider": {
45401
- var imageBasedSlider = node;
45402
- 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 }));
45524
+ var imageBasedSliders = nodes;
45525
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_imageBasedSliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_16__["ImageBasedSliderPropertyGridComponent"], { imageBasedSliders: imageBasedSliders, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45403
45526
  }
45404
45527
  case "Rectangle": {
45405
- var rectangle = node;
45406
- 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 }));
45528
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_rectanglePropertyGridComponent__WEBPACK_IMPORTED_MODULE_17__["RectanglePropertyGridComponent"], { rectangles: nodes, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45407
45529
  }
45408
45530
  case "StackPanel": {
45409
- var stackPanel = node;
45410
- 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 }));
45531
+ var stackPanels = nodes;
45532
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_stackPanelPropertyGridComponent__WEBPACK_IMPORTED_MODULE_18__["StackPanelPropertyGridComponent"], { stackPanels: stackPanels, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45411
45533
  }
45412
45534
  case "Grid": {
45413
- var grid = node;
45414
- return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_gridPropertyGridComponent__WEBPACK_IMPORTED_MODULE_19__["GridPropertyGridComponent"], { grid: grid, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
45535
+ var grids = nodes;
45536
+ return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_gridPropertyGridComponent__WEBPACK_IMPORTED_MODULE_19__["GridPropertyGridComponent"], { grids: grids, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
45415
45537
  }
45416
45538
  case "ScrollViewer": {
45417
- var scrollViewer = node;
45418
- 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 }));
45539
+ var scrollViewers = nodes;
45540
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_scrollViewerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_20__["ScrollViewerPropertyGridComponent"], { scrollViewers: scrollViewers, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45419
45541
  }
45420
45542
  case "Ellipse": {
45421
- var ellipse = node;
45422
- 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 }));
45543
+ var ellipses = nodes;
45544
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_ellipsePropertyGridComponent__WEBPACK_IMPORTED_MODULE_21__["EllipsePropertyGridComponent"], { ellipses: ellipses, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45423
45545
  }
45424
45546
  case "Checkbox": {
45425
- var checkbox = node;
45426
- 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 }));
45547
+ var checkboxes = nodes;
45548
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_checkboxPropertyGridComponent__WEBPACK_IMPORTED_MODULE_22__["CheckboxPropertyGridComponent"], { checkboxes: checkboxes, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45427
45549
  }
45428
45550
  case "RadioButton": {
45429
- var radioButton = node;
45430
- 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 }));
45551
+ var radioButtons = nodes;
45552
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_radioButtonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_11__["RadioButtonPropertyGridComponent"], { radioButtons: radioButtons, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45431
45553
  }
45432
45554
  case "Line": {
45433
- var line = node;
45434
- return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_linePropertyGridComponent__WEBPACK_IMPORTED_MODULE_10__["LinePropertyGridComponent"], { line: line, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
45555
+ var lines = nodes;
45556
+ return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_linePropertyGridComponent__WEBPACK_IMPORTED_MODULE_10__["LinePropertyGridComponent"], { lines: lines, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
45435
45557
  }
45436
45558
  case "DisplayGrid": {
45437
- var displayGrid = node;
45438
- 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 }));
45559
+ var displayGrids = nodes;
45560
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_displayGridPropertyGridComponent__WEBPACK_IMPORTED_MODULE_30__["DisplayGridPropertyGridComponent"], { displayGrids: displayGrids, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45439
45561
  }
45440
45562
  case "Button": {
45441
- var button_1 = node;
45442
- 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) {
45443
- var guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_32__["GUINodeTools"].CreateControlFromString(value);
45444
- var newGuiNode = _this.props.globalState.workbench.createNewGuiNode(guiElement);
45445
- button_1.addControl(newGuiNode);
45446
- _this.props.globalState.onSelectionChangedObservable.notifyObservers(newGuiNode);
45563
+ var buttons_1 = nodes;
45564
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_buttonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_31__["ButtonPropertyGridComponent"], { key: "buttonMenu", rectangles: buttons_1, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, onAddComponent: function (value) {
45565
+ for (var _i = 0, buttons_2 = buttons_1; _i < buttons_2.length; _i++) {
45566
+ var button = buttons_2[_i];
45567
+ var guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_32__["GUINodeTools"].CreateControlFromString(value);
45568
+ var newGuiNode = _this.props.globalState.workbench.createNewGuiNode(guiElement);
45569
+ button.addControl(newGuiNode);
45570
+ _this.props.globalState.onSelectionChangedObservable.notifyObservers(newGuiNode);
45571
+ }
45447
45572
  } }));
45448
45573
  }
45449
45574
  }
45450
- if (className !== "") {
45451
- var control = node;
45452
- 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 }));
45453
- }
45454
- return null;
45575
+ var controls = nodes;
45576
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_controlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_24__["ControlPropertyGridComponent"], { controls: controls, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45455
45577
  };
45456
- PropertyTabComponent.prototype.renderControlIcon = function (node) {
45578
+ PropertyTabComponent.prototype.renderControlIcon = function (nodes) {
45579
+ var node = nodes[0];
45457
45580
  var className = node.getClassName();
45458
45581
  switch (className) {
45459
45582
  case "TextBlock": {
@@ -45551,8 +45674,8 @@ var PropertyTabComponent = /** @class */ (function (_super) {
45551
45674
  this.props.globalState.onResponsiveChangeObservable.notifyObservers(false);
45552
45675
  _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["DataStorage"].WriteBoolean("Responsive", false);
45553
45676
  }
45554
- if (this.state.currentNode && this.props.globalState.workbench.selectedGuiNodes.length === 1) {
45555
- return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "ge-propertyTab" }, this.renderNode(this.state.currentNode)));
45677
+ if (this.state.currentNode && this.props.globalState.workbench.selectedGuiNodes.length > 0) {
45678
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "ge-propertyTab" }, this.renderNode(this.props.globalState.workbench.selectedGuiNodes)));
45556
45679
  }
45557
45680
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "ge-propertyTab" },
45558
45681
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "header" },
@@ -45560,7 +45683,7 @@ var PropertyTabComponent = /** @class */ (function (_super) {
45560
45683
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "title" }, "AdvancedDynamicTexture")),
45561
45684
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
45562
45685
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextLineComponent"], { tooltip: "", label: "ART BOARD", value: " ", color: "grey" }),
45563
- 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 })),
45686
+ this.props.globalState.workbench._scene !== undefined && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_27__["ColorLineComponent"], { iconLabel: "Background Color", lockObject: this._lockObject, icon: artboardColorIcon, label: "", target: this.props.globalState, propertyName: "backgroundColor", disableAlpha: true })),
45564
45687
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
45565
45688
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextLineComponent"], { tooltip: "", label: "CANVAS", value: " ", color: "grey" }),
45566
45689
  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) {
@@ -45605,7 +45728,7 @@ var PropertyTabComponent = /** @class */ (function (_super) {
45605
45728
  _this.props.globalState.onSnippetSaveObservable.notifyObservers();
45606
45729
  } }),
45607
45730
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
45608
- this.renderNode(this.props.globalState.workbench.trueRootContainer))));
45731
+ this.renderNode([this.props.globalState.workbench.trueRootContainer]))));
45609
45732
  };
45610
45733
  return PropertyTabComponent;
45611
45734
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -45979,7 +46102,7 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
45979
46102
  else {
45980
46103
  _this.props.globalState.selectionLock = false;
45981
46104
  }
45982
- } }, 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 }))));
46105
+ }, onContextMenu: function (ev) { return ev.preventDefault(); } }, 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 }))));
45983
46106
  };
45984
46107
  SceneExplorerComponent.prototype.onClose = function () {
45985
46108
  if (!this.props.onClose) {
@@ -47381,6 +47504,10 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47381
47504
  if (adt._rootContainer != this._panAndZoomContainer) {
47382
47505
  adt._rootContainer = this._panAndZoomContainer;
47383
47506
  this._visibleRegionContainer.addControl(this._trueRootContainer);
47507
+ console.log(adt._rootContainer.name, this._panAndZoomContainer.host, this._visibleRegionContainer.host, this._trueRootContainer.host);
47508
+ }
47509
+ if (adt.getSize().width !== this._engine.getRenderWidth() || adt.getSize().height !== this._engine.getRenderHeight()) {
47510
+ adt.scaleTo(this._engine.getRenderWidth(), this._engine.getRenderHeight());
47384
47511
  }
47385
47512
  if (adt.getSize().width !== this._engine.getRenderWidth() || adt.getSize().height !== this._engine.getRenderHeight()) {
47386
47513
  adt.scaleTo(this._engine.getRenderWidth(), this._engine.getRenderHeight());
@@ -47940,8 +48067,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47940
48067
  this._engine = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Engine"](canvas);
47941
48068
  // Create our first scene.
47942
48069
  this._scene = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Scene"](this._engine);
47943
- var clearColor = 204 / 255.0;
47944
- this._scene.clearColor = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Color4"](clearColor, clearColor, clearColor, 0.0);
48070
+ this._scene.clearColor = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Color4"](0, 0, 0, 0);
47945
48071
  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);
47946
48072
  light.intensity = 0.9;
47947
48073
  this._guiSize = this._defaultGUISize;
@@ -48037,6 +48163,8 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48037
48163
  _this._panning = true;
48038
48164
  _this._initialPanningOffset = _this.getScaledPointerPosition();
48039
48165
  _this._panAndZoomContainer.getDescendants().forEach(function (desc) {
48166
+ if (!desc.metadata)
48167
+ desc.metadata = {};
48040
48168
  desc.metadata.isPointerBlocker = desc.isPointerBlocker;
48041
48169
  desc.isPointerBlocker = false;
48042
48170
  });
@@ -48044,7 +48172,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48044
48172
  var endPanning = function () {
48045
48173
  _this._panning = false;
48046
48174
  _this._panAndZoomContainer.getDescendants().forEach(function (desc) {
48047
- if (desc.metadata.isPointerBlocker !== undefined) {
48175
+ if (desc.metadata && desc.metadata.isPointerBlocker !== undefined) {
48048
48176
  desc.isPointerBlocker = desc.metadata.isPointerBlocker;
48049
48177
  delete desc.metadata.isPointerBlocker;
48050
48178
  }
@@ -48055,7 +48183,6 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48055
48183
  };
48056
48184
  (_a = this._rootContainer.current) === null || _a === void 0 ? void 0 : _a.addEventListener("wheel", zoomFnScrollWheel);
48057
48185
  (_b = this._rootContainer.current) === null || _b === void 0 ? void 0 : _b.addEventListener("pointerdown", function (event) {
48058
- console.log(event);
48059
48186
  removeObservers();
48060
48187
  if (event.button !== 0 || _this._forcePanning) {
48061
48188
  startPanning();
@@ -48278,16 +48405,33 @@ var GlobalState = /** @class */ (function () {
48278
48405
  this.onWindowResizeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48279
48406
  this.onGizmoUpdateRequireObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48280
48407
  this.onArtBoardUpdateRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48408
+ this.onBackgroundColorChangeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48281
48409
  this.draggedControl = null;
48282
48410
  this.isSaving = false;
48283
48411
  this.lockObject = new _sharedUiComponents_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_1__["LockObject"]();
48284
48412
  this.controlCamera = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].ReadBoolean("ControlCamera", true);
48285
- var r = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].ReadNumber("BackgroundColorR", 0.12549019607843137);
48286
- var g = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].ReadNumber("BackgroundColorG", 0.09803921568627451);
48287
- var b = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].ReadNumber("BackgroundColorB", 0.25098039215686274);
48288
- this.backgroundColor = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Color4"](r, g, b, 1.0);
48413
+ var defaultBrightness = 204 / 255.0;
48414
+ var r = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].ReadNumber("BackgroundColorR", defaultBrightness);
48415
+ var g = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].ReadNumber("BackgroundColorG", defaultBrightness);
48416
+ var b = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].ReadNumber("BackgroundColorB", defaultBrightness);
48417
+ this.backgroundColor = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Color3"](r, g, b);
48418
+ this.onBackgroundColorChangeObservable.notifyObservers();
48289
48419
  _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_2__["CoordinateHelper"].globalState = this;
48290
48420
  }
48421
+ Object.defineProperty(GlobalState.prototype, "backgroundColor", {
48422
+ get: function () {
48423
+ return this._backgroundColor;
48424
+ },
48425
+ set: function (value) {
48426
+ this._backgroundColor = value;
48427
+ this.onBackgroundColorChangeObservable.notifyObservers();
48428
+ _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].WriteNumber("BackgroundColorR", value.r);
48429
+ _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].WriteNumber("BackgroundColorG", value.g);
48430
+ _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].WriteNumber("BackgroundColorB", value.b);
48431
+ },
48432
+ enumerable: false,
48433
+ configurable: true
48434
+ });
48291
48435
  return GlobalState;
48292
48436
  }());
48293
48437
 
@@ -48972,6 +49116,9 @@ var ColorPicker = /** @class */ (function (_super) {
48972
49116
  }
48973
49117
  var hsv = this.state.color.toHSV();
48974
49118
  _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color3"].HSVtoRGBToRef(hsv.r, saturation, value, this.state.color);
49119
+ if (this.state.alpha === 0) {
49120
+ this.setState({ alpha: 1 });
49121
+ }
48975
49122
  this.setState({ color: this.state.color });
48976
49123
  };
48977
49124
  ColorPicker.prototype._evaluateHue = function (evt) {
@@ -49025,6 +49172,7 @@ var ColorPicker = /** @class */ (function (_super) {
49025
49172
  left: "".concat((hsv.r / 360.0) * 100, "%"),
49026
49173
  border: "1px solid " + colorHexRef,
49027
49174
  } }))),
49175
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-alpha" }),
49028
49176
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-rgb" },
49029
49177
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "red" },
49030
49178
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__["ColorComponentEntry"], { label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: function (value) {
@@ -49740,6 +49888,8 @@ __webpack_require__.r(__webpack_exports__);
49740
49888
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
49741
49889
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
49742
49890
  /* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
49891
+ /* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
49892
+
49743
49893
 
49744
49894
 
49745
49895
 
@@ -49750,10 +49900,10 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
49750
49900
  _this._localChange = false;
49751
49901
  _this._uniqueId = CheckBoxLineComponent._UniqueIdSeed++;
49752
49902
  if (_this.props.isSelected) {
49753
- _this.state = { isSelected: _this.props.isSelected() };
49903
+ _this.state = { isSelected: _this.props.isSelected(), isConflict: false };
49754
49904
  }
49755
49905
  else {
49756
- _this.state = { isSelected: _this.props.target[_this.props.propertyName] == true };
49906
+ _this.state = { isSelected: _this.props.target[_this.props.propertyName] === true, isConflict: _this.props.target[_this.props.propertyName] === _targetsProxy__WEBPACK_IMPORTED_MODULE_3__["conflictingValuesPlaceholder"] };
49757
49907
  }
49758
49908
  if (_this.props.disabled) {
49759
49909
  _this.state = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({}, _this.state), { isDisabled: _this.props.disabled });
@@ -49766,7 +49916,10 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
49766
49916
  currentState = nextProps.isSelected();
49767
49917
  }
49768
49918
  else {
49769
- currentState = nextProps.target[nextProps.propertyName] == true;
49919
+ currentState = nextProps.target[nextProps.propertyName] === true;
49920
+ if (nextProps.target[nextProps.propertyName] === _targetsProxy__WEBPACK_IMPORTED_MODULE_3__["conflictingValuesPlaceholder"]) {
49921
+ nextState.isConflict = true;
49922
+ }
49770
49923
  }
49771
49924
  if (currentState !== nextState.isSelected || this._localChange) {
49772
49925
  nextState.isSelected = currentState;
@@ -49776,7 +49929,7 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
49776
49929
  if (nextProps.disabled !== nextState.isDisabled) {
49777
49930
  return true;
49778
49931
  }
49779
- return nextProps.label !== this.props.label || nextProps.target !== this.props.target;
49932
+ return nextProps.label !== this.props.label || nextProps.target !== this.props.target || nextState.isConflict !== this.state.isConflict;
49780
49933
  };
49781
49934
  CheckBoxLineComponent.prototype.onChange = function () {
49782
49935
  this._localChange = true;
@@ -49797,7 +49950,7 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
49797
49950
  if (this.props.onValueChanged) {
49798
49951
  this.props.onValueChanged();
49799
49952
  }
49800
- this.setState({ isSelected: !this.state.isSelected });
49953
+ this.setState({ isSelected: !this.state.isSelected, isConflict: false });
49801
49954
  };
49802
49955
  CheckBoxLineComponent.prototype.render = function () {
49803
49956
  var _this = this;
@@ -49807,7 +49960,7 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
49807
49960
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.iconLabel }, this.props.label),
49808
49961
  this.props.faIcons && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__["FontAwesomeIcon"], { className: "cbx ".concat(this.props.disabled ? "disabled" : ""), icon: this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled, onClick: function () { return !_this.props.disabled && _this.onChange(); } }),
49809
49962
  !this.props.faIcons && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "checkBox" },
49810
- 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 }),
49963
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkbox", id: "checkbox" + this._uniqueId, className: "cbx hidden ".concat(this.state.isConflict ? "conflict" : ""), checked: this.state.isSelected, onChange: function () { return _this.onChange(); }, disabled: !!this.props.disabled }),
49811
49964
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("label", { htmlFor: "checkbox" + this._uniqueId, className: "lbl".concat(!!this.props.disabled ? " disabled" : "") }))));
49812
49965
  };
49813
49966
  CheckBoxLineComponent._UniqueIdSeed = 0;
@@ -49831,13 +49984,48 @@ __webpack_require__.r(__webpack_exports__);
49831
49984
  /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
49832
49985
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
49833
49986
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
49834
- /* harmony import */ var _numericInputComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./numericInputComponent */ "./sharedUiComponents/lines/numericInputComponent.tsx");
49835
- /* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
49836
- /* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "../../../../node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
49837
- /* harmony import */ var _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @babylonjs/core/Maths/math.color */ "@babylonjs/core/Misc/observable");
49838
- /* harmony import */ var _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__);
49987
+ /* harmony import */ var _colorLineComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
49988
+
49989
+
49990
+
49991
+ var Color3LineComponent = /** @class */ (function (_super) {
49992
+ Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Color3LineComponent, _super);
49993
+ function Color3LineComponent() {
49994
+ return _super !== null && _super.apply(this, arguments) || this;
49995
+ }
49996
+ Color3LineComponent.prototype.render = function () {
49997
+ var props = this.props;
49998
+ return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorLineComponent__WEBPACK_IMPORTED_MODULE_2__["ColorLineComponent"], Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__assign"])({ disableAlpha: true }, props));
49999
+ };
50000
+ return Color3LineComponent;
50001
+ }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
50002
+
50003
+
50004
+
50005
+ /***/ }),
50006
+
50007
+ /***/ "./sharedUiComponents/lines/colorLineComponent.tsx":
50008
+ /*!*********************************************************!*\
50009
+ !*** ./sharedUiComponents/lines/colorLineComponent.tsx ***!
50010
+ \*********************************************************/
50011
+ /*! exports provided: ColorLineComponent */
50012
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
50013
+
50014
+ "use strict";
50015
+ __webpack_require__.r(__webpack_exports__);
50016
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ColorLineComponent", function() { return ColorLineComponent; });
50017
+ /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
50018
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
50019
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
50020
+ /* harmony import */ var _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babylonjs/core/Maths/math.color */ "@babylonjs/core/Misc/observable");
50021
+ /* harmony import */ var _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__);
50022
+ /* harmony import */ var _numericInputComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./numericInputComponent */ "./sharedUiComponents/lines/numericInputComponent.tsx");
50023
+ /* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
50024
+ /* harmony import */ var _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @fortawesome/free-solid-svg-icons */ "../../../../node_modules/@fortawesome/free-solid-svg-icons/index.es.js");
49839
50025
  /* harmony import */ var _colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./colorPickerComponent */ "./sharedUiComponents/lines/colorPickerComponent.tsx");
49840
50026
  /* harmony import */ var _textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
50027
+ /* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
50028
+
49841
50029
 
49842
50030
 
49843
50031
 
@@ -49847,137 +50035,128 @@ __webpack_require__.r(__webpack_exports__);
49847
50035
 
49848
50036
 
49849
50037
  var copyIcon = __webpack_require__(/*! ./copy.svg */ "./sharedUiComponents/lines/copy.svg");
49850
- var Color3LineComponent = /** @class */ (function (_super) {
49851
- Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(Color3LineComponent, _super);
49852
- function Color3LineComponent(props) {
50038
+ var emptyColor = new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](0, 0, 0, 0);
50039
+ var ColorLineComponent = /** @class */ (function (_super) {
50040
+ Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ColorLineComponent, _super);
50041
+ function ColorLineComponent(props) {
49853
50042
  var _this = _super.call(this, props) || this;
49854
- _this._localChange = false;
49855
- var typeName = typeof _this.props.target[_this.props.propertyName];
49856
- if (typeName === "string") {
49857
- var colorConverted = _this.convertToColor3(_this.props.target[_this.props.propertyName]);
49858
- _this.state = { isExpanded: false, color: colorConverted, colorText: _this.props.target[_this.props.propertyName] };
49859
- }
49860
- else {
49861
- _this.state = { isExpanded: false, color: _this.props.target[_this.props.propertyName].clone(), colorText: _this.props.target[_this.props.propertyName].toHexString() };
49862
- }
50043
+ var colorString = _this.getValueAsString();
50044
+ var color = _this.getValue();
50045
+ _this.state = { isExpanded: false, color: color, colorString: colorString };
49863
50046
  if (props.isLinear) {
49864
50047
  _this.state.color.toGammaSpaceToRef(_this.state.color);
49865
50048
  }
49866
- props.target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
49867
- _this._colorPickerOpen = false;
50049
+ var target = _this.props.target;
50050
+ target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
49868
50051
  return _this;
49869
50052
  }
49870
- Color3LineComponent.prototype.convertToColor3 = function (color) {
49871
- if (color === "" || color === "transparent") {
49872
- return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__["Color4"](0, 0, 0, 0);
50053
+ ColorLineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
50054
+ var stateString = nextState.colorString;
50055
+ var stateColor = nextState.color;
50056
+ var propsString = this.getValueAsString(nextProps);
50057
+ var propsColor = this.getValue(nextProps);
50058
+ if (stateString !== this.state.colorString || stateColor !== this.state.color) {
50059
+ nextState.colorString = stateString;
50060
+ nextState.color = stateColor;
50061
+ return true;
49873
50062
  }
49874
- if (color.substring(0, 1) !== "#" || color.length !== 7) {
49875
- var d = document.createElement("div");
49876
- d.style.color = color;
49877
- document.body.append(d);
49878
- var rgb = window.getComputedStyle(d).color;
49879
- document.body.removeChild(d);
49880
- var rgbArray = rgb
49881
- .substring(4, rgb.length - 1)
49882
- .replace(/ /g, "")
49883
- .split(",");
49884
- return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__["Color3"](parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255);
50063
+ if (propsString !== this.state.colorString || propsColor !== this.state.color) {
50064
+ nextState.colorString = propsString;
50065
+ nextState.color = propsColor;
50066
+ return true;
49885
50067
  }
49886
- return _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_5__["Color3"].FromHexString(color);
49887
- };
49888
- Color3LineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
49889
- var isString = typeof this.props.target[this.props.propertyName] === "string";
49890
- var currentState = isString
49891
- ? this.convertToColor3(nextProps.target[nextProps.propertyName])
49892
- : this.props.isLinear
49893
- ? nextProps.target[nextProps.propertyName].toGammaSpace()
49894
- : nextProps.target[nextProps.propertyName];
49895
- if (!currentState.equals(nextState.color) || this._localChange) {
49896
- nextState.color = currentState.clone();
49897
- nextState.colorText = isString ? nextProps.target[nextProps.propertyName] : nextProps.target[nextProps.propertyName].toHexString();
49898
- this._localChange = false;
50068
+ if (nextState.isExpanded !== this.state.isExpanded) {
49899
50069
  return true;
49900
50070
  }
49901
50071
  return false;
49902
50072
  };
49903
- Color3LineComponent.prototype.setPropertyValue = function (newColor, newColorText) {
49904
- var isString = typeof this.props.target[this.props.propertyName] === "string";
49905
- if (isString) {
49906
- this.props.target[this.props.propertyName] = newColorText;
50073
+ ColorLineComponent.prototype.getValue = function (props) {
50074
+ if (props === void 0) { props = this.props; }
50075
+ var target = props.target;
50076
+ var property = target[props.propertyName];
50077
+ if (!property)
50078
+ return emptyColor;
50079
+ if (typeof property === "string") {
50080
+ if (property === _targetsProxy__WEBPACK_IMPORTED_MODULE_8__["conflictingValuesPlaceholder"]) {
50081
+ return emptyColor;
50082
+ }
50083
+ return this.convertToColor(property);
49907
50084
  }
49908
50085
  else {
49909
- this.props.target[this.props.propertyName] = newColor;
49910
- if (this.props.isLinear) {
49911
- this.props.target[this.props.propertyName] = newColor.toLinearSpace();
49912
- }
50086
+ return property;
49913
50087
  }
49914
50088
  };
49915
- Color3LineComponent.prototype.onChange = function (newValue) {
49916
- this._localChange = true;
49917
- var newColor = this.convertToColor3(newValue);
49918
- if (this._colorPickerOpen && this.props.icon) {
49919
- var savedColor = this.convertToColor3(this._colorStringSaved);
49920
- if (savedColor.equals(newColor)) {
49921
- newValue = this._colorStringSaved;
49922
- }
50089
+ ColorLineComponent.prototype.getValueAsString = function (props) {
50090
+ if (props === void 0) { props = this.props; }
50091
+ var target = props.target;
50092
+ var property = target[props.propertyName];
50093
+ if (!property)
50094
+ return "";
50095
+ if (typeof property === "string") {
50096
+ return property;
50097
+ }
50098
+ else {
50099
+ return property.toHexString();
50100
+ }
50101
+ };
50102
+ ColorLineComponent.prototype.setColorFromString = function (colorString) {
50103
+ if (colorString === _targetsProxy__WEBPACK_IMPORTED_MODULE_8__["conflictingValuesPlaceholder"])
50104
+ return;
50105
+ var color = this.convertToColor(colorString);
50106
+ if (this.props.isLinear) {
50107
+ color = color.toLinearSpace();
50108
+ }
50109
+ this.updateColor(color);
50110
+ this.setState({ color: color, colorString: colorString });
50111
+ };
50112
+ ColorLineComponent.prototype.setColor = function (color) {
50113
+ if (this.props.isLinear) {
50114
+ color = color.toLinearSpace();
49923
50115
  }
50116
+ this.updateColor(color);
50117
+ var colorString = this.props.disableAlpha ? this.toColor3(color).toHexString() : color.toHexString();
50118
+ this.setState({ color: color, colorString: colorString });
50119
+ };
50120
+ ColorLineComponent.prototype.updateColor = function (newColor) {
50121
+ // whether to set properties to color3 or color4
50122
+ var setColor = this.props.disableAlpha ? this.toColor3(newColor) : newColor;
50123
+ var target = this.props.target;
50124
+ var initialValue = target[this.props.propertyName];
50125
+ var value = typeof target[this.props.propertyName] === "string" ? setColor.toHexString() : setColor;
50126
+ // make the change
50127
+ target[this.props.propertyName] = value;
50128
+ // notify observers
49924
50129
  if (this.props.onPropertyChangedObservable) {
49925
50130
  this.props.onPropertyChangedObservable.notifyObservers({
49926
- object: this.props.target,
50131
+ object: target,
49927
50132
  property: this.props.propertyName,
49928
- value: newColor,
49929
- initialValue: this.state.color,
50133
+ value: value,
50134
+ initialValue: initialValue
49930
50135
  });
49931
50136
  }
49932
- this.setPropertyValue(newColor, newValue);
49933
- this.setState({ color: newColor, colorText: newValue });
49934
- if (this.props.onValueChange) {
49935
- this.props.onValueChange(newValue);
50137
+ if (this.props.onChange) {
50138
+ this.props.onChange();
49936
50139
  }
49937
50140
  };
49938
- Color3LineComponent.prototype.switchExpandState = function () {
49939
- this._localChange = true;
50141
+ ColorLineComponent.prototype.switchExpandState = function () {
49940
50142
  this.setState({ isExpanded: !this.state.isExpanded });
49941
50143
  };
49942
- Color3LineComponent.prototype.raiseOnPropertyChanged = function (previousValue) {
49943
- if (!this.props.onPropertyChangedObservable) {
49944
- return;
49945
- }
49946
- this.props.onPropertyChangedObservable.notifyObservers({
49947
- object: this.props.target,
49948
- property: this.props.propertyName,
49949
- value: this.state.color,
49950
- initialValue: previousValue,
49951
- });
50144
+ ColorLineComponent.prototype.updateStateR = function (value) {
50145
+ this.setColor(new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](value, this.state.color.g, this.state.color.b, this.state.color.a));
49952
50146
  };
49953
- Color3LineComponent.prototype.updateStateR = function (value) {
49954
- this._localChange = true;
49955
- var store = this.state.color.clone();
49956
- this.state.color.r = value;
49957
- var hex = this.state.color.toHexString();
49958
- this.setPropertyValue(this.state.color, hex);
49959
- this.setState({ color: this.state.color, colorText: hex });
49960
- this.raiseOnPropertyChanged(store);
50147
+ ColorLineComponent.prototype.updateStateG = function (value) {
50148
+ this.setColor(new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](this.state.color.r, value, this.state.color.b, this.state.color.a));
49961
50149
  };
49962
- Color3LineComponent.prototype.updateStateG = function (value) {
49963
- this._localChange = true;
49964
- var store = this.state.color.clone();
49965
- this.state.color.g = value;
49966
- var hex = this.state.color.toHexString();
49967
- this.setPropertyValue(this.state.color, hex);
49968
- this.setState({ color: this.state.color, colorText: hex });
49969
- this.raiseOnPropertyChanged(store);
50150
+ ColorLineComponent.prototype.updateStateB = function (value) {
50151
+ this.setColor(new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](this.state.color.r, this.state.color.g, value, this.state.color.a));
49970
50152
  };
49971
- Color3LineComponent.prototype.updateStateB = function (value) {
49972
- this._localChange = true;
49973
- var store = this.state.color.clone();
49974
- this.state.color.b = value;
49975
- var hex = this.state.color.toHexString();
49976
- this.setPropertyValue(this.state.color, hex);
49977
- this.setState({ color: this.state.color, colorText: hex });
49978
- this.raiseOnPropertyChanged(store);
50153
+ ColorLineComponent.prototype.updateStateA = function (value) {
50154
+ if (this.props.disableAlpha) {
50155
+ return;
50156
+ }
50157
+ this.setColor(new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](this.state.color.r, this.state.color.g, this.state.color.b, value));
49979
50158
  };
49980
- Color3LineComponent.prototype.copyToClipboard = function () {
50159
+ ColorLineComponent.prototype.copyToClipboard = function () {
49981
50160
  var element = document.createElement("div");
49982
50161
  element.textContent = this.state.color.toHexString();
49983
50162
  document.body.appendChild(element);
@@ -49990,38 +50169,64 @@ var Color3LineComponent = /** @class */ (function (_super) {
49990
50169
  document.execCommand("copy");
49991
50170
  element.remove();
49992
50171
  };
49993
- Color3LineComponent.prototype.convert = function (colorString) {
49994
- this.onChange(this._colorString);
50172
+ Object.defineProperty(ColorLineComponent.prototype, "colorString", {
50173
+ get: function () {
50174
+ return this.state.colorString;
50175
+ },
50176
+ set: function (_) { },
50177
+ enumerable: false,
50178
+ configurable: true
50179
+ });
50180
+ ColorLineComponent.prototype.convertToColor = function (color) {
50181
+ if (color === "" || color === "transparent") {
50182
+ return emptyColor;
50183
+ }
50184
+ if (color.substring(0, 1) !== "#" || (color.length !== 7 && color.length !== 9)) {
50185
+ var d = document.createElement("div");
50186
+ d.style.color = color;
50187
+ document.body.append(d);
50188
+ var rgb = window.getComputedStyle(d).color;
50189
+ document.body.removeChild(d);
50190
+ var rgbArray = rgb
50191
+ .substring(4, rgb.length - 1)
50192
+ .replace(/ /g, "")
50193
+ .split(",");
50194
+ var alpha = rgbArray.length > 3 ? parseInt(rgbArray[3]) / 255 : 1.0;
50195
+ return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](parseInt(rgbArray[0]) / 255, parseInt(rgbArray[1]) / 255, parseInt(rgbArray[2]) / 255, alpha);
50196
+ }
50197
+ if (this.props.disableAlpha) {
50198
+ var color3 = _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color3"].FromHexString(color);
50199
+ return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"](color3.r, color3.g, color3.b, 1.0);
50200
+ }
50201
+ return _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color4"].FromHexString(color);
49995
50202
  };
49996
- Color3LineComponent.prototype.render = function () {
50203
+ ColorLineComponent.prototype.toColor3 = function (color) {
50204
+ return new _babylonjs_core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__["Color3"](color.r, color.g, color.b);
50205
+ };
50206
+ ColorLineComponent.prototype.render = function () {
49997
50207
  var _this = this;
49998
- 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"] });
49999
- this._colorString = this.state.colorText;
50208
+ var chevron = this.state.isExpanded ? react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__["faMinus"] }) : react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__["FontAwesomeIcon"], { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__["faPlus"] });
50000
50209
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3Line" },
50001
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "firstLine", title: this.props.label },
50210
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "firstLine" },
50002
50211
  this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
50003
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label" }, this.props.label),
50212
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label),
50004
50213
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3" },
50005
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__["ColorPickerLineComponent"], { linearHint: this.props.isLinear, value: this.state.color, onColorChanged: function (color) {
50006
- if (!_this._colorPickerOpen) {
50007
- _this._colorStringSaved = _this._colorString;
50008
- }
50009
- _this._colorPickerOpen = true;
50010
- _this.onChange(color);
50214
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__["ColorPickerLineComponent"], { linearHint: this.props.isLinear, value: this.props.disableAlpha ? this.toColor3(this.state.color) : this.state.color, onColorChanged: function (color) {
50215
+ _this.setColor(_this.convertToColor(color));
50011
50216
  } })),
50012
- 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) {
50013
- _this._colorPickerOpen = false;
50014
- _this.convert(newValue);
50217
+ 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) {
50218
+ _this.setColorFromString(newValue);
50015
50219
  }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
50016
50220
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "copy hoverIcon", onClick: function () { return _this.copyToClipboard(); }, title: "Copy to clipboard" },
50017
50221
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: copyIcon, alt: "" })),
50018
50222
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "expand hoverIcon", onClick: function () { return _this.switchExpandState(); }, title: "Expand" }, chevron)),
50019
50223
  this.state.isExpanded && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "secondLine" },
50020
- 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); } }),
50021
- 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); } }),
50022
- 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); } })))));
50224
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "r", value: this.state.color.r, onChange: function (value) { return _this.updateStateR(value); } }),
50225
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "g", value: this.state.color.g, onChange: function (value) { return _this.updateStateG(value); } }),
50226
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "b", value: this.state.color.b, onChange: function (value) { return _this.updateStateB(value); } }),
50227
+ this.props.disableAlpha || react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__["NumericInputComponent"], { label: "a", value: this.state.color.a, onChange: function (value) { return _this.updateStateA(value); } })))));
50023
50228
  };
50024
- return Color3LineComponent;
50229
+ return ColorLineComponent;
50025
50230
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
50026
50231
 
50027
50232
 
@@ -50049,7 +50254,7 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
50049
50254
  Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ColorPickerLineComponent, _super);
50050
50255
  function ColorPickerLineComponent(props) {
50051
50256
  var _this = _super.call(this, props) || this;
50052
- _this.state = { pickerEnabled: false, color: _this.props.value, hex: _this.props.value.toHexString() };
50257
+ _this.state = { pickerEnabled: false, color: _this.props.value, hex: _this.getHexString(props) };
50053
50258
  _this._floatRef = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
50054
50259
  _this._floatHostRef = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
50055
50260
  return _this;
@@ -50074,13 +50279,17 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
50074
50279
  }
50075
50280
  };
50076
50281
  ColorPickerLineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
50077
- var diffProps = nextProps.value.toHexString() !== this.props.value.toHexString();
50282
+ var diffProps = this.getHexString(nextProps) !== this.getHexString();
50078
50283
  if (diffProps) {
50079
50284
  nextState.color = nextProps.value;
50080
- nextState.hex = nextProps.value.toHexString();
50285
+ nextState.hex = this.getHexString(nextProps);
50081
50286
  }
50082
50287
  return diffProps || nextState.hex !== this.state.hex || nextState.pickerEnabled !== this.state.pickerEnabled;
50083
50288
  };
50289
+ ColorPickerLineComponent.prototype.getHexString = function (props) {
50290
+ if (props === void 0) { props = this.props; }
50291
+ return props.value.toHexString();
50292
+ };
50084
50293
  ColorPickerLineComponent.prototype.componentDidUpdate = function () {
50085
50294
  this.syncPositions();
50086
50295
  };
@@ -50089,10 +50298,10 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
50089
50298
  };
50090
50299
  ColorPickerLineComponent.prototype.render = function () {
50091
50300
  var _this = this;
50092
- var color = this.state.color;
50093
50301
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker" },
50094
50302
  this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
50095
- 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 }); } }),
50303
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-rect-background", ref: this._floatHostRef, onClick: function () { return _this.setState({ pickerEnabled: true }); } },
50304
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-rect", style: { background: this.state.hex } })),
50096
50305
  this.state.pickerEnabled && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
50097
50306
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-cover", onClick: function (evt) {
50098
50307
  var _a, _b;
@@ -50102,7 +50311,7 @@ var ColorPickerLineComponent = /** @class */ (function (_super) {
50102
50311
  _this.setState({ pickerEnabled: false });
50103
50312
  } },
50104
50313
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color-picker-float", ref: this._floatRef },
50105
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__["ColorPicker"], { color: color, linearhint: this.props.linearHint, onColorChanged: function (color) {
50314
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__["ColorPicker"], { color: this.state.color, linearhint: this.props.linearHint, onColorChanged: function (color) {
50106
50315
  var hex = color.toHexString();
50107
50316
  _this.setState({ hex: hex, color: color });
50108
50317
  _this.props.onColorChanged(hex);
@@ -50187,6 +50396,8 @@ __webpack_require__.r(__webpack_exports__);
50187
50396
  /* harmony import */ var _sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./sliderLineComponent */ "./sharedUiComponents/lines/sliderLineComponent.tsx");
50188
50397
  /* harmony import */ var _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @babylonjs/core/Misc/tools */ "@babylonjs/core/Misc/observable");
50189
50398
  /* harmony import */ var _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__);
50399
+ /* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
50400
+
50190
50401
 
50191
50402
 
50192
50403
 
@@ -50197,20 +50408,34 @@ var FloatLineComponent = /** @class */ (function (_super) {
50197
50408
  var _this = _super.call(this, props) || this;
50198
50409
  _this._localChange = false;
50199
50410
  var currentValue = _this.props.target[_this.props.propertyName];
50200
- _this.state = { value: currentValue ? (_this.props.isInteger ? currentValue.toFixed(0) : currentValue.toFixed(_this.props.digits || 4)) : "0" };
50411
+ _this.state = { value: _this.getValueString(currentValue) };
50201
50412
  _this._store = currentValue;
50202
50413
  return _this;
50203
50414
  }
50204
50415
  FloatLineComponent.prototype.componentWillUnmount = function () {
50205
50416
  this.unlock();
50206
50417
  };
50418
+ FloatLineComponent.prototype.getValueString = function (value) {
50419
+ if (value) {
50420
+ if (value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__["conflictingValuesPlaceholder"]) {
50421
+ return _targetsProxy__WEBPACK_IMPORTED_MODULE_4__["conflictingValuesPlaceholder"];
50422
+ }
50423
+ else if (this.props.isInteger) {
50424
+ return value.toFixed(0);
50425
+ }
50426
+ else {
50427
+ return value.toFixed(this.props.digits || 4);
50428
+ }
50429
+ }
50430
+ return "0";
50431
+ };
50207
50432
  FloatLineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
50208
50433
  if (this._localChange) {
50209
50434
  this._localChange = false;
50210
50435
  return true;
50211
50436
  }
50212
50437
  var newValue = nextProps.target[nextProps.propertyName];
50213
- var newValueString = newValue ? (this.props.isInteger ? newValue.toFixed(0) : newValue.toFixed(this.props.digits || 4)) : "0";
50438
+ var newValueString = this.getValueString(newValue);
50214
50439
  if (newValueString !== nextState.value) {
50215
50440
  nextState.value = newValueString;
50216
50441
  return true;
@@ -50288,6 +50513,8 @@ var FloatLineComponent = /** @class */ (function (_super) {
50288
50513
  valueAsNumber = parseFloat(this.state.value);
50289
50514
  }
50290
50515
  var className = this.props.smallUI ? "short" : "value";
50516
+ var value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__["conflictingValuesPlaceholder"] ? "" : this.state.value;
50517
+ var placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__["conflictingValuesPlaceholder"] ? _targetsProxy__WEBPACK_IMPORTED_MODULE_4__["conflictingValuesPlaceholder"] : "";
50291
50518
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
50292
50519
  !this.props.useEuler && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine" },
50293
50520
  this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
@@ -50300,12 +50527,12 @@ var FloatLineComponent = /** @class */ (function (_super) {
50300
50527
  if (_this.props.onEnter) {
50301
50528
  _this.props.onEnter(_this._store);
50302
50529
  }
50303
- }, value: this.state.value, onBlur: function () {
50530
+ }, value: value, onBlur: function () {
50304
50531
  _this.unlock();
50305
50532
  if (_this.props.onEnter) {
50306
50533
  _this.props.onEnter(_this._store);
50307
50534
  }
50308
- }, onFocus: function () { return _this.lock(); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } })))),
50535
+ }, placeholder: placeholder, onFocus: function () { return _this.lock(); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } })))),
50309
50536
  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()); } }))));
50310
50537
  };
50311
50538
  return FloatLineComponent;
@@ -50616,6 +50843,8 @@ var SliderLineComponent = /** @class */ (function (_super) {
50616
50843
  return false;
50617
50844
  };
50618
50845
  SliderLineComponent.prototype.onChange = function (newValueString) {
50846
+ if (newValueString === "—")
50847
+ return;
50619
50848
  this._localChange = true;
50620
50849
  var newValue = parseFloat(newValueString);
50621
50850
  if (this.props.useEuler) {
@@ -50672,6 +50901,64 @@ var SliderLineComponent = /** @class */ (function (_super) {
50672
50901
 
50673
50902
 
50674
50903
 
50904
+ /***/ }),
50905
+
50906
+ /***/ "./sharedUiComponents/lines/targetsProxy.tsx":
50907
+ /*!***************************************************!*\
50908
+ !*** ./sharedUiComponents/lines/targetsProxy.tsx ***!
50909
+ \***************************************************/
50910
+ /*! exports provided: conflictingValuesPlaceholder, makeTargetsProxy */
50911
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
50912
+
50913
+ "use strict";
50914
+ __webpack_require__.r(__webpack_exports__);
50915
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "conflictingValuesPlaceholder", function() { return conflictingValuesPlaceholder; });
50916
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "makeTargetsProxy", function() { return makeTargetsProxy; });
50917
+ var conflictingValuesPlaceholder = "—";
50918
+ /**
50919
+ *
50920
+ * @param propertyName the property that the input changes
50921
+ * @param targets a list of selected targets
50922
+ * @param defaultValue the value that should be returned when two targets have conflicting values
50923
+ * @param setter an optional setter function to override the default setter behavior
50924
+ * @returns a proxy object that can be passed as a target into the input
50925
+ */
50926
+ function makeTargetsProxy(targets, onPropertyChangedObservable) {
50927
+ return new Proxy({}, {
50928
+ get: function (_, name) {
50929
+ if (targets.length === 0)
50930
+ return conflictingValuesPlaceholder;
50931
+ var firstValue = targets[0][name];
50932
+ for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
50933
+ var target = targets_1[_i];
50934
+ if (target[name] !== firstValue) {
50935
+ return conflictingValuesPlaceholder;
50936
+ }
50937
+ }
50938
+ return firstValue;
50939
+ },
50940
+ set: function (_, name, value) {
50941
+ if (value === "—")
50942
+ return true;
50943
+ for (var _i = 0, targets_2 = targets; _i < targets_2.length; _i++) {
50944
+ var target = targets_2[_i];
50945
+ var initialValue = target[name];
50946
+ target[name] = value;
50947
+ if (onPropertyChangedObservable) {
50948
+ onPropertyChangedObservable.notifyObservers({
50949
+ object: target,
50950
+ property: name,
50951
+ value: target[name],
50952
+ initialValue: initialValue
50953
+ });
50954
+ }
50955
+ }
50956
+ return true;
50957
+ }
50958
+ });
50959
+ }
50960
+
50961
+
50675
50962
  /***/ }),
50676
50963
 
50677
50964
  /***/ "./sharedUiComponents/lines/textInputLineComponent.tsx":
@@ -50687,6 +50974,8 @@ __webpack_require__.r(__webpack_exports__);
50687
50974
  /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
50688
50975
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
50689
50976
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
50977
+ /* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
50978
+
50690
50979
 
50691
50980
 
50692
50981
  var TextInputLineComponent = /** @class */ (function (_super) {
@@ -50750,14 +51039,16 @@ var TextInputLineComponent = /** @class */ (function (_super) {
50750
51039
  };
50751
51040
  TextInputLineComponent.prototype.render = function () {
50752
51041
  var _this = this;
51042
+ var value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__["conflictingValuesPlaceholder"] ? "" : this.state.value;
51043
+ var placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__["conflictingValuesPlaceholder"] ? _targetsProxy__WEBPACK_IMPORTED_MODULE_2__["conflictingValuesPlaceholder"] : "";
50753
51044
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "textInputLine" },
50754
51045
  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" }),
50755
51046
  (!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)),
50756
51047
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value" + (this.props.noUnderline === true ? " noUnderline" : "") },
50757
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: this.state.value, onBlur: function () {
51048
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: value, onBlur: function () {
50758
51049
  _this.props.lockObject.lock = false;
50759
51050
  _this.updateValue((_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "");
50760
- }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } }))));
51051
+ }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); }, placeholder: placeholder }))));
50761
51052
  };
50762
51053
  return TextInputLineComponent;
50763
51054
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -51194,6 +51485,7 @@ var WorkbenchEditor = /** @class */ (function (_super) {
51194
51485
  }
51195
51486
  }, false);
51196
51487
  _this.createItems();
51488
+ _this.props.globalState.onBackgroundColorChangeObservable.add(function () { return _this.forceUpdate(); });
51197
51489
  return _this;
51198
51490
  }
51199
51491
  WorkbenchEditor.prototype.componentDidMount = function () {
@@ -51266,6 +51558,8 @@ var WorkbenchEditor = /** @class */ (function (_super) {
51266
51558
  _this._draggedItem = null;
51267
51559
  }, onDragOver: function (event) {
51268
51560
  event.preventDefault();
51561
+ }, style: {
51562
+ backgroundColor: this.props.globalState.backgroundColor.toHexString()
51269
51563
  } },
51270
51564
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_artBoard__WEBPACK_IMPORTED_MODULE_12__["ArtBoardComponent"], { globalState: this.props.globalState }),
51271
51565
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_workbench__WEBPACK_IMPORTED_MODULE_7__["WorkbenchComponent"], { ref: "workbenchCanvas", globalState: this.props.globalState }),