@babylonjs/gui-editor 5.0.0 → 5.0.3

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.
@@ -7,7 +7,7 @@
7
7
  exports["@babylonjs/gui-editor"] = factory(require("@babylonjs/core"), require("@babylonjs/gui"));
8
8
  else
9
9
  root["GUIEDITOR"] = factory(root["BABYLON"], root["BABYLON"]["GUI"]);
10
- })((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_core_Misc_observable__, __WEBPACK_EXTERNAL_MODULE_gui_2D_controls_button__) {
10
+ })((typeof self !== "undefined" ? self : typeof global !== "undefined" ? global : this), function(__WEBPACK_EXTERNAL_MODULE_core_Misc_observable__, __WEBPACK_EXTERNAL_MODULE_gui_2D_controls_container__) {
11
11
  return /******/ (() => { // webpackBootstrap
12
12
  /******/ var __webpack_modules__ = ({
13
13
 
@@ -166,7 +166,7 @@ __webpack_require__.r(__webpack_exports__);
166
166
 
167
167
  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()));
168
168
  // Module
169
- ___CSS_LOADER_EXPORT___.push([module.id, ":root {\n --blackBarHeight: 55px; }\n\n#gui-editor-workbench-root {\n display: grid;\n grid-template-rows: calc(100% - 55px);\n height: 100%;\n width: 100%;\n background: #e2e2e2;\n font: 14px \"acumin-pro-condensed\"; }\n\n.wait-screen {\n display: grid;\n justify-content: center;\n align-content: center;\n height: 100%;\n width: 100%;\n background: #464646;\n opacity: 0.95;\n color: white;\n font: 24px \"acumin-pro-condensed\";\n position: absolute;\n top: 0;\n left: 0; }\n .wait-screen.hidden {\n visibility: hidden; }\n\n#leftGrab {\n width: 5px;\n height: 100%;\n cursor: ew-resize;\n position: absolute;\n right: -1px;\n top: 0; }\n\n#rightGrab {\n cursor: ew-resize;\n width: 5px;\n bottom: 0;\n position: absolute;\n top: 0;\n left: 0; }\n\n#toolbarGrab {\n background: #333333;\n grid-row: 1 / span 3;\n grid-column: 2;\n height: 100%; }\n #toolbarGrab .blackLine {\n height: 5px;\n background: black; }\n #toolbarGrab .toolbar-label {\n color: white;\n font-size: 18px;\n display: grid;\n align-items: center;\n cursor: pointer;\n user-select: none;\n grid-template-columns: 1fr 20px;\n grid-template-rows: 100%;\n position: relative; }\n #toolbarGrab .toolbar-label.active {\n font-weight: bold;\n font-size: 20px; }\n #toolbarGrab .toolbar-label:hover {\n background: var(--selectionGrey); }\n #toolbarGrab .toolbar-label:hover .sub-items {\n display: block; }\n #toolbarGrab .toolbar-icon {\n width: 40px;\n height: 40px; }\n\n.diagram-container {\n position: relative;\n display: grid;\n grid-row: 1;\n grid-column: 2;\n background: #cccccc;\n width: 100%;\n height: 100%;\n overflow: hidden; }\n .diagram-container .diagram {\n display: none;\n width: 100%;\n height: 100%; }\n\n.left-panel {\n grid-row: 1 / span 2;\n grid-column: 1;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 1fr 40px;\n position: relative; }\n\n.right-panel {\n grid-row: 1 / span 2;\n grid-column: 3;\n display: grid;\n grid-template-rows: 1fr 40px auto 40px;\n grid-template-columns: 100%;\n overflow-y: auto;\n position: relative; }\n .right-panel #propertyTab {\n grid-row: 1;\n grid-column: 1; }\n .right-panel .button {\n display: grid;\n justify-content: center;\n align-content: center;\n height: auto;\n width: calc(100% / 7);\n cursor: pointer; }\n .right-panel .button:hover {\n background: #337ab7;\n color: white;\n opacity: 0.8; }\n .right-panel .button.selected {\n background: #337ab7;\n color: white; }\n .right-panel .button.align {\n justify-content: stretch;\n text-align: center; }\n\n.blocker {\n visibility: hidden;\n position: absolute;\n width: calc(100% - 40px);\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(20, 20, 20, 0.95);\n font-family: \"acumin-pro-condensed\", sans-serif;\n color: white;\n font-size: 24px;\n display: grid;\n align-content: center;\n justify-content: center;\n user-select: none;\n padding: 20px;\n text-align: center; }\n\n#log-console {\n grid-row: 2;\n grid-column: 4;\n display: none; }\n\n.dialog-container {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n display: grid;\n font-family: \"acumin-pro-condensed\", sans-serif;\n top: 0; }\n .dialog-container .dialog {\n z-index: 3;\n align-self: center;\n justify-self: center;\n min-height: 140px;\n max-width: 400px;\n border-radius: 10px;\n background: white;\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: calc(100% - 50px) 50px; }\n .dialog-container .dialog .dialog-message {\n grid-row: 1;\n grid-column: 1;\n margin-top: 20px;\n padding: 10px;\n font-size: 18px;\n color: black; }\n .dialog-container .dialog .dialog-buttons {\n grid-row: 2;\n grid-column: 1;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%;\n color: white; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok {\n cursor: pointer;\n justify-self: center;\n background: green;\n min-width: 80px;\n justify-content: center;\n display: grid;\n align-content: center;\n align-self: center;\n height: 35px;\n border-radius: 10px; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok:hover {\n opacity: 0.8; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok.error {\n background: red; }\n\n.gizmo * {\n user-select: none; }\n\n.gizmo .bounding-box-line {\n background-color: black;\n position: absolute;\n line-height: 1px;\n height: 1px;\n pointer-events: none; }\n\n.gizmo .scale-point-container {\n position: absolute;\n width: 30px;\n height: 30px; }\n .gizmo .scale-point-container .scale-point {\n top: 10px;\n left: 10px;\n position: absolute;\n width: 10px;\n height: 10px;\n background: transparent;\n outline: #7d7d7d 2px solid; }\n .gizmo .scale-point-container .rotate-click-area {\n width: 20px;\n height: 20px;\n position: absolute; }\n .gizmo .scale-point-container .scale-click-area {\n width: 20px;\n height: 20px;\n position: absolute; }\n\n.gizmo .pivot-point {\n width: 30px;\n height: 30px;\n background: transparent;\n position: absolute; }\n\n#workbench-canvas {\n position: relative; }\n\n.artboard-stroke {\n outline: 1px solid black;\n position: absolute;\n z-index: 2;\n pointer-events: none; }\n\n.artboard-background {\n position: absolute;\n background: repeating-conic-gradient(#e2e2e2 0% 25%, white 0% 50%) 50%/10px 10px;\n width: 100%;\n height: 100%; }\n", "",{"version":3,"sources":["webpack://./../../../tools/guiEditor/dist/main.scss"],"names":[],"mappings":"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","sourcesContent":[":root {\r\n --blackBarHeight: 55px;\r\n}\r\n\r\n#gui-editor-workbench-root {\r\n display: grid;\r\n grid-template-rows: calc(100% - 55px);\r\n height: 100%;\r\n width: 100%;\r\n background: #e2e2e2;\r\n font: 14px \"acumin-pro-condensed\";\r\n}\r\n\r\n.wait-screen {\r\n display: grid;\r\n justify-content: center;\r\n align-content: center;\r\n height: 100%;\r\n width: 100%;\r\n background: #464646;\r\n opacity: 0.95;\r\n color: white;\r\n font: 24px \"acumin-pro-condensed\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n\r\n &.hidden {\r\n visibility: hidden;\r\n }\r\n}\r\n\r\n#leftGrab {\r\n width: 5px;\r\n height: 100%;\r\n cursor: ew-resize;\r\n position: absolute;\r\n right: -1px;\r\n top: 0;\r\n}\r\n\r\n#rightGrab {\r\n cursor: ew-resize;\r\n width: 5px;\r\n bottom: 0;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n}\r\n\r\n#toolbarGrab {\r\n background: #333333;\r\n grid-row: 1 / span 3;\r\n grid-column: 2;\r\n height: 100%;\r\n\r\n .blackLine {\r\n height: 5px;\r\n background: black;\r\n }\r\n .toolbar-label {\r\n color: white;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n }\r\n }\r\n .toolbar-icon {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n}\r\n\r\n.diagram-container {\r\n position: relative;\r\n display: grid;\r\n grid-row: 1;\r\n grid-column: 2;\r\n background: #cccccc;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n\r\n .diagram {\r\n display: none;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n}\r\n\r\n.left-panel {\r\n grid-row: 1 / span 2;\r\n grid-column: 1;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 1fr 40px;\r\n position: relative;\r\n}\r\n\r\n.right-panel {\r\n grid-row: 1 / span 2;\r\n grid-column: 3;\r\n display: grid;\r\n grid-template-rows: 1fr 40px auto 40px;\r\n grid-template-columns: 100%;\r\n overflow-y: auto;\r\n position: relative;\r\n\r\n #propertyTab {\r\n grid-row: 1;\r\n grid-column: 1;\r\n }\r\n\r\n .button {\r\n display: grid;\r\n justify-content: center;\r\n align-content: center;\r\n height: auto;\r\n width: calc(100% / 7);\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background: rgb(51, 122, 183);\r\n color: white;\r\n opacity: 0.8;\r\n }\r\n\r\n &.selected {\r\n background: rgb(51, 122, 183);\r\n color: white;\r\n }\r\n\r\n &.align {\r\n justify-content: stretch;\r\n text-align: center;\r\n }\r\n }\r\n}\r\n\r\n.blocker {\r\n visibility: hidden;\r\n position: absolute;\r\n width: calc(100% - 40px);\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n\r\n background: rgba(20, 20, 20, 0.95);\r\n font-family: \"acumin-pro-condensed\", sans-serif;\r\n color: white;\r\n font-size: 24px;\r\n\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n\r\n user-select: none;\r\n\r\n padding: 20px;\r\n text-align: center;\r\n}\r\n\r\n#log-console {\r\n grid-row: 2;\r\n grid-column: 4;\r\n display: none;\r\n}\r\n\r\n.dialog-container {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0.1, 0.1, 0.1, 0.6);\r\n display: grid;\r\n font-family: \"acumin-pro-condensed\", sans-serif;\r\n top: 0;\r\n\r\n .dialog {\r\n z-index: 3;\r\n align-self: center;\r\n justify-self: center;\r\n min-height: 140px;\r\n max-width: 400px;\r\n border-radius: 10px;\r\n background: white;\r\n\r\n display: grid;\r\n grid-template-columns: 100%;\r\n grid-template-rows: calc(100% - 50px) 50px;\r\n\r\n .dialog-message {\r\n grid-row: 1;\r\n grid-column: 1;\r\n margin-top: 20px;\r\n padding: 10px;\r\n font-size: 18px;\r\n color: black;\r\n }\r\n\r\n .dialog-buttons {\r\n grid-row: 2;\r\n grid-column: 1;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 100%;\r\n color: white;\r\n\r\n .dialog-button-ok {\r\n cursor: pointer;\r\n justify-self: center;\r\n background: green;\r\n min-width: 80px;\r\n justify-content: center;\r\n display: grid;\r\n align-content: center;\r\n align-self: center;\r\n height: 35px;\r\n border-radius: 10px;\r\n\r\n &:hover {\r\n opacity: 0.8;\r\n }\r\n\r\n &.error {\r\n background: red;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n.gizmo {\r\n * {\r\n user-select: none;\r\n }\r\n .bounding-box-line {\r\n background-color: black;\r\n position: absolute;\r\n line-height: 1px;\r\n height: 1px;\r\n pointer-events: none;\r\n }\r\n .scale-point-container {\r\n position: absolute;\r\n width: 30px;\r\n height: 30px;\r\n .scale-point {\r\n top: 10px;\r\n left: 10px;\r\n position: absolute;\r\n width: 10px;\r\n height: 10px;\r\n background: transparent;\r\n outline: rgb(125, 125, 125) 2px solid;\r\n }\r\n .rotate-click-area {\r\n width: 20px;\r\n height: 20px;\r\n position: absolute;\r\n }\r\n .scale-click-area {\r\n width: 20px;\r\n height: 20px;\r\n position: absolute;\r\n }\r\n }\r\n .pivot-point {\r\n width: 30px;\r\n height: 30px;\r\n background: transparent;\r\n position: absolute;\r\n }\r\n}\r\n#workbench-canvas {\r\n position: relative;\r\n}\r\n.artboard-stroke {\r\n outline: 1px solid black;\r\n position: absolute;\r\n z-index: 2;\r\n pointer-events: none;\r\n}\r\n.artboard-background {\r\n position: absolute;\r\n background: repeating-conic-gradient(#e2e2e2 0% 25%, white 0% 50%) 50% / 10px 10px;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n"],"sourceRoot":""}]);
169
+ ___CSS_LOADER_EXPORT___.push([module.id, ":root {\n --blackBarHeight: 55px; }\n\n#gui-editor-workbench-root {\n display: grid;\n grid-template-rows: calc(100% - 55px);\n height: 100%;\n width: 100%;\n background: #e2e2e2;\n font: 14px \"acumin-pro-condensed\"; }\n\n.wait-screen {\n display: grid;\n justify-content: center;\n align-content: center;\n height: 100%;\n width: 100%;\n background: #464646;\n opacity: 0.95;\n color: white;\n font: 24px \"acumin-pro-condensed\";\n position: absolute;\n top: 0;\n left: 0; }\n .wait-screen.hidden {\n visibility: hidden; }\n\n#leftGrab {\n width: 5px;\n height: 100%;\n cursor: ew-resize;\n position: absolute;\n right: -1px;\n top: 0; }\n\n#rightGrab {\n cursor: ew-resize;\n width: 5px;\n bottom: 0;\n position: absolute;\n top: 0;\n left: 0; }\n\n#toolbarGrab {\n background: #333333;\n grid-row: 1 / span 3;\n grid-column: 2;\n height: 100%;\n overflow-y: auto; }\n #toolbarGrab .blackLine {\n height: 5px;\n background: black; }\n #toolbarGrab .toolbar-label {\n color: white;\n font-size: 18px;\n display: grid;\n align-items: center;\n cursor: pointer;\n user-select: none;\n grid-template-columns: 1fr 20px;\n grid-template-rows: 100%;\n position: relative; }\n #toolbarGrab .toolbar-label.active {\n font-weight: bold;\n font-size: 20px; }\n #toolbarGrab .toolbar-label:hover {\n background: var(--selectionGrey); }\n #toolbarGrab .toolbar-label:hover .sub-items {\n display: block; }\n #toolbarGrab .toolbar-icon {\n width: 40px;\n height: 40px; }\n\n.diagram-container {\n position: relative;\n display: grid;\n grid-row: 1;\n grid-column: 2;\n background: #cccccc;\n width: 100%;\n height: 100%;\n overflow: hidden; }\n .diagram-container .diagram {\n display: none;\n width: 100%;\n height: 100%; }\n\n.left-panel {\n grid-row: 1 / span 2;\n grid-column: 1;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 1fr 40px;\n position: relative;\n overflow: hidden; }\n\n.right-panel {\n grid-row: 1 / span 2;\n grid-column: 3;\n display: grid;\n grid-template-rows: 1fr 40px auto 40px;\n grid-template-columns: 100%;\n overflow-y: auto;\n position: relative; }\n .right-panel #propertyTab {\n grid-row: 1;\n grid-column: 1; }\n .right-panel .button {\n display: grid;\n justify-content: center;\n align-content: center;\n height: auto;\n width: calc(100% / 7);\n cursor: pointer; }\n .right-panel .button:hover {\n background: #337ab7;\n color: white;\n opacity: 0.8; }\n .right-panel .button.selected {\n background: #337ab7;\n color: white; }\n .right-panel .button.align {\n justify-content: stretch;\n text-align: center; }\n\n.blocker {\n visibility: hidden;\n position: absolute;\n width: calc(100% - 40px);\n height: 100%;\n top: 0;\n left: 0;\n background: rgba(20, 20, 20, 0.95);\n font-family: \"acumin-pro-condensed\", sans-serif;\n color: white;\n font-size: 24px;\n display: grid;\n align-content: center;\n justify-content: center;\n user-select: none;\n padding: 20px;\n text-align: center; }\n\n#log-console {\n grid-row: 2;\n grid-column: 4;\n display: none; }\n\n.dialog-container {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.6);\n display: grid;\n font-family: \"acumin-pro-condensed\", sans-serif;\n top: 0; }\n .dialog-container .dialog {\n z-index: 3;\n align-self: center;\n justify-self: center;\n min-height: 140px;\n max-width: 400px;\n border-radius: 10px;\n background: white;\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: calc(100% - 50px) 50px; }\n .dialog-container .dialog .dialog-message {\n grid-row: 1;\n grid-column: 1;\n margin-top: 20px;\n padding: 10px;\n font-size: 18px;\n color: black; }\n .dialog-container .dialog .dialog-buttons {\n grid-row: 2;\n grid-column: 1;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%;\n color: white; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok {\n cursor: pointer;\n justify-self: center;\n background: green;\n min-width: 80px;\n justify-content: center;\n display: grid;\n align-content: center;\n align-self: center;\n height: 35px;\n border-radius: 10px; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok:hover {\n opacity: 0.8; }\n .dialog-container .dialog .dialog-buttons .dialog-button-ok.error {\n background: red; }\n\n.gizmo * {\n user-select: none; }\n\n.gizmo .bounding-box-line {\n background-color: black;\n position: absolute;\n line-height: 1px;\n height: 1px;\n pointer-events: none; }\n\n.gizmo .scale-point-container {\n position: absolute;\n width: 30px;\n height: 30px; }\n .gizmo .scale-point-container .scale-point {\n top: 10px;\n left: 10px;\n position: absolute;\n width: 10px;\n height: 10px;\n background: transparent;\n outline: #7d7d7d 2px solid; }\n .gizmo .scale-point-container .rotate-click-area {\n width: 20px;\n height: 20px;\n position: absolute; }\n .gizmo .scale-point-container .scale-click-area {\n width: 20px;\n height: 20px;\n position: absolute; }\n\n.gizmo .pivot-point {\n width: 30px;\n height: 30px;\n background: transparent;\n position: absolute; }\n\n#workbench-canvas {\n position: relative; }\n\n.artboard-stroke {\n outline: 1px solid black;\n position: absolute;\n z-index: 2;\n pointer-events: none; }\n\n.artboard-background {\n position: absolute;\n background: repeating-conic-gradient(#e2e2e2 0% 25%, white 0% 50%) 50%/10px 10px;\n width: 100%;\n height: 100%; }\n", "",{"version":3,"sources":["webpack://./../../../tools/guiEditor/dist/main.scss"],"names":[],"mappings":"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","sourcesContent":[":root {\r\n --blackBarHeight: 55px;\r\n}\r\n\r\n#gui-editor-workbench-root {\r\n display: grid;\r\n grid-template-rows: calc(100% - 55px);\r\n height: 100%;\r\n width: 100%;\r\n background: #e2e2e2;\r\n font: 14px \"acumin-pro-condensed\";\r\n}\r\n\r\n.wait-screen {\r\n display: grid;\r\n justify-content: center;\r\n align-content: center;\r\n height: 100%;\r\n width: 100%;\r\n background: #464646;\r\n opacity: 0.95;\r\n color: white;\r\n font: 24px \"acumin-pro-condensed\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n\r\n &.hidden {\r\n visibility: hidden;\r\n }\r\n}\r\n\r\n#leftGrab {\r\n width: 5px;\r\n height: 100%;\r\n cursor: ew-resize;\r\n position: absolute;\r\n right: -1px;\r\n top: 0;\r\n}\r\n\r\n#rightGrab {\r\n cursor: ew-resize;\r\n width: 5px;\r\n bottom: 0;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n}\r\n\r\n#toolbarGrab {\r\n background: #333333;\r\n grid-row: 1 / span 3;\r\n grid-column: 2;\r\n height: 100%;\r\n overflow-y: auto;\r\n\r\n .blackLine {\r\n height: 5px;\r\n background: black;\r\n }\r\n .toolbar-label {\r\n color: white;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n }\r\n }\r\n .toolbar-icon {\r\n width: 40px;\r\n height: 40px;\r\n }\r\n}\r\n\r\n.diagram-container {\r\n position: relative;\r\n display: grid;\r\n grid-row: 1;\r\n grid-column: 2;\r\n background: #cccccc;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n\r\n .diagram {\r\n display: none;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n}\r\n\r\n.left-panel {\r\n grid-row: 1 / span 2;\r\n grid-column: 1;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 1fr 40px;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n\r\n.right-panel {\r\n grid-row: 1 / span 2;\r\n grid-column: 3;\r\n display: grid;\r\n grid-template-rows: 1fr 40px auto 40px;\r\n grid-template-columns: 100%;\r\n overflow-y: auto;\r\n position: relative;\r\n\r\n #propertyTab {\r\n grid-row: 1;\r\n grid-column: 1;\r\n }\r\n\r\n .button {\r\n display: grid;\r\n justify-content: center;\r\n align-content: center;\r\n height: auto;\r\n width: calc(100% / 7);\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background: rgb(51, 122, 183);\r\n color: white;\r\n opacity: 0.8;\r\n }\r\n\r\n &.selected {\r\n background: rgb(51, 122, 183);\r\n color: white;\r\n }\r\n\r\n &.align {\r\n justify-content: stretch;\r\n text-align: center;\r\n }\r\n }\r\n}\r\n\r\n.blocker {\r\n visibility: hidden;\r\n position: absolute;\r\n width: calc(100% - 40px);\r\n height: 100%;\r\n top: 0;\r\n left: 0;\r\n\r\n background: rgba(20, 20, 20, 0.95);\r\n font-family: \"acumin-pro-condensed\", sans-serif;\r\n color: white;\r\n font-size: 24px;\r\n\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n\r\n user-select: none;\r\n\r\n padding: 20px;\r\n text-align: center;\r\n}\r\n\r\n#log-console {\r\n grid-row: 2;\r\n grid-column: 4;\r\n display: none;\r\n}\r\n\r\n.dialog-container {\r\n position: absolute;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0.1, 0.1, 0.1, 0.6);\r\n display: grid;\r\n font-family: \"acumin-pro-condensed\", sans-serif;\r\n top: 0;\r\n\r\n .dialog {\r\n z-index: 3;\r\n align-self: center;\r\n justify-self: center;\r\n min-height: 140px;\r\n max-width: 400px;\r\n border-radius: 10px;\r\n background: white;\r\n\r\n display: grid;\r\n grid-template-columns: 100%;\r\n grid-template-rows: calc(100% - 50px) 50px;\r\n\r\n .dialog-message {\r\n grid-row: 1;\r\n grid-column: 1;\r\n margin-top: 20px;\r\n padding: 10px;\r\n font-size: 18px;\r\n color: black;\r\n }\r\n\r\n .dialog-buttons {\r\n grid-row: 2;\r\n grid-column: 1;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 100%;\r\n color: white;\r\n\r\n .dialog-button-ok {\r\n cursor: pointer;\r\n justify-self: center;\r\n background: green;\r\n min-width: 80px;\r\n justify-content: center;\r\n display: grid;\r\n align-content: center;\r\n align-self: center;\r\n height: 35px;\r\n border-radius: 10px;\r\n\r\n &:hover {\r\n opacity: 0.8;\r\n }\r\n\r\n &.error {\r\n background: red;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n.gizmo {\r\n * {\r\n user-select: none;\r\n }\r\n .bounding-box-line {\r\n background-color: black;\r\n position: absolute;\r\n line-height: 1px;\r\n height: 1px;\r\n pointer-events: none;\r\n }\r\n .scale-point-container {\r\n position: absolute;\r\n width: 30px;\r\n height: 30px;\r\n .scale-point {\r\n top: 10px;\r\n left: 10px;\r\n position: absolute;\r\n width: 10px;\r\n height: 10px;\r\n background: transparent;\r\n outline: rgb(125, 125, 125) 2px solid;\r\n }\r\n .rotate-click-area {\r\n width: 20px;\r\n height: 20px;\r\n position: absolute;\r\n }\r\n .scale-click-area {\r\n width: 20px;\r\n height: 20px;\r\n position: absolute;\r\n }\r\n }\r\n .pivot-point {\r\n width: 30px;\r\n height: 30px;\r\n background: transparent;\r\n position: absolute;\r\n }\r\n}\r\n#workbench-canvas {\r\n position: relative;\r\n}\r\n.artboard-stroke {\r\n outline: 1px solid black;\r\n position: absolute;\r\n z-index: 2;\r\n pointer-events: none;\r\n}\r\n.artboard-background {\r\n position: absolute;\r\n background: repeating-conic-gradient(#e2e2e2 0% 25%, white 0% 50%) 50% / 10px 10px;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n"],"sourceRoot":""}]);
170
170
  // Exports
171
171
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
172
172
 
@@ -193,7 +193,7 @@ __webpack_require__.r(__webpack_exports__);
193
193
 
194
194
  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()));
195
195
  // Module
196
- ___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.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 }\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":""}]);
196
+ ___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":""}]);
197
197
  // Exports
198
198
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
199
199
 
@@ -50173,7 +50173,7 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
50173
50173
  nextState.value = newValueString;
50174
50174
  return true;
50175
50175
  }
