three-render-objects 1.32.1 → 1.33.1

package/dist/three-render-objects.mjs

@@ -9,9 +9,10 @@ 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 === void 0) ref = {};
+  if (ref === undefined) ref = {};
   var insertAt = ref.insertAt;
   if (typeof document === 'undefined') {
     return;
@@ -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}\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  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}";
 styleInject(css_248z);
 
 function _arrayLikeToArray(r, a) {
@@ -52,9 +53,9 @@ function _arrayWithoutHoles(r) {
 function _defineProperty(e, r, t) {
   return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
     value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
+    enumerable: true,
+    configurable: true,
+    writable: true
   }) : e[r] = t, e;
 }
 function _iterableToArray(r) {
@@ -68,12 +69,12 @@ function _iterableToArrayLimit(r, l) {
       i,
       u,
       a = [],
-      f = !0,
-      o = !1;
+      f = true,
+      o = false;
     try {
       if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
     } catch (r) {
-      o = !0, n = r;
+      o = true, n = r;
     } finally {
       try {
         if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
@@ -99,7 +100,7 @@ function _toConsumableArray(r) {
 function _toPrimitive(t, r) {
   if ("object" != typeof t || !t) return t;
   var e = t[Symbol.toPrimitive];
-  if (void 0 !== e) {
+  if (undefined !== e) {
     var i = e.call(t, r || "default");
     if ("object" != typeof i) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
@@ -114,7 +115,7 @@ function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
     var t = {}.toString.call(r).slice(8, -1);
-    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : undefined;
   }
 }
 
@@ -176,7 +177,7 @@ var threeRenderObjects = Kapsule({
       onChange: function onChange(_, state) {
         // Reset hover state
         state.hoverObj = null;
-        if (state.toolTipElem) state.toolTipElem.innerHTML = '';
+        state.tooltip && state.tooltip.content(null);
       },
       triggerUpdate: false
     },
@@ -246,7 +247,7 @@ var threeRenderObjects = Kapsule({
           }
           if (topObject !== state.hoverObj) {
             state.onHover(topObject, state.hoverObj);
-            state.toolTipElem.innerHTML = topObject ? accessorFn(state.tooltipContent)(topObject) || '' : '';
+            state.tooltip.content(topObject ? accessorFn(state.tooltipContent)(topObject) || null : null);
             state.hoverObj = topObject;
           }
         }
@@ -314,7 +315,7 @@ var threeRenderObjects = Kapsule({
         }
       }
       function getLookAt() {
-        return Object.assign(new three.Vector3(0, 0, -1000).applyQuaternion(camera.quaternion).add(camera.position));
+        return Object.assign(new three.Vector3(0, 0, -1e3).applyQuaternion(camera.quaternion).add(camera.position));
       }
     },
     zoomToFit: function zoomToFit(state) {
@@ -422,15 +423,15 @@ var threeRenderObjects = Kapsule({
   init: function init(domNode, state) {
     var _ref4 = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
       _ref4$controlType = _ref4.controlType,
-      controlType = _ref4$controlType === void 0 ? 'trackball' : _ref4$controlType,
+      controlType = _ref4$controlType === undefined ? 'trackball' : _ref4$controlType,
       _ref4$useWebGPU = _ref4.useWebGPU,
-      useWebGPU = _ref4$useWebGPU === void 0 ? false : _ref4$useWebGPU,
+      useWebGPU = _ref4$useWebGPU === undefined ? false : _ref4$useWebGPU,
       _ref4$rendererConfig = _ref4.rendererConfig,
-      rendererConfig = _ref4$rendererConfig === void 0 ? {} : _ref4$rendererConfig,
+      rendererConfig = _ref4$rendererConfig === undefined ? {} : _ref4$rendererConfig,
       _ref4$extraRenderers = _ref4.extraRenderers,
-      extraRenderers = _ref4$extraRenderers === void 0 ? [] : _ref4$extraRenderers,
+      extraRenderers = _ref4$extraRenderers === undefined ? [] : _ref4$extraRenderers,
       _ref4$waitForLoadComp = _ref4.waitForLoadComplete,
-      waitForLoadComplete = _ref4$waitForLoadComp === void 0 ? true : _ref4$waitForLoadComp;
+      waitForLoadComplete = _ref4$waitForLoadComp === undefined ? true : _ref4$waitForLoadComp;
     // Wipe DOM
     domNode.innerHTML = '';
 
@@ -450,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();
@@ -474,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.32.1",
+  "version": "1.33.1",
   "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"
   },
@@ -57,16 +58,16 @@
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-terser": "^0.4.4",
     "postcss": "^8.4.49",
     "rimraf": "^6.0.1",
-    "rollup": "^4.28.0",
+    "rollup": "^4.30.1",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "three": "^0.171.0",
-    "typescript": "^5.7.2"
+    "three": "^0.172.0",
+    "typescript": "^5.7.3"
   },
   "engines": {
     "node": ">=12"