Support transpose parameter

woshibiantai · Jan 19, 2025 · e5ba6e2 · e5ba6e2
1 parent 751cdd6
commit e5ba6e2
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,10 +8,12 @@ import { RouterView } from 'vue-router'
 
 const searchParams = new URLSearchParams(location.search);
 const googleDriveFileId = searchParams.get('googleDriveFileId');
+const transpose = searchParams.get('transpose');
 const chordProInput = ref('');
 const isLoading = ref(true);
 provide('chordProInput', chordProInput);
 provide('isLoading', isLoading);
+provide('transpose', parseInt(transpose));
 
 if (googleDriveFileId) {
   fetch(`https://www.googleapis.com/drive/v3/files/${googleDriveFileId}?alt=media`, {

diff --git a/src/components/ChordChart.vue b/src/components/ChordChart.vue
@@ -84,7 +84,7 @@ watch(chordProInput, (newValue) => {
 
 watch(() => props.transposition, (newValue, oldValue) => {
   if (song.value) {
-    const difference = newValue - oldValue;
+    const difference = newValue - (oldValue ?? 0);
     song.value = song.value.transpose(difference);
   }
 }, { immediate: true });

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -92,12 +92,13 @@ const ChordChart = defineAsyncComponent(() => import('../components/ChordChart.v
 const LoaderBars = defineAsyncComponent(() => import('../components/LoaderBars.vue'));
 const input = inject('chordProInput');
 const isLoading = inject('isLoading');
+const defaultTransposition = inject('transpose');
 
 const caretPosition = ref(0);
 const columns = ref(1);
 const fontSize = ref(DEFAULT_FONT_SIZE);
 const textareaRef = ref(null);
-const transposition = ref(0);
+const transposition = ref(defaultTransposition);
 
 provide('caretPosition', caretPosition);