@babylonjs/gui-editor 5.17.0 → 5.19.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 +270 -103
  4. package/dist/babylon.guiEditor.max.js.map +1 -1
  5. package/dist/babylon.guiEditor.module.d.ts +20 -4
  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,16 @@ 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
+ });
51298
51347
  }
51299
51348
  render() {
51349
+ const isPasteDisabled = this.props.globalState.workbench && this.props.globalState.selectedControls.length > 0 ? this.props.globalState.workbench.pasteDisabled : true;
51300
51350
  const size = this.props.globalState.workbench ? Object.assign({}, this.props.globalState.workbench.guiSize) : { width: 0, height: 0 };
51351
+ 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__;
51352
+ 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__;
51353
+ const pasteeIcon = isPasteDisabled ? _imgs_buttonbar_pasteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_23__ : _imgs_buttonbar_pasteIcon_svg__WEBPACK_IMPORTED_MODULE_20__;
51301
51354
  this._sizeOption = _sizeValues.findIndex((value) => value.width == size.width && value.height == size.height);
51302
51355
  if (this._sizeOption < 0) {
51303
51356
  this.props.globalState.onResponsiveChangeObservable.notifyObservers(false);
@@ -51326,32 +51379,6 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
51326
51379
  this.props.globalState.onSnippetLoadObservable.notifyObservers();
51327
51380
  },
51328
51381
  },
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
51382
  {
51356
51383
  label: "Help",
51357
51384
  onClick: () => {
@@ -51370,6 +51397,21 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
51370
51397
  this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.PAN;
51371
51398
  } }), (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
51399
  this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM;
51400
+ } })] })), (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: () => {
51401
+ this.props.globalState.onCopyObservable.notifyObservers((content) => this.props.globalState.hostWindow.navigator.clipboard.writeText(content));
51402
+ this.forceUpdate();
51403
+ } }), (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 () => {
51404
+ this.props.globalState.onPasteObservable.notifyObservers(await this.props.globalState.hostWindow.navigator.clipboard.readText());
51405
+ } }), (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: () => {
51406
+ this.props.globalState.selectedControls.forEach((guiNode) => {
51407
+ var _a;
51408
+ if (guiNode != this.props.globalState.guiTexture.getChildren()[0]) {
51409
+ this.props.globalState.guiTexture.removeControl(guiNode);
51410
+ (_a = this.props.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(guiNode);
51411
+ guiNode.dispose();
51412
+ }
51413
+ });
51414
+ this.props.globalState.setSelection([]);
51373
51415
  } })] })), (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
51416
  this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
51375
51417
  } }), (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) => {
@@ -51442,6 +51484,12 @@ class CommandButtonComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
51442
51484
  if (this.props.disabled) {
51443
51485
  divClassName += " disabled";
51444
51486
  }
51487
+ else if (this.props.copyDeleteDisabled) {
51488
+ divClassName += " copyAndDeleteDisabled";
51489
+ }
51490
+ else if (this.props.pasteDisabled) {
51491
+ divClassName += " pasteDisabled";
51492
+ }
51445
51493
  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
51494
  }
51447
51495
  }
@@ -54357,6 +54405,9 @@ class TreeItemSelectableComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Com
54357
54405
  const marginStyle = {
54358
54406
  paddingLeft: 10 * (this.props.offset + 0.5) - 20 + "px",
54359
54407
  };
54408
+ const lineMarginStyle = {
54409
+ marginLeft: 10 * (this.props.offset + 0.5) - 20 + "px",
54410
+ };
54360
54411
  let entity = this.props.entity;