50176
- if (nextState.dragging != this.state.dragging) {
50176
+ if (nextState.dragging != this.state.dragging || nextProps.unit !== this.props.unit) {
50177
50177
  return true;
50178
50178
  }
50179
50179
  return false;
@@ -50286,7 +50286,17 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
50286
50286
  if (this.props.onEnter) {
50287
50287
  this.props.onEnter(this._store);
50288
50288
  }
50289
- }, placeholder: placeholder, onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value) }), this.props.arrows && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_5__.InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) }))] })), this.props.unit] }))), this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToDegrees(valueAsNumber), onChange: (value) => this.updateValue(core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToRadians(value).toString()) }))] }));
50289
+ }, placeholder: placeholder, onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value) }), this.props.arrows && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_5__.InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (newDragging) => {
50290
+ const currentDragging = this.state.dragging;
50291
+ // drag stopped
50292
+ if (!currentDragging && newDragging && this.props.onDragStart) {
50293
+ this.props.onDragStart(valueAsNumber);
50294
+ }
50295
+ else if (currentDragging && !newDragging && this.props.onDragStop) {
50296
+ this.props.onDragStop(valueAsNumber);
50297
+ }
50298
+ this.setState({ dragging: newDragging });
50299
+ } }))] })), this.props.unit] }))), this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToDegrees(valueAsNumber), onChange: (value) => this.updateValue(core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToRadians(value).toString()) }))] }));
50290
50300
  }
