@babylonjs/node-editor 5.17.1 → 5.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -59,7 +59,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
59
59
|
|
|
60
60
|
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()));
|
|
61
61
|
// Module
|
|
62
|
-
___CSS_LOADER_EXPORT___.push([module.id, "#graph-canvas {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font: 14px \"acumin-pro\";\n user-select: none;\n overflow: hidden;\n cursor: move;\n background-image: linear-gradient(to right, #4f4e4f 1px, transparent 1px), linear-gradient(to bottom, #4f4e4f 1px, transparent 1px); }\n #graph-canvas #selection-container {\n pointer-events: none; }\n #graph-canvas #selection-container .selection-box {\n z-index: 10;\n position: absolute;\n background: rgba(72, 72, 196, 0.5);\n border: blue solid 2px; }\n #graph-canvas .port {\n border-radius: 20px;\n width: 20px;\n height: 20px;\n align-self: center; }\n #graph-canvas .port .img {\n width: 100%; }\n #graph-canvas .port img.selected {\n box-shadow: 0 0 0 2px;\n border-radius: 50%; }\n #graph-canvas .port:hover, #graph-canvas .port.selected {\n filter: brightness(2); }\n #graph-canvas .portLine {\n height: 24px;\n display: grid;\n grid-template-rows: 100%; }\n #graph-canvas .port-label {\n align-items: center; }\n #graph-canvas .inputsContainer {\n grid-row: 1;\n grid-column: 1; }\n #graph-canvas .inputsContainer .portLine {\n grid-template-columns: 12px calc(100% - 15px); }\n #graph-canvas .inputsContainer .portLine .port-label {\n grid-row: 1;\n grid-column: 2; }\n #graph-canvas .inputsContainer .portLine .port {\n grid-row: 1;\n grid-column: 1;\n transform: translateX(-12px); }\n #graph-canvas .outputsContainer {\n grid-row: 1;\n grid-column: 2; }\n #graph-canvas .outputsContainer .portLine {\n grid-template-columns: calc(100% - 10px) 12px; }\n #graph-canvas .outputsContainer .portLine .port-label {\n grid-row: 1;\n grid-column: 1;\n text-align: right; }\n #graph-canvas .outputsContainer .portLine .port {\n grid-row: 1;\n grid-column: 2;\n transform: translateX(2px); }\n #graph-canvas #graph-container {\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n transform-origin: left top;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%; }\n #graph-canvas #graph-container #frame-container {\n overflow: visible;\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%; }\n #graph-canvas #graph-container .frame-box {\n position: absolute;\n background: rgba(72, 72, 72, 0.7);\n display: grid;\n grid-template-rows: 40px calc(100% - 40px);\n grid-template-columns: 100%;\n box-sizing: border-box; }\n #graph-canvas #graph-container .frame-box.collapsed {\n height: auto !important;\n width: 200px !important;\n z-index: 3; }\n #graph-canvas #graph-container .frame-box.collapsed .frame-box-header {\n font-size: 16px;\n grid-template-columns: calc(100% - 37px) 30px 7px; }\n #graph-canvas #graph-container .frame-box.collapsed .frame-box-header .frame-box-header-collapse {\n margin-top: -2px; }\n #graph-canvas #graph-container .frame-box.collapsed .frame-box-header .frame-box-header-close {\n display: none; }\n #graph-canvas #graph-container .frame-box.collapsed .frame-comments.has-comments .frame-comment-span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden; }\n #graph-canvas #graph-container .frame-box .frame-box-border {\n grid-row: 1 / span 2;\n grid-column: 1;\n width: 100%;\n height: 100%;\n border: transparent solid 4px;\n pointer-events: none;\n box-sizing: border-box; }\n #graph-canvas #graph-container .frame-box .frame-box-header {\n grid-row: 1;\n grid-column: 1;\n background: #484848;\n color: white;\n font-size: 24px;\n text-align: center;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: calc(100% - 74px) 30px 7px 30px 7px;\n align-content: center;\n overflow: hidden; }\n #graph-canvas #graph-container .frame-box .frame-box-header .frame-box-header-button {\n cursor: pointer;\n align-self: center;\n transform-origin: 50% 50%;\n transform: scale(1);\n stroke: transparent;\n fill: white;\n display: grid; }\n #graph-canvas #graph-container .frame-box .frame-box-header .frame-box-header-button.down {\n transform: scale(0.9); }\n #graph-canvas #graph-container .frame-box .frame-box-header .frame-box-header-collapse {\n grid-column: 2;\n grid-row: 1; }\n #graph-canvas #graph-container .frame-box .frame-box-header .frame-box-header-close {\n grid-column: 4;\n grid-row: 1; }\n #graph-canvas #graph-container .frame-box .frame-box-header .frame-box-header-title {\n grid-column: 1;\n grid-row: 1;\n display: grid;\n height: 100%;\n width: 100%;\n align-self: stretch;\n align-items: center;\n margin-top: -2px; }\n #graph-canvas #graph-container .frame-box .port-container {\n margin-top: 6px;\n margin-bottom: 6px;\n margin-left: 4px;\n margin-right: 4px;\n color: white;\n grid-row: 2;\n grid-column: 1;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 50% 50%;\n z-index: 2; }\n #graph-canvas #graph-container .frame-box .frame-comments.has-comments {\n display: grid;\n grid-row: 2;\n grid-column: 1;\n padding: 0 10px;\n font-style: italic;\n word-wrap: break-word; }\n #graph-canvas #graph-container .frame-box.selected .frame-box-border {\n border-color: white; }\n #graph-canvas #graph-container .frame-box .right-handle {\n grid-area: 1 / 2 / 3 / 2;\n width: 4px;\n background-color: transparent;\n cursor: ew-resize; }\n #graph-canvas #graph-container .frame-box .right-handle::after {\n content: \"\";\n width: 8px;\n position: absolute;\n top: 0;\n bottom: 0;\n margin-left: -4px;\n cursor: ew-resize; }\n #graph-canvas #graph-container .frame-box .right-handle.collapsed {\n cursor: pointer; }\n #graph-canvas #graph-container .frame-box .top-right-corner-handle {\n background-color: transparent;\n height: 4px;\n z-index: 21;\n cursor: ne-resize;\n width: 4px;\n margin-left: -6px; }\n #graph-canvas #graph-container .frame-box .top-right-corner-handle::after {\n background-color: transparent;\n cursor: ne-resize;\n margin-left: unset;\n top: -4px;\n height: 10px;\n width: 10px; }\n #graph-canvas #graph-container .frame-box .bottom-right-corner-handle {\n background-color: transparent;\n height: 0px;\n z-index: 21;\n cursor: nw-resize;\n grid-area: 4 / 2 / 4 / 2;\n margin-left: -2px; }\n #graph-canvas #graph-container .frame-box .bottom-right-corner-handle::after {\n background-color: transparent;\n height: 10px;\n cursor: nw-resize;\n top: unset;\n bottom: -4px;\n width: 10px; }\n #graph-canvas #graph-container .frame-box .left-handle {\n grid-area: 1 / 1 / 3 / 1;\n width: 4px;\n background-color: transparent;\n cursor: ew-resize; }\n #graph-canvas #graph-container .frame-box .left-handle::before {\n content: \"\";\n width: 8px;\n position: absolute;\n top: 0;\n bottom: 0;\n margin-left: -4px; }\n #graph-canvas #graph-container .frame-box .top-left-corner-handle {\n background-color: transparent;\n height: 4px;\n z-index: 21;\n cursor: nw-resize;\n width: 4px;\n margin-left: -4px; }\n #graph-canvas #graph-container .frame-box .top-left-corner-handle::before {\n background-color: transparent;\n cursor: nw-resize;\n margin-left: unset;\n top: -4px;\n height: 10px;\n width: 10px; }\n #graph-canvas #graph-container .frame-box .bottom-left-corner-handle {\n background-color: transparent;\n height: 0px;\n z-index: 21;\n cursor: sw-resize;\n grid-area: 4 / 1 / 4 / 1; }\n #graph-canvas #graph-container .frame-box .bottom-left-corner-handle::before {\n background-color: transparent;\n height: 10px;\n cursor: sw-resize;\n top: unset;\n bottom: -4px;\n width: 10px; }\n #graph-canvas #graph-container .frame-box .top-handle {\n grid-area: 1 / 1 / 1 / 1;\n background-color: transparent;\n height: 4px;\n cursor: ns-resize; }\n #graph-canvas #graph-container .frame-box .top-handle::before {\n content: \"\";\n width: 100%;\n position: absolute;\n top: -4px;\n bottom: 100%;\n right: 0;\n left: 0;\n margin-bottom: -8px;\n cursor: ns-resize;\n height: 8px; }\n #graph-canvas #graph-container .frame-box .bottom-handle {\n grid-area: 3 / 1 / 3 / 1;\n background-color: transparent;\n height: 4px;\n cursor: ns-resize; }\n #graph-canvas #graph-container .frame-box .bottom-handle::after {\n content: \"\";\n width: 100%;\n position: absolute;\n top: 100%;\n bottom: 0;\n right: 0;\n left: 0;\n margin-top: -8px;\n cursor: ns-resize;\n height: 12px; }\n #graph-canvas #graph-container .frame-box.collapsed .top-handle,\n #graph-canvas #graph-container .frame-box.collapsed .top-right-corner-handle,\n #graph-canvas #graph-container .frame-box.collapsed .right-handle,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-right-corner-handle,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-handle,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-left-corner-handle,\n #graph-canvas #graph-container .frame-box.collapsed .left-handle,\n #graph-canvas #graph-container .frame-box.collapsed .top-left-corner-handle {\n cursor: default; }\n #graph-canvas #graph-container .frame-box.collapsed .right-handle::after,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-handle::after,\n #graph-canvas #graph-container .frame-box.collapsed .top-right-corner-handle::after,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-right-corner-handle::after {\n cursor: default; }\n #graph-canvas #graph-container .frame-box.collapsed .left-handle::before,\n #graph-canvas #graph-container .frame-box.collapsed .top-handle::before,\n #graph-canvas #graph-container .frame-box.collapsed .top-left-corner-handle::before,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-left-corner-handle::before {\n cursor: default; }\n #graph-canvas #graph-container #graph-svg-container {\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n z-index: 2;\n filter: drop-shadow(7px 6px 2px rgba(0, 0, 0, 0.2)); }\n #graph-canvas #graph-container #graph-svg-container .link {\n stroke-width: 4px; }\n #graph-canvas #graph-container #graph-svg-container .link.selected {\n stroke: white !important;\n stroke-dasharray: 10, 2; }\n #graph-canvas #graph-container #graph-svg-container .link.hidden {\n display: none; }\n #graph-canvas #graph-container #graph-svg-container .selection-link {\n pointer-events: all;\n stroke-width: 16px;\n opacity: 0;\n transition: opacity 75ms;\n stroke: transparent;\n cursor: pointer; }\n #graph-canvas #graph-container #graph-svg-container .selection-link.hidden {\n display: none; }\n #graph-canvas #graph-container #graph-svg-container .selection-link:hover, #graph-canvas #graph-container #graph-svg-container .selection-link.selected {\n stroke: white !important;\n opacity: 0.4; }\n #graph-canvas #graph-container #graph-canvas-container {\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%; }\n #graph-canvas #graph-container #graph-canvas-container .visual {\n z-index: 4;\n width: 200px;\n position: absolute;\n left: 0;\n top: 0;\n background: gray;\n border: 4px solid black;\n border-radius: 12px;\n display: grid;\n grid-template-rows: 30px auto;\n grid-template-columns: 100%;\n color: white;\n box-shadow: 7px 6px 2px rgba(0, 0, 0, 0.2); }\n #graph-canvas #graph-container #graph-canvas-container .visual.elbow-block {\n width: 40px;\n grid-template-rows: 0px 40px 0px;\n border: 0;\n border-radius: 40px;\n transform: translateY(-7px); }\n #graph-canvas #graph-container #graph-canvas-container .visual.elbow-block .selection-border {\n border-radius: 40px; }\n #graph-canvas #graph-container #graph-canvas-container .visual.elbow-block .header-container {\n display: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual.elbow-block .connections {\n transform: translateY(7px); }\n #graph-canvas #graph-container #graph-canvas-container .visual.elbow-block .content {\n display: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual.hidden {\n display: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual .comments {\n position: absolute;\n top: -50px;\n width: 200px;\n height: 45px;\n overflow: hidden;\n font-style: italic;\n opacity: 0.8;\n display: grid;\n align-items: flex-end;\n pointer-events: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual .selection-border {\n grid-row: 1 / span 3;\n grid-column: 1;\n margin: -4px;\n transition: border-color 100ms;\n border: 4px solid black;\n border-radius: 12px;\n transform: scale(1); }\n #graph-canvas #graph-container #graph-canvas-container .visual.selected .selection-border {\n border: 4px solid white; }\n #graph-canvas #graph-container #graph-canvas-container .visual .header-container {\n grid-row: 1;\n grid-column: 1;\n display: grid;\n grid-template-columns: 1fr auto;\n grid-template-rows: 100%;\n border: 4px solid black;\n border-top-right-radius: 7px;\n border-top-left-radius: 7px;\n background: black;\n color: white;\n transform: scaleX(1.01) translateY(-0.5px);\n transform-origin: center; }\n #graph-canvas #graph-container #graph-canvas-container .visual .header-container.constant {\n border-color: #464348;\n background: #464348; }\n #graph-canvas #graph-container #graph-canvas-container .visual .header-container.inspector {\n border-color: #66491b;\n background: #66491b; }\n #graph-canvas #graph-container #graph-canvas-container .visual .headerIcon {\n grid-row: 1;\n grid-column: 1;\n display: none;\n z-index: 10;\n justify-self: end;\n align-self: center;\n margin-right: 5px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .headerIcon.visible {\n display: grid;\n width: 20px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .header {\n grid-row: 1;\n grid-column: 1;\n font-size: 16px;\n text-align: center;\n margin-top: -1px;\n margin-left: -1px;\n margin-right: 20px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden; }\n #graph-canvas #graph-container #graph-canvas-container .visual .connections {\n grid-row: 2;\n grid-column: 1;\n display: grid;\n grid-template-columns: 50% 50%;\n transform: scale(1); }\n #graph-canvas #graph-container #graph-canvas-container .visual .content {\n min-height: 20px;\n grid-row: 3;\n grid-column: 1; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.input-block {\n grid-row: 2;\n min-height: 34px;\n text-align: center;\n font-size: 18px;\n font-weight: bold;\n margin: 0 10px 5px;\n display: grid;\n align-content: center; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.input-block.small-font {\n font-size: 17px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.output-block {\n min-height: 0px;\n height: 5px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.clamp-block {\n grid-row: 2;\n height: 34px;\n text-align: center;\n font-size: 18px;\n font-weight: bold;\n margin: 0 10px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.gradient-block {\n grid-row: 2;\n height: 34px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.texture-block {\n grid-row: 2;\n height: 140px;\n width: 140px;\n overflow: hidden;\n border-bottom-left-radius: 7px;\n border: black 4px solid;\n border-left: 0px;\n border-bottom: 0px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.texture-block img {\n width: 100%;\n height: 100%;\n pointer-events: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.texture-block img.empty {\n display: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.image-source-block {\n margin-top: 5px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.regular-texture-block {\n margin-top: 60px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.reduced-texture-block {\n margin-top: 30px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.reflection-block {\n grid-row: 3; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.remap-block {\n height: 34px;\n text-align: center;\n font-size: 18px;\n font-weight: bold;\n margin: 0 10px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.trigonometry-block {\n grid-row: 2;\n height: 34px;\n text-align: center;\n font-size: 18px;\n font-weight: bold;\n margin: 0 10px; }\n", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/scss/graphCanvas.scss"],"names":[],"mappings":"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","sourcesContent":["#graph-canvas {\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n font: 14px \"acumin-pro\";\r\n user-select: none;\r\n overflow: hidden;\r\n cursor: move;\r\n background-image: linear-gradient(to right, #4f4e4f 1px, transparent 1px), linear-gradient(to bottom, #4f4e4f 1px, transparent 1px);\r\n\r\n #selection-container {\r\n pointer-events: none;\r\n\r\n .selection-box {\r\n z-index: 10;\r\n position: absolute;\r\n background: rgba(72, 72, 196, 0.5);\r\n border: blue solid 2px;\r\n }\r\n }\r\n\r\n .port {\r\n border-radius: 20px;\r\n width: 20px;\r\n height: 20px;\r\n align-self: center;\r\n\r\n .img {\r\n width: 100%;\r\n }\r\n\r\n img.selected {\r\n box-shadow: 0 0 0 2px;\r\n border-radius: 50%;\r\n }\r\n\r\n &:hover,\r\n &.selected {\r\n filter: brightness(2);\r\n }\r\n }\r\n\r\n .portLine {\r\n height: 24px;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n }\r\n\r\n .port-label {\r\n align-items: center;\r\n }\r\n\r\n .inputsContainer {\r\n grid-row: 1;\r\n grid-column: 1;\r\n\r\n .portLine {\r\n grid-template-columns: 12px calc(100% - 15px);\r\n\r\n .port-label {\r\n grid-row: 1;\r\n grid-column: 2;\r\n }\r\n\r\n .port {\r\n grid-row: 1;\r\n grid-column: 1;\r\n transform: translateX(-12px);\r\n }\r\n }\r\n }\r\n\r\n .outputsContainer {\r\n grid-row: 1;\r\n grid-column: 2;\r\n\r\n .portLine {\r\n grid-template-columns: calc(100% - 10px) 12px;\r\n\r\n .port-label {\r\n grid-row: 1;\r\n grid-column: 1;\r\n text-align: right;\r\n }\r\n\r\n .port {\r\n grid-row: 1;\r\n grid-column: 2;\r\n transform: translateX(2px);\r\n }\r\n }\r\n }\r\n\r\n #graph-container {\r\n width: 100%;\r\n height: 100%;\r\n left: 0;\r\n top: 0;\r\n transform-origin: left top;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 100%;\r\n\r\n #frame-container {\r\n overflow: visible;\r\n grid-row: 1;\r\n grid-column: 1;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .frame-box {\r\n position: absolute;\r\n background: rgba(72, 72, 72, 0.7);\r\n display: grid;\r\n grid-template-rows: 40px calc(100% - 40px);\r\n grid-template-columns: 100%;\r\n box-sizing: border-box;\r\n\r\n &.collapsed {\r\n height: auto !important;\r\n width: 200px !important;\r\n z-index: 3;\r\n\r\n .frame-box-header {\r\n font-size: 16px;\r\n grid-template-columns: calc(100% - 37px) 30px 7px;\r\n\r\n .frame-box-header-collapse {\r\n margin-top: -2px;\r\n }\r\n\r\n .frame-box-header-close {\r\n display: none;\r\n }\r\n }\r\n\r\n .frame-comments.has-comments {\r\n .frame-comment-span {\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n }\r\n }\r\n }\r\n\r\n .frame-box-border {\r\n grid-row: 1 / span 2;\r\n grid-column: 1;\r\n width: 100%;\r\n height: 100%;\r\n border: transparent solid 4px;\r\n pointer-events: none;\r\n box-sizing: border-box;\r\n }\r\n\r\n .frame-box-header {\r\n grid-row: 1;\r\n grid-column: 1;\r\n background: rgba(72, 72, 72, 1);\r\n color: white;\r\n font-size: 24px;\r\n text-align: center;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: calc(100% - 74px) 30px 7px 30px 7px;\r\n align-content: center;\r\n overflow: hidden;\r\n\r\n .frame-box-header-button {\r\n cursor: pointer;\r\n align-self: center;\r\n transform-origin: 50% 50%;\r\n transform: scale(1);\r\n stroke: transparent;\r\n fill: white;\r\n display: grid;\r\n\r\n &.down {\r\n transform: scale(0.9);\r\n }\r\n }\r\n\r\n .frame-box-header-collapse {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n\r\n .frame-box-header-close {\r\n grid-column: 4;\r\n grid-row: 1;\r\n }\r\n\r\n .frame-box-header-title {\r\n grid-column: 1;\r\n grid-row: 1;\r\n display: grid;\r\n height: 100%;\r\n width: 100%;\r\n align-self: stretch;\r\n align-items: center;\r\n margin-top: -2px;\r\n }\r\n }\r\n\r\n .port-container {\r\n margin-top: 6px;\r\n margin-bottom: 6px;\r\n margin-left: 4px;\r\n margin-right: 4px;\r\n color: white;\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: 50% 50%;\r\n z-index: 2;\r\n }\r\n\r\n .frame-comments.has-comments {\r\n display: grid;\r\n grid-row: 2;\r\n grid-column: 1;\r\n padding: 0 10px;\r\n font-style: italic;\r\n word-wrap: break-word;\r\n }\r\n\r\n &.selected {\r\n .frame-box-border {\r\n border-color: white;\r\n }\r\n }\r\n\r\n .right-handle {\r\n grid-area: 1 / 2 / 3 / 2;\r\n width: 4px;\r\n background-color: transparent;\r\n cursor: ew-resize;\r\n\r\n &::after {\r\n content: \"\";\r\n width: 8px;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n margin-left: -4px;\r\n cursor: ew-resize;\r\n }\r\n\r\n &.collapsed {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n .top-right-corner-handle {\r\n background-color: transparent;\r\n height: 4px;\r\n z-index: 21;\r\n cursor: ne-resize;\r\n width: 4px;\r\n margin-left: -6px;\r\n\r\n &::after {\r\n background-color: transparent;\r\n cursor: ne-resize;\r\n margin-left: unset;\r\n top: -4px;\r\n height: 10px;\r\n width: 10px;\r\n }\r\n }\r\n\r\n .bottom-right-corner-handle {\r\n background-color: transparent;\r\n height: 0px;\r\n z-index: 21;\r\n cursor: nw-resize;\r\n grid-area: 4 / 2 / 4 / 2;\r\n margin-left: -2px;\r\n\r\n &::after {\r\n background-color: transparent;\r\n height: 10px;\r\n cursor: nw-resize;\r\n top: unset;\r\n bottom: -4px;\r\n width: 10px;\r\n }\r\n }\r\n\r\n .left-handle {\r\n grid-area: 1 / 1 / 3 / 1;\r\n width: 4px;\r\n background-color: transparent;\r\n cursor: ew-resize;\r\n\r\n &::before {\r\n content: \"\";\r\n width: 8px;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n margin-left: -4px;\r\n }\r\n }\r\n\r\n .top-left-corner-handle {\r\n background-color: transparent;\r\n height: 4px;\r\n z-index: 21;\r\n cursor: nw-resize;\r\n width: 4px;\r\n margin-left: -4px;\r\n\r\n &::before {\r\n background-color: transparent;\r\n cursor: nw-resize;\r\n margin-left: unset;\r\n top: -4px;\r\n height: 10px;\r\n width: 10px;\r\n }\r\n }\r\n\r\n .bottom-left-corner-handle {\r\n background-color: transparent;\r\n height: 0px;\r\n z-index: 21;\r\n cursor: sw-resize;\r\n grid-area: 4 / 1 / 4 / 1;\r\n\r\n &::before {\r\n background-color: transparent;\r\n height: 10px;\r\n cursor: sw-resize;\r\n top: unset;\r\n bottom: -4px;\r\n width: 10px;\r\n }\r\n }\r\n\r\n .top-handle {\r\n grid-area: 1 / 1 / 1 / 1;\r\n background-color: transparent;\r\n height: 4px;\r\n cursor: ns-resize;\r\n\r\n &::before {\r\n content: \"\";\r\n width: 100%;\r\n position: absolute;\r\n top: -4px;\r\n bottom: 100%;\r\n right: 0;\r\n left: 0;\r\n margin-bottom: -8px;\r\n cursor: ns-resize;\r\n height: 8px;\r\n }\r\n }\r\n\r\n .bottom-handle {\r\n grid-area: 3 / 1 / 3 / 1;\r\n background-color: transparent;\r\n height: 4px;\r\n cursor: ns-resize;\r\n\r\n &::after {\r\n content: \"\";\r\n width: 100%;\r\n position: absolute;\r\n top: 100%;\r\n bottom: 0;\r\n right: 0;\r\n left: 0;\r\n margin-top: -8px;\r\n cursor: ns-resize;\r\n height: 12px;\r\n }\r\n }\r\n\r\n &.collapsed {\r\n .top-handle,\r\n .top-right-corner-handle,\r\n .right-handle,\r\n .bottom-right-corner-handle,\r\n .bottom-handle,\r\n .bottom-left-corner-handle,\r\n .left-handle,\r\n .top-left-corner-handle {\r\n cursor: default;\r\n }\r\n\r\n .right-handle,\r\n .bottom-handle,\r\n .top-right-corner-handle,\r\n .bottom-right-corner-handle {\r\n &::after {\r\n cursor: default;\r\n }\r\n }\r\n\r\n .left-handle,\r\n .top-handle,\r\n .top-left-corner-handle,\r\n .bottom-left-corner-handle {\r\n &::before {\r\n cursor: default;\r\n }\r\n }\r\n }\r\n }\r\n\r\n #graph-svg-container {\r\n grid-row: 1;\r\n grid-column: 1;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow: visible;\r\n pointer-events: none;\r\n z-index: 2;\r\n filter: drop-shadow(7px 6px 2px rgba(0, 0, 0, 0.2));\r\n\r\n .link {\r\n stroke-width: 4px;\r\n &.selected {\r\n stroke: white !important;\r\n stroke-dasharray: 10, 2;\r\n }\r\n\r\n &.hidden {\r\n display: none;\r\n }\r\n }\r\n\r\n .selection-link {\r\n pointer-events: all;\r\n stroke-width: 16px;\r\n opacity: 0;\r\n transition: opacity 75ms;\r\n stroke: transparent;\r\n cursor: pointer;\r\n\r\n &.hidden {\r\n display: none;\r\n }\r\n\r\n &:hover,\r\n &.selected {\r\n stroke: white !important;\r\n opacity: 0.4;\r\n }\r\n }\r\n }\r\n\r\n #graph-canvas-container {\r\n grid-row: 1;\r\n grid-column: 1;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n\r\n .visual {\r\n z-index: 4;\r\n width: 200px;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n background: gray;\r\n border: 4px solid black;\r\n border-radius: 12px;\r\n display: grid;\r\n grid-template-rows: 30px auto;\r\n grid-template-columns: 100%;\r\n color: white;\r\n box-shadow: 7px 6px 2px rgba(0, 0, 0, 0.2);\r\n\r\n &.elbow-block {\r\n width: 40px;\r\n grid-template-rows: 0px 40px 0px;\r\n border: 0;\r\n border-radius: 40px;\r\n transform: translateY(-7px);\r\n\r\n .selection-border {\r\n border-radius: 40px;\r\n }\r\n\r\n .header-container {\r\n display: none;\r\n }\r\n\r\n .connections {\r\n transform: translateY(7px);\r\n }\r\n\r\n .content {\r\n display: none;\r\n }\r\n }\r\n\r\n &.hidden {\r\n display: none;\r\n }\r\n\r\n .comments {\r\n position: absolute;\r\n top: -50px;\r\n width: 200px;\r\n height: 45px;\r\n overflow: hidden;\r\n font-style: italic;\r\n opacity: 0.8;\r\n display: grid;\r\n align-items: flex-end;\r\n pointer-events: none;\r\n }\r\n\r\n .selection-border {\r\n grid-row: 1 / span 3;\r\n grid-column: 1;\r\n margin: -4px;\r\n\r\n transition: border-color 100ms;\r\n\r\n border: 4px solid black;\r\n border-radius: 12px;\r\n transform: scale(1);\r\n }\r\n\r\n &.selected {\r\n .selection-border {\r\n border: 4px solid white;\r\n }\r\n }\r\n\r\n .header-container {\r\n grid-row: 1;\r\n grid-column: 1;\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n grid-template-rows: 100%;\r\n border: 4px solid black;\r\n border-top-right-radius: 7px;\r\n border-top-left-radius: 7px;\r\n background: black;\r\n color: white;\r\n transform: scaleX(1.01) translateY(-0.5px);\r\n transform-origin: center;\r\n\r\n &.constant {\r\n border-color: #464348;\r\n background: #464348;\r\n }\r\n\r\n &.inspector {\r\n border-color: #66491b;\r\n background: #66491b;\r\n }\r\n }\r\n\r\n .headerIcon {\r\n grid-row: 1;\r\n grid-column: 1;\r\n display: none;\r\n z-index: 10;\r\n justify-self: end;\r\n align-self: center;\r\n margin-right: 5px;\r\n\r\n &.visible {\r\n display: grid;\r\n width: 20px;\r\n }\r\n }\r\n\r\n .header {\r\n grid-row: 1;\r\n grid-column: 1;\r\n font-size: 16px;\r\n text-align: center;\r\n margin-top: -1px;\r\n margin-left: -1px;\r\n margin-right: 20px;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n }\r\n\r\n .connections {\r\n grid-row: 2;\r\n grid-column: 1;\r\n\r\n display: grid;\r\n grid-template-columns: 50% 50%;\r\n transform: scale(1);\r\n }\r\n\r\n .content {\r\n min-height: 20px;\r\n grid-row: 3;\r\n grid-column: 1;\r\n\r\n &.input-block {\r\n grid-row: 2;\r\n min-height: 34px;\r\n text-align: center;\r\n font-size: 18px;\r\n font-weight: bold;\r\n margin: 0 10px 5px;\r\n display: grid;\r\n align-content: center;\r\n\r\n &.small-font {\r\n font-size: 17px;\r\n }\r\n }\r\n\r\n &.output-block {\r\n min-height: 0px;\r\n height: 5px;\r\n }\r\n\r\n &.clamp-block {\r\n grid-row: 2;\r\n height: 34px;\r\n text-align: center;\r\n font-size: 18px;\r\n font-weight: bold;\r\n margin: 0 10px;\r\n }\r\n\r\n &.gradient-block {\r\n grid-row: 2;\r\n height: 34px;\r\n }\r\n\r\n &.texture-block {\r\n grid-row: 2;\r\n height: 140px;\r\n width: 140px;\r\n overflow: hidden;\r\n border-bottom-left-radius: 7px;\r\n border: black 4px solid;\r\n border-left: 0px;\r\n border-bottom: 0px;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n\r\n &.empty {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n &.image-source-block {\r\n margin-top: 5px;\r\n }\r\n\r\n &.regular-texture-block {\r\n margin-top: 60px;\r\n }\r\n\r\n &.reduced-texture-block {\r\n margin-top: 30px;\r\n }\r\n\r\n &.reflection-block {\r\n grid-row: 3;\r\n }\r\n\r\n &.remap-block {\r\n height: 34px;\r\n text-align: center;\r\n font-size: 18px;\r\n font-weight: bold;\r\n margin: 0 10px;\r\n }\r\n\r\n &.trigonometry-block {\r\n grid-row: 2;\r\n height: 34px;\r\n text-align: center;\r\n font-size: 18px;\r\n font-weight: bold;\r\n margin: 0 10px;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"],"sourceRoot":""}]);
|
|
62
|
+
___CSS_LOADER_EXPORT___.push([module.id, "#graph-canvas {\n width: 100%;\n height: 100%;\n margin: 0;\n padding: 0;\n font: 14px \"acumin-pro\";\n user-select: none;\n overflow: hidden;\n cursor: move;\n background-image: linear-gradient(to right, #4f4e4f 1px, transparent 1px), linear-gradient(to bottom, #4f4e4f 1px, transparent 1px); }\n #graph-canvas #selection-container {\n pointer-events: none; }\n #graph-canvas #selection-container .selection-box {\n z-index: 10;\n position: absolute;\n background: rgba(72, 72, 196, 0.5);\n border: blue solid 2px; }\n #graph-canvas .port {\n border-radius: 20px;\n width: 20px;\n height: 20px;\n align-self: center; }\n #graph-canvas .port .img {\n width: 100%; }\n #graph-canvas .port img.selected {\n box-shadow: 0 0 0 2px;\n border-radius: 50%; }\n #graph-canvas .port:hover, #graph-canvas .port.selected {\n filter: brightness(2); }\n #graph-canvas .portLine {\n height: 24px;\n display: grid;\n grid-template-rows: 100%; }\n #graph-canvas .port-label {\n align-items: center; }\n #graph-canvas .inputsContainer {\n grid-row: 1;\n grid-column: 1; }\n #graph-canvas .inputsContainer .portLine {\n grid-template-columns: 12px calc(100% - 15px); }\n #graph-canvas .inputsContainer .portLine .port-label {\n grid-row: 1;\n grid-column: 2; }\n #graph-canvas .inputsContainer .portLine .port {\n grid-row: 1;\n grid-column: 1;\n transform: translateX(-12px); }\n #graph-canvas .outputsContainer {\n grid-row: 1;\n grid-column: 2; }\n #graph-canvas .outputsContainer .portLine {\n grid-template-columns: calc(100% - 10px) 12px; }\n #graph-canvas .outputsContainer .portLine .port-label {\n grid-row: 1;\n grid-column: 1;\n text-align: right; }\n #graph-canvas .outputsContainer .portLine .port {\n grid-row: 1;\n grid-column: 2;\n transform: translateX(2px); }\n #graph-canvas #graph-container {\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n transform-origin: left top;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 100%; }\n #graph-canvas #graph-container #frame-container {\n overflow: visible;\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%; }\n #graph-canvas #graph-container .frame-box {\n position: absolute;\n background: rgba(72, 72, 72, 0.7);\n display: grid;\n grid-template-rows: 40px calc(100% - 40px);\n grid-template-columns: 100%;\n box-sizing: border-box; }\n #graph-canvas #graph-container .frame-box.collapsed {\n height: auto !important;\n width: 200px !important;\n z-index: 3; }\n #graph-canvas #graph-container .frame-box.collapsed .frame-box-header {\n font-size: 16px;\n grid-template-columns: calc(100% - 37px) 30px 7px; }\n #graph-canvas #graph-container .frame-box.collapsed .frame-box-header .frame-box-header-collapse {\n margin-top: -2px; }\n #graph-canvas #graph-container .frame-box.collapsed .frame-box-header .frame-box-header-close {\n display: none; }\n #graph-canvas #graph-container .frame-box.collapsed .frame-comments.has-comments .frame-comment-span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden; }\n #graph-canvas #graph-container .frame-box .frame-box-border {\n grid-row: 1 / span 2;\n grid-column: 1;\n width: 100%;\n height: 100%;\n border: transparent solid 4px;\n pointer-events: none;\n box-sizing: border-box; }\n #graph-canvas #graph-container .frame-box .frame-box-header {\n grid-row: 1;\n grid-column: 1;\n background: #484848;\n color: white;\n font-size: 24px;\n text-align: center;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: calc(100% - 74px) 30px 7px 30px 7px;\n align-content: center;\n overflow: hidden; }\n #graph-canvas #graph-container .frame-box .frame-box-header .frame-box-header-button {\n cursor: pointer;\n align-self: center;\n transform-origin: 50% 50%;\n transform: scale(1);\n stroke: transparent;\n fill: white;\n display: grid; }\n #graph-canvas #graph-container .frame-box .frame-box-header .frame-box-header-button.down {\n transform: scale(0.9); }\n #graph-canvas #graph-container .frame-box .frame-box-header .frame-box-header-collapse {\n grid-column: 2;\n grid-row: 1; }\n #graph-canvas #graph-container .frame-box .frame-box-header .frame-box-header-close {\n grid-column: 4;\n grid-row: 1; }\n #graph-canvas #graph-container .frame-box .frame-box-header .frame-box-header-title {\n grid-column: 1;\n grid-row: 1;\n display: grid;\n height: 100%;\n width: 100%;\n align-self: stretch;\n align-items: center;\n margin-top: -2px; }\n #graph-canvas #graph-container .frame-box .port-container {\n margin-top: 6px;\n margin-bottom: 6px;\n margin-left: 4px;\n margin-right: 4px;\n color: white;\n grid-row: 2;\n grid-column: 1;\n display: grid;\n grid-template-rows: 100%;\n grid-template-columns: 50% 50%;\n z-index: 2; }\n #graph-canvas #graph-container .frame-box .frame-comments.has-comments {\n display: grid;\n grid-row: 2;\n grid-column: 1;\n padding: 0 10px;\n font-style: italic;\n word-wrap: break-word; }\n #graph-canvas #graph-container .frame-box.selected .frame-box-border {\n border-color: white; }\n #graph-canvas #graph-container .frame-box .right-handle {\n grid-area: 1 / 2 / 3 / 2;\n width: 4px;\n background-color: transparent;\n cursor: ew-resize; }\n #graph-canvas #graph-container .frame-box .right-handle::after {\n content: \"\";\n width: 8px;\n position: absolute;\n top: 0;\n bottom: 0;\n margin-left: -4px;\n cursor: ew-resize; }\n #graph-canvas #graph-container .frame-box .right-handle.collapsed {\n cursor: pointer; }\n #graph-canvas #graph-container .frame-box .top-right-corner-handle {\n background-color: transparent;\n height: 4px;\n z-index: 21;\n cursor: ne-resize;\n width: 4px;\n margin-left: -6px; }\n #graph-canvas #graph-container .frame-box .top-right-corner-handle::after {\n background-color: transparent;\n cursor: ne-resize;\n margin-left: unset;\n top: -4px;\n height: 10px;\n width: 10px; }\n #graph-canvas #graph-container .frame-box .bottom-right-corner-handle {\n background-color: transparent;\n height: 0px;\n z-index: 21;\n cursor: nw-resize;\n grid-area: 4 / 2 / 4 / 2;\n margin-left: -2px; }\n #graph-canvas #graph-container .frame-box .bottom-right-corner-handle::after {\n background-color: transparent;\n height: 10px;\n cursor: nw-resize;\n top: unset;\n bottom: -4px;\n width: 10px; }\n #graph-canvas #graph-container .frame-box .left-handle {\n grid-area: 1 / 1 / 3 / 1;\n width: 4px;\n background-color: transparent;\n cursor: ew-resize; }\n #graph-canvas #graph-container .frame-box .left-handle::before {\n content: \"\";\n width: 8px;\n position: absolute;\n top: 0;\n bottom: 0;\n margin-left: -4px; }\n #graph-canvas #graph-container .frame-box .top-left-corner-handle {\n background-color: transparent;\n height: 4px;\n z-index: 21;\n cursor: nw-resize;\n width: 4px;\n margin-left: -4px; }\n #graph-canvas #graph-container .frame-box .top-left-corner-handle::before {\n background-color: transparent;\n cursor: nw-resize;\n margin-left: unset;\n top: -4px;\n height: 10px;\n width: 10px; }\n #graph-canvas #graph-container .frame-box .bottom-left-corner-handle {\n background-color: transparent;\n height: 0px;\n z-index: 21;\n cursor: sw-resize;\n grid-area: 4 / 1 / 4 / 1; }\n #graph-canvas #graph-container .frame-box .bottom-left-corner-handle::before {\n background-color: transparent;\n height: 10px;\n cursor: sw-resize;\n top: unset;\n bottom: -4px;\n width: 10px; }\n #graph-canvas #graph-container .frame-box .top-handle {\n grid-area: 1 / 1 / 1 / 1;\n background-color: transparent;\n height: 4px;\n cursor: ns-resize; }\n #graph-canvas #graph-container .frame-box .top-handle::before {\n content: \"\";\n width: 100%;\n position: absolute;\n top: -4px;\n bottom: 100%;\n right: 0;\n left: 0;\n margin-bottom: -8px;\n cursor: ns-resize;\n height: 8px; }\n #graph-canvas #graph-container .frame-box .bottom-handle {\n grid-area: 3 / 1 / 3 / 1;\n background-color: transparent;\n height: 4px;\n cursor: ns-resize; }\n #graph-canvas #graph-container .frame-box .bottom-handle::after {\n content: \"\";\n width: 100%;\n position: absolute;\n top: 100%;\n bottom: 0;\n right: 0;\n left: 0;\n margin-top: -8px;\n cursor: ns-resize;\n height: 12px; }\n #graph-canvas #graph-container .frame-box.collapsed .top-handle,\n #graph-canvas #graph-container .frame-box.collapsed .top-right-corner-handle,\n #graph-canvas #graph-container .frame-box.collapsed .right-handle,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-right-corner-handle,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-handle,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-left-corner-handle,\n #graph-canvas #graph-container .frame-box.collapsed .left-handle,\n #graph-canvas #graph-container .frame-box.collapsed .top-left-corner-handle {\n cursor: default; }\n #graph-canvas #graph-container .frame-box.collapsed .right-handle::after,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-handle::after,\n #graph-canvas #graph-container .frame-box.collapsed .top-right-corner-handle::after,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-right-corner-handle::after {\n cursor: default; }\n #graph-canvas #graph-container .frame-box.collapsed .left-handle::before,\n #graph-canvas #graph-container .frame-box.collapsed .top-handle::before,\n #graph-canvas #graph-container .frame-box.collapsed .top-left-corner-handle::before,\n #graph-canvas #graph-container .frame-box.collapsed .bottom-left-corner-handle::before {\n cursor: default; }\n #graph-canvas #graph-container #graph-svg-container {\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%;\n overflow: visible;\n pointer-events: none;\n z-index: 2;\n filter: drop-shadow(7px 6px 2px rgba(0, 0, 0, 0.2)); }\n #graph-canvas #graph-container #graph-svg-container .link {\n stroke-width: 4px; }\n #graph-canvas #graph-container #graph-svg-container .link.selected {\n stroke: white !important;\n stroke-dasharray: 10, 2; }\n #graph-canvas #graph-container #graph-svg-container .link.target-candidate {\n filter: brightness(1.5);\n stroke-width: 6px; }\n #graph-canvas #graph-container #graph-svg-container .link.hidden {\n display: none; }\n #graph-canvas #graph-container #graph-svg-container .selection-link {\n pointer-events: all;\n stroke-width: 16px;\n opacity: 0;\n transition: opacity 75ms;\n stroke: transparent;\n cursor: pointer; }\n #graph-canvas #graph-container #graph-svg-container .selection-link.hidden {\n display: none; }\n #graph-canvas #graph-container #graph-svg-container .selection-link:hover, #graph-canvas #graph-container #graph-svg-container .selection-link.selected {\n stroke: white !important;\n opacity: 0.4; }\n #graph-canvas #graph-container #graph-canvas-container {\n grid-row: 1;\n grid-column: 1;\n position: relative;\n width: 100%;\n height: 100%; }\n #graph-canvas #graph-container #graph-canvas-container .visual {\n z-index: 4;\n width: 200px;\n position: absolute;\n left: 0;\n top: 0;\n background: gray;\n border: 4px solid black;\n border-radius: 12px;\n display: grid;\n grid-template-rows: 30px auto;\n grid-template-columns: 100%;\n color: white;\n box-shadow: 7px 6px 2px rgba(0, 0, 0, 0.2); }\n #graph-canvas #graph-container #graph-canvas-container .visual.elbow-block {\n width: 40px;\n grid-template-rows: 0px 40px 0px;\n border: 0;\n border-radius: 40px;\n transform: translateY(-7px); }\n #graph-canvas #graph-container #graph-canvas-container .visual.elbow-block .selection-border {\n border-radius: 40px; }\n #graph-canvas #graph-container #graph-canvas-container .visual.elbow-block .header-container {\n display: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual.elbow-block .connections {\n transform: translateY(7px); }\n #graph-canvas #graph-container #graph-canvas-container .visual.elbow-block .content {\n display: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual.hidden {\n display: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual .comments {\n position: absolute;\n top: -50px;\n width: 200px;\n height: 45px;\n overflow: hidden;\n font-style: italic;\n opacity: 0.8;\n display: grid;\n align-items: flex-end;\n pointer-events: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual .selection-border {\n grid-row: 1 / span 3;\n grid-column: 1;\n margin: -4px;\n transition: border-color 100ms;\n border: 4px solid black;\n border-radius: 12px;\n transform: scale(1); }\n #graph-canvas #graph-container #graph-canvas-container .visual.selected .selection-border {\n border: 4px solid white; }\n #graph-canvas #graph-container #graph-canvas-container .visual .header-container {\n grid-row: 1;\n grid-column: 1;\n display: grid;\n grid-template-columns: 1fr auto;\n grid-template-rows: 100%;\n border: 4px solid black;\n border-top-right-radius: 7px;\n border-top-left-radius: 7px;\n background: black;\n color: white;\n transform: scaleX(1.01) translateY(-0.5px);\n transform-origin: center; }\n #graph-canvas #graph-container #graph-canvas-container .visual .header-container.constant {\n border-color: #464348;\n background: #464348; }\n #graph-canvas #graph-container #graph-canvas-container .visual .header-container.inspector {\n border-color: #66491b;\n background: #66491b; }\n #graph-canvas #graph-container #graph-canvas-container .visual .headerIcon {\n grid-row: 1;\n grid-column: 1;\n display: none;\n z-index: 10;\n justify-self: end;\n align-self: center;\n margin-right: 5px;\n user-select: none;\n pointer-events: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual .headerIcon.visible {\n display: grid;\n width: 20px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .header {\n grid-row: 1;\n grid-column: 1;\n font-size: 16px;\n text-align: center;\n margin-top: -1px;\n margin-left: -1px;\n margin-right: 20px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden; }\n #graph-canvas #graph-container #graph-canvas-container .visual .connections {\n grid-row: 2;\n grid-column: 1;\n display: grid;\n grid-template-columns: 50% 50%;\n transform: scale(1); }\n #graph-canvas #graph-container #graph-canvas-container .visual .content {\n min-height: 20px;\n grid-row: 3;\n grid-column: 1; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.input-block {\n grid-row: 2;\n min-height: 34px;\n text-align: center;\n font-size: 18px;\n font-weight: bold;\n margin: 0 10px 5px;\n display: grid;\n align-content: center; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.input-block.small-font {\n font-size: 17px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.output-block {\n min-height: 0px;\n height: 5px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.clamp-block {\n grid-row: 2;\n height: 34px;\n text-align: center;\n font-size: 18px;\n font-weight: bold;\n margin: 0 10px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.gradient-block {\n grid-row: 2;\n height: 34px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.texture-block {\n grid-row: 2;\n height: 140px;\n width: 140px;\n overflow: hidden;\n border-bottom-left-radius: 7px;\n border: black 4px solid;\n border-left: 0px;\n border-bottom: 0px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.texture-block img {\n width: 100%;\n height: 100%;\n pointer-events: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.texture-block img.empty {\n display: none; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.image-source-block {\n margin-top: 5px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.regular-texture-block {\n margin-top: 60px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.reduced-texture-block {\n margin-top: 30px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.reflection-block {\n grid-row: 3; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.remap-block {\n height: 34px;\n text-align: center;\n font-size: 18px;\n font-weight: bold;\n margin: 0 10px; }\n #graph-canvas #graph-container #graph-canvas-container .visual .content.trigonometry-block {\n grid-row: 2;\n height: 34px;\n text-align: center;\n font-size: 18px;\n font-weight: bold;\n margin: 0 10px; }\n", "",{"version":3,"sources":["webpack://./../../../dev/sharedUiComponents/dist/nodeGraphSystem/scss/graphCanvas.scss"],"names":[],"mappings":"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","sourcesContent":["#graph-canvas {\r\n width: 100%;\r\n height: 100%;\r\n margin: 0;\r\n padding: 0;\r\n font: 14px \"acumin-pro\";\r\n user-select: none;\r\n overflow: hidden;\r\n cursor: move;\r\n background-image: linear-gradient(to right, #4f4e4f 1px, transparent 1px), linear-gradient(to bottom, #4f4e4f 1px, transparent 1px);\r\n\r\n #selection-container {\r\n pointer-events: none;\r\n\r\n .selection-box {\r\n z-index: 10;\r\n position: absolute;\r\n background: rgba(72, 72, 196, 0.5);\r\n border: blue solid 2px;\r\n }\r\n }\r\n\r\n .port {\r\n border-radius: 20px;\r\n width: 20px;\r\n height: 20px;\r\n align-self: center;\r\n\r\n .img {\r\n width: 100%;\r\n }\r\n\r\n img.selected {\r\n box-shadow: 0 0 0 2px;\r\n border-radius: 50%;\r\n }\r\n\r\n &:hover,\r\n &.selected {\r\n filter: brightness(2);\r\n }\r\n }\r\n\r\n .portLine {\r\n height: 24px;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n }\r\n\r\n .port-label {\r\n align-items: center;\r\n }\r\n\r\n .inputsContainer {\r\n grid-row: 1;\r\n grid-column: 1;\r\n\r\n .portLine {\r\n grid-template-columns: 12px calc(100% - 15px);\r\n\r\n .port-label {\r\n grid-row: 1;\r\n grid-column: 2;\r\n }\r\n\r\n .port {\r\n grid-row: 1;\r\n grid-column: 1;\r\n transform: translateX(-12px);\r\n }\r\n }\r\n }\r\n\r\n .outputsContainer {\r\n grid-row: 1;\r\n grid-column: 2;\r\n\r\n .portLine {\r\n grid-template-columns: calc(100% - 10px) 12px;\r\n\r\n .port-label {\r\n grid-row: 1;\r\n grid-column: 1;\r\n text-align: right;\r\n }\r\n\r\n .port {\r\n grid-row: 1;\r\n grid-column: 2;\r\n transform: translateX(2px);\r\n }\r\n }\r\n }\r\n\r\n #graph-container {\r\n width: 100%;\r\n height: 100%;\r\n left: 0;\r\n top: 0;\r\n transform-origin: left top;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: 100%;\r\n\r\n #frame-container {\r\n overflow: visible;\r\n grid-row: 1;\r\n grid-column: 1;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .frame-box {\r\n position: absolute;\r\n background: rgba(72, 72, 72, 0.7);\r\n display: grid;\r\n grid-template-rows: 40px calc(100% - 40px);\r\n grid-template-columns: 100%;\r\n box-sizing: border-box;\r\n\r\n &.collapsed {\r\n height: auto !important;\r\n width: 200px !important;\r\n z-index: 3;\r\n\r\n .frame-box-header {\r\n font-size: 16px;\r\n grid-template-columns: calc(100% - 37px) 30px 7px;\r\n\r\n .frame-box-header-collapse {\r\n margin-top: -2px;\r\n }\r\n\r\n .frame-box-header-close {\r\n display: none;\r\n }\r\n }\r\n\r\n .frame-comments.has-comments {\r\n .frame-comment-span {\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n }\r\n }\r\n }\r\n\r\n .frame-box-border {\r\n grid-row: 1 / span 2;\r\n grid-column: 1;\r\n width: 100%;\r\n height: 100%;\r\n border: transparent solid 4px;\r\n pointer-events: none;\r\n box-sizing: border-box;\r\n }\r\n\r\n .frame-box-header {\r\n grid-row: 1;\r\n grid-column: 1;\r\n background: rgba(72, 72, 72, 1);\r\n color: white;\r\n font-size: 24px;\r\n text-align: center;\r\n display: grid;\r\n grid-template-rows: 100%;\r\n grid-template-columns: calc(100% - 74px) 30px 7px 30px 7px;\r\n align-content: center;\r\n overflow: hidden;\r\n\r\n .frame-box-header-button {\r\n cursor: pointer;\r\n align-self: center;\r\n transform-origin: 50% 50%;\r\n transform: scale(1);\r\n stroke: transparent;\r\n fill: white;\r\n display: grid;\r\n\r\n &.down {\r\n transform: scale(0.9);\r\n }\r\n }\r\n\r\n .frame-box-header-collapse {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n\r\n .frame-box-header-close {\r\n grid-column: 4;\r\n grid-row: 1;\r\n }\r\n\r\n .frame-box-header-title {\r\n grid-column: 1;\r\n grid-row: 1;\r\n display: grid;\r\n height: 100%;\r\n width: 100%;\r\n align-self: stretch;\r\n align-items: center;\r\n margin-top: -2px;\r\n }\r\n }\r\n\r\n .port-container {\r\n margin-top: 6px;\r\n margin-bottom: 6px;\r\n margin-left: 4px;\r\n margin-right: 4px;\r\n color: white;\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: 50% 50%;\r\n z-index: 2;\r\n }\r\n\r\n .frame-comments.has-comments {\r\n display: grid;\r\n grid-row: 2;\r\n grid-column: 1;\r\n padding: 0 10px;\r\n font-style: italic;\r\n word-wrap: break-word;\r\n }\r\n\r\n &.selected {\r\n .frame-box-border {\r\n border-color: white;\r\n }\r\n }\r\n\r\n .right-handle {\r\n grid-area: 1 / 2 / 3 / 2;\r\n width: 4px;\r\n background-color: transparent;\r\n cursor: ew-resize;\r\n\r\n &::after {\r\n content: \"\";\r\n width: 8px;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n margin-left: -4px;\r\n cursor: ew-resize;\r\n }\r\n\r\n &.collapsed {\r\n cursor: pointer;\r\n }\r\n }\r\n\r\n .top-right-corner-handle {\r\n background-color: transparent;\r\n height: 4px;\r\n z-index: 21;\r\n cursor: ne-resize;\r\n width: 4px;\r\n margin-left: -6px;\r\n\r\n &::after {\r\n background-color: transparent;\r\n cursor: ne-resize;\r\n margin-left: unset;\r\n top: -4px;\r\n height: 10px;\r\n width: 10px;\r\n }\r\n }\r\n\r\n .bottom-right-corner-handle {\r\n background-color: transparent;\r\n height: 0px;\r\n z-index: 21;\r\n cursor: nw-resize;\r\n grid-area: 4 / 2 / 4 / 2;\r\n margin-left: -2px;\r\n\r\n &::after {\r\n background-color: transparent;\r\n height: 10px;\r\n cursor: nw-resize;\r\n top: unset;\r\n bottom: -4px;\r\n width: 10px;\r\n }\r\n }\r\n\r\n .left-handle {\r\n grid-area: 1 / 1 / 3 / 1;\r\n width: 4px;\r\n background-color: transparent;\r\n cursor: ew-resize;\r\n\r\n &::before {\r\n content: \"\";\r\n width: 8px;\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n margin-left: -4px;\r\n }\r\n }\r\n\r\n .top-left-corner-handle {\r\n background-color: transparent;\r\n height: 4px;\r\n z-index: 21;\r\n cursor: nw-resize;\r\n width: 4px;\r\n margin-left: -4px;\r\n\r\n &::before {\r\n background-color: transparent;\r\n cursor: nw-resize;\r\n margin-left: unset;\r\n top: -4px;\r\n height: 10px;\r\n width: 10px;\r\n }\r\n }\r\n\r\n .bottom-left-corner-handle {\r\n background-color: transparent;\r\n height: 0px;\r\n z-index: 21;\r\n cursor: sw-resize;\r\n grid-area: 4 / 1 / 4 / 1;\r\n\r\n &::before {\r\n background-color: transparent;\r\n height: 10px;\r\n cursor: sw-resize;\r\n top: unset;\r\n bottom: -4px;\r\n width: 10px;\r\n }\r\n }\r\n\r\n .top-handle {\r\n grid-area: 1 / 1 / 1 / 1;\r\n background-color: transparent;\r\n height: 4px;\r\n cursor: ns-resize;\r\n\r\n &::before {\r\n content: \"\";\r\n width: 100%;\r\n position: absolute;\r\n top: -4px;\r\n bottom: 100%;\r\n right: 0;\r\n left: 0;\r\n margin-bottom: -8px;\r\n cursor: ns-resize;\r\n height: 8px;\r\n }\r\n }\r\n\r\n .bottom-handle {\r\n grid-area: 3 / 1 / 3 / 1;\r\n background-color: transparent;\r\n height: 4px;\r\n cursor: ns-resize;\r\n\r\n &::after {\r\n content: \"\";\r\n width: 100%;\r\n position: absolute;\r\n top: 100%;\r\n bottom: 0;\r\n right: 0;\r\n left: 0;\r\n margin-top: -8px;\r\n cursor: ns-resize;\r\n height: 12px;\r\n }\r\n }\r\n\r\n &.collapsed {\r\n .top-handle,\r\n .top-right-corner-handle,\r\n .right-handle,\r\n .bottom-right-corner-handle,\r\n .bottom-handle,\r\n .bottom-left-corner-handle,\r\n .left-handle,\r\n .top-left-corner-handle {\r\n cursor: default;\r\n }\r\n\r\n .right-handle,\r\n .bottom-handle,\r\n .top-right-corner-handle,\r\n .bottom-right-corner-handle {\r\n &::after {\r\n cursor: default;\r\n }\r\n }\r\n\r\n .left-handle,\r\n .top-handle,\r\n .top-left-corner-handle,\r\n .bottom-left-corner-handle {\r\n &::before {\r\n cursor: default;\r\n }\r\n }\r\n }\r\n }\r\n\r\n #graph-svg-container {\r\n grid-row: 1;\r\n grid-column: 1;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow: visible;\r\n pointer-events: none;\r\n z-index: 2;\r\n filter: drop-shadow(7px 6px 2px rgba(0, 0, 0, 0.2));\r\n\r\n .link {\r\n stroke-width: 4px;\r\n &.selected {\r\n stroke: white !important;\r\n stroke-dasharray: 10, 2;\r\n }\r\n\r\n &.target-candidate {\r\n filter: brightness(1.5);\r\n stroke-width: 6px;\r\n }\r\n\r\n &.hidden {\r\n display: none;\r\n }\r\n }\r\n\r\n .selection-link {\r\n pointer-events: all;\r\n stroke-width: 16px;\r\n opacity: 0;\r\n transition: opacity 75ms;\r\n stroke: transparent;\r\n cursor: pointer;\r\n\r\n &.hidden {\r\n display: none;\r\n }\r\n\r\n &:hover,\r\n &.selected {\r\n stroke: white !important;\r\n opacity: 0.4;\r\n }\r\n }\r\n }\r\n\r\n #graph-canvas-container {\r\n grid-row: 1;\r\n grid-column: 1;\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n\r\n .visual {\r\n z-index: 4;\r\n width: 200px;\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n background: gray;\r\n border: 4px solid black;\r\n border-radius: 12px;\r\n display: grid;\r\n grid-template-rows: 30px auto;\r\n grid-template-columns: 100%;\r\n color: white;\r\n box-shadow: 7px 6px 2px rgba(0, 0, 0, 0.2);\r\n\r\n &.elbow-block {\r\n width: 40px;\r\n grid-template-rows: 0px 40px 0px;\r\n border: 0;\r\n border-radius: 40px;\r\n transform: translateY(-7px);\r\n\r\n .selection-border {\r\n border-radius: 40px;\r\n }\r\n\r\n .header-container {\r\n display: none;\r\n }\r\n\r\n .connections {\r\n transform: translateY(7px);\r\n }\r\n\r\n .content {\r\n display: none;\r\n }\r\n }\r\n\r\n &.hidden {\r\n display: none;\r\n }\r\n\r\n .comments {\r\n position: absolute;\r\n top: -50px;\r\n width: 200px;\r\n height: 45px;\r\n overflow: hidden;\r\n font-style: italic;\r\n opacity: 0.8;\r\n display: grid;\r\n align-items: flex-end;\r\n pointer-events: none;\r\n }\r\n\r\n .selection-border {\r\n grid-row: 1 / span 3;\r\n grid-column: 1;\r\n margin: -4px;\r\n\r\n transition: border-color 100ms;\r\n\r\n border: 4px solid black;\r\n border-radius: 12px;\r\n transform: scale(1);\r\n }\r\n\r\n &.selected {\r\n .selection-border {\r\n border: 4px solid white;\r\n }\r\n }\r\n\r\n .header-container {\r\n grid-row: 1;\r\n grid-column: 1;\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n grid-template-rows: 100%;\r\n border: 4px solid black;\r\n border-top-right-radius: 7px;\r\n border-top-left-radius: 7px;\r\n background: black;\r\n color: white;\r\n transform: scaleX(1.01) translateY(-0.5px);\r\n transform-origin: center;\r\n\r\n &.constant {\r\n border-color: #464348;\r\n background: #464348;\r\n }\r\n\r\n &.inspector {\r\n border-color: #66491b;\r\n background: #66491b;\r\n }\r\n }\r\n\r\n .headerIcon {\r\n grid-row: 1;\r\n grid-column: 1;\r\n display: none;\r\n z-index: 10;\r\n justify-self: end;\r\n align-self: center;\r\n margin-right: 5px;\r\n user-select: none;\r\n pointer-events: none;\r\n\r\n &.visible {\r\n display: grid;\r\n width: 20px;\r\n }\r\n }\r\n\r\n .header {\r\n grid-row: 1;\r\n grid-column: 1;\r\n font-size: 16px;\r\n text-align: center;\r\n margin-top: -1px;\r\n margin-left: -1px;\r\n margin-right: 20px;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n }\r\n\r\n .connections {\r\n grid-row: 2;\r\n grid-column: 1;\r\n\r\n display: grid;\r\n grid-template-columns: 50% 50%;\r\n transform: scale(1);\r\n }\r\n\r\n .content {\r\n min-height: 20px;\r\n grid-row: 3;\r\n grid-column: 1;\r\n\r\n &.input-block {\r\n grid-row: 2;\r\n min-height: 34px;\r\n text-align: center;\r\n font-size: 18px;\r\n font-weight: bold;\r\n margin: 0 10px 5px;\r\n display: grid;\r\n align-content: center;\r\n\r\n &.small-font {\r\n font-size: 17px;\r\n }\r\n }\r\n\r\n &.output-block {\r\n min-height: 0px;\r\n height: 5px;\r\n }\r\n\r\n &.clamp-block {\r\n grid-row: 2;\r\n height: 34px;\r\n text-align: center;\r\n font-size: 18px;\r\n font-weight: bold;\r\n margin: 0 10px;\r\n }\r\n\r\n &.gradient-block {\r\n grid-row: 2;\r\n height: 34px;\r\n }\r\n\r\n &.texture-block {\r\n grid-row: 2;\r\n height: 140px;\r\n width: 140px;\r\n overflow: hidden;\r\n border-bottom-left-radius: 7px;\r\n border: black 4px solid;\r\n border-left: 0px;\r\n border-bottom: 0px;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n pointer-events: none;\r\n\r\n &.empty {\r\n display: none;\r\n }\r\n }\r\n }\r\n\r\n &.image-source-block {\r\n margin-top: 5px;\r\n }\r\n\r\n &.regular-texture-block {\r\n margin-top: 60px;\r\n }\r\n\r\n &.reduced-texture-block {\r\n margin-top: 30px;\r\n }\r\n\r\n &.reflection-block {\r\n grid-row: 3;\r\n }\r\n\r\n &.remap-block {\r\n height: 34px;\r\n text-align: center;\r\n font-size: 18px;\r\n font-weight: bold;\r\n margin: 0 10px;\r\n }\r\n\r\n &.trigonometry-block {\r\n grid-row: 2;\r\n height: 34px;\r\n text-align: center;\r\n font-size: 18px;\r\n font-weight: bold;\r\n margin: 0 10px;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n"],"sourceRoot":""}]);
|
|
63
63
|
// Exports
|
|
64
64
|
___CSS_LOADER_EXPORT___.locals = {};
|
|
65
65
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
|
|
@@ -61591,7 +61591,9 @@ class ColorPicker extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
61591
61591
|
this.props.onColorChanged(this.state.color.clone());
|
|
61592
61592
|
}
|
|
61593
61593
|
render() {
|
|
61594
|
-
const
|
|
61594
|
+
const color4 = core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color4.FromColor3(this.state.color);
|
|
61595
|
+
color4.a = this.state.alpha;
|
|
61596
|
+
const colorHex = color4.toHexString();
|
|
61595
61597
|
const hsv = this.state.color.toHSV();
|
|
61596
61598
|
const colorRef = new core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3();
|
|
61597
61599
|
core_Maths_math_color__WEBPACK_IMPORTED_MODULE_2__.Color3.HSVtoRGBToRef(hsv.r, 1, 1, colorRef);
|
|
@@ -62147,8 +62149,8 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
62147
62149
|
this.props.lockObject.lock = false;
|
|
62148
62150
|
}
|
|
62149
62151
|
}
|
|
62150
|
-
incrementValue(amount) {
|
|
62151
|
-
if (this.props.step) {
|
|
62152
|
+
incrementValue(amount, processStep = true) {
|
|
62153
|
+
if (processStep && this.props.step) {
|
|
62152
62154
|
amount *= parseFloat(this.props.step);
|
|
62153
62155
|
}
|
|
62154
62156
|
let currentValue = parseFloat(this.state.value);
|
|
@@ -62158,15 +62160,22 @@ class FloatLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
62158
62160
|
this.updateValue((currentValue + amount).toFixed(2));
|
|
62159
62161
|
}
|
|
62160
62162
|
onKeyDown(event) {
|
|
62161
|
-
|
|
62162
|
-
|
|
62163
|
-
|
|
62164
|
-
|
|
62165
|
-
|
|
62166
|
-
|
|
62167
|
-
|
|
62168
|
-
event.preventDefault();
|
|
62163
|
+
const step = parseFloat(this.props.step || this.props.isInteger ? "1" : "0.01");
|
|
62164
|
+
const handleArrowKey = (sign) => {
|
|
62165
|
+
if (event.shiftKey) {
|
|
62166
|
+
sign *= 10;
|
|
62167
|
+
if (event.ctrlKey || event.metaKey) {
|
|
62168
|
+
sign *= 10;
|
|
62169
|
+
}
|
|
62169
62170
|
}
|
|
62171
|
+
this.incrementValue(sign * step, false);
|
|
62172
|
+
event.preventDefault();
|
|
62173
|
+
};
|
|
62174
|
+
if (event.key === "ArrowUp") {
|
|
62175
|
+
handleArrowKey(1);
|
|
62176
|
+
}
|
|
62177
|
+
else if (event.key === "ArrowDown") {
|
|
62178
|
+
handleArrowKey(-1);
|
|
62170
62179
|
}
|
|
62171
62180
|
if (event.key === "Enter" && this.props.onEnter) {
|
|
62172
62181
|
this.props.onEnter(this._store);
|
|
@@ -62427,14 +62436,13 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
62427
62436
|
}
|
|
62428
62437
|
return false;
|
|
62429
62438
|
}
|
|
62430
|
-
updateValue(
|
|
62431
|
-
|
|
62432
|
-
if (/[^0-9.-]/g.test(value)) {
|
|
62439
|
+
updateValue(valueString) {
|
|
62440
|
+
if (/[^0-9.-]/g.test(valueString)) {
|
|
62433
62441
|
return;
|
|
62434
62442
|
}
|
|
62435
|
-
const valueAsNumber = parseFloat(
|
|
62443
|
+
const valueAsNumber = parseFloat(valueString);
|
|
62436
62444
|
this._localChange = true;
|
|
62437
|
-
this.setState({ value:
|
|
62445
|
+
this.setState({ value: valueString });
|
|
62438
62446
|
if (isNaN(valueAsNumber)) {
|
|
62439
62447
|
return;
|
|
62440
62448
|
}
|
|
@@ -62452,8 +62460,34 @@ class NumericInputComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
62452
62460
|
}
|
|
62453
62461
|
this.props.onChange(valueAsNumber);
|
|
62454
62462
|
}
|
|
62463
|
+
incrementValue(amount) {
|
|
62464
|
+
let currentValue = parseFloat(this.state.value);
|
|
62465
|
+
if (isNaN(currentValue)) {
|
|
62466
|
+
currentValue = 0;
|
|
62467
|
+
}
|
|
62468
|
+
this.updateValue((currentValue + amount).toFixed(this.props.precision !== undefined ? this.props.precision : 3));
|
|
62469
|
+
}
|
|
62470
|
+
onKeyDown(evt) {
|
|
62471
|
+
const step = this.props.step || 1;
|
|
62472
|
+
const handleArrowKey = (sign) => {
|
|
62473
|
+
if (evt.shiftKey) {
|
|
62474
|
+
sign *= 10;
|
|
62475
|
+
if (evt.ctrlKey || evt.metaKey) {
|
|
62476
|
+
sign *= 10;
|
|
62477
|
+
}
|
|
62478
|
+
}
|
|
62479
|
+
this.incrementValue(sign * step);
|
|
62480
|
+
evt.preventDefault();
|
|
62481
|
+
};
|
|
62482
|
+
if (evt.key === "ArrowUp") {
|
|
62483
|
+
handleArrowKey(1);
|
|
62484
|
+
}
|
|
62485
|
+
else if (evt.key === "ArrowDown") {
|
|
62486
|
+
handleArrowKey(-1);
|
|
62487
|
+
}
|
|
62488
|
+
}
|
|
62455
62489
|
render() {
|
|
62456
|
-
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt), onFocus: () => {
|
|
62490
|
+
return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", Object.assign({ className: "numeric" }, { children: [this.props.icon && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }), this.props.label && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", Object.assign({ className: "numeric-label", title: this.props.label }, { children: `${this.props.label}: ` }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "number", step: this.props.step, className: "numeric-input", value: this.state.value, onChange: (evt) => this.updateValue(evt.target.value), onKeyDown: (evt) => this.onKeyDown(evt), onFocus: () => {
|
|
62457
62491
|
if (this.props.lockObject) {
|
|
62458
62492
|
this.props.lockObject.lock = true;
|
|
62459
62493
|
}
|
|
@@ -63392,6 +63426,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
63392
63426
|
this._oldY = -1;
|
|
63393
63427
|
this._frameIsMoving = false;
|
|
63394
63428
|
this._isLoading = false;
|
|
63429
|
+
this._targetLinkCandidate = null;
|
|
63395
63430
|
this._copiedNodes = [];
|
|
63396
63431
|
this._copiedFrames = [];
|
|
63397
63432
|
props.stateManager.onSelectionChangedObservable.add((options) => {
|
|
@@ -63594,9 +63629,13 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
63594
63629
|
.flat()
|
|
63595
63630
|
.filter((i) => i && items.every((selected) => selected.content.data !== i.ownerData)));
|
|
63596
63631
|
}
|
|
63597
|
-
automaticRewire(inputs, outputs) {
|
|
63632
|
+
automaticRewire(inputs, outputs, firstOnly = false) {
|
|
63633
|
+
let oneConnectionFound = false;
|
|
63598
63634
|
if (outputs.length && inputs.length) {
|
|
63599
63635
|
inputs.forEach((input) => {
|
|
63636
|
+
if (oneConnectionFound) {
|
|
63637
|
+
return;
|
|
63638
|
+
}
|
|
63600
63639
|
if (!input) {
|
|
63601
63640
|
return;
|
|
63602
63641
|
}
|
|
@@ -63606,6 +63645,10 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
63606
63645
|
const nodeOutput = this.findNodeFromData(output.ownerData);
|
|
63607
63646
|
this.connectNodes(nodeInput, input, nodeOutput, output);
|
|
63608
63647
|
outputs.shift();
|
|
63648
|
+
if (firstOnly) {
|
|
63649
|
+
oneConnectionFound = true;
|
|
63650
|
+
return;
|
|
63651
|
+
}
|
|
63609
63652
|
}
|
|
63610
63653
|
});
|
|
63611
63654
|
}
|
|
@@ -63653,7 +63696,7 @@ class GraphCanvasComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
|
|
|
63653
63696
|
this.props.stateManager.onRebuildRequiredObservable.notifyObservers(false);
|
|
63654
63697
|
return;
|
|
63655
63698
|
}
|
|
63656
|
-
if (!evt.ctrlKey || this.props.stateManager.lockObject.lock) {
|
|
63699
|
+
if ((!evt.ctrlKey && !evt.metaKey) || this.props.stateManager.lockObject.lock) {
|
|
63657
63700
|
return;
|
|
63658
63701
|
}
|
|
63659
63702
|
if (evt.key === "c" || evt.key === "C") {
|
|
@@ -66081,11 +66124,35 @@ class GraphNode {
|
|
|
66081
66124
|
this._mouseStartPointX = null;
|
|
66082
66125
|
this._mouseStartPointY = null;
|
|
66083
66126
|
this._visual.releasePointerCapture(evt.pointerId);
|
|
66127
|
+
if (!this._ownerCanvas._targetLinkCandidate) {
|
|
66128
|
+
return;
|
|
66129
|
+
}
|
|
66130
|
+
// Connect the ports
|
|
66131
|
+
const inputs = [];
|
|
66132
|
+
const outputs = [];
|
|
66133
|
+
const availableNodeInputs = [];
|
|
66134
|
+
const availableNodeOutputs = [];
|
|
66135
|
+
const leftNode = this._ownerCanvas._targetLinkCandidate.nodeA;
|
|
66136
|
+
const rightNode = this._ownerCanvas._targetLinkCandidate.nodeB;
|
|
66137
|
+
// Delete previous
|
|
66138
|
+
this._ownerCanvas._targetLinkCandidate.dispose();
|
|
66139
|
+
this._ownerCanvas._targetLinkCandidate = null;
|
|
66140
|
+
// Get the ports
|
|
66141
|
+
availableNodeInputs.push(...this.content.inputs.filter((i) => !i.isConnected));
|
|
66142
|
+
availableNodeOutputs.push(...this.content.outputs);
|
|
66143
|
+
inputs.push(...leftNode.content.outputs);
|
|
66144
|
+
outputs.push(...rightNode.content.inputs.filter((i) => !i.isConnected));
|
|
66145
|
+
// Reconnect
|
|
66146
|
+
this._ownerCanvas.automaticRewire(inputs, availableNodeInputs, true);
|
|
66147
|
+
this._ownerCanvas.automaticRewire(availableNodeOutputs, outputs, true);
|
|
66148
|
+
this._stateManager.onRebuildRequiredObservable.notifyObservers(false);
|
|
66084
66149
|
}
|
|
66085
66150
|
_onMove(evt) {
|
|
66151
|
+
this._ownerCanvas._targetLinkCandidate = null;
|
|
66086
66152
|
if (this._mouseStartPointX === null || this._mouseStartPointY === null || evt.ctrlKey) {
|
|
66087
66153
|
return;
|
|
66088
66154
|
}
|
|
66155
|
+
// Move
|
|
66089
66156
|
const newX = (evt.clientX - this._mouseStartPointX) / this._ownerCanvas.zoom;
|
|
66090
66157
|
const newY = (evt.clientY - this._mouseStartPointY) / this._ownerCanvas.zoom;
|
|
66091
66158
|
for (const selectedNode of this._ownerCanvas.selectedNodes) {
|
|
@@ -66098,6 +66165,26 @@ class GraphNode {
|
|
|
66098
66165
|
this._mouseStartPointX = evt.clientX;
|
|
66099
66166
|
this._mouseStartPointY = evt.clientY;
|
|
66100
66167
|
evt.stopPropagation();
|
|
66168
|
+
if (this._inputPorts.some((p) => p.portData.isConnected) || this._outputPorts.some((o) => o.portData.hasEndpoints)) {
|
|
66169
|
+
return;
|
|
66170
|
+
}
|
|
66171
|
+
// Check wires that could be underneath
|
|
66172
|
+
const rect = this._visual.getBoundingClientRect();
|
|
66173
|
+
for (const link of this._ownerCanvas.links) {
|
|
66174
|
+
if (link.portA.node === this || link.portB.node === this) {
|
|
66175
|
+
link.isTargetCandidate = false;
|
|
66176
|
+
continue;
|
|
66177
|
+
}
|
|
66178
|
+
link.isTargetCandidate = link.intersectsWith(rect);
|
|
66179
|
+
if (link.isTargetCandidate) {
|
|
66180
|
+
if (this._ownerCanvas._targetLinkCandidate !== link) {
|
|
66181
|
+
if (this._ownerCanvas._targetLinkCandidate) {
|
|
66182
|
+
this._ownerCanvas._targetLinkCandidate.isTargetCandidate = false;
|
|
66183
|
+
}
|
|
66184
|
+
this._ownerCanvas._targetLinkCandidate = link;
|
|
66185
|
+
}
|
|
66186
|
+
}
|
|
66187
|
+
}
|
|
66101
66188
|
}
|
|
66102
66189
|
renderProperties() {
|
|
66103
66190
|
let control = _propertyLedger__WEBPACK_IMPORTED_MODULE_2__.PropertyLedger.RegisteredControls[this.content.getClassName()];
|
|
@@ -66238,6 +66325,7 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
66238
66325
|
class NodeLink {
|
|
66239
66326
|
constructor(graphCanvas, portA, nodeA, portB, nodeB) {
|
|
66240
66327
|
this._isVisible = true;
|
|
66328
|
+
this._isTargetCandidate = false;
|
|
66241
66329
|
this.onDisposedObservable = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_0__.Observable();
|
|
66242
66330
|
this._portA = portA;
|
|
66243
66331
|
this._portB = portB;
|
|
@@ -66272,6 +66360,21 @@ class NodeLink {
|
|
|
66272
66360
|
}
|
|
66273
66361
|
});
|
|
66274
66362
|
}
|
|
66363
|
+
get isTargetCandidate() {
|
|
66364
|
+
return this._isTargetCandidate;
|
|
66365
|
+
}
|
|
66366
|
+
set isTargetCandidate(value) {
|
|
66367
|
+
if (this._isTargetCandidate === value) {
|
|
66368
|
+
return;
|
|
66369
|
+
}
|
|
66370
|
+
this._isTargetCandidate = value;
|
|
66371
|
+
if (value) {
|
|
66372
|
+
this._path.classList.add("target-candidate");
|
|
66373
|
+
}
|
|
66374
|
+
else {
|
|
66375
|
+
this._path.classList.remove("target-candidate");
|
|
66376
|
+
}
|
|
66377
|
+
}
|
|
66275
66378
|
get isVisible() {
|
|
66276
66379
|
return this._isVisible;
|
|
66277
66380
|
}
|
|
@@ -66299,6 +66402,10 @@ class NodeLink {
|
|
|
66299
66402
|
get nodeB() {
|
|
66300
66403
|
return this._nodeB;
|
|
66301
66404
|
}
|
|
66405
|
+
intersectsWith(rect) {
|
|
66406
|
+
const locatRect = this._path.getBoundingClientRect();
|
|
66407
|
+
return rect.left < locatRect.right && rect.right > locatRect.left && rect.top < locatRect.bottom && rect.bottom > locatRect.top;
|
|
66408
|
+
}
|
|
66302
66409
|
update(endX = 0, endY = 0, straight = false) {
|
|
66303
66410
|
const rectA = this._portA.element.getBoundingClientRect();
|
|
66304
66411
|
const rootRect = this._graphCanvas.canvasContainer.getBoundingClientRect();
|
|
@@ -66872,11 +66979,14 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
66872
66979
|
|
|
66873
66980
|
|
|
66874
66981
|
|
|
66982
|
+
|
|
66875
66983
|
|
|
66876
66984
|
|
|
66877
66985
|
class BlockTools {
|
|
66878
66986
|
static GetBlockFromString(data, scene, nodeMaterial) {
|
|
66879
66987
|
switch (data) {
|
|
66988
|
+
case "HeightToNormalBlock":
|
|
66989
|
+
return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.HeightToNormalBlock("HeightToNormal");
|
|
66880
66990
|
case "ElbowBlock":
|
|
66881
66991
|
return new core_Materials_Node_Blocks_Fragment_discardBlock__WEBPACK_IMPORTED_MODULE_0__.ElbowBlock("");
|
|
66882
66992
|
case "TwirlBlock":
|
|
@@ -67724,6 +67834,7 @@ class NodeListComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
|
|
|
67724
67834
|
"ColorBlock",
|
|
67725
67835
|
"InstanceColorBlock",
|
|
67726
67836
|
"NormalBlock",
|
|
67837
|
+
"HeightToNormalBlock",
|
|
67727
67838
|
"TBNBlock",
|
|
67728
67839
|
"PerturbNormalBlock",
|
|
67729
67840
|
"NormalBlendBlock",
|
|
@@ -67976,6 +68087,7 @@ NodeListComponent._Tooltips = {
|
|
|
67976
68087
|
TwirlBlock: "Apply a twirl rotation",
|
|
67977
68088
|
ElbowBlock: "Passthrough block mostly used to organize your graph",
|
|
67978
68089
|
ClipPlanesBlock: "A node that add clip planes support",
|
|
68090
|
+
HeightToNormalBlock: "Convert a height map into a normal map",
|
|
67979
68091
|
};
|
|
67980
68092
|
|
|
67981
68093
|
|
|
@@ -68123,8 +68235,6 @@ __webpack_require__.r(__webpack_exports__);
|
|
|
68123
68235
|
|
|
68124
68236
|
|
|
68125
68237
|
|
|
68126
|
-
|
|
68127
|
-
|
|
68128
68238
|
|
|
68129
68239
|
|
|
68130
68240
|
|
|
@@ -68312,13 +68422,16 @@ class PreviewManager {
|
|
|
68312
68422
|
if (this._globalState.mode === core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.NodeMaterialModes.Material) {
|
|
68313
68423
|
switch (this._globalState.previewType) {
|
|
68314
68424
|
case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Box:
|
|
68315
|
-
core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://
|
|
68425
|
+
core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/", "roundedCube.glb", this._scene).then(() => {
|
|
68316
68426
|
this._meshes.push(...this._scene.meshes);
|
|
68317
68427
|
this._prepareScene();
|
|
68318
68428
|
});
|
|
68319
68429
|
return;
|
|
68320
68430
|
case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Sphere:
|
|
68321
|
-
|
|
68431
|
+
core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/", "previewSphere.glb", this._scene).then(() => {
|
|
68432
|
+
this._meshes.push(...this._scene.meshes);
|
|
68433
|
+
this._prepareScene();
|
|
68434
|
+
});
|
|
68322
68435
|
break;
|
|
68323
68436
|
case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Torus:
|
|
68324
68437
|
this._meshes.push((0,core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.CreateTorus)("dummy-torus", {
|
|
@@ -68328,20 +68441,20 @@ class PreviewManager {
|
|
|
68328
68441
|
}, this._scene));
|
|
68329
68442
|
break;
|
|
68330
68443
|
case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Cylinder:
|
|
68331
|
-
core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://
|
|
68444
|
+
core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/", "roundedCylinder.glb", this._scene).then(() => {
|
|
68332
68445
|
this._meshes.push(...this._scene.meshes);
|
|
68333
68446
|
this._prepareScene();
|
|
68334
68447
|
});
|
|
68335
68448
|
return;
|
|
68336
68449
|
case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.Plane: {
|
|
68337
|
-
|
|
68338
|
-
|
|
68339
|
-
|
|
68340
|
-
|
|
68450
|
+
core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/", "highPolyPlane.glb", this._scene).then(() => {
|
|
68451
|
+
this._meshes.push(...this._scene.meshes);
|
|
68452
|
+
this._prepareScene();
|
|
68453
|
+
});
|
|
68341
68454
|
break;
|
|
68342
68455
|
}
|
|
68343
68456
|
case _previewType__WEBPACK_IMPORTED_MODULE_1__.PreviewType.ShaderBall:
|
|
68344
|
-
core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://
|
|
68457
|
+
core_Materials_Node_nodeMaterial__WEBPACK_IMPORTED_MODULE_0__.SceneLoader.AppendAsync("https://assets.babylonjs.com/meshes/", "shaderBall.glb", this._scene).then(() => {
|
|
68345
68458
|
this._meshes.push(...this._scene.meshes);
|
|
68346
68459
|
this._prepareScene();
|
|
68347
68460
|
});
|