three-render-objects 1.33.0 → 1.33.2

package/dist/three-render-objects.mjs

@@ -9,6 +9,7 @@ import { parseToRgb, opacify } from 'polished';
 import { Tween, Easing, Group } from '@tweenjs/tween.js';
 import accessorFn from 'accessor-fn';
 import Kapsule from 'kapsule';
+import Tooltip from 'float-tooltip';
 
 function styleInject(css, ref) {
   if (ref === undefined) ref = {};
@@ -35,7 +36,7 @@ function styleInject(css, ref) {
   }
 }
 
-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) {
@@ -176,10 +177,7 @@ var threeRenderObjects = Kapsule({
       onChange: function onChange(_, state) {
         // Reset hover state
         state.hoverObj = null;
-        if (state.toolTipElem) {
-          state.toolTipElem.style.display = 'none';
-          state.toolTipElem.innerHTML = '';
-        }
+        state.tooltip && state.tooltip.content(null);
       },
       triggerUpdate: false
     },
@@ -249,7 +247,7 @@ var threeRenderObjects = Kapsule({
           }
           if (topObject !== state.hoverObj) {
             state.onHover(topObject, state.hoverObj);
-            state.toolTipElem.style.display = (state.toolTipElem.innerHTML = topObject ? accessorFn(state.tooltipContent)(topObject) || '' : '') ? 'initial' : 'none';
+            state.tooltip.content(topObject ? accessorFn(state.tooltipContent)(topObject) || null : null);
             state.hoverObj = topObject;
           }
         }
@@ -453,9 +451,7 @@ var threeRenderObjects = Kapsule({
     state.navInfo.style.display = state.showNavInfo ? null : 'none';
 
     // Setup tooltip
-    state.toolTipElem = document.createElement('div');
-    state.toolTipElem.classList.add('scene-tooltip');
-    state.container.appendChild(state.toolTipElem);
+    state.tooltip = new Tooltip(state.container);
 
     // Capture pointer coords on move or touchstart
     state.pointerPos = new three.Vector2();
@@ -477,14 +473,6 @@ var threeRenderObjects = Kapsule({
           var offset = getOffset(state.container);
           state.pointerPos.x = ev.pageX - offset.left;
           state.pointerPos.y = ev.pageY - offset.top;
-
-          // Move tooltip
-          state.toolTipElem.style.top = "".concat(state.pointerPos.y, "px");
-          state.toolTipElem.style.left = "".concat(state.pointerPos.x, "px");
-          // adjust horizontal position to not exceed canvas boundaries
-          state.toolTipElem.style.transform = "translate(-".concat(state.pointerPos.x / state.width * 100, "%, ").concat(
-          // flip to above if near bottom
-          state.height - state.pointerPos.y < 100 ? 'calc(-100% - 8px)' : '21px', ")");
         }
         function getOffset(el) {
           var rect = el.getBoundingClientRect(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "three-render-objects",
-  "version": "1.33.0",
+  "version": "1.33.2",
   "description": "Easy way to render ThreeJS objects with built-in interaction defaults",
   "license": "MIT",
   "type": "module",
@@ -47,6 +47,7 @@
   "dependencies": {
     "@tweenjs/tween.js": "18 - 25",
     "accessor-fn": "1",
+    "float-tooltip": "1",
     "kapsule": "^1.16",
     "polished": "4"
   },