From 95219f98eee7af0bbc93f8a4deb6dd4c87d28795 Mon Sep 17 00:00:00 2001 From: vasco Date: Tue, 14 Jan 2025 01:27:26 +0000 Subject: [PATCH] Add support for HTMLElements in tooltips --- README.md | 4 ++-- package.json | 2 +- src/index.d.ts | 10 ++++++---- yarn.lock | 8 ++++---- 4 files changed, 13 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 4cbc44e..702d8a1 100644 --- a/README.md +++ b/README.md @@ -92,7 +92,7 @@ const myGraph = new ForceGraph() | --- | --- | :--: | | nodeRelSize([num]) | Getter/setter for the ratio of node circle area (square 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 circle area). | `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 circle 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. | | @@ -103,7 +103,7 @@ const myGraph = new ForceGraph() | 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 1b72c3a..91945a5 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "d3-scale-chromatic": "1 - 3", "d3-selection": "2 - 3", "d3-zoom": "2 - 3", - "float-tooltip": "1", + "float-tooltip": "^1.5", "index-array-by": "1", "kapsule": "^1.16", "lodash-es": "4" diff --git a/src/index.d.ts b/src/index.d.ts index d4722f6..d745265 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -23,6 +23,8 @@ type Accessor = Out | string | ((obj: In) => Out); type NodeAccessor = Accessor; type LinkAccessor = Accessor; +type Label = string | HTMLElement; + type CanvasCustomRenderMode = 'replace' | 'before' | 'after'; export type CanvasCustomRenderModeFn = (obj: T) => CanvasCustomRenderMode | any; export type CanvasCustomRenderFn = (obj: T, canvasContext: CanvasRenderingContext2D, globalScale: number) => void; @@ -64,8 +66,8 @@ export declare class ForceGraphGeneric; nodeVal(valAccessor: NodeAccessor): ChainableInstance; - nodeLabel(): NodeAccessor; - nodeLabel(labelAccessor: NodeAccessor): ChainableInstance; + nodeLabel(): NodeAccessor; + nodeLabel(labelAccessor: NodeAccessor): ChainableInstance; nodeVisibility(): NodeAccessor; nodeVisibility(visibilityAccessor: NodeAccessor): ChainableInstance; nodeColor(): NodeAccessor; @@ -80,8 +82,8 @@ export declare class ForceGraphGeneric): ChainableInstance; // Link styling - linkLabel(): LinkAccessor; - linkLabel(labelAccessor: LinkAccessor): ChainableInstance; + linkLabel(): LinkAccessor; + linkLabel(labelAccessor: LinkAccessor): ChainableInstance; linkVisibility(): LinkAccessor; linkVisibility(visibilityAccessor: LinkAccessor): ChainableInstance; linkColor(): LinkAccessor; diff --git a/yarn.lock b/yarn.lock index fdb8029..0a5c035 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1503,10 +1503,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"