@babylonjs/shared-ui-components 9.0.0 → 9.2.0

package/nodeGraphSystem/graphStickyNote.js

@@ -0,0 +1,310 @@
+import * as styles from "./graphStickyNote.module.scss";
+/**
+ * Auto-incrementing counter for unique sticky note IDs.
+ */
+let StickyNoteCounter = 0;
+/**
+ * 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 class GraphStickyNote {
+    /** Unique ID for this sticky note */
+    get id() {
+        return this._id;
+    }
+    /** X position in canvas space */
+    get x() {
+        return this._x;
+    }
+    /** X position in canvas space */
+    set x(value) {
+        this._x = value;
+        this.element.style.left = `${this._ownerCanvas.getGridPosition(value)}px`;
+    }
+    /** Y position in canvas space */
+    get y() {
+        return this._y;
+    }
+    /** Y position in canvas space */
+    set y(value) {
+        this._y = value;
+        this.element.style.top = `${this._ownerCanvas.getGridPosition(value)}px`;
+    }
+    /** Width in pixels */
+    get width() {
+        return this._width;
+    }
+    /** Width in pixels */
+    set width(value) {
+        this._width = Math.max(100, value);
+        this.element.style.width = `${this._width}px`;
+    }
+    /** Height in pixels */
+    get height() {
+        return this._height;
+    }
+    /** Height in pixels */
+    set height(value) {
+        this._height = Math.max(60, value);
+        this.element.style.height = `${this._height}px`;
+    }
+    /** Display name */
+    get name() {
+        return this._name;
+    }
+    /** Display name */
+    set name(value) {
+        this._name = value;
+        this._titleElement.textContent = value;
+    }
+    /** Body text content */
+    get body() {
+        return this._body;
+    }
+    /** Body text content */
+    set body(value) {
+        this._body = value;
+        this._bodyElement.textContent = value;
+    }
+    /** Background color CSS value */
+    get color() {
+        return this._color;
+    }
+    /** Background color CSS value */
+    set color(value) {
+        this._color = value;
+        this.element.style.background = value;
+    }
+    /**
+     * Create a new sticky note on the canvas.
+     * @param canvas - the owning graph canvas component
+     */
+    constructor(canvas) {
+        this._x = 0;
+        this._y = 0;
+        this._width = 180;
+        this._height = 120;
+        this._name = "Note";
+        this._body = "";
+        this._color = "rgba(255, 235, 130, 0.92)";
+        // Drag state
+        this._mouseStartX = 0;
+        this._mouseStartY = 0;
+        this._isDragging = false;
+        this._isResizing = false;
+        this._resizeStartW = 0;
+        this._resizeStartH = 0;
+        this._onDragMoveHandler = (evt) => {
+            if (!this._isDragging) {
+                return;
+            }
+            const zoom = this._ownerCanvas.zoom;
+            const dx = (evt.clientX - this._mouseStartX) / zoom;
+            const dy = (evt.clientY - this._mouseStartY) / zoom;
+            this._mouseStartX = evt.clientX;
+            this._mouseStartY = evt.clientY;
+            this.x += dx;
+            this.y += dy;
+        };
+        this._onDragEndHandler = (evt) => {
+            this._isDragging = false;
+            this._headerElement.releasePointerCapture(evt.pointerId);
+            this._headerElement.removeEventListener("pointermove", this._onDragMoveHandler);
+            this._headerElement.removeEventListener("pointerup", this._onDragEndHandler);
+        };
+        this._onResizeMoveHandler = (evt) => {
+            if (!this._isResizing) {
+                return;
+            }
+            const zoom = this._ownerCanvas.zoom;
+            const dx = (evt.clientX - this._mouseStartX) / zoom;
+            const dy = (evt.clientY - this._mouseStartY) / zoom;
+            this.width = this._resizeStartW + dx;
+            this.height = this._resizeStartH + dy;
+        };
+        this._onResizeEndHandler = (evt) => {
+            this._isResizing = false;
+            this._resizeHandle.releasePointerCapture(evt.pointerId);
+            this._resizeHandle.removeEventListener("pointermove", this._onResizeMoveHandler);
+            this._resizeHandle.removeEventListener("pointerup", this._onResizeEndHandler);
+        };
+        this._id = StickyNoteCounter++;
+        this._ownerCanvas = canvas;
+        const root = canvas.frameContainer;
+        const doc = root.ownerDocument;
+        // Root element
+        this.element = doc.createElement("div");
+        this.element.classList.add(styles["sticky-note"]);
+        root.appendChild(this.element);
+        // Header (drag handle + title + close button)
+        this._headerElement = doc.createElement("div");
+        this._headerElement.classList.add(styles["sticky-note-header"]);
+        this.element.appendChild(this._headerElement);
+        this._titleElement = doc.createElement("div");
+        this._titleElement.classList.add(styles["sticky-note-title"]);
+        this._titleElement.textContent = this._name;
+        this._titleElement.contentEditable = "false";
+        this._headerElement.appendChild(this._titleElement);
+        // Double-click title to edit
+        this._titleElement.addEventListener("dblclick", (evt) => {
+            evt.stopPropagation();
+            this._titleElement.contentEditable = "true";
+            this._titleElement.focus();
+            // Select all text
+            const range = doc.createRange();
+            range.selectNodeContents(this._titleElement);
+            const sel = doc.defaultView?.getSelection();
+            if (sel) {
+                sel.removeAllRanges();
+                sel.addRange(range);
+            }
+        });
+        this._titleElement.addEventListener("blur", () => {
+            this._titleElement.contentEditable = "false";
+            this._name = this._titleElement.textContent || "Note";
+        });
+        this._titleElement.addEventListener("keydown", (evt) => {
+            if (evt.key === "Enter") {
+                evt.preventDefault();
+                this._titleElement.blur();
+            }
+            evt.stopPropagation();
+        });
+        // Close button
+        const closeBtn = doc.createElement("div");
+        closeBtn.classList.add(styles["sticky-note-close"]);
+        closeBtn.textContent = "\u00D7"; // ×
+        closeBtn.addEventListener("pointerdown", (evt) => {
+            evt.stopPropagation();
+        });
+        closeBtn.addEventListener("click", (evt) => {
+            evt.stopPropagation();
+            this.dispose();
+        });
+        this._headerElement.appendChild(closeBtn);
+        // Body (editable text area)
+        this._bodyElement = doc.createElement("div");
+        this._bodyElement.classList.add(styles["sticky-note-body"]);
+        this._bodyElement.contentEditable = "true";
+        this._bodyElement.textContent = this._body;
+        this.element.appendChild(this._bodyElement);
+        this._bodyElement.addEventListener("input", () => {
+            this._body = this._bodyElement.textContent || "";
+        });
+        // Stop keyboard events from bubbling while editing body
+        this._bodyElement.addEventListener("keydown", (evt) => {
+            evt.stopPropagation();
+        });
+        // Resize handle
+        this._resizeHandle = doc.createElement("div");
+        this._resizeHandle.classList.add(styles["sticky-note-resize"]);
+        this.element.appendChild(this._resizeHandle);
+        // --- Event wiring ---
+        // Drag via header
+        this._headerElement.addEventListener("pointerdown", (evt) => this._onDragStart(evt));
+        // Resize via handle
+        this._resizeHandle.addEventListener("pointerdown", (evt) => this._onResizeStart(evt));
+        // Click to select
+        this.element.addEventListener("pointerdown", (evt) => {
+            evt.stopPropagation();
+            if (!this._ownerCanvas.selectedStickyNotes.includes(this)) {
+                this._ownerCanvas.stateManager.onSelectionChangedObservable.notifyObservers({ selection: this });
+            }
+        });
+        // Apply initial dimensions
+        this.element.style.width = `${this._width}px`;
+        this.element.style.height = `${this._height}px`;
+    }
+    /**
+     * Mark this note as visually selected or deselected.
+     * @param selected - whether the note is selected
+     */
+    setIsSelected(selected) {
+        if (selected) {
+            this.element.classList.add(styles["selected"]);
+        }
+        else {
+            this.element.classList.remove(styles["selected"]);
+        }
+    }
+    /**
+     * Serialize this sticky note to a plain data object.
+     * @returns the serialized data
+     */
+    serialize() {
+        return {
+            x: this._x,
+            y: this._y,
+            width: this._width,
+            height: this._height,
+            name: this._name,
+            body: this._body,
+            color: this._color,
+        };
+    }
+    /**
+     * 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, canvas) {
+        const note = new GraphStickyNote(canvas);
+        note.x = data.x;
+        note.y = data.y;
+        note.width = data.width;
+        note.height = data.height;
+        note.name = data.name;
+        note.body = data.body;
+        if (data.color) {
+            note.color = data.color;
+        }
+        return note;
+    }
+    /**
+     * Remove this sticky note from the canvas and clean up.
+     */
+    dispose() {
+        this.element.parentElement?.removeChild(this.element);
+        const idx = this._ownerCanvas.stickyNotes.indexOf(this);
+        if (idx !== -1) {
+            this._ownerCanvas.stickyNotes.splice(idx, 1);
+        }
+        // Deselect if selected
+        const selIdx = this._ownerCanvas.selectedStickyNotes.indexOf(this);
+        if (selIdx !== -1) {
+            this._ownerCanvas.selectedStickyNotes.splice(selIdx, 1);
+        }
+        this._ownerCanvas.stateManager.onRebuildRequiredObservable.notifyObservers();
+    }
+    // --- Drag ---
+    _onDragStart(evt) {
+        // Don't drag if we're editing the title
+        if (this._titleElement.contentEditable === "true") {
+            return;
+        }
+        this._isDragging = true;
+        this._mouseStartX = evt.clientX;
+        this._mouseStartY = evt.clientY;
+        this._headerElement.setPointerCapture(evt.pointerId);
+        this._headerElement.addEventListener("pointermove", this._onDragMoveHandler);
+        this._headerElement.addEventListener("pointerup", this._onDragEndHandler);
+        evt.stopPropagation();
+    }
+    // --- Resize ---
+    _onResizeStart(evt) {
+        this._isResizing = true;
+        this._mouseStartX = evt.clientX;
+        this._mouseStartY = evt.clientY;
+        this._resizeStartW = this._width;
+        this._resizeStartH = this._height;
+        this._resizeHandle.setPointerCapture(evt.pointerId);
+        this._resizeHandle.addEventListener("pointermove", this._onResizeMoveHandler);
+        this._resizeHandle.addEventListener("pointerup", this._onResizeEndHandler);
+        evt.stopPropagation();
+    }
+}
+//# sourceMappingURL=graphStickyNote.js.map

