@babylonjs/gui-editor 5.17.1 → 5.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/babylon.guiEditor.js +1 -1
  2. package/dist/babylon.guiEditor.js.map +1 -1
  3. package/dist/babylon.guiEditor.max.js +322 -113
  4. package/dist/babylon.guiEditor.max.js.map +1 -1
  5. package/dist/babylon.guiEditor.module.d.ts +28 -6
  6. package/package.json +3 -3
package/dist/babylon.guiEditor.max.js CHANGED
@@ -199,7 +199,7 @@ __webpack_require__.r(__webpack_exports__);
199
199
 
200
200
  var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
201
201
  // Module
202
- ___CSS_LOADER_EXPORT___.push([module.id, ":root {\n --selectionGrey: #666666; }\n\n.ge-commands {\n grid-row: 1;\n grid-column: 1;\n user-select: none; }\n .ge-commands * {\n font-family: \"acumin-pro-condensed\";\n font-weight: 600;\n font-size: 12px; }\n .ge-commands .commands-left {\n float: left;\n display: flex; }\n .ge-commands .commands-right {\n float: right;\n display: flex; }\n .ge-commands .commands-right .beta-flag {\n height: 30px;\n position: relative;\n left: -15px; }\n .ge-commands.background-ts .command-button img,\n .ge-commands.background-ts .command-dropdown img {\n filter: invert(64%) sepia(78%) saturate(940%) hue-rotate(323deg) brightness(105%) contrast(103%); }\n .ge-commands.background-ts .command-button .command-dropdown-active,\n .ge-commands.background-ts .command-dropdown .command-dropdown-active {\n color: #333333; }\n .ge-commands.background-ts .command-button:hover img, .ge-commands.background-ts .command-button.activated img,\n .ge-commands.background-ts .command-dropdown:hover img,\n .ge-commands.background-ts .command-dropdown.activated img {\n filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%) !important; }\n .ge-commands.background-js .command-button img,\n .ge-commands.background-js .command-dropdown img {\n filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg); }\n .ge-commands.background-js .command-button .command-dropdown-active,\n .ge-commands.background-js .command-dropdown .command-dropdown-active {\n color: #333333; }\n .ge-commands.background-js .command-button:hover img, .ge-commands.background-js .command-button.activated img,\n .ge-commands.background-js .command-dropdown:hover img,\n .ge-commands.background-js .command-dropdown.activated img {\n filter: invert(17%) !important; }\n .ge-commands .command-button {\n cursor: pointer;\n width: 55px;\n height: 55px; }\n .ge-commands .command-button .command-label {\n display: none; }\n .ge-commands .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-commands .command-button:hover {\n background-color: var(--selectionGrey); }\n .ge-commands .command-button .active {\n transform-origin: center;\n background-color: var(--selectionGrey); }\n .ge-commands .command-button img.active {\n background-color: var(--selectionGrey); }\n .ge-commands .command-dropdown-root {\n position: relative;\n text-transform: uppercase;\n z-index: 1; }\n .ge-commands .command-dropdown {\n cursor: pointer;\n width: 55px;\n height: 55px; }\n .ge-commands .command-dropdown .command-dropdown-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n .ge-commands .command-dropdown .command-dropdown-active {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center;\n font-size: 14px; }\n .ge-commands .command-dropdown:hover, .ge-commands .command-dropdown.activated {\n background-color: #666666;\n color: black; }\n .ge-commands .command-dropdown:active {\n transform-origin: center;\n transform: scale(0.95); }\n .ge-commands .command-dropdown-blocker {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: scale(1);\n z-index: 1; }\n .ge-commands.background-js .command-dropdown-content {\n background: #333333; }\n .ge-commands.background-js .command-dropdown-content .command-dropdown-label:hover {\n background: #333333; }\n .ge-commands.background-ts .command-dropdown-content .command-dropdown-label:hover {\n background: #333333; }\n .ge-commands .command-dropdown-content {\n background: #333333;\n position: absolute;\n top: 55px;\n width: 55px;\n transform: scale(1); }\n .ge-commands .command-dropdown-content.toRight {\n width: 120px; }\n .ge-commands .command-dropdown-content .command-dropdown-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 .ge-commands .command-dropdown-content .command-dropdown-label.active {\n font-weight: bold;\n font-size: 20px; }\n .ge-commands .command-dropdown-content .command-dropdown-label:hover {\n background: var(--selectionGrey); }\n .ge-commands .command-dropdown-content .command-dropdown-label:hover .sub-items {\n display: block; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-label-text {\n font-size: 12px;\n grid-column: 1;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-label-check {\n grid-column: 2;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-arrow {\n grid-column: 2;\n grid-row: 1;\n font-size: 20px;\n font-weight: bold;\n padding-bottom: 10px;\n padding-left: 4px; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items {\n position: absolute;\n left: 200px;\n top: 0;\n width: 150px;\n display: none; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-js {\n background: #bfabff; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-js .sub-item:hover {\n background-color: #333333;\n color: white; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-ts {\n background: #333333; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-ts .sub-item:hover {\n background-color: #333333;\n color: white; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items .sub-item {\n color: white;\n padding: 5px;\n padding-left: 10px;\n height: 35px;\n display: grid; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items .sub-item.checked {\n background: white;\n color: black; }\n .ge-commands .command-dropdown-content .buttonLine {\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 font-size: 12px;\n grid-column: 1;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .buttonLine input[type=\"file\"] {\n display: none; }\n .ge-commands .command-dropdown-content .buttonLine.active {\n font-weight: bold;\n font-size: 20px;\n cursor: pointer; }\n .ge-commands .command-dropdown-content .buttonLine:hover {\n background: var(--selectionGrey);\n cursor: pointer; }\n .ge-commands .command-dropdown-content .buttonLine:hover .sub-items {\n display: block; }\n .ge-commands .command-dropdown-content .buttonLine .file-upload {\n cursor: pointer; }\n .ge-commands .divider {\n display: flex;\n align-items: center;\n border-right: 1px solid black;\n color: white; }\n .ge-commands .divider:last-of-type {\n border-right: none; }\n .ge-commands .divider.padded {\n padding-left: 10px;\n padding-right: 10px; }\n .ge-commands .floatLine,\n .ge-commands .checkBoxLine {\n display: flex;\n align-items: center; }\n .ge-commands .checkBoxLine .icon {\n filter: brightness(10); }\n .ge-commands .checkBoxLine .hidden {\n display: none; }\n .ge-commands .checkBoxLine .checkBox {\n height: 40px; }\n .ge-commands .color3Line {\n display: grid; }\n .ge-commands .color3Line .firstLine {\n display: flex;\n align-items: center; }\n .ge-commands .color3Line .firstLine .label {\n padding-right: 5px; }\n .ge-commands .color3Line .firstLine .floatLine .value {\n padding-left: 2px; }\n .ge-commands .color3Line .firstLine .copy {\n display: none; }\n .ge-commands .color3Line .firstLine .expand {\n display: none; }\n .ge-commands .color3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n .ge-commands .color3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n .ge-commands .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-commands .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-commands .color-picker {\n height: 26px;\n width: 26px; }\n .ge-commands .color-picker .color-rect-background {\n width: calc(100% - 2px);\n height: calc(100% - 2px);\n border: 1px solid white;\n cursor: pointer;\n background: repeating-conic-gradient(#e2e2e2 0% 25%, white 0% 50%) 50%/100% 100%; }\n .ge-commands .color-picker .color-rect-background .color-rect {\n height: 100%; }\n .ge-commands .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n z-index: 2; }\n .ge-commands .color-picker .color-picker-float {\n position: absolute;\n outline: 1px solid black; }\n .ge-commands .color-picker .color-picker-container {\n background-color: #e2e2e2; }\n .ge-commands .color-picker input:focus {\n outline-color: black; }\n .ge-commands .floatLine input,\n .ge-commands .listLine select {\n background-color: #000000;\n color: white;\n padding: 5px;\n border: none; }\n .ge-commands input,\n .ge-commands .listLine select {\n outline-color: transparent;\n outline-width: 1px;\n outline-offset: -1px;\n outline-style: solid;\n transition: 0.2s outline;\n border: none; }\n .ge-commands .floatLine .value {\n position: relative;\n margin: 5px; }\n .ge-commands .floatLine input:focus {\n outline-color: white; }\n .ge-commands .listLine select {\n width: 150px; }\n .ge-commands .hasArrows .arrows {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n flex-direction: column;\n cursor: grab;\n filter: brightness(10); }\n .ge-commands .hasArrows .arrows .downArrowIcon,\n .ge-commands .hasArrows .arrows .upArrowIcon {\n width: 13px;\n height: 13px; }\n .ge-commands .hasArrows:hover .arrows,\n .ge-commands .hasArrows:focus .arrows,\n .ge-commands .hasArrows.dragging .arrows {\n display: flex; }\n .ge-commands .hasArrows .arrows:hover {\n background-color: var(--buttonHoverBackground);\n filter: none; }\n .ge-commands .hasArrows.dragging .arrows {\n background-color: var(--buttonPressedBackground); }\n .ge-commands .hasArrows.dragging .arrows .downArrowIcon,\n .ge-commands .hasArrows.dragging .arrows .upArrowIcon {\n filter: none; }\n .ge-commands .hasArrows input::-webkit-outer-spin-button,\n .ge-commands .hasArrows input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n .ge-commands .hasArrows input[type=\"number\"] {\n -moz-appearance: textfield; }\n", "",{"version":3,"sources":["webpack://./../../../tools/guiEditor/dist/scss/commandBar.scss"],"names":[],"mappings":"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","sourcesContent":[":root {\r\n --selectionGrey: #666666;\r\n}\r\n\r\n.ge-commands {\r\n * {\r\n font-family: \"acumin-pro-condensed\";\r\n font-weight: 600;\r\n font-size: 12px;\r\n }\r\n grid-row: 1;\r\n grid-column: 1;\r\n user-select: none;\r\n\r\n .commands-left {\r\n float: left;\r\n display: flex;\r\n }\r\n\r\n .commands-right {\r\n float: right;\r\n display: flex;\r\n .beta-flag {\r\n height: 30px;\r\n position: relative;\r\n left: -15px;\r\n }\r\n }\r\n\r\n &.background-ts {\r\n .command-button,\r\n .command-dropdown {\r\n img {\r\n filter: invert(64%) sepia(78%) saturate(940%) hue-rotate(323deg) brightness(105%) contrast(103%);\r\n }\r\n\r\n .command-dropdown-active {\r\n color: #333333;\r\n }\r\n\r\n &:hover,\r\n &.activated {\r\n img {\r\n filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%) !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.background-js {\r\n .command-button,\r\n .command-dropdown {\r\n img {\r\n filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg);\r\n }\r\n\r\n .command-dropdown-active {\r\n color: #333333;\r\n }\r\n\r\n &:hover,\r\n &.activated {\r\n img {\r\n filter: invert(17%) !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .command-button {\r\n cursor: pointer;\r\n width: 55px;\r\n height: 55px;\r\n\r\n .command-label {\r\n display: none;\r\n }\r\n\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n color: white;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n &:hover {\r\n background-color: var(--selectionGrey);\r\n }\r\n\r\n .active {\r\n transform-origin: center;\r\n background-color: var(--selectionGrey);\r\n }\r\n\r\n img {\r\n &.active {\r\n background-color: var(--selectionGrey);\r\n }\r\n }\r\n }\r\n\r\n .command-dropdown-root {\r\n position: relative;\r\n text-transform: uppercase;\r\n z-index: 1;\r\n }\r\n\r\n .command-dropdown {\r\n cursor: pointer;\r\n width: 55px;\r\n height: 55px;\r\n\r\n .command-dropdown-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n .command-dropdown-active {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n font-size: 14px;\r\n }\r\n\r\n &:hover,\r\n &.activated {\r\n background-color: #666666;\r\n color: black;\r\n }\r\n\r\n &:active {\r\n transform-origin: center;\r\n transform: scale(0.95);\r\n }\r\n }\r\n\r\n .command-dropdown-blocker {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n transform: scale(1);\r\n z-index: 1;\r\n }\r\n\r\n &.background-js {\r\n .command-dropdown-content {\r\n background: #333333;\r\n .command-dropdown-label {\r\n &:hover {\r\n background: #333333;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.background-ts {\r\n .command-dropdown-content {\r\n .command-dropdown-label {\r\n &:hover {\r\n background: #333333;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .command-dropdown-content {\r\n background: #333333;\r\n position: absolute;\r\n top: 55px;\r\n width: 55px;\r\n transform: scale(1);\r\n\r\n &.toRight {\r\n width: 120px;\r\n }\r\n\r\n .command-dropdown-label {\r\n color: white;\r\n padding: 5px;\r\n padding-left: 7px;\r\n height: 35px;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n }\r\n\r\n .command-dropdown-label-text {\r\n font-size: 12px;\r\n grid-column: 1;\r\n grid-row: 1;\r\n }\r\n\r\n .command-dropdown-label-check {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n\r\n .command-dropdown-arrow {\r\n grid-column: 2;\r\n grid-row: 1;\r\n font-size: 20px;\r\n font-weight: bold;\r\n padding-bottom: 10px;\r\n padding-left: 4px;\r\n }\r\n\r\n .sub-items {\r\n position: absolute;\r\n left: 200px;\r\n top: 0;\r\n width: 150px;\r\n display: none;\r\n\r\n &.background-js {\r\n background: #bfabff;\r\n .sub-item {\r\n &:hover {\r\n background-color: #333333;\r\n color: white;\r\n }\r\n }\r\n }\r\n\r\n &.background-ts {\r\n background: #333333;\r\n .sub-item {\r\n &:hover {\r\n background-color: #333333;\r\n color: white;\r\n }\r\n }\r\n }\r\n\r\n .sub-item {\r\n color: white;\r\n padding: 5px;\r\n padding-left: 10px;\r\n height: 35px;\r\n display: grid;\r\n\r\n &.checked {\r\n background: white;\r\n color: black;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .buttonLine {\r\n color: white;\r\n padding: 5px;\r\n padding-left: 7px;\r\n height: 35px;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n font-size: 12px;\r\n grid-column: 1;\r\n grid-row: 1;\r\n input[type=\"file\"] {\r\n display: none;\r\n }\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n cursor: pointer;\r\n }\r\n\r\n .file-upload {\r\n cursor: pointer;\r\n }\r\n }\r\n }\r\n\r\n .divider {\r\n display: flex;\r\n align-items: center;\r\n border-right: 1px solid black;\r\n color: white;\r\n &:last-of-type {\r\n border-right: none;\r\n }\r\n &.padded {\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n }\r\n }\r\n\r\n .floatLine,\r\n .checkBoxLine {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .checkBoxLine {\r\n .icon {\r\n filter: brightness(10);\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n\r\n .checkBox {\r\n height: 40px;\r\n }\r\n }\r\n\r\n .color3Line {\r\n display: grid;\r\n\r\n .firstLine {\r\n display: flex;\r\n align-items: center;\r\n\r\n .label {\r\n padding-right: 5px;\r\n }\r\n\r\n .floatLine {\r\n .value {\r\n padding-left: 2px;\r\n }\r\n }\r\n\r\n .copy {\r\n display: none;\r\n }\r\n\r\n .expand {\r\n display: none;\r\n }\r\n }\r\n\r\n .secondLine {\r\n display: grid;\r\n padding-right: 5px;\r\n border-left: 1px solid rgb(51, 122, 183);\r\n\r\n .numeric {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n }\r\n\r\n .numeric-label {\r\n text-align: right;\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-self: right;\r\n margin-right: 10px;\r\n }\r\n\r\n .numeric-value {\r\n width: 120px;\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n border: 1px solid rgb(51, 122, 183);\r\n }\r\n }\r\n }\r\n\r\n .color-picker {\r\n height: 26px;\r\n width: 26px;\r\n\r\n .color-rect-background {\r\n width: calc(100% - 2px);\r\n height: calc(100% - 2px);\r\n border: 1px solid white;\r\n cursor: pointer;\r\n background: repeating-conic-gradient(#e2e2e2 0% 25%, white 0% 50%) 50% / 100% 100%;\r\n .color-rect {\r\n height: 100%;\r\n }\r\n }\r\n\r\n .color-picker-cover {\r\n position: fixed;\r\n top: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n left: 0px;\r\n z-index: 2;\r\n }\r\n\r\n .color-picker-float {\r\n position: absolute;\r\n outline: 1px solid black;\r\n }\r\n\r\n .color-picker-container {\r\n background-color: #e2e2e2;\r\n }\r\n\r\n input:focus {\r\n outline-color: black;\r\n }\r\n }\r\n\r\n .floatLine input,\r\n .listLine select {\r\n background-color: #000000;\r\n color: white;\r\n padding: 5px;\r\n border: none;\r\n }\r\n\r\n input,\r\n .listLine select {\r\n outline-color: transparent;\r\n outline-width: 1px;\r\n outline-offset: -1px;\r\n outline-style: solid;\r\n transition: 0.2s outline;\r\n border: none;\r\n }\r\n\r\n .floatLine .value {\r\n position: relative;\r\n margin: 5px;\r\n }\r\n\r\n .floatLine input:focus {\r\n outline-color: white;\r\n }\r\n\r\n .listLine select {\r\n width: 150px;\r\n }\r\n\r\n .hasArrows {\r\n .arrows {\r\n display: none;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n flex-direction: column;\r\n cursor: grab;\r\n .downArrowIcon,\r\n .upArrowIcon {\r\n width: 13px;\r\n height: 13px;\r\n }\r\n filter: brightness(10);\r\n }\r\n &:hover .arrows,\r\n &:focus .arrows,\r\n &.dragging .arrows {\r\n display: flex;\r\n }\r\n .arrows:hover {\r\n background-color: var(--buttonHoverBackground);\r\n filter: none;\r\n }\r\n &.dragging .arrows {\r\n background-color: var(--buttonPressedBackground);\r\n .downArrowIcon,\r\n .upArrowIcon {\r\n filter: none;\r\n }\r\n }\r\n }\r\n .hasArrows input::-webkit-outer-spin-button,\r\n .hasArrows input::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n\r\n .hasArrows input[type=\"number\"] {\r\n -moz-appearance: textfield;\r\n }\r\n}\r\n"],"sourceRoot":""}]);
202
+ ___CSS_LOADER_EXPORT___.push([module.id, ":root {\n --selectionGrey: #666666; }\n\n.ge-commands {\n grid-row: 1;\n grid-column: 1;\n user-select: none; }\n .ge-commands * {\n font-family: \"acumin-pro-condensed\";\n font-weight: 600;\n font-size: 12px; }\n .ge-commands .commands-left {\n float: left;\n display: flex; }\n .ge-commands .commands-right {\n float: right;\n display: flex; }\n .ge-commands .commands-right .beta-flag {\n height: 30px;\n position: relative;\n left: -15px; }\n .ge-commands.background-ts .command-button img,\n .ge-commands.background-ts .command-dropdown img {\n filter: invert(64%) sepia(78%) saturate(940%) hue-rotate(323deg) brightness(105%) contrast(103%); }\n .ge-commands.background-ts .command-button .command-dropdown-active,\n .ge-commands.background-ts .command-dropdown .command-dropdown-active {\n color: #333333; }\n .ge-commands.background-ts .command-button:hover img, .ge-commands.background-ts .command-button.activated img,\n .ge-commands.background-ts .command-dropdown:hover img,\n .ge-commands.background-ts .command-dropdown.activated img {\n filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%) !important; }\n .ge-commands.background-js .command-button img,\n .ge-commands.background-js .command-dropdown img {\n filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg); }\n .ge-commands.background-js .command-button .command-dropdown-active,\n .ge-commands.background-js .command-dropdown .command-dropdown-active {\n color: #333333; }\n .ge-commands.background-js .command-button:hover img, .ge-commands.background-js .command-button.activated img,\n .ge-commands.background-js .command-dropdown:hover img,\n .ge-commands.background-js .command-dropdown.activated img {\n filter: invert(17%) !important; }\n .ge-commands .command-button {\n cursor: pointer;\n width: 55px;\n height: 55px; }\n .ge-commands .command-button .command-label {\n display: none; }\n .ge-commands .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-commands .command-button .active {\n transform-origin: center;\n background-color: var(--selectionGrey); }\n .ge-commands .command-button img.active {\n background-color: var(--selectionGrey); }\n .ge-commands .command-button:hover {\n background-color: var(--selectionGrey); }\n .ge-commands .copyAndDeleteDisabled {\n pointer-events: none;\n color: black; }\n .ge-commands .pasteDisabled {\n pointer-events: none;\n color: black; }\n .ge-commands .command-dropdown-root {\n position: relative;\n text-transform: uppercase;\n z-index: 1; }\n .ge-commands .command-dropdown {\n cursor: pointer;\n width: 55px;\n height: 55px; }\n .ge-commands .command-dropdown .command-dropdown-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n .ge-commands .command-dropdown .command-dropdown-active {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center;\n font-size: 14px; }\n .ge-commands .command-dropdown:hover, .ge-commands .command-dropdown.activated {\n background-color: #666666;\n color: black; }\n .ge-commands .command-dropdown:active {\n transform-origin: center;\n transform: scale(0.95); }\n .ge-commands .command-dropdown-blocker {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: scale(1);\n z-index: 1; }\n .ge-commands.background-js .command-dropdown-content {\n background: #333333; }\n .ge-commands.background-js .command-dropdown-content .command-dropdown-label:hover {\n background: #333333; }\n .ge-commands.background-ts .command-dropdown-content .command-dropdown-label:hover {\n background: #333333; }\n .ge-commands .command-dropdown-content {\n background: #333333;\n position: absolute;\n top: 55px;\n width: 55px;\n transform: scale(1); }\n .ge-commands .command-dropdown-content.toRight {\n width: 120px; }\n .ge-commands .command-dropdown-content .command-dropdown-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 .ge-commands .command-dropdown-content .command-dropdown-label.active {\n font-weight: bold;\n font-size: 20px; }\n .ge-commands .command-dropdown-content .command-dropdown-label:hover {\n background: var(--selectionGrey); }\n .ge-commands .command-dropdown-content .command-dropdown-label:hover .sub-items {\n display: block; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-label-text {\n font-size: 12px;\n grid-column: 1;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-label-check {\n grid-column: 2;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-arrow {\n grid-column: 2;\n grid-row: 1;\n font-size: 20px;\n font-weight: bold;\n padding-bottom: 10px;\n padding-left: 4px; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items {\n position: absolute;\n left: 200px;\n top: 0;\n width: 150px;\n display: none; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-js {\n background: #bfabff; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-js .sub-item:hover {\n background-color: #333333;\n color: white; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-ts {\n background: #333333; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-ts .sub-item:hover {\n background-color: #333333;\n color: white; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items .sub-item {\n color: white;\n padding: 5px;\n padding-left: 10px;\n height: 35px;\n display: grid; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items .sub-item.checked {\n background: white;\n color: black; }\n .ge-commands .command-dropdown-content .buttonLine {\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 font-size: 12px;\n grid-column: 1;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .buttonLine input[type=\"file\"] {\n display: none; }\n .ge-commands .command-dropdown-content .buttonLine.active {\n font-weight: bold;\n font-size: 20px;\n cursor: pointer; }\n .ge-commands .command-dropdown-content .buttonLine:hover {\n background: var(--selectionGrey);\n cursor: pointer; }\n .ge-commands .command-dropdown-content .buttonLine:hover .sub-items {\n display: block; }\n .ge-commands .command-dropdown-content .buttonLine .file-upload {\n cursor: pointer; }\n .ge-commands .divider {\n display: flex;\n align-items: center;\n border-right: 1px solid black;\n color: white; }\n .ge-commands .divider:last-of-type {\n border-right: none; }\n .ge-commands .divider.padded {\n padding-left: 10px;\n padding-right: 10px; }\n .ge-commands .floatLine,\n .ge-commands .checkBoxLine {\n display: flex;\n align-items: center; }\n .ge-commands .checkBoxLine .icon {\n filter: brightness(10); }\n .ge-commands .checkBoxLine .hidden {\n display: none; }\n .ge-commands .checkBoxLine .checkBox {\n height: 40px; }\n .ge-commands .color3Line {\n display: grid; }\n .ge-commands .color3Line .firstLine {\n display: flex;\n align-items: center; }\n .ge-commands .color3Line .firstLine .label {\n padding-right: 5px; }\n .ge-commands .color3Line .firstLine .floatLine .value {\n padding-left: 2px; }\n .ge-commands .color3Line .firstLine .copy {\n display: none; }\n .ge-commands .color3Line .firstLine .expand {\n display: none; }\n .ge-commands .color3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n .ge-commands .color3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n .ge-commands .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-commands .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-commands .color-picker {\n height: 26px;\n width: 26px; }\n .ge-commands .color-picker .color-rect-background {\n width: calc(100% - 2px);\n height: calc(100% - 2px);\n border: 1px solid white;\n cursor: pointer;\n background: repeating-conic-gradient(#e2e2e2 0% 25%, white 0% 50%) 50%/100% 100%; }\n .ge-commands .color-picker .color-rect-background .color-rect {\n height: 100%; }\n .ge-commands .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n z-index: 2; }\n .ge-commands .color-picker .color-picker-float {\n position: absolute;\n outline: 1px solid black; }\n .ge-commands .color-picker .color-picker-container {\n background-color: #e2e2e2; }\n .ge-commands .color-picker input:focus {\n outline-color: black; }\n .ge-commands .floatLine input,\n .ge-commands .listLine select {\n background-color: #000000;\n color: white;\n padding: 5px;\n border: none; }\n .ge-commands input,\n .ge-commands .listLine select {\n outline-color: transparent;\n outline-width: 1px;\n outline-offset: -1px;\n outline-style: solid;\n transition: 0.2s outline;\n border: none; }\n .ge-commands .floatLine .value {\n position: relative;\n margin: 5px; }\n .ge-commands .floatLine input:focus {\n outline-color: white; }\n .ge-commands .listLine select {\n width: 150px; }\n .ge-commands .hasArrows .arrows {\n display: none;\n position: absolute;\n right: 0;\n top: 0;\n flex-direction: column;\n cursor: grab;\n filter: brightness(10); }\n .ge-commands .hasArrows .arrows .downArrowIcon,\n .ge-commands .hasArrows .arrows .upArrowIcon {\n width: 13px;\n height: 13px; }\n .ge-commands .hasArrows:hover .arrows,\n .ge-commands .hasArrows:focus .arrows,\n .ge-commands .hasArrows.dragging .arrows {\n display: flex; }\n .ge-commands .hasArrows .arrows:hover {\n background-color: var(--buttonHoverBackground);\n filter: none; }\n .ge-commands .hasArrows.dragging .arrows {\n background-color: var(--buttonPressedBackground); }\n .ge-commands .hasArrows.dragging .arrows .downArrowIcon,\n .ge-commands .hasArrows.dragging .arrows .upArrowIcon {\n filter: none; }\n .ge-commands .hasArrows input::-webkit-outer-spin-button,\n .ge-commands .hasArrows input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0; }\n .ge-commands .hasArrows input[type=\"number\"] {\n -moz-appearance: textfield; }\n", "",{"version":3,"sources":["webpack://./../../../tools/guiEditor/dist/scss/commandBar.scss"],"names":[],"mappings":"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","sourcesContent":[":root {\r\n --selectionGrey: #666666;\r\n}\r\n\r\n.ge-commands {\r\n * {\r\n font-family: \"acumin-pro-condensed\";\r\n font-weight: 600;\r\n font-size: 12px;\r\n }\r\n grid-row: 1;\r\n grid-column: 1;\r\n user-select: none;\r\n\r\n .commands-left {\r\n float: left;\r\n display: flex;\r\n }\r\n\r\n .commands-right {\r\n float: right;\r\n display: flex;\r\n .beta-flag {\r\n height: 30px;\r\n position: relative;\r\n left: -15px;\r\n }\r\n }\r\n\r\n &.background-ts {\r\n .command-button,\r\n .command-dropdown {\r\n img {\r\n filter: invert(64%) sepia(78%) saturate(940%) hue-rotate(323deg) brightness(105%) contrast(103%);\r\n }\r\n\r\n .command-dropdown-active {\r\n color: #333333;\r\n }\r\n\r\n &:hover,\r\n &.activated {\r\n img {\r\n filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%) !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.background-js {\r\n .command-button,\r\n .command-dropdown {\r\n img {\r\n filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg);\r\n }\r\n\r\n .command-dropdown-active {\r\n color: #333333;\r\n }\r\n\r\n &:hover,\r\n &.activated {\r\n img {\r\n filter: invert(17%) !important;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .command-button {\r\n cursor: pointer;\r\n width: 55px;\r\n height: 55px;\r\n\r\n .command-label {\r\n display: none;\r\n }\r\n\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n color: white;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n .active {\r\n transform-origin: center;\r\n background-color: var(--selectionGrey);\r\n }\r\n\r\n img {\r\n &.active {\r\n background-color: var(--selectionGrey);\r\n }\r\n }\r\n }\r\n .command-button:hover {\r\n background-color: var(--selectionGrey);\r\n }\r\n .copyAndDeleteDisabled {\r\n pointer-events: none;\r\n color: black;\r\n }\r\n .pasteDisabled {\r\n pointer-events: none;\r\n color: black;\r\n }\r\n .command-dropdown-root {\r\n position: relative;\r\n text-transform: uppercase;\r\n z-index: 1;\r\n }\r\n\r\n .command-dropdown {\r\n cursor: pointer;\r\n width: 55px;\r\n height: 55px;\r\n\r\n .command-dropdown-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n .command-dropdown-active {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n font-size: 14px;\r\n }\r\n\r\n &:hover,\r\n &.activated {\r\n background-color: #666666;\r\n color: black;\r\n }\r\n\r\n &:active {\r\n transform-origin: center;\r\n transform: scale(0.95);\r\n }\r\n }\r\n\r\n .command-dropdown-blocker {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n transform: scale(1);\r\n z-index: 1;\r\n }\r\n\r\n &.background-js {\r\n .command-dropdown-content {\r\n background: #333333;\r\n .command-dropdown-label {\r\n &:hover {\r\n background: #333333;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.background-ts {\r\n .command-dropdown-content {\r\n .command-dropdown-label {\r\n &:hover {\r\n background: #333333;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .command-dropdown-content {\r\n background: #333333;\r\n position: absolute;\r\n top: 55px;\r\n width: 55px;\r\n transform: scale(1);\r\n\r\n &.toRight {\r\n width: 120px;\r\n }\r\n\r\n .command-dropdown-label {\r\n color: white;\r\n padding: 5px;\r\n padding-left: 7px;\r\n height: 35px;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n }\r\n\r\n .command-dropdown-label-text {\r\n font-size: 12px;\r\n grid-column: 1;\r\n grid-row: 1;\r\n }\r\n\r\n .command-dropdown-label-check {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n\r\n .command-dropdown-arrow {\r\n grid-column: 2;\r\n grid-row: 1;\r\n font-size: 20px;\r\n font-weight: bold;\r\n padding-bottom: 10px;\r\n padding-left: 4px;\r\n }\r\n\r\n .sub-items {\r\n position: absolute;\r\n left: 200px;\r\n top: 0;\r\n width: 150px;\r\n display: none;\r\n\r\n &.background-js {\r\n background: #bfabff;\r\n .sub-item {\r\n &:hover {\r\n background-color: #333333;\r\n color: white;\r\n }\r\n }\r\n }\r\n\r\n &.background-ts {\r\n background: #333333;\r\n .sub-item {\r\n &:hover {\r\n background-color: #333333;\r\n color: white;\r\n }\r\n }\r\n }\r\n\r\n .sub-item {\r\n color: white;\r\n padding: 5px;\r\n padding-left: 10px;\r\n height: 35px;\r\n display: grid;\r\n\r\n &.checked {\r\n background: white;\r\n color: black;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .buttonLine {\r\n color: white;\r\n padding: 5px;\r\n padding-left: 7px;\r\n height: 35px;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n font-size: 12px;\r\n grid-column: 1;\r\n grid-row: 1;\r\n input[type=\"file\"] {\r\n display: none;\r\n }\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n cursor: pointer;\r\n }\r\n\r\n .file-upload {\r\n cursor: pointer;\r\n }\r\n }\r\n }\r\n\r\n .divider {\r\n display: flex;\r\n align-items: center;\r\n border-right: 1px solid black;\r\n color: white;\r\n &:last-of-type {\r\n border-right: none;\r\n }\r\n &.padded {\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n }\r\n }\r\n\r\n .floatLine,\r\n .checkBoxLine {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .checkBoxLine {\r\n .icon {\r\n filter: brightness(10);\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n\r\n .checkBox {\r\n height: 40px;\r\n }\r\n }\r\n\r\n .color3Line {\r\n display: grid;\r\n\r\n .firstLine {\r\n display: flex;\r\n align-items: center;\r\n\r\n .label {\r\n padding-right: 5px;\r\n }\r\n\r\n .floatLine {\r\n .value {\r\n padding-left: 2px;\r\n }\r\n }\r\n\r\n .copy {\r\n display: none;\r\n }\r\n\r\n .expand {\r\n display: none;\r\n }\r\n }\r\n\r\n .secondLine {\r\n display: grid;\r\n padding-right: 5px;\r\n border-left: 1px solid rgb(51, 122, 183);\r\n\r\n .numeric {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n }\r\n\r\n .numeric-label {\r\n text-align: right;\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center;\r\n justify-self: right;\r\n margin-right: 10px;\r\n }\r\n\r\n .numeric-value {\r\n width: 120px;\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center;\r\n border: 1px solid rgb(51, 122, 183);\r\n }\r\n }\r\n }\r\n\r\n .color-picker {\r\n height: 26px;\r\n width: 26px;\r\n\r\n .color-rect-background {\r\n width: calc(100% - 2px);\r\n height: calc(100% - 2px);\r\n border: 1px solid white;\r\n cursor: pointer;\r\n background: repeating-conic-gradient(#e2e2e2 0% 25%, white 0% 50%) 50% / 100% 100%;\r\n .color-rect {\r\n height: 100%;\r\n }\r\n }\r\n\r\n .color-picker-cover {\r\n position: fixed;\r\n top: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n left: 0px;\r\n z-index: 2;\r\n }\r\n\r\n .color-picker-float {\r\n position: absolute;\r\n outline: 1px solid black;\r\n }\r\n\r\n .color-picker-container {\r\n background-color: #e2e2e2;\r\n }\r\n\r\n input:focus {\r\n outline-color: black;\r\n }\r\n }\r\n\r\n .floatLine input,\r\n .listLine select {\r\n background-color: #000000;\r\n color: white;\r\n padding: 5px;\r\n border: none;\r\n }\r\n\r\n input,\r\n .listLine select {\r\n outline-color: transparent;\r\n outline-width: 1px;\r\n outline-offset: -1px;\r\n outline-style: solid;\r\n transition: 0.2s outline;\r\n border: none;\r\n }\r\n\r\n .floatLine .value {\r\n position: relative;\r\n margin: 5px;\r\n }\r\n\r\n .floatLine input:focus {\r\n outline-color: white;\r\n }\r\n\r\n .listLine select {\r\n width: 150px;\r\n }\r\n\r\n .hasArrows {\r\n .arrows {\r\n display: none;\r\n position: absolute;\r\n right: 0;\r\n top: 0;\r\n flex-direction: column;\r\n cursor: grab;\r\n .downArrowIcon,\r\n .upArrowIcon {\r\n width: 13px;\r\n height: 13px;\r\n }\r\n filter: brightness(10);\r\n }\r\n &:hover .arrows,\r\n &:focus .arrows,\r\n &.dragging .arrows {\r\n display: flex;\r\n }\r\n .arrows:hover {\r\n background-color: var(--buttonHoverBackground);\r\n filter: none;\r\n }\r\n &.dragging .arrows {\r\n background-color: var(--buttonPressedBackground);\r\n .downArrowIcon,\r\n .upArrowIcon {\r\n filter: none;\r\n }\r\n }\r\n }\r\n .hasArrows input::-webkit-outer-spin-button,\r\n .hasArrows input::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n }\r\n\r\n .hasArrows input[type=\"number\"] {\r\n -moz-appearance: textfield;\r\n }\r\n}\r\n"],"sourceRoot":""}]);
203
203
  // Exports
