@babylonjs/shared-ui-components 9.0.0 → 9.2.0

package/nodeGraphSystem/graphSearch.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as styles from "./graphSearch.module.scss";
+/**
+ * An overlay search bar for finding nodes and frames in the graph by name or type.
+ * Triggered via an observable; press Escape or the close button to dismiss.
+ */
+export class GraphSearchComponent extends React.Component {
+    /** @internal */
+    constructor(props) {
+        super(props);
+        this._inputRef = React.createRef();
+        this._escHandler = null;
+        this._onKeyDown = (evt) => {
+            if (evt.key === "Enter") {
+                evt.preventDefault();
+                if (evt.shiftKey) {
+                    this._goPrev();
+                }
+                else {
+                    this._goNext();
+                }
+            }
+            else if (evt.key === "ArrowDown") {
+                evt.preventDefault();
+                this._goNext();
+            }
+            else if (evt.key === "ArrowUp") {
+                evt.preventDefault();
+                this._goPrev();
+            }
+            // Stop propagation so the canvas doesn't handle it
+            evt.stopPropagation();
+        };
+        this.state = { visible: false, query: "", currentIndex: 0, results: [] };
+    }
+    /** Show the search bar and focus the input. */
+    show() {
+        if (this._escHandler) {
+            this.props.canvas.stateManager.hostDocument.removeEventListener("keydown", this._escHandler);
+            this._escHandler = null;
+        }
+        this.setState({ visible: true, query: "", currentIndex: 0, results: [] }, () => {
+            this._inputRef.current?.focus();
+        });
+        this._escHandler = (evt) => {
+            if (evt.key === "Escape") {
+                this.hide();
+            }
+        };
+        this.props.canvas.stateManager.hostDocument.addEventListener("keydown", this._escHandler);
+    }
+    /** Hide the search bar and clear highlights. */
+    hide() {
+        this._clearHighlights(this.state.results);
+        this.setState({ visible: false, query: "", currentIndex: 0, results: [] });
+        if (this._escHandler) {
+            this.props.canvas.stateManager.hostDocument.removeEventListener("keydown", this._escHandler);
+            this._escHandler = null;
+        }
+    }
+    _search(query) {
+        if (!query.trim()) {
+            this._clearHighlights(this.state.results);
+            this.setState({ query, results: [], currentIndex: 0 });
+            return;
+        }
+        const lowerQuery = query.toLowerCase();
+        const results = [];
+        for (const node of this.props.canvas.nodes) {
+            const name = node.name || "";
+            const className = node.content.getClassName ? node.content.getClassName() : "";
+            if (name.toLowerCase().includes(lowerQuery) || className.toLowerCase().includes(lowerQuery)) {
+                results.push({ node, label: name || className });
+            }
+        }
+        for (const frame of this.props.canvas.frames) {
+            if (frame.name.toLowerCase().includes(lowerQuery)) {
+                results.push({ frame, label: frame.name });
+            }
+        }
+        // Clear old highlights, apply new
+        this._clearHighlights(this.state.results);
+        this._applyHighlights(results);
+        const newIndex = results.length > 0 ? 0 : 0;
+        this.setState({ query, results, currentIndex: newIndex }, () => {
+            if (results.length > 0) {
+                this._navigateTo(0);
+            }
+        });
+    }
+    _applyHighlights(results) {
+        for (const r of results) {
+            if (r.node) {
+                r.node.rootElement.classList.add(styles["search-match"]);
+            }
+            else if (r.frame) {
+                r.frame.element.classList.add(styles["search-match"]);
+            }
+        }
+    }
+    _clearHighlights(results) {
+        for (const r of results) {
+            if (r.node) {
+                r.node.rootElement.classList.remove(styles["search-match"]);
+                r.node.rootElement.classList.remove(styles["search-current"]);
+            }
+            else if (r.frame) {
+                r.frame.element.classList.remove(styles["search-match"]);
+                r.frame.element.classList.remove(styles["search-current"]);
+            }
+        }
+    }
+    _navigateTo(index) {
+        const { results } = this.state;
+        if (results.length === 0) {
+            return;
+        }
+        // Remove current highlight from previous
+        const prev = results[this.state.currentIndex];
+        if (prev) {
+            if (prev.node) {
+                prev.node.rootElement.classList.remove(styles["search-current"]);
+            }
+            else if (prev.frame) {
+                prev.frame.element.classList.remove(styles["search-current"]);
+            }
+        }
+        const result = results[index];
+        if (result.node) {
+            result.node.rootElement.classList.add(styles["search-current"]);
+            this.props.canvas.zoomToNode(result.node);
+            this.props.canvas.stateManager.onSelectionChangedObservable.notifyObservers({ selection: result.node });
+        }
+        else if (result.frame) {
+            result.frame.element.classList.add(styles["search-current"]);
+            // Center on frame
+            const canvas = this.props.canvas;
+            const hostWidth = canvas._rootContainer?.clientWidth || 800;
+            const hostHeight = canvas._rootContainer?.clientHeight || 600;
+            canvas.x = -result.frame.x + hostWidth / (2 * canvas.zoom) - (result.frame.width || 200) / 2;
+            canvas.y = -result.frame.y + hostHeight / (2 * canvas.zoom) - 20;
+            this.props.canvas.stateManager.onSelectionChangedObservable.notifyObservers({ selection: result.frame });
+        }
+        this.setState({ currentIndex: index });
+    }
+    _goNext() {
+        const { results, currentIndex } = this.state;
+        if (results.length === 0) {
+            return;
+        }
+        const next = (currentIndex + 1) % results.length;
+        this._navigateTo(next);
+    }
+    _goPrev() {
+        const { results, currentIndex } = this.state;
+        if (results.length === 0) {
+            return;
+        }
+        const prev = (currentIndex - 1 + results.length) % results.length;
+        this._navigateTo(prev);
+    }
+    /** @internal */
+    componentWillUnmount() {
+        this._clearHighlights(this.state.results);
+        if (this._escHandler) {
+            this.props.canvas.stateManager.hostDocument.removeEventListener("keydown", this._escHandler);
+            this._escHandler = null;
+        }
+    }
+    /** @internal */
+    render() {
+        if (!this.state.visible) {
+            return null;
+        }
+        const { results, currentIndex, query } = this.state;
+        const hasResults = results.length > 0;
+        return (_jsxs("div", { className: styles["search-overlay"], children: [_jsx("input", { ref: this._inputRef, className: styles["search-input"], type: "text", placeholder: "Find in graph...", value: query, onChange: (e) => this._search(e.target.value), onKeyDown: this._onKeyDown, autoFocus: true }), _jsx("span", { className: styles["result-count"], children: query ? (hasResults ? `${currentIndex + 1} of ${results.length}` : "No results") : "" }), _jsx("button", { className: styles["nav-btn"], disabled: !hasResults, onClick: () => this._goPrev(), title: "Previous match (Shift+Enter)", children: "\u25B2" }), _jsx("button", { className: styles["nav-btn"], disabled: !hasResults, onClick: () => this._goNext(), title: "Next match (Enter)", children: "\u25BC" }), _jsx("button", { className: styles["close-btn"], onClick: () => this.hide(), title: "Close (Escape)", children: "\u2715" })] }));
+    }
+}
+//# sourceMappingURL=graphSearch.js.map

