@principal-ai/principal-view-react 0.13.10 → 0.13.12

package/dist/components/MultiCanvasRenderer.js

@@ -0,0 +1,207 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useCallback, useRef, forwardRef } from 'react';
+import { GraphRenderer } from './GraphRenderer';
+// ============================================================================
+// Canvas Merging Utilities
+// ============================================================================
+const DEFAULT_NODE_WIDTH = 200;
+const DEFAULT_NODE_HEIGHT = 100;
+const GROUP_PADDING = 40;
+/**
+ * Create a prefixed node ID to avoid collisions between canvases
+ */
+function prefixNodeId(canvasId, nodeId) {
+    return `${canvasId}:${nodeId}`;
+}
+/**
+ * Calculate the bounding box of nodes in a canvas (relative to canvas origin)
+ */
+function calculateCanvasBounds(canvas) {
+    if (!canvas.nodes || canvas.nodes.length === 0) {
+        return { minX: 0, minY: 0, maxX: DEFAULT_NODE_WIDTH, maxY: DEFAULT_NODE_HEIGHT };
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const node of canvas.nodes) {
+        const x = node.x ?? 0;
+        const y = node.y ?? 0;
+        const width = node.width ?? DEFAULT_NODE_WIDTH;
+        const height = node.height ?? DEFAULT_NODE_HEIGHT;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x + width);
+        maxY = Math.max(maxY, y + height);
+    }
+    return { minX, minY, maxX, maxY };
+}
+/**
+ * Merge multiple canvases into a single canvas with position offsets applied.
+ * Each canvas gets a group node border with its name as a label.
+ * Node IDs are prefixed with canvasId to avoid collisions (format: "canvasId:nodeId").
+ * Original IDs can be recovered using parseNodeId().
+ */
+export function mergeCanvases(placements, options = {}) {
+    const { showGroups = true } = options;
+    const groupNodes = [];
+    const mergedNodes = [];
+    const mergedEdges = [];
+    for (const placement of placements) {
+        const { canvasId, canvas, position, label } = placement;
+        // Calculate bounds for this canvas to create a group node
+        if (showGroups && canvas.nodes && canvas.nodes.length > 0) {
+            const bounds = calculateCanvasBounds(canvas);
+            const groupNode = {
+                id: `${canvasId}:__group__`,
+                type: 'group',
+                label: label ?? canvas.pv?.name ?? canvasId,
+                x: position.x + bounds.minX - GROUP_PADDING,
+                y: position.y + bounds.minY - GROUP_PADDING,
+                width: bounds.maxX - bounds.minX + GROUP_PADDING * 2,
+                height: bounds.maxY - bounds.minY + GROUP_PADDING * 2,
+            };
+            groupNodes.push(groupNode);
+        }
+        // Process nodes - apply position offset and prefix IDs
+        if (canvas.nodes) {
+            for (const node of canvas.nodes) {
+                const mergedNode = {
+                    ...node,
+                    id: prefixNodeId(canvasId, node.id),
+                    x: (node.x ?? 0) + position.x,
+                    y: (node.y ?? 0) + position.y,
+                };
+                mergedNodes.push(mergedNode);
+            }
+        }
+        // Process edges - update node references with prefixed IDs
+        if (canvas.edges) {
+            for (const edge of canvas.edges) {
+                const mergedEdge = {
+                    ...edge,
+                    id: prefixNodeId(canvasId, edge.id),
+                    fromNode: prefixNodeId(canvasId, edge.fromNode),
+                    toNode: prefixNodeId(canvasId, edge.toNode),
+                };
+                mergedEdges.push(mergedEdge);
+            }
+        }
+    }
+    // Create merged canvas - group nodes first so they render behind
+    const mergedCanvas = {
+        nodes: [...groupNodes, ...mergedNodes],
+        edges: mergedEdges,
+        pv: {
+            version: '1.0.0',
+            name: 'Multi-Canvas View',
+        },
+    };
+    return mergedCanvas;
+}
+/**
+ * Extract the original canvas ID and node ID from a merged node ID
+ */
+export function parseNodeId(mergedNodeId) {
+    const colonIndex = mergedNodeId.indexOf(':');
+    if (colonIndex === -1)
+        return null;
+    return {
+        canvasId: mergedNodeId.substring(0, colonIndex),
+        nodeId: mergedNodeId.substring(colonIndex + 1),
+    };
+}
+// ============================================================================
+// MultiCanvasRenderer Component
+// ============================================================================
+/**
+ * Renders multiple canvases merged into a single graph view.
+ *
+ * Each canvas is positioned at its specified offset, and all nodes/edges
+ * are combined into a unified viewport. Node IDs are prefixed with their
+ * source canvas ID to avoid collisions (format: "canvasId:nodeId").
+ *
+ * @example
+ * ```tsx
+ * <MultiCanvasRenderer
+ *   layout={{
+ *     placements: [
+ *       { canvasId: 'auth', canvas: authCanvas, position: { x: 0, y: 0 } },
+ *       { canvasId: 'data', canvas: dataCanvas, position: { x: 600, y: 0 } },
+ *     ],
+ *   }}
+ *   showControls
+ * />
+ * ```
+ */
+export const MultiCanvasRenderer = forwardRef(function MultiCanvasRenderer({ layout, onLayoutChange, showGroups = true, ...graphRendererProps }, ref) {
+    // Track group positions at the start of drag to calculate deltas
+    const groupPositionsRef = useRef(new Map());
+    // Merge all canvases into a single canvas
+    const mergedCanvas = useMemo(() => mergeCanvases(layout.placements, { showGroups }), [layout.placements, showGroups]);
+    // Calculate group node IDs for dragging
+    const draggableNodeIds = useMemo(() => {
+        if (!showGroups)
+            return undefined;
+        const ids = new Set();
+        for (const placement of layout.placements) {
+            if (placement.canvas.nodes && placement.canvas.nodes.length > 0) {
+                ids.add(`${placement.canvasId}:__group__`);
+            }
+        }
+        console.log('[MultiCanvasRenderer] draggableNodeIds:', [...ids]);
+        return ids.size > 0 ? ids : undefined;
+    }, [layout.placements, showGroups]);
+    // Store initial group positions whenever layout changes
+    useMemo(() => {
+        groupPositionsRef.current.clear();
+        for (const placement of layout.placements) {
+            if (placement.canvas.nodes && placement.canvas.nodes.length > 0) {
+                const bounds = calculateCanvasBounds(placement.canvas);
+                // Group position = placement position + bounds offset - padding
+                groupPositionsRef.current.set(`${placement.canvasId}:__group__`, {
+                    x: placement.position.x + bounds.minX - GROUP_PADDING,
+                    y: placement.position.y + bounds.minY - GROUP_PADDING,
+                });
+            }
+        }
+    }, [layout.placements]);
+    // Handle group drag to update layout positions
+    const handleNodeDragStop = useCallback((nodeId, newPosition) => {
+        // Only handle group nodes
+        if (!nodeId.endsWith(':__group__'))
+            return;
+        if (!onLayoutChange)
+            return;
+        const parsed = parseNodeId(nodeId);
+        if (!parsed)
+            return;
+        const { canvasId } = parsed;
+        // Get the original group position
+        const originalGroupPos = groupPositionsRef.current.get(nodeId);
+        if (!originalGroupPos)
+            return;
+        // Calculate delta
+        const deltaX = newPosition.x - originalGroupPos.x;
+        const deltaY = newPosition.y - originalGroupPos.y;
+        // Skip if no significant movement
+        if (Math.abs(deltaX) < 1 && Math.abs(deltaY) < 1)
+            return;
+        // Create updated layout with new position for this canvas
+        const updatedPlacements = layout.placements.map((placement) => {
+            if (placement.canvasId === canvasId) {
+                return {
+                    ...placement,
+                    position: {
+                        x: placement.position.x + deltaX,
+                        y: placement.position.y + deltaY,
+                    },
+                };
+            }
+            return placement;
+        });
+        onLayoutChange({ placements: updatedPlacements });
+    }, [layout.placements, onLayoutChange]);
+    return (_jsx(GraphRenderer, { ref: ref, canvas: mergedCanvas, editable: false, draggableNodeIds: draggableNodeIds, onNodeDragStop: handleNodeDragStop, ...graphRendererProps }));
+});
+//# sourceMappingURL=MultiCanvasRenderer.js.map

