feat: got multitouch in action!

Author: davay42

components/chroma/ChromaFlower.vue

@@ -10,6 +10,7 @@ import { colord } from "colord";
 import { useClipboard, watchThrottled } from '@vueuse/core'
 import { computed, onMounted, ref, shallowRef } from 'vue'
 import { Note } from 'tonal'
+import { useGesture } from '@vueuse/gesture'
 
 const props = defineProps({
   letters: { type: Boolean, default: true },
@@ -75,6 +76,115 @@ watchThrottled(loaded, l => {
     console.error('Loaded color scheme is not valid')
   }
 })
+
+const svg = ref()
+const currentNote = ref(null)
+const touchPoints = new Map()
+
+useGesture({
+  onTouchstart: handleTouchStart,
+  onTouchmove: handleTouchMove,
+  onTouchend: handleTouchEnd,
+  onTouchcancel: handleTouchEnd,
+  onDrag: ({ event, first, last, active }) => {
+    event.preventDefault()
+    const element = document.elementFromPoint(event.clientX, event.clientY)
+    if (!element) return
+
+    const keyElement = element.closest('.key')
+    if (!keyElement) return
+
+    const noteData = flower.value[parseInt(keyElement.dataset.pitch)]
+    if (!noteData) return
+
+    if (first) {
+      playNote(noteData.midi)
+      currentNote.value = noteData.midi
+    } else if (last) {
+      stopNote(currentNote.value)
+      currentNote.value = null
+    } else if (active && currentNote.value !== noteData.midi) {
+      stopNote(currentNote.value)
+      playNote(noteData.midi)
+      currentNote.value = noteData.midi
+    }
+  },
+  onDragEnd: () => {
+    if (currentNote.value !== null) {
+      stopNote(currentNote.value)
+      currentNote.value = null
+    }
+  }
+}, {
+  domTarget: svg,
+  eventOptions: { passive: false },
+  triggerAllEvents: true,
+  dragDelay: 0,
+})
+
+function handleTouchStart({ event }) {
+  event.preventDefault()
+  Array.from(event.changedTouches).forEach(touch => {
+    const element = document.elementFromPoint(touch.clientX, touch.clientY)
+    if (!element) return
+
+    const keyElement = element.closest('.key')
+    if (!keyElement) return
+
+    const noteData = flower.value[parseInt(keyElement.dataset.pitch)]
+    if (!noteData) return
+
+    touchPoints.set(touch.identifier, noteData.midi)
+    playNote(noteData.midi)
+  })
+}
+
+function handleTouchMove({ event }) {
+  event.preventDefault()
+  Array.from(event.changedTouches).forEach(touch => {
+    const oldNote = touchPoints.get(touch.identifier)
+    const element = document.elementFromPoint(touch.clientX, touch.clientY)
+    if (!element) {
+      if (oldNote !== undefined) {
+        stopNote(oldNote)
+        touchPoints.delete(touch.identifier)
+      }
+      return
+    }
+
+    const keyElement = element.closest('.key')
+    if (!keyElement) {
+      if (oldNote !== undefined) {
+        stopNote(oldNote)
+        touchPoints.delete(touch.identifier)
+      }
+      return
+    }
+
+    const noteData = flower.value[parseInt(keyElement.dataset.pitch)]
+    if (!noteData) return
+
+    const newNote = noteData.midi
+    if (newNote !== oldNote) {
+      if (oldNote !== undefined) {
+        stopNote(oldNote)
+      }
+      touchPoints.set(touch.identifier, newNote)
+      playNote(newNote)
+    }
+  })
+}
+
+function handleTouchEnd({ event }) {
+  event.preventDefault()
+  Array.from(event.changedTouches).forEach(touch => {
+    const note = touchPoints.get(touch.identifier)
+    if (note !== undefined) {
+      stopNote(note)
+      touchPoints.delete(touch.identifier)
+    }
+  })
+}
 </script>
 
 <template lang="pug">
@@ -102,12 +212,14 @@ watchThrottled(loaded, l => {
       )
 
   svg.w-full.min-w-full(
+    ref="svg"
     version="1.1",
     baseProfile="full",
     :viewBox="`${-pad} ${-pad} ${size + 2 * pad} ${size + 2 * pad}`",
     xmlns="http://www.w3.org/2000/svg",
     text-anchor="middle" 
-    dominant-baseline="middle" 
+    dominant-baseline="middle"
+    style="touch-action: none"
     @touchstart="pressed = true"
     @touchend="pressed = false"
     @mousedown="pressed = true"
@@ -143,12 +255,7 @@ watchThrottled(loaded, l => {
     g(:transform="`translate(${size / 2}, ${size / 2}) `")
       g.keys(v-for="(note, pitch) in flower" :key="note")
         g.key.cursor-pointer(
-          @mousedown.passive="keyPlay(note.midi, $event);"
-          @mouseup.passive="keyPlay(note.midi, $event, true)"
-          @mouseenter.passive="pressed && keyPlay(note.midi, $event);"
-          @touchstart.prevent.stop="keyPlay(note.midi, $event)"
-          @touchend.prevent.stop="keyPlay(note.midi, $event, true)"
-          @mouseleave="keyPlay(note.midi, $event, true)"
+          :data-pitch="pitch"
           )
           g.petal(
             :transform="`rotate(${pitch * 30}) translate(2,-120) `"
@@ -315,4 +422,12 @@ input[type="color"]::-webkit-color-swatch {
   border: none;
   border-radius: 50%;
 }
+
+svg {
+  touch-action: none;
+}
+
+.key {
+  touch-action: none;
+}
 </style>

components/midi/grid/MidiGrid.vue

@@ -146,7 +146,80 @@ const getGrid = (chroma = "101011010101", tonic = 0, start = 2, end = 5) => Arra
 
 const midiGrid = computed(() => getGrid(scaleChroma.value.chroma, globalScale.tonic, begin.value, end.value))
 
-// const noteGrid = computed(() => midiGrid.value.map((oct) => oct.map(note => Note.fromMidi(note))))
+const currentNote = ref(null)
+
+const touchPoints = new Map() // Map<number, number> (touchId -> noteId)
+
+useGesture({
+  onTouchstart: handleTouchStart,
+  onTouchmove: handleTouchMove,
+  onTouchend: handleTouchEnd,
+  onTouchcancel: handleTouchEnd
+}, {
+  domTarget: area,
+  eventOptions: { passive: false },
+  triggerAllEvents: true
+})
+
+function handleTouchStart({ event }) {
+  event.preventDefault()
+  Array.from(event.changedTouches).forEach(touch => {
+    const element = document.elementFromPoint(touch.clientX, touch.clientY)
+    if (!element) return
+
+    const noteElement = element.closest('.note-cell')
+    if (!noteElement) return
+
+    const note = parseInt(noteElement.dataset.note)
+    touchPoints.set(touch.identifier, note)
+    playNote(note)
+  })
+}
+
+function handleTouchMove({ event }) {
+  event.preventDefault()
+  Array.from(event.changedTouches).forEach(touch => {
+    const oldNote = touchPoints.get(touch.identifier)
+    const element = document.elementFromPoint(touch.clientX, touch.clientY)
+    if (!element) {
+      if (oldNote !== undefined) {
+        stopNote(oldNote)
+        touchPoints.delete(touch.identifier)
+      }
+      return
+    }
+
+    const noteElement = element.closest('.note-cell')
+    if (!noteElement) {
+      if (oldNote !== undefined) {
+        stopNote(oldNote)
+        touchPoints.delete(touch.identifier)
+      }
+      return
+    }
+
+    const newNote = parseInt(noteElement.dataset.note)
+    if (newNote !== oldNote) {
+      if (oldNote !== undefined) {
+        stopNote(oldNote)
+      }
+      touchPoints.set(touch.identifier, newNote)
+      playNote(newNote)
+    }
+  })
+}
+
+function handleTouchEnd({ event }) {
+  event.preventDefault()
+  Array.from(event.changedTouches).forEach(touch => {
+    const note = touchPoints.get(touch.identifier)
+    if (note !== undefined) {
+      stopNote(note)
+      touchPoints.delete(touch.identifier)
+    }
+  })
+}
+
 
 </script>
 
@@ -249,37 +322,44 @@ svg.w-full.cursor-pointer.fullscreen-container.overflow-hidden.select-none.touch
         ) {{ end }}
 
   g.grid(ref="area")
-
     g.row(v-for="(octave, oct) in midiGrid" :key="oct")
-      g.cell(
-        :class="{ 'brightness-140': activeNotes[note] }"
+      g.note-cell(
         v-for="(note, n) in octave" :key="note"
+        :data-note="note"
         :transform="`translate(${n * width / midiGrid[0].length} ${height - (oct + 1) * (height / midiGrid.length)})`"
-        @pointerdown.prevent="playNote(note)", 
+        @pointerdown.prevent="playNote(note)"
         @pointerenter="pressed ? playNote(note) : null"
-        @pointerleave="stopNote(note)", 
-        @pointerup.prevent="stopNote(note)", 
+        @pointerleave="pressed ? stopNote(note) : null"
+        @pointerup.prevent="stopNote(note)"
         @pointercancel="stopNote(note)"
         )
         rect(
-          :fill="noteColor(note - 9)"
+          :fill="noteColor(note - 9, null, 1, activeNotes[note] ? 1 : 0.4)"
           :height="height / midiGrid.length"
           :width="width / midiGrid[0].length"
           )
         text(
           dominant-baseline="middle"
-          :y="height / midiGrid.length / 2"
-          :x=10
+          :y="25"
+          :x="10"
+          font-size="24"
+          ) {{ Note.fromMidi(note) }} 
+        text(
+          dominant-baseline="middle"
+          text-anchor="end"
+          opacity=".3"
+          :y="height / midiGrid.length - 10"
+          :x="width / midiGrid[0].length - 10"
           ) 
-          tspan.text-2xl() {{ Note.fromMidi(note) }} 
-          tspan(dy="30" x=10) {{ note }} 
+
+          tspan() {{ note }} 
 
     g.intervals
       g.interval(
         v-for="(note, n) in midiGrid[0]" :key="note"
         :transform="`translate(${n * width / midiGrid[0].length + 10} 20)`"
         )
-        text {{ Interval.fromSemitones(note - midiGrid[0][0]) }}
+        text(text-anchor="end" font-weight="bold" :y="10" :x="width / midiGrid[0].length - 20") {{ Interval.fromSemitones(note - midiGrid[0][0]) }}
 </template>
 
 <style scoped>
@@ -296,4 +376,8 @@ svg {
   -webkit-user-modify: none;
   -webkit-highlight: none;
 }
+
+.note-cell {
+  touch-action: none;
+}
 </style>