@babylonjs/gui-editor 5.18.0 → 5.21.0

package/dist/babylon.guiEditor.max.js

@@ -171,7 +171,7 @@ __webpack_require__.r(__webpack_exports__);
 
 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()));
 // Module
-___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: 16px;\n    background: black;\n    position: relative; }\n  .toolbarGrab .arrow {\n    color: white;\n    position: absolute; }\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  .toolbarGrab.expanded .toolbar-content-sub1 {\n    column-count: 2; }\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 50px;\n  position: relative;\n  overflow: hidden; }\n  .left-panel.expand {\n    grid-template-columns: 1fr 100px; }\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: 16px;\r\n        background: black;\r\n        position: relative;\r\n    }\r\n    .arrow {\r\n        color: white;\r\n        position: absolute;\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    &.expanded {\r\n        .toolbar-content-sub1 {\r\n            column-count: 2;\r\n        }\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 50px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    &.expand {\r\n        grid-template-columns: 1fr 100px;\r\n    }\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":""}]);
+___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: 16px;\n    background: black;\n    position: relative; }\n  .toolbarGrab .arrow {\n    color: white;\n    position: absolute; }\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  .toolbarGrab.expanded .toolbar-content-sub1 {\n    column-count: 2; }\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 50px;\n  position: relative;\n  overflow: hidden; }\n  .left-panel.expand {\n    grid-template-columns: 1fr 100px; }\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.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: 16px;\r\n        background: black;\r\n        position: relative;\r\n    }\r\n    .arrow {\r\n        color: white;\r\n        position: absolute;\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    &.expanded {\r\n        .toolbar-content-sub1 {\r\n            column-count: 2;\r\n        }\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 50px;\r\n    position: relative;\r\n    overflow: hidden;\r\n    &.expand {\r\n        grid-template-columns: 1fr 100px;\r\n    }\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.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":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
@@ -233,6 +233,41 @@ ___CSS_LOADER_EXPORT___.locals = {};
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
 
+/***/ }),
+
+/***/ "../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss":
+/*!*******************************************************************************************************************************************************************************************************************************************!*\
+  !*** ../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss ***!
+  \*******************************************************************************************************************************************************************************************************************************************/
+/***/ ((module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ "../../../../node_modules/css-loader/dist/runtime/sourceMaps.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../node_modules/css-loader/dist/runtime/api.js */ "../../../../node_modules/css-loader/dist/runtime/api.js");
+/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
+// Imports
+
+
+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()));
+// Module
+___CSS_LOADER_EXPORT___.push([module.id, ".stbiu24JbUBfHNSSYhSR {\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\";\n  top: 0; }\n  .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct {\n    align-self: center;\n    justify-self: center;\n    min-height: 140px;\n    max-width: 400px;\n    border-radius: 10px;\n    background: white;\n    padding: 10px;\n    display: grid;\n    grid-template-columns: 100%;\n    grid-template-rows: 1fr 50px; }\n    .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct .yRrm4hWjzyu4RnCc412h {\n      grid-row: 1;\n      grid-column: 1;\n      margin-top: 20px;\n      padding: 10px;\n      font-size: 18px;\n      color: black; }\n    .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct .c5hG_qW6gImPmY2mRXUf {\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      .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct .c5hG_qW6gImPmY2mRXUf .TaDL8j02NlDZlEf6mraY {\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        .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct .c5hG_qW6gImPmY2mRXUf .TaDL8j02NlDZlEf6mraY:hover {\n          opacity: 0.8; }\n        .stbiu24JbUBfHNSSYhSR .fCGAiNfXRhhXF8hQPpct .c5hG_qW6gImPmY2mRXUf .TaDL8j02NlDZlEf6mraY.gWN6zWjwiaTlrWBw3gRR {\n          background: red; }\n", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss"],"names":[],"mappings":"AAAA;EACI,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,8BAAoC;EACpC,aAAa;EACb,yBAAyB;EACzB,MAAM,EAAA;EAPV;IAUQ,kBAAkB;IAClB,oBAAoB;IACpB,iBAAiB;IACjB,gBAAgB;IAChB,mBAAmB;IACnB,iBAAiB;IACjB,aAAa;IAEb,aAAa;IACb,2BAA2B;IAC3B,4BAA4B,EAAA;IApBpC;MAuBY,WAAW;MACX,cAAc;MACd,gBAAgB;MAChB,aAAa;MACb,eAAe;MACf,YAAY,EAAA;IA5BxB;MAgCY,WAAW;MACX,cAAc;MACd,aAAa;MACb,wBAAwB;MACxB,2BAA2B;MAC3B,YAAY,EAAA;MArCxB;QAwCgB,eAAe;QACf,oBAAoB;QACpB,iBAAiB;QACjB,eAAe;QACf,uBAAuB;QACvB,aAAa;QACb,qBAAqB;QACrB,kBAAkB;QAClB,YAAY;QACZ,mBAAmB,EAAA;QAjDnC;UAoDoB,YAAY,EAAA;QApDhC;UAwDoB,eAAe,EAAA","sourcesContent":[":local .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\";\r\n    top: 0;\r\n\r\n    .dialog {\r\n        align-self: center;\r\n        justify-self: center;\r\n        min-height: 140px;\r\n        max-width: 400px;\r\n        border-radius: 10px;\r\n        background: white;\r\n        padding: 10px;\r\n\r\n        display: grid;\r\n        grid-template-columns: 100%;\r\n        grid-template-rows: 1fr 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"],"sourceRoot":""}]);
+// Exports
+___CSS_LOADER_EXPORT___.locals = {
+	"dialog-container": "stbiu24JbUBfHNSSYhSR",
+	"dialog": "fCGAiNfXRhhXF8hQPpct",
+	"dialog-message": "yRrm4hWjzyu4RnCc412h",
+	"dialog-buttons": "c5hG_qW6gImPmY2mRXUf",
+	"dialog-button-ok": "TaDL8j02NlDZlEf6mraY",
+	"error": "gWN6zWjwiaTlrWBw3gRR"
+};
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
+
+
 /***/ }),
 
 /***/ "../../../../node_modules/@fortawesome/fontawesome-svg-core/index.es.js":