204
204
  ___CSS_LOADER_EXPORT___.locals = {};
205
205
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
@@ -49644,7 +49644,9 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
49644
49644
  this.props.onColorChanged(this.state.color.clone());
49645
49645
  }
49646
49646
  render() {
49647
- const colorHex = this.state.color.toHexString();
49647
+ const color4 = core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4.FromColor3(this.state.color);
49648
+ color4.a = this.state.alpha;
49649
+ const colorHex = color4.toHexString();
49648
49650
  const hsv = this.state.color.toHSV();
49649
49651
  const colorRef = new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3();
49650
49652
  core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
@@ -50268,8 +50270,8 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
50268
50270
  this.props.lockObject.lock = false;
50269
50271
  }
50270
50272
  }
50271
- incrementValue(amount) {
50272
- if (this.props.step) {
50273
+ incrementValue(amount, processStep = true) {
50274
+ if (processStep && this.props.step) {
50273
50275
  amount *= parseFloat(this.props.step);
50274
50276
  }
50275
50277
  let currentValue = parseFloat(this.state.value);
@@ -50279,15 +50281,22 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
50279
50281
  this.updateValue((currentValue + amount).toFixed(2));
50280
50282
  }
50281
50283
  onKeyDown(event) {
50282
- if (this.props.arrows) {
50283
- if (event.key === "ArrowUp") {
50284
- this.incrementValue(1);
50285
- event.preventDefault();
50286
- }
50287
- if (event.key === "ArrowDown") {
50288
- this.incrementValue(-1);
50289
- event.preventDefault();
50284
+ const step = parseFloat(this.props.step || this.props.isInteger ? "1" : "0.01");
50285
+ const handleArrowKey = (sign) => {
50286
+ if (event.shiftKey) {
50287
+ sign *= 10;
50288
+ if (event.ctrlKey || event.metaKey) {
50289
+ sign *= 10;
50290
+ }
50290
50291
  }
50292
+ this.incrementValue(sign * step, false);
50293
+ event.preventDefault();
50294
+ };
50295
+ if (event.key === "ArrowUp") {
50296
+ handleArrowKey(1);
50297
+ }
50298
+ else if (event.key === "ArrowDown") {
50299
+ handleArrowKey(-1);
50291
50300
  }
50292
50301
  if (event.key === "Enter" && this.props.onEnter) {
50293
50302
  this.props.onEnter(this._store);
@@ -50448,14 +50457,13 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
50448
50457
  }
50449
50458
  return false;
50450
50459
  }
50451
- updateValue(evt) {
50452
- const value = evt.target.value;
50453
- if (/[^0-9.-]/g.test(value)) {
50460
+ updateValue(valueString) {
50461
+ if (/[^0-9.-]/g.test(valueString)) {
50454
50462
  return;
50455
50463
  }
50456
- const valueAsNumber = parseFloat(value);
50464
+ const valueAsNumber = parseFloat(valueString);
50457
50465
  this._localChange = true;
50458
- this.setState({ value: value });
50466
+ this.setState({ value: valueString });
50459
50467
  if (isNaN(valueAsNumber)) {
50460
50468
  return;
50461
50469
  }
@@ -50473,8 +50481,34 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
50473
50481
  }
50474
50482
  this.props.onChange(valueAsNumber);
50475
50483
  }
50484
+ incrementValue(amount) {
50485
+ let currentValue = parseFloat(this.state.value);
50486
+ if (isNaN(currentValue)) {
50487
+ currentValue = 0;
50488
+ }
50489
+ this.updateValue((currentValue + amount).toFixed(this.props.precision !== undefined ? this.props.precision : 3));
50490
+ }
50491
+ onKeyDown(evt) {
50492
+ const step = this.props.step || 1;
50493
+ const handleArrowKey = (sign) => {
50494
+ if (evt.shiftKey) {
50495
+ sign *= 10;
50496
+ if (evt.ctrlKey || evt.metaKey) {
50497
+ sign *= 10;
50498
+ }
50499
+ }
50500
+ this.incrementValue(sign * step);
50501
+ evt.preventDefault();
50502
+ };
50503
+ if (evt.key === "ArrowUp") {
50504
+ handleArrowKey(1);
50505
+ }
50506
+ else if (evt.key === "ArrowDown") {
50507
+ handleArrowKey(-1);
50508
+ }
50509
+ }
50476
50510
  render() {
50477
- return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt), onFocus: () => {
50511
+ return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), onFocus: () => {
50478
50512
  if (this.props.lockObject) {
50479
50513
  this.props.lockObject.lock = true;
50480
50514
  }
@@ -51229,7 +51263,19 @@ __webpack_require__.r(__webpack_exports__);
51229
51263
  /* harmony import */ var _imgs_babylonLogo_svg__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../imgs/babylonLogo.svg */ "../../../tools/guiEditor/dist/imgs/babylonLogo.svg");
51230
51264
  /* harmony import */ var _imgs_canvasFitIcon_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../imgs/canvasFitIcon.svg */ "../../../tools/guiEditor/dist/imgs/canvasFitIcon.svg");
51231
51265
  /* harmony import */ var _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../imgs/betaFlag.svg */ "../../../tools/guiEditor/dist/imgs/betaFlag.svg");
51232
- /* harmony import */ var _scss_commandBar_scss__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../scss/commandBar.scss */ "../../../tools/guiEditor/dist/scss/commandBar.scss");
51266
+ /* harmony import */ var _imgs_buttonbar_copyIcon_svg__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../imgs/buttonbar_copyIcon.svg */ "../../../tools/guiEditor/dist/imgs/buttonbar_copyIcon.svg");
51267
+ /* harmony import */ var _imgs_buttonbar_pasteIcon_svg__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../imgs/buttonbar_pasteIcon.svg */ "../../../tools/guiEditor/dist/imgs/buttonbar_pasteIcon.svg");
51268
+ /* harmony import */ var _imgs_buttonBar_deleteIcon_svg__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../imgs/buttonBar_deleteIcon.svg */ "../../../tools/guiEditor/dist/imgs/buttonBar_deleteIcon.svg");
51269
+ /* harmony import */ var _imgs_buttonbar_copyIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../imgs/buttonbar_copyIcon_disabled.svg */ "../../../tools/guiEditor/dist/imgs/buttonbar_copyIcon_disabled.svg");
51270
+ /* harmony import */ var _imgs_buttonbar_pasteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ../imgs/buttonbar_pasteIcon_disabled.svg */ "../../../tools/guiEditor/dist/imgs/buttonbar_pasteIcon_disabled.svg");
51271
+ /* harmony import */ var _imgs_buttonBar_deleteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ../imgs/buttonBar_deleteIcon_disabled.svg */ "../../../tools/guiEditor/dist/imgs/buttonBar_deleteIcon_disabled.svg");
51272
+ /* harmony import */ var _scss_commandBar_scss__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ../scss/commandBar.scss */ "../../../tools/guiEditor/dist/scss/commandBar.scss");
51273
+
51274
+
51275
+
51276
+
51277
+
51278
+
51233
51279
 