50291
50301
  }
50292
50302
 
@@ -50650,6 +50660,9 @@ class SliderLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
50650
50660
  this._localChange = false;
50651
50661
  return true;
50652
50662
  }
50663
+ if (nextProps.unit !== this.props.unit) {
50664
+ return true;
50665
+ }
50653
50666
  return false;
50654
50667
  }
50655
50668
  onChange(newValueString) {
@@ -50807,8 +50820,9 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
50807
50820
  nextState.value = newValue || "";
50808
50821
  return true;
50809
50822
  }
50810
- if (nextState.dragging != this.state.dragging)
50823
+ if (nextState.dragging != this.state.dragging || nextProps.unit !== this.props.unit) {
50811
50824
  return true;
50825
+ }
50812
50826
  return false;
50813
50827
  }
50814
50828
  raiseOnPropertyChanged(newValue, previousValue) {
@@ -51199,6 +51213,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
51199
51213
  constructor(props) {
51200
51214
  super(props);
51201
51215
  this._sizeOption = 0;
51216
+ this._stopUpdating = false;
51202
51217
  props.globalState.onToolChangeObservable.add(() => {
51203
51218
  this.forceUpdate();
51204
51219
  });
@@ -51274,7 +51289,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
51274
51289
  {
51275
51290
  label: "Give feedback",
51276
51291
  onClick: () => {
51277
- window.open("https://forum.babylonjs.com/t/introducing-the-gui-editor-alpha/24578", "_blank");
51292
+ window.open("https://forum.babylonjs.com/t/introducing-the-gui-editor-beta/28943", "_blank");
51278
51293
  },
51279
51294
  },
51280
51295
  ] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Select", icon: _imgs_pointerIcon_svg__WEBPACK_IMPORTED_MODULE_11__, shortcut: "S", isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.SELECT, onClick: () => {
@@ -51284,7 +51299,7 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
51284
51299
  } }), (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_13__, isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM, onClick: () => {
51285
51300
  this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM;
51286
51301
  } })] })), (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_16__, isActive: false, onClick: () => {
51287
- this.props.globalState.onFitToWindowObservable.notifyObservers();
51302
+ this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
51288
51303
  } }), (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_14__, 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, { 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) => {
51289
51304
  this.props.globalState.onResponsiveChangeObservable.notifyObservers(value);
51290
51305
  core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", value);
@@ -51302,8 +51317,22 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
51302
51317
  }
51303
51318
  this.forceUpdate();
51304
51319
  } })), !core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { label: "W", target: size, propertyName: "width", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
51320
+ if (!this._stopUpdating) {
51321
+ this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
51322
+ }
51323
+ }, onDragStart: () => {
51324
+ this._stopUpdating = true;
51325
+ }, onDragStop: (newValue) => {
51326
+ this._stopUpdating = false;
51305
51327
  this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
51306
51328
  }, arrows: true, isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { label: "H", target: size, propertyName: "height", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
51329
+ if (!this._stopUpdating) {
51330
+ this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
51331
+ }
51332
+ }, onDragStart: () => {
51333
+ this._stopUpdating = true;
51334
+ }, onDragStop: (newValue) => {
51335
+ this._stopUpdating = false;
51307
51336
  this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
51308
51337
  }, arrows: true, isInteger: true })] }))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "commands-right" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_17__, className: "beta-flag", draggable: false }) }))] })));
