@babylonjs/gui-editor 5.0.0-beta.7 → 5.0.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/babylon.guiEditor.max.js +1167 -723
  2. package/babylon.guiEditor.max.js.map +1 -1
  3. package/babylon.guiEditor.module.d.ts +231 -154
  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-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":""}]);
10117
+ ___CSS_LOADER_EXPORT___.push([module.i, ":root {\n --backgroundGrey: #aaaaaa;\n --spacingHeight: 30px;\n --labelFamily: \"acumin-pro-condensed-semibold\";\n --button: #333333;\n --buttonBackground: #ffffff;\n --buttonDisabledBackground: #c8c8c8;\n --buttonPressed: #ffffff;\n --buttonPressedBackground: #606060; }\n\nhr.ge {\n border: 1px solid #d0cece; }\n\n#ge-propertyTab {\n user-select: none;\n color: black;\n background: #e2e2e2; }\n #ge-propertyTab * {\n font-family: \"acumin-pro-semicondensed\";\n font-size: 12px; }\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: 100%;\n height: 2px;\n background: #bcbcbc;\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 .unit {\n width: 26px;\n height: 26px;\n color: var(--button);\n background-color: var(--buttonBackground);\n border: none;\n margin-top: 2px;\n cursor: pointer; }\n #ge-propertyTab .unit.disabled {\n background-color: var(--buttonDisabledBackground); }\n #ge-propertyTab .unit:active {\n color: var(--buttonPressed);\n background-color: var(--buttonPressedBackground); }\n #ge-propertyTab .sliderLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n padding-right: 18px;\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 font-family: var(--labelFamily); }\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: 0px; }\n #ge-propertyTab .sliderLine .floatLine .label {\n grid-column: 1;\n display: none;\n align-items: center;\n font-family: var(--labelFamily); }\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: 60px;\n background-color: white;\n outline-color: transparent;\n border: transparent;\n height: 26px;\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 -webkit-appearance: textfield;\n -moz-appearance: textfield;\n appearance: textfield; }\n #ge-propertyTab .ge-divider {\n display: grid;\n grid-template-columns: auto auto auto auto auto auto;\n padding-right: 18px; }\n #ge-propertyTab .ge-divider-short {\n display: grid;\n grid-template-columns: 1fr 1fr;\n padding-right: 18px; }\n #ge-propertyTab .ge-divider-single {\n display: block;\n padding-right: 18px; }\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 padding-right: 18px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 1fr; }\n #ge-propertyTab .textInputLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 15px;\n font-family: var(--labelFamily); }\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 grid-column: 3;\n background: transparent;\n height: 26px;\n position: relative;\n background-color: white;\n margin-top: 2px;\n overflow-y: hidden;\n margin-right: 2px; }\n #ge-propertyTab .textInputLine .value input {\n width: 100%;\n outline-color: transparent;\n border: transparent;\n outline-width: 0px;\n height: 24px; }\n #ge-propertyTab .textInputLine .value input.hasArrows {\n padding-right: 15px; }\n #ge-propertyTab .textInputLine .value .arrows {\n display: none; }\n #ge-propertyTab .textInputLine .value:hover .arrows, #ge-propertyTab .textInputLine .value:focus .arrows, #ge-propertyTab .textInputLine .value.dragging .arrows {\n position: absolute;\n right: 0;\n display: flex;\n flex-direction: column;\n background-color: white;\n cursor: grab; }\n #ge-propertyTab .textInputLine .value:hover .arrows .downArrowIcon, #ge-propertyTab .textInputLine .value:hover .arrows .upArrowIcon, #ge-propertyTab .textInputLine .value:focus .arrows .downArrowIcon, #ge-propertyTab .textInputLine .value:focus .arrows .upArrowIcon, #ge-propertyTab .textInputLine .value.dragging .arrows .downArrowIcon, #ge-propertyTab .textInputLine .value.dragging .arrows .upArrowIcon {\n width: 15px;\n height: 15px; }\n #ge-propertyTab .textInputLine .value.dragging .arrows {\n background-color: var(--buttonPressedBackground); }\n #ge-propertyTab .textInputLine .value.dragging .arrows .downArrowIcon, #ge-propertyTab .textInputLine .value.dragging .arrows .upArrowIcon {\n filter: invert(100%) brightness(500%); }\n #ge-propertyTab .textInputLine.withUnits {\n grid-template-columns: auto auto 1fr auto; }\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 .alignment-bar {\n display: flex;\n justify-content: center;\n padding-right: 5px; }\n #ge-propertyTab .command-button {\n cursor: pointer;\n width: 30px; }\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 font-family: var(--labelFamily); }\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 align-items: center;\n grid-column: 3;\n background: transparent;\n height: 30px;\n margin-right: 2px; }\n #ge-propertyTab .floatLine .value input {\n width: 100%;\n background-color: white;\n outline-color: transparent;\n border: none;\n outline-width: 0px;\n height: 24px; }\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 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 padding-right: 18px;\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 font-family: var(--labelFamily); }\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 margin-left: auto;\n margin-right: 0px; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl {\n position: relative;\n display: block;\n height: 14px;\n width: 34px;\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 padding-right: 18px;\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 padding-left: 15px; }\n #ge-propertyTab .color3Line .firstLine .color3 input {\n margin-right: 5px; }\n #ge-propertyTab .color3Line .firstLine .textInputLine .value {\n padding-left: 2px; }\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 padding-right: 18px;\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 color: #a9a9a9;\n font-size: 10px;\n font-family: \"acumin-pro-semicondensed\"; }\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 --labelFamily: \"acumin-pro-condensed-semibold\";\r\n --button: #333333;\r\n --buttonBackground: #ffffff;\r\n --buttonDisabledBackground: #c8c8c8;\r\n --buttonPressed: #ffffff;\r\n --buttonPressedBackground: #606060;\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 $line-padding-right: 18px;\r\n color:black;\r\n background: #e2e2e2;\r\n * {\r\n font-family: \"acumin-pro-semicondensed\";\r\n font-size: 12px;\r\n }\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: 100%;\r\n height: 2px;\r\n background: #bcbcbc;\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 .unit {\r\n width: 26px;\r\n height: 26px;\r\n color: var(--button);\r\n background-color: var(--buttonBackground);\r\n border: none;\r\n margin-top: 2px;\r\n cursor: pointer;\r\n }\r\n\r\n .unit.disabled {\r\n background-color: var(--buttonDisabledBackground);\r\n }\r\n\r\n .unit:active {\r\n color: var(--buttonPressed);\r\n background-color: var(--buttonPressedBackground);\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 padding-right: $line-padding-right;\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 font-family: var(--labelFamily);\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: 0px;\r\n \r\n .label {\r\n grid-column: 1;\r\n display: none;\r\n align-items: center;\r\n font-family: var(--labelFamily);\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: 60px;\r\n background-color: white;\r\n outline-color: transparent;\r\n border: transparent;\r\n height: 26px;\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 -webkit-appearance: textfield;\r\n -moz-appearance: textfield;\r\n 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 padding-right: $line-padding-right;\r\n }\r\n\r\n .ge-divider-short {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n padding-right: $line-padding-right;\r\n }\r\n\r\n .ge-divider-single {\r\n display: block;\r\n padding-right: $line-padding-right;\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 padding-right: $line-padding-right;\r\n height: var(--spacingHeight);\r\n display: grid;\r\n grid-template-columns: auto auto 1fr;\r\n .label {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n min-width: 15px;\r\n font-family: var(--labelFamily);\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 grid-column: 3;\r\n background: transparent;\r\n height: 26px;\r\n position: relative;\r\n background-color: white;\r\n margin-top: 2px;\r\n overflow-y: hidden;\r\n margin-right: 2px;\r\n input {\r\n width: 100%;\r\n outline-color: transparent;\r\n border: transparent;\r\n outline-width: 0px;\r\n height: 24px;\r\n }\r\n input.hasArrows {\r\n padding-right: 15px;\r\n }\r\n .arrows {\r\n display: none;\r\n }\r\n &:hover .arrows, &:focus .arrows, &.dragging .arrows {\r\n position: absolute;\r\n right: 0;\r\n display: flex;\r\n flex-direction: column;\r\n background-color: white;\r\n cursor: grab;\r\n .downArrowIcon, .upArrowIcon {\r\n width: 15px;\r\n height: 15px;\r\n }\r\n }\r\n &.dragging .arrows {\r\n background-color: var(--buttonPressedBackground);\r\n .downArrowIcon, .upArrowIcon {\r\n filter: invert(100%) brightness(500%);\r\n }\r\n }\r\n }\r\n }\r\n\r\n .textInputLine.withUnits {\r\n grid-template-columns: auto auto 1fr auto;\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 .alignment-bar {\r\n display: flex;\r\n justify-content: center;\r\n padding-right: 5px;\r\n }\r\n\r\n .command-button {\r\n cursor: pointer;\r\n width: 30px;\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 font-family: var(--labelFamily);\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 grid-column: 3;\r\n background: transparent;\r\n height: 30px;\r\n margin-right: 2px;\r\n input {\r\n width: 100%;\r\n background-color: white;\r\n outline-color: transparent;\r\n border: none;\r\n outline-width: 0px;\r\n height: 24px;\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 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 padding-right: $line-padding-right;\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 font-family: var(--labelFamily);\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 margin-left: auto;\r\n margin-right: 0px;\r\n \r\n .lbl {\r\n position: relative;\r\n display: block;\r\n height: 14px;\r\n width: 34px;\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 padding-right: $line-padding-right;\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 padding-left: 15px;\r\n \r\n input {\r\n margin-right: 5px;\r\n }\r\n }\r\n\r\n .textInputLine {\r\n .value {\r\n padding-left: 2px;\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 padding-right: $line-padding-right;\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 color: #a9a9a9;\r\n font-size: 10px;\r\n font-family: \"acumin-pro-semicondensed\";\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
 
@@ -10139,7 +10139,7 @@ __webpack_require__.r(__webpack_exports__);
10139
10139
 
10140
10140
  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);
10141
10141
  // Module
10142
- ___CSS_LOADER_EXPORT___.push([module.i, "#ge-scene-explorer-host {\n position: absolute;\n left: 0px;\n top: 0px;\n bottom: 0px;\n font-family: \"acumin-pro-condensed\"; }\n #ge-scene-explorer-host:focus {\n outline: none; }\n\n#ge-__resizable_base__ {\n display: none; }\n\n.ge-context-menu {\n background: #e2e2e2; }\n .ge-context-menu .react-contextmenu-item {\n padding: 10px;\n cursor: pointer; }\n .ge-context-menu .react-contextmenu-item:hover {\n background: #e2e2e2; }\n\n.ge-eact-contextmenu.context-menu.react-contextmenu--visible {\n z-index: 99;\n transform: scale(1); }\n\n#ge-sceneExplorer {\n background: #e2e2e2;\n height: 100%;\n margin: 0;\n padding: 0;\n display: grid;\n grid-template-rows: auto 1fr;\n font: 16px \"acumin-pro-condensed\"; }\n #ge-sceneExplorer:focus {\n outline: none; }\n #ge-sceneExplorer #header {\n height: 30px;\n font-size: 16px;\n color: black;\n background: #e2e2e2;\n grid-row: 1;\n text-align: center;\n display: grid;\n grid-template-columns: 30px 1fr 50px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n #ge-sceneExplorer #header #logo {\n position: relative;\n grid-column: 1;\n width: 24px;\n height: 24px;\n left: 0;\n display: flex;\n align-self: center;\n justify-self: center; }\n #ge-sceneExplorer #header #title {\n grid-column: 2;\n display: grid;\n align-items: center;\n text-align: center; }\n #ge-sceneExplorer #header #commands {\n grid-column: 3;\n display: grid;\n align-items: center;\n grid-template-columns: 1fr 1fr; }\n #ge-sceneExplorer #header #commands .expand {\n grid-column: 1;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-sceneExplorer #header #commands .close {\n grid-column: 2;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-sceneExplorer #tree {\n grid-row: 2;\n overflow-x: hidden;\n overflow-y: auto; }\n #ge-sceneExplorer .filter {\n display: flex;\n align-items: stretch; }\n #ge-sceneExplorer .filter input {\n width: 100%;\n margin: 10px 40px 5px 40px;\n display: block;\n border: none;\n padding: 0;\n border-bottom: solid 1px #337ab7;\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #337ab7 4%);\n background-position: -1000px 0;\n background-size: 1000px 100%;\n background-repeat: no-repeat;\n color: black; }\n #ge-sceneExplorer .filter input::placeholder {\n color: lightgray; }\n #ge-sceneExplorer .filter input:focus {\n box-shadow: none;\n outline: none;\n background-position: 0 0; }\n #ge-sceneExplorer .groupContainer {\n margin-left: 0px;\n color: black;\n margin-top: 0px;\n margin-bottom: 0px;\n height: 24px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n align-self: center;\n display: grid;\n align-items: center; }\n #ge-sceneExplorer .groupContainer:hover {\n background: #bbbbbb; }\n #ge-sceneExplorer .groupContainer .expandableHeader {\n display: grid;\n grid-template-columns: 1fr 20px; }\n #ge-sceneExplorer .groupContainer .expandableHeader .text {\n grid-column: 1;\n display: grid;\n grid-template-columns: 20px 1fr; }\n #ge-sceneExplorer .groupContainer .expandableHeader .text .arrow {\n grid-column: 1;\n margin-left: 0px;\n color: black;\n cursor: pointer;\n display: inline-block;\n margin-right: 6px;\n opacity: 0.5; }\n #ge-sceneExplorer .groupContainer .expandableHeader .text .text-value {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #ge-sceneExplorer .groupContainer .expandableHeader .expandAll {\n opacity: 0.5;\n grid-column: 2;\n margin-right: 10px; }\n #ge-sceneExplorer .icon {\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-sceneExplorer .addComponent {\n display: none; }\n #ge-sceneExplorer .makeChild {\n grid-column: 3; }\n #ge-sceneExplorer .itemContainer {\n margin-left: 0px;\n color: black;\n margin-top: 0px;\n margin-bottom: 0px;\n height: 32px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: grid;\n grid-template-columns: 20px 1fr;\n border: 2px solid transparent; }\n #ge-sceneExplorer .itemContainer.hover {\n border: 2px solid #527089;\n cursor: pointer; }\n #ge-sceneExplorer .itemContainer.seAbove {\n border-top: 2px solid #527089;\n cursor: pointer; }\n #ge-sceneExplorer .itemContainer.seBelow {\n border-bottom: 2px solid #527089;\n cursor: pointer; }\n #ge-sceneExplorer .itemContainer.selected {\n background: #bfbebe;\n color: black; }\n #ge-sceneExplorer .itemContainer.dragged {\n background: transparent;\n color: black; }\n #ge-sceneExplorer .itemContainer.parent {\n background: #ffffff;\n color: black; }\n #ge-sceneExplorer .itemContainer .isNotActive {\n opacity: 0.3; }\n #ge-sceneExplorer .itemContainer .arrow {\n grid-column: 1;\n color: black;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .popup {\n width: 200px;\n visibility: hidden;\n background-color: #bbbbbb;\n color: #fff;\n border: 1px solid rgba(255, 255, 255, 0.5);\n position: absolute;\n z-index: 1;\n margin-left: -180px;\n box-sizing: border-box; }\n #ge-sceneExplorer .itemContainer .popup.show {\n visibility: visible; }\n #ge-sceneExplorer .itemContainer .popup:focus {\n outline: none; }\n #ge-sceneExplorer .itemContainer .popup .popupMenu {\n padding: 6px 5px 5px 10px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n height: 18px; }\n #ge-sceneExplorer .itemContainer .popup .popupMenu:hover {\n background: white;\n color: #333333; }\n #ge-sceneExplorer .itemContainer .sceneNode {\n grid-column: 2;\n margin-left: -10px;\n display: grid;\n grid-template-columns: 1fr 20px 20px 20px 20px 10px 20px 20px auto 5px;\n align-items: center;\n cursor: pointer; }\n #ge-sceneExplorer .itemContainer .sceneNode .sceneTitle {\n grid-column: 1;\n margin-right: 5px;\n display: flex;\n align-items: center;\n height: 24px; }\n #ge-sceneExplorer .itemContainer .sceneNode .translation {\n grid-column: 2;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .sceneNode .translation.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .sceneNode .rotation {\n grid-column: 3;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .sceneNode .rotation.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .sceneNode .scaling {\n grid-column: 4;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .sceneNode .scaling.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .sceneNode .bounding {\n grid-column: 5;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .sceneNode .bounding.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .sceneNode .separator {\n grid-column: 6;\n margin-left: 5px;\n width: 5px;\n display: flex;\n align-items: center;\n height: 18px;\n border-left: solid 1px #337ab7; }\n #ge-sceneExplorer .itemContainer .sceneNode .pickingMode {\n grid-column: 7;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .sceneNode .pickingMode.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .sceneNode .refresh {\n grid-column: 8; }\n #ge-sceneExplorer .itemContainer .sceneNode .extensions {\n width: 20px;\n grid-column: 9; }\n #ge-sceneExplorer .itemContainer .adtextureTools {\n grid-column: 2;\n display: grid;\n grid-template-columns: 1fr 20px auto 5px;\n align-items: center; }\n #ge-sceneExplorer .itemContainer .adtextureTools .pickingMode {\n grid-column: 2;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .adtextureTools .pickingMode.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .adtextureTools .extensions {\n width: 20px;\n grid-column: 3; }\n #ge-sceneExplorer .itemContainer .controlTools {\n grid-column: 2;\n display: grid;\n grid-template-columns: 1fr 30px 30px auto 5px;\n align-items: center; }\n #ge-sceneExplorer .itemContainer .controlTools .highlight {\n grid-column: 2; }\n #ge-sceneExplorer .itemContainer .controlTools .visibility {\n grid-column: 3; }\n #ge-sceneExplorer .itemContainer .controlTools .extensions {\n width: 20px;\n grid-column: 4; }\n #ge-sceneExplorer .itemContainer .title {\n grid-column: 1;\n background: transparent;\n white-space: nowrap;\n overflow: hidden;\n min-width: 0;\n margin-right: 5px;\n display: grid;\n align-items: center;\n grid-template-columns: 1fr;\n height: 24px;\n cursor: pointer; }\n #ge-sceneExplorer .itemContainer .title .titleText {\n grid-column: 1;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden; }\n", "",{"version":3,"sources":["webpack://./components/sceneExplorer/sceneExplorer.scss"],"names":[],"mappings":"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","sourcesContent":["#ge-scene-explorer-host {\r\n position: absolute;\r\n left: 0px;\r\n top:0px;\r\n bottom: 0px;\r\n font-family: \"acumin-pro-condensed\";\r\n &:focus {\r\n outline: none;\r\n }\r\n}\r\n\r\n#ge-__resizable_base__ {\r\n display: none;\r\n}\r\n\r\n.ge-context-menu {\r\n background: #e2e2e2;\r\n\r\n .react-contextmenu-item {\r\n padding: 10px;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background: #e2e2e2;\r\n }\r\n }\r\n}\r\n\r\n.ge-eact-contextmenu.context-menu.react-contextmenu--visible {\r\n z-index: 99;\r\n transform: scale(1);\r\n}\r\n\r\n#ge-sceneExplorer {\r\n background: #e2e2e2;\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n display: grid;\r\n grid-template-rows: auto 1fr;\r\n font: 16px \"acumin-pro-condensed\";\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n #header {\r\n height: 30px;\r\n font-size: 16px;\r\n color: black;\r\n background: #e2e2e2;\r\n grid-row: 1;\r\n text-align: center;\r\n display: grid;\r\n grid-template-columns: 30px 1fr 50px; \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 grid-column: 1; \r\n width: 24px;\r\n height: 24px;\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 grid-column: 2; \r\n display: grid;\r\n align-items: center; \r\n text-align: center;\r\n }\r\n\r\n #commands {\r\n grid-column: 3; \r\n display: grid;\r\n align-items: center; \r\n grid-template-columns: 1fr 1fr; \r\n \r\n .expand {\r\n grid-column: 1;\r\n display: grid;\r\n align-items: center; \r\n justify-items: center;\r\n cursor: pointer; \r\n }\r\n\r\n .close {\r\n grid-column: 2;\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\r\n #tree {\r\n grid-row: 2; \r\n\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n }\r\n\r\n .filter {\r\n display: flex;\r\n align-items: stretch;\r\n\r\n input {\r\n width: 100%;\r\n margin: 10px 40px 5px 40px;\r\n display: block;\r\n border: none;\r\n padding: 0;\r\n border-bottom: solid 1px rgb(51, 122, 183);\r\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, rgb(51, 122, 183) 4%);\r\n background-position: -1000px 0;\r\n background-size: 1000px 100%;\r\n background-repeat: no-repeat; \r\n color:black; \r\n }\r\n\r\n input::placeholder {\r\n color: lightgray;\r\n }\r\n\r\n input:focus {\r\n box-shadow: none;\r\n outline: none;\r\n background-position: 0 0;\r\n }\r\n }\r\n\r\n .groupContainer {\r\n margin-left: 0px;\r\n color: black;\r\n margin-top: 0px;\r\n margin-bottom: 0px;\r\n height: 24px; \r\n\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 align-self: center; \r\n display: grid;\r\n align-items: center; \r\n\r\n &:hover {\r\n background: #bbbbbb;\r\n }\r\n\r\n .expandableHeader {\r\n display: grid;\r\n grid-template-columns: 1fr 20px;\r\n\r\n .text {\r\n grid-column: 1;\r\n display: grid;\r\n grid-template-columns: 20px 1fr;\r\n\r\n .arrow {\r\n grid-column: 1;\r\n margin-left: 0px;\r\n color: black;\r\n cursor: pointer;\r\n display: inline-block;\r\n margin-right: 6px;\r\n opacity: 0.5;\r\n }\r\n\r\n .text-value {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n }\r\n }\r\n\r\n .expandAll { \r\n opacity: 0.5;\r\n grid-column: 2;\r\n margin-right: 10px; \r\n }\r\n }\r\n \r\n\r\n }\r\n\r\n .icon {\r\n display: grid;\r\n align-items: center; \r\n justify-items: center;\r\n cursor: pointer;\r\n }\r\n\r\n .addComponent {\r\n display: none;\r\n }\r\n\r\n .makeChild{\r\n grid-column: 3;\r\n }\r\n\r\n .itemContainer {\r\n margin-left: 0px;\r\n color: black;\r\n margin-top: 0px;\r\n margin-bottom: 0px;\r\n height: 32px; \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 display: grid;\r\n grid-template-columns: 20px 1fr;\r\n border: 2px solid transparent;\r\n &.hover {\r\n border: 2px solid #527089;\r\n cursor: pointer;\r\n }\r\n\r\n &.seAbove {\r\n border-top: 2px solid #527089;\r\n cursor: pointer;\r\n }\r\n &.seBelow {\r\n border-bottom: 2px solid #527089;\r\n cursor: pointer;\r\n }\r\n\r\n &.selected {\r\n \r\n background: #bfbebe;\r\n color: black;\r\n }\r\n\r\n &.dragged {\r\n background: transparent;\r\n color: black;\r\n }\r\n\r\n &.parent {\r\n background: #ffffff ;\r\n color: black;\r\n }\r\n \r\n .isNotActive {\r\n opacity: 0.3;\r\n }\r\n .arrow {\r\n grid-column: 1;\r\n color: black;\r\n opacity: 0.6;\r\n }\r\n\r\n .popup {\r\n width: 200px;\r\n visibility: hidden;\r\n background-color: #bbbbbb;\r\n color: #fff;\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n position: absolute;\r\n z-index: 1;\r\n margin-left: -180px;\r\n box-sizing: border-box;\r\n\r\n &.show {\r\n visibility: visible;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n .popupMenu {\r\n padding: 6px 5px 5px 10px;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n height: 18px;\r\n \r\n\r\n &:hover {\r\n background: white;\r\n color: #333333;\r\n }\r\n }\r\n }\r\n\r\n .sceneNode {\r\n grid-column: 2;\r\n margin-left: -10px;\r\n display: grid;\r\n grid-template-columns: 1fr 20px 20px 20px 20px 10px 20px 20px auto 5px;\r\n align-items: center;\r\n cursor: pointer; \r\n\r\n .sceneTitle {\r\n grid-column: 1;\r\n margin-right: 5px; \r\n display: flex;\r\n align-items: center; \r\n height: 24px; \r\n } \r\n\r\n .translation {\r\n grid-column: 2;\r\n opacity: 0.6;\r\n \r\n &.selected {\r\n opacity: 1;\r\n } \r\n }\r\n\r\n .rotation {\r\n grid-column: 3;\r\n opacity: 0.6;\r\n\r\n &.selected {\r\n opacity: 1;\r\n } \r\n }\r\n\r\n .scaling {\r\n grid-column: 4;\r\n opacity: 0.6;\r\n &.selected {\r\n opacity: 1;\r\n } \r\n }\r\n \r\n .bounding {\r\n grid-column: 5;\r\n opacity: 0.6;\r\n &.selected {\r\n opacity: 1;\r\n } \r\n }\r\n\r\n .separator {\r\n grid-column: 6;\r\n margin-left: 5px; \r\n width: 5px;\r\n display: flex;\r\n align-items: center; \r\n height: 18px; \r\n border-left: solid 1px rgb(51, 122, 183);\r\n }\r\n\r\n .pickingMode {\r\n grid-column: 7;\r\n opacity: 0.6;\r\n\r\n &.selected {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .refresh {\r\n grid-column: 8;\r\n }\r\n\r\n .extensions {\r\n width: 20px;\r\n grid-column: 9;\r\n }\r\n }\r\n \r\n .adtextureTools {\r\n grid-column: 2;\r\n display: grid;\r\n grid-template-columns: 1fr 20px auto 5px;\r\n align-items: center;\r\n \r\n .pickingMode {\r\n grid-column: 2;\r\n opacity: 0.6;\r\n\r\n &.selected {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .extensions {\r\n width: 20px;\r\n grid-column: 3;\r\n }\r\n } \r\n\r\n .controlTools {\r\n grid-column: 2;\r\n display: grid;\r\n grid-template-columns: 1fr 30px 30px auto 5px;\r\n align-items: center;\r\n\r\n .highlight {\r\n grid-column: 2;\r\n }\r\n\r\n .visibility {\r\n grid-column: 3;\r\n }\r\n\r\n .extensions {\r\n width: 20px;\r\n grid-column: 4;\r\n }\r\n } \r\n \r\n .title {\r\n grid-column: 1;\r\n background: transparent;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n min-width: 0;\r\n margin-right: 5px; \r\n display: grid;\r\n align-items: center; \r\n grid-template-columns: 1fr; \r\n height: 24px;\r\n cursor: pointer;\r\n\r\n .titleText {\r\n grid-column: 1;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden; \r\n } \r\n \r\n }\r\n }\r\n}"],"sourceRoot":""}]);
10142
+ ___CSS_LOADER_EXPORT___.push([module.i, "#ge-scene-explorer-host {\n position: absolute;\n left: 0px;\n top: 0px;\n bottom: 0px; }\n #ge-scene-explorer-host * {\n font-family: \"acumin-pro-condensed\"; }\n #ge-scene-explorer-host:focus {\n outline: none; }\n\n#ge-__resizable_base__ {\n display: none; }\n\n.ge-context-menu {\n background: #e2e2e2; }\n .ge-context-menu .react-contextmenu-item {\n padding: 10px;\n cursor: pointer; }\n .ge-context-menu .react-contextmenu-item:hover {\n background: #e2e2e2; }\n\n.ge-eact-contextmenu.context-menu.react-contextmenu--visible {\n z-index: 99;\n transform: scale(1); }\n\n#ge-sceneExplorer {\n background: #e2e2e2;\n height: 100%;\n margin: 0;\n padding: 0;\n display: grid;\n grid-template-rows: auto 1fr;\n font: 16px \"acumin-pro-condensed\"; }\n #ge-sceneExplorer:focus {\n outline: none; }\n #ge-sceneExplorer #header {\n height: 30px;\n font-size: 16px;\n color: black;\n background: #e2e2e2;\n grid-row: 1;\n text-align: center;\n display: grid;\n grid-template-columns: 30px 1fr 50px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n #ge-sceneExplorer #header #logo {\n position: relative;\n grid-column: 1;\n width: 24px;\n height: 24px;\n left: 0;\n display: flex;\n align-self: center;\n justify-self: center; }\n #ge-sceneExplorer #header #title {\n grid-column: 2;\n display: grid;\n align-items: center;\n text-align: center; }\n #ge-sceneExplorer #header #commands {\n grid-column: 3;\n display: grid;\n align-items: center;\n grid-template-columns: 1fr 1fr; }\n #ge-sceneExplorer #header #commands .expand {\n grid-column: 1;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-sceneExplorer #header #commands .close {\n grid-column: 2;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-sceneExplorer #tree {\n grid-row: 2;\n overflow-x: hidden;\n overflow-y: auto; }\n #ge-sceneExplorer .filter {\n display: flex;\n align-items: stretch; }\n #ge-sceneExplorer .filter input {\n width: 100%;\n margin: 10px 40px 5px 40px;\n display: block;\n border: none;\n padding: 0;\n border-bottom: solid 1px #337ab7;\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #337ab7 4%);\n background-position: -1000px 0;\n background-size: 1000px 100%;\n background-repeat: no-repeat;\n color: black; }\n #ge-sceneExplorer .filter input::placeholder {\n color: lightgray; }\n #ge-sceneExplorer .filter input:focus {\n box-shadow: none;\n outline: none;\n background-position: 0 0; }\n #ge-sceneExplorer .groupContainer {\n margin-left: 0px;\n color: black;\n margin-top: 0px;\n margin-bottom: 0px;\n height: 24px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n align-self: center;\n display: grid;\n align-items: center; }\n #ge-sceneExplorer .groupContainer:hover {\n background: #bbbbbb; }\n #ge-sceneExplorer .groupContainer .expandableHeader {\n display: grid;\n grid-template-columns: 1fr 20px; }\n #ge-sceneExplorer .groupContainer .expandableHeader .text {\n grid-column: 1;\n display: grid;\n grid-template-columns: 20px 1fr; }\n #ge-sceneExplorer .groupContainer .expandableHeader .text .arrow {\n grid-column: 1;\n margin-left: 0px;\n color: black;\n cursor: pointer;\n display: inline-block;\n margin-right: 6px;\n opacity: 0.5; }\n #ge-sceneExplorer .groupContainer .expandableHeader .text .text-value {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #ge-sceneExplorer .groupContainer .expandableHeader .expandAll {\n opacity: 0.5;\n grid-column: 2;\n margin-right: 10px; }\n #ge-sceneExplorer .icon {\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-sceneExplorer .addComponent {\n display: none; }\n #ge-sceneExplorer .makeChild {\n grid-column: 3; }\n #ge-sceneExplorer .itemContainer {\n margin-left: 0px;\n color: black;\n margin-top: 0px;\n margin-bottom: 0px;\n height: 32px;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n display: grid;\n grid-template-columns: 20px 1fr;\n border: 2px solid transparent; }\n #ge-sceneExplorer .itemContainer.hover {\n border: 2px solid #527089;\n cursor: pointer; }\n #ge-sceneExplorer .itemContainer.seAbove {\n border-top: 2px solid #527089;\n cursor: pointer; }\n #ge-sceneExplorer .itemContainer.seBelow {\n border-bottom: 2px solid #527089;\n cursor: pointer; }\n #ge-sceneExplorer .itemContainer.selected {\n background: #bfbebe;\n color: black; }\n #ge-sceneExplorer .itemContainer.dragged {\n background: transparent;\n color: black; }\n #ge-sceneExplorer .itemContainer.parent {\n background: #ffffff;\n color: black; }\n #ge-sceneExplorer .itemContainer .isNotActive {\n opacity: 0.3; }\n #ge-sceneExplorer .itemContainer .arrow {\n grid-column: 1;\n color: black;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .popup {\n width: 200px;\n visibility: hidden;\n background-color: #bbbbbb;\n color: #fff;\n border: 1px solid rgba(255, 255, 255, 0.5);\n position: absolute;\n z-index: 1;\n margin-left: -180px;\n box-sizing: border-box; }\n #ge-sceneExplorer .itemContainer .popup.show {\n visibility: visible; }\n #ge-sceneExplorer .itemContainer .popup:focus {\n outline: none; }\n #ge-sceneExplorer .itemContainer .popup .popupMenu {\n padding: 6px 5px 5px 10px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n height: 18px; }\n #ge-sceneExplorer .itemContainer .popup .popupMenu:hover {\n background: white;\n color: #333333; }\n #ge-sceneExplorer .itemContainer .sceneNode {\n grid-column: 2;\n margin-left: -10px;\n display: grid;\n grid-template-columns: 1fr 20px 20px 20px 20px 10px 20px 20px auto 5px;\n align-items: center;\n cursor: pointer; }\n #ge-sceneExplorer .itemContainer .sceneNode .sceneTitle {\n grid-column: 1;\n margin-right: 5px;\n display: flex;\n align-items: center;\n height: 24px; }\n #ge-sceneExplorer .itemContainer .sceneNode .translation {\n grid-column: 2;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .sceneNode .translation.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .sceneNode .rotation {\n grid-column: 3;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .sceneNode .rotation.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .sceneNode .scaling {\n grid-column: 4;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .sceneNode .scaling.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .sceneNode .bounding {\n grid-column: 5;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .sceneNode .bounding.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .sceneNode .separator {\n grid-column: 6;\n margin-left: 5px;\n width: 5px;\n display: flex;\n align-items: center;\n height: 18px;\n border-left: solid 1px #337ab7; }\n #ge-sceneExplorer .itemContainer .sceneNode .pickingMode {\n grid-column: 7;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .sceneNode .pickingMode.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .sceneNode .refresh {\n grid-column: 8; }\n #ge-sceneExplorer .itemContainer .sceneNode .extensions {\n width: 20px;\n grid-column: 9; }\n #ge-sceneExplorer .itemContainer .adtextureTools {\n grid-column: 2;\n display: grid;\n grid-template-columns: 1fr 20px auto 5px;\n align-items: center; }\n #ge-sceneExplorer .itemContainer .adtextureTools .pickingMode {\n grid-column: 2;\n opacity: 0.6; }\n #ge-sceneExplorer .itemContainer .adtextureTools .pickingMode.selected {\n opacity: 1; }\n #ge-sceneExplorer .itemContainer .adtextureTools .extensions {\n width: 20px;\n grid-column: 3; }\n #ge-sceneExplorer .itemContainer .controlTools {\n grid-column: 2;\n display: grid;\n align-items: center; }\n #ge-sceneExplorer .itemContainer .controlTools .highlight {\n grid-column: 2; }\n #ge-sceneExplorer .itemContainer .controlTools .visibility {\n grid-column: 3; }\n #ge-sceneExplorer .itemContainer .controlTools .extensions {\n width: 20px;\n grid-column: 4; }\n #ge-sceneExplorer .itemContainer .title {\n background: transparent;\n white-space: nowrap;\n overflow: hidden;\n min-width: 0;\n margin-right: 5px;\n align-items: center;\n height: 24px;\n cursor: pointer; }\n #ge-sceneExplorer .itemContainer .title .titleText {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n outline: none; }\n", "",{"version":3,"sources":["webpack://./components/sceneExplorer/sceneExplorer.scss"],"names":[],"mappings":"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","sourcesContent":["#ge-scene-explorer-host {\r\n position: absolute;\r\n left: 0px;\r\n top:0px;\r\n bottom: 0px;\r\n * {\r\n font-family: \"acumin-pro-condensed\";\r\n }\r\n &:focus {\r\n outline: none;\r\n }\r\n}\r\n\r\n#ge-__resizable_base__ {\r\n display: none;\r\n}\r\n\r\n.ge-context-menu {\r\n background: #e2e2e2;\r\n\r\n .react-contextmenu-item {\r\n padding: 10px;\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background: #e2e2e2;\r\n }\r\n }\r\n}\r\n\r\n.ge-eact-contextmenu.context-menu.react-contextmenu--visible {\r\n z-index: 99;\r\n transform: scale(1);\r\n}\r\n\r\n#ge-sceneExplorer {\r\n background: #e2e2e2;\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n display: grid;\r\n grid-template-rows: auto 1fr;\r\n font: 16px \"acumin-pro-condensed\";\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n #header {\r\n height: 30px;\r\n font-size: 16px;\r\n color: black;\r\n background: #e2e2e2;\r\n grid-row: 1;\r\n text-align: center;\r\n display: grid;\r\n grid-template-columns: 30px 1fr 50px; \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 grid-column: 1; \r\n width: 24px;\r\n height: 24px;\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 grid-column: 2; \r\n display: grid;\r\n align-items: center; \r\n text-align: center;\r\n }\r\n\r\n #commands {\r\n grid-column: 3; \r\n display: grid;\r\n align-items: center; \r\n grid-template-columns: 1fr 1fr; \r\n \r\n .expand {\r\n grid-column: 1;\r\n display: grid;\r\n align-items: center; \r\n justify-items: center;\r\n cursor: pointer; \r\n }\r\n\r\n .close {\r\n grid-column: 2;\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\r\n #tree {\r\n grid-row: 2; \r\n\r\n overflow-x: hidden;\r\n overflow-y: auto;\r\n }\r\n\r\n .filter {\r\n display: flex;\r\n align-items: stretch;\r\n\r\n input {\r\n width: 100%;\r\n margin: 10px 40px 5px 40px;\r\n display: block;\r\n border: none;\r\n padding: 0;\r\n border-bottom: solid 1px rgb(51, 122, 183);\r\n background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, rgb(51, 122, 183) 4%);\r\n background-position: -1000px 0;\r\n background-size: 1000px 100%;\r\n background-repeat: no-repeat; \r\n color:black; \r\n }\r\n\r\n input::placeholder {\r\n color: lightgray;\r\n }\r\n\r\n input:focus {\r\n box-shadow: none;\r\n outline: none;\r\n background-position: 0 0;\r\n }\r\n }\r\n\r\n .groupContainer {\r\n margin-left: 0px;\r\n color: black;\r\n margin-top: 0px;\r\n margin-bottom: 0px;\r\n height: 24px; \r\n\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 align-self: center; \r\n display: grid;\r\n align-items: center; \r\n\r\n &:hover {\r\n background: #bbbbbb;\r\n }\r\n\r\n .expandableHeader {\r\n display: grid;\r\n grid-template-columns: 1fr 20px;\r\n\r\n .text {\r\n grid-column: 1;\r\n display: grid;\r\n grid-template-columns: 20px 1fr;\r\n\r\n .arrow {\r\n grid-column: 1;\r\n margin-left: 0px;\r\n color: black;\r\n cursor: pointer;\r\n display: inline-block;\r\n margin-right: 6px;\r\n opacity: 0.5;\r\n }\r\n\r\n .text-value {\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n }\r\n }\r\n\r\n .expandAll { \r\n opacity: 0.5;\r\n grid-column: 2;\r\n margin-right: 10px; \r\n }\r\n }\r\n \r\n\r\n }\r\n\r\n .icon {\r\n display: grid;\r\n align-items: center; \r\n justify-items: center;\r\n cursor: pointer;\r\n }\r\n\r\n .addComponent {\r\n display: none;\r\n }\r\n\r\n .makeChild{\r\n grid-column: 3;\r\n }\r\n\r\n .itemContainer {\r\n margin-left: 0px;\r\n color: black;\r\n margin-top: 0px;\r\n margin-bottom: 0px;\r\n height: 32px; \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 display: grid;\r\n grid-template-columns: 20px 1fr;\r\n border: 2px solid transparent;\r\n &.hover {\r\n border: 2px solid #527089;\r\n cursor: pointer;\r\n }\r\n\r\n &.seAbove {\r\n border-top: 2px solid #527089;\r\n cursor: pointer;\r\n }\r\n &.seBelow {\r\n border-bottom: 2px solid #527089;\r\n cursor: pointer;\r\n }\r\n\r\n &.selected {\r\n \r\n background: #bfbebe;\r\n color: black;\r\n }\r\n\r\n &.dragged {\r\n background: transparent;\r\n color: black;\r\n }\r\n\r\n &.parent {\r\n background: #ffffff;\r\n color: black;\r\n }\r\n \r\n .isNotActive {\r\n opacity: 0.3;\r\n }\r\n .arrow {\r\n grid-column: 1;\r\n color: black;\r\n opacity: 0.6;\r\n }\r\n\r\n .popup {\r\n width: 200px;\r\n visibility: hidden;\r\n background-color: #bbbbbb;\r\n color: #fff;\r\n border: 1px solid rgba(255, 255, 255, 0.5);\r\n position: absolute;\r\n z-index: 1;\r\n margin-left: -180px;\r\n box-sizing: border-box;\r\n\r\n &.show {\r\n visibility: visible;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n .popupMenu {\r\n padding: 6px 5px 5px 10px;\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n height: 18px;\r\n \r\n\r\n &:hover {\r\n background: white;\r\n color: #333333;\r\n }\r\n }\r\n }\r\n\r\n .sceneNode {\r\n grid-column: 2;\r\n margin-left: -10px;\r\n display: grid;\r\n grid-template-columns: 1fr 20px 20px 20px 20px 10px 20px 20px auto 5px;\r\n align-items: center;\r\n cursor: pointer; \r\n\r\n .sceneTitle {\r\n grid-column: 1;\r\n margin-right: 5px; \r\n display: flex;\r\n align-items: center; \r\n height: 24px; \r\n } \r\n\r\n .translation {\r\n grid-column: 2;\r\n opacity: 0.6;\r\n \r\n &.selected {\r\n opacity: 1;\r\n } \r\n }\r\n\r\n .rotation {\r\n grid-column: 3;\r\n opacity: 0.6;\r\n\r\n &.selected {\r\n opacity: 1;\r\n } \r\n }\r\n\r\n .scaling {\r\n grid-column: 4;\r\n opacity: 0.6;\r\n &.selected {\r\n opacity: 1;\r\n } \r\n }\r\n \r\n .bounding {\r\n grid-column: 5;\r\n opacity: 0.6;\r\n &.selected {\r\n opacity: 1;\r\n } \r\n }\r\n\r\n .separator {\r\n grid-column: 6;\r\n margin-left: 5px; \r\n width: 5px;\r\n display: flex;\r\n align-items: center; \r\n height: 18px; \r\n border-left: solid 1px rgb(51, 122, 183);\r\n }\r\n\r\n .pickingMode {\r\n grid-column: 7;\r\n opacity: 0.6;\r\n\r\n &.selected {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .refresh {\r\n grid-column: 8;\r\n }\r\n\r\n .extensions {\r\n width: 20px;\r\n grid-column: 9;\r\n }\r\n }\r\n \r\n .adtextureTools {\r\n grid-column: 2;\r\n display: grid;\r\n grid-template-columns: 1fr 20px auto 5px;\r\n align-items: center;\r\n \r\n .pickingMode {\r\n grid-column: 2;\r\n opacity: 0.6;\r\n\r\n &.selected {\r\n opacity: 1;\r\n }\r\n }\r\n\r\n .extensions {\r\n width: 20px;\r\n grid-column: 3;\r\n }\r\n } \r\n\r\n .controlTools {\r\n grid-column: 2;\r\n display: grid;\r\n align-items: center;\r\n\r\n .highlight {\r\n grid-column: 2;\r\n }\r\n\r\n .visibility {\r\n grid-column: 3;\r\n }\r\n\r\n .extensions {\r\n width: 20px;\r\n grid-column: 4;\r\n }\r\n } \r\n \r\n .title {\r\n background: transparent;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n min-width: 0;\r\n margin-right: 5px;\r\n align-items: center; \r\n height: 24px;\r\n cursor: pointer;\r\n\r\n .titleText {\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n outline: none;\r\n } \r\n \r\n }\r\n }\r\n}"],"sourceRoot":""}]);
10143
10143
  // Exports
10144
10144
  /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
10145
10145
 
@@ -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%/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":""}]);
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 * {\n user-select: none; }\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 * {\r\n user-select: none;\r\n }\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
 
@@ -43100,13 +43100,10 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
43100
43100
  __webpack_require__.r(__webpack_exports__);
43101
43101
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CommandBarComponent", function() { return CommandBarComponent; });
43102
43102
  /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
43103
- /* harmony import */ var _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/container */ "@babylonjs/gui/2D/controls/button");
43104
- /* harmony import */ var _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_1__);
43105
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
43106
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
43107
- /* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./commandButtonComponent */ "./components/commandButtonComponent.tsx");
43108
- /* harmony import */ var _commandDropdownComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./commandDropdownComponent */ "./components/commandDropdownComponent.tsx");
43109
-
43103
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
43104
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
43105
+ /* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./commandButtonComponent */ "./components/commandButtonComponent.tsx");
43106
+ /* harmony import */ var _commandDropdownComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./commandDropdownComponent */ "./components/commandDropdownComponent.tsx");
43110
43107
 
