@babylonjs/gui-editor 5.19.0 → 5.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -171,7 +171,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
171
171
|
|
172
172
|
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()));
|
173
173
|
// Module
|
174
|
-
___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":"AAAA;EACI,sBAAiB,EAAA;;AAGrB;EACI,aAAa;EACb,qCAAqC;EACrC,YAAY;EACZ,WAAW;EACX,mBAAmB;EACnB,iCAAiC,EAAA;;AAGrC;EACI,aAAa;EACb,uBAAuB;EACvB,qBAAqB;EACrB,YAAY;EACZ,WAAW;EACX,mBAAmB;EACnB,aAAa;EACb,YAAY;EACZ,iCAAiC;EACjC,kBAAkB;EAClB,MAAM;EACN,OAAO,EAAA;EAZX;IAeQ,kBAAkB,EAAA;;AAI1B;EACI,UAAU;EACV,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;EAClB,WAAW;EACX,MAAM,EAAA;;AAGV;EACI,iBAAiB;EACjB,UAAU;EACV,SAAS;EACT,kBAAkB;EAClB,MAAM;EACN,OAAO,EAAA;;AAGX;EACI,mBAAmB;EACnB,oBAAoB;EACpB,cAAc;EACd,YAAY;EACZ,gBAAgB,EAAA;EALpB;IAQQ,YAAY;IACZ,iBAAiB;IACjB,kBAAkB,EAAA;EAV1B;IAaQ,YAAY;IACZ,kBAAkB,EAAA;EAd1B;IAiBQ,YAAY;IACZ,eAAe;IACf,aAAa;IACb,mBAAmB;IACnB,eAAe;IACf,iBAAiB;IACjB,+BAA+B;IAC/B,wBAAwB;IACxB,kBAAkB,EAAA;IAzB1B;MA4BY,iBAAiB;MACjB,eAAe,EAAA;IA7B3B;MAiCY,gCAAgC,EAAA;MAjC5C;QAmCgB,cAAc,EAAA;EAnC9B;IAwCQ,WAAW;IACX,YAAY,EAAA;EAzCpB;IA6CY,eAAe,EAAA;;AAK3B;EACI,kBAAkB;EAClB,aAAa;EACb,WAAW;EACX,cAAc;EACd,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,gBAAgB,EAAA;EARpB;IAWQ,aAAa;IACb,WAAW;IACX,YAAY,EAAA;;AAIpB;EACI,oBAAoB;EACpB,cAAc;EACd,aAAa;EACb,wBAAwB;EACxB,+BAA+B;EAC/B,kBAAkB;EAClB,gBAAgB,EAAA;EAPpB;IASQ,gCAAgC,EAAA;;AAIxC;EACI,oBAAoB;EACpB,cAAc;EACd,aAAa;EACb,sCAAsC;EACtC,2BAA2B;EAC3B,gBAAgB;EAChB,kBAAkB,EAAA;EAPtB;IAUQ,WAAW;IACX,cAAc,EAAA;EAXtB;IAeQ,aAAa;IACb,uBAAuB;IACvB,qBAAqB;IACrB,YAAY;IACZ,qBAAqB;IACrB,eAAe,EAAA;IApBvB;MAuBY,mBAA6B;MAC7B,YAAY;MACZ,YAAY,EAAA;IAzBxB;MA6BY,mBAA6B;MAC7B,YAAY,EAAA;IA9BxB;MAkCY,wBAAwB;MACxB,kBAAkB,EAAA;;AAK9B;EACI,kBAAkB;EAClB,kBAAkB;EAClB,wBAAwB;EACxB,YAAY;EACZ,MAAM;EACN,OAAO;EAEP,kCAAkC;EAClC,+CAA+C;EAC/C,YAAY;EACZ,eAAe;EAEf,aAAa;EACb,qBAAqB;EACrB,uBAAuB;EAEvB,iBAAiB;EAEjB,aAAa;EACb,kBAAkB,EAAA;;AAGtB;EACI,WAAW;EACX,cAAc;EACd,aAAa,EAAA;;AAGjB;EACI,kBAAkB;EAClB,WAAW;EACX,YAAY;EACZ,8BAAoC;EACpC,aAAa;EACb,+CAA+C;EAC/C,MAAM,EAAA;EAPV;IAUQ,UAAU;IACV,kBAAkB;IAClB,oBAAoB;IACpB,iBAAiB;IACjB,gBAAgB;IAChB,mBAAmB;IACnB,iBAAiB;IAEjB,aAAa;IACb,2BAA2B;IAC3B,0CAA0C,EAAA;IApBlD;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;;AAMnC;EAEQ,iBAAiB,EAAA;;AAFzB;EAKQ,uBAAuB;EACvB,kBAAkB;EAClB,gBAAgB;EAChB,WAAW;EACX,oBAAoB,EAAA;;AAT5B;EAYQ,kBAAkB;EAClB,WAAW;EACX,YAAY,EAAA;EAdpB;IAgBY,SAAS;IACT,UAAU;IACV,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,uBAAuB;IACvB,0BAAqC,EAAA;EAtBjD;IAyBY,WAAW;IACX,YAAY;IACZ,kBAAkB,EAAA;EA3B9B;IA8BY,WAAW;IACX,YAAY;IACZ,kBAAkB,EAAA;;AAhC9B;EAoCQ,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,kBAAkB,EAAA;;AAG1B;EACI,kBAAkB,EAAA;;AAEtB;EACI,wBAAwB;EACxB,kBAAkB;EAClB,UAAU;EACV,oBAAoB,EAAA;;AAExB;EACI,kBAAkB;EAClB,gFAAkF;EAClF,WAAW;EACX,YAAY,EAAA","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":""}]);
|
174
|
+
___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":"AAAA;EACI,sBAAiB,EAAA;;AAGrB;EACI,aAAa;EACb,qCAAqC;EACrC,YAAY;EACZ,WAAW;EACX,mBAAmB;EACnB,iCAAiC,EAAA;;AAGrC;EACI,aAAa;EACb,uBAAuB;EACvB,qBAAqB;EACrB,YAAY;EACZ,WAAW;EACX,mBAAmB;EACnB,aAAa;EACb,YAAY;EACZ,iCAAiC;EACjC,kBAAkB;EAClB,MAAM;EACN,OAAO,EAAA;EAZX;IAeQ,kBAAkB,EAAA;;AAI1B;EACI,UAAU;EACV,YAAY;EACZ,iBAAiB;EACjB,kBAAkB;EAClB,WAAW;EACX,MAAM,EAAA;;AAGV;EACI,iBAAiB;EACjB,UAAU;EACV,SAAS;EACT,kBAAkB;EAClB,MAAM;EACN,OAAO,EAAA;;AAGX;EACI,mBAAmB;EACnB,oBAAoB;EACpB,cAAc;EACd,YAAY;EACZ,gBAAgB,EAAA;EALpB;IAQQ,YAAY;IACZ,iBAAiB;IACjB,kBAAkB,EAAA;EAV1B;IAaQ,YAAY;IACZ,kBAAkB,EAAA;EAd1B;IAiBQ,YAAY;IACZ,eAAe;IACf,aAAa;IACb,mBAAmB;IACnB,eAAe;IACf,iBAAiB;IACjB,+BAA+B;IAC/B,wBAAwB;IACxB,kBAAkB,EAAA;IAzB1B;MA4BY,iBAAiB;MACjB,eAAe,EAAA;IA7B3B;MAiCY,gCAAgC,EAAA;MAjC5C;QAmCgB,cAAc,EAAA;EAnC9B;IAwCQ,WAAW;IACX,YAAY,EAAA;EAzCpB;IA6CY,eAAe,EAAA;;AAK3B;EACI,kBAAkB;EAClB,aAAa;EACb,WAAW;EACX,cAAc;EACd,mBAAmB;EACnB,WAAW;EACX,YAAY;EACZ,gBAAgB,EAAA;EARpB;IAWQ,aAAa;IACb,WAAW;IACX,YAAY,EAAA;;AAIpB;EACI,oBAAoB;EACpB,cAAc;EACd,aAAa;EACb,wBAAwB;EACxB,+BAA+B;EAC/B,kBAAkB;EAClB,gBAAgB,EAAA;EAPpB;IASQ,gCAAgC,EAAA;;AAIxC;EACI,oBAAoB;EACpB,cAAc;EACd,aAAa;EACb,sCAAsC;EACtC,2BAA2B;EAC3B,gBAAgB;EAChB,kBAAkB,EAAA;EAPtB;IAUQ,WAAW;IACX,cAAc,EAAA;EAXtB;IAeQ,aAAa;IACb,uBAAuB;IACvB,qBAAqB;IACrB,YAAY;IACZ,qBAAqB;IACrB,eAAe,EAAA;IApBvB;MAuBY,mBAA6B;MAC7B,YAAY;MACZ,YAAY,EAAA;IAzBxB;MA6BY,mBAA6B;MAC7B,YAAY,EAAA;IA9BxB;MAkCY,wBAAwB;MACxB,kBAAkB,EAAA;;AAK9B;EACI,kBAAkB;EAClB,kBAAkB;EAClB,wBAAwB;EACxB,YAAY;EACZ,MAAM;EACN,OAAO;EAEP,kCAAkC;EAClC,+CAA+C;EAC/C,YAAY;EACZ,eAAe;EAEf,aAAa;EACb,qBAAqB;EACrB,uBAAuB;EAEvB,iBAAiB;EAEjB,aAAa;EACb,kBAAkB,EAAA;;AAGtB;EACI,WAAW;EACX,cAAc;EACd,aAAa,EAAA;;AAGjB;EAEQ,iBAAiB,EAAA;;AAFzB;EAKQ,uBAAuB;EACvB,kBAAkB;EAClB,gBAAgB;EAChB,WAAW;EACX,oBAAoB,EAAA;;AAT5B;EAYQ,kBAAkB;EAClB,WAAW;EACX,YAAY,EAAA;EAdpB;IAgBY,SAAS;IACT,UAAU;IACV,kBAAkB;IAClB,WAAW;IACX,YAAY;IACZ,uBAAuB;IACvB,0BAAqC,EAAA;EAtBjD;IAyBY,WAAW;IACX,YAAY;IACZ,kBAAkB,EAAA;EA3B9B;IA8BY,WAAW;IACX,YAAY;IACZ,kBAAkB,EAAA;;AAhC9B;EAoCQ,WAAW;EACX,YAAY;EACZ,uBAAuB;EACvB,kBAAkB,EAAA;;AAG1B;EACI,kBAAkB,EAAA;;AAEtB;EACI,wBAAwB;EACxB,kBAAkB;EAClB,UAAU;EACV,oBAAoB,EAAA;;AAExB;EACI,kBAAkB;EAClB,gFAAkF;EAClF,WAAW;EACX,YAAY,EAAA","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":""}]);
|
175
175
|
// Exports
|
176
176
|
___CSS_LOADER_EXPORT___.locals = {};
|
177
177
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
|
@@ -233,6 +233,41 @@ ___CSS_LOADER_EXPORT___.locals = {};
|
|
233
233
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
|
234
234
|
|
235
235
|
|
236
|
+
/***/ }),
|
237
|
+
|
238
|
+
/***/ "../../../../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":
|
239
|
+
/*!*******************************************************************************************************************************************************************************************************************************************!*\
|
240
|
+
!*** ../../../../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 ***!
|
241
|
+
\*******************************************************************************************************************************************************************************************************************************************/
|
242
|
+
/***/ ((module, __webpack_exports__, __webpack_require__) => {
|
243
|
+
|
244
|
+
"use strict";
|
245
|
+
__webpack_require__.r(__webpack_exports__);
|
246
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
247
|
+
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
248
|
+
/* harmony export */ });
|
249
|
+
/* 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");
|
250
|
+
/* 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__);
|
251
|
+
/* 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");
|
252
|
+
/* 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__);
|
253
|
+
// Imports
|
254
|
+
|
255
|
+
|
256
|
+
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()));
|
257
|
+
// Module
|
258
|
+
___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":""}]);
|
259
|
+
// Exports
|
260
|
+
___CSS_LOADER_EXPORT___.locals = {
|
261
|
+
"dialog-container": "stbiu24JbUBfHNSSYhSR",
|
262
|
+
"dialog": "fCGAiNfXRhhXF8hQPpct",
|
263
|
+
"dialog-message": "yRrm4hWjzyu4RnCc412h",
|
264
|
+
"dialog-buttons": "c5hG_qW6gImPmY2mRXUf",
|
265
|
+
"dialog-button-ok": "TaDL8j02NlDZlEf6mraY",
|
266
|
+
"error": "gWN6zWjwiaTlrWBw3gRR"
|
267
|
+
};
|
268
|
+
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
|
269
|
+
|
270
|
+
|
236
271
|
/***/ }),
|
237
272
|
|
238
273
|
/***/ "../../../../node_modules/@fortawesome/fontawesome-svg-core/index.es.js":
|
@@ -49524,7 +49559,7 @@ class ColorComponentEntry extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
49524
49559
|
}
|
49525
49560
|
}
|
49526
49561
|
render() {
|
49527
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
49562
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-component", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-component-value", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: 1, className: "numeric-input", value: this.props.value, onBlur: () => this.unlock(), onFocus: () => this.lock(), onChange: (evt) => this.updateValue(evt.target.value), disabled: this.props.disabled }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-component-label", children: this.props.label })] }));
|
49528
49563
|
}
|
49529
49564
|
}
|
49530
49565
|
|
@@ -49652,29 +49687,29 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
49652
49687
|
core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
|
49653
49688
|
const colorHexRef = colorRef.toHexString();
|
49654
49689
|
const hasAlpha = this.props.color instanceof core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4;
|
49655
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
49690
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-container" + (this.props.linearhint ? " with-hints" : ""), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-saturation", onPointerMove: (e) => this.onSaturationPointerMove(e), onPointerDown: (e) => this.onSaturationPointerDown(e), onPointerUp: (e) => this.onSaturationPointerUp(e), ref: this._saturationRef, style: {
|
49656
49691
|
background: colorHexRef,
|
49657
|
-
}
|
49692
|
+
}, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-white" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-black" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-saturation-cursor", style: {
|
49658
49693
|
top: `${-(hsv.b * 100) + 100}%`,
|
49659
49694
|
left: `${hsv.g * 100}%`,
|
49660
|
-
} })] })
|
49695
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-hue", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-color", style: {
|
49661
49696
|
background: colorHex,
|
49662
|
-
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
49697
|
+
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-slider", ref: this._hueRef, onPointerMove: (e) => this.onHuePointerMove(e), onPointerDown: (e) => this.onHuePointerDown(e), onPointerUp: (e) => this.onHuePointerUp(e), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hue-cursor", style: {
|
49663
49698
|
left: `${(hsv.r / 360.0) * 100}%`,
|
49664
49699
|
border: `1px solid ` + colorHexRef,
|
49665
|
-
} }) })
|
49700
|
+
} }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-rgb", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "red", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "R", min: 0, max: 255, value: Math.round(this.state.color.r * 255), onChange: (value) => {
|
49666
49701
|
this.state.color.r = value / 255.0;
|
49667
49702
|
this.forceUpdate();
|
49668
|
-
} }) })
|
49703
|
+
} }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "green", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "G", min: 0, max: 255, value: Math.round(this.state.color.g * 255), onChange: (value) => {
|
49669
49704
|
this.state.color.g = value / 255.0;
|
49670
49705
|
this.forceUpdate();
|
49671
|
-
} }) })
|
49706
|
+
} }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "blue", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "B", min: 0, max: 255, value: Math.round(this.state.color.b * 255), onChange: (value) => {
|
49672
49707
|
this.state.color.b = value / 255.0;
|
49673
49708
|
this.forceUpdate();
|
49674
|
-
} }) })
|
49709
|
+
} }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "alpha" + (hasAlpha ? "" : " grayed"), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorComponentEntry__WEBPACK_IMPORTED_MODULE_3__.ColorComponentEntry, { lockObject: this.props.lockObject, label: "A", min: 0, max: 255, value: Math.round(this.state.alpha * 255), onChange: (value) => {
|
49675
49710
|
this.setState({ alpha: value / 255.0 });
|
49676
49711
|
this.forceUpdate();
|
49677
|
-
} }) })
|
49712
|
+
} }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker-hex", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hex-label", children: "Hex" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-hex-value", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_hexColor__WEBPACK_IMPORTED_MODULE_4__.HexColor, { lockObject: this.props.lockObject, expectedLength: hasAlpha ? 8 : 6, value: colorHex, onChange: (value) => {
|
49678
49713
|
if (hasAlpha) {
|
49679
49714
|
const color4 = core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4.FromHexString(value);
|
49680
49715
|
this.setState({ color: new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3(color4.r, color4.g, color4.b), alpha: color4.a });
|
@@ -49682,7 +49717,7 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
49682
49717
|
else {
|
49683
49718
|
this.setState({ color: core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.FromHexString(value) });
|
49684
49719
|
}
|
49685
|
-
} }) })
|
49720
|
+
} }) })] }), this.props.linearhint && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-warning", children: "(Note: color is stored in linear mode and was converted to gamma to be displayed here (toGammaSpace() / toLinearSpace()))" }))] }));
|
49686
49721
|
}
|
49687
49722
|
}
|
49688
49723
|
|
@@ -49746,6 +49781,65 @@ class HexColor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
49746
49781
|
}
|
49747
49782
|
|
49748
49783
|
|
49784
|
+
/***/ }),
|
49785
|
+
|
49786
|
+
/***/ "../../../dev/sharedUiComponents/dist/components/MessageDialog.js":
|
49787
|
+
/*!************************************************************************!*\
|
49788
|
+
!*** ../../../dev/sharedUiComponents/dist/components/MessageDialog.js ***!
|
49789
|
+
\************************************************************************/
|
49790
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
49791
|
+
|
49792
|
+
"use strict";
|
49793
|
+
__webpack_require__.r(__webpack_exports__);
|
49794
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
49795
|
+
/* harmony export */ "MessageDialog": () => (/* binding */ MessageDialog)
|
49796
|
+
/* harmony export */ });
|
49797
|
+
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
|
49798
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
|
49799
|
+
/* harmony import */ var _classNames__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./classNames */ "../../../dev/sharedUiComponents/dist/components/classNames.js");
|
49800
|
+
/* harmony import */ var _MessageDialog_modules_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./MessageDialog.modules.scss */ "../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss");
|
49801
|
+
|
49802
|
+
|
49803
|
+
|
49804
|
+
|
49805
|
+
const MessageDialog = (props) => {
|
49806
|
+
const [message, setMessage] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(props.message);
|
49807
|
+
const [isError, setIsError] = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(props.isError);
|
49808
|
+
(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(() => {
|
49809
|
+
setMessage(props.message);
|
49810
|
+
setIsError(props.isError);
|
49811
|
+
}, [props]);
|
49812
|
+
if (!message) {
|
49813
|
+
return null;
|
49814
|
+
}
|
49815
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { 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", { 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", { 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", { 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", { 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" }) })] }) }));
|
49816
|
+
};
|
49817
|
+
|
49818
|
+
|
49819
|
+
/***/ }),
|
49820
|
+
|
49821
|
+
/***/ "../../../dev/sharedUiComponents/dist/components/classNames.js":
|
49822
|
+
/*!*********************************************************************!*\
|
49823
|
+
!*** ../../../dev/sharedUiComponents/dist/components/classNames.js ***!
|
49824
|
+
\*********************************************************************/
|
49825
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
49826
|
+
|
49827
|
+
"use strict";
|
49828
|
+
__webpack_require__.r(__webpack_exports__);
|
49829
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
49830
|
+
/* harmony export */ "ClassNames": () => (/* binding */ ClassNames)
|
49831
|
+
/* harmony export */ });
|
49832
|
+
function ClassNames(names, styleObject) {
|
49833
|
+
let string = "";
|
49834
|
+
for (const name in names) {
|
49835
|
+
if (names[name]) {
|
49836
|
+
string += styleObject[name] + " ";
|
49837
|
+
}
|
49838
|
+
}
|
49839
|
+
return string;
|
49840
|
+
}
|
49841
|
+
|
49842
|
+
|
49749
49843
|
/***/ }),
|
49750
49844
|
|
49751
49845
|
/***/ "../../../dev/sharedUiComponents/dist/lines/checkBoxLineComponent.js":
|
@@ -49803,7 +49897,7 @@ class CheckBoxLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
49803
49897
|
};
|
49804
49898
|
}
|
49805
49899
|
if (this.props.disabled) {
|
49806
|
-
this.state =
|
49900
|
+
this.state = { ...this.state, isDisabled: this.props.disabled };
|
49807
49901
|
}
|
49808
49902
|
}
|
49809
49903
|
shouldComponentUpdate(nextProps, nextState) {
|
@@ -49853,7 +49947,7 @@ class CheckBoxLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
49853
49947
|
render() {
|
49854
49948
|
const icons = this.props.large ? Icons.size40 : Icons.size30;
|
49855
49949
|
const icon = this.state.isConflict ? icons.mixed : this.state.isSelected ? icons.on : icons.off;
|
49856
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
49950
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "checkBoxLine", 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", { className: "label", title: this.props.iconLabel, children: this.props.label })), this.props.faIcons && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__.FontAwesomeIcon, { className: `cbx ${this.props.disabled ? "disabled" : ""}`, icon: this.state.isSelected ? this.props.faIcons.enabled : this.props.faIcons.disabled, onClick: () => !this.props.disabled && this.onChange() })), !this.props.faIcons && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "checkBox", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("label", { className: `container lbl${this.props.disabled ? " disabled" : ""} ${this.state.isSelected ? "checked" : ""}`, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "checkbox", className: `cbx hidden ${this.state.isConflict ? "conflict" : ""}`, checked: this.state.isSelected, onChange: () => this.onChange(), disabled: !!this.props.disabled }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "icon", src: icon, alt: this.props.label })] }) }))] }));
|
49857
49951
|
}
|
49858
49952
|
}
|
49859
49953
|
|
@@ -50020,9 +50114,9 @@ class ColorLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
50020
50114
|
}
|
50021
50115
|
render() {
|
50022
50116
|
const chevron = this.state.isExpanded ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__.faMinus }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_4__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_5__.faPlus });
|
50023
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
50117
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color3Line", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "firstLine", 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" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color3", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__.ColorPickerLineComponent, { lockObject: this.props.lockObject, linearHint: this.props.isLinear, value: this.props.disableAlpha ? this._toColor3(this.state.color) : this.state.color, onColorChanged: (colorString) => {
|
50024
50118
|
this.setColorFromString(colorString);
|
50025
|
-
} }) })
|
50119
|
+
} }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "copy hoverIcon", onClick: () => this.copyToClipboard(), title: "Copy to clipboard", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _copy_svg__WEBPACK_IMPORTED_MODULE_8__, alt: "Copy" }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "expand hoverIcon", onClick: () => this.switchExpandState(), title: "Expand", children: chevron })] }), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "secondLine", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "r", value: this.state.color.r, onChange: (value) => this.updateStateR(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "g", value: this.state.color.g, onChange: (value) => this.updateStateG(value) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "b", value: this.state.color.b, onChange: (value) => this.updateStateB(value) }), this.props.disableAlpha || ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_numericInputComponent__WEBPACK_IMPORTED_MODULE_3__.NumericInputComponent, { lockObject: this.props.lockObject, label: "a", value: this.state.color.a, onChange: (value) => this.updateStateA(value) }))] }))] }));
|
50026
50120
|
}
|
50027
50121
|
}
|
50028
50122
|
|
@@ -50090,17 +50184,16 @@ class ColorPickerLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
|
|
50090
50184
|
this.syncPositions();
|
50091
50185
|
}
|
50092
50186
|
render() {
|
50093
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
50094
|
-
|
50095
|
-
if (evt.target !== ((_b = (_a = this._floatRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.querySelector(".color-picker-cover"))) {
|
50187
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "color-picker", 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" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-rect-background", ref: this._floatHostRef, onClick: () => this.setState({ pickerEnabled: true }), children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-rect", style: { background: this.state.hex } }) }), this.state.pickerEnabled && ((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__.jsx)("div", { className: "color-picker-cover", onClick: (evt) => {
|
50188
|
+
if (evt.target !== this._floatRef.current?.ownerDocument?.querySelector(".color-picker-cover")) {
|
50096
50189
|
return;
|
50097
50190
|
}
|
50098
50191
|
this.setState({ pickerEnabled: false });
|
50099
|
-
}
|
50192
|
+
}, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "color-picker-float", ref: this._floatRef, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_colorPicker_colorPicker__WEBPACK_IMPORTED_MODULE_2__.ColorPicker, { lockObject: this.props.lockObject || {}, color: this.state.color, linearhint: this.props.linearHint, onColorChanged: (color) => {
|
50100
50193
|
const hex = color.toHexString();
|
50101
50194
|
this.setState({ hex, color });
|
50102
50195
|
this.props.onColorChanged(hex);
|
50103
|
-
} }) })
|
50196
|
+
} }) }) }) }))] }));
|
50104
50197
|
}
|
50105
50198
|
}
|
50106
50199
|
|
@@ -50136,7 +50229,7 @@ class FileButtonLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compone
|
|
50136
50229
|
evt.target.value = "";
|
50137
50230
|
}
|
50138
50231
|
render() {
|
50139
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
50232
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "buttonLine", 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" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label", { htmlFor: "file-upload" + this._id, className: "file-upload", children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { ref: this._uploadInputRef, id: "file-upload" + this._id, type: "file", accept: this.props.accept, onChange: (evt) => this.onChange(evt) })] }));
|
50140
50233
|
}
|
50141
50234
|
}
|
50142
50235
|
FileButtonLineComponent._IDGenerator = 0;
|
@@ -50319,7 +50412,7 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
50319
50412
|
}
|
50320
50413
|
const value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__.conflictingValuesPlaceholder ? "" : this.state.value;
|
50321
50414
|
const placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_4__.conflictingValuesPlaceholder ? _targetsProxy__WEBPACK_IMPORTED_MODULE_4__.conflictingValuesPlaceholder : "";
|
50322
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [!this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
50415
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [!this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: this.props.additionalClass ? this.props.additionalClass + " floatLine" : "floatLine", 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.icon || this.props.label != "") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: className, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step || this.props.isInteger ? "1" : "0.01", className: "numeric-input", onKeyDown: (evt) => this.onKeyDown(evt), value: value, onBlur: () => {
|
50323
50416
|
this.unlock();
|
50324
50417
|
if (this.props.onEnter) {
|
50325
50418
|
this.props.onEnter(this._store);
|
@@ -50334,7 +50427,7 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
50334
50427
|
this.props.onDragStop(valueAsNumber);
|
50335
50428
|
}
|
50336
50429
|
this.setState({ dragging: newDragging });
|
50337
|
-
} }))] })
|
50430
|
+
} }))] }), this.props.unit] })), this.props.useEuler && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderLineComponent__WEBPACK_IMPORTED_MODULE_2__.SliderLineComponent, { lockObject: this.props.lockObject, label: this.props.label, minimum: 0, maximum: 360, step: 0.1, directValue: core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToDegrees(valueAsNumber), onChange: (value) => this.updateValue(core_Misc_tools__WEBPACK_IMPORTED_MODULE_3__.Tools.ToRadians(value).toString()) }))] }));
|
50338
50431
|
}
|
50339
50432
|
}
|
50340
50433
|
|
@@ -50392,29 +50485,26 @@ class InputArrowsComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
50392
50485
|
this.props.incrementValue(-event.movementY);
|
50393
50486
|
};
|
50394
50487
|
this._releaseListener = () => {
|
50395
|
-
var _a, _b, _c, _d;
|
50396
50488
|
this.props.setDragging(false);
|
50397
|
-
|
50398
|
-
|
50399
|
-
|
50400
|
-
|
50489
|
+
this._arrowsRef.current?.ownerDocument.exitPointerLock();
|
50490
|
+
this._arrowsRef.current?.ownerDocument.defaultView.removeEventListener("pointerup", this._releaseListener);
|
50491
|
+
this._arrowsRef.current?.ownerDocument.removeEventListener("pointerlockchange", this._lockChangeListener);
|
50492
|
+
this._arrowsRef.current?.ownerDocument.defaultView.removeEventListener("mousemove", this._drag);
|
50401
50493
|
};
|
50402
50494
|
this._lockChangeListener = () => {
|
50403
|
-
|
50404
|
-
if (((_a = this._arrowsRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument.pointerLockElement) !== this._arrowsRef.current) {
|
50495
|
+
if (this._arrowsRef.current?.ownerDocument.pointerLockElement !== this._arrowsRef.current) {
|
50405
50496
|
this._releaseListener();
|
50406
50497
|
}
|
50407
50498
|
};
|
50408
50499
|
}
|
50409
50500
|
render() {
|
50410
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
50411
|
-
|
50412
|
-
|
50413
|
-
|
50414
|
-
(_c = this._arrowsRef.current) === null || _c === void 0 ? void 0 : _c.ownerDocument.defaultView.addEventListener("mousemove", this._drag);
|
50501
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "arrows", ref: this._arrowsRef, onPointerDown: () => {
|
50502
|
+
this._arrowsRef.current?.ownerDocument.addEventListener("pointerlockchange", this._lockChangeListener);
|
50503
|
+
this._arrowsRef.current?.ownerDocument.defaultView.addEventListener("pointerup", this._releaseListener);
|
50504
|
+
this._arrowsRef.current?.ownerDocument.defaultView.addEventListener("mousemove", this._drag);
|
50415
50505
|
this.props.setDragging(true);
|
50416
|
-
|
50417
|
-
}, onDragStart: (evt) => evt.preventDefault()
|
50506
|
+
this._arrowsRef.current?.requestPointerLock();
|
50507
|
+
}, onDragStart: (evt) => evt.preventDefault(), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "upArrowIcon", src: _valueUpArrowIcon_svg__WEBPACK_IMPORTED_MODULE_2__, alt: "Increase Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { className: "downArrowIcon", src: _valueDownArrowIcon_svg__WEBPACK_IMPORTED_MODULE_3__, alt: "Increase Value" })] }));
|
50418
50508
|
}
|
50419
50509
|
}
|
50420
50510
|
|
@@ -50508,11 +50598,11 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
50508
50598
|
}
|
50509
50599
|
}
|
50510
50600
|
render() {
|
50511
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
50601
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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", { 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: () => {
|
50512
50602
|
if (this.props.lockObject) {
|
50513
50603
|
this.props.lockObject.lock = true;
|
50514
50604
|
}
|
50515
|
-
}, onBlur: () => this.onBlur() })] }))
|
50605
|
+
}, onBlur: () => this.onBlur() })] }));
|
50516
50606
|
}
|
50517
50607
|
}
|
50518
50608
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
@@ -50601,10 +50691,9 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
50601
50691
|
this.raiseOnPropertyChanged(newValue, store);
|
50602
50692
|
}
|
50603
50693
|
render() {
|
50604
|
-
|
50605
|
-
|
50606
|
-
|
50607
|
-
}) })) }))] })));
|
50694
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "listLine" + (this.props.className ? " " + this.props.className : ""), 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, color: "black", className: "icon" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "options", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value ?? "", children: this.props.options.map((option, i) => {
|
50695
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("option", { selected: option.selected, value: option.value, title: option.label, children: option.label }, option.label + i));
|
50696
|
+
}) }) })] }));
|
50608
50697
|
}
|
50609
50698
|
}
|
50610
50699
|
|
@@ -50789,13 +50878,13 @@ class SliderLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
50789
50878
|
return value;
|
50790
50879
|
}
|
50791
50880
|
render() {
|
50792
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
50881
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "sliderLine", 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.icon || this.props.label != "") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: this.props.margin ? "label withMargins" : "label", title: this.props.label, children: this.props.label })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, isInteger: this.props.decimalCount === 0, smallUI: true, label: "", target: this.state, digits: this.props.decimalCount === undefined ? 4 : this.props.decimalCount, propertyName: "value", min: this.props.minimum, max: this.props.maximum, onEnter: () => {
|
50793
50882
|
const changed = this.prepareDataToRead(this.state.value);
|
50794
50883
|
this.onChange(changed);
|
50795
50884
|
}, onChange: () => {
|
50796
50885
|
const changed = this.prepareDataToRead(this.state.value);
|
50797
50886
|
this.onChange(changed);
|
50798
|
-
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: this.props.unit }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
50887
|
+
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: this.props.unit }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "slider", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { className: "range", type: "range", step: this.props.step, min: this.prepareDataToRead(this.props.minimum), max: this.prepareDataToRead(this.props.maximum), value: this.prepareDataToRead(this.state.value), onInput: (evt) => this.onInput(evt.target.value), onChange: (evt) => this.onChange(evt.target.value) }) })] }));
|
50799
50888
|
}
|
50800
50889
|
}
|
50801
50890
|
|
@@ -51003,7 +51092,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
51003
51092
|
const value = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder ? "" : this.state.value;
|
51004
51093
|
const placeholder = this.state.value === _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder ? _targetsProxy__WEBPACK_IMPORTED_MODULE_2__.conflictingValuesPlaceholder : this.props.placeholder || "";
|
51005
51094
|
const step = this.props.step || (this.props.roundValues ? 1 : 0.01);
|
51006
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
51095
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: this.props.multilines ? "textInputArea" : this.props.unit !== undefined ? "textInputLine withUnits" : "textInputLine", 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, color: "black", className: "icon" }), this.props.label !== undefined && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.label, children: this.props.label })), this.props.multilines && ((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__.jsx)("textarea", { value: this.state.value, onFocus: () => {
|
51007
51096
|
if (this.props.lockObject) {
|
51008
51097
|
this.props.lockObject.lock = true;
|
51009
51098
|
}
|
@@ -51017,7 +51106,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
51017
51106
|
if (this.props.lockObject) {
|
51018
51107
|
this.props.lockObject.lock = false;
|
51019
51108
|
}
|
51020
|
-
} }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
51109
|
+
} }) })), !this.props.multilines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: `value${this.props.noUnderline === true ? " noUnderline" : ""}${this.props.arrows ? " hasArrows" : ""}${this.state.dragging ? " dragging" : ""}`, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { value: value, onBlur: (evt) => {
|
51021
51110
|
if (this.props.lockObject) {
|
51022
51111
|
this.props.lockObject.lock = false;
|
51023
51112
|
}
|
@@ -51026,7 +51115,7 @@ class TextInputLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
51026
51115
|
if (this.props.lockObject) {
|
51027
51116
|
this.props.lockObject.lock = true;
|
51028
51117
|
}
|
51029
|
-
}, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), placeholder: placeholder, type: this.props.numeric ? "number" : "text", step: step }), this.props.arrows && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__.InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) }))] }))
|
51118
|
+
}, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), placeholder: placeholder, type: this.props.numeric ? "number" : "text", step: step }), this.props.arrows && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_inputArrowsComponent__WEBPACK_IMPORTED_MODULE_3__.InputArrowsComponent, { incrementValue: (amount) => this.incrementValue(amount), setDragging: (dragging) => this.setState({ dragging }) }))] })), this.props.unit] }));
|
51030
51119
|
}
|
51031
51120
|
}
|
51032
51121
|
|
@@ -51067,13 +51156,12 @@ class TextLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
51067
51156
|
return null;
|
51068
51157
|
}
|
51069
51158
|
if (this.props.onLink || this.props.url) {
|
51070
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
51159
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "link-value", title: this.props.value, onClick: () => this.onLink(), children: this.props.url ? "doc" : this.props.value || "no name" }));
|
51071
51160
|
}
|
51072
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
51161
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "value", title: this.props.value, style: { color: this.props.color ? this.props.color : "" }, children: this.props.value || "no name" }));
|
51073
51162
|
}
|
51074
51163
|
render() {
|
51075
|
-
|
51076
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : "") }, { 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" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "label", title: (_b = (_a = this.props.tooltip) !== null && _a !== void 0 ? _a : this.props.label) !== null && _b !== void 0 ? _b : "" }, { children: (_c = this.props.label) !== null && _c !== void 0 ? _c : "" })), this.renderContent()] })));
|
51164
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: this.props.underline ? "textLine underline" : "textLine" + (this.props.additionalClass ? " " + this.props.additionalClass : ""), 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" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "label", title: this.props.tooltip ?? this.props.label ?? "", children: this.props.label ?? "" }), this.renderContent()] }));
|
51077
51165
|
}
|
51078
51166
|
}
|
51079
51167
|
|
@@ -51094,10 +51182,10 @@ __webpack_require__.r(__webpack_exports__);
|
|
51094
51182
|
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
|
51095
51183
|
|
51096
51184
|
function UnitButton(props) {
|
51097
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button",
|
51185
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", { className: "unit", onClick: () => {
|
51098
51186
|
if (props.onClick && !props.locked)
|
51099
51187
|
props.onClick(props.unit || "");
|
51100
|
-
}, disabled: props.locked
|
51188
|
+
}, disabled: props.locked, children: props.unit }));
|
51101
51189
|
}
|
51102
51190
|
|
51103
51191
|
|
@@ -51344,19 +51432,23 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
51344
51432
|
props.globalState.onSelectionChangedObservable.add(() => {
|
51345
51433
|
this.forceUpdate();
|
51346
51434
|
});
|
51435
|
+
props.globalState.onWindowResizeObservable.add(() => {
|
51436
|
+
this.forceUpdate();
|
51437
|
+
});
|
51347
51438
|
}
|
51348
51439
|
render() {
|
51349
|
-
const isPasteDisabled = this.props.globalState.workbench
|
51350
|
-
const size = this.props.globalState.workbench ?
|
51440
|
+
const isPasteDisabled = this.props.globalState.workbench ? this.props.globalState.workbench.pasteDisabled : true;
|
51441
|
+
const size = this.props.globalState.workbench ? { ...this.props.globalState.workbench.guiSize } : { width: 0, height: 0 };
|
51351
51442
|
const copyyIcon = this.props.globalState.selectedControls.length === 0 ? _imgs_buttonbar_copyIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_22__ : _imgs_buttonbar_copyIcon_svg__WEBPACK_IMPORTED_MODULE_19__;
|
51352
51443
|
const deleteeIcon = this.props.globalState.selectedControls.length === 0 ? _imgs_buttonBar_deleteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_24__ : _imgs_buttonBar_deleteIcon_svg__WEBPACK_IMPORTED_MODULE_21__;
|
51353
51444
|
const pasteeIcon = isPasteDisabled ? _imgs_buttonbar_pasteIcon_disabled_svg__WEBPACK_IMPORTED_MODULE_23__ : _imgs_buttonbar_pasteIcon_svg__WEBPACK_IMPORTED_MODULE_20__;
|
51445
|
+
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);
|
51354
51446
|
this._sizeOption = _sizeValues.findIndex((value) => value.width == size.width && value.height == size.height);
|
51355
51447
|
if (this._sizeOption < 0) {
|
51356
51448
|
this.props.globalState.onResponsiveChangeObservable.notifyObservers(false);
|
51357
51449
|
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", false);
|
51358
51450
|
}
|
51359
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
51451
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-commands", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "commands-left", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_babylonLogo_svg__WEBPACK_IMPORTED_MODULE_16__, color: "white", className: "active", draggable: false }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandDropdownComponent__WEBPACK_IMPORTED_MODULE_8__.CommandDropdownComponent, { globalState: this.props.globalState, toRight: true, icon: _imgs_hamburgerIcon_svg__WEBPACK_IMPORTED_MODULE_11__, tooltip: "Options", items: [
|
51360
51452
|
{
|
51361
51453
|
label: "Save",
|
51362
51454
|
onClick: () => {
|
@@ -51397,58 +51489,66 @@ class CommandBarComponent extends react__WEBPACK_IMPORTED_MODULE_2__.Component {
|
|
51397
51489
|
this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.PAN;
|
51398
51490
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Zoom", shortcut: "Z", icon: _imgs_zoomIcon_svg__WEBPACK_IMPORTED_MODULE_14__, isActive: this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM, onClick: () => {
|
51399
51491
|
this.props.globalState.tool = _globalState__WEBPACK_IMPORTED_MODULE_3__.GUIEditorTool.ZOOM;
|
51400
|
-
} })] })
|
51492
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Copy Selcted", shortcut: "Ctrl + C", icon: copyyIcon, isActive: false, copyDeleteDisabled: this.props.globalState.selectedControls.length === 0, onClick: () => {
|
51401
51493
|
this.props.globalState.onCopyObservable.notifyObservers((content) => this.props.globalState.hostWindow.navigator.clipboard.writeText(content));
|
51402
51494
|
this.forceUpdate();
|
51403
51495
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Paste", shortcut: "Ctrl + V", icon: pasteeIcon, isActive: false, pasteDisabled: isPasteDisabled, onClick: async () => {
|
51404
51496
|
this.props.globalState.onPasteObservable.notifyObservers(await this.props.globalState.hostWindow.navigator.clipboard.readText());
|
51405
51497
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Delete", shortcut: "Delete", icon: deleteeIcon, isActive: false, copyDeleteDisabled: this.props.globalState.selectedControls.length === 0, onClick: () => {
|
51406
51498
|
this.props.globalState.selectedControls.forEach((guiNode) => {
|
51407
|
-
var _a;
|
51408
51499
|
if (guiNode != this.props.globalState.guiTexture.getChildren()[0]) {
|
51409
51500
|
this.props.globalState.guiTexture.removeControl(guiNode);
|
51410
|
-
|
51501
|
+
this.props.globalState.liveGuiTexture?.removeControl(guiNode);
|
51411
51502
|
guiNode.dispose();
|
51412
51503
|
}
|
51413
51504
|
});
|
51414
51505
|
this.props.globalState.setSelection([]);
|
51415
|
-
} })] })
|
51506
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Fit to Window", shortcut: "F", icon: _imgs_canvasFitIcon_svg__WEBPACK_IMPORTED_MODULE_17__, isActive: false, onClick: () => {
|
51416
51507
|
this.props.globalState.onFitControlsToWindowObservable.notifyObservers();
|
51417
|
-
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_7__.CommandButtonComponent, { tooltip: "Toggle Guides", shortcut: "G", icon: _imgs_guidesIcon_svg__WEBPACK_IMPORTED_MODULE_15__, isActive: this.props.globalState.outlines, onClick: () => (this.props.globalState.outlines = !this.props.globalState.outlines) })] })
|
51508
|
+
} }), (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", { 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", { 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) => {
|
51418
51509
|
this.props.globalState.onResponsiveChangeObservable.notifyObservers(value);
|
51419
51510
|
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("Responsive", value);
|
51511
|
+
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteBoolean("responsiveUI", value);
|
51420
51512
|
this._sizeOption = _sizeOptions.length;
|
51421
51513
|
if (value) {
|
51422
51514
|
this._sizeOption = 0;
|
51423
51515
|
this.props.globalState.workbench.guiSize = _sizeValues[this._sizeOption];
|
51516
|
+
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
|
51517
|
+
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.height);
|
51424
51518
|
}
|
51425
51519
|
this.forceUpdate();
|
51426
|
-
}, large: true }),
|
51520
|
+
}, 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) => {
|
51427
51521
|
this._sizeOption = value;
|
51428
51522
|
if (this._sizeOption !== _sizeOptions.length) {
|
51429
51523
|
const newSize = _sizeValues[this._sizeOption];
|
51430
51524
|
this.props.globalState.workbench.guiSize = newSize;
|
51525
|
+
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
|
51526
|
+
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.height);
|
51431
51527
|
}
|
51432
51528
|
this.forceUpdate();
|
51433
|
-
} })), !
|
51529
|
+
} })), !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) => {
|
51434
51530
|
if (!this._stopUpdating) {
|
51435
51531
|
this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
|
51532
|
+
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
|
51436
51533
|
}
|
51437
51534
|
}, onDragStart: () => {
|
51438
51535
|
this._stopUpdating = true;
|
51439
51536
|
}, onDragStop: (newValue) => {
|
51440
51537
|
this._stopUpdating = false;
|
51441
51538
|
this.props.globalState.workbench.guiSize = { width: newValue, height: size.height };
|
51539
|
+
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("width", this.props.globalState.workbench.guiSize.width);
|
51442
51540
|
}, 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) => {
|
51443
51541
|
if (!this._stopUpdating) {
|
51444
51542
|
this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
|
51543
|
+
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.width);
|
51445
51544
|
}
|
51446
51545
|
}, onDragStart: () => {
|
51447
51546
|
this._stopUpdating = true;
|
51448
51547
|
}, onDragStop: (newValue) => {
|
51449
51548
|
this._stopUpdating = false;
|
51450
51549
|
this.props.globalState.workbench.guiSize = { width: size.width, height: newValue };
|
51451
|
-
|
51550
|
+
core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_1__.DataStorage.WriteNumber("height", this.props.globalState.workbench.guiSize.width);
|
51551
|
+
}, arrows: true, isInteger: true })] }))] })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { 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 }) })] }));
|
51452
51552
|
}
|
51453
51553
|
}
|
51454
51554
|
|
@@ -51490,7 +51590,7 @@ class CommandButtonComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
51490
51590
|
else if (this.props.pasteDisabled) {
|
51491
51591
|
divClassName += " pasteDisabled";
|
51492
51592
|
}
|
51493
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
51593
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: divClassName, onClick: this.props.onClick, title: `${this.props.tooltip} ${this.props.shortcut ? " (" + this.props.shortcut + ")" : ""}`, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: iconClassName, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: this.props.isActive ? "active" : "", draggable: false }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-label", children: this.props.tooltip }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-label", children: this.props.tooltip })] }));
|
51494
51594
|
}
|
51495
51595
|
}
|
51496
51596
|
|
@@ -51522,7 +51622,7 @@ class CommandDropdownComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
|
|
51522
51622
|
render() {
|
51523
51623
|
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-blocker", onClick: () => {
|
51524
51624
|
this.setState({ isExpanded: false });
|
51525
|
-
} })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
51625
|
+
} })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "command-dropdown-root", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "command-dropdown" + (this.state.isExpanded ? " activated" : ""), title: this.props.tooltip, onClick: () => {
|
51526
51626
|
this.setState({ isExpanded: false });
|
51527
51627
|
const newState = !this.state.isExpanded;
|
51528
51628
|
const pgHost = document.getElementById("embed-host");
|
@@ -51530,9 +51630,9 @@ class CommandDropdownComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
|
|
51530
51630
|
pgHost.style.zIndex = newState ? "0" : "10";
|
51531
51631
|
}
|
51532
51632
|
this.setState({ isExpanded: newState });
|
51533
|
-
}
|
51633
|
+
}, children: [this.props.icon && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-icon", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon }) })), !this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-active" })] }), this.state.isExpanded && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-content sub1" + (this.props.toRight ? " toRight" : ""), children: this.props.items.map((m) => {
|
51534
51634
|
if (!m.fileButton) {
|
51535
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
51635
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "command-dropdown-label" + (m.isActive ? " active" : ""), onClick: () => {
|
51536
51636
|
if (!m.onClick) {
|
51537
51637
|
this.forceUpdate();
|
51538
51638
|
return;
|
@@ -51541,20 +51641,20 @@ class CommandDropdownComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compon
|
|
51541
51641
|
m.onClick();
|
51542
51642
|
this.setState({ isExpanded: false, activeState: m.label });
|
51543
51643
|
}
|
51544
|
-
}, title: m.label
|
51644
|
+
}, title: m.label, children: [!m.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-label-text", children: (m.isActive ? "> " : "") + m.label }), m.icon && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-icon", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: m.icon }) })), m.onCheck && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "checkBox", className: "command-dropdown-label-check", onChange: (evt) => {
|
51545
51645
|
this.forceUpdate();
|
51546
51646
|
m.onCheck(evt.target.checked);
|
51547
|
-
}, checked: false })), m.subItems && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
51548
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
51647
|
+
}, checked: false })), m.subItems && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "command-dropdown-arrow", children: ">" }), m.subItems && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "sub-items ", children: m.subItems.map((s) => {
|
51648
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "sub-item", onClick: () => {
|
51549
51649
|
m.onClick();
|
51550
51650
|
this.setState({ isExpanded: false });
|
51551
|
-
}
|
51552
|
-
}) }))
|
51651
|
+
}, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "sub-item-label", children: s }) }, s));
|
51652
|
+
}) }))] }, m.label));
|
51553
51653
|
}
|
51554
51654
|
else {
|
51555
51655
|
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_fileButtonLineComponent__WEBPACK_IMPORTED_MODULE_2__.FileButtonLineComponent, { label: "Load", onClick: (file) => this.props.globalState.onLoadObservable.notifyObservers(file), accept: ".json" }, m.label));
|
51556
51656
|
}
|
51557
|
-
}) }))
|
51657
|
+
}) }))] })] }));
|
51558
51658
|
}
|
51559
51659
|
}
|
51560
51660
|
|
@@ -51611,9 +51711,9 @@ class LogComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
51611
51711
|
const h = today.getHours();
|
51612
51712
|
const m = today.getMinutes();
|
51613
51713
|
const s = today.getSeconds();
|
51614
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
51615
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
51616
|
-
}) }))
|
51714
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "log-console", ref: "log-console", children: this.state.logs.map((l, i) => {
|
51715
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "log" + (l.isError ? " error" : ""), children: h + ":" + m + ":" + s + ": " + l.message }, i));
|
51716
|
+
}) }));
|
51617
51717
|
}
|
51618
51718
|
}
|
51619
51719
|
|
@@ -51666,11 +51766,11 @@ class ParentingPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
51666
51766
|
}
|
51667
51767
|
render() {
|
51668
51768
|
this.getCellInfo();
|
51669
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
51769
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "GRID PARENTING", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Row #", target: this, propertyName: "_rowNumber", isInteger: true, min: 0, onChange: () => {
|
51670
51770
|
this.updateGridPosition();
|
51671
51771
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Column #", target: this, propertyName: "_columnNumber", isInteger: true, min: 0, onChange: () => {
|
51672
51772
|
this.updateGridPosition();
|
51673
|
-
} })] })
|
51773
|
+
} })] })] }));
|
51674
51774
|
}
|
51675
51775
|
}
|
51676
51776
|
|
@@ -51723,11 +51823,11 @@ class ButtonPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
|
|
51723
51823
|
render() {
|
51724
51824
|
const { rectangles, lockObject, onPropertyChangedObservable, onAddComponent } = this.props;
|
51725
51825
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(rectangles, onPropertyChangedObservable);
|
51726
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
51826
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: rectangles, onPropertyChangedObservable: onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "BUTTON", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__.CommandButtonComponent, { tooltip: "Add TextBlock", icon: shared_ui_components_imgs_addTextButtonIcon_svg__WEBPACK_IMPORTED_MODULE_10__, shortcut: "", isActive: false, onClick: () => {
|
51727
51827
|
onAddComponent("Text");
|
51728
51828
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__.CommandButtonComponent, { tooltip: "Add Image", icon: shared_ui_components_imgs_addImageButtonIcon_svg__WEBPACK_IMPORTED_MODULE_11__, shortcut: "", isActive: false, onClick: () => {
|
51729
51829
|
onAddComponent("ButtonImage");
|
51730
|
-
} })] })
|
51830
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_9__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Stroke Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_5__.UnitButton, { unit: "PX", locked: true }), min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_9__.IconComponent, { icon: shared_ui_components_imgs_conerRadiusIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Corner Radius" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "cornerRadius", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_5__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_containerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__.ContainerPropertyGridComponent, { containers: rectangles, onPropertyChangedObservable: onPropertyChangedObservable })] }));
|
51731
51831
|
}
|
51732
51832
|
}
|
51733
51833
|
|
@@ -51775,7 +51875,7 @@ class CheckboxPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.C
|
|
51775
51875
|
}
|
51776
51876
|
render() {
|
51777
51877
|
const checkboxes = this.props.checkboxes;
|
51778
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
51878
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: checkboxes, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "CHECKBOX", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Check Size Ratio" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: " ", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(checkboxes, this.props.onPropertyChangedObservable), propertyName: "checkSizeRatio", min: 0, max: 1, arrows: true, step: "0.01", digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_checkboxIconDark_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Is Checkbox Checked" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: "CHECKED", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(checkboxes, this.props.onPropertyChangedObservable), propertyName: "isChecked", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Thickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(checkboxes, this.props.onPropertyChangedObservable), propertyName: "thickness", label: "", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] })] }));
|
51779
51879
|
}
|
51780
51880
|
}
|
51781
51881
|
|
@@ -51815,7 +51915,7 @@ class ColorPickerPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1_
|
|
51815
51915
|
}
|
51816
51916
|
render() {
|
51817
51917
|
const colorPickers = this.props.colorPickers;
|
51818
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
51918
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: colorPickers }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "COLOR PICKER", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_6__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_7__, label: "Color Picker Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_3__.ColorLineComponent, { label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_5__.makeTargetsProxy)(colorPickers, this.props.onPropertyChangedObservable), propertyName: "value", disableAlpha: true, lockObject: this.props.lockObject })] })] }));
|
51819
51919
|
}
|
51820
51920
|
}
|
51821
51921
|
|
@@ -51919,7 +52019,6 @@ __webpack_require__.r(__webpack_exports__);
|
|
51919
52019
|
|
51920
52020
|
class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
51921
52021
|
constructor(props) {
|
51922
|
-
var _a;
|
51923
52022
|
super(props);
|
51924
52023
|
const controls = this.props.controls;
|
51925
52024
|
for (const control of controls) {
|
@@ -51929,7 +52028,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
51929
52028
|
}
|
51930
52029
|
control.metadata._previousCenter = transformed;
|
51931
52030
|
}
|
51932
|
-
this._onPropertyChangedObserver =
|
52031
|
+
this._onPropertyChangedObserver = this.props.onPropertyChangedObservable?.add((event) => {
|
51933
52032
|
const isTransformEvent = event.property === "transformCenterX" || event.property === "transformCenterY";
|
51934
52033
|
for (const control of controls) {
|
51935
52034
|
let transformed = this._getTransformedReferenceCoordinate(control);
|
@@ -51966,7 +52065,6 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
51966
52065
|
this.forceUpdate();
|
51967
52066
|
}
|
51968
52067
|
_checkAndUpdateValues(propertyName, value) {
|
51969
|
-
var _a, _b, _c;
|
51970
52068
|
for (const control of this.props.controls) {
|
51971
52069
|
// checking the previous value unit to see what it was.
|
51972
52070
|
const vau = control["_" + propertyName];
|
@@ -51979,10 +52077,10 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
51979
52077
|
else if (value.charAt(value.length - 1) === "x" && value.charAt(value.length - 2) === "p") {
|
51980
52078
|
percentage = false;
|
51981
52079
|
}
|
51982
|
-
if (
|
52080
|
+
if (control.parent?.typeName === "StackPanel") {
|
51983
52081
|
percentage = false;
|
51984
52082
|
}
|
51985
|
-
let newValue =
|
52083
|
+
let newValue = value.match(/([\d.,]+)/g)?.[0];
|
51986
52084
|
if (!newValue) {
|
51987
52085
|
newValue = "0";
|
51988
52086
|
}
|
@@ -51990,7 +52088,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
51990
52088
|
newValue += percentage ? "%" : "px";
|
51991
52089
|
const initialValue = control[propertyName];
|
51992
52090
|
control[propertyName] = newValue;
|
51993
|
-
|
52091
|
+
this.props.onPropertyChangedObservable?.notifyObservers({
|
51994
52092
|
object: control,
|
51995
52093
|
property: propertyName,
|
51996
52094
|
initialValue: initialValue,
|
@@ -52007,9 +52105,8 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
52007
52105
|
}
|
52008
52106
|
}
|
52009
52107
|
componentWillUnmount() {
|
52010
|
-
var _a;
|
52011
52108
|
if (this._onPropertyChangedObserver) {
|
52012
|
-
|
52109
|
+
this.props.onPropertyChangedObservable?.remove(this._onPropertyChangedObserver);
|
52013
52110
|
}
|
52014
52111
|
}
|
52015
52112
|
render() {
|
@@ -52066,7 +52163,6 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
52066
52163
|
}
|
52067
52164
|
};
|
52068
52165
|
const increment = (propertyName, amount, minimum, maximum) => {
|
52069
|
-
var _a;
|
52070
52166
|
for (const control of controls) {
|
52071
52167
|
const initialValue = control[propertyName];
|
52072
52168
|
const initialUnit = control["_" + propertyName]._unit;
|
@@ -52079,7 +52175,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
52079
52175
|
if (initialUnit === gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.ValueAndUnit.UNITMODE_PERCENTAGE) {
|
52080
52176
|
_diagram_coordinateHelper__WEBPACK_IMPORTED_MODULE_10__.CoordinateHelper.ConvertToPercentage(control, [propertyName]);
|
52081
52177
|
}
|
52082
|
-
|
52178
|
+
this.props.onPropertyChangedObservable?.notifyObservers({
|
52083
52179
|
object: control,
|
52084
52180
|
property: propertyName,
|
52085
52181
|
initialValue: initialValue,
|
@@ -52104,7 +52200,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
52104
52200
|
];
|
52105
52201
|
let horizontalDisabled = false, verticalDisabled = false, widthUnitsLocked = false, heightUnitsLocked = false;
|
52106
52202
|
const parent = controls[0].parent;
|
52107
|
-
if (
|
52203
|
+
if (parent?.getClassName() === "StackPanel" || parent?.getClassName() === "VirtualKeyboard") {
|
52108
52204
|
if (parent.isVertical) {
|
52109
52205
|
verticalDisabled = true;
|
52110
52206
|
heightUnitsLocked = true;
|
@@ -52114,7 +52210,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
52114
52210
|
widthUnitsLocked = true;
|
52115
52211
|
}
|
52116
52212
|
}
|
52117
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [!this.props.hideDimensions && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
52213
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [!this.props.hideDimensions && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider alignment-bar", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__.CommandButtonComponent, { tooltip: "Left", icon: shared_ui_components_imgs_hAlignLeftIcon_svg__WEBPACK_IMPORTED_MODULE_16__, shortcut: "", isActive: horizontalAlignment === gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.HORIZONTAL_ALIGNMENT_LEFT, onClick: () => {
|
52118
52214
|
this._updateAlignment("horizontalAlignment", gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.HORIZONTAL_ALIGNMENT_LEFT);
|
52119
52215
|
}, disabled: horizontalDisabled }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__.CommandButtonComponent, { tooltip: "Center", icon: shared_ui_components_imgs_hAlignCenterIcon_svg__WEBPACK_IMPORTED_MODULE_17__, shortcut: "", isActive: horizontalAlignment === gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.HORIZONTAL_ALIGNMENT_CENTER, onClick: () => {
|
52120
52216
|
this._updateAlignment("horizontalAlignment", gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.HORIZONTAL_ALIGNMENT_CENTER);
|
@@ -52126,7 +52222,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
52126
52222
|
this._updateAlignment("verticalAlignment", gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.VERTICAL_ALIGNMENT_CENTER);
|
52127
52223
|
}, disabled: verticalDisabled }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_6__.CommandButtonComponent, { tooltip: "Bottom", icon: shared_ui_components_imgs_vAlignBottomIcon_svg__WEBPACK_IMPORTED_MODULE_21__, shortcut: "", isActive: verticalAlignment === gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.VERTICAL_ALIGNMENT_BOTTOM, onClick: () => {
|
52128
52224
|
this._updateAlignment("verticalAlignment", gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.VERTICAL_ALIGNMENT_BOTTOM);
|
52129
|
-
}, disabled: verticalDisabled })] })
|
52225
|
+
}, disabled: verticalDisabled })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_positionIcon_svg__WEBPACK_IMPORTED_MODULE_22__, label: "Position" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "X", delayInput: true, value: getValue("_left"), onChange: (newValue) => this._checkAndUpdateValues("left", newValue), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_left"), onClick: (unit) => convertUnits(unit, "left") }), arrows: true, arrowsIncrement: (amount) => increment("left", amount) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "Y", delayInput: true, value: getValue("_top"), onChange: (newValue) => this._checkAndUpdateValues("top", newValue), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_top"), onClick: (unit) => convertUnits(unit, "top") }), arrows: true, arrowsIncrement: (amount) => increment("top", amount) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_23__, label: "Size" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "W", delayInput: true, value: getValue("_width"), onChange: (newValue) => {
|
52130
52226
|
for (const control of controls) {
|
52131
52227
|
if (control.typeName === "Image") {
|
52132
52228
|
control.autoScale = false;
|
@@ -52156,19 +52252,19 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
52156
52252
|
}
|
52157
52253
|
}
|
52158
52254
|
this._checkAndUpdateValues("height", newValue);
|
52159
|
-
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_height"), locked: heightUnitsLocked, onClick: (unit) => convertUnits(unit, "height") }), arrows: true, arrowsIncrement: (amount) => increment("height", amount) })] })
|
52255
|
+
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_height"), locked: heightUnitsLocked, onClick: (unit) => convertUnits(unit, "height") }), arrows: true, arrowsIncrement: (amount) => increment("height", amount) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_verticalMarginIcon_svg__WEBPACK_IMPORTED_MODULE_24__, label: "Vertical Padding" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "T", delayInput: true, value: getValue("_paddingTop"), onChange: (newValue) => {
|
52160
52256
|
this._checkAndUpdateValues("paddingTop", newValue);
|
52161
52257
|
this._markChildrenAsDirty();
|
52162
52258
|
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingTop"), onClick: (unit) => convertUnits(unit, "paddingTop") }), arrows: true, arrowsIncrement: (amount) => increment("paddingTop", amount, 0) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "B", delayInput: true, value: getValue("_paddingBottom"), onChange: (newValue) => {
|
52163
52259
|
this._checkAndUpdateValues("paddingBottom", newValue);
|
52164
52260
|
this._markChildrenAsDirty();
|
52165
|
-
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingBottom"), onClick: (unit) => convertUnits(unit, "paddingBottom") }), arrows: true, arrowsIncrement: (amount) => increment("paddingBottom", amount, 0) })] })
|
52261
|
+
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingBottom"), onClick: (unit) => convertUnits(unit, "paddingBottom") }), arrows: true, arrowsIncrement: (amount) => increment("paddingBottom", amount, 0) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_horizontalMarginIcon_svg__WEBPACK_IMPORTED_MODULE_25__, label: "Horizontal Padding" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "L", delayInput: true, value: getValue("_paddingLeft"), onChange: (newValue) => {
|
52166
52262
|
this._checkAndUpdateValues("paddingLeft", newValue);
|
52167
52263
|
this._markChildrenAsDirty();
|
52168
52264
|
}, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingLeft"), onClick: (unit) => convertUnits(unit, "paddingLeft") }), arrows: true, arrowsIncrement: (amount) => increment("paddingLeft", amount) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { numbersOnly: true, lockObject: this.props.lockObject, label: "R", delayInput: true, value: getValue("_paddingRight"), onChange: (newValue) => {
|
52169
52265
|
this._checkAndUpdateValues("paddingRight", newValue);
|
52170
52266
|
this._markChildrenAsDirty();
|
52171
|
-
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingRight"), onClick: (unit) => convertUnits(unit, "paddingRight") }), arrows: true, arrowsIncrement: (amount) => increment("paddingRight", amount) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_descendantsOnlyPaddingIcon_svg__WEBPACK_IMPORTED_MODULE_26__, label: "Makes padding affect only the descendants of this control" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "ONLY PAD DESCENDANTS", target: proxy, propertyName: "descendentsOnlyPadding" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "TRANSFORMATION", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_scaleIcon_svg__WEBPACK_IMPORTED_MODULE_27__, label: "Scale" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "scaleX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "scaleY", arrows: true, digits: 2, step: "0.0005" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_pivotIcon_svg__WEBPACK_IMPORTED_MODULE_28__, label: "Transform Center" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "transformCenterX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "transformCenterY", arrows: true, digits: 2, step: "0.0005" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_rotationIcon_svg__WEBPACK_IMPORTED_MODULE_29__, label: "Rotation" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { iconLabel: "Rotation", lockObject: this.props.lockObject, label: "", target: proxy, decimalCount: 2, propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "RAD", locked: true }) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "APPEARANCE", value: " ", color: "grey" }), controls.every((control) => control.color !== undefined && control.typeName !== "Image" && control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_30__, label: "Outline Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Outline Color", target: proxy, propertyName: "color" })] }))), controls.every((control) => control.background !== undefined) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_31__, label: "Background Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Background Color", target: proxy, propertyName: "background" })] }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_alphaIcon_svg__WEBPACK_IMPORTED_MODULE_32__, label: "Alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01 })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowColorIcon_svg__WEBPACK_IMPORTED_MODULE_33__, label: "Shadow Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "shadowColor", disableAlpha: true })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowOffsetXIcon_svg__WEBPACK_IMPORTED_MODULE_34__, label: "Shadow Offset" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "shadowOffsetX", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "shadowOffsetY", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider double" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowBlurIcon_svg__WEBPACK_IMPORTED_MODULE_35__, label: "Shadow Blur" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "shadowBlur", arrows: true, min: 0, digits: 2 })] })), showTextProperties && ((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)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "FONT STYLE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontFamilyIcon_svg__WEBPACK_IMPORTED_MODULE_36__, label: "Font Family" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "fontFamily" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontWeightIcon_svg__WEBPACK_IMPORTED_MODULE_37__, label: "Font Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "fontWeight" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "ge-divider" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontStyleIcon_svg__WEBPACK_IMPORTED_MODULE_38__, label: "Font Style" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "", target: proxy, propertyName: "fontStyle", options: fontStyleOptions, onSelect: (newValue) => {
|
52267
|
+
}, onPropertyChangedObservable: this.props.onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_paddingRight"), onClick: (unit) => convertUnits(unit, "paddingRight") }), arrows: true, arrowsIncrement: (amount) => increment("paddingRight", amount) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_descendantsOnlyPaddingIcon_svg__WEBPACK_IMPORTED_MODULE_26__, label: "Makes padding affect only the descendants of this control" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_7__.CheckBoxLineComponent, { label: "ONLY PAD DESCENDANTS", target: proxy, propertyName: "descendentsOnlyPadding" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "TRANSFORMATION", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_scaleIcon_svg__WEBPACK_IMPORTED_MODULE_27__, label: "Scale" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "scaleX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "scaleY", arrows: true, digits: 2, step: "0.0005" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_pivotIcon_svg__WEBPACK_IMPORTED_MODULE_28__, label: "Transform Center" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "transformCenterX", arrows: true, digits: 2, step: "0.0005" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "transformCenterY", arrows: true, digits: 2, step: "0.0005" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_rotationIcon_svg__WEBPACK_IMPORTED_MODULE_29__, label: "Rotation" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { iconLabel: "Rotation", lockObject: this.props.lockObject, label: "", target: proxy, decimalCount: 2, propertyName: "rotation", minimum: 0, maximum: 2 * Math.PI, step: 0.01, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "RAD", locked: true }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "APPEARANCE", value: " ", color: "grey" }), controls.every((control) => control.color !== undefined && control.typeName !== "Image" && control.typeName !== "ImageBasedSlider" && control.typeName !== "ColorPicker") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_30__, label: "Outline Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Outline Color", target: proxy, propertyName: "color" })] })), controls.every((control) => control.background !== undefined) && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_31__, label: "Background Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "Background Color", target: proxy, propertyName: "background" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_alphaIcon_svg__WEBPACK_IMPORTED_MODULE_32__, label: "Alpha" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "alpha", minimum: 0, maximum: 1, step: 0.01 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowColorIcon_svg__WEBPACK_IMPORTED_MODULE_33__, label: "Shadow Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "shadowColor", disableAlpha: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowOffsetXIcon_svg__WEBPACK_IMPORTED_MODULE_34__, label: "Shadow Offset" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "X", target: proxy, propertyName: "shadowOffsetX", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: "Y", target: proxy, propertyName: "shadowOffsetY", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: "PX", locked: true }), arrows: true, step: "0.1", digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_shadowBlurIcon_svg__WEBPACK_IMPORTED_MODULE_35__, label: "Shadow Blur" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_14__.FloatLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "shadowBlur", arrows: true, min: 0, digits: 2 })] }), showTextProperties && ((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)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_2__.TextLineComponent, { tooltip: "", label: "FONT STYLE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontFamilyIcon_svg__WEBPACK_IMPORTED_MODULE_36__, label: "Font Family" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "fontFamily" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontWeightIcon_svg__WEBPACK_IMPORTED_MODULE_37__, label: "Font Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "fontWeight" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontStyleIcon_svg__WEBPACK_IMPORTED_MODULE_38__, label: "Font Style" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_13__.OptionsLineComponent, { label: "", target: proxy, propertyName: "fontStyle", options: fontStyleOptions, onSelect: (newValue) => {
|
52172
52268
|
proxy.fontStyle = ["", "italic", "oblique"][newValue];
|
52173
52269
|
}, extractValue: () => {
|
52174
52270
|
switch (proxy.fontStyle) {
|
@@ -52179,7 +52275,7 @@ class CommonControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
52179
52275
|
default:
|
52180
52276
|
return 0;
|
52181
52277
|
}
|
52182
|
-
} })] })
|
52278
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_12__.IconComponent, { icon: shared_ui_components_imgs_fontSizeIcon_svg__WEBPACK_IMPORTED_MODULE_39__, label: "Font Size" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", numbersOnly: true, value: getValue("_fontSize"), onChange: (newValue) => this._checkAndUpdateValues("fontSize", newValue), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_15__.UnitButton, { unit: getUnitString("_fontSize"), onClick: (unit) => convertUnits(unit, "fontSize") }), arrows: true, arrowsIncrement: (amount) => increment("fontSize", amount, 0) })] })] }))] }));
|
52183
52279
|
}
|
52184
52280
|
}
|
52185
52281
|
|
@@ -52219,7 +52315,7 @@ class ContainerPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
52219
52315
|
render() {
|
52220
52316
|
const { containers, onPropertyChangedObservable } = this.props;
|
52221
52317
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_3__.makeTargetsProxy)(containers, onPropertyChangedObservable);
|
52222
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
52318
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_4__.IconComponent, { icon: shared_ui_components_imgs_clipContentsIcon_svg__WEBPACK_IMPORTED_MODULE_5__, label: "Clips content outside the bounding box of this control" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "CLIP CONTENT", target: proxy, propertyName: "clipContent" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_4__.IconComponent, { icon: shared_ui_components_imgs_clipChildrenIcon_svg__WEBPACK_IMPORTED_MODULE_6__, label: "Clips child controls to this control's shape" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "CLIP CHILDREN", target: proxy, propertyName: "clipChildren" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_4__.IconComponent, { icon: shared_ui_components_imgs_autoStretchWidthIcon_svg__WEBPACK_IMPORTED_MODULE_7__, label: "Makes the container's width automatically adapt to its children" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "ADAPT WIDTH TO CHILDREN", target: proxy, propertyName: "adaptWidthToChildren" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_4__.IconComponent, { icon: shared_ui_components_imgs_autoStretchHeightIcon_svg__WEBPACK_IMPORTED_MODULE_8__, label: "Makes the container's height automatically adapt to its children" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_2__.CheckBoxLineComponent, { label: "ADAPT HEIGHT TO CHILDREN", target: proxy, propertyName: "adaptHeightToChildren" })] })] }));
|
52223
52319
|
}
|
52224
52320
|
}
|
52225
52321
|
|
@@ -52249,7 +52345,7 @@ class ControlPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
|
|
52249
52345
|
}
|
52250
52346
|
render() {
|
52251
52347
|
const controls = this.props.controls;
|
52252
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
52348
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "pane", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: controls, onPropertyChangedObservable: this.props.onPropertyChangedObservable }) }));
|
52253
52349
|
}
|
52254
52350
|
}
|
52255
52351
|
|
@@ -52306,7 +52402,7 @@ class DisplayGridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1_
|
|
52306
52402
|
render() {
|
52307
52403
|
const { displayGrids, lockObject, onPropertyChangedObservable } = this.props;
|
52308
52404
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(displayGrids, onPropertyChangedObservable);
|
52309
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
52405
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: displayGrids, onPropertyChangedObservable: onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { label: "DISPLAY GRID", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Cell Size" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "W", target: proxy, propertyName: "cellWidth", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "H", target: proxy, propertyName: "cellHeight", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_displayGridLine1Icon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Show Minor Lines" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "SHOW MINOR LINES", onValueChanged: () => this.forceUpdate(), target: proxy, propertyName: "_displayMinorLines" })] }), proxy._displayMinorLines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Minor Line Tickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "", target: proxy, propertyName: "minorLineTickness", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Minor Line Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "minorLineColor", onPropertyChangedObservable: onPropertyChangedObservable })] })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_displayGridLine2Icon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Show Major Lines" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_9__.CheckBoxLineComponent, { label: "SHOW MAJOR LINES", onValueChanged: () => this.forceUpdate(), target: proxy, propertyName: "_displayMajorLines" })] }), proxy._displayMajorLines && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Major Line Tickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "", target: proxy, propertyName: "majorLineTickness", onPropertyChangedObservable: onPropertyChangedObservable, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { locked: true, unit: "PX" }), arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Major Line Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "majorLineColor", onPropertyChangedObservable: onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_frequencyIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Major Line Frequency" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { min: 1, isInteger: true, lockObject: lockObject, label: "", target: proxy, propertyName: "majorLineFrequency", onPropertyChangedObservable: onPropertyChangedObservable, arrows: true })] })] }))] }));
|
52310
52406
|
}
|
52311
52407
|
}
|
52312
52408
|
|
@@ -52351,7 +52447,7 @@ class EllipsePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
|
|
52351
52447
|
render() {
|
52352
52448
|
const { ellipses, onPropertyChangedObservable, lockObject } = this.props;
|
52353
52449
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_5__.makeTargetsProxy)(ellipses, onPropertyChangedObservable);
|
52354
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
52450
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: ellipses, onPropertyChangedObservable: onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "ELLIPSE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Stroke Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_containerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_6__.ContainerPropertyGridComponent, { containers: ellipses, onPropertyChangedObservable: onPropertyChangedObservable })] }));
|
52355
52451
|
}
|
52356
52452
|
}
|
52357
52453
|
|
@@ -52414,14 +52510,14 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
52414
52510
|
}
|
52415
52511
|
renderRows() {
|
52416
52512
|
return this._rowDefinitions.map((rd, i) => {
|
52417
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
52513
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: this._removingRow && i === this._rowEditFlags.length - 1 ? "ge-grid-remove" : this._rowEditFlags[i] ? "ge-grid-edit" : "ge-grid", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-grid-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", icon: shared_ui_components_imgs_gridColumnIconDark_svg__WEBPACK_IMPORTED_MODULE_6__, iconLabel: `Row ${i}`, value: rd, numbersOnly: true, onChange: (newValue) => {
|
52418
52514
|
this._rowDefinitions[i] = newValue;
|
52419
52515
|
this._rowEditFlags[i] = true;
|
52420
52516
|
this._editedRow = true;
|
52421
52517
|
this._removingRow = false;
|
52422
52518
|
this._rowChild = false;
|
52423
52519
|
this.forceUpdate();
|
52424
|
-
} }, `rText${i}`), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: `[${i}]`, value: "", color: "grey" }), this._removingRow && i === this._rowEditFlags.length - 1 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_deleteGridElementDark_svg__WEBPACK_IMPORTED_MODULE_7__, label: " ", value: " ", color: "grey" })), this._rowEditFlags[i] && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_valueChangedGridDark_svg__WEBPACK_IMPORTED_MODULE_8__, label: " ", value: " ", color: "grey" })] })
|
52520
|
+
} }, `rText${i}`), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: `[${i}]`, value: "", color: "grey" }), this._removingRow && i === this._rowEditFlags.length - 1 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_deleteGridElementDark_svg__WEBPACK_IMPORTED_MODULE_7__, label: " ", value: " ", color: "grey" })), this._rowEditFlags[i] && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_valueChangedGridDark_svg__WEBPACK_IMPORTED_MODULE_8__, label: " ", value: " ", color: "grey" })] }) }, `r${i}`));
|
52425
52521
|
});
|
52426
52522
|
}
|
52427
52523
|
setRowValues() {
|
@@ -52452,14 +52548,14 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
52452
52548
|
}
|
52453
52549
|
renderColumns() {
|
52454
52550
|
return this._columnDefinitions.map((cd, i) => {
|
52455
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
52551
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: this._removingColumn && i === this._columnEditFlags.length - 1 ? "ge-grid-remove" : this._columnEditFlags[i] ? "ge-grid-edit" : "ge-grid", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-grid-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", icon: shared_ui_components_imgs_gridRowIconDark_svg__WEBPACK_IMPORTED_MODULE_9__, iconLabel: `Column ${i}`, value: cd, numbersOnly: true, onChange: (newValue) => {
|
52456
52552
|
this._columnDefinitions[i] = newValue;
|
52457
52553
|
this._columnEditFlags[i] = true;
|
52458
52554
|
this._editedColumn = true;
|
52459
52555
|
this._removingColumn = false;
|
52460
52556
|
this._columnChild = false;
|
52461
52557
|
this.forceUpdate();
|
52462
|
-
} }, `ctext${i}`), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: `[${i}]`, value: "", color: "grey" }), this._removingColumn && i === this._columnEditFlags.length - 1 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_deleteGridElementDark_svg__WEBPACK_IMPORTED_MODULE_7__, label: " ", value: " ", color: "grey" })), this._columnEditFlags[i] && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_valueChangedGridDark_svg__WEBPACK_IMPORTED_MODULE_8__, label: " ", value: " ", color: "grey" })] })
|
52558
|
+
} }, `ctext${i}`), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: `[${i}]`, value: "", color: "grey" }), this._removingColumn && i === this._columnEditFlags.length - 1 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_deleteGridElementDark_svg__WEBPACK_IMPORTED_MODULE_7__, label: " ", value: " ", color: "grey" })), this._columnEditFlags[i] && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { icon: shared_ui_components_imgs_valueChangedGridDark_svg__WEBPACK_IMPORTED_MODULE_8__, label: " ", value: " ", color: "grey" })] }) }, `c${i}`));
|
52463
52559
|
});
|
52464
52560
|
}
|
52465
52561
|
resizeRow() {
|
@@ -52581,8 +52677,7 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
52581
52677
|
this.setColumnValues();
|
52582
52678
|
}
|
52583
52679
|
checkValue(value, percent) {
|
52584
|
-
|
52585
|
-
let newValue = (_a = value.match(/([0-9.,]+)/g)) === null || _a === void 0 ? void 0 : _a[0];
|
52680
|
+
let newValue = value.match(/([0-9.,]+)/g)?.[0];
|
52586
52681
|
if (!newValue) {
|
52587
52682
|
newValue = "0";
|
52588
52683
|
}
|
@@ -52611,13 +52706,13 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
52611
52706
|
if (grid !== this._previousGrid) {
|
52612
52707
|
this.resetValues();
|
52613
52708
|
}
|
52614
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
52709
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: grids, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: "GRID", value: " ", color: "grey" }), this.renderRows(), this.props.grids.length === 1 && ((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)("div", { className: "ge-gridLine", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-grid-button-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Add Row", icon: shared_ui_components_imgs_addGridElementDark_svg__WEBPACK_IMPORTED_MODULE_10__, shortcut: "", isActive: false, onClick: () => {
|
52615
52710
|
let total = 0;
|
52616
52711
|
let count = 0;
|
52617
52712
|
for (let i = 0; i < grid.rowCount; ++i) {
|
52618
52713
|
const rd = grid.getRowDefinition(i);
|
52619
|
-
if (rd
|
52620
|
-
total += rd
|
52714
|
+
if (rd?.isPercentage) {
|
52715
|
+
total += rd?.getValue(grid.host);
|
52621
52716
|
count++;
|
52622
52717
|
}
|
52623
52718
|
}
|
@@ -52628,7 +52723,7 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
52628
52723
|
let hasChild = false;
|
52629
52724
|
for (let i = 0; i < grid.columnCount; ++i) {
|
52630
52725
|
const child = grid.cells[grid.rowCount - 1 + ":" + i];
|
52631
|
-
if (child
|
52726
|
+
if (child?.children.length) {
|
52632
52727
|
hasChild = true;
|
52633
52728
|
break;
|
52634
52729
|
//(grid.rowCount > 1 && !this._removingRow)
|
@@ -52653,17 +52748,18 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
52653
52748
|
this.forceUpdate();
|
52654
52749
|
this._removingRow = false;
|
52655
52750
|
this._rowChild = false;
|
52751
|
+
this.props.onUpdateRequiredObservable?.notifyObservers();
|
52656
52752
|
} }), (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: () => {
|
52657
52753
|
this._removingRow = false;
|
52658
52754
|
this._rowChild = false;
|
52659
52755
|
this.forceUpdate();
|
52660
|
-
} })] }))] })
|
52756
|
+
} })] }))] }) }), this._rowChild && ((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__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: "This row is not empty. Removing it will delete all contained controls. Do you want to remove this row and delete all controls within?", value: " ", color: "grey" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", { className: "ge" }), this.renderColumns(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-grid-button-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commandButtonComponent__WEBPACK_IMPORTED_MODULE_5__.CommandButtonComponent, { altStyle: true, tooltip: "Add Column", icon: shared_ui_components_imgs_addGridElementDark_svg__WEBPACK_IMPORTED_MODULE_10__, shortcut: "", isActive: false, onClick: () => {
|
52661
52757
|
let total = 0;
|
52662
52758
|
let count = 0;
|
52663
52759
|
for (let i = 0; i < grid.columnCount; ++i) {
|
52664
52760
|
const cd = grid.getColumnDefinition(i);
|
52665
|
-
if (cd
|
52666
|
-
total += cd
|
52761
|
+
if (cd?.isPercentage) {
|
52762
|
+
total += cd?.getValue(grid.host);
|
52667
52763
|
count++;
|
52668
52764
|
}
|
52669
52765
|
}
|
@@ -52674,7 +52770,7 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
52674
52770
|
let hasChild = false;
|
52675
52771
|
for (let i = 0; i < grid.rowCount; ++i) {
|
52676
52772
|
const child = grid.cells[i + ":" + (grid.columnCount - 1)];
|
52677
|
-
if (child
|
52773
|
+
if (child?.children.length) {
|
52678
52774
|
hasChild = true;
|
52679
52775
|
break;
|
52680
52776
|
}
|
@@ -52698,11 +52794,12 @@ class GridPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
52698
52794
|
this.forceUpdate();
|
52699
52795
|
this._removingColumn = false;
|
52700
52796
|
this._columnChild = false;
|
52797
|
+
this.props.onUpdateRequiredObservable?.notifyObservers();
|
52701
52798
|
} }), (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: () => {
|
52702
52799
|
this._removingColumn = false;
|
52703
52800
|
this._columnChild = false;
|
52704
52801
|
this.forceUpdate();
|
52705
|
-
} })] })), " "] })
|
52802
|
+
} })] })), " "] }), this._columnChild && ((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__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextLineComponent, { tooltip: "", label: "This column is not empty. Removing it will delete all contained controls. Do you want to remove this column and delete all controls within?", value: " ", color: "grey" }) }))] }))] }));
|
52706
52803
|
}
|
52707
52804
|
}
|
52708
52805
|
|
@@ -52748,7 +52845,7 @@ class ImageBasedSliderPropertyGridComponent extends react__WEBPACK_IMPORTED_MODU
|
|
52748
52845
|
}
|
52749
52846
|
render() {
|
52750
52847
|
const imageBasedSliders = this.props.imageBasedSliders;
|
52751
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
52848
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: imageBasedSliders, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "IMAGE LINKS", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_thumbImageLinkIcon_svg__WEBPACK_IMPORTED_MODULE_8__, label: "Thumb Image Link" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: this.props.lockObject, target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(imageBasedSliders.map((slider) => slider.thumbImage), this.props.onPropertyChangedObservable), label: "", propertyName: "source" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_valueBarImageLinkIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Value Bar Image Link" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: this.props.lockObject, target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(imageBasedSliders.map((slider) => slider.valueBarImage), this.props.onPropertyChangedObservable), label: "", propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_sliderBackgroundImageIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Background Image Link" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: this.props.lockObject, target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(imageBasedSliders.map((slider) => slider.backgroundImage), this.props.onPropertyChangedObservable), label: "", propertyName: "source", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_5__.SliderPropertyGridComponent, { sliders: imageBasedSliders, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
|
52752
52849
|
}
|
52753
52850
|
}
|
52754
52851
|
|
@@ -52880,25 +52977,25 @@ class ImagePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Comp
|
|
52880
52977
|
const maxCells = this.getMaxCells();
|
52881
52978
|
const maxCellWidth = Math.max(...images.map((image) => image.imageWidth));
|
52882
52979
|
const maxCellHeight = Math.max(...images.map((image) => image.imageHeight));
|
52883
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
52980
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: images, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_8__.TextLineComponent, { label: "IMAGE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_imageLinkIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Source" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "source" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_cropIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Crop" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "L", target: proxy, propertyName: "sourceLeft", numeric: true, arrows: true, min: 0, placeholder: "0", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "T", target: proxy, propertyName: "sourceTop", numeric: true, arrows: true, min: 0, placeholder: "0", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_cropIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Crop" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "W", target: proxy, propertyName: "sourceWidth", numeric: true, arrows: true, min: 0, placeholder: Math.max(...images.map((image) => image.imageWidth)).toString(), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "H", target: proxy, propertyName: "sourceHeight", numeric: true, arrows: true, min: 0, placeholder: Math.max(...images.map((image) => image.imageHeight)).toString(), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_autoResizeIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Autoscale" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "AUTOSCALE", target: proxy, propertyName: "autoScale", onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_stretchFillIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Stretch" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_6__.OptionsLineComponent, { label: " ", options: stretchOptions, target: proxy, propertyName: "stretch", onSelect: (value) => this.setState({ mode: value }) })] }), images.length === 1 && image.stretch === gui_2D_controls_image__WEBPACK_IMPORTED_MODULE_3__.Image.STRETCH_NINE_PATCH && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_cropIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Slice Horizontal" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "L", target: image, propertyName: "sliceLeft", onChange: () => {
|
52884
52981
|
image.populateNinePatchSlicesFromImage = false;
|
52885
52982
|
this.forceUpdate();
|
52886
52983
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "R", target: image, propertyName: "sliceRight", onChange: () => {
|
52887
52984
|
image.populateNinePatchSlicesFromImage = false;
|
52888
52985
|
this.forceUpdate();
|
52889
|
-
} })] })
|
52986
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_cropIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Slice Vertical" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "T", target: image, propertyName: "sliceTop", onChange: () => {
|
52890
52987
|
image.populateNinePatchSlicesFromImage = false;
|
52891
52988
|
this.forceUpdate();
|
52892
52989
|
} }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "B", target: image, propertyName: "sliceBottom", onChange: () => {
|
52893
52990
|
image.populateNinePatchSlicesFromImage = false;
|
52894
52991
|
this.forceUpdate();
|
52895
|
-
} })] })
|
52992
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_autoResizeIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Populate Nine Patch Slices From Image" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "SLICE FROM IMAGE", target: image, propertyName: "populateNinePatchSlicesFromImage", onValueChanged: () => {
|
52896
52993
|
this.forceUpdate();
|
52897
52994
|
image._markAsDirty();
|
52898
|
-
} })] })
|
52995
|
+
} })] })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { iconLabel: "animationSheet", icon: shared_ui_components_imgs_animationSheetIcon_svg__WEBPACK_IMPORTED_MODULE_16__, label: "ANIMATION SHEET", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_9__.makeTargetsProxy)(images, this.props.onPropertyChangedObservable, (target) => target.cellId !== -1), onValueChanged: () => {
|
52899
52996
|
this.toggleAnimations(!animationSheet);
|
52900
52997
|
this.forceUpdate();
|
52901
|
-
} }), animationSheet && ((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)("div",
|
52998
|
+
} }), animationSheet && ((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)("div", { className: "ge-divider double", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { iconLabel: "Cell Id", icon: shared_ui_components_imgs_cellIDIcon_svg__WEBPACK_IMPORTED_MODULE_17__, lockObject: this.props.lockObject, label: "", isInteger: true, target: proxy, propertyName: "cellId", min: 0, max: maxCells }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { icon: shared_ui_components_imgs_sizeIcon_svg__WEBPACK_IMPORTED_MODULE_18__, lockObject: this.props.lockObject, label: "W", target: proxy, propertyName: "cellWidth", isInteger: true, onChange: () => this.updateCellSize(), min: 1, max: maxCellWidth }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_4__.FloatLineComponent, { lockObject: this.props.lockObject, label: "H", target: proxy, propertyName: "cellHeight", isInteger: true, onChange: () => this.updateCellSize(), min: 1, max: maxCellHeight })] })] }))] }));
|
52902
52999
|
}
|
52903
53000
|
}
|
52904
53001
|
|
@@ -52971,7 +53068,7 @@ class InputTextPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
52971
53068
|
render() {
|
52972
53069
|
const { inputTexts, onPropertyChangedObservable, lockObject } = this.props;
|
52973
53070
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_8__.makeTargetsProxy)(inputTexts, onPropertyChangedObservable);
|
52974
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53071
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: inputTexts, onPropertyChangedObservable: onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextLineComponent, { label: "INPUT TEXT", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_textIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "text" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_textInputIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Prompt Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "promptMessage" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_widthIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Max Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "maxWidth" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_marginsIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Margins" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "margin" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_16__, label: "Border Thickness" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_6__.FloatLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_autoStretchWidthIcon_svg__WEBPACK_IMPORTED_MODULE_17__, label: "Automatically Stretch Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "AUTO STRETCH", target: proxy, propertyName: "autoStretchWidth" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_selectAllIcon_svg__WEBPACK_IMPORTED_MODULE_18__, label: "When Input is Focus, Select All" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "ON FOCUS, SELECT ALL", target: proxy, propertyName: "onFocusSelectAll" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_highlightIcon_svg__WEBPACK_IMPORTED_MODULE_19__, label: "Highlight Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "textHighlightColor" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_alphaIcon_svg__WEBPACK_IMPORTED_MODULE_20__, label: "Highlight Opacity" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_sliderLineComponent__WEBPACK_IMPORTED_MODULE_4__.SliderLineComponent, { lockObject: lockObject, label: "", minimum: 0, maximum: 1, step: 0.01, target: proxy, propertyName: "highligherOpacity" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_21__, label: "Background Color when Focused" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "focusedBackground" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_textPlaceholderIcon_svg__WEBPACK_IMPORTED_MODULE_22__, label: "Placeholder Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_3__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "placeholderText" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_23__, label: "Placeholder Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_9__.ColorLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "placeholderColor" })] })] }));
|
52975
53072
|
}
|
52976
53073
|
}
|
52977
53074
|
|
@@ -53050,7 +53147,7 @@ class LinePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Compo
|
|
53050
53147
|
});
|
53051
53148
|
}
|
53052
53149
|
const dashString = dashes.join(",");
|
53053
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53150
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "LINE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_linePoint1Icon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Position 1" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: lockObject, label: "X", target: proxy, propertyName: "x1" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: lockObject, label: "Y", target: proxy, propertyName: "y1" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_linePoint2Icon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Position 2" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: lockObject, label: "X", target: proxy, propertyName: "x2" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: lockObject, label: "Y", target: proxy, propertyName: "y2" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Line Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "lineWidth", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), min: 0, arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_lineDashIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Dash Pattern" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: lockObject, label: "", target: proxy, value: dashString, onChange: (newValue) => this.onDashChange(newValue) })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { hideDimensions: true, lockObject: lockObject, controls: lines, onPropertyChangedObservable: onPropertyChangedObservable })] }));
|
53054
53151
|
}
|
53055
53152
|
}
|
53056
53153
|
|
@@ -53100,7 +53197,7 @@ class RadioButtonPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1_
|
|
53100
53197
|
}
|
53101
53198
|
render() {
|
53102
53199
|
const radioButtons = this.props.radioButtons;
|
53103
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53200
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: radioButtons, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "RADIO BUTTON", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Stroke Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(radioButtons, this.props.onPropertyChangedObservable), propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_9__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_scaleIcon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Check Size Ratio" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(radioButtons, this.props.onPropertyChangedObservable), propertyName: "checkSizeRatio", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_9__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Name of Group" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(radioButtons, this.props.onPropertyChangedObservable), propertyName: "group" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_checkboxIconDark_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Is Checked" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_5__.CheckBoxLineComponent, { label: "CHECKED", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(radioButtons, this.props.onPropertyChangedObservable), propertyName: "isChecked" })] })] }));
|
53104
53201
|
}
|
53105
53202
|
}
|
53106
53203
|
|
@@ -53147,7 +53244,7 @@ class RectanglePropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
53147
53244
|
render() {
|
53148
53245
|
const { rectangles, lockObject, onPropertyChangedObservable } = this.props;
|
53149
53246
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_5__.makeTargetsProxy)(rectangles, onPropertyChangedObservable);
|
53150
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53247
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: rectangles, onPropertyChangedObservable: onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "RECTANGLE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Stroke Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_conerRadiusIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Corner Radius" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: lockObject, label: "", target: proxy, propertyName: "cornerRadius", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_containerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_6__.ContainerPropertyGridComponent, { containers: rectangles, onPropertyChangedObservable: onPropertyChangedObservable })] }));
|
53151
53248
|
}
|
53152
53249
|
}
|
53153
53250
|
|
@@ -53202,7 +53299,7 @@ class ScrollViewerPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1
|
|
53202
53299
|
render() {
|
53203
53300
|
const { scrollViewers, onPropertyChangedObservable, lockObject } = this.props;
|
53204
53301
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(scrollViewers, onPropertyChangedObservable);
|
53205
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53302
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: scrollViewers, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextLineComponent, { label: "SCROLLVIEWER", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_scrollViewerPrecisionIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Wheel Precision" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "wheelPrecision", arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_widthIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Bar Size" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "barSize", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "e-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Bar Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "barColor" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Bar Background Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_5__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "barBackground" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Stroke Weight" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "thickness", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_7__.IconComponent, { icon: shared_ui_components_imgs_conerRadiusIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Corner Radius" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_3__.FloatLineComponent, { lockObject: lockObject, label: "", target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_6__.makeTargetsProxy)(scrollViewers, onPropertyChangedObservable), propertyName: "cornerRadius", unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_8__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0, digits: 2 })] })] }));
|
53206
53303
|
}
|
53207
53304
|
}
|
53208
53305
|
|
@@ -53234,7 +53331,7 @@ class SliderGenericPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_
|
|
53234
53331
|
}
|
53235
53332
|
render() {
|
53236
53333
|
const sliders = this.props.sliders;
|
53237
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53334
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: sliders, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_sliderPropertyGridComponent__WEBPACK_IMPORTED_MODULE_3__.SliderPropertyGridComponent, { sliders: sliders, lockObject: this.props.lockObject, onPropertyChangedObservable: this.props.onPropertyChangedObservable })] }));
|
53238
53335
|
}
|
53239
53336
|
}
|
53240
53337
|
|
@@ -53297,7 +53394,7 @@ class SliderPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
|
|
53297
53394
|
render() {
|
53298
53395
|
const { sliders, onPropertyChangedObservable } = this.props;
|
53299
53396
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(sliders, onPropertyChangedObservable);
|
53300
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53397
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "SLIDER", value: " ", color: "grey" }), sliders.every((slider) => slider.typeName === "Slider") && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_colorIcon_svg__WEBPACK_IMPORTED_MODULE_9__, label: "Border Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_6__.ColorLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "borderColor" })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_verticalSliderIcon_svg__WEBPACK_IMPORTED_MODULE_10__, label: "Vertical" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "VERTICAL", target: proxy, propertyName: "isVertical" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_barOffsetIcon_svg__WEBPACK_IMPORTED_MODULE_11__, label: "Bar Offset" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "barOffset" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_sliderValueMinimumIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Minimum Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "minimum", arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_sliderValueMaximumIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Maximum Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "maximum", arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_sliderValueIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Initial Value" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_2__.FloatLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "value", arrows: true })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_5__.TextLineComponent, { label: "THUMB", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_showThumbIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Display Thumb" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "DISPLAY THUMB", target: proxy, propertyName: "displayThumb", onValueChanged: () => this.forceUpdate() })] }), proxy.displayThumb && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_thumbCircleIcon_svg__WEBPACK_IMPORTED_MODULE_16__, label: "Thumb Circular" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "CIRCULAR", target: proxy, propertyName: "isThumbCircle" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_clampSliderValueIcon_svg__WEBPACK_IMPORTED_MODULE_17__, label: "Thumb Clamped to Edges" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_3__.CheckBoxLineComponent, { label: "CLAMPED", target: proxy, propertyName: "isThumbClamped" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_8__.IconComponent, { icon: shared_ui_components_imgs_widthIcon_svg__WEBPACK_IMPORTED_MODULE_18__, label: "Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: "", target: proxy, propertyName: "thumbWidth" })] })] }))] }));
|
53301
53398
|
}
|
53302
53399
|
}
|
53303
53400
|
|
@@ -53352,7 +53449,7 @@ class StackPanelPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__
|
|
53352
53449
|
render() {
|
53353
53450
|
const { stackPanels, lockObject, onPropertyChangedObservable } = this.props;
|
53354
53451
|
const proxy = (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_7__.makeTargetsProxy)(stackPanels, onPropertyChangedObservable);
|
53355
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53452
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: lockObject, controls: stackPanels, onPropertyChangedObservable: onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_6__.TextLineComponent, { label: "STACKPANEL", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_9__.IconComponent, { icon: shared_ui_components_imgs_alignVerticalIcon_svg__WEBPACK_IMPORTED_MODULE_12__, label: "Determines if children are stacked horizontally or vertically" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_4__.CheckBoxLineComponent, { label: proxy.isVertical ? "ALIGNMENT: VERTICAL" : "ALIGNMENT: HORIZONTAL", target: proxy, propertyName: "isVertical", onValueChanged: () => {
|
53356
53453
|
for (const panel of stackPanels) {
|
53357
53454
|
for (const child of panel.children) {
|
53358
53455
|
if (proxy.isVertical) {
|
@@ -53372,7 +53469,7 @@ class StackPanelPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__
|
|
53372
53469
|
}
|
53373
53470
|
}
|
53374
53471
|
this.forceUpdate();
|
53375
|
-
} })] })
|
53472
|
+
} })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_9__.IconComponent, { icon: shared_ui_components_imgs_stackPanelSpacingIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Spacing between children" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_5__.FloatLineComponent, { lockObject: lockObject, label: " ", target: proxy, propertyName: "spacing", onChange: () => stackPanels.forEach((panel) => panel._markAsDirty()), unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_11__.UnitButton, { unit: "PX", locked: true }), arrows: true, min: 0 })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_containerPropertyGridComponent__WEBPACK_IMPORTED_MODULE_8__.ContainerPropertyGridComponent, { containers: stackPanels, onPropertyChangedObservable: onPropertyChangedObservable })] }));
|
53376
53473
|
}
|
53377
53474
|
}
|
53378
53475
|
|
@@ -53442,7 +53539,7 @@ class TextBlockPropertyGridComponent extends react__WEBPACK_IMPORTED_MODULE_1__.
|
|
53442
53539
|
{ label: "Ellipsis", value: gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__.TextWrapping.Ellipsis },
|
53443
53540
|
{ label: "Word wrap", value: gui_2D_controls_textBlock__WEBPACK_IMPORTED_MODULE_3__.TextWrapping.WordWrap },
|
53444
53541
|
];
|
53445
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53542
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "pane", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gui_commonControlPropertyGridComponent__WEBPACK_IMPORTED_MODULE_2__.CommonControlPropertyGridComponent, { lockObject: this.props.lockObject, controls: textBlocks, onPropertyChangedObservable: this.props.onPropertyChangedObservable }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextLineComponent, { label: "TEXTBLOCK", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_fontFamilyIcon_svg__WEBPACK_IMPORTED_MODULE_13__, label: "Text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "text" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_resizeToFitIcon_svg__WEBPACK_IMPORTED_MODULE_14__, label: "Automatically resize the text block to fit the size of the text" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_checkBoxLineComponent__WEBPACK_IMPORTED_MODULE_6__.CheckBoxLineComponent, { label: "RESIZE TO FIT", target: proxy, propertyName: "resizeToFit" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_wordWrapIcon_svg__WEBPACK_IMPORTED_MODULE_15__, label: "Text Wrapping" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_optionsLineComponent__WEBPACK_IMPORTED_MODULE_5__.OptionsLineComponent, { label: " ", options: wrappingOptions, target: proxy, propertyName: "textWrapping" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_LineSpacingIcon_svg__WEBPACK_IMPORTED_MODULE_16__, label: "Line Spacing" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_4__.TextInputLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "lineSpacing" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("hr", {}), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textLineComponent__WEBPACK_IMPORTED_MODULE_7__.TextLineComponent, { label: "OUTLINE", value: " ", color: "grey" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider double", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_strokeWeightIcon_svg__WEBPACK_IMPORTED_MODULE_17__, label: "Outline Width" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_floatLineComponent__WEBPACK_IMPORTED_MODULE_11__.FloatLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "outlineWidth", arrows: true, min: 0, unit: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_unitButton__WEBPACK_IMPORTED_MODULE_12__.UnitButton, { unit: "PX", locked: true }), step: "0.01" })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "ge-divider", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_iconComponent__WEBPACK_IMPORTED_MODULE_10__.IconComponent, { icon: shared_ui_components_imgs_fillColorIcon_svg__WEBPACK_IMPORTED_MODULE_18__, label: "Outline Color" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_colorLineComponent__WEBPACK_IMPORTED_MODULE_8__.ColorLineComponent, { lockObject: this.props.lockObject, label: " ", target: proxy, propertyName: "outlineColor" })] })] }));
|
53446
53543
|
}
|
53447
53544
|
}
|
53448
53545
|
|
@@ -53575,10 +53672,9 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
53575
53672
|
});
|
53576
53673
|
};
|
53577
53674
|
this.saveToSnippetServer = async () => {
|
53578
|
-
var _a;
|
53579
53675
|
const adt = this.props.globalState.guiTexture;
|
53580
53676
|
const content = JSON.stringify(adt.serializeContent());
|
53581
|
-
const savePromise =
|
53677
|
+
const savePromise = this.props.globalState.customSave?.action || this.saveToSnippetServerHelper;
|
53582
53678
|
savePromise(content, adt)
|
53583
53679
|
.then((snippetId) => {
|
53584
53680
|
adt.snippetId = snippetId;
|
@@ -53663,9 +53759,8 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
53663
53759
|
this.props.globalState.workbench.loadFromSnippet(snippedId);
|
53664
53760
|
}
|
53665
53761
|
renderNode(nodes) {
|
53666
|
-
var _a;
|
53667
53762
|
const node = nodes[0];
|
53668
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53763
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "header", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { id: "logo", src: this.renderControlIcon(nodes) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "title", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(shared_ui_components_lines_textInputLineComponent__WEBPACK_IMPORTED_MODULE_21__.TextInputLineComponent, { noUnderline: true, lockObject: this._lockObject, target: (0,shared_ui_components_lines_targetsProxy__WEBPACK_IMPORTED_MODULE_26__.makeTargetsProxy)(nodes, this.props.globalState.onPropertyChangedObservable), propertyName: "name", onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable }) })] }), this.renderProperties(nodes), node?.parent?.typeName === "Grid" && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_parentingPropertyGridComponent__WEBPACK_IMPORTED_MODULE_22__.ParentingPropertyGridComponent, { control: node, onPropertyChangedObservable: this.props.globalState.onPropertyChangedObservable, lockObject: this._lockObject }))] }));
|
53669
53764
|
}
|
53670
53765
|
/**
|
53671
53766
|
* returns the class name of a list of controls if they share a class, or an empty string if not
|
@@ -53721,7 +53816,7 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
53721
53816
|
}
|
53722
53817
|
case "Grid": {
|
53723
53818
|
const grids = nodes;
|
53724
|
-
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 });
|
53819
|
+
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 }));
|
53725
53820
|
}
|
53726
53821
|
case "ScrollViewer": {
|
53727
53822
|
const scrollViewers = nodes;
|
@@ -53777,7 +53872,7 @@ class PropertyTabComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
53777
53872
|
if (this.props.globalState.guiTexture == undefined)
|
53778
53873
|
return null;
|
53779
53874
|
const nodesToRender = this.props.globalState.selectedControls.length > 0 ? this.props.globalState.selectedControls : [this.props.globalState.workbench.trueRootContainer];
|
53780
|
-
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
53875
|
+
return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "ge-propertyTab", children: this.renderNode(nodesToRender) });
|
53781
53876
|
}
|
53782
53877
|
}
|
53783
53878
|
|
@@ -53839,15 +53934,14 @@ class ControlTreeItemComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Compon
|
|
53839
53934
|
this.props.globalState.onPropertyGridUpdateRequiredObservable.notifyObservers();
|
53840
53935
|
}
|
53841
53936
|
render() {
|
53842
|
-
var _a;
|
53843
53937
|
const control = this.props.control;
|
53844
53938
|
let bracket = "";
|
53845
|
-
if (
|
53939
|
+
if (control.parent?.typeName === "Grid") {
|
53846
53940
|
bracket = control.parent.getChildCellInfo(this.props.control);
|
53847
53941
|
}
|
53848
53942
|
const draggingSelf = this.props.globalState.draggedControl === control;
|
53849
53943
|
const controlType = _controlTypes__WEBPACK_IMPORTED_MODULE_6__.ControlTypes.find((type) => type.className === control.getClassName());
|
53850
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
53944
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "controlTools", children: [controlType && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "controlType icon", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: controlType.icon, alt: controlType.className }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_treeItemLabelComponent__WEBPACK_IMPORTED_MODULE_1__.TreeItemLabelComponent, { label: control.name, bracket: bracket, onClick: () => this.props.onClick(), onChange: (name) => this.onRename(name), setRenaming: (renaming) => this.setState({ isRenaming: renaming }), renaming: this.state.isRenaming }), !draggingSelf && this.props.isDragOver && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.CENTER && control instanceof gui_2D_controls_container__WEBPACK_IMPORTED_MODULE_5__.Container && ((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__.jsx)("div", { className: "makeChild icon", onClick: () => this.highlight(), title: "Make Child", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_makeChildOfContainerIcon_svg__WEBPACK_IMPORTED_MODULE_10__ }) }) })), !this.state.isRenaming && this.props.isHovered && this.props.globalState.draggedControl === null && this.props.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.NONE && ((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)("div", { className: "addComponent icon", onClick: () => this.highlight(), title: "Add component (Not Implemented)", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_makeComponentIcon_svg__WEBPACK_IMPORTED_MODULE_9__ }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "visibility icon", onClick: () => this.switchVisibility(), title: "Show/Hide control", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.state.isVisible ? _imgs_visibilityActiveIcon_svg__WEBPACK_IMPORTED_MODULE_8__ : _imgs_visibilityNotActiveIcon_svg__WEBPACK_IMPORTED_MODULE_7__ }) })] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_extensionsComponent__WEBPACK_IMPORTED_MODULE_2__.ExtensionsComponent, { target: control, extensibilityGroups: this.props.extensibilityGroups })] }));
|
53851
53945
|
}
|
53852
53946
|
}
|
53853
53947
|
|
@@ -53907,11 +54001,11 @@ class ExtensionsComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
|
|
53907
54001
|
if (options.length === 0) {
|
53908
54002
|
return null;
|
53909
54003
|
}
|
53910
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
54004
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { ref: this._extensionRef, className: "extensions", onClick: () => this.showPopup(), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { title: "Additional options", className: "icon", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_1__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_2__.faEllipsisH }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { ref: (input) => {
|
53911
54005
|
this._popup = input;
|
53912
|
-
}, tabIndex: -1, className: this.state.popupVisible ? "popup show" : "popup", onBlur: () => this.setState({ popupVisible: false })
|
53913
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
53914
|
-
}) })
|
54006
|
+
}, tabIndex: -1, className: this.state.popupVisible ? "popup show" : "popup", onBlur: () => this.setState({ popupVisible: false }), children: options.map((extensibility) => {
|
54007
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "popupMenu", onClick: () => extensibility.action(this.props.target), children: extensibility.label }, extensibility.label));
|
54008
|
+
}) })] }));
|
53915
54009
|
}
|
53916
54010
|
}
|
53917
54011
|
|
@@ -53945,7 +54039,7 @@ class SceneExplorerFilterComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Co
|
|
53945
54039
|
super(props);
|
53946
54040
|
}
|
53947
54041
|
render() {
|
53948
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
54042
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "filter", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", placeholder: "Filter", onChange: (evt) => this.props.onFilter(evt.target.value) }) }));
|
53949
54043
|
}
|
53950
54044
|
}
|
53951
54045
|
class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
@@ -53962,6 +54056,9 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
53962
54056
|
this.forceUpdate();
|
53963
54057
|
}
|
53964
54058
|
});
|
54059
|
+
this._onUpdateRequiredObserver = this.props.globalState.onUpdateRequiredObservable.add(() => {
|
54060
|
+
this.forceUpdate();
|
54061
|
+
});
|
53965
54062
|
}
|
53966
54063
|
componentDidMount() {
|
53967
54064
|
this._onSelectionChangeObserver = this.props.globalState.onSelectionChangedObservable.add((entity) => {
|
@@ -53989,6 +54086,9 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
53989
54086
|
if (this._onPropertyChangedObservable) {
|
53990
54087
|
this.props.globalState.onPropertyChangedObservable.remove(this._onPropertyChangedObservable);
|
53991
54088
|
}
|
54089
|
+
if (this._onUpdateRequiredObserver) {
|
54090
|
+
this.props.globalState.onUpdateRequiredObservable.remove(this._onUpdateRequiredObserver);
|
54091
|
+
}
|
53992
54092
|
}
|
53993
54093
|
filterContent(filter) {
|
53994
54094
|
this.setState({ filter: filter });
|
@@ -54090,7 +54190,7 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
54090
54190
|
return null;
|
54091
54191
|
}
|
54092
54192
|
const guiElements = scene.textures.filter((t) => t.getClassName() === "AdvancedDynamicTexture");
|
54093
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
54193
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "tree", onDrop: () => {
|
54094
54194
|
this.props.globalState.onDropObservable.notifyObservers();
|
54095
54195
|
this.props.globalState.onParentingChangeObservable.notifyObservers(null);
|
54096
54196
|
}, onDragOver: (event) => {
|
@@ -54102,7 +54202,7 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
54102
54202
|
else {
|
54103
54203
|
this.props.globalState.selectionLock = false;
|
54104
54204
|
}
|
54105
|
-
}, onContextMenu: (ev) => ev.preventDefault()
|
54205
|
+
}, onContextMenu: (ev) => ev.preventDefault(), children: guiElements && guiElements.length > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_treeItemComponent__WEBPACK_IMPORTED_MODULE_2__.TreeItemComponent, { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, selectedEntities: this.props.globalState.selectedControls, items: guiElements, label: "GUI", offset: 1, filter: this.state.filter })) }));
|
54106
54206
|
}
|
54107
54207
|
onClose() {
|
54108
54208
|
if (!this.props.onClose) {
|
@@ -54117,7 +54217,7 @@ class SceneExplorerComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
54117
54217
|
this.props.onPopup();
|
54118
54218
|
}
|
54119
54219
|
render() {
|
54120
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
54220
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { id: "ge-sceneExplorer", tabIndex: 0, onKeyDown: (keyEvent) => this.processKeys(keyEvent), children: [this.props.children, this.renderContent()] }));
|
54121
54221
|
}
|
54122
54222
|
}
|
54123
54223
|
|
@@ -54162,7 +54262,7 @@ class TreeItemExpandableHeaderComponent extends react__WEBPACK_IMPORTED_MODULE_1
|
|
54162
54262
|
}
|
54163
54263
|
render() {
|
54164
54264
|
const chevron = this.props.isExpanded ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_expandedIcon_svg__WEBPACK_IMPORTED_MODULE_7__, className: "icon" }) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: _imgs_collapsedIcon_svg__WEBPACK_IMPORTED_MODULE_8__, className: "icon" });
|
54165
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
54265
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "expandableHeader", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "text", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "arrow icon", onClick: () => this.props.onClick(), children: chevron }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "text-value", children: this.props.label })] }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "expandAll icon", onClick: () => this.expandAll(), title: this.props.isExpanded ? "Collapse all" : "Expand all", children: chevron })] }));
|
54166
54266
|
}
|
54167
54267
|
}
|
54168
54268
|
class TreeItemRootHeaderComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
@@ -54170,7 +54270,7 @@ class TreeItemRootHeaderComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Com
|
|
54170
54270
|
super(props);
|
54171
54271
|
}
|
54172
54272
|
render() {
|
54173
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
54273
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "expandableHeader", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "text", children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "arrow icon", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_fortawesome_react_fontawesome__WEBPACK_IMPORTED_MODULE_2__.FontAwesomeIcon, { icon: _fortawesome_free_solid_svg_icons__WEBPACK_IMPORTED_MODULE_3__.faBan }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "text-value", children: this.props.label })] }) }));
|
54174
54274
|
}
|
54175
54275
|
}
|
54176
54276
|
class TreeItemComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
@@ -54204,9 +54304,9 @@ class TreeItemComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
54204
54304
|
TreeItemComponent._ContextMenuUniqueIdGenerator++;
|
54205
54305
|
return null;
|
54206
54306
|
}
|
54207
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.ContextMenu,
|
54208
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.MenuItem,
|
54209
|
-
}) }))
|
54307
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.ContextMenu, { id: "contextmenu#" + TreeItemComponent._ContextMenuUniqueIdGenerator++, className: "context-menu", children: this.props.contextMenuItems.map((c) => {
|
54308
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.MenuItem, { onClick: () => c.action(), children: c.label }, c.label));
|
54309
|
+
}) }));
|
54210
54310
|
}
|
54211
54311
|
render() {
|
54212
54312
|
let items = this.props.items;
|
@@ -54218,14 +54318,14 @@ class TreeItemComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
54218
54318
|
items = [];
|
54219
54319
|
}
|
54220
54320
|
else {
|
54221
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
54321
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "groupContainer", style: marginStyle, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: this.props.label }) }));
|
54222
54322
|
}
|
54223
54323
|
}
|
54224
54324
|
if (!items.length) {
|
54225
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
54325
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "groupContainer", style: marginStyle, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.ContextMenuTrigger, { id: "contextmenu#" + TreeItemComponent._ContextMenuUniqueIdGenerator, children: [this.renderContextMenu(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(TreeItemRootHeaderComponent, { label: this.props.label })] }) }));
|
54226
54326
|
}
|
54227
54327
|
if (!this.state.isExpanded) {
|
54228
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
54328
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "groupContainer", style: marginStyle, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_contextmenu__WEBPACK_IMPORTED_MODULE_6__.ContextMenuTrigger, { id: "contextmenu#" + TreeItemComponent._ContextMenuUniqueIdGenerator, children: [this.renderContextMenu(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(TreeItemExpandableHeaderComponent, { isExpanded: false, label: this.props.label, onClick: () => this.switchExpandedState(), onExpandAll: (expand) => this.expandAll(expand) })] }) }));
|
54229
54329
|
}
|
54230
54330
|
const sortedItems = _tools__WEBPACK_IMPORTED_MODULE_5__.Tools.SortAndFilter(null, items)[0].getChildren();
|
54231
54331
|
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: sortedItems.map((item) => {
|
@@ -54272,16 +54372,16 @@ class TreeItemLabelComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Componen
|
|
54272
54372
|
render() {
|
54273
54373
|
// if editing, overwrite string with local value
|
54274
54374
|
const label = this.props.renaming ? this.state.value : this.props.label || "No Name";
|
54275
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
54375
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "title", onClick: () => this.onClick(), children: this.props.renaming ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", onBlur: () => this.onBlur(), autoFocus: true, value: label, onChange: (ev) => {
|
54276
54376
|
this.props.onChange(ev.target.value);
|
54277
54377
|
this.setState({ value: ev.target.value });
|
54278
54378
|
}, onKeyDown: (ev) => {
|
54279
54379
|
if (ev.key === "Enter")
|
54280
54380
|
this.onBlur();
|
54281
|
-
}, className: "titleText" })) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
54381
|
+
}, className: "titleText" })) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "titleText", onDoubleClick: () => {
|
54282
54382
|
this.props.setRenaming(true);
|
54283
54383
|
this.setState({ value: label });
|
54284
|
-
}
|
54384
|
+
}, children: label })) }));
|
54285
54385
|
}
|
54286
54386
|
}
|
54287
54387
|
|
@@ -54443,7 +54543,7 @@ class TreeItemSelectableComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Com
|
|
54443
54543
|
className += this.state.dragOver && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.ABOVE && entity.parent ? " seAbove" : "";
|
54444
54544
|
className += this.state.dragOver && this.state.dragOverLocation == _globalState__WEBPACK_IMPORTED_MODULE_4__.DragOverLocation.BELOW && entity.parent ? " seBelow" : "";
|
54445
54545
|
const styleName = className === "itemContainer seAbove" || className === "itemContainer seBelow" ? lineMarginStyle : marginStyle;
|
54446
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
54546
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: className, style: styleName, onPointerUp: () => {
|
54447
54547
|
this.onSelect();
|
54448
54548
|
}, onPointerEnter: () => this.setState({ isHovered: true }), onPointerLeave: () => this.setState({ isHovered: false }), onDragStart: () => {
|
54449
54549
|
this.props.globalState.draggedControl = this.props.entity;
|
@@ -54464,7 +54564,7 @@ class TreeItemSelectableComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Com
|
|
54464
54564
|
else {
|
54465
54565
|
this.setState({ dragOver: false });
|
54466
54566
|
}
|
54467
|
-
}
|
54567
|
+
}, children: [hasChildren && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "arrow icon", onClick: (event) => {
|
54468
54568
|
this.switchExpandedState();
|
54469
54569
|
if (event.shiftKey) {
|
54470
54570
|
while (hasChildren) {
|
@@ -54478,7 +54578,7 @@ class TreeItemSelectableComponent extends react__WEBPACK_IMPORTED_MODULE_3__.Com
|
|
54478
54578
|
entity.reservedDataStore.isExpanded = true;
|
54479
54579
|
}
|
54480
54580
|
}
|
54481
|
-
}
|
54581
|
+
}, children: chevron })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_entities_gui_controlTreeItemComponent__WEBPACK_IMPORTED_MODULE_5__.ControlTreeItemComponent, { globalState: this.props.globalState, extensibilityGroups: this.props.extensibilityGroups, control: entity, onClick: () => { }, isHovered: this.state.isHovered, isDragOver: this.state.dragOver, dragOverLocation: this.state.dragOverLocation })] }), this.renderChildren(isExpanded)] }));
|
54482
54582
|
}
|
54483
54583
|
dragOver(event) {
|
54484
54584
|
this.updateDragOverLocation(event);
|
@@ -54947,7 +55047,7 @@ class CoordinateHelper {
|
|
54947
55047
|
const ratio = property === "left" || property === "width" || property === "paddingLeft" || property === "paddingRight" ? ratioX : ratioY;
|
54948
55048
|
const newValue = (guiControl[`${property}InPixels`] * 100) / ratio;
|
54949
55049
|
guiControl[property] = `${newValue.toFixed(2)}%`;
|
54950
|
-
onPropertyChangedObservable
|
55050
|
+
onPropertyChangedObservable?.notifyObservers({
|
54951
55051
|
object: guiControl,
|
54952
55052
|
initialValue,
|
54953
55053
|
value: guiControl[property],
|
@@ -54959,13 +55059,12 @@ class CoordinateHelper {
|
|
54959
55059
|
return Math.floor(value * 100) / 100;
|
54960
55060
|
}
|
54961
55061
|
static ConvertToPixels(guiControl, properties = ["left", "top", "width", "height"], onPropertyChangedObservable) {
|
54962
|
-
var _a;
|
54963
55062
|
// make sure we are using the latest measures for the control
|
54964
|
-
guiControl._processMeasures(
|
55063
|
+
guiControl._processMeasures(guiControl.parent?._currentMeasure, guiControl.host);
|
54965
55064
|
for (const property of properties) {
|
54966
55065
|
const initialValue = guiControl[property];
|
54967
55066
|
guiControl[`_${property}`] = new gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__.ValueAndUnit(this.Round(guiControl[`${property}InPixels`]), gui_2D_valueAndUnit__WEBPACK_IMPORTED_MODULE_0__.ValueAndUnit.UNITMODE_PIXEL);
|
54968
|
-
onPropertyChangedObservable
|
55067
|
+
onPropertyChangedObservable?.notifyObservers({
|
54969
55068
|
object: guiControl,
|
54970
55069
|
initialValue,
|
54971
55070
|
value: guiControl[property],
|
@@ -55309,7 +55408,7 @@ class GizmoGeneric extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
|
|
55309
55408
|
}
|
55310
55409
|
}
|
55311
55410
|
render() {
|
55312
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
55411
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: "gizmo", children: [lines.map((line, index) => {
|
55313
55412
|
const start = this.state.scalePoints[line[0]];
|
55314
55413
|
const end = this.state.scalePoints[line[1]];
|
55315
55414
|
// the vector between start and end
|
@@ -55322,7 +55421,7 @@ class GizmoGeneric extends react__WEBPACK_IMPORTED_MODULE_3__.Component {
|
|
55322
55421
|
width: `${length}px`,
|
55323
55422
|
transform: `translate(-50%, -50%) rotate(${angle}rad)`,
|
55324
55423
|
} }, index));
|
55325
|
-
}), this.state.scalePoints.map((scalePoint, index) => ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.GizmoScalePoint, { clickable: this.state.scalePointDragging === -1 && !scalePoint.isPivot && !this.state.isRotating, scalePoint: scalePoint, onDrag: () => this._beginDraggingScalePoint(index), onRotate: () => this._beginRotate(), onUp: () => this._onUp(), canRotate: true }, index)))] }))
|
55424
|
+
}), this.state.scalePoints.map((scalePoint, index) => ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gizmoScalePoint__WEBPACK_IMPORTED_MODULE_5__.GizmoScalePoint, { clickable: this.state.scalePointDragging === -1 && !scalePoint.isPivot && !this.state.isRotating, scalePoint: scalePoint, onDrag: () => this._beginDraggingScalePoint(index), onRotate: () => this._beginRotate(), onUp: () => this._onUp(), canRotate: true }, index)))] }));
|
55326
55425
|
}
|
55327
55426
|
}
|
55328
55427
|
|
@@ -55385,10 +55484,14 @@ function GizmoLine(props) {
|
|
55385
55484
|
const position = positions[index];
|
55386
55485
|
const rtt = _coordinateHelper__WEBPACK_IMPORTED_MODULE_3__.CoordinateHelper.NodeToRTTSpace(control, position.x, position.y);
|
55387
55486
|
const canvas = _coordinateHelper__WEBPACK_IMPORTED_MODULE_3__.CoordinateHelper.RttToCanvasSpace(rtt.x, rtt.y);
|
55388
|
-
return
|
55487
|
+
return {
|
55488
|
+
...point,
|
55489
|
+
position: canvas,
|
55490
|
+
rotation: control.rotation,
|
55491
|
+
};
|
55389
55492
|
}));
|
55390
55493
|
};
|
55391
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
55494
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "gizmo", children: scalePoints.map((point, index) => ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_gizmoScalePoint__WEBPACK_IMPORTED_MODULE_2__.GizmoScalePoint, { scalePoint: point, clickable: true, onDrag: () => { }, onRotate: () => { }, onUp: () => { }, overrideCursor: "not-allowed", canRotate: false }, index))) }));
|
55392
55495
|
}
|
55393
55496
|
|
55394
55497
|
|
@@ -55493,7 +55596,7 @@ function GizmoScalePoint(props) {
|
|
55493
55596
|
left: (scalePointContainerSize - scaleClickAreaSize) / 2 - scaleClickAreaOffset * scalePoint.horizontalPosition,
|
55494
55597
|
cursor,
|
55495
55598
|
};
|
55496
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
55599
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { style: style, className: "scale-point-container", children: [canRotate && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "rotate-click-area", onPointerDown: onRotate, style: rotateClickAreaStyle }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "scale-click-area", draggable: true, onDragStart: (evt) => evt.preventDefault(), onPointerDown: (event) => {
|
55497
55600
|
// if left mouse button down
|
55498
55601
|
if (event.buttons & 1) {
|
55499
55602
|
onDrag();
|
@@ -55502,7 +55605,7 @@ function GizmoScalePoint(props) {
|
|
55502
55605
|
if (event.buttons & 1) {
|
55503
55606
|
onDrag();
|
55504
55607
|
}
|
55505
|
-
}, onPointerUp: onUp, style: { cursor } })] }))
|
55608
|
+
}, onPointerUp: onUp, style: { cursor } })] }));
|
55506
55609
|
}
|
55507
55610
|
|
55508
55611
|
|
@@ -55560,7 +55663,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
55560
55663
|
/* harmony import */ var _globalState__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../globalState */ "../../../tools/guiEditor/dist/globalState.js");
|
55561
55664
|
/* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! gui/2D/valueAndUnit */ "gui/2D/controls/container");
|
55562
55665
|
/* harmony import */ var gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__);
|
55563
|
-
/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/
|
55666
|
+
/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core/Misc/dataStorage */ "core/Misc/observable");
|
55564
55667
|
/* harmony import */ var core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__);
|
55565
55668
|
/* harmony import */ var _tools__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../tools */ "../../../tools/guiEditor/dist/tools.js");
|
55566
55669
|
/* harmony import */ var _coordinateHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./coordinateHelper */ "../../../tools/guiEditor/dist/diagram/coordinateHelper.js");
|
@@ -55586,6 +55689,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
55586
55689
|
|
55587
55690
|
|
55588
55691
|
|
55692
|
+
|
55589
55693
|
|
55590
55694
|
var ConstraintDirection;
|
55591
55695
|
(function (ConstraintDirection) {
|
@@ -55596,6 +55700,7 @@ var ConstraintDirection;
|
|
55596
55700
|
const ARROW_KEY_MOVEMENT_SMALL = 1; // px
|
55597
55701
|
const ARROW_KEY_MOVEMENT_LARGE = 5; // px
|
55598
55702
|
const MAX_POINTER_TRAVEL_DISTANCE = 5; //px^2. determines how far the pointer can move to be treated as a drag vs. a click
|
55703
|
+
const CONTROL_OFFSET = 10; //offset in pixels for when a control is added to editor
|
55599
55704
|
class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
55600
55705
|
constructor(props) {
|
55601
55706
|
super(props);
|
@@ -55608,6 +55713,8 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
55608
55713
|
this._controlsHit = [];
|
55609
55714
|
this._pointerTravelDistance = 0;
|
55610
55715
|
this._processSelectionOnUp = false;
|
55716
|
+
this._currLeft = 0;
|
55717
|
+
this._currTop = 0;
|
55611
55718
|
this._nextLiveGuiRender = -1;
|
55612
55719
|
this._liveGuiRerenderDelay = 30;
|
55613
55720
|
this._defaultGUISize = { width: 1024, height: 1024 };
|
@@ -55754,7 +55861,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
55754
55861
|
}
|
55755
55862
|
// sets the size of the GUI and makes all necessary adjustments
|
55756
55863
|
set guiSize(value) {
|
55757
|
-
this._guiSize =
|
55864
|
+
this._guiSize = { ...value };
|
55758
55865
|
this._visibleRegionContainer.widthInPixels = this._guiSize.width;
|
55759
55866
|
this._visibleRegionContainer.heightInPixels = this._guiSize.height;
|
55760
55867
|
this.props.globalState.onResizeObservable.notifyObservers(this._guiSize);
|
@@ -55799,6 +55906,8 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
55799
55906
|
const obj = {};
|
55800
55907
|
control.serialize(obj);
|
55801
55908
|
controlList.push(obj);
|
55909
|
+
this._currLeft = control.leftInPixels;
|
55910
|
+
this._currTop = control.topInPixels;
|
55802
55911
|
}
|
55803
55912
|
copyFn(JSON.stringify({
|
55804
55913
|
GUIClipboard: true,
|
@@ -55810,7 +55919,6 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
55810
55919
|
this.props.globalState.deleteSelectedNodes();
|
55811
55920
|
}
|
55812
55921
|
pasteFromClipboard(clipboardContents) {
|
55813
|
-
var _a;
|
55814
55922
|
try {
|
55815
55923
|
const parsed = JSON.parse(clipboardContents);
|
55816
55924
|
if (parsed.GUIClipboard) {
|
@@ -55818,19 +55926,24 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
55818
55926
|
for (const control of parsed.controls) {
|
55819
55927
|
newSelection.push(gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.Parse(control, this.props.globalState.guiTexture));
|
55820
55928
|
}
|
55821
|
-
(
|
55822
|
-
|
55929
|
+
if (newSelection[0].parent?.typeName != "StackPanel") {
|
55930
|
+
this._currLeft += CONTROL_OFFSET;
|
55931
|
+
this._currTop += CONTROL_OFFSET;
|
55932
|
+
}
|
55933
|
+
newSelection[0].leftInPixels = this._currLeft;
|
55934
|
+
newSelection[0].topInPixels = this._currTop;
|
55935
|
+
const newGuiNode = this.props.globalState.workbench.appendBlock(newSelection[0]);
|
55936
|
+
this.props.globalState.setSelection([newGuiNode]);
|
55823
55937
|
return true;
|
55824
55938
|
}
|
55825
55939
|
}
|
55826
|
-
catch
|
55940
|
+
catch {
|
55827
55941
|
// don't need an error message
|
55828
55942
|
}
|
55829
55943
|
core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Logger.Warn("Paste attempted, but clipboard content was invalid.");
|
55830
55944
|
return false;
|
55831
55945
|
}
|
55832
55946
|
CopyGUIControl(original) {
|
55833
|
-
var _a, _b;
|
55834
55947
|
const serializationObject = {};
|
55835
55948
|
original.serialize(serializationObject);
|
55836
55949
|
const newControl = gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Control.Parse(serializationObject, this.props.globalState.guiTexture);
|
@@ -55838,12 +55951,12 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
55838
55951
|
//insert the new control into the adt or parent container
|
55839
55952
|
this.props.globalState.workbench.appendBlock(newControl);
|
55840
55953
|
this.props.globalState.guiTexture.removeControl(newControl);
|
55841
|
-
if (
|
55954
|
+
if (original.parent?.typeName === "Grid") {
|
55842
55955
|
const cell = _tools__WEBPACK_IMPORTED_MODULE_5__.Tools.GetCellInfo(original.parent, original);
|
55843
55956
|
original.parent.addControl(newControl, cell.x, cell.y);
|
55844
55957
|
}
|
55845
55958
|
else {
|
55846
|
-
|
55959
|
+
original.parent?.addControl(newControl);
|
55847
55960
|
}
|
55848
55961
|
let index = 1;
|
55849
55962
|
while (this.props.globalState.guiTexture.getDescendants(false).filter(
|
@@ -55967,11 +56080,10 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
55967
56080
|
this._engine.dispose();
|
55968
56081
|
}
|
55969
56082
|
loadFromJson(serializationObject) {
|
55970
|
-
var _a;
|
55971
56083
|
this.removeEditorTransformation();
|
55972
56084
|
this.props.globalState.setSelection([]);
|
55973
56085
|
if (this.props.globalState.liveGuiTexture) {
|
55974
|
-
|
56086
|
+
this.props.globalState.liveGuiTexture?.parseContent(serializationObject, true);
|
55975
56087
|
this.synchronizeLiveGUI();
|
55976
56088
|
}
|
55977
56089
|
else {
|
@@ -55982,11 +56094,10 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
55982
56094
|
this.loadToEditor();
|
55983
56095
|
}
|
55984
56096
|
async loadFromSnippet(snippetId) {
|
55985
|
-
var _a;
|
55986
56097
|
this.removeEditorTransformation();
|
55987
56098
|
this.props.globalState.setSelection([]);
|
55988
56099
|
if (this.props.globalState.liveGuiTexture) {
|
55989
|
-
await
|
56100
|
+
await this.props.globalState.liveGuiTexture?.parseFromSnippetAsync(snippetId, true);
|
55990
56101
|
this.synchronizeLiveGUI();
|
55991
56102
|
}
|
55992
56103
|
else {
|
@@ -56021,12 +56132,17 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
56021
56132
|
}
|
56022
56133
|
this.addEditorBehavior(guiElement);
|
56023
56134
|
guiElement.getDescendants(true).forEach((desc) => this.addEditorBehavior(desc));
|
56024
|
-
this.
|
56135
|
+
if (this.props.globalState.selectedControls.length != 0) {
|
56136
|
+
this.props.globalState.selectedControls[0].parent?.addControl(guiElement);
|
56137
|
+
}
|
56138
|
+
else {
|
56139
|
+
this.trueRootContainer.addControl(guiElement);
|
56140
|
+
}
|
56025
56141
|
return guiElement;
|
56026
56142
|
}
|
56027
56143
|
parent(dropLocationControl) {
|
56028
56144
|
const draggedControl = this.props.globalState.draggedControl;
|
56029
|
-
const draggedControlParent = draggedControl
|
56145
|
+
const draggedControlParent = draggedControl?.parent;
|
56030
56146
|
if (draggedControlParent && draggedControl) {
|
56031
56147
|
if (this._isNotChildInsert(dropLocationControl, draggedControl)) {
|
56032
56148
|
//checking to make sure the element is not being inserted into a child
|
@@ -56105,7 +56221,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
56105
56221
|
_tools__WEBPACK_IMPORTED_MODULE_5__.Tools.ReorderGrid(grid, index, draggedControl, cellInfo);
|
56106
56222
|
}
|
56107
56223
|
_isNotChildInsert(control, draggedControl) {
|
56108
|
-
while (control
|
56224
|
+
while (control?.parent) {
|
56109
56225
|
if (control.parent == draggedControl) {
|
56110
56226
|
return false;
|
56111
56227
|
}
|
@@ -56247,9 +56363,8 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
56247
56363
|
}
|
56248
56364
|
}
|
56249
56365
|
onDown(evt) {
|
56250
|
-
var _a;
|
56251
56366
|
this._pointerTravelDistance = 0;
|
56252
|
-
|
56367
|
+
this._rootContainer.current?.setPointerCapture(evt.pointerId);
|
56253
56368
|
if (this.props.globalState.tool === _globalState__WEBPACK_IMPORTED_MODULE_2__.GUIEditorTool.SELECT) {
|
56254
56369
|
this._mouseStartPoint = this.getScaledPointerPosition();
|
56255
56370
|
}
|
@@ -56276,10 +56391,9 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
56276
56391
|
}
|
56277
56392
|
}
|
56278
56393
|
onUp(evt) {
|
56279
|
-
var _a;
|
56280
56394
|
this._mouseStartPoint = null;
|
56281
56395
|
this._constraintDirection = ConstraintDirection.NONE;
|
56282
|
-
|
56396
|
+
this._rootContainer.current?.releasePointerCapture(evt.pointerId);
|
56283
56397
|
this._panning = false;
|
56284
56398
|
if (this._processSelectionOnUp) {
|
56285
56399
|
if (Math.sqrt(this._pointerTravelDistance) <= MAX_POINTER_TRAVEL_DISTANCE) {
|
@@ -56289,7 +56403,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
56289
56403
|
this._processSelectionOnUp = false;
|
56290
56404
|
}
|
56291
56405
|
}
|
56292
|
-
createGUICanvas() {
|
56406
|
+
createGUICanvas(embed) {
|
56293
56407
|
// Get the canvas element from the DOM.
|
56294
56408
|
const canvas = this._rootContainer.current;
|
56295
56409
|
// Associate a Babylon Engine to it.
|
@@ -56299,7 +56413,11 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
56299
56413
|
this._scene.clearColor = new core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.Color4(0, 0, 0, 0);
|
56300
56414
|
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);
|
56301
56415
|
light.intensity = 0.9;
|
56302
|
-
|
56416
|
+
if (embed) {
|
56417
|
+
this.props.globalState.fromPG = true;
|
56418
|
+
this._guiSize.width = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.DataStorage.ReadNumber("width", 1024);
|
56419
|
+
this._guiSize.height = core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_4__.DataStorage.ReadNumber("height", 1024);
|
56420
|
+
}
|
56303
56421
|
this._panAndZoomContainer = new gui_2D_controls_control__WEBPACK_IMPORTED_MODULE_3__.Container("panAndZoom");
|
56304
56422
|
this._panAndZoomContainer.clipContent = false;
|
56305
56423
|
this._panAndZoomContainer.clipChildren = false;
|
@@ -56348,16 +56466,14 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
56348
56466
|
this._liveGuiTextureRerender = true;
|
56349
56467
|
});
|
56350
56468
|
this._liveRenderObserver = this.props.globalState.liveGuiTexture.onEndRenderObservable.add(() => {
|
56351
|
-
var _a;
|
56352
56469
|
// return the GUI to the editor mode
|
56353
|
-
|
56470
|
+
this.props.globalState.guiTexture?.markAsDirty();
|
56354
56471
|
this._liveGuiTextureRerender = false;
|
56355
56472
|
});
|
56356
56473
|
this._scene.onAfterRenderObservable.add(() => {
|
56357
|
-
var _a;
|
56358
56474
|
if (this._nextLiveGuiRender > 0 && Date.now() > this._nextLiveGuiRender) {
|
56359
56475
|
this._nextLiveGuiRender = -1;
|
56360
|
-
|
56476
|
+
this.props.globalState.liveGuiTexture?.markAsDirty();
|
56361
56477
|
}
|
56362
56478
|
});
|
56363
56479
|
}
|
@@ -56373,8 +56489,7 @@ class WorkbenchComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
56373
56489
|
if (this.props.globalState.liveGuiTexture) {
|
56374
56490
|
this._trueRootContainer.getDescendants().forEach((desc) => desc.dispose());
|
56375
56491
|
this.props.globalState.liveGuiTexture.rootContainer.getDescendants(true).forEach((desc) => {
|
56376
|
-
|
56377
|
-
(_a = this.props.globalState.liveGuiTexture) === null || _a === void 0 ? void 0 : _a.removeControl(desc);
|
56492
|
+
this.props.globalState.liveGuiTexture?.removeControl(desc);
|
56378
56493
|
this.appendBlock(desc);
|
56379
56494
|
});
|
56380
56495
|
this.props.globalState.guiTexture.snippetId = this.props.globalState.liveGuiTexture.snippetId;
|
@@ -56629,20 +56744,19 @@ class GlobalState {
|
|
56629
56744
|
};
|
56630
56745
|
this.hostDocument.addEventListener("copy", (event) => {
|
56631
56746
|
if (!isElementEditable(event.target)) {
|
56632
|
-
this.onCopyObservable.notifyObservers((content) =>
|
56747
|
+
this.onCopyObservable.notifyObservers((content) => event.clipboardData?.setData("text/plain", content));
|
56633
56748
|
event.preventDefault();
|
56634
56749
|
}
|
56635
56750
|
});
|
56636
56751
|
this.hostDocument.addEventListener("cut", (event) => {
|
56637
56752
|
if (!isElementEditable(event.target)) {
|
56638
|
-
this.onCutObservable.notifyObservers((content) =>
|
56753
|
+
this.onCutObservable.notifyObservers((content) => event.clipboardData?.setData("text/plain", content));
|
56639
56754
|
event.preventDefault();
|
56640
56755
|
}
|
56641
56756
|
});
|
56642
56757
|
this.hostDocument.addEventListener("paste", (event) => {
|
56643
|
-
var _a;
|
56644
56758
|
if (!isElementEditable(event.target)) {
|
56645
|
-
this.onPasteObservable.notifyObservers(
|
56759
|
+
this.onPasteObservable.notifyObservers(event.clipboardData?.getData("text") || "");
|
56646
56760
|
event.preventDefault();
|
56647
56761
|
}
|
56648
56762
|
});
|
@@ -56656,6 +56770,12 @@ class GlobalState {
|
|
56656
56770
|
get backgroundColor() {
|
56657
56771
|
return this._backgroundColor;
|
56658
56772
|
}
|
56773
|
+
get fromPG() {
|
56774
|
+
return this._fromPG;
|
56775
|
+
}
|
56776
|
+
set fromPG(value) {
|
56777
|
+
this._fromPG = value;
|
56778
|
+
}
|
56659
56779
|
set backgroundColor(value) {
|
56660
56780
|
this._backgroundColor = value;
|
56661
56781
|
this.onBackgroundColorChangeObservable.notifyObservers();
|
@@ -56707,16 +56827,16 @@ class GlobalState {
|
|
56707
56827
|
deleteSelectedNodes() {
|
56708
56828
|
for (const control of this.selectedControls) {
|
56709
56829
|
const guiTextureParent = this._findParentControlInTexture(this.guiTexture, control);
|
56710
|
-
guiTextureParent
|
56830
|
+
guiTextureParent?.removeControl(control);
|
56711
56831
|
if (this.liveGuiTexture) {
|
56712
56832
|
const allDescendants = control.getDescendants();
|
56713
56833
|
for (const descendant of allDescendants) {
|
56714
56834
|
const liveGuiTextureDescendantParent = this._findParentControlInTexture(this.liveGuiTexture, descendant);
|
56715
|
-
liveGuiTextureDescendantParent
|
56835
|
+
liveGuiTextureDescendantParent?.removeControl(descendant);
|
56716
56836
|
descendant.dispose();
|
56717
56837
|
}
|
56718
56838
|
const liveGuiTextureParent = this._findParentControlInTexture(this.liveGuiTexture, control);
|
56719
|
-
liveGuiTextureParent
|
56839
|
+
liveGuiTextureParent?.removeControl(control);
|
56720
56840
|
}
|
56721
56841
|
control.dispose();
|
56722
56842
|
}
|
@@ -56765,8 +56885,9 @@ class GUIEditor {
|
|
56765
56885
|
/**
|
56766
56886
|
* Show the gui editor
|
56767
56887
|
* @param options defines the options to use to configure the gui editor
|
56888
|
+
* @param embed defines whether editor is being opened from the Playground
|
56768
56889
|
*/
|
56769
|
-
static async Show(options) {
|
56890
|
+
static async Show(options, embed) {
|
56770
56891
|
let hostElement = options.hostElement;
|
56771
56892
|
// 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
|
56772
56893
|
if (this._CurrentState && hostElement) {
|
@@ -56803,7 +56924,7 @@ class GUIEditor {
|
|
56803
56924
|
react_dom__WEBPACK_IMPORTED_MODULE_1__.render(graphEditor, hostElement);
|
56804
56925
|
// create the middle workbench canvas
|
56805
56926
|
if (!globalState.guiTexture) {
|
56806
|
-
globalState.workbench.createGUICanvas();
|
56927
|
+
globalState.workbench.createGUICanvas(embed);
|
56807
56928
|
if (options.currentSnippetToken) {
|
56808
56929
|
try {
|
56809
56930
|
await globalState.workbench.loadFromSnippet(options.currentSnippetToken);
|
@@ -57172,40 +57293,6 @@ class Portal extends react__WEBPACK_IMPORTED_MODULE_0__.Component {
|
|
57172
57293
|
}
|
57173
57294
|
|
57174
57295
|
|
57175
|
-
/***/ }),
|
57176
|
-
|
57177
|
-
/***/ "../../../tools/guiEditor/dist/sharedComponents/messageDialog.js":
|
57178
|
-
/*!***********************************************************************!*\
|
57179
|
-
!*** ../../../tools/guiEditor/dist/sharedComponents/messageDialog.js ***!
|
57180
|
-
\***********************************************************************/
|
57181
|
-
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
57182
|
-
|
57183
|
-
"use strict";
|
57184
|
-
__webpack_require__.r(__webpack_exports__);
|
57185
|
-
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
57186
|
-
/* harmony export */ "MessageDialogComponent": () => (/* binding */ MessageDialogComponent)
|
57187
|
-
/* harmony export */ });
|
57188
|
-
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "../../../../node_modules/react/jsx-runtime.js");
|
57189
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "../../../../node_modules/react/index.js");
|
57190
|
-
|
57191
|
-
|
57192
|
-
class MessageDialogComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
57193
|
-
constructor(props) {
|
57194
|
-
super(props);
|
57195
|
-
this.state = { message: "", isError: false };
|
57196
|
-
this.props.globalState.onErrorMessageDialogRequiredObservable.add((message) => {
|
57197
|
-
this.setState({ message: message, isError: true });
|
57198
|
-
});
|
57199
|
-
}
|
57200
|
-
render() {
|
57201
|
-
if (!this.state.message) {
|
57202
|
-
return null;
|
57203
|
-
}
|
57204
|
-
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" })) }))] })) })));
|
57205
|
-
}
|
57206
|
-
}
|
57207
|
-
|
57208
|
-
|
57209
57296
|
/***/ }),
|
57210
57297
|
|
57211
57298
|
/***/ "../../../tools/guiEditor/dist/tools.js":
|
@@ -57318,7 +57405,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
57318
57405
|
/* harmony import */ var core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_Misc_dataStorage__WEBPACK_IMPORTED_MODULE_6__);
|
57319
57406
|
/* harmony import */ var _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./guiNodeTools */ "../../../tools/guiEditor/dist/guiNodeTools.js");
|
57320
57407
|
/* harmony import */ var _diagram_workbench__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./diagram/workbench */ "../../../tools/guiEditor/dist/diagram/workbench.js");
|
57321
|
-
/* harmony import */ var
|
57408
|
+
/* 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");
|
57322
57409
|
/* harmony import */ var _components_sceneExplorer_sceneExplorerComponent__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./components/sceneExplorer/sceneExplorerComponent */ "../../../tools/guiEditor/dist/components/sceneExplorer/sceneExplorerComponent.js");
|
57323
57410
|
/* harmony import */ var _components_commandBarComponent__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./components/commandBarComponent */ "../../../tools/guiEditor/dist/components/commandBarComponent.js");
|
57324
57411
|
/* harmony import */ var _diagram_gizmoWrapper__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./diagram/gizmoWrapper */ "../../../tools/guiEditor/dist/diagram/gizmoWrapper.js");
|
@@ -57463,6 +57550,7 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
57463
57550
|
this.state = {
|
57464
57551
|
showPreviewPopUp: false,
|
57465
57552
|
toolbarExpand: true,
|
57553
|
+
message: "",
|
57466
57554
|
};
|
57467
57555
|
this.props.globalState.onBackgroundColorChangeObservable.add(() => this.forceUpdate());
|
57468
57556
|
this.props.globalState.onDropObservable.add(() => {
|
@@ -57471,6 +57559,9 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
57471
57559
|
}
|
57472
57560
|
this._draggedItem = null;
|
57473
57561
|
});
|
57562
|
+
this._onErrorMessageObserver = this.props.globalState.onErrorMessageDialogRequiredObservable.add((message) => {
|
57563
|
+
this.setState({ message });
|
57564
|
+
});
|
57474
57565
|
}
|
57475
57566
|
componentDidMount() {
|
57476
57567
|
if (navigator.userAgent.indexOf("Mobile") !== -1) {
|
@@ -57482,14 +57573,15 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
57482
57573
|
componentWillUnmount() {
|
57483
57574
|
document.removeEventListener("keydown", this.addToolControls);
|
57484
57575
|
document.removeEventListener("keyup", this.removePressToolControls);
|
57576
|
+
if (this._onErrorMessageObserver) {
|
57577
|
+
this.props.globalState.onErrorMessageDialogRequiredObservable.remove(this._onErrorMessageObserver);
|
57578
|
+
}
|
57485
57579
|
}
|
57486
57580
|
showWaitScreen() {
|
57487
|
-
|
57488
|
-
(_a = this.props.globalState.hostDocument.querySelector(".wait-screen")) === null || _a === void 0 ? void 0 : _a.classList.remove("hidden");
|
57581
|
+
this.props.globalState.hostDocument.querySelector(".wait-screen")?.classList.remove("hidden");
|
57489
57582
|
}
|
57490
57583
|
hideWaitScreen() {
|
57491
|
-
|
57492
|
-
(_a = this.props.globalState.hostDocument.querySelector(".wait-screen")) === null || _a === void 0 ? void 0 : _a.classList.add("hidden");
|
57584
|
+
this.props.globalState.hostDocument.querySelector(".wait-screen")?.classList.add("hidden");
|
57493
57585
|
}
|
57494
57586
|
onPointerDown(evt) {
|
57495
57587
|
if (evt.button !== 0)
|
@@ -57534,13 +57626,13 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
57534
57626
|
}
|
57535
57627
|
render() {
|
57536
57628
|
const classForElement = this.state.toolbarExpand ? "left-panel" : "left-panel expand";
|
57537
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_4__.Portal,
|
57629
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_portal__WEBPACK_IMPORTED_MODULE_4__.Portal, { globalState: this.props.globalState, children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { id: "ge-header", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { 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", { id: "gui-editor-workbench-root", style: {
|
57538
57630
|
gridTemplateColumns: this.buildColumnLayout(),
|
57539
57631
|
}, onMouseDown: (evt) => {
|
57540
57632
|
if (evt.target.nodeName === "INPUT") {
|
57541
57633
|
return;
|
57542
57634
|
}
|
57543
|
-
}, ref: this._rootRef, onPointerUp: (evt) => this.onPointerUp(evt)
|
57635
|
+
}, ref: this._rootRef, onPointerUp: (evt) => this.onPointerUp(evt), children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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", { className: "diagram-container", onDrop: (event) => {
|
57544
57636
|
event.preventDefault();
|
57545
57637
|
this.props.globalState.onDropObservable.notifyObservers();
|
57546
57638
|
this.props.globalState.onParentingChangeObservable.notifyObservers(null);
|
@@ -57548,7 +57640,7 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
57548
57640
|
event.preventDefault();
|
57549
57641
|
}, style: {
|
57550
57642
|
backgroundColor: this.props.globalState.backgroundColor.toHexString(),
|
57551
|
-
}
|
57643
|
+
}, 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", { 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", { className: "blocker", children: "GUI Editor runs only on desktop" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "wait-screen hidden", children: "Processing...please wait" })] }));
|
57552
57644
|
}
|
57553
57645
|
onCreate(value) {
|
57554
57646
|
const guiElement = _guiNodeTools__WEBPACK_IMPORTED_MODULE_7__.GUINodeTools.CreateControlFromString(value);
|
@@ -57560,23 +57652,23 @@ class WorkbenchEditor extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
57560
57652
|
}
|
57561
57653
|
createBlackLine() {
|
57562
57654
|
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" });
|
57563
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
57655
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "blackLine", children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "arrow", onClick: () => this.switchExpandedState(), children: icon }) }));
|
57564
57656
|
}
|
57565
57657
|
createToolbarHelper(ct) {
|
57566
57658
|
return ct.map((type) => {
|
57567
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",
|
57659
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "toolbar-label", onDragStart: () => {
|
57568
57660
|
this._draggedItem = type.className;
|
57569
57661
|
}, onClick: () => {
|
57570
57662
|
this.onCreate(type.className);
|
57571
|
-
}, title: type.className
|
57663
|
+
}, title: type.className, children: type.icon && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "toolbar-icon", draggable: true, children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: type.icon, alt: type.className, width: "40px", height: "40px" }) })) }, type.className));
|
57572
57664
|
});
|
57573
57665
|
}
|
57574
57666
|
createToolbar() {
|
57575
57667
|
if (this.state.toolbarExpand) {
|
57576
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
57668
|
+
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", { className: "toolbarGrab", children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "toolbar-content-sub1", children: this.createToolbarHelper(_controlTypes__WEBPACK_IMPORTED_MODULE_14__.ControlTypes) })] }) }));
|
57577
57669
|
}
|
57578
57670
|
else {
|
57579
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",
|
57671
|
+
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", { className: "toolbarGrab expanded", children: [this.createBlackLine(), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { 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)))] })] }) }));
|
57580
57672
|
}
|
57581
57673
|
}
|
57582
57674
|
}
|
@@ -58022,6 +58114,61 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
|
|
58022
58114
|
/* 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);
|
58023
58115
|
|
58024
58116
|
|
58117
|
+
/***/ }),
|
58118
|
+
|
58119
|
+
/***/ "../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss":
|
58120
|
+
/*!**********************************************************************************!*\
|
58121
|
+
!*** ../../../dev/sharedUiComponents/dist/components/MessageDialog.modules.scss ***!
|
58122
|
+
\**********************************************************************************/
|
58123
|
+
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
58124
|
+
|
58125
|
+
"use strict";
|
58126
|
+
__webpack_require__.r(__webpack_exports__);
|
58127
|
+
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
58128
|
+
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
58129
|
+
/* harmony export */ });
|
58130
|
+
/* 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");
|
58131
|
+
/* 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__);
|
58132
|
+
/* 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");
|
58133
|
+
/* 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__);
|
58134
|
+
/* 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");
|
58135
|
+
/* 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__);
|
58136
|
+
/* 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");
|
58137
|
+
/* 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__);
|
58138
|
+
/* 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");
|
58139
|
+
/* 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__);
|
58140
|
+
/* 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");
|
58141
|
+
/* 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__);
|
58142
|
+
/* 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");
|
58143
|
+
|
58144
|
+
|
58145
|
+
|
58146
|
+
|
58147
|
+
|
58148
|
+
|
58149
|
+
|
58150
|
+
|
58151
|
+
|
58152
|
+
|
58153
|
+
|
58154
|
+
var options = {};
|
58155
|
+
|
58156
|
+
options.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());
|
58157
|
+
options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
|
58158
|
+
|
58159
|
+
options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
|
58160
|
+
|
58161
|
+
options.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
|
58162
|
+
options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
|
58163
|
+
|
58164
|
+
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);
|
58165
|
+
|
58166
|
+
|
58167
|
+
|
58168
|
+
|
58169
|
+
/* 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);
|
58170
|
+
|
58171
|
+
|
58025
58172
|
/***/ }),
|
58026
58173
|
|
58027
58174
|
/***/ "../../../dev/sharedUiComponents/dist/imgs/LineSpacingIcon.svg":
|