51309
51338
  }
@@ -51687,7 +51716,7 @@ __webpack_require__.r(__webpack_exports__);
51687
51716
  /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
51688
51717
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
51689
51718
  /* harmony import */ var shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! shared-ui-components/lines/textLineComponent */ "../../../dev/sharedUiComponents/dist/lines/textLineComponent.js");
51690
- /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/button");
51719
+ /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/container");
51691
51720
  /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__);
51692
51721
  /* harmony import */ var shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! shared-ui-components/lines/sliderLineComponent */ "../../../dev/sharedUiComponents/dist/lines/sliderLineComponent.js");
51693
51722
  /* harmony import */ var shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared-ui-components/lines/textInputLineComponent */ "../../../dev/sharedUiComponents/dist/lines/textInputLineComponent.js");
@@ -52125,10 +52154,20 @@ __webpack_require__.r(__webpack_exports__);
52125
52154
  /* harmony import */ var shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! shared-ui-components/lines/floatLineComponent */ "../../../dev/sharedUiComponents/dist/lines/floatLineComponent.js");
52126
52155
  /* harmony import */ var shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared-ui-components/lines/colorLineComponent */ "../../../dev/sharedUiComponents/dist/lines/colorLineComponent.js");
52127
52156
  /* harmony import */ var shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! shared-ui-components/lines/targetsProxy */ "../../../dev/sharedUiComponents/dist/lines/targetsProxy.js");
52128
- /* harmony import */ var shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! shared-ui-components/imgs/sizeIcon.svg */ "../../../dev/sharedUiComponents/dist/imgs/sizeIcon.svg");
52129
- /* harmony import */ var shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared-ui-components/imgs/colorIcon.svg */ "../../../dev/sharedUiComponents/dist/imgs/colorIcon.svg");
52130
- /* harmony import */ var shared_ui_components_imgs_conerRadiusIcon_svg__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! shared-ui-components/imgs/conerRadiusIcon.svg */ "../../../dev/sharedUiComponents/dist/imgs/conerRadiusIcon.svg");
52131
- /* harmony import */ var shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! shared-ui-components/imgs/strokeWeightIcon.svg */ "../../../dev/sharedUiComponents/dist/imgs/strokeWeightIcon.svg");
52157
+ /* harmony import */ var shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! shared-ui-components/imgs/sizeIcon.svg */ "../../../dev/sharedUiComponents/dist/imgs/sizeIcon.svg");
52158
+ /* harmony import */ var shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! shared-ui-components/imgs/colorIcon.svg */ "../../../dev/sharedUiComponents/dist/imgs/colorIcon.svg");
52159
+ /* harmony import */ var shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! shared-ui-components/imgs/strokeWeightIcon.svg */ "../../../dev/sharedUiComponents/dist/imgs/strokeWeightIcon.svg");
52160
+ /* harmony import */ var shared_ui_components_imgs_displayGridLine1Icon_svg__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! shared-ui-components/imgs/displayGridLine1Icon.svg */ "../../../dev/sharedUiComponents/dist/imgs/displayGridLine1Icon.svg");
52161
+ /* harmony import */ var shared_ui_components_imgs_frequencyIcon_svg__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! shared-ui-components/imgs/frequencyIcon.svg */ "../../../dev/sharedUiComponents/dist/imgs/frequencyIcon.svg");
52162
+ /* harmony import */ var shared_ui_components_imgs_displayGridLine2Icon_svg__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! shared-ui-components/imgs/displayGridLine2Icon.svg */ "../../../dev/sharedUiComponents/dist/imgs/displayGridLine2Icon.svg");
52163
+ /* harmony import */ var shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! shared-ui-components/lines/iconComponent */ "../../../dev/sharedUiComponents/dist/lines/iconComponent.js");
52164
+ /* harmony import */ var shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! shared-ui-components/lines/unitButton */ "../../../dev/sharedUiComponents/dist/lines/unitButton.js");
52165
+ /* harmony import */ var shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared-ui-components/lines/checkBoxLineComponent */ "../../../dev/sharedUiComponents/dist/lines/checkBoxLineComponent.js");
52166
+
52167
+
52168
+
52169
+
52170
+
52132
52171
 
52133
52172
 
52134
52173
 
@@ -52145,8 +52184,9 @@ class DisplayGridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1_
52145
52184
  super(props);
52146
52185
  }
52147
52186
  render() {
52148
- const displayGrids = this.props.displayGrids;
52149
- return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: displayGrids, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "DISPLAY GRID", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { iconLabel: "Cell Size", icon: shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_7__, min: 1, isInteger: true, lockObject: this.props.lockObject, label: "W", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(displayGrids, this.props.onPropertyChangedObservable), propertyName: "cellWidth", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: this.props.lockObject, label: "H", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(displayGrids, this.props.onPropertyChangedObservable), propertyName: "cellHeight", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { iconLabel: "Minor Line Tickness", icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_8__, min: 1, isInteger: true, lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(displayGrids, this.props.onPropertyChangedObservable), propertyName: "minorLineTickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { iconLabel: "Minor Line Color", icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_9__, lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(displayGrids, this.props.onPropertyChangedObservable), propertyName: "minorLineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { iconLabel: "Major Line Tickness", icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_8__, min: 1, isInteger: true, lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(displayGrids, this.props.onPropertyChangedObservable), propertyName: "majorLineTickness", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { iconLabel: "Major Line Color", icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_9__, lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(displayGrids, this.props.onPropertyChangedObservable), propertyName: "majorLineColor", onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { iconLabel: "Major Line Frequency", icon: shared_ui_components_imgs_conerRadiusIcon_svg__WEBPACK_IMPORTED_MODULE_10__, min: 1, isInteger: true, lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(displayGrids, this.props.onPropertyChangedObservable), propertyName: "majorLineFrequency", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] })));
52187
+ const { displayGrids, lockObject, onPropertyChangedObservable } = this.props;
52188
+ const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(displayGrids, onPropertyChangedObservable);
52189
+ return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "pane" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: displayGrids, onPropertyChangedObservable: onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "DISPLAY GRID", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Cell Size" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "W", target: proxy, propertyName: "cellWidth", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "H", target: proxy, propertyName: "cellHeight", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_displayGridLine1Icon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Show Minor Lines" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "SHOW MINOR LINES", onValueChanged: () => this.forceUpdate(), target: proxy, propertyName: "_displayMinorLines" })] })), proxy._displayMinorLines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Minor Line Tickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "", target: proxy, propertyName: "minorLineTickness", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Minor Line Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "minorLineColor", onPropertyChangedObservable: onPropertyChangedObservable })] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_displayGridLine2Icon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Show Major Lines" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "SHOW MAJOR LINES", onValueChanged: () => this.forceUpdate(), target: proxy, propertyName: "_displayMajorLines" })] })), proxy._displayMajorLines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Major Line Tickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "", target: proxy, propertyName: "majorLineTickness", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Major Line Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "majorLineColor", onPropertyChangedObservable: onPropertyChangedObservable })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_frequencyIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Major Line Frequency" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "", target: proxy, propertyName: "majorLineFrequency", onPropertyChangedObservable: onPropertyChangedObservable, arrows: true })] }))] }))] })));
52150
52190
  }
52151
52191
  }
52152
52192
 
@@ -52609,7 +52649,7 @@ __webpack_require__.r(__webpack_exports__);
52609
52649
  /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
52610
52650
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
52611
52651
  /* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.js");
52612
- /* harmony import */ var gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/controls/image */ "gui/2D/controls/button");
52652
+ /* harmony import */ var gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/controls/image */ "gui/2D/controls/container");
52613
52653
  /* harmony import */ var gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__);
52614
52654
  /* harmony import */ var shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! shared-ui-components/lines/floatLineComponent */ "../../../dev/sharedUiComponents/dist/lines/floatLineComponent.js");