43111
43108
 
43112
43109
 
@@ -43144,32 +43141,17 @@ var CommandBarComponent = /** @class */ (function (_super) {
43144
43141
  _this._selecting = false;
43145
43142
  _this.forceUpdate();
43146
43143
  });
43147
- props.globalState.onOutlinesObservable.add(function () {
43148
- _this._outlines = !_this._outlines;
43149
- var nodes = _this.props.globalState.workbench.nodes;
43150
- nodes.forEach(function (node) {
43151
- _this.updateNodeOutline(node);
43152
- });
43144
+ props.globalState.onOutlineChangedObservable.add(function () {
43153
43145
  _this.forceUpdate();
43154
43146
  });
43155
43147
  return _this;
43156
43148
  }
43157
- CommandBarComponent.prototype.updateNodeOutline = function (guiControl) {
43158
- var _this = this;
43159
- guiControl.isHighlighted = this._outlines;
43160
- guiControl.highlightLineWidth = 5;
43161
- if (guiControl instanceof _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_1__["Container"]) {
43162
- guiControl.children.forEach(function (child) {
43163
- _this.updateNodeOutline(child);
43164
- });
43165
- }
43166
- };
43167
43149
  CommandBarComponent.prototype.render = function () {
43168
43150
  var _this = this;
43169
- return (react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "ge-commands" },
43170
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "commands-left" },
43171
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("img", { src: logoIcon, color: "white", className: "active" }),
43172
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandDropdownComponent__WEBPACK_IMPORTED_MODULE_4__["CommandDropdownComponent"], { globalState: this.props.globalState, toRight: true, icon: hamburgerIcon, tooltip: "Options", items: [
43151
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-commands" },
43152
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "commands-left" },
43153
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: logoIcon, color: "white", className: "active" }),
43154
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandDropdownComponent__WEBPACK_IMPORTED_MODULE_3__["CommandDropdownComponent"], { globalState: this.props.globalState, toRight: true, icon: hamburgerIcon, tooltip: "Options", items: [
43173
43155
  {
43174
43156
  label: "Save",
43175
43157
  onClick: function () {
@@ -43195,19 +43177,29 @@ var CommandBarComponent = /** @class */ (function (_super) {
43195
43177
  {
43196
43178
  label: "Copy Selected",
43197
43179
  onClick: function () {
43198
- _this.props.globalState.workbench.copyToClipboard();
43180
+ _this.props.globalState.onCopyObservable.notifyObservers(function (content) { return _this.props.globalState.hostWindow.navigator.clipboard.writeText(content); });
43199
43181
  },
43200
43182
  },
43201
43183
  {
43202
43184
  label: "Paste",
43203
- onClick: function () {
43204
- _this.props.globalState.workbench.pasteFromClipboard();
43205
- }
43185
+ onClick: function () { return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__awaiter"])(_this, void 0, void 0, function () {
43186
+ var _a, _b;
43187
+ return Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__generator"])(this, function (_c) {
43188
+ switch (_c.label) {
43189
+ case 0:
43190
+ _b = (_a = this.props.globalState.onPasteObservable).notifyObservers;
43191
+ return [4 /*yield*/, this.props.globalState.hostWindow.navigator.clipboard.readText()];
43192
+ case 1:
43193
+ _b.apply(_a, [_c.sent()]);
43194
+ return [2 /*return*/];
43195
+ }
43196
+ });
43197
+ }); }
43206
43198
  },
43207
43199
  {
43208
43200
  label: "Delete Selected",
43209
43201
  onClick: function () {
43210
- _this.props.globalState.workbench.selectedGuiNodes.forEach(function (guiNode) {
43202
+ _this.props.globalState.selectedControls.forEach(function (guiNode) {
43211
43203
  var _a;
43212
43204
  if (guiNode !== _this.props.globalState.guiTexture.getChildren()[0]) {
43213
43205
  _this.props.globalState.guiTexture.removeControl(guiNode);
@@ -43215,7 +43207,7 @@ var CommandBarComponent = /** @class */ (function (_super) {
43215
43207
  guiNode.dispose();
43216
43208
  }
43217
43209
  });
43218
- _this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
43210
+ _this.props.globalState.setSelection([]);
43219
43211
  },
43220
43212
  },
43221
43213
  {
@@ -43231,28 +43223,26 @@ var CommandBarComponent = /** @class */ (function (_super) {
43231
43223
  },
43232
43224
  },
43233
43225
  ] }),
43234
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Select", icon: pointerIcon, shortcut: "S", isActive: this._selecting, onClick: function () {
43226
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Select", icon: pointerIcon, shortcut: "S", isActive: this._selecting, onClick: function () {
43235
43227
  if (!_this._selecting)
43236
43228
  _this.props.globalState.onSelectionButtonObservable.notifyObservers();
43237
43229
  } }),
43238
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Pan", icon: handIcon, shortcut: "P", isActive: this._panning, onClick: function () {
43230
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Pan", icon: handIcon, shortcut: "P", isActive: this._panning, onClick: function () {
43239
43231
  if (!_this._panning)
43240
43232
  _this.props.globalState.onPanObservable.notifyObservers();
43241
43233
  } }),
43242
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Zoom", shortcut: "Z", icon: zoomIcon, isActive: this._zooming, onClick: function () {
43234
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Zoom", shortcut: "Z", icon: zoomIcon, isActive: this._zooming, onClick: function () {
43243
43235
  if (!_this._zooming)
43244
43236
  _this.props.globalState.onZoomObservable.notifyObservers();
43245
43237
  } }),
43246
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Fit to Window", shortcut: "F", icon: canvasFitIcon, isActive: false, onClick: function () {
43238
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Fit to Window", shortcut: "F", icon: canvasFitIcon, isActive: false, onClick: function () {
43247
43239
  _this.props.globalState.onFitToWindowObservable.notifyObservers();
43248
43240
  } }),
43249
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Toggle Guides", shortcut: "G", icon: guidesIcon, isActive: this._outlines, onClick: function () {
43250
- _this.props.globalState.onOutlinesObservable.notifyObservers();
43251
- } })),
43252
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "commands-right" })));
43241
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_2__["CommandButtonComponent"], { tooltip: "Toggle Guides", shortcut: "G", icon: guidesIcon, isActive: this.props.globalState.outlines, onClick: function () { return _this.props.globalState.outlines = !_this.props.globalState.outlines; } })),
43242
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "commands-right" })));
43253
43243
  };
43254
43244
  return CommandBarComponent;
43255
- }(react__WEBPACK_IMPORTED_MODULE_2__["Component"]));
43245
+ }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
43256
43246
 
43257
43247
 
43258
43248
 
@@ -43723,6 +43713,12 @@ __webpack_require__.r(__webpack_exports__);
43723
43713
  /* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
43724
43714
  /* harmony import */ var _sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
43725
43715
  /* harmony import */ var _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
43716
+ /* harmony import */ var _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../../diagram/coordinateHelper */ "./diagram/coordinateHelper.tsx");
43717
+ /* harmony import */ var _babylonjs_core_Maths_math__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! @babylonjs/core/Maths/math */ "@babylonjs/core/Misc/observable");
43718
+ /* harmony import */ var _babylonjs_core_Maths_math__WEBPACK_IMPORTED_MODULE_12___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Maths_math__WEBPACK_IMPORTED_MODULE_12__);
43719
+
43720
+
43721
+
43726
43722
 
43727
43723
 
43728
43724
 
