@procaaso/alphinity-ui-components 1.0.3 → 1.0.4

package/dist/index.d.cts

@@ -683,6 +683,15 @@ interface UseViewBoxResult {
     zoomIn: () => void;
     /** Zoom out (increase viewBox size) */
     zoomOut: () => void;
+    /** Fit viewBox to content bounds with optional padding */
+    fitToContent: (bounds: {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    }, padding?: number) => void;
+    /** Set viewBox directly */
+    setViewBox: (viewBox: ViewBox) => void;
     /** Convert screen coordinates to world (SVG) coordinates */
     screenToWorld: (screenX: number, screenY: number) => {
         x: number;
@@ -927,9 +936,19 @@ interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
     }) => void;
     /** Callback when a pipe is created via connection mode */
     onPipeCreated?: (sourceNodeId: string, targetNodeId: string, sourcePortId?: string, targetPortId?: string) => void;
+    /** Callback when canvas is mounted, provides control functions */
+    onMounted?: (controls: PIDCanvasControls) => void;
     /** Telemetry data bindings for live values */
     telemetry?: TelemetryMap;
 }
+interface PIDCanvasControls {
+    /** Fit view to show all diagram content */
+    fitToContent: (padding?: number) => void;
+    /** Set zoom level (1 = 100%, 2 = 200%, etc.) */
+    setZoom: (zoomLevel: number) => void;
+    /** Get current zoom level */
+    getZoom: () => number;
+}
 /**
  * PIDCanvas - Interactive canvas for rendering P&ID diagrams
  *
@@ -939,7 +958,7 @@ interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
  *
  * Future: Editing tools, symbol library UI
  */
-declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, telemetry, ...props }: PIDCanvasProps): react__default.ReactElement;
+declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, ...props }: PIDCanvasProps): react__default.ReactElement;
 
 interface SymbolLibraryProps {
     /** Optional className for styling */

package/dist/index.d.ts

@@ -683,6 +683,15 @@ interface UseViewBoxResult {
     zoomIn: () => void;
     /** Zoom out (increase viewBox size) */
     zoomOut: () => void;
+    /** Fit viewBox to content bounds with optional padding */
+    fitToContent: (bounds: {
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+    }, padding?: number) => void;
+    /** Set viewBox directly */
+    setViewBox: (viewBox: ViewBox) => void;
     /** Convert screen coordinates to world (SVG) coordinates */
     screenToWorld: (screenX: number, screenY: number) => {
         x: number;
@@ -927,9 +936,19 @@ interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
     }) => void;
     /** Callback when a pipe is created via connection mode */
     onPipeCreated?: (sourceNodeId: string, targetNodeId: string, sourcePortId?: string, targetPortId?: string) => void;
+    /** Callback when canvas is mounted, provides control functions */
+    onMounted?: (controls: PIDCanvasControls) => void;
     /** Telemetry data bindings for live values */
     telemetry?: TelemetryMap;
 }
+interface PIDCanvasControls {
+    /** Fit view to show all diagram content */
+    fitToContent: (padding?: number) => void;
+    /** Set zoom level (1 = 100%, 2 = 200%, etc.) */
+    setZoom: (zoomLevel: number) => void;
+    /** Get current zoom level */
+    getZoom: () => number;
+}
 /**
  * PIDCanvas - Interactive canvas for rendering P&ID diagrams
  *
@@ -939,7 +958,7 @@ interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
  *
  * Future: Editing tools, symbol library UI
  */
-declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, telemetry, ...props }: PIDCanvasProps): react__default.ReactElement;
+declare function PIDCanvas({ diagram, className, style, features, onSelectionChange, onNodeClick, onPipeClick, onNodeMove, onDiagramChange, onDelete, onItemsCopied, onPaste, onSymbolDrop, onPipeCreated, onMounted, telemetry, ...props }: PIDCanvasProps): react__default.ReactElement;
 
 interface SymbolLibraryProps {
     /** Optional className for styling */

package/dist/index.js

@@ -2347,6 +2347,34 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, maxZoom]);
+  const fitToContent = useCallback3((bounds, padding = 50) => {
+    const contentWidth = bounds.maxX - bounds.minX;
+    const contentHeight = bounds.maxY - bounds.minY;
+    if (contentWidth === 0 || contentHeight === 0) {
+      return;
+    }
+    const paddedWidth = contentWidth + padding * 2;
+    const paddedHeight = contentHeight + padding * 2;
+    const aspectRatio = initialViewBox.width / initialViewBox.height;
+    const contentAspectRatio = paddedWidth / paddedHeight;
+    let newWidth;
+    let newHeight;
+    if (contentAspectRatio > aspectRatio) {
+      newWidth = paddedWidth;
+      newHeight = paddedWidth / aspectRatio;
+    } else {
+      newHeight = paddedHeight;
+      newWidth = paddedHeight * aspectRatio;
+    }
+    const centerX = bounds.minX + contentWidth / 2;
+    const centerY = bounds.minY + contentHeight / 2;
+    setViewBox({
+      x: centerX - newWidth / 2,
+      y: centerY - newHeight / 2,
+      width: newWidth,
+      height: newHeight
+    });
+  }, [initialViewBox]);
   useEffect4(() => {
     if (!enableZoom || !svgRef.current) return;
     const svg = svgRef.current;
@@ -2578,6 +2606,8 @@ function useViewBox(options) {
     resetViewBox,
     zoomIn,
     zoomOut,
+    fitToContent,
+    setViewBox,
     screenToWorld,
     svgRef
   };
@@ -3232,6 +3262,7 @@ function PIDCanvas({
   onPaste,
   onSymbolDrop,
   onPipeCreated,
+  onMounted,
   telemetry,
   ...props
 }) {
@@ -3249,12 +3280,72 @@ function PIDCanvas({
   const {
     viewBox: controlledViewBox,
     svgRef,
-    screenToWorld
+    screenToWorld,
+    fitToContent: fitToContentViewBox,
+    setViewBox
   } = useViewBox({
     initialViewBox: diagram.viewBox,
     enablePan: features.pan ?? true,
     enableZoom: features.zoom ?? true
   });
+  const calculateContentBounds = useCallback7(() => {
+    const nodes2 = localDiagram.nodes.filter((n) => n.visible !== false);
+    if (nodes2.length === 0) {
+      return null;
+    }
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    nodes2.forEach((node) => {
+      const symbol = getSymbolDefinition(node.symbolId);
+      if (!symbol) return;
+      const nodeMinX = node.transform.x;
+      const nodeMinY = node.transform.y;
+      const nodeMaxX = node.transform.x + symbol.viewBox.width;
+      const nodeMaxY = node.transform.y + symbol.viewBox.height;
+      minX = Math.min(minX, nodeMinX);
+      minY = Math.min(minY, nodeMinY);
+      maxX = Math.max(maxX, nodeMaxX);
+      maxY = Math.max(maxY, nodeMaxY);
+    });
+    return { minX, minY, maxX, maxY };
+  }, [localDiagram.nodes]);
+  useEffect8(() => {
+    if (onMounted) {
+      const controls = {
+        fitToContent: (padding = 50) => {
+          const bounds = calculateContentBounds();
+          if (bounds) {
+            fitToContentViewBox(bounds, padding);
+          }
+        },
+        setZoom: (zoomLevel) => {
+          const centerX = controlledViewBox.x + controlledViewBox.width / 2;
+          const centerY = controlledViewBox.y + controlledViewBox.height / 2;
+          const newWidth = diagram.viewBox.width / zoomLevel;
+          const newHeight = diagram.viewBox.height / zoomLevel;
+          setViewBox({
+            x: centerX - newWidth / 2,
+            y: centerY - newHeight / 2,
+            width: newWidth,
+            height: newHeight
+          });
+        },
+        getZoom: () => {
+          return diagram.viewBox.width / controlledViewBox.width;
+        }
+      };
+      onMounted(controls);
+    }
+  }, [
+    onMounted,
+    calculateContentBounds,
+    fitToContentViewBox,
+    setViewBox,
+    controlledViewBox,
+    diagram.viewBox
+  ]);
   const { selection, selectNode, selectPipe, clearSelection } = useSelection({
     multiSelect: features.multiSelect ?? true,
     onSelectionChange