@@ -49644,7 +49679,9 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this.props.onColorChanged(this.state.color.clone());
     }
     render() {
-        const colorHex = this.state.color.toHexString();
+        const color4 = core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4.FromColor3(this.state.color);
+        color4.a = this.state.alpha;
+        const colorHex = color4.toHexString();
         const hsv = this.state.color.toHSV();
         const colorRef = new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3();
         core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
@@ -49744,6 +49781,65 @@ class HexColor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
 }
 
 
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/components/MessageDialog.js":
+/*!************************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/components/MessageDialog.js ***!
+  \************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "MessageDialog": () => (/* binding */ MessageDialog)
+/* harmony export */ });
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
+/* harmony import */ var _classNames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./classNames */ "../../../dev/sharedUiComponents/dist/components/classNames.js");
+/* harmony import */ var _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./MessageDialog.modules.scss */ "../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss");
+
+
+
+
+const MessageDialog = (props) => {
+    const [message, setMessage] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(props.message);
+    const [isError, setIsError] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(props.isError);
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
+        setMessage(props.message);
+        setIsError(props.isError);
+    }, [props]);
+    if (!message) {
+        return null;
+    }
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-container": true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]) }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ dialog: true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-message": true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]) }, { children: message })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-buttons": true }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]) }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: (0,_classNames__WEBPACK_IMPORTED_MODULE_2__.ClassNames)({ "dialog-button-ok": true, error: isError }, _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__["default"]), onClick: () => setMessage("") }, { children: "OK" })) }))] })) })));
+};
+
+
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/components/classNames.js":
+/*!*********************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/components/classNames.js ***!
+  \*********************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "ClassNames": () => (/* binding */ ClassNames)
+/* harmony export */ });
+function ClassNames(names, styleObject) {
+    let string = "";
+    for (const name in names) {
+        if (names[name]) {
+            string += styleObject[name] + " ";
+        }
+    }
+    return string;
+}
+
+
 /***/ }),
 
 /***/ "../../../dev/sharedUiComponents/dist/lines/checkBoxLineComponent.js":
@@ -50268,8 +50364,8 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             this.props.lockObject.lock = false;
         }
     }
