From 2200fe70e4e159c11454deedc6b51aadb4aa06ad Mon Sep 17 00:00:00 2001 From: Denis Bardadym Date: Fri, 27 Dec 2024 11:01:08 +0100 Subject: [PATCH] Copy PR #191. Thanks to @guillaumeduboc --- src/network/tooltip.tsx | 4 ++-- src/style/_base.scss | 2 -- src/treemap/tooltip.tsx | 4 ++-- test/__snapshots__/e2e-rolldown.test.ts.snap | 24 +++++++------------- test/__snapshots__/e2e.test.ts.snap | 24 +++++++------------- test/__snapshots__/gh59.test.ts.snap | 24 +++++++------------- test/__snapshots__/gh69.test.ts.snap | 24 +++++++------------- test/__snapshots__/gh93.test.ts.snap | 24 +++++++------------- 8 files changed, 44 insertions(+), 86 deletions(-) diff --git a/src/network/tooltip.tsx b/src/network/tooltip.tsx index 36c1031..909dbaf 100644 --- a/src/network/tooltip.tsx +++ b/src/network/tooltip.tsx @@ -50,12 +50,12 @@ export const Tooltip: FunctionalComponent = ({ 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 index 848b137..fc7010b 100644 --- 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 index 953e62c..4ee7ef3 100644 --- a/src/treemap/tooltip.tsx +++ b/src/treemap/tooltip.tsx @@ -130,12 +130,12 @@ export const Tooltip: FunctionalComponent = ({ 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 index 0c4a415..7f7c868 100644 --- 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 index 5a0ff8e..390b2fe 100644 --- 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 index 3678a75..95c775a 100644 --- 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); }; diff --git a/test/__snapshots__/gh69.test.ts.snap b/test/__snapshots__/gh69.test.ts.snap index e344b2e..ade1887 100644 --- a/test/__snapshots__/gh69.test.ts.snap +++ b/test/__snapshots__/gh69.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); @@ -4780,7 +4779,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); @@ -9792,11 +9790,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); }; @@ -10308,7 +10306,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); @@ -15313,7 +15310,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); @@ -18702,11 +18698,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); }; @@ -20267,7 +20263,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); @@ -24971,7 +24966,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); @@ -29983,11 +29977,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); }; @@ -30499,7 +30493,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); @@ -35504,7 +35497,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); @@ -38893,11 +38885,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__/gh93.test.ts.snap b/test/__snapshots__/gh93.test.ts.snap index c20afd3..b622016 100644 --- a/test/__snapshots__/gh93.test.ts.snap +++ b/test/__snapshots__/gh93.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); @@ -4776,7 +4775,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); @@ -9788,11 +9786,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); }; @@ -10259,7 +10257,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); @@ -15264,7 +15261,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); @@ -18653,11 +18649,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); }; @@ -20218,7 +20214,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); @@ -24920,7 +24915,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); @@ -29932,11 +29926,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); }; @@ -30395,7 +30389,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); @@ -35400,7 +35393,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); @@ -38789,11 +38781,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); };