@@ -43761,11 +43757,42 @@ var descendantsOnlyPaddingIcon = __webpack_require__(/*! ../../../../sharedUiCom
43761
43757
  var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
43762
43758
  Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CommonControlPropertyGridComponent, _super);
43763
43759
  function CommonControlPropertyGridComponent(props) {
43760
+ var _a;
43764
43761
  var _this = _super.call(this, props) || this;
43765
- _this._width = 0;
43766
- _this._height = 0;
43762
+ var controls = _this.props.controls;
43763
+ for (var _i = 0, controls_1 = controls; _i < controls_1.length; _i++) {
43764
+ var control = controls_1[_i];
43765
+ var transformed = _this._getTransformedReferenceCoordinate(control);
43766
+ if (!control.metadata) {
43767
+ control.metadata = {};
43768
+ }
43769
+ control.metadata._previousCenter = transformed;
43770
+ }
43771
+ _this._onPropertyChangedObserver = (_a = _this.props.onPropertyChangedObservable) === null || _a === void 0 ? void 0 : _a.add(function (event) {
43772
+ var isTransformEvent = event.property === "transformCenterX" || event.property === "transformCenterY";
43773
+ for (var _i = 0, controls_2 = controls; _i < controls_2.length; _i++) {
43774
+ var control = controls_2[_i];
43775
+ var transformed = _this._getTransformedReferenceCoordinate(control);
43776
+ if (isTransformEvent && control.metadata._previousCenter) {
43777
+ // Calculate the difference between current center and previous center
43778
+ var diff = transformed.subtract(control.metadata._previousCenter);
43779
+ control.leftInPixels -= diff.x;
43780
+ control.topInPixels -= diff.y;
43781
+ // Update center in reference to left and top positions
43782
+ transformed = _this._getTransformedReferenceCoordinate(control);
43783
+ }
43784
+ control.metadata._previousCenter = transformed;
43785
+ }
43786
+ _this.forceUpdate();
43787
+ });
43767
43788
  return _this;
43768
43789
  }
43790
+ CommonControlPropertyGridComponent.prototype._getTransformedReferenceCoordinate = function (control) {
43791
+ var nodeMatrix = _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_11__["CoordinateHelper"].getNodeMatrix(control);
43792
+ var transformed = new _babylonjs_core_Maths_math__WEBPACK_IMPORTED_MODULE_12__["Vector2"](1, 1);
43793
+ nodeMatrix.transformCoordinates(1, 1, transformed);
43794
+ return transformed;
43795
+ };
43769
43796
  CommonControlPropertyGridComponent.prototype._updateAlignment = function (alignment, value) {
43770
43797
  for (var _i = 0, _a = this.props.controls; _i < _a.length; _i++) {
43771
43798
  var control = _a[_i];
@@ -43815,14 +43842,20 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
43815
43842
  });
43816
43843
  }
43817
43844
  };
43845
+ CommonControlPropertyGridComponent.prototype.componentWillUnmount = function () {
43846
+ var _a;
43847
+ if (this._onPropertyChangedObserver) {
43848
+ (_a = this.props.onPropertyChangedObservable) === null || _a === void 0 ? void 0 : _a.remove(this._onPropertyChangedObserver);
43849
+ }
43850
+ };
43818
43851
  CommonControlPropertyGridComponent.prototype.render = function () {
43819
43852
  var _this = this;
43820
43853
  var controls = this.props.controls;
43821
43854
  var firstControl = controls[0];
43822
43855
  var horizontalAlignment = firstControl.horizontalAlignment;
43823
43856
  var verticalAlignment = firstControl.verticalAlignment;
43824
- for (var _i = 0, controls_1 = controls; _i < controls_1.length; _i++) {
43825
- var control = controls_1[_i];
43857
+ for (var _i = 0, controls_3 = controls; _i < controls_3.length; _i++) {
43858
+ var control = controls_3[_i];
43826
43859
  if (control.horizontalAlignment !== horizontalAlignment) {
43827
43860
  horizontalAlignment = _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_CENTER;
43828
43861
  }
@@ -43834,20 +43867,79 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
43834
43867
  horizontalAlignment = firstControl.textHorizontalAlignment;
43835
43868
  verticalAlignment = firstControl.textVerticalAlignment;
43836
43869
  }
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"];
43870
+ var showTextProperties = (firstControl instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"] || firstControl.typeName === "TextBlock");
43871
+ var proxy = Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["makeTargetsProxy"])(controls, this.props.onPropertyChangedObservable);
43872
+ var getValue = function (propertyName) {
43873
+ var values = (controls.map(function (control) { return control[propertyName]._value; }));
43874
+ var firstValue = values[0];
43875
+ if (values.every(function (value) { return value === firstValue; })) {
43876
+ var units = getUnitString(propertyName);
43877
+ if (units === "%") {
43878
+ return (firstValue * 100).toFixed(2);
43879
+ }
43880
+ else if (units === "PX") {
43881
+ return firstValue.toFixed(2);
43882
+ }
43883
+ else {
43884
+ return _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["conflictingValuesPlaceholder"];
43885
+ }
43843
43886
  }
43844
- if (control.height !== this._height) {
43845
- this._height = _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["conflictingValuesPlaceholder"];
43887
+ else {
43888
+ return _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["conflictingValuesPlaceholder"];
43846
43889
  }
43847
- }
43848
- var showTextProperties = (firstControl instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"] || firstControl.typeName === "TextBlock");
43890
+ };
43891
+ var getUnitString = function (propertyName) {
43892
+ var units = (controls.map(function (control) { return control[propertyName]._unit; }));
43893
+ var firstUnit = units[0];
43894
+ if (units.every(function (unit) { return unit === firstUnit; })) {
43895
+ if (firstUnit === _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL) {
43896
+ return "PX";
43897
+ }
43898
+ else {
43899
+ return "%";
43900
+ }
43901
+ }
43902
+ else {
43903
+ return _sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_10__["conflictingValuesPlaceholder"];
43904
+ }
43905
+ };
43906
+ var increment = function (propertyName, amount, minimum, maximum) {
43907
+ var _a;
43908
+ for (var _i = 0, controls_4 = controls; _i < controls_4.length; _i++) {
43909
+ var control = controls_4[_i];
43910
+ var initialValue = control[propertyName];
43911
+ var initialUnit = control["_" + propertyName]._unit;
43912
+ var newValue = control["".concat(propertyName, "InPixels")] + amount;
43913
+ if (minimum !== undefined && newValue < minimum)
43914
+ newValue = minimum;
43915
+ if (maximum !== undefined && newValue > maximum)
43916
+ newValue = maximum;
43917
+ control["".concat(propertyName, "InPixels")] = newValue;
43918
+ if (initialUnit === _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PERCENTAGE) {
43919
+ _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_11__["CoordinateHelper"].convertToPercentage(control, [propertyName]);
43920
+ }
43921
+ (_a = _this.props.onPropertyChangedObservable) === null || _a === void 0 ? void 0 : _a.notifyObservers({
43922
+ object: control,
43923
+ property: propertyName,
43924
+ initialValue: initialValue,
43925
+ value: control[propertyName]
43926
+ });
43927
+ }
43928
+ };
43929
+ var convertUnits = function (unit, property) {
43930
+ for (var _i = 0, controls_5 = controls; _i < controls_5.length; _i++) {
43931
+ var control = controls_5[_i];
43932
+ if (unit === "PX") {
43933
+ _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_11__["CoordinateHelper"].convertToPercentage(control, [property], _this.props.onPropertyChangedObservable);
43934
+ }
43935
+ else {
43936
+ _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_11__["CoordinateHelper"].convertToPixels(control, [property], _this.props.onPropertyChangedObservable);
43937
+ }
43938
+ _this.forceUpdate();
43939
+ }
43940
+ };
43849
43941
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null,
43850
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
43942
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider alignment-bar" },
43851
43943
  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 () {
43852
43944
  _this._updateAlignment("horizontalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].HORIZONTAL_ALIGNMENT_LEFT);
43853
43945
  } }),
@@ -43867,12 +43959,12 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
43867
43959
  _this._updateAlignment("verticalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_BOTTOM);
43868
43960
  } })),
43869
43961
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 })),
43962
+ 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", delayInput: true, value: getValue("_left"), onChange: function (newValue) { return _this._checkAndUpdateValues("left", newValue); }, unit: getUnitString("_left"), onUnitClicked: function (unit) { return convertUnits(unit, "left"); }, arrows: true, arrowsIncrement: function (amount) { return increment("left", amount); } }),
43963
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "Y", delayInput: true, value: getValue("_top"), onChange: function (newValue) { return _this._checkAndUpdateValues("top", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: getUnitString("_top"), onUnitClicked: function (unit) { return convertUnits(unit, "top"); }, arrows: true, arrowsIncrement: function (amount) { return increment("top", amount); } })),
43872
43964
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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) {
43874
- for (var _i = 0, controls_3 = controls; _i < controls_3.length; _i++) {
43875
- var control = controls_3[_i];
43965
+ 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", delayInput: true, value: getValue("_width"), onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function (newValue) {
43966
+ for (var _i = 0, controls_6 = controls; _i < controls_6.length; _i++) {
43967
+ var control = controls_6[_i];
43876
43968
  if (control.typeName === "Image") {
43877
43969
  control.autoScale = false;
43878
43970
  }
@@ -43885,12 +43977,11 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
43885
43977
  }
43886
43978
  }
43887
43979
  }
43888
- _this._width = newValue;
43889
- _this._checkAndUpdateValues("width", _this._width.toString());
43890
- } }),
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) {
43892
- for (var _i = 0, controls_4 = controls; _i < controls_4.length; _i++) {
43893
- var control = controls_4[_i];
43980
+ _this._checkAndUpdateValues("width", newValue);
43981
+ }, unit: getUnitString("_width"), onUnitClicked: function (unit) { return convertUnits(unit, "width"); }, arrows: true, arrowsIncrement: function (amount) { return increment("width", amount); } }),
43982
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "H", delayInput: true, value: getValue("_height"), onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function (newValue) {
43983
+ for (var _i = 0, controls_7 = controls; _i < controls_7.length; _i++) {
43984
+ var control = controls_7[_i];
43894
43985
  if (control.typeName === "Image") {
43895
43986
  control.autoScale = false;
43896
43987
  }
@@ -43903,52 +43994,58 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
43903
43994
  }
43904
43995
  }
43905
43996
  }
43906
- _this._height = newValue;
43907
- _this._checkAndUpdateValues("height", _this._height.toString());
43908
- } })),
43997
+ _this._checkAndUpdateValues("height", newValue);
43998
+ }, unit: getUnitString("_height"), onUnitClicked: function (unit) { return convertUnits(unit, "height"); }, arrows: true, arrowsIncrement: function (amount) { return increment("height", amount); } })),
43909
43999
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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) {
44000
+ 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: "T", delayInput: true, value: getValue("_paddingTop"), onChange: function (newValue) {
43915
44001
  _this._checkAndUpdateValues("paddingTop", newValue);
43916
44002
  _this._markChildrenAsDirty();
43917
- }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44003
+ }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: getUnitString("_paddingTop"), onUnitClicked: function (unit) { return convertUnits(unit, "paddingTop"); }, arrows: true, arrowsIncrement: function (amount) { return increment("paddingTop", amount, 0); } }),
44004
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "B", delayInput: true, value: getValue("_paddingBottom"), onChange: function (newValue) {
44005
+ _this._checkAndUpdateValues("paddingBottom", newValue);
44006
+ _this._markChildrenAsDirty();
44007
+ }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: getUnitString("_paddingBottom"), onUnitClicked: function (unit) { return convertUnits(unit, "paddingBottom"); }, arrows: true, arrowsIncrement: function (amount) { return increment("paddingBottom", amount, 0); } })),
43918
44008
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 })),
43921
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-shot" },
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 })),
44009
+ 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", delayInput: true, value: getValue("_paddingLeft"), onChange: function (newValue) {
44010
+ _this._checkAndUpdateValues("paddingLeft", newValue);
44011
+ _this._markChildrenAsDirty();
44012
+ }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: getUnitString("_paddingLeft"), onUnitClicked: function (unit) { return convertUnits(unit, "paddingLeft"); }, arrows: true, arrowsIncrement: function (amount) { return increment("paddingLeft", amount); } }),
44013
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "R", delayInput: true, value: getValue("_paddingRight"), onChange: function (newValue) {
44014
+ _this._checkAndUpdateValues("paddingRight", newValue);
44015
+ _this._markChildrenAsDirty();
44016
+ }, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: getUnitString("_paddingRight"), onUnitClicked: function (unit) { return convertUnits(unit, "paddingRight"); }, arrows: true, arrowsIncrement: function (amount) { return increment("paddingRight", amount); } })),
44017
+ 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: "PAD ONLY DESCENDENTS", target: proxy, propertyName: "descendentsOnlyPadding", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43923
44018
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
43924
44019
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "TRANSFORMATION", value: " ", color: "grey" }),
43925
44020
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 })),
44021
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { iconLabel: "Transform Center", icon: positionIcon, lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "transformCenterX", onPropertyChangedObservable: this.props.onPropertyChangedObservable, arrows: true, step: 0.0005, numbersOnly: true }),
44022
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "transformCenterY", onPropertyChangedObservable: this.props.onPropertyChangedObservable, arrows: true, step: 0.0005, numbersOnly: true })),
43928
44023
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 }),
44024
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { iconLabel: "Scale", icon: scaleIcon, lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "scaleX", onPropertyChangedObservable: this.props.onPropertyChangedObservable, arrows: true, step: 0.0005, numbersOnly: true }),
44025
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "scaleY", onPropertyChangedObservable: this.props.onPropertyChangedObservable, arrows: true, step: 0.0005, numbersOnly: true })),
44026
+ 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: proxy, decimalCount: 2, propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
43932
44027
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
43933
44028
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "APPEARANCE", value: " ", color: "grey" }),
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 }),
44029
+ 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: proxy, propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44030
+ 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: proxy, propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44031
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__["SliderLineComponent"], { lockObject: this.props.lockObject, iconLabel: "Alpha", icon: alphaIcon, label: " ", target: proxy, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44032
+ 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: proxy, propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable, disableAlpha: true }),
43938
44033
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 })),
43941
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-short" },
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 })),
44034
+ 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: proxy, propertyName: "shadowOffsetX", onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: "PX", unitLocked: true }),
44035
+ 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: proxy, propertyName: "shadowOffsetY", onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: "PX", unitLocked: true })),
44036
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44037
+ 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: proxy, propertyName: "shadowBlur", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
43943
44038
  showTextProperties && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
43944
44039
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
43945
44040
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "FONT STYLE", value: " ", color: "grey" }),
43946
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 })),
43949
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 })))));
44041
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-single" },
44042
+ 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: proxy, propertyName: "fontFamily", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44043
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-single" },
44044
+ 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: proxy, numbersOnly: true, propertyName: "fontSize", onChange: function (newValue) { return _this._checkAndUpdateValues("fontSize", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44045
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-single" },
44046
+ 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: proxy, propertyName: "fontWeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44047
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-single" },
44048
+ 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: proxy, propertyName: "fontStyle", onPropertyChangedObservable: this.props.onPropertyChangedObservable })))));
43952
44049
  };
43953
44050
  return CommonControlPropertyGridComponent;
43954
44051
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44085,8 +44182,9 @@ var EllipsePropertyGridComponent = /** @class */ (function (_super) {
44085
44182
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: ellipses, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44086
44183
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44087
44184
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "ELLIPSE", value: " ", color: "grey" }),
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 })));
44185
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44186
+ 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, unit: "PX", unitLocked: true })),
44187
+ 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 })));
44090
44188
  };
44091
44189
  return EllipsePropertyGridComponent;
44092
44190
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44585,15 +44683,54 @@ var cropIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/cropI
44585
44683
  var cellIDIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/cellIDIcon.svg */ "./sharedUiComponents/imgs/cellIDIcon.svg");
44586
44684
  var autoResizeIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/autoResizeIcon.svg */ "./sharedUiComponents/imgs/autoResizeIcon.svg");
44587
44685
  var sizeIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/sizeIcon.svg */ "./sharedUiComponents/imgs/sizeIcon.svg");
44686
+ var animationSheetIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/animationSheetIcon.svg */ "./sharedUiComponents/imgs/animationSheetIcon.svg");
44588
44687
  var ImagePropertyGridComponent = /** @class */ (function (_super) {
44589
44688
  Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ImagePropertyGridComponent, _super);
44590
44689
  function ImagePropertyGridComponent(props) {
44591
44690
  return _super.call(this, props) || this;
44592
44691
  }
44692
+ ImagePropertyGridComponent.prototype.toggleAnimations = function (on) {
44693
+ for (var _i = 0, _a = this.props.images; _i < _a.length; _i++) {
44694
+ var image = _a[_i];
44695
+ if (on) {
44696
+ image.cellId = 0;
44697
+ image.cellWidth = image.imageWidth;
44698
+ image.cellHeight = image.imageHeight;
44699
+ }
44700
+ else {
44701
+ image.cellId = -1;
44702
+ }
44703
+ }
44704
+ };
44705
+ ImagePropertyGridComponent.prototype.getMaxCells = function () {
44706
+ var maxCells = Number.MAX_SAFE_INTEGER;
44707
+ for (var _i = 0, _a = this.props.images; _i < _a.length; _i++) {
44708
+ var image = _a[_i];
44709
+ if (image.cellWidth === 0 || image.cellHeight === 0)
44710
+ continue;
44711
+ var cols = Math.ceil(image.imageWidth / image.cellWidth);
44712
+ var rows = Math.ceil(image.imageHeight / image.cellHeight);
44713
+ var max = (cols * rows) - 1;
44714
+ if (max < maxCells)
44715
+ maxCells = max;
44716
+ }
44717
+ return maxCells;
44718
+ };
44719
+ ImagePropertyGridComponent.prototype.updateCellSize = function () {
44720
+ var maxCells = this.getMaxCells();
44721
+ for (var _i = 0, _a = this.props.images; _i < _a.length; _i++) {
44722
+ var image = _a[_i];
44723
+ if (image.cellId > maxCells) {
44724
+ image.cellId = maxCells;
44725
+ }
44726
+ }
44727
+ this.forceUpdate();
44728
+ };
44593
44729
  ImagePropertyGridComponent.prototype.render = function () {
44594
44730
  var _this = this;
44595
44731
  var images = this.props.images;
44596
44732
  var image = images[0]; // for nine slice
44733
+ var proxy = Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable);
44597
44734
  var stretchOptions = [
44598
44735
  { label: "None", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_NONE },
44599
44736
  { label: "Fill", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_FILL },
@@ -44601,19 +44738,23 @@ var ImagePropertyGridComponent = /** @class */ (function (_super) {
44601
44738
  { label: "Extend", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_EXTEND },
44602
44739
  { label: "NinePatch", value: _babylonjs_gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__["Image"].STRETCH_NINE_PATCH },
44603
44740
  ];
44741
+ var animationSheet = images.every(function (image) { return image.cellId !== -1; });
44742
+ var maxCells = this.getMaxCells();
44743
+ var maxCellWidth = Math.max.apply(Math, images.map(function (image) { return image.imageWidth; }));
44744
+ var maxCellHeight = Math.max.apply(Math, images.map(function (image) { return image.imageHeight; }));
44604
44745
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "pane" },
44605
44746
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: images, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44606
44747
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44607
44748
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "IMAGE", value: " ", color: "grey" }),
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 }),
44749
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { iconLabel: "Source", icon: imageLinkIcon, lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44609
44750
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 })),
44751
+ 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: proxy, propertyName: "sourceLeft", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44752
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "T", target: proxy, propertyName: "sourceTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44612
44753
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 }); } }),
44754
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "R", target: proxy, icon: cropIcon, iconLabel: "Crop", propertyName: "sourceWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44755
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "B", target: proxy, propertyName: "sourceHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
44756
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Autoscale", icon: autoResizeIcon, label: "AUTOSCALE", target: proxy, propertyName: "autoScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44757
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__["OptionsLineComponent"], { iconLabel: "Stretch", icon: stretchFillIcon, label: "", options: stretchOptions, target: proxy, propertyName: "stretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: function (value) { return _this.setState({ mode: value }); } }),
44617
44758
  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,
44618
44759
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44619
44760
  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(); } }),
@@ -44623,12 +44764,13 @@ var ImagePropertyGridComponent = /** @class */ (function (_super) {
44623
44764
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "B", target: image, propertyName: "sliceBottom", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function () { image.populateNinePatchSlicesFromImage = false; _this.forceUpdate(); } })),
44624
44765
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "populateNinePatchSlicesFromImage", icon: autoResizeIcon, label: "SLICE FROM IMAGE", target: image, propertyName: "populateNinePatchSlicesFromImage", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onValueChanged: function () { _this.forceUpdate(); image._markAsDirty(); } })),
44625
44766
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44626
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "ANIMATION SHEET", value: " ", color: "grey" }),
44627
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-short" },
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 })),
44629
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 }))));
44767
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "animationSheet", icon: animationSheetIcon, label: "ANIMATION SHEET", target: Object(_sharedUiComponents_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__["makeTargetsProxy"])(images, this.props.onPropertyChangedObservable, function (target) { return target.cellId !== -1; }), onValueChanged: function () { _this.toggleAnimations(!animationSheet); _this.forceUpdate(); } }),
44768
+ animationSheet && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
44769
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-short" },
44770
+ 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: proxy, propertyName: "cellId", onPropertyChangedObservable: this.props.onPropertyChangedObservable, min: 0, max: maxCells })),
44771
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
44772
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { icon: sizeIcon, lockObject: this.props.lockObject, label: "W", target: proxy, propertyName: "cellWidth", isInteger: true, onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function () { return _this.updateCellSize(); }, min: 1, max: maxCellWidth }),
44773
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "H", target: proxy, propertyName: "cellHeight", isInteger: true, onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function () { return _this.updateCellSize(); }, min: 1, max: maxCellHeight })))));
44632
44774
  };
44633
44775
  return ImagePropertyGridComponent;
44634
44776
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -44891,10 +45033,11 @@ var RectanglePropertyGridComponent = /** @class */ (function (_super) {
44891
45033
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__["CommonControlPropertyGridComponent"], { lockObject: this.props.lockObject, controls: rectangles, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
44892
45034
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
44893
45035
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__["TextLineComponent"], { label: "RECTANGLE", value: " ", color: "grey" }),
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 }),
44895
45036
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
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 }))));
45037
+ 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, unit: "PX", unitLocked: true })),
45038
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
45039
+ 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, unit: "PX", unitLocked: true })),
45040
+ 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 })));
44898
45041
  };
44899
45042
  return RectanglePropertyGridComponent;
44900
45043
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -45248,9 +45391,9 @@ __webpack_require__.r(__webpack_exports__);
45248
45391
  /* harmony import */ var _propertyGrids_gui_scrollViewerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./propertyGrids/gui/scrollViewerPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/scrollViewerPropertyGridComponent.tsx");
45249
45392
  /* harmony import */ var _propertyGrids_gui_ellipsePropertyGridComponent__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./propertyGrids/gui/ellipsePropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/ellipsePropertyGridComponent.tsx");
45250
45393
  /* harmony import */ var _propertyGrids_gui_checkboxPropertyGridComponent__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./propertyGrids/gui/checkboxPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/checkboxPropertyGridComponent.tsx");
45251
- /* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/control */ "@babylonjs/gui/2D/controls/button");
45252
- /* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_23___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_23__);
45253
- /* harmony import */ var _propertyGrids_gui_controlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./propertyGrids/gui/controlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/controlPropertyGridComponent.tsx");
45394
+ /* harmony import */ var _propertyGrids_gui_controlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./propertyGrids/gui/controlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/controlPropertyGridComponent.tsx");
45395
+ /* harmony import */ var _babylonjs_gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! @babylonjs/gui/2D/advancedDynamicTexture */ "@babylonjs/gui/2D/controls/button");
45396
+ /* harmony import */ var _babylonjs_gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_24___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_24__);
45254
45397
  /* harmony import */ var _sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../../sharedUiComponents/lines/optionsLineComponent */ "./sharedUiComponents/lines/optionsLineComponent.tsx");
45255
45398
  /* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
45256
45399
  /* harmony import */ var _sharedUiComponents_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ../../sharedUiComponents/lines/colorLineComponent */ "./sharedUiComponents/lines/colorLineComponent.tsx");
@@ -45293,7 +45436,6 @@ __webpack_require__.r(__webpack_exports__);
45293
45436
 
45294
45437
 
45295
45438
 
45296
-
45297
45439
 
45298
45440
 
45299
45441
  __webpack_require__(/*! ./propertyTab.scss */ "./components/propertyTab/propertyTab.scss");
@@ -45359,7 +45501,7 @@ var PropertyTabComponent = /** @class */ (function (_super) {
45359
45501
  }
45360
45502
  }
45361
45503
  };
45362
- xmlHttp.open("POST", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_23__["AdvancedDynamicTexture"].SnippetUrl + (adt.snippetId ? "/" + adt.snippetId : ""), true);
45504
+ xmlHttp.open("POST", _babylonjs_gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_24__["AdvancedDynamicTexture"].SnippetUrl + (adt.snippetId ? "/" + adt.snippetId : ""), true);
45363
45505
  xmlHttp.setRequestHeader("Content-Type", "application/json");
45364
45506
  var dataToSend = {
45365
45507
  payload: JSON.stringify({
@@ -45406,7 +45548,6 @@ var PropertyTabComponent = /** @class */ (function (_super) {
45406
45548
  return [2 /*return*/];
45407
45549
  });
45408
45550
  }); };
45409
- _this.state = { currentNode: null };
45410
45551
  _this._lockObject = new _sharedUiComponents_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_8__["LockObject"]();
45411
45552
  _this.props.globalState.lockObject = _this._lockObject;
45412
45553
  _this.props.globalState.onSaveObservable.add(function () {
@@ -45426,13 +45567,8 @@ var PropertyTabComponent = /** @class */ (function (_super) {
45426
45567
  }
45427
45568
  PropertyTabComponent.prototype.componentDidMount = function () {
45428
45569
  var _this = this;
45429
- this.props.globalState.onSelectionChangedObservable.add(function (selection) {
45430
- if (selection instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_23__["Control"]) {
45431
- _this.setState({ currentNode: selection });
45432
- }
45433
- else {
45434
- _this.setState({ currentNode: null });
45435
- }
45570
+ this.props.globalState.onSelectionChangedObservable.add(function () {
45571
+ _this.forceUpdate();
45436
45572
  });
45437
45573
  this.props.globalState.onResizeObservable.add(function (newSize) {
45438
45574
  _this.forceUpdate();
@@ -45450,7 +45586,7 @@ var PropertyTabComponent = /** @class */ (function (_super) {
45450
45586
  _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["Tools"].ReadFile(file, function (data) {
45451
45587
  var decoder = new TextDecoder("utf-8");
45452
45588
  _this.props.globalState.workbench.loadFromJson(JSON.parse(decoder.decode(data)));
45453
- _this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
45589
+ _this.props.globalState.setSelection([]);
45454
45590
  }, undefined, true);
45455
45591
  };
45456
45592
  PropertyTabComponent.prototype.save = function (saveCallback) {
@@ -45567,13 +45703,13 @@ var PropertyTabComponent = /** @class */ (function (_super) {
45567
45703
  var guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_32__["GUINodeTools"].CreateControlFromString(value);
45568
45704
  var newGuiNode = _this.props.globalState.workbench.createNewGuiNode(guiElement);
45569
45705
  button.addControl(newGuiNode);
45570
- _this.props.globalState.onSelectionChangedObservable.notifyObservers(newGuiNode);
45706
+ _this.props.globalState.select(newGuiNode);
45571
45707
  }
45572
45708
  } }));
45573
45709
  }
45574
45710
  }
45575
45711
  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 }));
45712
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_propertyGrids_gui_controlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_23__["ControlPropertyGridComponent"], { controls: controls, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }));
45577
45713
  };
45578
45714
  PropertyTabComponent.prototype.renderControlIcon = function (nodes) {
45579
45715
  var node = nodes[0];
@@ -45674,8 +45810,8 @@ var PropertyTabComponent = /** @class */ (function (_super) {
45674
45810
  this.props.globalState.onResponsiveChangeObservable.notifyObservers(false);
45675
45811
  _babylonjs_core_Misc_tools__WEBPACK_IMPORTED_MODULE_4__["DataStorage"].WriteBoolean("Responsive", false);
45676
45812
  }
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)));
45813
+ if (this.props.globalState.selectedControls.length > 0) {
45814
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "ge-propertyTab" }, this.renderNode(this.props.globalState.selectedControls)));
45679
45815
  }
