From 5c517915e0d13312a2325f217f6f22bf42860063 Mon Sep 17 00:00:00 2001
From: Fabien Benetou <fabien-services@benetou.fr>
Date: Fri, 25 Nov 2022 11:32:37 +0100
Subject: [PATCH] facilitating introspection with jxr observe variableName

---
 index.html | 37 +++++++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)

diff --git a/index.html b/index.html
index e7c67eb..7bf8337 100644
--- a/index.html
+++ b/index.html
@@ -73,6 +73,23 @@ new Runtime().module(define2, name => {
 </script>
 
 <script>
+
+/*
+
+motion to data
+	- integer, e.g distance from beginning to end
+	- curve, sampling N points between beginning and end
+
+being able to use that in jxr commands, with example related to positioning entities
+	see https://git.benetou.fr/utopiah/text-code-xr-engine/issues/52#issuecomment-229
+	
+warning that selectedElement will get overwritten once executing a command by pinching
+	consequently in addition to have a history of executed commands
+		there should be a history of selected elements
+			and maybe their changed position states
+*/
+
+
 const prefix = /^jxr /
 const codeFontColor = "lightgrey"
 const fontColor= "white"
@@ -538,6 +555,7 @@ function plot(equation,variablename="x",scale=5,step=1){
 		}
 		previousPoint = pos
 	}
+	// variablename seems unused
 }
 
 AFRAME.registerComponent('target', {
@@ -1174,7 +1192,18 @@ function saveHistoryAsCompoundSnippet(){
 	addNewNote( commandhistory.map( e => e.uninterpreted ).join("\n") )
 }
 
+function bindVariableValueToNewNote(variableName){
+	const idName = "bindVariableValueToNewNote"+variableName
+	addNewNote( variableName + ":" + eval(variableName), `-0.15 1.4 -0.1`,  "0.1 0.1 0.1", idName, "observers", "true" )
+	return setInterval( _ => {
+		const value = variableName+";"+eval(variableName)
+		// not ideal for DOM elements, could have shortcuts for at least a-text with properties, e.g value or position
+		document.getElementById(idName).setAttribute("value", value)
+	}, 100 )
+}
+
 function parseJXR( code ){
+// should make reserved keywords explicit.
 	var newcode = code
 	newcode = newcode.replace("jxr ", "")
 	newcode = newcode.replace(/(\d)s (.*)/ ,`setTimeout( _ => { $2 }, $1*1000)`)
@@ -1188,6 +1217,11 @@ function parseJXR( code ){
 
 	newcode = newcode.replace(/obsv ([^\s]+)/ ,`newNoteFromObservableCell('$1')`)
 
+	// TODO
+	//<a-text target value="jxr observe selectedElement" position="0 1.25 -0.2" scale="0.1 0.1 0.1"></a-text>
+	newcode = newcode.replace(/observe ([^\s]+)/,`bindVariableValueToNewNote('$1')`)
+	// could proxy instead... but for now, the quick and dirty way :
+
 	// e.g qs a-sphere sa color red => 
 	// document.querySelector("a-sphere").setAttribute("color", "red")
 
@@ -1596,6 +1630,9 @@ function switchSide(){
 	      <a-plane position="0 1 -1" scale="0.21 0.15 1" rotation="-30 0 0" wireframe="true"></a-plane>
 	-->
 
+	<a-text target value="jxr AFRAME.scenes[0].components.inspector.openInspector()" position="0 1.25 -0.2" scale="0.1 0.1 0.1"></a-text>
+	<a-text target value="jxr observe selectedElement" position="0 1.15 -0.2" scale="0.1 0.1 0.1"></a-text>
+
     </a-scene>
   </body>
 </html>