51234
51280
 
51235
51281
 
@@ -51295,9 +51341,20 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
51295
51341
  props.globalState.onResizeObservable.add(() => {
51296
51342
  this.forceUpdate();
51297
51343
  });
51344
+ props.globalState.onSelectionChangedObservable.add(() => {
51345
+ this.forceUpdate();
51346
+ });
51347
+ props.globalState.onWindowResizeObservable.add(() => {
51348
+ this.forceUpdate();
51349
+ });
51298
51350
  }
51299
51351
  render() {
51352
+ const isPasteDisabled = this.props.globalState.workbench ? this.props.globalState.workbench.pasteDisabled : true;
51300
51353
  const size = this.props.globalState.workbench ? Object.assign({}, this.props.globalState.workbench.guiSize) : { width: 0, height: 0 };
51354
+ const copyyIcon = this.props.globalState.selectedControls.length === 0 ? _imgs_buttonbar_copyIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_22__ : _imgs_buttonbar_copyIcon_svg__WEBPACK_IMPORTED_MODULE_19__;
51355
+ const deleteeIcon = this.props.globalState.selectedControls.length === 0 ? _imgs_buttonBar_deleteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_24__ : _imgs_buttonBar_deleteIcon_svg__WEBPACK_IMPORTED_MODULE_21__;
51356
+ const pasteeIcon = isPasteDisabled ? _imgs_buttonbar_pasteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_23__ : _imgs_buttonbar_pasteIcon_svg__WEBPACK_IMPORTED_MODULE_20__;
51357
+ const responsiveUI = this.props.globalState.fromPG ? core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("responsiveUI", true) : core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true);
51301
51358
  this._sizeOption = _sizeValues.findIndex((value) => value.width == size.width && value.height == size.height);