package/dist/components/MultiCanvasRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiCanvasRenderer.js","sourceRoot":"","sources":["../../src/components/MultiCanvasRenderer.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -8,6 +8,8 @@
 export type { GraphConfiguration, GraphEvent, GraphMetrics, Violation, Warning, ValidationResult, EventStream, NodeTypeDefinition, EdgeTypeDefinition, ConnectionRule, NodeState, EdgeState, ConfigurationFile, ConfigurationLoadResult, ComponentLibrary, LibraryNodeComponent, LibraryEdgeComponent, } from '@principal-ai/principal-view-core';
 export { GraphRenderer } from './components/GraphRenderer';
 export type { GraphRendererProps, GraphRendererHandle, NodePositionChange, PendingChanges, } from './components/GraphRenderer';
+export { MultiCanvasRenderer, mergeCanvases, parseNodeId } from './components/MultiCanvasRenderer';
+export type { MultiCanvasRendererProps, MultiCanvasLayout, CanvasPlacement, } from './components/MultiCanvasRenderer';
 export { ConfigurationSelector } from './components/ConfigurationSelector';
 export type { ConfigurationSelectorProps } from './components/ConfigurationSelector';
 export { GenericNode } from './nodes/GenericNode';
@@ -25,4 +27,6 @@ export type { EdgeStateWithHandles } from './utils/graphConverter';
 export { Icon, resolveIcon } from './utils/iconResolver';
 export type { IconProps } from './utils/iconResolver';
 export { swapGraphOrientation, swapNodePositions, swapEdgeSides, } from './utils/orientationUtils';