52615
52655
  /* harmony import */ var shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared-ui-components/lines/checkBoxLineComponent */ "../../../dev/sharedUiComponents/dist/lines/checkBoxLineComponent.js");
@@ -53158,7 +53198,7 @@ __webpack_require__.r(__webpack_exports__);
53158
53198
  /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
53159
53199
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
53160
53200
  /* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.js");
53161
- /* harmony import */ var gui_2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/button");
53201
+ /* harmony import */ var gui_2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/container");
53162
53202
  /* harmony import */ var gui_2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_stackPanel__WEBPACK_IMPORTED_MODULE_3__);
53163
53203
  /* harmony import */ var shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! shared-ui-components/lines/checkBoxLineComponent */ "../../../dev/sharedUiComponents/dist/lines/checkBoxLineComponent.js");
53164
53204
  /* harmony import */ var shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared-ui-components/lines/floatLineComponent */ "../../../dev/sharedUiComponents/dist/lines/floatLineComponent.js");
@@ -53233,7 +53273,7 @@ __webpack_require__.r(__webpack_exports__);
53233
53273
  /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
53234
53274
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
53235
53275
  /* harmony import */ var _gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../gui/commonControlPropertyGridComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyGrids/gui/commonControlPropertyGridComponent.js");
53236
- /* harmony import */ var gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/controls/textBlock */ "gui/2D/controls/button");
53276
+ /* harmony import */ var gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/controls/textBlock */ "gui/2D/controls/container");
53237
53277
  /* harmony import */ var gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__);
53238
53278
  /* harmony import */ var shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! shared-ui-components/lines/textInputLineComponent */ "../../../dev/sharedUiComponents/dist/lines/textInputLineComponent.js");
53239
53279
  /* harmony import */ var shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared-ui-components/lines/optionsLineComponent */ "../../../dev/sharedUiComponents/dist/lines/optionsLineComponent.js");
@@ -53321,7 +53361,7 @@ __webpack_require__.r(__webpack_exports__);
53321
53361
  /* harmony import */ var _propertyGrids_gui_ellipsePropertyGridComponent__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./propertyGrids/gui/ellipsePropertyGridComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyGrids/gui/ellipsePropertyGridComponent.js");
53322
53362
  /* harmony import */ var _propertyGrids_gui_checkboxPropertyGridComponent__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./propertyGrids/gui/checkboxPropertyGridComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyGrids/gui/checkboxPropertyGridComponent.js");
53323
53363
  /* harmony import */ var _propertyGrids_gui_controlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./propertyGrids/gui/controlPropertyGridComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyGrids/gui/controlPropertyGridComponent.js");
53324
- /* harmony import */ var gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! gui/2D/advancedDynamicTexture */ "gui/2D/controls/button");
53364
+ /* harmony import */ var gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! gui/2D/advancedDynamicTexture */ "gui/2D/controls/container");
53325
53365
  /* harmony import */ var gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_20___default = /*#__PURE__*/__webpack_require__.n(gui_2D_advancedDynamicTexture__WEBPACK_IMPORTED_MODULE_20__);
53326
53366
  /* harmony import */ var shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! shared-ui-components/lines/textInputLineComponent */ "../../../dev/sharedUiComponents/dist/lines/textInputLineComponent.js");
53327
53367
  /* harmony import */ var _parentingPropertyGridComponent__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ../parentingPropertyGridComponent */ "../../../tools/guiEditor/dist/components/parentingPropertyGridComponent.js");
@@ -53484,9 +53524,16 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
53484
53524
  }
53485
53525
  save(saveCallback) {
53486
53526
  this.props.globalState.workbench.removeEditorTransformation();
53527
+ const allControls = this.props.globalState.guiTexture.rootContainer.getDescendants();
53528
+ for (const control of allControls) {
53529
+ this.props.globalState.workbench.removeEditorBehavior(control);
53530
+ }
53487
53531
  const size = this.props.globalState.workbench.guiSize;
53488
53532
  this.props.globalState.guiTexture.scaleTo(size.width, size.height);
53489
53533
  saveCallback();
53534
+ for (const control of allControls) {
53535
+ this.props.globalState.workbench.addEditorBehavior(control);
53536
+ }
53490
53537
  }
53491
53538
  loadFromSnippet() {
53492
53539
  const snippedId = this.props.globalState.hostWindow.prompt("Please enter the snippet ID to use");
@@ -53585,9 +53632,9 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
53585
53632
  return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_propertyGrids_gui_buttonPropertyGridComponent__WEBPACK_IMPORTED_MODULE_24__.ButtonPropertyGridComponent, { rectangles: buttons, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, onAddComponent: (value) => {
53586
53633
  for (const button of buttons) {
53587
53634
  const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_25__.GUINodeTools.CreateControlFromString(value);
53588
- const newGuiNode = this.props.globalState.workbench.createNewGuiNode(guiElement);
53589
- button.addControl(newGuiNode);
53590
- this.props.globalState.select(newGuiNode);
53635
+ this.props.globalState.workbench.addEditorBehavior(guiElement);
53636
+ button.addControl(guiElement);
53637
+ this.props.globalState.select(guiElement);
53591
53638
  }
53592
53639
  } }, "buttonMenu"));
53593
53640
  }
@@ -53633,7 +53680,7 @@ __webpack_require__.r(__webpack_exports__);
53633
53680
  /* harmony import */ var _extensionsComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../extensionsComponent */ "../../../tools/guiEditor/dist/components/sceneExplorer/extensionsComponent.js");
53634
53681
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
53635
53682
  /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../globalState */ "../../../tools/guiEditor/dist/globalState.js");
53636
- /* harmony import */ var gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! gui/2D/controls/container */ "gui/2D/controls/button");
53683
+ /* harmony import */ var gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! gui/2D/controls/container */ "gui/2D/controls/container");
53637
53684
  /* harmony import */ var gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5__);
53638
53685
  /* harmony import */ var _controlTypes__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../controlTypes */ "../../../tools/guiEditor/dist/controlTypes.js");
53639
53686
  /* harmony import */ var _imgs_visibilityNotActiveIcon_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../imgs/visibilityNotActiveIcon.svg */ "../../../tools/guiEditor/dist/imgs/visibilityNotActiveIcon.svg");
@@ -54138,7 +54185,7 @@ __webpack_require__.r(__webpack_exports__);
54138
54185
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
54139
54186
  /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../globalState */ "../../../tools/guiEditor/dist/globalState.js");
54140
54187
  /* harmony import */ var _entities_gui_controlTreeItemComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./entities/gui/controlTreeItemComponent */ "../../../tools/guiEditor/dist/components/sceneExplorer/entities/gui/controlTreeItemComponent.js");
54141
- /* harmony import */ var gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! gui/2D/controls/container */ "gui/2D/controls/button");
54188
+ /* harmony import */ var gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! gui/2D/controls/container */ "gui/2D/controls/container");
54142
54189
  /* harmony import */ var gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_6__);
54143
54190
  /* harmony import */ var _imgs_expandedIcon_svg__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../imgs/expandedIcon.svg */ "../../../tools/guiEditor/dist/imgs/expandedIcon.svg");
54144
54191
  /* harmony import */ var _imgs_collapsedIcon_svg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../imgs/collapsedIcon.svg */ "../../../tools/guiEditor/dist/imgs/collapsedIcon.svg");
@@ -54530,7 +54577,7 @@ __webpack_require__.r(__webpack_exports__);
54530
54577
  /* harmony export */ "CoordinateHelper": () => (/* binding */ CoordinateHelper),
54531
54578
  /* harmony export */ "Rect": () => (/* binding */ Rect)
54532
54579
  /* harmony export */ });
54533
- /* harmony import */ var gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gui/2D/math2D */ "gui/2D/controls/button");
54580
+ /* harmony import */ var gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gui/2D/math2D */ "gui/2D/controls/container");
54534
54581
  /* harmony import */ var gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__);
54535
54582
  /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core/Maths/math.vector */ "core/Misc/observable");
54536
54583
  /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__);
@@ -54799,7 +54846,7 @@ __webpack_require__.r(__webpack_exports__);
54799
54846
  /* harmony export */ "GizmoGeneric": () => (/* binding */ GizmoGeneric)
54800
54847
  /* harmony export */ });
54801
54848
  /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
54802
- /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/button");
54849
+ /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/container");
54803
54850
  /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_1__);
54804
54851
  /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core/Maths/math.vector */ "core/Misc/observable");
54805
54852
  /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_2__);
@@ -55346,7 +55393,7 @@ __webpack_require__.r(__webpack_exports__);
55346
55393
  /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
55347
55394
  /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
55348
55395
  /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../globalState */ "../../../tools/guiEditor/dist/globalState.js");
55349
- /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/button");
55396
+ /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/container");
55350
55397
  /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__);
55351
55398
  /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/logger */ "core/Misc/observable");
55352
55399
  /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__);
@@ -55437,7 +55484,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55437
55484
  this.forceUpdate();
55438
55485
  });
55439
55486
  // Get the canvas element from the DOM.