51302
51359
  if (this._sizeOption < 0) {
51303
51360
  this.props.globalState.onResponsiveChangeObservable.notifyObservers(false);
@@ -51326,32 +51383,6 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
51326
51383
  this.props.globalState.onSnippetLoadObservable.notifyObservers();
51327
51384
  },
51328
51385
  },
51329
- {
51330
- label: "Copy Selected",
51331
- onClick: () => {
51332
- this.props.globalState.onCopyObservable.notifyObservers((content) => this.props.globalState.hostWindow.navigator.clipboard.writeText(content));
51333
- },
51334
- },
51335
- {
51336
- label: "Paste",
51337
- onClick: async () => {
51338
- this.props.globalState.onPasteObservable.notifyObservers(await this.props.globalState.hostWindow.navigator.clipboard.readText());
51339
- },
51340
- },
51341
- {
51342
- label: "Delete Selected",
51343
- onClick: () => {
51344
- this.props.globalState.selectedControls.forEach((guiNode) => {
51345
- var _a;
51346
- if (guiNode !== this.props.globalState.guiTexture.getChildren()[0]) {
51347
- this.props.globalState.guiTexture.removeControl(guiNode);
51348
- (_a = this.props.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(guiNode);
51349
- guiNode.dispose();
51350
- }
51351
- });
51352
- this.props.globalState.setSelection([]);
51353
- },
51354
- },
51355
51386
  {
51356
51387
  label: "Help",
51357
51388
  onClick: () => {
@@ -51370,42 +51401,66 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
51370
51401
  this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.PAN;
51371
51402
  } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Zoom", shortcut: "Z", icon: _imgs_zoomIcon_svg__WEBPACK_IMPORTED_MODULE_14__, isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM, onClick: () => {
51372
51403
  this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM;
51404
+ } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Copy Selcted", shortcut: "Ctrl + C", icon: copyyIcon, isActive: false, copyDeleteDisabled: this.props.globalState.selectedControls.length === 0, onClick: () => {
51405
+ this.props.globalState.onCopyObservable.notifyObservers((content) => this.props.globalState.hostWindow.navigator.clipboard.writeText(content));
51406
+ this.forceUpdate();
51407
+ } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Paste", shortcut: "Ctrl + V", icon: pasteeIcon, isActive: false, pasteDisabled: isPasteDisabled, onClick: async () => {
51408
+ this.props.globalState.onPasteObservable.notifyObservers(await this.props.globalState.hostWindow.navigator.clipboard.readText());
51409
+ } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Delete", shortcut: "Delete", icon: deleteeIcon, isActive: false, copyDeleteDisabled: this.props.globalState.selectedControls.length === 0, onClick: () => {
51410
+ this.props.globalState.selectedControls.forEach((guiNode) => {
51411
+ var _a;
51412
+ if (guiNode != this.props.globalState.guiTexture.getChildren()[0]) {
51413
+ this.props.globalState.guiTexture.removeControl(guiNode);
51414
+ (_a = this.props.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(guiNode);
51415
+ guiNode.dispose();
51416
+ }
51417
+ });
51418
+ this.props.globalState.setSelection([]);
51373
51419
  } })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Fit to Window", shortcut: "F", icon: _imgs_canvasFitIcon_svg__WEBPACK_IMPORTED_MODULE_17__, isActive: false, onClick: () => {
