script

mui · Oct 30, 2024 · 481689c · 481689c
1 parent db0e00b
commit 481689c
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 24 deletions.
diff --git a/docs/data/charts/tooltip/CustomAxisTooltip.js b/docs/data/charts/tooltip/CustomAxisTooltip.js
@@ -5,12 +5,11 @@ import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import { useAxisTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useSvgRef } from '@mui/x-charts/hooks';
-import { generateVirtualElement } from './generateVirtualElement';
 
 function usePointer() {
   const svgRef = useSvgRef();
   const popperRef = React.useRef(null);
-  const virtualElement = React.useRef(generateVirtualElement({ x: 0, y: 0 }));
+  const positionRef = React.useRef({ x: 0, y: 0 });
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [pointer, setPointer] = React.useState({
@@ -43,10 +42,10 @@ function usePointer() {
     };
 
     const handleMove = (event) => {
-      virtualElement.current = generateVirtualElement({
+      positionRef.current = {
         x: event.clientX,
         y: event.clientY,
-      });
+      };
       popperRef.current?.update();
     };
 
@@ -61,7 +60,23 @@ function usePointer() {
     };
   }, [svgRef]);
 
-  return { ...pointer, popperRef, anchorEl: virtualElement.current };
+  return {
+    ...pointer,
+    popperRef,
+    anchorEl: {
+      getBoundingClientRect: () => ({
+        x: positionRef.current.x,
+        y: positionRef.current.y,
+        top: positionRef.current.y,
+        left: positionRef.current.x,
+        right: positionRef.current.x,
+        bottom: positionRef.current.y,
+        width: 0,
+        height: 0,
+        toJSON: () => '',
+      }),
+    },
+  };
 }
 
 export function CustomAxisTooltip() {

diff --git a/docs/data/charts/tooltip/CustomItemTooltip.js b/docs/data/charts/tooltip/CustomItemTooltip.js
@@ -6,12 +6,11 @@ import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useSvgRef } from '@mui/x-charts/hooks';
-import { generateVirtualElement } from './generateVirtualElement';
 
 function usePointer() {
   const svgRef = useSvgRef();
   const popperRef = React.useRef(null);
-  const virtualElement = React.useRef(generateVirtualElement({ x: 0, y: 0 }));
+  const positionRef = React.useRef({ x: 0, y: 0 });
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [pointer, setPointer] = React.useState({
@@ -44,10 +43,10 @@ function usePointer() {
     };
 
     const handleMove = (event) => {
-      virtualElement.current = generateVirtualElement({
+      positionRef.current = {
         x: event.clientX,
         y: event.clientY,
-      });
+      };
       popperRef.current?.update();
     };
 
@@ -62,7 +61,23 @@ function usePointer() {
     };
   }, [svgRef]);
 
-  return { ...pointer, popperRef, anchorEl: virtualElement.current };
+  return {
+    ...pointer,
+    popperRef,
+    anchorEl: {
+      getBoundingClientRect: () => ({
+        x: positionRef.current.x,
+        y: positionRef.current.y,
+        top: positionRef.current.y,
+        left: positionRef.current.x,
+        right: positionRef.current.x,
+        bottom: positionRef.current.y,
+        width: 0,
+        height: 0,
+        toJSON: () => '',
+      }),
+    },
+  };
 }
 
 export function CustomItemTooltip() {

diff --git a/docs/data/charts/tooltip/ItemTooltip.js b/docs/data/charts/tooltip/ItemTooltip.js
@@ -4,12 +4,11 @@ import Popper from '@mui/material/Popper';
 import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useSvgRef } from '@mui/x-charts/hooks';
 import { CustomItemTooltipContent } from './CustomItemTooltipContent';