-    incrementValue(amount) {
-        if (this.props.step) {
+    incrementValue(amount, processStep = true) {
+        if (processStep && this.props.step) {
             amount *= parseFloat(this.props.step);
         }
         let currentValue = parseFloat(this.state.value);
@@ -50279,15 +50375,22 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this.updateValue((currentValue + amount).toFixed(2));
     }
     onKeyDown(event) {
-        if (this.props.arrows) {
-            if (event.key === "ArrowUp") {
-                this.incrementValue(1);
-                event.preventDefault();
-            }
-            if (event.key === "ArrowDown") {
-                this.incrementValue(-1);
-                event.preventDefault();
+        const step = parseFloat(this.props.step || this.props.isInteger ? "1" : "0.01");
+        const handleArrowKey = (sign) => {
+            if (event.shiftKey) {
+                sign *= 10;
+                if (event.ctrlKey || event.metaKey) {
+                    sign *= 10;
+                }
             }
+            this.incrementValue(sign * step, false);
+            event.preventDefault();
+        };
+        if (event.key === "ArrowUp") {
+            handleArrowKey(1);
+        }
+        else if (event.key === "ArrowDown") {
+            handleArrowKey(-1);
         }
         if (event.key === "Enter" && this.props.onEnter) {
             this.props.onEnter(this._store);
@@ -50448,14 +50551,13 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         }
         return false;
     }
-    updateValue(evt) {
-        const value = evt.target.value;
-        if (/[^0-9.-]/g.test(value)) {
+    updateValue(valueString) {
+        if (/[^0-9.-]/g.test(valueString)) {
             return;
         }
-        const valueAsNumber = parseFloat(value);
+        const valueAsNumber = parseFloat(valueString);
         this._localChange = true;
-        this.setState({ value: value });
+        this.setState({ value: valueString });
         if (isNaN(valueAsNumber)) {
             return;
         }
@@ -50473,8 +50575,34 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         }
         this.props.onChange(valueAsNumber);
     }
+    incrementValue(amount) {
+        let currentValue = parseFloat(this.state.value);
+        if (isNaN(currentValue)) {
+            currentValue = 0;
+        }
+        this.updateValue((currentValue + amount).toFixed(this.props.precision !== undefined ? this.props.precision : 3));
+    }
+    onKeyDown(evt) {
+        const step = this.props.step || 1;
+        const handleArrowKey = (sign) => {
+            if (evt.shiftKey) {
+                sign *= 10;
+                if (evt.ctrlKey || evt.metaKey) {
+                    sign *= 10;
+                }
+            }
+            this.incrementValue(sign * step);
+            evt.preventDefault();
+        };
+        if (evt.key === "ArrowUp") {
+            handleArrowKey(1);
+        }
+        else if (evt.key === "ArrowDown") {
+            handleArrowKey(-1);
+        }
+    }
     render() {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt), onFocus: () => {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), onFocus: () => {
                         if (this.props.lockObject) {
                             this.props.lockObject.lock = true;
                         }
@@ -51310,13 +51438,17 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
         props.globalState.onSelectionChangedObservable.add(() => {
             this.forceUpdate();
         });
+        props.globalState.onWindowResizeObservable.add(() => {
+            this.forceUpdate();
+        });
     }
     render() {
-        const isPasteDisabled = this.props.globalState.workbench && this.props.globalState.selectedControls.length > 0 ? this.props.globalState.workbench.pasteDisabled : true;
+        const isPasteDisabled = this.props.globalState.workbench ? this.props.globalState.workbench.pasteDisabled : true;
         const size = this.props.globalState.workbench ? Object.assign({}, this.props.globalState.workbench.guiSize) : { width: 0, height: 0 };
         const copyyIcon = this.props.globalState.selectedControls.length === 0 ? _imgs_buttonbar_copyIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_22__ : _imgs_buttonbar_copyIcon_svg__WEBPACK_IMPORTED_MODULE_19__;
         const deleteeIcon = this.props.globalState.selectedControls.length === 0 ? _imgs_buttonBar_deleteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_24__ : _imgs_buttonBar_deleteIcon_svg__WEBPACK_IMPORTED_MODULE_21__;
         const pasteeIcon = isPasteDisabled ? _imgs_buttonbar_pasteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_23__ : _imgs_buttonbar_pasteIcon_svg__WEBPACK_IMPORTED_MODULE_20__;
+        const responsiveUI = this.props.globalState.fromPG ? core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("responsiveUI", true) : core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true);
         this._sizeOption = _sizeValues.findIndex((value) => value.width == size.width && value.height == size.height);
         if (this._sizeOption < 0) {
             this.props.globalState.onResponsiveChangeObservable.notifyObservers(false);
@@ -51383,37 +51515,46 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
                                     } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Toggle Guides", shortcut: "G", icon: _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_15__, isActive: this.props.globalState.outlines, onClick: () => (this.props.globalState.outlines = !this.props.globalState.outlines) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "divider padded" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: this._lockObject, label: "Artboard:", target: this.props.globalState, propertyName: "backgroundColor", disableAlpha: true }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "divider padded" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "Responsive:", iconLabel: "Responsive GUIs will resize the UI layout and reflow controls to accommodate different device screen sizes", isSelected: () => core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true), onSelect: (value) => {
                                         this.props.globalState.onResponsiveChangeObservable.notifyObservers(value);
                                         core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", value);
+                                        core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("responsiveUI", value);
                                         this._sizeOption = _sizeOptions.length;
                                         if (value) {
                                             this._sizeOption = 0;
                                             this.props.globalState.workbench.guiSize = _sizeValues[this._sizeOption];
+                                            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
+                                            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.height);
                                         }
                                         this.forceUpdate();
-                                    }, large: true }), core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "", iconLabel: "Size", options: _sizeOptions, target: this, propertyName: "_sizeOption", noDirectUpdate: true, onSelect: (value) => {
+                                    }, large: true }), responsiveUI && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: "", iconLabel: "Size", options: _sizeOptions, target: this, propertyName: "_sizeOption", noDirectUpdate: true, onSelect: (value) => {
                                         this._sizeOption = value;
                                         if (this._sizeOption !== _sizeOptions.length) {
                                             const newSize = _sizeValues[this._sizeOption];
                                             this.props.globalState.workbench.guiSize = newSize;
+                                            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
+                                            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.height);
                                         }
                                         this.forceUpdate();
-                                    } })), !core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.ReadBoolean("Responsive", true) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "W", target: size, propertyName: "width", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
+                                    } })), !responsiveUI && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "W", target: size, propertyName: "width", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
                                                 if (!this._stopUpdating) {
                                                     this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
+                                                    core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
                                                 }
                                             }, onDragStart: () => {
                                                 this._stopUpdating = true;
                                             }, onDragStop: (newValue) => {
                                                 this._stopUpdating = false;
                                                 this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
+                                                core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
                                             }, arrows: true, isInteger: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this._lockObject, label: "H", target: size, propertyName: "height", min: 1, max: MAX_TEXTURE_SIZE, onChange: (newValue) => {
                                                 if (!this._stopUpdating) {
                                                     this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
+                                                    core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.width);
                                                 }
                                             }, onDragStart: () => {
                                                 this._stopUpdating = true;
                                             }, onDragStop: (newValue) => {
                                                 this._stopUpdating = false;
                                                 this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
+                                                core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.width);
                                             }, arrows: true, isInteger: true })] }))] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "commands-right" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_betaFlag_svg__WEBPACK_IMPORTED_MODULE_18__, className: "beta-flag", draggable: false }) }))] })));
     }
 }