51374
51420
  this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
51375
51421
  } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Toggle Guides", shortcut: "G", icon: _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_15__, isActive: this.props.globalState.outlines, onClick: () => (this.props.globalState.outlines = !this.props.globalState.outlines) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "divider padded" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: this._lockObject, label: "Artboard:", target: this.props.globalState, propertyName: "backgroundColor", disableAlpha: true }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "divider padded" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Responsive:", iconLabel: "Responsive GUIs will resize the UI layout and reflow controls to accommodate different device screen sizes", isSelected: () => core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true), onSelect: (value) => {
51376
51422
  this.props.globalState.onResponsiveChangeObservable.notifyObservers(value);
51377
51423
  core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", value);
51424
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("responsiveUI", value);
51378
51425
  this._sizeOption = _sizeOptions.length;
51379
51426
  if (value) {
51380
51427
  this._sizeOption = 0;
51381
51428
  this.props.globalState.workbench.guiSize = _sizeValues[this._sizeOption];
51429
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
51430
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.height);
51382
51431
  }
51383
51432
  this.forceUpdate();
51384
- }, large: true }), core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "", iconLabel: "Size", options: _sizeOptions, target: this, propertyName: "_sizeOption", noDirectUpdate: true, onSelect: (value) => {
51433
+ }, large: true }), responsiveUI && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "", iconLabel: "Size", options: _sizeOptions, target: this, propertyName: "_sizeOption", noDirectUpdate: true, onSelect: (value) => {
51385
51434
  this._sizeOption = value;
51386
51435
  if (this._sizeOption !== _sizeOptions.length) {
51387
51436
  const newSize = _sizeValues[this._sizeOption];
51388
51437
  this.props.globalState.workbench.guiSize = newSize;
51438
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
51439
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.height);
51389
51440
  }
51390
51441
  this.forceUpdate();
51391
- } })), !core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "W", target: size, propertyName: "width", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
51442
+ } })), !responsiveUI && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "W", target: size, propertyName: "width", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
51392
51443
  if (!this._stopUpdating) {
51393
51444
  this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
51445
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
51394
51446
  }
51395
51447
  }, onDragStart: () => {
51396
51448
  this._stopUpdating = true;
51397
51449
  }, onDragStop: (newValue) => {
51398
51450
  this._stopUpdating = false;
51399
51451
  this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
51452
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
51400
51453
  }, arrows: true, isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "H", target: size, propertyName: "height", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
51401
51454
  if (!this._stopUpdating) {
51402
51455
  this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
51456
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.width);
51403
51457
  }
51404
51458
  }, onDragStart: () => {
51405
51459
  this._stopUpdating = true;
51406
51460
  }, onDragStop: (newValue) => {
51407
51461
  this._stopUpdating = false;
51408
51462
  this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
51463
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.width);
51409
51464
  }, arrows: true, isInteger: true })] }))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "commands-right" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_18__, className: "beta-flag", draggable: false }) }))] })));
51410
51465
  }
51411
51466
  }
@@ -51442,6 +51497,12 @@ class CommandButtonComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
51442
51497
  if (this.props.disabled) {
51443
51498
  divClassName += " disabled";
51444
51499
  }
51500
+ else if (this.props.copyDeleteDisabled) {
51501
+ divClassName += " copyAndDeleteDisabled";
51502
+ }
51503
+ else if (this.props.pasteDisabled) {
51504
+ divClassName += " pasteDisabled";
51505
+ }
51445
51506
  return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: divClassName, onClick: this.props.onClick, title: `${this.props.tooltip} ${this.props.shortcut ? " (" + this.props.shortcut + ")" : ""}` }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: iconClassName }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: this.props.isActive ? "active" : "", draggable: false }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "command-label" }, { children: this.props.tooltip })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "command-label" }, { children: this.props.tooltip }))] })));
51446
51507
  }
51447
51508
  }
@@ -54357,6 +54418,9 @@ class TreeItemSelectableComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Com
54357
54418
  const marginStyle = {
54358
54419
  paddingLeft: 10 * (this.props.offset + 0.5) - 20 + "px",
54359
54420
  };
54421
+ const lineMarginStyle = {
54422
+ marginLeft: 10 * (this.props.offset + 0.5) - 20 + "px",
54423
+ };
54360
54424
  let entity = this.props.entity;
54361
54425
  if (!entity.reservedDataStore) {
54362
54426
  entity.reservedDataStore = {
@@ -54391,7 +54455,8 @@ class TreeItemSelectableComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Com
54391
54455
  className += this.props.globalState.draggedControl === this.props.entity ? " dragged" : "";
54392
54456
  className += this.state.dragOver && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.ABOVE && entity.parent ? " seAbove" : "";
54393
54457
  className += this.state.dragOver && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.BELOW && entity.parent ? " seBelow" : "";
54394
- return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: className, style: marginStyle, onPointerUp: () => {
54458
+ const styleName = className === "itemContainer seAbove" || className === "itemContainer seBelow" ? lineMarginStyle : marginStyle;
54459
+ return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: className, style: styleName, onPointerUp: () => {
54395
54460
  this.onSelect();
54396
54461
  }, onPointerEnter: () => this.setState({ isHovered: true }), onPointerLeave: () => this.setState({ isHovered: false }), onDragStart: () => {
54397
54462
  this.props.globalState.draggedControl = this.props.entity;
@@ -55508,7 +55573,7 @@ __webpack_require__.r(__webpack_exports__);
55508
55573
  /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../globalState */ "../../../tools/guiEditor/dist/globalState.js");
55509
55574
  /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/container");
55510
55575
  /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__);
55511
- /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/logger */ "core/Misc/observable");
55576
+ /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
55512
55577
  /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__);
55513
55578
  /* harmony import */ var _tools__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../tools */ "../../../tools/guiEditor/dist/tools.js");
55514
55579
  /* harmony import */ var _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
@@ -55534,6 +55599,7 @@ __webpack_require__.r(__webpack_exports__);
55534
55599
 
55535
55600
 
55536
55601
 
55602
+
55537
55603
 
55538
55604
  var ConstraintDirection;