45680
45816
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "ge-propertyTab" },
45681
45817
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "header" },
@@ -45770,7 +45906,7 @@ var ControlTreeItemComponent = /** @class */ (function (_super) {
45770
45906
  function ControlTreeItemComponent(props) {
45771
45907
  var _this = _super.call(this, props) || this;
45772
45908
  var control = _this.props.control;
45773
- _this.state = { isActive: control.isHighlighted, isVisible: control.isVisible };
45909
+ _this.state = { isActive: control.isHighlighted, isVisible: control.isVisible, isRenaming: false };
45774
45910
  return _this;
45775
45911
  }
45776
45912
  ControlTreeItemComponent.prototype.highlight = function () {
@@ -45783,21 +45919,25 @@ var ControlTreeItemComponent = /** @class */ (function (_super) {
45783
45919
  this.setState({ isVisible: newState });
45784
45920
  this.props.control.isVisible = newState;
45785
45921
  };
45922
+ ControlTreeItemComponent.prototype.onRename = function (name) {
45923
+ this.props.control.name = name;
45924
+ this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
45925
+ };
45786
45926
  ControlTreeItemComponent.prototype.render = function () {
45787
45927
  var _this = this;
45788
45928
  var _a;
45789
45929
  var control = this.props.control;
45790
- var name = "".concat(control.name || "No name", " [").concat(control.getClassName(), "]");
45930
+ var bracket = "";
45791
45931
  if (((_a = control.parent) === null || _a === void 0 ? void 0 : _a.typeName) === "Grid") {
45792
- name += " [".concat(control.parent.getChildCellInfo(this.props.control), "]");
45932
+ bracket = control.parent.getChildCellInfo(this.props.control);
45793
45933
  }
45794
45934
  var draggingSelf = this.props.globalState.draggedControl === control;
45795
45935
  return (react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "controlTools" },
45796
- react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_treeItemLabelComponent__WEBPACK_IMPORTED_MODULE_1__["TreeItemLabelComponent"], { label: name, onClick: function () { return _this.props.onClick(); }, color: "greenyellow" }),
45797
- !draggingSelf && this.props.dragOverHover && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].CENTER && control instanceof _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5__["Container"] && (react__WEBPACK_IMPORTED_MODULE_3__["createElement"](react__WEBPACK_IMPORTED_MODULE_3__["Fragment"], null,
45936
+ react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_treeItemLabelComponent__WEBPACK_IMPORTED_MODULE_1__["TreeItemLabelComponent"], { label: control.name, bracket: bracket, onClick: function () { return _this.props.onClick(); }, onChange: function (name) { return _this.onRename(name); }, setRenaming: function (renaming) { return _this.setState({ isRenaming: renaming }); }, renaming: this.state.isRenaming }),
45937
+ !draggingSelf && this.props.isDragOver && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].CENTER && control instanceof _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5__["Container"] && (react__WEBPACK_IMPORTED_MODULE_3__["createElement"](react__WEBPACK_IMPORTED_MODULE_3__["Fragment"], null,
45798
45938
  react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "makeChild icon", onClick: function () { return _this.highlight(); }, title: "Make Child" },
45799
45939
  react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("img", { src: makeChildOfContainerIcon })))),
45800
- this.props.isHovered && this.props.globalState.draggedControl === null && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].NONE && (react__WEBPACK_IMPORTED_MODULE_3__["createElement"](react__WEBPACK_IMPORTED_MODULE_3__["Fragment"], null,
45940
+ !this.state.isRenaming && this.props.isHovered && this.props.globalState.draggedControl === null && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].NONE && (react__WEBPACK_IMPORTED_MODULE_3__["createElement"](react__WEBPACK_IMPORTED_MODULE_3__["Fragment"], null,
45801
45941
  react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "addComponent icon", onClick: function () { return _this.highlight(); }, title: "Add component (Not Implemented)" },
45802
45942
  react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("img", { src: makeComponentIcon })),
45803
45943
  react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "visibility icon", onClick: function () { return _this.switchVisibility(); }, title: "Show/Hide control" },
@@ -46010,14 +46150,14 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
46010
46150
  data.found = true;
46011
46151
  if (!goNext) {
46012
46152
  if (data.previousOne) {
46013
- this.props.globalState.onSelectionChangedObservable.notifyObservers(data.previousOne);
46153
+ this.props.globalState.select(data.previousOne);
46014
46154
  }
46015
46155
  return true;
46016
46156
  }
46017
46157
  }
46018
46158
  else {
46019
46159
  if (data.found) {
46020
- this.props.globalState.onSelectionChangedObservable.notifyObservers(item);
46160
+ this.props.globalState.select(item);
46021
46161
  return true;
46022
46162
  }
46023
46163
  data.previousOne = item;
@@ -46031,9 +46171,10 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
46031
46171
  return false;
46032
46172
  };
46033
46173
  SceneExplorerComponent.prototype.processKeys = function (keyEvent) {
46034
- if (!this.state.selectedEntity) {
46174
+ var _this = this;
46175
+ // if typing inside a text box, don't process keys
46176
+ if (keyEvent.target.localName === "input")
46035
46177
  return;
46036
- }
46037
46178
  var scene = this.state.scene;
46038
46179
  var search = false;
46039
46180
  var goNext = false;
@@ -46047,39 +46188,49 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
46047
46188
  break;
46048
46189
  case "Enter":
46049
46190
  case "ArrowRight":
46050
- var reservedDataStore = this.state.selectedEntity.reservedDataStore;
46051
- if (reservedDataStore && reservedDataStore.setExpandedState) {
46052
- reservedDataStore.setExpandedState(true);
46053
- }
46191
+ this.props.globalState.selectedControls.forEach(function (node) {
46192
+ var reservedDataStore = node.reservedDataStore;
46193
+ if (reservedDataStore && reservedDataStore.setExpandedState) {
46194
+ reservedDataStore.setExpandedState(true);
46195
+ }
46196
+ });
46054
46197
  keyEvent.preventDefault();
46198
+ this.forceUpdate();
46055
46199
  return;
46056
46200
  case "ArrowLeft":
46057
- var reservedDataStore = this.state.selectedEntity.reservedDataStore;
46058
- if (reservedDataStore && reservedDataStore.setExpandedState) {
46059
- reservedDataStore.setExpandedState(false);
46060
- }
46201
+ this.props.globalState.selectedControls.forEach(function (node) {
46202
+ var reservedDataStore = node.reservedDataStore;
46203
+ console.log(reservedDataStore);
46204
+ if (reservedDataStore && reservedDataStore.setExpandedState) {
46205
+ reservedDataStore.setExpandedState(false);
46206
+ }
46207
+ });
46061
46208
  keyEvent.preventDefault();
46209
+ this.forceUpdate();
46062
46210
  return;
46063
- break;
46064
46211
  case "Delete":
46065
46212
  case "Backspace":
46066
46213
  if (this.state.selectedEntity !== this.props.globalState.guiTexture.getChildren()[0]) {
46067
46214
  this.state.selectedEntity.dispose();
46068
- this.forceUpdate();
46215
+ this.props.globalState.selectedControls.forEach(function (node) {
46216
+ if (node !== _this.props.globalState.guiTexture.getChildren()[0]) {
46217
+ node.dispose();
46218
+ }
46219
+ _this.forceUpdate();
46220
+ });
46069
46221
  }
46070
46222
  break;
46071
- default:
46072
- break;
46073
46223
  }
46074
46224
  if (!search) {
46075
46225
  return;
46076
46226
  }
46077
46227
  keyEvent.preventDefault();
46078
46228
  if (scene) {
46229
+ var selectedEntity = this.props.globalState.selectedControls[this.props.globalState.selectedControls.length - 1];
46079
46230
  var data = {};
46080
- if (!this.findSiblings(null, scene.rootNodes, this.state.selectedEntity, goNext, data)) {
46081
- if (!this.findSiblings(null, scene.materials, this.state.selectedEntity, goNext, data)) {
46082
- this.findSiblings(null, scene.textures, this.state.selectedEntity, goNext, data);
46231
+ if (!this.findSiblings(null, scene.rootNodes, selectedEntity, goNext, data)) {
46232
+ if (!this.findSiblings(null, scene.materials, selectedEntity, goNext, data)) {
46233
+ this.findSiblings(null, scene.textures, selectedEntity, goNext, data);
46083
46234
  }
46084
46235
  }
46085
46236
  }
@@ -46092,17 +46243,18 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
46092
46243
  }
46093
46244
  var guiElements = scene.textures.filter(function (t) { return t.getClassName() === "AdvancedDynamicTexture"; });
46094
46245
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "tree", onDrop: function (event) {
46246
+ _this.props.globalState.onDropObservable.notifyObservers();
46095
46247
  _this.props.globalState.onParentingChangeObservable.notifyObservers(null);
46096
46248
  }, onDragOver: function (event) {
46097
46249
  event.preventDefault();
46098
46250
  }, onClick: function (event) {
46099
46251
  if (!_this.props.globalState.selectionLock) {
46100
- _this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
46252
+ _this.props.globalState.setSelection([]);
46101
46253
  }
46102
46254
  else {
46103
46255
  _this.props.globalState.selectionLock = false;
46104
46256
  }
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 }))));
46257
+ }, 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, selectedEntities: this.props.globalState.selectedControls, items: guiElements, label: "GUI", offset: 1, filter: this.state.filter }))));
46106
46258
  };
46107
46259
  SceneExplorerComponent.prototype.onClose = function () {
46108
46260
  if (!this.props.onClose) {
@@ -46118,7 +46270,9 @@ var SceneExplorerComponent = /** @class */ (function (_super) {
46118
46270
  };
46119
46271
  SceneExplorerComponent.prototype.render = function () {
46120
46272
  var _this = this;
46121
- return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "ge-sceneExplorer", tabIndex: 0, onKeyDown: function (keyEvent) { return _this.processKeys(keyEvent); } }, this.renderContent()));
46273
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "ge-sceneExplorer", tabIndex: 0, onKeyDown: function (keyEvent) { return _this.processKeys(keyEvent); } },
46274
+ this.props.children,
46275
+ this.renderContent()));
46122
46276
  };
46123
46277
  return SceneExplorerComponent;
46124
46278
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -46203,13 +46357,11 @@ var TreeItemComponent = /** @class */ (function (_super) {
46203
46357
  }
46204
46358
  var items = nextProps.items;
46205
46359
  if (items && items.length) {
46206
- if (nextProps.selectedEntity) {
46207
- for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
46208
- var item = items_1[_i];
46209
- if (_tools__WEBPACK_IMPORTED_MODULE_5__["Tools"].LookForItem(item, nextProps.selectedEntity)) {
46210
- nextState.isExpanded = true;
46211
- return true;
46212
- }
46360
+ for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {
46361
+ var item = items_1[_i];
46362
+ if (_tools__WEBPACK_IMPORTED_MODULE_5__["Tools"].LookForItems(item, nextProps.selectedEntities)) {
46363
+ nextState.isExpanded = true;
46364
+ return true;
46213
46365
  }
46214
46366
  }
46215
46367
  }
@@ -46256,7 +46408,7 @@ var TreeItemComponent = /** @class */ (function (_super) {
46256
46408
  }
46257
46409
  var sortedItems = _tools__WEBPACK_IMPORTED_MODULE_5__["Tools"].SortAndFilter(null, items)[0].getChildren();
46258
46410
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", null, sortedItems.map(function (item) {
46259
- return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_treeItemSelectableComponent__WEBPACK_IMPORTED_MODULE_4__["TreeItemSelectableComponent"], { extensibilityGroups: _this.props.extensibilityGroups, key: item.uniqueId !== undefined && item.uniqueId !== null ? item.uniqueId : item.name, offset: _this.props.offset + 1, selectedEntity: _this.props.selectedEntity, entity: item, globalState: _this.props.globalState, filter: _this.props.filter }));
46411
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_treeItemSelectableComponent__WEBPACK_IMPORTED_MODULE_4__["TreeItemSelectableComponent"], { extensibilityGroups: _this.props.extensibilityGroups, key: item.uniqueId !== undefined && item.uniqueId !== null ? item.uniqueId : item.name, offset: _this.props.offset + 1, selectedEntities: _this.props.selectedEntities, entity: item, globalState: _this.props.globalState, filter: _this.props.filter }));
46260
46412
  })));
46261
46413
  };
46262
46414
  TreeItemComponent._ContextMenuUniqueIdGenerator = 0;
@@ -46285,18 +46437,38 @@ __webpack_require__.r(__webpack_exports__);
46285
46437
  var TreeItemLabelComponent = /** @class */ (function (_super) {
46286
46438
  Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(TreeItemLabelComponent, _super);
46287
46439
  function TreeItemLabelComponent(props) {
46288
- return _super.call(this, props) || this;
46440
+ var _this = _super.call(this, props) || this;
46441
+ _this.state = {
46442
+ value: ""
46443
+ };
46444
+ return _this;
46289
46445
  }
46290
46446
  TreeItemLabelComponent.prototype.onClick = function () {
46291
- if (!this.props.onClick) {
46447
+ if (!this.props.onClick || this.props.renaming) {
46292
46448
  return;
46293
46449
  }
46294
46450
  this.props.onClick();
46295
46451
  };
46452
+ TreeItemLabelComponent.prototype.onBlur = function () {
46453
+ this.props.setRenaming(false);
46454
+ };
46296
46455
  TreeItemLabelComponent.prototype.render = function () {
46297
46456
  var _this = this;
46298
- return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "title", onClick: function () { return _this.onClick(); } },
46299
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "titleText" }, this.props.label || "no name")));
46457
+ // if editing, overwrite string with local value
46458
+ var label = this.props.renaming ? this.state.value : (this.props.label || "No Name");
46459
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "title", onClick: function () { return _this.onClick(); } }, this.props.renaming ?
46460
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "text", onBlur: function () { return _this.onBlur(); }, autoFocus: true, value: label, onChange: function (ev) {
46461
+ _this.props.onChange(ev.target.value);
46462
+ _this.setState({ value: ev.target.value });
46463
+ }, onKeyDown: function (ev) {
46464
+ if (ev.key === "Enter")
46465
+ _this.onBlur();
46466
+ }, className: "titleText" })
46467
+ :
46468
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "titleText", onDoubleClick: function () {
46469
+ _this.props.setRenaming(true);
46470
+ _this.setState({ value: label });
46471
+ } }, label)));
46300
46472
  };
46301
46473
  return TreeItemLabelComponent;
46302
46474
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -46339,9 +46511,15 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
46339
46511
  Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(TreeItemSelectableComponent, _super);
46340
46512
  function TreeItemSelectableComponent(props) {
46341
46513
  var _this = _super.call(this, props) || this;
46342
- _this.state = { dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].NONE, isHovered: false, isSelected: _this.props.entity === _this.props.selectedEntity };
46343
- _this._onSelectionChangedObservable = props.globalState.onSelectionChangedObservable.add(function (selection) {
46344
- _this.setState({ isSelected: selection === _this.props.entity });
46514
+ /** flag flipped onDragEnter if dragOver is already true
46515
+ * prevents dragLeave from immediately setting dragOver to false
46516
+ * required to make dragging work as expected
46517
+ * see: see: https://github.com/transformation-dev/matrx/tree/master/packages/dragster
46518
+ */
46519
+ _this._secondDragEnter = false;
46520
+ _this.state = { dragOver: false, dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].NONE, isHovered: false, isSelected: _this.props.selectedEntities.includes(_this.props.entity) };
46521
+ _this._onSelectionChangedObservable = props.globalState.onSelectionChangedObservable.add(function () {
46522
+ _this.setState({ isSelected: _this.props.globalState.selectedControls.includes(_this.props.entity) });
46345
46523
  });
46346
46524
  _this._onDraggingEndObservable = props.globalState.onDraggingEndObservable.add(function () {
46347
46525
  _this.setState({ dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].NONE });
@@ -46352,21 +46530,19 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
46352
46530
  return _this;
46353
46531
  }
46354
46532
  TreeItemSelectableComponent.prototype.switchExpandedState = function () {
46355
- this.props.entity.reservedDataStore.isExpanded = !this.props.entity.reservedDataStore.isExpanded;
46533
+ this.props.entity.reservedDataStore.setExpandedState(!this.props.entity.reservedDataStore.isExpanded);
46356
46534
  };
46357
46535
  TreeItemSelectableComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
46358
46536
  //if the next entity is going to be selected then we want to highlight it so update
46359
- if (nextProps.entity === nextProps.selectedEntity) {
46537
+ if (nextProps.selectedEntities.includes(nextProps.entity)) {
46360
46538
  nextState.isSelected = true;
46361
46539
  return true;
46362
46540
  }
46363
46541
  else {
46364
46542
  nextState.isSelected = false;
46365
46543
  }
46366
- if (nextProps.selectedEntity) {
46367
- if (_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].LookForItem(nextProps.entity, nextProps.selectedEntity)) {
46368
- return true;
46369
- }
46544
+ if (_tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].LookForItems(nextProps.entity, nextProps.selectedEntities)) {
46545
+ return true;
46370
46546
  }
46371
46547
  return true;
46372
46548
  };
@@ -46382,11 +46558,8 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
46382
46558
  this.props.globalState.onParentingChangeObservable.remove(this._onDraggingStartObservable);
46383
46559
  };
46384
46560
  TreeItemSelectableComponent.prototype.onSelect = function () {
46385
- if (!this.props.globalState.onSelectionChangedObservable) {
46386
- return;
46387
- }
46388
46561
  var entity = this.props.entity;
46389
- this.props.globalState.onSelectionChangedObservable.notifyObservers(entity);
46562
+ this.props.globalState.select(entity);
46390
46563
  this.props.globalState.selectionLock = true;
46391
46564
  };
46392
46565
  TreeItemSelectableComponent.prototype.renderChildren = function (isExpanded, offset) {
@@ -46404,12 +46577,14 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
46404
46577
  if (item.name == "Art-Board-Background") {
46405
46578
  return null;
46406
46579
  }
46407
- return (react__WEBPACK_IMPORTED_MODULE_3__["createElement"](TreeItemSelectableComponent, { globalState: _this.props.globalState, mustExpand: _this.props.mustExpand, extensibilityGroups: _this.props.extensibilityGroups, selectedEntity: _this.props.selectedEntity, key: i, offset: _this.props.offset + (offset ? 2 : 0), entity: item, filter: _this.props.filter }));
46580
+ return (react__WEBPACK_IMPORTED_MODULE_3__["createElement"](TreeItemSelectableComponent, { globalState: _this.props.globalState, mustExpand: _this.props.mustExpand, extensibilityGroups: _this.props.extensibilityGroups, selectedEntities: _this.props.selectedEntities, key: i, offset: _this.props.offset + (offset ? 2 : 0), entity: item, filter: _this.props.filter }));
46408
46581
  });
46409
46582
  };
46410
46583
  TreeItemSelectableComponent.prototype.render = function () {
46411
46584
  var _this = this;
46412
- if (this.props.entity === this.props.globalState.workbench.trueRootContainer || this.props.entity === this.props.globalState.workbench.visibleRegionContainer) {
46585
+ if (this.props.entity === this.props.globalState.workbench.trueRootContainer ||
46586
+ this.props.entity === this.props.globalState.workbench.visibleRegionContainer ||
46587
+ this.props.entity === this.props.globalState.workbench.panAndZoomContainer) {
46413
46588
  return this.renderChildren(true, false);
46414
46589
  }
46415
46590
  var marginStyle = {
@@ -46417,10 +46592,12 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
46417
46592
  };
46418
46593
  var entity = this.props.entity;
46419
46594
  if (!entity.reservedDataStore) {
46420
- entity.reservedDataStore = {};
46421
- entity.reservedDataStore.isExpanded = true;
46595
+ entity.reservedDataStore = {
46596
+ isExpanded: true,
46597
+ setExpandedState: function (expanded) { return entity.reservedDataStore.isExpanded = expanded; }
46598
+ };
46422
46599
  }
46423
- var isExpanded = entity.reservedDataStore.isExpanded || _tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].LookForItem(this.props.entity, this.props.selectedEntity);
46600
+ var isExpanded = entity.reservedDataStore.isExpanded || _tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].LookForItems(this.props.entity, this.props.selectedEntities);
46424
46601
  entity.reservedDataStore.isExpanded = isExpanded;
46425
46602
  var chevron = isExpanded ? react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("img", { src: expandedIcon, className: "icon" }) : react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("img", { src: collapsedIcon, className: "icon" });
46426
46603
  var children = entity.getClassName() === "MultiMaterial" ? [] : _tools__WEBPACK_IMPORTED_MODULE_1__["Tools"].SortAndFilter(entity, entity.getChildren ? entity.getChildren() : entity.children);
@@ -46443,43 +46620,60 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
46443
46620
  var className = "itemContainer"; //setting class name plus whatever extras based on states
46444
46621
  className += this.state.isSelected && this.props.globalState.draggedControl === null ? " selected" : "";
46445
46622
  className += this.state.isHovered && this.props.globalState.draggedControl === null ? " hover" : "";
46446
- className += this.dragOverHover && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].CENTER && entity instanceof _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6__["Container"] ? " parent" : "";
46623
+ className += this.state.dragOver && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].CENTER && entity instanceof _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6__["Container"] ? " parent" : "";
46447
46624
  className += this.props.globalState.draggedControl === this.props.entity ? " dragged" : "";
46448
46625
  className +=
46449
- this.dragOverHover && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].ABOVE && this.props.globalState.draggedControl != null && entity.parent ? " seAbove" : "";
46626
+ this.state.dragOver && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].ABOVE && entity.parent ? " seAbove" : "";
46450
46627
  className +=
46451
- this.dragOverHover && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].BELOW && this.props.globalState.draggedControl != null && entity.parent ? " seBelow" : "";
46628
+ this.state.dragOver && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].BELOW && entity.parent ? " seBelow" : "";
46452
46629
  return (react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", null,
46453
- react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: className, style: marginStyle, draggable: entity.parent ? true : false, onMouseOver: function () { return _this.setState({ isHovered: true }); }, onMouseLeave: function () { return _this.setState({ isHovered: false }); }, onClick: function () {
46630
+ react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: className, style: marginStyle, onPointerUp: function () {
46454
46631
  _this.onSelect();
46455
- }, onDragStart: function (event) {
46456
- _this.props.globalState.draggedControl = entity;
46632
+ }, onPointerEnter: function () { return _this.setState({ isHovered: true }); }, onPointerLeave: function () { return _this.setState({ isHovered: false }); }, onDragStart: function () {
46633
+ _this.props.globalState.draggedControl = _this.props.entity;
46457
46634
  _this.props.globalState.onDraggingStartObservable.notifyObservers();
46458
- }, onDrop: function (event) {
46459
- _this.drop();
46460
- }, onDragEnd: function (event) {
46635
+ }, onDragEnd: function () {
46461
46636
  _this.props.globalState.onDraggingEndObservable.notifyObservers();
46462
- }, onDragOver: function (event) {
46637
+ }, draggable: entity.parent ? true : false, onDrop: function (event) {
46638
+ _this.drop();
46639
+ event.preventDefault();
46640
+ }, onDragEnter: function (event) {
46641
+ event.preventDefault();
46463
46642
  _this.dragOver(event);
46464
- }, onDragLeave: function (event) {
46465
- _this.dragOverHover = false;
46466
- _this.forceUpdate();
46643
+ }, onDragOver: function (event) { return _this.updateDragOverLocation(event); }, onDragLeave: function () {
46644
+ // don't immediately set dragOver to false
46645
+ if (_this._secondDragEnter) {
46646
+ _this._secondDragEnter = false;
46647
+ }
46648
+ else {
46649
+ _this.setState({ dragOver: false });
46650
+ }
46467
46651
  } },
46468
46652
  hasChildren && (react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "arrow icon", onClick: function () { return _this.switchExpandedState(); } }, chevron)),
46469
- react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_entities_gui_controlTreeItemComponent__WEBPACK_IMPORTED_MODULE_5__["ControlTreeItemComponent"], { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, control: entity, onClick: function () { }, isHovered: this.state.isHovered, dragOverHover: this.dragOverHover, dragOverLocation: this.state.dragOverLocation })),
46653
+ react__WEBPACK_IMPORTED_MODULE_3__["createElement"](_entities_gui_controlTreeItemComponent__WEBPACK_IMPORTED_MODULE_5__["ControlTreeItemComponent"], { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, control: entity, onClick: function () { }, isHovered: this.state.isHovered, isDragOver: this.state.dragOver, dragOverLocation: this.state.dragOverLocation })),
46470
46654
  this.renderChildren(isExpanded)));
46471
46655
  };
46472
46656
  TreeItemSelectableComponent.prototype.dragOver = function (event) {
46473
- //check the positiions of the mouse cursor.
46657
+ this.updateDragOverLocation(event);
46658
+ // if we've already hovered the element, record a new drag event
46659
+ if (this.state.dragOver) {
46660
+ this._secondDragEnter = true;
46661
+ }
46662
+ else {
46663
+ this.setState({ dragOver: true });
46664
+ }
46665
+ };
46666
+ TreeItemSelectableComponent.prototype.updateDragOverLocation = function (event) {
46667
+ //check the positions of the mouse cursor.
46474
46668
  var target = event.target;
46475
46669
  var rect = target.getBoundingClientRect();
46476
46670
  var y = event.clientY - rect.top;
46477
46671
  if (this.props.entity instanceof _babylonjs_gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6__["Container"]) {
46478
- if (y < CONTROL_HEIGHT / 3) {
46479
- //split in thirds
46672
+ if (y < CONTROL_HEIGHT / 5) {
46673
+ //split in fifths
46480
46674
  this.setState({ dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].ABOVE });
46481
46675
  }
46482
- else if (y > (2 * CONTROL_HEIGHT) / 3) {
46676
+ else if (y > (4 * CONTROL_HEIGHT) / 5) {
46483
46677
  this.setState({ dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].BELOW });
46484
46678
  }
46485
46679
  else {
@@ -46495,19 +46689,17 @@ var TreeItemSelectableComponent = /** @class */ (function (_super) {
46495
46689
  this.setState({ dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].BELOW });
46496
46690
  }
46497
46691
  }
46498
- event.preventDefault();
46499
- this.dragOverHover = true;
46500
- this.forceUpdate();
46501
46692
  };
46502
46693
  TreeItemSelectableComponent.prototype.drop = function () {
46694
+ this.props.globalState.onDropObservable.notifyObservers();
46503
46695
  var control = this.props.entity;
46504
46696
  if (this.props.globalState.draggedControl != control) {
46505
- this.dragOverHover = false;
46506
46697
  this.props.globalState.draggedControlDirection = this.state.dragOverLocation;
46507
46698
  this.props.globalState.onParentingChangeObservable.notifyObservers(this.props.entity);
46508
46699
  }
46509
46700
  this.props.globalState.draggedControl = null;
46510
- this.setState({ dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].NONE });
46701
+ this.setState({ dragOverLocation: _globalState__WEBPACK_IMPORTED_MODULE_4__["DragOverLocation"].NONE, dragOver: false });
46702
+ this._secondDragEnter = false;
46511
46703
  };