@@ -52613,12 +52754,14 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
                                                     this.resetValues();
                                                     this.forceUpdate();
                                                 } })] })), this._removingRow && ((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)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Confirm", icon: shared_ui_components_imgs_confirmGridElementDark_svg__WEBPACK_IMPORTED_MODULE_12__, shortcut: "", isActive: false, onClick: () => {
+                                                    var _a;
                                                     grid.removeRowDefinition(grid.rowCount - 1);
                                                     this.setRowValues();
                                                     this.resizeRow();
                                                     this.forceUpdate();
                                                     this._removingRow = false;
                                                     this._rowChild = false;
+                                                    (_a = this.props.onUpdateRequiredObservable) === null || _a === void 0 ? void 0 : _a.notifyObservers();
                                                 } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Cancel", icon: shared_ui_components_imgs_cancelGridElementDark_svg__WEBPACK_IMPORTED_MODULE_13__, shortcut: "", isActive: false, onClick: () => {
                                                     this._removingRow = false;
                                                     this._rowChild = false;
@@ -52658,12 +52801,14 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
                                                 this.resetValues();
                                                 this.forceUpdate();
                                             } })] })), this._removingColumn && ((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)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Confirm", icon: shared_ui_components_imgs_confirmGridElementDark_svg__WEBPACK_IMPORTED_MODULE_12__, shortcut: "", isActive: false, onClick: () => {
+                                                var _a;
                                                 grid.removeColumnDefinition(grid.columnCount - 1);
                                                 this.setColumnValues();
                                                 this.resizeColumn();
                                                 this.forceUpdate();
                                                 this._removingColumn = false;
                                                 this._columnChild = false;
+                                                (_a = this.props.onUpdateRequiredObservable) === null || _a === void 0 ? void 0 : _a.notifyObservers();
                                             } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Cancel", icon: shared_ui_components_imgs_cancelGridElementDark_svg__WEBPACK_IMPORTED_MODULE_13__, shortcut: "", isActive: false, onClick: () => {
                                                 this._removingColumn = false;
                                                 this._columnChild = false;
@@ -53687,7 +53832,7 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             }
             case "Grid": {
                 const grids = nodes;
-                return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_propertyGrids_gui_gridPropertyGridComponent__WEBPACK_IMPORTED_MODULE_15__.GridPropertyGridComponent, { grids: grids, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable });
+                return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_propertyGrids_gui_gridPropertyGridComponent__WEBPACK_IMPORTED_MODULE_15__.GridPropertyGridComponent, { grids: grids, lockObject: this._lockObject, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, onUpdateRequiredObservable: this.props.globalState.onUpdateRequiredObservable }));
             }
             case "ScrollViewer": {
                 const scrollViewers = nodes;
@@ -53928,6 +54073,9 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
                 this.forceUpdate();
             }
         });
+        this._onUpdateRequiredObserver = this.props.globalState.onUpdateRequiredObservable.add(() => {
+            this.forceUpdate();
+        });
     }
     componentDidMount() {
         this._onSelectionChangeObserver = this.props.globalState.onSelectionChangedObservable.add((entity) => {
@@ -53955,6 +54103,9 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
         if (this._onPropertyChangedObservable) {
             this.props.globalState.onPropertyChangedObservable.remove(this._onPropertyChangedObservable);
         }
+        if (this._onUpdateRequiredObserver) {
+            this.props.globalState.onUpdateRequiredObservable.remove(this._onUpdateRequiredObserver);
+        }
     }
     filterContent(filter) {
         this.setState({ filter: filter });
@@ -55526,7 +55677,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../globalState */ "../../../tools/guiEditor/dist/globalState.js");
 /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/container");
 /* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/logger */ "core/Misc/observable");
+/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
 /* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _tools__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../tools */ "../../../tools/guiEditor/dist/tools.js");
 /* harmony import */ var _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
