@onerjs/shared-ui-components 8.44.6 → 8.44.8

package/nodeGraphSystem/graphMinimap.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+import type { GraphCanvasComponent } from "./graphCanvas.js";
+/**
+ * Props for the GraphMinimapComponent.
+ * This component can be reused by any editor that uses GraphCanvasComponent.
+ */
+export interface IGraphMinimapComponentProps {
+    /** The graph canvas to visualize */
+    canvas: GraphCanvasComponent;
+    /** How long (ms) the minimap stays visible after the last interaction. Default 1500. */
+    hideDelayMs?: number;
+    /** Width of the minimap in pixels. Default 200. */
+    width?: number;
+    /** Height of the minimap in pixels. Default 140. */
+    height?: number;
+}
+/**
+ * A minimap overlay that shows a scaled-down overview of the node graph.
+ * It appears when the user zooms or pans and auto-hides after a delay.
+ * Clicking/dragging on the minimap pans the canvas to that position.
+ *
+ * This is a reusable component that works with any GraphCanvasComponent-based editor
+ * (Flow Graph Editor, Node Material Editor, Node Geometry Editor, etc.).
+ */
+export declare class GraphMinimapComponent extends React.Component<IGraphMinimapComponentProps> {
+    private _canvasRef;
+    private _containerRef;
+    private _rafId;
+    private _hideTimer;
+    private _visible;
+    private _isDragging;
+    /** Track last canvas state to detect changes driven by external APIs (zoomToFit, etc.) */
+    private _lastX;
+    private _lastY;
+    private _lastZoom;
+    /** Stored transform values for minimap hit-testing */
+    private _mapScale;
+    private _mapOffsetX;
+    private _mapOffsetY;
+    private _mapTotalMinX;
+    private _mapTotalMinY;
+    private get _hideDelay();
+    private get _width();
+    private get _height();
+    /** @internal */
+    componentDidMount(): void;
+    /** @internal */
+    componentWillUnmount(): void;
+    /**
+     * Show the minimap and schedule auto-hide.
+     */
+    private _show;
+    private _applyVisibility;
+    /**
+     * Main render loop — polls the canvas state every frame and redraws
+     * the minimap when a change is detected.
+     */
+    private _tick;
+    /**
+     * Compute the bounding box of all nodes and frames in graph-space.
+     * @returns the min/max coordinates of the graph content
+     */
+    private _computeGraphBounds;
+    /**
+     * Draw the minimap onto the <canvas> element.
+     */
+    private _draw;
+    /**
+     * Convert a pointer event on the minimap to graph-space coordinates and
+     * pan the canvas to center on that point.
+     * @param evt - the pointer event from the minimap
+     */
+    private _panToMinimapPoint;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    /** @internal */
+    render(): import("react/jsx-runtime").JSX.Element;
+}

package/nodeGraphSystem/graphMinimap.js