package/nodeGraphSystem/graphStickyNote.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphStickyNote.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/graphStickyNote.ts"],"names":[],"mappings":"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","sourcesContent":["import * as styles from \"./graphStickyNote.module.scss\";\nimport { type GraphCanvasComponent } from \"./graphCanvas\";\nimport { type IStickyNoteData } from \"./interfaces/nodeLocationInfo\";\n\n/**\n * Auto-incrementing counter for unique sticky note IDs.\n */\nlet StickyNoteCounter = 0;\n\n/**\n * A free-floating sticky note annotation on the graph canvas.\n *\n * Sticky notes are lightweight, text-only overlays that live in the frame container.\n * They support dragging, resizing, and inline editing of both title and body text.\n * Unlike frames, they do not group or contain nodes.\n */\nexport class GraphStickyNote {\n    /** The root DOM element for this sticky note. */\n    public element: HTMLDivElement;\n\n    private _ownerCanvas: GraphCanvasComponent;\n    private _id: number;\n    private _x = 0;\n    private _y = 0;\n    private _width = 180;\n    private _height = 120;\n    private _name = \"Note\";\n    private _body = \"\";\n    private _color = \"rgba(255, 235, 130, 0.92)\";\n\n    // DOM\n    private _headerElement: HTMLDivElement;\n    private _titleElement: HTMLDivElement;\n    private _bodyElement: HTMLDivElement;\n    private _resizeHandle: HTMLDivElement;\n\n    // Drag state\n    private _mouseStartX = 0;\n    private _mouseStartY = 0;\n    private _isDragging = false;\n    private _isResizing = false;\n    private _resizeStartW = 0;\n    private _resizeStartH = 0;\n\n    /** Unique ID for this sticky note */\n    public get id() {\n        return this._id;\n    }\n\n    /** X position in canvas space */\n    public get x() {\n        return this._x;\n    }\n\n    /** X position in canvas space */\n    public set x(value: number) {\n        this._x = value;\n        this.element.style.left = `${this._ownerCanvas.getGridPosition(value)}px`;\n    }\n\n    /** Y position in canvas space */\n    public get y() {\n        return this._y;\n    }\n\n    /** Y position in canvas space */\n    public set y(value: number) {\n        this._y = value;\n        this.element.style.top = `${this._ownerCanvas.getGridPosition(value)}px`;\n    }\n\n    /** Width in pixels */\n    public get width() {\n        return this._width;\n    }\n\n    /** Width in pixels */\n    public set width(value: number) {\n        this._width = Math.max(100, value);\n        this.element.style.width = `${this._width}px`;\n    }\n\n    /** Height in pixels */\n    public get height() {\n        return this._height;\n    }\n\n    /** Height in pixels */\n    public set height(value: number) {\n        this._height = Math.max(60, value);\n        this.element.style.height = `${this._height}px`;\n    }\n\n    /** Display name */\n    public get name() {\n        return this._name;\n    }\n\n    /** Display name */\n    public set name(value: string) {\n        this._name = value;\n        this._titleElement.textContent = value;\n    }\n\n    /** Body text content */\n    public get body() {\n        return this._body;\n    }\n\n    /** Body text content */\n    public set body(value: string) {\n        this._body = value;\n        this._bodyElement.textContent = value;\n    }\n\n    /** Background color CSS value */\n    public get color() {\n        return this._color;\n    }\n\n    /** Background color CSS value */\n    public set color(value: string) {\n        this._color = value;\n        this.element.style.background = value;\n    }\n\n    /**\n     * Create a new sticky note on the canvas.\n     * @param canvas - the owning graph canvas component\n     */\n    constructor(canvas: GraphCanvasComponent) {\n        this._id = StickyNoteCounter++;\n        this._ownerCanvas = canvas;\n\n        const root = canvas.frameContainer;\n        const doc = root.ownerDocument;\n\n        // Root element\n        this.element = doc.createElement(\"div\");\n        this.element.classList.add(styles[\"sticky-note\"]);\n        root.appendChild(this.element);\n\n        // Header (drag handle + title + close button)\n        this._headerElement = doc.createElement(\"div\");\n        this._headerElement.classList.add(styles[\"sticky-note-header\"]);\n        this.element.appendChild(this._headerElement);\n\n        this._titleElement = doc.createElement(\"div\");\n        this._titleElement.classList.add(styles[\"sticky-note-title\"]);\n        this._titleElement.textContent = this._name;\n        this._titleElement.contentEditable = \"false\";\n        this._headerElement.appendChild(this._titleElement);\n\n        // Double-click title to edit\n        this._titleElement.addEventListener(\"dblclick\", (evt) => {\n            evt.stopPropagation();\n            this._titleElement.contentEditable = \"true\";\n            this._titleElement.focus();\n            // Select all text\n            const range = doc.createRange();\n            range.selectNodeContents(this._titleElement);\n            const sel = doc.defaultView?.getSelection();\n            if (sel) {\n                sel.removeAllRanges();\n                sel.addRange(range);\n            }\n        });\n\n        this._titleElement.addEventListener(\"blur\", () => {\n            this._titleElement.contentEditable = \"false\";\n            this._name = this._titleElement.textContent || \"Note\";\n        });\n\n        this._titleElement.addEventListener(\"keydown\", (evt) => {\n            if (evt.key === \"Enter\") {\n                evt.preventDefault();\n                this._titleElement.blur();\n            }\n            evt.stopPropagation();\n        });\n\n        // Close button\n        const closeBtn = doc.createElement(\"div\");\n        closeBtn.classList.add(styles[\"sticky-note-close\"]);\n        closeBtn.textContent = \"\\u00D7\"; // ×\n        closeBtn.addEventListener(\"pointerdown\", (evt) => {\n            evt.stopPropagation();\n        });\n        closeBtn.addEventListener(\"click\", (evt) => {\n            evt.stopPropagation();\n            this.dispose();\n        });\n        this._headerElement.appendChild(closeBtn);\n\n        // Body (editable text area)\n        this._bodyElement = doc.createElement(\"div\");\n        this._bodyElement.classList.add(styles[\"sticky-note-body\"]);\n        this._bodyElement.contentEditable = \"true\";\n        this._bodyElement.textContent = this._body;\n        this.element.appendChild(this._bodyElement);\n\n        this._bodyElement.addEventListener(\"input\", () => {\n            this._body = this._bodyElement.textContent || \"\";\n        });\n\n        // Stop keyboard events from bubbling while editing body\n        this._bodyElement.addEventListener(\"keydown\", (evt) => {\n            evt.stopPropagation();\n        });\n\n        // Resize handle\n        this._resizeHandle = doc.createElement(\"div\");\n        this._resizeHandle.classList.add(styles[\"sticky-note-resize\"]);\n        this.element.appendChild(this._resizeHandle);\n\n        // --- Event wiring ---\n\n        // Drag via header\n        this._headerElement.addEventListener(\"pointerdown\", (evt) => this._onDragStart(evt));\n\n        // Resize via handle\n        this._resizeHandle.addEventListener(\"pointerdown\", (evt) => this._onResizeStart(evt));\n\n        // Click to select\n        this.element.addEventListener(\"pointerdown\", (evt) => {\n            evt.stopPropagation();\n            if (!this._ownerCanvas.selectedStickyNotes.includes(this)) {\n                this._ownerCanvas.stateManager.onSelectionChangedObservable.notifyObservers({ selection: this });\n            }\n        });\n\n        // Apply initial dimensions\n        this.element.style.width = `${this._width}px`;\n        this.element.style.height = `${this._height}px`;\n    }\n\n    /**\n     * Mark this note as visually selected or deselected.\n     * @param selected - whether the note is selected\n     */\n    public setIsSelected(selected: boolean) {\n        if (selected) {\n            this.element.classList.add(styles[\"selected\"]);\n        } else {\n            this.element.classList.remove(styles[\"selected\"]);\n        }\n    }\n\n    /**\n     * Serialize this sticky note to a plain data object.\n     * @returns the serialized data\n     */\n    public serialize(): IStickyNoteData {\n        return {\n            x: this._x,\n            y: this._y,\n            width: this._width,\n            height: this._height,\n            name: this._name,\n            body: this._body,\n            color: this._color,\n        };\n    }\n\n    /**\n     * Create a sticky note from serialized data.\n     * @param data - the serialized sticky note data\n     * @param canvas - the owning graph canvas\n     * @returns the new sticky note instance\n     */\n    public static Parse(data: IStickyNoteData, canvas: GraphCanvasComponent): GraphStickyNote {\n        const note = new GraphStickyNote(canvas);\n        note.x = data.x;\n        note.y = data.y;\n        note.width = data.width;\n        note.height = data.height;\n        note.name = data.name;\n        note.body = data.body;\n        if (data.color) {\n            note.color = data.color;\n        }\n        return note;\n    }\n\n    /**\n     * Remove this sticky note from the canvas and clean up.\n     */\n    public dispose() {\n        this.element.parentElement?.removeChild(this.element);\n        const idx = this._ownerCanvas.stickyNotes.indexOf(this);\n        if (idx !== -1) {\n            this._ownerCanvas.stickyNotes.splice(idx, 1);\n        }\n        // Deselect if selected\n        const selIdx = this._ownerCanvas.selectedStickyNotes.indexOf(this);\n        if (selIdx !== -1) {\n            this._ownerCanvas.selectedStickyNotes.splice(selIdx, 1);\n        }\n        this._ownerCanvas.stateManager.onRebuildRequiredObservable.notifyObservers();\n    }\n\n    // --- Drag ---\n\n    private _onDragStart(evt: PointerEvent) {\n        // Don't drag if we're editing the title\n        if (this._titleElement.contentEditable === \"true\") {\n            return;\n        }\n        this._isDragging = true;\n        this._mouseStartX = evt.clientX;\n        this._mouseStartY = evt.clientY;\n        this._headerElement.setPointerCapture(evt.pointerId);\n        this._headerElement.addEventListener(\"pointermove\", this._onDragMoveHandler);\n        this._headerElement.addEventListener(\"pointerup\", this._onDragEndHandler);\n        evt.stopPropagation();\n    }\n\n    private _onDragMoveHandler = (evt: PointerEvent) => {\n        if (!this._isDragging) {\n            return;\n        }\n        const zoom = this._ownerCanvas.zoom;\n        const dx = (evt.clientX - this._mouseStartX) / zoom;\n        const dy = (evt.clientY - this._mouseStartY) / zoom;\n        this._mouseStartX = evt.clientX;\n        this._mouseStartY = evt.clientY;\n        this.x += dx;\n        this.y += dy;\n    };\n\n    private _onDragEndHandler = (evt: PointerEvent) => {\n        this._isDragging = false;\n        this._headerElement.releasePointerCapture(evt.pointerId);\n        this._headerElement.removeEventListener(\"pointermove\", this._onDragMoveHandler);\n        this._headerElement.removeEventListener(\"pointerup\", this._onDragEndHandler);\n    };\n\n    // --- Resize ---\n\n    private _onResizeStart(evt: PointerEvent) {\n        this._isResizing = true;\n        this._mouseStartX = evt.clientX;\n        this._mouseStartY = evt.clientY;\n        this._resizeStartW = this._width;\n        this._resizeStartH = this._height;\n        this._resizeHandle.setPointerCapture(evt.pointerId);\n        this._resizeHandle.addEventListener(\"pointermove\", this._onResizeMoveHandler);\n        this._resizeHandle.addEventListener(\"pointerup\", this._onResizeEndHandler);\n        evt.stopPropagation();\n    }\n\n    private _onResizeMoveHandler = (evt: PointerEvent) => {\n        if (!this._isResizing) {\n            return;\n        }\n        const zoom = this._ownerCanvas.zoom;\n        const dx = (evt.clientX - this._mouseStartX) / zoom;\n        const dy = (evt.clientY - this._mouseStartY) / zoom;\n        this.width = this._resizeStartW + dx;\n        this.height = this._resizeStartH + dy;\n    };\n\n    private _onResizeEndHandler = (evt: PointerEvent) => {\n        this._isResizing = false;\n        this._resizeHandle.releasePointerCapture(evt.pointerId);\n        this._resizeHandle.removeEventListener(\"pointermove\", this._onResizeMoveHandler);\n        this._resizeHandle.removeEventListener(\"pointerup\", this._onResizeEndHandler);\n    };\n}\n"]}

