From 880b45613e9330cf494e93d307ec539b1f48443b Mon Sep 17 00:00:00 2001
From: Fabien Benetou <fabien-services@benetou.fr>
Date: Sat, 18 Feb 2023 16:51:09 +0100
Subject: [PATCH] note replay via secondary pinch

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

diff --git a/index.html b/index.html
index c14af0b..eab2968 100644
--- a/index.html
+++ b/index.html
@@ -951,6 +951,7 @@ AFRAME.registerComponent('pinchsecondary', {
 		selectedElements.push({element:selectedElement, timestamp:Date.now(), primary:false})
 		// if close enough to a target among a list of potential targets, unselect previous target then select new
 		if (selectedElement) interpretJXR( selectedElement.getAttribute("value") )
+		if (selectedElement) selectedElement.emit('released_secondary')
 		selectedElement = null
 		if (setupMode) setupBBox["B"] = event.detail.position
 		if ( setupBBox["A"] && setupBBox["B"] ) {
@@ -966,6 +967,8 @@ AFRAME.registerComponent('pinchsecondary', {
 	       */
 	});
 	this.el.addEventListener('pinchmoved', function (event) {
+		selectedElement = getClosestTargetElement( event.detail.position )
+		if (selectedElement) selectedElement.emit('moved_secondary')
 		if (selectionPinchMode){
 			bbox.min.copy( event.detail.position )
 			setFeedbackHUD( "selectionPinchMode updated min")
@@ -974,6 +977,8 @@ AFRAME.registerComponent('pinchsecondary', {
 		}
 	});
 	this.el.addEventListener('pinchstarted', function (event) {
+		selectedElement = getClosestTargetElement( event.detail.position )
+		if (selectedElement) selectedElement.emit('picked_secondary')
 		if (!selectionPinchMode) bbox.min.copy( zeroVector3 )
 		if (selectionPinchMode) setFeedbackHUD( "selectionPinchMode started")
 	});
@@ -2436,6 +2441,7 @@ function webMidiStarted(){
 		b.classList.add("musicalnote") // until now often assumed as single class, probably will lead to bugs
 		let inlineColored = [...b.querySelectorAll(".outlined_object")].map( el => el.setAttribute("color", notes[identifierNoOctave]) )
 		notesPlaying[e.note.identifier] = true;
+		b.setAttribute('play-musicalnote-on-pinchend-secondary', e.note.identifier)
 		synth.triggerAttackRelease(e.note.identifier, "8n");
 	}); // for now assuming an arbitrary duration but should rely on notesPlaying
 	myInput.addListener("noteoff", e => { notesPlaying[e.note.identifier] = false; console.log(e.note); }); // could be used for note duration
@@ -2453,6 +2459,20 @@ const notes = {"C": "#7af500", "C#": "#00f500", "D": "#00f57a", "D#": "#00f5f5",
 const drumKit = { "C": "bass.wav", "C#": "clap.wav", "D": "cymbal.wav", "D#": "hi hat.wav", "E": "bass.wav", "F": "clap.wav", "F#": "cymbal.wav", "G": "hi hat.wav" }
 const drumkitBaseURL = "https://fabien.benetou.fr/pub/home/future_of_text_demo/content/Roland808DrumKit/"
 
+AFRAME.registerComponent('play-musicalnote-on-pinchend-secondary', {
+	schema: {
+		note: {type: 'string', default: 'C3'}
+	},
+	init: function(){
+		let el = this.el
+		let note = this.data.note
+		let generatorName = this.attrName
+		this.el.addEventListener('released_secondary', function (event) {
+			synth.triggerAttackRelease(el.getAttribute(generatorName), "8n");
+		})
+	}
+})
+
 </script>
 <div id="observablehq-key">
     <div id="observablehq-viewof-offsetExample-ab4c1560"></div>