Skip to content

Commit 2200fe7

Browse files
author
Denis Bardadym
committed
Copy PR #191. Thanks to @guillaumeduboc 
1 parent 8bb980c commit 2200fe7

File tree

8 files changed

+44
-86
lines changed

8 files changed

+44
-86
lines changed

‎src/network/tooltip.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,12 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({ node, visible }) =>
5050

5151
if (pos.left + boundingRect.width > window.innerWidth) {
5252
// Shifting horizontally
53-
pos.left = window.innerWidth - boundingRect.width;
53+
pos.left = Math.max(0,window.innerWidth - boundingRect.width);
5454
}
5555

5656
if (pos.top + boundingRect.height > window.innerHeight) {
5757
// Flipping vertically
58-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
58+
pos.top = Math.max(0,mouseCoords.y - Tooltip_marginY - boundingRect.height);
5959
}
6060

6161
setStyle(pos);

‎src/style/_base.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,6 @@ main {
6161

6262
padding: 5px;
6363

64-
white-space: nowrap;
65-
6664
font-size: 0.875rem;
6765

6866
background-color: var(--background-color);

‎src/treemap/tooltip.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,12 +130,12 @@ export const Tooltip: FunctionalComponent<TooltipProps> = ({
130130

131131
if (pos.left + boundingRect.width > window.innerWidth) {
132132
// Shifting horizontally
133-
pos.left = window.innerWidth - boundingRect.width;
133+
pos.left = Math.max(0,window.innerWidth - boundingRect.width);
134134
}
135135

136136
if (pos.top + boundingRect.height > window.innerHeight) {
137137
// Flipping vertically
138-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
138+
pos.top = Math.max(0,mouseCoords.y - Tooltip_marginY - boundingRect.height);
139139
}
140140

141141
setStyle(pos);

‎test/__snapshots__/e2e-rolldown.test.ts.snap

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ main {
7070
border: 2px solid;
7171
border-radius: 5px;
7272
padding: 5px;
73-
white-space: nowrap;
7473
font-size: 0.875rem;
7574
background-color: var(--background-color);
7675
color: var(--text-color);
@@ -4781,7 +4780,6 @@ main {
47814780
border: 2px solid;
47824781
border-radius: 5px;
47834782
padding: 5px;
4784-
white-space: nowrap;
47854783
font-size: 0.875rem;
47864784
background-color: var(--background-color);
47874785
color: var(--text-color);
@@ -9793,11 +9791,11 @@ var drawChart = (function (exports) {
97939791
const boundingRect = ref.current.getBoundingClientRect();
97949792
if (pos.left + boundingRect.width > window.innerWidth) {
97959793
// Shifting horizontally
9796-
pos.left = window.innerWidth - boundingRect.width;
9794+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
97979795
}
97989796
if (pos.top + boundingRect.height > window.innerHeight) {
97999797
// Flipping vertically
9800-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
9798+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
98019799
}
98029800
setStyle(pos);
98039801
};
@@ -10323,7 +10321,6 @@ main {
1032310321
border: 2px solid;
1032410322
border-radius: 5px;
1032510323
padding: 5px;
10326-
white-space: nowrap;
1032710324
font-size: 0.875rem;
1032810325
background-color: var(--background-color);
1032910326
color: var(--text-color);
@@ -15328,7 +15325,6 @@ main {
1532815325
border: 2px solid;
1532915326
border-radius: 5px;
1533015327
padding: 5px;
15331-
white-space: nowrap;
1533215328
font-size: 0.875rem;
1533315329
background-color: var(--background-color);
1533415330
color: var(--text-color);
@@ -18717,11 +18713,11 @@ var drawChart = (function (exports) {
1871718713
const boundingRect = ref.current.getBoundingClientRect();
1871818714
if (pos.left + boundingRect.width > window.innerWidth) {
1871918715
// Shifting horizontally
18720-
pos.left = window.innerWidth - boundingRect.width;
18716+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
1872118717
}
1872218718
if (pos.top + boundingRect.height > window.innerHeight) {
1872318719
// Flipping vertically
18724-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
18720+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
1872518721
}
1872618722
setStyle(pos);
1872718723
};
@@ -20282,7 +20278,6 @@ main {
2028220278
border: 2px solid;
2028320279
border-radius: 5px;
2028420280
padding: 5px;
20285-
white-space: nowrap;
2028620281
font-size: 0.875rem;
2028720282
background-color: var(--background-color);
2028820283
color: var(--text-color);
@@ -24987,7 +24982,6 @@ main {
2498724982
border: 2px solid;
2498824983
border-radius: 5px;
2498924984
padding: 5px;
24990-
white-space: nowrap;
2499124985
font-size: 0.875rem;
2499224986
background-color: var(--background-color);
2499324987
color: var(--text-color);
@@ -29999,11 +29993,11 @@ var drawChart = (function (exports) {
2999929993
const boundingRect = ref.current.getBoundingClientRect();
3000029994
if (pos.left + boundingRect.width > window.innerWidth) {
3000129995
// Shifting horizontally
30002-
pos.left = window.innerWidth - boundingRect.width;
29996+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
3000329997
}
3000429998
if (pos.top + boundingRect.height > window.innerHeight) {
3000529999
// Flipping vertically
30006-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
30000+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
3000730001
}
3000830002
setStyle(pos);
3000930003
};
@@ -30529,7 +30523,6 @@ main {
3052930523
border: 2px solid;
3053030524
border-radius: 5px;
3053130525
padding: 5px;
30532-
white-space: nowrap;
3053330526
font-size: 0.875rem;
3053430527
background-color: var(--background-color);
3053530528
color: var(--text-color);
@@ -35534,7 +35527,6 @@ main {
3553435527
border: 2px solid;
3553535528
border-radius: 5px;
3553635529
padding: 5px;
35537-
white-space: nowrap;
3553835530
font-size: 0.875rem;
3553935531
background-color: var(--background-color);
3554035532
color: var(--text-color);
@@ -38923,11 +38915,11 @@ var drawChart = (function (exports) {
3892338915
const boundingRect = ref.current.getBoundingClientRect();
3892438916
if (pos.left + boundingRect.width > window.innerWidth) {
3892538917
// Shifting horizontally
38926-
pos.left = window.innerWidth - boundingRect.width;
38918+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
3892738919
}
3892838920
if (pos.top + boundingRect.height > window.innerHeight) {
3892938921
// Flipping vertically
38930-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
38922+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
3893138923
}
3893238924
setStyle(pos);
3893338925
};

‎test/__snapshots__/e2e.test.ts.snap

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ main {
7070
border: 2px solid;
7171
border-radius: 5px;
7272
padding: 5px;
73-
white-space: nowrap;
7473
font-size: 0.875rem;
7574
background-color: var(--background-color);
7675
color: var(--text-color);
@@ -4781,7 +4780,6 @@ main {
47814780
border: 2px solid;
47824781
border-radius: 5px;
47834782
padding: 5px;
4784-
white-space: nowrap;
47854783
font-size: 0.875rem;
47864784
background-color: var(--background-color);
47874785
color: var(--text-color);
@@ -9793,11 +9791,11 @@ var drawChart = (function (exports) {
97939791
const boundingRect = ref.current.getBoundingClientRect();
97949792
if (pos.left + boundingRect.width > window.innerWidth) {
97959793
// Shifting horizontally
9796-
pos.left = window.innerWidth - boundingRect.width;
9794+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
97979795
}
97989796
if (pos.top + boundingRect.height > window.innerHeight) {
97999797
// Flipping vertically
9800-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
9798+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
98019799
}
98029800
setStyle(pos);
98039801
};
@@ -10324,7 +10322,6 @@ main {
1032410322
border: 2px solid;
1032510323
border-radius: 5px;
1032610324
padding: 5px;
10327-
white-space: nowrap;
1032810325
font-size: 0.875rem;
1032910326
background-color: var(--background-color);
1033010327
color: var(--text-color);
@@ -15329,7 +15326,6 @@ main {
1532915326
border: 2px solid;
1533015327
border-radius: 5px;
1533115328
padding: 5px;
15332-
white-space: nowrap;
1533315329
font-size: 0.875rem;
1533415330
background-color: var(--background-color);
1533515331
color: var(--text-color);
@@ -18718,11 +18714,11 @@ var drawChart = (function (exports) {
1871818714
const boundingRect = ref.current.getBoundingClientRect();
1871918715
if (pos.left + boundingRect.width > window.innerWidth) {
1872018716
// Shifting horizontally
18721-
pos.left = window.innerWidth - boundingRect.width;
18717+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
1872218718
}
1872318719
if (pos.top + boundingRect.height > window.innerHeight) {
1872418720
// Flipping vertically
18725-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
18721+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
1872618722
}
1872718723
setStyle(pos);
1872818724
};
@@ -20283,7 +20279,6 @@ main {
2028320279
border: 2px solid;
2028420280
border-radius: 5px;
2028520281
padding: 5px;
20286-
white-space: nowrap;
2028720282
font-size: 0.875rem;
2028820283
background-color: var(--background-color);
2028920284
color: var(--text-color);
@@ -24988,7 +24983,6 @@ main {
2498824983
border: 2px solid;
2498924984
border-radius: 5px;
2499024985
padding: 5px;
24991-
white-space: nowrap;
2499224986
font-size: 0.875rem;
2499324987
background-color: var(--background-color);
2499424988
color: var(--text-color);
@@ -30000,11 +29994,11 @@ var drawChart = (function (exports) {
3000029994
const boundingRect = ref.current.getBoundingClientRect();
3000129995
if (pos.left + boundingRect.width > window.innerWidth) {
3000229996
// Shifting horizontally
30003-
pos.left = window.innerWidth - boundingRect.width;
29997+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
3000429998
}
3000529999
if (pos.top + boundingRect.height > window.innerHeight) {
3000630000
// Flipping vertically
30007-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
30001+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
3000830002
}
3000930003
setStyle(pos);
3001030004
};
@@ -30531,7 +30525,6 @@ main {
3053130525
border: 2px solid;
3053230526
border-radius: 5px;
3053330527
padding: 5px;
30534-
white-space: nowrap;
3053530528
font-size: 0.875rem;
3053630529
background-color: var(--background-color);
3053730530
color: var(--text-color);
@@ -35536,7 +35529,6 @@ main {
3553635529
border: 2px solid;
3553735530
border-radius: 5px;
3553835531
padding: 5px;
35539-
white-space: nowrap;
3554035532
font-size: 0.875rem;
3554135533
background-color: var(--background-color);
3554235534
color: var(--text-color);
@@ -38925,11 +38917,11 @@ var drawChart = (function (exports) {
3892538917
const boundingRect = ref.current.getBoundingClientRect();
3892638918
if (pos.left + boundingRect.width > window.innerWidth) {
3892738919
// Shifting horizontally
38928-
pos.left = window.innerWidth - boundingRect.width;
38920+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
3892938921
}
3893038922
if (pos.top + boundingRect.height > window.innerHeight) {
3893138923
// Flipping vertically
38932-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
38924+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
3893338925
}
3893438926
setStyle(pos);
3893538927
};

‎test/__snapshots__/gh59.test.ts.snap

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ main {
7070
border: 2px solid;
7171
border-radius: 5px;
7272
padding: 5px;
73-
white-space: nowrap;
7473
font-size: 0.875rem;
7574
background-color: var(--background-color);
7675
color: var(--text-color);
@@ -4786,7 +4785,6 @@ main {
47864785
border: 2px solid;
47874786
border-radius: 5px;
47884787
padding: 5px;
4789-
white-space: nowrap;
47904788
font-size: 0.875rem;
47914789
background-color: var(--background-color);
47924790
color: var(--text-color);
@@ -9798,11 +9796,11 @@ var drawChart = (function (exports) {
97989796
const boundingRect = ref.current.getBoundingClientRect();
97999797
if (pos.left + boundingRect.width > window.innerWidth) {
98009798
// Shifting horizontally
9801-
pos.left = window.innerWidth - boundingRect.width;
9799+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
98029800
}
98039801
if (pos.top + boundingRect.height > window.innerHeight) {
98049802
// Flipping vertically
9805-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
9803+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
98069804
}
98079805
setStyle(pos);
98089806
};
@@ -10340,7 +10338,6 @@ main {
1034010338
border: 2px solid;
1034110339
border-radius: 5px;
1034210340
padding: 5px;
10343-
white-space: nowrap;
1034410341
font-size: 0.875rem;
1034510342
background-color: var(--background-color);
1034610343
color: var(--text-color);
@@ -15345,7 +15342,6 @@ main {
1534515342
border: 2px solid;
1534615343
border-radius: 5px;
1534715344
padding: 5px;
15348-
white-space: nowrap;
1534915345
font-size: 0.875rem;
1535015346
background-color: var(--background-color);
1535115347
color: var(--text-color);
@@ -18734,11 +18730,11 @@ var drawChart = (function (exports) {
1873418730
const boundingRect = ref.current.getBoundingClientRect();
1873518731
if (pos.left + boundingRect.width > window.innerWidth) {
1873618732
// Shifting horizontally
18737-
pos.left = window.innerWidth - boundingRect.width;
18733+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
1873818734
}
1873918735
if (pos.top + boundingRect.height > window.innerHeight) {
1874018736
// Flipping vertically
18741-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
18737+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
1874218738
}
1874318739
setStyle(pos);
1874418740
};
@@ -20299,7 +20295,6 @@ main {
2029920295
border: 2px solid;
2030020296
border-radius: 5px;
2030120297
padding: 5px;
20302-
white-space: nowrap;
2030320298
font-size: 0.875rem;
2030420299
background-color: var(--background-color);
2030520300
color: var(--text-color);
@@ -25007,7 +25002,6 @@ main {
2500725002
border: 2px solid;
2500825003
border-radius: 5px;
2500925004
padding: 5px;
25010-
white-space: nowrap;
2501125005
font-size: 0.875rem;
2501225006
background-color: var(--background-color);
2501325007
color: var(--text-color);
@@ -30019,11 +30013,11 @@ var drawChart = (function (exports) {
3001930013
const boundingRect = ref.current.getBoundingClientRect();
3002030014
if (pos.left + boundingRect.width > window.innerWidth) {
3002130015
// Shifting horizontally
30022-
pos.left = window.innerWidth - boundingRect.width;
30016+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
3002330017
}
3002430018
if (pos.top + boundingRect.height > window.innerHeight) {
3002530019
// Flipping vertically
30026-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
30020+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
3002730021
}
3002830022
setStyle(pos);
3002930023
};
@@ -30557,7 +30551,6 @@ main {
3055730551
border: 2px solid;
3055830552
border-radius: 5px;
3055930553
padding: 5px;
30560-
white-space: nowrap;
3056130554
font-size: 0.875rem;
3056230555
background-color: var(--background-color);
3056330556
color: var(--text-color);
@@ -35562,7 +35555,6 @@ main {
3556235555
border: 2px solid;
3556335556
border-radius: 5px;
3556435557
padding: 5px;
35565-
white-space: nowrap;
3556635558
font-size: 0.875rem;
3556735559
background-color: var(--background-color);
3556835560
color: var(--text-color);
@@ -38951,11 +38943,11 @@ var drawChart = (function (exports) {
3895138943
const boundingRect = ref.current.getBoundingClientRect();
3895238944
if (pos.left + boundingRect.width > window.innerWidth) {
3895338945
// Shifting horizontally
38954-
pos.left = window.innerWidth - boundingRect.width;
38946+
pos.left = Math.max(0, window.innerWidth - boundingRect.width);
3895538947
}
3895638948
if (pos.top + boundingRect.height > window.innerHeight) {
3895738949
// Flipping vertically
38958-
pos.top = mouseCoords.y - Tooltip_marginY - boundingRect.height;
38950+
pos.top = Math.max(0, mouseCoords.y - Tooltip_marginY - boundingRect.height);
3895938951
}
3896038952
setStyle(pos);
3896138953
};

0 commit comments

Comments
 (0)