46512
46704
  return TreeItemSelectableComponent;
46513
46705
  }(react__WEBPACK_IMPORTED_MODULE_3__["Component"]));
@@ -46585,13 +46777,14 @@ var ArtBoardComponent = /** @class */ (function (_super) {
46585
46777
  __webpack_require__.r(__webpack_exports__);
46586
46778
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Rect", function() { return Rect; });
46587
46779
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CoordinateHelper", function() { return CoordinateHelper; });
46588
- /* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/control */ "@babylonjs/gui/2D/controls/button");
46589
- /* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__);
46780
+ /* harmony import */ var _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/gui/2D/valueAndUnit */ "@babylonjs/gui/2D/controls/button");
46781
+ /* harmony import */ var _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__);
46590
46782
  /* harmony import */ var _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babylonjs/core/Maths/math.vector */ "@babylonjs/core/Misc/observable");
46591
46783
  /* harmony import */ var _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
46592
46784
 
46593
46785
 
46594
46786
 
46787
+
46595
46788
  var Rect = /** @class */ (function () {
46596
46789
  function Rect(left, top, right, bottom) {
46597
46790
  this.left = left;
@@ -46599,6 +46792,9 @@ var Rect = /** @class */ (function () {
46599
46792
  this.right = right;
46600
46793
  this.bottom = bottom;
46601
46794
  }
46795
+ Rect.prototype.clone = function () {
46796
+ return new Rect(this.left, this.top, this.right, this.bottom);
46797
+ };
46602
46798
  Object.defineProperty(Rect.prototype, "center", {
46603
46799
  get: function () {
46604
46800
  var topLeft = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__["Vector2"](this.left, this.top);
@@ -46681,24 +46877,24 @@ var CoordinateHelper = /** @class */ (function () {
46681
46877
  var left = storedValues ? storedValues.left : node.leftInPixels;
46682
46878
  var top = storedValues ? storedValues.top : node.topInPixels;
46683
46879
  switch (node.horizontalAlignment) {
46684
- case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Control"].HORIZONTAL_ALIGNMENT_LEFT:
46880
+ case _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Control"].HORIZONTAL_ALIGNMENT_LEFT:
46685
46881
  x = -(parentWidth - width) / 2;
46686
46882
  break;
46687
- case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Control"].HORIZONTAL_ALIGNMENT_RIGHT:
46883
+ case _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Control"].HORIZONTAL_ALIGNMENT_RIGHT:
46688
46884
  x = (parentWidth - width) / 2;
46689
46885
  break;
46690
- case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Control"].HORIZONTAL_ALIGNMENT_CENTER:
46886
+ case _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Control"].HORIZONTAL_ALIGNMENT_CENTER:
46691
46887
  x = 0;
46692
46888
  break;
46693
46889
  }
46694
46890
  switch (node.verticalAlignment) {
46695
- case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Control"].VERTICAL_ALIGNMENT_TOP:
46891
+ case _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Control"].VERTICAL_ALIGNMENT_TOP:
46696
46892
  y = -(parentHeight - height) / 2;
46697
46893
  break;
46698
- case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Control"].VERTICAL_ALIGNMENT_BOTTOM:
46894
+ case _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Control"].VERTICAL_ALIGNMENT_BOTTOM:
46699
46895
  y = (parentHeight - height) / 2;
46700
46896
  break;
46701
- case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Control"].VERTICAL_ALIGNMENT_CENTER:
46897
+ case _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Control"].VERTICAL_ALIGNMENT_CENTER:
46702
46898
  y = 0;
46703
46899
  break;
46704
46900
  }
@@ -46706,7 +46902,7 @@ var CoordinateHelper = /** @class */ (function () {
46706
46902
  var m2d = this._matrixCache[0];
46707
46903
  var translateTo = this._matrixCache[1];
46708
46904
  // as this is used later it needs to persist
46709
- var resultMatrix = _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].Identity();
46905
+ var resultMatrix = _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].Identity();
46710
46906
  // the pivot point around which the object transforms
46711
46907
  var offsetX = width * node.transformCenterX - width / 2;
46712
46908
  var offsetY = height * node.transformCenterY - height / 2;
@@ -46717,12 +46913,12 @@ var CoordinateHelper = /** @class */ (function () {
46717
46913
  offsetY -= ((node.paddingBottomInPixels - node.paddingTopInPixels) * 1) / 2;
46718
46914
  }
46719
46915
  // Set the translation
46720
- _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].TranslationToRef(x + left, y + top, translateTo);
46916
+ _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].TranslationToRef(x + left, y + top, translateTo);
46721
46917
  // without parents scaling and rotation, calculate world matrix for each
46722
46918
  var rotation = this.getRotation(node, true);
46723
46919
  var scaling = this.getScale(node, true);
46724
46920
  // COmpose doesn't actually translate, but creates a form of pivot in a specific position
46725
- _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].ComposeToRef(-offsetX, -offsetY, rotation, scaling.x, scaling.y, null, m2d);
46921
+ _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].ComposeToRef(-offsetX, -offsetY, rotation, scaling.x, scaling.y, null, m2d);
46726
46922
  // actually compose the matrix
46727
46923
  resultMatrix.multiplyToRef(m2d, resultMatrix);
46728
46924
  resultMatrix.multiplyToRef(translateTo, resultMatrix);
@@ -46787,13 +46983,61 @@ var CoordinateHelper = /** @class */ (function () {
46787
46983
  };
46788
46984
  CoordinateHelper.resetMatrixArray = function () {
46789
46985
  this._matrixCache.forEach(function (matrix) {
46790
- _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].IdentityToRef(matrix);
46986
+ _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].IdentityToRef(matrix);
46791
46987
  });
46792
46988
  };
46793
46989
  CoordinateHelper.computeLocalBounds = function (node) {
46794
46990
  return new Rect(-node.widthInPixels * 0.5, -node.heightInPixels * 0.5, node.widthInPixels * 0.5, node.heightInPixels * 0.5);
46795
46991
  };
46796
- CoordinateHelper._matrixCache = [_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].Identity(), _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].Identity(), _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].Identity(), _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].Identity()];
46992
+ /**
46993
+ * converts a node's dimensions to percentage, properties can be specified as a list, or can convert all
46994
+ */
46995
+ CoordinateHelper.convertToPercentage = function (guiControl, properties, onPropertyChangedObservable) {
46996
+ if (properties === void 0) { properties = ["left", "top", "width", "height"]; }
46997
+ var ratioX = 1;
46998
+ var ratioY = 1;
46999
+ if (guiControl.parent) {
47000
+ if (guiControl.parent.typeName === "Grid") {
47001
+ var cellInfo = guiControl.parent.getChildCellInfo(guiControl);
47002
+ var cell = guiControl.parent.cells[cellInfo];
47003
+ ratioX = cell.widthInPixels;
47004
+ ratioY = cell.heightInPixels;
47005
+ }
47006
+ else if (guiControl.parent.typeName === "Rectangle" || guiControl.parent.typeName === "Button") {
47007
+ var thickness = guiControl.parent.thickness * 2;
47008
+ ratioX = guiControl.parent._currentMeasure.width - thickness;
47009
+ ratioY = guiControl.parent._currentMeasure.height - thickness;
47010
+ }
47011
+ else {
47012
+ ratioX = guiControl.parent._currentMeasure.width;
47013
+ ratioY = guiControl.parent._currentMeasure.height;
47014
+ }
47015
+ }
47016
+ for (var _i = 0, properties_1 = properties; _i < properties_1.length; _i++) {
47017
+ var property = properties_1[_i];
47018
+ var initialValue = guiControl[property];
47019
+ var ratio = (property === "left" || property === "width" || property === "paddingLeft" || property === "paddingRight") ? ratioX : ratioY;
47020
+ var newValue = guiControl["".concat(property, "InPixels")] * 100 / ratio;
47021
+ guiControl[property] = "".concat(newValue.toFixed(2), "%");
47022
+ onPropertyChangedObservable === null || onPropertyChangedObservable === void 0 ? void 0 : onPropertyChangedObservable.notifyObservers({
47023
+ object: guiControl,
47024
+ initialValue: initialValue,
47025
+ value: guiControl[property],
47026
+ property: property
47027
+ });
47028
+ }
47029
+ };
47030
+ CoordinateHelper.round = function (value) {
47031
+ return Math.floor(value * 100) / 100;
47032
+ };
47033
+ CoordinateHelper.convertToPixels = function (guiControl, properties, onPropertyChangedObservable) {
47034
+ if (properties === void 0) { properties = ["left", "top", "width", "height"]; }
47035
+ for (var _i = 0, properties_2 = properties; _i < properties_2.length; _i++) {
47036
+ var property = properties_2[_i];
47037
+ guiControl["_".concat(property)] = new _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["ValueAndUnit"](this.round(guiControl["".concat(property, "InPixels")]), _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["ValueAndUnit"].UNITMODE_PIXEL);
47038
+ }
47039
+ };
47040
+ CoordinateHelper._matrixCache = [_babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].Identity(), _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].Identity(), _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].Identity(), _babylonjs_gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__["Matrix2D"].Identity()];
46797
47041
  return CoordinateHelper;
46798
47042
  }());
46799
47043
 
@@ -46875,68 +47119,57 @@ var GuiGizmoComponent = /** @class */ (function (_super) {
46875
47119
  };
46876
47120
  _this._onMove = function () {
46877
47121
  var scene = _this.props.globalState.workbench._scene;
46878
- var selectedGuiNodes = _this.props.globalState.workbench.selectedGuiNodes;
46879
47122
  if (_this.state.scalePointDragging !== -1) {
46880
- if (selectedGuiNodes.length === 1) {
46881
- var node = selectedGuiNodes[0];
46882
- var inRTT = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].mousePointerToRTTSpace(node, scene.pointerX, scene.pointerY);
46883
- var inNodeSpace = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].rttToLocalNodeSpace(node, inRTT.x, inRTT.y, undefined, _this._storedValues);
46884
- _this._dragLocalBounds(inNodeSpace);
46885
- _this._updateNodeFromLocalBounds(node, _this.state.scalePointDragging);
46886
- //convert to percentage
46887
- if (_this._responsive) {
46888
- _this.props.globalState.workbench.convertToPercentage(node, false);
46889
- }
46890
- _this.props.globalState.workbench._liveGuiTextureRerender = false;
46891
- _this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
46892
- }
47123
+ var node = _this.props.control;
47124
+ var inRTT = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].mousePointerToRTTSpace(node, scene.pointerX, scene.pointerY);
47125
+ var inNodeSpace = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].rttToLocalNodeSpace(node, inRTT.x, inRTT.y, undefined, _this._storedValues);
47126
+ _this._dragLocalBounds(inNodeSpace);
47127
+ _this._updateNodeFromLocalBounds();
47128
+ _this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
46893
47129
  }
46894
47130
  if (_this.state.isRotating) {
46895
- selectedGuiNodes.forEach(function (node, index) {
46896
- var nodeRotationData = _this._rotation.nodeRotations[index];
46897
- var angle = Math.atan2(scene.pointerY - _this._rotation.pivot.y, scene.pointerX - _this._rotation.pivot.x);
46898
- node.rotation = nodeRotationData + (angle - _this._rotation.initialAngleToPivot);
46899
- });
47131
+ var angle = Math.atan2(scene.pointerY - _this._rotation.pivot.y, scene.pointerX - _this._rotation.pivot.x);
47132
+ for (var _i = 0, _a = _this.props.globalState.selectedControls; _i < _a.length; _i++) {
47133
+ var control = _a[_i];
47134
+ var oldRotation = control.rotation;
47135
+ control.rotation += (angle - _this._rotation.initialAngleToPivot);
47136
+ _this.props.globalState.onPropertyChangedObservable.notifyObservers({
47137
+ object: control,
47138
+ property: 'rotation',
47139
+ value: control.rotation,
47140
+ initialValue: oldRotation
47141
+ });
47142
+ }
47143
+ _this._rotation.initialAngleToPivot = angle;
46900
47144
  _this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
46901
47145
  }
46902
47146
  };
46903
47147
  _this._beginDraggingScalePoint = function (scalePointIndex) {
46904
- var selectedGuiNodes = _this.props.globalState.workbench.selectedGuiNodes;
46905
47148
  _this.setState({ scalePointDragging: scalePointIndex });
46906
- if (selectedGuiNodes.length > 0) {
46907
- var node = selectedGuiNodes[0];
46908
- _this._localBounds = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].computeLocalBounds(node);
46909
- _this._storedValues = new _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["Rect"](node.leftInPixels, node.topInPixels, node.leftInPixels + node.widthInPixels, node.topInPixels + node.heightInPixels);
47149
+ var node = _this.props.control;
47150
+ _this._localBounds = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].computeLocalBounds(node);
47151
+ _this._storedValues = new _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["Rect"](node.leftInPixels, node.topInPixels, node.leftInPixels + node.widthInPixels, node.topInPixels + node.heightInPixels);
47152
+ for (var _i = 0, _a = _this.props.globalState.selectedControls; _i < _a.length; _i++) {
47153
+ var node_1 = _a[_i];
47154
+ node_1.metadata.localBounds = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].computeLocalBounds(node_1);
47155
+ node_1.metadata.storedValues = new _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["Rect"](node_1.leftInPixels, node_1.topInPixels, node_1.leftInPixels + node_1.widthInPixels, node_1.topInPixels + node_1.heightInPixels);
46910
47156
  }
46911
47157
  };
46912
47158
  _this._beginRotate = function () {
46913
47159
  var scene = _this.props.globalState.workbench._scene;
46914
- var selectedGuiNodes = _this.props.globalState.workbench.selectedGuiNodes;
46915
47160
  var pivot;
46916
- if (selectedGuiNodes.length === 1) {
46917
- var node = selectedGuiNodes[0];
46918
- var nodeSpace = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__["Vector2"](node.transformCenterX, node.transformCenterY);
46919
- var rtt = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].nodeToRTTSpace(node, nodeSpace.x, nodeSpace.y, undefined);
46920
- var canvas = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].rttToCanvasSpace(rtt.x, rtt.y);
46921
- pivot = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__["Vector2"](canvas.x, canvas.y);
46922
- }
46923
- else {
46924
- pivot = _this.state.canvasBounds.center;
46925
- }
47161
+ var node = _this.props.control;
47162
+ var nodeSpace = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__["Vector2"](node.transformCenterX, node.transformCenterY);
47163
+ var rtt = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].nodeToRTTSpace(node, nodeSpace.x, nodeSpace.y, undefined);
47164
+ var canvas = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].rttToCanvasSpace(rtt.x, rtt.y);
47165
+ pivot = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__["Vector2"](canvas.x, canvas.y);
46926
47166
  var initialAngleToPivot = Math.atan2(scene.pointerY - pivot.y, scene.pointerX - pivot.x);
46927
- var nodeRotations = [];
46928
- selectedGuiNodes.forEach(function (node) {
46929
- nodeRotations.push(node.rotation);
46930
- });
46931
47167
  _this._rotation = {
46932
47168
  pivot: pivot,
46933
47169
  initialAngleToPivot: initialAngleToPivot,
46934
- nodeRotations: nodeRotations
46935
47170
  };
46936
47171
  _this.setState({ isRotating: true });
46937
47172
  };
46938
- _this.props.globalState.guiGizmo = _this;
46939
- _this._responsive = _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__["DataStorage"].ReadBoolean("Responsive", true);
46940
47173
  var scalePoints = [];
46941
47174
  for (var vertical = ScalePointPosition.Top; vertical <= ScalePointPosition.Bottom; vertical++) {
46942
47175
  for (var horizontal = ScalePointPosition.Left; horizontal <= ScalePointPosition.Right; horizontal++) {
@@ -46951,127 +47184,83 @@ var GuiGizmoComponent = /** @class */ (function (_super) {
46951
47184
  scalePointDragging: -1,
46952
47185
  isRotating: false
46953
47186
  };
46954
- props.globalState.onSelectionChangedObservable.add(function (selection) {
46955
- _this.updateGizmo(true);
46956
- });
46957
- _this.props.globalState.onResponsiveChangeObservable.add(function (value) {
46958
- _this._responsive = value;
46959
- });
46960
- _this.props.globalState.onGizmoUpdateRequireObservable.add(function () {
47187
+ _this._gizmoUpdateObserver = _this.props.globalState.onGizmoUpdateRequireObservable.add(function () {
46961
47188
  _this.updateGizmo(true);
46962
47189
  });
47190
+ _this._pointerUpObserver = _this.props.globalState.onPointerUpObservable.add(function (evt) { return _this._onUp(evt); });
47191
+ _this._pointerMoveObserver = _this.props.globalState.onPointerMoveObservable.add(function () { return _this._onMove(); });
46963
47192
  _this.updateGizmo(true);
46964
47193
  return _this;
46965
47194
  }
46966
- GuiGizmoComponent.prototype.componentDidMount = function () { };
47195
+ GuiGizmoComponent.prototype.componentWillUnmount = function () {
47196
+ this.props.globalState.onGizmoUpdateRequireObservable.remove(this._gizmoUpdateObserver);
47197
+ this.props.globalState.onPointerUpObservable.remove(this._pointerUpObserver);
47198
+ this.props.globalState.onPointerMoveObservable.remove(this._pointerMoveObserver);
47199
+ };
46967
47200
  /**
46968
47201
  * Update the gizmo's positions
46969
47202
  * @param force should the update be forced. otherwise it will be updated only when the pointer is down
46970
47203
  */
46971
47204
  GuiGizmoComponent.prototype.updateGizmo = function (force) {
46972
- var _this = this;
46973
- var selectedGuiNodes = this.props.globalState.workbench.selectedGuiNodes;
46974
- if (selectedGuiNodes.length > 0 && (force || this.state.scalePointDragging !== -1)) {
46975
- // Calculating the offsets for each scale point.
46976
- var half_1 = 1 / 2;
46977
- var canvasBounds_1 = new _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["Rect"](Number.MAX_VALUE, Number.MAX_VALUE, 0, 0);
46978
- selectedGuiNodes.forEach(function (node) {
46979
- var localBounds = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].computeLocalBounds(node);
46980
- _this.state.scalePoints.forEach(function (scalePoint) {
46981
- var nodeSpace = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__["Vector2"]();
46982
- switch (scalePoint.horizontalPosition) {
46983
- case ScalePointPosition.Left:
46984
- nodeSpace.x = localBounds.left;
46985
- break;
46986
- case ScalePointPosition.Center:
46987
- nodeSpace.x = localBounds.center.x;
46988
- break;
46989
- case ScalePointPosition.Right:
46990
- nodeSpace.x = localBounds.right;
46991
- break;
46992
- }
46993
- switch (scalePoint.verticalPosition) {
46994
- case ScalePointPosition.Top:
46995
- nodeSpace.y = localBounds.top;
46996
- break;
46997
- case ScalePointPosition.Center:
46998
- nodeSpace.y = localBounds.center.y;
46999
- break;
47000
- case ScalePointPosition.Bottom:
47001
- nodeSpace.y = localBounds.bottom;
47002
- break;
47003
- }
47004
- if (scalePoint.isPivot) {
47005
- // Calculate the pivot point
47006
- var pivotX = (node.transformCenterX - 0.5) * 2;
47007
- var pivotY = (node.transformCenterY - 0.5) * 2;
47008
- nodeSpace.x = node.widthInPixels * half_1 * pivotX;
47009
- nodeSpace.y = node.heightInPixels * half_1 * pivotY;
47010
- }
47011
- var rtt = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].nodeToRTTSpace(node, nodeSpace.x, nodeSpace.y, undefined);
47012
- var canvas = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].rttToCanvasSpace(rtt.x, rtt.y);
47013
- if (canvas.x < canvasBounds_1.left) {
47014
- canvasBounds_1.left = canvas.x;
47015
- }
47016
- if (canvas.x > canvasBounds_1.right) {
47017
- canvasBounds_1.right = canvas.x;
47018
- }
47019
- if (canvas.y < canvasBounds_1.top) {
47020
- canvasBounds_1.top = canvas.y;
47021
- }
47022
- if (canvas.y > canvasBounds_1.bottom) {
47023
- canvasBounds_1.bottom = canvas.y;
47024
- }
47025
- // if we have a single control selected, put scale points at its edges, and rotate based on the rotation of the control
47026
- if (selectedGuiNodes.length === 1) {
47027
- scalePoint.position.x = canvas.x;
47028
- scalePoint.position.y = canvas.y;
47029
- scalePoint.rotation = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].getRotation(node) * (180 / Math.PI);
47030
- }
47031
- });
47032
- });
47033
- // if we are in multiselect mode, use the bounds to determine the scale point locations, and set rotation = 0
47034
- if (selectedGuiNodes.length > 1) {
47035
- this.state.scalePoints.forEach(function (scalePoint) {
47036
- switch (scalePoint.verticalPosition) {
47037
- case ScalePointPosition.Top:
47038
- scalePoint.position.y = canvasBounds_1.top;
47039
- break;
47040
- case ScalePointPosition.Center:
47041
- scalePoint.position.y = canvasBounds_1.center.y;
47042
- break;
47043
- case ScalePointPosition.Bottom:
47044
- scalePoint.position.y = canvasBounds_1.bottom;
47045
- break;
47046
- }
47047
- switch (scalePoint.horizontalPosition) {
47048
- case ScalePointPosition.Left:
47049
- scalePoint.position.x = canvasBounds_1.left;
47050
- break;
47051
- case ScalePointPosition.Center:
47052
- scalePoint.position.x = canvasBounds_1.center.x;
47053
- break;
47054
- case ScalePointPosition.Right:
47055
- scalePoint.position.x = canvasBounds_1.right;
47056
- break;
47057
- }
47058
- scalePoint.rotation = 0;
47059
- });
47205
+ var node = this.props.control;
47206
+ // Calculating the offsets for each scale point.
47207
+ var half = 1 / 2;
47208
+ var canvasBounds = new _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["Rect"](Number.MAX_VALUE, Number.MAX_VALUE, 0, 0);
47209
+ var localBounds = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].computeLocalBounds(node);
47210
+ this.state.scalePoints.forEach(function (scalePoint) {
47211
+ var nodeSpace = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__["Vector2"]();
47212
+ switch (scalePoint.horizontalPosition) {
47213
+ case ScalePointPosition.Left:
47214
+ nodeSpace.x = localBounds.left;
47215
+ break;
47216
+ case ScalePointPosition.Center:
47217
+ nodeSpace.x = localBounds.center.x;
47218
+ break;
47219
+ case ScalePointPosition.Right:
47220
+ nodeSpace.x = localBounds.right;
47221
+ break;
47060
47222
  }
47061
- this.setState({
47062
- canvasBounds: canvasBounds_1,
47063
- scalePoints: Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spreadArray"])([], this.state.scalePoints, true),
47064
- });
47065
- }
47066
- else {
47067
- this.forceUpdate();
47068
- }
47069
- };
47070
- GuiGizmoComponent.prototype.onUp = function (evt) {
47071
- this._onUp(evt);
47072
- };
47073
- GuiGizmoComponent.prototype.onMove = function (evt) {
47074
- this._onMove();
47223
+ switch (scalePoint.verticalPosition) {
47224
+ case ScalePointPosition.Top:
47225
+ nodeSpace.y = localBounds.top;
47226
+ break;
47227
+ case ScalePointPosition.Center:
47228
+ nodeSpace.y = localBounds.center.y;
47229
+ break;
47230
+ case ScalePointPosition.Bottom:
47231
+ nodeSpace.y = localBounds.bottom;
47232
+ break;
47233
+ }
47234
+ if (scalePoint.isPivot) {
47235
+ // Calculate the pivot point
47236
+ var pivotX = (node.transformCenterX - 0.5) * 2;
47237
+ var pivotY = (node.transformCenterY - 0.5) * 2;
47238
+ nodeSpace.x = node.widthInPixels * half * pivotX;
47239
+ nodeSpace.y = node.heightInPixels * half * pivotY;
47240
+ }
47241
+ var rtt = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].nodeToRTTSpace(node, nodeSpace.x, nodeSpace.y, undefined);
47242
+ var canvas = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].rttToCanvasSpace(rtt.x, rtt.y);
47243
+ if (canvas.x < canvasBounds.left) {
47244
+ canvasBounds.left = canvas.x;
47245
+ }
47246
+ if (canvas.x > canvasBounds.right) {
47247
+ canvasBounds.right = canvas.x;
47248
+ }
47249
+ if (canvas.y < canvasBounds.top) {
47250
+ canvasBounds.top = canvas.y;
47251
+ }
47252
+ if (canvas.y > canvasBounds.bottom) {
47253
+ canvasBounds.bottom = canvas.y;
47254
+ }
47255
+ // edges, and rotate based on the rotation of the control
47256
+ scalePoint.position.x = canvas.x;
47257
+ scalePoint.position.y = canvas.y;
47258
+ scalePoint.rotation = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].getRotation(node) * (180 / Math.PI);
47259
+ });
47260
+ this.setState({
47261
+ canvasBounds: canvasBounds,
47262
+ scalePoints: Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spreadArray"])([], this.state.scalePoints, true),
47263
+ });
47075
47264
  };
