layerchart 0.70.4 → 0.71.0
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.
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
| 'bottom-right';
|
|
32
32
|
export let anchor: Placement = 'top-left';
|
|
33
33
|
|
|
34
|
-
export let contained: 'container' | false = 'container';
|
|
34
|
+
export let contained: 'container' | 'window' | false = 'container';
|
|
35
35
|
export let variant: 'default' | 'invert' | 'none' = 'default';
|
|
36
36
|
|
|
37
37
|
/** Set to `false` to disable spring transitions */
|
|
@@ -134,8 +134,8 @@
|
|
|
134
134
|
rect.bottom = rect.top + tooltipHeight;
|
|
135
135
|
rect.right = rect.left + tooltipWidth;
|
|
136
136
|
|
|
137
|
-
// Check if outside of container and swap align side accordingly
|
|
138
137
|
if (contained === 'container') {
|
|
138
|
+
// Check if outside of container and swap align side accordingly
|
|
139
139
|
if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
|
|
140
140
|
rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
|
|
141
141
|
}
|
|
@@ -151,11 +151,40 @@
|
|
|
151
151
|
rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
|
|
152
152
|
}
|
|
153
153
|
rect.bottom = rect.top + tooltipHeight;
|
|
154
|
+
} else if (contained === 'window') {
|
|
155
|
+
// Check if outside of window / viewport and swap align side accordingly
|
|
156
|
+
// Root <div> won't be available on initial mount
|
|
157
|
+
if (rootEl?.parentElement) {
|
|
158
|
+
const parentViewportRect = rootEl.parentElement.getBoundingClientRect();
|
|
159
|
+
if (
|
|
160
|
+
(xAlign === 'start' || xAlign === 'center') &&
|
|
161
|
+
parentViewportRect.left + rect.right > window.innerWidth
|
|
162
|
+
) {
|
|
163
|
+
rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
|
|
164
|
+
}
|
|
165
|
+
if ((xAlign === 'end' || xAlign === 'center') && parentViewportRect.left + rect.left < 0) {
|
|
166
|
+
rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
|
|
167
|
+
}
|
|
168
|
+
rect.right = rect.left + tooltipWidth;
|
|
169
|
+
|
|
170
|
+
if (
|
|
171
|
+
(yAlign === 'start' || yAlign === 'center') &&
|
|
172
|
+
parentViewportRect.top + rect.bottom > window.innerHeight
|
|
173
|
+
) {
|
|
174
|
+
rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
|
|
175
|
+
}
|
|
176
|
+
if ((yAlign === 'end' || yAlign === 'center') && parentViewportRect.top + rect.top < 0) {
|
|
177
|
+
rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
|
|
178
|
+
}
|
|
179
|
+
rect.bottom = rect.top + tooltipHeight;
|
|
180
|
+
}
|
|
154
181
|
}
|
|
155
182
|
|
|
156
183
|
$yPos = rect.top;
|
|
157
184
|
$xPos = rect.left;
|
|
158
185
|
}
|
|
186
|
+
|
|
187
|
+
let rootEl: HTMLDivElement;
|
|
159
188
|
</script>
|
|
160
189
|
|
|
161
190
|
{#if $tooltip.data}
|
|
@@ -166,6 +195,7 @@
|
|
|
166
195
|
transition:fade={{ duration: 100 }}
|
|
167
196
|
bind:clientWidth={tooltipWidth}
|
|
168
197
|
bind:clientHeight={tooltipHeight}
|
|
198
|
+
bind:this={rootEl}
|
|
169
199
|
>
|
|
170
200
|
<div
|
|
171
201
|
class={cls(
|
|
@@ -7,7 +7,7 @@ declare const __propDef: {
|
|
|
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;
|
|
10
|
-
contained?: "container" | false | undefined;
|
|
10
|
+
contained?: "container" | "window" | false | undefined;
|
|
11
11
|
variant?: "default" | "invert" | "none" | undefined;
|
|
12
12
|
motion?: boolean | undefined;
|
|
13
13
|
classes?: {
|