@babylonjs/gui-editor 5.0.0-alpha.63 → 5.0.0-alpha.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/babylon.guiEditor.max.js +782 -158
- package/babylon.guiEditor.max.js.map +1 -1
- package/babylon.guiEditor.module.d.ts +102 -12
- package/package.json +2 -2
package/babylon.guiEditor.max.js
CHANGED
|
@@ -10076,7 +10076,7 @@ module.exports = exports;
|
|
|
10076
10076
|
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ "../../../../node_modules/css-loader/dist/runtime/api.js");
|
|
10077
10077
|
exports = ___CSS_LOADER_API_IMPORT___(false);
|
|
10078
10078
|
// Module
|
|
10079
|
-
exports.push([module.i, ":root {\n --backgroundGrey: #aaaaaa;\n --spacingHeight: 30px; }\n\nhr.ge {\n border: 1px solid #d0cece; }\n\n#ge-propertyTab {\n user-select: none;\n color: black;\n background: #e2e2e2;\n font-family: \"acumin-pro-condensed\"; }\n #ge-propertyTab #header {\n height: 30px;\n font-size: 16px;\n color: white;\n background: white;\n grid-row: 1;\n text-align: center;\n display: grid;\n grid-template-columns: 30px 1fr;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n #ge-propertyTab #header #logo {\n position: relative;\n background: white;\n grid-column: 1;\n width: 32px;\n height: 32px;\n left: 0;\n display: flex;\n align-self: center;\n justify-self: center; }\n #ge-propertyTab #header #title {\n background: white;\n color: black;\n grid-column: 2;\n display: grid;\n align-items: center;\n text-align: center; }\n #ge-propertyTab .range {\n -webkit-appearance: none;\n width: 120px;\n height: 2px;\n background: black;\n border-radius: 5px;\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s; }\n #ge-propertyTab .range:hover {\n opacity: 1; }\n #ge-propertyTab .range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #e2e2e2;\n border: solid;\n border-width: thin;\n cursor: pointer; }\n #ge-propertyTab .range::-moz-range-thumb {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: black;\n cursor: pointer; }\n #ge-propertyTab input[type=\"color\"] {\n -webkit-appearance: none;\n border: 1px solid rgba(255, 255, 255, 0.5);\n padding: 0;\n width: 30px;\n height: 20px; }\n #ge-propertyTab input[type=\"color\"]::-webkit-color-swatch-wrapper {\n padding: 0; }\n #ge-propertyTab input[type=\"color\"]::-webkit-color-swatch {\n border: none; }\n #ge-propertyTab .sliderLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: auto auto auto 1fr; }\n #ge-propertyTab .sliderLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .sliderLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .sliderLine .slider {\n grid-column: 4;\n grid-row: 1;\n margin-right: 5px;\n width: 90%;\n display: flex;\n align-items: center;\n padding-left: 5px; }\n #ge-propertyTab .sliderLine .floatLine {\n grid-column: 3;\n padding-left: 15px; }\n #ge-propertyTab .sliderLine .floatLine .label {\n grid-column: 1;\n display: none;\n align-items: center; }\n #ge-propertyTab .sliderLine .floatLine .short {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .sliderLine .floatLine .short input {\n width: 40px;\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .sliderLine .floatLine .short input::-webkit-outer-spin-button,\n #ge-propertyTab .sliderLine .floatLine .short input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n #ge-propertyTab .sliderLine .floatLine .short input[type=number] {\n -moz-appearance: textfield; }\n #ge-propertyTab .ge-divider {\n display: grid;\n grid-template-columns: auto auto auto auto auto auto; }\n #ge-propertyTab .ge-divider-short {\n display: grid;\n grid-template-columns: 1fr 1fr; }\n #ge-propertyTab .ge-grid-divider {\n display: grid;\n grid-template-columns: 150px 1fr auto; }\n #ge-propertyTab .ge-grid-divider .textLine {\n grid-column: auto; }\n #ge-propertyTab .ge-grid-button-divider {\n display: grid;\n grid-template-columns: 60px 60px 60px 60px; }\n #ge-propertyTab .ge-grid-remove {\n display: grid;\n background-color: #c2c2c2;\n margin-bottom: 5px;\n filter: invert(1); }\n #ge-propertyTab .ge-grid-edit {\n display: grid;\n background-color: #878787;\n margin-bottom: 5px;\n filter: invert(1); }\n #ge-propertyTab .ge-grid {\n display: grid;\n margin-bottom: 5px; }\n #ge-propertyTab .textInputLine {\n user-select: none;\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 2fr 1fr; }\n #ge-propertyTab .textInputLine .label {\n grid-column: 2;\n padding-left: 5px;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .textInputLine img {\n width: 30px; }\n #ge-propertyTab .textInputLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textInputLine .value {\n display: flex;\n align-items: center;\n padding-left: 15px;\n grid-column: 3;\n background: transparent; }\n #ge-propertyTab .textInputLine .value input {\n width: calc(100% - 5px);\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .textInputLine .noUnderline input {\n border-bottom: transparent; }\n #ge-propertyTab .textInputArea {\n padding-left: 5px;\n height: 100%;\n display: grid;\n grid-template-columns: 1fr 120px; }\n #ge-propertyTab .textInputArea .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textInputArea .value {\n display: flex;\n align-items: center;\n grid-column: 2; }\n #ge-propertyTab .textInputArea .value textarea {\n width: calc(150% - 5px);\n margin-left: -50%;\n height: 40px; }\n #ge-propertyTab .paneContainer {\n margin-top: 3px;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%; }\n #ge-propertyTab .paneContainer .paneList {\n border-left: 3px solid transparent; }\n #ge-propertyTab .paneContainer:hover .paneList {\n border-left: 3px solid rgba(51, 122, 183, 0.8); }\n #ge-propertyTab .paneContainer:hover .paneContainer-content .header .title {\n border-left: 3px solid #337ab7; }\n #ge-propertyTab .paneContainer .paneContainer-highlight-border {\n grid-row: 1;\n grid-column: 1;\n opacity: 1;\n border: 3px solid red;\n transition: opacity 250ms;\n pointer-events: none; }\n #ge-propertyTab .paneContainer .paneContainer-highlight-border.transparent {\n opacity: 0; }\n #ge-propertyTab .paneContainer .paneContainer-content {\n grid-row: 1;\n grid-column: 1; }\n #ge-propertyTab .paneContainer .paneContainer-content .header {\n display: grid;\n grid-template-columns: 1fr auto;\n background: #cccccc;\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n padding-right: 5px;\n cursor: pointer; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .title {\n border-left: 3px solid transparent;\n padding-left: 5px;\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .collapse {\n grid-column: 2;\n display: flex;\n align-items: center;\n justify-items: center;\n transform-origin: center; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .collapse.closed {\n transform: rotate(180deg); }\n #ge-propertyTab .paneContainer .paneContainer-content .paneList > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n #ge-propertyTab .paneContainer .paneContainer-content .fragment > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n #ge-propertyTab .color-picker {\n height: 150px;\n width: 15px; }\n #ge-propertyTab .color-picker .color-rect {\n height: 15px;\n border: 1px black solid;\n cursor: pointer; }\n #ge-propertyTab .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px; }\n #ge-propertyTab .color-picker .color-picker-float {\n z-index: 2;\n position: absolute; }\n #ge-propertyTab .gradient-step {\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 20px 30px 40px auto 20px 30px;\n padding-top: 5px;\n padding-left: 5px;\n padding-bottom: 5px; }\n #ge-propertyTab .gradient-step .step {\n grid-row: 1;\n grid-column: 1; }\n #ge-propertyTab .gradient-step .color {\n grid-row: 1;\n grid-column: 2;\n cursor: pointer; }\n #ge-propertyTab .gradient-step .step-value {\n margin-left: 5px;\n grid-row: 1;\n grid-column: 3;\n text-align: right;\n margin-right: 5px; }\n #ge-propertyTab .gradient-step .step-slider {\n grid-row: 1;\n grid-column: 4;\n display: grid;\n justify-content: stretch;\n align-content: center;\n margin-right: -5px;\n padding-left: 12px; }\n #ge-propertyTab .gradient-step .step-slider input {\n width: 90%; }\n #ge-propertyTab .gradient-step .gradient-copy {\n grid-row: 1;\n grid-column: 5;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .gradient-step .gradient-copy .img {\n height: 20px;\n width: 20px; }\n #ge-propertyTab .gradient-step .gradient-copy .img:hover {\n cursor: pointer; }\n #ge-propertyTab .gradient-step .gradient-delete {\n grid-row: 1;\n grid-column: 6;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .gradient-step .gradient-delete .img {\n height: 20px;\n width: 20px; }\n #ge-propertyTab .gradient-step .gradient-delete .img:hover {\n cursor: pointer; }\n #ge-propertyTab .command-button {\n cursor: pointer;\n width: auto; }\n #ge-propertyTab .command-button .command-label {\n display: none; }\n #ge-propertyTab .command-button .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n color: white;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .command-button:hover {\n background-color: white; }\n #ge-propertyTab .command-button .active {\n transform-origin: center;\n background-color: white; }\n #ge-propertyTab .command-button img.active {\n background-color: white; }\n #ge-propertyTab .command-button-alt {\n cursor: pointer;\n width: 40px;\n margin-left: 5px;\n margin-right: 5px;\n background-color: white; }\n #ge-propertyTab .command-button-alt .command-label {\n display: none; }\n #ge-propertyTab .command-button-alt .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .command-button-alt:hover {\n background-color: #c2c2c2;\n filter: invert(1); }\n #ge-propertyTab .command-button-alt-disabled {\n cursor: pointer;\n pointer-events: none;\n width: 40px;\n margin-left: 5px;\n margin-right: 5px;\n background-color: white; }\n #ge-propertyTab .command-button-alt-disabled .command-label {\n display: none; }\n #ge-propertyTab .command-button-alt-disabled .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .command-button-alt-disabled img {\n filter: invert(1); }\n #ge-propertyTab .command-button-alt-active {\n cursor: pointer;\n pointer-events: none;\n width: 40px;\n margin-left: 5px;\n margin-right: 5px;\n background-color: #c2c2c2;\n filter: invert(1); }\n #ge-propertyTab .command-button-alt-active .command-label {\n display: none; }\n #ge-propertyTab .command-button-alt-active .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .floatLine {\n user-select: none;\n padding-left: 5px;\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid;\n grid-template-columns: auto auto 2fr 1fr; }\n #ge-propertyTab .floatLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .floatLine img {\n width: 30px; }\n #ge-propertyTab .floatLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .floatLine .value {\n display: flex;\n padding-left: 15px;\n align-items: center;\n grid-column: 3;\n background: transparent; }\n #ge-propertyTab .floatLine .value input {\n width: calc(100% - 5px);\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .floatLine .short {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #ge-propertyTab .floatLine .short input {\n width: 27px; }\n #ge-propertyTab .floatLine .short input::-webkit-outer-spin-button,\n #ge-propertyTab .floatLine .short input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n #ge-propertyTab .floatLine .short input[type=number] {\n -moz-appearance: textfield; }\n #ge-propertyTab .vector3Line {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid; }\n #ge-propertyTab .vector3Line .firstLine {\n display: grid;\n grid-template-columns: 1fr auto 20px;\n height: var(--spacingHeight); }\n #ge-propertyTab .vector3Line .firstLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .vector3Line .firstLine .vector {\n grid-column: 2;\n display: flex;\n align-items: center;\n text-align: right;\n opacity: 0.8; }\n #ge-propertyTab .vector3Line .firstLine .expand {\n grid-column: 3;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-propertyTab .vector3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #ge-propertyTab .vector3Line .secondLine .no-right-margin {\n margin-right: 0; }\n #ge-propertyTab .vector3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #ge-propertyTab .vector3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #ge-propertyTab .vector3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #ge-propertyTab .buttonLine {\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid;\n align-items: center;\n justify-items: stretch;\n padding-bottom: 5px; }\n #ge-propertyTab .buttonLine input[type=\"file\"] {\n display: none; }\n #ge-propertyTab .buttonLine .file-upload {\n background: var(--backgroundGrey);\n border: 1px solid #424242;\n margin: 5px 10px;\n color: white;\n padding: 4px 5px;\n padding-top: 0px;\n opacity: 0.9;\n cursor: pointer;\n text-align: center;\n border-radius: 4px; }\n #ge-propertyTab .buttonLine .file-upload:hover {\n opacity: 1.0; }\n #ge-propertyTab .buttonLine .file-upload:active {\n transform: scale(0.98);\n transform-origin: 0.5 0.5; }\n #ge-propertyTab .buttonLine button {\n background: var(--backgroundGrey);\n border: 1px solid #424242;\n margin: 5px 10px 5px 10px;\n color: white;\n padding: 4px 5px;\n opacity: 0.9;\n border-radius: 4px; }\n #ge-propertyTab .buttonLine button:hover {\n opacity: 1.0; }\n #ge-propertyTab .buttonLine button:active {\n background: #282828; }\n #ge-propertyTab .buttonLine button:focus {\n border: 1px solid #424242;\n outline: 0px; }\n #ge-propertyTab .numeric {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: 1fr 120px auto; }\n #ge-propertyTab .numeric .numeric-label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .numeric .number {\n display: flex;\n align-items: center;\n grid-column: 2;\n height: 10px; }\n #ge-propertyTab .numeric .number .input {\n width: calc(100% - 5px);\n height: 10px; }\n #ge-propertyTab .checkBoxLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 1fr; }\n #ge-propertyTab .checkBoxLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 100px;\n margin-left: 15px; }\n #ge-propertyTab .checkBoxLine img {\n width: 30px; }\n #ge-propertyTab .checkBoxLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .checkBoxLine .checkBox {\n grid-column: 3;\n display: flex;\n align-items: center;\n padding-left: 15px; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl {\n position: relative;\n display: block;\n height: 14px;\n width: 34px;\n margin-right: 5px;\n border-radius: 100px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl:after {\n position: absolute;\n left: 3px;\n top: 1px;\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 100px;\n background: #e2e2e2;\n box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);\n content: '';\n transition: all 0.15s ease;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl:active:after {\n transform: scale(1.15, 0.85); }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label {\n background: transparent; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label:after {\n left: 20px;\n background: black;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label.disabled {\n background: black;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label.disabled:after {\n left: 20px;\n background: #555555;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx ~ label.disabled {\n background: #555555;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .hidden {\n display: none; }\n #ge-propertyTab .listLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto 1fr auto; }\n #ge-propertyTab .listLine .label {\n grid-column: 2;\n display: none;\n align-items: center; }\n #ge-propertyTab .listLine img {\n width: 30px; }\n #ge-propertyTab .listLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .listLine .options {\n grid-column: 2;\n padding-left: 15px;\n display: flex;\n align-items: center;\n margin-right: 5px; }\n #ge-propertyTab .listLine .options select {\n width: 120px;\n height: 25px;\n border: transparent;\n border-radius: 4px; }\n #ge-propertyTab .color3Line {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid; }\n #ge-propertyTab .color3Line .firstLine {\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 1fr; }\n #ge-propertyTab .color3Line .firstLine .label {\n grid-column: 2;\n padding-left: 5px;\n display: none;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .color3Line .firstLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .color3Line .firstLine .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", ""]);
|
|
10079
|
+
exports.push([module.i, ":root {\n --backgroundGrey: #aaaaaa;\n --spacingHeight: 30px; }\n\nhr.ge {\n border: 1px solid #d0cece; }\n\n#ge-propertyTab {\n user-select: none;\n color: black;\n background: #e2e2e2;\n font-family: \"acumin-pro-condensed\"; }\n #ge-propertyTab #header {\n height: 30px;\n font-size: 16px;\n color: white;\n background: white;\n grid-row: 1;\n text-align: center;\n display: grid;\n grid-template-columns: 30px 1fr;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none; }\n #ge-propertyTab #header #logo {\n position: relative;\n background: white;\n grid-column: 1;\n width: 32px;\n height: 32px;\n left: 0;\n display: flex;\n align-self: center;\n justify-self: center; }\n #ge-propertyTab #header #title {\n background: white;\n color: black;\n grid-column: 2;\n display: grid;\n align-items: center;\n text-align: center; }\n #ge-propertyTab .range {\n -webkit-appearance: none;\n width: 120px;\n height: 2px;\n background: black;\n border-radius: 5px;\n outline: none;\n opacity: 0.7;\n -webkit-transition: .2s;\n transition: opacity .2s; }\n #ge-propertyTab .range:hover {\n opacity: 1; }\n #ge-propertyTab .range::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #e2e2e2;\n border: solid;\n border-width: thin;\n cursor: pointer; }\n #ge-propertyTab .range::-moz-range-thumb {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: black;\n cursor: pointer; }\n #ge-propertyTab input[type=\"color\"] {\n -webkit-appearance: none;\n border: 1px solid rgba(255, 255, 255, 0.5);\n padding: 0;\n width: 30px;\n height: 20px; }\n #ge-propertyTab input[type=\"color\"]::-webkit-color-swatch-wrapper {\n padding: 0; }\n #ge-propertyTab input[type=\"color\"]::-webkit-color-swatch {\n border: none; }\n #ge-propertyTab .sliderLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: auto auto auto 1fr; }\n #ge-propertyTab .sliderLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .sliderLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .sliderLine .slider {\n grid-column: 4;\n grid-row: 1;\n margin-right: 5px;\n width: 90%;\n display: flex;\n align-items: center;\n padding-left: 5px; }\n #ge-propertyTab .sliderLine .floatLine {\n grid-column: 3;\n padding-left: 15px; }\n #ge-propertyTab .sliderLine .floatLine .label {\n grid-column: 1;\n display: none;\n align-items: center; }\n #ge-propertyTab .sliderLine .floatLine .short {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .sliderLine .floatLine .short input {\n width: 40px;\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .sliderLine .floatLine .short input::-webkit-outer-spin-button,\n #ge-propertyTab .sliderLine .floatLine .short input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n #ge-propertyTab .sliderLine .floatLine .short input[type=number] {\n -moz-appearance: textfield; }\n #ge-propertyTab .ge-divider {\n display: grid;\n grid-template-columns: auto auto auto auto auto auto; }\n #ge-propertyTab .ge-divider-short {\n display: grid;\n grid-template-columns: 1fr 1fr; }\n #ge-propertyTab .ge-grid-divider {\n display: grid;\n grid-template-columns: 150px 1fr auto; }\n #ge-propertyTab .ge-grid-divider .textLine {\n grid-column: auto; }\n #ge-propertyTab .ge-grid-button-divider {\n display: grid;\n grid-template-columns: 60px 60px 60px 60px; }\n #ge-propertyTab .ge-grid-remove {\n display: grid;\n background-color: #c2c2c2;\n margin-bottom: 5px;\n filter: invert(1); }\n #ge-propertyTab .ge-grid-edit {\n display: grid;\n background-color: #878787;\n margin-bottom: 5px;\n filter: invert(1); }\n #ge-propertyTab .ge-grid {\n display: grid;\n margin-bottom: 5px; }\n #ge-propertyTab .textInputLine {\n user-select: none;\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 2fr 1fr; }\n #ge-propertyTab .textInputLine .label {\n grid-column: 2;\n padding-left: 5px;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .textInputLine img {\n width: 30px; }\n #ge-propertyTab .textInputLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textInputLine .value {\n display: flex;\n align-items: center;\n padding-left: 15px;\n grid-column: 3;\n background: transparent; }\n #ge-propertyTab .textInputLine .value input {\n width: calc(100% - 5px);\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .textInputLine .noUnderline input {\n border-bottom: transparent; }\n #ge-propertyTab .textInputArea {\n padding-left: 5px;\n height: 100%;\n display: grid;\n grid-template-columns: 1fr 120px; }\n #ge-propertyTab .textInputArea .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textInputArea .value {\n display: flex;\n align-items: center;\n grid-column: 2; }\n #ge-propertyTab .textInputArea .value textarea {\n width: calc(150% - 5px);\n margin-left: -50%;\n height: 40px; }\n #ge-propertyTab .paneContainer {\n margin-top: 3px;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%; }\n #ge-propertyTab .paneContainer .paneList {\n border-left: 3px solid transparent; }\n #ge-propertyTab .paneContainer:hover .paneList {\n border-left: 3px solid rgba(51, 122, 183, 0.8); }\n #ge-propertyTab .paneContainer:hover .paneContainer-content .header .title {\n border-left: 3px solid #337ab7; }\n #ge-propertyTab .paneContainer .paneContainer-highlight-border {\n grid-row: 1;\n grid-column: 1;\n opacity: 1;\n border: 3px solid red;\n transition: opacity 250ms;\n pointer-events: none; }\n #ge-propertyTab .paneContainer .paneContainer-highlight-border.transparent {\n opacity: 0; }\n #ge-propertyTab .paneContainer .paneContainer-content {\n grid-row: 1;\n grid-column: 1; }\n #ge-propertyTab .paneContainer .paneContainer-content .header {\n display: grid;\n grid-template-columns: 1fr auto;\n background: #cccccc;\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n padding-right: 5px;\n cursor: pointer; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .title {\n border-left: 3px solid transparent;\n padding-left: 5px;\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .collapse {\n grid-column: 2;\n display: flex;\n align-items: center;\n justify-items: center;\n transform-origin: center; }\n #ge-propertyTab .paneContainer .paneContainer-content .header .collapse.closed {\n transform: rotate(180deg); }\n #ge-propertyTab .paneContainer .paneContainer-content .paneList > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n #ge-propertyTab .paneContainer .paneContainer-content .fragment > div:not(:last-child) {\n border-bottom: 0.5px solid rgba(255, 255, 255, 0.1); }\n #ge-propertyTab .color-picker {\n height: 150px;\n width: 15px; }\n #ge-propertyTab .color-picker .color-rect {\n height: 15px;\n border: 1px black solid;\n cursor: pointer; }\n #ge-propertyTab .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px; }\n #ge-propertyTab .color-picker .color-picker-float {\n z-index: 2;\n position: absolute; }\n #ge-propertyTab .gradient-step {\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 20px 30px 40px auto 20px 30px;\n padding-top: 5px;\n padding-left: 5px;\n padding-bottom: 5px; }\n #ge-propertyTab .gradient-step .step {\n grid-row: 1;\n grid-column: 1; }\n #ge-propertyTab .gradient-step .color {\n grid-row: 1;\n grid-column: 2;\n cursor: pointer; }\n #ge-propertyTab .gradient-step .step-value {\n margin-left: 5px;\n grid-row: 1;\n grid-column: 3;\n text-align: right;\n margin-right: 5px; }\n #ge-propertyTab .gradient-step .step-slider {\n grid-row: 1;\n grid-column: 4;\n display: grid;\n justify-content: stretch;\n align-content: center;\n margin-right: -5px;\n padding-left: 12px; }\n #ge-propertyTab .gradient-step .step-slider input {\n width: 90%; }\n #ge-propertyTab .gradient-step .gradient-copy {\n grid-row: 1;\n grid-column: 5;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .gradient-step .gradient-copy .img {\n height: 20px;\n width: 20px; }\n #ge-propertyTab .gradient-step .gradient-copy .img:hover {\n cursor: pointer; }\n #ge-propertyTab .gradient-step .gradient-delete {\n grid-row: 1;\n grid-column: 6;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .gradient-step .gradient-delete .img {\n height: 20px;\n width: 20px; }\n #ge-propertyTab .gradient-step .gradient-delete .img:hover {\n cursor: pointer; }\n #ge-propertyTab .command-button {\n cursor: pointer;\n width: auto; }\n #ge-propertyTab .command-button .command-label {\n display: none; }\n #ge-propertyTab .command-button .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n color: white;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .command-button:hover {\n background-color: white; }\n #ge-propertyTab .command-button .active {\n transform-origin: center;\n background-color: white; }\n #ge-propertyTab .command-button img.active {\n background-color: white; }\n #ge-propertyTab .command-button-alt {\n cursor: pointer;\n width: 40px;\n margin-left: 5px;\n margin-right: 5px;\n background-color: white; }\n #ge-propertyTab .command-button-alt .command-label {\n display: none; }\n #ge-propertyTab .command-button-alt .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .command-button-alt:hover {\n background-color: #c2c2c2;\n filter: invert(1); }\n #ge-propertyTab .command-button-alt-disabled {\n cursor: pointer;\n pointer-events: none;\n width: 40px;\n margin-left: 5px;\n margin-right: 5px;\n background-color: white; }\n #ge-propertyTab .command-button-alt-disabled .command-label {\n display: none; }\n #ge-propertyTab .command-button-alt-disabled .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .command-button-alt-disabled img {\n filter: invert(1); }\n #ge-propertyTab .command-button-alt-active {\n cursor: pointer;\n pointer-events: none;\n width: 40px;\n margin-left: 5px;\n margin-right: 5px;\n background-color: #c2c2c2;\n filter: invert(1); }\n #ge-propertyTab .command-button-alt-active .command-label {\n display: none; }\n #ge-propertyTab .command-button-alt-active .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n #ge-propertyTab .floatLine {\n user-select: none;\n padding-left: 5px;\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid;\n grid-template-columns: auto auto 2fr 1fr; }\n #ge-propertyTab .floatLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .floatLine img {\n width: 30px; }\n #ge-propertyTab .floatLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .floatLine .value {\n display: flex;\n padding-left: 15px;\n align-items: center;\n grid-column: 3;\n background: transparent; }\n #ge-propertyTab .floatLine .value input {\n width: calc(100% - 5px);\n background-color: transparent;\n outline-color: transparent;\n border-left: transparent;\n border-right: transparent;\n border-top: transparent;\n outline-width: 0px; }\n #ge-propertyTab .floatLine .short {\n grid-column: 2;\n display: flex;\n align-items: center; }\n #ge-propertyTab .floatLine .short input {\n width: 27px; }\n #ge-propertyTab .floatLine .short input::-webkit-outer-spin-button,\n #ge-propertyTab .floatLine .short input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n #ge-propertyTab .floatLine .short input[type=number] {\n -moz-appearance: textfield; }\n #ge-propertyTab .vector3Line {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid; }\n #ge-propertyTab .vector3Line .firstLine {\n display: grid;\n grid-template-columns: 1fr auto 20px;\n height: var(--spacingHeight); }\n #ge-propertyTab .vector3Line .firstLine .label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .vector3Line .firstLine .vector {\n grid-column: 2;\n display: flex;\n align-items: center;\n text-align: right;\n opacity: 0.8; }\n #ge-propertyTab .vector3Line .firstLine .expand {\n grid-column: 3;\n display: grid;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-propertyTab .vector3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #ge-propertyTab .vector3Line .secondLine .no-right-margin {\n margin-right: 0; }\n #ge-propertyTab .vector3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #ge-propertyTab .vector3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #ge-propertyTab .vector3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #ge-propertyTab .buttonLine {\n height: var(--spacingHeight);\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid;\n align-items: center;\n justify-items: stretch;\n padding-bottom: 5px; }\n #ge-propertyTab .buttonLine input[type=\"file\"] {\n display: none; }\n #ge-propertyTab .buttonLine .file-upload {\n background: var(--backgroundGrey);\n border: 1px solid #424242;\n margin: 5px 10px;\n color: white;\n padding: 4px 5px;\n padding-top: 0px;\n opacity: 0.9;\n cursor: pointer;\n text-align: center;\n border-radius: 4px; }\n #ge-propertyTab .buttonLine .file-upload:hover {\n opacity: 1.0; }\n #ge-propertyTab .buttonLine .file-upload:active {\n transform: scale(0.98);\n transform-origin: 0.5 0.5; }\n #ge-propertyTab .buttonLine button {\n background: var(--backgroundGrey);\n border: 1px solid #424242;\n margin: 5px 10px 5px 10px;\n color: white;\n padding: 4px 5px;\n opacity: 0.9;\n border-radius: 4px; }\n #ge-propertyTab .buttonLine button:hover {\n opacity: 1.0; }\n #ge-propertyTab .buttonLine button:active {\n background: #282828; }\n #ge-propertyTab .buttonLine button:focus {\n border: 1px solid #424242;\n outline: 0px; }\n #ge-propertyTab .numeric {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: 1fr 120px auto; }\n #ge-propertyTab .numeric .numeric-label {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .numeric .number {\n display: flex;\n align-items: center;\n grid-column: 2;\n height: 10px; }\n #ge-propertyTab .numeric .number .input {\n width: calc(100% - 5px);\n height: 10px; }\n #ge-propertyTab .checkBoxLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 1fr; }\n #ge-propertyTab .checkBoxLine .label {\n grid-column: 2;\n display: flex;\n align-items: center;\n min-width: 100px;\n margin-left: 15px; }\n #ge-propertyTab .checkBoxLine img {\n width: 30px; }\n #ge-propertyTab .checkBoxLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .checkBoxLine .checkBox {\n grid-column: 3;\n display: flex;\n align-items: center;\n padding-left: 15px; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl {\n position: relative;\n display: block;\n height: 14px;\n width: 34px;\n margin-right: 5px;\n border-radius: 100px;\n cursor: pointer;\n transition: all 0.3s ease;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl:after {\n position: absolute;\n left: 3px;\n top: 1px;\n display: block;\n width: 10px;\n height: 10px;\n border-radius: 100px;\n background: #e2e2e2;\n box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);\n content: '';\n transition: all 0.15s ease;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .lbl:active:after {\n transform: scale(1.15, 0.85); }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label {\n background: transparent; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label:after {\n left: 20px;\n background: black;\n border: solid;\n border-width: thin; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label.disabled {\n background: black;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx:checked ~ label.disabled:after {\n left: 20px;\n background: #555555;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .cbx ~ label.disabled {\n background: #555555;\n cursor: pointer; }\n #ge-propertyTab .checkBoxLine .checkBox .hidden {\n display: none; }\n #ge-propertyTab .listLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto 1fr auto; }\n #ge-propertyTab .listLine .label {\n grid-column: 2;\n display: none;\n align-items: center; }\n #ge-propertyTab .listLine img {\n width: 30px; }\n #ge-propertyTab .listLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .listLine .options {\n grid-column: 2;\n padding-left: 15px;\n display: flex;\n align-items: center;\n margin-right: 5px; }\n #ge-propertyTab .listLine .options select {\n width: 120px;\n height: 25px;\n border: transparent;\n border-radius: 4px; }\n #ge-propertyTab .color3Line {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n display: grid; }\n #ge-propertyTab .color3Line .firstLine {\n height: var(--spacingHeight);\n display: grid;\n grid-template-columns: auto auto 1fr; }\n #ge-propertyTab .color3Line .firstLine .label {\n grid-column: 2;\n padding-left: 5px;\n display: none;\n align-items: center;\n min-width: 15px; }\n #ge-propertyTab .color3Line .firstLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .color3Line .firstLine img {\n width: 30px;\n height: 30px; }\n #ge-propertyTab .color3Line .firstLine .textInputLine {\n grid-column: 3;\n padding-left: 0px; }\n #ge-propertyTab .color3Line .firstLine .color3 {\n grid-column: 2;\n margin-top: 6px;\n display: flex;\n align-items: center; }\n #ge-propertyTab .color3Line .firstLine .color3 input {\n margin-right: 5px; }\n #ge-propertyTab .color3Line .firstLine .copy {\n grid-column: 4;\n display: none;\n align-items: center;\n justify-items: center;\n cursor: pointer;\n color: black; }\n #ge-propertyTab .color3Line .firstLine .copy img {\n height: 100%;\n width: 20px; }\n #ge-propertyTab .color3Line .firstLine .expand {\n grid-column: 4;\n display: none;\n align-items: center;\n justify-items: center;\n cursor: pointer; }\n #ge-propertyTab .color3Line .firstLine .expand img {\n height: 100%;\n width: 20px; }\n #ge-propertyTab .color3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n #ge-propertyTab .color3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n #ge-propertyTab .color3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n #ge-propertyTab .color3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n #ge-propertyTab .textLine {\n padding-left: 5px;\n padding-bottom: 0px;\n padding-top: 0px;\n height: auto;\n display: grid;\n grid-template-columns: auto auto 2fr 1fr; }\n #ge-propertyTab .textLine .label {\n grid-column: 2;\n padding-left: 5px;\n padding-top: 4px;\n display: flex;\n align-items: left;\n min-width: 15px; }\n #ge-propertyTab .textLine img {\n width: 30px; }\n #ge-propertyTab .textLine .img {\n grid-column: 1;\n display: flex;\n align-items: center; }\n #ge-propertyTab .textLine .link-value {\n grid-column: 2;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: end;\n opacity: 0.8;\n margin: 5px;\n margin-top: 6px;\n max-width: 140px;\n text-decoration: underline;\n cursor: pointer; }\n #ge-propertyTab .textLine .value {\n display: none;\n grid-column: 3;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: end;\n opacity: 0.8;\n margin: 5px;\n margin-top: 6px;\n max-width: 200px;\n -webkit-user-select: text;\n -moz-user-select: text;\n -ms-user-select: text;\n user-select: text; }\n #ge-propertyTab .textLine .value.check {\n color: green; }\n #ge-propertyTab .textLine .value.uncheck {\n color: red; }\n", ""]);
|
|
10080
10080
|
// Exports
|
|
10081
10081
|
module.exports = exports;
|
|
10082
10082
|
|
|
@@ -10112,7 +10112,7 @@ module.exports = exports;
|
|
|
10112
10112
|
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "../../../../node_modules/css-loader/dist/runtime/api.js");
|
|
10113
10113
|
exports = ___CSS_LOADER_API_IMPORT___(false);
|
|
10114
10114
|
// Module
|
|
10115
|
-
exports.push([module.i, "#workbench-canvas {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font: 14px \"acumin-pro-condensed\";\n cursor: default;\n user-select: none;\n overflow: hidden;\n background-image: linear-gradient(to right, #4F4E4F 1px, transparent 1px), linear-gradient(to bottom, #4F4E4F 1px, transparent 1px); }\n #workbench-canvas #selection-container {\n pointer-events: none; }\n #workbench-canvas #selection-container .selection-box {\n z-index: 10;\n position: absolute;\n background: rgba(72, 72, 196, 0.5);\n border: blue solid 2px; }\n #workbench-canvas #workbench-container {\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n transform-origin: left top;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%; }\n #workbench-canvas #workbench-container #frame-container {\n overflow: visible;\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%; }\n #workbench-canvas #workbench-container .frame-box {\n position: absolute;\n background: rgba(72, 72, 72, 0.7);\n display: grid;\n grid-template-rows: 40px calc(100% - 40px);\n grid-template-columns: 100%;\n box-sizing: border-box; }\n #workbench-canvas #workbench-container .frame-box.collapsed {\n height: auto !important;\n width: 200px !important;\n z-index: 3; }\n #workbench-canvas #workbench-container .frame-box.collapsed .frame-box-header {\n font-size: 16px;\n grid-template-columns: calc(100% - 37px) 30px 7px; }\n #workbench-canvas #workbench-container .frame-box.collapsed .frame-box-header .frame-box-header-collapse {\n margin-top: -2px; }\n #workbench-canvas #workbench-container .frame-box.collapsed .frame-box-header .frame-box-header-close {\n display: none; }\n #workbench-canvas #workbench-container .frame-box.collapsed .frame-comments.has-comments .frame-comment-span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden; }\n #workbench-canvas #workbench-container .frame-box .frame-box-border {\n grid-row: 1 / span 2;\n grid-column: 1;\n width: 100%;\n height: 100%;\n border: transparent solid 4px;\n pointer-events: none;\n box-sizing: border-box; }\n #workbench-canvas #workbench-container .frame-box .frame-box-header {\n grid-row: 1;\n grid-column: 1;\n background: #484848;\n color: white;\n font-size: 24px;\n text-align: center;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: calc(100% - 74px) 30px 7px 30px 7px;\n align-content: center;\n overflow: hidden; }\n #workbench-canvas #workbench-container .frame-box .frame-box-header .frame-box-header-button {\n cursor: pointer;\n align-self: center;\n transform-origin: 50% 50%;\n transform: scale(1);\n stroke: transparent;\n fill: white;\n display: grid; }\n #workbench-canvas #workbench-container .frame-box .frame-box-header .frame-box-header-button.down {\n transform: scale(0.9); }\n #workbench-canvas #workbench-container .frame-box .frame-box-header .frame-box-header-collapse {\n grid-column: 2;\n grid-row: 1; }\n #workbench-canvas #workbench-container .frame-box .frame-box-header .frame-box-header-close {\n grid-column: 4;\n grid-row: 1; }\n #workbench-canvas #workbench-container .frame-box .frame-box-header .frame-box-header-title {\n grid-column: 1;\n grid-row: 1;\n display: grid;\n height: 100%;\n width: 100%;\n align-self: stretch;\n align-items: center;\n margin-top: -2px; }\n #workbench-canvas #workbench-container .frame-box .frame-comments.has-comments {\n display: grid;\n grid-row: 2;\n grid-column: 1;\n padding: 0 10px;\n font-style: italic;\n word-wrap: break-word; }\n #workbench-canvas #workbench-container .frame-box.selected .frame-box-border {\n border-color: white; }\n #workbench-canvas #workbench-container .frame-box .right-handle {\n grid-area: 1 / 2 / 3 / 2;\n width: 4px;\n background-color: transparent;\n cursor: ew-resize; }\n #workbench-canvas #workbench-container .frame-box .right-handle::after {\n content: \"\";\n width: 8px;\n position: absolute;\n top: 0;\n bottom: 0;\n margin-left: -4px;\n cursor: ew-resize; }\n #workbench-canvas #workbench-container .frame-box .right-handle.collapsed {\n cursor: pointer; }\n #workbench-canvas #workbench-container .frame-box .top-right-corner-handle {\n background-color: transparent;\n height: 4px;\n z-index: 21;\n cursor: ne-resize;\n width: 4px;\n margin-left: -6px; }\n #workbench-canvas #workbench-container .frame-box .top-right-corner-handle::after {\n background-color: transparent;\n cursor: ne-resize;\n margin-left: unset;\n top: -4px;\n height: 10px;\n width: 10px; }\n #workbench-canvas #workbench-container .frame-box .bottom-right-corner-handle {\n background-color: transparent;\n height: 0px;\n z-index: 21;\n cursor: nw-resize;\n grid-area: 4 / 2 / 4 / 2;\n margin-left: -2px; }\n #workbench-canvas #workbench-container .frame-box .bottom-right-corner-handle::after {\n background-color: transparent;\n height: 10px;\n cursor: nw-resize;\n top: unset;\n bottom: -4px;\n width: 10px; }\n #workbench-canvas #workbench-container .frame-box .left-handle {\n grid-area: 1 / 1 / 3 / 1;\n width: 4px;\n background-color: transparent;\n cursor: ew-resize; }\n #workbench-canvas #workbench-container .frame-box .left-handle::before {\n content: \"\";\n width: 8px;\n position: absolute;\n top: 0;\n bottom: 0;\n margin-left: -4px; }\n #workbench-canvas #workbench-container .frame-box .top-left-corner-handle {\n background-color: transparent;\n height: 4px;\n z-index: 21;\n cursor: nw-resize;\n width: 4px;\n margin-left: -4px; }\n #workbench-canvas #workbench-container .frame-box .top-left-corner-handle::before {\n background-color: transparent;\n cursor: nw-resize;\n margin-left: unset;\n top: -4px;\n height: 10px;\n width: 10px; }\n #workbench-canvas #workbench-container .frame-box .bottom-left-corner-handle {\n background-color: transparent;\n height: 0px;\n z-index: 21;\n cursor: sw-resize;\n grid-area: 4 / 1 / 4 / 1; }\n #workbench-canvas #workbench-container .frame-box .bottom-left-corner-handle::before {\n background-color: transparent;\n height: 10px;\n cursor: sw-resize;\n top: unset;\n bottom: -4px;\n width: 10px; }\n #workbench-canvas #workbench-container .frame-box .top-handle {\n grid-area: 1 / 1 / 1 / 1;\n background-color: transparent;\n height: 4px;\n cursor: ns-resize; }\n #workbench-canvas #workbench-container .frame-box .top-handle::before {\n content: \"\";\n width: 100%;\n position: absolute;\n top: -4px;\n bottom: 100%;\n right: 0;\n left: 0;\n margin-bottom: -8px;\n cursor: ns-resize;\n height: 8px; }\n #workbench-canvas #workbench-container .frame-box .bottom-handle {\n grid-area: 3 / 1 / 3 / 1;\n background-color: transparent;\n height: 4px;\n cursor: ns-resize; }\n #workbench-canvas #workbench-container .frame-box .bottom-handle::after {\n content: \"\";\n width: 100%;\n position: absolute;\n top: 100%;\n bottom: 0;\n right: 0;\n left: 0;\n margin-top: -8px;\n cursor: ns-resize;\n height: 12px; }\n #workbench-canvas #workbench-container .frame-box.collapsed .top-handle, #workbench-canvas #workbench-container .frame-box.collapsed .top-right-corner-handle, #workbench-canvas #workbench-container .frame-box.collapsed .right-handle, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-right-corner-handle, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-handle, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-left-corner-handle, #workbench-canvas #workbench-container .frame-box.collapsed .left-handle, #workbench-canvas #workbench-container .frame-box.collapsed .top-left-corner-handle {\n cursor: default; }\n #workbench-canvas #workbench-container .frame-box.collapsed .right-handle::after, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-handle::after, #workbench-canvas #workbench-container .frame-box.collapsed .top-right-corner-handle::after, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-right-corner-handle::after {\n cursor: default; }\n #workbench-canvas #workbench-container .frame-box.collapsed .left-handle::before, #workbench-canvas #workbench-container .frame-box.collapsed .top-handle::before, #workbench-canvas #workbench-container .frame-box.collapsed .top-left-corner-handle::before, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-left-corner-handle::before {\n cursor: default; }\n #workbench-canvas #workbench-container #workbench-svg-container {\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n z-index: 2; }\n #workbench-canvas #workbench-container #workbench-svg-container .link {\n stroke-width: 4px; }\n #workbench-canvas #workbench-container #workbench-svg-container .link.selected {\n stroke: white !important;\n stroke-dasharray: 10, 2; }\n #workbench-canvas #workbench-container #workbench-svg-container .link.hidden {\n display: none; }\n #workbench-canvas #workbench-container #workbench-svg-container .selection-link {\n pointer-events: all;\n stroke-width: 16px;\n opacity: 0;\n transition: opacity 75ms;\n stroke: transparent;\n cursor: pointer; }\n #workbench-canvas #workbench-container #workbench-svg-container .selection-link.hidden {\n display: none; }\n #workbench-canvas #workbench-container #workbench-svg-container .selection-link:hover, #workbench-canvas #workbench-container #workbench-svg-container .selection-link.selected {\n stroke: white !important;\n opacity: 0.4; }\n #workbench-canvas #workbench-container #workbench-canvas-container {\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual {\n z-index: 4;\n width: 200px;\n position: absolute;\n left: 0;\n top: 0;\n background: gray;\n border: 4px solid black;\n border-radius: 12px;\n display: grid;\n grid-template-rows: 30px auto;\n grid-template-columns: 100%;\n color: white; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual.hidden {\n display: none; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual .comments {\n position: absolute;\n top: -50px;\n width: 200px;\n height: 45px;\n overflow: hidden;\n font-style: italic;\n opacity: 0.8;\n display: grid;\n align-items: flex-end;\n pointer-events: none; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual .selection-border {\n grid-row: 1 / span 3;\n grid-column: 1;\n margin: -4px;\n transition: border-color 100ms;\n border: 4px solid black;\n border-radius: 12px; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual.selected .selection-border {\n border-color: white; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual .header {\n grid-row: 1;\n grid-column: 1;\n border: 4px solid black;\n border-top-right-radius: 7px;\n border-top-left-radius: 7px;\n font-size: 16px;\n text-align: center;\n margin-top: -1px;\n margin-left: -1px;\n margin-right: -1px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n background: black;\n color: white; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual .header.constant {\n border-color: #464348;\n background: #464348; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual .header.inspector {\n border-color: #66491b;\n background: #66491b; }\n", ""]);
|
|
10115
|
+
exports.push([module.i, "#workbench-canvas {\n grid-column: 1;\n grid-row: 1;\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font: 14px \"acumin-pro-condensed\";\n cursor: default;\n user-select: none;\n overflow: hidden;\n background-image: linear-gradient(to right, #4F4E4F 1px, transparent 1px), linear-gradient(to bottom, #4F4E4F 1px, transparent 1px); }\n #workbench-canvas #selection-container {\n pointer-events: none; }\n #workbench-canvas #selection-container .selection-box {\n z-index: 10;\n background: rgba(72, 72, 196, 0.5);\n border: blue solid 2px; }\n #workbench-canvas #workbench-container {\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n transform-origin: left top;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%; }\n #workbench-canvas #workbench-container #frame-container {\n overflow: visible;\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%; }\n #workbench-canvas #workbench-container .frame-box {\n position: absolute;\n background: rgba(72, 72, 72, 0.7);\n display: grid;\n grid-template-rows: 40px calc(100% - 40px);\n grid-template-columns: 100%;\n box-sizing: border-box; }\n #workbench-canvas #workbench-container .frame-box.collapsed {\n height: auto !important;\n width: 200px !important;\n z-index: 3; }\n #workbench-canvas #workbench-container .frame-box.collapsed .frame-box-header {\n font-size: 16px;\n grid-template-columns: calc(100% - 37px) 30px 7px; }\n #workbench-canvas #workbench-container .frame-box.collapsed .frame-box-header .frame-box-header-collapse {\n margin-top: -2px; }\n #workbench-canvas #workbench-container .frame-box.collapsed .frame-box-header .frame-box-header-close {\n display: none; }\n #workbench-canvas #workbench-container .frame-box.collapsed .frame-comments.has-comments .frame-comment-span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden; }\n #workbench-canvas #workbench-container .frame-box .frame-box-border {\n grid-row: 1 / span 2;\n grid-column: 1;\n width: 100%;\n height: 100%;\n border: transparent solid 4px;\n pointer-events: none;\n box-sizing: border-box; }\n #workbench-canvas #workbench-container .frame-box .frame-box-header {\n grid-row: 1;\n grid-column: 1;\n background: #484848;\n color: white;\n font-size: 24px;\n text-align: center;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: calc(100% - 74px) 30px 7px 30px 7px;\n align-content: center;\n overflow: hidden; }\n #workbench-canvas #workbench-container .frame-box .frame-box-header .frame-box-header-button {\n cursor: pointer;\n align-self: center;\n transform-origin: 50% 50%;\n transform: scale(1);\n stroke: transparent;\n fill: white;\n display: grid; }\n #workbench-canvas #workbench-container .frame-box .frame-box-header .frame-box-header-button.down {\n transform: scale(0.9); }\n #workbench-canvas #workbench-container .frame-box .frame-box-header .frame-box-header-collapse {\n grid-column: 2;\n grid-row: 1; }\n #workbench-canvas #workbench-container .frame-box .frame-box-header .frame-box-header-close {\n grid-column: 4;\n grid-row: 1; }\n #workbench-canvas #workbench-container .frame-box .frame-box-header .frame-box-header-title {\n grid-column: 1;\n grid-row: 1;\n display: grid;\n height: 100%;\n width: 100%;\n align-self: stretch;\n align-items: center;\n margin-top: -2px; }\n #workbench-canvas #workbench-container .frame-box .frame-comments.has-comments {\n display: grid;\n grid-row: 2;\n grid-column: 1;\n padding: 0 10px;\n font-style: italic;\n word-wrap: break-word; }\n #workbench-canvas #workbench-container .frame-box.selected .frame-box-border {\n border-color: white; }\n #workbench-canvas #workbench-container .frame-box .right-handle {\n grid-area: 1 / 2 / 3 / 2;\n width: 4px;\n background-color: transparent;\n cursor: ew-resize; }\n #workbench-canvas #workbench-container .frame-box .right-handle::after {\n content: \"\";\n width: 8px;\n position: absolute;\n top: 0;\n bottom: 0;\n margin-left: -4px;\n cursor: ew-resize; }\n #workbench-canvas #workbench-container .frame-box .right-handle.collapsed {\n cursor: pointer; }\n #workbench-canvas #workbench-container .frame-box .top-right-corner-handle {\n background-color: transparent;\n height: 4px;\n z-index: 21;\n cursor: ne-resize;\n width: 4px;\n margin-left: -6px; }\n #workbench-canvas #workbench-container .frame-box .top-right-corner-handle::after {\n background-color: transparent;\n cursor: ne-resize;\n margin-left: unset;\n top: -4px;\n height: 10px;\n width: 10px; }\n #workbench-canvas #workbench-container .frame-box .bottom-right-corner-handle {\n background-color: transparent;\n height: 0px;\n z-index: 21;\n cursor: nw-resize;\n grid-area: 4 / 2 / 4 / 2;\n margin-left: -2px; }\n #workbench-canvas #workbench-container .frame-box .bottom-right-corner-handle::after {\n background-color: transparent;\n height: 10px;\n cursor: nw-resize;\n top: unset;\n bottom: -4px;\n width: 10px; }\n #workbench-canvas #workbench-container .frame-box .left-handle {\n grid-area: 1 / 1 / 3 / 1;\n width: 4px;\n background-color: transparent;\n cursor: ew-resize; }\n #workbench-canvas #workbench-container .frame-box .left-handle::before {\n content: \"\";\n width: 8px;\n position: absolute;\n top: 0;\n bottom: 0;\n margin-left: -4px; }\n #workbench-canvas #workbench-container .frame-box .top-left-corner-handle {\n background-color: transparent;\n height: 4px;\n z-index: 21;\n cursor: nw-resize;\n width: 4px;\n margin-left: -4px; }\n #workbench-canvas #workbench-container .frame-box .top-left-corner-handle::before {\n background-color: transparent;\n cursor: nw-resize;\n margin-left: unset;\n top: -4px;\n height: 10px;\n width: 10px; }\n #workbench-canvas #workbench-container .frame-box .bottom-left-corner-handle {\n background-color: transparent;\n height: 0px;\n z-index: 21;\n cursor: sw-resize;\n grid-area: 4 / 1 / 4 / 1; }\n #workbench-canvas #workbench-container .frame-box .bottom-left-corner-handle::before {\n background-color: transparent;\n height: 10px;\n cursor: sw-resize;\n top: unset;\n bottom: -4px;\n width: 10px; }\n #workbench-canvas #workbench-container .frame-box .top-handle {\n grid-area: 1 / 1 / 1 / 1;\n background-color: transparent;\n height: 4px;\n cursor: ns-resize; }\n #workbench-canvas #workbench-container .frame-box .top-handle::before {\n content: \"\";\n width: 100%;\n position: absolute;\n top: -4px;\n bottom: 100%;\n right: 0;\n left: 0;\n margin-bottom: -8px;\n cursor: ns-resize;\n height: 8px; }\n #workbench-canvas #workbench-container .frame-box .bottom-handle {\n grid-area: 3 / 1 / 3 / 1;\n background-color: transparent;\n height: 4px;\n cursor: ns-resize; }\n #workbench-canvas #workbench-container .frame-box .bottom-handle::after {\n content: \"\";\n width: 100%;\n position: absolute;\n top: 100%;\n bottom: 0;\n right: 0;\n left: 0;\n margin-top: -8px;\n cursor: ns-resize;\n height: 12px; }\n #workbench-canvas #workbench-container .frame-box.collapsed .top-handle, #workbench-canvas #workbench-container .frame-box.collapsed .top-right-corner-handle, #workbench-canvas #workbench-container .frame-box.collapsed .right-handle, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-right-corner-handle, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-handle, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-left-corner-handle, #workbench-canvas #workbench-container .frame-box.collapsed .left-handle, #workbench-canvas #workbench-container .frame-box.collapsed .top-left-corner-handle {\n cursor: default; }\n #workbench-canvas #workbench-container .frame-box.collapsed .right-handle::after, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-handle::after, #workbench-canvas #workbench-container .frame-box.collapsed .top-right-corner-handle::after, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-right-corner-handle::after {\n cursor: default; }\n #workbench-canvas #workbench-container .frame-box.collapsed .left-handle::before, #workbench-canvas #workbench-container .frame-box.collapsed .top-handle::before, #workbench-canvas #workbench-container .frame-box.collapsed .top-left-corner-handle::before, #workbench-canvas #workbench-container .frame-box.collapsed .bottom-left-corner-handle::before {\n cursor: default; }\n #workbench-canvas #workbench-container #workbench-svg-container {\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n z-index: 2; }\n #workbench-canvas #workbench-container #workbench-svg-container .link {\n stroke-width: 4px; }\n #workbench-canvas #workbench-container #workbench-svg-container .link.selected {\n stroke: white !important;\n stroke-dasharray: 10, 2; }\n #workbench-canvas #workbench-container #workbench-svg-container .link.hidden {\n display: none; }\n #workbench-canvas #workbench-container #workbench-svg-container .selection-link {\n pointer-events: all;\n stroke-width: 16px;\n opacity: 0;\n transition: opacity 75ms;\n stroke: transparent;\n cursor: pointer; }\n #workbench-canvas #workbench-container #workbench-svg-container .selection-link.hidden {\n display: none; }\n #workbench-canvas #workbench-container #workbench-svg-container .selection-link:hover, #workbench-canvas #workbench-container #workbench-svg-container .selection-link.selected {\n stroke: white !important;\n opacity: 0.4; }\n #workbench-canvas #workbench-container #workbench-canvas-container {\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual {\n z-index: 4;\n width: 200px;\n position: absolute;\n left: 0;\n top: 0;\n background: gray;\n border: 4px solid black;\n border-radius: 12px;\n display: grid;\n grid-template-rows: 30px auto;\n grid-template-columns: 100%;\n color: white; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual.hidden {\n display: none; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual .comments {\n position: absolute;\n top: -50px;\n width: 200px;\n height: 45px;\n overflow: hidden;\n font-style: italic;\n opacity: 0.8;\n display: grid;\n align-items: flex-end;\n pointer-events: none; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual .selection-border {\n grid-row: 1 / span 3;\n grid-column: 1;\n margin: -4px;\n transition: border-color 100ms;\n border: 4px solid black;\n border-radius: 12px; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual.selected .selection-border {\n border-color: white; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual .header {\n grid-row: 1;\n grid-column: 1;\n border: 4px solid black;\n border-top-right-radius: 7px;\n border-top-left-radius: 7px;\n font-size: 16px;\n text-align: center;\n margin-top: -1px;\n margin-left: -1px;\n margin-right: -1px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n background: black;\n color: white; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual .header.constant {\n border-color: #464348;\n background: #464348; }\n #workbench-canvas #workbench-container #workbench-canvas-container .visual .header.inspector {\n border-color: #66491b;\n background: #66491b; }\n", ""]);
|
|
10116
10116
|
// Exports
|
|
10117
10117
|
module.exports = exports;
|
|
10118
10118
|
|
|
@@ -10130,7 +10130,7 @@ module.exports = exports;
|
|
|
10130
10130
|
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../../../../node_modules/css-loader/dist/runtime/api.js */ "../../../../node_modules/css-loader/dist/runtime/api.js");
|
|
10131
10131
|
exports = ___CSS_LOADER_API_IMPORT___(false);
|
|
10132
10132
|
// Module
|
|
10133
|
-
exports.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 padding: 5px;\n padding-left: 7px;\n height: 35px;\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\n.diagram-container {\n grid-row: 1;\n grid-column: 4;\n background: #5f5b60;\n width: 100%;\n height: 100%; }\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", ""]);
|
|
10133
|
+
exports.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 padding: 5px;\n padding-left: 7px;\n height: 35px;\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\n.diagram-container {\n position: relative;\n display: grid;\n grid-row: 1;\n grid-column: 4;\n background: #5f5b60;\n width: 100%;\n height: 100%; }\n .diagram-container .diagram {\n display: none;\n width: 100%;\n height: 100%; }\n .diagram-container .ge-scalePoint {\n width: 10px;\n height: 10px;\n background: transparent;\n outline: #7d7d7d 2px solid; }\n .diagram-container .ge-pivotPoint {\n width: 30px;\n height: 30px;\n background: transparent; }\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", ""]);
|
|
10134
10134
|
// Exports
|
|
10135
10135
|
module.exports = exports;
|
|
10136
10136
|
|
|
@@ -42235,25 +42235,25 @@ module.exports = g;
|
|
|
42235
42235
|
|
|
42236
42236
|
/***/ }),
|
|
42237
42237
|
|
|
42238
|
-
/***/ "
|
|
42239
|
-
|
|
42240
|
-
!***
|
|
42241
|
-
|
|
42238
|
+
/***/ "../../sharedUiComponents/imgs/fillColorIcon.svg":
|
|
42239
|
+
/*!***************************************************************************************!*\
|
|
42240
|
+
!*** E:/Babylon/Babylon.js/.temp/sourceES6/sharedUiComponents/imgs/fillColorIcon.svg ***!
|
|
42241
|
+
\***************************************************************************************/
|
|
42242
42242
|
/*! no static exports found */
|
|
42243
42243
|
/***/ (function(module, exports) {
|
|
42244
42244
|
|
|
42245
|
-
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='
|
|
42245
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M7.31,16.54v4.1a2,2,0,0,0,2,2H21.42a2,2,0,0,0,2-2V11.78a2,2,0,0,0-2-2H14.21L15.42,11h6a.8.8,0,0,1,.8.81v8.86a.8.8,0,0,1-.8.81H9.33a.81.81,0,0,1-.81-.81V17.75Z' style='fill:%23333'/%3E%3Cpath d='M10.54,8a.6.6,0,1,1,1.2,0V9a1.57,1.57,0,0,1,1,.46l2.85,2.85a1.61,1.61,0,0,1,0,2.28L12.17,18a1.61,1.61,0,0,1-2.28,0L7,15.13a1.61,1.61,0,0,1,0-2.28l3.42-3.42.08-.07Zm0,3.62v-.5L8.21,13.4h6.64a.34.34,0,0,0-.12-.26l-2.85-2.85a.34.34,0,0,0-.14-.09v1.37a.6.6,0,1,1-1.2,0Zm-2.32,3,2.52,2.52a.42.42,0,0,0,.57,0l2.53-2.52Z' style='fill:%23333'/%3E%3Cpath d='M14.57,17.32a2.76,2.76,0,0,1,.27-1.12,5.33,5.33,0,0,1,.54-.91c.2-.27.39-.49.53-.65l.24-.26h0a.6.6,0,0,1,.86,0l.24.27a6,6,0,0,1,.53.65,5.33,5.33,0,0,1,.54.91,2.76,2.76,0,0,1,.28,1.12,2,2,0,1,1-4,0ZM16.37,16a4.15,4.15,0,0,0-.43.72,1.57,1.57,0,0,0-.17.61.81.81,0,1,0,1.62,0,1.57,1.57,0,0,0-.17-.61,4.15,4.15,0,0,0-.43-.72l-.21-.28Z' style='fill:%23333'/%3E%3C/svg%3E"
|
|
42246
42246
|
|
|
42247
42247
|
/***/ }),
|
|
42248
42248
|
|
|
42249
|
-
/***/ "../public/imgs/
|
|
42250
|
-
|
|
42251
|
-
!*** ../public/imgs/
|
|
42252
|
-
|
|
42249
|
+
/***/ "../public/imgs/adtIcon.svg":
|
|
42250
|
+
/*!**********************************!*\
|
|
42251
|
+
!*** ../public/imgs/adtIcon.svg ***!
|
|
42252
|
+
\**********************************/
|
|
42253
42253
|
/*! no static exports found */
|
|
42254
42254
|
/***/ (function(module, exports) {
|
|
42255
42255
|
|
|
42256
|
-
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='
|
|
42256
|
+
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M25.29,26.51a.41.41,0,0,1-.41.41H15.12a.41.41,0,0,1-.41-.41v-13a.41.41,0,0,1,.41-.41H20v3.66a1.63,1.63,0,0,0,1.63,1.63h3.66ZM21.22,14l3.16,3.16H21.63a.41.41,0,0,1-.41-.41ZM26,17.08l-4.75-4.74-.07-.06L21,12.13l-.1-.05-.18-.1a1.72,1.72,0,0,0-.51-.11H15.12a1.63,1.63,0,0,0-1.63,1.63v13a1.63,1.63,0,0,0,1.63,1.63h9.76a1.63,1.63,0,0,0,1.63-1.63V18.23A1.65,1.65,0,0,0,26,17.08Z' style='fill:%23333'/%3E%3C/svg%3E"
|
|
42257
42257
|
|
|
42258
42258
|
/***/ }),
|
|
42259
42259
|
|
|
@@ -42422,6 +42422,17 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
|
42422
42422
|
|
|
42423
42423
|
/***/ }),
|
|
42424
42424
|
|
|
42425
|
+
/***/ "../public/imgs/gizmoPivotIcon.svg":
|
|
42426
|
+
/*!*****************************************!*\
|
|
42427
|
+
!*** ../public/imgs/gizmoPivotIcon.svg ***!
|
|
42428
|
+
\*****************************************/
|
|
42429
|
+
/*! no static exports found */
|
|
42430
|
+
/***/ (function(module, exports) {
|
|
42431
|
+
|
|
42432
|
+
module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Ccircle class='cls-1' cx='15' cy='15' r='8.98'/%3E%3Cpath d='M15,6.9A8.1,8.1,0,1,0,23.1,15,8.1,8.1,0,0,0,15,6.9Zm6.86,7.49H15.63V8.14A6.89,6.89,0,0,1,21.86,14.39ZM14.41,8.14v6.25H8.14A6.89,6.89,0,0,1,14.41,8.14ZM8.14,15.61h6.27v6.25A6.89,6.89,0,0,1,8.14,15.61Zm7.49,6.25V15.61h6.23A6.89,6.89,0,0,1,15.63,21.86Z'/%3E%3C/svg%3E"
|
|
42433
|
+
|
|
42434
|
+
/***/ }),
|
|
42435
|
+
|
|
42425
42436
|
/***/ "../public/imgs/gridIcon.svg":
|
|
42426
42437
|
/*!***********************************!*\
|
|
42427
42438
|
!*** ../public/imgs/gridIcon.svg ***!
|
|
@@ -42484,7 +42495,7 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
|
42484
42495
|
/*! no static exports found */
|
|
42485
42496
|
/***/ (function(module, exports) {
|
|
42486
42497
|
|
|
42487
|
-
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
|
|
42498
|
+
module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M23.86,11.86a2.65,2.65,0,0,1,2.65,2.65v9.36a2.65,2.65,0,0,1-2.65,2.65H14.5a2.65,2.65,0,0,1-2.65-2.65V14.51a2.65,2.65,0,0,1,2.65-2.65Zm.47,13.36-4.72-4.63a.62.62,0,0,0-.79-.06l-.07.06L14,25.22a1.4,1.4,0,0,0,.47.08h9.36a1.4,1.4,0,0,0,.47-.08l-4.72-4.63Zm-.47-12.13H14.5a1.42,1.42,0,0,0-1.43,1.42v9.36a1.33,1.33,0,0,0,.09.49l4.74-4.65a1.84,1.84,0,0,1,2.46-.09l.1.09,4.74,4.65a1.33,1.33,0,0,0,.09-.49V14.51A1.42,1.42,0,0,0,23.86,13.09Zm-2,1.62A1.84,1.84,0,1,1,20,16.55,1.83,1.83,0,0,1,21.83,14.71Zm0,1.22a.61.61,0,0,0-.61.62.61.61,0,0,0,1.22,0A.61.61,0,0,0,21.83,15.93Z'/%3E%3C/svg%3E"
|
|
42488
42499
|
|
|
42489
42500
|
/***/ }),
|
|
42490
42501
|
|
|
@@ -42495,7 +42506,7 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
|
42495
42506
|
/*! no static exports found */
|
|
42496
42507
|
/***/ (function(module, exports) {
|
|
42497
42508
|
|
|
42498
|
-
module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='
|
|
42509
|
+
module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23333;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M23.86,11.86a2.65,2.65,0,0,1,2.65,2.65v9.36a2.65,2.65,0,0,1-2.65,2.65H14.5a2.65,2.65,0,0,1-2.65-2.65V14.51a2.65,2.65,0,0,1,2.65-2.65Zm.47,13.36-4.72-4.63a.62.62,0,0,0-.79-.06l-.07.06L14,25.22a1.4,1.4,0,0,0,.47.08h9.36a1.4,1.4,0,0,0,.47-.08l-4.72-4.63Zm-.47-12.13H14.5a1.42,1.42,0,0,0-1.43,1.42v9.36a1.33,1.33,0,0,0,.09.49l4.74-4.65a1.84,1.84,0,0,1,2.46-.09l.1.09,4.74,4.65a1.33,1.33,0,0,0,.09-.49V14.51A1.42,1.42,0,0,0,23.86,13.09Zm-2,1.62A1.84,1.84,0,1,1,20,16.55,1.83,1.83,0,0,1,21.83,14.71Zm0,1.22a.61.61,0,0,0-.61.62.61.61,0,0,0,1.22,0A.61.61,0,0,0,21.83,15.93Z'/%3E%3C/svg%3E"
|
|
42499
42510
|
|
|
42500
42511
|
/***/ }),
|
|
42501
42512
|
|
|
@@ -42609,17 +42620,6 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
|
42609
42620
|
|
|
42610
42621
|
/***/ }),
|
|
42611
42622
|
|
|
42612
|
-
/***/ "../public/imgs/moveIcon.svg":
|
|
42613
|
-
/*!***********************************!*\
|
|
42614
|
-
!*** ../public/imgs/moveIcon.svg ***!
|
|
42615
|
-
\***********************************/
|
|
42616
|
-
/*! no static exports found */
|
|
42617
|
-
/***/ (function(module, exports) {
|
|
42618
|
-
|
|
42619
|
-
module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M22.64,15.2a.61.61,0,0,1-.85,0L20.6,14v3a.6.6,0,1,1-1.2,0V14L18.21,15.2a.61.61,0,0,1-.85,0,.6.6,0,0,1,0-.86l2.21-2.21a.6.6,0,0,1,.86,0l2.21,2.21A.6.6,0,0,1,22.64,15.2Z' style='fill:%23fff'/%3E%3Cpath d='M15.2,21.79a.61.61,0,0,1,0,.85.6.6,0,0,1-.86,0l-2.21-2.21a.6.6,0,0,1,0-.86l2.21-2.21a.6.6,0,0,1,.86,0,.61.61,0,0,1,0,.85L14,19.4h3a.6.6,0,1,1,0,1.2H14Z' style='fill:%23fff'/%3E%3Cpath d='M24.8,22.64a.61.61,0,0,1,0-.85L26,20.6H23a.6.6,0,1,1,0-1.2h3L24.8,18.21a.61.61,0,0,1,0-.85.6.6,0,0,1,.86,0l2.21,2.21a.6.6,0,0,1,0,.86l-2.21,2.21A.6.6,0,0,1,24.8,22.64Z' style='fill:%23fff'/%3E%3Cpath d='M22.64,24.8a.61.61,0,0,0-.85,0L20.6,26V23a.6.6,0,1,0-1.2,0v3L18.21,24.8a.61.61,0,0,0-.85,0,.6.6,0,0,0,0,.86l2.21,2.21a.6.6,0,0,0,.86,0l2.21-2.21A.6.6,0,0,0,22.64,24.8Z' style='fill:%23fff'/%3E%3C/svg%3E"
|
|
42620
|
-
|
|
42621
|
-
/***/ }),
|
|
42622
|
-
|
|
42623
42623
|
/***/ "../public/imgs/passwordFieldIcon.svg":
|
|
42624
42624
|
/*!********************************************!*\
|
|
42625
42625
|
!*** ../public/imgs/passwordFieldIcon.svg ***!
|
|
@@ -42847,7 +42847,6 @@ var zoomIcon = __webpack_require__(/*! ../../public/imgs/zoomIcon.svg */ "../pub
|
|
|
42847
42847
|
var guidesIcon = __webpack_require__(/*! ../../public/imgs/guidesIcon.svg */ "../public/imgs/guidesIcon.svg");
|
|
42848
42848
|
var logoIcon = __webpack_require__(/*! ../../public/imgs/babylonLogo.svg */ "../public/imgs/babylonLogo.svg");
|
|
42849
42849
|
var canvasFitIcon = __webpack_require__(/*! ../../public/imgs/canvasFitIcon.svg */ "../public/imgs/canvasFitIcon.svg");
|
|
42850
|
-
var moveIcon = __webpack_require__(/*! ../../public/imgs/moveIcon.svg */ "../public/imgs/moveIcon.svg");
|
|
42851
42850
|
__webpack_require__(/*! ../scss/commandBar.scss */ "./scss/commandBar.scss");
|
|
42852
42851
|
var CommandBarComponent = /** @class */ (function (_super) {
|
|
42853
42852
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CommandBarComponent, _super);
|
|
@@ -42856,33 +42855,22 @@ var CommandBarComponent = /** @class */ (function (_super) {
|
|
|
42856
42855
|
_this._panning = false;
|
|
42857
42856
|
_this._zooming = false;
|
|
42858
42857
|
_this._selecting = true;
|
|
42859
|
-
_this._moving = false;
|
|
42860
42858
|
props.globalState.onPanObservable.add(function () {
|
|
42861
42859
|
_this._panning = !_this._panning;
|
|
42862
42860
|
_this._zooming = false;
|
|
42863
42861
|
_this._selecting = false;
|
|
42864
|
-
_this._moving = false;
|
|
42865
42862
|
_this.forceUpdate();
|
|
42866
42863
|
});
|
|
42867
42864
|
props.globalState.onSelectionButtonObservable.add(function () {
|
|
42868
42865
|
_this._selecting = !_this._selecting;
|
|
42869
42866
|
_this._panning = false;
|
|
42870
42867
|
_this._zooming = false;
|
|
42871
|
-
_this._moving = false;
|
|
42872
42868
|
_this.forceUpdate();
|
|
42873
42869
|
});
|
|
42874
42870
|
props.globalState.onZoomObservable.add(function () {
|
|
42875
42871
|
_this._zooming = !_this._zooming;
|
|
42876
42872
|
_this._panning = false;
|
|
42877
42873
|
_this._selecting = false;
|
|
42878
|
-
_this._moving = false;
|
|
42879
|
-
_this.forceUpdate();
|
|
42880
|
-
});
|
|
42881
|
-
props.globalState.onMoveObservable.add(function () {
|
|
42882
|
-
_this._zooming = false;
|
|
42883
|
-
_this._panning = false;
|
|
42884
|
-
_this._selecting = false;
|
|
42885
|
-
_this._moving = !_this._moving;
|
|
42886
42874
|
_this.forceUpdate();
|
|
42887
42875
|
});
|
|
42888
42876
|
props.globalState.onOutlinesObservable.add(function () {
|
|
@@ -42933,6 +42921,32 @@ var CommandBarComponent = /** @class */ (function (_super) {
|
|
|
42933
42921
|
_this.props.globalState.onSnippetLoadObservable.notifyObservers();
|
|
42934
42922
|
},
|
|
42935
42923
|
},
|
|
42924
|
+
{
|
|
42925
|
+
label: "Copy Selected",
|
|
42926
|
+
onClick: function () {
|
|
42927
|
+
_this.props.globalState.workbench.copyToClipboard();
|
|
42928
|
+
},
|
|
42929
|
+
},
|
|
42930
|
+
{
|
|
42931
|
+
label: "Paste",
|
|
42932
|
+
onClick: function () {
|
|
42933
|
+
_this.props.globalState.workbench.pasteFromClipboard();
|
|
42934
|
+
}
|
|
42935
|
+
},
|
|
42936
|
+
{
|
|
42937
|
+
label: "Delete Selected",
|
|
42938
|
+
onClick: function () {
|
|
42939
|
+
_this.props.globalState.workbench.selectedGuiNodes.forEach(function (guiNode) {
|
|
42940
|
+
var _a;
|
|
42941
|
+
if (guiNode !== _this.props.globalState.guiTexture.getChildren()[0]) {
|
|
42942
|
+
_this.props.globalState.guiTexture.removeControl(guiNode);
|
|
42943
|
+
(_a = _this.props.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(guiNode);
|
|
42944
|
+
guiNode.dispose();
|
|
42945
|
+
}
|
|
42946
|
+
});
|
|
42947
|
+
_this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
|
|
42948
|
+
},
|
|
42949
|
+
},
|
|
42936
42950
|
{
|
|
42937
42951
|
label: "Help",
|
|
42938
42952
|
onClick: function () {
|
|
@@ -42950,10 +42964,6 @@ var CommandBarComponent = /** @class */ (function (_super) {
|
|
|
42950
42964
|
if (!_this._selecting)
|
|
42951
42965
|
_this.props.globalState.onSelectionButtonObservable.notifyObservers();
|
|
42952
42966
|
} }),
|
|
42953
|
-
react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Move", icon: moveIcon, shortcut: "M", isActive: this._moving, onClick: function () {
|
|
42954
|
-
if (!_this._moving)
|
|
42955
|
-
_this.props.globalState.onMoveObservable.notifyObservers();
|
|
42956
|
-
} }),
|
|
42957
42967
|
react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandButtonComponent__WEBPACK_IMPORTED_MODULE_3__["CommandButtonComponent"], { tooltip: "Pan", icon: handIcon, shortcut: "P", isActive: this._panning, onClick: function () {
|
|
42958
42968
|
if (!_this._panning)
|
|
42959
42969
|
_this.props.globalState.onPanObservable.notifyObservers();
|
|
@@ -43433,9 +43443,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
43433
43443
|
/* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
|
|
43434
43444
|
/* harmony import */ var _sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textInputLineComponent */ "./sharedUiComponents/lines/textInputLineComponent.tsx");
|
|
43435
43445
|
/* harmony import */ var _commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../commandButtonComponent */ "./components/commandButtonComponent.tsx");
|
|
43436
|
-
/* harmony import */ var
|
|
43437
|
-
/* harmony import */ var
|
|
43438
|
-
/* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
|
|
43446
|
+
/* harmony import */ var _sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/color3LineComponent */ "./sharedUiComponents/lines/color3LineComponent.tsx");
|
|
43447
|
+
/* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
|
|
43439
43448
|
|
|
43440
43449
|
|
|
43441
43450
|
|
|
@@ -43469,14 +43478,13 @@ var hAlignRightIcon = __webpack_require__(/*! ../../../../sharedUiComponents/img
|
|
|
43469
43478
|
var vAlignCenterIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/vAlignCenterIcon.svg */ "./sharedUiComponents/imgs/vAlignCenterIcon.svg");
|
|
43470
43479
|
var vAlignTopIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/vAlignTopIcon.svg */ "./sharedUiComponents/imgs/vAlignTopIcon.svg");
|
|
43471
43480
|
var vAlignBottomIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/vAlignBottomIcon.svg */ "./sharedUiComponents/imgs/vAlignBottomIcon.svg");
|
|
43481
|
+
var descendantsOnlyPaddingIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/descendantsOnlyPaddingIcon.svg */ "./sharedUiComponents/imgs/descendantsOnlyPaddingIcon.svg");
|
|
43472
43482
|
var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
43473
43483
|
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(CommonControlPropertyGridComponent, _super);
|
|
43474
43484
|
function CommonControlPropertyGridComponent(props) {
|
|
43475
43485
|
var _this = _super.call(this, props) || this;
|
|
43476
43486
|
_this._width = _this.props.control.width;
|
|
43477
43487
|
_this._height = _this.props.control.height;
|
|
43478
|
-
_this._responsive = false;
|
|
43479
|
-
_this._responsive = _babylonjs_core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_8__["DataStorage"].ReadBoolean("Responsive", true);
|
|
43480
43488
|
return _this;
|
|
43481
43489
|
}
|
|
43482
43490
|
CommonControlPropertyGridComponent.prototype._updateAlignment = function (alignment, value) {
|
|
@@ -43491,8 +43499,10 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
|
43491
43499
|
};
|
|
43492
43500
|
CommonControlPropertyGridComponent.prototype._checkAndUpdateValues = function (propertyName, value) {
|
|
43493
43501
|
var _a, _b;
|
|
43494
|
-
//
|
|
43495
|
-
var
|
|
43502
|
+
// checking the previous value unit to see what it was.
|
|
43503
|
+
var vau = this.props.control["_" + propertyName];
|
|
43504
|
+
var percentage = vau.isPercentage;
|
|
43505
|
+
// now checking if the new string contains either a px or a % sign in case we need to change the unit.
|
|
43496
43506
|
var negative = value.charAt(0) === "-";
|
|
43497
43507
|
if (value.charAt(value.length - 1) === "%") {
|
|
43498
43508
|
percentage = true;
|
|
@@ -43512,6 +43522,12 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
|
43512
43522
|
this.props.control[propertyName] = newValue;
|
|
43513
43523
|
this.forceUpdate();
|
|
43514
43524
|
};
|
|
43525
|
+
CommonControlPropertyGridComponent.prototype._markChildrenAsDirty = function () {
|
|
43526
|
+
if (this.props.control instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"])
|
|
43527
|
+
this.props.control._children.forEach(function (child) {
|
|
43528
|
+
child._markAsDirty();
|
|
43529
|
+
});
|
|
43530
|
+
};
|
|
43515
43531
|
CommonControlPropertyGridComponent.prototype.render = function () {
|
|
43516
43532
|
var _this = this;
|
|
43517
43533
|
var control = this.props.control;
|
|
@@ -43544,13 +43560,16 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
|
43544
43560
|
_this._updateAlignment("verticalAlignment", _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"].VERTICAL_ALIGNMENT_BOTTOM);
|
|
43545
43561
|
} })),
|
|
43546
43562
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
|
43547
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Position", icon: positionIcon, lockObject: this.props.lockObject, label: "X", target: control, propertyName: "left", onChange: function (newValue) { return _this._checkAndUpdateValues("left", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
|
43548
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "Y", target: control, propertyName: "top", onChange: function (newValue) { return _this._checkAndUpdateValues("top", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
|
43563
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Position", icon: positionIcon, lockObject: this.props.lockObject, label: "X", target: control, delayInput: true, propertyName: "left", onChange: function (newValue) { return _this._checkAndUpdateValues("left", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
|
43564
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "Y", target: control, delayInput: true, propertyName: "top", onChange: function (newValue) { return _this._checkAndUpdateValues("top", newValue); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
|
43549
43565
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
|
43550
|
-
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, propertyName: "_width", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function (newValue) {
|
|
43566
|
+
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) {
|
|
43551
43567
|
if (control.typeName === "Image") {
|
|
43552
43568
|
control.autoScale = false;
|
|
43553
43569
|
}
|
|
43570
|
+
else if (control instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
|
|
43571
|
+
control.adaptWidthToChildren = false;
|
|
43572
|
+
}
|
|
43554
43573
|
else if (_this.props.control.typeName === "ColorPicker") {
|
|
43555
43574
|
if (newValue === "0" || newValue === "-") {
|
|
43556
43575
|
newValue = "1";
|
|
@@ -43559,10 +43578,13 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
|
43559
43578
|
_this._width = newValue;
|
|
43560
43579
|
_this._checkAndUpdateValues("width", _this._width.toString());
|
|
43561
43580
|
} }),
|
|
43562
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "H", target: this, propertyName: "_height", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function (newValue) {
|
|
43581
|
+
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) {
|
|
43563
43582
|
if (control.typeName === "Image") {
|
|
43564
43583
|
control.autoScale = false;
|
|
43565
43584
|
}
|
|
43585
|
+
else if (control instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Container"]) {
|
|
43586
|
+
control.adaptHeightToChildren = false;
|
|
43587
|
+
}
|
|
43566
43588
|
else if (_this.props.control.typeName === "ColorPicker") {
|
|
43567
43589
|
if (newValue === "0" || newValue === "-") {
|
|
43568
43590
|
newValue = "1";
|
|
@@ -43572,11 +43594,13 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
|
43572
43594
|
_this._checkAndUpdateValues("height", _this._height.toString());
|
|
43573
43595
|
} })),
|
|
43574
43596
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
|
43575
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "
|
|
43576
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "T", target: control, propertyName: "paddingTop", onChange: function (newValue) {
|
|
43597
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Padding", icon: verticalMarginIcon, lockObject: this.props.lockObject, label: "B", target: control, propertyName: "paddingBottom", delayInput: true, onChange: function (newValue) { _this._checkAndUpdateValues("paddingBottom", newValue); _this._markChildrenAsDirty(); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
|
43598
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "T", target: control, propertyName: "paddingTop", delayInput: true, onChange: function (newValue) { _this._checkAndUpdateValues("paddingTop", newValue); _this._markChildrenAsDirty(); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
|
43577
43599
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
|
43578
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Horizontal Margins", icon: horizontalMarginIcon, lockObject: this.props.lockObject, label: "L", target: control, propertyName: "paddingLeft", onChange: function (newValue) {
|
|
43579
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "R", target: control, propertyName: "paddingRight", onChange: function (newValue) {
|
|
43600
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, iconLabel: "Horizontal Margins", icon: horizontalMarginIcon, lockObject: this.props.lockObject, label: "L", target: control, propertyName: "paddingLeft", delayInput: true, onChange: function (newValue) { _this._checkAndUpdateValues("paddingLeft", newValue); _this._markChildrenAsDirty(); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
|
43601
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_6__["TextInputLineComponent"], { numbersOnly: true, lockObject: this.props.lockObject, label: "R", target: control, delayInput: true, propertyName: "paddingRight", onChange: function (newValue) { _this._checkAndUpdateValues("paddingRight", newValue); _this._markChildrenAsDirty(); }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
|
43602
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-shot" },
|
|
43603
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__["CheckBoxLineComponent"], { iconLabel: "Padding does not affect the parameters of this control, only the descendants of this control.", icon: descendantsOnlyPaddingIcon, label: "", target: control, propertyName: "descendentsOnlyPadding", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
|
43580
43604
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
|
|
43581
43605
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "TRANSFORMATION", value: " ", color: "grey" }),
|
|
43582
43606
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
|
@@ -43589,10 +43613,10 @@ var CommonControlPropertyGridComponent = /** @class */ (function (_super) {
|
|
|
43589
43613
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
|
|
43590
43614
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__["TextLineComponent"], { tooltip: "", label: "APPEARANCE", value: " ", color: "grey" }),
|
|
43591
43615
|
(control.color !== undefined && control.typeName !== "Image" &&
|
|
43592
|
-
control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker") && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
|
43593
|
-
control.background !== undefined && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
|
43616
|
+
control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker") && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__["Color3LineComponent"], { iconLabel: "Color", icon: colorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "color", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
|
43617
|
+
control.background !== undefined && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__["Color3LineComponent"], { iconLabel: "Background", icon: fillColorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "background", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
|
43594
43618
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__["SliderLineComponent"], { lockObject: this.props.lockObject, iconLabel: "Alpha", icon: alphaIcon, label: "", target: control, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01, onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
|
43595
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](
|
|
43619
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_color3LineComponent__WEBPACK_IMPORTED_MODULE_8__["Color3LineComponent"], { iconLabel: "Shadow Color", icon: shadowColorIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "shadowColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
|
43596
43620
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
|
43597
43621
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { iconLabel: "Shadow Offset X", icon: shadowOffsetXIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "shadowOffsetX", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
|
43598
43622
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { iconLabel: "Shadow Offset Y", icon: shadowOffsetYIcon, lockObject: this.props.lockObject, label: "", target: control, propertyName: "shadowOffsetY", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
|
@@ -44260,6 +44284,14 @@ var ImagePropertyGridComponent = /** @class */ (function (_super) {
|
|
|
44260
44284
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "B", target: image, propertyName: "sourceHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
|
|
44261
44285
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__["CheckBoxLineComponent"], { iconLabel: "Autoscale", icon: autoResizeIcon, label: "AUTOSCALE", target: image, propertyName: "autoScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
|
44262
44286
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__["OptionsLineComponent"], { iconLabel: "Stretch", icon: stretchFillIcon, label: "", options: stretchOptions, target: image, propertyName: "stretch", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onSelect: function (value) { return _this.setState({ mode: value }); } }),
|
|
44287
|
+
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,
|
|
44288
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
|
44289
|
+
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(); } }),
|
|
44290
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "R", target: image, propertyName: "sliceRight", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function () { image.populateNinePatchSlicesFromImage = false; _this.forceUpdate(); } })),
|
|
44291
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider" },
|
|
44292
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "T", target: image, icon: cropIcon, iconLabel: "Slice", propertyName: "sliceTop", onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function () { image.populateNinePatchSlicesFromImage = false; _this.forceUpdate(); } }),
|
|
44293
|
+
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(); } })),
|
|
44294
|
+
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(); } })),
|
|
44263
44295
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
|
44264
44296
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__["TextLineComponent"], { label: "ANIMATION SHEET", value: " ", color: "grey" }),
|
|
44265
44297
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "ge-divider-short" },
|
|
@@ -44682,6 +44714,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
44682
44714
|
/* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "./components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.tsx");
|
|
44683
44715
|
/* harmony import */ var _sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/checkBoxLineComponent */ "./sharedUiComponents/lines/checkBoxLineComponent.tsx");
|
|
44684
44716
|
/* harmony import */ var _sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/textLineComponent */ "./sharedUiComponents/lines/textLineComponent.tsx");
|
|
44717
|
+
/* harmony import */ var _sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../sharedUiComponents/lines/floatLineComponent */ "./sharedUiComponents/lines/floatLineComponent.tsx");
|
|
44718
|
+
|
|
44685
44719
|
|
|
44686
44720
|
|
|
44687
44721
|
|
|
@@ -44701,7 +44735,8 @@ var StackPanelPropertyGridComponent = /** @class */ (function (_super) {
|
|
|
44701
44735
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", null),
|
|
44702
44736
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__["TextLineComponent"], { label: "STACKPANEL", value: " ", color: "grey" }),
|
|
44703
44737
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Clip children", icon: clipContentsIcon, label: "CLIP CHILDREN", target: stackPanel, propertyName: "clipChildren", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
|
44704
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Vertical", icon: verticalMarginIcon, label: "VERTICAL", target: stackPanel, propertyName: "isVertical", onPropertyChangedObservable: this.props.onPropertyChangedObservable })
|
|
44738
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__["CheckBoxLineComponent"], { iconLabel: "Vertical", icon: verticalMarginIcon, label: "VERTICAL", target: stackPanel, propertyName: "isVertical", onPropertyChangedObservable: this.props.onPropertyChangedObservable }),
|
|
44739
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__["FloatLineComponent"], { lockObject: this.props.lockObject, label: "", icon: verticalMarginIcon, iconLabel: "spacing", target: stackPanel, propertyName: "spacing", defaultValue: 0, onPropertyChangedObservable: this.props.onPropertyChangedObservable, onChange: function () { return stackPanel._markAsDirty(); } })));
|
|
44705
44740
|
};
|
|
44706
44741
|
return StackPanelPropertyGridComponent;
|
|
44707
44742
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
|
@@ -44892,7 +44927,7 @@ __webpack_require__(/*! ./propertyTab.scss */ "./components/propertyTab/property
|
|
|
44892
44927
|
var adtIcon = __webpack_require__(/*! ../../../public/imgs/adtIcon.svg */ "../public/imgs/adtIcon.svg");
|
|
44893
44928
|
var responsiveIcon = __webpack_require__(/*! ../../../public/imgs/responsiveIcon.svg */ "../public/imgs/responsiveIcon.svg");
|
|
44894
44929
|
var canvasSizeIcon = __webpack_require__(/*! ../../../public/imgs/canvasSizeIcon.svg */ "../public/imgs/canvasSizeIcon.svg");
|
|
44895
|
-
var artboardColorIcon = __webpack_require__(/*!
|
|
44930
|
+
var artboardColorIcon = __webpack_require__(/*! ../../../../sharedUiComponents/imgs/fillColorIcon.svg */ "../../sharedUiComponents/imgs/fillColorIcon.svg");
|
|
44896
44931
|
var rectangleIcon = __webpack_require__(/*! ../../../public/imgs/rectangleIconDark.svg */ "../public/imgs/rectangleIconDark.svg");
|
|
44897
44932
|
var ellipseIcon = __webpack_require__(/*! ../../../public/imgs/ellipseIconDark.svg */ "../public/imgs/ellipseIconDark.svg");
|
|
44898
44933
|
var gridIcon = __webpack_require__(/*! ../../../public/imgs/gridIconDark.svg */ "../public/imgs/gridIconDark.svg");
|
|
@@ -45251,23 +45286,7 @@ var PropertyTabComponent = /** @class */ (function (_super) {
|
|
|
45251
45286
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "title" },
|
|
45252
45287
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_28__["TextInputLineComponent"], { noUnderline: true, lockObject: this._lockObject, label: "", target: this.state.currentNode, propertyName: "name", onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }))),
|
|
45253
45288
|
this.renderProperties(),
|
|
45254
|
-
((_b = (_a = this.state.currentNode) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.typeName) === "Grid" && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_parentingPropertyGridComponent__WEBPACK_IMPORTED_MODULE_29__["ParentingPropertyGridComponent"], { control: this.state.currentNode, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, lockObject: this._lockObject }))
|
|
45255
|
-
this.state.currentNode !== this.props.globalState.guiTexture.getChildren()[0] && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
|
45256
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("hr", { className: "ge" }),
|
|
45257
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: "DELETE ELEMENT", onClick: function () {
|
|
45258
|
-
var _a;
|
|
45259
|
-
if (_this.state.currentNode) {
|
|
45260
|
-
_this.props.globalState.guiTexture.removeControl(_this.state.currentNode);
|
|
45261
|
-
(_a = _this.props.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(_this.state.currentNode);
|
|
45262
|
-
_this.state.currentNode.dispose();
|
|
45263
|
-
}
|
|
45264
|
-
_this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
|
|
45265
|
-
} }),
|
|
45266
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_sharedUiComponents_lines_buttonLineComponent__WEBPACK_IMPORTED_MODULE_2__["ButtonLineComponent"], { label: "COPY ELEMENT", onClick: function () {
|
|
45267
|
-
if (_this.state.currentNode) {
|
|
45268
|
-
_this.props.globalState.workbench.CopyGUIControl(_this.state.currentNode);
|
|
45269
|
-
}
|
|
45270
|
-
} })))));
|
|
45289
|
+
((_b = (_a = this.state.currentNode) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.typeName) === "Grid" && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_parentingPropertyGridComponent__WEBPACK_IMPORTED_MODULE_29__["ParentingPropertyGridComponent"], { control: this.state.currentNode, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, lockObject: this._lockObject }))));
|
|
45271
45290
|
}
|
|
45272
45291
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "ge-propertyTab" },
|
|
45273
45292
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "header" },
|
|
@@ -47739,18 +47758,521 @@ var GUIEditorNodeMaterial = {
|
|
|
47739
47758
|
};
|
|
47740
47759
|
|
|
47741
47760
|
|
|
47761
|
+
/***/ }),
|
|
47762
|
+
|
|
47763
|
+
/***/ "./diagram/guiGizmo.tsx":
|
|
47764
|
+
/*!******************************!*\
|
|
47765
|
+
!*** ./diagram/guiGizmo.tsx ***!
|
|
47766
|
+
\******************************/
|
|
47767
|
+
/*! exports provided: GuiGizmoComponent */
|
|
47768
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
47769
|
+
|
|
47770
|
+
"use strict";
|
|
47771
|
+
__webpack_require__.r(__webpack_exports__);
|
|
47772
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "GuiGizmoComponent", function() { return GuiGizmoComponent; });
|
|
47773
|
+
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
|
|
47774
|
+
/* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @babylonjs/gui/2D/controls/control */ "@babylonjs/gui/2D/controls/button");
|
|
47775
|
+
/* harmony import */ var _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__);
|
|
47776
|
+
/* harmony import */ var _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @babylonjs/core/Maths/math.axis */ "@babylonjs/core/Misc/observable");
|
|
47777
|
+
/* harmony import */ var _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__);
|
|
47778
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
|
|
47779
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_3__);
|
|
47780
|
+
|
|
47781
|
+
|
|
47782
|
+
|
|
47783
|
+
|
|
47784
|
+
|
|
47785
|
+
|
|
47786
|
+
|
|
47787
|
+
|
|
47788
|
+
__webpack_require__(/*! ./workbenchCanvas.scss */ "./diagram/workbenchCanvas.scss");
|
|
47789
|
+
var gizmoPivotIcon = __webpack_require__(/*! ../../public/imgs/gizmoPivotIcon.svg */ "../public/imgs/gizmoPivotIcon.svg");
|
|
47790
|
+
var roundFactor = 100;
|
|
47791
|
+
var round = function (value) { return Math.round(value * roundFactor) / roundFactor; };
|
|
47792
|
+
var GuiGizmoComponent = /** @class */ (function (_super) {
|
|
47793
|
+
Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(GuiGizmoComponent, _super);
|
|
47794
|
+
function GuiGizmoComponent(props) {
|
|
47795
|
+
var _this = _super.call(this, props) || this;
|
|
47796
|
+
_this.scalePoints = [];
|
|
47797
|
+
_this._scalePointIndex = -1;
|
|
47798
|
+
_this._plane = _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Plane"].FromPositionAndNormal(_babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector3"].Zero(), _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Axis"].Y);
|
|
47799
|
+
_this._onUp = function (evt) {
|
|
47800
|
+
// cleanup on pointer up
|
|
47801
|
+
_this._pointerData.pointerDown = false;
|
|
47802
|
+
document.querySelectorAll(".ge-scalePoint").forEach(function (scalePoint) {
|
|
47803
|
+
scalePoint.style.pointerEvents = "auto";
|
|
47804
|
+
});
|
|
47805
|
+
_this._scalePointIndex = -1;
|
|
47806
|
+
};
|
|
47807
|
+
_this._initH = 0;
|
|
47808
|
+
_this._initW = 0;
|
|
47809
|
+
_this._initX = 0;
|
|
47810
|
+
_this._initY = 0;
|
|
47811
|
+
_this._onMove = function () {
|
|
47812
|
+
if (_this._pointerData.pointerDown) {
|
|
47813
|
+
var scene = _this.props.globalState.workbench._scene;
|
|
47814
|
+
var selectedGuiNodes = _this.props.globalState.workbench.selectedGuiNodes;
|
|
47815
|
+
if (selectedGuiNodes.length > 0) {
|
|
47816
|
+
var node = selectedGuiNodes[0];
|
|
47817
|
+
// get the mouse position in node space
|
|
47818
|
+
var inRTT = _this._mousePointerToRTTSpace(node, scene.pointerX, scene.pointerY);
|
|
47819
|
+
var inNodeSpace = _this._rttToLocalNodeSpace(node, inRTT.x, inRTT.y, undefined, true);
|
|
47820
|
+
// set the corner
|
|
47821
|
+
_this._setNodeCorner(node, inNodeSpace, _this._scalePointIndex);
|
|
47822
|
+
//convert to percentage
|
|
47823
|
+
if (_this._responsive) {
|
|
47824
|
+
_this.props.globalState.workbench.convertToPercentage(node, false);
|
|
47825
|
+
}
|
|
47826
|
+
_this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
|
|
47827
|
+
}
|
|
47828
|
+
}
|
|
47829
|
+
};
|
|
47830
|
+
_this._setMousePosition = function (index) {
|
|
47831
|
+
_this._pointerData.pointerDown = true;
|
|
47832
|
+
_this._scalePointIndex = index;
|
|
47833
|
+
document.querySelectorAll(".ge-scalePoint").forEach(function (scalePoint) {
|
|
47834
|
+
scalePoint.style.pointerEvents = "none";
|
|
47835
|
+
});
|
|
47836
|
+
var selectedGuiNodes = _this.props.globalState.workbench.selectedGuiNodes;
|
|
47837
|
+
if (selectedGuiNodes.length > 0) {
|
|
47838
|
+
var node = selectedGuiNodes[0];
|
|
47839
|
+
_this._nodeToCorners(node);
|
|
47840
|
+
_this._initW = node.widthInPixels;
|
|
47841
|
+
_this._initH = node.heightInPixels;
|
|
47842
|
+
_this._initY = node.topInPixels;
|
|
47843
|
+
_this._initX = node.leftInPixels;
|
|
47844
|
+
}
|
|
47845
|
+
};
|
|
47846
|
+
_this.props.globalState.guiGizmo = _this;
|
|
47847
|
+
_this._responsive = _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["DataStorage"].ReadBoolean("Responsive", true);
|
|
47848
|
+
_this._pointerData = { corners: [new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"]()], pointerDown: false };
|
|
47849
|
+
_this._htmlPoints = [new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](), new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"]()];
|
|
47850
|
+
_this._matrixCache = [_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Matrix2D"].Identity(), _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Matrix2D"].Identity(), _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Matrix2D"].Identity(), _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Matrix2D"].Identity()];
|
|
47851
|
+
// Set visibility
|
|
47852
|
+
props.globalState.onSelectionChangedObservable.add(function (selection) {
|
|
47853
|
+
if (selection) {
|
|
47854
|
+
_this.scalePoints.forEach(function (scalePoint) {
|
|
47855
|
+
scalePoint.style.display = "flex";
|
|
47856
|
+
});
|
|
47857
|
+
}
|
|
47858
|
+
else {
|
|
47859
|
+
_this.scalePoints.forEach(function (scalePoint) {
|
|
47860
|
+
scalePoint.style.display = "none";
|
|
47861
|
+
});
|
|
47862
|
+
}
|
|
47863
|
+
_this.updateGizmo(true);
|
|
47864
|
+
});
|
|
47865
|
+
_this.props.globalState.onResponsiveChangeObservable.add(function (value) {
|
|
47866
|
+
_this._responsive = value;
|
|
47867
|
+
});
|
|
47868
|
+
_this.props.globalState.onGizmoUpdateRequireObservable.add(function () {
|
|
47869
|
+
// TODO - no need to update on each frame.
|
|
47870
|
+
_this.updateGizmo(true);
|
|
47871
|
+
});
|
|
47872
|
+
return _this;
|
|
47873
|
+
}
|
|
47874
|
+
GuiGizmoComponent.prototype.componentDidMount = function () { };
|
|
47875
|
+
/**
|
|
47876
|
+
* Update the gizmo's corners positions
|
|
47877
|
+
* @param force should the update be forced. otherwise it will be updated only when the pointer is down
|
|
47878
|
+
*/
|
|
47879
|
+
GuiGizmoComponent.prototype.updateGizmo = function (force) {
|
|
47880
|
+
var _this = this;
|
|
47881
|
+
var selectedGuiNodes = this.props.globalState.workbench.selectedGuiNodes;
|
|
47882
|
+
if (selectedGuiNodes.length > 0 && (force || this._pointerData.pointerDown)) {
|
|
47883
|
+
var node_1 = selectedGuiNodes[0];
|
|
47884
|
+
// Calculating the offsets for each scale point.
|
|
47885
|
+
var half = 1 / 2;
|
|
47886
|
+
this._htmlPoints[0].x = -node_1.widthInPixels * half;
|
|
47887
|
+
this._htmlPoints[0].y = node_1.heightInPixels * half;
|
|
47888
|
+
this._htmlPoints[1].x = -node_1.widthInPixels * half;
|
|
47889
|
+
this._htmlPoints[1].y = -node_1.heightInPixels * half;
|
|
47890
|
+
this._htmlPoints[2].x = node_1.widthInPixels * half;
|
|
47891
|
+
this._htmlPoints[2].y = -node_1.heightInPixels * half;
|
|
47892
|
+
this._htmlPoints[3].x = node_1.widthInPixels * half;
|
|
47893
|
+
this._htmlPoints[3].y = node_1.heightInPixels * half;
|
|
47894
|
+
this._htmlPoints[4].x = -node_1.widthInPixels * half;
|
|
47895
|
+
this._htmlPoints[5].y = -node_1.heightInPixels * half;
|
|
47896
|
+
this._htmlPoints[6].x = node_1.widthInPixels * half;
|
|
47897
|
+
this._htmlPoints[7].y = node_1.heightInPixels * half;
|
|
47898
|
+
// Calculate the pivot point
|
|
47899
|
+
var pivotX = (node_1.transformCenterX - 0.5) * 2;
|
|
47900
|
+
var pivotY = (node_1.transformCenterY - 0.5) * 2;
|
|
47901
|
+
this._htmlPoints[8].x = node_1.widthInPixels * half * pivotX;
|
|
47902
|
+
this._htmlPoints[8].y = node_1.heightInPixels * half * pivotY;
|
|
47903
|
+
this.scalePoints.forEach(function (scalePoint, index) {
|
|
47904
|
+
// TODO optimize this - unify?
|
|
47905
|
+
var result = _this._nodeToRTTSpace(node_1, _this._htmlPoints[index].x, _this._htmlPoints[index].y, undefined, false);
|
|
47906
|
+
var finalResult = _this._rttToCanvasSpace(node_1, result.x, result.y);
|
|
47907
|
+
var scene = _this.props.globalState.workbench._scene;
|
|
47908
|
+
var engine = scene.getEngine();
|
|
47909
|
+
// If the scale point is outside the viewport, do not render
|
|
47910
|
+
scalePoint.style.display =
|
|
47911
|
+
finalResult.x < 0 || finalResult.x < 0 || finalResult.x > engine.getRenderWidth() || finalResult.y > engine.getRenderHeight() ? "none" : "flex";
|
|
47912
|
+
if (scalePoint.style.display === "flex") {
|
|
47913
|
+
scalePoint.style.left = finalResult.x + "px";
|
|
47914
|
+
scalePoint.style.top = finalResult.y + "px";
|
|
47915
|
+
var rotate = _this.getRotation(node_1) * (180 / Math.PI);
|
|
47916
|
+
scalePoint.style.transform = "translate(-50%, -50%) rotate(" + rotate + "deg)";
|
|
47917
|
+
}
|
|
47918
|
+
});
|
|
47919
|
+
}
|
|
47920
|
+
};
|
|
47921
|
+
GuiGizmoComponent.prototype._resetMatrixArray = function () {
|
|
47922
|
+
this._matrixCache.forEach(function (matrix) {
|
|
47923
|
+
_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Matrix2D"].IdentityToRef(matrix);
|
|
47924
|
+
});
|
|
47925
|
+
};
|
|
47926
|
+
/**
|
|
47927
|
+
* This function calculates a local matrix for a node, including it's full transformation and pivot point
|
|
47928
|
+
*
|
|
47929
|
+
* @param node the node to calculate the matrix for
|
|
47930
|
+
* @param useStoredValues should the stored (cached) values be used to calculate the matrix
|
|
47931
|
+
* @returns a new matrix for the control
|
|
47932
|
+
*/
|
|
47933
|
+
GuiGizmoComponent.prototype._getNodeMatrix = function (node, useStoredValues) {
|
|
47934
|
+
var size = this.props.globalState.guiTexture.getSize();
|
|
47935
|
+
// parent should always be defined, but stay safe
|
|
47936
|
+
var parentWidth = node.parent ? node.parent._currentMeasure.width : size.width;
|
|
47937
|
+
var parentHeight = node.parent ? node.parent._currentMeasure.height : size.height;
|
|
47938
|
+
var x = 0;
|
|
47939
|
+
var y = 0;
|
|
47940
|
+
var width = useStoredValues ? this._initW : node.widthInPixels;
|
|
47941
|
+
var height = useStoredValues ? this._initH : node.heightInPixels;
|
|
47942
|
+
var left = useStoredValues ? this._initX : node.leftInPixels;
|
|
47943
|
+
var top = useStoredValues ? this._initY : node.topInPixels;
|
|
47944
|
+
switch (node.horizontalAlignment) {
|
|
47945
|
+
case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].HORIZONTAL_ALIGNMENT_LEFT:
|
|
47946
|
+
x = -(parentWidth - width) / 2;
|
|
47947
|
+
break;
|
|
47948
|
+
case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].HORIZONTAL_ALIGNMENT_RIGHT:
|
|
47949
|
+
x = (parentWidth - width) / 2;
|
|
47950
|
+
break;
|
|
47951
|
+
case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].HORIZONTAL_ALIGNMENT_CENTER:
|
|
47952
|
+
x = 0;
|
|
47953
|
+
break;
|
|
47954
|
+
}
|
|
47955
|
+
switch (node.verticalAlignment) {
|
|
47956
|
+
case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].VERTICAL_ALIGNMENT_TOP:
|
|
47957
|
+
y = -(parentHeight - height) / 2;
|
|
47958
|
+
break;
|
|
47959
|
+
case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].VERTICAL_ALIGNMENT_BOTTOM:
|
|
47960
|
+
y = (parentHeight - height) / 2;
|
|
47961
|
+
break;
|
|
47962
|
+
case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].VERTICAL_ALIGNMENT_CENTER:
|
|
47963
|
+
y = 0;
|
|
47964
|
+
break;
|
|
47965
|
+
}
|
|
47966
|
+
this._resetMatrixArray();
|
|
47967
|
+
var m2d = this._matrixCache[0];
|
|
47968
|
+
var translateTo = this._matrixCache[1];
|
|
47969
|
+
// as this is used later it needs to persist
|
|
47970
|
+
var resultMatrix = _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Matrix2D"].Identity();
|
|
47971
|
+
// the pivot point around which the object transforms
|
|
47972
|
+
var offsetX = width * node.transformCenterX - width / 2;
|
|
47973
|
+
var offsetY = height * node.transformCenterY - height / 2;
|
|
47974
|
+
// pivot changes this point's position! but only in legacy pivot mode
|
|
47975
|
+
if (!node.descendantsOnlyPadding) {
|
|
47976
|
+
// TODO - padding needs to also take scaling into account?
|
|
47977
|
+
offsetX -= ((node.paddingRightInPixels - node.paddingLeftInPixels) * 1) / 2;
|
|
47978
|
+
offsetY -= ((node.paddingBottomInPixels - node.paddingTopInPixels) * 1) / 2;
|
|
47979
|
+
}
|
|
47980
|
+
// Set the translation
|
|
47981
|
+
_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Matrix2D"].TranslationToRef(x + left, y + top, translateTo);
|
|
47982
|
+
// without parents scaling and rotation, calculate world matrix for each
|
|
47983
|
+
var rotation = this.getRotation(node, true);
|
|
47984
|
+
var scaling = this.getScale(node, true);
|
|
47985
|
+
// COmpose doesn't actually translate, but creates a form of pivot in a specific position
|
|
47986
|
+
_babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Matrix2D"].ComposeToRef(-offsetX, -offsetY, rotation, scaling.x, scaling.y, null, m2d);
|
|
47987
|
+
// actually compose the matrix
|
|
47988
|
+
resultMatrix.multiplyToRef(m2d, resultMatrix);
|
|
47989
|
+
resultMatrix.multiplyToRef(translateTo, resultMatrix);
|
|
47990
|
+
return resultMatrix;
|
|
47991
|
+
};
|
|
47992
|
+
/**
|
|
47993
|
+
* Using the node's tree, calculate its world matrix and return it
|
|
47994
|
+
* @param node the node to calculate the matrix for
|
|
47995
|
+
* @param useStoredValuesIfPossible used stored valued (cached when pointer down is clicked)
|
|
47996
|
+
* @returns the world matrix for this node
|
|
47997
|
+
*/
|
|
47998
|
+
GuiGizmoComponent.prototype._nodeToRTTWorldMatrix = function (node, useStoredValuesIfPossible) {
|
|
47999
|
+
var _this = this;
|
|
48000
|
+
var listOfNodes = [node];
|
|
48001
|
+
var parent = node.parent;
|
|
48002
|
+
var child = node;
|
|
48003
|
+
while (parent) {
|
|
48004
|
+
if (parent.typeName === "Grid") {
|
|
48005
|
+
var cellInfo = parent.getChildCellInfo(child);
|
|
48006
|
+
var cell = parent.cells[cellInfo];
|
|
48007
|
+
listOfNodes.push(cell);
|
|
48008
|
+
}
|
|
48009
|
+
listOfNodes.push(parent);
|
|
48010
|
+
child = parent;
|
|
48011
|
+
parent = parent.parent;
|
|
48012
|
+
}
|
|
48013
|
+
this._resetMatrixArray();
|
|
48014
|
+
var matrices = listOfNodes.map(function (node, index) { return _this._getNodeMatrix(node, index === 0 && _this._pointerData.pointerDown && useStoredValuesIfPossible); });
|
|
48015
|
+
return matrices.reduce(function (acc, cur) {
|
|
48016
|
+
acc.multiplyToRef(cur, acc);
|
|
48017
|
+
return acc;
|
|
48018
|
+
}, this._matrixCache[2]);
|
|
48019
|
+
};
|
|
48020
|
+
GuiGizmoComponent.prototype._nodeToRTTSpace = function (node, x, y, reference, useStoredValuesIfPossible) {
|
|
48021
|
+
if (reference === void 0) { reference = new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](); }
|
|
48022
|
+
var worldMatrix = this._nodeToRTTWorldMatrix(node, useStoredValuesIfPossible);
|
|
48023
|
+
worldMatrix.transformCoordinates(x, y, reference);
|
|
48024
|
+
// round
|
|
48025
|
+
reference.x = round(reference.x);
|
|
48026
|
+
reference.y = round(reference.y);
|
|
48027
|
+
return reference;
|
|
48028
|
+
};
|
|
48029
|
+
GuiGizmoComponent.prototype._rttToLocalNodeSpace = function (node, x, y, reference, useStoredValuesIfPossible) {
|
|
48030
|
+
if (reference === void 0) { reference = new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](); }
|
|
48031
|
+
var worldMatrix = this._nodeToRTTWorldMatrix(node, useStoredValuesIfPossible);
|
|
48032
|
+
var inv = this._matrixCache[3];
|
|
48033
|
+
worldMatrix.invertToRef(inv);
|
|
48034
|
+
inv.transformCoordinates(x, y, reference);
|
|
48035
|
+
// round
|
|
48036
|
+
reference.x = round(reference.x);
|
|
48037
|
+
reference.y = round(reference.y);
|
|
48038
|
+
return reference;
|
|
48039
|
+
};
|
|
48040
|
+
GuiGizmoComponent.prototype._rttToCanvasSpace = function (node, x, y, reference) {
|
|
48041
|
+
if (reference === void 0) { reference = new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](); }
|
|
48042
|
+
var tmpVec = new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector3"](x, 0, -y);
|
|
48043
|
+
// Get the final projection in view space
|
|
48044
|
+
var camera = this.props.globalState.workbench._camera;
|
|
48045
|
+
var scene = this.props.globalState.workbench._scene;
|
|
48046
|
+
var engine = scene.getEngine();
|
|
48047
|
+
// TODO - to ref
|
|
48048
|
+
var projected = _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector3"].Project(tmpVec, _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Matrix"].Identity(), scene.getTransformMatrix(), camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
|
|
48049
|
+
// round to 1 decimal points
|
|
48050
|
+
projected.x = round(projected.x);
|
|
48051
|
+
projected.y = round(projected.y);
|
|
48052
|
+
return projected;
|
|
48053
|
+
};
|
|
48054
|
+
GuiGizmoComponent.prototype._mousePointerToRTTSpace = function (node, x, y) {
|
|
48055
|
+
var camera = this.props.globalState.workbench._camera;
|
|
48056
|
+
var scene = this.props.globalState.workbench._scene;
|
|
48057
|
+
var newPosition = this.props.globalState.workbench.getPosition(scene, camera, this._plane, x !== null && x !== void 0 ? x : scene.pointerX, y || scene.pointerY);
|
|
48058
|
+
newPosition.z *= -1;
|
|
48059
|
+
return new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](round(newPosition.x), round(newPosition.z));
|
|
48060
|
+
};
|
|
48061
|
+
/**
|
|
48062
|
+
* Get the scaling of a specific GUI control
|
|
48063
|
+
* @param node the node for which we are getting the scaling
|
|
48064
|
+
* @param relative should we return only the relative scaling (relative to the parent)
|
|
48065
|
+
* @returns an X,Y vector of the scaling
|
|
48066
|
+
*/
|
|
48067
|
+
GuiGizmoComponent.prototype.getScale = function (node, relative) {
|
|
48068
|
+
var x = node.scaleX;
|
|
48069
|
+
var y = node.scaleY;
|
|
48070
|
+
if (relative) {
|
|
48071
|
+
return new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](x, y);
|
|
48072
|
+
}
|
|
48073
|
+
var parent = node.parent;
|
|
48074
|
+
while (parent) {
|
|
48075
|
+
x *= parent.scaleX;
|
|
48076
|
+
y *= parent.scaleY;
|
|
48077
|
+
parent = parent.parent;
|
|
48078
|
+
}
|
|
48079
|
+
return new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](x, y);
|
|
48080
|
+
};
|
|
48081
|
+
GuiGizmoComponent.prototype.getRotation = function (node, relative) {
|
|
48082
|
+
// Gets rotate of a control account for all of it's parents rotations
|
|
48083
|
+
var rotation = node.rotation;
|
|
48084
|
+
if (relative) {
|
|
48085
|
+
return rotation;
|
|
48086
|
+
}
|
|
48087
|
+
var parent = node.parent;
|
|
48088
|
+
while (parent) {
|
|
48089
|
+
rotation += parent.rotation;
|
|
48090
|
+
parent = parent.parent;
|
|
48091
|
+
}
|
|
48092
|
+
return rotation;
|
|
48093
|
+
};
|
|
48094
|
+
GuiGizmoComponent.prototype.createBaseGizmo = function () {
|
|
48095
|
+
var _this = this;
|
|
48096
|
+
var _a, _b;
|
|
48097
|
+
// Get the canvas element from the DOM.
|
|
48098
|
+
var canvas = document.getElementById("workbench-canvas");
|
|
48099
|
+
var _loop_1 = function (i) {
|
|
48100
|
+
var scalePoint = canvas.ownerDocument.createElement("div");
|
|
48101
|
+
scalePoint.className = "ge-scalePoint";
|
|
48102
|
+
(_a = canvas.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(scalePoint);
|
|
48103
|
+
scalePoint.style.position = "absolute";
|
|
48104
|
+
scalePoint.style.display = "none";
|
|
48105
|
+
scalePoint.style.left = i * 100 + "px";
|
|
48106
|
+
scalePoint.style.top = i * 100 + "px";
|
|
48107
|
+
scalePoint.style.transform = "translate(-50%, -50%)";
|
|
48108
|
+
scalePoint.addEventListener("pointerdown", function () {
|
|
48109
|
+
_this._setMousePosition(i);
|
|
48110
|
+
});
|
|
48111
|
+
scalePoint.ondragstart = function (evt) {
|
|
48112
|
+
evt.preventDefault();
|
|
48113
|
+
};
|
|
48114
|
+
scalePoint.draggable = true;
|
|
48115
|
+
scalePoint.addEventListener("pointerup", this_1._onUp);
|
|
48116
|
+
this_1.scalePoints.push(scalePoint);
|
|
48117
|
+
};
|
|
48118
|
+
var this_1 = this;
|
|
48119
|
+
for (var i = 0; i < 8; ++i) {
|
|
48120
|
+
_loop_1(i);
|
|
48121
|
+
}
|
|
48122
|
+
// Create the pivot point which is special
|
|
48123
|
+
var pivotPoint = canvas.ownerDocument.createElement("img");
|
|
48124
|
+
pivotPoint.src = gizmoPivotIcon;
|
|
48125
|
+
pivotPoint.className = "ge-pivotPoint";
|
|
48126
|
+
(_b = canvas.parentElement) === null || _b === void 0 ? void 0 : _b.appendChild(pivotPoint);
|
|
48127
|
+
pivotPoint.style.position = "absolute";
|
|
48128
|
+
pivotPoint.style.display = "none";
|
|
48129
|
+
this.scalePoints.push(pivotPoint);
|
|
48130
|
+
pivotPoint.ondragstart = function (evt) {
|
|
48131
|
+
evt.preventDefault();
|
|
48132
|
+
};
|
|
48133
|
+
pivotPoint.draggable = true;
|
|
48134
|
+
this.updateGizmo();
|
|
48135
|
+
};
|
|
48136
|
+
GuiGizmoComponent.prototype.onUp = function (evt) {
|
|
48137
|
+
this._onUp(evt);
|
|
48138
|
+
};
|
|
48139
|
+
GuiGizmoComponent.prototype.onMove = function (evt) {
|
|
48140
|
+
this._onMove();
|
|
48141
|
+
};
|
|
48142
|
+
/**
|
|
48143
|
+
* Calculate the 4 corners in node space
|
|
48144
|
+
* @param node The node to use
|
|
48145
|
+
*/
|
|
48146
|
+
GuiGizmoComponent.prototype._nodeToCorners = function (node) {
|
|
48147
|
+
var half = 0.5;
|
|
48148
|
+
this._pointerData.corners[0].x = -node.widthInPixels * half;
|
|
48149
|
+
this._pointerData.corners[0].y = node.heightInPixels * half;
|
|
48150
|
+
this._pointerData.corners[1].x = -node.widthInPixels * half;
|
|
48151
|
+
this._pointerData.corners[1].y = -node.heightInPixels * half;
|
|
48152
|
+
this._pointerData.corners[2].x = node.widthInPixels * half;
|
|
48153
|
+
this._pointerData.corners[2].y = -node.heightInPixels * half;
|
|
48154
|
+
this._pointerData.corners[3].x = node.widthInPixels * half;
|
|
48155
|
+
this._pointerData.corners[3].y = node.heightInPixels * half;
|
|
48156
|
+
};
|
|
48157
|
+
/**
|
|
48158
|
+
* Computer the node's width, height, top and left, using the 4 corners
|
|
48159
|
+
* @param node the node we use
|
|
48160
|
+
*/
|
|
48161
|
+
GuiGizmoComponent.prototype._updateNodeFromCorners = function (node) {
|
|
48162
|
+
var upperLeft = this._pointerData.corners[1];
|
|
48163
|
+
var lowerRight = this._pointerData.corners[3];
|
|
48164
|
+
var width = lowerRight.x - upperLeft.x;
|
|
48165
|
+
var height = lowerRight.y - upperLeft.y;
|
|
48166
|
+
var left = this._scalePointIndex === 0 || this._scalePointIndex === 1;
|
|
48167
|
+
var top = this._scalePointIndex === 1 || this._scalePointIndex === 2;
|
|
48168
|
+
// calculate the center point
|
|
48169
|
+
var localRotation = this.getRotation(node, true);
|
|
48170
|
+
var localScaling = this.getScale(node, true);
|
|
48171
|
+
var absoluteCenter = new _babylonjs_core_Maths_math_axis__WEBPACK_IMPORTED_MODULE_2__["Vector2"](upperLeft.x + width * 0.5, upperLeft.y + height * 0.5);
|
|
48172
|
+
var center = absoluteCenter.clone();
|
|
48173
|
+
// move to pivot
|
|
48174
|
+
center.multiplyInPlace(localScaling);
|
|
48175
|
+
var cosRotation = Math.cos(localRotation);
|
|
48176
|
+
var sinRotation = Math.sin(localRotation);
|
|
48177
|
+
var cosRotation180 = Math.cos(localRotation + Math.PI);
|
|
48178
|
+
var sinRotation180 = Math.sin(localRotation + Math.PI);
|
|
48179
|
+
var widthDelta = (this._initW - width) * 0.5;
|
|
48180
|
+
var heightDelta = (this._initH - height) * 0.5;
|
|
48181
|
+
// alignment compensation
|
|
48182
|
+
switch (node.horizontalAlignment) {
|
|
48183
|
+
case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].HORIZONTAL_ALIGNMENT_LEFT:
|
|
48184
|
+
center.x += (left ? widthDelta : -absoluteCenter.x) * cosRotation;
|
|
48185
|
+
center.y += (left ? -widthDelta : absoluteCenter.x) * sinRotation;
|
|
48186
|
+
break;
|
|
48187
|
+
case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].HORIZONTAL_ALIGNMENT_RIGHT:
|
|
48188
|
+
center.x += (left ? -widthDelta : absoluteCenter.x) * cosRotation;
|
|
48189
|
+
center.y += (left ? widthDelta : -absoluteCenter.x) * sinRotation;
|
|
48190
|
+
break;
|
|
48191
|
+
}
|
|
48192
|
+
switch (node.verticalAlignment) {
|
|
48193
|
+
case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].VERTICAL_ALIGNMENT_TOP:
|
|
48194
|
+
center.y += (top ? -heightDelta : absoluteCenter.y) * cosRotation180;
|
|
48195
|
+
center.x += (top ? -heightDelta : absoluteCenter.y) * sinRotation180;
|
|
48196
|
+
break;
|
|
48197
|
+
case _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__["Control"].VERTICAL_ALIGNMENT_BOTTOM:
|
|
48198
|
+
center.y += (top ? heightDelta : -absoluteCenter.y) * cosRotation180;
|
|
48199
|
+
center.x += (top ? heightDelta : -absoluteCenter.y) * sinRotation180;
|
|
48200
|
+
break;
|
|
48201
|
+
}
|
|
48202
|
+
// rotate the center around 0,0
|
|
48203
|
+
var rotatedCenter = this._rotate(center.x, center.y, 0, 0, localRotation);
|
|
48204
|
+
// round the values and set them
|
|
48205
|
+
node.leftInPixels = round(this._initX + rotatedCenter.x);
|
|
48206
|
+
node.topInPixels = round(this._initY + rotatedCenter.y);
|
|
48207
|
+
node.widthInPixels = round(Math.max(10, width));
|
|
48208
|
+
node.heightInPixels = round(Math.max(10, height));
|
|
48209
|
+
if (node.typeName === "Image") {
|
|
48210
|
+
node.autoScale = false;
|
|
48211
|
+
}
|
|
48212
|
+
else if (node.typeName === "TextBlock") {
|
|
48213
|
+
node.resizeToFit = false;
|
|
48214
|
+
}
|
|
48215
|
+
if (this._responsive) {
|
|
48216
|
+
this.props.globalState.workbench.convertToPercentage(node, true);
|
|
48217
|
+
}
|
|
48218
|
+
};
|
|
48219
|
+
GuiGizmoComponent.prototype._rotate = function (x, y, centerX, centerY, angle) {
|
|
48220
|
+
return {
|
|
48221
|
+
x: (x - centerX) * Math.cos(angle) - (y - centerY) * Math.sin(angle) + centerX,
|
|
48222
|
+
y: (x - centerX) * Math.sin(angle) + (y - centerY) * Math.cos(angle) + centerY,
|
|
48223
|
+
};
|
|
48224
|
+
};
|
|
48225
|
+
GuiGizmoComponent.prototype._setNodeCorner = function (node, corner, cornerIndex) {
|
|
48226
|
+
// are we in a fixed-axis situation
|
|
48227
|
+
var fixedAxis = cornerIndex > 3;
|
|
48228
|
+
// the actual corner to update. This relies on the fact that the corners are in a specific order
|
|
48229
|
+
var toUpdate = cornerIndex % 4;
|
|
48230
|
+
if (fixedAxis) {
|
|
48231
|
+
// check which axis is fixed
|
|
48232
|
+
if (cornerIndex === 4 || cornerIndex === 6) {
|
|
48233
|
+
// set the corner's y axis correctly
|
|
48234
|
+
corner.y = this._pointerData.corners[toUpdate].y;
|
|
48235
|
+
}
|
|
48236
|
+
else {
|
|
48237
|
+
// set the corner's x axis correctly
|
|
48238
|
+
corner.x = this._pointerData.corners[toUpdate].x;
|
|
48239
|
+
}
|
|
48240
|
+
}
|
|
48241
|
+
this._pointerData.corners[toUpdate].copyFrom(corner);
|
|
48242
|
+
// also update the other corners
|
|
48243
|
+
var next = (cornerIndex + 1) % 4;
|
|
48244
|
+
var prev = (cornerIndex + 3) % 4;
|
|
48245
|
+
// Update the next and the previous points
|
|
48246
|
+
if (toUpdate % 2 === 0) {
|
|
48247
|
+
this._pointerData.corners[next].x = this._pointerData.corners[toUpdate].x;
|
|
48248
|
+
this._pointerData.corners[prev].y = this._pointerData.corners[toUpdate].y;
|
|
48249
|
+
}
|
|
48250
|
+
else {
|
|
48251
|
+
this._pointerData.corners[next].y = this._pointerData.corners[toUpdate].y;
|
|
48252
|
+
this._pointerData.corners[prev].x = this._pointerData.corners[toUpdate].x;
|
|
48253
|
+
}
|
|
48254
|
+
// update the transformation accordingly
|
|
48255
|
+
this._updateNodeFromCorners(node);
|
|
48256
|
+
};
|
|
48257
|
+
GuiGizmoComponent.prototype.render = function () {
|
|
48258
|
+
return null;
|
|
48259
|
+
};
|
|
48260
|
+
return GuiGizmoComponent;
|
|
48261
|
+
}(react__WEBPACK_IMPORTED_MODULE_3__["Component"]));
|
|
48262
|
+
|
|
48263
|
+
|
|
48264
|
+
|
|
47742
48265
|
/***/ }),
|
|
47743
48266
|
|
|
47744
48267
|
/***/ "./diagram/workbench.tsx":
|
|
47745
48268
|
/*!*******************************!*\
|
|
47746
48269
|
!*** ./diagram/workbench.tsx ***!
|
|
47747
48270
|
\*******************************/
|
|
47748
|
-
/*! exports provided:
|
|
48271
|
+
/*! exports provided: ConstraintDirection, WorkbenchComponent */
|
|
47749
48272
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
47750
48273
|
|
|
47751
48274
|
"use strict";
|
|
47752
48275
|
__webpack_require__.r(__webpack_exports__);
|
|
47753
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isFramePortData", function() { return isFramePortData; });
|
|
47754
48276
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ConstraintDirection", function() { return ConstraintDirection; });
|
|
47755
48277
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "WorkbenchComponent", function() { return WorkbenchComponent; });
|
|
47756
48278
|
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
|
|
@@ -47787,13 +48309,6 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
47787
48309
|
|
|
47788
48310
|
|
|
47789
48311
|
__webpack_require__(/*! ./workbenchCanvas.scss */ "./diagram/workbenchCanvas.scss");
|
|
47790
|
-
var isFramePortData = function (variableToCheck) {
|
|
47791
|
-
if (variableToCheck) {
|
|
47792
|
-
return variableToCheck !== undefined;
|
|
47793
|
-
}
|
|
47794
|
-
else
|
|
47795
|
-
return false;
|
|
47796
|
-
};
|
|
47797
48312
|
var ConstraintDirection;
|
|
47798
48313
|
(function (ConstraintDirection) {
|
|
47799
48314
|
ConstraintDirection[ConstraintDirection["NONE"] = 0] = "NONE";
|
|
@@ -47813,13 +48328,16 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
47813
48328
|
_this._constraintDirection = ConstraintDirection.NONE;
|
|
47814
48329
|
_this._forcePanning = false;
|
|
47815
48330
|
_this._forceZooming = false;
|
|
47816
|
-
_this._forceMoving = false;
|
|
47817
48331
|
_this._forceSelecting = true;
|
|
47818
48332
|
_this._outlines = false;
|
|
47819
48333
|
_this._isOverGUINode = [];
|
|
47820
48334
|
_this._clipboard = [];
|
|
47821
48335
|
_this._selectAll = false;
|
|
47822
48336
|
_this._cameraMaxRadiasFactor = 16384; // 2^13
|
|
48337
|
+
_this._mainSelection = null;
|
|
48338
|
+
_this._selectionDepth = 0;
|
|
48339
|
+
_this._doubleClick = null;
|
|
48340
|
+
_this._lockMainSelection = false;
|
|
47823
48341
|
_this.keyEvent = function (evt) {
|
|
47824
48342
|
_this._ctrlKeyIsPressed = evt.ctrlKey;
|
|
47825
48343
|
_this._altKeyIsPressed = evt.altKey;
|
|
@@ -47873,6 +48391,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
47873
48391
|
_this.blurEvent = function () {
|
|
47874
48392
|
_this._ctrlKeyIsPressed = false;
|
|
47875
48393
|
_this._constraintDirection = ConstraintDirection.NONE;
|
|
48394
|
+
_this.props.globalState.guiGizmo.onUp();
|
|
47876
48395
|
};
|
|
47877
48396
|
_this.isUp = true;
|
|
47878
48397
|
_this._rootContainer = react__WEBPACK_IMPORTED_MODULE_1__["createRef"]();
|
|
@@ -47882,6 +48401,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
47882
48401
|
_this.changeSelectionHighlight(false);
|
|
47883
48402
|
_this._selectedGuiNodes = [];
|
|
47884
48403
|
_this._selectAll = false;
|
|
48404
|
+
_this._mainSelection = null;
|
|
47885
48405
|
}
|
|
47886
48406
|
else {
|
|
47887
48407
|
if (selection instanceof _babylonjs_gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__["Control"]) {
|
|
@@ -47898,6 +48418,11 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
47898
48418
|
else if (_this._selectedGuiNodes.length <= 1) {
|
|
47899
48419
|
_this.changeSelectionHighlight(false);
|
|
47900
48420
|
_this._selectedGuiNodes = [selection];
|
|
48421
|
+
if (!_this._lockMainSelection && selection != _this.props.globalState.guiTexture._rootContainer) {
|
|
48422
|
+
//incase the selection did not come from the canvas and mouse
|
|
48423
|
+
_this._mainSelection = selection;
|
|
48424
|
+
}
|
|
48425
|
+
_this._lockMainSelection = false;
|
|
47901
48426
|
_this._selectAll = false;
|
|
47902
48427
|
}
|
|
47903
48428
|
_this.changeSelectionHighlight(true);
|
|
@@ -47907,7 +48432,6 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
47907
48432
|
props.globalState.onPanObservable.add(function () {
|
|
47908
48433
|
_this._forcePanning = !_this._forcePanning;
|
|
47909
48434
|
_this._forceSelecting = false;
|
|
47910
|
-
_this._forceMoving = false;
|
|
47911
48435
|
_this._forceZooming = false;
|
|
47912
48436
|
if (!_this._forcePanning) {
|
|
47913
48437
|
_this.globalState.onSelectionButtonObservable.notifyObservers();
|
|
@@ -47918,40 +48442,18 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
47918
48442
|
_this.updateHitTest(_this.globalState.guiTexture.getChildren()[0], _this._forceSelecting);
|
|
47919
48443
|
_this.artBoardBackground.isHitTestVisible = true;
|
|
47920
48444
|
});
|
|
47921
|
-
props.globalState.onMoveObservable.add(function () {
|
|
47922
|
-
_this._forceMoving = !_this._forceMoving;
|
|
47923
|
-
_this._forcePanning = false;
|
|
47924
|
-
_this._forceZooming = false;
|
|
47925
|
-
_this._forceSelecting = false;
|
|
47926
|
-
_this.updateHitTest(_this.globalState.guiTexture.getChildren()[0], _this._forceSelecting);
|
|
47927
|
-
if (!_this._forceSelecting) {
|
|
47928
|
-
_this.updateHitTestForSelection(true);
|
|
47929
|
-
}
|
|
47930
|
-
if (!_this._forceMoving) {
|
|
47931
|
-
_this.globalState.onSelectionButtonObservable.notifyObservers();
|
|
47932
|
-
}
|
|
47933
|
-
else {
|
|
47934
|
-
_this._canvas.style.cursor = "move";
|
|
47935
|
-
}
|
|
47936
|
-
_this.artBoardBackground.isHitTestVisible = true;
|
|
47937
|
-
});
|
|
47938
48445
|
props.globalState.onSelectionButtonObservable.add(function () {
|
|
47939
48446
|
_this._forceSelecting = !_this._forceSelecting;
|
|
47940
48447
|
_this._forcePanning = false;
|
|
47941
48448
|
_this._forceZooming = false;
|
|
47942
|
-
_this._forceMoving = false;
|
|
47943
48449
|
_this._canvas.style.cursor = "default";
|
|
47944
48450
|
_this.updateHitTest(_this.globalState.guiTexture.getChildren()[0], _this._forceSelecting);
|
|
47945
|
-
if (_this._forceMoving) {
|
|
47946
|
-
_this.updateHitTestForSelection(true);
|
|
47947
|
-
}
|
|
47948
48451
|
_this.artBoardBackground.isHitTestVisible = true;
|
|
47949
48452
|
});
|
|
47950
48453
|
props.globalState.onZoomObservable.add(function () {
|
|
47951
48454
|
_this._forceZooming = !_this._forceZooming;
|
|
47952
48455
|
_this._forcePanning = false;
|
|
47953
48456
|
_this._forceSelecting = false;
|
|
47954
|
-
_this._forceMoving = false;
|
|
47955
48457
|
if (!_this._forceZooming) {
|
|
47956
48458
|
_this.globalState.onSelectionButtonObservable.notifyObservers();
|
|
47957
48459
|
}
|
|
@@ -47984,6 +48486,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
47984
48486
|
_this.props.globalState.hostDocument.addEventListener("keydown", _this.keyEvent, false);
|
|
47985
48487
|
_this.props.globalState.hostDocument.defaultView.addEventListener("blur", _this.blurEvent, false);
|
|
47986
48488
|
props.globalState.onWindowResizeObservable.add(function () {
|
|
48489
|
+
//this.props.globalState.onGizmoUpdateRequireObservable.notifyObservers();
|
|
47987
48490
|
_this._engine.resize();
|
|
47988
48491
|
});
|
|
47989
48492
|
_this.props.globalState.workbench = _this;
|
|
@@ -48010,6 +48513,47 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48010
48513
|
enumerable: false,
|
|
48011
48514
|
configurable: true
|
|
48012
48515
|
});
|
|
48516
|
+
// given a control gets the parent up the tree selectionDepth times. Selection depth is altered as we go down the tree.
|
|
48517
|
+
WorkbenchComponent.prototype._getParentWithDepth = function (control) {
|
|
48518
|
+
--this._selectionDepth;
|
|
48519
|
+
var parent = control;
|
|
48520
|
+
for (var i = 0; i < this._selectionDepth; ++i) {
|
|
48521
|
+
if (!parent.parent) {
|
|
48522
|
+
break;
|
|
48523
|
+
}
|
|
48524
|
+
parent = parent.parent;
|
|
48525
|
+
}
|
|
48526
|
+
return parent;
|
|
48527
|
+
};
|
|
48528
|
+
//gets the higher parent of a given control.
|
|
48529
|
+
WorkbenchComponent.prototype._getMaxParent = function (control, maxParent) {
|
|
48530
|
+
var parent = control;
|
|
48531
|
+
this._selectionDepth = 0;
|
|
48532
|
+
while (parent.parent && parent.parent !== maxParent) {
|
|
48533
|
+
parent = parent.parent;
|
|
48534
|
+
++this._selectionDepth;
|
|
48535
|
+
}
|
|
48536
|
+
return parent;
|
|
48537
|
+
};
|
|
48538
|
+
WorkbenchComponent.prototype.determineMouseSelection = function (selection) {
|
|
48539
|
+
if (selection && this._selectedGuiNodes.length <= 1) {
|
|
48540
|
+
// if we're still on the same main selection, got down the tree.
|
|
48541
|
+
if (selection === this._selectedGuiNodes[0] || selection === this._mainSelection) {
|
|
48542
|
+
selection = this._getParentWithDepth(selection);
|
|
48543
|
+
}
|
|
48544
|
+
else { // get the start of our tree by getting our max parent and storing our main selected control
|
|
48545
|
+
if (this._isMainSelectionParent(selection) && this._mainSelection) {
|
|
48546
|
+
selection = this._getParentWithDepth(selection);
|
|
48547
|
+
}
|
|
48548
|
+
else {
|
|
48549
|
+
selection = this._getMaxParent(selection, this.globalState.guiTexture._rootContainer);
|
|
48550
|
+
}
|
|
48551
|
+
this._mainSelection = selection;
|
|
48552
|
+
}
|
|
48553
|
+
}
|
|
48554
|
+
this._lockMainSelection = true;
|
|
48555
|
+
this.props.globalState.onSelectionChangedObservable.notifyObservers(selection);
|
|
48556
|
+
};
|
|
48013
48557
|
WorkbenchComponent.prototype.updateHitTest = function (guiControl, value) {
|
|
48014
48558
|
var _this = this;
|
|
48015
48559
|
guiControl.isHitTestVisible = value;
|
|
@@ -48033,6 +48577,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48033
48577
|
};
|
|
48034
48578
|
WorkbenchComponent.prototype.copyToClipboard = function () {
|
|
48035
48579
|
var _this = this;
|
|
48580
|
+
this._clipboard = [];
|
|
48036
48581
|
if (this._selectAll) {
|
|
48037
48582
|
var index_2 = 0;
|
|
48038
48583
|
this.nodes.forEach(function (node) {
|
|
@@ -48177,11 +48722,11 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48177
48722
|
this._selectedGuiNodes.forEach(function (node) {
|
|
48178
48723
|
if (_this._outlines) {
|
|
48179
48724
|
node.isHighlighted = true;
|
|
48180
|
-
node.highlightLineWidth =
|
|
48725
|
+
node.highlightLineWidth = 5;
|
|
48181
48726
|
}
|
|
48182
48727
|
else {
|
|
48183
|
-
node.isHighlighted = value;
|
|
48184
|
-
node.highlightLineWidth =
|
|
48728
|
+
node.isHighlighted = value && node.typeName === "Grid";
|
|
48729
|
+
node.highlightLineWidth = 5;
|
|
48185
48730
|
}
|
|
48186
48731
|
});
|
|
48187
48732
|
this.updateHitTestForSelection(value);
|
|
@@ -48205,6 +48750,17 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48205
48750
|
this.globalState.guiTexture.addControl(guiElement);
|
|
48206
48751
|
return newGuiNode;
|
|
48207
48752
|
};
|
|
48753
|
+
//is the
|
|
48754
|
+
WorkbenchComponent.prototype._isMainSelectionParent = function (control) {
|
|
48755
|
+
do {
|
|
48756
|
+
if (this._mainSelection === control) {
|
|
48757
|
+
return true;
|
|
48758
|
+
}
|
|
48759
|
+
;
|
|
48760
|
+
control = (control === null || control === void 0 ? void 0 : control.parent) || null;
|
|
48761
|
+
} while (control);
|
|
48762
|
+
return false;
|
|
48763
|
+
};
|
|
48208
48764
|
WorkbenchComponent.prototype.createNewGuiNode = function (guiControl) {
|
|
48209
48765
|
var _this = this;
|
|
48210
48766
|
var onPointerUp = guiControl.onPointerUpObservable.add(function (evt) {
|
|
@@ -48214,7 +48770,17 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48214
48770
|
if (!_this.isUp || evt.buttonIndex > 0)
|
|
48215
48771
|
return;
|
|
48216
48772
|
if (_this._forceSelecting) {
|
|
48217
|
-
|
|
48773
|
+
// if this is our first click and the clicked control is a child the of the main selected control.
|
|
48774
|
+
if (!_this._doubleClick && _this._isMainSelectionParent(guiControl)) {
|
|
48775
|
+
_this._doubleClick = guiControl;
|
|
48776
|
+
window.setTimeout(function () {
|
|
48777
|
+
_this._doubleClick = null;
|
|
48778
|
+
}, _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Scene"].DoubleClickDelay);
|
|
48779
|
+
}
|
|
48780
|
+
else { //function will either select our new main control or contrue down the tree.
|
|
48781
|
+
_this.determineMouseSelection(guiControl);
|
|
48782
|
+
_this._doubleClick = null;
|
|
48783
|
+
}
|
|
48218
48784
|
_this.isUp = false;
|
|
48219
48785
|
}
|
|
48220
48786
|
});
|
|
@@ -48384,33 +48950,42 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48384
48950
|
guiControl.topInPixels += newY;
|
|
48385
48951
|
//convert to percentage
|
|
48386
48952
|
if (this._responsive) {
|
|
48387
|
-
|
|
48388
|
-
var ratioY = this._textureMesh.scaling.z;
|
|
48389
|
-
if (guiControl.parent) {
|
|
48390
|
-
if (guiControl.parent.typeName === "Grid") {
|
|
48391
|
-
var cellInfo = guiControl.parent.getChildCellInfo(guiControl);
|
|
48392
|
-
var cell = guiControl.parent.cells[cellInfo];
|
|
48393
|
-
ratioX = cell.widthInPixels;
|
|
48394
|
-
ratioY = cell.heightInPixels;
|
|
48395
|
-
}
|
|
48396
|
-
else if (guiControl.parent.typeName === "Rectangle" || guiControl.parent.typeName === "Button") {
|
|
48397
|
-
var thickness = guiControl.parent.thickness * 2;
|
|
48398
|
-
ratioX = guiControl.parent._currentMeasure.width - thickness;
|
|
48399
|
-
ratioY = guiControl.parent._currentMeasure.height - thickness;
|
|
48400
|
-
}
|
|
48401
|
-
else {
|
|
48402
|
-
ratioX = guiControl.parent._currentMeasure.width;
|
|
48403
|
-
ratioY = guiControl.parent._currentMeasure.height;
|
|
48404
|
-
}
|
|
48405
|
-
}
|
|
48406
|
-
var left = (guiControl.leftInPixels * 100) / ratioX;
|
|
48407
|
-
var top_1 = (guiControl.topInPixels * 100) / ratioY;
|
|
48408
|
-
guiControl.left = left.toFixed(2) + "%";
|
|
48409
|
-
guiControl.top = top_1.toFixed(2) + "%";
|
|
48953
|
+
this.convertToPercentage(guiControl, false);
|
|
48410
48954
|
}
|
|
48411
48955
|
this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
|
|
48412
48956
|
return true;
|
|
48413
48957
|
};
|
|
48958
|
+
WorkbenchComponent.prototype.convertToPercentage = function (guiControl, includeScale) {
|
|
48959
|
+
var ratioX = this._textureMesh.scaling.x;
|
|
48960
|
+
var ratioY = this._textureMesh.scaling.z;
|
|
48961
|
+
if (guiControl.parent) {
|
|
48962
|
+
if (guiControl.parent.typeName === "Grid") {
|
|
48963
|
+
var cellInfo = guiControl.parent.getChildCellInfo(guiControl);
|
|
48964
|
+
var cell = guiControl.parent.cells[cellInfo];
|
|
48965
|
+
ratioX = cell.widthInPixels;
|
|
48966
|
+
ratioY = cell.heightInPixels;
|
|
48967
|
+
}
|
|
48968
|
+
else if (guiControl.parent.typeName === "Rectangle" || guiControl.parent.typeName === "Button") {
|
|
48969
|
+
var thickness = guiControl.parent.thickness * 2;
|
|
48970
|
+
ratioX = guiControl.parent._currentMeasure.width - thickness;
|
|
48971
|
+
ratioY = guiControl.parent._currentMeasure.height - thickness;
|
|
48972
|
+
}
|
|
48973
|
+
else {
|
|
48974
|
+
ratioX = guiControl.parent._currentMeasure.width;
|
|
48975
|
+
ratioY = guiControl.parent._currentMeasure.height;
|
|
48976
|
+
}
|
|
48977
|
+
}
|
|
48978
|
+
var left = (guiControl.leftInPixels * 100) / ratioX;
|
|
48979
|
+
var top = (guiControl.topInPixels * 100) / ratioY;
|
|
48980
|
+
guiControl.left = left.toFixed(2) + "%";
|
|
48981
|
+
guiControl.top = top.toFixed(2) + "%";
|
|
48982
|
+
if (includeScale) {
|
|
48983
|
+
var width = (guiControl.widthInPixels * 100) / ratioX;
|
|
48984
|
+
var height = (guiControl.heightInPixels * 100) / ratioY;
|
|
48985
|
+
guiControl.width = width.toFixed(2) + "%";
|
|
48986
|
+
guiControl.height = height.toFixed(2) + "%";
|
|
48987
|
+
}
|
|
48988
|
+
};
|
|
48414
48989
|
WorkbenchComponent.prototype.onMove = function (evt) {
|
|
48415
48990
|
var _this = this;
|
|
48416
48991
|
var pos = this.getGroundPosition();
|
|
@@ -48452,7 +49027,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48452
49027
|
if (pos === null && this._forceSelecting && !evt.button) {
|
|
48453
49028
|
this.props.globalState.onSelectionChangedObservable.notifyObservers(null);
|
|
48454
49029
|
}
|
|
48455
|
-
if (this.
|
|
49030
|
+
if (this._forceSelecting) {
|
|
48456
49031
|
this._mouseStartPointX = pos ? pos.x : this._mouseStartPointX;
|
|
48457
49032
|
this._mouseStartPointY = pos ? -pos.z : this._mouseStartPointY;
|
|
48458
49033
|
}
|
|
@@ -48565,6 +49140,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48565
49140
|
var panningFn = function () {
|
|
48566
49141
|
var pos = _this.getPosition(scene, camera, plane);
|
|
48567
49142
|
_this.panning(pos, initialPos, camera.inertia, inertialPanning);
|
|
49143
|
+
//this.props.globalState.onGizmoUpdateRequireObservable.notifyObservers();
|
|
48568
49144
|
};
|
|
48569
49145
|
var inertialPanningFn = function () {
|
|
48570
49146
|
if (inertialPanning.x !== 0 || inertialPanning.y !== 0 || inertialPanning.z !== 0) {
|
|
@@ -48606,6 +49182,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48606
49182
|
scene.onPointerObservable.add(function (p, e) {
|
|
48607
49183
|
_this._panning = false;
|
|
48608
49184
|
removeObservers();
|
|
49185
|
+
_this.props.globalState.guiGizmo.onUp();
|
|
48609
49186
|
}, _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["PointerEventTypes"].POINTERUP);
|
|
48610
49187
|
scene.onKeyboardObservable.add(function (k, e) {
|
|
48611
49188
|
switch (k.event.key) {
|
|
@@ -48628,11 +49205,6 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48628
49205
|
case "G":
|
|
48629
49206
|
_this.globalState.onOutlinesObservable.notifyObservers();
|
|
48630
49207
|
break;
|
|
48631
|
-
case "m": //move
|
|
48632
|
-
case "M":
|
|
48633
|
-
if (!_this._forceMoving)
|
|
48634
|
-
_this.globalState.onMoveObservable.notifyObservers();
|
|
48635
|
-
break;
|
|
48636
49208
|
case "f": //fit to window
|
|
48637
49209
|
case "F":
|
|
48638
49210
|
_this.globalState.onFitToWindowObservable.notifyObservers();
|
|
@@ -48641,6 +49213,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48641
49213
|
break;
|
|
48642
49214
|
}
|
|
48643
49215
|
}, _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["KeyboardEventTypes"].KEYDOWN);
|
|
49216
|
+
scene.onAfterRenderObservable.add(function () { _this.props.globalState.onGizmoUpdateRequireObservable.notifyObservers(); });
|
|
48644
49217
|
scene.onPointerObservable.add(zoomFnScrollWheel, _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["PointerEventTypes"].POINTERWHEEL);
|
|
48645
49218
|
scene.onBeforeRenderObservable.add(inertialPanningFn);
|
|
48646
49219
|
scene.onBeforeRenderObservable.add(wheelPrecisionFn);
|
|
@@ -48652,8 +49225,10 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48652
49225
|
});
|
|
48653
49226
|
};
|
|
48654
49227
|
//Get pos on plane
|
|
48655
|
-
WorkbenchComponent.prototype.getPosition = function (scene, camera, plane) {
|
|
48656
|
-
|
|
49228
|
+
WorkbenchComponent.prototype.getPosition = function (scene, camera, plane, x, y) {
|
|
49229
|
+
if (x === void 0) { x = scene.pointerX; }
|
|
49230
|
+
if (y === void 0) { y = scene.pointerY; }
|
|
49231
|
+
var ray = scene.createPickingRay(x, y, _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Matrix"].Identity(), camera, false);
|
|
48657
49232
|
var distance = ray.intersectsPlane(plane);
|
|
48658
49233
|
//not using this ray again, so modifying its vectors here is fine
|
|
48659
49234
|
return distance !== null ? ray.origin.addInPlace(ray.direction.scaleInPlace(distance)) : _babylonjs_core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__["Vector3"].Zero();
|
|
@@ -48708,6 +49283,7 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48708
49283
|
offset.scaleInPlace(inertiaComp);
|
|
48709
49284
|
ref.addInPlace(offset);
|
|
48710
49285
|
camera.inertialRadiusOffset += delta;
|
|
49286
|
+
//this.props.globalState.onGizmoUpdateRequireObservable.notifyObservers();
|
|
48711
49287
|
};
|
|
48712
49288
|
//Sets x y or z of passed in vector to zero if less than Epsilon
|
|
48713
49289
|
WorkbenchComponent.prototype.zeroIfClose = function (vec) {
|
|
@@ -48723,7 +49299,17 @@ var WorkbenchComponent = /** @class */ (function (_super) {
|
|
|
48723
49299
|
};
|
|
48724
49300
|
WorkbenchComponent.prototype.render = function () {
|
|
48725
49301
|
var _this = this;
|
|
48726
|
-
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("canvas", { id: "workbench-canvas", onPointerMove: function (evt) {
|
|
49302
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("canvas", { id: "workbench-canvas", onPointerMove: function (evt) {
|
|
49303
|
+
if (_this.props.globalState.guiTexture) {
|
|
49304
|
+
_this.onMove(evt);
|
|
49305
|
+
}
|
|
49306
|
+
if (_this.props.globalState.guiGizmo) {
|
|
49307
|
+
_this.props.globalState.guiGizmo.onMove(evt);
|
|
49308
|
+
}
|
|
49309
|
+
}, onPointerDown: function (evt) { return _this.onDown(evt); }, onPointerUp: function (evt) {
|
|
49310
|
+
_this.onUp(evt);
|
|
49311
|
+
_this.props.globalState.guiGizmo.onUp(evt);
|
|
49312
|
+
}, ref: this._rootContainer }));
|
|
48727
49313
|
};
|
|
48728
49314
|
return WorkbenchComponent;
|
|
48729
49315
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
|
@@ -48818,6 +49404,7 @@ var GlobalState = /** @class */ (function () {
|
|
|
48818
49404
|
this.onDraggingEndObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
|
|
48819
49405
|
this.onDraggingStartObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
|
|
48820
49406
|
this.onWindowResizeObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
|
|
49407
|
+
this.onGizmoUpdateRequireObservable = new _babylonjs_core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__["Observable"]();
|
|
48821
49408
|
this.draggedControl = null;
|
|
48822
49409
|
this.isSaving = false;
|
|
48823
49410
|
this.lockObject = new _sharedUiComponents_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_1__["LockObject"]();
|
|
@@ -48887,6 +49474,10 @@ var GUIEditor = /** @class */ (function () {
|
|
|
48887
49474
|
//swallow and continue
|
|
48888
49475
|
}
|
|
48889
49476
|
}
|
|
49477
|
+
if (options.liveGuiTexture) {
|
|
49478
|
+
this._CurrentState.liveGuiTexture = options.liveGuiTexture;
|
|
49479
|
+
}
|
|
49480
|
+
return [2 /*return*/];
|
|
48890
49481
|
}
|
|
48891
49482
|
hostElement = options.hostElement;
|
|
48892
49483
|
if (!hostElement) {
|
|
@@ -48907,6 +49498,7 @@ var GUIEditor = /** @class */ (function () {
|
|
|
48907
49498
|
react_dom__WEBPACK_IMPORTED_MODULE_2__["render"](graphEditor, hostElement);
|
|
48908
49499
|
if (!!globalState.guiTexture) return [3 /*break*/, 4];
|
|
48909
49500
|
globalState.workbench.createGUICanvas();
|
|
49501
|
+
globalState.guiGizmo.createBaseGizmo();
|
|
48910
49502
|
if (!options.currentSnippetToken) return [3 /*break*/, 4];
|
|
48911
49503
|
_a.label = 1;
|
|
48912
49504
|
case 1:
|
|
@@ -49823,6 +50415,17 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
|
|
|
49823
50415
|
|
|
49824
50416
|
/***/ }),
|
|
49825
50417
|
|
|
50418
|
+
/***/ "./sharedUiComponents/imgs/descendantsOnlyPaddingIcon.svg":
|
|
50419
|
+
/*!****************************************************************!*\
|
|
50420
|
+
!*** ./sharedUiComponents/imgs/descendantsOnlyPaddingIcon.svg ***!
|
|
50421
|
+
\****************************************************************/
|
|
50422
|
+
/*! no static exports found */
|
|
50423
|
+
/***/ (function(module, exports) {
|
|
50424
|
+
|
|
50425
|
+
module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' 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='M23.11,9.32a2.23,2.23,0,0,1-2.23,2.24H9.12a2.24,2.24,0,0,1,0-4.47H20.88A2.23,2.23,0,0,1,23.11,9.32ZM21.49,15a2.23,2.23,0,0,1-2.23,2.23H10.74a2.23,2.23,0,0,1,0-4.46h8.52A2.23,2.23,0,0,1,21.49,15Zm-2.44,5.68a2.23,2.23,0,0,1-2.23,2.23H13.18a2.24,2.24,0,0,1,0-4.47h3.64A2.23,2.23,0,0,1,19.05,20.68ZM21.89,9.32a1,1,0,0,0-1-1H9.12a1,1,0,0,0,0,2H20.88A1,1,0,0,0,21.89,9.32ZM20.27,15a1,1,0,0,0-1-1H10.74a1,1,0,0,0,0,2h8.52A1,1,0,0,0,20.27,15Zm-2.43,5.68a1,1,0,0,0-1-1H13.18a1,1,0,1,0,0,2h3.64A1,1,0,0,0,17.84,20.68Z'/%3E%3C/svg%3E"
|
|
50426
|
+
|
|
50427
|
+
/***/ }),
|
|
50428
|
+
|
|
49826
50429
|
/***/ "./sharedUiComponents/imgs/fillColorIcon.svg":
|
|
49827
50430
|
/*!***************************************************!*\
|
|
49828
50431
|
!*** ./sharedUiComponents/imgs/fillColorIcon.svg ***!
|
|
@@ -50265,6 +50868,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
50265
50868
|
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "../../../../node_modules/tslib/tslib.es6.js");
|
|
50266
50869
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
|
|
50267
50870
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
50871
|
+
/* harmony import */ var _fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @fortawesome/react-fontawesome */ "../../../../node_modules/@fortawesome/react-fontawesome/index.es.js");
|
|
50872
|
+
|
|
50268
50873
|
|
|
50269
50874
|
|
|
50270
50875
|
var CheckBoxLineComponent = /** @class */ (function (_super) {
|
|
@@ -50327,8 +50932,10 @@ var CheckBoxLineComponent = /** @class */ (function (_super) {
|
|
|
50327
50932
|
var _this = this;
|
|
50328
50933
|
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "checkBoxLine" },
|
|
50329
50934
|
this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
|
|
50330
|
-
|
|
50331
|
-
|
|
50935
|
+
this.props.label &&
|
|
50936
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.iconLabel }, this.props.label),
|
|
50937
|
+
this.props.faIcons && react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__["FontAwesomeIcon"], { className: "cbx " + (this.props.disabled ? "disabled" : ""), icon: this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled, onClick: function () { return !_this.props.disabled && _this.onChange(); } }),
|
|
50938
|
+
!this.props.faIcons && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "checkBox" },
|
|
50332
50939
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkbox", id: "checkbox" + this._uniqueId, className: "cbx hidden", checked: this.state.isSelected, onChange: function () { return _this.onChange(); }, disabled: !!this.props.disabled }),
|
|
50333
50940
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("label", { htmlFor: "checkbox" + this._uniqueId, className: "lbl" + (!!this.props.disabled ? " disabled" : "") }))));
|
|
50334
50941
|
};
|
|
@@ -50778,6 +51385,9 @@ var FloatLineComponent = /** @class */ (function (_super) {
|
|
|
50778
51385
|
}
|
|
50779
51386
|
}
|
|
50780
51387
|
}
|
|
51388
|
+
else if (this.props.defaultValue != null) {
|
|
51389
|
+
valueAsNumber = this.props.defaultValue;
|
|
51390
|
+
}
|
|
50781
51391
|
this._localChange = true;
|
|
50782
51392
|
this.setState({ value: valueString });
|
|
50783
51393
|
if (isNaN(valueAsNumber)) {
|
|
@@ -50807,7 +51417,7 @@ var FloatLineComponent = /** @class */ (function (_super) {
|
|
|
50807
51417
|
valueAsNumber = parseFloat(this.state.value);
|
|
50808
51418
|
}
|
|
50809
51419
|
var className = this.props.smallUI ? "short" : "value";
|
|
50810
|
-
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("
|
|
51420
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null,
|
|
50811
51421
|
!this.props.useEuler && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine" },
|
|
50812
51422
|
this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
|
|
50813
51423
|
(!this.props.icon || this.props.label != "") && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label)),
|
|
@@ -51262,7 +51872,7 @@ var TextInputLineComponent = /** @class */ (function (_super) {
|
|
|
51262
51872
|
this._localChange = true;
|
|
51263
51873
|
var store = this.props.value !== undefined ? this.props.value : this.props.target[this.props.propertyName];
|
|
51264
51874
|
this.setState({ value: value });
|
|
51265
|
-
if (this.props.propertyName) {
|
|
51875
|
+
if (this.props.propertyName && !this.props.delayInput) {
|
|
51266
51876
|
this.props.target[this.props.propertyName] = value;
|
|
51267
51877
|
}
|
|
51268
51878
|
this.raiseOnPropertyChanged(value, store);
|
|
@@ -51273,7 +51883,10 @@ var TextInputLineComponent = /** @class */ (function (_super) {
|
|
|
51273
51883
|
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" }),
|
|
51274
51884
|
(!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)),
|
|
51275
51885
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "value" + (this.props.noUnderline === true ? " noUnderline" : "") },
|
|
51276
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: this.state.value, onBlur: function () {
|
|
51886
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { value: this.state.value, onBlur: function () {
|
|
51887
|
+
_this.props.lockObject.lock = false;
|
|
51888
|
+
_this.updateValue((_this.props.value !== undefined ? _this.props.value : _this.props.target[_this.props.propertyName]) || "");
|
|
51889
|
+
}, onFocus: function () { return (_this.props.lockObject.lock = true); }, onChange: function (evt) { return _this.updateValue(evt.target.value); } }))));
|
|
51277
51890
|
};
|
|
51278
51891
|
return TextInputLineComponent;
|
|
51279
51892
|
}(react__WEBPACK_IMPORTED_MODULE_1__["Component"]));
|
|
@@ -51577,6 +52190,8 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
51577
52190
|
/* harmony import */ var _sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./sharedComponents/messageDialog */ "./sharedComponents/messageDialog.tsx");
|
|
51578
52191
|
/* harmony import */ var _components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/sceneExplorer/sceneExplorerComponent */ "./components/sceneExplorer/sceneExplorerComponent.tsx");
|
|
51579
52192
|
/* harmony import */ var _components_commandBarComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/commandBarComponent */ "./components/commandBarComponent.tsx");
|
|
52193
|
+
/* harmony import */ var _diagram_guiGizmo__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./diagram/guiGizmo */ "./diagram/guiGizmo.tsx");
|
|
52194
|
+
|
|
51580
52195
|
|
|
51581
52196
|
|
|
51582
52197
|
|
|
@@ -51771,8 +52386,16 @@ var WorkbenchEditor = /** @class */ (function (_super) {
|
|
|
51771
52386
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "leftGrab", onPointerDown: function (evt) { return _this.onPointerDown(evt); }, onPointerUp: function (evt) { return _this.onPointerUp(evt); }, onPointerMove: function (evt) { return _this.resizeColumns(evt); } }),
|
|
51772
52387
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__["SceneExplorerComponent"], { globalState: this.props.globalState, noExpand: true }),
|
|
51773
52388
|
this.createToolbar(),
|
|
51774
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "diagram-container"
|
|
51775
|
-
|
|
52389
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "diagram-container", onDrop: function (event) {
|
|
52390
|
+
if (_this._draggedItem != null) {
|
|
52391
|
+
_this.onCreate(_this._draggedItem);
|
|
52392
|
+
}
|
|
52393
|
+
_this._draggedItem = null;
|
|
52394
|
+
}, onDragOver: function (event) {
|
|
52395
|
+
event.preventDefault();
|
|
52396
|
+
} },
|
|
52397
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_workbench__WEBPACK_IMPORTED_MODULE_7__["WorkbenchComponent"], { ref: "workbenchCanvas", globalState: this.props.globalState }),
|
|
52398
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_diagram_guiGizmo__WEBPACK_IMPORTED_MODULE_11__["GuiGizmoComponent"], { globalState: this.props.globalState })),
|
|
51776
52399
|
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); } }),
|
|
51777
52400
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "right-panel" },
|
|
51778
52401
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_2__["PropertyTabComponent"], { globalState: this.props.globalState })),
|
|
@@ -51916,6 +52539,7 @@ var WorkbenchEditor = /** @class */ (function (_super) {
|
|
|
51916
52539
|
var guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_6__["GUINodeTools"].CreateControlFromString(value);
|
|
51917
52540
|
var newGuiNode = this.props.globalState.workbench.appendBlock(guiElement);
|
|
51918
52541
|
this.props.globalState.onSelectionChangedObservable.notifyObservers(newGuiNode);
|
|
52542
|
+
this.props.globalState.guiGizmo.onUp();
|
|
51919
52543
|
this.forceUpdate();
|
|
51920
52544
|
};
|
|
51921
52545
|
WorkbenchEditor.prototype.createToolbar = function () {
|
|
@@ -51924,7 +52548,7 @@ var WorkbenchEditor = /** @class */ (function (_super) {
|
|
|
51924
52548
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { id: "toolbarGrab" },
|
|
51925
52549
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "blackLine" }),
|
|
51926
52550
|
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "toolbar-content sub1" }, this._items.map(function (m) {
|
|
51927
|
-
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "toolbar-label" + (m.isActive ? " active" : ""), key: m.label, onClick: function () {
|
|
52551
|
+
return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "toolbar-label" + (m.isActive ? " active" : ""), key: m.label, onDragStart: function (evt) { _this._draggedItem = m.label; }, onClick: function () {
|
|
51928
52552
|
if (!m.onClick) {
|
|
51929
52553
|
_this.forceUpdate();
|
|
51930
52554
|
return;
|
|
@@ -51934,8 +52558,8 @@ var WorkbenchEditor = /** @class */ (function (_super) {
|
|
|
51934
52558
|
}
|
|
51935
52559
|
}, title: m.label },
|
|
51936
52560
|
!m.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "toolbar-label-text" }, (m.isActive ? "> " : "") + m.label),
|
|
51937
|
-
m.icon && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "toolbar-icon" },
|
|
51938
|
-
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: m.icon }))),
|
|
52561
|
+
m.icon && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "toolbar-icon", draggable: true },
|
|
52562
|
+
react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: m.icon, width: "40px", height: "40px" }))),
|
|
51939
52563
|
m.onCheck && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", { type: "checkBox", className: "toolbar-label-check", onChange: function (evt) {
|
|
51940
52564
|
_this.forceUpdate();
|
|
51941
52565
|
m.onCheck(evt.target.checked);
|