55539
55605
  (function (ConstraintDirection) {
@@ -55544,6 +55610,7 @@ var ConstraintDirection;
55544
55610
  const ARROW_KEY_MOVEMENT_SMALL = 1; // px
55545
55611
  const ARROW_KEY_MOVEMENT_LARGE = 5; // px
55546
55612
  const MAX_POINTER_TRAVEL_DISTANCE = 5; //px^2. determines how far the pointer can move to be treated as a drag vs. a click
55613
+ const CONTROL_OFFSET = 10; //offset in pixels for when a control is added to editor
55547
55614
  class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55548
55615
  constructor(props) {
55549
55616
  super(props);
@@ -55556,6 +55623,8 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55556
55623
  this._controlsHit = [];
55557
55624
  this._pointerTravelDistance = 0;
55558
55625
  this._processSelectionOnUp = false;
55626
+ this._currLeft = 0;
55627
+ this._currTop = 0;
55559
55628
  this._nextLiveGuiRender = -1;
55560
55629
  this._liveGuiRerenderDelay = 30;
55561
55630
  this._defaultGUISize = { width: 1024, height: 1024 };
@@ -55564,6 +55633,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55564
55633
  this._zoomFactor = 1;
55565
55634
  this._zoomModeIncrement = 0.2;
55566
55635
  this._guiSize = this._defaultGUISize;
55636
+ this._pasteDisabled = true;
55567
55637
  this.keyEvent = (evt) => {
55568
55638
  if (evt.target.nodeName === "INPUT")
55569
55639
  return;
@@ -55651,10 +55721,21 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55651
55721
  // Hotkey shortcuts
55652
55722
  globalState.hostDocument.addEventListener("keydown", this.keyEvent, false);
55653
55723
  globalState.hostDocument.defaultView.addEventListener("blur", this.blurEvent, false);
55724
+ let framesToUpdate = 1;
55654
55725
  globalState.onWindowResizeObservable.add(() => {
55655
- globalState.onGizmoUpdateRequireObservable.notifyObservers();
55656
- globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
55657
- this._engine.resize();
55726
+ // update the size for the next 5 frames
55727
+ framesToUpdate += 5;
55728
+ });
55729
+ globalState.onNewSceneObservable.add((scene) => {
55730
+ scene &&
55731
+ scene.onBeforeRenderObservable.add(() => {
55732
+ if (framesToUpdate > 0) {
55733
+ framesToUpdate--;
55734
+ globalState.onGizmoUpdateRequireObservable.notifyObservers();
55735
+ this._engine.resize();
55736
+ globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
55737
+ }
55738
+ });
55658
55739
  });
55659
55740
  globalState.onCopyObservable.add((copyFn) => this.copyToClipboard(copyFn));
55660
55741
  globalState.onCutObservable.add((copyFn) => this.cutToClipboard(copyFn));
@@ -55685,6 +55766,9 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55685
55766
  get guiSize() {
55686
55767
  return this._guiSize;
55687
55768
  }
55769
+ get pasteDisabled() {
55770
+ return this._pasteDisabled;
55771
+ }
55688
55772
  // sets the size of the GUI and makes all necessary adjustments
55689
55773
  set guiSize(value) {
55690
55774
  this._guiSize = Object.assign({}, value);
@@ -55692,7 +55776,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55692
55776
  this._visibleRegionContainer.heightInPixels = this._guiSize.height;
55693
55777
  this.props.globalState.onResizeObservable.notifyObservers(this._guiSize);
55694
55778
  this.props.globalState.onReframeWindowObservable.notifyObservers();
55695
- this.props.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
55779
+ this.props.globalState.onWindowResizeObservable.notifyObservers();
55696
55780
  }
55697
55781
  applyEditorTransformation() {
55698
55782
  const adt = this.props.globalState.guiTexture;
@@ -55726,11 +55810,14 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55726
55810
  this._zoomFactor = Math.min(xFactor, yFactor) * 0.9;
55727
55811
  }
55728
55812
  copyToClipboard(copyFn) {
55813
+ this._pasteDisabled = false;
55729
55814
  const controlList = [];
55730
55815
  for (const control of this.props.globalState.selectedControls) {
55731
55816
  const obj = {};
55732
55817
  control.serialize(obj);
55733
55818
  controlList.push(obj);
55819
+ this._currLeft = control.leftInPixels;
55820
+ this._currTop = control.topInPixels;
55734
55821
  }
55735
55822
  copyFn(JSON.stringify({
55736
55823
  GUIClipboard: true,
@@ -55750,8 +55837,14 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55750
55837
  for (const control of parsed.controls) {
55751
55838
  newSelection.push(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.Parse(control, this.props.globalState.guiTexture));
55752
55839
  }
55753
- (_a = this.props.globalState.selectedControls[0].parent) === null || _a === void 0 ? void 0 : _a.addControl(newSelection[0]);
55754
- this.props.globalState.setSelection(newSelection);
55840
+ if (((_a = newSelection[0].parent) === null || _a === void 0 ? void 0 : _a.typeName) != "StackPanel") {
55841
+ this._currLeft += CONTROL_OFFSET;
55842
+ this._currTop += CONTROL_OFFSET;
55843
+ }
55844
+ newSelection[0].leftInPixels = this._currLeft;
55845
+ newSelection[0].topInPixels = this._currTop;
55846
+ const newGuiNode = this.props.globalState.workbench.appendBlock(newSelection[0]);
55847
+ this.props.globalState.setSelection([newGuiNode]);
55755
55848
  return true;
55756
55849
  }
55757
55850
  }
@@ -55948,12 +56041,18 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55948
56041
  }
55949
56042
  }
55950
56043
  appendBlock(guiElement) {
56044
+ var _a;
55951
56045
  if (this.props.globalState.liveGuiTexture) {
55952
56046
  this.props.globalState.liveGuiTexture.addControl(guiElement);
55953
56047
  }
55954
56048
  this.addEditorBehavior(guiElement);
55955
56049
  guiElement.getDescendants(true).forEach((desc) => this.addEditorBehavior(desc));
55956
- this.trueRootContainer.addControl(guiElement);
56050
+ if (this.props.globalState.selectedControls.length != 0) {
56051
+ (_a = this.props.globalState.selectedControls[0].parent) === null || _a === void 0 ? void 0 : _a.addControl(guiElement);
56052
+ }
56053
+ else {
56054
+ this.trueRootContainer.addControl(guiElement);
56055
+ }
55957
56056
  return guiElement;
55958
56057
  }
55959
56058
  parent(dropLocationControl) {
@@ -56221,7 +56320,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56221
56320
  this._processSelectionOnUp = false;
56222
56321
  }
56223
56322
  }
56224
- createGUICanvas() {
56323
+ createGUICanvas(embed) {
56225
56324
  // Get the canvas element from the DOM.
56226
56325
  const canvas = this._rootContainer.current;
56227
56326
  // Associate a Babylon Engine to it.
@@ -56231,7 +56330,11 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56231
56330
  this._scene.clearColor = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Color4(0, 0, 0, 0);
56232
56331
  const light = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.HemisphericLight("light1", core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Axis.Y, this._scene);
56233
56332
  light.intensity = 0.9;
56234
- this._guiSize = this._defaultGUISize;
56333
+ if (embed) {
56334
+ this.props.globalState.fromPG = true;
56335
+ this._guiSize.width = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.DataStorage.ReadNumber("width", 1024);
56336
+ this._guiSize.height = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.DataStorage.ReadNumber("height", 1024);
56337
+ }
56235
56338
  this._panAndZoomContainer = new gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Container("panAndZoom");
56236
56339
  this._panAndZoomContainer.clipContent = false;
56237
56340
  this._panAndZoomContainer.clipChildren = false;
@@ -56257,14 +56360,17 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56257
56360
  // Watch for browser/canvas resize events
56258
56361
  this.props.globalState.hostWindow.addEventListener("resize", () => {
56259
56362
  this.props.globalState.onWindowResizeObservable.notifyObservers();
56363
+ this._scene.onBeforeRenderObservable.addOnce(() => {
56364
+ this.props.globalState.onWindowResizeObservable.notifyObservers();
56365
+ });
56260
56366
  });
56261
- this._engine.resize();
56367
+ this.props.globalState.onWindowResizeObservable.notifyObservers();
56262
56368
  this.props.globalState.guiTexture.onBeginRenderObservable.add(() => {
56263
56369
  this.applyEditorTransformation();
56264
56370
  });
56265
56371
  this.props.globalState.onPropertyChangedObservable.add((ev) => {
56266
56372
  ev.object.markAsDirty(false);
56267
- this.props.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
56373
+ this.props.globalState.onWindowResizeObservable.notifyObservers();
56268
56374
  });
56269
56375
  // Every time the original ADT re-renders, we must also re-render, so that layout information is computed correctly
56270
56376
  // also, every time *we* re-render (due to a change in the GUI), we must re-render the original ADT
@@ -56313,26 +56419,6 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56313
56419
  addControls(scene) {
56314
56420
  scene.onKeyboardObservable.add((k) => {
56315
56421
  switch (k.event.key) {
56316
- case "s": //select
56317
- case "S":
56318
- this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT;
56319
- break;
56320
- case "p": //pan
56321
- case "P":
56322
- this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.PAN;
56323
- break;
56324
- case "z": //zoom
56325
- case "Z":
56326
- this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM;
56327
- break;
56328
- case "g": //outlines
56329
- case "G":
56330
- this.props.globalState.outlines = !this.props.globalState.outlines;
56331
- break;
56332
- case "f": //fit to window
56333
- case "F":
56334
- this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
56335
- break;
56336
56422
  case "ArrowUp": // move up
56337
56423
  this.moveControls(false, k.event.shiftKey ? -ARROW_KEY_MOVEMENT_LARGE : -ARROW_KEY_MOVEMENT_SMALL);
56338
56424
  break;
@@ -56369,8 +56455,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56369
56455
  const panningDelta = this.getScaledPointerPosition().subtract(this._initialPanningOffset).multiplyByFloats(1, -1);
56370
56456
  this._panningOffset = this._panningOffset.add(panningDelta);
56371
56457
  this._initialPanningOffset = this.getScaledPointerPosition();
56372
- this.props.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
56373
- this.props.globalState.onGizmoUpdateRequireObservable.notifyObservers();
56458
+ this.props.globalState.onWindowResizeObservable.notifyObservers();
56374
56459
  }
56375
56460
  // Move the selected controls. Can be either on horizontal (leftInPixels) or
56376
56461
  // vertical (topInPixels) direction
@@ -56513,6 +56598,7 @@ class GlobalState {
56513
56598
  this.onOutlineChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56514
56599
  this.onPropertyChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56515
56600
  this._tool = GUIEditorTool.SELECT;
56601
+ this._prevTool = this._tool;
56516
56602
  this.onToolChangeObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56517
56603
  this.onFitControlsToWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56518
56604
  this.onReframeWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
@@ -56551,7 +56637,7 @@ class GlobalState {
56551
56637
  if (this._tool === GUIEditorTool.ZOOM) {
56552
56638
  return GUIEditorTool.ZOOM;
56553
56639
  }
56554
- else if (this._tool === GUIEditorTool.PAN || this.keys.isKeyDown("space")) {
56640
+ else if (this._tool === GUIEditorTool.PAN) {
56555
56641
  return GUIEditorTool.PAN;
56556
56642
  }
56557
56643
  else {
@@ -56561,9 +56647,16 @@ class GlobalState {
56561
56647
  set tool(newTool) {
56562
56648
  if (this._tool === newTool)
56563
56649
  return;
56650
+ this._prevTool = this._tool;
56564
56651
  this._tool = newTool;
56565
56652
  this.onToolChangeObservable.notifyObservers();
56566
56653
  }
56654
+ restorePreviousTool() {
56655
+ if (this._tool !== this._prevTool) {
56656
+ this._tool = this._prevTool;
56657
+ this.onToolChangeObservable.notifyObservers();
56658
+ }
56659
+ }
56567
56660
  /** adds copy, cut and paste listeners to the host window */
56568
56661
  registerEventListeners() {
56569
56662
  const isElementEditable = (element) => {
@@ -56598,6 +56691,12 @@ class GlobalState {
56598
56691
  get backgroundColor() {
56599
56692
  return this._backgroundColor;
56600
56693
  }
56694
+ get fromPG() {
56695
+ return this._fromPG;
56696
+ }
56697
+ set fromPG(value) {
56698
+ this._fromPG = value;
56699
+ }
56601
56700
  set backgroundColor(value) {
56602
56701
  this._backgroundColor = value;
56603
56702
  this.onBackgroundColorChangeObservable.notifyObservers();
@@ -56707,8 +56806,9 @@ class GUIEditor {
56707
56806
  /**
56708
56807
  * Show the gui editor
56709
56808
  * @param options defines the options to use to configure the gui editor
56809
+ * @param embed defines whether editor is being opened from the Playground
56710
56810
  */
56711
- static async Show(options) {
56811
+ static async Show(options, embed) {
56712
56812
  let hostElement = options.hostElement;
56713
56813
  // if we are in a standalone window and we have some current state, just load the GUI from the snippet server, don't do anything else
56714
56814
  if (this._CurrentState && hostElement) {
@@ -56745,7 +56845,7 @@ class GUIEditor {
56745
56845
  react_dom__WEBPACK_IMPORTED_MODULE_1__.render(graphEditor, hostElement);
56746
56846
  // create the middle workbench canvas
56747
56847
  if (!globalState.guiTexture) {
56748
- globalState.workbench.createGUICanvas();
56848
+ globalState.workbench.createGUICanvas(embed);
56749
56849
  if (options.currentSnippetToken) {
56750
56850
  try {
56751
56851
  await globalState.workbench.loadFromSnippet(options.currentSnippetToken);
@@ -57252,23 +57352,25 @@ __webpack_require__.r(__webpack_exports__);
57252
57352
  /* harmony export */ });
57253
57353
  /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
57254
57354
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
57255
- /* harmony import */ var _components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/propertyTab/propertyTabComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyTabComponent.js");
57256
- /* harmony import */ var _portal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./portal */ "../../../tools/guiEditor/dist/portal.js");
57257
- /* harmony import */ var _components_log_logComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/log/logComponent */ "../../../tools/guiEditor/dist/components/log/logComponent.js");
57258
- /* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
57259
- /* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__);
57260
- /* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./guiNodeTools */ "../../../tools/guiEditor/dist/guiNodeTools.js");
57261
- /* harmony import */ var _diagram_workbench__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./diagram/workbench */ "../../../tools/guiEditor/dist/diagram/workbench.js");
57262
- /* harmony import */ var _sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./sharedComponents/messageDialog */ "../../../tools/guiEditor/dist/sharedComponents/messageDialog.js");
57263
- /* harmony import */ var _components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/sceneExplorer/sceneExplorerComponent */ "../../../tools/guiEditor/dist/components/sceneExplorer/sceneExplorerComponent.js");
57264
- /* harmony import */ var _components_commandBarComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/commandBarComponent */ "../../../tools/guiEditor/dist/components/commandBarComponent.js");
57265
- /* harmony import */ var _diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./diagram/gizmoWrapper */ "../../../tools/guiEditor/dist/diagram/gizmoWrapper.js");
57266
- /* harmony import */ var _diagram_artBoard__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./diagram/artBoard */ "../../../tools/guiEditor/dist/diagram/artBoard.js");
57267
- /* harmony import */ var _controlTypes__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./controlTypes */ "../../../tools/guiEditor/dist/controlTypes.js");
57268
- /* harmony import */ var _main_scss__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./main.scss */ "../../../tools/guiEditor/dist/main.scss");
57269
- /* harmony import */ var _scss_header_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./scss/header.scss */ "../../../tools/guiEditor/dist/scss/header.scss");
57270
- /* harmony import */ var _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./imgs/toolbarExpandIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarExpandIcon.svg");
57271
- /* harmony import */ var _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./imgs/toolbarCollapseIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarCollapseIcon.svg");
57355
+ /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./globalState */ "../../../tools/guiEditor/dist/globalState.js");
57356
+ /* harmony import */ var _components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/propertyTab/propertyTabComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyTabComponent.js");
57357
+ /* harmony import */ var _portal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./portal */ "../../../tools/guiEditor/dist/portal.js");
57358
+ /* harmony import */ var _components_log_logComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/log/logComponent */ "../../../tools/guiEditor/dist/components/log/logComponent.js");
57359
+ /* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
57360
+ /* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__);
57361
+ /* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./guiNodeTools */ "../../../tools/guiEditor/dist/guiNodeTools.js");
57362
+ /* harmony import */ var _diagram_workbench__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./diagram/workbench */ "../../../tools/guiEditor/dist/diagram/workbench.js");
57363
+ /* harmony import */ var _sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./sharedComponents/messageDialog */ "../../../tools/guiEditor/dist/sharedComponents/messageDialog.js");
57364
+ /* harmony import */ var _components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/sceneExplorer/sceneExplorerComponent */ "../../../tools/guiEditor/dist/components/sceneExplorer/sceneExplorerComponent.js");
57365
+ /* harmony import */ var _components_commandBarComponent__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/commandBarComponent */ "../../../tools/guiEditor/dist/components/commandBarComponent.js");
57366
+ /* harmony import */ var _diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./diagram/gizmoWrapper */ "../../../tools/guiEditor/dist/diagram/gizmoWrapper.js");
57367
+ /* harmony import */ var _diagram_artBoard__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./diagram/artBoard */ "../../../tools/guiEditor/dist/diagram/artBoard.js");
57368
+ /* harmony import */ var _controlTypes__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./controlTypes */ "../../../tools/guiEditor/dist/controlTypes.js");
57369
+ /* harmony import */ var _main_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./main.scss */ "../../../tools/guiEditor/dist/main.scss");
57370
+ /* harmony import */ var _scss_header_scss__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./scss/header.scss */ "../../../tools/guiEditor/dist/scss/header.scss");
57371
+ /* harmony import */ var _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./imgs/toolbarExpandIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarExpandIcon.svg");
57372
+ /* harmony import */ var _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./imgs/toolbarCollapseIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarCollapseIcon.svg");
57373
+
57272
57374
 