47076
47265
  GuiGizmoComponent.prototype._rotate = function (x, y, centerX, centerY, angle) {
47077
47266
  return {
@@ -47079,83 +47268,138 @@ var GuiGizmoComponent = /** @class */ (function (_super) {
47079
47268
  y: (x - centerX) * Math.sin(angle) + (y - centerY) * Math.cos(angle) + centerY,
47080
47269
  };
47081
47270
  };
47271
+ GuiGizmoComponent.prototype._modulo = function (dividend, divisor) {
47272
+ return ((dividend % divisor) + divisor) % divisor;
47273
+ };
47082
47274
  GuiGizmoComponent.prototype._dragLocalBounds = function (toPosition) {
47275
+ var _this = this;
47083
47276
  var scalePoint = this.state.scalePoints[this.state.scalePointDragging];
47277
+ var newBounds = this._localBounds.clone();
47084
47278
  if (scalePoint.horizontalPosition === ScalePointPosition.Left) {
47085
- this._localBounds.left = Math.min(this._localBounds.right, toPosition.x);
47086
- }
47087
- if (scalePoint.horizontalPosition === ScalePointPosition.Right) {
47088
- this._localBounds.right = Math.max(this._localBounds.left, toPosition.x);
47279
+ newBounds.left = Math.min(this._localBounds.right - 1, toPosition.x);
47089
47280
  }
47090
47281
  if (scalePoint.verticalPosition === ScalePointPosition.Left) {
47091
- this._localBounds.top = Math.min(this._localBounds.bottom, toPosition.y);
47092
- }
47093
- if (scalePoint.verticalPosition === ScalePointPosition.Bottom) {
47094
- this._localBounds.bottom = Math.max(this._localBounds.top, toPosition.y);
47095
- }
47096
- };
47097
- GuiGizmoComponent.prototype._updateNodeFromLocalBounds = function (node, scalePointIndex) {
47098
- var width = this._localBounds.right - this._localBounds.left;
47099
- var height = this._localBounds.bottom - this._localBounds.top;
47100
- var scalePoint = this.state.scalePoints[scalePointIndex];
47101
- var left = scalePoint.horizontalPosition === ScalePointPosition.Left && scalePoint.verticalPosition !== ScalePointPosition.Center;
47102
- var top = scalePoint.verticalPosition === ScalePointPosition.Top && scalePoint.horizontalPosition !== ScalePointPosition.Center;
47103
- // calculate the center point
47104
- var localRotation = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].getRotation(node, true);
47105
- var localScaling = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].getScale(node, true);
47106
- var absoluteCenter = this._localBounds.center;
47107
- var center = absoluteCenter.clone();
47108
- // move to pivot
47109
- center.multiplyInPlace(localScaling);
47110
- var cosRotation = Math.cos(localRotation);
47111
- var sinRotation = Math.sin(localRotation);
47112
- var cosRotation180 = Math.cos(localRotation + Math.PI);
47113
- var sinRotation180 = Math.sin(localRotation + Math.PI);
47114
- var widthDelta = (this._storedValues.width - width) * 0.5;
47115
- var heightDelta = (this._storedValues.height - height) * 0.5;
47116
- // alignment compensation
47117
- switch (node.horizontalAlignment) {
47118
- case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].HORIZONTAL_ALIGNMENT_LEFT:
47119
- center.x += (left ? widthDelta : -absoluteCenter.x) * cosRotation;
47120
- center.y += (left ? -widthDelta : absoluteCenter.x) * sinRotation;
47121
- break;
47122
- case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].HORIZONTAL_ALIGNMENT_RIGHT:
47123
- center.x += (left ? -widthDelta : absoluteCenter.x) * cosRotation;
47124
- center.y += (left ? widthDelta : -absoluteCenter.x) * sinRotation;
47125
- break;
47282
+ newBounds.top = Math.min(this._localBounds.bottom - 1, toPosition.y);
47126
47283
  }
47127
- switch (node.verticalAlignment) {
47128
- case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].VERTICAL_ALIGNMENT_TOP:
47129
- center.y += (top ? -heightDelta : absoluteCenter.y) * cosRotation180;
47130
- center.x += (top ? -heightDelta : absoluteCenter.y) * sinRotation180;
47131
- break;
47132
- case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].VERTICAL_ALIGNMENT_BOTTOM:
47133
- center.y += (top ? heightDelta : -absoluteCenter.y) * cosRotation180;
47134
- center.x += (top ? heightDelta : -absoluteCenter.y) * sinRotation180;
47135
- break;
47284
+ if (scalePoint.horizontalPosition === ScalePointPosition.Right) {
47285
+ newBounds.right = Math.max(this._localBounds.left + 1, toPosition.x);
47136
47286
  }
47137
- // rotate the center around 0,0
47138
- var rotatedCenter = this._rotate(center.x, center.y, 0, 0, localRotation);
47139
- // round the values and set them
47140
- node.leftInPixels = round(this._storedValues.left + rotatedCenter.x);
47141
- node.topInPixels = round(this._storedValues.top + rotatedCenter.y);
47142
- node.widthInPixels = round(Math.max(10, width));
47143
- node.heightInPixels = round(Math.max(10, height));
47144
- if (node.typeName === "Image") {
47145
- node.autoScale = false;
47287
+ if (scalePoint.verticalPosition === ScalePointPosition.Bottom) {
47288
+ newBounds.bottom = Math.max(this._localBounds.top + 1, toPosition.y);
47146
47289
  }
47147
- else if (node.typeName === "TextBlock") {
47148
- node.resizeToFit = false;
47290
+ // apply bounds changes to all controls
47291
+ var edges = ["left", "top", "right", "bottom"];
47292
+ var _loop_1 = function (node) {
47293
+ var initialBounds = node.metadata.localBounds;
47294
+ var nb = initialBounds.clone();
47295
+ // account for rotation: if other control is rotated 90 degrees
47296
+ // relative to primary control, we should modify top instead of left
47297
+ var rotationModifier = this_1._modulo((this_1.props.control.rotation - node.rotation), Math.PI * 2) / Math.PI * 2;
47298
+ edges.forEach(function (edge, index) {
47299
+ var modifiedIndex = Math.round(index + rotationModifier) % 4;
47300
+ var flipSign = ((index < 2) === (modifiedIndex < 2)) ? 1 : -1;
47301
+ nb[edges[modifiedIndex]] += (newBounds[edge] - _this._localBounds[edge]) * flipSign;
47302
+ });
47303
+ nb.left = Math.min(initialBounds.right - 1, nb.left);
47304
+ nb.top = Math.min(initialBounds.bottom - 1, nb.top);
47305
+ nb.right = Math.max(initialBounds.left + 1, nb.right);
47306
+ nb.bottom = Math.max(initialBounds.top + 1, nb.bottom);
47307
+ node.metadata.localBounds = nb;
47308
+ };
47309
+ var this_1 = this;
47310
+ for (var _i = 0, _a = this.props.globalState.selectedControls; _i < _a.length; _i++) {
47311
+ var node = _a[_i];
47312
+ _loop_1(node);
47149
47313
  }
47150
- if (this._responsive) {
47151
- this.props.globalState.workbench.convertToPercentage(node, true);
47314
+ this._localBounds = newBounds;
47315
+ };
47316
+ GuiGizmoComponent.prototype._updateNodeFromLocalBounds = function () {
47317
+ var scalePoint = this.state.scalePoints[this.state.scalePointDragging];
47318
+ var left = scalePoint.horizontalPosition === ScalePointPosition.Left;
47319
+ var top = scalePoint.verticalPosition === ScalePointPosition.Top;
47320
+ for (var _i = 0, _a = this.props.globalState.selectedControls; _i < _a.length; _i++) {
47321
+ var selectedControl = _a[_i];
47322
+ var width = selectedControl.metadata.localBounds.width;
47323
+ var height = selectedControl.metadata.localBounds.height;
47324
+ // calculate the center point
47325
+ var localRotation = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].getRotation(selectedControl, true);
47326
+ var localScaling = _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].getScale(selectedControl, true);
47327
+ var absoluteCenter = selectedControl.metadata.localBounds.center;
47328
+ var center = absoluteCenter.clone();
47329
+ // move to pivot
47330
+ center.multiplyInPlace(localScaling);
47331
+ var cosRotation = Math.cos(localRotation);
47332
+ var sinRotation = Math.sin(localRotation);
47333
+ var cosRotation180 = Math.cos(localRotation + Math.PI);
47334
+ var sinRotation180 = Math.sin(localRotation + Math.PI);
47335
+ var widthDelta = (selectedControl.metadata.storedValues.width - width) * 0.5;
47336
+ var heightDelta = (selectedControl.metadata.storedValues.height - height) * 0.5;
47337
+ // alignment compensation
47338
+ switch (selectedControl.horizontalAlignment) {
47339
+ case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].HORIZONTAL_ALIGNMENT_LEFT:
47340
+ center.x += (left ? widthDelta : -absoluteCenter.x) * cosRotation;
47341
+ center.y += (left ? -widthDelta : absoluteCenter.x) * sinRotation;
47342
+ break;
47343
+ case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].HORIZONTAL_ALIGNMENT_RIGHT:
47344
+ center.x += (left ? -widthDelta : absoluteCenter.x) * cosRotation;
47345
+ center.y += (left ? widthDelta : -absoluteCenter.x) * sinRotation;
47346
+ break;
47347
+ }
47348
+ switch (selectedControl.verticalAlignment) {
47349
+ case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].VERTICAL_ALIGNMENT_TOP:
47350
+ center.y += (top ? -heightDelta : absoluteCenter.y) * cosRotation180;
47351
+ center.x += (top ? -heightDelta : absoluteCenter.y) * sinRotation180;
47352
+ break;
47353
+ case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].VERTICAL_ALIGNMENT_BOTTOM:
47354
+ center.y += (top ? heightDelta : -absoluteCenter.y) * cosRotation180;
47355
+ center.x += (top ? heightDelta : -absoluteCenter.y) * sinRotation180;
47356
+ break;
47357
+ }
47358
+ // rotate the center around 0,0
47359
+ var rotatedCenter = this._rotate(center.x, center.y, 0, 0, localRotation);
47360
+ var properties = ["left", "top", "width", "height"];
47361
+ for (var _b = 0, properties_1 = properties; _b < properties_1.length; _b++) {
47362
+ var property = properties_1[_b];
47363
+ var newPixels = 0;
47364
+ switch (property) {
47365
+ case "left":
47366
+ newPixels = round(selectedControl.metadata.storedValues.left + rotatedCenter.x);
47367
+ break;
47368
+ case "top":
47369
+ newPixels = round(selectedControl.metadata.storedValues.top + rotatedCenter.y);
47370
+ break;
47371
+ case "width":
47372
+ newPixels = round(width);
47373
+ break;
47374
+ case "height":
47375
+ newPixels = round(height);
47376
+ break;
47377
+ }
47378
+ // compute real change in property
47379
+ var initialUnit = selectedControl["_".concat(property)].unit;
47380
+ var oldPixels = selectedControl["".concat(property, "InPixels")];
47381
+ selectedControl["".concat(property, "InPixels")] = newPixels;
47382
+ this.props.globalState.onPropertyChangedObservable.notifyObservers({
47383
+ object: selectedControl,
47384
+ property: "".concat(property, "InPixels"),
47385
+ value: newPixels,
47386
+ initialValue: oldPixels
47387
+ });
47388
+ if (initialUnit === _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["ValueAndUnit"].UNITMODE_PERCENTAGE) {
47389
+ _coordinateHelper__WEBPACK_IMPORTED_MODULE_4__["CoordinateHelper"].convertToPercentage(selectedControl, [property]);
47390
+ }
47391
+ }
47392
+ if (selectedControl.typeName === "Image") {
47393
+ selectedControl.autoScale = false;
47394
+ }
47395
+ else if (selectedControl.typeName === "TextBlock") {
47396
+ selectedControl.resizeToFit = false;
47397
+ }
47152
47398
  }
47153
47399
  };
47154
47400
  GuiGizmoComponent.prototype.render = function () {
47155
47401
  var _this = this;
47156
47402
  // don't render if we don't have anything selected, or if we're currently dragging
47157
- if (this.props.globalState.workbench.selectedGuiNodes.length === 0 || this.state.scalePointDragging !== -1)
47158
- return null;
47159
47403
  return (react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("div", { className: "gizmo" },
47160
47404
  lines.map(function (line, index) {
47161
47405
  var start = _this.state.scalePoints[line[0]];
@@ -47179,16 +47423,11 @@ var GuiGizmoComponent = /** @class */ (function (_super) {
47179
47423
  pointerEvents: _this.state.scalePointDragging === -1 && !scalePoint.isPivot && !_this.state.isRotating ? "auto" : "none",
47180
47424
  };
47181
47425
  if (scalePoint.isPivot) {
47182
- if (_this.props.globalState.workbench.selectedGuiNodes.length > 1) {
47183
- return null;
47184
- }
47185
47426
  return react__WEBPACK_IMPORTED_MODULE_3__["createElement"]("img", { className: "pivot-point", src: gizmoPivotIcon, style: style, key: index });
47186
47427
  }
47187
47428
  // compute which cursor icon to use on hover
47188
47429
  var angleOfCursor = (defaultScalePointRotations[index] + scalePoint.rotation);
47189
- var angleAdjusted = angleOfCursor % (360);
47190
- if (angleAdjusted < 0)
47191
- angleAdjusted += 360;
47430
+ var angleAdjusted = _this._modulo(angleOfCursor, 360);
47192
47431
  var increment = 45;
47193
47432
  var cursorIndex = Math.round(angleAdjusted / increment) % 8;
47194
47433
  var cursor = scalePointCursors[cursorIndex];
@@ -47227,6 +47466,49 @@ var GuiGizmoComponent = /** @class */ (function (_super) {
47227
47466
 
47228
47467
 
47229
47468
 
47469
+ /***/ }),
47470
+
47471
+ /***/ "./diagram/guiGizmoWrapper.tsx":
47472
+ /*!*************************************!*\
47473
+ !*** ./diagram/guiGizmoWrapper.tsx ***!
47474
+ \*************************************/
47475
+ /*! exports provided: GizmoWrapper */
47476
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
47477
+
47478
+ "use strict";
47479
+ __webpack_require__.r(__webpack_exports__);
47480
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GizmoWrapper", function() { return GizmoWrapper; });
47481
+ /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
47482
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
47483
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
47484
+ /* harmony import */ var _guiGizmo__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./guiGizmo */ "./diagram/guiGizmo.tsx");
47485
+
47486
+
47487
+
47488
+ var GizmoWrapper = /** @class */ (function (_super) {
47489
+ Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(GizmoWrapper, _super);
47490
+ function GizmoWrapper() {
47491
+ return _super !== null && _super.apply(this, arguments) || this;
47492
+ }
47493
+ GizmoWrapper.prototype.componentWillMount = function () {
47494
+ var _this = this;
47495
+ this.observer = this.props.globalState.onSelectionChangedObservable.add(function () { return _this.forceUpdate(); });
47496
+ };
47497
+ GizmoWrapper.prototype.componentWillUnmount = function () {
47498
+ this.props.globalState.onSelectionChangedObservable.remove(this.observer);
47499
+ };
47500
+ GizmoWrapper.prototype.render = function () {
47501
+ var _this = this;
47502
+ var controls = this.props.globalState.selectedControls;
47503
+ return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, controls.map(function (control) {
47504
+ return react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_guiGizmo__WEBPACK_IMPORTED_MODULE_2__["GuiGizmoComponent"], { globalState: _this.props.globalState, control: control, key: control.uniqueId });
47505
+ }));
47506
+ };
47507
+ return GizmoWrapper;
47508
+ }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
47509
+
47510
+
47511
+
47230
47512
  /***/ }),
47231
47513
 
47232
47514
  /***/ "./diagram/workbench.tsx":
@@ -47249,6 +47531,9 @@ __webpack_require__.r(__webpack_exports__);
47249
47531
  /* harmony import */ var _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @babylonjs/core/Maths/math.vector */ "@babylonjs/core/Misc/observable");
47250
47532
  /* harmony import */ var _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__);
47251
47533
  /* harmony import */ var _tools__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../tools */ "./tools.ts");
47534
+ /* harmony import */ var _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./coordinateHelper */ "./diagram/coordinateHelper.tsx");
47535
+
47536
+
47252
47537
 
47253
47538
 
47254
47539
 
@@ -47275,6 +47560,8 @@ var ConstraintDirection;
47275
47560
  ConstraintDirection[ConstraintDirection["X"] = 2] = "X";
47276
47561
  ConstraintDirection[ConstraintDirection["Y"] = 3] = "Y";
47277
47562
  })(ConstraintDirection || (ConstraintDirection = {}));