55440
- globalState.onFitToWindowObservable.add(() => {
55487
+ globalState.onFitControlsToWindowObservable.add(() => {
55441
55488
  if (globalState.selectedControls.length) {
55442
55489
  let minX = Number.MAX_SAFE_INTEGER;
55443
55490
  let minY = Number.MAX_SAFE_INTEGER;
@@ -55472,12 +55519,12 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55472
55519
  this._zoomFactor = Math.min(xFactor, yFactor) * 0.9;
55473
55520
  }
55474
55521
  else {
55475
- this._panningOffset = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Vector2(0, 0);
55476
- const xFactor = this._engine.getRenderWidth() / this.guiSize.width;
55477
- const yFactor = this._engine.getRenderHeight() / this.guiSize.height;
55478
- this._zoomFactor = Math.min(xFactor, yFactor) * 0.9;
55522
+ this._reframeWindow();
55479
55523
  }
55480
55524
  });
55525
+ globalState.onReframeWindowObservable.add(() => {
55526
+ this._reframeWindow();
55527
+ });
55481
55528
  globalState.onOutlineChangedObservable.add(() => {
55482
55529
  this.updateNodeOutlines();
55483
55530
  });
@@ -55531,7 +55578,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55531
55578
  this._visibleRegionContainer.widthInPixels = this._guiSize.width;
55532
55579
  this._visibleRegionContainer.heightInPixels = this._guiSize.height;
55533
55580
  this.props.globalState.onResizeObservable.notifyObservers(this._guiSize);
55534
- this.props.globalState.onFitToWindowObservable.notifyObservers();
55581
+ this.props.globalState.onReframeWindowObservable.notifyObservers();
55535
55582
  this.props.globalState.onArtBoardUpdateRequiredObservable.notifyObservers();
55536
55583
  }
55537
55584
  applyEditorTransformation() {
@@ -55559,6 +55606,12 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55559
55606
  this._trueRootContainer.clipContent = true;
55560
55607
  this._trueRootContainer.clipChildren = true;
55561
55608
  }
55609
+ _reframeWindow() {
55610
+ this._panningOffset = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Vector2(0, 0);
55611
+ const xFactor = this._engine.getRenderWidth() / this.guiSize.width;
55612
+ const yFactor = this._engine.getRenderHeight() / this.guiSize.height;
55613
+ this._zoomFactor = Math.min(xFactor, yFactor) * 0.9;
55614
+ }
55562
55615
  copyToClipboard(copyFn) {
55563
55616
  const controlList = [];
55564
55617
  for (const control of this.props.globalState.selectedControls) {
@@ -55619,6 +55672,95 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55619
55672
  this.props.globalState.select(newControl);
55620
55673
  }
55621
55674
  }
55675
+ /**
55676
+ * Adds editor observers to control and stores old data in metadata
55677
+ * @param guiControl
55678
+ */
55679
+ addEditorBehavior(guiControl) {
55680
+ const onPointerUpStored = guiControl.onPointerUpObservable.observers.slice();
55681
+ guiControl.onPointerUpObservable.clear();
55682
+ const onPointerDownStored = guiControl.onPointerDownObservable.observers.slice();
55683
+ guiControl.onPointerDownObservable.clear();
55684
+ const onPointerEnterStored = guiControl.onPointerEnterObservable.observers.slice();
55685
+ guiControl.onPointerEnterObservable.clear();
55686
+ const onPointerOutStored = guiControl.onPointerOutObservable.observers.slice();
55687
+ guiControl.onPointerOutObservable.clear();
55688
+ const onDisposeStored = guiControl.onDisposeObservable.observers.slice();
55689
+ guiControl.onDisposeObservable.clear();
55690
+ guiControl.onPointerUpObservable.add(() => {
55691
+ this.clicked = false;
55692
+ });
55693
+ guiControl.onPointerDownObservable.add((evt) => {
55694
+ if (evt.buttonIndex > 0 || this.props.globalState.tool !== _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT)
55695
+ return;
55696
+ this._controlsHit.push(guiControl);
55697
+ });
55698
+ guiControl.onPointerEnterObservable.add(() => {
55699
+ if (this._isOverGUINode.indexOf(guiControl) === -1) {
55700
+ this._isOverGUINode.push(guiControl);
55701
+ }
55702
+ });
55703
+ guiControl.onPointerOutObservable.add(() => {
55704
+ const index = this._isOverGUINode.indexOf(guiControl);
55705
+ if (index !== -1) {
55706
+ this._isOverGUINode.splice(index, 1);
55707
+ }
55708
+ });
55709
+ guiControl.onDisposeObservable.add(() => {
55710
+ const index = this._isOverGUINode.indexOf(guiControl);
55711
+ if (index !== -1) {
55712
+ this._isOverGUINode.splice(index, 1);
55713
+ }
55714
+ });
55715
+ // use metadata to keep track of things we need to cleanup/restore when the gui editor closes
55716
+ // also stores the old metadata
55717
+ guiControl.metadata = {
55718
+ guiEditor: true,
55719
+ metadata: guiControl.metadata,
55720
+ isHighlighted: guiControl.isHighlighted,
55721
+ highlightLineWidth: guiControl.highlightLineWidth,
55722
+ isReadOnly: guiControl.isReadOnly,
55723
+ isHitTestVisible: guiControl.isHitTestVisible,
55724
+ isPointerBlocker: guiControl.isPointerBlocker,
55725
+ onPointerUpStored,
55726
+ onPointerDownStored,
55727
+ onPointerEnterStored,
55728
+ onPointerOutStored,
55729
+ onDisposeStored,
55730
+ };
55731
+ guiControl.highlightLineWidth = 5;
55732
+ guiControl.isHighlighted = false;
55733
+ guiControl.isReadOnly = true;
55734
+ guiControl.isHitTestVisible = true;
55735
+ guiControl.isPointerBlocker = true;
55736
+ }
55737
+ /**
55738
+ * Removes editor behavior (observables, metadata) from control
55739
+ * @param control
55740
+ */
55741
+ removeEditorBehavior(control) {
55742
+ if (!control.metadata || !control.metadata.guiEditor) {
55743
+ return;
55744
+ }
55745
+ const restoreObservers = (observable, storedObservers) => {
55746
+ observable.clear();
55747
+ for (const observer of storedObservers) {
55748
+ const obs = observer;
55749
+ observable.add(obs.callback, obs.mask, false, obs.scope, obs.unregisterOnNextCall);
55750
+ }
55751
+ };
55752
+ restoreObservers(control.onPointerUpObservable, control.metadata.onPointerUpStored);
55753
+ restoreObservers(control.onPointerDownObservable, control.metadata.onPointerDownStored);
55754
+ restoreObservers(control.onPointerEnterObservable, control.metadata.onPointerEnterStored);
55755
+ restoreObservers(control.onPointerOutObservable, control.metadata.onPointerOutStored);
55756
+ restoreObservers(control.onDisposeObservable, control.metadata.onDisposeStored);
55757
+ control.highlightLineWidth = control.metadata.highlightLineWidth;
55758
+ control.isHighlighted = control.metadata.isHighlighted;
55759
+ control.isPointerBlocker = control.metadata.isPointerBlocker;
55760
+ control.isHitTestVisible = control.metadata.isHitTestVisible;
55761
+ control.isReadOnly = control.metadata.isReadOnly;
55762
+ control.metadata = control.metadata.metadata;
55763
+ }
55622
55764
  dispose() {
55623
55765
  this.props.globalState.hostDocument.removeEventListener("keyup", this.keyEvent);
55624
55766
  this.props.globalState.hostDocument.removeEventListener("keydown", this.keyEvent);
@@ -55626,23 +55768,12 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55626
55768
  if (this.props.globalState.liveGuiTexture) {
55627
55769
  this.props.globalState.liveGuiTexture.onEndRenderObservable.remove(this._liveRenderObserver);
55628
55770
  this.props.globalState.guiTexture.onBeginRenderObservable.remove(this._guiRenderObserver);
55629
- this.props.globalState.guiTexture.getDescendants(false).forEach((control) => {
55630
- if (!control.metadata || !control.metadata.guiEditor) {
55631
- return;
55632
- }
55633
- control.onPointerUpObservable.remove(control.metadata.onPointerUp);
55634
- control.onPointerDownObservable.remove(control.metadata.onPointerDown);
55635
- control.onPointerEnterObservable.remove(control.metadata.onPointerEnter);
55636
- control.onPointerOutObservable.remove(control.metadata.onPointerOut);
55637
- control.onDisposeObservable.remove(control.metadata.onDispose);
55638
- control.highlightLineWidth = control.metadata.highlightLineWidth;
55639
- control.isHighlighted = control.metadata.isHighlighted;
55640
- control.isPointerBlocker = control.metadata.isPointerBlocker;
55641
- control.isHitTestVisible = control.metadata.isHitTestVisible;
55642
- control.isReadOnly = control.metadata.isReadOnly;
55771
+ this.props.globalState.guiTexture.getDescendants().forEach((control) => {
55772
+ this.removeEditorBehavior(control);
55643
55773
  this.props.globalState.guiTexture.removeControl(control);
55644
- control.parent = control.metadata.parent;
55645
- control.metadata = control.metadata.metadata;
55774
+ if (control.parent === this._trueRootContainer) {
55775
+ control.parent = this.props.globalState.liveGuiTexture.rootContainer;
55776
+ }
55646
55777
  control._host = this.props.globalState.liveGuiTexture;
55647
55778
  });
55648
55779
  this.props.globalState.liveGuiTexture.markAsDirty();
@@ -55688,12 +55819,12 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55688
55819
  }
55689
55820
  }
55690
55821
  loadToEditor() {
55691
- this.props.globalState.guiTexture.rootContainer.children.forEach((guiElement) => {
55692
- this.createNewGuiNode(guiElement);
55822
+ this.props.globalState.guiTexture.rootContainer.getDescendants().forEach((guiElement) => {
55823
+ this.addEditorBehavior(guiElement);
55693
55824
  });
55694
55825
  this._isOverGUINode = [];
55695
55826
  this.props.globalState.setSelection([]);
55696
- this.props.globalState.onFitToWindowObservable.notifyObservers();
55827
+ this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
55697
55828
  }
55698
55829
  updateNodeOutlines() {
55699
55830
  for (const guiControl of this._trueRootContainer.getDescendants()) {
@@ -55705,62 +55836,10 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
55705
55836
  if (this.props.globalState.liveGuiTexture) {
55706
55837
  this.props.globalState.liveGuiTexture.addControl(guiElement);
55707
55838
  }
55708
- const newGuiNode = this.createNewGuiNode(guiElement);
55839
+ this.addEditorBehavior(guiElement);
55840
+ guiElement.getDescendants(true).forEach((desc) => this.addEditorBehavior(desc));
55709
55841
  this.trueRootContainer.addControl(guiElement);
55710
- return newGuiNode;
55711
- }
55712
- createNewGuiNode(guiControl) {
55713
- const onPointerUp = guiControl.onPointerUpObservable.add(() => {
55714
- this.clicked = false;
55715
- });
55716
- const onPointerDown = guiControl.onPointerDownObservable.add((evt) => {
55717
- if (evt.buttonIndex > 0 || this.props.globalState.tool !== _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT)
55718
- return;
55719
- this._controlsHit.push(guiControl);
55720
- });
55721
- const onPointerEnter = guiControl.onPointerEnterObservable.add(() => {
55722
- if (this._isOverGUINode.indexOf(guiControl) === -1) {
55723
- this._isOverGUINode.push(guiControl);
55724
- }
55725
- });
55726
- const onPointerOut = guiControl.onPointerOutObservable.add(() => {
55727
- const index = this._isOverGUINode.indexOf(guiControl);
55728
- if (index !== -1) {
55729
- this._isOverGUINode.splice(index, 1);
55730
- }
55731
- });
55732
- const onDispose = guiControl.onDisposeObservable.add(() => {
55733
- const index = this._isOverGUINode.indexOf(guiControl);
55734
- if (index !== -1) {
55735
- this._isOverGUINode.splice(index, 1);
55736
- }
55737
- });
55738
- // use metadata to keep track of things we need to cleanup/restore when the gui editor closes
55739
- // also stores the old metadata
55740
- guiControl.metadata = {
55741
- guiEditor: true,
55742
- metadata: guiControl.metadata,
55743
- isHighlighted: guiControl.isHighlighted,
55744
- highlightLineWidth: guiControl.highlightLineWidth,
55745
- isReadOnly: guiControl.isReadOnly,
55746
- isHitTestVisible: guiControl.isHitTestVisible,
55747
- isPointerBlocker: guiControl.isPointerBlocker,
55748
- onPointerUp,
55749
- onPointerDown,
55750
- onPointerEnter,
55751
- onPointerOut,
55752
- onDispose,
55753
- parent: guiControl.parent,
55754
- };
55755
- guiControl.highlightLineWidth = 5;
55756
- guiControl.isHighlighted = false;
55757
- guiControl.isReadOnly = true;
55758
- guiControl.isHitTestVisible = true;
55759
- guiControl.isPointerBlocker = true;
55760
- guiControl.getDescendants(true).forEach((child) => {
55761
- this.createNewGuiNode(child);
55762
- });
55763
- return guiControl;
55842
+ return guiElement;
55764
55843
  }
55765
55844
  parent(dropLocationControl) {
55766
55845
  const draggedControl = this.props.globalState.draggedControl;
@@ -56090,13 +56169,12 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56090
56169
  }
56091
56170
  });
56092
56171
  }
56093
- this.props.globalState.onErrorMessageDialogRequiredObservable.notifyObservers(`Welcome to the GUI Editor Alpha. This editor is still a work in progress. Icons are currently temporary. Please submit feedback using the "Give feedback" button in the menu. `);
56094
56172
  this._engine.runRenderLoop(() => {
56095
56173
  this._scene.render();
56096
56174
  });
56097
56175
  this.props.globalState.onNewSceneObservable.notifyObservers(this.props.globalState.guiTexture.getScene());
56098
56176
  this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
56099
- this.props.globalState.onFitToWindowObservable.notifyObservers();
56177
+ this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
56100
56178
  }
56101
56179
  // removes all controls from both GUIs, and re-adds the controls from the original to the GUI editor
56102
56180
  synchronizeLiveGUI() {
@@ -56132,7 +56210,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
56132
56210
  break;
56133
56211
  case "f": //fit to window
56134
56212
  case "F":
56135
- this.props.globalState.onFitToWindowObservable.notifyObservers();
56213
+ this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
56136
56214
  break;
56137
56215
  case "ArrowUp": // move up
56138
56216
  this.moveControls(false, k.event.shiftKey ? -ARROW_KEY_MOVEMENT_LARGE : -ARROW_KEY_MOVEMENT_SMALL);
@@ -56270,7 +56348,10 @@ __webpack_require__.r(__webpack_exports__);
56270
56348
  /* harmony import */ var core_Misc_observable__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__);
56271
56349
  /* harmony import */ var shared_ui_components_tabs_propertyGrids_lockObject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! shared-ui-components/tabs/propertyGrids/lockObject */ "../../../dev/sharedUiComponents/dist/tabs/propertyGrids/lockObject.js");
56272
56350
  /* harmony import */ var _diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./diagram/coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
56273
- /* harmony import */ var _keyboardManager__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./keyboardManager */ "../../../tools/guiEditor/dist/keyboardManager.js");
56351
+ /* harmony import */ var gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/controls/container */ "gui/2D/controls/container");
56352
+ /* harmony import */ var gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_3__);
56353
+ /* harmony import */ var _keyboardManager__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./keyboardManager */ "../../../tools/guiEditor/dist/keyboardManager.js");
56354
+
56274
56355
 
