three-render-objects 1.26.6 → 1.27.0

package/README.md

@@ -3,7 +3,7 @@ three-render-objects
 
 [![NPM package][npm-img]][npm-url]
 [![Build Size][build-size-img]][build-size-url]
-[![Dependencies][dependencies-img]][dependencies-url]
+[![NPM Downloads][npm-downloads-img]][npm-downloads-url]
 
 This module offers a convenient way to render [ThreeJS](https://threejs.org/) objects onto a WebGL canvas, with built-in interaction capabilities:
 * hover/click events
@@ -15,28 +15,28 @@ All the renderer/scene/camera scaffolding is already included and any instance o
 
 ## Quick start
 
-```
+```js
 import ThreeRenderObjects from 'three-render-objects';
 ```
 or
-```
-var ThreeRenderObjects = require('three-render-objects');
+```js
+const ThreeRenderObjects = require('three-render-objects');
 ```
 or even
-```
+```html
 <script src="//unpkg.com/three-render-objects"></script>
 ```
 then
-```
+```js
 const myCanvas = ThreeRenderObjects();
 myCanvas(<myDOMElement>)
-    .objects(<myData>);
+  .objects(<myData>);
 ```
 
 ## API reference
 
 ### Initialisation
-```
+```js
 ThreeRenderObjects({ configOptions })(<domElement>)
 ```
 
@@ -104,9 +104,9 @@ ThreeRenderObjects({ configOptions })(<domElement>)
 | <b>getSceneCoords</b>(<i>x</i>, <i>y</i>, <i>distance</i>) | Utility method to translate viewport distance coordinates to the scene 3D domain. Given a set of `x`,`y` viewport coordinates and distance from the camera, returns the current equivalent `{x, y, z}` in 3D scene coordinates. If no distance is provided, defaults to `0`. |
 | <b>intersectingObjects</b>(<i>x</i>, <i>y</i>) | Utility method to retrieve the list of objects under the line of sight of the given viewport coordinates. Returns an array of [intersectObject](https://threejs.org/docs/#api/en/core/Raycaster.intersectObject), sorted by distance (from closest to farthest). |
 
-[npm-img]: https://img.shields.io/npm/v/three-render-objects.svg
+[npm-img]: https://img.shields.io/npm/v/three-render-objects
 [npm-url]: https://npmjs.org/package/three-render-objects
-[build-size-img]: https://img.shields.io/bundlephobia/minzip/three-render-objects.svg
+[build-size-img]: https://img.shields.io/bundlephobia/minzip/three-render-objects
 [build-size-url]: https://bundlephobia.com/result?p=three-render-objects
-[dependencies-img]: https://img.shields.io/david/vasturiano/three-render-objects.svg
-[dependencies-url]: https://david-dm.org/vasturiano/three-render-objects
+[npm-downloads-img]: https://img.shields.io/npm/dt/three-render-objects
+[npm-downloads-url]: https://www.npmtrends.com/three-render-objects

package/dist/three-render-objects.common.js

@@ -46,7 +46,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  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}\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}\n\n.scene-nav-info, .scene-tooltip {\n  position: absolute;\n  font-family: sans-serif;\n  pointer-events: none;\n}\n\n.scene-container canvas:focus {\n  outline: none;\n}";
 styleInject(css_248z);
 
 function _defineProperty(obj, key, value) {
@@ -502,8 +502,10 @@ var threeRenderObjects = Kapsule__default["default"]({
           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");
-          state.toolTipElem.style.transform = "translate(-".concat(state.pointerPos.x / state.width * 100, "%, 21px)"); // adjust horizontal position to not exceed canvas boundaries
+          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) {

package/dist/three-render-objects.js

@@ -1,4 +1,4 @@
-// Version 1.26.6 three-render-objects - https://github.com/vasturiano/three-render-objects
+// Version 1.27.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 = ".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  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}\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}\n\n.scene-nav-info, .scene-tooltip {\n  position: absolute;\n  font-family: sans-serif;\n  pointer-events: none;\n}\n\n.scene-container canvas:focus {\n  outline: none;\n}";
   styleInject(css_248z);
 
   function _defineProperty(obj, key, value) {
@@ -660,9 +660,6 @@
   						_state = STATE.PAN;
   						break;
 
-  					default:
-  						_state = STATE.NONE;
-
   				}
 
   			}
@@ -825,7 +822,7 @@
 
   				case 2:
   					_state = STATE.TOUCH_ZOOM_PAN;
-  					_moveCurr.copy( getMouseOnCircle( event.pageX - _movePrev.pageX, event.pageY - _movePrev.pageY ) );
+  					_moveCurr.copy( getMouseOnCircle( event.pageX - _movePrev.x, event.pageY - _movePrev.y ) );
   					_movePrev.copy( _moveCurr );
   					break;
 
@@ -2427,7 +2424,7 @@
    * Full-screen textured quad shader
    */
 
-  var CopyShader = {
+  const CopyShader = {
 
   	uniforms: {
 
@@ -2457,8 +2454,9 @@
 
 		void main() {
 
-			vec4 texel = texture2D( tDiffuse, vUv );
-			gl_FragColor = opacity * texel;
+			gl_FragColor = texture2D( tDiffuse, vUv );
+			gl_FragColor.a *= opacity;
+
 
 		}`
 
@@ -2703,18 +2701,12 @@
 
   		if ( renderTarget === undefined ) {
 
-  			const parameters = {
-  				minFilter: three$1.LinearFilter,
-  				magFilter: three$1.LinearFilter,
-  				format: three$1.RGBAFormat
-  			};
-
   			const size = renderer.getSize( new three$1.Vector2() );
   			this._pixelRatio = renderer.getPixelRatio();
   			this._width = size.width;
   			this._height = size.height;
 
-  			renderTarget = new three$1.WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio, parameters );
+  			renderTarget = new three$1.WebGLRenderTarget( this._width * this._pixelRatio, this._height * this._pixelRatio );
   			renderTarget.texture.name = 'EffectComposer.rt1';
 
   		} else {
@@ -3009,7 +3001,7 @@
   }
 
   function _extends() {
-    _extends = Object.assign || function (target) {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
 
@@ -3022,7 +3014,6 @@
 
       return target;
     };
-
     return _extends.apply(this, arguments);
   }
 
