RouterViewにScrollPositiionManagerを埋め込む

packages/frontend/src/components/MkPageWindow.vue

@@ -18,7 +18,7 @@
 	</template>
 
 	<div ref="contents" :class="$style.root" style="container-type: inline-size;">
-		<RouterView :key="reloadCount" :router="router"/>
+		<RouterView :key="reloadCount" :router="router" :scrollContainer="contents"/>
 	</div>
 </MkWindow>
 </template>
@@ -32,12 +32,11 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
 import { url } from '@/config';
 import { mainRouter, routes, page } from '@/router';
 import { $i } from '@/account';
-import { Router, useScrollPositionManager } from '@/nirax';
+import { Router } from '@/nirax';
 import { i18n } from '@/i18n';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
 import { openingWindowsCount } from '@/os';
 import { claimAchievement } from '@/scripts/achievements';
-import { getScrollContainer } from '@/scripts/scroll';
 
 const props = defineProps<{
 	initialPath: string;
@@ -141,8 +140,6 @@ function popout() {
 	windowEl.close();
 }
 
-useScrollPositionManager(() => getScrollContainer(contents.value), router);
-
 onMounted(() => {
 	openingWindowsCount.value++;
 	if (openingWindowsCount.value >= 3) {

packages/frontend/src/components/global/RouterView.vue

@@ -11,12 +11,18 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, onBeforeUnmount, provide } from 'vue';
+import { computed, inject, onBeforeUnmount, provide, nextTick } from 'vue';
-import { Resolved, Router } from '@/nirax';
+import { NiraxChangeEvent, Resolved, Router } from '@/nirax';
 import { defaultStore } from '@/store';
+import { getScrollContainer } from '@/scripts/scroll';
 
 const props = defineProps<{
 	router?: Router;
+
+	/**
+	 * Set any element if scroll position management needed
+	 */
+	scrollContainer?: HTMLElement | null;
 }>();
 
 const router = props.router ?? inject('router');
@@ -45,17 +51,49 @@ let currentPageComponent = $shallowRef(current.route.component);
 let currentPageProps = $ref(current.props);
 let key = $ref(current.route.path + JSON.stringify(Object.fromEntries(current.props)));
 
-function onChange({ resolved, key: newKey }) {
+const scrollContainer = computed(() => props.scrollContainer ? (getScrollContainer(props.scrollContainer) ?? document.getElementsByTagName('html')[0]) : undefined);
-	const current = resolveNested(resolved);
+
+const scrollPosStore = new Map<string, number>();
+
+function onChange(ctx: NiraxChangeEvent) {
+	// save scroll position
+	if (scrollContainer.value) scrollPosStore.set(key, scrollContainer.value.scrollTop);
+
+	//#region change page
+	const current = resolveNested(ctx.resolved);
 	if (current == null) return;
 	currentPageComponent = current.route.component;
 	currentPageProps = current.props;
 	key = current.route.path + JSON.stringify(Object.fromEntries(current.props));
+	//#endregion
+
+	//#region scroll
+	nextTick(() => {
+		if (!scrollContainer.value) return;
+
+		const scrollPos = scrollPosStore.get(key) ?? 0;
+		scrollContainer.value.scroll({ top: scrollPos, behavior: 'instant' });
+		if (scrollPos !== 0) {
+			window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
+				if (!scrollContainer.value) return;
+				scrollContainer.value.scroll({ top: scrollPos, behavior: 'instant' });
+			}, 100);
+		}
+	});
+	//#endregion
 }
 
 router.addListener('change', onChange);
 
+function onSame() {
+	if (!scrollContainer.value) return;
+	scrollContainer.value.scroll({ top: 0, behavior: 'smooth' });
+}
+
+router.addListener('same', onSame);
+
 onBeforeUnmount(() => {
 	router.removeListener('change', onChange);
+	router.removeListener('same', onSame);
 });
 </script>

packages/frontend/src/nirax.ts

@@ -49,24 +49,30 @@ function parsePath(path: string): ParsedPath {
 	return res;
 }
 
+export type NiraxChangeEvent = {
+	beforePath: string;
+	path: string;
+	resolved: Resolved;
+	key: string;
+};
+
+export type NiraxExportEvent = {
+	path: string;
+	key: string;
+};
+
+export type NiraxPushEvent = {
+	beforePath: string;
+	path: string;
+	route: RouteDef | null;
+	props: Map<string, string> | null;
+	key: string;
+};
+
 export class Router extends EventEmitter<{
-	change: (ctx: {
+	change: (ctx: NiraxChangeEvent) => void;
-		beforePath: string;
+	replace: (ctx: NiraxExportEvent) => void;
-		path: string;
+	push: (ctx: NiraxExportEvent) => void;
-		resolved: Resolved;
-		key: string;
-	}) => void;
-	replace: (ctx: {
-		path: string;
-		key: string;
-	}) => void;
-	push: (ctx: {
-		beforePath: string;
-		path: string;
-		route: RouteDef | null;
-		props: Map<string, string> | null;
-		key: string;
-	}) => void;
 	same: () => void;
 }> {
 	private routes: RouteDef[];
@@ -271,29 +277,3 @@ export class Router extends EventEmitter<{
 		this.navigate(path, key);
 	}
 }
-
-export function useScrollPositionManager(getScrollContainer: () => HTMLElement, router: Router) {
-	const scrollPosStore = new Map<string, number>();
-
-	onMounted(() => {
-		const scrollContainer = getScrollContainer();
-
-		scrollContainer.addEventListener('scroll', () => {
-			scrollPosStore.set(router.getCurrentKey(), scrollContainer.scrollTop);
-		}, { passive: true });
-
-		router.addListener('change', ctx => {
-			const scrollPos = scrollPosStore.get(ctx.key) ?? 0;
-			scrollContainer.scroll({ top: scrollPos, behavior: 'instant' });
-			if (scrollPos !== 0) {
-				window.setTimeout(() => { // 遷移直後はタイミングによってはコンポーネントが復元し切ってない可能性も考えられるため少し時間を空けて再度スクロール
-					scrollContainer.scroll({ top: scrollPos, behavior: 'instant' });
-				}, 100);
-			}
-		});
-
-		router.addListener('same', () => {
-			scrollContainer.scroll({ top: 0, behavior: 'smooth' });
-		});
-	});
-}

packages/frontend/src/ui/deck/main-column.vue

@@ -8,7 +8,7 @@
 	</template>
 
 	<div ref="contents">
-		<RouterView @contextmenu.stop="onContextmenu"/>
+		<RouterView :scrollContainer="contents" @contextmenu.stop="onContextmenu"/>
 	</div>
 </XColumn>
 </template>
@@ -21,8 +21,6 @@ import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { mainRouter } from '@/router';
 import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
-import { useScrollPositionManager } from '@/nirax';
-import { getScrollContainer } from '@/scripts/scroll';
 
 defineProps<{
 	column: Column;
@@ -66,6 +64,4 @@ function onContextmenu(ev: MouseEvent) {
 		},
 	}], ev);
 }
-
-useScrollPositionManager(() => getScrollContainer(contents.value), mainRouter);
 </script>

packages/frontend/src/ui/universal.vue

@@ -4,7 +4,7 @@
 
 	<MkStickyContainer ref="contents" :class="$style.contents" style="container-type: inline-size;" @contextmenu.stop="onContextmenu">
 		<template #header><XStatusBars :class="$style.statusbars"/></template>
-		<RouterView/>
+		<RouterView :scrollContainer="contents?.rootEl"/>
 		<div :class="$style.spacer"></div>
 	</MkStickyContainer>
 
@@ -95,7 +95,6 @@ import { PageMetadata, provideMetadataReceiver } from '@/scripts/page-metadata';
 import { deviceKind } from '@/scripts/device-kind';
 import { miLocalStorage } from '@/local-storage';
 import { CURRENT_STICKY_BOTTOM } from '@/const';
-import { useScrollPositionManager } from '@/nirax';
 
 const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
@@ -214,8 +213,6 @@ watch($$(navFooter), () => {
 }, {
 	immediate: true,
 });
-
-useScrollPositionManager(() => contents.value.rootEl, mainRouter);
 </script>
 
 <style>