force-graph 1.47.3 → 1.48.0

package/README.md

@@ -92,7 +92,7 @@ const myGraph = new ForceGraph(<myDOMElement>)
 | --- | --- | :--: |
 | <b>nodeRelSize</b>([<i>num</i>]) | Getter/setter for the ratio of node circle area (square 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 circle area). | `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 circle 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. | |
@@ -103,7 +103,7 @@ const myGraph = new ForceGraph(<myDOMElement>)
 
 | 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. | |

package/dist/force-graph.d.ts

@@ -23,6 +23,8 @@ type Accessor<In, Out> = Out | string | ((obj: In) => Out);
 type NodeAccessor<T, N> = Accessor<N, T>;
 type LinkAccessor<T, N, L> = Accessor<L, T>;
 
+type Label = string | HTMLElement;
+
 type CanvasCustomRenderMode = 'replace' | 'before' | 'after';
 type CanvasCustomRenderModeFn<T> = (obj: T) => CanvasCustomRenderMode | any;
 type CanvasCustomRenderFn<T> = (obj: T, canvasContext: CanvasRenderingContext2D, globalScale: number) => void;
@@ -64,8 +66,8 @@ declare class ForceGraphGeneric<ChainableInstance, N extends NodeObject = NodeOb
   nodeRelSize(size: number): ChainableInstance;
   nodeVal(): NodeAccessor<number, N>;
   nodeVal(valAccessor: NodeAccessor<number, N>): ChainableInstance;
-  nodeLabel(): NodeAccessor<string, N>;
-  nodeLabel(labelAccessor: NodeAccessor<string, N>): ChainableInstance;
+  nodeLabel(): NodeAccessor<Label, N>;
+  nodeLabel(labelAccessor: NodeAccessor<Label, N>): ChainableInstance;
   nodeVisibility(): NodeAccessor<boolean, N>;
   nodeVisibility(visibilityAccessor: NodeAccessor<boolean, N>): ChainableInstance;
   nodeColor(): NodeAccessor<string, N>;
@@ -80,8 +82,8 @@ declare class ForceGraphGeneric<ChainableInstance, N extends NodeObject = NodeOb
   nodePointerAreaPaint(renderFn: CanvasPointerAreaPaintFn<N>): ChainableInstance;
 
   // Link styling
-  linkLabel(): LinkAccessor<string, N, L>;
-  linkLabel(labelAccessor: LinkAccessor<string, N, L>): ChainableInstance;
+  linkLabel(): LinkAccessor<Label, N, L>;
+  linkLabel(labelAccessor: LinkAccessor<Label, N, L>): ChainableInstance;
   linkVisibility(): LinkAccessor<boolean, N, L>;
   linkVisibility(visibilityAccessor: LinkAccessor<boolean, N, L>): ChainableInstance;
   linkColor(): LinkAccessor<string, N, L>;

package/dist/force-graph.js

@@ -1,4 +1,4 @@
-// Version 1.47.3 force-graph - https://github.com/vasturiano/force-graph
+// Version 1.48.0 force-graph - https://github.com/vasturiano/force-graph
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -7006,7 +7006,7 @@
     }
   }
 
-  var css_248z = ".float-tooltip-kap {\n  position: absolute;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font: 12px sans-serif;\n  color: #eee;\n  background: rgba(0,0,0,0.6);\n  pointer-events: none;\n}\n";
+  var css_248z = ".float-tooltip-kap {\n  position: absolute;\n  width: max-content; /* prevent shrinking near right edge */\n  max-width: max(50%, 150px);\n  padding: 3px 5px;\n  border-radius: 3px;\n  font: 12px sans-serif;\n  color: #eee;\n  background: rgba(0,0,0,0.6);\n  pointer-events: none;\n}\n";
   styleInject(css_248z);
 
   var index$2 = index$4({
@@ -7021,6 +7021,9 @@
         style = _ref$style === undefined ? {} : _ref$style;
       var isD3Selection = !!domNode && _typeof(domNode) === 'object' && !!domNode.node && typeof domNode.node === 'function';
       var el = d3Select(isD3Selection ? domNode.node() : domNode);
+
+      // make sure container is positioned, to provide anchor for tooltip
+      el.style('position') === 'static' && el.style('position', 'relative');
       state.tooltipEl = el.append('div').attr('class', 'float-tooltip-kap');
       Object.entries(style).forEach(function (_ref2) {
         var _ref3 = _slicedToArray$1(_ref2, 2),
@@ -7029,7 +7032,7 @@
         return state.tooltipEl.style(k, v);
       });
       state.tooltipEl // start off-screen
-      .style('left', '-100000px').style('display', 'none');
+      .style('left', '-10000px').style('display', 'none');
       state.mouseInside = false;
       el.on('mousemove.tooltip', function (ev) {
         state.mouseInside = true;
@@ -7041,7 +7044,7 @@
         // adjust horizontal position to not exceed canvas boundaries
         .style('transform', "translate(-".concat(mousePos[0] / canvasWidth * 100, "%, ").concat(
         // flip to above if near bottom
-        canvasHeight - mousePos[1] < 100 ? 'calc(-100% - 6px)' : '21px', ")"));
+        canvasHeight > 130 && canvasHeight - mousePos[1] < 100 ? 'calc(-100% - 6px)' : '21px', ")"));
       });
       el.on('mouseover.tooltip', function () {
         state.mouseInside = true;
@@ -7054,7 +7057,14 @@
     },
     update: function update(state) {
       state.tooltipEl.style('display', !!state.content && state.mouseInside ? 'inline' : 'none');
-      state.tooltipEl.html(state.content || '');
+      if (state.content instanceof HTMLElement) {
+        state.tooltipEl.text(''); // empty it
+        state.tooltipEl.append(function () {
+          return state.content;
+        });
+      } else {
+        state.tooltipEl.html(state.content || '');
+      }
     }
   });