3d-force-graph 1.74.6 → 1.75.0

package/README.md

@@ -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. | |
@@ -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. | |

package/dist/3d-force-graph.d.ts

@@ -11,6 +11,8 @@ 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
@@ -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;

package/dist/3d-force-graph.js

@@ -1,4 +1,4 @@
-// Version 1.74.6 3d-force-graph - https://github.com/vasturiano/3d-force-graph
+// Version 1.75.0 3d-force-graph - https://github.com/vasturiano/3d-force-graph
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
   typeof define === 'function' && define.amd ? define(factory) :
@@ -106522,7 +106522,7 @@ var<${access}> ${name} : ${structName};`;
     }
   }
 
-  var css_248z$1 = ".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$1 = ".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$1(css_248z$1);
 
   var index = index$2({
@@ -106537,6 +106537,9 @@ var<${access}> ${name} : ${structName};`;
         style = _ref$style === undefined ? {} : _ref$style;
       var isD3Selection = !!domNode && _typeof(domNode) === 'object' && !!domNode.node && typeof domNode.node === 'function';
       var el = select(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),
@@ -106545,7 +106548,7 @@ var<${access}> ${name} : ${structName};`;
         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;
@@ -106557,7 +106560,7 @@ var<${access}> ${name} : ${structName};`;
         // 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;
@@ -106570,7 +106573,14 @@ var<${access}> ${name} : ${structName};`;
     },
     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 || '');
+      }
     }
   });
 
@@ -106599,7 +106609,7 @@ var<${access}> ${name} : ${structName};`;
     }
   }
 
-  var css_248z = ".scene-nav-info {\n  bottom: 5px;\n  width: 100%;\n  text-align: center;\n  color: slategrey;\n  opacity: 0.7;\n  font-size: 10px;\n}\n\n.scene-tooltip {\n  top: 0;\n  color: lavender;\n  font-size: 15px;\n  background: rgba(0,0,0,0.5);\n  padding: 2px 5px;\n  border-radius: 3px;\n}\n\n.scene-nav-info, .scene-tooltip {\n  position: absolute;\n  font-family: sans-serif;\n  pointer-events: none;\n  user-select: none;\n}\n\n.scene-container canvas:focus {\n  outline: none;\n}";
+  var css_248z = ".scene-nav-info {\n  position: absolute;\n  bottom: 5px;\n  width: 100%;\n  text-align: center;\n  color: slategrey;\n  opacity: 0.7;\n  font-size: 10px;\n  font-family: sans-serif;\n  pointer-events: none;\n  user-select: none;\n}\n\n.scene-container canvas:focus {\n  outline: none;\n}";
   styleInject(css_248z);
 
   function _arrayLikeToArray(r, a) {