@@ -55552,6 +55703,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 
 var ConstraintDirection;
 (function (ConstraintDirection) {
@@ -55562,6 +55714,7 @@ var ConstraintDirection;
 const ARROW_KEY_MOVEMENT_SMALL = 1; // px
 const ARROW_KEY_MOVEMENT_LARGE = 5; // px
 const MAX_POINTER_TRAVEL_DISTANCE = 5; //px^2. determines how far the pointer can move to be treated as a drag vs. a click
+const CONTROL_OFFSET = 10; //offset in pixels for when a control is added to editor
 class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     constructor(props) {
         super(props);
@@ -55574,6 +55727,8 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this._controlsHit = [];
         this._pointerTravelDistance = 0;
         this._processSelectionOnUp = false;
+        this._currLeft = 0;
+        this._currTop = 0;
         this._nextLiveGuiRender = -1;
         this._liveGuiRerenderDelay = 30;
         this._defaultGUISize = { width: 1024, height: 1024 };
@@ -55765,6 +55920,8 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             const obj = {};
             control.serialize(obj);
             controlList.push(obj);
+            this._currLeft = control.leftInPixels;
+            this._currTop = control.topInPixels;
         }
         copyFn(JSON.stringify({
             GUIClipboard: true,
@@ -55784,8 +55941,14 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                 for (const control of parsed.controls) {
                     newSelection.push(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.Parse(control, this.props.globalState.guiTexture));
                 }
-                (_a = this.props.globalState.selectedControls[0].parent) === null || _a === void 0 ? void 0 : _a.addControl(newSelection[0]);
-                this.props.globalState.setSelection(newSelection);
+                if (((_a = newSelection[0].parent) === null || _a === void 0 ? void 0 : _a.typeName) != "StackPanel") {
+                    this._currLeft += CONTROL_OFFSET;
+                    this._currTop += CONTROL_OFFSET;
+                }
+                newSelection[0].leftInPixels = this._currLeft;
+                newSelection[0].topInPixels = this._currTop;
+                const newGuiNode = this.props.globalState.workbench.appendBlock(newSelection[0]);
+                this.props.globalState.setSelection([newGuiNode]);
                 return true;
             }
         }
@@ -55982,12 +56145,18 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         }
     }
     appendBlock(guiElement) {
+        var _a;
         if (this.props.globalState.liveGuiTexture) {
             this.props.globalState.liveGuiTexture.addControl(guiElement);
         }
         this.addEditorBehavior(guiElement);
         guiElement.getDescendants(true).forEach((desc) => this.addEditorBehavior(desc));
-        this.trueRootContainer.addControl(guiElement);
+        if (this.props.globalState.selectedControls.length != 0) {
+            (_a = this.props.globalState.selectedControls[0].parent) === null || _a === void 0 ? void 0 : _a.addControl(guiElement);
+        }
+        else {
+            this.trueRootContainer.addControl(guiElement);
+        }
         return guiElement;
     }
     parent(dropLocationControl) {
@@ -56255,7 +56424,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             this._processSelectionOnUp = false;
         }
     }
-    createGUICanvas() {
+    createGUICanvas(embed) {
         // Get the canvas element from the DOM.
         const canvas = this._rootContainer.current;
         // Associate a Babylon Engine to it.
@@ -56265,7 +56434,11 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this._scene.clearColor = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Color4(0, 0, 0, 0);
         const light = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.HemisphericLight("light1", core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Axis.Y, this._scene);
         light.intensity = 0.9;
-        this._guiSize = this._defaultGUISize;
+        if (embed) {
+            this.props.globalState.fromPG = true;
+            this._guiSize.width = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.DataStorage.ReadNumber("width", 1024);
+            this._guiSize.height = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.DataStorage.ReadNumber("height", 1024);
+        }
         this._panAndZoomContainer = new gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Container("panAndZoom");
         this._panAndZoomContainer.clipContent = false;
         this._panAndZoomContainer.clipChildren = false;
@@ -56350,26 +56523,6 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     addControls(scene) {
         scene.onKeyboardObservable.add((k) => {
             switch (k.event.key) {
-                case "s": //select
-                case "S":
-                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT;
-                    break;
-                case "p": //pan
-                case "P":
-                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.PAN;
-                    break;
-                case "z": //zoom
-                case "Z":
-                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM;
-                    break;
-                case "g": //outlines
-                case "G":
-                    this.props.globalState.outlines = !this.props.globalState.outlines;
-                    break;
-                case "f": //fit to window
-                case "F":
-                    this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
-                    break;
                 case "ArrowUp": // move up
                     this.moveControls(false, k.event.shiftKey ? -ARROW_KEY_MOVEMENT_LARGE : -ARROW_KEY_MOVEMENT_SMALL);
                     break;
@@ -56549,6 +56702,7 @@ class GlobalState {
         this.onOutlineChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onPropertyChangedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this._tool = GUIEditorTool.SELECT;
+        this._prevTool = this._tool;
         this.onToolChangeObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onFitControlsToWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
         this.onReframeWindowObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
@@ -56587,7 +56741,7 @@ class GlobalState {
         if (this._tool === GUIEditorTool.ZOOM) {
             return GUIEditorTool.ZOOM;
         }
-        else if (this._tool === GUIEditorTool.PAN || this.keys.isKeyDown("space")) {
+        else if (this._tool === GUIEditorTool.PAN) {
             return GUIEditorTool.PAN;
         }
         else {
@@ -56597,9 +56751,16 @@ class GlobalState {
     set tool(newTool) {
         if (this._tool === newTool)
             return;
+        this._prevTool = this._tool;
         this._tool = newTool;
         this.onToolChangeObservable.notifyObservers();
     }
+    restorePreviousTool() {
+        if (this._tool !== this._prevTool) {
+            this._tool = this._prevTool;
+            this.onToolChangeObservable.notifyObservers();
+        }
+    }
     /** adds copy, cut and paste listeners to the host window */
     registerEventListeners() {
         const isElementEditable = (element) => {
@@ -56634,6 +56795,12 @@ class GlobalState {
     get backgroundColor() {
         return this._backgroundColor;
     }
+    get fromPG() {
+        return this._fromPG;
+    }
+    set fromPG(value) {
+        this._fromPG = value;
+    }
     set backgroundColor(value) {
         this._backgroundColor = value;
         this.onBackgroundColorChangeObservable.notifyObservers();
@@ -56743,8 +56910,9 @@ class GUIEditor {
     /**
      * Show the gui editor
      * @param options defines the options to use to configure the gui editor
+     * @param embed defines whether editor is being opened from the Playground
      */
-    static async Show(options) {
+    static async Show(options, embed) {
         let hostElement = options.hostElement;
         // if we are in a standalone window and we have some current state, just load the GUI from the snippet server, don't do anything else
         if (this._CurrentState && hostElement) {
@@ -56781,7 +56949,7 @@ class GUIEditor {
         react_dom__WEBPACK_IMPORTED_MODULE_1__.render(graphEditor, hostElement);
         // create the middle workbench canvas
         if (!globalState.guiTexture) {
-            globalState.workbench.createGUICanvas();
+            globalState.workbench.createGUICanvas(embed);
             if (options.currentSnippetToken) {
                 try {
                     await globalState.workbench.loadFromSnippet(options.currentSnippetToken);
@@ -57150,40 +57318,6 @@ class Portal extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
 }
 
 
-/***/ }),
-
-/***/ "../../../tools/guiEditor/dist/sharedComponents/messageDialog.js":
-/*!***********************************************************************!*\
-  !*** ../../../tools/guiEditor/dist/sharedComponents/messageDialog.js ***!
-  \***********************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "MessageDialogComponent": () => (/* binding */ MessageDialogComponent)
-/* harmony export */ });
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
-
-
-class MessageDialogComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
-    constructor(props) {
-        super(props);
-        this.state = { message: "", isError: false };
-        this.props.globalState.onErrorMessageDialogRequiredObservable.add((message) => {
-            this.setState({ message: message, isError: true });
-        });
-    }
-    render() {
-        if (!this.state.message) {
-            return null;
-        }
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "dialog-container" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "dialog" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "dialog-message" }, { children: this.state.message })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "dialog-buttons" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "dialog-button-ok" + (this.state.isError ? " error" : ""), onClick: () => this.setState({ message: "" }) }, { children: "OK" })) }))] })) })));
-    }
-}
-
-
 /***/ }),
 
 /***/ "../../../tools/guiEditor/dist/tools.js":
