From 8d0f5e2756fc7267f854903707481afbfb2f2a89 Mon Sep 17 00:00:00 2001
From: Fabien Benetou <fabien-services@benetou.fr>
Date: Fri, 13 Oct 2023 10:42:13 +0200
Subject: [PATCH] annotation as component proper

---
 index.html |  3 ++-
 jxr.js     | 20 ++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a3a6dd9..f6c8f59 100644
--- a/index.html
+++ b/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>
diff --git a/jxr.js b/jxr.js
index 257bcb8..eba384b 100644
--- a/jxr.js
+++ b/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')