@unovis/ts 1.4.2-beta.0 → 1.5.0-alpha.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.
- package/components/axis/config.d.ts +2 -0
- package/components/axis/config.js.map +1 -1
- package/components/axis/index.js +16 -17
- package/components/axis/index.js.map +1 -1
- package/components/brush/index.js +4 -4
- package/components/brush/index.js.map +1 -1
- package/components/brush/style.d.ts +44 -1
- package/components/brush/style.js +39 -32
- package/components/brush/style.js.map +1 -1
- package/components/graph/config.d.ts +10 -13
- package/components/graph/config.js +2 -2
- package/components/graph/config.js.map +1 -1
- package/components/graph/index.d.ts +3 -13
- package/components/graph/index.js +63 -173
- package/components/graph/index.js.map +1 -1
- package/components/graph/modules/layout.js +14 -6
- package/components/graph/modules/layout.js.map +1 -1
- package/components/graph/modules/node/index.d.ts +4 -3
- package/components/graph/modules/node/index.js +62 -34
- package/components/graph/modules/node/index.js.map +1 -1
- package/components/graph/modules/node/style.d.ts +0 -2
- package/components/graph/modules/node/style.js +4 -34
- package/components/graph/modules/node/style.js.map +1 -1
- package/components/graph/style.d.ts +0 -1
- package/components/graph/style.js +1 -22
- package/components/graph/style.js.map +1 -1
- package/components/graph/types.d.ts +0 -1
- package/components/graph/types.js.map +1 -1
- package/components/tooltip/config.d.ts +7 -1
- package/components/tooltip/config.js +2 -0
- package/components/tooltip/config.js.map +1 -1
- package/components/tooltip/index.d.ts +9 -1
- package/components/tooltip/index.js +139 -41
- package/components/tooltip/index.js.map +1 -1
- package/components/tooltip/style.d.ts +1 -1
- package/components/tooltip/style.js +25 -25
- package/components/tooltip/style.js.map +1 -1
- package/data-models/graph.d.ts +0 -2
- package/data-models/graph.js +0 -6
- package/data-models/graph.js.map +1 -1
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/index.js.map +1 -1
- package/package.json +1 -1
- package/types/text.d.ts +2 -0
- package/types/text.js.map +1 -1
- package/utils/text.d.ts +1 -1
- package/utils/text.js +27 -15
- package/utils/text.js.map +1 -1
|
@@ -5,6 +5,12 @@ export interface TooltipConfigInterface {
|
|
|
5
5
|
components?: ComponentCore<unknown>[];
|
|
6
6
|
/** Container to where the Tooltip component should be inserted. Default: `undefined` */
|
|
7
7
|
container?: HTMLElement;
|
|
8
|
+
/** Follow the mouse cursor. If `true`, the tooltip can't be hovered over
|
|
9
|
+
* even when `allowHover` is set to `true`. Default: `true` */
|
|
10
|
+
followCursor?: boolean;
|
|
11
|
+
/** Allow the tooltip to be hovered over and interacted with when `followCursor` is set to `false`.
|
|
12
|
+
* Default: `true` */
|
|
13
|
+
allowHover?: boolean;
|
|
8
14
|
/** Horizontal placement of the tooltip. Default: `Position.Auto` */
|
|
9
15
|
horizontalPlacement?: Position | string | undefined;
|
|
10
16
|
/** Horizontal shift of the tooltip in pixels. Default: `0` */
|
|
@@ -29,7 +35,7 @@ export interface TooltipConfigInterface {
|
|
|
29
35
|
* ```
|
|
30
36
|
*/
|
|
31
37
|
triggers?: {
|
|
32
|
-
[selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null) | undefined | null;
|
|
38
|
+
[selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null | void) | undefined | null;
|
|
33
39
|
};
|
|
34
40
|
/** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance
|
|
35
41
|
* by using a CSS selector. Attributes configuration object has the following structure:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../src/components/tooltip/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\nexport interface TooltipConfigInterface {\n /** An array of visualization components to interact with. Default: `[]` */\n components?: ComponentCore<unknown>[];\n /** Container to where the Tooltip component should be inserted. Default: `undefined` */\n container?: HTMLElement;\n /** Horizontal placement of the tooltip. Default: `Position.Auto` */\n horizontalPlacement?: Position | string | undefined;\n /** Horizontal shift of the tooltip in pixels. Default: `0` */\n horizontalShift?: number;\n /** Vertical placement of the tooltip. Default: `Position.Top` */\n verticalPlacement?: Position | string | undefined;\n /** Vertical shift of the tooltip in pixels. Default: `0` */\n verticalShift?: number;\n /** Defines the content of the tooltip and hovering over which elements should trigger it.\n * An object containing properties in the following format:\n *\n * ```\n * {\n * [selectorString]: (d: unknown) => string | HTMLElement\n * }\n * ```\n * e.g.:\n * ```\n * {\n * [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>\n * }\n * ```\n */\n triggers?: {\n [selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null) | undefined | null;\n };\n /** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance\n * by using a CSS selector. Attributes configuration object has the following structure:\n *\n * ```\n * {\n * [attributeName]: attribute value\n * }\n * ```\n * e.g.:\n * ```\n * {\n * 'type': 'area-tooltip',\n * 'value': 42\n * }\n * ```\n */\n attributes?: { [attr: string]: string | number | boolean };\n}\n\nexport const TooltipDefaultConfig: TooltipConfigInterface = {\n components: [],\n container: undefined,\n horizontalPlacement: Position.Auto,\n horizontalShift: 0,\n verticalPlacement: Position.Top,\n verticalShift: 0,\n attributes: {},\n triggers: {},\n}\n\n"],"names":[],"mappings":";;AAGA;
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../src/components/tooltip/config.ts"],"sourcesContent":["/* eslint-disable no-irregular-whitespace */\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\nexport interface TooltipConfigInterface {\n /** An array of visualization components to interact with. Default: `[]` */\n components?: ComponentCore<unknown>[];\n /** Container to where the Tooltip component should be inserted. Default: `undefined` */\n container?: HTMLElement;\n /** Follow the mouse cursor. If `true`, the tooltip can't be hovered over\n * even when `allowHover` is set to `true`. Default: `true` */\n followCursor?: boolean;\n /** Allow the tooltip to be hovered over and interacted with when `followCursor` is set to `false`.\n * Default: `true` */\n allowHover?: boolean;\n /** Horizontal placement of the tooltip. Default: `Position.Auto` */\n horizontalPlacement?: Position | string | undefined;\n /** Horizontal shift of the tooltip in pixels. Default: `0` */\n horizontalShift?: number;\n /** Vertical placement of the tooltip. Default: `Position.Top` */\n verticalPlacement?: Position | string | undefined;\n /** Vertical shift of the tooltip in pixels. Default: `0` */\n verticalShift?: number;\n /** Defines the content of the tooltip and hovering over which elements should trigger it.\n * An object containing properties in the following format:\n *\n * ```\n * {\n * [selectorString]: (d: unknown) => string | HTMLElement\n * }\n * ```\n * e.g.:\n * ```\n * {\n * [Area.selectors.area]: (d: AreaDatum[]) => `<div>${d.value.toString()}</div>\n * }\n * ```\n */\n triggers?: {\n [selector: string]: ((data: any, i: number, elements: (HTMLElement | SVGElement)[]) => string | HTMLElement | undefined | null | void) | undefined | null;\n };\n /** Custom DOM attributes for the tooltip. Useful when you need to refer to a specific tooltip instance\n * by using a CSS selector. Attributes configuration object has the following structure:\n *\n * ```\n * {\n * [attributeName]: attribute value\n * }\n * ```\n * e.g.:\n * ```\n * {\n * 'type': 'area-tooltip',\n * 'value': 42\n * }\n * ```\n */\n attributes?: { [attr: string]: string | number | boolean };\n}\n\nexport const TooltipDefaultConfig: TooltipConfigInterface = {\n components: [],\n container: undefined,\n followCursor: true,\n allowHover: true,\n horizontalPlacement: Position.Auto,\n horizontalShift: 0,\n verticalPlacement: Position.Top,\n verticalShift: 0,\n attributes: {},\n triggers: {},\n}\n\n"],"names":[],"mappings":";;AAGA;AA2Da,MAAA,oBAAoB,GAA2B;AAC1D,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,SAAS,EAAE,SAAS;AACpB,IAAA,YAAY,EAAE,IAAI;AAClB,IAAA,UAAU,EAAE,IAAI;IAChB,mBAAmB,EAAE,QAAQ,CAAC,IAAI;AAClC,IAAA,eAAe,EAAE,CAAC;IAClB,iBAAiB,EAAE,QAAQ,CAAC,GAAG;AAC/B,IAAA,aAAa,EAAE,CAAC;AAChB,IAAA,UAAU,EAAE,EAAE;AACd,IAAA,QAAQ,EAAE,EAAE;;;;;"}
|
|
@@ -21,16 +21,24 @@ export declare class Tooltip {
|
|
|
21
21
|
hasContainer(): boolean;
|
|
22
22
|
setComponents(components: ComponentCore<unknown>[]): void;
|
|
23
23
|
update(): void;
|
|
24
|
-
|
|
24
|
+
/** Show the tooltip by providing content and position */
|
|
25
|
+
show(html: string | HTMLElement | null | void, pos: {
|
|
25
26
|
x: number;
|
|
26
27
|
y: number;
|
|
27
28
|
}): void;
|
|
29
|
+
/** Hide the tooltip */
|
|
28
30
|
hide(): void;
|
|
31
|
+
/** Simply displays the tooltip with its previous content on position */
|
|
32
|
+
display(): void;
|
|
29
33
|
place(pos: {
|
|
30
34
|
x: number;
|
|
31
35
|
y: number;
|
|
32
36
|
}): void;
|
|
37
|
+
placeByPointerEvent(e: PointerEvent | MouseEvent): void;
|
|
38
|
+
placeByElement(hoveredElement: SVGGElement | HTMLElement): void;
|
|
33
39
|
isContainerBody(): boolean;
|
|
40
|
+
private _render;
|
|
41
|
+
private _applyPosition;
|
|
34
42
|
private _setContainerPosition;
|
|
35
43
|
private _setUpEvents;
|
|
36
44
|
private _setUpAttributes;
|
|
@@ -3,7 +3,7 @@ import { Position } from '../../types/position.js';
|
|
|
3
3
|
import { throttle, merge } from '../../utils/data.js';
|
|
4
4
|
import { TooltipDefaultConfig } from './config.js';
|
|
5
5
|
import * as style from './style.js';
|
|
6
|
-
import {
|
|
6
|
+
import { root, show, hidden, nonInteractive, positionFixed } from './style.js';
|
|
7
7
|
|
|
8
8
|
class Tooltip {
|
|
9
9
|
constructor(config = {}) {
|
|
@@ -14,7 +14,7 @@ class Tooltip {
|
|
|
14
14
|
this._isShown = false;
|
|
15
15
|
this.element = document.createElement('div');
|
|
16
16
|
this.div = select(this.element)
|
|
17
|
-
.attr('class',
|
|
17
|
+
.attr('class', root);
|
|
18
18
|
this.setConfig(config);
|
|
19
19
|
this.components = this.config.components;
|
|
20
20
|
}
|
|
@@ -48,21 +48,12 @@ class Tooltip {
|
|
|
48
48
|
return;
|
|
49
49
|
this._setUpEventsThrottled();
|
|
50
50
|
}
|
|
51
|
+
/** Show the tooltip by providing content and position */
|
|
51
52
|
show(html, pos) {
|
|
52
|
-
|
|
53
|
-
const node = this.div.select(':first-child').node();
|
|
54
|
-
if (node !== html)
|
|
55
|
-
this.div.html('').append(() => html);
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
this.div.html(html);
|
|
59
|
-
}
|
|
60
|
-
this.div
|
|
61
|
-
.classed(hidden, false)
|
|
62
|
-
.classed(show, true);
|
|
63
|
-
this._isShown = true;
|
|
53
|
+
this._render(html);
|
|
64
54
|
this.place(pos);
|
|
65
55
|
}
|
|
56
|
+
/** Hide the tooltip */
|
|
66
57
|
hide() {
|
|
67
58
|
this.div.classed(show, false)
|
|
68
59
|
.on('transitionend', () => {
|
|
@@ -72,6 +63,13 @@ class Tooltip {
|
|
|
72
63
|
});
|
|
73
64
|
this._isShown = false;
|
|
74
65
|
}
|
|
66
|
+
/** Simply displays the tooltip with its previous content on position */
|
|
67
|
+
display() {
|
|
68
|
+
this.div
|
|
69
|
+
.classed(hidden, false)
|
|
70
|
+
.classed(show, true);
|
|
71
|
+
this._isShown = true;
|
|
72
|
+
}
|
|
75
73
|
place(pos) {
|
|
76
74
|
if (!this.hasContainer()) {
|
|
77
75
|
console.warn('Unovis | Tooltip: Container was not set or is not initialized yet');
|
|
@@ -79,48 +77,130 @@ class Tooltip {
|
|
|
79
77
|
}
|
|
80
78
|
const { config } = this;
|
|
81
79
|
const isContainerBody = this.isContainerBody();
|
|
82
|
-
const
|
|
83
|
-
const
|
|
80
|
+
const tooltipWidth = this.element.offsetWidth;
|
|
81
|
+
const tooltipHeight = this.element.offsetHeight;
|
|
84
82
|
const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight;
|
|
85
83
|
const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth;
|
|
86
84
|
const horizontalPlacement = config.horizontalPlacement === Position.Auto
|
|
87
|
-
?
|
|
85
|
+
? Position.Center
|
|
88
86
|
: config.horizontalPlacement;
|
|
89
87
|
const verticalPlacement = config.verticalPlacement === Position.Auto
|
|
90
|
-
? (pos.y > containerHeight /
|
|
88
|
+
? ((pos.y - tooltipHeight) > containerHeight / 8 ? Position.Top : Position.Bottom)
|
|
91
89
|
: config.verticalPlacement;
|
|
92
90
|
// dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)
|
|
93
91
|
const margin = 5;
|
|
94
|
-
const dx = horizontalPlacement === Position.Left ? -
|
|
95
|
-
: horizontalPlacement === Position.Center ? -
|
|
92
|
+
const dx = horizontalPlacement === Position.Left ? -tooltipWidth - margin - config.horizontalShift
|
|
93
|
+
: horizontalPlacement === Position.Center ? -tooltipWidth / 2
|
|
96
94
|
: margin + config.horizontalShift;
|
|
97
|
-
const dy = verticalPlacement === Position.Bottom ?
|
|
98
|
-
: verticalPlacement === Position.Center ?
|
|
95
|
+
const dy = verticalPlacement === Position.Bottom ? tooltipHeight + margin + config.verticalShift
|
|
96
|
+
: verticalPlacement === Position.Center ? tooltipHeight / 2
|
|
99
97
|
: -margin - config.verticalShift;
|
|
100
98
|
// Constraint to container
|
|
101
99
|
const paddingX = 10;
|
|
102
|
-
const hitRight = pos.x > (containerWidth -
|
|
100
|
+
const hitRight = pos.x > (containerWidth - tooltipWidth - dx - paddingX);
|
|
103
101
|
const hitLeft = pos.x < -dx + paddingX;
|
|
104
|
-
const constraintX = hitRight ? (containerWidth -
|
|
102
|
+
const constraintX = hitRight ? (containerWidth - tooltipWidth - dx) - pos.x - paddingX
|
|
105
103
|
: hitLeft ? -dx - pos.x + paddingX : 0;
|
|
106
104
|
const paddingY = 10;
|
|
107
105
|
const hitBottom = pos.y > (containerHeight - dy - paddingY);
|
|
108
|
-
const hitTop = pos.y < (
|
|
106
|
+
const hitTop = pos.y < (tooltipHeight - dy + paddingY);
|
|
109
107
|
const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY
|
|
110
|
-
: hitTop ?
|
|
108
|
+
: hitTop ? tooltipHeight - dy - pos.y + paddingY : 0;
|
|
111
109
|
// Placing
|
|
112
110
|
// If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left
|
|
113
|
-
const x = containerWidth <
|
|
114
|
-
const y = containerHeight <
|
|
115
|
-
this.
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
111
|
+
const x = containerWidth < tooltipWidth ? 0 : pos.x + constraintX + dx;
|
|
112
|
+
const y = containerHeight < tooltipHeight ? tooltipHeight : pos.y + constraintY + dy;
|
|
113
|
+
this._applyPosition(x, y, null, tooltipHeight);
|
|
114
|
+
}
|
|
115
|
+
placeByPointerEvent(e) {
|
|
116
|
+
const isContainerBody = this.isContainerBody();
|
|
117
|
+
const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container);
|
|
118
|
+
this.place({ x, y });
|
|
119
|
+
}
|
|
120
|
+
placeByElement(hoveredElement) {
|
|
121
|
+
const { config } = this;
|
|
122
|
+
const margin = 5;
|
|
123
|
+
const tooltipWidth = this.element.offsetWidth;
|
|
124
|
+
const tooltipHeight = this.element.offsetHeight;
|
|
125
|
+
const isContainerBody = this.isContainerBody();
|
|
126
|
+
const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth;
|
|
127
|
+
const hoveredElementRect = hoveredElement.getBoundingClientRect();
|
|
128
|
+
// We use D3's point transformation to get the correct position of the element by pretending it's a pointer event
|
|
129
|
+
// See more: https://github.com/d3/d3-selection/blob/main/src/pointer.js
|
|
130
|
+
const elementPos = pointer({
|
|
131
|
+
clientX: hoveredElementRect.x,
|
|
132
|
+
clientY: hoveredElementRect.y,
|
|
133
|
+
pageX: hoveredElementRect.x,
|
|
134
|
+
pageY: hoveredElementRect.y,
|
|
135
|
+
}, this._container);
|
|
136
|
+
const horizontalPlacement = config.horizontalPlacement === Position.Auto
|
|
137
|
+
? (elementPos[0] - tooltipWidth < 0 ? Position.Right
|
|
138
|
+
: elementPos[0] + tooltipWidth > containerWidth ? Position.Left : Position.Center)
|
|
139
|
+
: config.horizontalPlacement;
|
|
140
|
+
let translateX = '';
|
|
141
|
+
switch (horizontalPlacement) {
|
|
142
|
+
case Position.Left:
|
|
143
|
+
translateX = `calc(-100% - ${margin}px)`;
|
|
144
|
+
break;
|
|
145
|
+
case Position.Right:
|
|
146
|
+
translateX = `calc(${hoveredElementRect.width}px + ${margin}px)`;
|
|
147
|
+
break;
|
|
148
|
+
case Position.Center:
|
|
149
|
+
default:
|
|
150
|
+
translateX = `calc(-50% + ${hoveredElementRect.width / 2}px)`;
|
|
151
|
+
break;
|
|
152
|
+
}
|
|
153
|
+
const verticalPlacement = config.verticalPlacement === Position.Auto
|
|
154
|
+
? (horizontalPlacement !== Position.Center ? Position.Center
|
|
155
|
+
: elementPos[1] - tooltipHeight < 0 ? Position.Bottom : Position.Top)
|
|
156
|
+
: config.verticalPlacement;
|
|
157
|
+
let translateY = '';
|
|
158
|
+
switch (verticalPlacement) {
|
|
159
|
+
case Position.Center:
|
|
160
|
+
translateY = `calc(50% + ${hoveredElementRect.height / 2}px)`;
|
|
161
|
+
break;
|
|
162
|
+
case Position.Bottom:
|
|
163
|
+
translateY = `calc(100% + ${hoveredElementRect.height}px + ${margin}px)`;
|
|
164
|
+
break;
|
|
165
|
+
case Position.Top:
|
|
166
|
+
default:
|
|
167
|
+
translateY = `${-margin}px`;
|
|
168
|
+
break;
|
|
169
|
+
}
|
|
170
|
+
const translate = `translate(${translateX}, ${translateY})`;
|
|
171
|
+
this._applyPosition(elementPos[0], elementPos[1], translate, tooltipHeight);
|
|
120
172
|
}
|
|
121
173
|
isContainerBody() {
|
|
122
174
|
return this._container === document.body;
|
|
123
175
|
}
|
|
176
|
+
_render(html) {
|
|
177
|
+
const { config } = this;
|
|
178
|
+
if (html instanceof HTMLElement) {
|
|
179
|
+
const node = this.div.select(':first-child').node();
|
|
180
|
+
if (node !== html)
|
|
181
|
+
this.div.html('').append(() => html);
|
|
182
|
+
}
|
|
183
|
+
else if (html) {
|
|
184
|
+
this.div.html(html);
|
|
185
|
+
}
|
|
186
|
+
this.div
|
|
187
|
+
.classed(nonInteractive, !config.allowHover || config.followCursor)
|
|
188
|
+
.classed(hidden, false)
|
|
189
|
+
.classed(show, true);
|
|
190
|
+
this._isShown = true;
|
|
191
|
+
}
|
|
192
|
+
_applyPosition(x, y, transform, tooltipHeight) {
|
|
193
|
+
const isContainerBody = this.isContainerBody();
|
|
194
|
+
const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight;
|
|
195
|
+
this.div
|
|
196
|
+
.classed(positionFixed, isContainerBody)
|
|
197
|
+
.style('top', isContainerBody ? `${y - tooltipHeight}px` : 'unset')
|
|
198
|
+
.style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')
|
|
199
|
+
.style('left', `${x}px`)
|
|
200
|
+
// We use `transform` to position the tooltip with relative units like percentages,
|
|
201
|
+
// this way it works automatically with dynamic content that can change the tooltip's size
|
|
202
|
+
.style('transform', transform);
|
|
203
|
+
}
|
|
124
204
|
_setContainerPosition() {
|
|
125
205
|
var _a;
|
|
126
206
|
// Tooltip position calculation relies on the parent position
|
|
@@ -130,8 +210,7 @@ class Tooltip {
|
|
|
130
210
|
}
|
|
131
211
|
}
|
|
132
212
|
_setUpEvents() {
|
|
133
|
-
const { config
|
|
134
|
-
const isContainerBody = this.isContainerBody();
|
|
213
|
+
const { config } = this;
|
|
135
214
|
// We use the Event Delegation pattern to set up Tooltip events
|
|
136
215
|
// Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check
|
|
137
216
|
// the `path` of the event and trigger corresponding callbacks
|
|
@@ -139,11 +218,10 @@ class Tooltip {
|
|
|
139
218
|
const selection = select(component.element);
|
|
140
219
|
selection
|
|
141
220
|
.on('mousemove.tooltip', (e) => {
|
|
142
|
-
const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container);
|
|
143
221
|
const path = (e.composedPath && e.composedPath()) || e.path || [e.target];
|
|
144
222
|
// Go through all of the configured triggers
|
|
145
|
-
for (const className of Object.keys(triggers)) {
|
|
146
|
-
const template = triggers[className];
|
|
223
|
+
for (const className of Object.keys(config.triggers)) {
|
|
224
|
+
const template = config.triggers[className];
|
|
147
225
|
if (!template)
|
|
148
226
|
continue; // Skip if the trigger is not configured
|
|
149
227
|
const els = selection.selectAll(`.${className}`).nodes();
|
|
@@ -155,10 +233,19 @@ class Tooltip {
|
|
|
155
233
|
const i = els.indexOf(el);
|
|
156
234
|
const d = select(el).datum();
|
|
157
235
|
const content = template(d, i, els);
|
|
158
|
-
if (content)
|
|
159
|
-
|
|
160
|
-
else
|
|
236
|
+
if (content === null) {
|
|
237
|
+
// If the content is `null`, we hide the tooltip
|
|
161
238
|
this.hide();
|
|
239
|
+
}
|
|
240
|
+
else {
|
|
241
|
+
// Otherwise we show the tooltip, but don't render the content if it's `undefined` or
|
|
242
|
+
// an empty string. This way we can allow it to work with things like `createPortal` in React
|
|
243
|
+
this._render(content);
|
|
244
|
+
if (config.followCursor)
|
|
245
|
+
this.placeByPointerEvent(e);
|
|
246
|
+
else
|
|
247
|
+
this.placeByElement(el);
|
|
248
|
+
}
|
|
162
249
|
e.stopPropagation(); // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair
|
|
163
250
|
return; // Stop looking for other matches
|
|
164
251
|
}
|
|
@@ -175,6 +262,17 @@ class Tooltip {
|
|
|
175
262
|
this.hide();
|
|
176
263
|
});
|
|
177
264
|
});
|
|
265
|
+
// Set up Tooltip hover
|
|
266
|
+
if (config.allowHover && !config.followCursor) {
|
|
267
|
+
this.div
|
|
268
|
+
.on('mouseenter.tooltip', this.display.bind(this))
|
|
269
|
+
.on('mouseleave.tooltip', this.hide.bind(this));
|
|
270
|
+
}
|
|
271
|
+
else {
|
|
272
|
+
this.div
|
|
273
|
+
.on('mouseenter.tooltip', null)
|
|
274
|
+
.on('mouseleave.tooltip', null);
|
|
275
|
+
}
|
|
178
276
|
}
|
|
179
277
|
_setUpAttributes() {
|
|
180
278
|
const attributesMap = this.config.attributes;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["import { select, Selection, pointer } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\n// Utils\nimport { merge, throttle } from 'utils/data'\n\n// Config\nimport { TooltipDefaultConfig, TooltipConfigInterface } from './config'\n\n// Style\nimport * as s from './style'\n\nexport class Tooltip {\n element: HTMLElement\n div: Selection<HTMLElement, unknown, null, undefined>\n protected _defaultConfig = TooltipDefaultConfig as TooltipConfigInterface\n public config: TooltipConfigInterface = this._defaultConfig\n prevConfig: TooltipConfigInterface\n components: ComponentCore<unknown>[]\n static selectors = s\n private _setUpEventsThrottled = throttle(this._setUpEvents, 500)\n private _setContainerPositionThrottled = throttle(this._setContainerPosition, 500)\n private _isShown = false\n private _container: HTMLElement\n\n constructor (config: TooltipConfigInterface = {}) {\n this.element = document.createElement('div')\n this.div = select(this.element)\n .attr('class', s.tooltip)\n\n this.setConfig(config)\n this.components = this.config.components\n }\n\n public setConfig (config: TooltipConfigInterface): void {\n this.prevConfig = this.config\n this.config = merge(this._defaultConfig, config)\n\n if (this.config.container && (this.config.container !== this.prevConfig?.container)) {\n this.setContainer(this.config.container)\n }\n\n this._setUpAttributes()\n }\n\n public setContainer (container: HTMLElement): void {\n this.element.parentNode?.removeChild(this.element)\n\n this._container = container\n this._container.appendChild(this.element)\n\n this._setContainerPositionThrottled()\n }\n\n public getContainer (): HTMLElement {\n return this._container\n }\n\n public hasContainer (): boolean {\n return !!this._container && this._container.isConnected\n }\n\n public setComponents (components: ComponentCore<unknown>[]): void {\n this.components = components\n }\n\n public update (): void {\n if (!this._container) return\n\n this._setUpEventsThrottled()\n }\n\n public show (html: string | HTMLElement, pos: { x: number; y: number }): void {\n if (html instanceof HTMLElement) {\n const node = this.div.select(':first-child').node()\n if (node !== html) this.div.html('').append(() => html)\n } else {\n this.div.html(html)\n }\n\n this.div\n .classed(s.hidden, false)\n .classed(s.show, true)\n\n this._isShown = true\n this.place(pos)\n }\n\n public hide (): void {\n this.div.classed(s.show, false)\n .on('transitionend', () => {\n // We hide the element once the transition completes\n // This ensures container overflow will not occur when the window is resized\n this.div.classed(s.hidden, !this._isShown)\n })\n\n this._isShown = false\n }\n\n public place (pos: { x: number; y: number }): void {\n if (!this.hasContainer()) {\n console.warn('Unovis | Tooltip: Container was not set or is not initialized yet')\n return\n }\n const { config } = this\n const isContainerBody = this.isContainerBody()\n const width = this.element.offsetWidth\n const height = this.element.offsetHeight\n const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight\n const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth\n\n const horizontalPlacement = config.horizontalPlacement === Position.Auto\n ? (pos.x > containerWidth / 2 ? Position.Left : Position.Right)\n : config.horizontalPlacement\n\n const verticalPlacement = config.verticalPlacement === Position.Auto\n ? (pos.y > containerHeight / 2 ? Position.Top : Position.Bottom)\n : config.verticalPlacement\n\n // dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)\n const margin = 5\n const dx = horizontalPlacement === Position.Left ? -width - margin - config.horizontalShift\n : horizontalPlacement === Position.Center ? -width / 2\n : margin + config.horizontalShift\n const dy = verticalPlacement === Position.Bottom ? height + margin + config.verticalShift\n : verticalPlacement === Position.Center ? height / 2\n : -margin - config.verticalShift\n\n // Constraint to container\n const paddingX = 10\n const hitRight = pos.x > (containerWidth - width - dx - paddingX)\n const hitLeft = pos.x < -dx + paddingX\n const constraintX = hitRight ? (containerWidth - width - dx) - pos.x - paddingX\n : hitLeft ? -dx - pos.x + paddingX : 0\n\n const paddingY = 10\n const hitBottom = pos.y > (containerHeight - dy - paddingY)\n const hitTop = pos.y < (height - dy + paddingY)\n const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY\n : hitTop ? height - dy - pos.y + paddingY : 0\n\n // Placing\n // If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left\n const x = containerWidth < width ? 0 : pos.x + constraintX + dx\n const y = containerHeight < height ? height : pos.y + constraintY + dy\n\n this.div\n .classed(s.positionFixed, isContainerBody)\n .style('top', isContainerBody ? `${y - height}px` : 'unset')\n .style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')\n .style('left', `${x}px`)\n }\n\n public isContainerBody (): boolean {\n return this._container === document.body\n }\n\n private _setContainerPosition (): void {\n // Tooltip position calculation relies on the parent position\n // If it's not set (static), we set it to `relative` (not a good practice)\n if (this._container !== document.body && getComputedStyle(this._container)?.position === 'static') {\n this._container.style.position = 'relative'\n }\n }\n\n private _setUpEvents (): void {\n const { config: { triggers } } = this\n const isContainerBody = this.isContainerBody()\n\n // We use the Event Delegation pattern to set up Tooltip events\n // Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check\n // the `path` of the event and trigger corresponding callbacks\n this.components.forEach(component => {\n const selection = select(component.element)\n selection\n .on('mousemove.tooltip', (e: MouseEvent) => {\n const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container)\n const path: (HTMLElement | SVGGElement)[] = (e.composedPath && e.composedPath()) || (e as any).path || [e.target]\n\n // Go through all of the configured triggers\n for (const className of Object.keys(triggers)) {\n const template = triggers[className]\n if (!template) continue // Skip if the trigger is not configured\n\n const els = selection.selectAll<HTMLElement | SVGGElement, unknown>(`.${className}`).nodes()\n\n // Go through all of the elements in the event path (from the deepest element upwards)\n for (const el of path) {\n if (el === selection.node()) break // Break on the component's level (usually the `<g>` element)\n if (el.classList.contains(className)) { // If there's a match, show the tooltip\n const i = els.indexOf(el)\n const d = select(el).datum()\n const content = template(d, i, els)\n if (content) this.show(content, { x, y })\n else this.hide()\n\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n return // Stop looking for other matches\n }\n }\n }\n\n // Hide the tooltip if the event didn't pass through any of the configured triggers.\n // We use the `this._isShown` condition as a little performance optimization tweak\n // (we don't want the tooltip to update its class on every mouse movement, see `this.hide()`).\n if (this._isShown) this.hide()\n })\n .on('mouseleave.tooltip', (e: MouseEvent) => {\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n this.hide()\n })\n })\n }\n\n private _setUpAttributes (): void {\n const attributesMap = this.config.attributes\n if (!attributesMap) return\n\n Object.keys(attributesMap).forEach(attr => {\n this.div.attr(attr, attributesMap[attr])\n })\n }\n\n public destroy (): void {\n this.div?.remove()\n }\n}\n"],"names":["s.tooltip","s.hidden","s.show","s.positionFixed","s"],"mappings":";;;;;;;MAiBa,OAAO,CAAA;AAalB,IAAA,WAAA,CAAa,SAAiC,EAAE,EAAA;QAVtC,IAAc,CAAA,cAAA,GAAG,oBAA8C,CAAA;AAClE,QAAA,IAAA,CAAA,MAAM,GAA2B,IAAI,CAAC,cAAc,CAAA;QAInD,IAAqB,CAAA,qBAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,CAAC,CAAA;QACxD,IAA8B,CAAA,8BAAA,GAAG,QAAQ,CAAC,IAAI,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAA;QAC1E,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAA;QAItB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC5C,IAAI,CAAC,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;AAC5B,aAAA,IAAI,CAAC,OAAO,EAAEA,OAAS,CAAC,CAAA;AAE3B,QAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;QACtB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAA;KACzC;AAEM,IAAA,SAAS,CAAE,MAA8B,EAAA;;AAC9C,QAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM,CAAA;QAC7B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;QAEhD,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,KAAK,IAAI,CAAC,MAAM,CAAC,SAAS,MAAK,MAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,SAAS,CAAA,CAAC,EAAE;YACnF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;AACzC,SAAA;QAED,IAAI,CAAC,gBAAgB,EAAE,CAAA;KACxB;AAEM,IAAA,YAAY,CAAE,SAAsB,EAAA;;AACzC,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;AAElD,QAAA,IAAI,CAAC,UAAU,GAAG,SAAS,CAAA;QAC3B,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;QAEzC,IAAI,CAAC,8BAA8B,EAAE,CAAA;KACtC;IAEM,YAAY,GAAA;QACjB,OAAO,IAAI,CAAC,UAAU,CAAA;KACvB;IAEM,YAAY,GAAA;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,WAAW,CAAA;KACxD;AAEM,IAAA,aAAa,CAAE,UAAoC,EAAA;AACxD,QAAA,IAAI,CAAC,UAAU,GAAG,UAAU,CAAA;KAC7B;IAEM,MAAM,GAAA;QACX,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAM;QAE5B,IAAI,CAAC,qBAAqB,EAAE,CAAA;KAC7B;IAEM,IAAI,CAAE,IAA0B,EAAE,GAA6B,EAAA;QACpE,IAAI,IAAI,YAAY,WAAW,EAAE;AAC/B,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,IAAI,EAAE,CAAA;YACnD,IAAI,IAAI,KAAK,IAAI;AAAE,gBAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAA;AACxD,SAAA;AAAM,aAAA;AACL,YAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACpB,SAAA;AAED,QAAA,IAAI,CAAC,GAAG;AACL,aAAA,OAAO,CAACC,MAAQ,EAAE,KAAK,CAAC;AACxB,aAAA,OAAO,CAACC,IAAM,EAAE,IAAI,CAAC,CAAA;AAExB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;AACpB,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;KAChB;IAEM,IAAI,GAAA;QACT,IAAI,CAAC,GAAG,CAAC,OAAO,CAACA,IAAM,EAAE,KAAK,CAAC;AAC5B,aAAA,EAAE,CAAC,eAAe,EAAE,MAAK;;;AAGxB,YAAA,IAAI,CAAC,GAAG,CAAC,OAAO,CAACD,MAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;AAC5C,SAAC,CAAC,CAAA;AAEJ,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;KACtB;AAEM,IAAA,KAAK,CAAE,GAA6B,EAAA;AACzC,QAAA,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE;AACxB,YAAA,OAAO,CAAC,IAAI,CAAC,mEAAmE,CAAC,CAAA;YACjF,OAAM;AACP,SAAA;AACD,QAAA,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAA;AACvB,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;AAC9C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,CAAA;AACtC,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,CAAA;AACxC,QAAA,MAAM,eAAe,GAAG,eAAe,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,YAAY,CAAA;AAC3F,QAAA,MAAM,cAAc,GAAG,eAAe,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,WAAW,CAAA;QAExF,MAAM,mBAAmB,GAAG,MAAM,CAAC,mBAAmB,KAAK,QAAQ,CAAC,IAAI;eACnE,GAAG,CAAC,CAAC,GAAG,cAAc,GAAG,CAAC,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,KAAK;AAC9D,cAAE,MAAM,CAAC,mBAAmB,CAAA;QAE9B,MAAM,iBAAiB,GAAG,MAAM,CAAC,iBAAiB,KAAK,QAAQ,CAAC,IAAI;eAC/D,GAAG,CAAC,CAAC,GAAG,eAAe,GAAG,CAAC,GAAG,QAAQ,CAAC,GAAG,GAAG,QAAQ,CAAC,MAAM;AAC/D,cAAE,MAAM,CAAC,iBAAiB,CAAA;;QAG5B,MAAM,MAAM,GAAG,CAAC,CAAA;AAChB,QAAA,MAAM,EAAE,GAAG,mBAAmB,KAAK,QAAQ,CAAC,IAAI,GAAG,CAAC,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC,eAAe;AACzF,cAAE,mBAAmB,KAAK,QAAQ,CAAC,MAAM,GAAG,CAAC,KAAK,GAAG,CAAC;AACpD,kBAAE,MAAM,GAAG,MAAM,CAAC,eAAe,CAAA;AACrC,QAAA,MAAM,EAAE,GAAG,iBAAiB,KAAK,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,aAAa;cACrF,iBAAiB,KAAK,QAAQ,CAAC,MAAM,GAAG,MAAM,GAAG,CAAC;AAClD,kBAAE,CAAC,MAAM,GAAG,MAAM,CAAC,aAAa,CAAA;;QAGpC,MAAM,QAAQ,GAAG,EAAE,CAAA;AACnB,QAAA,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,IAAI,cAAc,GAAG,KAAK,GAAG,EAAE,GAAG,QAAQ,CAAC,CAAA;QACjE,MAAM,OAAO,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,QAAQ,CAAA;AACtC,QAAA,MAAM,WAAW,GAAG,QAAQ,GAAG,CAAC,cAAc,GAAG,KAAK,GAAG,EAAE,IAAI,GAAG,CAAC,CAAC,GAAG,QAAQ;AAC7E,cAAE,OAAO,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAA;QAExC,MAAM,QAAQ,GAAG,EAAE,CAAA;AACnB,QAAA,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,IAAI,eAAe,GAAG,EAAE,GAAG,QAAQ,CAAC,CAAA;AAC3D,QAAA,MAAM,MAAM,GAAG,GAAG,CAAC,CAAC,IAAI,MAAM,GAAG,EAAE,GAAG,QAAQ,CAAC,CAAA;AAC/C,QAAA,MAAM,WAAW,GAAG,SAAS,GAAG,eAAe,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,QAAQ;AACrE,cAAE,MAAM,GAAG,MAAM,GAAG,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,QAAQ,GAAG,CAAC,CAAA;;;AAI/C,QAAA,MAAM,CAAC,GAAG,cAAc,GAAG,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,EAAE,CAAA;AAC/D,QAAA,MAAM,CAAC,GAAG,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,WAAW,GAAG,EAAE,CAAA;AAEtE,QAAA,IAAI,CAAC,GAAG;AACL,aAAA,OAAO,CAACE,aAAe,EAAE,eAAe,CAAC;AACzC,aAAA,KAAK,CAAC,KAAK,EAAE,eAAe,GAAG,CAAA,EAAG,CAAC,GAAG,MAAM,CAAI,EAAA,CAAA,GAAG,OAAO,CAAC;AAC3D,aAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,eAAe,GAAG,CAAG,EAAA,eAAe,GAAG,CAAC,CAAA,EAAA,CAAI,GAAG,OAAO,CAAC;AACxE,aAAA,KAAK,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA,EAAA,CAAI,CAAC,CAAA;KAC3B;IAEM,eAAe,GAAA;AACpB,QAAA,OAAO,IAAI,CAAC,UAAU,KAAK,QAAQ,CAAC,IAAI,CAAA;KACzC;IAEO,qBAAqB,GAAA;;;;QAG3B,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,CAAC,IAAI,IAAI,CAAA,CAAA,EAAA,GAAA,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,0CAAE,QAAQ,MAAK,QAAQ,EAAE;YACjG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAA;AAC5C,SAAA;KACF;IAEO,YAAY,GAAA;QAClB,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,EAAE,EAAE,GAAG,IAAI,CAAA;AACrC,QAAA,MAAM,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,CAAA;;;;AAK9C,QAAA,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,SAAS,IAAG;YAClC,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;YAC3C,SAAS;AACN,iBAAA,EAAE,CAAC,mBAAmB,EAAE,CAAC,CAAa,KAAI;AACzC,gBAAA,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,eAAe,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,OAAO,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,CAAC,CAAA;gBACrF,MAAM,IAAI,GAAkC,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,YAAY,EAAE,KAAM,CAAS,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAA;;gBAGjH,KAAK,MAAM,SAAS,IAAI,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;AAC7C,oBAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAA;AACpC,oBAAA,IAAI,CAAC,QAAQ;AAAE,wBAAA,SAAQ;AAEvB,oBAAA,MAAM,GAAG,GAAG,SAAS,CAAC,SAAS,CAAqC,CAAI,CAAA,EAAA,SAAS,CAAE,CAAA,CAAC,CAAC,KAAK,EAAE,CAAA;;AAG5F,oBAAA,KAAK,MAAM,EAAE,IAAI,IAAI,EAAE;AACrB,wBAAA,IAAI,EAAE,KAAK,SAAS,CAAC,IAAI,EAAE;AAAE,4BAAA,MAAK;wBAClC,IAAI,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;4BACpC,MAAM,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CAAA;4BACzB,MAAM,CAAC,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAA;4BAC5B,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAA;AACnC,4BAAA,IAAI,OAAO;gCAAE,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAA;;gCACpC,IAAI,CAAC,IAAI,EAAE,CAAA;AAEhB,4BAAA,CAAC,CAAC,eAAe,EAAE,CAAA;AACnB,4BAAA,OAAM;AACP,yBAAA;AACF,qBAAA;AACF,iBAAA;;;;gBAKD,IAAI,IAAI,CAAC,QAAQ;oBAAE,IAAI,CAAC,IAAI,EAAE,CAAA;AAChC,aAAC,CAAC;AACD,iBAAA,EAAE,CAAC,oBAAoB,EAAE,CAAC,CAAa,KAAI;AAC1C,gBAAA,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,IAAI,CAAC,IAAI,EAAE,CAAA;AACb,aAAC,CAAC,CAAA;AACN,SAAC,CAAC,CAAA;KACH;IAEO,gBAAgB,GAAA;AACtB,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAA;AAC5C,QAAA,IAAI,CAAC,aAAa;YAAE,OAAM;QAE1B,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;AACxC,YAAA,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC,CAAA;AAC1C,SAAC,CAAC,CAAA;KACH;IAEM,OAAO,GAAA;;AACZ,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,GAAG,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAM,EAAE,CAAA;KACnB;;AA9MM,OAAS,CAAA,SAAA,GAAGC,KAAC;;;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/tooltip/index.ts"],"sourcesContent":["import { select, Selection, pointer } from 'd3-selection'\n\n// Core\nimport { ComponentCore } from 'core/component'\n\n// Types\nimport { Position } from 'types/position'\n\n// Utils\nimport { merge, throttle } from 'utils/data'\n\n// Config\nimport { TooltipDefaultConfig, TooltipConfigInterface } from './config'\n\n// Style\nimport * as s from './style'\n\nexport class Tooltip {\n element: HTMLElement\n div: Selection<HTMLElement, unknown, null, undefined>\n protected _defaultConfig = TooltipDefaultConfig as TooltipConfigInterface\n public config: TooltipConfigInterface = this._defaultConfig\n prevConfig: TooltipConfigInterface\n components: ComponentCore<unknown>[]\n static selectors = s\n private _setUpEventsThrottled = throttle(this._setUpEvents, 500)\n private _setContainerPositionThrottled = throttle(this._setContainerPosition, 500)\n private _isShown = false\n private _container: HTMLElement\n\n constructor (config: TooltipConfigInterface = {}) {\n this.element = document.createElement('div')\n this.div = select(this.element)\n .attr('class', s.root)\n\n this.setConfig(config)\n this.components = this.config.components\n }\n\n public setConfig (config: TooltipConfigInterface): void {\n this.prevConfig = this.config\n this.config = merge(this._defaultConfig, config)\n\n if (this.config.container && (this.config.container !== this.prevConfig?.container)) {\n this.setContainer(this.config.container)\n }\n\n this._setUpAttributes()\n }\n\n public setContainer (container: HTMLElement): void {\n this.element.parentNode?.removeChild(this.element)\n\n this._container = container\n this._container.appendChild(this.element)\n\n this._setContainerPositionThrottled()\n }\n\n public getContainer (): HTMLElement {\n return this._container\n }\n\n public hasContainer (): boolean {\n return !!this._container && this._container.isConnected\n }\n\n public setComponents (components: ComponentCore<unknown>[]): void {\n this.components = components\n }\n\n public update (): void {\n if (!this._container) return\n\n this._setUpEventsThrottled()\n }\n\n /** Show the tooltip by providing content and position */\n public show (html: string | HTMLElement | null | void, pos: { x: number; y: number }): void {\n this._render(html)\n this.place(pos)\n }\n\n /** Hide the tooltip */\n public hide (): void {\n this.div.classed(s.show, false)\n .on('transitionend', () => {\n // We hide the element once the transition completes\n // This ensures container overflow will not occur when the window is resized\n this.div.classed(s.hidden, !this._isShown)\n })\n\n this._isShown = false\n }\n\n /** Simply displays the tooltip with its previous content on position */\n public display (): void {\n this.div\n .classed(s.hidden, false)\n .classed(s.show, true)\n\n this._isShown = true\n }\n\n public place (pos: { x: number; y: number }): void {\n if (!this.hasContainer()) {\n console.warn('Unovis | Tooltip: Container was not set or is not initialized yet')\n return\n }\n const { config } = this\n const isContainerBody = this.isContainerBody()\n const tooltipWidth = this.element.offsetWidth\n const tooltipHeight = this.element.offsetHeight\n const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight\n const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth\n\n const horizontalPlacement = config.horizontalPlacement === Position.Auto\n ? Position.Center\n : config.horizontalPlacement\n\n const verticalPlacement = config.verticalPlacement === Position.Auto\n ? ((pos.y - tooltipHeight) > containerHeight / 8 ? Position.Top : Position.Bottom)\n : config.verticalPlacement\n\n // dx and dy variables shift the tooltip from the default position (above the cursor, centred horizontally)\n const margin = 5\n const dx = horizontalPlacement === Position.Left ? -tooltipWidth - margin - config.horizontalShift\n : horizontalPlacement === Position.Center ? -tooltipWidth / 2\n : margin + config.horizontalShift\n const dy = verticalPlacement === Position.Bottom ? tooltipHeight + margin + config.verticalShift\n : verticalPlacement === Position.Center ? tooltipHeight / 2\n : -margin - config.verticalShift\n\n // Constraint to container\n const paddingX = 10\n const hitRight = pos.x > (containerWidth - tooltipWidth - dx - paddingX)\n const hitLeft = pos.x < -dx + paddingX\n const constraintX = hitRight ? (containerWidth - tooltipWidth - dx) - pos.x - paddingX\n : hitLeft ? -dx - pos.x + paddingX : 0\n\n const paddingY = 10\n const hitBottom = pos.y > (containerHeight - dy - paddingY)\n const hitTop = pos.y < (tooltipHeight - dy + paddingY)\n const constraintY = hitBottom ? containerHeight - dy - pos.y - paddingY\n : hitTop ? tooltipHeight - dy - pos.y + paddingY : 0\n\n // Placing\n // If the container size is smaller than the the tooltip size we just stick the tooltip to the top / left\n const x = containerWidth < tooltipWidth ? 0 : pos.x + constraintX + dx\n const y = containerHeight < tooltipHeight ? tooltipHeight : pos.y + constraintY + dy\n\n this._applyPosition(x, y, null, tooltipHeight)\n }\n\n public placeByPointerEvent (e: PointerEvent | MouseEvent): void {\n const isContainerBody = this.isContainerBody()\n const [x, y] = isContainerBody ? [e.clientX, e.clientY] : pointer(e, this._container)\n this.place({ x, y })\n }\n\n public placeByElement (hoveredElement: SVGGElement | HTMLElement): void {\n const { config } = this\n const margin = 5\n const tooltipWidth = this.element.offsetWidth\n const tooltipHeight = this.element.offsetHeight\n const isContainerBody = this.isContainerBody()\n const containerWidth = isContainerBody ? window.innerWidth : this._container.scrollWidth\n const hoveredElementRect = hoveredElement.getBoundingClientRect()\n\n // We use D3's point transformation to get the correct position of the element by pretending it's a pointer event\n // See more: https://github.com/d3/d3-selection/blob/main/src/pointer.js\n const elementPos = pointer({\n clientX: hoveredElementRect.x,\n clientY: hoveredElementRect.y,\n pageX: hoveredElementRect.x,\n pageY: hoveredElementRect.y,\n }, this._container)\n\n const horizontalPlacement = config.horizontalPlacement === Position.Auto\n ? (elementPos[0] - tooltipWidth < 0 ? Position.Right\n : elementPos[0] + tooltipWidth > containerWidth ? Position.Left : Position.Center)\n : config.horizontalPlacement\n\n let translateX = ''\n switch (horizontalPlacement) {\n case Position.Left:\n translateX = `calc(-100% - ${margin}px)`\n break\n case Position.Right:\n translateX = `calc(${hoveredElementRect.width}px + ${margin}px)`\n break\n case Position.Center:\n default:\n translateX = `calc(-50% + ${hoveredElementRect.width / 2}px)`\n break\n }\n\n const verticalPlacement = config.verticalPlacement === Position.Auto\n ? (horizontalPlacement !== Position.Center ? Position.Center\n : elementPos[1] - tooltipHeight < 0 ? Position.Bottom : Position.Top)\n : config.verticalPlacement\n\n let translateY = ''\n switch (verticalPlacement) {\n case Position.Center:\n translateY = `calc(50% + ${hoveredElementRect.height / 2}px)`\n break\n case Position.Bottom:\n translateY = `calc(100% + ${hoveredElementRect.height}px + ${margin}px)`\n break\n case Position.Top:\n default:\n translateY = `${-margin}px`\n break\n }\n\n const translate = `translate(${translateX}, ${translateY})`\n this._applyPosition(elementPos[0], elementPos[1], translate, tooltipHeight)\n }\n\n public isContainerBody (): boolean {\n return this._container === document.body\n }\n\n private _render (html: string | HTMLElement | null | void): void {\n const { config } = this\n if (html instanceof HTMLElement) {\n const node = this.div.select(':first-child').node()\n if (node !== html) this.div.html('').append(() => html)\n } else if (html) {\n this.div.html(html)\n }\n\n this.div\n .classed(s.nonInteractive, !config.allowHover || config.followCursor)\n .classed(s.hidden, false)\n .classed(s.show, true)\n\n this._isShown = true\n }\n\n private _applyPosition (x: number, y: number, transform: string | null, tooltipHeight: number): void {\n const isContainerBody = this.isContainerBody()\n const containerHeight = isContainerBody ? window.innerHeight : this._container.scrollHeight\n\n this.div\n .classed(s.positionFixed, isContainerBody)\n .style('top', isContainerBody ? `${y - tooltipHeight}px` : 'unset')\n .style('bottom', !isContainerBody ? `${containerHeight - y}px` : 'unset')\n .style('left', `${x}px`)\n // We use `transform` to position the tooltip with relative units like percentages,\n // this way it works automatically with dynamic content that can change the tooltip's size\n .style('transform', transform)\n }\n\n private _setContainerPosition (): void {\n // Tooltip position calculation relies on the parent position\n // If it's not set (static), we set it to `relative` (not a good practice)\n if (this._container !== document.body && getComputedStyle(this._container)?.position === 'static') {\n this._container.style.position = 'relative'\n }\n }\n\n private _setUpEvents (): void {\n const { config } = this\n\n // We use the Event Delegation pattern to set up Tooltip events\n // Every component will have single `mousemove` and `mouseleave` event listener functions, where we'll check\n // the `path` of the event and trigger corresponding callbacks\n this.components.forEach(component => {\n const selection = select(component.element)\n selection\n .on('mousemove.tooltip', (e: MouseEvent) => {\n const path: (HTMLElement | SVGGElement)[] = (e.composedPath && e.composedPath()) || (e as any).path || [e.target]\n\n // Go through all of the configured triggers\n for (const className of Object.keys(config.triggers)) {\n const template = config.triggers[className]\n if (!template) continue // Skip if the trigger is not configured\n\n const els = selection.selectAll<HTMLElement | SVGGElement, unknown>(`.${className}`).nodes()\n\n // Go through all of the elements in the event path (from the deepest element upwards)\n for (const el of path) {\n if (el === selection.node()) break // Break on the component's level (usually the `<g>` element)\n if (el.classList.contains(className)) { // If there's a match, show the tooltip\n const i = els.indexOf(el)\n const d = select(el).datum()\n const content = template(d, i, els)\n\n if (content === null) {\n // If the content is `null`, we hide the tooltip\n this.hide()\n } else {\n // Otherwise we show the tooltip, but don't render the content if it's `undefined` or\n // an empty string. This way we can allow it to work with things like `createPortal` in React\n this._render(content)\n if (config.followCursor) this.placeByPointerEvent(e)\n else this.placeByElement(el)\n }\n\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n return // Stop looking for other matches\n }\n }\n }\n\n // Hide the tooltip if the event didn't pass through any of the configured triggers.\n // We use the `this._isShown` condition as a little performance optimization tweak\n // (we don't want the tooltip to update its class on every mouse movement, see `this.hide()`).\n if (this._isShown) this.hide()\n })\n .on('mouseleave.tooltip', (e: MouseEvent) => {\n e.stopPropagation() // Stop propagation to prevent other interfering events from being triggered, e.g. Crosshair\n this.hide()\n })\n })\n\n // Set up Tooltip hover\n if (config.allowHover && !config.followCursor) {\n this.div\n .on('mouseenter.tooltip', this.display.bind(this))\n .on('mouseleave.tooltip', this.hide.bind(this))\n } else {\n this.div\n .on('mouseenter.tooltip', null)\n .on('mouseleave.tooltip', null)\n }\n }\n\n private _setUpAttributes (): void {\n const attributesMap = this.config.attributes\n if (!attributesMap) return\n\n Object.keys(attributesMap).forEach(attr => {\n this.div.attr(attr, attributesMap[attr])\n })\n }\n\n public destroy (): void {\n this.div?.remove()\n }\n}\n"],"names":["s.root","s.show","s.hidden","s.nonInteractive","s.positionFixed","s"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const root: string;
|
|
2
2
|
export declare const variables: void;
|
|
3
|
-
export declare const tooltip: string;
|
|
4
3
|
export declare const positionFixed: string;
|
|
5
4
|
export declare const show: string;
|
|
6
5
|
export declare const hidden: string;
|
|
6
|
+
export declare const nonInteractive: string;
|
|
@@ -2,6 +2,22 @@ import { css, injectGlobal } from '@emotion/css';
|
|
|
2
2
|
|
|
3
3
|
const root = css `
|
|
4
4
|
label: tooltip;
|
|
5
|
+
display: inline-block;
|
|
6
|
+
left: 0;
|
|
7
|
+
bottom: 0;
|
|
8
|
+
min-width: max-content;
|
|
9
|
+
position: absolute;
|
|
10
|
+
opacity: 0;
|
|
11
|
+
transition: opacity;
|
|
12
|
+
transition-duration: var(--vis-tooltip-transition-duration);
|
|
13
|
+
z-index: 999999;
|
|
14
|
+
padding: var(--vis-tooltip-padding);
|
|
15
|
+
color: var(--vis-tooltip-text-color);
|
|
16
|
+
border-radius: var(--vis-tooltip-border-radius);
|
|
17
|
+
box-shadow: var(--vis-tooltip-box-shadow);
|
|
18
|
+
border: solid 1px var(--vis-tooltip-border-color);
|
|
19
|
+
background-color: var(--vis-tooltip-background-color);
|
|
20
|
+
backdrop-filter: var(--vis-tooltip-backdrop-filter);
|
|
5
21
|
`;
|
|
6
22
|
const variables = injectGlobal `
|
|
7
23
|
:root {
|
|
@@ -11,6 +27,9 @@ const variables = injectGlobal `
|
|
|
11
27
|
--vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);
|
|
12
28
|
--vis-tooltip-backdrop-filter: none;
|
|
13
29
|
--vis-tooltip-padding: 10px 15px;
|
|
30
|
+
--vis-tooltip-border-radius: 5px;
|
|
31
|
+
--vis-tooltip-transition-duration: 300ms;
|
|
32
|
+
--vis-tooltip-box-shadow: none;
|
|
14
33
|
|
|
15
34
|
--vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);
|
|
16
35
|
--vis-dark-tooltip-text-color: #e5e9f7;
|
|
@@ -32,30 +51,6 @@ const variables = injectGlobal `
|
|
|
32
51
|
--vis-tooltip-shadow-color: rgba(0,0,0, 0.95);
|
|
33
52
|
}
|
|
34
53
|
`;
|
|
35
|
-
const tooltip = css `
|
|
36
|
-
label: tooltip;
|
|
37
|
-
display: inline-block;
|
|
38
|
-
left: 0;
|
|
39
|
-
bottom: 0;
|
|
40
|
-
min-width: max-content;
|
|
41
|
-
position: absolute;
|
|
42
|
-
pointer-events: none;
|
|
43
|
-
opacity: 0;
|
|
44
|
-
transition: opacity;
|
|
45
|
-
transition-duration: 300ms;
|
|
46
|
-
user-select: none;
|
|
47
|
-
z-index: 999999;
|
|
48
|
-
padding: var(--vis-tooltip-padding);
|
|
49
|
-
transform: translate(0, -5px);
|
|
50
|
-
color: var(--vis-tooltip-text-color);
|
|
51
|
-
|
|
52
|
-
/* object-fit: contain; */
|
|
53
|
-
border-radius: 5px;
|
|
54
|
-
box-shadow: 0 13px 25px 0 var(--vis-tooltip-box-shadow);
|
|
55
|
-
border: solid 1px var(--vis-tooltip-border-color);
|
|
56
|
-
background-color: var(--vis-tooltip-background-color);
|
|
57
|
-
backdrop-filter: var(--vis-tooltip-backdrop-filter);
|
|
58
|
-
`;
|
|
59
54
|
const positionFixed = css `
|
|
60
55
|
bottom: unset;
|
|
61
56
|
position: fixed;
|
|
@@ -65,7 +60,12 @@ const show = css `
|
|
|
65
60
|
`;
|
|
66
61
|
const hidden = css `
|
|
67
62
|
display: none;
|
|
63
|
+
`;
|
|
64
|
+
const nonInteractive = css `
|
|
65
|
+
label: non-interactive;
|
|
66
|
+
pointer-events: none;
|
|
67
|
+
user-select: none;
|
|
68
68
|
`;
|
|
69
69
|
|
|
70
|
-
export { hidden, positionFixed, root, show,
|
|
70
|
+
export { hidden, nonInteractive, positionFixed, root, show, variables };
|
|
71
71
|
//# sourceMappingURL=style.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.js","sources":["../../../src/components/tooltip/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: tooltip;\n`\n\nexport const variables = injectGlobal`\n :root {\n --vis-tooltip-background-color: rgba(255, 255, 255, 0.95);\n --vis-tooltip-border-color: #e5e9f7;\n --vis-tooltip-text-color: #000;\n --vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);\n --vis-tooltip-backdrop-filter: none;\n --vis-tooltip-padding: 10px 15px;\n\n --vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);\n --vis-dark-tooltip-text-color: #e5e9f7;\n --vis-dark-tooltip-border-color: var(--vis-color-grey);\n --vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-tooltip-background-color: var(--vis-dark-tooltip-background-color);\n --vis-tooltip-text-color: var(--vis-dark-tooltip-text-color);\n --vis-tooltip-border-color: var(--vis-dark-tooltip-border-color);\n --vis-tooltip-shadow-color: var(--vis-dark-tooltip-shadow-color);\n }\n\n body.theme-dark {\n --vis-tooltip-background-color: rgba(30,30,30, 0.95);\n --vis-tooltip-text-color: #e5e9f7;\n --vis-tooltip-border-color: var(--vis-color-grey);\n --vis-tooltip-shadow-color: rgba(0,0,0, 0.95);\n }\n`\n\nexport const
|
|
1
|
+
{"version":3,"file":"style.js","sources":["../../../src/components/tooltip/style.ts"],"sourcesContent":["import { css, injectGlobal } from '@emotion/css'\n\nexport const root = css`\n label: tooltip;\n display: inline-block;\n left: 0;\n bottom: 0;\n min-width: max-content;\n position: absolute;\n opacity: 0;\n transition: opacity;\n transition-duration: var(--vis-tooltip-transition-duration);\n z-index: 999999;\n padding: var(--vis-tooltip-padding);\n color: var(--vis-tooltip-text-color);\n border-radius: var(--vis-tooltip-border-radius);\n box-shadow: var(--vis-tooltip-box-shadow);\n border: solid 1px var(--vis-tooltip-border-color);\n background-color: var(--vis-tooltip-background-color);\n backdrop-filter: var(--vis-tooltip-backdrop-filter);\n`\n\nexport const variables = injectGlobal`\n :root {\n --vis-tooltip-background-color: rgba(255, 255, 255, 0.95);\n --vis-tooltip-border-color: #e5e9f7;\n --vis-tooltip-text-color: #000;\n --vis-tooltip-shadow-color: rgba(172, 179, 184, 0.35);\n --vis-tooltip-backdrop-filter: none;\n --vis-tooltip-padding: 10px 15px;\n --vis-tooltip-border-radius: 5px;\n --vis-tooltip-transition-duration: 300ms;\n --vis-tooltip-box-shadow: none;\n\n --vis-dark-tooltip-background-color: rgba(30,30,30, 0.95);\n --vis-dark-tooltip-text-color: #e5e9f7;\n --vis-dark-tooltip-border-color: var(--vis-color-grey);\n --vis-dark-tooltip-shadow-color: rgba(0,0,0, 0.95);\n }\n\n body.theme-dark ${`.${root}`} {\n --vis-tooltip-background-color: var(--vis-dark-tooltip-background-color);\n --vis-tooltip-text-color: var(--vis-dark-tooltip-text-color);\n --vis-tooltip-border-color: var(--vis-dark-tooltip-border-color);\n --vis-tooltip-shadow-color: var(--vis-dark-tooltip-shadow-color);\n }\n\n body.theme-dark {\n --vis-tooltip-background-color: rgba(30,30,30, 0.95);\n --vis-tooltip-text-color: #e5e9f7;\n --vis-tooltip-border-color: var(--vis-color-grey);\n --vis-tooltip-shadow-color: rgba(0,0,0, 0.95);\n }\n`\n\nexport const positionFixed = css`\n bottom: unset;\n position: fixed;\n`\n\nexport const show = css`\n opacity: 1;\n`\n\nexport const hidden = css`\n display: none;\n`\n\nexport const nonInteractive = css`\n label: non-interactive;\n pointer-events: none;\n user-select: none;\n`\n"],"names":[],"mappings":";;AAEO,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;;;;;;;;;;;;;;;;;EAkBtB;AAEM,MAAM,SAAS,GAAG,YAAY,CAAA,CAAA;;;;;;;;;;;;;;;;;;AAkBjB,kBAAA,EAAA,CAAA,CAAA,EAAI,IAAI,CAAE,CAAA,CAAA;;;;;;;;;;;;;EAa7B;AAEM,MAAM,aAAa,GAAG,GAAG,CAAA,CAAA;;;EAG/B;AAEM,MAAM,IAAI,GAAG,GAAG,CAAA,CAAA;;EAEtB;AAEM,MAAM,MAAM,GAAG,GAAG,CAAA,CAAA;;EAExB;AAEM,MAAM,cAAc,GAAG,GAAG,CAAA,CAAA;;;;;;;;"}
|
package/data-models/graph.d.ts
CHANGED
|
@@ -10,11 +10,9 @@ export declare class GraphDataModel<N extends GraphInputNode, L extends GraphInp
|
|
|
10
10
|
private _nodes;
|
|
11
11
|
private _links;
|
|
12
12
|
private _inputNodesMap;
|
|
13
|
-
private _nodeIds;
|
|
14
13
|
nodeId: ((n: N) => string | undefined);
|
|
15
14
|
linkId: ((n: L) => string | undefined);
|
|
16
15
|
nodeSort: ((a: N, b: N) => number);
|
|
17
|
-
getNodeFromId(id: string | number): OutNode;
|
|
18
16
|
get data(): GraphData<N, L>;
|
|
19
17
|
set data(inputData: GraphData<N, L>);
|
|
20
18
|
get nodes(): OutNode[];
|
package/data-models/graph.js
CHANGED
|
@@ -7,14 +7,10 @@ class GraphDataModel extends CoreDataModel {
|
|
|
7
7
|
this._nodes = [];
|
|
8
8
|
this._links = [];
|
|
9
9
|
this._inputNodesMap = new Map();
|
|
10
|
-
this._nodeIds = new Map();
|
|
11
10
|
// Model configuration
|
|
12
11
|
this.nodeId = n => (isString(n.id) || isFinite(n.id)) ? `${n.id}` : undefined;
|
|
13
12
|
this.linkId = l => (isString(l.id) || isFinite(l.id)) ? `${l.id}` : undefined;
|
|
14
13
|
}
|
|
15
|
-
getNodeFromId(id) {
|
|
16
|
-
return this._nodeIds.get(id);
|
|
17
|
-
}
|
|
18
14
|
get data() {
|
|
19
15
|
return this._data;
|
|
20
16
|
}
|
|
@@ -26,7 +22,6 @@ class GraphDataModel extends CoreDataModel {
|
|
|
26
22
|
const prevNodes = this.nodes;
|
|
27
23
|
const prevLinks = this.links;
|
|
28
24
|
this._inputNodesMap.clear();
|
|
29
|
-
this._nodeIds.clear();
|
|
30
25
|
const nodes = cloneDeep((_a = inputData === null || inputData === void 0 ? void 0 : inputData.nodes) !== null && _a !== void 0 ? _a : []);
|
|
31
26
|
const links = cloneDeep((_b = inputData === null || inputData === void 0 ? void 0 : inputData.links) !== null && _b !== void 0 ? _b : []);
|
|
32
27
|
// Every node or link can have a private state used for rendering needs
|
|
@@ -38,7 +33,6 @@ class GraphDataModel extends CoreDataModel {
|
|
|
38
33
|
node._index = i;
|
|
39
34
|
node._id = this.nodeId(node) || `${i}`;
|
|
40
35
|
this._inputNodesMap.set(node, inputData.nodes[i]);
|
|
41
|
-
this._nodeIds.set(node._id, node);
|
|
42
36
|
});
|
|
43
37
|
// Sort nodes
|
|
44
38
|
if (isFunction(this.nodeSort))
|
package/data-models/graph.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"graph.js","sources":["../../src/data-models/graph.ts"],"sourcesContent":["import { isNumber, isUndefined, cloneDeep, isFunction, without, isString, isObject, isEqual } from 'utils/data'\n\n// Types\nimport { GraphInputLink, GraphInputNode, GraphLinkCore, GraphNodeCore } from 'types/graph'\n\n// Core Data Model\nimport { CoreDataModel } from './core'\n\nexport type GraphData<N extends GraphInputNode, L extends GraphInputLink> = {\n nodes: N[];\n links?: L[];\n}\n\nexport class GraphDataModel<\n N extends GraphInputNode,\n L extends GraphInputLink,\n OutNode extends GraphNodeCore<N, L> = GraphNodeCore<N, L>,\n OutLink extends GraphLinkCore<N, L> = GraphLinkCore<N, L>,\n> extends CoreDataModel<GraphData<N, L>> {\n private _nonConnectedNodes: OutNode[]\n private _connectedNodes: OutNode[]\n private _nodes: OutNode[] = []\n private _links: OutLink[] = []\n private _inputNodesMap = new Map<OutNode, N>()\n private _nodeIds = new Map<string | number, OutNode>()\n\n // Model configuration\n public nodeId: ((n: N) => string | undefined) = n => (isString(n.id) || isFinite(n.id as number)) ? `${n.id}` : undefined\n public linkId: ((n: L) => string | undefined) = l => (isString(l.id) || isFinite(l.id as number)) ? `${l.id}` : undefined\n public nodeSort: ((a: N, b: N) => number)\n\n public getNodeFromId (id: string | number): OutNode {\n return this._nodeIds.get(id)\n }\n\n get data (): GraphData<N, L> {\n return this._data\n }\n\n set data (inputData: GraphData<N, L>) {\n if (!inputData) return\n this._data = inputData\n const prevNodes = this.nodes\n const prevLinks = this.links\n\n this._inputNodesMap.clear()\n this._nodeIds.clear()\n const nodes = cloneDeep(inputData?.nodes ?? []) as OutNode[]\n const links = cloneDeep(inputData?.links ?? []) as OutLink[]\n\n // Every node or link can have a private state used for rendering needs\n // On data update we transfer state between objects with same ids\n this.transferState(nodes, prevNodes, this.nodeId)\n this.transferState(links, prevLinks, this.linkId)\n\n // Set node `_id` and `_index`\n nodes.forEach((node, i) => {\n node._index = i\n node._id = this.nodeId(node) || `${i}`\n this._inputNodesMap.set(node, inputData.nodes[i])\n this._nodeIds.set(node._id, node)\n })\n\n // Sort nodes\n if (isFunction(this.nodeSort)) nodes.sort(this.nodeSort)\n\n // Fill link source and target\n links.forEach((link, i) => {\n link._indexGlobal = i\n link.source = this.findNode(nodes, link.source)\n link.target = this.findNode(nodes, link.target)\n })\n\n // Set link index for multiple link rendering\n links.forEach((link, i) => {\n if (!isUndefined(link._index) && !isUndefined(link._neighbours)) return\n\n const linksFiltered = links.filter(l =>\n ((link.source === l.source) && (link.target === l.target)) ||\n ((link.source === l.target) && (link.target === l.source))\n )\n\n linksFiltered.forEach((l, i) => {\n l._index = i\n l._id = this.linkId(l) || `${l.source?._id}-${l.target?._id}-${i}`\n l._neighbours = linksFiltered.length\n l._direction = ((link.source === l.source) && (link.target === l.target)) ? 1 : -1\n })\n })\n\n nodes.forEach(d => {\n // Determine if a node is connected or not and store it as a property\n d.links = links.filter(l => (l.source === d) || (l.target === d))\n d._isConnected = d.links.length !== 0\n })\n\n this._nonConnectedNodes = nodes.filter(d => !d._isConnected)\n this._connectedNodes = without(nodes, ...this._nonConnectedNodes)\n\n this._nodes = nodes\n this._links = links.filter(l => l.source && l.target)\n }\n\n get nodes (): OutNode[] {\n return this._nodes\n }\n\n get links (): OutLink[] {\n return this._links\n }\n\n get connectedNodes (): OutNode[] {\n return this._connectedNodes\n }\n\n get nonConnectedNodes (): OutNode[] {\n return this._nonConnectedNodes\n }\n\n private findNode (nodes: OutNode[], nodeIdentifier: number | string | N): OutNode | undefined {\n let foundNode: OutNode | undefined\n\n if (isNumber(nodeIdentifier)) foundNode = nodes[nodeIdentifier as number]\n else if (isString(nodeIdentifier)) foundNode = nodes.find(node => this.nodeId(node) === nodeIdentifier)\n else if (isObject(nodeIdentifier)) foundNode = nodes.find(node => isEqual(this._inputNodesMap.get(node), nodeIdentifier))\n\n if (!foundNode) {\n console.warn(`Node ${nodeIdentifier} is missing from the nodes list`)\n }\n\n return foundNode\n }\n\n private transferState<T extends { _state: Record<string, any>}> (\n items: T[],\n itemsPrev: T[],\n getId: (d: T) => string\n ): void {\n for (const item of items) {\n const dPrev = itemsPrev.find((dp) => getId(dp) === getId(item))\n if (dPrev) item._state = { ...dPrev._state }\n else item._state = {}\n }\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"graph.js","sources":["../../src/data-models/graph.ts"],"sourcesContent":["import { isNumber, isUndefined, cloneDeep, isFunction, without, isString, isObject, isEqual } from 'utils/data'\n\n// Types\nimport { GraphInputLink, GraphInputNode, GraphLinkCore, GraphNodeCore } from 'types/graph'\n\n// Core Data Model\nimport { CoreDataModel } from './core'\n\nexport type GraphData<N extends GraphInputNode, L extends GraphInputLink> = {\n nodes: N[];\n links?: L[];\n}\n\nexport class GraphDataModel<\n N extends GraphInputNode,\n L extends GraphInputLink,\n OutNode extends GraphNodeCore<N, L> = GraphNodeCore<N, L>,\n OutLink extends GraphLinkCore<N, L> = GraphLinkCore<N, L>,\n> extends CoreDataModel<GraphData<N, L>> {\n private _nonConnectedNodes: OutNode[]\n private _connectedNodes: OutNode[]\n private _nodes: OutNode[] = []\n private _links: OutLink[] = []\n private _inputNodesMap = new Map<OutNode, N>()\n\n // Model configuration\n public nodeId: ((n: N) => string | undefined) = n => (isString(n.id) || isFinite(n.id as number)) ? `${n.id}` : undefined\n public linkId: ((n: L) => string | undefined) = l => (isString(l.id) || isFinite(l.id as number)) ? `${l.id}` : undefined\n public nodeSort: ((a: N, b: N) => number)\n\n get data (): GraphData<N, L> {\n return this._data\n }\n\n set data (inputData: GraphData<N, L>) {\n if (!inputData) return\n this._data = inputData\n const prevNodes = this.nodes\n const prevLinks = this.links\n\n this._inputNodesMap.clear()\n const nodes = cloneDeep(inputData?.nodes ?? []) as OutNode[]\n const links = cloneDeep(inputData?.links ?? []) as OutLink[]\n\n // Every node or link can have a private state used for rendering needs\n // On data update we transfer state between objects with same ids\n this.transferState(nodes, prevNodes, this.nodeId)\n this.transferState(links, prevLinks, this.linkId)\n\n // Set node `_id` and `_index`\n nodes.forEach((node, i) => {\n node._index = i\n node._id = this.nodeId(node) || `${i}`\n this._inputNodesMap.set(node, inputData.nodes[i])\n })\n\n // Sort nodes\n if (isFunction(this.nodeSort)) nodes.sort(this.nodeSort)\n\n // Fill link source and target\n links.forEach((link, i) => {\n link._indexGlobal = i\n link.source = this.findNode(nodes, link.source)\n link.target = this.findNode(nodes, link.target)\n })\n\n // Set link index for multiple link rendering\n links.forEach((link, i) => {\n if (!isUndefined(link._index) && !isUndefined(link._neighbours)) return\n\n const linksFiltered = links.filter(l =>\n ((link.source === l.source) && (link.target === l.target)) ||\n ((link.source === l.target) && (link.target === l.source))\n )\n\n linksFiltered.forEach((l, i) => {\n l._index = i\n l._id = this.linkId(l) || `${l.source?._id}-${l.target?._id}-${i}`\n l._neighbours = linksFiltered.length\n l._direction = ((link.source === l.source) && (link.target === l.target)) ? 1 : -1\n })\n })\n\n nodes.forEach(d => {\n // Determine if a node is connected or not and store it as a property\n d.links = links.filter(l => (l.source === d) || (l.target === d))\n d._isConnected = d.links.length !== 0\n })\n\n this._nonConnectedNodes = nodes.filter(d => !d._isConnected)\n this._connectedNodes = without(nodes, ...this._nonConnectedNodes)\n\n this._nodes = nodes\n this._links = links.filter(l => l.source && l.target)\n }\n\n get nodes (): OutNode[] {\n return this._nodes\n }\n\n get links (): OutLink[] {\n return this._links\n }\n\n get connectedNodes (): OutNode[] {\n return this._connectedNodes\n }\n\n get nonConnectedNodes (): OutNode[] {\n return this._nonConnectedNodes\n }\n\n private findNode (nodes: OutNode[], nodeIdentifier: number | string | N): OutNode | undefined {\n let foundNode: OutNode | undefined\n\n if (isNumber(nodeIdentifier)) foundNode = nodes[nodeIdentifier as number]\n else if (isString(nodeIdentifier)) foundNode = nodes.find(node => this.nodeId(node) === nodeIdentifier)\n else if (isObject(nodeIdentifier)) foundNode = nodes.find(node => isEqual(this._inputNodesMap.get(node), nodeIdentifier))\n\n if (!foundNode) {\n console.warn(`Node ${nodeIdentifier} is missing from the nodes list`)\n }\n\n return foundNode\n }\n\n private transferState<T extends { _state: Record<string, any>}> (\n items: T[],\n itemsPrev: T[],\n getId: (d: T) => string\n ): void {\n for (const item of items) {\n const dPrev = itemsPrev.find((dp) => getId(dp) === getId(item))\n if (dPrev) item._state = { ...dPrev._state }\n else item._state = {}\n }\n }\n}\n"],"names":[],"mappings":"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"}
|