ソング：水平方向の拡大縮小と同時に垂直スクロールしてしまう

[KoharuYuzuki]

不具合の内容

ソングエディタで、Cmdキー + マウススクロールでのピアノロールの水平方向の拡大縮小を行うと、同時に垂直方向にスクロールしてしまいます。

現象・ログ

同上

再現手順

ピアノロール上でCmdキーを押しながら、マウスホイールを回転させる。

期待動作

マウススクロールによる拡大縮小中はスクロールしない。

VOICEVOXのバージョン

0.18.1

OSの種類/ディストリ/バージョン

• Windows
• macOS
• Linux

• macOS Ventura 13.6.3

その他

ScoreSequencer.vueのonWheelとonScrollの両方が呼び出されているからかもしれません。
もしこれが正しければ、wheelイベントをevent.preventDefaultすることで修正できそうです。
(ヒホ様からアドバイスを頂きました: https://twitter.com/hiho_karuta/status/1780348935170572537)

voicevox/src/components/Sing/ScoreSequencer.vue

Lines 1061 to 1090 in 5cb3455

	const onWheel = (event: WheelEvent) => {
	const sequencerBodyElement = sequencerBody.value;
	if (!sequencerBodyElement) {
	throw new Error("sequencerBodyElement is null.");
	}
	if (isOnCommandOrCtrlKeyDown(event)) {
	cursorX.value = getXInBorderBox(event.clientX, sequencerBodyElement);
	// マウスカーソル位置を基準に水平方向のズームを行う
	const oldZoomX = zoomX.value;
	let newZoomX = zoomX.value;
	newZoomX -= event.deltaY * (ZOOM_X_STEP * 0.01);
	newZoomX = Math.min(ZOOM_X_MAX, newZoomX);
	newZoomX = Math.max(ZOOM_X_MIN, newZoomX);
	const scrollLeft = sequencerBodyElement.scrollLeft;
	const scrollTop = sequencerBodyElement.scrollTop;
	store.dispatch("SET_ZOOM_X", { zoomX: newZoomX }).then(() => {
	const cursorBaseX = (scrollLeft + cursorX.value) / oldZoomX;
	const newScrollLeft = cursorBaseX * newZoomX - cursorX.value;
	sequencerBodyElement.scrollTo(newScrollLeft, scrollTop);
	});
	}
	};
	const onScroll = (event: Event) => {
	if (event.target instanceof HTMLElement) {
	scrollX.value = event.target.scrollLeft;
	scrollY.value = event.target.scrollTop;
	}
	};

[Hiroshiba]

@KoharuYuzuki issue作成ありがとうございます！

手元のmac（物理マウスではなくトラックパッド）で試してみました、たしかにスクロールされちゃいますね！！
windowsだと発生しないので不思議ですね･･･。

wheelイベントとscrollイベントの仕様がよくわかりませんが、もしかしたらctrl+wheelはマウス操作だと拡大・縮小にためスクロールイベントが発生しないのかもです。
まあとりあえずpreventDefaultしてあげつつ、その理由をコメント書いておくのが良いのかなと感じました。

@KoharuYuzuki 検証ありがとうございます！！
もしよかったらプルリクエストの作成に挑戦してみませんか？

[KoharuYuzuki]

@Hiroshiba プルリクエストの作成、挑戦させてもらいます！

[Hiroshiba]

おお、ぜひぜひ！！
不明な点があればなんでもお聞きください！

[KoharuYuzuki]

これで良いのか不安ですが、プルリクエストを作成しました。

[Hiroshiba]

issue作成とPR取り組みありがとうございました、助かりました！！