54361
54412
  if (!entity.reservedDataStore) {
54362
54413
  entity.reservedDataStore = {
@@ -54391,7 +54442,8 @@ class TreeItemSelectableComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Com
54391
54442
  className += this.props.globalState.draggedControl === this.props.entity ? " dragged" : "";
54392
54443
  className += this.state.dragOver && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.ABOVE && entity.parent ? " seAbove" : "";
54393
54444
  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: () => {
54445
+ const styleName = className === "itemContainer seAbove" || className === "itemContainer seBelow" ? lineMarginStyle : marginStyle;
54446
+ 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
54447
  this.onSelect();
54396
54448
  }, onPointerEnter: () => this.setState({ isHovered: true }), onPointerLeave: () => this.setState({ isHovered: false }), onDragStart: () => {
54397
54449
  this.props.globalState.draggedControl = this.props.entity;
@@ -55564,6 +55616,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55564
55616
  this._zoomFactor = 1;
55565
55617
  this._zoomModeIncrement = 0.2;
55566
55618
  this._guiSize = this._defaultGUISize;
55619
+ this._pasteDisabled = true;
55567
55620
  this.keyEvent = (evt) => {
55568
55621
  if (evt.target.nodeName === "INPUT")
55569
55622
  return;
@@ -55651,10 +55704,21 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55651
55704
  // Hotkey shortcuts
55652
55705
  globalState.hostDocument.addEventListener("keydown", this.keyEvent, false);
55653
55706
  globalState.hostDocument.defaultView.addEventListener("blur", this.blurEvent, false);
55707
+ let framesToUpdate = 1;
55654
55708
  globalState.onWindowResizeObservable.add(() => {
55655
- globalState.onGizmoUpdateRequireObservable.notifyObservers();
55656
- globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
55657
- this._engine.resize();
55709
+ // update the size for the next 5 frames
55710
+ framesToUpdate += 5;
55711
+ });
55712
+ globalState.onNewSceneObservable.add((scene) => {
55713
+ scene &&
55714
+ scene.onBeforeRenderObservable.add(() => {
55715
+ if (framesToUpdate > 0) {
55716
+ framesToUpdate--;
55717
+ globalState.onGizmoUpdateRequireObservable.notifyObservers();
55718
+ this._engine.resize();
55719
+ globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
55720
+ }
55721
+ });
55658
55722
  });
55659
55723
  globalState.onCopyObservable.add((copyFn) => this.copyToClipboard(copyFn));
55660
55724
  globalState.onCutObservable.add((copyFn) => this.cutToClipboard(copyFn));
@@ -55685,6 +55749,9 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55685
55749
  get guiSize() {
55686
55750
  return this._guiSize;
55687
55751
  }
55752
+ get pasteDisabled() {
55753
+ return this._pasteDisabled;
55754
+ }
55688
55755
  // sets the size of the GUI and makes all necessary adjustments
55689
55756
  set guiSize(value) {
55690
55757
  this._guiSize = Object.assign({}, value);
@@ -55692,7 +55759,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55692
55759
  this._visibleRegionContainer.heightInPixels = this._guiSize.height;
55693
55760
  this.props.globalState.onResizeObservable.notifyObservers(this._guiSize);
55694
55761
  this.props.globalState.onReframeWindowObservable.notifyObservers();
55695
- this.props.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
55762
+ this.props.globalState.onWindowResizeObservable.notifyObservers();
55696
55763
  }
55697
55764
  applyEditorTransformation() {
55698
55765
  const adt = this.props.globalState.guiTexture;
@@ -55726,6 +55793,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55726
55793
  this._zoomFactor = Math.min(xFactor, yFactor) * 0.9;
55727
55794
  }
55728
55795
  copyToClipboard(copyFn) {
55796
+ this._pasteDisabled = false;
55729
55797
  const controlList = [];
55730
55798
  for (const control of this.props.globalState.selectedControls) {
55731
55799
  const obj = {};
@@ -56257,14 +56325,17 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56257
56325
  // Watch for browser/canvas resize events
56258
56326
  this.props.globalState.hostWindow.addEventListener("resize", () => {
56259
56327
  this.props.globalState.onWindowResizeObservable.notifyObservers();
56328
+ this._scene.onBeforeRenderObservable.addOnce(() => {
56329
+ this.props.globalState.onWindowResizeObservable.notifyObservers();
56330
+ });
56260
56331
  });
56261
- this._engine.resize();
56332
+ this.props.globalState.onWindowResizeObservable.notifyObservers();
56262
56333
  this.props.globalState.guiTexture.onBeginRenderObservable.add(() => {
56263
56334
  this.applyEditorTransformation();
56264
56335
  });
56265
56336
  this.props.globalState.onPropertyChangedObservable.add((ev) => {
56266
56337
  ev.object.markAsDirty(false);
56267
- this.props.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
56338
+ this.props.globalState.onWindowResizeObservable.notifyObservers();
56268
56339
  });
56269
56340
  // Every time the original ADT re-renders, we must also re-render, so that layout information is computed correctly
56270
56341
  // also, every time *we* re-render (due to a change in the GUI), we must re-render the original ADT
@@ -56313,26 +56384,6 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56313
56384
  addControls(scene) {
56314
56385
  scene.onKeyboardObservable.add((k) => {
56315
56386
  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
56387
  case "ArrowUp": // move up
56337
56388
  this.moveControls(false, k.event.shiftKey ? -ARROW_KEY_MOVEMENT_LARGE : -ARROW_KEY_MOVEMENT_SMALL);
56338
56389
  break;
@@ -56369,8 +56420,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56369
56420
  const panningDelta = this.getScaledPointerPosition().subtract(this._initialPanningOffset).multiplyByFloats(1, -1);
56370
56421
  this._panningOffset = this._panningOffset.add(panningDelta);
56371
56422
  this._initialPanningOffset = this.getScaledPointerPosition();
56372
- this.props.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
56373
- this.props.globalState.onGizmoUpdateRequireObservable.notifyObservers();
56423
+ this.props.globalState.onWindowResizeObservable.notifyObservers();
56374
56424
  }
56375
56425
  // Move the selected controls. Can be either on horizontal (leftInPixels) or
56376
56426
  // vertical (topInPixels) direction
@@ -56513,6 +56563,7 @@ class GlobalState {
56513
56563
  this.onOutlineChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56514
56564
  this.onPropertyChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56515
56565
  this._tool = GUIEditorTool.SELECT;
56566
+ this._prevTool = this._tool;
56516
56567
  this.onToolChangeObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56517
56568
  this.onFitControlsToWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56518
56569
  this.onReframeWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
@@ -56551,7 +56602,7 @@ class GlobalState {
56551
56602
  if (this._tool === GUIEditorTool.ZOOM) {
56552
56603
  return GUIEditorTool.ZOOM;
56553
56604
  }
56554
- else if (this._tool === GUIEditorTool.PAN || this.keys.isKeyDown("space")) {
56605
+ else if (this._tool === GUIEditorTool.PAN) {
56555
56606
  return GUIEditorTool.PAN;
56556
56607
  }
56557
56608
  else {
@@ -56561,9 +56612,16 @@ class GlobalState {
56561
56612
  set tool(newTool) {
56562
56613
  if (this._tool === newTool)
56563
56614
  return;
56615
+ this._prevTool = this._tool;
56564
56616
  this._tool = newTool;
56565
56617
  this.onToolChangeObservable.notifyObservers();
56566
56618
  }
56619
+ restorePreviousTool() {
56620
+ if (this._tool !== this._prevTool) {
56621
+ this._tool = this._prevTool;
56622
+ this.onToolChangeObservable.notifyObservers();
56623
+ }
56624
+ }
56567
56625
  /** adds copy, cut and paste listeners to the host window */
56568
56626
  registerEventListeners() {
56569
56627
  const isElementEditable = (element) => {
@@ -57252,23 +57310,25 @@ __webpack_require__.r(__webpack_exports__);
57252
57310
  /* harmony export */ });
57253
57311
  /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
57254
57312
  /* 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");
57313
+ /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./globalState */ "../../../tools/guiEditor/dist/globalState.js");
57314
+ /* harmony import */ var _components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/propertyTab/propertyTabComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyTabComponent.js");
57315
+ /* harmony import */ var _portal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./portal */ "../../../tools/guiEditor/dist/portal.js");
57316
+ /* harmony import */ var _components_log_logComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/log/logComponent */ "../../../tools/guiEditor/dist/components/log/logComponent.js");
57317
+ /* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
57318
+ /* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__);
57319
+ /* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./guiNodeTools */ "../../../tools/guiEditor/dist/guiNodeTools.js");
57320
+ /* harmony import */ var _diagram_workbench__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./diagram/workbench */ "../../../tools/guiEditor/dist/diagram/workbench.js");
57321
+ /* harmony import */ var _sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./sharedComponents/messageDialog */ "../../../tools/guiEditor/dist/sharedComponents/messageDialog.js");
57322
+ /* harmony import */ var _components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/sceneExplorer/sceneExplorerComponent */ "../../../tools/guiEditor/dist/components/sceneExplorer/sceneExplorerComponent.js");
57323
+ /* harmony import */ var _components_commandBarComponent__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/commandBarComponent */ "../../../tools/guiEditor/dist/components/commandBarComponent.js");
57324
+ /* harmony import */ var _diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./diagram/gizmoWrapper */ "../../../tools/guiEditor/dist/diagram/gizmoWrapper.js");
57325
+ /* harmony import */ var _diagram_artBoard__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./diagram/artBoard */ "../../../tools/guiEditor/dist/diagram/artBoard.js");
57326
+ /* harmony import */ var _controlTypes__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./controlTypes */ "../../../tools/guiEditor/dist/controlTypes.js");
57327
+ /* harmony import */ var _main_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./main.scss */ "../../../tools/guiEditor/dist/main.scss");
57328
+ /* harmony import */ var _scss_header_scss__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./scss/header.scss */ "../../../tools/guiEditor/dist/scss/header.scss");
57329
+ /* harmony import */ var _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./imgs/toolbarExpandIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarExpandIcon.svg");
57330
+ /* harmony import */ var _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./imgs/toolbarCollapseIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarCollapseIcon.svg");
57331
+
57272
57332
 
