Copy PR #191. Thanks to @guillaumeduboc

btd · Dec 27, 2024 · 2200fe7 · 2200fe7
1 parent 8bb980c
commit 2200fe7
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 86 deletions.
diff --git a/src/network/tooltip.tsx b/src/network/tooltip.tsx
@@ -50,12 +50,12 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({ node, visible }) =>
 
     if (pos.left + boundingRect.width > window.innerWidth) {
       // Shifting horizontally
-      pos.left = window.innerWidth - boundingRect.width;
+      pos.left = Math.max(0,window.innerWidth - boundingRect.width);
     }
 
     if (pos.top + boundingRect.height > window.innerHeight) {
       // Flipping vertically
-      pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+      pos.top = Math.max(0,mouseCoords.y - Tooltip_marginY - boundingRect.height);
     }
 
     setStyle(pos);

diff --git a/src/style/_base.scss b/src/style/_base.scss
@@ -61,8 +61,6 @@ main {
 
   padding: 5px;
 
-  white-space: nowrap;
-
   font-size: 0.875rem;
 
   background-color: var(--background-color);

diff --git a/src/treemap/tooltip.tsx b/src/treemap/tooltip.tsx
@@ -130,12 +130,12 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({
 
     if (pos.left + boundingRect.width > window.innerWidth) {
       // Shifting horizontally
-      pos.left = window.innerWidth - boundingRect.width;
+      pos.left = Math.max(0,window.innerWidth - boundingRect.width);
     }
 
     if (pos.top + boundingRect.height > window.innerHeight) {
       // Flipping vertically
-      pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+      pos.top = Math.max(0,mouseCoords.y - Tooltip_marginY - boundingRect.height);
     }
 
     setStyle(pos);

diff --git a/test/__snapshots__/e2e-rolldown.test.ts.snap b/test/__snapshots__/e2e-rolldown.test.ts.snap
@@ -70,7 +70,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -4781,7 +4780,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -9793,11 +9791,11 @@ var drawChart = (function (exports) {
             const boundingRect = ref.current.getBoundingClientRect();
             if (pos.left + boundingRect.width > window.innerWidth) {
                 // Shifting horizontally
-                pos.left = window.innerWidth - boundingRect.width;
+                pos.left = Math.max(0, window.innerWidth - boundingRect.width);
             }
             if (pos.top + boundingRect.height > window.innerHeight) {
                 // Flipping vertically
-                pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+                pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
             }
             setStyle(pos);
         };
@@ -10323,7 +10321,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -15328,7 +15325,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -18717,11 +18713,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };
@@ -20282,7 +20278,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -24987,7 +24982,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -29999,11 +29993,11 @@ var drawChart = (function (exports) {
             const boundingRect = ref.current.getBoundingClientRect();
             if (pos.left + boundingRect.width > window.innerWidth) {
                 // Shifting horizontally
-                pos.left = window.innerWidth - boundingRect.width;
+                pos.left = Math.max(0, window.innerWidth - boundingRect.width);
             }
             if (pos.top + boundingRect.height > window.innerHeight) {
                 // Flipping vertically
-                pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+                pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
             }
             setStyle(pos);
         };
@@ -30529,7 +30523,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -35534,7 +35527,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -38923,11 +38915,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };

diff --git a/test/__snapshots__/e2e.test.ts.snap b/test/__snapshots__/e2e.test.ts.snap
@@ -70,7 +70,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -4781,7 +4780,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -9793,11 +9791,11 @@ var drawChart = (function (exports) {
             const boundingRect = ref.current.getBoundingClientRect();
             if (pos.left + boundingRect.width > window.innerWidth) {
                 // Shifting horizontally
-                pos.left = window.innerWidth - boundingRect.width;
+                pos.left = Math.max(0, window.innerWidth - boundingRect.width);
             }
             if (pos.top + boundingRect.height > window.innerHeight) {
                 // Flipping vertically
-                pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+                pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
             }
             setStyle(pos);
         };
@@ -10324,7 +10322,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -15329,7 +15326,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -18718,11 +18714,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };
@@ -20283,7 +20279,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -24988,7 +24983,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -30000,11 +29994,11 @@ var drawChart = (function (exports) {
             const boundingRect = ref.current.getBoundingClientRect();
             if (pos.left + boundingRect.width > window.innerWidth) {
                 // Shifting horizontally
-                pos.left = window.innerWidth - boundingRect.width;
+                pos.left = Math.max(0, window.innerWidth - boundingRect.width);
             }
             if (pos.top + boundingRect.height > window.innerHeight) {
                 // Flipping vertically
-                pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+                pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
             }
             setStyle(pos);
         };
@@ -30531,7 +30525,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -35536,7 +35529,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -38925,11 +38917,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };

diff --git a/test/__snapshots__/gh59.test.ts.snap b/test/__snapshots__/gh59.test.ts.snap
@@ -70,7 +70,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -4786,7 +4785,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -9798,11 +9796,11 @@ var drawChart = (function (exports) {
             const boundingRect = ref.current.getBoundingClientRect();
             if (pos.left + boundingRect.width > window.innerWidth) {
                 // Shifting horizontally
-                pos.left = window.innerWidth - boundingRect.width;
+                pos.left = Math.max(0, window.innerWidth - boundingRect.width);
             }
             if (pos.top + boundingRect.height > window.innerHeight) {
                 // Flipping vertically
-                pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+                pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
             }
             setStyle(pos);
         };
@@ -10340,7 +10338,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -15345,7 +15342,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -18734,11 +18730,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };
@@ -20299,7 +20295,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -25007,7 +25002,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -30019,11 +30013,11 @@ var drawChart = (function (exports) {
             const boundingRect = ref.current.getBoundingClientRect();
             if (pos.left + boundingRect.width > window.innerWidth) {
                 // Shifting horizontally
-                pos.left = window.innerWidth - boundingRect.width;
+                pos.left = Math.max(0, window.innerWidth - boundingRect.width);
             }
             if (pos.top + boundingRect.height > window.innerHeight) {
                 // Flipping vertically
-                pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+                pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
             }
             setStyle(pos);
         };
@@ -30557,7 +30551,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -35562,7 +35555,6 @@ main {
   border: 2px solid;
   border-radius: 5px;
   padding: 5px;
-  white-space: nowrap;
   font-size: 0.875rem;
   background-color: var(--background-color);
   color: var(--text-color);
@@ -38951,11 +38943,11 @@ var drawChart = (function (exports) {
           const boundingRect = ref.current.getBoundingClientRect();
           if (pos.left + boundingRect.width > window.innerWidth) {
               // Shifting horizontally
-              pos.left = window.innerWidth - boundingRect.width;
+              pos.left = Math.max(0, window.innerWidth - boundingRect.width);
           }
           if (pos.top + boundingRect.height > window.innerHeight) {
               // Flipping vertically
-              pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
+              pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
           }
           setStyle(pos);
       };