apply modifier to class

index.html

@@ -2153,12 +2153,53 @@ function getIdFromPick(){
 	return id
 }
 
+function getClassFromPick(){ // should be classes, for now assuming one
+	let classFound = null
+	let pp = selectedElements.filter( e => e.primary )
+	if (pp && pp[pp.length-1] && pp[pp.length-1].element ){
+		//if (!pp[pp.length-1].element.className) pp[pp.length-1].element.className= "missingclass"
+		// arguable
+		classFound = pp[pp.length-1].element.className
+		setFeedbackHUD(classFound)
+	}
+	return classFound
+}
+
+function changeColorLastClass(){
+	let classFound = getClassFromPick() // applies on primary only
+	if (classFound) 
+		[...document.querySelectorAll("."+classFound)].map( el => el.setAttribute("color", "red") )
+}
+
 function changeColorLastId(){
 	let id = getIdFromPick() // applies on primary only
-	console.log("id?",id)
 	if (id) document.querySelector("#"+id).setAttribute("color", "red")
 }
 
+/*
+
+generalize selector to pick last Nth rather than very last
+        adapt getIdFromPick() with .slice() after filter then map on length-N instead of length-1
+
+selector pickers : pickClass and pickId
+        display result in 3D HUD with rotating objects and selector value
+                ideally themselves also selectable/usable, e.g clone from HUD to bring back "out"
+                         requires extra work as becoming a child will not work, own positionning
+                                should fix that
+                        could compare to world coordinates instead of "just" position attribute
+        add a clear selector function to avoid making the HUD unusable
+
+could also pick via volume, e.g wireframe box
+        start with https://threejs.org/docs/#api/en/math/Box3.containsPoint
+                can iterate with https://threejs.org/docs/#api/en/math/Box3.containsBox
+                consider also https://threejs.org/docs/#api/en/math/Box3.intersectsBox
+
+consider pick then apply, i.e changeColorLastId() but for next Id
+        should be cancealable
+
+*/
+
+
 </script>
 <div id="observablehq-key">
     <div id="observablehq-viewof-offsetExample-ab4c1560"></div>
@@ -2212,6 +2253,9 @@ function changeColorLastId(){
       <a-text target value="jxr tile_snapping_enabled = !tile_snapping_enabled" position="0 1.40 -0.1" scale="0.1 0.1 0.1"></a-text>
       <a-text target id="getfromid_color" value="jxr changeColorLastId()" position="0 1.35 -0.1" scale="0.1 0.1 0.1"></a-text>
       <a-text target id="getfromid_id" value="jxr getIdFromPick()" position="0 1.30 -0.1" scale="0.1 0.1 0.1"></a-text>
+      <a-text target id="locationreload" value="jxr location.reload()" position="0 1.20 -0.1" scale="0.1 0.1 0.1"></a-text>
+      <a-text target id="getfromclass_color" value="jxr changeColorLastClass()" position="0 1.15 -0.1" scale="0.1 0.1 0.1"></a-text>
+      <a-text target id="getfromclass_id" value="jxr getClassFromPick()" position="0 1.10 -0.1" scale="0.1 0.1 0.1"></a-text>
 
       <a-text target value="jxr pushLeftClass('tiles')" position=" -0.2 1.55 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text>
       <a-text target value="jxr pushRightClass('tiles')" position=" -0.2 1.50 0.1" rotation="0 90 0" scale="0.1 0.1 0.1"></a-text>