Overhauled Deployment Structure

Data/Server/WebUI/src/nodes/Organization/Node_Backdrop_Group_Box.jsx

@@ -0,0 +1,134 @@
+////////// PROJECT FILE SEPARATION LINE ////////// CODE AFTER THIS LINE ARE FROM: <ProjectRoot>/Data/WebUI/src/nodes/Organization/Node_Backdrop_Group_Box.jsx
+
+/**
+ * ===========================================
+ * Borealis - Backdrop Group Box Node
+ * ===========================================
+ *
+ * COMPONENT ROLE:
+ * This node functions as a backdrop or grouping box.
+ * It's resizable and can be renamed by clicking its title.
+ * It doesn't connect to other nodes or pass data<74>it's purely visual.
+ *
+ * BEHAVIOR:
+ * - Allows renaming via single-click on the header text.
+ * - Can be resized by dragging from the bottom-right corner.
+ *
+ * NOTE:
+ * - No inputs/outputs: purely cosmetic for grouping and labeling.
+ */
+
+import React, { useState, useEffect, useRef } from "react";
+import { Handle, Position } from "reactflow";
+import { ResizableBox } from "react-resizable";
+import "react-resizable/css/styles.css";
+
+const BackdropGroupBoxNode = ({ id, data }) => {
+    const [title, setTitle] = useState(data?.label || "Backdrop Group Box");
+    const [isEditing, setIsEditing] = useState(false);
+    const inputRef = useRef(null);
+
+    useEffect(() => {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [isEditing]);
+
+    const handleTitleClick = (e) => {
+        e.stopPropagation();
+        setIsEditing(true);
+    };
+
+    const handleTitleChange = (e) => {
+        const newTitle = e.target.value;
+        setTitle(newTitle);
+        window.BorealisValueBus[id] = newTitle;
+    };
+
+    const handleBlur = () => {
+        setIsEditing(false);
+    };
+
+    return (
+        <div style={{ pointerEvents: "auto" }}>
+            <ResizableBox
+                width={200}
+                height={120}
+                minConstraints={[120, 80]}
+                maxConstraints={[600, 600]}
+                resizeHandles={["se"]}
+                className="borealis-node"
+                handle={(h) => (
+                    <span
+                        className={`react-resizable-handle react-resizable-handle-${h}`}
+                        style={{ pointerEvents: "auto" }}
+                        onMouseDown={(e) => e.stopPropagation()}
+                        onClick={(e) => e.stopPropagation()}
+                    />
+                )}
+                onClick={(e) => e.stopPropagation()}
+                style={{
+                    backgroundColor: "rgba(44, 44, 44, 0.5)",
+                    border: "1px solid #3a3a3a",
+                    borderRadius: "4px",
+                    boxShadow: "0 0 5px rgba(88, 166, 255, 0.15)",
+                    overflow: "hidden",
+                    position: "relative",
+                    zIndex: 0
+                }}
+            >
+                <div
+                    onClick={handleTitleClick}
+                    style={{
+                        backgroundColor: "rgba(35, 35, 35, 0.5)",
+                        padding: "6px 10px",
+                        fontWeight: "bold",
+                        fontSize: "10px",
+                        cursor: "pointer",
+                        userSelect: "none"
+                    }}
+                >
+                    {isEditing ? (
+                        <input
+                            ref={inputRef}
+                            type="text"
+                            value={title}
+                            onChange={handleTitleChange}
+                            onBlur={handleBlur}
+                            onClick={(e) => e.stopPropagation()}
+                            onMouseDown={(e) => e.stopPropagation()}
+                            style={{
+                                fontSize: "10px",
+                                padding: "2px",
+                                background: "#1e1e1e",
+                                color: "#ccc",
+                                border: "1px solid #444",
+                                borderRadius: "2px",
+                                width: "100%"
+                            }}
+                        />
+                    ) : (
+                        <span>{title}</span>
+                    )}
+                </div>
+                <div style={{ padding: "10px", fontSize: "9px", height: "100%" }}>
+                    {/* Empty space for grouping */}
+                </div>
+            </ResizableBox>
+        </div>
+    );
+};
+
+export default {
+    type: "BackdropGroupBoxNode",
+    label: "Backdrop Group Box",
+    description: `
+Resizable Grouping Node
+
+- Purely cosmetic, for grouping related nodes
+- Resizable by dragging bottom-right corner
+- Rename by clicking on title bar
+`.trim(),
+    content: "Use as a visual group label",
+    component: BackdropGroupBoxNode
+};