@@ -3035,11 +3026,10 @@
   }
 
   function _setPrototypeOf(o, p) {
-    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
       o.__proto__ = p;
       return o;
     };
-
     return _setPrototypeOf(o, p);
   }
 
@@ -3050,7 +3040,7 @@
   }
 
   function _getPrototypeOf(o) {
-    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
       return o.__proto__ || Object.getPrototypeOf(o);
     };
     return _getPrototypeOf(o);
@@ -3075,7 +3065,7 @@
 
   function _construct(Parent, args, Class) {
     if (_isNativeReflectConstruct()) {
-      _construct = Reflect.construct;
+      _construct = Reflect.construct.bind();
     } else {
       _construct = function _construct(Parent, args, Class) {
         var a = [null];
@@ -3480,10 +3470,10 @@
   var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
   var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
   var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
-  var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
-  var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
-  var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
-  var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+  var rgbRegex = /^rgb\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*\)$/i;
+  var rgbaRegex = /^rgb(?:a)?\(\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,)?\s*(\d{1,3})\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
+  var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+  var hslaRegex = /^hsl(?:a)?\(\s*(\d{0,3}[.]?[0-9]+(?:deg)?)\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,)?\s*(\d{1,3}[.]?[0-9]?)%\s*(?:,|\/)\s*([-+]?\d*[.]?\d+[%]?)\s*\)$/i;
   /**
    * Returns an RgbColor or RgbaColor object. This utility function is only useful
    * if want to extract a color component. With the color util `toColorString` you
@@ -3557,7 +3547,7 @@
         red: parseInt("" + rgbaMatched[1], 10),
         green: parseInt("" + rgbaMatched[2], 10),
         blue: parseInt("" + rgbaMatched[3], 10),
-        alpha: parseFloat("" + rgbaMatched[4])
+        alpha: parseFloat("" + rgbaMatched[4]) > 1 ? parseFloat("" + rgbaMatched[4]) / 100 : parseFloat("" + rgbaMatched[4])
       };
     }
 
@@ -3602,7 +3592,7 @@
         red: parseInt("" + _hslRgbMatched[1], 10),
         green: parseInt("" + _hslRgbMatched[2], 10),
         blue: parseInt("" + _hslRgbMatched[3], 10),
-        alpha: parseFloat("" + hslaMatched[4])
+        alpha: parseFloat("" + hslaMatched[4]) > 1 ? parseFloat("" + hslaMatched[4]) / 100 : parseFloat("" + hslaMatched[4])
       };
     }
 
@@ -5240,8 +5230,10 @@
             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");
-            state.toolTipElem.style.transform = "translate(-".concat(state.pointerPos.x / state.width * 100, "%, 21px)"); // adjust horizontal position to not exceed canvas boundaries
+            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) {