From 9fece0679aa481826b67360b64bdccc2a176a27f Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 2 Nov 2024 18:31:52 +0100
Subject: [PATCH 1/3] Fix scroll for small collections and more robust scroll
 persistence

---
 ui/src/components/ScrollViewer.vue | 34 +++++++++++-------------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 17e7927..8af4ced 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -45,7 +45,7 @@
 
     <div
       class="virtual-canvas"
-      :style="{ height: nativeScrollHeight + 'px' }">
+      :style="{ height: (nativeHeight - 64) + 'px' }">
     </div>
     
     <Scrollbar
@@ -134,11 +134,11 @@ const lastNonNativeView = ref(null);
 let lastLoadedScene = null;
 let lastFocusFileId = null;
 
-const nativeScrollHeight = computed(() => {
-  if (!scene.value?.bounds?.h || !viewport.height.value) {
+const nativeHeight = computed(() => {
+  if (!canvas.value?.height) {
     return 0;
   }
-  return Math.min(100000, scene.value.bounds.h - viewport.height.value);
+  return Math.min(100000, canvas.value.height);
 });
 
 let scrollOffset = 0;
@@ -182,7 +182,6 @@ const {
 );
 
 const focusRegion = computed(() => {
-  if (!focusFileId.value) return null;
   return focusRegions.value?.[0];
 });
 
@@ -280,11 +279,6 @@ const zoomOut = () => {
   viewer.value?.setView(view.value);
 }
 
-const scrollSleep = computed(() => {
-  return !nativeScroll.value || lastZoom.value > 1.0001;
-});
-
-
 const nativeScrollY = ref(window.scrollY);
 function nativeScrollTo(y) {
   window.scrollTo(0, y);
@@ -292,12 +286,11 @@ function nativeScrollTo(y) {
 }
 
 function scrollToPixels(y) {
-  const nativeHeight = nativeScrollHeight.value;
-  if (nativeHeight <= 0) {
+  if (nativeHeight.value <= 0) {
     return;
   }
-  const maxOffset = scrollMax.value - nativeHeight + viewport.height.value;
-  const nativeScrollTarget = nativeHeight * 0.5;
+  const maxOffset = Math.max(0, scrollMax.value - nativeHeight.value + viewport.height.value);
+  const nativeScrollTarget = nativeHeight.value * 0.5;
   const ty = y - nativeScrollTarget;
   if (ty < 0) {
     scrollOffset = 0;
@@ -316,13 +309,12 @@ function scrollToPixels(y) {
 
 function updateScrollFromNative(y) {
   const actionDistanceRatio = 0.1;
-  const nativeHeight = nativeScrollHeight.value;
-  if (nativeHeight <= 0) {
+  if (nativeHeight.value <= 0) {
     return;
   }
-  const maxOffset = scrollMax.value - nativeHeight + viewport.height.value;
-  const actionDist = nativeHeight * actionDistanceRatio;
-  const nativeScrollTarget = nativeHeight * 0.5;
+  const maxOffset = Math.max(0, scrollMax.value - nativeHeight.value + viewport.height.value);
+  const actionDist = nativeHeight.value * actionDistanceRatio;
+  const nativeScrollTarget = nativeHeight.value * 0.5;
   const diff = nativeScrollTarget - nativeScrollY.value;
   const ty = y - nativeScrollTarget;
   if (ty < 0) {
@@ -357,7 +349,7 @@ onUnmounted(() => {
 const scrollSpeed = ref(0);
 
 const scrollMax = computed(() => {
-  return canvas.value.height - viewport.height.value;
+  return Math.max(0, canvas.value.height - viewport.height.value);
 });
 
 const scrollRatio = computed(() => {
@@ -393,7 +385,6 @@ watchDebounced(scrollY, async (sy) => {
   if (!scene.value) return;
   if (!view.value || !view.value.w || !view.value.h) return;
   if (sy < 500) {
-    if (!lastFocusFileId) return;
     updateFocusFile(null);
     return;
   }
@@ -404,7 +395,6 @@ watchDebounced(scrollY, async (sy) => {
   );
   const fileId = center?.data?.id;
   if (!fileId) return;
-  lastFocusFileId = fileId;
   updateFocusFile(fileId);
 }, { debounce: 1000 });
 

From b85563afad3f4ddb1ad6dd501aa9fb9e7b7d047d Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 2 Nov 2024 21:14:59 +0100
Subject: [PATCH 2/3] Fix zoom out at boundaries

---
 ui/src/components/ScrollViewer.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 8af4ced..c9e44fc 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -289,6 +289,7 @@ function scrollToPixels(y) {
   if (nativeHeight.value <= 0) {
     return;
   }
+  y = Math.max(0, Math.min(scrollMax.value, y));
   const maxOffset = Math.max(0, scrollMax.value - nativeHeight.value + viewport.height.value);
   const nativeScrollTarget = nativeHeight.value * 0.5;
   const ty = y - nativeScrollTarget;

From 7a89a8df69cbacf399293a3f3d7266d01f5a2366 Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 2 Nov 2024 21:36:30 +0100
Subject: [PATCH 3/3] Update changelog

---
 CHANGELOG.md | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 04742ff..5c0f174 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,19 @@ and this project theoretically adheres to [Semantic
 Versioning](https://semver.org/spec/v2.0.0.html), but it's still at major
 version zero.
 
+## [v0.17.1] - 2024-11-02 - Scrolling fixes
+
+### Fixed
+
+* Lots of scrolling glitches with just a few photos in collection due to the height not being fully tested
+* Max scrolling position not being always correctly handled
+* The scrolling position sometimes changing 2s after scrolling (due to persistent scrolling glitches)
+* Being able to scroll out of bounds
+
+[v0.17.1]: https://github.com/SmilyOrg/photofield/compare/v0.17.0...v0.17.1
+
+
+
 ## [v0.17.0] - 2024-10-27 - Photo details, dark mode, scrollbar, open in album
 
 ### New