package/nodeGraphSystem/graphStickyNote.module.scss

@@ -0,0 +1,87 @@
+.sticky-note {
+    position: absolute;
+    min-width: 140px;
+    min-height: 80px;
+    background: rgba(255, 235, 130, 0.92);
+    border: 2px solid rgba(200, 180, 60, 0.7);
+    border-radius: 4px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    z-index: 3;
+    box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.25);
+    cursor: default;
+    user-select: none;
+
+    &.selected {
+        border-color: white;
+        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
+    }
+}
+
+.sticky-note-header {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    font-size: 11px;
+    font-weight: 700;
+    color: rgba(60, 50, 10, 0.85);
+    cursor: grab;
+    border-bottom: 1px solid rgba(200, 180, 60, 0.3);
+    flex-shrink: 0;
+
+    &:active {
+        cursor: grabbing;
+    }
+}
+
+.sticky-note-title {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    outline: none;
+
+    &[contenteditable="true"] {
+        cursor: text;
+    }
+}
+
+.sticky-note-close {
+    width: 16px;
+    height: 16px;
+    line-height: 16px;
+    text-align: center;
+    font-size: 14px;
+    cursor: pointer;
+    opacity: 0.5;
+    flex-shrink: 0;
+    margin-left: 4px;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.sticky-note-body {
+    flex: 1;
+    padding: 6px 8px;
+    font-size: 12px;
+    line-height: 1.4;
+    color: rgba(40, 35, 5, 0.9);
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    overflow-y: auto;
+    outline: none;
+    cursor: text;
+    min-height: 40px;
+}
+
+.sticky-note-resize {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 12px;
+    height: 12px;
+    cursor: nwse-resize;
+}

package/nodeGraphSystem/interfaces/displayManager.d.ts

@@ -1,7 +1,7 @@
-import type { Nullable } from "@babylonjs/core/types.js";
-import type { StateManager } from "../stateManager.js";
-import type { INodeData } from "./nodeData.js";
-import type { IPortData } from "./portData.js";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type StateManager } from "../stateManager.js";
+import { type INodeData } from "./nodeData.js";
+import { type IPortData } from "./portData.js";
 export interface VisualContentDescription {
     [key: string]: HTMLElement;
 }