package/nodeGraphSystem/graphSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphSearch.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/graphSearch.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport * as styles from \"./graphSearch.module.scss\";\nimport { type GraphCanvasComponent } from \"./graphCanvas\";\nimport { type GraphNode } from \"./graphNode\";\nimport { type GraphFrame } from \"./graphFrame\";\n\n/** A search result pointing to either a node or a frame. */\ninterface ISearchResult {\n    node?: GraphNode;\n    frame?: GraphFrame;\n    label: string;\n}\n\n/**\n * Props for the GraphSearchComponent.\n */\nexport interface IGraphSearchComponentProps {\n    /** The graph canvas to search within */\n    canvas: GraphCanvasComponent;\n}\n\n/** Internal state for GraphSearchComponent. */\ninterface IGraphSearchState {\n    /** Whether the search overlay is visible */\n    visible: boolean;\n    /** The current search query */\n    query: string;\n    /** Index of the currently focused result */\n    currentIndex: number;\n    /** Matching search results */\n    results: ISearchResult[];\n}\n\n/**\n * An overlay search bar for finding nodes and frames in the graph by name or type.\n * Triggered via an observable; press Escape or the close button to dismiss.\n */\nexport class GraphSearchComponent extends React.Component<IGraphSearchComponentProps, IGraphSearchState> {\n    private _inputRef = React.createRef<HTMLInputElement>();\n    private _escHandler: ((evt: KeyboardEvent) => void) | null = null;\n\n    /** @internal */\n    constructor(props: IGraphSearchComponentProps) {\n        super(props);\n        this.state = { visible: false, query: \"\", currentIndex: 0, results: [] };\n    }\n\n    /** Show the search bar and focus the input. */\n    show() {\n        if (this._escHandler) {\n            this.props.canvas.stateManager.hostDocument.removeEventListener(\"keydown\", this._escHandler);\n            this._escHandler = null;\n        }\n        this.setState({ visible: true, query: \"\", currentIndex: 0, results: [] }, () => {\n            this._inputRef.current?.focus();\n        });\n        this._escHandler = (evt: KeyboardEvent) => {\n            if (evt.key === \"Escape\") {\n                this.hide();\n            }\n        };\n        this.props.canvas.stateManager.hostDocument.addEventListener(\"keydown\", this._escHandler);\n    }\n\n    /** Hide the search bar and clear highlights. */\n    hide() {\n        this._clearHighlights(this.state.results);\n        this.setState({ visible: false, query: \"\", currentIndex: 0, results: [] });\n        if (this._escHandler) {\n            this.props.canvas.stateManager.hostDocument.removeEventListener(\"keydown\", this._escHandler);\n            this._escHandler = null;\n        }\n    }\n\n    private _search(query: string) {\n        if (!query.trim()) {\n            this._clearHighlights(this.state.results);\n            this.setState({ query, results: [], currentIndex: 0 });\n            return;\n        }\n\n        const lowerQuery = query.toLowerCase();\n        const results: ISearchResult[] = [];\n\n        for (const node of this.props.canvas.nodes) {\n            const name = node.name || \"\";\n            const className = node.content.getClassName ? node.content.getClassName() : \"\";\n            if (name.toLowerCase().includes(lowerQuery) || className.toLowerCase().includes(lowerQuery)) {\n                results.push({ node, label: name || className });\n            }\n        }\n\n        for (const frame of this.props.canvas.frames) {\n            if (frame.name.toLowerCase().includes(lowerQuery)) {\n                results.push({ frame, label: frame.name });\n            }\n        }\n\n        // Clear old highlights, apply new\n        this._clearHighlights(this.state.results);\n        this._applyHighlights(results);\n\n        const newIndex = results.length > 0 ? 0 : 0;\n        this.setState({ query, results, currentIndex: newIndex }, () => {\n            if (results.length > 0) {\n                this._navigateTo(0);\n            }\n        });\n    }\n\n    private _applyHighlights(results: ISearchResult[]) {\n        for (const r of results) {\n            if (r.node) {\n                r.node.rootElement.classList.add(styles[\"search-match\"]);\n            } else if (r.frame) {\n                r.frame.element.classList.add(styles[\"search-match\"]);\n            }\n        }\n    }\n\n    private _clearHighlights(results: ISearchResult[]) {\n        for (const r of results) {\n            if (r.node) {\n                r.node.rootElement.classList.remove(styles[\"search-match\"]);\n                r.node.rootElement.classList.remove(styles[\"search-current\"]);\n            } else if (r.frame) {\n                r.frame.element.classList.remove(styles[\"search-match\"]);\n                r.frame.element.classList.remove(styles[\"search-current\"]);\n            }\n        }\n    }\n\n    private _navigateTo(index: number) {\n        const { results } = this.state;\n        if (results.length === 0) {\n            return;\n        }\n\n        // Remove current highlight from previous\n        const prev = results[this.state.currentIndex];\n        if (prev) {\n            if (prev.node) {\n                prev.node.rootElement.classList.remove(styles[\"search-current\"]);\n            } else if (prev.frame) {\n                prev.frame.element.classList.remove(styles[\"search-current\"]);\n            }\n        }\n\n        const result = results[index];\n        if (result.node) {\n            result.node.rootElement.classList.add(styles[\"search-current\"]);\n            this.props.canvas.zoomToNode(result.node);\n            this.props.canvas.stateManager.onSelectionChangedObservable.notifyObservers({ selection: result.node });\n        } else if (result.frame) {\n            result.frame.element.classList.add(styles[\"search-current\"]);\n            // Center on frame\n            const canvas = this.props.canvas;\n            const hostWidth = (canvas as any)._rootContainer?.clientWidth || 800;\n            const hostHeight = (canvas as any)._rootContainer?.clientHeight || 600;\n            canvas.x = -result.frame.x + hostWidth / (2 * canvas.zoom) - (result.frame.width || 200) / 2;\n            canvas.y = -result.frame.y + hostHeight / (2 * canvas.zoom) - 20;\n            this.props.canvas.stateManager.onSelectionChangedObservable.notifyObservers({ selection: result.frame });\n        }\n\n        this.setState({ currentIndex: index });\n    }\n\n    private _goNext() {\n        const { results, currentIndex } = this.state;\n        if (results.length === 0) {\n            return;\n        }\n        const next = (currentIndex + 1) % results.length;\n        this._navigateTo(next);\n    }\n\n    private _goPrev() {\n        const { results, currentIndex } = this.state;\n        if (results.length === 0) {\n            return;\n        }\n        const prev = (currentIndex - 1 + results.length) % results.length;\n        this._navigateTo(prev);\n    }\n\n    private _onKeyDown = (evt: React.KeyboardEvent) => {\n        if (evt.key === \"Enter\") {\n            evt.preventDefault();\n            if (evt.shiftKey) {\n                this._goPrev();\n            } else {\n                this._goNext();\n            }\n        } else if (evt.key === \"ArrowDown\") {\n            evt.preventDefault();\n            this._goNext();\n        } else if (evt.key === \"ArrowUp\") {\n            evt.preventDefault();\n            this._goPrev();\n        }\n        // Stop propagation so the canvas doesn't handle it\n        evt.stopPropagation();\n    };\n\n    /** @internal */\n    override componentWillUnmount() {\n        this._clearHighlights(this.state.results);\n        if (this._escHandler) {\n            this.props.canvas.stateManager.hostDocument.removeEventListener(\"keydown\", this._escHandler);\n            this._escHandler = null;\n        }\n    }\n\n    /** @internal */\n    override render() {\n        if (!this.state.visible) {\n            return null;\n        }\n\n        const { results, currentIndex, query } = this.state;\n        const hasResults = results.length > 0;\n\n        return (\n            <div className={styles[\"search-overlay\"]}>\n                <input\n                    ref={this._inputRef}\n                    className={styles[\"search-input\"]}\n                    type=\"text\"\n                    placeholder=\"Find in graph...\"\n                    value={query}\n                    onChange={(e) => this._search(e.target.value)}\n                    onKeyDown={this._onKeyDown}\n                    autoFocus\n                />\n                <span className={styles[\"result-count\"]}>{query ? (hasResults ? `${currentIndex + 1} of ${results.length}` : \"No results\") : \"\"}</span>\n                <button className={styles[\"nav-btn\"]} disabled={!hasResults} onClick={() => this._goPrev()} title=\"Previous match (Shift+Enter)\">\n                    &#9650;\n                </button>\n                <button className={styles[\"nav-btn\"]} disabled={!hasResults} onClick={() => this._goNext()} title=\"Next match (Enter)\">\n                    &#9660;\n                </button>\n                <button className={styles[\"close-btn\"]} onClick={() => this.hide()} title=\"Close (Escape)\">\n                    &#10005;\n                </button>\n            </div>\n        );\n    }\n}\n"]}

