From 17b592047e7995e52dc009b0fcab85b73806eb53 Mon Sep 17 00:00:00 2001 From: Sig <62321214+sigprogramming@users.noreply.github.com> Date: Tue, 29 Oct 2024 03:36:59 +0900 Subject: [PATCH] =?UTF-8?q?=E3=82=BD=E3=83=B3=E3=82=B0=EF=BC=9A=E5=86=8D?= =?UTF-8?q?=E7=94=9F=E4=BD=8D=E7=BD=AE=E3=81=AE=E8=A1=A8=E7=A4=BA=E5=BD=A2?= =?UTF-8?q?=E5=BC=8F=E3=82=92=E5=A4=89=E6=9B=B4=E3=81=A7=E3=81=8D=E3=82=8B?= =?UTF-8?q?=E3=82=88=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B=20(#2306)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Hiroshiba --- .../Sing/PlayheadPositionDisplay.vue | 138 ++++++++++++++++++ src/components/Sing/ScoreSequencer.vue | 20 +-- .../Sing/SequencerRuler/Container.vue | 19 +-- src/components/Sing/ToolBar/ToolBar.vue | 62 +------- src/sing/domain.ts | 48 +++++- src/sing/storeHelper.ts | 39 ----- src/store/setting.ts | 2 + src/store/singing.ts | 37 +---- src/store/type.ts | 12 +- src/type/preload.ts | 3 + 10 files changed, 208 insertions(+), 172 deletions(-) create mode 100644 src/components/Sing/PlayheadPositionDisplay.vue diff --git a/src/components/Sing/PlayheadPositionDisplay.vue b/src/components/Sing/PlayheadPositionDisplay.vue new file mode 100644 index 0000000000..42292df909 --- /dev/null +++ b/src/components/Sing/PlayheadPositionDisplay.vue @@ -0,0 +1,138 @@ + + + + + diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue index 31ccc6ccb4..f814b1549b 100644 --- a/src/components/Sing/ScoreSequencer.vue +++ b/src/components/Sing/ScoreSequencer.vue @@ -325,7 +325,7 @@ const scrollX = ref(0); const scrollY = ref(0); // 再生ヘッドの位置 -const playheadTicks = ref(0); +const playheadTicks = computed(() => store.getters.PLAYHEAD_POSITION); const playheadX = computed(() => { const baseX = tickToBaseX(playheadTicks.value, tpqn.value); return Math.floor(baseX * zoomX.value); @@ -1316,10 +1316,8 @@ const onScroll = (event: Event) => { } }; -const playheadPositionChangeListener = (position: number) => { - playheadTicks.value = position; - - // オートスクロール +// オートスクロール +watch(playheadTicks, (newPlayheadPosition) => { const sequencerBodyElement = sequencerBody.value; if (!sequencerBodyElement) { if (import.meta.env.DEV) { @@ -1335,7 +1333,7 @@ const playheadPositionChangeListener = (position: number) => { const scrollTop = sequencerBodyElement.scrollTop; const scrollWidth = sequencerBodyElement.scrollWidth; const clientWidth = sequencerBodyElement.clientWidth; - const playheadX = tickToBaseX(position, tpqn.value) * zoomX.value; + const playheadX = tickToBaseX(newPlayheadPosition, tpqn.value) * zoomX.value; const tolerance = 3; if (playheadX < scrollLeft) { sequencerBodyElement.scrollTo(playheadX, scrollTop); @@ -1345,7 +1343,7 @@ const playheadPositionChangeListener = (position: number) => { ) { sequencerBodyElement.scrollTo(playheadX, scrollTop); } -}; +}); // スクロールバーの幅を取得する onMounted(() => { @@ -1392,10 +1390,6 @@ onActivated(() => { // リスナー登録 onActivated(() => { - void store.actions.ADD_PLAYHEAD_POSITION_CHANGE_LISTENER({ - listener: playheadPositionChangeListener, - }); - document.addEventListener("keydown", handleKeydown); window.addEventListener("mousemove", onMouseMove); window.addEventListener("mouseup", onMouseUp); @@ -1403,10 +1397,6 @@ onActivated(() => { // リスナー解除 onDeactivated(() => { - void store.actions.REMOVE_PLAYHEAD_POSITION_CHANGE_LISTENER({ - listener: playheadPositionChangeListener, - }); - document.removeEventListener("keydown", handleKeydown); window.removeEventListener("mousemove", onMouseMove); window.removeEventListener("mouseup", onMouseUp); diff --git a/src/components/Sing/SequencerRuler/Container.vue b/src/components/Sing/SequencerRuler/Container.vue index 8ffcdcfb96..94ebdc6c41 100644 --- a/src/components/Sing/SequencerRuler/Container.vue +++ b/src/components/Sing/SequencerRuler/Container.vue @@ -12,7 +12,7 @@