layerchart 0.71.1 → 0.71.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -238,7 +238,6 @@
|
|
|
238
238
|
marker-start={markerStartId ? `url(#${markerStartId})` : undefined}
|
|
239
239
|
marker-mid={markerMidId ? `url(#${markerMidId})` : undefined}
|
|
240
240
|
marker-end={markerEndId ? `url(#${markerEndId})` : undefined}
|
|
241
|
-
{...$$restProps}
|
|
242
241
|
in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
|
|
243
242
|
on:click
|
|
244
243
|
on:pointerenter
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
import { isScaleBand } from '../../utils/scales.js';
|
|
9
9
|
|
|
10
10
|
/** `x` position of tooltip. By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
|
|
11
|
-
export let x: 'pointer' | 'data' | number
|
|
11
|
+
export let x: 'pointer' | 'data' | number = 'pointer';
|
|
12
12
|
/** `y` position of tooltip. By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
|
|
13
|
-
export let y: 'pointer' | 'data' | number
|
|
13
|
+
export let y: 'pointer' | 'data' | number = 'pointer';
|
|
14
14
|
|
|
15
15
|
/** Offset added to `x` position */
|
|
16
16
|
export let xOffset = x === 'pointer' ? 10 : 0;
|
|
@@ -135,20 +135,25 @@
|
|
|
135
135
|
rect.right = rect.left + tooltipWidth;
|
|
136
136
|
|
|
137
137
|
if (contained === 'container') {
|
|
138
|
-
//
|
|
139
|
-
if (
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
138
|
+
// Only attempt repositiong if not fixed (ie. `pointer`/`data`)
|
|
139
|
+
if (typeof x !== 'number') {
|
|
140
|
+
// Check if outside of container and swap align side accordingly
|
|
141
|
+
if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
|
|
142
|
+
rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
|
|
143
|
+
}
|
|
144
|
+
if ((xAlign === 'end' || xAlign === 'center') && rect.left < $padding.left) {
|
|
145
|
+
rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
|
|
146
|
+
}
|
|
144
147
|
}
|
|
145
148
|
rect.right = rect.left + tooltipWidth;
|
|
146
149
|
|
|
147
|
-
if (
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
150
|
+
if (typeof y !== 'number') {
|
|
151
|
+
if ((yAlign === 'start' || yAlign === 'center') && rect.bottom > $containerHeight) {
|
|
152
|
+
rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
|
|
153
|
+
}
|
|
154
|
+
if ((yAlign === 'end' || yAlign === 'center') && rect.top < $padding.top) {
|
|
155
|
+
rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
|
|
156
|
+
}
|
|
152
157
|
}
|
|
153
158
|
rect.bottom = rect.top + tooltipHeight;
|
|
154
159
|
} else if (contained === 'window') {
|
|
@@ -156,25 +161,34 @@
|
|
|
156
161
|
// Root <div> won't be available on initial mount
|
|
157
162
|
if (rootEl?.parentElement) {
|
|
158
163
|
const parentViewportRect = rootEl.parentElement.getBoundingClientRect();
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
164
|
+
|
|
165
|
+
// Only attempt repositiong if not fixed (ie. `pointer`/`data`)
|
|
166
|
+
if (typeof x !== 'number') {
|
|
167
|
+
if (
|
|
168
|
+
(xAlign === 'start' || xAlign === 'center') &&
|
|
169
|
+
parentViewportRect.left + rect.right > window.innerWidth
|
|
170
|
+
) {
|
|
171
|
+
rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
|
|
172
|
+
}
|
|
173
|
+
if (
|
|
174
|
+
(xAlign === 'end' || xAlign === 'center') &&
|
|
175
|
+
parentViewportRect.left + rect.left < 0
|
|
176
|
+
) {
|
|
177
|
+
rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
|
|
178
|
+
}
|
|
167
179
|
}
|
|
168
180
|
rect.right = rect.left + tooltipWidth;
|
|
169
181
|
|
|
170
|
-
if (
|
|
171
|
-
(
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
182
|
+
if (typeof y !== 'number') {
|
|
183
|
+
if (
|
|
184
|
+
(yAlign === 'start' || yAlign === 'center') &&
|
|
185
|
+
parentViewportRect.top + rect.bottom > window.innerHeight
|
|
186
|
+
) {
|
|
187
|
+
rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
|
|
188
|
+
}
|
|
189
|
+
if ((yAlign === 'end' || yAlign === 'center') && parentViewportRect.top + rect.top < 0) {
|
|
190
|
+
rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
|
|
191
|
+
}
|
|
178
192
|
}
|
|
179
193
|
rect.bottom = rect.top + tooltipHeight;
|
|
180
194
|
}
|
|
@@ -2,8 +2,8 @@ import { SvelteComponentTyped } from "svelte";
|
|
|
2
2
|
declare const __propDef: {
|
|
3
3
|
props: {
|
|
4
4
|
[x: string]: any;
|
|
5
|
-
x?: "pointer" | "data" | number | undefined
|
|
6
|
-
y?: "pointer" | "data" | number | undefined
|
|
5
|
+
x?: "pointer" | "data" | number | undefined;
|
|
6
|
+
y?: "pointer" | "data" | number | undefined;
|
|
7
7
|
xOffset?: number | undefined;
|
|
8
8
|
yOffset?: number | undefined;
|
|
9
9
|
anchor?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
|