package/nodeGraphSystem/interfaces/displayManager.js.map

@@ -1 +1 @@
-{"version":3,"file":"displayManager.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/displayManager.ts"],"names":[],"mappings":"","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { StateManager } from \"../stateManager\";\r\nimport type { INodeData } from \"./nodeData\";\r\nimport type { IPortData } from \"./portData\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport interface VisualContentDescription {\r\n    [key: string]: HTMLElement;\r\n}\r\n\r\nexport interface IDisplayManager {\r\n    getHeaderClass(data: INodeData): string;\r\n    shouldDisplayPortLabels(data: IPortData): boolean;\r\n    updatePreviewContent(data: INodeData, contentArea: HTMLDivElement): void;\r\n    updateFullVisualContent?(data: INodeData, visualContent: VisualContentDescription): void;\r\n    getBackgroundColor(data: INodeData): string;\r\n    getHeaderText(data: INodeData): string;\r\n    onSelectionChanged?(data: INodeData, selectedData: Nullable<INodeData>, manager: StateManager): void;\r\n    onDispose?(nodeData: INodeData, manager: StateManager): void;\r\n}\r\n"]}
+{"version":3,"file":"displayManager.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/displayManager.ts"],"names":[],"mappings":"","sourcesContent":["import { type Nullable } from \"core/types\";\r\nimport { type StateManager } from \"../stateManager\";\r\nimport { type INodeData } from \"./nodeData\";\r\nimport { type IPortData } from \"./portData\";\r\n\r\n// eslint-disable-next-line @typescript-eslint/naming-convention\r\nexport interface VisualContentDescription {\r\n    [key: string]: HTMLElement;\r\n}\r\n\r\nexport interface IDisplayManager {\r\n    getHeaderClass(data: INodeData): string;\r\n    shouldDisplayPortLabels(data: IPortData): boolean;\r\n    updatePreviewContent(data: INodeData, contentArea: HTMLDivElement): void;\r\n    updateFullVisualContent?(data: INodeData, visualContent: VisualContentDescription): void;\r\n    getBackgroundColor(data: INodeData): string;\r\n    getHeaderText(data: INodeData): string;\r\n    onSelectionChanged?(data: INodeData, selectedData: Nullable<INodeData>, manager: StateManager): void;\r\n    onDispose?(nodeData: INodeData, manager: StateManager): void;\r\n}\r\n"]}

