@procaaso/alphinity-ui-components 1.8.0 → 1.8.2

package/dist/index.js

@@ -3278,7 +3278,10 @@ var ThemeToggle = ({
 };
 
 // src/components/PIDCanvas/PIDCanvas.tsx
-import { useCallback as useCallback8, useState as useState14, useEffect as useEffect12, useRef as useRef6 } from "react";
+import React13, { useCallback as useCallback8, useState as useState14, useEffect as useEffect12, useRef as useRef6 } from "react";
+
+// src/components/PIDCanvas/NodeRenderer.tsx
+import React9 from "react";
 
 // src/diagram/symbols/mockSymbolLibrary.ts
 var mockSymbolLibrary = {
@@ -4500,7 +4503,7 @@ function getAvailableSymbols() {
 
 // src/components/PIDCanvas/NodeRenderer.tsx
 import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-function NodeRenderer({
+function NodeRendererImpl({
   nodes: nodes2,
   selectedNodeIds,
   onNodeClick,
@@ -4646,10 +4649,12 @@ function NodeRenderer({
     );
   }) });
 }
+var NodeRenderer = React9.memo(NodeRendererImpl);
 
 // src/components/PIDCanvas/PipeRenderer.tsx
+import React10 from "react";
 import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
-function PipeRenderer({
+function PipeRendererImpl({
   pipes,
   selectedPipeIds,
   onPipeClick,
@@ -4826,10 +4831,36 @@ function PipeRenderer({
     );
   }) });
 }
+var PipeRenderer = React10.memo(PipeRendererImpl);
 
 // src/components/PIDCanvas/DataOverlay.tsx
+import React11 from "react";
 import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
-function DataOverlay({
+var PULSE_KEYFRAME_ID = "pid-data-overlay-pulse-keyframes";
+var PULSE_ANIMATION = "pid-data-overlay-pulse 1.5s ease-in-out infinite";
+function ensurePulseKeyframes() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(PULSE_KEYFRAME_ID)) return;
+  const style = document.createElement("style");
+  style.id = PULSE_KEYFRAME_ID;
+  style.textContent = "@keyframes pid-data-overlay-pulse{0%{opacity:.9}50%{opacity:.3}100%{opacity:.9}}";
+  document.head.appendChild(style);
+}
+function renderStatusDot(cx, cy, scale, fill) {
+  ensurePulseKeyframes();
+  return /* @__PURE__ */ jsx18(
+    "circle",
+    {
+      className: "pid-data-overlay-status-dot",
+      cx: cx + 35 * scale,
+      cy: cy - 18 * scale,
+      r: 3 * scale,
+      fill,
+      style: { animation: PULSE_ANIMATION }
+    }
+  );
+}
+function DataOverlayImpl({
   nodeId,
   x,
   y,
@@ -4849,6 +4880,24 @@ function DataOverlay({
   const backgroundColor = display?.backgroundColor;
   const offsetX = display?.offsetX ?? 0;
   const offsetY = display?.offsetY ?? 0;
+  const sparklinePath = React11.useMemo(() => {
+    if (!showSparkline || !history || history.length < 2) return "";
+    const width = 70 * scale;
+    const height = 20 * scale;
+    const padding = 5 * scale;
+    const effectiveWidth = width - padding * 2;
+    const effectiveHeight = height - padding * 2;
+    const hasEuRange = scaling?.euLow !== void 0 && scaling?.euHigh !== void 0 && scaling.euHigh !== scaling.euLow;
+    const min = hasEuRange ? scaling.euLow : Math.min(...history);
+    const max = hasEuRange ? scaling.euHigh : Math.max(...history);
+    const range = max - min || 1;
+    const points = history.map((val, i) => {
+      const xPos = i / (history.length - 1) * effectiveWidth + padding;
+      const yPos = height - padding - (val - min) / range * effectiveHeight;
+      return `${xPos.toFixed(2)},${yPos.toFixed(2)}`;
+    });
+    return `M ${points.join(" L ")}`;
+  }, [showSparkline, history, scaling, scale]);
   if (!showValue) {
     return /* @__PURE__ */ jsx18(Fragment6, {});
   }
@@ -4868,24 +4917,6 @@ function DataOverlay({
   const finalTextColor = textColor || colors.text;
   const formattedValue = formatValue(value.value);
   const displayText = unit ? `${formattedValue} ${unit}` : formattedValue;
-  const sparklinePath = (() => {
-    if (!showSparkline || !history || history.length < 2) return "";
-    const width = 70 * scale;
-    const height = 20 * scale;
-    const padding = 5 * scale;
-    const effectiveWidth = width - padding * 2;
-    const effectiveHeight = height - padding * 2;
-    const hasEuRange = scaling?.euLow !== void 0 && scaling?.euHigh !== void 0 && scaling.euHigh !== scaling.euLow;
-    const min = hasEuRange ? scaling.euLow : Math.min(...history);
-    const max = hasEuRange ? scaling.euHigh : Math.max(...history);
-    const range = max - min || 1;
-    const points = history.map((val, i) => {
-      const xPos = i / (history.length - 1) * effectiveWidth + padding;
-      const yPos = height - padding - (val - min) / range * effectiveHeight;
-      return `${xPos.toFixed(2)},${yPos.toFixed(2)}`;
-    });
-    return `M ${points.join(" L ")}`;
-  })();
   const hasSparkline = showSparkline && sparklinePath;
   const overlayHeight = (label ? hasSparkline ? 55 : 30 : hasSparkline ? 47 : 22) * scale;
   const overlayWidth = 80 * scale;
@@ -4933,25 +4964,7 @@ function DataOverlay({
         children: displayText
       }
     ),
-    showStatus && value.status !== "normal" && /* @__PURE__ */ jsx18(
-      "circle",
-      {
-        cx: displayX + 35 * scale,
-        cy: displayY - 18 * scale,
-        r: 3 * scale,
-        fill: finalTextColor,
-        opacity: "0.9",
-        children: /* @__PURE__ */ jsx18(
-          "animate",
-          {
-            attributeName: "opacity",
-            values: "0.9;0.3;0.9",
-            dur: "1.5s",
-            repeatCount: "indefinite"
-          }
-        )
-      }
-    ),
+    showStatus && value.status !== "normal" && renderStatusDot(displayX, displayY, scale, finalTextColor),
     value.quality !== void 0 && value.quality < 100 && /* @__PURE__ */ jsxs14(
       "text",
       {
@@ -4983,6 +4996,7 @@ function DataOverlay({
     ) })
   ] });
 }
+var DataOverlay = React11.memo(DataOverlayImpl);
 
 // src/components/PIDCanvas/PositionPanel.tsx
 import { useState as useState9, useEffect as useEffect6 } from "react";
@@ -6111,18 +6125,19 @@ function nodeHasPort(node, portId) {
 
 // src/components/PIDCanvas/PIDCanvas.tsx
 import { Fragment as Fragment7, jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
-function PIDCanvas({
+var DEFAULT_FEATURES = {
+  pan: true,
+  zoom: true,
+  selection: false,
+  multiSelect: true,
+  telemetry: false,
+  dragNodes: false
+};
+function PIDCanvasImpl({
   diagram,
   className = "",
   style,
-  features = {
-    pan: true,
-    zoom: true,
-    selection: false,
-    multiSelect: true,
-    telemetry: false,
-    dragNodes: false
-  },
+  features = DEFAULT_FEATURES,
   onSelectionChange,
   onNodeClick,
   onPipeClick,
@@ -6583,52 +6598,71 @@ function PIDCanvas({
     if (!selectionEnabled) return;
     onPaste?.();
   }, [selectionEnabled, onPaste]);
-  const handleNodeDoubleClick = (nodeId, event) => {
-    if (!selectionEnabled) return;
-    console.log("Node double-clicked:", nodeId);
-    selectNode(nodeId, event.ctrlKey || event.metaKey);
-  };
+  const handleNodeDoubleClick = useCallback8(
+    (nodeId, event) => {
+      if (!selectionEnabled) return;
+      console.log("Node double-clicked:", nodeId);
+      selectNode(nodeId, event.ctrlKey || event.metaKey);
+    },
+    [selectionEnabled, selectNode]
+  );
   useKeyboardShortcuts({
     enabled: features.keyboardShortcuts ?? false,
     onDelete: handleDelete,
     onCopy: handleCopy,
     onPaste: handlePaste
   });
-  const handleNodeClick = (nodeId, event) => {
-    const connectionModeEnabled = features.connectionMode ?? false;
-    if (connectionModeEnabled && isConnecting) {
-      if (connectionSource && connectionSource !== nodeId) {
-        onPipeCreated?.(
-          connectionSource,
-          nodeId,
-          connectionSourcePort || void 0,
-          hoveredPort || void 0
-        );
-        setIsConnecting(false);
-        setConnectionSource(null);
-        setConnectionSourcePort(null);
-        setConnectionCursor(null);
-        setHoveredPort(null);
+  const handleNodeClick = useCallback8(
+    (nodeId, event) => {
+      const connectionModeEnabled = features.connectionMode ?? false;
+      if (connectionModeEnabled && isConnecting) {
+        if (connectionSource && connectionSource !== nodeId) {
+          onPipeCreated?.(
+            connectionSource,
+            nodeId,
+            connectionSourcePort || void 0,
+            hoveredPort || void 0
+          );
+          setIsConnecting(false);
+          setConnectionSource(null);
+          setConnectionSourcePort(null);
+          setConnectionCursor(null);
+          setHoveredPort(null);
+        }
+        return;
       }
-      return;
-    }
-    if (connectionModeEnabled && !isConnecting) {
-      setIsConnecting(true);
-      setConnectionSource(nodeId);
-      setConnectionSourcePort(hoveredPort);
-      return;
-    }
-    if (selectionEnabled) {
-      selectNode(nodeId, event.ctrlKey || event.metaKey);
-    }
-    onNodeClick?.(nodeId);
-  };
-  const handlePipeClick = (pipeId, event) => {
-    if (selectionEnabled) {
-      selectPipe(pipeId, event.ctrlKey || event.metaKey);
-    }
-    onPipeClick?.(pipeId);
-  };
+      if (connectionModeEnabled && !isConnecting) {
+        setIsConnecting(true);
+        setConnectionSource(nodeId);
+        setConnectionSourcePort(hoveredPort);
+        return;
+      }
+      if (selectionEnabled) {
+        selectNode(nodeId, event.ctrlKey || event.metaKey);
+      }
+      onNodeClick?.(nodeId);
+    },
+    [
+      features.connectionMode,
+      isConnecting,
+      connectionSource,
+      connectionSourcePort,
+      hoveredPort,
+      onPipeCreated,
+      selectionEnabled,
+      selectNode,
+      onNodeClick
+    ]
+  );
+  const handlePipeClick = useCallback8(
+    (pipeId, event) => {
+      if (selectionEnabled) {
+        selectPipe(pipeId, event.ctrlKey || event.metaKey);
+      }
+      onPipeClick?.(pipeId);
+    },
+    [selectionEnabled, selectPipe, onPipeClick]
+  );
   const handleCanvasClick = (e) => {
     const target = e.target;
     if (target.closest(".pipe-route-point")) {
@@ -6976,6 +7010,7 @@ function PIDCanvas({
     }
   );
 }
+var PIDCanvas = React13.memo(PIDCanvasImpl);
 
 // src/components/SymbolLibrary/SymbolLibrary.tsx
 import { useState as useState15 } from "react";
@@ -8617,14 +8652,17 @@ function DeviceConfigPanel({
     const currentTimestamp = binding?.state.lastSaved || 0;
     if (binding?.state.lastSaveResult && currentTimestamp !== lastResultTimestampRef.current) {
       lastResultTimestampRef.current = currentTimestamp;
+      let hideTimer;
       const showTimer = setTimeout(() => {
         setShowToast(true);
-        const hideTimer = setTimeout(() => {
+        hideTimer = setTimeout(() => {
           setShowToast(false);
         }, toastDuration);
-        return () => clearTimeout(hideTimer);
       }, 0);
-      return () => clearTimeout(showTimer);
+      return () => {
+        clearTimeout(showTimer);
+        if (hideTimer) clearTimeout(hideTimer);
+      };
     }
   }, [binding?.state.lastSaveResult, binding?.state.lastSaved, toastDuration]);
   const parametersBySection = useMemo(() => {