-import { generateVirtualElement } from './generateVirtualElement';
 
 function usePointer() {
   const svgRef = useSvgRef();
   const popperRef = React.useRef(null);
-  const virtualElement = React.useRef(generateVirtualElement({ x: 0, y: 0 }));
+  const positionRef = React.useRef({ x: 0, y: 0 });
 
   // Use a ref to avoid rerendering on every mousemove event.
   const [pointer, setPointer] = React.useState({
@@ -42,10 +41,10 @@ function usePointer() {
     };
 
     const handleMove = (event) => {
-      virtualElement.current = generateVirtualElement({
+      positionRef.current = {
         x: event.clientX,
         y: event.clientY,
-      });
+      };
       popperRef.current?.update();
     };
 
@@ -60,7 +59,23 @@ function usePointer() {
     };
   }, [svgRef]);
 
-  return { ...pointer, popperRef, anchorEl: virtualElement.current };
+  return {
+    ...pointer,
+    popperRef,
+    anchorEl: {
+      getBoundingClientRect: () => ({
+        x: positionRef.current.x,
+        y: positionRef.current.y,
+        top: positionRef.current.y,
+        left: positionRef.current.x,
+        right: positionRef.current.x,
+        bottom: positionRef.current.y,
+        width: 0,
+        height: 0,
+        toJSON: () => '',
+      }),
+    },
+  };
 }
 
 export function ItemTooltip() {

diff --git a/docs/data/charts/tooltip/ItemTooltipFixedY.js b/docs/data/charts/tooltip/ItemTooltipFixedY.js
@@ -4,7 +4,6 @@ import Popper from '@mui/material/Popper';
 import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useDrawingArea, useSvgRef } from '@mui/x-charts/hooks';
 import { CustomItemTooltipContent } from './CustomItemTooltipContent';
-import { generateVirtualElement } from './generateVirtualElement';
 
 function usePointer() {
   const svgRef = useSvgRef();
@@ -56,7 +55,7 @@ export function ItemTooltipFixedY() {
   const { isActive } = usePointer();
 
   const popperRef = React.useRef(null);
-  const virtualElement = React.useRef(generateVirtualElement({ x: 0, y: 0 }));
+  const positionRef = React.useRef({ x: 0, y: 0 });
   const svgRef = useSvgRef(); // Get the ref of the <svg/> component.
   const drawingArea = useDrawingArea(); // Get the dimensions of the chart inside the <svg/>.
 
@@ -67,11 +66,10 @@ export function ItemTooltipFixedY() {
     }
 
     const handleMove = (event) => {
-      virtualElement.current = generateVirtualElement({
+      positionRef.current = {
         x: event.clientX,
-        // Add the y-coordinate of the <svg/> to the to margin between the <svg/> and the drawing area
-        y: svgRef.current.getBoundingClientRect().top + drawingArea.top,
-      });
+        y: event.clientY,
+      };
       popperRef.current?.update();
     };
 
@@ -96,7 +94,19 @@ export function ItemTooltipFixedY() {
         }}
         open
         placement="top"
-        anchorEl={virtualElement.current}
+        anchorEl={{
+          getBoundingClientRect: () => ({
+            x: positionRef.current.x,
+            y: positionRef.current.y,
+            top: positionRef.current.y,
+            left: positionRef.current.x,
+            right: positionRef.current.x,
+            bottom: positionRef.current.y,
+            width: 0,
+            height: 0,
+            toJSON: () => '',
+          }),
+        }}
         popperRef={popperRef}
       >
         <CustomItemTooltipContent {...tooltipData} />

diff --git a/docs/data/charts/tooltip/ItemTooltipTopElement.js b/docs/data/charts/tooltip/ItemTooltipTopElement.js
@@ -5,7 +5,6 @@ import Popper from '@mui/material/Popper';
 import { useItemTooltip } from '@mui/x-charts/ChartsTooltip';
 import { useSvgRef, useXAxis, useXScale, useYScale } from '@mui/x-charts/hooks';
 import { CustomItemTooltipContent } from './CustomItemTooltipContent';
-import { generateVirtualElement } from './generateVirtualElement';
 
 function usePointer() {
   const svgRef = useSvgRef();
@@ -102,7 +101,19 @@ export function ItemTooltipTopElement() {
         }}
         open
         placement="top"
-        anchorEl={generateVirtualElement(tooltipPosition)}
+        anchorEl={{
+          getBoundingClientRect: () => ({
+            x: tooltipPosition.x,
+            y: tooltipPosition.y,
+            top: tooltipPosition.y,
+            left: tooltipPosition.x,
+            right: tooltipPosition.x,
+            bottom: tooltipPosition.y,
+            width: 0,
+            height: 0,
+            toJSON: () => '',
+          }),
+        }}
       >
         <CustomItemTooltipContent {...tooltipData} />
       </Popper>