annotation as component proper

index.html

@@ -109,7 +109,8 @@
       <a-entity hide-on-enter-ar="" id="environmentsky" class="hidableenvironment" ></a-entity>
       <a-troika-text anchor=left target value="instructions : \n--right pinch to move\n--left pinch to execute" position="0 0.65 -0.2" scale="0.1 0.1 0.1"></a-troika-text>
       
-      <a-troika-text anchor=left target id="startdraw2d" value="jxr startDraw2D()" position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
+      <a-troika-text anchor=left target id="startdraw2d" annotation="content:dessiner en 2D"
+		value="jxr startDraw2D()" position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
 
       <a-troika-text anchor=left target id="displaypred" value="jxr displayPred()" position="0 1.40 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
       <a-troika-text anchor=left target id="locationreload" value="jxr location.reload()" position="0 1.20 -0.1" scale="0.1 0.1 0.1"></a-troika-text>

jxr.js

@@ -3419,8 +3419,28 @@ function thumbToIndexAngle(){
 	}, 590)
 }
 
+AFRAME.registerComponent('annotation', {
+// consider also multiple annotation but being mindful that it might clutter significantly
+  schema: {
+	content : {type: 'string'}
+  },
+  init: function () {
+	addAnnotation(this.el, this.data.content)
+  },
+  update: function () {
+	this.el.querySelector('.annotation').setAttribute('value', this.data.content )
+	// assuming single annotation
+  },
+  remove: function () {
+	this.el.querySelector('.annotation').removeFromParent()
+	//Array.from( this.el.querySelectorAll('.annotation') ).map( a => a.removeFromParent() )
+  }
+})
+
 function addAnnotation(el, content){
+	// could also appear only when in close proximity or while pinching
 	let annotation = document.createElement( 'a-troika-text' )
+	annotation.classList.add( 'annotation' )
 	annotation.setAttribute('value', content)
 	annotation.setAttribute('position', '0 .1 -.1')
 	annotation.setAttribute('rotation', '-90 0 0')