57273
57375
 
57274
57376
 
@@ -57290,8 +57392,43 @@ __webpack_require__.r(__webpack_exports__);
57290
57392
  class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57291
57393
  constructor(props) {
57292
57394
  super(props);
57293
- this._leftWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.ReadNumber("LeftWidth", 200);
57294
- this._rightWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.ReadNumber("RightWidth", 300);
57395
+ this._leftWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.ReadNumber("LeftWidth", 200);
57396
+ this._rightWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.ReadNumber("RightWidth", 300);
57397
+ this.addToolControls = (evt) => {
57398
+ // If the event target is a text input, we're currently focused on it, and the user
57399
+ // just wants to type normal text
57400
+ if (evt.target && evt.target instanceof HTMLInputElement && evt.target.type === "text") {
57401
+ return;
57402
+ }
57403
+ switch (evt.key) {
57404
+ case "s": //select
57405
+ case "S":
57406
+ this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT;
57407
+ break;
57408
+ case "p": //pan
57409
+ case "P":
57410
+ case " ":
57411
+ this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.PAN;
57412
+ break;
57413
+ case "z": //zoom
57414
+ case "Z":
57415
+ this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM;
57416
+ break;
57417
+ case "g": //outlines
57418
+ case "G":
57419
+ this.props.globalState.outlines = !this.props.globalState.outlines;
57420
+ break;
57421
+ case "f": //fit to window
57422
+ case "F":
57423
+ this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
57424
+ break;
57425
+ }
57426
+ };
57427
+ this.removePressToolControls = (evt) => {
57428
+ if (evt.key === " ") {
57429
+ this.props.globalState.restorePreviousTool();
57430
+ }
57431
+ };
57295
57432
  this.handlePopUp = () => {
57296
57433
  this.setState({
57297
57434
  showPreviewPopUp: true,
@@ -57381,6 +57518,12 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57381
57518
  if (navigator.userAgent.indexOf("Mobile") !== -1) {
57382
57519
  (this.props.globalState.hostDocument || document).querySelector(".blocker").style.visibility = "visible";
57383
57520
  }
57521
+ document.addEventListener("keydown", this.addToolControls);
57522
+ document.addEventListener("keyup", this.removePressToolControls);
57523
+ }
57524
+ componentWillUnmount() {
57525
+ document.removeEventListener("keydown", this.addToolControls);
57526
+ document.removeEventListener("keyup", this.removePressToolControls);
57384
57527
  }
57385
57528
  showWaitScreen() {
57386
57529
  var _a;
@@ -57410,11 +57553,11 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57410
57553
  const maxWidth = this.props.globalState.hostWindow.innerWidth;
57411
57554
  if (forLeft) {
57412
57555
  this._leftWidth = Math.max(150, Math.min(maxWidth - this._rightWidth, evt.clientX - this._rootRef.current.clientLeft));
57413
- core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteNumber("LeftWidth", this._leftWidth);
57556
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.WriteNumber("LeftWidth", this._leftWidth);
57414
57557
  }
57415
57558
  else {
57416
57559
  this._rightWidth = Math.max(250, Math.min(maxWidth - this._leftWidth, this._rootRef.current.clientLeft + this._rootRef.current.clientWidth - evt.clientX));
57417
- core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteNumber("RightWidth", this._rightWidth);
57560
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.WriteNumber("RightWidth", this._rightWidth);
57418
57561
  }
57419
57562
  rootElement.style.gridTemplateColumns = this.buildColumnLayout();
57420
57563
  this.props.globalState.onWindowResizeObservable.notifyObservers();
@@ -57433,13 +57576,13 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57433
57576
  }
57434
57577
  render() {
57435
57578
  const classForElement = this.state.toolbarExpand ? "left-panel" : "left-panel expand";
57436
- return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_3__.Portal, Object.assign({ globalState: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "ge-header" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "command-bar" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_commandBarComponent__WEBPACK_IMPORTED_MODULE_10__.CommandBarComponent, { globalState: this.props.globalState }) })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "gui-editor-workbench-root", style: {
57579
+ return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_4__.Portal, Object.assign({ globalState: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "ge-header" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "command-bar" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_commandBarComponent__WEBPACK_IMPORTED_MODULE_11__.CommandBarComponent, { globalState: this.props.globalState }) })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "gui-editor-workbench-root", style: {
57437
57580
  gridTemplateColumns: this.buildColumnLayout(),
57438
57581
  }, onMouseDown: (evt) => {
57439
57582
  if (evt.target.nodeName === "INPUT") {
57440
57583
  return;
57441
57584
  }
57442
- }, ref: this._rootRef, onPointerUp: (evt) => this.onPointerUp(evt) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: classForElement }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "leftGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "diagram-container", onDrop: (event) => {
57585
+ }, ref: this._rootRef, onPointerUp: (evt) => this.onPointerUp(evt) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: classForElement }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "leftGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "diagram-container", onDrop: (event) => {
57443
57586
  event.preventDefault();
57444
57587
  this.props.globalState.onDropObservable.notifyObservers();
57445
57588
  this.props.globalState.onParentingChangeObservable.notifyObservers(null);
@@ -57447,10 +57590,10 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57447
57590
  event.preventDefault();
57448
57591
  }, style: {
57449
57592
  backgroundColor: this.props.globalState.backgroundColor.toHexString(),
57450
- } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_artBoard__WEBPACK_IMPORTED_MODULE_12__.ArtBoardComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_workbench__WEBPACK_IMPORTED_MODULE_7__.WorkbenchComponent, { ref: "workbenchCanvas", globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_11__.GizmoWrapper, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "right-panel" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "rightGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_2__.PropertyTabComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_log_logComponent__WEBPACK_IMPORTED_MODULE_4__.LogComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_8__.MessageDialogComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blocker" }, { children: "GUI Editor runs only on desktop" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "wait-screen hidden" }, { children: "Processing...please wait" }))] })));
57593
+ } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_artBoard__WEBPACK_IMPORTED_MODULE_13__.ArtBoardComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_workbench__WEBPACK_IMPORTED_MODULE_8__.WorkbenchComponent, { ref: "workbenchCanvas", globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_12__.GizmoWrapper, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "right-panel" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "rightGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_3__.PropertyTabComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_log_logComponent__WEBPACK_IMPORTED_MODULE_5__.LogComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_9__.MessageDialogComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blocker" }, { children: "GUI Editor runs only on desktop" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "wait-screen hidden" }, { children: "Processing...please wait" }))] })));
57451
57594
  }
57452
57595
  onCreate(value) {
57453
- const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_6__.GUINodeTools.CreateControlFromString(value);
57596
+ const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__.GUINodeTools.CreateControlFromString(value);
57454
57597
  const newGuiNode = this.props.globalState.workbench.appendBlock(guiElement);
57455
57598
  this.props.globalState.setSelection([newGuiNode]);
57456
57599
  this.props.globalState.onPointerUpObservable.notifyObservers(null);
@@ -57458,7 +57601,7 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57458
57601
  return newGuiNode;
57459
57602
  }
57460
57603
  createBlackLine() {
57461
- const icon = this.state.toolbarExpand ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_16__, className: "icon" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_17__, className: "icon" });
57604
+ const icon = this.state.toolbarExpand ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_17__, className: "icon" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_18__, className: "icon" });
57462
57605
  return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blackLine" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "arrow", onClick: () => this.switchExpandedState() }, { children: icon })) })));
57463
57606
  }
57464
57607
  createToolbarHelper(ct) {
@@ -57472,10 +57615,10 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57472
57615
  }
57473
57616
  createToolbar() {
57474
57617
  if (this.state.toolbarExpand) {
57475
- return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes) }))] })) }));
57618
+ return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes) }))] })) }));
57476
57619
  }
57477
57620
  else {
57478
- return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab expanded" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: [this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.slice(0, Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.length / 2))), this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.slice(Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.length / 2)))] }))] })) }));
57621
+ return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab expanded" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: [this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.slice(0, Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.length / 2))), this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.slice(Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.length / 2)))] }))] })) }));
57479
57622
  }
57480
57623
  }
57481
57624
  }
@@ -58891,6 +59034,28 @@ module.exports = "data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRw
58891
59034
 
58892
59035
  /***/ }),
58893
59036
 