package/nodeGraphSystem/interfaces/nodeContainer.d.ts

@@ -1,5 +1,5 @@
-import type { GraphNode } from "../graphNode.js";
-import type { INodeData } from "./nodeData.js";
+import { type GraphNode } from "../graphNode.js";
+import { type INodeData } from "./nodeData.js";
 export interface INodeContainer {
     nodes: GraphNode[];
     appendNode(data: INodeData): GraphNode;

package/nodeGraphSystem/interfaces/nodeContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodeContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeContainer.ts"],"names":[],"mappings":"","sourcesContent":["import type { GraphNode } from \"../graphNode\";\r\nimport type { INodeData } from \"./nodeData\";\r\n\r\nexport interface INodeContainer {\r\n    nodes: GraphNode[];\r\n    appendNode(data: INodeData): GraphNode;\r\n}\r\n"]}
+{"version":3,"file":"nodeContainer.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeContainer.ts"],"names":[],"mappings":"","sourcesContent":["import { type GraphNode } from \"../graphNode\";\r\nimport { type INodeData } from \"./nodeData\";\r\n\r\nexport interface INodeContainer {\r\n    nodes: GraphNode[];\r\n    appendNode(data: INodeData): GraphNode;\r\n}\r\n"]}

package/nodeGraphSystem/interfaces/nodeData.d.ts

