@procaaso/alphinity-ui-components 1.0.2 → 1.0.3

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
             }
           )
@@ -3635,21 +3636,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 +4094,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: [