57273
57333
 
57274
57334
 
@@ -57290,8 +57350,43 @@ __webpack_require__.r(__webpack_exports__);
57290
57350
  class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57291
57351
  constructor(props) {
57292
57352
  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);
57353
+ this._leftWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.ReadNumber("LeftWidth", 200);
57354
+ this._rightWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.ReadNumber("RightWidth", 300);
57355
+ this.addToolControls = (evt) => {
57356
+ // If the event target is a text input, we're currently focused on it, and the user
57357
+ // just wants to type normal text
57358
+ if (evt.target && evt.target instanceof HTMLInputElement && evt.target.type === "text") {
57359
+ return;
57360
+ }
57361
+ switch (evt.key) {
57362
+ case "s": //select
57363
+ case "S":
57364
+ this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT;
57365
+ break;
57366
+ case "p": //pan
57367
+ case "P":
57368
+ case " ":
57369
+ this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.PAN;
57370
+ break;
57371
+ case "z": //zoom
57372
+ case "Z":
57373
+ this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM;
57374
+ break;
57375
+ case "g": //outlines
57376
+ case "G":
57377
+ this.props.globalState.outlines = !this.props.globalState.outlines;
57378
+ break;
57379
+ case "f": //fit to window
57380
+ case "F":
57381
+ this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
57382
+ break;
57383
+ }
57384
+ };
57385
+ this.removePressToolControls = (evt) => {
57386
+ if (evt.key === " ") {
57387
+ this.props.globalState.restorePreviousTool();
57388
+ }
57389
+ };
57295
57390
  this.handlePopUp = () => {
57296
57391
  this.setState({
57297
57392
  showPreviewPopUp: true,
@@ -57381,6 +57476,12 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57381
57476
  if (navigator.userAgent.indexOf("Mobile") !== -1) {
57382
57477
  (this.props.globalState.hostDocument || document).querySelector(".blocker").style.visibility = "visible";
57383
57478
  }
57479
+ document.addEventListener("keydown", this.addToolControls);
57480
+ document.addEventListener("keyup", this.removePressToolControls);
57481
+ }
57482
+ componentWillUnmount() {
57483
+ document.removeEventListener("keydown", this.addToolControls);
57484
+ document.removeEventListener("keyup", this.removePressToolControls);
57384
57485
  }
57385
57486
  showWaitScreen() {
57386
57487
  var _a;
@@ -57410,11 +57511,11 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57410
57511
  const maxWidth = this.props.globalState.hostWindow.innerWidth;
57411
57512
  if (forLeft) {
57412
57513
  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);
57514
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.WriteNumber("LeftWidth", this._leftWidth);
57414
57515
  }
57415
57516
  else {
57416
57517
  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);
57518
+ core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.WriteNumber("RightWidth", this._rightWidth);
57418
57519
  }
57419
57520
  rootElement.style.gridTemplateColumns = this.buildColumnLayout();
57420
57521
  this.props.globalState.onWindowResizeObservable.notifyObservers();
@@ -57433,13 +57534,13 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57433
57534
  }