@@ -1,5 +1,5 @@
-import type { Nullable } from "@babylonjs/core/types.js";
-import type { IPortData } from "./portData.js";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type IPortData } from "./portData.js";
 export interface INodeData {
     data: any;
     name: string;
@@ -21,4 +21,6 @@ export interface INodeData {
     canBeActivated?: boolean;
     onInputCountChanged?: () => void;
     onInputRemoved?: (index: number) => void;
+    onOutputCountChanged?: () => void;
+    onOutputRemoved?: (index: number) => void;
 }

package/nodeGraphSystem/interfaces/nodeData.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodeData.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeData.ts"],"names":[],"mappings":"","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { IPortData } from \"./portData\";\r\n\r\nexport interface INodeData {\r\n    data: any;\r\n    name: string;\r\n    uniqueId: number;\r\n    isInput: boolean;\r\n    comments: string;\r\n    executionTime?: number;\r\n\r\n    refreshCallback?: () => void;\r\n\r\n    prepareHeaderIcon: (iconDiv: HTMLDivElement, img: HTMLImageElement) => void;\r\n    getClassName: () => string;\r\n    dispose: () => void;\r\n\r\n    getPortByName: (name: string) => Nullable<IPortData>;\r\n\r\n    inputs: IPortData[];\r\n    outputs: IPortData[];\r\n\r\n    invisibleEndpoints?: Nullable<any[]>;\r\n\r\n    isConnectedToOutput?: () => boolean;\r\n\r\n    isActive?: boolean;\r\n    setIsActive?: (value: boolean) => void;\r\n    canBeActivated?: boolean;\r\n\r\n    onInputCountChanged?: () => void;\r\n    onInputRemoved?: (index: number) => void;\r\n}\r\n"]}
+{"version":3,"file":"nodeData.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeData.ts"],"names":[],"mappings":"","sourcesContent":["import { type Nullable } from \"core/types\";\r\nimport { type IPortData } from \"./portData\";\r\n\r\nexport interface INodeData {\r\n    data: any;\r\n    name: string;\r\n    uniqueId: number;\r\n    isInput: boolean;\r\n    comments: string;\r\n    executionTime?: number;\r\n\r\n    refreshCallback?: () => void;\r\n\r\n    prepareHeaderIcon: (iconDiv: HTMLDivElement, img: HTMLImageElement) => void;\r\n    getClassName: () => string;\r\n    dispose: () => void;\r\n\r\n    getPortByName: (name: string) => Nullable<IPortData>;\r\n\r\n    inputs: IPortData[];\r\n    outputs: IPortData[];\r\n\r\n    invisibleEndpoints?: Nullable<any[]>;\r\n\r\n    isConnectedToOutput?: () => boolean;\r\n\r\n    isActive?: boolean;\r\n    setIsActive?: (value: boolean) => void;\r\n    canBeActivated?: boolean;\r\n\r\n    onInputCountChanged?: () => void;\r\n    onInputRemoved?: (index: number) => void;\r\n    onOutputCountChanged?: () => void;\r\n    onOutputRemoved?: (index: number) => void;\r\n}\r\n"]}

package/nodeGraphSystem/interfaces/nodeLocationInfo.d.ts

@@ -15,12 +15,22 @@ export interface IFrameData {
     blocks: number[];
     comments: string;
 }
+export interface IStickyNoteData {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    name: string;
+    body: string;
+    color?: string;
+}
 export interface IEditorData {
     locations: INodeLocationInfo[];
     x: number;
     y: number;
     zoom: number;
     frames?: IFrameData[];
+    stickyNotes?: IStickyNoteData[];
     map?: {
         [key: number]: number;
     };

package/nodeGraphSystem/interfaces/nodeLocationInfo.js.map

@@ -1 +1 @@
-{"version":3,"file":"nodeLocationInfo.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeLocationInfo.ts"],"names":[],"mappings":"","sourcesContent":["export interface INodeLocationInfo {\r\n    blockId: number;\r\n    x: number;\r\n    y: number;\r\n    isCollapsed: boolean;\r\n}\r\n\r\nexport interface IFrameData {\r\n    x: number;\r\n    y: number;\r\n    width: number;\r\n    height: number;\r\n    color: number[];\r\n    name: string;\r\n    isCollapsed: boolean;\r\n    blocks: number[];\r\n    comments: string;\r\n}\r\n\r\nexport interface IEditorData {\r\n    locations: INodeLocationInfo[];\r\n    x: number;\r\n    y: number;\r\n    zoom: number;\r\n    frames?: IFrameData[];\r\n    map?: { [key: number]: number };\r\n}\r\n"]}
+{"version":3,"file":"nodeLocationInfo.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/nodeLocationInfo.ts"],"names":[],"mappings":"","sourcesContent":["export interface INodeLocationInfo {\r\n    blockId: number;\r\n    x: number;\r\n    y: number;\r\n    isCollapsed: boolean;\r\n}\r\n\r\nexport interface IFrameData {\r\n    x: number;\r\n    y: number;\r\n    width: number;\r\n    height: number;\r\n    color: number[];\r\n    name: string;\r\n    isCollapsed: boolean;\r\n    blocks: number[];\r\n    comments: string;\r\n}\r\n\r\nexport interface IStickyNoteData {\r\n    x: number;\r\n    y: number;\r\n    width: number;\r\n    height: number;\r\n    name: string;\r\n    body: string;\r\n    color?: string;\r\n}\r\n\r\nexport interface IEditorData {\r\n    locations: INodeLocationInfo[];\r\n    x: number;\r\n    y: number;\r\n    zoom: number;\r\n    frames?: IFrameData[];\r\n    stickyNotes?: IStickyNoteData[];\r\n    map?: { [key: number]: number };\r\n}\r\n"]}

