From e5ba6e2801190dd8e80803b1028956e6e9f3b4b3 Mon Sep 17 00:00:00 2001
From: Ruth Wong <ruthwongny@gmail.com>
Date: Mon, 20 Jan 2025 00:50:29 +0800
Subject: [PATCH] Support transpose parameter

---
 src/App.vue                   | 2 ++
 src/components/ChordChart.vue | 2 +-
 src/views/HomeView.vue        | 3 ++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index af7e128..c3eac6d 100644
--- 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
index fcf14a6..239d494 100644
--- 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
index df5b213..0970dd7 100644
--- 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);