make only visible element pinchable

index.html

@@ -639,7 +639,7 @@ AFRAME.registerComponent('screenstack', {
 function getClosestTargetElement( pos, threshold=0.05 ){ // 10x lower threshold for flight mode
 	// TODO Bbox intersects rather than position
 	var res = null
-	const matches = targets.map( t => { return { el: t, dist : pos.distanceTo(t.getAttribute("position") ) } })
+	const matches = targets.filter( e => e.getAttribute("visible") == true).map( t => { return { el: t, dist : pos.distanceTo(t.getAttribute("position") ) } })
 		.filter( t => t.dist < threshold ) 
 		.sort( (a,b) => a.dist > b.dist)
 	if (matches.length > 0) res = matches[0].el
@@ -736,7 +736,7 @@ function addToGroup( position ){
 }
 
 function appendToHUD(txt){
-	const textHUD = document.querySelector("[hud]>a-text").getAttribute("value") 
+	const textHUD = document.querySelector("[hud]>a-troika-text").getAttribute("value") 
 	if ( textHUD == startingText)
 		setHUD( txt )
 	else
@@ -744,20 +744,9 @@ function appendToHUD(txt){
 }
 
 function setHUD(txt){
-	document.querySelector("[hud]>a-text").setAttribute("value",txt)
+	document.querySelector("[hud]>a-troika-text").setAttribute("value",txt)
 }
 
-AFRAME.registerComponent('pinchletterpick', { 
-  init: function () {
-	 // alt document.querySelector("#righthand").components["hand-tracking-controls"].indexTipPosition
-	this.el.addEventListener('pinchmoved', function (event) {
-		var res = stringWithPositionFromCoordinates( event.detail.position )
-		if (res.element) 
-			setHUD( res.element.getAttribute("value")[res.index] )
-	});
-  }
-});
-
 AFRAME.registerComponent('pinchsecondary', { 
   init: function () {
 	this.el.addEventListener('pinchended', function (event) {
@@ -767,7 +756,7 @@ AFRAME.registerComponent('pinchsecondary', {
 		if (setupMode) setupBBox["B"] = event.detail.position
 		if ( setupBBox["A"] && setupBBox["B"] ) {
 			setupMode = false
-			document.querySelector("[hud]>a-text").setAttribute("value",JSON.stringify(setupBBox))
+			setHUD( JSON.stringify(setupBBox))
 		}
 		/*
 		selectionPinchMode = false
@@ -848,7 +837,7 @@ AFRAME.registerComponent('pinchprimary', { // currently only 1 hand, the right o
 			// somehow keeps on setting up... shouldn't once done.
 		if ( setupBBox["A"] && setupBBox["B"] ) {
 			setupMode = false
-			document.querySelector("[hud]>a-text").setAttribute("value",JSON.stringify(setupBBox))
+			setHUD( JSON.stringify(setupBBox))
 		}
 		if ( drawingMode ) draw( event.detail.position )
 		if ( groupingMode ) addToGroup( event.detail.position )
@@ -1030,10 +1019,8 @@ function parseKeys(status, key){
 AFRAME.registerComponent('hud', {
 	init: function(){
 		var el = this.el
-		var e = document.createElement("a-text") //could be hardcoded instead... arguable.
+		var e = document.createElement("a-troika-text")
-		// should also be troika
 		e.setAttribute("value", startingText)
-		//e.setAttribute("font", "sw-test/Roboto-msdf.json")
 		e.setAttribute("position", "-0.05 0 -0.2") 
 		e.setAttribute("scale", "0.05 0.05 0.05") 
 		el.appendChild( e )
@@ -1048,7 +1035,6 @@ AFRAME.registerComponent('hud', {
 })
 
 function addNewNote( text, position=`-0.2 1.1 -0.1`, scale= "0.1 0.1 0.1", id=null, classes=null, visible="true" ){
-	//var newnote = document.createElement("a-text")
 	var newnote = document.createElement("a-troika-text")
 	newnote.setAttribute("anchor", "left" )
 	newnote.setAttribute("outline-width", "5%" )
@@ -1426,8 +1412,6 @@ function load(){
 		cabin = JSON.parse(localStorage.getItem('cabin'))
 	cabin.map( e => {
 		var newel = document.createElement(e.localname)
-		//if (e.localname=="a-text") newel.setAttribute("font", "sw-test/Roboto-msdf.json")
-		// forcing Robot to try to keep all local and thus be able to cache via ServiceWorker.
 		savedProperties.map( p => {
 			if (e[p] ) newel.setAttribute(p, e[p])
 		})
@@ -1468,7 +1452,6 @@ function remoteSave(){
 	-->
       <a-assets>
 	      <template id="avatar-template"> <a-cylinder opacity=.3 scale=".2 1.2 .2" networked-audio-source></a-cylinder> </template>
-	      <template id="text-template"> <a-text></a-text> </template>
 	      <template id="left-hand-default-template">
 		      <a-entity networked-hand-controls="hand:left"></a-entity>
 	      </template>
@@ -1492,7 +1475,7 @@ function remoteSave(){
 -->
 
       <a-entity pinchprimary id="rightHand" hand-tracking-controls="hand: right;"></a-entity>
-      <a-entity wristattachsecondary="target: #box" NOpinchletterpick pinchsecondary id="leftHand" hand-tracking-controls="hand: left;"></a-entity>
+      <a-entity wristattachsecondary="target: #box" pinchsecondary id="leftHand" hand-tracking-controls="hand: left;"></a-entity>
 
       <a-box pressable start-on-press id="box" scale="0.05 0.05 0.05" color="pink"></a-box>
       <!-- could attach functions here... BUT then they have to be activable with the other hand! -->
@@ -1525,16 +1508,5 @@ function remoteSave(){
 	-->
 
     </a-scene>
-<script>
-NAF.schemas.add({
-  template: '#text-template',
-  components: [
-    'position',
-    'rotation',
-    'scale',
-    'value',
-  ]
-})
-</script>
   </body>
 </html>