@babylonjs/node-editor 5.24.0 → 5.26.0

package/dist/babylon.nodeEditor.max.js

@@ -62285,7 +62285,8 @@ const MessageDialog = (props) => {
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "ClassNames": () => (/* binding */ ClassNames)
+/* harmony export */   "ClassNames": () => (/* binding */ ClassNames),
+/* harmony export */   "JoinClassNames": () => (/* binding */ JoinClassNames)
 /* harmony export */ });
 function ClassNames(names, styleObject) {
     let string = "";
@@ -62296,6 +62297,15 @@ function ClassNames(names, styleObject) {
     }
     return string;
 }
+function JoinClassNames(styleObject, ...names) {
+    let string = "";
+    for (const name of names) {
+        if (name && styleObject[name]) {
+            string += styleObject[name] + " ";
+        }
+    }
+    return string;
+}
 
 
 /***/ }),
@@ -63121,11 +63131,13 @@ __webpack_require__.r(__webpack_exports__);
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const Null_Value = Number.MAX_SAFE_INTEGER;
+const DEFAULT_FALLBACK_VALUE = -1;
 class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component {
     constructor(props) {
+        // Initialize default props
         super(props);
         this._localChange = false;
-        this.state = { value: this._remapValueIn(this._getValue(props)) };
+        this.state = { value: this._remapValueIn(this._getValue(props)), addCustom: false };
     }
     _remapValueIn(value) {
         return this.props.allowNullValue && value === null ? Null_Value : value;
@@ -63144,11 +63156,14 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
             this._localChange = false;
             return true;
         }
-        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(this.props.target) : nextProps.target[nextProps.propertyName]);
+        const newValue = this._remapValueIn(nextProps.extractValue ? nextProps.extractValue(nextProps.target) : nextProps.target[nextProps.propertyName]);
         if (newValue != null && newValue !== nextState.value) {
             nextState.value = newValue;
             return true;
         }
+        if (this.props.options !== nextProps.options) {
+            return true;
+        }
         return false;
     }
     raiseOnPropertyChanged(newValue, previousValue) {
@@ -63167,23 +63182,65 @@ class OptionsLineComponent extends react__WEBPACK_IMPORTED_MODULE_1__.Component
         this.setState({ value: value });
     }
     updateValue(valueString) {
-        const value = this.props.valuesAreStrings ? valueString : parseInt(valueString);
+        let value = this.props.valuesAreStrings ? valueString : parseInt(valueString);
+        if (isNaN(Number(value))) {
+            for (let i = 0; i < this.props.options.length; i++) {
+                if (this.props.options.at(i)?.label === valueString) {
+                    value = Number(this.props.options.at(i)?.value);
+                }
+            }
+        }
+        if (value === 0 && this.props.fromFontDropdown) {
+            this.setState({ addCustom: true });
+        }
         this._localChange = true;
         const store = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
         if (!this.props.noDirectUpdate) {
             this.props.target[this.props.propertyName] = this._remapValueOut(value);
         }
-        this.setState({ value: value });
-        if (this.props.onSelect) {
-            this.props.onSelect(value);
+        //selecting a regular option from font dropdown
+        if (value != 0 && this.props.fromFontDropdown) {
+            this.setState({ value: value });
+            if (this.props.onSelect) {
+                this.props.onSelect(value);
+            }
+            //selecting 'custom font' from font dropdown
+        }
+        else if (this.props.fromFontDropdown) {
+            if (this.props.onSelect) {
+                this.props.onSelect(this.state.value);
+            }
+        }
+        //selecting from a dropdown that's not font dropdown
+        else {
+            this.setState({ value: value });
+            if (this.props.onSelect) {
+                this.props.onSelect(value);
+            }
         }
         const newValue = this.props.extractValue ? this.props.extractValue(this.props.target) : this.props.target[this.props.propertyName];
         this.raiseOnPropertyChanged(newValue, store);
     }
+    updateCustomValue() {
+        this.setState({ addCustom: false });
+    }
     render() {
-        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) => {
+        const fallback = this.props.fallbackValue !== undefined ? this.props.fallbackValue : DEFAULT_FALLBACK_VALUE;
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { className: `listLine ${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: this.state.addCustom ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", placeholder: "Enter a custom font here", onKeyDown: (event) => {
+                            event.key === "Enter" && this.props.addVal != undefined
+                                ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
+                                    this.updateCustomValue(),
+                                    this.forceUpdate())
+                                : null;
+                        }, onBlur: (event) => {
+                            this.props.addVal != undefined
+                                ? (this.props.addVal({ label: event.target.value, value: this.props.options.length + 1 }, Number(this.state.value)),
+                                    this.updateCustomValue(),
+                                    this.forceUpdate())
+                                : null;
+                        } })) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("select", { onChange: (evt) => this.updateValue(evt.target.value), value: this.state.value === null || this.state.value === undefined ? fallback : this.state.value, children: this.props.options.map((option, i) => {
                             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));
-                        }) }) })] }));
+                        }) })) })] }));
     }
 }
 
@@ -67066,7 +67123,23 @@ class NodeLink {
     }
     intersectsWith(rect) {
         const locatRect = this._path.getBoundingClientRect();
-        return rect.left < locatRect.right && rect.right > locatRect.left && rect.top < locatRect.bottom && rect.bottom > locatRect.top;
+        if (rect.left > locatRect.right || rect.right < locatRect.left || rect.top > locatRect.bottom || rect.bottom < locatRect.top) {
+            return false;
+        }
+        const svg = this._graphCanvas.svgCanvas;
+        const rootRect = svg.getBoundingClientRect();
+        const left = rect.x - rootRect.x;
+        const top = rect.y - rootRect.y;
+        const right = left + rect.width;
+        const bottom = top + rect.height;
+        const sampleRate = 10; // Checking 10 times on the path should be enough
+        for (let index = 0; index < 1; index += 1 / sampleRate) {
+            const point = this._path.getPointAtLength(index * this._path.getTotalLength());
+            if (left < point.x && right > point.x && top < point.y && bottom > point.y) {
+                return true;
+            }
+        }
+        return false;
     }
     update(endX = 0, endY = 0, straight = false) {
         const rectA = this._portA.element.getBoundingClientRect();