beta. Modbus fixed and tested

web/src/components/TrendChart.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { jsPDF } from "jspdf";
 import * as XLSX from "xlsx";
 import {
@@ -144,6 +144,7 @@ export default function TrendChart({
     if (event.button !== 0) {
       return;
     }
+    event.preventDefault();
     const mapped = mapDragToDomain(event.clientX, event.clientY);
     if (!mapped) {
       return;
@@ -151,36 +152,54 @@ export default function TrendChart({
     setDragBox({ start: mapped, end: mapped });
   };
 
-  const handleMouseMove = (event) => {
-    if (!dragBox) {
-      return;
-    }
-    const mapped = mapDragToDomain(event.clientX, event.clientY);
+  const updateDragBox = (clientX, clientY) => {
+    const mapped = mapDragToDomain(clientX, clientY);
     if (!mapped) {
       return;
     }
     setDragBox((current) => current ? { ...current, end: mapped } : current);
   };
 
-  const handleMouseUp = () => {
-    if (!dragBox) {
+  const finalizeDragBox = (box) => {
+    if (!box) {
       return;
     }
 
-    const deltaX = Math.abs(dragBox.end.xPixel - dragBox.start.xPixel);
-    const deltaY = Math.abs(dragBox.end.yPixel - dragBox.start.yPixel);
+    const deltaX = Math.abs(box.end.xPixel - box.start.xPixel);
+    const deltaY = Math.abs(box.end.yPixel - box.start.yPixel);
     if (deltaX < 12 || deltaY < 12) {
       setDragBox(null);
       return;
     }
 
     setZoomDomain({
-      x: [Math.min(dragBox.start.xValue, dragBox.end.xValue), Math.max(dragBox.start.xValue, dragBox.end.xValue)],
-      y: [Math.min(dragBox.start.yValue, dragBox.end.yValue), Math.max(dragBox.start.yValue, dragBox.end.yValue)],
+      x: [Math.min(box.start.xValue, box.end.xValue), Math.max(box.start.xValue, box.end.xValue)],
+      y: [Math.min(box.start.yValue, box.end.yValue), Math.max(box.start.yValue, box.end.yValue)],
     });
     setDragBox(null);
   };
 
+  useEffect(() => {
+    if (!dragBox) {
+      return undefined;
+    }
+
+    const handleWindowMouseMove = (event) => {
+      updateDragBox(event.clientX, event.clientY);
+    };
+
+    const handleWindowMouseUp = () => {
+      finalizeDragBox(dragBox);
+    };
+
+    window.addEventListener("mousemove", handleWindowMouseMove);
+    window.addEventListener("mouseup", handleWindowMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleWindowMouseMove);
+      window.removeEventListener("mouseup", handleWindowMouseUp);
+    };
+  }, [dragBox, xDomain, yDomain]);
+
   const resetZoom = () => {
     setZoomDomain(null);
   };
@@ -367,9 +386,6 @@ export default function TrendChart({
         ref={wrapperRef}
         className={dragBox ? "chart-wrapper dragging" : "chart-wrapper"}
         onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseUp}
       >
         <div ref={chartHostRef} className="chart-host">
           <ResponsiveContainer width="100%" height={expanded ? 680 : compact ? 280 : 360}>