@@ -57288,23 +57422,25 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
-/* harmony import */ var _components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./components/propertyTab/propertyTabComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyTabComponent.js");
-/* harmony import */ var _portal__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./portal */ "../../../tools/guiEditor/dist/portal.js");
-/* harmony import */ var _components_log_logComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components/log/logComponent */ "../../../tools/guiEditor/dist/components/log/logComponent.js");
-/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
-/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./guiNodeTools */ "../../../tools/guiEditor/dist/guiNodeTools.js");
-/* harmony import */ var _diagram_workbench__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./diagram/workbench */ "../../../tools/guiEditor/dist/diagram/workbench.js");
-/* harmony import */ var _sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./sharedComponents/messageDialog */ "../../../tools/guiEditor/dist/sharedComponents/messageDialog.js");
-/* harmony import */ var _components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./components/sceneExplorer/sceneExplorerComponent */ "../../../tools/guiEditor/dist/components/sceneExplorer/sceneExplorerComponent.js");
-/* harmony import */ var _components_commandBarComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/commandBarComponent */ "../../../tools/guiEditor/dist/components/commandBarComponent.js");
-/* harmony import */ var _diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./diagram/gizmoWrapper */ "../../../tools/guiEditor/dist/diagram/gizmoWrapper.js");
-/* harmony import */ var _diagram_artBoard__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./diagram/artBoard */ "../../../tools/guiEditor/dist/diagram/artBoard.js");
-/* harmony import */ var _controlTypes__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./controlTypes */ "../../../tools/guiEditor/dist/controlTypes.js");
-/* harmony import */ var _main_scss__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./main.scss */ "../../../tools/guiEditor/dist/main.scss");
-/* harmony import */ var _scss_header_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./scss/header.scss */ "../../../tools/guiEditor/dist/scss/header.scss");
-/* harmony import */ var _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./imgs/toolbarExpandIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarExpandIcon.svg");
-/* harmony import */ var _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./imgs/toolbarCollapseIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarCollapseIcon.svg");
+/* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./globalState */ "../../../tools/guiEditor/dist/globalState.js");
+/* harmony import */ var _components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./components/propertyTab/propertyTabComponent */ "../../../tools/guiEditor/dist/components/propertyTab/propertyTabComponent.js");
+/* harmony import */ var _portal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./portal */ "../../../tools/guiEditor/dist/portal.js");
+/* harmony import */ var _components_log_logComponent__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./components/log/logComponent */ "../../../tools/guiEditor/dist/components/log/logComponent.js");
+/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
+/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./guiNodeTools */ "../../../tools/guiEditor/dist/guiNodeTools.js");
+/* harmony import */ var _diagram_workbench__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./diagram/workbench */ "../../../tools/guiEditor/dist/diagram/workbench.js");
+/* harmony import */ var shared_ui_components_components_MessageDialog__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared-ui-components/components/MessageDialog */ "../../../dev/sharedUiComponents/dist/components/MessageDialog.js");
+/* harmony import */ var _components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/sceneExplorer/sceneExplorerComponent */ "../../../tools/guiEditor/dist/components/sceneExplorer/sceneExplorerComponent.js");
+/* harmony import */ var _components_commandBarComponent__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/commandBarComponent */ "../../../tools/guiEditor/dist/components/commandBarComponent.js");
+/* harmony import */ var _diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./diagram/gizmoWrapper */ "../../../tools/guiEditor/dist/diagram/gizmoWrapper.js");
+/* harmony import */ var _diagram_artBoard__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./diagram/artBoard */ "../../../tools/guiEditor/dist/diagram/artBoard.js");
+/* harmony import */ var _controlTypes__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./controlTypes */ "../../../tools/guiEditor/dist/controlTypes.js");
+/* harmony import */ var _main_scss__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./main.scss */ "../../../tools/guiEditor/dist/main.scss");
+/* harmony import */ var _scss_header_scss__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./scss/header.scss */ "../../../tools/guiEditor/dist/scss/header.scss");
+/* harmony import */ var _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./imgs/toolbarExpandIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarExpandIcon.svg");
+/* harmony import */ var _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./imgs/toolbarCollapseIcon.svg */ "../../../tools/guiEditor/dist/imgs/toolbarCollapseIcon.svg");
+
 
 
 