47563
+ var ARROW_KEY_MOVEMENT_SMALL = 1; // px
47564
+ var ARROW_KEY_MOVEMENT_LARGE = 5; // px
47278
47565
  var WorkbenchComponent = /** @class */ (function (_super) {
47279
47566
  Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(WorkbenchComponent, _super);
47280
47567
  function WorkbenchComponent(props) {
@@ -47282,25 +47569,20 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47282
47569
  _this._setConstraintDirection = false;
47283
47570
  _this._mouseStartPointX = null;
47284
47571
  _this._mouseStartPointY = null;
47285
- _this._selectedGuiNodes = [];
47286
47572
  _this._ctrlKeyIsPressed = false;
47287
47573
  _this._altKeyIsPressed = false;
47288
47574
  _this._constraintDirection = ConstraintDirection.NONE;
47289
47575
  _this._forcePanning = false;
47290
47576
  _this._forceZooming = false;
47291
47577
  _this._forceSelecting = true;
47292
- _this._outlines = false;
47293
47578
  _this._isOverGUINode = [];
47294
- _this._clipboard = [];
47295
- _this._selectAll = false;
47296
47579
  _this._mainSelection = null;
47297
47580
  _this._selectionDepth = 0;
47298
47581
  _this._doubleClick = null;
47299
- _this._lockMainSelection = false;
47300
47582
  _this._liveGuiTextureRerender = true;
47301
47583
  _this._anyControlClicked = true;
47302
47584
  _this._nextLiveGuiRender = -1;
47303
- _this._liveGuiRerenderDelay = 100;
47585
+ _this._liveGuiRerenderDelay = 30;
47304
47586
  _this._defaultGUISize = { width: 1024, height: 1024 };
47305
47587
  _this._initialPanningOffset = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Vector2"](0, 0);
47306
47588
  _this._panningOffset = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Vector2"](0, 0);
@@ -47308,6 +47590,8 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47308
47590
  _this._zoomModeIncrement = 0.2;
47309
47591
  _this._guiSize = _this._defaultGUISize;
47310
47592
  _this.keyEvent = function (evt) {
47593
+ if (evt.target.localName === "input")
47594
+ return;
47311
47595
  _this._ctrlKeyIsPressed = evt.ctrlKey;
47312
47596
  _this._altKeyIsPressed = evt.altKey;
47313
47597
  if (evt.shiftKey) {
@@ -47319,40 +47603,14 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47319
47603
  }
47320
47604
  if (evt.key === "Delete" || evt.key === "Backspace") {
47321
47605
  if (!_this.props.globalState.lockObject.lock) {
47322
- _this._selectedGuiNodes.forEach(function (guiNode) {
47323
- var _a;
47324
- if (guiNode !== _this.globalState.guiTexture.getChildren()[0]) {
47325
- _this.props.globalState.guiTexture.removeControl(guiNode);
47326
- (_a = _this.props.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(guiNode);
47327
- guiNode.dispose();
47328
- }
47329
- });
47330
- _this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
47606
+ _this._deleteSelectedNodes();
47331
47607
  }
47332
47608
  }
47333
47609
  if (_this._ctrlKeyIsPressed && !_this.props.globalState.lockObject.lock) {
47334
47610
  if (evt.key === "a") {
47335
- _this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
47336
- var index_1 = 0;
47337
- _this.nodes.forEach(function (node) {
47338
- if (index_1++) {
47339
- //skip the first node, the background
47340
- _this.selectAllGUI(node);
47341
- }
47342
- });
47343
- }
47344
- else if (evt.key === "c") {
47345
- _this.copyToClipboard();
47346
- }
47347
- else if (evt.key === "v" && !_this._pasted) {
47348
- _this.globalState.onSelectionChangedObservable.notifyObservers(null);
47349
- _this.pasteFromClipboard();
47350
- _this._pasted = true;
47611
+ _this.props.globalState.setSelection(_this.trueRootContainer.children);
47351
47612
  }
47352
47613
  }
47353
- else if (!_this._ctrlKeyIsPressed) {
47354
- _this._pasted = false;
47355
- }
47356
47614
  if (_this._forceZooming) {
47357
47615
  _this._canvas.style.cursor = _this._altKeyIsPressed ? "zoom-out" : "zoom-in";
47358
47616
  }
@@ -47360,44 +47618,12 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47360
47618
  _this.blurEvent = function () {
47361
47619
  _this._ctrlKeyIsPressed = false;
47362
47620
  _this._constraintDirection = ConstraintDirection.NONE;
47363
- _this.props.globalState.guiGizmo.onUp();
47621
+ _this.props.globalState.onPointerUpObservable.notifyObservers(null);
47364
47622
  };
47365
47623
  _this.isUp = true;
47366
47624
  _this._rootContainer = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
47367
47625
  _this._responsive = _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["DataStorage"].ReadBoolean("Responsive", true);
47368
- props.globalState.onSelectionChangedObservable.add(function (selection) {
47369
- if (!selection) {
47370
- _this.changeSelectionHighlight(false);
47371
- _this._selectedGuiNodes = [];
47372
- _this._selectAll = false;
47373
- _this._mainSelection = null;
47374
- }
47375
- else {
47376
- if (selection instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"]) {
47377
- if (_this._ctrlKeyIsPressed) {
47378
- var index = _this._selectedGuiNodes.indexOf(selection);
47379
- if (index === -1) {
47380
- _this._selectedGuiNodes.push(selection);
47381
- }
47382
- else {
47383
- _this.changeSelectionHighlight(false);
47384
- _this._selectedGuiNodes.splice(index, 1);
47385
- }
47386
- }
47387
- else if (_this._selectedGuiNodes.length <= 1) {
47388
- _this.changeSelectionHighlight(false);
47389
- _this._selectedGuiNodes = [selection];
47390
- if (!_this._lockMainSelection && selection != _this.props.globalState.guiTexture._rootContainer) {
47391
- //incase the selection did not come from the canvas and mouse
47392
- _this._mainSelection = selection;
47393
- }
47394
- _this._lockMainSelection = false;
47395
- _this._selectAll = false;
47396
- }
47397
- _this.changeSelectionHighlight(true);
47398
- }
47399
- }
47400
- });
47626
+ props.globalState.onSelectionChangedObservable.add(function () { return _this.updateNodeOutlines(); });
47401
47627
  props.globalState.onPanObservable.add(function () {
47402
47628
  _this._forcePanning = !_this._forcePanning;
47403
47629
  _this._forceSelecting = false;
@@ -47408,16 +47634,12 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47408
47634
  else {
47409
47635
  _this._canvas.style.cursor = "grab";
47410
47636
  }
47411
- _this.updateHitTest(_this.globalState.guiTexture.getChildren()[0], _this._forceSelecting);
47412
- // this.artBoardBackground.isHitTestVisible = true;
47413
47637
  });
47414
47638
  props.globalState.onSelectionButtonObservable.add(function () {
47415
47639
  _this._forceSelecting = !_this._forceSelecting;
47416
47640
  _this._forcePanning = false;
47417
47641
  _this._forceZooming = false;
47418
47642
  _this._canvas.style.cursor = "default";
47419
- _this.updateHitTest(_this.globalState.guiTexture.getChildren()[0], _this._forceSelecting);
47420
- // this.artBoardBackground.isHitTestVisible = true;
47421
47643
  });
47422
47644
  props.globalState.onZoomObservable.add(function () {
47423
47645
  _this._forceZooming = !_this._forceZooming;
@@ -47429,8 +47651,6 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47429
47651
  else {
47430
47652
  _this._canvas.style.cursor = "zoom-in";
47431
47653
  }
47432
- _this.updateHitTest(_this.globalState.guiTexture.getChildren()[0], _this._forceSelecting);
47433
- // this.artBoardBackground.isHitTestVisible = true;
47434
47654
  });
47435
47655
  props.globalState.onFitToWindowObservable.add(function () {
47436
47656
  _this._panningOffset = new _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Vector2"](0, 0);
@@ -47438,8 +47658,11 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47438
47658
  var yFactor = _this._engine.getRenderHeight() / _this.guiSize.height;
47439
47659
  _this._zoomFactor = Math.min(xFactor, yFactor) * 0.9;
47440
47660
  });
47441
- props.globalState.onOutlinesObservable.add(function () {
47442
- _this._outlines = !_this._outlines;
47661
+ props.globalState.onOutlineChangedObservable.add(function () {
47662
+ _this.updateNodeOutlines();
47663
+ });
47664
+ props.globalState.onSelectionChangedObservable.add(function () {
47665
+ _this.updateNodeOutlines();
47443
47666
  });
47444
47667
  props.globalState.onParentingChangeObservable.add(function (control) {
47445
47668
  _this.parent(control);
@@ -47456,6 +47679,9 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47456
47679
  _this.props.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
47457
47680
  _this._engine.resize();
47458
47681
  });
47682
+ props.globalState.onCopyObservable.add(function (copyFn) { return _this.copyToClipboard(copyFn); });
47683
+ props.globalState.onCutObservable.add(function (copyFn) { return _this.cutToClipboard(copyFn); });
47684
+ props.globalState.onPasteObservable.add(function (content) { return _this.pasteFromClipboard(content); });
47459
47685
  _this.props.globalState.workbench = _this;
47460
47686
  return _this;
47461
47687
  }
@@ -47466,6 +47692,13 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47466
47692
  enumerable: false,
47467
47693
  configurable: true
47468
47694
  });
47695
+ Object.defineProperty(WorkbenchComponent.prototype, "panAndZoomContainer", {
47696
+ get: function () {
47697
+ return this._panAndZoomContainer;
47698
+ },
47699
+ enumerable: false,
47700
+ configurable: true
47701
+ });
47469
47702
  Object.defineProperty(WorkbenchComponent.prototype, "trueRootContainer", {
47470
47703
  get: function () {
47471
47704
  return this._trueRootContainer;
@@ -47504,7 +47737,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47504
47737
  if (adt._rootContainer != this._panAndZoomContainer) {
47505
47738
  adt._rootContainer = this._panAndZoomContainer;
47506
47739
  this._visibleRegionContainer.addControl(this._trueRootContainer);
47507
- console.log(adt._rootContainer.name, this._panAndZoomContainer.host, this._visibleRegionContainer.host, this._trueRootContainer.host);
47740
+ this.globalState.guiTexture.markAsDirty();
47508
47741
  }
47509
47742
  if (adt.getSize().width !== this._engine.getRenderWidth() || adt.getSize().height !== this._engine.getRenderHeight()) {
47510
47743
  adt.scaleTo(this._engine.getRenderWidth(), this._engine.getRenderHeight());
@@ -47540,7 +47773,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47540
47773
  });
47541
47774
  Object.defineProperty(WorkbenchComponent.prototype, "selectedGuiNodes", {
47542
47775
  get: function () {
47543
- return this._selectedGuiNodes;
47776
+ return this.props.globalState.selectedControls;
47544
47777
  },
47545
47778
  enumerable: false,
47546
47779
  configurable: true
@@ -47568,9 +47801,9 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47568
47801
  return parent;
47569
47802
  };
47570
47803
  WorkbenchComponent.prototype.determineMouseSelection = function (selection) {
47571
- if (selection && this._selectedGuiNodes.length <= 1) {
47804
+ if (this.props.globalState.selectedControls.length <= 1) {
47572
47805
  // if we're still on the same main selection, got down the tree.
47573
- if (selection === this._selectedGuiNodes[0] || selection === this._mainSelection) {
47806
+ if (selection === this.props.globalState.selectedControls[0]) {
47574
47807
  selection = this._getParentWithDepth(selection);
47575
47808
  }
47576
47809
  else { // get the start of our tree by getting our max parent and storing our main selected control
@@ -47583,46 +47816,54 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47583
47816
  this._mainSelection = selection;
47584
47817
  }
47585
47818
  }
47586
- this._lockMainSelection = true;
47587
- this.props.globalState.onSelectionChangedObservable.notifyObservers(selection);
47819
+ this.props.globalState.select(selection);
47588
47820
  };
47589
- WorkbenchComponent.prototype.updateHitTest = function (guiControl, value) {
47590
- var _this = this;
47591
- guiControl.isHitTestVisible = value;
47592
- if (guiControl instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
47593
- guiControl.children.forEach(function (child) {
47594
- _this.updateHitTest(child, value);
47595
- });
47821
+ WorkbenchComponent.prototype._deleteSelectedNodes = function () {
47822
+ var _a;
47823
+ for (var _i = 0, _b = this.props.globalState.selectedControls; _i < _b.length; _i++) {
47824
+ var control = _b[_i];
47825
+ this.props.globalState.guiTexture.removeControl(control);
47826
+ (_a = this.props.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(control);
47827
+ control.dispose();
47596
47828
  }
47829
+ ;
47830
+ this.props.globalState.setSelection([]);
47597
47831
  };
47598
- WorkbenchComponent.prototype.updateHitTestForSelection = function (value) {
47599
- if (this._forceSelecting && !value)
47600
- return;
47601
- this.selectedGuiNodes.forEach(function (control) {
47602
- control.isHitTestVisible = value;
47603
- });
47832
+ WorkbenchComponent.prototype.copyToClipboard = function (copyFn) {
47833
+ var controlList = [];
47834
+ for (var _i = 0, _a = this.selectedGuiNodes; _i < _a.length; _i++) {
47835
+ var control = _a[_i];
47836
+ var obj = {};
47837
+ control.serialize(obj);
47838
+ controlList.push(obj);
47839
+ }
47840
+ copyFn(JSON.stringify({
47841
+ GUIClipboard: true,
47842
+ controls: controlList
47843
+ }));
47604
47844
  };
47605
- WorkbenchComponent.prototype.copyToClipboard = function () {
47606
- var _this = this;
47607
- this._clipboard = [];
47608
- if (this._selectAll) {
47609
- var index_2 = 0;
47610
- this.nodes.forEach(function (node) {
47611
- if (index_2++) {
47612
- //skip the first node, the background
47613
- _this._clipboard.push(node);
47845
+ WorkbenchComponent.prototype.cutToClipboard = function (copyFn) {
47846
+ this.copyToClipboard(copyFn);
47847
+ this._deleteSelectedNodes();
47848
+ };
47849
+ WorkbenchComponent.prototype.pasteFromClipboard = function (clipboardContents) {
47850
+ try {
47851
+ var parsed = JSON.parse(clipboardContents);
47852
+ if (parsed.GUIClipboard) {
47853
+ var newSelection = [];
47854
+ for (var _i = 0, _a = parsed.controls; _i < _a.length; _i++) {
47855
+ var control = _a[_i];
47856
+ newSelection.push(this.appendBlock(_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].Parse(control, this.props.globalState.guiTexture)));
47614
47857
  }
47615
- });
47858
+ this.props.globalState.setSelection(newSelection);
47859
+ return true;
47860
+ }
47616
47861
  }
47617
- else {
47618
- this._clipboard = this.selectedGuiNodes;
47862
+ catch (_b) {
47863
+ // don't need an error message
47619
47864
  }
47620
- };
47621
- WorkbenchComponent.prototype.pasteFromClipboard = function () {
47622
- var _this = this;
47623
- this._clipboard.forEach(function (control) {
47624
- _this.CopyGUIControl(control);
47625
- });
47865
+ _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Logger"].Warn("Paste attempted, but clipboard content was invalid.");
47866
+ return false;
47626
47867
  };
47627
47868
  WorkbenchComponent.prototype.CopyGUIControl = function (original) {
47628
47869
  var _a, _b;
@@ -47640,25 +47881,24 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47640
47881
  else {
47641
47882
  (_b = original.parent) === null || _b === void 0 ? void 0 : _b.addControl(newControl);
47642
47883
  }
47643
- var index_3 = 1;
47884
+ var index_1 = 1;
47644
47885
  while (this.props.globalState.guiTexture.getDescendants(false).filter(
47645
47886
  //search if there are any copies
47646
- function (control) { return control.name === "".concat(newControl.name, " Copy ").concat(index_3); }).length) {
47647
- index_3++;
47887
+ function (control) { return control.name === "".concat(newControl.name, " Copy ").concat(index_1); }).length) {
47888
+ index_1++;
47648
47889
  }
47649
- newControl.name = "".concat(newControl.name, " Copy ").concat(index_3);
47650
- this.props.globalState.onSelectionChangedObservable.notifyObservers(newControl);
47890
+ newControl.name = "".concat(newControl.name, " Copy ").concat(index_1);
47891
+ this.props.globalState.select(newControl);
47651
47892
  }
47652
47893
  };
47653
47894
  WorkbenchComponent.prototype.selectAllGUI = function (node) {
47654
47895
  var _this = this;
47655
- this.globalState.onSelectionChangedObservable.notifyObservers(node);
47896
+ this.globalState.select(node);
47656
47897
  if (node instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
47657
47898
  node.children.forEach(function (child) {
47658
47899
  _this.selectAllGUI(child);
47659
47900
  });
47660
47901
  }
47661
- this._selectAll = true;
47662
47902
  };
47663
47903
  WorkbenchComponent.prototype.componentWillUnmount = function () {
47664
47904
  this.props.globalState.hostDocument.removeEventListener("keyup", this.keyEvent);
@@ -47686,7 +47926,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47686
47926
  WorkbenchComponent.prototype.loadFromJson = function (serializationObject) {
47687
47927
  var _a;
47688
47928
  this.removeEditorTransformation();
47689
- this.globalState.onSelectionChangedObservable.notifyObservers(null);
47929
+ this.props.globalState.setSelection([]);
47690
47930
  if (this.props.globalState.liveGuiTexture) {
47691
47931
  (_a = this.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.parseContent(serializationObject, true);
47692
47932
  this.synchronizeLiveGUI();
@@ -47705,7 +47945,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47705
47945
  switch (_b.label) {
47706
47946
  case 0:
47707
47947
  this.removeEditorTransformation();
47708
- this.globalState.onSelectionChangedObservable.notifyObservers(null);
47948
+ this.props.globalState.setSelection([]);
47709
47949
  if (!this.props.globalState.liveGuiTexture) return [3 /*break*/, 2];
47710
47950
  return [4 /*yield*/, ((_a = this.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.parseFromSnippetAsync(snippetId, true))];
47711
47951
  case 1:
@@ -47725,7 +47965,6 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47725
47965
  alert("Unable to load your GUI");
47726
47966
  });
47727
47967
  }
47728
- this.globalState.onSelectionChangedObservable.notifyObservers(null);
47729
47968
  return [2 /*return*/];
47730
47969
  }
47731
47970
  });
@@ -47734,33 +47973,18 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47734
47973
  WorkbenchComponent.prototype.loadToEditor = function () {
47735
47974
  var _this = this;
47736
47975
  this.globalState.guiTexture.rootContainer.children.forEach(function (guiElement) {
47737
- if (guiElement.name === "Art-Board-Background" && guiElement.typeName === "Rectangle") {
47738
- // this.artBoardBackground = guiElement as Rectangle;
47739
- return;
47740
- }
47741
47976
  _this.createNewGuiNode(guiElement);
47742
47977
  });
47743
- if (this.props.globalState.guiTexture.getChildren()[0].children.length) {
47744
- // this.props.globalState.guiTexture.getChildren()[0].children.unshift(this.props.globalState.workbench.artBoardBackground);
47745
- }
47746
- else {
47747
- // this.props.globalState.guiTexture.getChildren()[0].children.push(this.props.globalState.workbench.artBoardBackground);
47748
- }
47749
47978
  this._isOverGUINode = [];
47979
+ this.globalState.setSelection([]);
47980
+ this.globalState.onFitToWindowObservable.notifyObservers();
47750
47981
  };
47751
- WorkbenchComponent.prototype.changeSelectionHighlight = function (value) {
47752
- var _this = this;
47753
- this._selectedGuiNodes.forEach(function (node) {
47754
- if (_this._outlines) {
47755
- node.isHighlighted = true;
47756
- node.highlightLineWidth = 5;
47757
- }
47758
- else {
47759
- node.isHighlighted = value && node.typeName === "Grid";
47760
- node.highlightLineWidth = 5;
47761
- }
47762
- });
47763
- this.updateHitTestForSelection(value);
47982
+ WorkbenchComponent.prototype.updateNodeOutlines = function () {
47983
+ for (var _i = 0, _a = this._trueRootContainer.getDescendants(); _i < _a.length; _i++) {
47984
+ var guiControl = _a[_i];
47985
+ guiControl.isHighlighted = guiControl.getClassName() === "Grid" && (this.props.globalState.outlines || this.props.globalState.selectedControls.includes(guiControl));
47986
+ guiControl.highlightLineWidth = 5;
47987
+ }
47764
47988
  };
47765
47989
  WorkbenchComponent.prototype.findNodeFromGuiElement = function (guiControl) {
47766
47990
  return this.nodes.filter(function (n) { return n === guiControl; })[0];
@@ -47868,7 +48092,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47868
48092
  }
47869
48093
  else if (dropLocationControl.parent) {
47870
48094
  //dropping inside the controls parent container
47871
- if (dropLocationControl.parent.typeName != "Grid") {
48095
+ if (dropLocationControl.parent.typeName !== "Grid") {
47872
48096
  draggedControlParent.removeControl(draggedControl);
47873
48097
  var index = dropLocationControl.parent.children.indexOf(dropLocationControl);
47874
48098
  var reversed = dropLocationControl.parent.typeName === "StackPanel" || dropLocationControl.parent.typeName === "VirtualKeyboard";
@@ -47895,10 +48119,10 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47895
48119
  }
47896
48120
  }
47897
48121
  else {
47898
- //starting at index 1 because of object "Art-Board-Background" must be at index 0
47899
48122
  draggedControlParent.removeControl(draggedControl);
47900
- draggedControlParent.children.splice(1, 0, draggedControl);
47901
- draggedControl.parent = draggedControlParent;
48123
+ this.trueRootContainer.addControl(draggedControl);
48124
+ this.trueRootContainer.children.pop();
48125
+ this.trueRootContainer.children.splice(0, 0, draggedControl);
47902
48126
  }
47903
48127
  }
47904
48128
  }
@@ -47942,11 +48166,10 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47942
48166
  return index;
47943
48167
  };
47944
48168
  WorkbenchComponent.prototype.isSelected = function (value, guiNode) {
47945
- this.globalState.onSelectionChangedObservable.notifyObservers(guiNode);
48169
+ this.globalState.select(guiNode);
47946
48170
  };
47947
48171
  WorkbenchComponent.prototype._onMove = function (guiControl, evt, startPos, ignorClick) {
47948
48172
  if (ignorClick === void 0) { ignorClick = false; }
47949
- this._liveGuiTextureRerender = false;
47950
48173
  var newX = evt.x - startPos.x;
47951
48174
  var newY = evt.y - startPos.y;
47952
48175
  if (this._setConstraintDirection) {
@@ -47975,42 +48198,11 @@ var WorkbenchComponent = /** @class */ (function (_super) {
47975
48198
  guiControl.topInPixels += newY;
47976
48199
  //convert to percentage
47977
48200
  if (this._responsive) {
47978
- this.convertToPercentage(guiControl, false);
48201
+ _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__["CoordinateHelper"].convertToPercentage(guiControl, ["left", "top"]);
47979
48202
  }
47980
48203
  this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
47981
48204
  return true;
47982
48205
  };
47983
- WorkbenchComponent.prototype.convertToPercentage = function (guiControl, includeScale) {
47984
- var ratioX = 1; //this._textureMesh.scaling.x;
47985
- var ratioY = 1; //this._textureMesh.scaling.z;
47986
- if (guiControl.parent) {
47987
- if (guiControl.parent.typeName === "Grid") {
47988
- var cellInfo = guiControl.parent.getChildCellInfo(guiControl);
47989
- var cell = guiControl.parent.cells[cellInfo];
47990
- ratioX = cell.widthInPixels;
47991
- ratioY = cell.heightInPixels;
47992
- }
47993
- else if (guiControl.parent.typeName === "Rectangle" || guiControl.parent.typeName === "Button") {
47994
- var thickness = guiControl.parent.thickness * 2;
47995
- ratioX = guiControl.parent._currentMeasure.width - thickness;
47996
- ratioY = guiControl.parent._currentMeasure.height - thickness;
47997
- }
47998
- else {
47999
- ratioX = guiControl.parent._currentMeasure.width;
48000
- ratioY = guiControl.parent._currentMeasure.height;
48001
- }
48002
- }
48003
- var left = (guiControl.leftInPixels * 100) / ratioX;
48004
- var top = (guiControl.topInPixels * 100) / ratioY;
48005
- guiControl.left = "".concat(left.toFixed(2), "%");
48006
- guiControl.top = "".concat(top.toFixed(2), "%");
48007
- if (includeScale) {
48008
- var width = (guiControl.widthInPixels * 100) / ratioX;
48009
- var height = (guiControl.heightInPixels * 100) / ratioY;
48010
- guiControl.width = "".concat(width.toFixed(2), "%");
48011
- guiControl.height = "".concat(height.toFixed(2), "%");
48012
- }
48013
- };
48014
48206
  WorkbenchComponent.prototype.onMove = function (evt) {
48015
48207
  var _this = this;
48016
48208
  var pos = this.getScaledPointerPosition();
@@ -48040,7 +48232,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48040
48232
  (_a = this._rootContainer.current) === null || _a === void 0 ? void 0 : _a.setPointerCapture(evt.pointerId);
48041
48233
  if (this._isOverGUINode.length === 0 && !evt.button) {
48042
48234
  if (this._forceSelecting) {
48043
- this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
48235
+ this.props.globalState.setSelection([]);
48044
48236
  }
48045
48237
  return;
48046
48238
  }
@@ -48103,6 +48295,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48103
48295
  });
48104
48296
  this.globalState.onPropertyChangedObservable.add(function (ev) {
48105
48297
  ev.object.markAsDirty(false);
48298
+ _this.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
48106
48299
  });
48107
48300
  // Every time the original ADT re-renders, we must also re-render, so that layout information is computed correctly
48108
48301
  // also, every time *we* re-render (due to a change in the GUI), we must re-render the original ADT
@@ -48140,7 +48333,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48140
48333
  WorkbenchComponent.prototype.synchronizeLiveGUI = function () {
48141
48334
  var _this = this;
48142
48335
  if (this.globalState.liveGuiTexture) {
48143
- this.globalState.guiTexture._rootContainer.getDescendants().filter(function (desc) { return desc.name !== "Art-Board-Background"; }).forEach(function (desc) { return desc.dispose(); });
48336
+ this._trueRootContainer.getDescendants().forEach(function (desc) { return desc.dispose(); });
48144
48337
  this.globalState.liveGuiTexture.rootContainer.getDescendants(true).forEach(function (desc) {
48145
48338
  var _a;
48146
48339
  (_a = _this.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(desc);
@@ -48195,7 +48388,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48195
48388
  // if we click in the scene and we don't hit any controls, deselect all
48196
48389
  _this._scene.onAfterRenderObservable.addOnce(function () {
48197
48390
  if (!_this._anyControlClicked) {
48198
- _this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
48391
+ _this.props.globalState.setSelection([]);
48199
48392
  }
48200
48393
  _this._anyControlClicked = false;
48201
48394
  });
@@ -48204,7 +48397,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48204
48397
  (_c = this._rootContainer.current) === null || _c === void 0 ? void 0 : _c.addEventListener("pointerup", function (event) {
48205
48398
  _this._panning = false;
48206
48399
  removeObservers();
48207
- _this.props.globalState.guiGizmo.onUp();
48400
+ _this.props.globalState.onPointerUpObservable.notifyObservers(event);
48208
48401
  });
48209
48402
  scene.onKeyboardObservable.add(function (k, e) {
48210
48403
  switch (k.event.key) {
@@ -48225,12 +48418,23 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48225
48418
  break;
48226
48419
  case "g": //outlines
48227
48420
  case "G":
48228
- _this.globalState.onOutlinesObservable.notifyObservers();
48421
+ _this.globalState.outlines = !_this.globalState.outlines;
48229
48422
  break;
48230
48423
  case "f": //fit to window
48231
48424
  case "F":
48232
48425
  _this.globalState.onFitToWindowObservable.notifyObservers();
48233
48426
  break;
48427
+ case "ArrowUp": // move up
48428
+ _this.moveControls(false, k.event.shiftKey ? -ARROW_KEY_MOVEMENT_LARGE : -ARROW_KEY_MOVEMENT_SMALL);
48429
+ break;
48430
+ case "ArrowDown": // move down
48431
+ _this.moveControls(false, k.event.shiftKey ? ARROW_KEY_MOVEMENT_LARGE : ARROW_KEY_MOVEMENT_SMALL);
48432
+ break;
48433
+ case "ArrowLeft": // move left
48434
+ _this.moveControls(true, k.event.shiftKey ? -ARROW_KEY_MOVEMENT_LARGE : -ARROW_KEY_MOVEMENT_SMALL);
48435
+ break;
48436
+ case "ArrowRight": // move right
48437
+ _this.moveControls(true, k.event.shiftKey ? ARROW_KEY_MOVEMENT_LARGE : ARROW_KEY_MOVEMENT_SMALL);
48234
48438
  default:
48235
48439
  break;
48236
48440
  }
@@ -48266,6 +48470,35 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48266
48470
  this.props.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
48267
48471
  this.props.globalState.onGizmoUpdateRequireObservable.notifyObservers();
48268
48472
  };
48473
+ // Move the selected controls. Can be either on horizontal (leftInPixels) or
48474
+ // vertical (topInPixels) direction
48475
+ WorkbenchComponent.prototype.moveControls = function (moveHorizontal, amount) {
48476
+ for (var _i = 0, _a = this.props.globalState.workbench.selectedGuiNodes; _i < _a.length; _i++) {
48477
+ var selectedControl = _a[_i];
48478
+ if (moveHorizontal) { // move horizontal
48479
+ var prevValue = selectedControl.leftInPixels;
48480
+ selectedControl.leftInPixels += amount;
48481
+ this.props.globalState.onPropertyChangedObservable.notifyObservers({
48482
+ object: selectedControl,
48483
+ property: "leftInPixels",
48484
+ value: selectedControl.leftInPixels,
48485
+ initialValue: prevValue
48486
+ });
48487
+ this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
48488
+ }
48489
+ else { // move vertical
48490
+ var prevValue = selectedControl.topInPixels;
48491
+ selectedControl.topInPixels += amount;
48492
+ this.props.globalState.onPropertyChangedObservable.notifyObservers({
48493
+ object: selectedControl,
48494
+ property: "topInPixels",
48495
+ value: selectedControl.topInPixels,
48496
+ initialValue: prevValue
48497
+ });
48498
+ this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
48499
+ }
48500
+ }
48501
+ };
48269
48502
  //Get the wheel delta
48270
48503
  WorkbenchComponent.prototype.zoomWheel = function (event) {
48271
48504
  event.preventDefault();
@@ -48300,12 +48533,10 @@ var WorkbenchComponent = /** @class */ (function (_super) {
48300
48533
  if (_this.props.globalState.guiTexture) {
48301
48534
  _this.onMove(evt);
48302
48535
  }
48303
- if (_this.props.globalState.guiGizmo) {
48304
- _this.props.globalState.guiGizmo.onMove(evt);
48305
- }
48536
+ _this.props.globalState.onPointerMoveObservable.notifyObservers(evt);
48306
48537
  }, onPointerDown: function (evt) { return _this.onDown(evt); }, onPointerUp: function (evt) {
48307
48538
  _this.onUp(evt);
48308
- _this.props.globalState.guiGizmo.onUp(evt);
48539
+ _this.props.globalState.onPointerUpObservable.notifyObservers(evt);
48309
48540
  }, ref: this._rootContainer }));
48310
48541
  };
48311
48542
  return WorkbenchComponent;
@@ -48355,10 +48586,12 @@ module.exports = content.locals || {};
48355
48586
  __webpack_require__.r(__webpack_exports__);
48356
48587
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DragOverLocation", function() { return DragOverLocation; });
48357
48588
  /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GlobalState", function() { return GlobalState; });
48358
- /* harmony import */ var _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @babylonjs/core/Misc/observable */ "@babylonjs/core/Misc/observable");
48359
- /* harmony import */ var _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
48360
- /* harmony import */ var _sharedUiComponents_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./sharedUiComponents/tabs/propertyGrids/lockObject */ "./sharedUiComponents/tabs/propertyGrids/lockObject.ts");
48361
- /* harmony import */ var _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./diagram/coordinateHelper */ "./diagram/coordinateHelper.tsx");
48589
+ /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
48590
+ /* harmony import */ var _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babylonjs/core/Misc/observable */ "@babylonjs/core/Misc/observable");
48591
+ /* harmony import */ var _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__);
48592
+ /* harmony import */ var _sharedUiComponents_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./sharedUiComponents/tabs/propertyGrids/lockObject */ "./sharedUiComponents/tabs/propertyGrids/lockObject.ts");
48593
+ /* harmony import */ var _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./diagram/coordinateHelper */ "./diagram/coordinateHelper.tsx");
48594
+
48362
48595
 
48363
48596
 
48364
48597
 
@@ -48373,51 +48606,91 @@ var DragOverLocation;
48373
48606
  })(DragOverLocation || (DragOverLocation = {}));
48374
48607
  var GlobalState = /** @class */ (function () {
48375
48608
  function GlobalState() {
48376
- this.onSelectionChangedObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48377
- this.onResizeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48378
- this.onBuiltObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48379
- this.onResetRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48380
- this.onUpdateRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48381
- this.onLogRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48382
- this.onErrorMessageDialogRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48383
- this.onIsLoadingChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48384
- this.onSelectionBoxMoved = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48385
- this.onNewSceneObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48386
- this.onGuiNodeRemovalObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48387
- this.onPopupClosedObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48609
+ this.selectedControls = [];
48610
+ this.onSelectionChangedObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48611
+ this.onResizeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48612
+ this.onBuiltObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48613
+ this.onResetRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48614
+ this.onUpdateRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48615
+ this.onLogRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48616
+ this.onErrorMessageDialogRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48617
+ this.onIsLoadingChanged = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48618
+ this.onSelectionBoxMoved = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48619
+ this.onNewSceneObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48620
+ this.onGuiNodeRemovalObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48621
+ this.onPopupClosedObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48622
+ this._outlines = false;
48623
+ this.isMultiSelecting = false;
48624
+ this.onOutlineChangedObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48388
48625
  this.blockKeyboardEvents = false;
48389
- this.onPropertyChangedObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48390
- this.onZoomObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48391
- this.onFitToWindowObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48392
- this.onPanObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48393
- this.onSelectionButtonObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48394
- this.onMoveObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48395
- this.onLoadObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48396
- this.onSaveObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48397
- this.onSnippetLoadObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48398
- this.onSnippetSaveObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48399
- this.onOutlinesObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48400
- this.onResponsiveChangeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48401
- this.onParentingChangeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48402
- this.onPropertyGridUpdateRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48403
- this.onDraggingEndObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48404
- this.onDraggingStartObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48405
- this.onWindowResizeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
48406
- this.onGizmoUpdateRequireObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
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"]();
48626
+ this.onPropertyChangedObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48627
+ this.onZoomObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48628
+ this.onFitToWindowObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48629
+ this.onPanObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48630
+ this.onSelectionButtonObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48631
+ this.onLoadObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48632
+ this.onSaveObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48633
+ this.onSnippetLoadObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48634
+ this.onSnippetSaveObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48635
+ this.onResponsiveChangeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48636
+ this.onParentingChangeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48637
+ this.onDropObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48638
+ this.onPropertyGridUpdateRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48639
+ this.onDraggingEndObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48640
+ this.onDraggingStartObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48641
+ this.onWindowResizeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48642
+ this.onGizmoUpdateRequireObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48643
+ this.onArtBoardUpdateRequiredObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48644
+ this.onBackgroundColorChangeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48645
+ this.onPointerMoveObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48646
+ this.onPointerUpObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48409
48647
  this.draggedControl = null;
48648
+ this.onCopyObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48649
+ this.onCutObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48650
+ this.onPasteObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Observable"]();
48410
48651
  this.isSaving = false;
48411
- this.lockObject = new _sharedUiComponents_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_1__["LockObject"]();
48412
- this.controlCamera = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["DataStorage"].ReadBoolean("ControlCamera", true);
48652
+ this.lockObject = new _sharedUiComponents_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_2__["LockObject"]();
48653
+ this.controlCamera = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["DataStorage"].ReadBoolean("ControlCamera", true);
48413
48654
  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);
48655
+ var r = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["DataStorage"].ReadNumber("BackgroundColorR", defaultBrightness);
48656
+ var g = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["DataStorage"].ReadNumber("BackgroundColorG", defaultBrightness);
48657
+ var b = _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["DataStorage"].ReadNumber("BackgroundColorB", defaultBrightness);
48658
+ this.backgroundColor = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["Color3"](r, g, b);
48418
48659
  this.onBackgroundColorChangeObservable.notifyObservers();
48419
- _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_2__["CoordinateHelper"].globalState = this;
48660
+ _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_3__["CoordinateHelper"].globalState = this;
48420
48661
  }
48662
+ /** adds copy, cut and paste listeners to the host window */
48663
+ GlobalState.prototype.registerEventListeners = function () {
48664
+ var _this = this;
48665
+ this.hostDocument.addEventListener("copy", function (event) {
48666
+ var target = event.target;
48667
+ if (!target.isContentEditable && target.tagName !== "input" && target.tagName !== "textarea") {
48668
+ _this.onCopyObservable.notifyObservers(function (content) { var _a; return (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.setData("text/plain", content); });
48669
+ event.preventDefault();
48670
+ }
48671
+ });
48672
+ this.hostDocument.addEventListener("cut", function (event) {
48673
+ var target = event.target;
48674
+ if (!target.isContentEditable && target.tagName !== "input" && target.tagName !== "textarea") {
48675
+ _this.onCutObservable.notifyObservers(function (content) { var _a; return (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.setData("text/plain", content); });
48676
+ event.preventDefault();
48677
+ }
48678
+ });
48679
+ this.hostDocument.addEventListener("paste", function (event) {
48680
+ var _a;
48681
+ var target = event.target;
48682
+ if (!target.isContentEditable && target.tagName !== "input" && target.tagName !== "textarea") {
48683
+ _this.onPasteObservable.notifyObservers(((_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("text")) || "");
48684
+ event.preventDefault();
48685
+ }
48686
+ });
48687
+ this.hostDocument.addEventListener("keydown", function (evt) { return _this._updateKeys(evt); });
48688
+ this.hostDocument.addEventListener("keyup", function (evt) { return _this._updateKeys(evt); });
48689
+ this.hostDocument.addEventListener("keypress", function (evt) { return _this._updateKeys(evt); });
48690
+ };
48691
+ GlobalState.prototype._updateKeys = function (event) {
48692
+ this.isMultiSelecting = event.ctrlKey;
48693
+ };
48421
48694
  Object.defineProperty(GlobalState.prototype, "backgroundColor", {
48422
48695
  get: function () {
48423
48696
  return this._backgroundColor;
@@ -48425,13 +48698,49 @@ var GlobalState = /** @class */ (function () {
48425
48698
  set: function (value) {
48426
48699
  this._backgroundColor = value;
48427
48700
  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);
48701
+ _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["DataStorage"].WriteNumber("BackgroundColorR", value.r);
48702
+ _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["DataStorage"].WriteNumber("BackgroundColorG", value.g);
48703
+ _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__["DataStorage"].WriteNumber("BackgroundColorB", value.b);
48431
48704
  },
48432
48705
  enumerable: false,
48433
48706
  configurable: true
48434
48707
  });
48708
+ Object.defineProperty(GlobalState.prototype, "outlines", {
48709
+ get: function () {
48710
+ return this._outlines;
48711
+ },
48712
+ set: function (value) {
48713
+ this._outlines = value;
48714
+ this.onOutlineChangedObservable.notifyObservers();
48715
+ },
48716
+ enumerable: false,
48717
+ configurable: true
48718
+ });
48719
+ GlobalState.prototype.select = function (control) {
48720
+ if (this.isMultiSelecting && this.isMultiSelectable(control)) {
48721
+ var index = this.selectedControls.indexOf(control);
48722
+ if (index === -1) {
48723
+ this.setSelection(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spreadArray"])(Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spreadArray"])([], this.selectedControls, true), [control], false));
48724
+ }
48725
+ else {
48726
+ this.setSelection(this.selectedControls.filter(function (node) { return node !== control; }));
48727
+ }
48728
+ }
48729
+ else {
48730
+ this.setSelection([control]);
48731
+ }
48732
+ };
48733
+ GlobalState.prototype.setSelection = function (controls) {
48734
+ this.selectedControls = Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__spreadArray"])([], controls, true);
48735
+ this.onSelectionChangedObservable.notifyObservers();
48736
+ };
48737
+ GlobalState.prototype.isMultiSelectable = function (control) {
48738
+ if (this.selectedControls.length === 0)
48739
+ return true;
48740
+ if (this.selectedControls[0].parent === control.parent)
48741
+ return true;
48742
+ return false;
48743
+ };
48435
48744
  return GlobalState;
48436
48745
  }());
48437
48746
 
@@ -48508,6 +48817,7 @@ var GUIEditor = /** @class */ (function () {
48508
48817
  globalState.customSave = options.customSave;
48509
48818
  globalState.customLoad = options.customLoad;
48510
48819
  globalState.hostWindow = hostElement.ownerDocument.defaultView;
48820
+ globalState.registerEventListeners();
48511
48821
  graphEditor = react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_workbenchEditor__WEBPACK_IMPORTED_MODULE_4__["WorkbenchEditor"], {
48512
48822
  globalState: globalState,
48513
48823
  });
@@ -48692,7 +49002,6 @@ var GUINodeTools = /** @class */ (function () {
48692
49002
  return element;
48693
49003
  case "Grid":
48694
49004
  element = new _babylonjs_gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__["Grid"]("Grid");
48695
- element.isHighlighted = true;
48696
49005
  element.addColumnDefinition(1.0, false);
48697
49006
  element.addRowDefinition(1.0, false);
48698
49007
  element.isPointerBlocker = true;
@@ -48702,7 +49011,6 @@ var GUINodeTools = /** @class */ (function () {
48702
49011
  return element;
48703
49012
  case "StackPanel":
48704
49013
  element = new _babylonjs_gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__["StackPanel"]("StackPanel");
48705
- element.isHighlighted = true;
48706
49014
  element.width = "100%";
48707
49015
  element.height = "100%";
48708
49016
  return element;
@@ -48741,7 +49049,7 @@ var GUINodeTools = /** @class */ (function () {
48741
49049
  return element;
48742
49050
  }
48743
49051
  };
48744
- GUINodeTools.ImageControlDefaultUrl = "https://playground.babylonjs.com/textures/grass.png";
49052
+ GUINodeTools.ImageControlDefaultUrl = "./imageControlDefault.jpg";
48745
49053
  return GUINodeTools;
48746
49054
  }());
48747
49055
 
@@ -49302,6 +49610,17 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
49302
49610
 
49303
49611
  /***/ }),
49304
49612
 
49613
+ /***/ "./sharedUiComponents/imgs/animationSheetIcon.svg":
49614
+ /*!********************************************************!*\
49615
+ !*** ./sharedUiComponents/imgs/animationSheetIcon.svg ***!
49616
+ \********************************************************/
49617
+ /*! no static exports found */
49618
+ /***/ (function(module, exports) {
49619
+
49620
+ module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M8.56,8.56h8.85A1.61,1.61,0,0,1,19,10.17V15.8a1.61,1.61,0,0,1-1.61,1.61H8.56A1.61,1.61,0,0,1,7,15.8V10.17A1.61,1.61,0,0,1,8.56,8.56Zm8.85,1.21H8.56a.4.4,0,0,0-.4.4V15.8a.4.4,0,0,0,.4.41h8.85a.41.41,0,0,0,.41-.41V10.17A.4.4,0,0,0,17.41,9.77ZM9,18.22a1.62,1.62,0,0,0,1.56,1.21h7.25A3.22,3.22,0,0,0,21,16.21v-4a1.62,1.62,0,0,0-1.21-1.56v5.59a2,2,0,0,1-2,2Zm2,2a1.61,1.61,0,0,0,1.56,1.21h5.83a4.63,4.63,0,0,0,4.63-4.63V14.2a1.6,1.6,0,0,0-1.21-1.56v4.17a3.42,3.42,0,0,1-3.42,3.42Z'/%3E%3C/svg%3E"
49621
+
49622
+ /***/ }),
49623
+
49305
49624
  /***/ "./sharedUiComponents/imgs/autoResizeIcon.svg":
49306
49625
  /*!****************************************************!*\
49307
49626
  !*** ./sharedUiComponents/imgs/autoResizeIcon.svg ***!
@@ -49945,7 +50264,9 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
49945
50264
  initialValue: this.state.isSelected,
49946
50265
  });
49947
50266
  }
49948
- this.props.target[this.props.propertyName] = !this.state.isSelected;
50267
+ if (this.props.target && this.props.propertyName) {
50268
+ this.props.target[this.props.propertyName] = !this.state.isSelected;
50269
+ }
49949
50270
  }
49950
50271
  if (this.props.onValueChanged) {
49951
50272
  this.props.onValueChanged();
@@ -50218,7 +50539,7 @@ var ColorLineComponent = /** @class */ (function (_super) {
50218
50539
  _this.setColorFromString(newValue);
50219
50540
  }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
50220
50541
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "copy hoverIcon", onClick: function () { return _this.copyToClipboard(); }, title: "Copy to clipboard" },
50221
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: copyIcon, alt: "" })),
50542
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: copyIcon, alt: "Copy" })),
50222
50543
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "expand hoverIcon", onClick: function () { return _this.switchExpandState(); }, title: "Expand" }, chevron)),
50223
50544
  this.state.isExpanded && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "secondLine" },
50224
50545
  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); } }),
