@procaaso/alphinity-ui-components 1.0.2 → 1.0.4

package/README.md

@@ -18,33 +18,20 @@ function HMIPanel() {
   const [temperature, setTemperature] = useState(72.5);
   const [pressure, setPressure] = useState(14.7);
   const [systemStatus, setSystemStatus] = useState('normal');
-  
+
   return (
     <div className="p-4 space-y-4">
       {/* System status indicators */}
       <div className="flex gap-4 items-center">
-        <StatusIndicator 
-          status="normal" 
-          label="Power" 
-          size="medium"
-          led={true}
-        />
-        <StatusIndicator 
-          status="alarm" 
-          label="Temperature Alert" 
+        <StatusIndicator status="normal" label="Power" size="medium" led={true} />
+        <StatusIndicator
+          status="alarm"
+          label="Temperature Alert"
           animation="pulse"
           shape="circle"
         />
-        <StatusIndicator 
-          status="warning" 
-          label="Maintenance Due" 
-          animation="blink"
-        />
-        <StatusIndicator 
-          status="active" 
-          label="Process Running" 
-          size="large"
-        />
+        <StatusIndicator status="warning" label="Maintenance Due" animation="blink" />
+        <StatusIndicator status="active" label="Process Running" size="large" />
       </div>
 
       {/* Process control values */}
@@ -58,7 +45,7 @@ function HMIPanel() {
         precision={1}
         status="normal"
       />
-      
+
       <ValueEntry
         value={pressure}
         onChange={setPressure}
@@ -67,7 +54,7 @@ function HMIPanel() {
         status="warning"
         readOnly
       />
-      
+
       {/* Control buttons */}
       <Button variant="primary" onClick={() => console.log('Start process')}>
         Start

package/dist/index.cjs

@@ -2055,9 +2055,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
             }
           )
@@ -2437,6 +2438,34 @@ function useViewBox(options) {
       };
     });
   }, [initialViewBox, maxZoom]);
+  const fitToContent = (0, import_react8.useCallback)((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]);
   (0, import_react8.useEffect)(() => {
     if (!enableZoom || !svgRef.current) return;
     const svg = svgRef.current;
@@ -2668,6 +2697,8 @@ function useViewBox(options) {
     resetViewBox,
     zoomIn,
     zoomOut,
+    fitToContent,
+    setViewBox,
     screenToWorld,
     svgRef
   };
@@ -3322,6 +3353,7 @@ function PIDCanvas({
   onPaste,
   onSymbolDrop,
   onPipeCreated,
+  onMounted,
   telemetry,
   ...props
 }) {
@@ -3339,12 +3371,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 = (0, import_react13.useCallback)(() => {
+    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]);
+  (0, import_react13.useEffect)(() => {
+    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
@@ -3635,21 +3727,32 @@ function PIDCanvas({
           onDrop: handleDrop,
           onDragLeave: handleDragLeave,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("defs", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            features.showGrid !== false ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("defs", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pattern", { id: "grid-minor", width: "5", height: "5", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M 5 0 L 0 0 0 5", fill: "none", stroke: "#e5e7eb", strokeWidth: "0.5" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("pattern", { id: "grid-major", width: "25", height: "25", patternUnits: "userSpaceOnUse", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("rect", { width: "25", height: "25", fill: "url(#grid-minor)" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M 25 0 L 0 0 0 25", fill: "none", stroke: "#d1d5db", strokeWidth: "1" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                "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__ */ (0, import_jsx_runtime16.jsx)(
               "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__ */ (0, import_jsx_runtime16.jsx)(
@@ -4082,6 +4185,54 @@ function NodeConfigPanel({
             }
           )
         ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Label Font Size:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "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__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { style: { fontSize: "0.75rem", display: "block", marginBottom: "4px" }, children: "Rotation (degrees):" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          "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__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { marginBottom: "20px" }, children: [