@@ -0,0 +1,319 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as styles from "./graphMinimap.module.scss";
+/**
+ * A minimap overlay that shows a scaled-down overview of the node graph.
+ * It appears when the user zooms or pans and auto-hides after a delay.
+ * Clicking/dragging on the minimap pans the canvas to that position.
+ *
+ * This is a reusable component that works with any GraphCanvasComponent-based editor
+ * (Flow Graph Editor, Node Material Editor, Node Geometry Editor, etc.).
+ */
+export class GraphMinimapComponent extends React.Component {
+    constructor() {
+        super(...arguments);
+        this._canvasRef = React.createRef();
+        this._containerRef = React.createRef();
+        this._rafId = 0;
+        this._hideTimer = null;
+        this._visible = false;
+        this._isDragging = false;
+        /** Track last canvas state to detect changes driven by external APIs (zoomToFit, etc.) */
+        this._lastX = 0;
+        this._lastY = 0;
+        this._lastZoom = 1;
+        /** Stored transform values for minimap hit-testing */
+        this._mapScale = 1;
+        this._mapOffsetX = 0;
+        this._mapOffsetY = 0;
+        this._mapTotalMinX = 0;
+        this._mapTotalMinY = 0;
+        /**
+         * Main render loop — polls the canvas state every frame and redraws
+         * the minimap when a change is detected.
+         */
+        this._tick = () => {
+            const canvas = this.props.canvas;
+            const { x, y, zoom } = canvas;
+            if (x !== this._lastX || y !== this._lastY || zoom !== this._lastZoom) {
+                this._lastX = x;
+                this._lastY = y;
+                this._lastZoom = zoom;
+                this._show();
+                this._draw();
+            }
+            this._rafId = requestAnimationFrame(this._tick);
+        };
+        this._onPointerDown = (evt) => {
+            evt.preventDefault();
+            evt.stopPropagation();
+            this._isDragging = true;
+            evt.target.setPointerCapture(evt.pointerId);
+            this._panToMinimapPoint(evt);
+        };
+        this._onPointerMove = (evt) => {
+            if (!this._isDragging) {
+                return;
+            }
+            evt.preventDefault();
+            evt.stopPropagation();
+            this._panToMinimapPoint(evt);
+        };
+        this._onPointerUp = (evt) => {
+            if (!this._isDragging) {
+                return;
+            }
+            this._isDragging = false;
+            evt.target.releasePointerCapture(evt.pointerId);
+            // Re-arm the hide timer
+            this._show();
+        };
+    }
+    get _hideDelay() {
+        return this.props.hideDelayMs ?? 1500;
+    }
+    get _width() {
+        return this.props.width ?? 200;
+    }
+    get _height() {
+        return this.props.height ?? 140;
+    }
+    /** @internal */
+    componentDidMount() {
+        this._rafId = requestAnimationFrame(this._tick);
+    }
+    /** @internal */
+    componentWillUnmount() {
+        cancelAnimationFrame(this._rafId);
+        if (this._hideTimer) {
+            clearTimeout(this._hideTimer);
+        }
+    }
+    /**
+     * Show the minimap and schedule auto-hide.
+     */
+    _show() {
+        if (!this._visible) {
+            this._visible = true;
+            this._applyVisibility();
+        }
+        // Reset hide timer
+        if (this._hideTimer) {
+            clearTimeout(this._hideTimer);
+        }
+        this._hideTimer = setTimeout(() => {
+            if (!this._isDragging) {
+                this._visible = false;
+                this._applyVisibility();
+            }
+        }, this._hideDelay);
+    }
+    _applyVisibility() {
+        const container = this._containerRef.current;
+        if (!container) {
+            return;
+        }
+        if (this._visible) {
+            container.classList.remove(styles["minimap-hidden"]);
+            container.classList.add(styles["minimap-visible"]);
+        }
+        else {
+            container.classList.remove(styles["minimap-visible"]);
+            container.classList.add(styles["minimap-hidden"]);
+        }
+    }
+    /**
+     * Compute the bounding box of all nodes and frames in graph-space.
+     * @returns the min/max coordinates of the graph content
+     */
+    _computeGraphBounds() {
+        const canvas = this.props.canvas;
+        const nodes = canvas.nodes;
+        const frames = canvas.frames;
+        const stickyNotes = canvas.stickyNotes;
+        if (nodes.length === 0 && frames.length === 0 && stickyNotes.length === 0) {
+            return { minX: 0, minY: 0, maxX: 1000, maxY: 700 };
+        }
+        let minX = Infinity;
+        let minY = Infinity;
+        let maxX = -Infinity;
+        let maxY = -Infinity;
+        for (const node of nodes) {
+            const nx = node.x;
+            const ny = node.y;
+            const nw = node.width || 200;
+            const nh = node.height || 40;
+            if (nx < minX) {
+                minX = nx;
+            }
+            if (ny < minY) {
+                minY = ny;
+            }
+            if (nx + nw > maxX) {
+                maxX = nx + nw;
+            }
+            if (ny + nh > maxY) {
+                maxY = ny + nh;
+            }
+        }
+        for (const frame of frames) {
+            const fx = frame.x;
+            const fy = frame.y;
+            const fw = frame.width || 200;
+            const fh = frame.height || 100;
+            if (fx < minX) {
+                minX = fx;
+            }
+            if (fy < minY) {
+                minY = fy;
+            }
+            if (fx + fw > maxX) {
+                maxX = fx + fw;
+            }
+            if (fy + fh > maxY) {
+                maxY = fy + fh;
+            }
+        }
+        for (const note of stickyNotes) {
+            const sx = note.x;
+            const sy = note.y;
+            const sw = note.width || 180;
+            const sh = note.height || 120;
+            if (sx < minX) {
+                minX = sx;
+            }
+            if (sy < minY) {
+                minY = sy;
+            }
+            if (sx + sw > maxX) {
+                maxX = sx + sw;
+            }
+            if (sy + sh > maxY) {
+                maxY = sy + sh;
+            }
+        }
+        // Pad the bounds a bit so nodes aren't right at the edge
+        const pad = 100;
+        return { minX: minX - pad, minY: minY - pad, maxX: maxX + pad, maxY: maxY + pad };
+    }
+    /**
+     * Draw the minimap onto the <canvas> element.
+     */
+    _draw() {
+        const el = this._canvasRef.current;
+        if (!el) {
+            return;
+        }
+        const ctx = el.getContext("2d");
+        if (!ctx) {
+            return;
+        }
+        const canvas = this.props.canvas;
+        const dpr = window.devicePixelRatio || 1;
+        const w = this._width;
+        const h = this._height;
+        // Ensure backing store matches CSS size
+        if (el.width !== w * dpr || el.height !== h * dpr) {
+            el.width = w * dpr;
+            el.height = h * dpr;
+        }
+        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+        ctx.clearRect(0, 0, w, h);
+        // Compute graph bounds
+        const bounds = this._computeGraphBounds();
+        // Also include the viewport in the bounds so scrolling far from nodes
+        // still makes sense.
+        const vpLeftInGraph = -canvas.x / canvas.zoom;
+        const vpTopInGraph = -canvas.y / canvas.zoom;
+        const hostRect = canvas._hostCanvas?.getBoundingClientRect();
+        const vpW = (hostRect?.width ?? 800) / canvas.zoom;
+        const vpH = (hostRect?.height ?? 600) / canvas.zoom;
+        const totalMinX = Math.min(bounds.minX, vpLeftInGraph);
+        const totalMinY = Math.min(bounds.minY, vpTopInGraph);
+        const totalMaxX = Math.max(bounds.maxX, vpLeftInGraph + vpW);
+        const totalMaxY = Math.max(bounds.maxY, vpTopInGraph + vpH);
+        const totalW = totalMaxX - totalMinX;
+        const totalH = totalMaxY - totalMinY;
+        // Scale to fit the minimap
+        const scale = Math.min(w / totalW, h / totalH);
+        // Center the content
+        const offsetX = (w - totalW * scale) / 2;
+        const offsetY = (h - totalH * scale) / 2;
+        const toMiniX = (gx) => (gx - totalMinX) * scale + offsetX;
+        const toMiniY = (gy) => (gy - totalMinY) * scale + offsetY;
+        // Draw frames
+        for (const frame of canvas.frames) {
+            const fx = toMiniX(frame.x);
+            const fy = toMiniY(frame.y);
+            const fw = (frame.width || 200) * scale;
+            const fh = (frame.height || 100) * scale;
+            ctx.fillStyle = "rgba(100, 100, 100, 0.3)";
+            ctx.strokeStyle = "rgba(150, 150, 150, 0.5)";
+            ctx.lineWidth = 0.5;
+            ctx.fillRect(fx, fy, fw, fh);
+            ctx.strokeRect(fx, fy, fw, fh);
+        }
+        // Draw nodes
+        const selectedSet = new Set(canvas.selectedNodes);
+        for (const node of canvas.nodes) {
+            const nx = toMiniX(node.x);
+            const ny = toMiniY(node.y);
+            const nw = Math.max((node.width || 200) * scale, 2);
+            const nh = Math.max((node.height || 40) * scale, 1.5);
+            ctx.fillStyle = selectedSet.has(node) ? "#5da0e0" : "#888";
+            ctx.fillRect(nx, ny, nw, nh);
+        }
+        // Draw sticky notes
+        for (const note of canvas.stickyNotes) {
+            const snx = toMiniX(note.x);
+            const sny = toMiniY(note.y);
+            const snw = (note.width || 180) * scale;
+            const snh = (note.height || 120) * scale;
+            ctx.fillStyle = "rgba(255, 235, 130, 0.5)";
+            ctx.fillRect(snx, sny, snw, snh);
+        }
+        // Draw viewport rectangle
+        const vx = toMiniX(vpLeftInGraph);
+        const vy = toMiniY(vpTopInGraph);
+        const vw = vpW * scale;
+        const vh = vpH * scale;
+        ctx.strokeStyle = "rgba(255, 255, 255, 0.7)";
+        ctx.lineWidth = 1.5;
+        ctx.strokeRect(vx, vy, vw, vh);
+        // Store transform for hit-testing in pointer events
+        this._mapScale = scale;
+        this._mapOffsetX = offsetX;
+        this._mapOffsetY = offsetY;
+        this._mapTotalMinX = totalMinX;
+        this._mapTotalMinY = totalMinY;
+    }
+    /**
+     * Convert a pointer event on the minimap to graph-space coordinates and
+     * pan the canvas to center on that point.
+     * @param evt - the pointer event from the minimap
+     */
+    _panToMinimapPoint(evt) {
+        const el = this._canvasRef.current;
+        if (!el) {
+            return;
+        }
+        const rect = el.getBoundingClientRect();
+        const localX = evt.clientX - rect.left;
+        const localY = evt.clientY - rect.top;
+        // Convert minimap pixel to graph-space
+        const graphX = (localX - this._mapOffsetX) / this._mapScale + this._mapTotalMinX;
+        const graphY = (localY - this._mapOffsetY) / this._mapScale + this._mapTotalMinY;
+        // Center the viewport on this graph point
+        const canvas = this.props.canvas;
+        const hostRect = canvas._hostCanvas?.getBoundingClientRect();
+        const vpW = (hostRect?.width ?? 800) / canvas.zoom;
+        const vpH = (hostRect?.height ?? 600) / canvas.zoom;
+        canvas.x = -(graphX - vpW / 2) * canvas.zoom;
+        canvas.y = -(graphY - vpH / 2) * canvas.zoom;
+    }
+    /** @internal */
+    render() {
+        return (_jsx("div", { ref: this._containerRef, className: `${styles["minimap-container"]} ${styles["minimap-hidden"]}`, style: { width: this._width, height: this._height }, onPointerDown: this._onPointerDown, onPointerMove: this._onPointerMove, onPointerUp: this._onPointerUp, children: _jsx("canvas", { ref: this._canvasRef, className: styles["minimap-canvas"], style: { width: this._width, height: this._height } }) }));
+    }
+}
+//# sourceMappingURL=graphMinimap.js.map