57434
57535
  render() {
57435
57536
  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: {
57537
+ 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
57538
  gridTemplateColumns: this.buildColumnLayout(),
57438
57539
  }, onMouseDown: (evt) => {
57439
57540
  if (evt.target.nodeName === "INPUT") {
57440
57541
  return;
57441
57542
  }
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) => {
57543
+ }, 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
57544
  event.preventDefault();
57444
57545
  this.props.globalState.onDropObservable.notifyObservers();
57445
57546
  this.props.globalState.onParentingChangeObservable.notifyObservers(null);
@@ -57447,10 +57548,10 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57447
57548
  event.preventDefault();
57448
57549
  }, style: {
57449
57550
  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" }))] })));
57551
+ } }, { 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
57552
  }
57452
57553
  onCreate(value) {
57453
- const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_6__.GUINodeTools.CreateControlFromString(value);
57554
+ const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__.GUINodeTools.CreateControlFromString(value);
57454
57555
  const newGuiNode = this.props.globalState.workbench.appendBlock(guiElement);
57455
57556
  this.props.globalState.setSelection([newGuiNode]);
57456
57557
  this.props.globalState.onPointerUpObservable.notifyObservers(null);
@@ -57458,7 +57559,7 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57458
57559
  return newGuiNode;
57459
57560
  }
