@procaaso/alphinity-ui-components 1.1.1 → 1.1.3

package/dist/index.cjs

@@ -36,6 +36,7 @@ __export(index_exports, {
   CardValue: () => CardValue,
   CircularGauge: () => CircularGauge,
   ControlPanel: () => ControlPanel,
+  DEFAULT_STATUS_COLORS: () => DEFAULT_STATUS_COLORS,
   DEFAULT_THRESHOLDS: () => DEFAULT_THRESHOLDS,
   DashboardCard: () => DashboardCard,
   DeviceConfigPanel: () => DeviceConfigPanel,
@@ -85,6 +86,7 @@ __export(index_exports, {
   overlayStyles: () => overlayStyles,
   registerSymbol: () => registerSymbol,
   registerSymbols: () => registerSymbols,
+  resolveStatusColor: () => resolveStatusColor,
   useDeviceConfigs: () => useDeviceConfigs,
   useDeviceControls: () => useDeviceControls,
   useDrag: () => useDrag,
@@ -996,6 +998,31 @@ var NodeControlsPanel = ({
 
 // src/components/DeviceControlPanel/DeviceControlPanel.tsx
 var import_react5 = require("react");
+
+// src/theme/statusColors.ts
+var DEFAULT_STATUS_COLORS = {
+  normal: { fill: "#888888", stroke: "#6b6b6b", bg: "#888888", text: "#ffffff", border: "#6b6b6b" },
+  warning: { fill: "#f59e0b", stroke: "#d97706", bg: "#FFD700", text: "#000000", border: "#d97706" },
+  alarm: { fill: "#ef4444", stroke: "#dc2626", bg: "#FF0000", text: "#ffffff", border: "#dc2626" },
+  fault: { fill: "#dc2626", stroke: "#b91c1c", bg: "#FF0000", text: "#ffffff", border: "#b91c1c" },
+  off: { fill: "#edeeef", stroke: "#000000", bg: "#666666", text: "#ffffff", border: "#4b5563" },
+  starting: { fill: "#90EE90", stroke: "#22c55e", bg: "#90EE90", text: "#000000", border: "#22c55e" },
+  stopping: { fill: "#FFD700", stroke: "#d97706", bg: "#FFD700", text: "#000000", border: "#d97706" }
+};
+var STATUS_ALIASES = {
+  running: "normal",
+  stopped: "off"
+};
+function resolveStatusColor(status, customMap) {
+  const raw = (status || "off").toLowerCase();
+  const key = STATUS_ALIASES[raw] ?? raw;
+  const defaults = DEFAULT_STATUS_COLORS[key] ?? DEFAULT_STATUS_COLORS.off;
+  const overrides = customMap?.[key];
+  if (!overrides) return defaults;
+  return { ...defaults, ...overrides };
+}
+
+// src/components/DeviceControlPanel/DeviceControlPanel.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function DeviceControlPanel({
   binding,
@@ -1070,23 +1097,8 @@ function DeviceControlPanel({
   const textColor = binding.theme?.textColor || "#000000";
   const mutedTextColor = "#666666";
   const selectedColor = "#b4d0fe";
-  const statusColors = {
-    normal: binding.theme?.statusColors?.normal || "#888888",
-    // Gray (no alarm)
-    warning: binding.theme?.statusColors?.warning || "#FFD700",
-    // Yellow
-    alarm: binding.theme?.statusColors?.alarm || "#FF0000",
-    // Red
-    fault: binding.theme?.statusColors?.fault || "#FF0000",
-    // Red
-    off: binding.theme?.statusColors?.off || "#666666",
-    // Dark gray
-    starting: binding.theme?.statusColors?.starting || "#90EE90",
-    // Light green
-    stopping: binding.theme?.statusColors?.stopping || "#FFD700"
-    // Yellow
-  };
-  const statusColor = statusColors[binding.state.status || "normal"];
+  const statusEntry = resolveStatusColor(binding.state.status, binding.theme?.statusColors);
+  const statusColor = statusEntry.bg;
   const handleModeChange = (mode) => {
     onModeChange?.(mode);
   };
@@ -1373,7 +1385,10 @@ function DeviceControlPanel({
           /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "div",
             {
-              onClick: () => setShowModeModal(true),
+              onClick: () => {
+                setPendingMode(currentMode);
+                setShowModeModal(true);
+              },
               style: {
                 padding: "12px",
                 backgroundColor: surfaceColor,
@@ -4113,7 +4128,8 @@ function NodeRenderer({
   onNodeDragStart,
   draggingNodeId,
   dragOffset = { x: 0, y: 0 },
-  enableDrag = false
+  enableDrag = false,
+  statusColorMap
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { id: "layer-nodes", children: nodes2.filter((node) => node.visible !== false).map((node) => {
     const symbol = getSymbolDefinition(node.symbolId);
@@ -4172,24 +4188,9 @@ function NodeRenderer({
         `translate(${centerX}, ${centerY}) scale(${scaleX}, ${scaleY}) translate(${-centerX}, ${-centerY})`
       );
     }
-    const getStatusColor = (status) => {
-      switch (status) {
-        case "running":
-          return "#22c55e";
-        // Green
-        case "alarm":
-          return "#ef4444";
-        // Red
-        case "warning":
-          return "#f59e0b";
-        // Orange
-        case "stopped":
-        default:
-          return "#edeeef";
-      }
-    };
-    const fillColor = node.customColors?.fill ?? getStatusColor(node.status);
-    const strokeColor = node.customColors?.stroke ?? "rgb(0, 0, 0)";
+    const statusEntry = resolveStatusColor(node.status, statusColorMap);
+    const fillColor = node.customColors?.fill ?? statusEntry.fill;
+    const strokeColor = node.customColors?.stroke ?? statusEntry.stroke;
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "g",
       {
@@ -4453,7 +4454,8 @@ function DataOverlay({
   x,
   y,
   telemetry,
-  scale = 1
+  scale = 1,
+  statusColorMap
 }) {
   const { value, display, history } = telemetry;
   const showValue = display?.showValue ?? true;
@@ -4478,21 +4480,9 @@ function DataOverlay({
     }
     return val.toString();
   };
-  const defaultStatusColors = {
-    normal: { bg: "#10b981", text: "#ffffff", border: "#059669" },
-    warning: { bg: "#f59e0b", text: "#ffffff", border: "#d97706" },
-    alarm: { bg: "#ef4444", text: "#ffffff", border: "#dc2626" },
-    fault: { bg: "#dc2626", text: "#ffffff", border: "#b91c1c" },
-    off: { bg: "#6b7280", text: "#ffffff", border: "#4b5563" }
-  };
-  const getStatusColors = () => {
-    const customColor = telemetry.statusColors?.[value.status];
-    if (customColor) {
-      return { bg: customColor, text: "#ffffff", border: customColor };
-    }
-    return defaultStatusColors[value.status] || defaultStatusColors.normal;
-  };
-  const statusColors = getStatusColors();
+  const resolvedEntry = resolveStatusColor(value.status, statusColorMap);
+  const customColor = telemetry.statusColors?.[value.status];
+  const statusColors = customColor ? { bg: customColor, text: "#ffffff", border: customColor } : { bg: resolvedEntry.bg, text: resolvedEntry.text, border: resolvedEntry.border };
   const colors = backgroundColor && backgroundColor !== "status" ? { bg: backgroundColor, text: textColor || "#ffffff", border: backgroundColor } : statusColors;
   const finalTextColor = textColor || colors.text;
   const formattedValue = formatValue(value.value);
@@ -5763,6 +5753,7 @@ function PIDCanvas({
   onPipeCreated,
   onMounted,
   telemetry,
+  statusColorMap,
   ...props
 }) {
   const [localDiagram, setLocalDiagram] = (0, import_react16.useState)(diagram);
@@ -6416,7 +6407,8 @@ function PIDCanvas({
                   enableDrag: dragEnabled && !isConnecting,
                   onNodeDragStart: dragEnabled && !isConnecting ? handleNodeDragStart : void 0,
                   draggingNodeId: dragState.draggedId,
-                  dragOffset: dragState.offset
+                  dragOffset: dragState.offset,
+                  statusColorMap
                 }
               ),
               (features.editPipeRoutes ?? false) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -6450,7 +6442,8 @@ function PIDCanvas({
                     x: overlayX,
                     y: overlayY,
                     telemetry: binding,
-                    scale: features.telemetryScale ?? 1
+                    scale: features.telemetryScale ?? 1,
+                    statusColorMap
                   },
                   `telemetry-${node.id}`
                 );
@@ -8946,6 +8939,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   CardValue,
   CircularGauge,
   ControlPanel,
+  DEFAULT_STATUS_COLORS,
   DEFAULT_THRESHOLDS,
   DashboardCard,
   DeviceConfigPanel,
@@ -8995,6 +8989,7 @@ function useSimulation(telemetry, updateTelemetryBatch, options = {}) {
   overlayStyles,
   registerSymbol,
   registerSymbols,
+  resolveStatusColor,
   useDeviceConfigs,
   useDeviceControls,
   useDrag,