56275
56356
 
56276
56357
 
@@ -56312,7 +56393,8 @@ class GlobalState {
56312
56393
  this.onPropertyChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56313
56394
  this._tool = GUIEditorTool.SELECT;
56314
56395
  this.onToolChangeObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56315
- this.onFitToWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56396
+ this.onFitControlsToWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56397
+ this.onReframeWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56316
56398
  this.onLoadObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56317
56399
  this.onSaveObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
56318
56400
  this.onSnippetLoadObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
@@ -56385,7 +56467,7 @@ class GlobalState {
56385
56467
  event.preventDefault();
56386
56468
  }
56387
56469
  });
56388
- this.keys = new _keyboardManager__WEBPACK_IMPORTED_MODULE_3__.KeyboardManager(this.hostDocument);
56470
+ this.keys = new _keyboardManager__WEBPACK_IMPORTED_MODULE_4__.KeyboardManager(this.hostDocument);
56389
56471
  this.keys.onKeyPressedObservable.add(() => {
56390
56472
  // trigger a tool update (in case space is now pressed)
56391
56473
  // we should really have a state management system to handle this for us
@@ -56427,11 +56509,36 @@ class GlobalState {
56427
56509
  this.selectedControls = [...controls];
56428
56510
  this.onSelectionChangedObservable.notifyObservers();
56429
56511
  }
56512
+ _findParentControlInTexture(texture, searchedControl) {
56513
+ const searchList = [texture.rootContainer];
56514
+ while (searchList.length > 0) {
56515
+ const current = searchList.splice(0, 1)[0];
56516
+ const children = current._children;
56517
+ if (children.indexOf(searchedControl) !== -1) {
56518
+ return current;
56519
+ }
56520
+ for (const child of children) {
56521
+ if (child instanceof gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_3__.Container) {
56522
+ searchList.push(child);
56523
+ }
56524
+ }
56525
+ }
56526
+ return null;
56527
+ }
56430
56528
  deleteSelectedNodes() {
56431
- var _a;
56432
56529
  for (const control of this.selectedControls) {
56433
- this.guiTexture.removeControl(control);
56434
- (_a = this.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(control);
56530
+ const guiTextureParent = this._findParentControlInTexture(this.guiTexture, control);
56531
+ guiTextureParent === null || guiTextureParent === void 0 ? void 0 : guiTextureParent.removeControl(control);
56532
+ if (this.liveGuiTexture) {
56533
+ const allDescendants = control.getDescendants();
56534
+ for (const descendant of allDescendants) {
56535
+ const liveGuiTextureDescendantParent = this._findParentControlInTexture(this.liveGuiTexture, descendant);
56536
+ liveGuiTextureDescendantParent === null || liveGuiTextureDescendantParent === void 0 ? void 0 : liveGuiTextureDescendantParent.removeControl(descendant);
56537
+ descendant.dispose();
56538
+ }
56539
+ const liveGuiTextureParent = this._findParentControlInTexture(this.liveGuiTexture, control);
56540
+ liveGuiTextureParent === null || liveGuiTextureParent === void 0 ? void 0 : liveGuiTextureParent.removeControl(control);
56541
+ }
56435
56542
  control.dispose();
56436
56543
  }
56437
56544
  this.setSelection([]);
@@ -56565,7 +56672,7 @@ __webpack_require__.r(__webpack_exports__);
56565
56672
  /* harmony export */ __webpack_require__.d(__webpack_exports__, {
56566
56673
  /* harmony export */ "GUINodeTools": () => (/* binding */ GUINodeTools)
56567
56674
  /* harmony export */ });
56568
- /* harmony import */ var gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gui/2D/controls/sliders/imageBasedSlider */ "gui/2D/controls/button");
56675
+ /* harmony import */ var gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! gui/2D/controls/sliders/imageBasedSlider */ "gui/2D/controls/container");
56569
56676
  /* harmony import */ var gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_button__WEBPACK_IMPORTED_MODULE_0__);
56570
56677
 
56571
56678
 
@@ -57920,6 +58027,28 @@ module.exports = "data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRw
57920
58027
 
57921
58028
  /***/ }),
