three-render-objects 1.35.0 → 1.36.0

package/README.md

@@ -80,9 +80,9 @@ new ThreeRenderObjects(<domElement>, { configOptions })
 
 | Method | Description | Default |
 | --- | --- | :--: |
-| <b>onClick</b>(<i>fn</i>) | Callback function for object clicks with left mouse button. The object (or `null` if there's no object under the mouse line of sight), the event object and the coordinates of the intersecting point in the object's surface are included as arguments `onClick(object, event, { x, y, z })`. | - |
-| <b>onRightClick</b>(<i>fn</i>) | Callback function for object right-clicks. The object (or `null` if there's no object under the mouse line of sight), the event object and the coordinates of the intersecting point in the object's surface are included as arguments `onRightClick(object, event, { x, y, z })`. | - |
-| <b>onHover</b>(<i>fn</i>) | Callback function for object mouse over events. The object (or `null` if there's no object under the mouse line of sight) is included as the first argument, and the previous hovered object (or `null`) as second argument: `onHover(obj, prevObj)`. | - |
+| <b>onClick</b>(<i>fn</i>) | Callback function for object clicks with left mouse button. The object (or `null` if there's no object under the mouse line of sight), the event object and the intersection object are included as arguments `onClick(object, event, intersection)`. | - |
+| <b>onRightClick</b>(<i>fn</i>) | Callback function for object right-clicks. The object (or `null` if there's no object under the mouse line of sight), the event object and the intersection object are included as arguments `onRightClick(object, event, intersection)`. | - |
+| <b>onHover</b>(<i>fn</i>) | Callback function for object mouse over events. The object (or `null` if there's no object under the mouse line of sight), the previous hovered object (or `null`) and the intersection object are included as arguments: `onHover(obj, prevObj, intersection)`. | - |
 | <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 |

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

@@ -59,9 +59,9 @@ declare class ThreeRenderObjectsGeneric<ChainableInstance> {
   controls(): TrackballControls | OrbitControls | FlyControls;
 
   // Interaction
-  onClick(callback: (obj: object | null, event: MouseEvent, intersectionPoint: { x: number, y: number, z: number }) => void): ChainableInstance;
-  onRightClick(callback: (obj: object | null, event: MouseEvent, intersectionPoint: { x: number, y: number, z: number }) => void): ChainableInstance;
-  onHover(callback: (obj: object | null, previousObj: object | null) => void): ChainableInstance;
+  onClick(callback: (obj: object | null, event: MouseEvent, intersection: Intersection) => void): ChainableInstance;
+  onRightClick(callback: (obj: object | null, event: MouseEvent, intersection: Intersection) => void): ChainableInstance;
+  onHover(callback: (obj: object | null, previousObj: object | null, intersection: Intersection | null) => void): ChainableInstance;
   hoverOrderComparator(): Obj3DCompFn;
   hoverOrderComparator(compFn: Obj3DCompFn): ChainableInstance;
   hoverFilter(): (obj: Object3D) => boolean;

package/dist/three-render-objects.js

@@ -1,4 +1,4 @@
-// Version 1.35.0 three-render-objects - https://github.com/vasturiano/three-render-objects
+// Version 1.36.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) :
@@ -77547,7 +77547,8 @@ var<${access}> ${name} : ${structName};`;
     return t(G(o));
   };
   var render = function render(jsx, domEl) {
-    return D(_reactElement2VNode(jsx), domEl);
+    delete domEl.__k; // Wipe traces of previous preact renders
+    D(_reactElement2VNode(jsx), domEl);
   };
 
   function styleInject(css, ref) {
@@ -77582,7 +77583,14 @@ var<${access}> ${name} : ${structName};`;
     props: {
       content: {
         "default": false
-      }
+      },
+      offsetX: {
+        triggerUpdate: false
+      },
+      // null or number
+      offsetY: {
+        triggerUpdate: false
+      } // null or number
     },
     init: function init(domNode, state) {
       var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
@@ -77602,24 +77610,27 @@ var<${access}> ${name} : ${structName};`;
       });
       state.tooltipEl // start off-screen
       .style('left', '-10000px').style('display', 'none');
+      var evSuffix = "tooltip-".concat(Math.round(Math.random() * 1e12));
       state.mouseInside = false;
-      el.on('mousemove.tooltip', function (ev) {
+      el.on("mousemove.".concat(evSuffix), function (ev) {
         state.mouseInside = true;
         var mousePos = pointer(ev);
         var domNode = el.node();
         var canvasWidth = domNode.offsetWidth;
         var canvasHeight = domNode.offsetHeight;
-        state.tooltipEl.style('left', mousePos[0] + 'px').style('top', mousePos[1] + 'px')
-        // adjust horizontal position to not exceed canvas boundaries
-        .style('transform', "translate(-".concat(mousePos[0] / canvasWidth * 100, "%, ").concat(
-        // flip to above if near bottom
-        canvasHeight > 130 && canvasHeight - mousePos[1] < 100 ? 'calc(-100% - 6px)' : '21px', ")"));
+        var translate = [state.offsetX === null || state.offsetX === undefined
+        // auto: adjust horizontal position to not exceed canvas boundaries
+        ? "-".concat(mousePos[0] / canvasWidth * 100, "%") : typeof state.offsetX === 'number' ? "calc(-50% + ".concat(state.offsetX, "px)") : state.offsetX, state.offsetY === null || state.offsetY === undefined
+        // auto: flip to above if near bottom
+        ? canvasHeight > 130 && canvasHeight - mousePos[1] < 100 ? 'calc(-100% - 6px)' : '21px' : typeof state.offsetY === 'number' ? state.offsetY < 0 ? "calc(-100% - ".concat(Math.abs(state.offsetY), "px)") : "".concat(state.offsetY, "px") : state.offsetY];
+        state.tooltipEl.style('left', mousePos[0] + 'px').style('top', mousePos[1] + 'px').style('transform', "translate(".concat(translate.join(','), ")"));
+        state.content && state.tooltipEl.style('display', 'inline');
       });
-      el.on('mouseover.tooltip', function () {
+      el.on("mouseover.".concat(evSuffix), function () {
         state.mouseInside = true;
         state.content && state.tooltipEl.style('display', 'inline');
       });
-      el.on('mouseout.tooltip', function () {
+      el.on("mouseout.".concat(evSuffix), function () {
         state.mouseInside = false;
         state.tooltipEl.style('display', 'none');
       });
@@ -77769,10 +77780,10 @@ var<${access}> ${name} : ${structName};`;
               });
               var topIntersect = intersects.length ? intersects[0] : null;
               topObject = topIntersect ? topIntersect.object : null;
-              state.intersectionPoint = topIntersect ? topIntersect.point : null;
+              state.intersection = topIntersect || null;
             }
             if (topObject !== state.hoverObj) {
-              state.onHover(topObject, state.hoverObj);
+              state.onHover(topObject, state.hoverObj, state.intersection);
               state.tooltip.content(topObject ? index$2(state.tooltipContent)(topObject) || null : null);
               state.hoverObj = topObject;
             }
@@ -78025,11 +78036,11 @@ var<${access}> ${name} : ${structName};`;
           // trigger click events asynchronously, to allow hoverObj to be set (on frame)
           if (ev.button === 0) {
             // left-click
-            state.onClick(state.hoverObj || null, ev, state.intersectionPoint); // trigger background clicks with null
+            state.onClick(state.hoverObj || null, ev, state.intersection); // trigger background clicks with null
           }
           if (ev.button === 2 && state.onRightClick) {
             // right-click
-            state.onRightClick(state.hoverObj || null, ev, state.intersectionPoint);
+            state.onRightClick(state.hoverObj || null, ev, state.intersection);
           }
         });
       }, {