refactor: 型エラー解消・初回処理を一度のforEachにまとめる

misskey-dev · Feb 1, 2025 · 253b8d3 · 253b8d3
1 parent f9c20e8
commit 253b8d3
Showing 1 changed file with 22 additions and 25 deletions.
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { useTemplateRef, ref, watch, onMounted, onActivated, onDeactivated, onBeforeUnmount, nextTick } from 'vue';
+import { useTemplateRef, ref, watch, onActivated, onDeactivated, onBeforeUnmount } from 'vue';
 import XNote from '@/components/MkNotes.note.vue';
 import MkDateSeparatedList from '@/components/MkDateSeparatedList.vue';
 import MkPagination, { Paging } from '@/components/MkPagination.vue';
@@ -76,28 +76,13 @@ function initNoteRenderSkipping() {
 	) {
 		watch(rootEl, (to) => {
 			if (to != null) {
-				const rootClientRect = to.getBoundingClientRect();
-
-				// 初回：現在見えているノートを洗い出す
-				initialComputeDone.value = false;
-				visibleNotes.value.clear();
-				rootEl.value.querySelectorAll('[data-note-id]').forEach((note) => {
-					const el = getHTMLElementOrNull(note);
-					const id = el.dataset?.noteId;
-					if (id) {
-						const rect = el.getBoundingClientRect();
-						if (rect.top < window.innerHeight && rect.bottom > 0) {
-							visibleNotes.value.add(id);
-						}
-					}
-				});
-				initialComputeDone.value = true;
+				// 既存の仮想スクロール処理を破棄
+				disposeNoteRenderSkipping();
 
 				// 画面内に入ったノートを記録
 				intersectionObserver = new IntersectionObserver((entries) => {
 					entries.forEach((entry) => {
-						if (rootEl.value == null) return;
-						if (rootEl.value.classList.contains('list-move')) return;
+						if (to.classList.contains('list-move')) return;
 
 						const el = getHTMLElementOrNull(entry.target);
 						if (el == null) return;
@@ -117,27 +102,39 @@ function initNoteRenderSkipping() {
 						}
 					});
 				}, {
-					root: getScrollContainer(rootEl.value),
+					root: getScrollContainer(to),
 					rootMargin: '50% 0% 50% 0%',
 				});
 
-				// 初回
-				rootEl.value.querySelectorAll<HTMLElement>('[data-note-id]').forEach((note) => {
+				// 初回：現在見えているノートを洗い出す・IntersectionObserverに登録
+				to.querySelectorAll('[data-note-id]').forEach((note) => {
+					const el = getHTMLElementOrNull(note);
+					if (el == null) return;
+					const id = el.dataset?.noteId;
+					if (id) {
+						const rect = el.getBoundingClientRect();
+						if (rect.top < window.innerHeight && rect.bottom > 0) {
+							visibleNotes.value.add(id);
+						}
+					}
 					intersectionObserver!.observe(note);
 				});
 
+				// 初回計算完了。見えてない要素は隠しても良くなった
+				initialComputeDone.value = true;
+
 				// ノートが追加されたらそれもIntersectionObserverに登録
 				// 削除されたらIntersectionObserverから削除
 				mutationObserver = new MutationObserver((mutations) => {
 					mutations.forEach((mutation) => {
 						mutation.addedNodes.forEach((note) => {
-							if (note.dataset?.noteId == null) return;
 							const noteEl = getHTMLElementOrNull(note);
 							if (noteEl == null) return;
+							if (noteEl.dataset?.noteId == null) return;
 
 							const rect = (noteEl).getBoundingClientRect();
 							if (rect.top < window.innerHeight && rect.bottom > 0) {
-								visibleNotes.value.add(note.dataset.noteId);
+								visibleNotes.value.add(noteEl.dataset.noteId);
 							}
 							intersectionObserver!.observe(noteEl);
 						});
@@ -150,7 +147,7 @@ function initNoteRenderSkipping() {
 					});
 				});
 
-				mutationObserver.observe(rootEl.value, {
+				mutationObserver.observe(to, {
 					childList: true,
 					subtree: true,
 				});