@procaaso/alphinity-ui-components 1.0.2 → 1.0.4

package/dist/index.d.cts

@@ -447,6 +447,7 @@ interface NodeInstance {
         x: number;
         y: number;
     };
+    labelFontSize?: number;
     metadata?: Record<string, unknown>;
 }
 interface Transform {
@@ -541,6 +542,7 @@ interface DiagramMetadata {
     modified?: string;
     tags?: string[];
     description?: string;
+    backgroundColor?: string;
 }
 
 interface SymbolDefinition {
@@ -681,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;
@@ -888,6 +899,10 @@ interface PIDCanvasFeatures {
     allowSymbolDrop?: boolean;
     /** Enable connection drawing mode to create pipes between nodes (default: false) */
     connectionMode?: boolean;
+    /** Show background grid (default: true) */
+    showGrid?: boolean;
+    /** Background color for canvas (default: '#ffffff') */
+    backgroundColor?: string;
 }
 interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
     /** The diagram to render */
@@ -921,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
  *
@@ -933,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

@@ -447,6 +447,7 @@ interface NodeInstance {
         x: number;
         y: number;
     };
+    labelFontSize?: number;
     metadata?: Record<string, unknown>;
 }
 interface Transform {
@@ -541,6 +542,7 @@ interface DiagramMetadata {
     modified?: string;
     tags?: string[];
     description?: string;
+    backgroundColor?: string;
 }
 
 interface SymbolDefinition {
@@ -681,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;
@@ -888,6 +899,10 @@ interface PIDCanvasFeatures {
     allowSymbolDrop?: boolean;
     /** Enable connection drawing mode to create pipes between nodes (default: false) */
     connectionMode?: boolean;
+    /** Show background grid (default: true) */
+    showGrid?: boolean;
+    /** Background color for canvas (default: '#ffffff') */
+    backgroundColor?: string;
 }
 interface PIDCanvasProps extends react__default.HTMLAttributes<HTMLDivElement> {
     /** The diagram to render */
@@ -921,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
  *
@@ -933,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

@@ -1964,9 +1964,10 @@ function NodeRenderer({
               x: symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0),
               y: symbol.viewBox.height + 12 + (node.labelOffset?.y ?? 0),
               textAnchor: "middle",
-              fontSize: "10",
+              fontSize: node.labelFontSize ?? 10,
               fontWeight: "600",
               fill: isSelected ? "#3b82f6" : "#1f2937",
+              transform: node.transform.rotation ? `rotate(${-node.transform.rotation}, ${symbol.viewBox.width / 2 + (node.labelOffset?.x ?? 0)}, ${symbol.viewBox.height + 12 + (node.labelOffset?.y ?? 0)})` : void 0,
               children: node.label || node.id
             }
           )
@@ -2346,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;
@@ -2577,6 +2606,8 @@ function useViewBox(options) {
     resetViewBox,
     zoomIn,
     zoomOut,
+    fitToContent,
+    setViewBox,
     screenToWorld,
     svgRef
   };
@@ -3231,6 +3262,7 @@ function PIDCanvas({
   onPaste,
   onSymbolDrop,
   onPipeCreated,
+  onMounted,
   telemetry,
   ...props
 }) {
@@ -3248,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
@@ -3544,21 +3636,32 @@ function PIDCanvas({
           onDrop: handleDrop,
           onDragLeave: handleDragLeave,
           children: [
-            /* @__PURE__ */ jsxs12("defs", { children: [
-              /* @__PURE__ */ jsx16("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx16("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
-              /* @__PURE__ */ jsxs12("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
-                /* @__PURE__ */ jsx16("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
-                /* @__PURE__ */ jsx16("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx16(
+            features.showGrid !== false ? /* @__PURE__ */ jsxs12(Fragment5, { children: [
+              /* @__PURE__ */ jsxs12("defs", { children: [
+                /* @__PURE__ */ jsx16("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx16("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
+                /* @__PURE__ */ jsxs12("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
+                  /* @__PURE__ */ jsx16("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
+                  /* @__PURE__ */ jsx16("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx16(
+                "rect",
+                {
+                  x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
+                  y: Math.floor(viewBox.y / 25) * 25 - viewBox.height,
+                  width: Math.ceil(viewBox.width * 3 / 25) * 25,
+                  height: Math.ceil(viewBox.height * 3 / 25) * 25,
+                  fill: "url(#grid-major)"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx16(
               "rect",
               {
                 x: Math.floor(viewBox.x / 25) * 25 - viewBox.width,
                 y: Math.floor(viewBox.y / 25) * 25 - viewBox.height,
                 width: Math.ceil(viewBox.width * 3 / 25) * 25,
                 height: Math.ceil(viewBox.height * 3 / 25) * 25,
-                fill: "url(#grid-major)"
+                fill: features.backgroundColor ?? "#ffffff"
               }
             ),
             /* @__PURE__ */ jsx16(
@@ -3991,6 +4094,54 @@ function NodeConfigPanel({
             }
           )
         ] })
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
+        /* @__PURE__ */ jsx18(
+          "input",
+          {
+            type: "number",
+            min: "6",
+            max: "24",
+            value: node.labelFontSize ?? 10,
+            onChange: (e) => onUpdateNode({
+              labelFontSize: parseFloat(e.target.value) || 10
+            }),
+            style: {
+              width: "100%",
+              padding: "6px 8px",
+              borderRadius: "4px",
+              border: "1px solid #cbd5e1",
+              fontSize: "0.875rem"
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { children: [
+        /* @__PURE__ */ jsx18("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
+        /* @__PURE__ */ jsx18(
+          "input",
+          {
+            type: "number",
+            min: "0",
+            max: "360",
+            step: "15",
+            value: node.transform.rotation ?? 0,
+            onChange: (e) => onUpdateNode({
+              transform: {
+                ...node.transform,
+                rotation: parseFloat(e.target.value) || 0
+              }
+            }),
+            style: {
+              width: "100%",
+              padding: "6px 8px",
+              borderRadius: "4px",
+              border: "1px solid #cbd5e1",
+              fontSize: "0.875rem"
+            }
+          }
+        )
       ] })
     ] }),
     /* @__PURE__ */ jsxs14("div", { style: { marginBottom: "20px" }, children: [