Skip to content

Commit

Permalink
Add support for HTMLElements in tooltips
Browse files Browse the repository at this point in the history
  • Loading branch information
vasturiano committed Jan 14, 2025
1 parent 9491188 commit f13cacc
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 16 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ new ForceGraph3d(<domElement>, { configOptions })
| --- | --- | :--: |
| <b>nodeRelSize</b>([<i>num</i>]) | Getter/setter for the ratio of node sphere volume (cubic px) per value unit. | 4 |
| <b>nodeVal</b>([<i>num</i>, <i>str</i> or <i>fn</i>]) | Node object accessor function, attribute or a numeric constant for the node numeric value (affects sphere volume). | `val` |
| <b>nodeLabel</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for name (shown in label). Supports plain text or HTML content. Note that this method uses `innerHTML` internally, so make sure to pre-sanitize any user-input content to prevent XSS vulnerabilities. | `name` |
| <b>nodeLabel</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for name (shown in label). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
| <b>nodeVisibility</b>([<i>boolean</i>, <i>str</i> or <i>fn</i>]) | Node object accessor function, attribute or a boolean constant for whether to display the node. | `true` |
| <b>nodeColor</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function or attribute for node color (affects sphere color). | `color` |
| <b>nodeAutoColorBy</b>([<i>str</i> or <i>fn</i>]) | Node object accessor function (`fn(node)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects nodes without a color attribute. | |
Expand All @@ -120,7 +120,7 @@ new ForceGraph3d(<domElement>, { configOptions })

| Method | Description | Default |
| --- | --- | :--: |
| <b>linkLabel</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for name (shown in label). Supports plain text or HTML content. Note that this method uses `innerHTML` internally, so make sure to pre-sanitize any user-input content to prevent XSS vulnerabilities. | `name` |
| <b>linkLabel</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for name (shown in label). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). | `name` |
| <b>linkVisibility</b>([<i>boolean</i>, <i>str</i> or <i>fn</i>]) | Link object accessor function, attribute or a boolean constant for whether to display the link line. A value of `false` maintains the link force without rendering it. | `true` |
| <b>linkColor</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function or attribute for line color. | `color` |
| <b>linkAutoColorBy</b>([<i>str</i> or <i>fn</i>]) | Link object accessor function (`fn(link)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects links without a color attribute. | |
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"kapsule": "^1.16",
"three": ">=0.118 <1",
"three-forcegraph": "1",
"three-render-objects": "^1.33"
"three-render-objects": "^1.34"
},
"devDependencies": {
"@babel/core": "^7.26.0",
Expand Down
10 changes: 6 additions & 4 deletions src/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ export interface ConfigOptions {
type Accessor<In, Out> = Out | string | ((obj: In) => Out);
type ObjAccessor<T, InT = object> = Accessor<InT, T>;

type Label = string | HTMLElement;

type Coords = { x: number; y: number; z: number; };

// don't surface these internal props from inner ThreeForceGraph
Expand All @@ -32,10 +34,10 @@ interface ForceGraph3DGenericInstance<ChainableInstance, N extends NodeObject =
showNavInfo(enabled: boolean): ChainableInstance;

// Labels
nodeLabel(): ObjAccessor<string, N>;
nodeLabel(textAccessor: ObjAccessor<string, N>): ChainableInstance;
linkLabel(): ObjAccessor<string, L>;
linkLabel(textAccessor: ObjAccessor<string, L>): ChainableInstance;
nodeLabel(): ObjAccessor<Label, N>;
nodeLabel(textAccessor: ObjAccessor<Label, N>): ChainableInstance;
linkLabel(): ObjAccessor<Label, L>;
linkLabel(textAccessor: ObjAccessor<Label, L>): ChainableInstance;

// Interaction
onNodeClick(callback: (node: N, event: MouseEvent) => void): ChainableInstance;
Expand Down
18 changes: 9 additions & 9 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1463,10 +1463,10 @@ fdir@^6.2.0:
resolved "https://registry.yarnpkg.com/fdir/-/fdir-6.4.2.tgz#ddaa7ce1831b161bc3657bb99cb36e1622702689"
integrity sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==

float-tooltip@1:
version "1.4.2"
resolved "https://registry.yarnpkg.com/float-tooltip/-/float-tooltip-1.4.2.tgz#a128f389aa45a6149ed2f27aae40151653e39479"
integrity sha512-sKWm5Q9YKBgpli8c5VEADvBYYH2Jqy+RH/m7FUbDMPUuoXYMRBVYppp8+dDv962XiE2kCKt7TIOV3lUQ+nK0Pw==
float-tooltip@^1.5:
version "1.5.0"
resolved "https://registry.yarnpkg.com/float-tooltip/-/float-tooltip-1.5.0.tgz#0e97c4497d5b59a7b3f37b5ff9826b7ab6448668"
integrity sha512-CdpIbFdc7PSN+xhJXnAijWhha2vkdrrMRYpyfvrP3kKGJHJP404UrREVvMlKXQq2UXkb9G5oiyPTa5Kq6gRXjg==
dependencies:
d3-selection "2 - 3"
kapsule "^1.16"
Expand Down Expand Up @@ -2406,14 +2406,14 @@ three-forcegraph@1:
ngraph.graph "20"
tinycolor2 "1"

three-render-objects@^1.33:
version "1.33.2"
resolved "https://registry.yarnpkg.com/three-render-objects/-/three-render-objects-1.33.2.tgz#2280e0fbd6790fb0c873ecae7517a30ec1428c05"
integrity sha512-l2FGxj0SWl0i/aXo3a3CaqVV3yu6z6NN36PNuDfd2dcjbxuqofOY0vQ6yOKqrP18zaDsgo9Wu8pZQAfosSnkfg==
three-render-objects@^1.34:
version "1.34.0"
resolved "https://registry.yarnpkg.com/three-render-objects/-/three-render-objects-1.34.0.tgz#f644b5ff1e1abd91cd883f24c0b0afaee2d862a3"
integrity sha512-6/+Eq+zSdB/8MlBVhwbR75UJQQn439cZL8jf9qMVv6RLERXZ1CwzjVHdOb2hciQg2gWKHcy2qL7uyR6IOQwa/w==
dependencies:
"@tweenjs/tween.js" "18 - 25"
accessor-fn "1"
float-tooltip "1"
float-tooltip "^1.5"
kapsule "^1.16"
polished "4"

Expand Down

0 comments on commit f13cacc

Please sign in to comment.