57460
57561
  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" });
57562
+ 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
57563
  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
57564
  }
57464
57565
  createToolbarHelper(ct) {
@@ -57472,10 +57573,10 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
57472
57573
  }
57473
57574
  createToolbar() {
57474
57575
  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) }))] })) }));
57576
+ 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
57577
  }
57477
57578
  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)))] }))] })) }));
57579
+ 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
57580
  }
57480
57581
  }
57481
57582
  }
@@ -58891,6 +58992,28 @@ module.exports = "data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRw
58891
58992
 
58892
58993
  /***/ }),
58893
58994
 
58995
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonBar_deleteIcon.svg":
58996
+ /*!*******************************************************************!*\
58997
+ !*** ../../../tools/guiEditor/dist/imgs/buttonBar_deleteIcon.svg ***!
58998
+ \*******************************************************************/
58999
+ /***/ ((module) => {
59000
+
59001
+ "use strict";
59002
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE4LjM5LDE0LjU0aDMuMjRjMC0uODktLjcyLTEuNjItMS42Mi0xLjYycy0xLjYyLC43Mi0xLjYyLDEuNjJabS0xLjIxLDBjMC0xLjU2LDEuMjctMi44MywyLjgzLTIuODNzMi44MywxLjI3LDIuODMsMi44M2g0LjY1Yy4zNCwwLC42MSwuMjcsLjYxLC42MXMtLjI3LC42MS0uNjEsLjYxaC0xLjA3bC0uOTUsOS44Yy0uMTUsMS41Ni0xLjQ2LDIuNzQtMy4wMiwyLjc0aC00LjljLTEuNTYsMC0yLjg3LTEuMTktMy4wMi0yLjc0bC0uOTUtOS44aC0xLjA3Yy0uMzQsMC0uNjEtLjI3LS42MS0uNjFzLjI3LS42MSwuNjEtLjYxaDQuNjVabTEuNjIsMy44NGMwLS4zNC0uMjctLjYxLS42MS0uNjFzLS42MSwuMjctLjYxLC42MXY2LjA3YzAsLjM0LC4yNywuNjEsLjYxLC42MXMuNjEtLjI3LC42MS0uNjF2LTYuMDdabTMuMDQtLjYxYy4zNCwwLC42MSwuMjcsLjYxLC42MXY2LjA3YzAsLjM0LS4yNywuNjEtLjYxLC42MXMtLjYxLS4yNy0uNjEtLjYxdi02LjA3YzAtLjM0LC4yNy0uNjEsLjYxLS42MVptLTYuMDgsNy42NmMuMDksLjkzLC44NywxLjY1LDEuODEsMS42NWg0LjljLjk0LDAsMS43Mi0uNzEsMS44MS0xLjY1bC45NC05LjY5SDE0LjgxbC45NCw5LjY5WiIvPjwvc3ZnPg==";
59003
+
59004
+ /***/ }),
59005
+
59006
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonBar_deleteIcon_disabled.svg":
59007
+ /*!****************************************************************************!*\
59008
+ !*** ../../../tools/guiEditor/dist/imgs/buttonBar_deleteIcon_disabled.svg ***!
59009
+ \****************************************************************************/
59010
+ /***/ ((module) => {
59011
+
59012
+ "use strict";
59013
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM3Nzc3Nzc7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE4LjM5LDE0LjU0aDMuMjRjMC0uODktLjcyLTEuNjItMS42Mi0xLjYycy0xLjYyLC43Mi0xLjYyLDEuNjJabS0xLjIxLDBjMC0xLjU2LDEuMjctMi44MywyLjgzLTIuODNzMi44MywxLjI3LDIuODMsMi44M2g0LjY1Yy4zNCwwLC42MSwuMjcsLjYxLC42MXMtLjI3LC42MS0uNjEsLjYxaC0xLjA3bC0uOTUsOS44Yy0uMTUsMS41Ni0xLjQ2LDIuNzQtMy4wMiwyLjc0aC00LjljLTEuNTYsMC0yLjg3LTEuMTktMy4wMi0yLjc0bC0uOTUtOS44aC0xLjA3Yy0uMzQsMC0uNjEtLjI3LS42MS0uNjFzLjI3LS42MSwuNjEtLjYxaDQuNjVabTEuNjIsMy44NGMwLS4zNC0uMjctLjYxLS42MS0uNjFzLS42MSwuMjctLjYxLC42MXY2LjA3YzAsLjM0LC4yNywuNjEsLjYxLC42MXMuNjEtLjI3LC42MS0uNjF2LTYuMDdabTMuMDQtLjYxYy4zNCwwLC42MSwuMjcsLjYxLC42MXY2LjA3YzAsLjM0LS4yNywuNjEtLjYxLC42MXMtLjYxLS4yNy0uNjEtLjYxdi02LjA3YzAtLjM0LC4yNy0uNjEsLjYxLS42MVptLTYuMDgsNy42NmMuMDksLjkzLC44NywxLjY1LDEuODEsMS42NWg0LjljLjk0LDAsMS43Mi0uNzEsMS44MS0xLjY1bC45NC05LjY5SDE0LjgxbC45NCw5LjY5WiIvPjwvc3ZnPg==";
59014
+
59015
+ /***/ }),
59016
+
58894
59017
  /***/ "../../../tools/guiEditor/dist/imgs/buttonIcon.svg":
