diff --git a/README.md b/README.md index 2a918c30..94a16c80 100644 --- a/README.md +++ b/README.md @@ -107,7 +107,7 @@ new ForceGraph3d(, { configOptions }) | --- | --- | :--: | | nodeRelSize([num]) | Getter/setter for the ratio of node sphere volume (cubic px) per value unit. | 4 | | nodeVal([num, str or fn]) | Node object accessor function, attribute or a numeric constant for the node numeric value (affects sphere volume). | `val` | -| nodeLabel([str or fn]) | 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` | +| nodeLabel([str or fn]) | 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` | | nodeVisibility([boolean, str or fn]) | Node object accessor function, attribute or a boolean constant for whether to display the node. | `true` | | nodeColor([str or fn]) | Node object accessor function or attribute for node color (affects sphere color). | `color` | | nodeAutoColorBy([str or fn]) | Node object accessor function (`fn(node)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects nodes without a color attribute. | | @@ -120,7 +120,7 @@ new ForceGraph3d(, { configOptions }) | Method | Description | Default | | --- | --- | :--: | -| linkLabel([str or fn]) | 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` | +| linkLabel([str or fn]) | 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` | | linkVisibility([boolean, str or fn]) | 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` | | linkColor([str or fn]) | Link object accessor function or attribute for line color. | `color` | | linkAutoColorBy([str or fn]) | Link object accessor function (`fn(link)`) or attribute (e.g. `'type'`) to automatically group colors by. Only affects links without a color attribute. | | diff --git a/package.json b/package.json index 96c02e39..a340f34c 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/index.d.ts b/src/index.d.ts index 871d822c..ed6cad0f 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -11,6 +11,8 @@ export interface ConfigOptions { type Accessor = Out | string | ((obj: In) => Out); type ObjAccessor = Accessor; +type Label = string | HTMLElement; + type Coords = { x: number; y: number; z: number; }; // don't surface these internal props from inner ThreeForceGraph @@ -32,10 +34,10 @@ interface ForceGraph3DGenericInstance; - nodeLabel(textAccessor: ObjAccessor): ChainableInstance; - linkLabel(): ObjAccessor; - linkLabel(textAccessor: ObjAccessor): ChainableInstance; + nodeLabel(): ObjAccessor; + nodeLabel(textAccessor: ObjAccessor): ChainableInstance; + linkLabel(): ObjAccessor; + linkLabel(textAccessor: ObjAccessor): ChainableInstance; // Interaction onNodeClick(callback: (node: N, event: MouseEvent) => void): ChainableInstance; diff --git a/yarn.lock b/yarn.lock index eae2a3ed..7b5251f6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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" @@ -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"