three-render-objects 1.33.1 → 1.34.0

package/README.md

@@ -86,7 +86,7 @@ new ThreeRenderObjects(<domElement>, { configOptions })
 | <b>hoverOrderComparator</b>([<i>fn</i>]) | Getter/setter for the comparator function to use when hovering over multiple objects under the same line of sight. This function can be used to prioritize hovering some objects over others. | By default, hovering priority is based solely on camera proximity (closest object wins). |
 | <b>hoverFilter</b>([<i>fn</i>]) | Getter/setter for the filter function that defines whether an object is eligible for hovering and other interactions. This function receives an object as sole argument and should return a `boolean` value | `() => true` |
 | <b>lineHoverPrecision</b>([<i>int</i>]) | Getter/setter for the precision to use when detecting hover events over [Line](https://threejs.org/docs/#api/objects/Line) objects. | 1 |
-| <b>tooltipContent</b>([<i>str</i> or <i>fn</i>]) | Object accessor function or attribute for label (shown in tooltip). Supports plain text or HTML content. ||
+| <b>tooltipContent</b>([<i>str</i> or <i>fn</i>]) | Object accessor function or attribute for label (shown in tooltip). Supports plain text, HTML string content or an [HTML element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). ||
 | <b>enablePointerInteraction([<i>boolean</i>]) | Getter/setter for whether to enable the mouse tracking events. This activates an internal tracker of the canvas mouse position and enables the functionality of object hover/click and tooltip labels, at the cost of performance. If you're looking for maximum gain in your render performance it's recommended to switch off this property. | `true` |
 | <b>hoverDuringDrag([<i>boolean</i>]) | Getter/setter for whether to trigger hover events while using the controls via pointer dragging.| `false` |
 | <b>clickAfterDrag([<i>boolean</i>]) | Getter/setter for whether to trigger a click event after dragging using the controls.| `false` |

package/dist/three-render-objects.d.ts

@@ -67,8 +67,8 @@ declare class ThreeRenderObjectsGeneric<ChainableInstance> {
   hoverFilter(filterFn: (obj: Object3D) => boolean): ChainableInstance;
   lineHoverPrecision(): number;
   lineHoverPrecision(precision: number): ChainableInstance;
-  tooltipContent(): Obj3DAccessor<string>;
-  tooltipContent(contentAccessor: Obj3DAccessor<string>): ChainableInstance;
+  tooltipContent(): Obj3DAccessor<string | HTMLElement>;
+  tooltipContent(contentAccessor: Obj3DAccessor<string | HTMLElement>): ChainableInstance;
   enablePointerInteraction(): boolean;
   enablePointerInteraction(enable: boolean): ChainableInstance;
   hoverDuringDrag(): boolean;

package/dist/three-render-objects.js

@@ -1,4 +1,4 @@
-// Version 1.33.1 three-render-objects - https://github.com/vasturiano/three-render-objects
+// Version 1.34.0 three-render-objects - https://github.com/vasturiano/three-render-objects
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('three')) :
   typeof define === 'function' && define.amd ? define(['three'], factory) :
@@ -32,7 +32,7 @@
     }
   }
 
-  var css_248z$1 = ".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$1 = ".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$1(css_248z$1);
 
   function _arrayLikeToArray$2(r, a) {
@@ -77510,7 +77510,7 @@ var<${access}> ${name} : ${structName};`;
     }
   }
 
-  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 = index$1({
@@ -77525,6 +77525,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(_ref2, 2),
@@ -77533,7 +77536,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;
@@ -77545,7 +77548,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;
@@ -77558,7 +77561,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 || '');
+      }
     }
   });