57922
58029
 
58030
+ /***/ "../../../dev/sharedUiComponents/dist/imgs/displayGridLine1Icon.svg":
58031
+ /*!**************************************************************************!*\
58032
+ !*** ../../../dev/sharedUiComponents/dist/imgs/displayGridLine1Icon.svg ***!
58033
+ \**************************************************************************/
58034
+ /***/ ((module) => {
58035
+
58036
+ "use strict";
58037
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PGRlZnM+PHN0eWxlPi5ie2ZpbGw6IzMzMzt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImIiIGQ9Ik03LjczLDkuOTVjMC0xLjIzLC45OS0yLjIyLDIuMjItMi4yMmgxMC4wOWMxLjIzLDAsMi4yMiwuOTksMi4yMiwyLjIydjEwLjA5YzAsMS4yMy0uOTksMi4yMi0yLjIyLDIuMjJIOS45NWMtMS4yMywwLTIuMjItLjk5LTIuMjItMi4yMlY5Ljk1Wm0yLjIyLTEuMDFjLS41NiwwLTEuMDEsLjQ1LTEuMDEsMS4wMXYxMC4wOWMwLC41NiwuNDUsMS4wMSwxLjAxLDEuMDFoMTAuMDljLjU2LDAsMS4wMS0uNDUsMS4wMS0xLjAxVjkuOTVjMC0uNTYtLjQ1LTEuMDEtMS4wMS0xLjAxSDkuOTVaIi8+PHBhdGggY2xhc3M9ImIiIGQ9Ik0xNS44NCwxMS45MnY2LjU0YzAsLjMtLjIzLC41My0uNTMsLjUzcy0uNTMtLjIzLS41My0uNTN2LTUuODhsLTEuMDcsLjQyYy0uMDksLjAzLS4yLC4wNy0uMjgsLjA3LS4yNiwwLS40Ny0uMjEtLjQ3LS40NywwLS4xNSwuMDctLjM1LC4zMy0uNDZsMS42NC0uNjZjLjA5LS4wMiwuMjItLjEsLjM3LS4xLC4zMSwwLC41MywuMjMsLjUzLC41NVoiLz48L3N2Zz4=";
58038
+
58039
+ /***/ }),
58040
+
58041
+ /***/ "../../../dev/sharedUiComponents/dist/imgs/displayGridLine2Icon.svg":
58042
+ /*!**************************************************************************!*\
58043
+ !*** ../../../dev/sharedUiComponents/dist/imgs/displayGridLine2Icon.svg ***!
58044
+ \**************************************************************************/
58045
+ /***/ ((module) => {
58046
+
58047
+ "use strict";
58048
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PGRlZnM+PHN0eWxlPi5ie2ZpbGw6IzMzMzt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImIiIGQ9Ik03LjczLDkuOTVjMC0xLjIzLC45OS0yLjIyLDIuMjItMi4yMmgxMC4wOWMxLjIzLDAsMi4yMiwuOTksMi4yMiwyLjIydjEwLjA5YzAsMS4yMy0uOTksMi4yMi0yLjIyLDIuMjJIOS45NWMtMS4yMywwLTIuMjItLjk5LTIuMjItMi4yMlY5Ljk1Wm0yLjIyLTEuMDFjLS41NiwwLTEuMDEsLjQ1LTEuMDEsMS4wMXYxMC4wOWMwLC41NiwuNDUsMS4wMSwxLjAxLDEuMDFoMTAuMDljLjU2LDAsMS4wMS0uNDUsMS4wMS0xLjAxVjkuOTVjMC0uNTYtLjQ1LTEuMDEtMS4wMS0xLjAxSDkuOTVaIi8+PHBhdGggY2xhc3M9ImIiIGQ9Ik0xNy42MywxOC40NGMwLC4zMS0uMjMsLjUxLS41MiwuNTFoLTMuOTNjLS4zMiwwLS41NS0uMjEtLjU1LS41NSwwLS4yMywuMDktLjQxLC4zMS0uNjRsMi4yNS0yLjM0Yy41OC0uNTksLjk0LTEuMiwuOTQtMS44NiwwLS43LS41MS0xLjE3LTEuMi0xLjE3LS42MywwLTEuMDIsLjM0LTEuMjksLjY5LS4xLC4xMi0uMjIsLjI0LS40NSwuMjQtLjI4LDAtLjUtLjE4LS41MS0uNDUsMC0uMTUsLjA1LS4zLC4xMy0uNDIsLjMzLS41NywxLjA4LTEuMTEsMi4xNi0xLjExLDEuNDMsMCwyLjI4LC45NSwyLjI4LDIuMTcsMCwuODYtLjQsMS42Mi0xLjIxLDIuNDZsLTEuODgsMS45NmgyLjk1Yy4yOSwwLC41MiwuMiwuNTIsLjUxWiIvPjwvc3ZnPg==";
58049
+
58050
+ /***/ }),
58051
+
57923
58052
  /***/ "../../../dev/sharedUiComponents/dist/imgs/fillColorIcon.svg":
57924
58053
  /*!*******************************************************************!*\
57925
58054
  !*** ../../../dev/sharedUiComponents/dist/imgs/fillColorIcon.svg ***!
@@ -57975,6 +58104,17 @@ module.exports = "data:image/svg+xml;base64,PHN2ZyBpZD0iaWNvbnMiIHhtbG5zPSJodHRw
57975
58104
 
57976
58105
  /***/ }),
57977
58106
 
58107
+ /***/ "../../../dev/sharedUiComponents/dist/imgs/frequencyIcon.svg":
58108
+ /*!*******************************************************************!*\
58109
+ !*** ../../../dev/sharedUiComponents/dist/imgs/frequencyIcon.svg ***!
58110
+ \*******************************************************************/
58111
+ /***/ ((module) => {
58112
+
58113
+ "use strict";
58114
+ module.exports = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJhIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PGRlZnM+PHN0eWxlPi5ie2ZpbGw6IzMzMzt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImIiIGQ9Ik05LjU2LDIwLjQxYzAsLjMzLC4yNywuNjEsLjYxLC42MXMuNjEtLjI3LC42MS0uNjFWOC42MmMwLS4zMy0uMjctLjYxLS42MS0uNjFzLS42MSwuMjctLjYxLC42MXYxMS43OVoiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTYuMzQsMTcuNTNjMCwuMzMsLjI3LC42MSwuNjEsLjYxcy42MS0uMjcsLjYxLS42MXYtMy45YzAtLjMzLS4yNy0uNjEtLjYxLS42MXMtLjYxLC4yNy0uNjEsLjYxdjMuOVoiLz48cGF0aCBjbGFzcz0iYiIgZD0iTTIyLjQ0LDE3LjUzYzAsLjMzLC4yNywuNjEsLjYxLC42MXMuNjEtLjI3LC42MS0uNjF2LTMuOWMwLS4zMy0uMjctLjYxLS42MS0uNjFzLS42MSwuMjctLjYxLC42MXYzLjlaIi8+PHBhdGggY2xhc3M9ImIiIGQ9Ik0xMi43OCwxOC4wMWMwLC4zMywuMjcsLjYxLC42MSwuNjFzLjYxLS4yNywuNjEtLjYxVjYuMjJjMC0uMzMtLjI3LS42MS0uNjEtLjYxcy0uNjEsLjI3LS42MSwuNjF2MTEuNzlaIi8+PHBhdGggY2xhc3M9ImIiIGQ9Ik0xNiwyMy43OGMwLC4zMywuMjcsLjYxLC42MSwuNjFzLjYxLS4yNywuNjEtLjYxVjExLjk5YzAtLjMzLS4yNy0uNjEtLjYxLS42MXMtLjYxLC4yNy0uNjEsLjYxdjExLjc5WiIvPjxwYXRoIGNsYXNzPSJiIiBkPSJNMTkuMjIsMjEuMzhjMCwuMzMsLjI3LC42MSwuNjEsLjYxcy42MS0uMjcsLjYxLS42MVY5LjU5YzAtLjMzLS4yNy0uNjEtLjYxLS42MXMtLjYxLC4yNy0uNjEsLjYxdjExLjc5WiIvPjwvc3ZnPg==";
58115
+
58116
+ /***/ }),
58117
+
57978
58118
  /***/ "../../../dev/sharedUiComponents/dist/imgs/gridColumnIconDark.svg":
57979
58119
  /*!************************************************************************!*\
57980
58120
  !*** ../../../dev/sharedUiComponents/dist/imgs/gridColumnIconDark.svg ***!
@@ -59086,14 +59226,14 @@ module.exports = __WEBPACK_EXTERNAL_MODULE_core_Misc_observable__;
59086
59226
 
59087
59227
  /***/ }),
59088
59228
 
59089
- /***/ "gui/2D/controls/button":
59229
+ /***/ "gui/2D/controls/container":
59090
59230
  /*!***************************************************************************************************************************!*\
59091
59231
  !*** external {"root":["BABYLON","GUI"],"commonjs":"@babylonjs/gui","commonjs2":"@babylonjs/gui","amd":"@babylonjs/gui"} ***!
59092
59232
  \***************************************************************************************************************************/
59093
59233
  /***/ ((module) => {
59094
59234
 
59095
59235
  "use strict";
59096
- module.exports = __WEBPACK_EXTERNAL_MODULE_gui_2D_controls_button__;
59236
+ module.exports = __WEBPACK_EXTERNAL_MODULE_gui_2D_controls_container__;
59097
59237
 
59098
59238
  /***/ })
59099
59239