package/nodeGraphSystem/graphSearch.module.scss

@@ -0,0 +1,86 @@
+.search-overlay {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    background: #2b2b2b;
+    border: 1px solid #555;
+    border-radius: 6px;
+    padding: 4px 8px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
+    font-family: "acumin-pro-condensed", sans-serif;
+    font-size: 13px;
+    color: #ccc;
+}
+
+.search-input {
+    background: #1e1e1e;
+    border: 1px solid #444;
+    border-radius: 4px;
+    color: #eee;
+    font-size: 13px;
+    padding: 4px 8px;
+    width: 200px;
+    outline: none;
+
+    &:focus {
+        border-color: #5da0e0;
+    }
+
+    &::placeholder {
+        color: #777;
+    }
+}
+
+.result-count {
+    color: #999;
+    font-size: 12px;
+    min-width: 56px;
+    text-align: center;
+    white-space: nowrap;
+    user-select: none;
+}
+
+.nav-btn {
+    background: transparent;
+    border: 1px solid #555;
+    border-radius: 3px;
+    color: #ccc;
+    cursor: pointer;
+    font-size: 13px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+
+    &:hover {
+        background: #3a3a3a;
+        color: #fff;
+    }
+
+    &:disabled {
+        opacity: 0.3;
+        cursor: default;
+    }
+}
+
+.close-btn {
+    composes: nav-btn;
+    margin-left: 2px;
+}
+
+.search-match {
+    outline: 2px solid rgba(255, 200, 50, 0.8) !important;
+    outline-offset: 2px;
+}
+
+.search-current {
+    outline: 2px solid #5da0e0 !important;
+    outline-offset: 2px;
+    box-shadow: 0 0 12px rgba(93, 160, 224, 0.5);
+}