@@ -57326,8 +57462,43 @@ __webpack_require__.r(__webpack_exports__);
 class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     constructor(props) {
         super(props);
-        this._leftWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.ReadNumber("LeftWidth", 200);
-        this._rightWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.ReadNumber("RightWidth", 300);
+        this._leftWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.ReadNumber("LeftWidth", 200);
+        this._rightWidth = core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.ReadNumber("RightWidth", 300);
+        this.addToolControls = (evt) => {
+            // If the event target is a text input, we're currently focused on it, and the user
+            // just wants to type normal text
+            if (evt.target && evt.target instanceof HTMLInputElement && evt.target.type === "text") {
+                return;
+            }
+            switch (evt.key) {
+                case "s": //select
+                case "S":
+                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT;
+                    break;
+                case "p": //pan
+                case "P":
+                case " ":
+                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.PAN;
+                    break;
+                case "z": //zoom
+                case "Z":
+                    this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.ZOOM;
+                    break;
+                case "g": //outlines
+                case "G":
+                    this.props.globalState.outlines = !this.props.globalState.outlines;
+                    break;
+                case "f": //fit to window
+                case "F":
+                    this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
+                    break;
+            }
+        };
+        this.removePressToolControls = (evt) => {
+            if (evt.key === " ") {
+                this.props.globalState.restorePreviousTool();
+            }
+        };
         this.handlePopUp = () => {
             this.setState({
                 showPreviewPopUp: true,
@@ -57404,6 +57575,7 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         this.state = {
             showPreviewPopUp: false,
             toolbarExpand: true,
+            message: "",
         };
         this.props.globalState.onBackgroundColorChangeObservable.add(() => this.forceUpdate());
         this.props.globalState.onDropObservable.add(() => {
@@ -57412,11 +57584,23 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
             }
             this._draggedItem = null;
         });
+        this._onErrorMessageObserver = this.props.globalState.onErrorMessageDialogRequiredObservable.add((message) => {
+            this.setState({ message });
+        });
     }
     componentDidMount() {
         if (navigator.userAgent.indexOf("Mobile") !== -1) {
             (this.props.globalState.hostDocument || document).querySelector(".blocker").style.visibility = "visible";
         }
+        document.addEventListener("keydown", this.addToolControls);
+        document.addEventListener("keyup", this.removePressToolControls);
+    }
+    componentWillUnmount() {
+        document.removeEventListener("keydown", this.addToolControls);
+        document.removeEventListener("keyup", this.removePressToolControls);
+        if (this._onErrorMessageObserver) {
+            this.props.globalState.onErrorMessageDialogRequiredObservable.remove(this._onErrorMessageObserver);
+        }
     }
     showWaitScreen() {
         var _a;
@@ -57446,11 +57630,11 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         const maxWidth = this.props.globalState.hostWindow.innerWidth;
         if (forLeft) {
             this._leftWidth = Math.max(150, Math.min(maxWidth - this._rightWidth, evt.clientX - this._rootRef.current.clientLeft));
-            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteNumber("LeftWidth", this._leftWidth);
+            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.WriteNumber("LeftWidth", this._leftWidth);
         }
         else {
             this._rightWidth = Math.max(250, Math.min(maxWidth - this._leftWidth, this._rootRef.current.clientLeft + this._rootRef.current.clientWidth - evt.clientX));
-            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_5__.DataStorage.WriteNumber("RightWidth", this._rightWidth);
+            core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__.DataStorage.WriteNumber("RightWidth", this._rightWidth);
         }
         rootElement.style.gridTemplateColumns = this.buildColumnLayout();
         this.props.globalState.onWindowResizeObservable.notifyObservers();
@@ -57469,13 +57653,13 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     }
     render() {
         const classForElement = this.state.toolbarExpand ? "left-panel" : "left-panel expand";
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_3__.Portal, Object.assign({ globalState: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "ge-header" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "command-bar" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_commandBarComponent__WEBPACK_IMPORTED_MODULE_10__.CommandBarComponent, { globalState: this.props.globalState }) })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "gui-editor-workbench-root", style: {
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_4__.Portal, Object.assign({ globalState: this.props.globalState }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ id: "ge-header" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "command-bar" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_commandBarComponent__WEBPACK_IMPORTED_MODULE_11__.CommandBarComponent, { globalState: this.props.globalState }) })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ id: "gui-editor-workbench-root", style: {
                         gridTemplateColumns: this.buildColumnLayout(),
                     }, onMouseDown: (evt) => {
                         if (evt.target.nodeName === "INPUT") {
                             return;
                         }
-                    }, ref: this._rootRef, onPointerUp: (evt) => this.onPointerUp(evt) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: classForElement }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "leftGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_9__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "diagram-container", onDrop: (event) => {
+                    }, ref: this._rootRef, onPointerUp: (evt) => this.onPointerUp(evt) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: classForElement }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "leftGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__.SceneExplorerComponent, { globalState: this.props.globalState, noExpand: true }), this.createToolbar(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "diagram-container", onDrop: (event) => {
                                 event.preventDefault();
                                 this.props.globalState.onDropObservable.notifyObservers();
                                 this.props.globalState.onParentingChangeObservable.notifyObservers(null);