package/nodeGraphSystem/graphMinimap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graphMinimap.js","sourceRoot":"","sources":["../../../../dev/sharedUiComponents/src/nodeGraphSystem/graphMinimap.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport * as styles from \"./graphMinimap.module.scss\";\nimport type { GraphCanvasComponent } from \"./graphCanvas\";\n\n/**\n * Props for the GraphMinimapComponent.\n * This component can be reused by any editor that uses GraphCanvasComponent.\n */\nexport interface IGraphMinimapComponentProps {\n    /** The graph canvas to visualize */\n    canvas: GraphCanvasComponent;\n    /** How long (ms) the minimap stays visible after the last interaction. Default 1500. */\n    hideDelayMs?: number;\n    /** Width of the minimap in pixels. Default 200. */\n    width?: number;\n    /** Height of the minimap in pixels. Default 140. */\n    height?: number;\n}\n\n/**\n * A minimap overlay that shows a scaled-down overview of the node graph.\n * It appears when the user zooms or pans and auto-hides after a delay.\n * Clicking/dragging on the minimap pans the canvas to that position.\n *\n * This is a reusable component that works with any GraphCanvasComponent-based editor\n * (Flow Graph Editor, Node Material Editor, Node Geometry Editor, etc.).\n */\nexport class GraphMinimapComponent extends React.Component<IGraphMinimapComponentProps> {\n    private _canvasRef = React.createRef<HTMLCanvasElement>();\n    private _containerRef = React.createRef<HTMLDivElement>();\n    private _rafId = 0;\n    private _hideTimer: ReturnType<typeof setTimeout> | null = null;\n    private _visible = false;\n    private _isDragging = false;\n    /** Track last canvas state to detect changes driven by external APIs (zoomToFit, etc.) */\n    private _lastX = 0;\n    private _lastY = 0;\n    private _lastZoom = 1;\n    /** Stored transform values for minimap hit-testing */\n    private _mapScale = 1;\n    private _mapOffsetX = 0;\n    private _mapOffsetY = 0;\n    private _mapTotalMinX = 0;\n    private _mapTotalMinY = 0;\n\n    private get _hideDelay() {\n        return this.props.hideDelayMs ?? 1500;\n    }\n\n    private get _width() {\n        return this.props.width ?? 200;\n    }\n\n    private get _height() {\n        return this.props.height ?? 140;\n    }\n\n    /** @internal */\n    override componentDidMount() {\n        this._rafId = requestAnimationFrame(this._tick);\n    }\n\n    /** @internal */\n    override componentWillUnmount() {\n        cancelAnimationFrame(this._rafId);\n        if (this._hideTimer) {\n            clearTimeout(this._hideTimer);\n        }\n    }\n\n    /**\n     * Show the minimap and schedule auto-hide.\n     */\n    private _show() {\n        if (!this._visible) {\n            this._visible = true;\n            this._applyVisibility();\n        }\n        // Reset hide timer\n        if (this._hideTimer) {\n            clearTimeout(this._hideTimer);\n        }\n        this._hideTimer = setTimeout(() => {\n            if (!this._isDragging) {\n                this._visible = false;\n                this._applyVisibility();\n            }\n        }, this._hideDelay);\n    }\n\n    private _applyVisibility() {\n        const container = this._containerRef.current;\n        if (!container) {\n            return;\n        }\n        if (this._visible) {\n            container.classList.remove(styles[\"minimap-hidden\"]);\n            container.classList.add(styles[\"minimap-visible\"]);\n        } else {\n            container.classList.remove(styles[\"minimap-visible\"]);\n            container.classList.add(styles[\"minimap-hidden\"]);\n        }\n    }\n\n    /**\n     * Main render loop — polls the canvas state every frame and redraws\n     * the minimap when a change is detected.\n     */\n    private _tick = () => {\n        const canvas = this.props.canvas;\n        const { x, y, zoom } = canvas;\n\n        if (x !== this._lastX || y !== this._lastY || zoom !== this._lastZoom) {\n            this._lastX = x;\n            this._lastY = y;\n            this._lastZoom = zoom;\n            this._show();\n            this._draw();\n        }\n\n        this._rafId = requestAnimationFrame(this._tick);\n    };\n\n    /**\n     * Compute the bounding box of all nodes and frames in graph-space.\n     * @returns the min/max coordinates of the graph content\n     */\n    private _computeGraphBounds() {\n        const canvas = this.props.canvas;\n        const nodes = canvas.nodes;\n        const frames = canvas.frames;\n        const stickyNotes = canvas.stickyNotes;\n\n        if (nodes.length === 0 && frames.length === 0 && stickyNotes.length === 0) {\n            return { minX: 0, minY: 0, maxX: 1000, maxY: 700 };\n        }\n\n        let minX = Infinity;\n        let minY = Infinity;\n        let maxX = -Infinity;\n        let maxY = -Infinity;\n\n        for (const node of nodes) {\n            const nx = node.x;\n            const ny = node.y;\n            const nw = node.width || 200;\n            const nh = node.height || 40;\n            if (nx < minX) {\n                minX = nx;\n            }\n            if (ny < minY) {\n                minY = ny;\n            }\n            if (nx + nw > maxX) {\n                maxX = nx + nw;\n            }\n            if (ny + nh > maxY) {\n                maxY = ny + nh;\n            }\n        }\n\n        for (const frame of frames) {\n            const fx = frame.x;\n            const fy = frame.y;\n            const fw = frame.width || 200;\n            const fh = frame.height || 100;\n            if (fx < minX) {\n                minX = fx;\n            }\n            if (fy < minY) {\n                minY = fy;\n            }\n            if (fx + fw > maxX) {\n                maxX = fx + fw;\n            }\n            if (fy + fh > maxY) {\n                maxY = fy + fh;\n            }\n        }\n\n        for (const note of stickyNotes) {\n            const sx = note.x;\n            const sy = note.y;\n            const sw = note.width || 180;\n            const sh = note.height || 120;\n            if (sx < minX) {\n                minX = sx;\n            }\n            if (sy < minY) {\n                minY = sy;\n            }\n            if (sx + sw > maxX) {\n                maxX = sx + sw;\n            }\n            if (sy + sh > maxY) {\n                maxY = sy + sh;\n            }\n        }\n\n        // Pad the bounds a bit so nodes aren't right at the edge\n        const pad = 100;\n        return { minX: minX - pad, minY: minY - pad, maxX: maxX + pad, maxY: maxY + pad };\n    }\n\n    /**\n     * Draw the minimap onto the <canvas> element.\n     */\n    private _draw() {\n        const el = this._canvasRef.current;\n        if (!el) {\n            return;\n        }\n\n        const ctx = el.getContext(\"2d\");\n        if (!ctx) {\n            return;\n        }\n\n        const canvas = this.props.canvas;\n        const dpr = window.devicePixelRatio || 1;\n        const w = this._width;\n        const h = this._height;\n\n        // Ensure backing store matches CSS size\n        if (el.width !== w * dpr || el.height !== h * dpr) {\n            el.width = w * dpr;\n            el.height = h * dpr;\n        }\n        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n        ctx.clearRect(0, 0, w, h);\n\n        // Compute graph bounds\n        const bounds = this._computeGraphBounds();\n\n        // Also include the viewport in the bounds so scrolling far from nodes\n        // still makes sense.\n        const vpLeftInGraph = -canvas.x / canvas.zoom;\n        const vpTopInGraph = -canvas.y / canvas.zoom;\n        const hostRect = (canvas as any)._hostCanvas?.getBoundingClientRect();\n        const vpW = (hostRect?.width ?? 800) / canvas.zoom;\n        const vpH = (hostRect?.height ?? 600) / canvas.zoom;\n\n        const totalMinX = Math.min(bounds.minX, vpLeftInGraph);\n        const totalMinY = Math.min(bounds.minY, vpTopInGraph);\n        const totalMaxX = Math.max(bounds.maxX, vpLeftInGraph + vpW);\n        const totalMaxY = Math.max(bounds.maxY, vpTopInGraph + vpH);\n        const totalW = totalMaxX - totalMinX;\n        const totalH = totalMaxY - totalMinY;\n\n        // Scale to fit the minimap\n        const scale = Math.min(w / totalW, h / totalH);\n        // Center the content\n        const offsetX = (w - totalW * scale) / 2;\n        const offsetY = (h - totalH * scale) / 2;\n\n        const toMiniX = (gx: number) => (gx - totalMinX) * scale + offsetX;\n        const toMiniY = (gy: number) => (gy - totalMinY) * scale + offsetY;\n\n        // Draw frames\n        for (const frame of canvas.frames) {\n            const fx = toMiniX(frame.x);\n            const fy = toMiniY(frame.y);\n            const fw = (frame.width || 200) * scale;\n            const fh = (frame.height || 100) * scale;\n            ctx.fillStyle = \"rgba(100, 100, 100, 0.3)\";\n            ctx.strokeStyle = \"rgba(150, 150, 150, 0.5)\";\n            ctx.lineWidth = 0.5;\n            ctx.fillRect(fx, fy, fw, fh);\n            ctx.strokeRect(fx, fy, fw, fh);\n        }\n\n        // Draw nodes\n        const selectedSet = new Set(canvas.selectedNodes);\n        for (const node of canvas.nodes) {\n            const nx = toMiniX(node.x);\n            const ny = toMiniY(node.y);\n            const nw = Math.max((node.width || 200) * scale, 2);\n            const nh = Math.max((node.height || 40) * scale, 1.5);\n            ctx.fillStyle = selectedSet.has(node) ? \"#5da0e0\" : \"#888\";\n            ctx.fillRect(nx, ny, nw, nh);\n        }\n\n        // Draw sticky notes\n        for (const note of canvas.stickyNotes) {\n            const snx = toMiniX(note.x);\n            const sny = toMiniY(note.y);\n            const snw = (note.width || 180) * scale;\n            const snh = (note.height || 120) * scale;\n            ctx.fillStyle = \"rgba(255, 235, 130, 0.5)\";\n            ctx.fillRect(snx, sny, snw, snh);\n        }\n\n        // Draw viewport rectangle\n        const vx = toMiniX(vpLeftInGraph);\n        const vy = toMiniY(vpTopInGraph);\n        const vw = vpW * scale;\n        const vh = vpH * scale;\n        ctx.strokeStyle = \"rgba(255, 255, 255, 0.7)\";\n        ctx.lineWidth = 1.5;\n        ctx.strokeRect(vx, vy, vw, vh);\n\n        // Store transform for hit-testing in pointer events\n        this._mapScale = scale;\n        this._mapOffsetX = offsetX;\n        this._mapOffsetY = offsetY;\n        this._mapTotalMinX = totalMinX;\n        this._mapTotalMinY = totalMinY;\n    }\n\n    /**\n     * Convert a pointer event on the minimap to graph-space coordinates and\n     * pan the canvas to center on that point.\n     * @param evt - the pointer event from the minimap\n     */\n    private _panToMinimapPoint(evt: React.PointerEvent) {\n        const el = this._canvasRef.current;\n        if (!el) {\n            return;\n        }\n        const rect = el.getBoundingClientRect();\n        const localX = evt.clientX - rect.left;\n        const localY = evt.clientY - rect.top;\n\n        // Convert minimap pixel to graph-space\n        const graphX = (localX - this._mapOffsetX) / this._mapScale + this._mapTotalMinX;\n        const graphY = (localY - this._mapOffsetY) / this._mapScale + this._mapTotalMinY;\n\n        // Center the viewport on this graph point\n        const canvas = this.props.canvas;\n        const hostRect = (canvas as any)._hostCanvas?.getBoundingClientRect();\n        const vpW = (hostRect?.width ?? 800) / canvas.zoom;\n        const vpH = (hostRect?.height ?? 600) / canvas.zoom;\n\n        canvas.x = -(graphX - vpW / 2) * canvas.zoom;\n        canvas.y = -(graphY - vpH / 2) * canvas.zoom;\n    }\n\n    private _onPointerDown = (evt: React.PointerEvent) => {\n        evt.preventDefault();\n        evt.stopPropagation();\n        this._isDragging = true;\n        (evt.target as HTMLElement).setPointerCapture(evt.pointerId);\n        this._panToMinimapPoint(evt);\n    };\n\n    private _onPointerMove = (evt: React.PointerEvent) => {\n        if (!this._isDragging) {\n            return;\n        }\n        evt.preventDefault();\n        evt.stopPropagation();\n        this._panToMinimapPoint(evt);\n    };\n\n    private _onPointerUp = (evt: React.PointerEvent) => {\n        if (!this._isDragging) {\n            return;\n        }\n        this._isDragging = false;\n        (evt.target as HTMLElement).releasePointerCapture(evt.pointerId);\n        // Re-arm the hide timer\n        this._show();\n    };\n\n    /** @internal */\n    override render() {\n        return (\n            <div\n                ref={this._containerRef}\n                className={`${styles[\"minimap-container\"]} ${styles[\"minimap-hidden\"]}`}\n                style={{ width: this._width, height: this._height }}\n                onPointerDown={this._onPointerDown}\n                onPointerMove={this._onPointerMove}\n                onPointerUp={this._onPointerUp}\n            >\n                <canvas ref={this._canvasRef} className={styles[\"minimap-canvas\"]} style={{ width: this._width, height: this._height }} />\n            </div>\n        );\n    }\n}\n"]}