package/nodeGraphSystem/graphStickyNote.d.ts

@@ -0,0 +1,94 @@
+import { type GraphCanvasComponent } from "./graphCanvas.js";
+import { type IStickyNoteData } from "./interfaces/nodeLocationInfo.js";
+/**
+ * A free-floating sticky note annotation on the graph canvas.
+ *
+ * Sticky notes are lightweight, text-only overlays that live in the frame container.
+ * They support dragging, resizing, and inline editing of both title and body text.
+ * Unlike frames, they do not group or contain nodes.
+ */
+export declare class GraphStickyNote {
+    /** The root DOM element for this sticky note. */
+    element: HTMLDivElement;
+    private _ownerCanvas;
+    private _id;
+    private _x;
+    private _y;
+    private _width;
+    private _height;
+    private _name;
+    private _body;
+    private _color;
+    private _headerElement;
+    private _titleElement;
+    private _bodyElement;
+    private _resizeHandle;
+    private _mouseStartX;
+    private _mouseStartY;
+    private _isDragging;
+    private _isResizing;
+    private _resizeStartW;
+    private _resizeStartH;
+    /** Unique ID for this sticky note */
+    get id(): number;
+    /** X position in canvas space */
+    get x(): number;
+    /** X position in canvas space */
+    set x(value: number);
+    /** Y position in canvas space */
+    get y(): number;
+    /** Y position in canvas space */
+    set y(value: number);
+    /** Width in pixels */
+    get width(): number;
+    /** Width in pixels */
+    set width(value: number);
+    /** Height in pixels */
+    get height(): number;
+    /** Height in pixels */
+    set height(value: number);
+    /** Display name */
+    get name(): string;
+    /** Display name */
+    set name(value: string);
+    /** Body text content */
+    get body(): string;
+    /** Body text content */
+    set body(value: string);
+    /** Background color CSS value */
+    get color(): string;
+    /** Background color CSS value */
+    set color(value: string);
+    /**
+     * Create a new sticky note on the canvas.
+     * @param canvas - the owning graph canvas component
+     */
+    constructor(canvas: GraphCanvasComponent);
+    /**
+     * Mark this note as visually selected or deselected.
+     * @param selected - whether the note is selected
+     */
+    setIsSelected(selected: boolean): void;
+    /**
+     * Serialize this sticky note to a plain data object.
+     * @returns the serialized data
+     */
+    serialize(): IStickyNoteData;
+    /**
+     * Create a sticky note from serialized data.
+     * @param data - the serialized sticky note data
+     * @param canvas - the owning graph canvas
+     * @returns the new sticky note instance
+     */
+    static Parse(data: IStickyNoteData, canvas: GraphCanvasComponent): GraphStickyNote;
+    /**
+     * Remove this sticky note from the canvas and clean up.
+     */
+    dispose(): void;
+    private _onDragStart;
+    private _onDragMoveHandler;
+    private _onDragEndHandler;
+    private _onResizeStart;
+    private _onResizeMoveHandler;
+    private _onResizeEndHandler;
+}