Merge pull request #299 from pchen66/debug-event

Adds position debug output as event
pchen66 · Feb 21, 2021 · f1b61f2 · f1b61f2
2 parents 36a9345 + ae9d0db
commit f1b61f2
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 10 deletions.
diff --git a/build/panolens.js b/build/panolens.js
@@ -4,7 +4,7 @@
 	(global = global || self, factory(global.PANOLENS = {}, global.THREE));
 }(this, function (exports, THREE) { 'use strict';
 
-	const version="0.11.0";const dependencies={three:"^0.105.2"};
+	const version="0.12.0";const dependencies={three:"^0.105.2"};
 
 	/**
 	 * REVISION
@@ -2497,7 +2497,12 @@
 	     */
 	    hide: function ( delay = 0 ) {
 
-	        const { animated, hideAnimation, showAnimation, material } = this;
+	        const { animated, hideAnimation, showAnimation, material, element } = this;
+
+	        if ( element ) {
+	            const { style } = element;
+	            style.display = 'none';
+	        }
 
 	        if ( animated ) {
 
@@ -7420,7 +7425,7 @@
 	 * @param {boolean} [options.autoReticleSelect=true] - Auto select a clickable target after dwellTime
 	 * @param {boolean} [options.viewIndicator=false] - Adds an angle view indicator in upper left corner
 	 * @param {number}  [options.indicatorSize=30] - Size of View Indicator
-	 * @param {string}  [options.output='none'] - Whether and where to output raycast position. Could be 'console' or 'overlay'
+	 * @param {string}  [options.output='none'] - Whether and where to output raycast position. Could be 'event', 'console' or 'overlay'.
 	 * @param {boolean} [options.autoRotate=false] - Auto rotate
 	 * @param {number}  [options.autoRotateSpeed=2.0] - Auto rotate speed as in degree per second. Positive is counter-clockwise and negative is clockwise.
 	 * @param {number}  [options.autoRotateActivationDuration=5000] - Duration before auto rotatation when no user interactivity in ms
@@ -8691,12 +8696,27 @@
 	            const world = this.panorama.getWorldPosition( new THREE.Vector3() );
 	            point.sub( world ).multiply( converter );
 
-	            const message = `${point.x.toFixed(2)}, ${point.y.toFixed(2)}, ${point.z.toFixed(2)}`;
+	            const position = {
+	                x: point.x.toFixed(2),
+	                y: point.y.toFixed(2),
+	                z: point.z.toFixed(2),
+	            };
+
+	            const message = `${position.x}, ${position.y}, ${position.z}`;
 
 	            if ( point.length() === 0 ) { return; }
 
 	            switch ( this.options.output ) {
 
+	            case 'event':
+	                /**
+	                 * Dispatch raycast position as event
+	                 * @type {object}
+	                 * @event Viewer#position-output
+	                 */
+	                this.dispatchEvent( { type: 'position-output', position: position } );
+	                break;
+
 	            case 'console':
 	                console.info( message );
 	                break;
@@ -8842,6 +8862,7 @@
 
 	        }
 
+
 	        const intersects = this.raycaster.intersectObjects( this.panorama.children, true );
 	        const intersect_entity = this.getConvertedIntersect( intersects );
 	        const intersect = ( intersects.length > 0 ) ? intersects[0].object : undefined;

diff --git a/build/panolens.module.js b/build/panolens.module.js
@@ -1,6 +1,6 @@
 import { Cache, Texture, RGBFormat, RGBAFormat, CubeTexture, EventDispatcher, VideoTexture, LinearFilter, SpriteMaterial, Sprite, Color, CanvasTexture, DoubleSide, Vector3, Mesh, BackSide, Object3D, SphereBufferGeometry, MeshBasicMaterial, BufferGeometry, BufferAttribute, ShaderLib, BoxBufferGeometry, ShaderMaterial, Matrix4, Vector2, Quaternion, PlaneBufferGeometry, Math as Math$1, MOUSE, PerspectiveCamera, OrthographicCamera, Euler, Scene, StereoCamera, WebGLRenderTarget, NearestFilter, WebGLRenderer, Raycaster, Frustum, REVISION as REVISION$1 } from 'three';
 
-const version="0.11.0";const dependencies={three:"^0.105.2"};
+const version="0.12.0";const dependencies={three:"^0.105.2"};
 
 /**
  * REVISION
@@ -2493,7 +2493,12 @@ Infospot.prototype = Object.assign( Object.create( Sprite.prototype ), {
      */
     hide: function ( delay = 0 ) {
 
-        const { animated, hideAnimation, showAnimation, material } = this;
+        const { animated, hideAnimation, showAnimation, material, element } = this;
+
+        if ( element ) {
+            const { style } = element;
+            style.display = 'none';
+        }
 
         if ( animated ) {
 
@@ -7416,7 +7421,7 @@ const StereoEffect = function ( renderer ) {
  * @param {boolean} [options.autoReticleSelect=true] - Auto select a clickable target after dwellTime
  * @param {boolean} [options.viewIndicator=false] - Adds an angle view indicator in upper left corner
  * @param {number}  [options.indicatorSize=30] - Size of View Indicator
- * @param {string}  [options.output='none'] - Whether and where to output raycast position. Could be 'console' or 'overlay'
+ * @param {string}  [options.output='none'] - Whether and where to output raycast position. Could be 'event', 'console' or 'overlay'.
  * @param {boolean} [options.autoRotate=false] - Auto rotate
  * @param {number}  [options.autoRotateSpeed=2.0] - Auto rotate speed as in degree per second. Positive is counter-clockwise and negative is clockwise.
  * @param {number}  [options.autoRotateActivationDuration=5000] - Duration before auto rotatation when no user interactivity in ms
@@ -8687,12 +8692,27 @@ Viewer.prototype = Object.assign( Object.create( EventDispatcher.prototype ), {
             const world = this.panorama.getWorldPosition( new Vector3() );
             point.sub( world ).multiply( converter );
 
-            const message = `${point.x.toFixed(2)}, ${point.y.toFixed(2)}, ${point.z.toFixed(2)}`;
+            const position = {
+                x: point.x.toFixed(2),
+                y: point.y.toFixed(2),
+                z: point.z.toFixed(2),
+            };
+
+            const message = `${position.x}, ${position.y}, ${position.z}`;
 
             if ( point.length() === 0 ) { return; }
 
             switch ( this.options.output ) {
 
+            case 'event':
+                /**
+                 * Dispatch raycast position as event
+                 * @type {object}
+                 * @event Viewer#position-output
+                 */
+                this.dispatchEvent( { type: 'position-output', position: position } );
+                break;
+
             case 'console':
                 console.info( message );
                 break;
@@ -8838,6 +8858,7 @@ Viewer.prototype = Object.assign( Object.create( EventDispatcher.prototype ), {
 
         }
 
+
         const intersects = this.raycaster.intersectObjects( this.panorama.children, true );
         const intersect_entity = this.getConvertedIntersect( intersects );
         const intersect = ( intersects.length > 0 ) ? intersects[0].object : undefined;

diff --git a/src/viewer/Viewer.js b/src/viewer/Viewer.js
@@ -34,7 +34,7 @@ import TWEEN from '@tweenjs/tween.js';
  * @param {boolean} [options.autoReticleSelect=true] - Auto select a clickable target after dwellTime
  * @param {boolean} [options.viewIndicator=false] - Adds an angle view indicator in upper left corner
  * @param {number}  [options.indicatorSize=30] - Size of View Indicator
- * @param {string}  [options.output='none'] - Whether and where to output raycast position. Could be 'console' or 'overlay'
+ * @param {string}  [options.output='none'] - Whether and where to output raycast position. Could be 'event', 'console' or 'overlay'.
  * @param {boolean} [options.autoRotate=false] - Auto rotate
  * @param {number}  [options.autoRotateSpeed=2.0] - Auto rotate speed as in degree per second. Positive is counter-clockwise and negative is clockwise.
  * @param {number}  [options.autoRotateActivationDuration=5000] - Duration before auto rotatation when no user interactivity in ms
@@ -1306,12 +1306,27 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
             const world = this.panorama.getWorldPosition( new THREE.Vector3() );
             point.sub( world ).multiply( converter );
 
-            const message = `${point.x.toFixed(2)}, ${point.y.toFixed(2)}, ${point.z.toFixed(2)}`;
+            const position = {
+                x: point.x.toFixed(2),
+                y: point.y.toFixed(2),
+                z: point.z.toFixed(2),
+            };
+
+            const message = `${position.x}, ${position.y}, ${position.z}`;
 
             if ( point.length() === 0 ) { return; }
 
             switch ( this.options.output ) {
 
+            case 'event':
+                /**
+                 * Dispatch raycast position as event
+                 * @type {object}
+                 * @event Viewer#position-output
+                 */
+                this.dispatchEvent( { type: 'position-output', position: position } );
+                break;
+
             case 'console':
                 console.info( message );
                 break;
@@ -1457,6 +1472,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
 
         }
 
+
         const intersects = this.raycaster.intersectObjects( this.panorama.children, true );
         const intersect_entity = this.getConvertedIntersect( intersects );
         const intersect = ( intersects.length > 0 ) ? intersects[0].object : undefined;

diff --git a/test/src/viewer/Viewer.test.js b/test/src/viewer/Viewer.test.js
@@ -207,6 +207,24 @@ test.cb('Output positions with mouse events - console', t => {
 
 });
 
+test.cb('Output positions with mouse events - event', t => {
+
+    const viewer = new Viewer( { output: 'event' } );
+    const panorama = new ImagePanorama( cabinImageURL );
+
+    viewer.add( panorama );
+
+    t.context.viewer = viewer;
+    t.context.end = () => {
+        window.dispatchEvent( keyboardUpEvent );
+        t.end();
+    };
+    t.context.start();
+
+    window.dispatchEvent( keyboardDownEvent );
+
+});
+
 test.cb('Output positions with mouse events - overlay', t => {
 
     const viewer = new Viewer( { output: 'overlay' } );