package/nodeGraphSystem/graphMinimap.module.scss

@@ -0,0 +1,30 @@
+.minimap-container {
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    width: 200px;
+    height: 140px;
+    background: rgba(30, 30, 30, 0.85);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    border-radius: 4px;
+    overflow: hidden;
+    pointer-events: auto;
+    z-index: 20;
+    transition: opacity 0.3s ease-in-out;
+    cursor: crosshair;
+}
+
+.minimap-hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.minimap-visible {
+    opacity: 1;
+}
+
+.minimap-canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+}

package/nodeGraphSystem/graphNode.d.ts

@@ -25,6 +25,8 @@ export declare class GraphNode {
     private _comments;
     private _executionTime;
     private _selectionBorder;
+    private _validationBadge;
+    private _breakpointBadge;
     private _inputPorts;
     private _outputPorts;
     private _links;
@@ -48,6 +50,18 @@ export declare class GraphNode {
     _visualPropertiesRefresh: Array<() => void>;
     addClassToVisual(className: string): void;
     removeClassFromVisual(className: string): void;
+    /**
+     * Shows a validation badge on the node header.
+     * @param severity - "error" | "warning" | null. Pass null to hide the badge.
+     * @param tooltip - tooltip text shown on hover.
+     */
+    setValidationState(severity: "error" | "warning" | null, tooltip?: string): void;
+    /**
+     * Shows or hides a breakpoint indicator on the node.
+     * @param active - true to show the red breakpoint dot, false to hide.
+     * @param paused - true if execution is currently paused on this breakpoint.
+     */
+    setBreakpointState(active: boolean, paused?: boolean): void;
     get isCollapsed(): boolean;
     get isVisible(): boolean;
     set isVisible(value: boolean);
@@ -98,6 +112,8 @@ export declare class GraphNode {
     private _portUICount;
     private _buildInputPorts;
     private _removeInputPort;
+    private _buildOutputPorts;
+    private _removeOutputPort;
     appendVisual(root: HTMLDivElement, owner: GraphCanvasComponent): void;
     dispose(): void;
 }

package/nodeGraphSystem/graphNode.js

@@ -14,6 +14,42 @@ export class GraphNode {
     removeClassFromVisual(className) {
         this._visual.classList.remove(className);
     }
+    /**
+     * Shows a validation badge on the node header.
+     * @param severity - "error" | "warning" | null. Pass null to hide the badge.
+     * @param tooltip - tooltip text shown on hover.
+     */
+    setValidationState(severity, tooltip) {
+        if (!this._validationBadge) {
+            return;
+        }
+        this._validationBadge.classList.remove(localStyles["validationError"], localStyles["validationWarning"]);
+        if (!severity) {
+            this._validationBadge.style.display = "none";
+            this._validationBadge.title = "";
+            return;
+        }
+        this._validationBadge.style.display = "";
+        this._validationBadge.classList.add(severity === "error" ? localStyles["validationError"] : localStyles["validationWarning"]);
+        this._validationBadge.title = tooltip ?? "";
+    }
+    /**
+     * Shows or hides a breakpoint indicator on the node.
+     * @param active - true to show the red breakpoint dot, false to hide.
+     * @param paused - true if execution is currently paused on this breakpoint.
+     */
+    setBreakpointState(active, paused = false) {
+        if (!this._breakpointBadge) {
+            return;
+        }
+        this._breakpointBadge.classList.remove(localStyles["breakpointActive"], localStyles["breakpointPaused"]);
+        if (!active) {
+            this._breakpointBadge.style.display = "none";
+            return;
+        }
+        this._breakpointBadge.style.display = "";
+        this._breakpointBadge.classList.add(paused ? localStyles["breakpointPaused"] : localStyles["breakpointActive"]);
+    }
     get isCollapsed() {
         return this._isCollapsed;
     }
@@ -199,6 +235,12 @@ export class GraphNode {
         content.onInputRemoved = (index) => {
             this._removeInputPort(index);
         };
+        content.onOutputCountChanged = () => {
+            this._buildOutputPorts(true);
+        };
+        content.onOutputRemoved = (index) => {
+            this._removeOutputPort(index);
+        };
     }
     isOverlappingFrame(frame) {
         const rect2 = this._visual.getBoundingClientRect();
@@ -267,7 +309,9 @@ export class GraphNode {
     }
     refresh() {
         if (this._displayManager) {
-            this._header.innerHTML = this._displayManager.getHeaderText(this.content);
+            const headerText = this._displayManager.getHeaderText(this.content);
+            this._header.innerHTML = headerText;
+            this._header.title = headerText;
             this._displayManager.updatePreviewContent(this.content, this._content);
             const backgroundColor = this._displayManager.getBackgroundColor(this.content);
             if (backgroundColor) {
@@ -297,6 +341,7 @@ export class GraphNode {
         }
         else {
             this._header.innerHTML = this.content.name;
+            this._header.title = this.content.name;
         }
         for (const refresh of this._visualPropertiesRefresh) {
             refresh();
@@ -577,6 +622,22 @@ export class GraphNode {
         port.remove();
         this._inputPorts.splice(index, 1);
     }
+    _buildOutputPorts(addOnly = false) {
+        for (const output of this.content.outputs) {
+            if (addOnly) {
+                const existingPort = this._outputPorts.find((p) => p.portData === output);
+                if (existingPort) {
+                    continue;
+                }
+            }
+            this._outputPorts.push(NodePort.CreatePortElement(output, this, this._outputsContainer, this._displayManager, this._stateManager));
+        }
+    }
+    _removeOutputPort(index) {
+        const port = this._outputPorts[index];
+        port.remove();
+        this._outputPorts.splice(index, 1);
+    }
     appendVisual(root, owner) {
         this._ownerCanvas = owner;
         // Display manager
@@ -650,6 +711,20 @@ export class GraphNode {
         this._executionTime = root.ownerDocument.createElement("div");
         this._executionTime.classList.add(localStyles.executionTime);
         this._visual.appendChild(this._executionTime);
+        // Validation badge (opt-in)
+        if (this._stateManager.enableNodeBadges) {
+            this._validationBadge = root.ownerDocument.createElement("div");
+            this._validationBadge.classList.add(localStyles.validationBadge);
+            this._validationBadge.style.display = "none";
+            this._headerContainer.appendChild(this._validationBadge);
+        }
+        // Breakpoint badge (opt-in)
+        if (this._stateManager.enableNodeBadges) {
+            this._breakpointBadge = root.ownerDocument.createElement("div");
+            this._breakpointBadge.classList.add(localStyles.breakpointBadge);
+            this._breakpointBadge.style.display = "none";
+            this._headerContainer.appendChild(this._breakpointBadge);
+        }
         // Options
         const propStore = this.content.data._propStore;
         if (propStore) {