@babylonjs/shared-ui-components 9.0.0 → 9.2.0

package/nodeGraphSystem/graphCanvas.js

@@ -7,6 +7,7 @@ import { NodePort } from "./nodePort.js";
 import { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
 import { DataStorage } from "@babylonjs/core/Misc/dataStorage.js";
 import { GraphFrame } from "./graphFrame.js";
+import { GraphStickyNote } from "./graphStickyNote.js";
 import { FrameNodePort } from "./frameNodePort.js";
 import { PortDataDirection } from "./interfaces/portData.js";
 import * as styles from "./graphCanvas.module.scss";
@@ -14,6 +15,8 @@ import * as commonStyles from "./common.module.scss";
 import { TypeLedger } from "./typeLedger.js";
 import { RefreshNode } from "./tools.js";
 import { SearchBoxComponent } from "./searchBox.js";
+import { GraphMinimapComponent } from "./graphMinimap.js";
+import { GraphSearchComponent } from "./graphSearch.js";
 export class GraphCanvasComponent extends React.Component {
     get gridSize() {
         return this._gridSize;
@@ -67,6 +70,12 @@ export class GraphCanvasComponent extends React.Component {
     get selectedFrames() {
         return this._selectedFrames;
     }
+    get stickyNotes() {
+        return this._stickyNotes;
+    }
+    get selectedStickyNotes() {
+        return this._selectedStickyNotes;
+    }
     get selectedPort() {
         return this._selectedPort;
     }
@@ -96,6 +105,12 @@ export class GraphCanvasComponent extends React.Component {
         }
         return false;
     }
+    _deselectAllStickyNotes() {
+        for (const note of this._selectedStickyNotes) {
+            note.setIsSelected(false);
+        }
+        this._selectedStickyNotes = [];
+    }
     constructor(props) {
         super(props);
         this._minZoom = 0.1;
@@ -130,17 +145,25 @@ export class GraphCanvasComponent extends React.Component {
         this._selectedFrames = [];
         this._frameCandidate = null;
         this._frames = [];
+        this._stickyNotes = [];
+        this._selectedStickyNotes = [];
         this._nodeDataContentList = new Array();
         this._altKeyIsPressed = false;
         this._shiftKeyIsPressed = false;
         this._multiKeyIsPressed = false;
         this._oldY = -1;
+        this._keyUpHandler = null;
+        this._keyDownHandler = null;
+        this._blurHandler = null;
         this._frameIsMoving = false;
         this._isLoading = false;
         this._targetLinkCandidate = null;
         this._isCopyingOrPasting = false;
         this._copiedNodes = [];
         this._copiedFrames = [];
+        this._searchRef = React.createRef();
+        props.stateManager.enablePortCompatibilityHighlight = !!props.enablePortCompatibilityHighlight;
+        props.stateManager.enableNodeBadges = !!props.enableNodeBadges;
         props.stateManager.onSelectionChangedObservable.add((options) => {
             const { selection, forceKeepSelection, marqueeSelection = false } = options || {};
             if (!selection) {
@@ -148,6 +171,10 @@ export class GraphCanvasComponent extends React.Component {
                 this._selectedLink = null;
                 this._selectedFrames = [];
                 this._selectedPort = null;
+                for (const note of this._selectedStickyNotes) {
+                    note.setIsSelected(false);
+                }
+                this._selectedStickyNotes = [];
             }
             else {
                 if (selection instanceof NodeLink) {
@@ -155,18 +182,36 @@ export class GraphCanvasComponent extends React.Component {
                     this._selectedFrames = [];
                     this._selectedLink = selection;
                     this._selectedPort = null;
+                    this._deselectAllStickyNotes();
                 }
                 else if (selection instanceof NodePort) {
                     this._selectedNodes = [];
                     this._selectedFrames = [];
                     this._selectedLink = null;
                     this._selectedPort = selection;
+                    this._deselectAllStickyNotes();
                 }
                 else if (selection instanceof FrameNodePort) {
                     this._selectedNodes = [];
                     this._selectedFrames = [];
                     this._selectedLink = null;
                     this._selectedPort = selection;
+                    this._deselectAllStickyNotes();
+                }
+                else if (this.props.enableStickyNotes && selection instanceof GraphStickyNote) {
+                    if (this._multiKeyIsPressed || this._shiftKeyIsPressed || forceKeepSelection) {
+                        if (!this._selectedStickyNotes.includes(selection)) {
+                            this._selectedStickyNotes.push(selection);
+                        }
+                    }
+                    else {
+                        this._selectedNodes = [];
+                        this._selectedFrames = [];
+                        this._selectedStickyNotes = [selection];
+                        this._selectedLink = null;
+                        this._selectedPort = null;
+                    }
+                    selection.setIsSelected(true);
                 }
                 else if (selection instanceof GraphNode || selection instanceof GraphFrame) {
                     // If in marquee selection mode, always prioritize selecting nodes. Otherwise, always prioritize selecting the type of
@@ -202,6 +247,7 @@ export class GraphCanvasComponent extends React.Component {
                                 this._selectedNodes = [];
                                 this._selectedLink = null;
                                 this._selectedPort = null;
+                                this._deselectAllStickyNotes();
                             }
                         }
                         else if (selection instanceof GraphNode) {
@@ -215,6 +261,7 @@ export class GraphCanvasComponent extends React.Component {
                                 this._selectedNodes = [selection];
                                 this._selectedLink = null;
                                 this._selectedPort = null;
+                                this._deselectAllStickyNotes();
                             }
                         }
                     }
@@ -227,17 +274,20 @@ export class GraphCanvasComponent extends React.Component {
         props.stateManager.onGridSizeChanged.add(() => {
             this.gridSize = DataStorage.ReadNumber("GridSize", 20);
         });
-        this.props.stateManager.hostDocument.addEventListener("keyup", () => this.onKeyUp(), false);
-        this.props.stateManager.hostDocument.addEventListener("keydown", (evt) => {
+        this._keyUpHandler = () => this.onKeyUp();
+        this._keyDownHandler = (evt) => {
             this._altKeyIsPressed = evt.altKey;
             this._shiftKeyIsPressed = evt.shiftKey;
             this._multiKeyIsPressed = evt.ctrlKey || evt.metaKey;
-        }, false);
-        this.props.stateManager.hostDocument.defaultView.addEventListener("blur", () => {
+        };
+        this._blurHandler = () => {
             this._altKeyIsPressed = false;
             this._shiftKeyIsPressed = false;
             this._multiKeyIsPressed = false;
-        }, false);
+        };
+        this.props.stateManager.hostDocument.addEventListener("keyup", this._keyUpHandler, false);
+        this.props.stateManager.hostDocument.addEventListener("keydown", this._keyDownHandler, false);
+        this.props.stateManager.hostDocument.defaultView.addEventListener("blur", this._blurHandler, false);
         // Store additional data to serialization object
         this.props.stateManager.storeEditorData = (editorData, graphFrame) => {
             editorData.frames = [];
@@ -251,6 +301,12 @@ export class GraphCanvasComponent extends React.Component {
                 for (const frame of this._frames) {
                     editorData.frames.push(frame.serialize(true));
                 }
+                if (this.props.enableStickyNotes) {
+                    editorData.stickyNotes = [];
+                    for (const note of this._stickyNotes) {
+                        editorData.stickyNotes.push(note.serialize());
+                    }
+                }
             }
         };
     }
@@ -360,6 +416,13 @@ export class GraphCanvasComponent extends React.Component {
                 frame.dispose();
             }
         }
+        if (this.props.enableStickyNotes && this._selectedStickyNotes.length) {
+            needRebuild = true;
+            for (const note of this._selectedStickyNotes) {
+                note.dispose();
+            }
+            this._selectedStickyNotes = [];
+        }
         if (!needRebuild) {
             return;
         }
@@ -627,8 +690,14 @@ export class GraphCanvasComponent extends React.Component {
         for (const frame of frames) {
             frame.dispose();
         }
+        const notes = this._stickyNotes.splice(0);
+        for (const note of notes) {
+            note.element.parentElement?.removeChild(note.element);
+        }
         this._nodes = [];
         this._frames = [];
+        this._stickyNotes = [];
+        this._selectedStickyNotes = [];
         this._links = [];
         this._graphCanvas.innerHTML = "";
         this._svgCanvas.innerHTML = "";
@@ -749,6 +818,18 @@ export class GraphCanvasComponent extends React.Component {
         this.gridSize = DataStorage.ReadNumber("GridSize", 20);
         this.updateTransform();
     }
+    componentWillUnmount() {
+        const doc = this.props.stateManager.hostDocument;
+        if (this._keyUpHandler) {
+            doc.removeEventListener("keyup", this._keyUpHandler);
+        }
+        if (this._keyDownHandler) {
+            doc.removeEventListener("keydown", this._keyDownHandler);
+        }
+        if (this._blurHandler) {
+            doc.defaultView?.removeEventListener("blur", this._blurHandler);
+        }
+    }
     onMove(evt) {
         if (this.stateManager.modalIsDisplayed) {
             return;
@@ -876,6 +957,9 @@ export class GraphCanvasComponent extends React.Component {
                     this._candidateLink = new NodeLink(this, portElement, portElement.node);
                 }
                 this._candidateLinkedHasMoved = false;
+                if (this.stateManager.enablePortCompatibilityHighlight) {
+                    this.stateManager.candidateSourcePortData = this._candidateLink.portA.portData;
+                }
             }
             return;
         }
@@ -947,6 +1031,7 @@ export class GraphCanvasComponent extends React.Component {
             this._candidateLink.dispose();
             this._candidateLink = null;
             this._candidatePort = null;
+            this.stateManager.candidateSourcePortData = null;
         }
         if (this._selectionBox) {
             this._selectionBox.parentElement.removeChild(this._selectionBox);
@@ -1021,6 +1106,16 @@ export class GraphCanvasComponent extends React.Component {
         this.x = 0;
         this.y = 0;
     }
+    /**
+     * Pans the canvas so the given node is visible and roughly centered.
+     * @param node - the node to bring into view
+     */
+    zoomToNode(node) {
+        const containerWidth = this._rootContainer.clientWidth;
+        const containerHeight = this._rootContainer.clientHeight;
+        this.x = -node.x + containerWidth / (2 * this.zoom) - 100;
+        this.y = -node.y + containerHeight / (2 * this.zoom) - 20;
+    }
     processCandidatePort() {
         let pointB = this._candidateLink.portA.portData;
         let nodeB = this._candidateLink.portA.node;
@@ -1182,7 +1277,13 @@ export class GraphCanvasComponent extends React.Component {
         for (const frame of frames) {
             frame.dispose();
         }
+        const notes = this._stickyNotes.splice(0);
+        for (const note of notes) {
+            note.element.parentElement?.removeChild(note.element);
+        }
         this._frames = [];
+        this._stickyNotes = [];
+        this._selectedStickyNotes = [];
         this.x = editorData.x || 0;
         this.y = editorData.y || 0;
         this.zoom = editorData.zoom || 1;
@@ -1193,6 +1294,13 @@ export class GraphCanvasComponent extends React.Component {
                 this._frames.push(frame);
             }
         }
+        // Sticky notes
+        if (this.props.enableStickyNotes && editorData.stickyNotes) {
+            for (const noteData of editorData.stickyNotes) {
+                const note = GraphStickyNote.Parse(noteData, this);
+                this._stickyNotes.push(note);
+            }
+        }
     }
     reOrganize(editorData = null, isImportingAFrame = false) {
         if (!editorData || !editorData.locations) {
@@ -1228,8 +1336,33 @@ export class GraphCanvasComponent extends React.Component {
         this._frames.push(frame);
         this.stateManager.onSelectionChangedObservable.notifyObservers({ selection: frame });
     }
+    /**
+     * Create a new sticky note at the given canvas-space position.
+     * @param x - x position in canvas space
+     * @param y - y position in canvas space
+     * @returns the created sticky note
+     */
+    addStickyNote(x, y) {
+        if (!this.props.enableStickyNotes) {
+            return null;
+        }
+        const note = new GraphStickyNote(this);
+        note.x = x;
+        note.y = y;
+        this._stickyNotes.push(note);
+        this.stateManager.onSelectionChangedObservable.notifyObservers({ selection: note });
+        return note;
+    }
+    /**
+     * Open the find-in-graph search bar, if enabled.
+     */
+    showSearch() {
+        if (this.props.enableFindInGraph) {
+            this._searchRef.current?.show();
+        }
+    }
     render() {
-        return (_jsxs("div", { ref: this._hostCanvasRef, id: "graph-canvas", className: styles["graph-canvas"], onWheel: (evt) => this.onWheel(evt), onPointerMove: (evt) => this.onMove(evt), onPointerDown: (evt) => this.onDown(evt), onPointerUp: (evt) => this.onUp(evt), children: [_jsxs("div", { id: "graph-container", className: styles["graph-container"], ref: this._rootContainerRef, children: [_jsx("div", { id: "graph-canvas-container", className: styles["graph-canvas-container"], ref: this._graphCanvasRef }), _jsx("div", { id: "frame-container", className: styles["frame-container"], ref: this._frameContainerRef }), _jsx("svg", { id: "graph-svg-container", className: styles["graph-svg-container"], ref: this._svgCanvasRef }), _jsx("div", { id: "selection-container", className: styles["selection-container"], ref: this._selectionContainerRef })] }), _jsx(SearchBoxComponent, { stateManager: this.stateManager })] }));
+        return (_jsxs("div", { ref: this._hostCanvasRef, id: "graph-canvas", className: styles["graph-canvas"], onWheel: (evt) => this.onWheel(evt), onPointerMove: (evt) => this.onMove(evt), onPointerDown: (evt) => this.onDown(evt), onPointerUp: (evt) => this.onUp(evt), children: [_jsxs("div", { id: "graph-container", className: styles["graph-container"], ref: this._rootContainerRef, children: [_jsx("div", { id: "graph-canvas-container", className: styles["graph-canvas-container"], ref: this._graphCanvasRef }), _jsx("div", { id: "frame-container", className: styles["frame-container"], ref: this._frameContainerRef }), _jsx("svg", { id: "graph-svg-container", className: styles["graph-svg-container"], ref: this._svgCanvasRef }), _jsx("div", { id: "selection-container", className: styles["selection-container"], ref: this._selectionContainerRef })] }), _jsx(SearchBoxComponent, { stateManager: this.stateManager }), this.props.enableMinimap && _jsx(GraphMinimapComponent, { canvas: this }), this.props.enableFindInGraph && _jsx(GraphSearchComponent, { ref: this._searchRef, canvas: this })] }));
     }
 }
 GraphCanvasComponent.NodeWidth = 100;