package/nodeGraphSystem/interfaces/portData.d.ts

@@ -1,5 +1,5 @@
-import type { Nullable } from "@babylonjs/core/types.js";
-import type { GraphNode } from "../graphNode.js";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type GraphNode } from "../graphNode.js";
 export declare enum PortDataDirection {
     /** Input */
     Input = 0,
@@ -8,7 +8,8 @@ export declare enum PortDataDirection {
 }
 export declare enum PortDirectValueTypes {
     Float = 0,
-    Int = 1
+    Int = 1,
+    String = 2
 }
 export interface IPortDirectValueDefinition {
     /**

package/nodeGraphSystem/interfaces/portData.js

@@ -9,5 +9,6 @@ export var PortDirectValueTypes;
 (function (PortDirectValueTypes) {
     PortDirectValueTypes[PortDirectValueTypes["Float"] = 0] = "Float";
     PortDirectValueTypes[PortDirectValueTypes["Int"] = 1] = "Int";
+    PortDirectValueTypes[PortDirectValueTypes["String"] = 2] = "String";
 })(PortDirectValueTypes || (PortDirectValueTypes = {}));
 //# sourceMappingURL=portData.js.map

package/nodeGraphSystem/interfaces/portData.js.map

@@ -1 +1 @@
-{"version":3,"file":"portData.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/portData.ts"],"names":[],"mappings":"AAGA,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IACzB,YAAY;IACZ,2DAAK,CAAA;IACL,aAAa;IACb,6DAAM,CAAA;AACV,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B;AAED,MAAM,CAAN,IAAY,oBAGX;AAHD,WAAY,oBAAoB;IAC5B,iEAAK,CAAA;IACL,6DAAG,CAAA;AACP,CAAC,EAHW,oBAAoB,KAApB,oBAAoB,QAG/B","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { GraphNode } from \"../graphNode\";\r\n\r\nexport enum PortDataDirection {\r\n    /** Input */\r\n    Input,\r\n    /** Output */\r\n    Output,\r\n}\r\n\r\nexport enum PortDirectValueTypes {\r\n    Float,\r\n    Int,\r\n}\r\n\r\nexport interface IPortDirectValueDefinition {\r\n    /**\r\n     * Gets the source object\r\n     */\r\n    source: any;\r\n    /**\r\n     * Gets the property name used to store the value\r\n     */\r\n    propertyName: string;\r\n\r\n    /**\r\n     * Gets or sets the min value accepted for this point if nothing is connected\r\n     */\r\n    valueMin: Nullable<any>;\r\n\r\n    /**\r\n     * Gets or sets the max value accepted for this point if nothing is connected\r\n     */\r\n    valueMax: Nullable<any>;\r\n\r\n    /**\r\n     * Gets or sets the type of the value\r\n     */\r\n    valueType: PortDirectValueTypes;\r\n}\r\n\r\nexport interface IPortData {\r\n    data: any;\r\n    name: string;\r\n    internalName: string;\r\n    isExposedOnFrame: boolean;\r\n    exposedPortPosition: number;\r\n    isConnected: boolean;\r\n    isInactive: boolean;\r\n    direction: PortDataDirection;\r\n    ownerData: any;\r\n    connectedPort: Nullable<IPortData>;\r\n    needDualDirectionValidation: boolean;\r\n    hasEndpoints: boolean;\r\n    endpoints: Nullable<IPortData[]>;\r\n    directValueDefinition?: IPortDirectValueDefinition;\r\n\r\n    updateDisplayName: (newName: string) => void;\r\n    canConnectTo: (port: IPortData) => boolean;\r\n    connectTo: (port: IPortData) => void;\r\n    disconnectFrom: (port: IPortData) => void;\r\n    checkCompatibilityState(port: IPortData): number;\r\n    getCompatibilityIssueMessage(issue: number, targetNode: GraphNode, targetPort: IPortData): string;\r\n}\r\n"]}
+{"version":3,"file":"portData.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/portData.ts"],"names":[],"mappings":"AAGA,MAAM,CAAN,IAAY,iBAKX;AALD,WAAY,iBAAiB;IACzB,YAAY;IACZ,2DAAK,CAAA;IACL,aAAa;IACb,6DAAM,CAAA;AACV,CAAC,EALW,iBAAiB,KAAjB,iBAAiB,QAK5B;AAED,MAAM,CAAN,IAAY,oBAIX;AAJD,WAAY,oBAAoB;IAC5B,iEAAK,CAAA;IACL,6DAAG,CAAA;IACH,mEAAM,CAAA;AACV,CAAC,EAJW,oBAAoB,KAApB,oBAAoB,QAI/B","sourcesContent":["import { type Nullable } from \"core/types\";\r\nimport { type GraphNode } from \"../graphNode\";\r\n\r\nexport enum PortDataDirection {\r\n    /** Input */\r\n    Input,\r\n    /** Output */\r\n    Output,\r\n}\r\n\r\nexport enum PortDirectValueTypes {\r\n    Float,\r\n    Int,\r\n    String,\r\n}\r\n\r\nexport interface IPortDirectValueDefinition {\r\n    /**\r\n     * Gets the source object\r\n     */\r\n    source: any;\r\n    /**\r\n     * Gets the property name used to store the value\r\n     */\r\n    propertyName: string;\r\n\r\n    /**\r\n     * Gets or sets the min value accepted for this point if nothing is connected\r\n     */\r\n    valueMin: Nullable<any>;\r\n\r\n    /**\r\n     * Gets or sets the max value accepted for this point if nothing is connected\r\n     */\r\n    valueMax: Nullable<any>;\r\n\r\n    /**\r\n     * Gets or sets the type of the value\r\n     */\r\n    valueType: PortDirectValueTypes;\r\n}\r\n\r\nexport interface IPortData {\r\n    data: any;\r\n    name: string;\r\n    internalName: string;\r\n    isExposedOnFrame: boolean;\r\n    exposedPortPosition: number;\r\n    isConnected: boolean;\r\n    isInactive: boolean;\r\n    direction: PortDataDirection;\r\n    ownerData: any;\r\n    connectedPort: Nullable<IPortData>;\r\n    needDualDirectionValidation: boolean;\r\n    hasEndpoints: boolean;\r\n    endpoints: Nullable<IPortData[]>;\r\n    directValueDefinition?: IPortDirectValueDefinition;\r\n\r\n    updateDisplayName: (newName: string) => void;\r\n    canConnectTo: (port: IPortData) => boolean;\r\n    connectTo: (port: IPortData) => void;\r\n    disconnectFrom: (port: IPortData) => void;\r\n    checkCompatibilityState(port: IPortData): number;\r\n    getCompatibilityIssueMessage(issue: number, targetNode: GraphNode, targetPort: IPortData): string;\r\n}\r\n"]}