59037
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonBar_deleteIcon.svg":
59038
+ /*!*******************************************************************!*\
59039
+ !*** ../../../tools/guiEditor/dist/imgs/buttonBar_deleteIcon.svg ***!
59040
+ \*******************************************************************/
59041
+ /***/ ((module) => {
59042
+
59043
+ "use strict";
59044
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE4LjM5LDE0LjU0aDMuMjRjMC0uODktLjcyLTEuNjItMS42Mi0xLjYycy0xLjYyLC43Mi0xLjYyLDEuNjJabS0xLjIxLDBjMC0xLjU2LDEuMjctMi44MywyLjgzLTIuODNzMi44MywxLjI3LDIuODMsMi44M2g0LjY1Yy4zNCwwLC42MSwuMjcsLjYxLC42MXMtLjI3LC42MS0uNjEsLjYxaC0xLjA3bC0uOTUsOS44Yy0uMTUsMS41Ni0xLjQ2LDIuNzQtMy4wMiwyLjc0aC00LjljLTEuNTYsMC0yLjg3LTEuMTktMy4wMi0yLjc0bC0uOTUtOS44aC0xLjA3Yy0uMzQsMC0uNjEtLjI3LS42MS0uNjFzLjI3LS42MSwuNjEtLjYxaDQuNjVabTEuNjIsMy44NGMwLS4zNC0uMjctLjYxLS42MS0uNjFzLS42MSwuMjctLjYxLC42MXY2LjA3YzAsLjM0LC4yNywuNjEsLjYxLC42MXMuNjEtLjI3LC42MS0uNjF2LTYuMDdabTMuMDQtLjYxYy4zNCwwLC42MSwuMjcsLjYxLC42MXY2LjA3YzAsLjM0LS4yNywuNjEtLjYxLC42MXMtLjYxLS4yNy0uNjEtLjYxdi02LjA3YzAtLjM0LC4yNy0uNjEsLjYxLS42MVptLTYuMDgsNy42NmMuMDksLjkzLC44NywxLjY1LDEuODEsMS42NWg0LjljLjk0LDAsMS43Mi0uNzEsMS44MS0xLjY1bC45NC05LjY5SDE0LjgxbC45NCw5LjY5WiIvPjwvc3ZnPg==";
59045
+
59046
+ /***/ }),
59047
+
59048
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonBar_deleteIcon_disabled.svg":
59049
+ /*!****************************************************************************!*\
59050
+ !*** ../../../tools/guiEditor/dist/imgs/buttonBar_deleteIcon_disabled.svg ***!
59051
+ \****************************************************************************/
59052
+ /***/ ((module) => {
59053
+
59054
+ "use strict";
59055
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM3Nzc3Nzc7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE4LjM5LDE0LjU0aDMuMjRjMC0uODktLjcyLTEuNjItMS42Mi0xLjYycy0xLjYyLC43Mi0xLjYyLDEuNjJabS0xLjIxLDBjMC0xLjU2LDEuMjctMi44MywyLjgzLTIuODNzMi44MywxLjI3LDIuODMsMi44M2g0LjY1Yy4zNCwwLC42MSwuMjcsLjYxLC42MXMtLjI3LC42MS0uNjEsLjYxaC0xLjA3bC0uOTUsOS44Yy0uMTUsMS41Ni0xLjQ2LDIuNzQtMy4wMiwyLjc0aC00LjljLTEuNTYsMC0yLjg3LTEuMTktMy4wMi0yLjc0bC0uOTUtOS44aC0xLjA3Yy0uMzQsMC0uNjEtLjI3LS42MS0uNjFzLjI3LS42MSwuNjEtLjYxaDQuNjVabTEuNjIsMy44NGMwLS4zNC0uMjctLjYxLS42MS0uNjFzLS42MSwuMjctLjYxLC42MXY2LjA3YzAsLjM0LC4yNywuNjEsLjYxLC42MXMuNjEtLjI3LC42MS0uNjF2LTYuMDdabTMuMDQtLjYxYy4zNCwwLC42MSwuMjcsLjYxLC42MXY2LjA3YzAsLjM0LS4yNywuNjEtLjYxLC42MXMtLjYxLS4yNy0uNjEtLjYxdi02LjA3YzAtLjM0LC4yNy0uNjEsLjYxLS42MVptLTYuMDgsNy42NmMuMDksLjkzLC44NywxLjY1LDEuODEsMS42NWg0LjljLjk0LDAsMS43Mi0uNzEsMS44MS0xLjY1bC45NC05LjY5SDE0LjgxbC45NCw5LjY5WiIvPjwvc3ZnPg==";
59056
+
59057
+ /***/ }),
59058
+
58894
59059
  /***/ "../../../tools/guiEditor/dist/imgs/buttonIcon.svg":
58895
59060
  /*!*********************************************************!*\
58896
59061
  !*** ../../../tools/guiEditor/dist/imgs/buttonIcon.svg ***!
@@ -58902,6 +59067,50 @@ module.exports = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5v
58902
59067
 
58903
59068
  /***/ }),
58904
59069
 
59070
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonbar_copyIcon.svg":
59071
+ /*!*****************************************************************!*\
59072
+ !*** ../../../tools/guiEditor/dist/imgs/buttonbar_copyIcon.svg ***!
59073
+ \*****************************************************************/
59074
+ /***/ ((module) => {
59075
+
59076
+ "use strict";
59077
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE0Ljc2LDE0LjA2djEwLjI3YzAsMS40NiwxLjE4LDIuNjQsMi42NCwyLjY0aDcuMDFjLS4yNSwuNzEtLjkzLDEuMjItMS43MywxLjIyaC01LjI4Yy0yLjEzLDAtMy44Ni0xLjczLTMuODYtMy44NlYxNS43OGMwLS44LC41MS0xLjQ4LDEuMjItMS43M1ptOS45Ni0yLjE0YzEuMDEsMCwxLjgzLC44MiwxLjgzLDEuODN2MTAuNTdjMCwxLjAxLS44MiwxLjgzLTEuODMsMS44M2gtNy4zMmMtMS4wMSwwLTEuODMtLjgyLTEuODMtMS44M1YxMy43NWMwLTEuMDEsLjgyLTEuODMsMS44My0xLjgzaDcuMzJabTAsMS4yMmgtNy4zMmMtLjM0LDAtLjYxLC4yNy0uNjEsLjYxdjEwLjU3YzAsLjM0LC4yNywuNjEsLjYxLC42MWg3LjMyYy4zNCwwLC42MS0uMjcsLjYxLS42MVYxMy43NWMwLS4zNC0uMjctLjYxLS42MS0uNjFaIi8+PC9zdmc+";
59078
+
59079
+ /***/ }),
59080
+
59081
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonbar_copyIcon_disabled.svg":
59082
+ /*!**************************************************************************!*\
59083
+ !*** ../../../tools/guiEditor/dist/imgs/buttonbar_copyIcon_disabled.svg ***!
59084
+ \**************************************************************************/
59085
+ /***/ ((module) => {
59086
+
59087
+ "use strict";
59088
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM3Nzc3Nzc7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE0Ljc2LDE0LjA2djEwLjI3YzAsMS40NiwxLjE4LDIuNjQsMi42NCwyLjY0aDcuMDFjLS4yNSwuNzEtLjkzLDEuMjItMS43MywxLjIyaC01LjI4Yy0yLjEzLDAtMy44Ni0xLjczLTMuODYtMy44NlYxNS43OGMwLS44LC41MS0xLjQ4LDEuMjItMS43M1ptOS45Ni0yLjE0YzEuMDEsMCwxLjgzLC44MiwxLjgzLDEuODN2MTAuNTdjMCwxLjAxLS44MiwxLjgzLTEuODMsMS44M2gtNy4zMmMtMS4wMSwwLTEuODMtLjgyLTEuODMtMS44M1YxMy43NWMwLTEuMDEsLjgyLTEuODMsMS44My0xLjgzaDcuMzJabTAsMS4yMmgtNy4zMmMtLjM0LDAtLjYxLC4yNy0uNjEsLjYxdjEwLjU3YzAsLjM0LC4yNywuNjEsLjYxLC42MWg3LjMyYy4zNCwwLC42MS0uMjcsLjYxLS42MVYxMy43NWMwLS4zNC0uMjctLjYxLS42MS0uNjFaIi8+PC9zdmc+";
59089
+
59090
+ /***/ }),
59091
+
59092
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonbar_pasteIcon.svg":
59093
+ /*!******************************************************************!*\
59094
+ !*** ../../../tools/guiEditor/dist/imgs/buttonbar_pasteIcon.svg ***!
59095
+ \******************************************************************/
59096
+ /***/ ((module) => {
59097
+
59098
+ "use strict";
59099
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwLjYxLDEyLjA3Yy45NCwwLDEuNzEsLjcxLDEuODEsMS42MmgxLjQzYy45NywwLDEuNzYsLjc1LDEuODIsMS43di4xM2MwLC4zMS0uMjIsLjU2LS41MiwuNmgtLjA4Yy0uMzEsMC0uNTYtLjIyLS42LS41MnYtLjA4YzAtLjMxLS4yMy0uNTYtLjUzLS42aC0xLjgxYy0uMzMsLjQ4LS44OCwuOC0xLjUxLC44aC0yLjg1Yy0uNjMsMC0xLjE5LS4zMi0xLjUxLS44MWgtMS43M2MtLjMxLDAtLjU2LC4yMy0uNiwuNTN2MTEuMDVjMCwuMzEsLjIyLC41NiwuNTIsLjZoMi41MmMuMzEsMCwuNTYsLjIzLC42LC41M3YuMDhjMCwuMzQtLjI3LC42MS0uNiwuNjFoLTIuNDRjLS45NywwLTEuNzYtLjc1LTEuODItMS43VjE1LjUzYzAtLjk3LC43NS0xLjc2LDEuNy0xLjgyaDEuNTZjLjEtLjkyLC44Ny0xLjYzLDEuODEtMS42M2gyLjg1Wm00Ljg3LDQuODdjLjk3LDAsMS43NiwuNzUsMS44MiwxLjd2Ny44NGMwLC45Ny0uNzUsMS43Ni0xLjcsMS44MmgtNS40Yy0uOTcsMC0xLjc2LS43NS0xLjgyLTEuN3YtNy44NGMwLS45NywuNzUtMS43NiwxLjctMS44Mmg1LjRabTAsMS4yMWgtNS4yOGMtLjMxLDAtLjU2LC4yMy0uNiwuNTN2Ny44YzAsLjMxLC4yMiwuNTYsLjUyLC42aDUuMzZjLjMxLDAsLjU2LS4yMiwuNi0uNTJ2LTcuOGMwLS4zMS0uMjItLjU2LS41Mi0uNmgtLjA4Wm0tNC44Ny00Ljg4aC0yLjg1Yy0uMzMsMC0uNjEsLjI3LS42MSwuNjFzLjI3LC42MSwuNjEsLjYxaDIuODVjLjMzLDAsLjYxLS4yNywuNjEtLjYxcy0uMjctLjYxLS42MS0uNjFaIi8+PC9zdmc+";
59100
+
59101
+ /***/ }),
59102
+
59103
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonbar_pasteIcon_disabled.svg":
59104
+ /*!***************************************************************************!*\
59105
+ !*** ../../../tools/guiEditor/dist/imgs/buttonbar_pasteIcon_disabled.svg ***!
59106
+ \***************************************************************************/
59107
+ /***/ ((module) => {
59108
+
59109
+ "use strict";
59110
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM3Nzc3Nzc7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwLjYxLDEyLjA3Yy45NCwwLDEuNzEsLjcxLDEuODEsMS42MmgxLjQzYy45NywwLDEuNzYsLjc1LDEuODIsMS43di4xM2MwLC4zMS0uMjIsLjU2LS41MiwuNmgtLjA4Yy0uMzEsMC0uNTYtLjIyLS42LS41MnYtLjA4YzAtLjMxLS4yMy0uNTYtLjUzLS42aC0xLjgxYy0uMzMsLjQ4LS44OCwuOC0xLjUxLC44aC0yLjg1Yy0uNjMsMC0xLjE5LS4zMi0xLjUxLS44MWgtMS43M2MtLjMxLDAtLjU2LC4yMy0uNiwuNTN2MTEuMDVjMCwuMzEsLjIyLC41NiwuNTIsLjZoMi41MmMuMzEsMCwuNTYsLjIzLC42LC41M3YuMDhjMCwuMzQtLjI3LC42MS0uNiwuNjFoLTIuNDRjLS45NywwLTEuNzYtLjc1LTEuODItMS43VjE1LjUzYzAtLjk3LC43NS0xLjc2LDEuNy0xLjgyaDEuNTZjLjEtLjkyLC44Ny0xLjYzLDEuODEtMS42M2gyLjg1Wm00Ljg3LDQuODdjLjk3LDAsMS43NiwuNzUsMS44MiwxLjd2Ny44NGMwLC45Ny0uNzUsMS43Ni0xLjcsMS44MmgtNS40Yy0uOTcsMC0xLjc2LS43NS0xLjgyLTEuN3YtNy44NGMwLS45NywuNzUtMS43NiwxLjctMS44Mmg1LjRabTAsMS4yMWgtNS4yOGMtLjMxLDAtLjU2LC4yMy0uNiwuNTN2Ny44YzAsLjMxLC4yMiwuNTYsLjUyLC42aDUuMzZjLjMxLDAsLjU2LS4yMiwuNi0uNTJ2LTcuOGMwLS4zMS0uMjItLjU2LS41Mi0uNmgtLjA4Wm0tNC44Ny00Ljg4aC0yLjg1Yy0uMzMsMC0uNjEsLjI3LS42MSwuNjFzLjI3LC42MSwuNjEsLjYxaDIuODVjLjMzLDAsLjYxLS4yNywuNjEtLjYxcy0uMjctLjYxLS42MS0uNjFaIi8+PC9zdmc+";
59111
+
59112
+ /***/ }),
59113
+
58905
59114
  /***/ "../../../tools/guiEditor/dist/imgs/canvasFitIcon.svg":
58906
59115
  /*!************************************************************!*\
58907
59116
  !*** ../../../tools/guiEditor/dist/imgs/canvasFitIcon.svg ***!