+export { getCanvasBounds, getCanvasDisplaySize } from './utils/canvasBounds';
+export type { CanvasBounds } from './utils/canvasBounds';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,uBAAuB,EAEvB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,YAAY,EACV,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,SAAS,EACT,OAAO,EACP,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,SAAS,EACT,iBAAiB,EACjB,uBAAuB,EAEvB,gBAAgB,EAChB,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,mCAAmC,CAAC;AAG3C,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,YAAY,EACV,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,cAAc,GACf,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AACnG,YAAY,EACV,wBAAwB,EACxB,iBAAiB,EACjB,eAAe,GAChB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,oCAAoC,CAAC;AAGrF,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAG3E,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAChC,YAAY,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACzD,YAAY,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC7E,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -7,6 +7,7 @@
  */
 // Export components
 export { GraphRenderer } from './components/GraphRenderer';
+export { MultiCanvasRenderer, mergeCanvases, parseNodeId } from './components/MultiCanvasRenderer';
 export { ConfigurationSelector } from './components/ConfigurationSelector';
 // Export node/edge renderers
 export { GenericNode } from './nodes/GenericNode';
@@ -19,4 +20,5 @@ export { NodeTooltip } from './components/NodeTooltip';
 export { convertToXYFlowNodes, convertToXYFlowEdges, } from './utils/graphConverter';
 export { Icon, resolveIcon } from './utils/iconResolver';
 export { swapGraphOrientation, swapNodePositions, swapEdgeSides, } from './utils/orientationUtils';
+export { getCanvasBounds, getCanvasDisplaySize } from './utils/canvasBounds';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,6BAA6B;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,2BAA2B;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,mBAAmB;AACnB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAwBH,oBAAoB;AACpB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAQ3D,OAAO,EAAE,mBAAmB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAC;AAOnG,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,6BAA6B;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD,2BAA2B;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,mBAAmB;AACnB,OAAO,EACL,oBAAoB,EACpB,oBAAoB,GACrB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,aAAa,GACd,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/utils/canvasBounds.d.ts

@@ -0,0 +1,29 @@
+import type { ExtendedCanvas } from '@principal-ai/principal-view-core';
+export interface CanvasBounds {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+    width: number;
+    height: number;
+}
+/**
+ * Calculate the bounding box of all nodes in a canvas.
+ * Returns the min/max coordinates and total dimensions.
+ */
+export declare function getCanvasBounds(canvas: ExtendedCanvas): CanvasBounds;
+/**
+ * Calculate a recommended display size for a canvas cell.
+ * Adds padding and enforces minimum dimensions.
+ */
+export declare function getCanvasDisplaySize(canvas: ExtendedCanvas, options?: {
+    padding?: number;
+    minWidth?: number;
+    minHeight?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+}): {
+    width: number;
+    height: number;
+};
+//# sourceMappingURL=canvasBounds.d.ts.map

package/dist/utils/canvasBounds.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasBounds.d.ts","sourceRoot":"","sources":["../../src/utils/canvasBounds.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAKD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,MAAM,EAAE,cAAc,GAAG,YAAY,CAqCpE;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,cAAc,EACtB,OAAO,GAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACf,GACL;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAoBnC"}

package/dist/utils/canvasBounds.js