58895
59018
  /*!*********************************************************!*\
58896
59019
  !*** ../../../tools/guiEditor/dist/imgs/buttonIcon.svg ***!
@@ -58902,6 +59025,50 @@ module.exports = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5v
58902
59025
 
58903
59026
  /***/ }),
58904
59027
 
59028
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonbar_copyIcon.svg":
59029
+ /*!*****************************************************************!*\
59030
+ !*** ../../../tools/guiEditor/dist/imgs/buttonbar_copyIcon.svg ***!
59031
+ \*****************************************************************/
59032
+ /***/ ((module) => {
59033
+
59034
+ "use strict";
59035
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE0Ljc2LDE0LjA2djEwLjI3YzAsMS40NiwxLjE4LDIuNjQsMi42NCwyLjY0aDcuMDFjLS4yNSwuNzEtLjkzLDEuMjItMS43MywxLjIyaC01LjI4Yy0yLjEzLDAtMy44Ni0xLjczLTMuODYtMy44NlYxNS43OGMwLS44LC41MS0xLjQ4LDEuMjItMS43M1ptOS45Ni0yLjE0YzEuMDEsMCwxLjgzLC44MiwxLjgzLDEuODN2MTAuNTdjMCwxLjAxLS44MiwxLjgzLTEuODMsMS44M2gtNy4zMmMtMS4wMSwwLTEuODMtLjgyLTEuODMtMS44M1YxMy43NWMwLTEuMDEsLjgyLTEuODMsMS44My0xLjgzaDcuMzJabTAsMS4yMmgtNy4zMmMtLjM0LDAtLjYxLC4yNy0uNjEsLjYxdjEwLjU3YzAsLjM0LC4yNywuNjEsLjYxLC42MWg3LjMyYy4zNCwwLC42MS0uMjcsLjYxLS42MVYxMy43NWMwLS4zNC0uMjctLjYxLS42MS0uNjFaIi8+PC9zdmc+";
59036
+
59037
+ /***/ }),
59038
+
59039
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonbar_copyIcon_disabled.svg":
59040
+ /*!**************************************************************************!*\
59041
+ !*** ../../../tools/guiEditor/dist/imgs/buttonbar_copyIcon_disabled.svg ***!
59042
+ \**************************************************************************/
59043
+ /***/ ((module) => {
59044
+
59045
+ "use strict";
59046
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM3Nzc3Nzc7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE0Ljc2LDE0LjA2djEwLjI3YzAsMS40NiwxLjE4LDIuNjQsMi42NCwyLjY0aDcuMDFjLS4yNSwuNzEtLjkzLDEuMjItMS43MywxLjIyaC01LjI4Yy0yLjEzLDAtMy44Ni0xLjczLTMuODYtMy44NlYxNS43OGMwLS44LC41MS0xLjQ4LDEuMjItMS43M1ptOS45Ni0yLjE0YzEuMDEsMCwxLjgzLC44MiwxLjgzLDEuODN2MTAuNTdjMCwxLjAxLS44MiwxLjgzLTEuODMsMS44M2gtNy4zMmMtMS4wMSwwLTEuODMtLjgyLTEuODMtMS44M1YxMy43NWMwLTEuMDEsLjgyLTEuODMsMS44My0xLjgzaDcuMzJabTAsMS4yMmgtNy4zMmMtLjM0LDAtLjYxLC4yNy0uNjEsLjYxdjEwLjU3YzAsLjM0LC4yNywuNjEsLjYxLC42MWg3LjMyYy4zNCwwLC42MS0uMjcsLjYxLS42MVYxMy43NWMwLS4zNC0uMjctLjYxLS42MS0uNjFaIi8+PC9zdmc+";
59047
+
59048
+ /***/ }),
59049
+
59050
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonbar_pasteIcon.svg":
59051
+ /*!******************************************************************!*\
59052
+ !*** ../../../tools/guiEditor/dist/imgs/buttonbar_pasteIcon.svg ***!
59053
+ \******************************************************************/
59054
+ /***/ ((module) => {
59055
+
59056
+ "use strict";
59057
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwLjYxLDEyLjA3Yy45NCwwLDEuNzEsLjcxLDEuODEsMS42MmgxLjQzYy45NywwLDEuNzYsLjc1LDEuODIsMS43di4xM2MwLC4zMS0uMjIsLjU2LS41MiwuNmgtLjA4Yy0uMzEsMC0uNTYtLjIyLS42LS41MnYtLjA4YzAtLjMxLS4yMy0uNTYtLjUzLS42aC0xLjgxYy0uMzMsLjQ4LS44OCwuOC0xLjUxLC44aC0yLjg1Yy0uNjMsMC0xLjE5LS4zMi0xLjUxLS44MWgtMS43M2MtLjMxLDAtLjU2LC4yMy0uNiwuNTN2MTEuMDVjMCwuMzEsLjIyLC41NiwuNTIsLjZoMi41MmMuMzEsMCwuNTYsLjIzLC42LC41M3YuMDhjMCwuMzQtLjI3LC42MS0uNiwuNjFoLTIuNDRjLS45NywwLTEuNzYtLjc1LTEuODItMS43VjE1LjUzYzAtLjk3LC43NS0xLjc2LDEuNy0xLjgyaDEuNTZjLjEtLjkyLC44Ny0xLjYzLDEuODEtMS42M2gyLjg1Wm00Ljg3LDQuODdjLjk3LDAsMS43NiwuNzUsMS44MiwxLjd2Ny44NGMwLC45Ny0uNzUsMS43Ni0xLjcsMS44MmgtNS40Yy0uOTcsMC0xLjc2LS43NS0xLjgyLTEuN3YtNy44NGMwLS45NywuNzUtMS43NiwxLjctMS44Mmg1LjRabTAsMS4yMWgtNS4yOGMtLjMxLDAtLjU2LC4yMy0uNiwuNTN2Ny44YzAsLjMxLC4yMiwuNTYsLjUyLC42aDUuMzZjLjMxLDAsLjU2LS4yMiwuNi0uNTJ2LTcuOGMwLS4zMS0uMjItLjU2LS41Mi0uNmgtLjA4Wm0tNC44Ny00Ljg4aC0yLjg1Yy0uMzMsMC0uNjEsLjI3LS42MSwuNjFzLjI3LC42MSwuNjEsLjYxaDIuODVjLjMzLDAsLjYxLS4yNywuNjEtLjYxcy0uMjctLjYxLS42MS0uNjFaIi8+PC9zdmc+";
59058
+
59059
+ /***/ }),
59060
+
59061
+ /***/ "../../../tools/guiEditor/dist/imgs/buttonbar_pasteIcon_disabled.svg":
59062
+ /*!***************************************************************************!*\
59063
+ !*** ../../../tools/guiEditor/dist/imgs/buttonbar_pasteIcon_disabled.svg ***!
59064
+ \***************************************************************************/
59065
+ /***/ ((module) => {
59066
+
59067
+ "use strict";
59068
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJpY29ucyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM3Nzc3Nzc7fTwvc3R5bGU+PC9kZWZzPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIwLjYxLDEyLjA3Yy45NCwwLDEuNzEsLjcxLDEuODEsMS42MmgxLjQzYy45NywwLDEuNzYsLjc1LDEuODIsMS43di4xM2MwLC4zMS0uMjIsLjU2LS41MiwuNmgtLjA4Yy0uMzEsMC0uNTYtLjIyLS42LS41MnYtLjA4YzAtLjMxLS4yMy0uNTYtLjUzLS42aC0xLjgxYy0uMzMsLjQ4LS44OCwuOC0xLjUxLC44aC0yLjg1Yy0uNjMsMC0xLjE5LS4zMi0xLjUxLS44MWgtMS43M2MtLjMxLDAtLjU2LC4yMy0uNiwuNTN2MTEuMDVjMCwuMzEsLjIyLC41NiwuNTIsLjZoMi41MmMuMzEsMCwuNTYsLjIzLC42LC41M3YuMDhjMCwuMzQtLjI3LC42MS0uNiwuNjFoLTIuNDRjLS45NywwLTEuNzYtLjc1LTEuODItMS43VjE1LjUzYzAtLjk3LC43NS0xLjc2LDEuNy0xLjgyaDEuNTZjLjEtLjkyLC44Ny0xLjYzLDEuODEtMS42M2gyLjg1Wm00Ljg3LDQuODdjLjk3LDAsMS43NiwuNzUsMS44MiwxLjd2Ny44NGMwLC45Ny0uNzUsMS43Ni0xLjcsMS44MmgtNS40Yy0uOTcsMC0xLjc2LS43NS0xLjgyLTEuN3YtNy44NGMwLS45NywuNzUtMS43NiwxLjctMS44Mmg1LjRabTAsMS4yMWgtNS4yOGMtLjMxLDAtLjU2LC4yMy0uNiwuNTN2Ny44YzAsLjMxLC4yMiwuNTYsLjUyLC42aDUuMzZjLjMxLDAsLjU2LS4yMiwuNi0uNTJ2LTcuOGMwLS4zMS0uMjItLjU2LS41Mi0uNmgtLjA4Wm0tNC44Ny00Ljg4aC0yLjg1Yy0uMzMsMC0uNjEsLjI3LS42MSwuNjFzLjI3LC42MSwuNjEsLjYxaDIuODVjLjMzLDAsLjYxLS4yNywuNjEtLjYxcy0uMjctLjYxLS42MS0uNjFaIi8+PC9zdmc+";
59069
+
59070
+ /***/ }),
59071
+
58905
59072
  /***/ "../../../tools/guiEditor/dist/imgs/canvasFitIcon.svg":
58906
59073
  /*!************************************************************!*\
58907
59074
  !*** ../../../tools/guiEditor/dist/imgs/canvasFitIcon.svg ***!