PR feedbacks

xenharmonic-devs · Jun 11, 2024 · 17d59f9 · 17d59f9
1 parent 5c1b10a
commit 17d59f9
Show file tree

Hide file tree

Showing 12 changed files with 181 additions and 478 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,6 +24,7 @@
  * Style fix: Make checkbox and radio button labels more consistent [#644](https://github.com/xenharmonic-devs/scale-workshop/issues/644)
  * Beta cycle issues: [#643](https://github.com/xenharmonic-devs/scale-workshop/issues/643), [#640](https://github.com/xenharmonic-devs/scale-workshop/issues/640), [#577](https://github.com/xenharmonic-devs/scale-workshop/issues/577), [#513](https://github.com/xenharmonic-devs/scale-workshop/issues/513), [#658](https://github.com/xenharmonic-devs/scale-workshop/issues/658), [#664](https://github.com/xenharmonic-devs/scale-workshop/issues/664), [#666](https://github.com/xenharmonic-devs/scale-workshop/issues/666)
  * Alpha cycle issues: [#574](https://github.com/xenharmonic-devs/scale-workshop/issues/574), [#579](https://github.com/xenharmonic-devs/scale-workshop/issues/579)
+ * Feature: Adding click and play note for Lattices [#701](https://github.com/xenharmonic-devs/scale-workshop/pull/701), [#38](https://github.com/xenharmonic-devs/scale-workshop/issues/38)
 
 ## 2.4.1
  * Bug fix: Unison is no longer affected by random variance [#613](https://github.com/xenharmonic-devs/scale-workshop/issues/613)

diff --git a/src/components/GridLattice.vue b/src/components/GridLattice.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useGridStore } from '@/stores/grid'
+import type { MouseEventCallback, TouchEventCallback } from '@/types'
 import { debounce, labelX, labelY } from '@/utils'
 import { spanGrid } from 'ji-lattice'
 import { type Interval } from 'sonic-weave'
@@ -20,8 +21,6 @@ const props = defineProps<{
   onMouseEnter:MouseEventCallback
   onMouseLeave:MouseEventCallback
 }>()
-type TouchEventCallback = (event: TouchEvent, index: number) => void
-type MouseEventCallback = (event: MouseEvent, index: number) => void
 
 const svgElement = ref<SVGSVGElement | null>(null)
 

diff --git a/src/components/JustIntonationLattice.vue b/src/components/JustIntonationLattice.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useJiLatticeStore } from '@/stores/ji-lattice'
+import type { MouseEventCallback, TouchEventCallback } from '@/types'
 import { spanLattice } from 'ji-lattice'
 import { TimeMonzo, type Interval } from 'sonic-weave'
 import { computed, nextTick, reactive, ref, watch } from 'vue'
@@ -21,9 +22,6 @@ const props = defineProps<{
   onMouseLeave:MouseEventCallback
 }>()
 
-type TouchEventCallback = (event: TouchEvent, index: number) => void
-type MouseEventCallback = (event: MouseEvent, index: number) => void
-
 const svgElement = ref<SVGSVGElement | null>(null)
 
 const viewBox = reactive([-1, -1, 2, 2])

diff --git a/src/components/VirtualKeyboard.vue b/src/components/VirtualKeyboard.vue
@@ -3,9 +3,8 @@ import { computed, ref } from 'vue'
 import VirtualKeyboardKey from '@/components/VirtualKeyboardKey.vue'
 import VirtualKeyInfo from '@/components/VirtualKeyInfo.vue'
 import type { Scale } from '@/scale'
+import type { NoteOnCallback } from 'xen-midi';
 
-type NoteOff = () => void
-type NoteOnCallback = (index: number) => NoteOff
 type ColorMap = (index: number) => string
 type LabelMap = (index: number) => string
 
@@ -80,7 +79,7 @@ const isMousePressed = ref(false)
         :index="key.index"
         :color="key.color"
         :isMousePressed="isMousePressed"
-        :noteOn="() => noteOn(key.index)"
+        :noteOn="() => noteOn(key.index, 0, 0)"
         @press="isMousePressed = true"
         @unpress="isMousePressed = false"
       >

diff --git a/src/components/VirtualKeyboardKey.vue b/src/components/VirtualKeyboardKey.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { LEFT_MOUSE_BTN } from '@/constants'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import Values from 'values.js'
-
-type NoteOff = () => void
-type NoteOnCallback = () => NoteOff
+import type { NoteOnCallback } from 'xen-midi';
+import { usePlayNote } from './hooks/usePlayNote';
 
 const props = defineProps<{
   index: number
@@ -14,88 +12,11 @@ const props = defineProps<{
 }>()
 
 const active = ref(false)
-
 const light = computed(() => new Values(props.color).getBrightness() > 50)
-
-const emit = defineEmits(['press', 'unpress'])
-
-let noteOff: NoteOff | null = null
-
-function start() {
-  active.value = true
-  if (noteOff !== null) {
-    noteOff()
-  }
-  noteOff = props.noteOn()
-}
-
-function end() {
-  active.value = false
-  if (noteOff !== null) {
-    noteOff()
-    noteOff = null
-  }
-}
-
-function onTouchStart(event: TouchEvent) {
-  event.preventDefault()
-  start()
-}
-
-function onTouchEnd(event: TouchEvent) {
-  event.preventDefault()
-  end()
-}
-
-function onMouseDown(event: MouseEvent) {
-  if (event.button !== LEFT_MOUSE_BTN) {
-    return
-  }
-  event.preventDefault()
-  emit('press')
-  start()
-}
-
-function onMouseUp(event: MouseEvent) {
-  if (event.button !== LEFT_MOUSE_BTN) {
-    return
-  }
-  event.preventDefault()
-}
-
-function onWindowMouseUp(event: MouseEvent) {
-  if (event.button !== LEFT_MOUSE_BTN) {
-    return
-  }
-  emit('unpress')
-  end()
-}
-
-function onMouseEnter(event: MouseEvent) {
-  if (!props.isMousePressed) {
-    return
-  }
-  event.preventDefault()
-  start()
-}
-
-function onMouseLeave(event: MouseEvent) {
-  if (!props.isMousePressed) {
-    return
-  }
-  event.preventDefault()
-  end()
-}
-
-onMounted(() => {
-  window.addEventListener('mouseup', onWindowMouseUp)
-})
+const playNote = usePlayNote(props.noteOn);
 
 onUnmounted(() => {
-  if (noteOff !== null) {
-    noteOff()
-  }
-  window.removeEventListener('mouseup', onWindowMouseUp)
+  playNote.onUnmounted()
 })
 </script>
 
@@ -104,13 +25,13 @@ onUnmounted(() => {
     :data-key-number="index"
     :style="'background-color:' + color"
     :class="{ active, light, dark: !light }"
-    @touchstart="onTouchStart"
-    @touchend="onTouchEnd"
-    @touchcancel="onTouchEnd"
-    @mousedown="onMouseDown"
-    @mouseup="onMouseUp"
-    @mouseenter="onMouseEnter"
-    @mouseleave="onMouseLeave"
+    @touchstart="playNote.onTouchStart"
+    @touchend="playNote.onTouchEnd"
+    @touchcancel="playNote.onTouchEnd"
+    @mousedown="playNote.onMouseDown"
+    @mouseup="playNote.onMouseUp"
+    @mouseenter="playNote.onMouseEnter"
+    @mouseleave="playNote.onMouseLeave"
   >
     <slot></slot>
   </td>

diff --git a/src/components/VirtualPiano.vue b/src/components/VirtualPiano.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { LEFT_MOUSE_BTN } from '@/constants'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, onUnmounted } from 'vue'
+import type { NoteOnCallback } from 'xen-midi';
+import { usePlayNote } from './hooks/usePlayNote';
 
-type NoteOff = () => void
-type NoteOnCallback = (index: number) => NoteOff
 type ColorMap = (index: number) => string
 
 const props = defineProps<{
@@ -46,8 +45,6 @@ const NUM_KEYS = 30
 const TOP_Y = 20
 const SPLIT_BOTTOM_Y = 60
 
-const noteOffs: Map<number, NoteOff> = new Map()
-
 const whiteKeys = computed(() => {
   const low = props.lowAccidentalColor.toLowerCase()
   const middle = props.middleAccidentalColor.toLowerCase()
@@ -248,83 +245,10 @@ const splitKeys = computed(() => {
   return result
 })
 
-const isMousePressed = ref(false)
-
-function start(index: number) {
-  noteOffs.set(index, props.noteOn(index))
-}
-
-function end(index: number) {
-  if (noteOffs.has(index)) {
-    noteOffs.get(index)!()
-    noteOffs.delete(index)
-  }
-}
-
-function onTouchEnd(event: TouchEvent, index: number) {
-  event.preventDefault()
-  end(index)
-}
-
-function onTouchStart(event: TouchEvent, index: number) {
-  event.preventDefault()
-  // Make sure that we start a new note.
-  end(index)
-
-  start(index)
-}
-
-function onMouseDown(event: MouseEvent, index: number) {
-  if (event.button !== LEFT_MOUSE_BTN) {
-    return
-  }
-  event.preventDefault()
-  isMousePressed.value = true
-  start(index)
-}
-
-function onMouseUp(event: MouseEvent, index: number) {
-  if (event.button !== LEFT_MOUSE_BTN) {
-    return
-  }
-  event.preventDefault()
-  isMousePressed.value = false
-  end(index)
-}
-
-function onMouseEnter(event: MouseEvent, index: number) {
-  if (!isMousePressed.value) {
-    return
-  }
-  event.preventDefault()
-  start(index)
-}
-
-function onMouseLeave(event: MouseEvent, index: number) {
-  if (!isMousePressed.value) {
-    return
-  }
-  event.preventDefault()
-  end(index)
-}
-
-function windowMouseUp(event: MouseEvent) {
-  if (event.button === LEFT_MOUSE_BTN) {
-    isMousePressed.value = false
-  }
-}
-
-onMounted(() => {
-  window.addEventListener('mouseup', windowMouseUp)
-})
+const playNote = usePlayNote(props.noteOn);
 
 onUnmounted(() => {
-  noteOffs.forEach((off) => {
-    if (off !== null) {
-      off()
-    }
-  })
-  window.removeEventListener('mouseup', windowMouseUp)
+  playNote.onUnmounted()
 })
 </script>
 
@@ -333,13 +257,13 @@ onUnmounted(() => {
     <rect
       v-for="(key, i) of whiteKeys"
       :key="i"
-      @touchstart="onTouchStart($event, key.index)"
-      @touchend="onTouchEnd($event, key.index)"
-      @touchcancel="onTouchEnd($event, key.index)"
-      @mousedown="onMouseDown($event, key.index)"
-      @mouseup="onMouseUp($event, key.index)"
-      @mouseenter="onMouseEnter($event, key.index)"
-      @mouseleave="onMouseLeave($event, key.index)"
+      @touchstart="playNote.onTouchStart($event, key.index)"
+      @touchend="playNote.onTouchEnd($event, key.index)"
+      @touchcancel="playNote.onTouchEnd($event, key.index)"
+      @mousedown="playNote.onMouseDown($event, key.index)"
+      @mouseup="playNote.onMouseUp($event, key.index)"
+      @mouseenter="playNote.onMouseEnter($event, key.index)"
+      @mouseleave="playNote.onMouseLeave($event, key.index)"
       :class="{ white: true, active: (heldNotes.get(key.index) || 0) > 0 }"
       :x="4 * key.x - 2 * key.left + '%'"
       y="20%"
@@ -351,13 +275,13 @@ onUnmounted(() => {
       <rect
         v-for="(key, i) of splitKeys"
         :key="i"
-        @touchstart="onTouchStart($event, key.index)"
-        @touchend="onTouchEnd($event, key.index)"
-        @touchcancel="onTouchEnd($event, key.index)"
-        @mousedown="onMouseDown($event, key.index)"
-        @mouseup="onMouseUp($event, key.index)"
-        @mouseenter="onMouseEnter($event, key.index)"
-        @mouseleave="onMouseLeave($event, key.index)"
+        @touchstart="playNote.onTouchStart($event, key.index)"
+        @touchend="playNote.onTouchEnd($event, key.index)"
+        @touchcancel="playNote.onTouchEnd($event, key.index)"
+        @mousedown="playNote.onMouseDown($event, key.index)"
+        @mouseup="playNote.onMouseUp($event, key.index)"
+        @mouseenter="playNote.onMouseEnter($event, key.index)"
+        @mouseleave="playNote.onMouseLeave($event, key.index)"
         :class="{ black: true, active: (heldNotes.get(key.index) || 0) > 0 }"
         :x="4 * key.x + '%'"
         :y="key.y"
@@ -370,13 +294,13 @@ onUnmounted(() => {
       <rect
         v-for="(key, i) of blackKeys"
         :key="i"
-        @touchstart="onTouchStart($event, key.index)"
-        @touchend="onTouchEnd($event, key.index)"
-        @touchcancel="onTouchEnd($event, key.index)"
-        @mousedown="onMouseDown($event, key.index)"
-        @mouseup="onMouseUp($event, key.index)"
-        @mouseenter="onMouseEnter($event, key.index)"
-        @mouseleave="onMouseLeave($event, key.index)"
+        @touchstart="playNote.onTouchStart($event, key.index)"
+        @touchend="playNote.onTouchEnd($event, key.index)"
+        @touchcancel="playNote.onTouchEnd($event, key.index)"
+        @mousedown="playNote.onMouseDown($event, key.index)"
+        @mouseup="playNote.onMouseUp($event, key.index)"
+        @mouseenter="playNote.onMouseEnter($event, key.index)"
+        @mouseleave="playNote.onMouseLeave($event, key.index)"
         :class="{ black: true, active: (heldNotes.get(key.index) || 0) > 0 }"
         :x="4 * key.x + '%'"
         y="20%"