@@ -57483,10 +57667,10 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
                                 event.preventDefault();
                             }, style: {
                                 backgroundColor: this.props.globalState.backgroundColor.toHexString(),
-                            } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_artBoard__WEBPACK_IMPORTED_MODULE_12__.ArtBoardComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_workbench__WEBPACK_IMPORTED_MODULE_7__.WorkbenchComponent, { ref: "workbenchCanvas", globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_11__.GizmoWrapper, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "right-panel" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "rightGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_2__.PropertyTabComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_log_logComponent__WEBPACK_IMPORTED_MODULE_4__.LogComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sharedComponents_messageDialog__WEBPACK_IMPORTED_MODULE_8__.MessageDialogComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blocker" }, { children: "GUI Editor runs only on desktop" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "wait-screen hidden" }, { children: "Processing...please wait" }))] })));
+                            } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_artBoard__WEBPACK_IMPORTED_MODULE_13__.ArtBoardComponent, { globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_workbench__WEBPACK_IMPORTED_MODULE_8__.WorkbenchComponent, { ref: "workbenchCanvas", globalState: this.props.globalState }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_12__.GizmoWrapper, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "right-panel" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "rightGrab", onPointerDown: (evt) => this.onPointerDown(evt), onPointerMove: (evt) => this.resizeColumns(evt, false) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_propertyTab_propertyTabComponent__WEBPACK_IMPORTED_MODULE_3__.PropertyTabComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_log_logComponent__WEBPACK_IMPORTED_MODULE_5__.LogComponent, { globalState: this.props.globalState })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_components_MessageDialog__WEBPACK_IMPORTED_MODULE_9__.MessageDialog, { message: this.state.message, isError: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blocker" }, { children: "GUI Editor runs only on desktop" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "wait-screen hidden" }, { children: "Processing...please wait" }))] })));
     }
     onCreate(value) {
-        const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_6__.GUINodeTools.CreateControlFromString(value);
+        const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__.GUINodeTools.CreateControlFromString(value);
         const newGuiNode = this.props.globalState.workbench.appendBlock(guiElement);
         this.props.globalState.setSelection([newGuiNode]);
         this.props.globalState.onPointerUpObservable.notifyObservers(null);
@@ -57494,7 +57678,7 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
         return newGuiNode;
     }
     createBlackLine() {
-        const icon = this.state.toolbarExpand ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_16__, className: "icon" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_17__, className: "icon" });
+        const icon = this.state.toolbarExpand ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarExpandIcon_svg__WEBPACK_IMPORTED_MODULE_17__, className: "icon" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_toolbarCollapseIcon_svg__WEBPACK_IMPORTED_MODULE_18__, className: "icon" });
         return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "blackLine" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "arrow", onClick: () => this.switchExpandedState() }, { children: icon })) })));
     }
     createToolbarHelper(ct) {
@@ -57508,10 +57692,10 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     }
     createToolbar() {
         if (this.state.toolbarExpand) {
-            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes) }))] })) }));
+            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes) }))] })) }));
         }
         else {
-            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab expanded" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: [this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.slice(0, Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.length / 2))), this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.slice(Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_13__.ControlTypes.length / 2)))] }))] })) }));
+            return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbarGrab expanded" }, { children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "toolbar-content-sub1" }, { children: [this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.slice(0, Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.length / 2))), this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.slice(Math.ceil(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes.length / 2)))] }))] })) }));
         }
     }
 }
@@ -57957,6 +58141,61 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_header_scss__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_header_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_3_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_3_use_2_header_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
 
 
+/***/ }),
+
+/***/ "../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss":
+/*!**********************************************************************************!*\
+  !*** ../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss ***!
+  \**********************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ "../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ "../../../../node_modules/style-loader/dist/runtime/insertBySelector.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ "../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ "../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ "../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js");
+/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_4_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_4_use_2_MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./MessageDialog.modules.scss */ "../../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss");
+
+      
+      
+      
+      
+      
+      
+      
+      
+      
+
+var options = {};
+
+options.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());
+options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
+
+      options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
+    
+options.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
+options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
+
+var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_4_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_4_use_2_MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_6__["default"], options);
+
+
+
+
+       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_4_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_4_use_2_MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_4_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_4_use_2_MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_4_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_4_use_2_MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
+
+
 /***/ }),
 
 /***/ "../../../dev/sharedUiComponents/dist/imgs/LineSpacingIcon.svg":