package/nodeGraphSystem/interfaces/propertyComponentProps.d.ts

@@ -1,5 +1,5 @@
-import type { StateManager } from "../stateManager.js";
-import type { INodeData } from "./nodeData.js";
+import { type StateManager } from "../stateManager.js";
+import { type INodeData } from "./nodeData.js";
 export interface IPropertyComponentProps {
     stateManager: StateManager;
     nodeData: INodeData;

package/nodeGraphSystem/interfaces/propertyComponentProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"propertyComponentProps.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/propertyComponentProps.ts"],"names":[],"mappings":"","sourcesContent":["import type { StateManager } from \"../stateManager\";\r\nimport type { INodeData } from \"./nodeData\";\r\n\r\nexport interface IPropertyComponentProps {\r\n    stateManager: StateManager;\r\n    nodeData: INodeData;\r\n}\r\n"]}
+{"version":3,"file":"propertyComponentProps.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/propertyComponentProps.ts"],"names":[],"mappings":"","sourcesContent":["import { type StateManager } from \"../stateManager\";\r\nimport { type INodeData } from \"./nodeData\";\r\n\r\nexport interface IPropertyComponentProps {\r\n    stateManager: StateManager;\r\n    nodeData: INodeData;\r\n}\r\n"]}

package/nodeGraphSystem/interfaces/selectionChangedOptions.d.ts

@@ -1,11 +1,12 @@
-import type { Nullable } from "@babylonjs/core/types.js";
-import type { GraphFrame } from "../graphFrame.js";
-import type { GraphNode } from "../graphNode.js";
-import type { NodeLink } from "../nodeLink.js";
-import type { NodePort } from "../nodePort.js";
-import type { FramePortData } from "../types/framePortData.js";
+import { type Nullable } from "@babylonjs/core/types.js";
+import { type GraphFrame } from "../graphFrame.js";
+import { type GraphNode } from "../graphNode.js";
+import { type GraphStickyNote } from "../graphStickyNote.js";
+import { type NodeLink } from "../nodeLink.js";
+import { type NodePort } from "../nodePort.js";
+import { type FramePortData } from "../types/framePortData.js";
 export interface ISelectionChangedOptions {
-    selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>;
+    selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData | GraphStickyNote>;
     forceKeepSelection?: boolean;
     marqueeSelection?: boolean;
 }

package/nodeGraphSystem/interfaces/selectionChangedOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectionChangedOptions.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/selectionChangedOptions.ts"],"names":[],"mappings":"","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport type { GraphFrame } from \"../graphFrame\";\r\nimport type { GraphNode } from \"../graphNode\";\r\n\r\nimport type { NodeLink } from \"../nodeLink\";\r\nimport type { NodePort } from \"../nodePort\";\r\nimport type { FramePortData } from \"../types/framePortData\";\r\n\r\nexport interface ISelectionChangedOptions {\r\n    selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData>;\r\n    forceKeepSelection?: boolean;\r\n    marqueeSelection?: boolean;\r\n}\r\n"]}
+{"version":3,"file":"selectionChangedOptions.js","sourceRoot":"","sources":["../../../../../dev/sharedUiComponents/src/nodeGraphSystem/interfaces/selectionChangedOptions.ts"],"names":[],"mappings":"","sourcesContent":["import { type Nullable } from \"core/types\";\r\nimport { type GraphFrame } from \"../graphFrame\";\r\nimport { type GraphNode } from \"../graphNode\";\r\nimport { type GraphStickyNote } from \"../graphStickyNote\";\r\n\r\nimport { type NodeLink } from \"../nodeLink\";\r\nimport { type NodePort } from \"../nodePort\";\r\nimport { type FramePortData } from \"../types/framePortData\";\r\n\r\nexport interface ISelectionChangedOptions {\r\n    selection: Nullable<GraphNode | NodeLink | GraphFrame | NodePort | FramePortData | GraphStickyNote>;\r\n    forceKeepSelection?: boolean;\r\n    marqueeSelection?: boolean;\r\n}\r\n"]}