@@ -50532,7 +50853,9 @@ var FloatLineComponent = /** @class */ (function (_super) {
50532
50853
  if (_this.props.onEnter) {
50533
50854
  _this.props.onEnter(_this._store);
50534
50855
  }
50535
- }, placeholder: placeholder, onFocus: function () { return _this.lock(); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } })))),
50856
+ }, placeholder: placeholder, onFocus: function () { return _this.lock(); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } })),
50857
+ this.props.unit && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("button", { className: this.props.unitLocked ? "unit disabled" : "unit", onClick: function () { if (_this.props.onUnitClicked && !_this.props.unitLocked)
50858
+ _this.props.onUnitClicked(); } }, this.props.unit))),
50536
50859
  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()); } }))));
50537
50860
  };
50538
50861
  return FloatLineComponent;
@@ -50540,6 +50863,59 @@ var FloatLineComponent = /** @class */ (function (_super) {
50540
50863
 
50541
50864
 
50542
50865
 
50866
+ /***/ }),
50867
+
50868
+ /***/ "./sharedUiComponents/lines/inputArrowsComponent.tsx":
50869
+ /*!***********************************************************!*\
50870
+ !*** ./sharedUiComponents/lines/inputArrowsComponent.tsx ***!
50871
+ \***********************************************************/
50872
+ /*! exports provided: InputArrowsComponent */
50873
+ /***/ (function(module, __webpack_exports__, __webpack_require__) {
50874
+
50875
+ "use strict";
50876
+ __webpack_require__.r(__webpack_exports__);
50877
+ /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InputArrowsComponent", function() { return InputArrowsComponent; });
50878
+ /* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
50879
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
50880
+ /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
50881
+
50882
+
50883
+ var upArrowIcon = __webpack_require__(/*! ./valueUpArrowIcon.svg */ "./sharedUiComponents/lines/valueUpArrowIcon.svg");
50884
+ var downArrowIcon = __webpack_require__(/*! ./valueDownArrowIcon.svg */ "./sharedUiComponents/lines/valueDownArrowIcon.svg");
50885
+ var InputArrowsComponent = /** @class */ (function (_super) {
50886
+ Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(InputArrowsComponent, _super);
50887
+ function InputArrowsComponent() {
50888
+ var _this = _super !== null && _super.apply(this, arguments) || this;
50889
+ _this._arrowsRef = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
50890
+ _this._drag = function (event) {
50891
+ _this.props.incrementValue(event.movementY);
50892
+ };
50893
+ _this._releaseListener = function () {
50894
+ var _a, _b;
50895
+ _this.props.setDragging(false);
50896
+ (_a = _this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.exitPointerLock();
50897
+ window.removeEventListener("pointerup", _this._releaseListener);
50898
+ (_b = _this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.removeEventListener("mousemove", _this._drag);
50899
+ };
50900
+ return _this;
50901
+ }
50902
+ InputArrowsComponent.prototype.render = function () {
50903
+ var _this = this;
50904
+ return react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "arrows", ref: this._arrowsRef, onPointerDown: function (event) {
50905
+ var _a, _b;
50906
+ _this.props.setDragging(true);
50907
+ (_a = _this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.requestPointerLock();
50908
+ window.addEventListener("pointerup", _this._releaseListener);
50909
+ (_b = _this._arrowsRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.addEventListener("mousemove", _this._drag);
50910
+ }, onDragStart: function (evt) { return evt.preventDefault(); } },
50911
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { className: "upArrowIcon", src: upArrowIcon, alt: "Increase Value" }),
50912
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { className: "downArrowIcon", src: downArrowIcon, alt: "Increase Value" }));
50913
+ };
50914
+ return InputArrowsComponent;
50915
+ }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
50916
+
50917
+
50918
+
50543
50919
  /***/ }),
50544
50920
 
50545
50921
  /***/ "./sharedUiComponents/lines/numericInputComponent.tsx":
@@ -50892,7 +51268,7 @@ var SliderLineComponent = /** @class */ (function (_super) {
50892
51268
  }, onChange: function (evt) {
50893
51269
  var changed = _this.prepareDataToRead(_this.state.value);
50894
51270
  _this.onChange(changed);
50895
- } }),
51271
+ }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
50896
51272
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "slider" },
50897
51273
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { className: "range", type: "range", step: this.props.step, min: this.prepareDataToRead(this.props.minimum), max: this.prepareDataToRead(this.props.maximum), value: this.prepareDataToRead(this.state.value), onInput: function (evt) { return _this.onInput(evt.target.value); }, onChange: function (evt) { return _this.onChange(evt.target.value); } }))));
50898
51274
  };
@@ -50923,15 +51299,17 @@ var conflictingValuesPlaceholder = "—";
50923
51299
  * @param setter an optional setter function to override the default setter behavior
50924
51300
  * @returns a proxy object that can be passed as a target into the input
50925
51301
  */
50926
- function makeTargetsProxy(targets, onPropertyChangedObservable) {
51302
+ function makeTargetsProxy(targets, onPropertyChangedObservable, getProperty) {
51303
+ if (getProperty === void 0) { getProperty = function (target, property) { return target[property]; }; }
50927
51304
  return new Proxy({}, {
50928
51305
  get: function (_, name) {
51306
+ var property = name;
50929
51307
  if (targets.length === 0)
50930
51308
  return conflictingValuesPlaceholder;
50931
- var firstValue = targets[0][name];
51309
+ var firstValue = getProperty(targets[0], property);
50932
51310
  for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
50933
51311
  var target = targets_1[_i];
50934
- if (target[name] !== firstValue) {
51312
+ if (getProperty(target, property) !== firstValue) {
50935
51313
  return conflictingValuesPlaceholder;
50936
51314
  }
50937
51315
  }
@@ -50940,15 +51318,16 @@ function makeTargetsProxy(targets, onPropertyChangedObservable) {
50940
51318
  set: function (_, name, value) {
50941
51319
  if (value === "—")
50942
51320
  return true;
51321
+ var property = name;
50943
51322
  for (var _i = 0, targets_2 = targets; _i < targets_2.length; _i++) {
50944
51323
  var target = targets_2[_i];
50945
- var initialValue = target[name];
50946
- target[name] = value;
51324
+ var initialValue = target[property];
51325
+ target[property] = value;
50947
51326
  if (onPropertyChangedObservable) {
50948
51327
  onPropertyChangedObservable.notifyObservers({
50949
51328
  object: target,
50950
51329
  property: name,
50951
- value: target[name],
51330
+ value: target[property],
50952
51331
  initialValue: initialValue
50953
51332
  });
50954
51333
  }
@@ -50975,6 +51354,8 @@ __webpack_require__.r(__webpack_exports__);
50975
51354
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
50976
51355
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
50977
51356
  /* harmony import */ var _targetsProxy__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./targetsProxy */ "./sharedUiComponents/lines/targetsProxy.tsx");
51357
+ /* harmony import */ var _inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./inputArrowsComponent */ "./sharedUiComponents/lines/inputArrowsComponent.tsx");
51358
+
50978
51359
 
50979
51360
 
50980
51361
 
@@ -50983,7 +51364,10 @@ var TextInputLineComponent = /** @class */ (function (_super) {
50983
51364
  function TextInputLineComponent(props) {
50984
51365
  var _this = _super.call(this, props) || this;
50985
51366
  _this._localChange = false;
50986
- _this.state = { value: (_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "" };
51367
+ _this.state = {
51368
+ value: (_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "",
51369
+ dragging: false
51370
+ };
50987
51371
  return _this;
50988
51372
  }
50989
51373
  TextInputLineComponent.prototype.componentWillUnmount = function () {
@@ -50999,6 +51383,8 @@ var TextInputLineComponent = /** @class */ (function (_super) {
50999
51383
  nextState.value = newValue || "";
51000
51384
  return true;
51001
51385
  }
51386
+ if (nextState.dragging != this.state.dragging)
51387
+ return true;
51002
51388
  return false;
51003
51389
  };
51004
51390
  TextInputLineComponent.prototype.raiseOnPropertyChanged = function (newValue, previousValue) {
@@ -51037,18 +51423,45 @@ var TextInputLineComponent = /** @class */ (function (_super) {
51037
51423
  }
51038
51424
  this.raiseOnPropertyChanged(value, store);
51039
51425
  };
51426
+ TextInputLineComponent.prototype.incrementValue = function (amount) {
51427
+ if (this.props.step) {
51428
+ amount *= this.props.step;
51429
+ }
51430
+ if (this.props.arrowsIncrement) {
51431
+ this.props.arrowsIncrement(amount);
51432
+ return;
51433
+ }
51434
+ var currentValue = parseFloat(this.state.value);
51435
+ this.updateValue((currentValue + amount).toFixed(2));
51436
+ };
51437
+ TextInputLineComponent.prototype.onKeyDown = function (event) {
51438
+ if (this.props.arrows) {
51439
+ if (event.key === "ArrowUp") {
51440
+ this.incrementValue(-1);
51441
+ event.preventDefault();
51442
+ }
51443
+ if (event.key === "ArrowDown") {
51444
+ this.incrementValue(1);
51445
+ event.preventDefault();
51446
+ }
51447
+ }
51448
+ };
51040
51449
  TextInputLineComponent.prototype.render = function () {
51041
51450
  var _this = this;
51042
51451
  var value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__["conflictingValuesPlaceholder"] ? "" : this.state.value;
51043
51452
  var placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__["conflictingValuesPlaceholder"] ? _targetsProxy__WEBPACK_IMPORTED_MODULE_2__["conflictingValuesPlaceholder"] : "";
51044
- return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "textInputLine" },
51453
+ return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine" },
51045
51454
  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" }),
51046
51455
  (!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)),
51047
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value" + (this.props.noUnderline === true ? " noUnderline" : "") },
51456
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value".concat(this.props.noUnderline === true ? " noUnderline" : "").concat(this.props.arrows ? " hasArrows" : "").concat(this.state.dragging ? " dragging" : "") },
51048
51457
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: value, onBlur: function () {
51049
51458
  _this.props.lockObject.lock = false;
51050
51459
  _this.updateValue((_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "");
51051
- }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); }, placeholder: placeholder }))));
51460
+ }, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); }, onKeyDown: function (evt) { return _this.onKeyDown(evt); }, placeholder: placeholder }),
51461
+ this.props.arrows &&
51462
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__["InputArrowsComponent"], { incrementValue: function (amount) { return _this.incrementValue(amount); }, setDragging: function (dragging) { return _this.setState({ dragging: dragging }); } })),
51463
+ this.props.unit !== undefined && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("button", { className: this.props.unitLocked ? "unit disabled" : "unit", onClick: function () { if (_this.props.onUnitClicked && !_this.props.unitLocked)
51464
+ _this.props.onUnitClicked(_this.props.unit || ""); } }, this.props.unit)));
51052
51465
  };
51053
51466
  return TextInputLineComponent;
51054
51467
  }(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
@@ -51109,6 +51522,28 @@ var TextLineComponent = /** @class */ (function (_super) {
51109
51522
 
51110
51523
 
51111
51524
 
51525
+ /***/ }),
51526
+
51527
+ /***/ "./sharedUiComponents/lines/valueDownArrowIcon.svg":
51528
+ /*!*********************************************************!*\
51529
+ !*** ./sharedUiComponents/lines/valueDownArrowIcon.svg ***!
51530
+ \*********************************************************/
51531
+ /*! no static exports found */
51532
+ /***/ (function(module, exports) {
51533
+
51534
+ module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M4.09,5.55a.61.61,0,0,1,.85,0l2,2V1.79a.6.6,0,1,1,1.2,0V7.52l2-2a.61.61,0,0,1,.85,0,.6.6,0,0,1,0,.84l-3,3a.6.6,0,0,1-.84,0l-3-3A.6.6,0,0,1,4.09,5.55Z'/%3E%3C/svg%3E"
51535
+
51536
+ /***/ }),
51537
+
51538
+ /***/ "./sharedUiComponents/lines/valueUpArrowIcon.svg":
51539
+ /*!*******************************************************!*\
51540
+ !*** ./sharedUiComponents/lines/valueUpArrowIcon.svg ***!
51541
+ \*******************************************************/
51542
+ /*! no static exports found */
51543
+ /***/ (function(module, exports) {
51544
+
51545
+ module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M4.09,9.45a.6.6,0,0,1,0-.84l3-3a.6.6,0,0,1,.84,0l3,3a.6.6,0,0,1,0,.84.61.61,0,0,1-.85,0l-2-2v5.73a.6.6,0,0,1-1.2,0V7.48l-2,2A.61.61,0,0,1,4.09,9.45Z'/%3E%3C/svg%3E"
51546
+
51112
51547
  /***/ }),
51113
51548
 
51114
51549
  /***/ "./sharedUiComponents/stringTools.ts":
@@ -51253,16 +51688,19 @@ __webpack_require__.r(__webpack_exports__);
51253
51688
  var Tools = /** @class */ (function () {
51254
51689
  function Tools() {
51255
51690
  }
51256
- Tools.LookForItem = function (item, selectedEntity, firstIteration) {
51691
+ Tools.LookForItems = function (item, selectedEntities, firstIteration) {
51257
51692
  if (firstIteration === void 0) { firstIteration = true; }
51258
- if (!firstIteration && item === selectedEntity) {
51693
+ if (selectedEntities.length == 0) {
51694
+ return false;
51695
+ }
51696
+ if (!firstIteration && selectedEntities.includes(item)) {
51259
51697
  return true;
51260
51698
  }
51261
51699
  var children = item.getChildren ? item.getChildren() : item.children;
51262
51700
  if (children) {
51263
51701
  for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
51264
51702
  var child = children_1[_i];
51265
- if (Tools.LookForItem(child, selectedEntity, false)) {
51703
+ if (Tools.LookForItems(child, selectedEntities, false)) {
51266
51704
  return true;
51267
51705
  }
51268
51706
  }
@@ -51352,7 +51790,7 @@ __webpack_require__.r(__webpack_exports__);
51352
51790
  /* harmony import */ var _sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./sharedComponents/messageDialog */ "./sharedComponents/messageDialog.tsx");
51353
51791
  /* harmony import */ var _components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/sceneExplorer/sceneExplorerComponent */ "./components/sceneExplorer/sceneExplorerComponent.tsx");
51354
51792
  /* harmony import */ var _components_commandBarComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/commandBarComponent */ "./components/commandBarComponent.tsx");
51355
- /* harmony import */ var _diagram_guiGizmo__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./diagram/guiGizmo */ "./diagram/guiGizmo.tsx");
51793
+ /* harmony import */ var _diagram_guiGizmoWrapper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./diagram/guiGizmoWrapper */ "./diagram/guiGizmoWrapper.tsx");
51356
51794
  /* harmony import */ var _diagram_artBoard__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./diagram/artBoard */ "./diagram/artBoard.tsx");
51357
51795
 
51358
51796
 
@@ -51486,6 +51924,12 @@ var WorkbenchEditor = /** @class */ (function (_super) {
51486
51924
  }, false);
51487
51925
  _this.createItems();
51488
51926
  _this.props.globalState.onBackgroundColorChangeObservable.add(function () { return _this.forceUpdate(); });
51927
+ _this.props.globalState.onDropObservable.add(function () {
51928
+ if (_this._draggedItem != null) {
51929
+ _this.props.globalState.draggedControl = _this.onCreate(_this._draggedItem);
51930
+ }
51931
+ _this._draggedItem = null;
51932
+ });
51489
51933
  return _this;
51490
51934
  }
51491
51935
  WorkbenchEditor.prototype.componentDidMount = function () {
@@ -51517,14 +51961,15 @@ var WorkbenchEditor = /** @class */ (function (_super) {
51517
51961
  }
51518
51962
  var deltaX = evt.clientX - this._startX;
51519
51963
  var rootElement = evt.currentTarget.ownerDocument.getElementById("gui-editor-workbench-root");
51964
+ var maxWidth = this.props.globalState.hostWindow.innerWidth - this._toolBarIconSize - 8;
51520
51965
  if (forLeft) {
51521
51966
  this._leftWidth += deltaX;
51522
- this._leftWidth = Math.max(150, Math.min(400, this._leftWidth));
51967
+ this._leftWidth = Math.max(150, Math.min(maxWidth - this._rightWidth, this._leftWidth));
51523
51968
  _babylonjs_core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__["DataStorage"].WriteNumber("LeftWidth", this._leftWidth);
51524
51969
  }
51525
51970
  else {
51526
51971
  this._rightWidth -= deltaX;
51527
- this._rightWidth = Math.max(250, Math.min(500, this._rightWidth));
51972
+ this._rightWidth = Math.max(250, Math.min(maxWidth - this._leftWidth, this._rightWidth));
51528
51973
  _babylonjs_core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__["DataStorage"].WriteNumber("RightWidth", this._rightWidth);
51529
51974
  }
51530
51975
  rootElement.style.gridTemplateColumns = this.buildColumnLayout();
@@ -51552,10 +51997,8 @@ var WorkbenchEditor = /** @class */ (function (_super) {
51552
51997
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__["SceneExplorerComponent"], { globalState: this.props.globalState, noExpand: true }),
51553
51998
  this.createToolbar(),
51554
51999
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "diagram-container", onDrop: function (event) {
51555
- if (_this._draggedItem != null) {
51556
- _this.onCreate(_this._draggedItem);
51557
- }
51558
- _this._draggedItem = null;
52000
+ event.preventDefault();
52001
+ _this.props.globalState.onDropObservable.notifyObservers();
51559
52002
  }, onDragOver: function (event) {
51560
52003
  event.preventDefault();
51561
52004
  }, style: {
@@ -51563,7 +52006,7 @@ var WorkbenchEditor = /** @class */ (function (_super) {
51563
52006
  } },
51564
52007
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_artBoard__WEBPACK_IMPORTED_MODULE_12__["ArtBoardComponent"], { globalState: this.props.globalState }),
51565
52008
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_workbench__WEBPACK_IMPORTED_MODULE_7__["WorkbenchComponent"], { ref: "workbenchCanvas", globalState: this.props.globalState }),
51566
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_guiGizmo__WEBPACK_IMPORTED_MODULE_11__["GuiGizmoComponent"], { globalState: this.props.globalState })),
52009
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_guiGizmoWrapper__WEBPACK_IMPORTED_MODULE_11__["GizmoWrapper"], { globalState: this.props.globalState })),
51567
52010
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "rightGrab", onPointerDown: function (evt) { return _this.onPointerDown(evt); }, onPointerUp: function (evt) { return _this.onPointerUp(evt); }, onPointerMove: function (evt) { return _this.resizeColumns(evt, false); } }),
51568
52011
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "right-panel" },
51569
52012
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_2__["PropertyTabComponent"], { globalState: this.props.globalState })),
@@ -51706,9 +52149,10 @@ var WorkbenchEditor = /** @class */ (function (_super) {
51706
52149
  WorkbenchEditor.prototype.onCreate = function (value) {
51707
52150
  var guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_6__["GUINodeTools"].CreateControlFromString(value);
51708
52151
  var newGuiNode = this.props.globalState.workbench.appendBlock(guiElement);
51709
- this.props.globalState.onSelectionChangedObservable.notifyObservers(newGuiNode);
51710
- this.props.globalState.guiGizmo.onUp();
52152
+ this.props.globalState.select(newGuiNode);
52153
+ this.props.globalState.onPointerUpObservable.notifyObservers(null);
51711
52154
  this.forceUpdate();
52155
+ return newGuiNode;
51712
52156
  };
51713
52157
  WorkbenchEditor.prototype.createToolbar = function () {
51714
52158
  var _this = this;