@onerjs/shared-ui-components 8.44.7 → 8.44.8

package/components/bars/CommandButton.module.scss

@@ -16,6 +16,7 @@
 .active {
     transform-origin: center;
     background-color: var(--selectionGrey);
+    box-shadow: 0 2px 0 0 white;
 }
 
 .commandButtonIcon {
@@ -30,4 +31,5 @@
 .disabled {
     pointer-events: none;
     color: black;
+    opacity: 0.35;
 }

package/historyStack.js

@@ -165,6 +165,9 @@ export class HistoryStack {
         try {
             // _dataProvider can return T or Promise<T>; await handles both.
             const provided = await this._dataProvider();
+            if (provided == null) {
+                return;
+            }
             const data = this._copy(provided);
             if (this._activeData) {
                 const diff = this._generateJSONDiff(data, this._activeData);

package/historyStack.js.map

@@ -1 +1 @@
-{"version":3,"file":"historyStack.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/historyStack.ts"],"names":[],"mappings":"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","sourcesContent":["import type { IDisposable } from \"core/scene\";\r\n\r\n/**\r\n * Class handling undo / redo operations\r\n */\r\nexport class HistoryStack implements IDisposable {\r\n    private _historyStack: string[] = [];\r\n    private _redoStack: string[] = [];\r\n    private _activeData: any;\r\n    private readonly _maxHistoryLength = 256;\r\n    private _locked = false;\r\n    private _dataProvider: () => any;\r\n    private _applyUpdate: (data: any) => void;\r\n\r\n    /**\r\n     * Gets or sets a boolean indicating if the stack is enabled\r\n     */\r\n    public isEnabled = true;\r\n\r\n    /**\r\n     * Constructor\r\n     * @param dataProvider defines the data provider function\r\n     * @param applyUpdate defines the code to execute when undo/redo operation is required\r\n     */\r\n    constructor(dataProvider: () => any, applyUpdate: (data: any) => void) {\r\n        this._dataProvider = dataProvider;\r\n        this._applyUpdate = applyUpdate;\r\n    }\r\n\r\n    /**\r\n     * Process key event to handle undo / redo\r\n     * @param evt defines the keyboard event to process\r\n     * @returns true if the event was processed\r\n     */\r\n    processKeyEvent(evt: KeyboardEvent): boolean {\r\n        if (!this.isEnabled) {\r\n            return false;\r\n        }\r\n\r\n        if (evt.ctrlKey || evt.metaKey) {\r\n            if (evt.key === \"z\" || evt.key === \"Z\") {\r\n                if (evt.shiftKey) {\r\n                    this.redo();\r\n                    return true;\r\n                }\r\n\r\n                this.undo();\r\n                return true;\r\n            }\r\n            if (evt.key === \"y\" || evt.key === \"Y\") {\r\n                this.redo();\r\n                return true;\r\n            }\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    /**\r\n     * Resets the stack\r\n     */\r\n    public reset() {\r\n        this._historyStack = [];\r\n        this._redoStack = [];\r\n        this._activeData = null;\r\n        void this.storeAsync();\r\n    }\r\n\r\n    /**\r\n     * Remove the n-1 element of the stack\r\n     */\r\n    public collapseLastTwo() {\r\n        if (this._historyStack.length < 2) {\r\n            return;\r\n        }\r\n\r\n        this._locked = true;\r\n        const diff = this._historyStack.pop()!;\r\n        const diff2 = this._historyStack.pop()!;\r\n\r\n        let newState = this._applyJSONDiff(this._activeData, JSON.parse(diff));\r\n        newState = this._applyJSONDiff(newState, JSON.parse(diff2));\r\n\r\n        this._historyStack.push(JSON.stringify(this._generateJSONDiff(this._activeData, newState)));\r\n\r\n        this._locked = false;\r\n    }\r\n\r\n    private _generateJSONDiff(obj1: any, obj2: any): any {\r\n        if (obj1 === obj2) {\r\n            return undefined;\r\n        }\r\n        if (obj1 === null || obj2 === null || typeof obj1 !== \"object\" || typeof obj2 !== \"object\") {\r\n            if (obj1 !== obj2 && obj2 === undefined) {\r\n                return \"@d@\";\r\n            }\r\n            return obj2;\r\n        }\r\n\r\n        if (Array.isArray(obj1) && Array.isArray(obj2)) {\r\n            const diff = [];\r\n            const maxLength = Math.max(obj1.length, obj2.length);\r\n            let hasChanges = false;\r\n\r\n            for (let i = 0; i < maxLength; i++) {\r\n                const localDiff = this._generateJSONDiff(obj1[i], obj2[i]);\r\n                if (localDiff !== undefined) {\r\n                    diff[i] = localDiff;\r\n                    hasChanges = true;\r\n                }\r\n            }\r\n\r\n            return hasChanges ? diff : undefined;\r\n        }\r\n\r\n        const diff: any = {};\r\n        const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);\r\n        let hasChanges = false;\r\n\r\n        for (const key of keys) {\r\n            if (!(key in obj1)) {\r\n                diff[key] = obj2[key];\r\n                hasChanges = true;\r\n            } else if (!(key in obj2)) {\r\n                diff[key] = \"@d@\"; // Mark for deletion\r\n                hasChanges = true;\r\n            } else {\r\n                const nestedDiff = this._generateJSONDiff(obj1[key], obj2[key]);\r\n                if (nestedDiff !== undefined) {\r\n                    diff[key] = nestedDiff;\r\n                    hasChanges = true;\r\n                }\r\n            }\r\n        }\r\n\r\n        return hasChanges ? diff : undefined;\r\n    }\r\n\r\n    private _applyJSONDiff(obj1: any, diff: any) {\r\n        if (diff === undefined) {\r\n            return obj1;\r\n        }\r\n        if (typeof diff !== \"object\" || diff === null || obj1 == null) {\r\n            return diff;\r\n        }\r\n\r\n        const result: any = Array.isArray(obj1) ? [] : {};\r\n\r\n        if (Array.isArray(diff)) {\r\n            for (let i = 0; i < Math.max(obj1.length, diff.length); i++) {\r\n                if (diff[i] === null && i < obj1.length) {\r\n                    result[i] = obj1[i];\r\n                } else if (diff[i] !== \"@d@\") {\r\n                    result[i] = this._applyJSONDiff(obj1[i], diff[i]);\r\n                }\r\n            }\r\n        } else {\r\n            for (const key in obj1) {\r\n                if (!(key in diff)) {\r\n                    result[key] = obj1[key];\r\n                }\r\n            }\r\n            for (const key in diff) {\r\n                if (diff[key] === \"@d@\") {\r\n                    // Skip this key (it's been deleted)\r\n                } else if (typeof diff[key] === \"object\" && diff[key] !== null) {\r\n                    result[key] = this._applyJSONDiff(obj1[key], diff[key]);\r\n                } else {\r\n                    result[key] = diff[key];\r\n                }\r\n            }\r\n        }\r\n\r\n        return result;\r\n    }\r\n\r\n    private _copy(source: any) {\r\n        return JSON.parse(JSON.stringify(source));\r\n    }\r\n\r\n    /**\r\n     * Stores the current state\r\n     */\r\n    public async storeAsync() {\r\n        if (this._locked || !this.isEnabled) {\r\n            return;\r\n        }\r\n\r\n        this._locked = true;\r\n        try {\r\n            // _dataProvider can return T or Promise<T>; await handles both.\r\n            const provided = await this._dataProvider();\r\n            const data = this._copy(provided);\r\n\r\n            if (this._activeData) {\r\n                const diff = this._generateJSONDiff(data, this._activeData);\r\n                if (!diff) {\r\n                    return; // finally will still run and release the lock\r\n                }\r\n                this._historyStack.push(JSON.stringify(diff));\r\n            }\r\n\r\n            this._activeData = data;\r\n\r\n            if (this._historyStack.length > this._maxHistoryLength) {\r\n                this._historyStack.shift();\r\n            }\r\n\r\n            this._redoStack.length = 0;\r\n        } finally {\r\n            this._locked = false;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Checks if there is any data in the history stack\r\n     */\r\n    public get hasData(): boolean {\r\n        return this._historyStack.length > 0;\r\n    }\r\n\r\n    /**\r\n     * Undo the latest operation\r\n     */\r\n    public undo() {\r\n        if (!this._historyStack.length) {\r\n            return;\r\n        }\r\n\r\n        this._locked = true;\r\n        const diff = this._historyStack.pop()!;\r\n\r\n        const newState = this._applyJSONDiff(this._activeData, JSON.parse(diff));\r\n        this._redoStack.push(JSON.stringify(this._generateJSONDiff(newState, this._activeData)));\r\n\r\n        this._applyUpdate(this._copy(newState));\r\n\r\n        this._activeData = newState;\r\n\r\n        this._locked = false;\r\n    }\r\n\r\n    /**\r\n     * Redo the latest undo operation\r\n     */\r\n    public redo() {\r\n        if (!this._redoStack.length) {\r\n            return;\r\n        }\r\n\r\n        this._locked = true;\r\n        const diff = this._redoStack.pop()!;\r\n\r\n        const newState = this._applyJSONDiff(this._activeData, JSON.parse(diff));\r\n        this._historyStack.push(JSON.stringify(this._generateJSONDiff(newState, this._activeData)));\r\n\r\n        this._applyUpdate(this._copy(newState));\r\n        this._activeData = newState;\r\n\r\n        this._locked = false;\r\n    }\r\n\r\n    /**\r\n     * Disposes the stack\r\n     */\r\n    public dispose() {\r\n        this._historyStack = [];\r\n        this._redoStack = [];\r\n    }\r\n}\r\n"]}
+{"version":3,"file":"historyStack.js","sourceRoot":"","sources":["../../../dev/sharedUiComponents/src/historyStack.ts"],"names":[],"mappings":"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","sourcesContent":["import type { IDisposable } from \"core/scene\";\r\n\r\n/**\r\n * Class handling undo / redo operations\r\n */\r\nexport class HistoryStack implements IDisposable {\r\n    private _historyStack: string[] = [];\r\n    private _redoStack: string[] = [];\r\n    private _activeData: any;\r\n    private readonly _maxHistoryLength = 256;\r\n    private _locked = false;\r\n    private _dataProvider: () => any;\r\n    private _applyUpdate: (data: any) => void;\r\n\r\n    /**\r\n     * Gets or sets a boolean indicating if the stack is enabled\r\n     */\r\n    public isEnabled = true;\r\n\r\n    /**\r\n     * Constructor\r\n     * @param dataProvider defines the data provider function\r\n     * @param applyUpdate defines the code to execute when undo/redo operation is required\r\n     */\r\n    constructor(dataProvider: () => any, applyUpdate: (data: any) => void) {\r\n        this._dataProvider = dataProvider;\r\n        this._applyUpdate = applyUpdate;\r\n    }\r\n\r\n    /**\r\n     * Process key event to handle undo / redo\r\n     * @param evt defines the keyboard event to process\r\n     * @returns true if the event was processed\r\n     */\r\n    processKeyEvent(evt: KeyboardEvent): boolean {\r\n        if (!this.isEnabled) {\r\n            return false;\r\n        }\r\n\r\n        if (evt.ctrlKey || evt.metaKey) {\r\n            if (evt.key === \"z\" || evt.key === \"Z\") {\r\n                if (evt.shiftKey) {\r\n                    this.redo();\r\n                    return true;\r\n                }\r\n\r\n                this.undo();\r\n                return true;\r\n            }\r\n            if (evt.key === \"y\" || evt.key === \"Y\") {\r\n                this.redo();\r\n                return true;\r\n            }\r\n        }\r\n\r\n        return false;\r\n    }\r\n\r\n    /**\r\n     * Resets the stack\r\n     */\r\n    public reset() {\r\n        this._historyStack = [];\r\n        this._redoStack = [];\r\n        this._activeData = null;\r\n        void this.storeAsync();\r\n    }\r\n\r\n    /**\r\n     * Remove the n-1 element of the stack\r\n     */\r\n    public collapseLastTwo() {\r\n        if (this._historyStack.length < 2) {\r\n            return;\r\n        }\r\n\r\n        this._locked = true;\r\n        const diff = this._historyStack.pop()!;\r\n        const diff2 = this._historyStack.pop()!;\r\n\r\n        let newState = this._applyJSONDiff(this._activeData, JSON.parse(diff));\r\n        newState = this._applyJSONDiff(newState, JSON.parse(diff2));\r\n\r\n        this._historyStack.push(JSON.stringify(this._generateJSONDiff(this._activeData, newState)));\r\n\r\n        this._locked = false;\r\n    }\r\n\r\n    private _generateJSONDiff(obj1: any, obj2: any): any {\r\n        if (obj1 === obj2) {\r\n            return undefined;\r\n        }\r\n        if (obj1 === null || obj2 === null || typeof obj1 !== \"object\" || typeof obj2 !== \"object\") {\r\n            if (obj1 !== obj2 && obj2 === undefined) {\r\n                return \"@d@\";\r\n            }\r\n            return obj2;\r\n        }\r\n\r\n        if (Array.isArray(obj1) && Array.isArray(obj2)) {\r\n            const diff = [];\r\n            const maxLength = Math.max(obj1.length, obj2.length);\r\n            let hasChanges = false;\r\n\r\n            for (let i = 0; i < maxLength; i++) {\r\n                const localDiff = this._generateJSONDiff(obj1[i], obj2[i]);\r\n                if (localDiff !== undefined) {\r\n                    diff[i] = localDiff;\r\n                    hasChanges = true;\r\n                }\r\n            }\r\n\r\n            return hasChanges ? diff : undefined;\r\n        }\r\n\r\n        const diff: any = {};\r\n        const keys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);\r\n        let hasChanges = false;\r\n\r\n        for (const key of keys) {\r\n            if (!(key in obj1)) {\r\n                diff[key] = obj2[key];\r\n                hasChanges = true;\r\n            } else if (!(key in obj2)) {\r\n                diff[key] = \"@d@\"; // Mark for deletion\r\n                hasChanges = true;\r\n            } else {\r\n                const nestedDiff = this._generateJSONDiff(obj1[key], obj2[key]);\r\n                if (nestedDiff !== undefined) {\r\n                    diff[key] = nestedDiff;\r\n                    hasChanges = true;\r\n                }\r\n            }\r\n        }\r\n\r\n        return hasChanges ? diff : undefined;\r\n    }\r\n\r\n    private _applyJSONDiff(obj1: any, diff: any) {\r\n        if (diff === undefined) {\r\n            return obj1;\r\n        }\r\n        if (typeof diff !== \"object\" || diff === null || obj1 == null) {\r\n            return diff;\r\n        }\r\n\r\n        const result: any = Array.isArray(obj1) ? [] : {};\r\n\r\n        if (Array.isArray(diff)) {\r\n            for (let i = 0; i < Math.max(obj1.length, diff.length); i++) {\r\n                if (diff[i] === null && i < obj1.length) {\r\n                    result[i] = obj1[i];\r\n                } else if (diff[i] !== \"@d@\") {\r\n                    result[i] = this._applyJSONDiff(obj1[i], diff[i]);\r\n                }\r\n            }\r\n        } else {\r\n            for (const key in obj1) {\r\n                if (!(key in diff)) {\r\n                    result[key] = obj1[key];\r\n                }\r\n            }\r\n            for (const key in diff) {\r\n                if (diff[key] === \"@d@\") {\r\n                    // Skip this key (it's been deleted)\r\n                } else if (typeof diff[key] === \"object\" && diff[key] !== null) {\r\n                    result[key] = this._applyJSONDiff(obj1[key], diff[key]);\r\n                } else {\r\n                    result[key] = diff[key];\r\n                }\r\n            }\r\n        }\r\n\r\n        return result;\r\n    }\r\n\r\n    private _copy(source: any) {\r\n        return JSON.parse(JSON.stringify(source));\r\n    }\r\n\r\n    /**\r\n     * Stores the current state\r\n     */\r\n    public async storeAsync() {\r\n        if (this._locked || !this.isEnabled) {\r\n            return;\r\n        }\r\n\r\n        this._locked = true;\r\n        try {\r\n            // _dataProvider can return T or Promise<T>; await handles both.\r\n            const provided = await this._dataProvider();\r\n            if (provided == null) {\r\n                return;\r\n            }\r\n            const data = this._copy(provided);\r\n\r\n            if (this._activeData) {\r\n                const diff = this._generateJSONDiff(data, this._activeData);\r\n                if (!diff) {\r\n                    return; // finally will still run and release the lock\r\n                }\r\n                this._historyStack.push(JSON.stringify(diff));\r\n            }\r\n\r\n            this._activeData = data;\r\n\r\n            if (this._historyStack.length > this._maxHistoryLength) {\r\n                this._historyStack.shift();\r\n            }\r\n\r\n            this._redoStack.length = 0;\r\n        } finally {\r\n            this._locked = false;\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Checks if there is any data in the history stack\r\n     */\r\n    public get hasData(): boolean {\r\n        return this._historyStack.length > 0;\r\n    }\r\n\r\n    /**\r\n     * Undo the latest operation\r\n     */\r\n    public undo() {\r\n        if (!this._historyStack.length) {\r\n            return;\r\n        }\r\n\r\n        this._locked = true;\r\n        const diff = this._historyStack.pop()!;\r\n\r\n        const newState = this._applyJSONDiff(this._activeData, JSON.parse(diff));\r\n        this._redoStack.push(JSON.stringify(this._generateJSONDiff(newState, this._activeData)));\r\n\r\n        this._applyUpdate(this._copy(newState));\r\n\r\n        this._activeData = newState;\r\n\r\n        this._locked = false;\r\n    }\r\n\r\n    /**\r\n     * Redo the latest undo operation\r\n     */\r\n    public redo() {\r\n        if (!this._redoStack.length) {\r\n            return;\r\n        }\r\n\r\n        this._locked = true;\r\n        const diff = this._redoStack.pop()!;\r\n\r\n        const newState = this._applyJSONDiff(this._activeData, JSON.parse(diff));\r\n        this._historyStack.push(JSON.stringify(this._generateJSONDiff(newState, this._activeData)));\r\n\r\n        this._applyUpdate(this._copy(newState));\r\n        this._activeData = newState;\r\n\r\n        this._locked = false;\r\n    }\r\n\r\n    /**\r\n     * Disposes the stack\r\n     */\r\n    public dispose() {\r\n        this._historyStack = [];\r\n        this._redoStack = [];\r\n    }\r\n}\r\n"]}

package/nodeGraphSystem/common.module.scss

@@ -29,6 +29,9 @@
 
 .port-label {
     align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .inputsContainer {

package/nodeGraphSystem/graphCanvas.d.ts

@@ -4,6 +4,7 @@ import type { Nullable } from "@onerjs/core/types.js";
 import { NodeLink } from "./nodeLink.js";
 import { NodePort } from "./nodePort.js";
 import { GraphFrame } from "./graphFrame.js";
+import { GraphStickyNote } from "./graphStickyNote.js";
 import type { IEditorData, IFrameData } from "./interfaces/nodeLocationInfo.js";
 import type { StateManager } from "./stateManager.js";
 import type { INodeData } from "./interfaces/nodeData.js";
@@ -12,6 +13,16 @@ import type { INodeContainer } from "./interfaces/nodeContainer.js";
 export interface IGraphCanvasComponentProps {
     stateManager: StateManager;
     onEmitNewNode: (nodeData: INodeData) => GraphNode;
+    /** When true, a minimap overlay is shown during zoom/pan. Default false. */
+    enableMinimap?: boolean;
+    /** When true, sticky note annotations can be created and managed on the canvas. Default false. */
+    enableStickyNotes?: boolean;
+    /** When true, Ctrl+F opens a find-in-graph search bar. Default false. */
+    enableFindInGraph?: boolean;
+    /** When true, ports glow red during drag when hovering over an incompatible target. Default false. */
+    enablePortCompatibilityHighlight?: boolean;
+    /** When true, nodes can display validation and breakpoint badge overlays. Default false. */
+    enableNodeBadges?: boolean;
 }
 export declare class GraphCanvasComponent extends React.Component<IGraphCanvasComponentProps> implements INodeContainer {
     static readonly NodeWidth = 100;
@@ -53,17 +64,23 @@ export declare class GraphCanvasComponent extends React.Component<IGraphCanvasCo
     private _selectedFrames;
     private _frameCandidate;
     private _frames;
+    private _stickyNotes;
+    private _selectedStickyNotes;
     private _nodeDataContentList;
     private _altKeyIsPressed;
     private _shiftKeyIsPressed;
     private _multiKeyIsPressed;
     private _oldY;
+    private _keyUpHandler;
+    private _keyDownHandler;
+    private _blurHandler;
     _frameIsMoving: boolean;
     _isLoading: boolean;
     _targetLinkCandidate: Nullable<NodeLink>;
     private _isCopyingOrPasting;
     private _copiedNodes;
     private _copiedFrames;
+    private _searchRef;
     get gridSize(): number;
     set gridSize(value: number);
     get stateManager(): StateManager;
@@ -79,6 +96,8 @@ export declare class GraphCanvasComponent extends React.Component<IGraphCanvasCo
     get selectedNodes(): GraphNode[];
     get selectedLink(): Nullable<NodeLink>;
     get selectedFrames(): GraphFrame[];
+    get stickyNotes(): GraphStickyNote[];
+    get selectedStickyNotes(): GraphStickyNote[];
     get selectedPort(): Nullable<NodePort>;
     get canvasContainer(): HTMLDivElement;
     get hostCanvas(): HTMLDivElement;
@@ -86,6 +105,7 @@ export declare class GraphCanvasComponent extends React.Component<IGraphCanvasCo
     get selectionContainer(): HTMLDivElement;
     get frameContainer(): HTMLDivElement;
     private _selectedFrameAndNodesConflict;
+    private _deselectAllStickyNotes;
     constructor(props: IGraphCanvasComponentProps);
     populateConnectedEntriesBeforeRemoval(item: GraphNode, items: GraphNode[], inputs: Nullable<IPortData>[], outputs: Nullable<IPortData>[]): void;
     automaticRewire(inputs: Nullable<IPortData>[], outputs: Nullable<IPortData>[], firstOnly?: boolean): void;
@@ -109,16 +129,33 @@ export declare class GraphCanvasComponent extends React.Component<IGraphCanvasCo
     appendNode(nodeData: INodeData): GraphNode;
     distributeGraph(): void;
     componentDidMount(): void;
+    componentWillUnmount(): void;
     onMove(evt: React.PointerEvent): void;
     onDown(evt: React.PointerEvent<HTMLElement>): void;
     onUp(evt: React.PointerEvent): void;
     onWheel(evt: React.WheelEvent): void;
     zoomToFit(): void;
+    /**
+     * Pans the canvas so the given node is visible and roughly centered.
+     * @param node - the node to bring into view
+     */
+    zoomToNode(node: GraphNode): void;
     processCandidatePort(): void;
     connectNodes(nodeA: GraphNode, pointA: IPortData, nodeB: GraphNode, pointB: IPortData): void;
     drop(newNode: GraphNode, targetX: number, targetY: number, offsetX: number, offsetY: number): void;
     processEditorData(editorData: IEditorData): void;
     reOrganize(editorData?: Nullable<IEditorData>, isImportingAFrame?: boolean): void;
     addFrame(frameData: IFrameData): void;
+    /**
+     * 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: number, y: number): GraphStickyNote | null;
+    /**
+     * Open the find-in-graph search bar, if enabled.
+     */
+    showSearch(): void;
     render(): import("react/jsx-runtime").JSX.Element;
 }

package/nodeGraphSystem/graphCanvas.js

@@ -7,6 +7,7 @@ import { NodePort } from "./nodePort.js";
 import { Vector2 } from "@onerjs/core/Maths/math.vector.js";
 import { DataStorage } from "@onerjs/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;