@@ -0,0 +1,56 @@
+const DEFAULT_NODE_WIDTH = 200;
+const DEFAULT_NODE_HEIGHT = 100;
+/**
+ * Calculate the bounding box of all nodes in a canvas.
+ * Returns the min/max coordinates and total dimensions.
+ */
+export function getCanvasBounds(canvas) {
+    if (!canvas.nodes || canvas.nodes.length === 0) {
+        return {
+            minX: 0,
+            minY: 0,
+            maxX: DEFAULT_NODE_WIDTH,
+            maxY: DEFAULT_NODE_HEIGHT,
+            width: DEFAULT_NODE_WIDTH,
+            height: DEFAULT_NODE_HEIGHT,
+        };
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const node of canvas.nodes) {
+        const x = node.x ?? 0;
+        const y = node.y ?? 0;
+        const width = node.width ?? DEFAULT_NODE_WIDTH;
+        const height = node.height ?? DEFAULT_NODE_HEIGHT;
+        minX = Math.min(minX, x);
+        minY = Math.min(minY, y);
+        maxX = Math.max(maxX, x + width);
+        maxY = Math.max(maxY, y + height);
+    }
+    return {
+        minX,
+        minY,
+        maxX,
+        maxY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+}
+/**
+ * Calculate a recommended display size for a canvas cell.
+ * Adds padding and enforces minimum dimensions.
+ */
+export function getCanvasDisplaySize(canvas, options = {}) {
+    const { padding = 100, minWidth = 300, minHeight = 200, maxWidth = 1200, maxHeight = 800, } = options;
+    const bounds = getCanvasBounds(canvas);
+    // Add padding to content dimensions
+    const contentWidth = bounds.width + padding * 2;
+    const contentHeight = bounds.height + padding * 2;
+    // Clamp to min/max
+    const width = Math.min(maxWidth, Math.max(minWidth, contentWidth));
+    const height = Math.min(maxHeight, Math.max(minHeight, contentHeight));
+    return { width, height };
+}
+//# sourceMappingURL=canvasBounds.js.map

package/dist/utils/canvasBounds.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvasBounds.js","sourceRoot":"","sources":["../../src/utils/canvasBounds.ts"],"names":[],"mappings":"AAWA,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAC/B,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEhC;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,MAAsB;IACpD,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9C,OAAO;YACL,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,CAAC;YACP,IAAI,EAAE,kBAAkB;YACxB,IAAI,EAAE,mBAAmB;YACzB,KAAK,EAAE,kBAAkB;YACzB,MAAM,EAAE,mBAAmB;SAC5B,CAAC;KACH;IAED,IAAI,IAAI,GAAG,QAAQ,CAAC;IACpB,IAAI,IAAI,GAAG,QAAQ,CAAC;IACpB,IAAI,IAAI,GAAG,CAAC,QAAQ,CAAC;IACrB,IAAI,IAAI,GAAG,CAAC,QAAQ,CAAC;IAErB,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,KAAK,EAAE;QAC/B,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;QACtB,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;QACtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,kBAAkB,CAAC;QAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,mBAAmB,CAAC;QAElD,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QACzB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;QACzB,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC,CAAC;QACjC,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC,CAAC;KACnC;IAED,OAAO;QACL,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,IAAI;QACJ,KAAK,EAAE,IAAI,GAAG,IAAI;QAClB,MAAM,EAAE,IAAI,GAAG,IAAI;KACpB,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,oBAAoB,CAClC,MAAsB,EACtB,UAMI,EAAE;IAEN,MAAM,EACJ,OAAO,GAAG,GAAG,EACb,QAAQ,GAAG,GAAG,EACd,SAAS,GAAG,GAAG,EACf,QAAQ,GAAG,IAAI,EACf,SAAS,GAAG,GAAG,GAChB,GAAG,OAAO,CAAC;IAEZ,MAAM,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;IAEvC,oCAAoC;IACpC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,GAAG,OAAO,GAAG,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC;IAElD,mBAAmB;IACnB,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IACnE,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC;IAEvE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC;AAC3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@principal-ai/principal-view-react",
-  "version": "0.13.10",
+  "version": "0.13.12",
   "description": "React components for graph-based principal view framework",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/GraphRenderer.tsx

@@ -213,6 +213,19 @@ interface GraphRendererBaseProps {
    */
   fitViewPadding?: number;
 
+  /**
+   * Set of node IDs that should be draggable even when editable=false.
+   * Useful for allowing specific nodes (like group containers) to be moved
+   * while keeping other nodes locked in place.
+   */
+  draggableNodeIds?: Set<string>;
+
+  /**
+   * Callback fired when a node drag operation completes.
+   * Receives the node ID and its new position.
+   */
+  onNodeDragStop?: (nodeId: string, position: { x: number; y: number }) => void;
+
 }
 
 /** GraphRenderer props - canvas format only */
@@ -440,6 +453,8 @@ interface GraphRendererInnerProps {
   onNodeClick?: (nodeId: string, event: React.MouseEvent) => void;
   fitViewToNodeIds?: string[] | null;
   fitViewPadding?: number;
+  draggableNodeIds?: Set<string>;
+  onNodeDragStop?: (nodeId: string, position: { x: number; y: number }) => void;
 }
 
 /**
@@ -470,6 +485,8 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
   onNodeClick: onNodeClickProp,
   fitViewToNodeIds,
   fitViewPadding = 0.2,
+  draggableNodeIds,
+  onNodeDragStop: onNodeDragStopProp,
 }) => {
   const { fitView, fitBounds, getNodes } = useReactFlow();
   const updateNodeInternals = useUpdateNodeInternals();
@@ -1319,10 +1336,20 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
       const animation = animationState.nodeAnimations[node.id];
       // Apply any pending position changes
       const pendingPosition = editStateRef.current.positionChanges.get(node.id);
+      // Allow specific nodes to be draggable even when not in edit mode
+      const isDraggable = editable || draggableNodeIds?.has(node.id);
+      if (isDraggable && !editable) {
+        console.log('[GraphRenderer] Setting draggable=true for node:', node.id);
+      }
+      // When draggableNodeIds is provided, we need to explicitly control each node's draggability
+      // because nodesDraggable will be true to allow the specific nodes to drag
+      const hasDraggableNodeIds = draggableNodeIds && draggableNodeIds.size > 0;
       return {
         ...node,
         ...(pendingPosition ? { position: pendingPosition } : {}),
         selected: selectedNodeIds.has(node.id),
+        // Explicitly set draggable for each node when using draggableNodeIds
+        draggable: hasDraggableNodeIds ? isDraggable : (editable || false),
         data: {
           ...node.data,
           editable,
@@ -1340,7 +1367,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         } as CustomNodeData,
       };
     });
-  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds]);
+  }, [localNodes, configuration, violations, animationState.nodeAnimations, editable, showTooltips, highlightedNodeId, activeNodeIds, editStateRef, shiftKeyPressed, selectedNodeIds, hiddenNodeIds, draggableNodeIds]);
 
   const baseNodesKey = useMemo(() => {
     return nodes
@@ -1407,18 +1434,31 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
   // Handle node drag to show alignment guides
   const handleNodeDrag = useCallback(
     (_event: React.MouseEvent, node: Node) => {
-      if (!editable) return;
+      // Allow dragging if editable OR if this node is in draggableNodeIds
+      const canDrag = editable || draggableNodeIds?.has(node.id);
+      if (!canDrag) return;
 
-      const guides = detectAlignmentGuides(node.id, xyflowNodes);
-      setAlignmentGuides(guides);
+      // Only show alignment guides in full edit mode
+      if (editable) {
+        const guides = detectAlignmentGuides(node.id, xyflowNodes);
+        setAlignmentGuides(guides);
+      }
     },
-    [editable, xyflowNodes, detectAlignmentGuides]
+    [editable, draggableNodeIds, xyflowNodes, detectAlignmentGuides]
   );
 
-  // Clear guides when drag ends
-  const handleNodeDragStop = useCallback(() => {
-    setAlignmentGuides([]);
-  }, []);
+  // Clear guides when drag ends and notify parent
+  const handleNodeDragStop = useCallback(
+    (_event: React.MouseEvent, node: Node) => {
+      setAlignmentGuides([]);
+
+      // Call the callback if provided (for draggable nodes outside edit mode)
+      if (onNodeDragStopProp && node.position) {
+        onNodeDragStopProp(node.id, node.position);
+      }
+    },
+    [onNodeDragStopProp]
+  );
 
   // Handle node changes (drag and resize events)
   const handleNodesChange = useCallback(
@@ -1674,7 +1714,7 @@ const GraphRendererInner: React.FC<GraphRendererInnerProps> = ({
         onNodeDrag={handleNodeDrag}
         onNodeDragStop={handleNodeDragStop}
         proOptions={{ hideAttribution: true }}
-        nodesDraggable={editable}
+        nodesDraggable={editable || (draggableNodeIds && draggableNodeIds.size > 0)}
         elementsSelectable={editable}
         selectNodesOnDrag={false}
         nodesConnectable={editable}
@@ -2108,6 +2148,8 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
     onNodeClick,
     fitViewToNodeIds,
     fitViewPadding,
+    draggableNodeIds,
+    onNodeDragStop,
   } = props;
 
   return (
@@ -2137,6 +2179,8 @@ export const GraphRenderer = forwardRef<GraphRendererHandle, GraphRendererProps>
           onNodeClick={onNodeClick}
           fitViewToNodeIds={fitViewToNodeIds}
           fitViewPadding={fitViewPadding}
+          draggableNodeIds={draggableNodeIds}
+          onNodeDragStop={onNodeDragStop}
         />
       </ReactFlowProvider>
     </div>