From 15870275151c14efd6d8ef1a4975634ff8cd7500 Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Thu, 4 Jan 2024 22:38:16 +0100
Subject: [PATCH 01/16] wip zoomy zoom is back!

---
 ui/src/components/CollectionView.vue |  62 ++++++++-
 ui/src/components/PhotoFrame.vue     |  88 +++++++++++++
 ui/src/components/ScrollViewer.vue   |  24 +++-
 ui/src/components/TileViewer.vue     | 188 ++++++++++++++++++++++++++-
 4 files changed, 351 insertions(+), 11 deletions(-)
 create mode 100644 ui/src/components/PhotoFrame.vue

diff --git a/ui/src/components/CollectionView.vue b/ui/src/components/CollectionView.vue
index b077aea..7df0d15 100644
--- a/ui/src/components/CollectionView.vue
+++ b/ui/src/components/CollectionView.vue
@@ -6,7 +6,7 @@
       :response="collectionResponse"
     ></response-loader>
 
-    <map-viewer
+    <!-- <map-viewer
       v-if="layout == 'MAP'"
       ref="mapViewer"
       :interactive="true"
@@ -22,13 +22,14 @@
       @scene="mapScene = $event"
       @search="onSearch"
     >
-    </map-viewer>
+    </map-viewer> -->
 
+    <!-- v-else -->
     <scroll-viewer
-      v-else
       ref="scrollViewer"
-      :interactive="!stripVisible"
+      :interactive="true"
       :collectionId="collectionId"
+      :regionId="regionId"
       :layout="layout"
       :sort="sort"
       :imageHeight="imageHeight"
@@ -39,12 +40,37 @@
       :selectTagId="selectTagId"
       @selectTagId="onSelectTagId"
       @region="onScrollRegion"
+      @elementView="lastView = $event"
       @scene="scrollScene = $event"
       @search="onSearch"
     >
     </scroll-viewer>
+    
+    <!-- v-if="region"
+    :region="region"
+    :scene="scene"
+    :tags-enabled="tagsSupported"
+      @navigate="navigate($event)"
+      @favorite="favorite($event)"
+      @exit="resetZoomOrExit()"
+      @add-tag="addTag($event)"
+      @remove-tag="removeTag($event)" -->
+    <controls
+      class="controls"
+      :region="lastScrollRegion"
+      :scene="scrollScene"
+      @navigate="navigate($event)"
+      @exit="exit()"
+    ></controls>
+
+    <!-- <photo-frame
+      class="photoframe"
+      :view="lastView"
+    >
 
-    <strip-viewer
+    </photo-frame> -->
+
+    <!-- <strip-viewer
       ref="stripViewer"
       class="strip"
       :class="{ visible: stripVisible }"
@@ -60,7 +86,7 @@
       @scene="stripScene = $event"
       @search="onSearch"
     >
-    </strip-viewer>
+    </strip-viewer> -->
 
   </div>
 </template>
@@ -72,6 +98,8 @@ import { useRoute, useRouter } from 'vue-router';
 
 import ResponseLoader from './ResponseLoader.vue';
 import StripViewer from './StripViewer.vue';
+import PhotoFrame from './PhotoFrame.vue';
+import Controls from './Controls.vue';
 import ScrollViewer from './ScrollViewer.vue';
 import MapViewer from './MapViewer.vue';
 import { useApi } from '../api';
@@ -102,6 +130,7 @@ const stripViewer = ref(null);
 const stripView = ref(null);
 const lastScrollRegion = ref(null);
 const lastStripRegion = ref(null);
+const lastView = ref(null);
 
 const route = useRoute();
 const router = useRouter();
@@ -111,6 +140,15 @@ const stripVisible = ref(initWithStrip);
 const lastRegionId = ref(null);
 const transitionRegionId = ref(null);
 
+const navigate = computed(() => {
+  return scrollViewer.value?.navigate;
+});
+
+const exit = () => {
+  scrollViewer.value?.exit();
+  lastView.value = null;
+}
+
 const scrollScene = ref(null);
 const mapScene = ref(null);
 const stripScene = ref(null);
@@ -300,6 +338,18 @@ const onMapRegion = async (region) => {
 
 <style scoped>
 
+.controls {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+.photoframe {
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
 .strip {
   visibility: hidden;
   transition: none;
diff --git a/ui/src/components/PhotoFrame.vue b/ui/src/components/PhotoFrame.vue
new file mode 100644
index 0000000..cd99e36
--- /dev/null
+++ b/ui/src/components/PhotoFrame.vue
@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="photoframe"
+    :class="{ visible: !!view }"
+  >
+    <div class="bar left"></div>
+    <div class="bar right"></div>
+    <div class="bar top"></div>
+    <div class="bar bottom"></div>
+  </div>
+</template>
+
+<script setup>
+import { computed, toRefs } from 'vue';
+
+const props = defineProps({
+  region: Object,
+  view: Object,
+});
+
+const {
+  view,
+} = toRefs(props);
+
+const e = 0.5;
+const barLeft = computed(() => 
+  Math.ceil(view.value?.x + e) + 'px'
+);
+const barRight = computed(() => 
+  Math.floor(view.value?.x + view.value?.w - e) + 'px'
+);
+const barTop = computed(() =>
+  Math.ceil(view.value?.y + e) + 'px'
+);
+const barBottom = computed(() =>
+  Math.floor(view.value?.y + view.value?.h - e) + 'px'
+);
+
+</script>
+
+<style scoped>
+.photoframe {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.photoframe.visible {
+  opacity: 1;
+}
+
+.bar {
+  position: absolute;
+  background-color: black;
+  pointer-events: none;
+}
+
+.bar.left {
+  left: 0;
+  top: 0;
+  width: v-bind('barLeft');
+  height: 100%;
+}
+
+.bar.right {
+  right: 0;
+  top: 0;
+  width: calc(100% - v-bind('barRight'));
+  height: 100%;
+}
+
+.bar.top {
+  left: 0;
+  width: 100%;
+  top: 0;
+  height: v-bind('barTop');
+}
+
+.bar.bottom {
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  height: calc(100% - v-bind('barBottom'));
+}
+
+</style>
diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 347b8de..1c31ccd 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -7,6 +7,7 @@
       :style="{ transform: `translate(0, ${scrollY}px)` }"
       :scene="scene"
       :view="view"
+      :clipview="region?.bounds"
       :selectTagId="selectTagId"
       :debug="debug"
       :tileSize="512"
@@ -99,6 +100,7 @@ const emit = defineEmits({
   region: null,
   selectTagId: null,
   search: null,
+  elementView: null,
 })
 
 const {
@@ -141,7 +143,11 @@ useEventBus("recreate-scene").on(scene => {
   recreateScene();
 });
 
-const { region } = useSeekableRegion({
+const {
+  region,
+  navigate,
+  exit,
+} = useSeekableRegion({
   scene,
   collectionId,
   regionId,
@@ -301,6 +307,20 @@ const onView = (view) => {
     }
   }
   lastView.value = view;
+  // console.log("view", Object.assign({}, view));
+  // console.log("region", Object.assign({}, region.value?.bounds));
+  // console.log("element", viewer.value?.elementFromView(view));
+  // console.log("screen", getScreenView(region.value?.bounds));
+  // const corners = viewer.value?.pixelCornersFromView(region.value?.bounds);
+  // console.log(
+  //   "x", corners?.tl[0],
+  //   "y", corners?.tl[1],
+  //   "w", corners?.br[0] - corners?.tl[0],
+  //   "h", corners?.br[1] - corners?.tl[1],
+  // );
+  if (region.value?.bounds) {
+    emit("elementView", getScreenView(region.value.bounds));
+  }
 }
 
 const onBoxSelect = async (bounds, shift) => {
@@ -367,6 +387,8 @@ defineExpose({
   drawViewToCanvas,
   centerToBounds,
   getScreenView,
+  navigate,
+  exit,
 })
 
 </script>
diff --git a/ui/src/components/TileViewer.vue b/ui/src/components/TileViewer.vue
index fccaf3d..7a6f7ff 100644
--- a/ui/src/components/TileViewer.vue
+++ b/ui/src/components/TileViewer.vue
@@ -33,6 +33,13 @@ import "ol/ol.css";
 import { getTileUrl } from '../api';
 import Kinetic from 'ol/Kinetic';
 import { toLonLat, get as getProjection, fromLonLat } from 'ol/proj';
+import { getBottomLeft, getTopLeft, getTopRight, getBottomRight } from 'ol/extent';
+import VectorLayer from 'ol/layer/Vector';
+import VectorSource from 'ol/source/Vector';
+import { Polygon } from 'ol/geom';
+import Feature from 'ol/Feature';
+import Style from 'ol/style/Style';
+import Fill from 'ol/style/Fill';
 
 function ctrlWithMaybeShift(mapBrowserEvent) {
   const originalEvent = /** @type {KeyboardEvent|MouseEvent|TouchEvent} */ (
@@ -44,7 +51,6 @@ function ctrlWithMaybeShift(mapBrowserEvent) {
   );
 };
 
-
 export default {
 
   components: {
@@ -61,6 +67,7 @@ export default {
     kinetic: Boolean,
     tileSize: Number,
     view: Object,
+    clipview: Object,
     backgroundColor: String,
     selectTagId: String,
     debug: Object,
@@ -94,6 +101,8 @@ export default {
   },
   async mounted() {
     this.latestView = null;
+    this.clipviewChangeTime = 0;
+    this.lastAnimationTime = 0;
     this.reset();
   },
   watch: {
@@ -171,6 +180,10 @@ export default {
       this.setView(view);
     },
 
+    clipview() {
+      this.clipviewChangeTime = Date.now();
+    },
+
     selectTagId() {
       this.reload();
     },
@@ -265,6 +278,99 @@ export default {
           ctx.globalCompositeOperation = "source-over";
         });
       }
+
+      
+      main.on("prerender", event => {
+        // Clip to the top left square
+        const ctx = event.context;
+        const size = this.map.getSize();
+        // const view = this.map.getView();
+        // const extent = view.calculateExtent(size);
+        const view = this.clipview;
+        if (!view) return;
+        
+        // const corners = this.pixelCornersFromView(view);
+        // const pixelRatio = window.devicePixelRatio;
+        // corners.tl[0] *= pixelRatio;
+        // corners.tl[1] *= pixelRatio;
+        // corners.tr[0] *= pixelRatio;
+        // corners.tr[1] *= pixelRatio;
+        // corners.br[0] *= pixelRatio;
+        // corners.br[1] *= pixelRatio;
+        // corners.bl[0] *= pixelRatio;
+        // corners.bl[1] *= pixelRatio;
+
+        // ctx.save();
+        // ctx.rect(
+        //   corners.tl[0],
+        //   corners.tl[1],
+        //   corners.tr[0] - corners.tl[0],
+        //   corners.bl[1] - corners.tl[1],
+        // );
+        // ctx.clip();
+
+        // ctx.strokeStyle = "green";
+        // ctx.lineWidth = 20;
+        // // ctx.beginPath();
+        
+        // ctx.strokeRect(
+        //   corners.tl[0],
+        //   corners.tl[1],
+        //   corners.tr[0] - corners.tl[0],
+        //   corners.bl[1] - corners.tl[1],
+        // );
+
+        // Highlight the view instead
+      });
+
+      main.on("postrender", event => {
+        const ctx = event.context;
+        const view = this.clipview;
+        if (!view) return;
+
+        // ctx.restore();
+        
+        const size = this.map.getSize();
+        const corners = this.pixelCornersFromView(view);
+
+        const pixelRatio = window.devicePixelRatio;
+        size[0] *= pixelRatio;
+        size[1] *= pixelRatio;
+        corners.tl[0] *= pixelRatio;
+        corners.tl[1] *= pixelRatio;
+        corners.tr[0] *= pixelRatio;
+        corners.tr[1] *= pixelRatio;
+        corners.br[0] *= pixelRatio;
+        corners.br[1] *= pixelRatio;
+        corners.bl[0] *= pixelRatio;
+        corners.bl[1] *= pixelRatio;
+
+        const alpha = 
+          this.lastAnimationTime ?
+            Math.max(0, Math.min(1, (Date.now() - this.clipviewChangeTime) / (this.lastAnimationTime*1000))) :
+            1;
+
+        // TODO: Fade based on distance instead of time
+        console.log(this.zoomFromView(this.latestView), this.zoomFromView(view));
+
+        const e = 1;
+        
+        ctx.fillStyle = `rgba(0, 0, 0, ${alpha})`;
+        ctx.beginPath();
+        ctx.rect(0, 0, size[0], size[1]);
+        ctx.moveTo(corners.tl[0] + e, corners.tl[1] + e);
+        ctx.lineTo(corners.tr[0] - e, corners.tr[1] + e);
+        ctx.lineTo(corners.br[0] - e, corners.br[1] - e);
+        ctx.lineTo(corners.bl[0] + e, corners.bl[1] - e);
+        ctx.closePath();
+        ctx.fill("evenodd");
+
+        if (alpha === 1 || alpha === 0) {
+          return;
+        }
+
+        // this.map.render();
+      });
       
       return main;
     },
@@ -273,6 +379,29 @@ export default {
 
       const main = this.createMainLayer();
 
+      // const clip = new VectorLayer({
+      //   source: new VectorSource({
+      //     features: [
+      //       new Feature({
+      //         geometry: new Polygon([
+      //           [
+      //             [0, 0],
+      //             [0, 5.5e11],
+      //             [2e11, 2e11],
+      //             [2e11, 0],
+      //             [0, 0],
+      //           ],
+      //         ]),
+      //       }),
+      //     ],
+      //   }),
+      //   style: new Style({
+      //     fill: new Fill({
+      //       color: "rgba(0, 0, 0, 0.5)",
+      //     }),
+      //   }),
+      // });
+
       if (this.geo) {
 
         const mask = new TileLayer({
@@ -317,6 +446,7 @@ export default {
       } else {
         return [
           main,
+          // clip,
         ];
       }
     },
@@ -393,6 +523,7 @@ export default {
           extent,
           smoothExtentConstraint: false,
           showFullExtent: true,
+          constrainOnlyCenter: true,
         });
       }
 
@@ -653,6 +784,37 @@ export default {
       }
     },
 
+    elementFromView(view) {
+      if (!this.scene) return null;
+      const fullExtent = this.projection.getExtent();
+      const [xa, ya, xb, yb] = fullExtent;
+      const sw = this.scene.bounds.w;
+      const sh = this.scene.bounds.h;
+      const extent = this.extentFromView(view);
+      return {
+        x: extent[0] * sw / (xb - xa) + xa,
+        y: -extent[1] * sh / (yb - ya) + ya,
+        w: extent[2] * sw / (xb - xa) - extent[0] * sw / (xb - xa),
+        h: -extent[3] * sh / (yb - ya) + extent[1] * sh / (yb - ya),
+      }
+    },
+
+    pixelCornersFromView(view) {
+      if (!this.map) return null;
+      const extent = this.extentFromView(view);
+      // Coordinate from extent
+      const tl = getTopLeft(extent);
+      const tr = getTopRight(extent);
+      const bl = getBottomLeft(extent);
+      const br = getBottomRight(extent);
+      return {
+        tl: this.map.getPixelFromCoordinate(tl),
+        tr: this.map.getPixelFromCoordinate(tr),
+        bl: this.map.getPixelFromCoordinate(bl),
+        br: this.map.getPixelFromCoordinate(br),
+      }
+    },
+
     setPendingAnimationTime(t) {
       this.pendingAnimationTime = t;
     },
@@ -734,7 +896,11 @@ export default {
         const zoom = this.zoomFromView(view);
         const zoomDiff = Math.abs(zoom - prevZoom);
         if (zoomDiff > 1e-4 && !options) {
-          const t = zoomDiff * 0.05;
+          console.log(zoomDiff)
+          // const t = zoomDiff * 0.05;
+          // const t = zoomDiff * 0.2;
+          // const t = zoomDiff * 1;
+          const t = Math.pow(zoomDiff, 0.5) * 0.08;
           options = { animationTime: t }
         }
       }
@@ -750,12 +916,26 @@ export default {
       }
 
       const targetExtent = this.extentFromView(view);
+
+      this.lastAnimationTime = options?.animationTime || 0;
       
       const fitOpts = options ? {
         duration: options.animationTime*1000,
-        easing: function(t) {
-          return 1 - Math.pow(1 - t, 10)
+        easing: function(x) {
+          return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2
         },
+        // easing: function(x) {
+        //   return x * x * x * (x * (6.0 * x - 15.0) + 10.0);
+        // },
+        // easing: function(t) {
+        //   return Math.pow(t, 0.5) + 0.3;
+        // },
+        // easing: function(t) {
+        //   return Math.pow(2, -50 * t) * Math.sin(((t - 0.1) * (2 * Math.PI)) / 0.3) + 1
+        // },
+        // easing: function(t) {
+        //   return Math.pow(2, -80 * t) * Math.sin(((t - 0.1) * (2 * Math.PI)) / 0.3) + 1
+        // },
       } : undefined;
 
       this.v.fit(targetExtent, fitOpts);

From d78b460188a3c2280df2c42b12ac0ad2302579e3 Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sun, 4 Feb 2024 15:26:50 +0100
Subject: [PATCH 02/16] Mostly working dirty version

---
 ui/src/api.js                                |   2 +-
 ui/src/components/ScrollViewer.vue           | 197 ++++++++++++---
 ui/src/components/TileViewer.vue             | 191 +++++++++++++--
 ui/src/components/openlayers/CrossDragPan.js | 243 +++++++++++++++++++
 4 files changed, 585 insertions(+), 48 deletions(-)
 create mode 100644 ui/src/components/openlayers/CrossDragPan.js

diff --git a/ui/src/api.js b/ui/src/api.js
index 2bf2dfc..a13bcf3 100644
--- a/ui/src/api.js
+++ b/ui/src/api.js
@@ -252,7 +252,7 @@ export function useScene({
     reset();
     loadSpeed.value = 0;
     
-    if (newValue.stale && !newValue.loading && !oldValue?.loading) {
+    if (newValue?.stale && !newValue?.loading && !oldValue?.loading) {
       console.log("scene stale, recreating...");
       await recreateScene();
       return;
diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 1c31ccd..d6a8286 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="scroll" :class="{ fullpage, fixed: !nativeScroll }">
+  <div class="scroll" :class="{ fullpage, fixed: false }">
 
     <tile-viewer
       class="viewer"
@@ -14,10 +14,12 @@
       :interactive="interactive"
       :pannable="!nativeScroll"
       :zoomable="!nativeScroll"
-      :zoom-transition="true"
+      :zoom-transition="zoomTransition"
       :viewport="viewport"
       @click="onClick"
       @view="onView"
+      @move-end="onMoveEnd"
+      @nav="onNav"
       @wheel="onWheel"
       @load-end="onLoadEnd"
       @contextmenu.prevent="onContextMenu"
@@ -76,6 +78,7 @@ import DateStrip from './DateStrip.vue';
 import RegionMenu from './RegionMenu.vue';
 import Spinner from './Spinner.vue';
 import TileViewer from './TileViewer.vue';
+import { tr } from 'date-fns/locale';
 
 const props = defineProps({
   interactive: Boolean,
@@ -118,8 +121,10 @@ const {
 
 const viewer = ref(null);
 const viewport = useViewport(viewer);
-const nativeScroll = ref(true);
+// const nativeScroll = ref(true);
+
 const lastView = ref(null);
+const lastNonNativeView = ref(null);
 
 const { scene, recreate: recreateScene, loadSpeed } = useScene({
   layout,
@@ -130,7 +135,6 @@ const { scene, recreate: recreateScene, loadSpeed } = useScene({
   search,
 });
 
-
 watch(scene, async (newScene, oldScene) => {
   if (newScene?.search != oldScene?.search) {
     scrollToPixels(0);
@@ -146,13 +150,24 @@ useEventBus("recreate-scene").on(scene => {
 const {
   region,
   navigate,
-  exit,
+  exit: regionExit,
 } = useSeekableRegion({
   scene,
   collectionId,
   regionId,
 })
 
+const exit = async () => {
+  // const viewZoom = viewer.value.zoomFromView(view.value);
+  // const moveZoom = viewer.value.zoomFromView(lastView.value);
+  // const ratio = moveZoom / viewZoom;
+  // if (ratio > 1.1) {
+  //   zoomOut();
+  //   return;
+  // }
+  await regionExit();
+}
+
 const { data: capabilities } = useApi(() => "/capabilities");
 const tagsSupported = computed(() => capabilities.value?.tags?.supported);
 
@@ -178,10 +193,52 @@ const canvas = computed(() => {
   }
 });
 
+const lastZoom = computed(() => {
+  return scene.value?.bounds.w / lastView.value?.w;
+});
+
+const nativeScroll = computed(() => {
+  // const lastZoom = lastZoom.value;
+  // console.log(lastZoom.value);
+
+  if (lastZoom.value > 1.2) {
+    return false;
+  }
+
+  if (region.value) return false;
+  return true;
+});
+
+const zoomTransition = computed(() => {
+  // if (!viewer.value) return false;
+  // const viewZoom = viewer.value?.zoomFromView(view.value);
+  // const moveZoom = viewer.value?.zoomFromView(lastView.value);
+  // const regionZoom = viewer.value?.zoomFromView(region.value?.bounds);
+  // if (!viewZoom || !moveZoom) return false;
+  // const ratio = moveZoom / regionZoom;
+  // console.log(ratio)
+  // if (Math.abs(1 - ratio) < 0.1) return false;
+  return true;
+});
+
+watch(nativeScroll, async (newValue, oldValue) => {
+  if (newValue == oldValue) {
+    return;
+  }
+  if (newValue) {
+    // console.log("nativey", lastView.value?.y, lastNonNativeView.value?.y);
+    await centerToBounds(lastNonNativeView.value);
+  }
+});
+
+
 const centerToBounds = async (bounds) => {
   const by = bounds.y + bounds.h * 0.5;
   const vy = viewport.height.value * 0.5;
-  nativeScroll.value = true;
+  // nativeScroll.value = true;
+  // if (region.value) {
+  //   await exit();
+  // }
   await nextTick();
   scrollToPixels(by - vy);
   await nextTick();
@@ -205,7 +262,10 @@ const zoomOut = () => {
   viewer.value?.setView(view.value);
 }
 
-const scrollSleep = computed(() => !nativeScroll.value);
+// const scrollSleep = computed(() => !nativeScroll.value);
+const scrollSleep = computed(() => {
+  return !nativeScroll.value || lastZoom.value > 1.0001;
+});
 
 const {
   y: scrollY,
@@ -217,6 +277,8 @@ const {
 const { date: scrollDate } = useTimeline({ scene, viewport, scrollRatio });
 
 const view = computed(() => {
+  // console.log("view", region.value);
+
   if (region.value) {
     return region.value.bounds;
   }
@@ -232,6 +294,15 @@ const view = computed(() => {
   }
 });
 
+// watch(region, async (newRegion, oldRegion) => {
+//   if (newRegion == null && oldRegion == null) {
+//     // nativeScroll.value = false;
+//   } else if (newRegion === null && oldRegion != null) {
+//     // nativeScroll.value = true;
+//     await centerToBounds(oldRegion.bounds);
+//   }
+// });
+
 const selectBounds = async (op, bounds) => {
   if (!tagsSupported.value) return;
   let id = selectTagId.value;
@@ -274,39 +345,69 @@ const onClick = async (event) => {
 const onWheel = async (event) => {
   if (event.ctrlKey && nativeScroll.value) {
     event.preventDefault();
-    if (event.deltaY < 0) {
-      // Ctrl+scroll zoom in to disabled scroll mode
-      nativeScroll.value = false;
-      await nextTick();
+    // if (event.deltaY < 0) {
+    //   // Ctrl+scroll zoom in to disabled scroll mode
+    //   // nativeScroll.value = false;
+    //   await nextTick();
       
-      const target = viewer.value.pointerTarget;
-      const redirected = new event.constructor(event.type, event);
-      target.dispatchEvent(redirected);
-    }
+    //   const target = viewer.value.pointerTarget;
+    //   const redirected = new event.constructor(event.type, event);
+    //   target.dispatchEvent(redirected);
+    // }
   }
 }
 
-const onView = (view) => {
+const onView = (event) => {
   if (!scene.value?.bounds.w) {
     return;
   }
   if (lastView.value) {
     const lastZoom = scene.value.bounds.w / lastView.value.w;
-    const zoom = scene.value.bounds.w / view.w;
+    const viewZoom = scene.value.bounds.w / view.value?.w;
+    const zoom = scene.value.bounds.w / event.w;
     const zoomDiff = zoom - lastZoom;
-    if (zoom <= 1.0001 && zoomDiff < -0.000001) {
-      // Zoom out to native scroll
-      if (!nativeScroll.value) {
-        nativeScroll.value = true;
-      }
-    } else if (zoom >= 1.0001) {
-      // Zoom in via tileviewer movement (e.g. pinch gesture)
-      if (nativeScroll.value) {
-        nativeScroll.value = false;
-      }
-    }
+    const zoomingOut = zoomDiff < -0.000001;
+    // if (zoom <= 1.1 && zoomingOut) {
+    //   exit();
+    //   return;
+    // }
+    // if (viewZoom) {
+    //   const ratio = zoom / viewZoom;
+    //   console.log("ratio", ratio);
+    //   if (ratio < 0.8 && zoomingOut) {
+    //     exit();
+    //     return;
+    //   }
+    // }
+    // console.log("zoom", zoom, "lastZoom", lastZoom, "viewZoom", viewZoom, "zoomDiff", zoomDiff, "zoomingOut", zoomingOut);
+    // if (zoom <= 1.1) {
+    //   // Zoom out to native scroll
+    //   if (!nativeScroll.value) {
+    //     nativeScroll.value = true;
+    //   }
+    // } else if (zoom >= 1.0001) {
+    //   // Zoom in via tileviewer movement (e.g. pinch gesture)
+    //   if (nativeScroll.value) {
+    //     nativeScroll.value = false;
+    //   }
+    // }
+    // if (zoom <= 1.1 && zoomingOut) {
+    //   // Zoom out to native scroll
+    //   if (!nativeScroll.value) {
+    //     nativeScroll.value = true;
+    //   }
+    // } else if (zoom >= 1.0001) {
+    //   // Zoom in via tileviewer movement (e.g. pinch gesture)
+    //   if (nativeScroll.value) {
+    //     nativeScroll.value = false;
+    //   }
+    // }
+  }
+  lastView.value = event;
+  if (!nativeScroll.value) {
+    lastNonNativeView.value = event;
   }
-  lastView.value = view;
+  // console.log("y", nativeScroll.value, event.y)
   // console.log("view", Object.assign({}, view));
   // console.log("region", Object.assign({}, region.value?.bounds));
   // console.log("element", viewer.value?.elementFromView(view));
@@ -323,6 +424,44 @@ const onView = (view) => {
   }
 }
 
+const onMoveEnd = async (event) => {
+  if (!scene.value?.bounds.w || !view.value || !viewer.value) {
+    return;
+  }
+  // const viewZoom = scene.value.bounds.w / view.value.w;
+  // const moveZoom = scene.value.bounds.w / event.w;
+  const viewZoom = viewer.value.zoomFromView(view.value);
+  const moveZoom = viewer.value.zoomFromView(event);
+  const ratio = moveZoom / viewZoom;
+  // console.log("ratio", ratio);
+  
+  // if (ratio < 0.7) {
+  //   await exit();
+  //   return;
+  // }
+  // if (ratio < 1.1) {
+  //   zoomOut();
+  //   return;
+  // }
+}
+
+const onNav = async (event) => {
+  // console.log("nav", event);
+  // const zoom = scene.value.bounds.w / lastView.value?.w;
+  // console.log("zoom", zoom);
+  if (event.x) {
+    await navigate(event.x);
+    return;
+  }
+  if (event.y < 0 && view.value) {
+    await exit();
+    return;
+  }
+  // if (event.external) {
+  // }
+  zoomOut();
+}
+
 const onBoxSelect = async (bounds, shift) => {
   const op = shift ? "SUBTRACT" : "ADD";
   selectBounds(op, bounds);
diff --git a/ui/src/components/TileViewer.vue b/ui/src/components/TileViewer.vue
index 7a6f7ff..040a93d 100644
--- a/ui/src/components/TileViewer.vue
+++ b/ui/src/components/TileViewer.vue
@@ -26,6 +26,7 @@ import { defaults as defaultInteractions, DragBox, DragPan, MouseWheelZoom } fro
 import { defaults as defaultControls } from 'ol/control';
 import {MAC} from 'ol/src/has.js';
 import equal from 'fast-deep-equal';
+import CrossDragPan from './openlayers/CrossDragPan';
 
 import PhotoSkeleton from './PhotoSkeleton.vue';
 
@@ -40,6 +41,8 @@ import { Polygon } from 'ol/geom';
 import Feature from 'ol/Feature';
 import Style from 'ol/style/Style';
 import Fill from 'ol/style/Fill';
+import { watchEffect } from 'vue';
+
 
 function ctrlWithMaybeShift(mapBrowserEvent) {
   const originalEvent = /** @type {KeyboardEvent|MouseEvent|TouchEvent} */ (
@@ -88,19 +91,22 @@ export default {
     "load-end",
     "key-down",
     "viewer",
-    "box-select"
+    "box-select",
+    "nav",
   ],
 
   data() {
     return {
       viewer: null,
       maxZoom: 30,
+      clipviewZoom: 1,
     }
   },
   async created() {
   },
   async mounted() {
     this.latestView = null;
+    this.lastClipview = null;
     this.clipviewChangeTime = 0;
     this.lastAnimationTime = 0;
     this.reset();
@@ -182,6 +188,23 @@ export default {
 
     clipview() {
       this.clipviewChangeTime = Date.now();
+      // this.setCrossPanActive(!!this.clipview);
+    },
+
+    crossPanActive: {
+      immediate: true,
+      handler(active) {
+        // console.log("crossPanActive", active)
+        this.crossPan?.setActive(active);
+      }
+    },
+
+    dragPanActive: {
+      immediate: true,
+      handler(active) {
+        // console.log("dragPanActive", active)
+        this.dragPan?.setActive(active);
+      }
     },
 
     selectTagId() {
@@ -207,6 +230,12 @@ export default {
       let { width, height } = this.getTiledImageSizeAtZoom(this.maxZoom);
       return [0, -height*2, width, height];
     },
+    crossPanActive() {
+      return this.clipview && this.clipviewZoom < 1.1;
+    },
+    dragPanActive() {
+      return this.pannable && !this.crossPanActive;
+    },
     minViewportZoom() {
       if (!this.v || !this.viewport.width.value) {
         return 0;
@@ -332,10 +361,9 @@ export default {
         
         const size = this.map.getSize();
         const corners = this.pixelCornersFromView(view);
-
         const pixelRatio = window.devicePixelRatio;
-        size[0] *= pixelRatio;
-        size[1] *= pixelRatio;
+        const mapw = size[0] * pixelRatio;
+        const maph = size[1] * pixelRatio;
         corners.tl[0] *= pixelRatio;
         corners.tl[1] *= pixelRatio;
         corners.tr[0] *= pixelRatio;
@@ -345,19 +373,38 @@ export default {
         corners.bl[0] *= pixelRatio;
         corners.bl[1] *= pixelRatio;
 
-        const alpha = 
+        const animFrac = 
           this.lastAnimationTime ?
             Math.max(0, Math.min(1, (Date.now() - this.clipviewChangeTime) / (this.lastAnimationTime*1000))) :
             1;
-
-        // TODO: Fade based on distance instead of time
-        console.log(this.zoomFromView(this.latestView), this.zoomFromView(view));
+        
+        const latestZoom = this.zoomFromView(this.latestView);
+        const zoom = this.zoomFromView(view);
+        const zoomFrac = Math.min(1, latestZoom/zoom + 1e-4);
+        
+        const mapExtent = this.v.getProjection().getExtent();
+        const mapRes = this.v.getResolutionForExtent([
+          0,
+          0,
+          mapExtent[2],
+          mapExtent[2],
+        ]);
+        const viewExtent = this.extentFromView(view);
+        const viewRes = this.v.getResolutionForExtent(viewExtent);
+        const res = this.v.getResolution();
+        const resFrac = 1 - Math.min(1, (res - viewRes) / (mapRes - viewRes));
+        // console.log(resFrac)
+
+        // const alpha = animFrac * resFrac;
+        const alpha = resFrac;
 
         const e = 1;
         
         ctx.fillStyle = `rgba(0, 0, 0, ${alpha})`;
+        ctx.strokeStyle = "green";
+        ctx.lineWidth = 20;
         ctx.beginPath();
-        ctx.rect(0, 0, size[0], size[1]);
+        ctx.rect(0, 0, mapw, maph);
         ctx.moveTo(corners.tl[0] + e, corners.tl[1] + e);
         ctx.lineTo(corners.tr[0] - e, corners.tr[1] + e);
         ctx.lineTo(corners.br[0] - e, corners.br[1] - e);
@@ -369,7 +416,7 @@ export default {
           return;
         }
 
-        // this.map.render();
+        this.map.render();
       });
       
       return main;
@@ -476,6 +523,10 @@ export default {
       // }
 
       const dragPan = new DragPan();
+      const crossPan = new CrossDragPan();
+      crossPan.on("nav", event => {
+        this.onNav(event);
+      });
       const mouseWheelZoom = new MouseWheelZoom();
       const dragBox = new DragBox({
         condition: ctrlWithMaybeShift,
@@ -490,12 +541,15 @@ export default {
         doubleClickZoom: false,
       }).extend([
         dragPan,
+        crossPan,
         mouseWheelZoom,
         dragBox,
       ]);
       this.interactions = interactions;
       this.dragPan = dragPan;
-      this.dragPan.setActive(this.pannable);
+      this.crossPan = crossPan;
+      this.dragPan.setActive(this.dragPanActive);
+      this.crossPan.setActive(this.crossPanActive);
 
       this.mouseWheelZoom = mouseWheelZoom;
       this.mouseWheelZoom.setActive(this.zoomable);
@@ -581,7 +635,7 @@ export default {
         kinetic: this.dragPanKinetic,
       });
       this.interactions.push(this.dragPan);
-      this.dragPan.setActive(this.pannable);
+      this.dragPan.setActive(this.dragPanActive);
     },
 
     onClick(event) {
@@ -602,6 +656,11 @@ export default {
       const visibleExtent = this.v.calculateExtent(this.map.getSize());
       const view = this.viewFromExtent(visibleExtent);
       if (!view) return;
+      // console.log("moveend", view)
+      if (this.clipview) {
+        this.navOnZoom();
+        return;
+      }
       this.$emit("move-end", view);
     },
 
@@ -622,7 +681,7 @@ export default {
       }
     },
 
-    onResolutionChange() {
+    onResolutionChange(event) {
       const visibleExtent = this.v.calculateExtent(this.map.getSize());
       const view = this.viewFromExtent(visibleExtent);
       if (!view) return;
@@ -633,6 +692,34 @@ export default {
         this.lastGeoview = geoview;
         this.$emit("geoview", geoview);
       }
+      if (this.clipview) {
+        const clipzoom = this.zoomFromView(this.clipview);
+        const viewzoom = this.zoomFromView(view);
+        const ratio = viewzoom / clipzoom;
+        this.clipviewZoom = ratio;
+      }
+      // if (this.clipview && !this.crossPan.axis) {
+      //   const resDiff = event.target.get(event.key) - event.oldValue;
+      //   if (resDiff > 0) {
+      //     const clipzoom = this.zoomFromView(this.clipview);
+      //     const viewzoom = this.zoomFromView(view);
+      //     const ratio = viewzoom / clipzoom;
+      //     if (ratio < 0.8) {
+      //       this.$emit("nav", {
+      //         x: 0,
+      //         y: -1,
+      //       })
+      //     }
+      //   }
+      // }
+      // console.log("resolution change", this.zoomFromView(this.clipview), this.zoomFromView(view), this.zoomFromView(view) / this.zoomFromView(this.clipview), this.crossPan.panning)
+      // if (this.resolutionChangeTimer) {
+      //   clearTimeout(this.resolutionChangeTimer);
+      // }
+      // this.resolutionChangeTimer = setTimeout(() => {
+      //   this.resolutionChangeTimer = null;
+      //   this.$emit("move-end", view);
+      // }, 100);
     },
 
     onBoxSelect(event, extent) {
@@ -642,6 +729,23 @@ export default {
       this.$emit("box-select", view, shift);
     },
 
+    onNav(event) {
+      if (event.interrupted) {
+        this.navOnZoom(event);
+        return;
+      }
+      this.$emit("nav", event);
+    },
+
+    navOnZoom() {
+      const ratio = this.clipviewZoom;
+      if (ratio < 0.6) {
+        this.$emit("nav", { x: 0, y: -1 });
+      } else if (ratio < 1.2) {
+        this.$emit("nav", { x: 0, y: 0 });
+      }
+    },
+
     reset() {
       if (!this.scene?.bounds?.w || !this.scene?.bounds?.h) return;
       if (this.map) {
@@ -738,14 +842,46 @@ export default {
     },
 
     zoomFromView(view) {
-      if (!view) return null;
+      if (!view || !this.map) return null;
       const vw = view.w;
       const vh = view.h;
-      const sw = this.scene.bounds.w;
-      const sh = this.scene.bounds.h;
+      // const sw = this.scene.bounds.w;
+      // const sh = this.scene.bounds.h;
       const [mw, mh] = this.map.getSize();
       const zw = mw / vw;
       const zh = mh / vh;
+
+      // func (rect Rect) FitInside(container Rect) (out Rect) {
+      // 	imageRatio := rect.W / rect.H
+
+      // 	var scale float64
+      // 	if container.W/container.H < imageRatio {
+      // 		scale = container.W / rect.W
+      // 	} else {
+      // 		scale = container.H / rect.H
+      // 	}
+
+      // 	out.W = rect.W * scale
+      // 	out.H = rect.H * scale
+      // 	out.X = container.X + (container.W-out.W)*0.5
+      // 	out.Y = container.Y + (container.H-out.H)*0.5
+      // 	return out
+      // }
+
+      // const viewAspect = vw / vh;
+      // const mapAspect = mw / mh;
+      // const mapScale = mapAspect < viewAspect ? mw / vw : mh / vh;
+
+      // const sceneAspect = sw / sh;
+      // const sceneScale = sceneAspect < 1 ? sw / vw : sh / vh;
+
+      // const viewport = this.viewport;
+      // const [vpw, vph] = [viewport.width.value, viewport.height.value];
+      // const vpAspect = vpw / vph;
+      // const vpScale = vpAspect < viewAspect ? vpw / vw : vph / vh;
+
+      // // console.log({ vw, vh, sw, sh, zw, zh, min: Math.min(zw, zh), scale })
+      // console.log({ min: Math.min(zw, zh), mapScale, sceneScale, vpScale })
       return Math.min(zw, zh);
     },
 
@@ -844,6 +980,14 @@ export default {
       return geoview[2];
     },
 
+    // setCrossPanActive(active) {
+    //   // this.dragPan.setActive(this.pannable && !active);
+    //   // this.crossPan.setActive(active);
+    //   // Initially false
+    //   // on clipview this.setCrossPanActive(!!this.clipview);
+      
+    // },
+
     setView(view, options) {
 
       if (!this.map) {
@@ -895,17 +1039,27 @@ export default {
         const prevZoom = this.zoomFromView(this.latestView);
         const zoom = this.zoomFromView(view);
         const zoomDiff = Math.abs(zoom - prevZoom);
-        if (zoomDiff > 1e-4 && !options) {
-          console.log(zoomDiff)
+
+        const skipClipTransition =
+          this.lastClipview &&
+          this.latestView.x == this.lastClipview.x &&
+          this.latestView.y == this.lastClipview.y &&
+          this.latestView.w == this.lastClipview.w &&
+          this.latestView.h == this.lastClipview.h;
+          
+        if (zoomDiff > 1e-4 && !options && !skipClipTransition) {
+          // console.log(zoomDiff)
           // const t = zoomDiff * 0.05;
           // const t = zoomDiff * 0.2;
           // const t = zoomDiff * 1;
           const t = Math.pow(zoomDiff, 0.5) * 0.08;
+          // const t = Math.pow(zoomDiff, 1.5) * 0.08;
           options = { animationTime: t }
         }
       }
 
       this.latestView = view;
+      this.lastClipview = this.clipview;
       if (this.pendingAnimationTime && !options) {
         options = { animationTime: this.pendingAnimationTime }
       }
@@ -950,6 +1104,7 @@ export default {
 .container, .tileViewer {
   width: 100%;
   height: 100%;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .container {
diff --git a/ui/src/components/openlayers/CrossDragPan.js b/ui/src/components/openlayers/CrossDragPan.js
new file mode 100644
index 0000000..1d2f2da
--- /dev/null
+++ b/ui/src/components/openlayers/CrossDragPan.js
@@ -0,0 +1,243 @@
+import { Pointer as PointerInteraction } from 'ol/interaction';
+import { centroid as centroidFromPointers } from 'ol/interaction/Pointer';
+import { rotate as rotateCoordinate, scale as scaleCoordinate } from 'ol/coordinate';
+import { getBottomLeft, getBottomRight, getTopLeft, getTopRight } from 'ol/extent';
+
+const Axis = {
+  None: 0,
+  X: 1,
+  Y: 2,
+}
+class CrossDragPan extends PointerInteraction {
+  constructor() {
+    super({
+      handleDownEvent: (event) => {
+        this.center = event.map.getView().getCenter();
+        this.zoom = event.map.getView().getZoom();
+        this.resolution = event.map.getView().getResolution();
+        if (this.targetPointers.length > 0) {
+          this.centroid = centroidFromPointers(this.targetPointers);
+          this.lastEventTime = null;
+          return true;
+        } else {
+          return false;
+        }
+      },
+      handleDragEvent: (event) => {
+        const map = event.map;
+        const view = map.getView();
+        if (!this.panning) {
+          this.panning = true;
+          view.beginInteraction();
+        }
+
+        const targetPointers = this.targetPointers;
+        if (this.targetPointers.length !== 1) {
+          this.axis = Axis.None;
+          return;
+        }
+
+        const centroid = centroidFromPointers(targetPointers);
+        
+        const base = this.centroid;
+        const delta = [
+          centroid[0] - base[0],
+          centroid[1] - base[1],
+        ];
+        this.delta = delta.slice();
+        
+        const time = event.frameState.time;
+        if (this.lastEventTime) {
+          const dt = time - this.lastEventTime;
+          this.velocity = [
+            (centroid[0] - this.lastCentroid[0]) / dt,
+            (centroid[1] - this.lastCentroid[1]) / dt,
+          ];
+        }
+        this.lastCentroid = centroid;
+        this.lastEventTime = time;
+
+
+        switch (this.axis) {
+          case Axis.None:
+            const adx = Math.abs(delta[0]);
+            const ady = Math.abs(delta[1]);
+            if (adx > this.moveThreshold || ady > this.moveThreshold) {
+              if (adx > ady) {
+                this.axis = Axis.X;
+              } else {
+                this.axis = Axis.Y;
+              }
+              this.centroid = centroid;
+            }
+            break;
+          case Axis.X:
+            delta[1] = 0;
+            scaleCoordinate(delta, view.getResolution());
+            rotateCoordinate(delta, view.getRotation());
+            view.setCenterInternal([
+              this.center[0] - delta[0],
+              this.center[1] - delta[1]
+            ]);
+            break;
+          case Axis.Y:
+            delta[0] = 0;
+            const dy = delta[1];
+            scaleCoordinate(delta, view.getResolution());
+            rotateCoordinate(delta, view.getRotation());
+
+            // const mapExtent = view.getProjection().getExtent();
+            // const viewExtent = view.calculateExtent();
+            // const zoomedOutExtent = [
+            //   0,
+            //   0,
+            //   mapExtent[2],
+            //   mapExtent[3] * 3,
+            // ]
+            // // const outZoom = (mapExtent[2] - mapExtent[0]) / (viewExtent[2] - viewExtent[0]);
+            // const zoom = view.getZoom();
+            // let frac = 1 - (zoom - 7.417) / (this.zoom - 7.417);
+            // frac *= frac;
+            // // const mapZoom = view.getZoomForResolution(view.getResolutionForExtent(mapExtent))
+            // console.log(this.zoom, zoom, frac);
+
+            // const topLeft = getTopLeft(mapExtent);
+            // const topRight = getTopRight(mapExtent);
+            // const width = topRight[0] - topLeft[0];
+            // const center = width * 0.5;
+            // const x = this.center[0] * (1 - frac) + center * frac;
+
+            // view.setCenterInternal([
+            //   x,
+            //   this.center[1],
+            // ]);
+            // const zoom = this.zoom - delta[1] * 1e-4;
+            // view.setZoom(zoom);
+            // const pix = map.getPixelFromCoordinateInternal(delta);
+            
+            const resolution = this.resolution * Math.max(1, 1 + dy * 0.01);
+            // console.log(this.resolution, resolution, pix);
+            // console.log(map.getPixelFromCoordinate(this.center));
+            // console.log(map.getPixelFromCoordinate(centroid));
+            // console.log(base[1] - centroid[1]);
+            view.setResolution(resolution);
+
+            const mapExtent = view.getProjection().getExtent();
+            // const mapRes = view.getResolutionForExtent(mapExtent);
+            const mapRes = view.getResolutionForExtent([
+              0,
+              0,
+              mapExtent[2],
+              mapExtent[2],
+            ]);
+            const frac = Math.min(1, (resolution - this.resolution) / (mapRes - this.resolution));
+            // console.log(mapRes, this.resolution, resolution, mapRes / resolution);
+            // console.log(frac);
+            
+            const topLeft = getTopLeft(mapExtent);
+            const topRight = getTopRight(mapExtent);
+            const bottomLeft = getBottomLeft(mapExtent);
+            const bottomRight = getBottomRight(mapExtent);
+            const width = topRight[0] - topLeft[0];
+            const height = bottomLeft[1] - topLeft[1];
+
+            const x = this.center[0] * (1 - frac) + (width * 0.5) * frac;
+            const y = this.center[1] * (1 - frac) + (height) * frac;
+            
+            view.setCenterInternal([
+              x,
+              this.center[1],
+            ]);
+
+            // const zoomedOutCenter = [
+            //   this.center[0] + width * 1,
+            //   this.center[1],
+            // ];
+            // view.adjustResolution(Math.max(1, 1 - dy * 0.0005));
+            // const dres = 1 - dy * 0.0005;
+            // view.adjustResolution(dres, zoomedOutCenter);
+            // console.log(mapExtent);
+            // console.log(viewExtent);
+            // console.log(view.calculateExtentInternal())
+            break;
+        }
+        
+        event.originalEvent.preventDefault();
+      },
+      handleUpEvent: (event) => {
+        const map = event.map;
+        const view = map.getView();
+        if (this.panning) {
+          this.panning = false;
+          view.endInteraction();
+
+          let dispatched = false;
+
+          switch (this.axis) {
+            case Axis.X:
+              const dx = this.delta[0] + this.velocity[0]*this.navXSpeed;
+              const minw = map.getSize()[0] * this.navXDist;
+              const x = dx < -minw ? 1 : dx > minw ? -1 : 0;
+              if (x) {
+                this.dispatchEvent({
+                  type: 'nav',
+                  x,
+                  y: 0,
+                });
+                dispatched = true;
+              }
+              break;
+            case Axis.Y:
+              const dy = this.delta[1] + this.velocity[1]*this.navYSpeed;
+              const minh = map.getSize()[1] * this.navYDist;
+              const y = dy < -minh ? 1 : dy > minh ? -1 : 0;
+              console.log("delta", this.delta[1], "velocity", this.velocity[1], "dy", dy, "minh", minh, "y", y);
+              if (y !== 0) {
+                this.dispatchEvent({
+                  type: 'nav',
+                  x: 0,
+                  y,
+                });
+                dispatched = true;
+              }
+              break;
+            case Axis.None:
+              this.dispatchEvent({
+                type: 'nav',
+                interrupted: true,
+              });
+              dispatched = true;
+              break;
+          }
+          
+          if (!dispatched) {
+            this.dispatchEvent({
+              type: 'nav',
+              x: 0,
+              y: 0,
+            });
+          }
+
+          this.axis = Axis.None;
+        }
+      },
+    });
+
+    this.centroid = null;
+    this.lastCentroid = null;
+    this.lastEventTime = null;
+    this.velocity = [0, 0];
+    this.zoom = null;
+    this.resolution = null;
+    this.panning = false;
+    this.axis = Axis.None;
+    this.delta = null;
+    this.moveThreshold = 5;
+    this.navXSpeed = 1000;
+    this.navXDist = 0.5;
+    this.navYSpeed = 1000;
+    this.navYDist = 0.05;
+  }
+}
+
+export default CrossDragPan;
\ No newline at end of file

From fde958f6065ff8656bd5082a02e3549a61686fe8 Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Wed, 7 Feb 2024 23:18:25 +0100
Subject: [PATCH 03/16] Interaction polish for scrollviewer

---
 ui/package-lock.json                         |  11 ++
 ui/package.json                              |   1 +
 ui/src/components/ScrollViewer.vue           |  55 +++++----
 ui/src/components/TileViewer.vue             | 117 +++++++++++++------
 ui/src/components/openlayers/CrossDragPan.js |  22 ++--
 ui/src/use.js                                |   3 +-
 6 files changed, 138 insertions(+), 71 deletions(-)

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 08b61e4..0a1bfee 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -19,6 +19,7 @@
         "date-fns": "^2.28.0",
         "deep-iterator": "^1.1.0",
         "fast-deep-equal": "^3.1.3",
+        "kalmanjs": "^1.1.0",
         "ol": "^6.15.1",
         "overlayscrollbars": "^1.13.2",
         "overlayscrollbars-vue": "^0.3.0",
@@ -2557,6 +2558,11 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/kalmanjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/kalmanjs/-/kalmanjs-1.1.0.tgz",
+      "integrity": "sha512-Gkm2DAKIX8geuDcEJ92e80EmQ6TyIzWBJk6AFk+aDLofQ4G/KoDe1RCY9WMuXFe0NQxsTi7HYh9BVQneOtlvkg=="
+    },
     "node_modules/lerc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
@@ -5606,6 +5612,11 @@
         "universalify": "^2.0.0"
       }
     },
+    "kalmanjs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/kalmanjs/-/kalmanjs-1.1.0.tgz",
+      "integrity": "sha512-Gkm2DAKIX8geuDcEJ92e80EmQ6TyIzWBJk6AFk+aDLofQ4G/KoDe1RCY9WMuXFe0NQxsTi7HYh9BVQneOtlvkg=="
+    },
     "lerc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
diff --git a/ui/package.json b/ui/package.json
index d7696fb..3e28481 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -17,6 +17,7 @@
     "date-fns": "^2.28.0",
     "deep-iterator": "^1.1.0",
     "fast-deep-equal": "^3.1.3",
+    "kalmanjs": "^1.1.0",
     "ol": "^6.15.1",
     "overlayscrollbars": "^1.13.2",
     "overlayscrollbars-vue": "^0.3.0",
diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index d6a8286..73ff1f2 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -14,7 +14,7 @@
       :interactive="interactive"
       :pannable="!nativeScroll"
       :zoomable="!nativeScroll"
-      :zoom-transition="zoomTransition"
+      :zoom-transition="true"
       :viewport="viewport"
       @click="onClick"
       @view="onView"
@@ -209,18 +209,6 @@ const nativeScroll = computed(() => {
   return true;
 });
 
-const zoomTransition = computed(() => {
-  // if (!viewer.value) return false;
-  // const viewZoom = viewer.value?.zoomFromView(view.value);
-  // const moveZoom = viewer.value?.zoomFromView(lastView.value);
-  // const regionZoom = viewer.value?.zoomFromView(region.value?.bounds);
-  // if (!viewZoom || !moveZoom) return false;
-  // const ratio = moveZoom / regionZoom;
-  // console.log(ratio)
-  // if (Math.abs(1 - ratio) < 0.1) return false;
-  return true;
-});
-
 watch(nativeScroll, async (newValue, oldValue) => {
   if (newValue == oldValue) {
     return;
@@ -345,15 +333,21 @@ const onClick = async (event) => {
 const onWheel = async (event) => {
   if (event.ctrlKey && nativeScroll.value) {
     event.preventDefault();
-    // if (event.deltaY < 0) {
-    //   // Ctrl+scroll zoom in to disabled scroll mode
-    //   // nativeScroll.value = false;
-    //   await nextTick();
-      
-    //   const target = viewer.value.pointerTarget;
-    //   const redirected = new event.constructor(event.type, event);
-    //   target.dispatchEvent(redirected);
-    // }
+    if (event.deltaY < 0) {
+      const bump = 0.3;
+      // Zoom into mouse cursor
+      const rx = event.x / viewport.width.value;
+      const ry = event.y / viewport.height.value;
+      viewer.value?.setView({
+        w: view.value.w * (1 - bump * 2),
+        h: view.value.h * (1 - bump * 2),
+        x: view.value.x + view.value.w * bump * rx * 2,
+        y: view.value.y + view.value.h * bump * ry * 2,
+      }, {
+        animationTime: 0.3,
+        ease: "out",
+      });
+    }
   }
 }
 
@@ -446,19 +440,22 @@ const onMoveEnd = async (event) => {
 }
 
 const onNav = async (event) => {
-  // console.log("nav", event);
-  // const zoom = scene.value.bounds.w / lastView.value?.w;
-  // console.log("zoom", zoom);
   if (event.x) {
-    await navigate(event.x);
+    const valid = await navigate(event.x);
+    if (!valid) {
+      viewer.value?.setPendingTransition({
+        t: 0.5,
+        x: lastView.value?.x,
+        ease: "out",
+      });
+      zoomOut();
+    }
     return;
   }
-  if (event.y < 0 && view.value) {
+  if (event.zoom < 0) {
     await exit();
     return;
   }
-  // if (event.external) {
-  // }
   zoomOut();
 }
 
diff --git a/ui/src/components/TileViewer.vue b/ui/src/components/TileViewer.vue
index 040a93d..6df8e01 100644
--- a/ui/src/components/TileViewer.vue
+++ b/ui/src/components/TileViewer.vue
@@ -22,6 +22,7 @@ import OSM from 'ol/source/OSM';
 import TileLayer from 'ol/layer/Tile';
 import View from 'ol/View';
 import Projection from 'ol/proj/Projection';
+import { easeIn, easeOut, linear } from 'ol/easing';
 import { defaults as defaultInteractions, DragBox, DragPan, MouseWheelZoom } from 'ol/interaction';
 import { defaults as defaultControls } from 'ol/control';
 import {MAC} from 'ol/src/has.js';
@@ -54,6 +55,10 @@ function ctrlWithMaybeShift(mapBrowserEvent) {
   );
 };
 
+function zoomEase(x) {
+  return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2
+};
+
 export default {
 
   components: {
@@ -228,7 +233,7 @@ export default {
     },
     viewExtent() {
       let { width, height } = this.getTiledImageSizeAtZoom(this.maxZoom);
-      return [0, -height*2, width, height];
+      return [-width*0.95, -height, width*1.95, height];
     },
     crossPanActive() {
       return this.clipview && this.clipviewZoom < 1.1;
@@ -577,7 +582,6 @@ export default {
           extent,
           smoothExtentConstraint: false,
           showFullExtent: true,
-          constrainOnlyCenter: true,
         });
       }
 
@@ -656,7 +660,6 @@ export default {
       const visibleExtent = this.v.calculateExtent(this.map.getSize());
       const view = this.viewFromExtent(visibleExtent);
       if (!view) return;
-      // console.log("moveend", view)
       if (this.clipview) {
         this.navOnZoom();
         return;
@@ -698,28 +701,6 @@ export default {
         const ratio = viewzoom / clipzoom;
         this.clipviewZoom = ratio;
       }
-      // if (this.clipview && !this.crossPan.axis) {
-      //   const resDiff = event.target.get(event.key) - event.oldValue;
-      //   if (resDiff > 0) {
-      //     const clipzoom = this.zoomFromView(this.clipview);
-      //     const viewzoom = this.zoomFromView(view);
-      //     const ratio = viewzoom / clipzoom;
-      //     if (ratio < 0.8) {
-      //       this.$emit("nav", {
-      //         x: 0,
-      //         y: -1,
-      //       })
-      //     }
-      //   }
-      // }
-      // console.log("resolution change", this.zoomFromView(this.clipview), this.zoomFromView(view), this.zoomFromView(view) / this.zoomFromView(this.clipview), this.crossPan.panning)
-      // if (this.resolutionChangeTimer) {
-      //   clearTimeout(this.resolutionChangeTimer);
-      // }
-      // this.resolutionChangeTimer = setTimeout(() => {
-      //   this.resolutionChangeTimer = null;
-      //   this.$emit("move-end", view);
-      // }, 100);
     },
 
     onBoxSelect(event, extent) {
@@ -730,17 +711,66 @@ export default {
     },
 
     onNav(event) {
+      if (event.x) {
+        const dx = event.x > 0 ? 1 : -1;
+        // const dx = 1;
+        const t = 150 / Math.abs(event.x);
+        // const t = 1;
+        const cx = this.clipview.x;
+        const cw = this.clipview.w;
+        const vx = this.latestView.x;
+        const vw = this.latestView.w;
+        const hideFrac = (2*(cx - vx) + cw - vw) / (cw + vw);
+
+        const show = () => {
+          this.setPendingTransition({
+            t,
+            x: -dx * this.latestView.w,
+            ease: "linear",
+          });
+          this.$emit("nav", {
+            x: dx,
+            y: 0,
+          });
+        };
+        const hideT = t * (1 - Math.abs(hideFrac));
+        if (Math.abs(hideFrac) < 1) {
+          const hideX = cx + (cw + vw) * 0.5 * dx;
+          this.setView({
+            x: hideX,
+            y: this.clipview.y,
+            w: this.clipview.w,
+            h: this.clipview.h,
+          }, {
+            animationTime: hideT,
+            ease: "linear",
+          });
+          clearTimeout(this.navTimer);
+          this.navTimer = setTimeout(show, hideT * 1000);
+        } else {
+          show();
+        }
+        return;
+      }
+      if (event.y < 0) {
+        this.$emit("nav", {
+          zoom: -1,
+        });
+        return;
+      }
       if (event.interrupted) {
         this.navOnZoom(event);
         return;
       }
-      this.$emit("nav", event);
     },
 
     navOnZoom() {
       const ratio = this.clipviewZoom;
-      if (ratio < 0.6) {
-        this.$emit("nav", { x: 0, y: -1 });
+      if (Math.abs(1 - ratio) < 1e-4) {
+        return;
+      }
+      if (ratio < 0.8) {
+        this.$emit("nav", { zoom: -1 });
       } else if (ratio < 1.2) {
         this.$emit("nav", { x: 0, y: 0 });
       }
@@ -955,6 +985,10 @@ export default {
       this.pendingAnimationTime = t;
     },
 
+    setPendingTransition(t) {
+      this.pendingTransition = t;
+    },
+
     getGeoview() {
       const center = toLonLat(this.v.getCenter());
       const zoom = this.v.getZoom();
@@ -1065,19 +1099,35 @@ export default {
       }
       this.pendingAnimationTime = null;
 
+      if (this.pendingTransition) {
+        options = {
+          animationTime: this.pendingTransition.t,
+          ease: this.pendingTransition.ease,
+        }
+        const extent = this.extentFromView({
+          x: view.x + (this.pendingTransition.x || 0),
+          y: view.y + (this.pendingTransition.y || 0),
+          w: view.w,
+          h: view.h,
+        });
+        this.v.fit(extent);
+      }
+      this.pendingTransition = null;
+
       if (this.v.getAnimating()) {
         this.v.cancelAnimations();
       }
 
-      const targetExtent = this.extentFromView(view);
-
       this.lastAnimationTime = options?.animationTime || 0;
       
+      
       const fitOpts = options ? {
         duration: options.animationTime*1000,
-        easing: function(x) {
-          return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2
-        },
+        easing:
+          options.ease == "in" ? easeIn :
+          options.ease == "out" ? easeOut :
+          options.ease == "linear" ? linear :
+          zoomEase,
         // easing: function(x) {
         //   return x * x * x * (x * (6.0 * x - 15.0) + 10.0);
         // },
@@ -1092,6 +1142,7 @@ export default {
         // },
       } : undefined;
 
+      const targetExtent = this.extentFromView(view);
       this.v.fit(targetExtent, fitOpts);
     },
 
diff --git a/ui/src/components/openlayers/CrossDragPan.js b/ui/src/components/openlayers/CrossDragPan.js
index 1d2f2da..0a20e7f 100644
--- a/ui/src/components/openlayers/CrossDragPan.js
+++ b/ui/src/components/openlayers/CrossDragPan.js
@@ -2,6 +2,7 @@ import { Pointer as PointerInteraction } from 'ol/interaction';
 import { centroid as centroidFromPointers } from 'ol/interaction/Pointer';
 import { rotate as rotateCoordinate, scale as scaleCoordinate } from 'ol/coordinate';
 import { getBottomLeft, getBottomRight, getTopLeft, getTopRight } from 'ol/extent';
+import KalmanFilter from 'kalmanjs';
 
 const Axis = {
   None: 0,
@@ -18,6 +19,7 @@ class CrossDragPan extends PointerInteraction {
         if (this.targetPointers.length > 0) {
           this.centroid = centroidFromPointers(this.targetPointers);
           this.lastEventTime = null;
+          this.filter.cov = this.filter.x = NaN;
           return true;
         } else {
           return false;
@@ -46,7 +48,8 @@ class CrossDragPan extends PointerInteraction {
         ];
         this.delta = delta.slice();
         
-        const time = event.frameState.time;
+        // const time = event.frameState.time;
+        const time = Date.now();
         if (this.lastEventTime) {
           const dt = time - this.lastEventTime;
           this.velocity = [
@@ -54,9 +57,6 @@ class CrossDragPan extends PointerInteraction {
             (centroid[1] - this.lastCentroid[1]) / dt,
           ];
         }
-        this.lastCentroid = centroid;
-        this.lastEventTime = time;
-
 
         switch (this.axis) {
           case Axis.None:
@@ -73,6 +73,7 @@ class CrossDragPan extends PointerInteraction {
             break;
           case Axis.X:
             delta[1] = 0;
+            this.speed = this.filter.filter(this.velocity[0]);
             scaleCoordinate(delta, view.getResolution());
             rotateCoordinate(delta, view.getRotation());
             view.setCenterInternal([
@@ -82,6 +83,7 @@ class CrossDragPan extends PointerInteraction {
             break;
           case Axis.Y:
             delta[0] = 0;
+            this.speed = this.filter.filter(this.velocity[1]);
             const dy = delta[1];
             scaleCoordinate(delta, view.getResolution());
             rotateCoordinate(delta, view.getRotation());
@@ -161,6 +163,9 @@ class CrossDragPan extends PointerInteraction {
             // console.log(view.calculateExtentInternal())
             break;
         }
+
+        this.lastCentroid = centroid;
+        this.lastEventTime = time;
         
         event.originalEvent.preventDefault();
       },
@@ -175,13 +180,12 @@ class CrossDragPan extends PointerInteraction {
 
           switch (this.axis) {
             case Axis.X:
-              const dx = this.delta[0] + this.velocity[0]*this.navXSpeed;
+              const dx = this.delta[0] + this.speed*this.navXSpeed;
               const minw = map.getSize()[0] * this.navXDist;
-              const x = dx < -minw ? 1 : dx > minw ? -1 : 0;
-              if (x) {
+              if (dx < -minw || dx > minw) {
                 this.dispatchEvent({
                   type: 'nav',
-                  x,
+                  x: -dx,
                   y: 0,
                 });
                 dispatched = true;
@@ -227,6 +231,7 @@ class CrossDragPan extends PointerInteraction {
     this.lastCentroid = null;
     this.lastEventTime = null;
     this.velocity = [0, 0];
+    this.speed = 0;
     this.zoom = null;
     this.resolution = null;
     this.panning = false;
@@ -237,6 +242,7 @@ class CrossDragPan extends PointerInteraction {
     this.navXDist = 0.5;
     this.navYSpeed = 1000;
     this.navYDist = 0.05;
+    this.filter = new KalmanFilter({R: 0.01, Q: 3});
   }
 }
 
diff --git a/ui/src/use.js b/ui/src/use.js
index c5727a1..d73c9b5 100644
--- a/ui/src/use.js
+++ b/ui/src/use.js
@@ -189,10 +189,11 @@ export function useNavigation({ index, count, apply }) {
       throw new Error("Unsupported parameter: " + offsetOrRegion);
     }
     if (nextIndex <= 0 || nextIndex > count.value) {
-      return;
+      return false;
     }
     seekIndex.value = nextIndex;
     debouncedSeek(nextIndex);
+    return true;
   }
 
   const debouncedSeek = debounce(1000, index => {

From 4fa0e2abdb449b3aab9476f4be1f60aa24fb9863 Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Wed, 7 Feb 2024 23:32:47 +0100
Subject: [PATCH 04/16] Fix date display on mobile

---
 ui/src/use.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/use.js b/ui/src/use.js
index d73c9b5..b12e4ad 100644
--- a/ui/src/use.js
+++ b/ui/src/use.js
@@ -381,7 +381,7 @@ export function useTimeline({ scene, viewport, scrollRatio }) {
     !scene?.value?.loading &&
     viewport?.height.value &&
     `/scenes/${scene.value.id}/dates?${qs.stringify({
-      height: viewport.height.value,
+      height: Math.round(viewport.height.value),
     })}`
   )
 

From 63f5295d238b1b1a67e88473e1ae77167f53536d Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sun, 11 Feb 2024 23:48:27 +0100
Subject: [PATCH 05/16] Add back map support, remove geoview from tileviewer

---
 ui/src/components/CollectionView.vue         |  60 +---
 ui/src/components/MapViewer.vue              | 101 +++++-
 ui/src/components/ScrollViewer.vue           |   3 +-
 ui/src/components/TileViewer.vue             | 355 +++++--------------
 ui/src/components/openlayers/CrossDragPan.js |  92 +----
 ui/src/components/openlayers/geoview.js      |  73 ++++
 6 files changed, 284 insertions(+), 400 deletions(-)
 create mode 100644 ui/src/components/openlayers/geoview.js

diff --git a/ui/src/components/CollectionView.vue b/ui/src/components/CollectionView.vue
index 7df0d15..77bbb0b 100644
--- a/ui/src/components/CollectionView.vue
+++ b/ui/src/components/CollectionView.vue
@@ -6,11 +6,12 @@
       :response="collectionResponse"
     ></response-loader>
 
-    <!-- <map-viewer
+    <map-viewer
       v-if="layout == 'MAP'"
       ref="mapViewer"
       :interactive="true"
       :collectionId="collectionId"
+      :regionId="regionId"
       :layout="layout"
       :sort="sort"
       :imageHeight="imageHeight"
@@ -22,10 +23,10 @@
       @scene="mapScene = $event"
       @search="onSearch"
     >
-    </map-viewer> -->
+    </map-viewer>
 
-    <!-- v-else -->
     <scroll-viewer
+      v-if="layout != 'MAP'"
       ref="scrollViewer"
       :interactive="true"
       :collectionId="collectionId"
@@ -46,48 +47,14 @@
     >
     </scroll-viewer>
     
-    <!-- v-if="region"
-    :region="region"
-    :scene="scene"
-    :tags-enabled="tagsSupported"
-      @navigate="navigate($event)"
-      @favorite="favorite($event)"
-      @exit="resetZoomOrExit()"
-      @add-tag="addTag($event)"
-      @remove-tag="removeTag($event)" -->
     <controls
       class="controls"
-      :region="lastScrollRegion"
+      :region="lastScrollRegion || lastMapRegion"
       :scene="scrollScene"
       @navigate="navigate($event)"
       @exit="exit()"
     ></controls>
 
-    <!-- <photo-frame
-      class="photoframe"
-      :view="lastView"
-    >
-
-    </photo-frame> -->
-
-    <!-- <strip-viewer
-      ref="stripViewer"
-      class="strip"
-      :class="{ visible: stripVisible }"
-      :interactive="stripVisible"
-      :collectionId="collectionId"
-      :sort="sort"
-      :regionId="transitionRegionId || regionId"
-      :search="search"
-      :debug="debug"
-      :screenView="stripView"
-      :fullpage="true"
-      @region="onStripRegion"
-      @scene="stripScene = $event"
-      @search="onSearch"
-    >
-    </strip-viewer> -->
-
   </div>
 </template>
 
@@ -97,8 +64,6 @@ import { timeout, useTask } from 'vue-concurrency';
 import { useRoute, useRouter } from 'vue-router';
 
 import ResponseLoader from './ResponseLoader.vue';
-import StripViewer from './StripViewer.vue';
-import PhotoFrame from './PhotoFrame.vue';
 import Controls from './Controls.vue';
 import ScrollViewer from './ScrollViewer.vue';
 import MapViewer from './MapViewer.vue';
@@ -126,9 +91,10 @@ const {
 } = toRefs(props);
 
 const scrollViewer = ref(null);
+const mapViewer = ref(null);
 const stripViewer = ref(null);
-const stripView = ref(null);
 const lastScrollRegion = ref(null);
+const lastMapRegion = ref(null);
 const lastStripRegion = ref(null);
 const lastView = ref(null);
 
@@ -141,11 +107,11 @@ const lastRegionId = ref(null);
 const transitionRegionId = ref(null);
 
 const navigate = computed(() => {
-  return scrollViewer.value?.navigate;
+  return (scrollViewer.value || mapViewer.value)?.navigate;
 });
 
 const exit = () => {
-  scrollViewer.value?.exit();
+  (scrollViewer.value || mapViewer.value)?.exit();
   lastView.value = null;
 }
 
@@ -320,16 +286,12 @@ const onScrollRegion = async (region) => {
 }
 
 const onMapRegion = async (region) => {
-  const stripRegion = await stripViewer.value?.getRegionIdFromFileId(region?.data?.id);
-  if (!stripRegion) {
-    console.error("No strip region found for", region);
-    return;
-  }
+  lastMapRegion.value = region;
   router.push({
     name: "region",
     params: {
       collectionId: collectionId.value,
-      regionId: stripRegion?.id,
+      regionId: region?.id,
     },
     query: route.query,
   });
diff --git a/ui/src/components/MapViewer.vue b/ui/src/components/MapViewer.vue
index bda84ac..f1b1889 100644
--- a/ui/src/components/MapViewer.vue
+++ b/ui/src/components/MapViewer.vue
@@ -10,11 +10,14 @@
       :interactive="interactive"
       :pannable="true"
       :zoomable="true"
+      :focus="!!region"
+      :crossNav="!!region"
       :geo="true"
+      :view="view"
       :zoom-transition="true"
       :viewport="viewport"
-      :geoview="geoview"
-      @geoview="onGeoview"
+      @nav="onNav"
+      @view="onView"
       @contextmenu.prevent="onContextMenu"
       @click="onClick"
     ></tile-viewer>
@@ -54,11 +57,12 @@ import ContextMenu from '@overcoder/vue-context-menu';
 import { computed, ref, toRefs, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { getRegions, useScene } from '../api';
-import { useContextMenu, useViewport } from '../use.js';
+import { useContextMenu, useSeekableRegion, useViewport } from '../use.js';
 import RegionMenu from './RegionMenu.vue';
 import Spinner from './Spinner.vue';
 import TileViewer from './TileViewer.vue';
 import { useEventBus } from '@vueuse/core';
+import Geoview from './openlayers/geoview.js';
 
 const props = defineProps({
   interactive: Boolean,
@@ -88,6 +92,7 @@ const emit = defineEmits({
 const {
   interactive,
   collectionId,
+  regionId,
   layout,
   sort,
   imageHeight,
@@ -115,6 +120,16 @@ const { scene, recreate: recreateScene, loadSpeed } = useScene({
   search,
 });
 
+const {
+  region,
+  navigate,
+  exit: regionExit,
+} = useSeekableRegion({
+  scene,
+  collectionId,
+  regionId,
+})
+
 useEventBus("recreate-scene").on(scene => {
   if (scene?.name && scene?.name != "Map") return;
   recreateScene();
@@ -146,18 +161,29 @@ const geoview = computed(() => {
   if (zstr.endsWith("z")) {
     zstr = zstr.slice(0, -1);
   }
-
+  
   const lat = parseFloat(latstr);
   const lon = parseFloat(lonstr);
   const z = parseFloat(zstr);
   if (isNaN(lat) || isNaN(lon) || isNaN(z)) return;
   const geoview = [lon, lat, z];
+
   return geoview;
 });
 
-const applyGeoview = (geoview) => {
+const geoviewView = computed(() => {
+  const view = Geoview.toView(geoview.value, scene.value?.bounds);
+  return view;
+});
+
+const view = computed(() => {
+  if (region.value) return region.value.bounds;
+  return geoviewView.value;
+});
+
+const applyGeoview = async (geoview) => {
   const [lon, lat, z] = geoview;
-  router.replace({
+  await router.replace({
     query: {
       ...router.currentRoute.value.query,
       p: `${lat.toFixed(7)},${lon.toFixed(7)},${z.toFixed(2)}z`,
@@ -165,10 +191,62 @@ const applyGeoview = (geoview) => {
   });
 }
 
-const debouncedApplyGeoview = debounce(1000, applyGeoview);
+const applyView = (view) => {
+  const pg = geoview.value;
+  const g = Geoview.fromView(view, scene.value?.bounds);
+  
+  if (Geoview.equal(g, pg)) return;
+  applyGeoview(g);
+}
+
+const debouncedApplyView = debounce(1000, applyView);
+
+const onView = (view) => {
+  debouncedApplyView(view);
+  lastView.value = view;
+}
+
+const lastView = ref(null);
 
-const onGeoview = (geoview) => {
-  debouncedApplyGeoview(geoview);
+const exit = async () => {
+  if (!region.value) {
+    return;
+  }
+  const g = Geoview.fromView(lastView.value, scene.value?.bounds);
+  await applyGeoview(g);
+  await regionExit();
+}
+
+const externalExit = async () => {
+  if (!region.value) {
+    return;
+  }
+  const g = Geoview.fromView(view.value, scene.value?.bounds);
+  await applyGeoview([
+    g[0],
+    g[1],
+    Math.max(1, g[2] - 3),
+  ])
+  await regionExit();
+}
+
+const onNav = async (event) => {
+  if (event.x) {
+    const valid = await navigate(event.x);
+    if (!valid) {
+      viewer.value?.setPendingTransition({
+        t: 0.5,
+        x: lastView.value?.x,
+        ease: "out",
+      });
+      zoomOut();
+    }
+    return;
+  }
+  if (event.zoom < 0) {
+    await exit();
+    return;
+  }
 }
 
 const onClick = async (event) => {
@@ -182,6 +260,11 @@ const onClick = async (event) => {
   return false;
 }
 
+defineExpose({
+  navigate,
+  exit: externalExit,
+})
+
 </script>
 
 <style scoped>
diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 73ff1f2..cdcad66 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -7,7 +7,6 @@
       :style="{ transform: `translate(0, ${scrollY}px)` }"
       :scene="scene"
       :view="view"
-      :clipview="region?.bounds"
       :selectTagId="selectTagId"
       :debug="debug"
       :tileSize="512"
@@ -15,6 +14,8 @@
       :pannable="!nativeScroll"
       :zoomable="!nativeScroll"
       :zoom-transition="true"
+      :focus="!!region"
+      :crossNav="!!region"
       :viewport="viewport"
       @click="onClick"
       @view="onView"
diff --git a/ui/src/components/TileViewer.vue b/ui/src/components/TileViewer.vue
index 6df8e01..c9b97f9 100644
--- a/ui/src/components/TileViewer.vue
+++ b/ui/src/components/TileViewer.vue
@@ -26,23 +26,18 @@ import { easeIn, easeOut, linear } from 'ol/easing';
 import { defaults as defaultInteractions, DragBox, DragPan, MouseWheelZoom } from 'ol/interaction';
 import { defaults as defaultControls } from 'ol/control';
 import {MAC} from 'ol/src/has.js';
+import Kinetic from 'ol/Kinetic';
+import { get as getProjection } from 'ol/proj';
+import { getBottomLeft, getTopLeft, getTopRight, getBottomRight } from 'ol/extent';
+
 import equal from 'fast-deep-equal';
 import CrossDragPan from './openlayers/CrossDragPan';
+import Geoview from './openlayers/geoview.js';
 
 import PhotoSkeleton from './PhotoSkeleton.vue';
 
 import "ol/ol.css";
 import { getTileUrl } from '../api';
-import Kinetic from 'ol/Kinetic';
-import { toLonLat, get as getProjection, fromLonLat } from 'ol/proj';
-import { getBottomLeft, getTopLeft, getTopRight, getBottomRight } from 'ol/extent';
-import VectorLayer from 'ol/layer/Vector';
-import VectorSource from 'ol/source/Vector';
-import { Polygon } from 'ol/geom';
-import Feature from 'ol/Feature';
-import Style from 'ol/style/Style';
-import Fill from 'ol/style/Fill';
-import { watchEffect } from 'vue';
 
 
 function ctrlWithMaybeShift(mapBrowserEvent) {
@@ -76,12 +71,13 @@ export default {
     tileSize: Number,
     view: Object,
     clipview: Object,
+    crossNav: Boolean,
+    focus: Boolean,
     backgroundColor: String,
     selectTagId: String,
     debug: Object,
     loading: Boolean,
     geo: Boolean,
-    geoview: Array,
     viewport: Object,
   },
 
@@ -90,7 +86,6 @@ export default {
     "click",
     "pointer-down",
     "view",
-    "geoview",
     "move-end",
     "reset",
     "load-end",
@@ -104,15 +99,13 @@ export default {
     return {
       viewer: null,
       maxZoom: 30,
-      clipviewZoom: 1,
+      focusZoom: 0,
     }
   },
   async created() {
   },
   async mounted() {
     this.latestView = null;
-    this.lastClipview = null;
-    this.clipviewChangeTime = 0;
     this.lastAnimationTime = 0;
     this.reset();
   },
@@ -134,6 +127,12 @@ export default {
       }
     },
 
+    geo(newGeo, oldGeo) {
+      if (newGeo != oldGeo) {
+        this.reset();
+      }
+    },
+
     tileSize() {
       this.reset();
     },
@@ -164,25 +163,6 @@ export default {
       }
     },
 
-    geoview: {
-      immediate: true,
-      handler(geoview) {
-        if (!geoview) return;
-        if (
-          this.lastGeoview &&
-          Math.abs(geoview[0] - this.lastGeoview[0]) < 1e-4 &&
-          Math.abs(geoview[1] - this.lastGeoview[1]) < 1e-4 &&
-          Math.abs(geoview[2] - this.lastGeoview[2]) < 1e-1
-        ) {
-          // Geoview is already close enough, nothing to do.
-          // This usually happens after the geoview is applied
-          // to the url and then the url is read back.
-          return;
-        }
-        this.setGeoview(geoview);
-      }
-    },
-
     kinetic(kinetic) {
       this.setKinetic(kinetic);
     },
@@ -191,9 +171,11 @@ export default {
       this.setView(view);
     },
 
-    clipview() {
-      this.clipviewChangeTime = Date.now();
-      // this.setCrossPanActive(!!this.clipview);
+    geoLayersActive(active) {
+      this.map.getLayers().forEach(layer => {
+        if (!layer.get("geo")) return;
+        layer.setVisible(active);
+      });
     },
 
     crossPanActive: {
@@ -236,11 +218,17 @@ export default {
       return [-width*0.95, -height, width*1.95, height];
     },
     crossPanActive() {
-      return this.clipview && this.clipviewZoom < 1.1;
+      return this.crossNav && this.focusZoom < 1.1;
     },
     dragPanActive() {
       return this.pannable && !this.crossPanActive;
     },
+    geoLayersActive() {
+      if (!this.geo) return false;
+      if (!this.focus) return true;
+
+      return this.focusZoom < 0.99;
+    },
     minViewportZoom() {
       if (!this.v || !this.viewport.width.value) {
         return 0;
@@ -313,57 +301,13 @@ export default {
         });
       }
 
-      
-      main.on("prerender", event => {
-        // Clip to the top left square
-        const ctx = event.context;
-        const size = this.map.getSize();
-        // const view = this.map.getView();
-        // const extent = view.calculateExtent(size);
-        const view = this.clipview;
-        if (!view) return;
-        
-        // const corners = this.pixelCornersFromView(view);
-        // const pixelRatio = window.devicePixelRatio;
-        // corners.tl[0] *= pixelRatio;
-        // corners.tl[1] *= pixelRatio;
-        // corners.tr[0] *= pixelRatio;
-        // corners.tr[1] *= pixelRatio;
-        // corners.br[0] *= pixelRatio;
-        // corners.br[1] *= pixelRatio;
-        // corners.bl[0] *= pixelRatio;
-        // corners.bl[1] *= pixelRatio;
-
-        // ctx.save();
-        // ctx.rect(
-        //   corners.tl[0],
-        //   corners.tl[1],
-        //   corners.tr[0] - corners.tl[0],
-        //   corners.bl[1] - corners.tl[1],
-        // );
-        // ctx.clip();
-
-        // ctx.strokeStyle = "green";
-        // ctx.lineWidth = 20;
-        // // ctx.beginPath();
-        
-        // ctx.strokeRect(
-        //   corners.tl[0],
-        //   corners.tl[1],
-        //   corners.tr[0] - corners.tl[0],
-        //   corners.bl[1] - corners.tl[1],
-        // );
-
-        // Highlight the view instead
-      });
-
       main.on("postrender", event => {
+        if (!this.focus) return;
+
         const ctx = event.context;
-        const view = this.clipview;
+        const view = this.view;
         if (!view) return;
 
-        // ctx.restore();
-        
         const size = this.map.getSize();
         const corners = this.pixelCornersFromView(view);
         const pixelRatio = window.devicePixelRatio;
@@ -378,29 +322,12 @@ export default {
         corners.bl[0] *= pixelRatio;
         corners.bl[1] *= pixelRatio;
 
-        const animFrac = 
-          this.lastAnimationTime ?
-            Math.max(0, Math.min(1, (Date.now() - this.clipviewChangeTime) / (this.lastAnimationTime*1000))) :
-            1;
-        
-        const latestZoom = this.zoomFromView(this.latestView);
-        const zoom = this.zoomFromView(view);
-        const zoomFrac = Math.min(1, latestZoom/zoom + 1e-4);
-        
-        const mapExtent = this.v.getProjection().getExtent();
-        const mapRes = this.v.getResolutionForExtent([
-          0,
-          0,
-          mapExtent[2],
-          mapExtent[2],
-        ]);
         const viewExtent = this.extentFromView(view);
         const viewRes = this.v.getResolutionForExtent(viewExtent);
+        const refRes = viewRes * 3;
         const res = this.v.getResolution();
-        const resFrac = 1 - Math.min(1, (res - viewRes) / (mapRes - viewRes));
-        // console.log(resFrac)
-
-        // const alpha = animFrac * resFrac;
+        const resFrac = 1 - Math.min(1, (res - viewRes) / (refRes - viewRes));
+        
         const alpha = resFrac;
 
         const e = 1;
@@ -431,32 +358,12 @@ export default {
 
       const main = this.createMainLayer();
 
-      // const clip = new VectorLayer({
-      //   source: new VectorSource({
-      //     features: [
-      //       new Feature({
-      //         geometry: new Polygon([
-      //           [
-      //             [0, 0],
-      //             [0, 5.5e11],
-      //             [2e11, 2e11],
-      //             [2e11, 0],
-      //             [0, 0],
-      //           ],
-      //         ]),
-      //       }),
-      //     ],
-      //   }),
-      //   style: new Style({
-      //     fill: new Fill({
-      //       color: "rgba(0, 0, 0, 0.5)",
-      //     }),
-      //   }),
-      // });
-
       if (this.geo) {
 
         const mask = new TileLayer({
+          properties: {
+            geo: true,
+          },
           preload: 2,
           source: new XYZ({
             tileUrlFunction: this.maskUrlFunction,
@@ -469,6 +376,9 @@ export default {
         });
 
         const osmLayer = new TileLayer({
+          properties: {
+            geo: true,
+          },
           preload: 2,
           source: new OSM({
             attributions: [
@@ -504,17 +414,6 @@ export default {
     },
 
     initOpenLayers(element) {
-
-      if (this.geo) {
-        this.projection = getProjection("EPSG:3857");
-      } else {
-        this.projection = new Projection({
-          code: "tiles",
-          units: "pixels",
-          extent: this.projectionExtent,
-        });
-      }
-
       // Limit minimum size loaded to avoid
       // loading tiled images with very little content
       // let minZoom = 0;
@@ -528,7 +427,9 @@ export default {
       // }
 
       const dragPan = new DragPan();
-      const crossPan = new CrossDragPan();
+      const crossPan = new CrossDragPan({
+        centerZoom: this.geo,
+      });
       crossPan.on("nav", event => {
         this.onNav(event);
       });
@@ -560,17 +461,19 @@ export default {
       this.mouseWheelZoom.setActive(this.zoomable);
 
       if (this.geo) {
+        this.projection = getProjection("EPSG:3857");
         this.v = new View({
           projection: this.projection,
-          center: this.pendingGeoview ?
-            this.geoviewToCenter(this.pendingGeoview) :
-            [0, 0],
-          zoom: this.pendingGeoview ?
-            this.geoviewToZoom(this.pendingGeoview) :
-            2,
+          center: [0, 0],
+          zoom: 0,
           enableRotation: false,
         });
       } else {
+        this.projection = new Projection({
+          code: "tiles",
+          units: "pixels",
+          extent: this.projectionExtent,
+        });
         const extent = this.viewExtent;
         this.v = new View({
           center: [extent[2]/2, extent[3]],
@@ -660,7 +563,7 @@ export default {
       const visibleExtent = this.v.calculateExtent(this.map.getSize());
       const view = this.viewFromExtent(visibleExtent);
       if (!view) return;
-      if (this.clipview) {
+      if (this.crossNav) {
         this.navOnZoom();
         return;
       }
@@ -677,11 +580,6 @@ export default {
       if (!view) return;
       this.latestView = view;
       this.$emit("view", view);
-      if (this.geo) {
-        const geoview = this.getGeoview();
-        this.lastGeoview = geoview;
-        this.$emit("geoview", geoview);
-      }
     },
 
     onResolutionChange(event) {
@@ -690,16 +588,11 @@ export default {
       if (!view) return;
       this.latestView = view;
       this.$emit("view", view);
-      if (this.geo) {
-        const geoview = this.getGeoview();
-        this.lastGeoview = geoview;
-        this.$emit("geoview", geoview);
-      }
-      if (this.clipview) {
-        const clipzoom = this.zoomFromView(this.clipview);
+      if (this.focus) {
+        const focuszoom = this.zoomFromView(this.view);
         const viewzoom = this.zoomFromView(view);
-        const ratio = viewzoom / clipzoom;
-        this.clipviewZoom = ratio;
+        const ratio = viewzoom / focuszoom;
+        this.focusZoom = ratio;
       }
     },
 
@@ -716,8 +609,8 @@ export default {
         // const dx = 1;
         const t = 150 / Math.abs(event.x);
         // const t = 1;
-        const cx = this.clipview.x;
-        const cw = this.clipview.w;
+        const cx = this.view.x;
+        const cw = this.view.w;
         const vx = this.latestView.x;
         const vw = this.latestView.w;
         const hideFrac = (2*(cx - vx) + cw - vw) / (cw + vw);
@@ -738,9 +631,9 @@ export default {
           const hideX = cx + (cw + vw) * 0.5 * dx;
           this.setView({
             x: hideX,
-            y: this.clipview.y,
-            w: this.clipview.w,
-            h: this.clipview.h,
+            y: this.view.y,
+            w: this.view.w,
+            h: this.view.h,
           }, {
             animationTime: hideT,
             ease: "linear",
@@ -765,7 +658,7 @@ export default {
     },
 
     navOnZoom() {
-      const ratio = this.clipviewZoom;
+      const ratio = this.focusZoom;
       if (Math.abs(1 - ratio) < 1e-4) {
         return;
       }
@@ -857,61 +750,14 @@ export default {
       return this.viewFromCoordinate(coord);
     },
 
-    extentFromView(view) {
-      if (!this.scene) throw new Error("Scene not found");
-      const fullExtent = this.projection.getExtent();
-      const fw = fullExtent[2] - fullExtent[0];
-      const fh = fullExtent[3] - fullExtent[1];
-      const sx = fw / this.scene.bounds.w;
-      const sy = fh / this.scene.bounds.h;
-      const tx = view.x * sx;
-      const ty = fh - view.y * sy;
-      const tw = view.w * sx;
-      const th = view.h * sy;
-      return [tx, ty-th, tx+tw, ty];
-    },
-
     zoomFromView(view) {
       if (!view || !this.map) return null;
+
       const vw = view.w;
       const vh = view.h;
-      // const sw = this.scene.bounds.w;
-      // const sh = this.scene.bounds.h;
       const [mw, mh] = this.map.getSize();
       const zw = mw / vw;
       const zh = mh / vh;
-
-      // func (rect Rect) FitInside(container Rect) (out Rect) {
-      // 	imageRatio := rect.W / rect.H
-
-      // 	var scale float64
-      // 	if container.W/container.H < imageRatio {
-      // 		scale = container.W / rect.W
-      // 	} else {
-      // 		scale = container.H / rect.H
-      // 	}
-
-      // 	out.W = rect.W * scale
-      // 	out.H = rect.H * scale
-      // 	out.X = container.X + (container.W-out.W)*0.5
-      // 	out.Y = container.Y + (container.H-out.H)*0.5
-      // 	return out
-      // }
-
-      // const viewAspect = vw / vh;
-      // const mapAspect = mw / mh;
-      // const mapScale = mapAspect < viewAspect ? mw / vw : mh / vh;
-
-      // const sceneAspect = sw / sh;
-      // const sceneScale = sceneAspect < 1 ? sw / vw : sh / vh;
-
-      // const viewport = this.viewport;
-      // const [vpw, vph] = [viewport.width.value, viewport.height.value];
-      // const vpAspect = vpw / vph;
-      // const vpScale = vpAspect < viewAspect ? vpw / vw : vph / vh;
-
-      // // console.log({ vw, vh, sw, sh, zw, zh, min: Math.min(zw, zh), scale })
-      // console.log({ min: Math.min(zw, zh), mapScale, sceneScale, vpScale })
       return Math.min(zw, zh);
     },
 
@@ -928,18 +774,29 @@ export default {
       const fh = fullExtent[3] - fullExtent[1];
       const sx = this.scene.bounds.w / fw;
       const sy = this.scene.bounds.h / fh;
-      const tx = extent[0];
-      const ty = extent[3];
-      const tw = extent[2]-tx;
-      const th = ty-extent[1];
       return {
-        x: tx * sx,
-        y: (fh-ty)*sy,
-        w: tw * sx,
-        h: th * sy,
+        x: (extent[0] - fullExtent[0]) * sx,
+        y: (fullExtent[3] - extent[3]) * sy,
+        w: (extent[2] - extent[0]) * sx,
+        h: (extent[3] - extent[1]) * sy,
       }
     },
 
+    extentFromView(view) {
+      if (!this.scene) throw new Error("Scene not found");
+      const fullExtent = this.projection.getExtent();
+      const fw = fullExtent[2] - fullExtent[0];
+      const fh = fullExtent[3] - fullExtent[1];
+      const sx = fw / this.scene.bounds.w;
+      const sy = fh / this.scene.bounds.h;
+      return [
+        fullExtent[0] + view.x * sx,
+        fullExtent[3] - (view.y + view.h) * sy,
+        fullExtent[0] + (view.x + view.w) * sx,
+        fullExtent[3] - view.y * sy,
+      ];
+    },
+
     viewFromCoordinate(coord) {
       if (!this.scene) return null;
       const fullExtent = this.projection.getExtent();
@@ -989,39 +846,6 @@ export default {
       this.pendingTransition = t;
     },
 
-    getGeoview() {
-      const center = toLonLat(this.v.getCenter());
-      const zoom = this.v.getZoom();
-      return [center[0], center[1], zoom];
-    },
-
-    setGeoview(geoview) {
-      this.lastGeoview = geoview;
-      if (!this.map) {
-        console.info("Map not initialized yet, setting pending geoview", geoview);
-        this.pendingGeoview = geoview;
-        return;
-      }
-      this.v.setCenter(this.geoviewToCenter(geoview));
-      this.v.setZoom(this.geoviewToZoom(geoview));
-    },
-
-    geoviewToCenter(geoview) {
-      return fromLonLat(geoview.slice(0, 2));
-    },
-
-    geoviewToZoom(geoview) {
-      return geoview[2];
-    },
-
-    // setCrossPanActive(active) {
-    //   // this.dragPan.setActive(this.pannable && !active);
-    //   // this.crossPan.setActive(active);
-    //   // Initially false
-    //   // on clipview this.setCrossPanActive(!!this.clipview);
-      
-    // },
-
     setView(view, options) {
 
       if (!this.map) {
@@ -1070,30 +894,25 @@ export default {
       }
       
       if (this.zoomTransition && this.latestView) {
-        const prevZoom = this.zoomFromView(this.latestView);
-        const zoom = this.zoomFromView(view);
+        const prevZoom = Geoview.fromView(this.latestView, this.scene.bounds)[2];
+        const zoom = Geoview.fromView(view, this.scene.bounds)[2];
         const zoomDiff = Math.abs(zoom - prevZoom);
 
-        const skipClipTransition =
-          this.lastClipview &&
-          this.latestView.x == this.lastClipview.x &&
-          this.latestView.y == this.lastClipview.y &&
-          this.latestView.w == this.lastClipview.w &&
-          this.latestView.h == this.lastClipview.h;
-          
-        if (zoomDiff > 1e-4 && !options && !skipClipTransition) {
+        if (zoomDiff > 1e-4 && !options) {
           // console.log(zoomDiff)
           // const t = zoomDiff * 0.05;
           // const t = zoomDiff * 0.2;
           // const t = zoomDiff * 1;
-          const t = Math.pow(zoomDiff, 0.5) * 0.08;
+          // const t = Math.pow(zoomDiff, 0.5) * 0.08;
+          // const t = Math.pow(zoomDiff, 0.5) * 0.2;
+          // const t = Math.pow(zoomDiff, 2) * 0.01;
+          const t = Math.pow(zoomDiff, 0.8) * 0.1;
           // const t = Math.pow(zoomDiff, 1.5) * 0.08;
           options = { animationTime: t }
         }
       }
 
       this.latestView = view;
-      this.lastClipview = this.clipview;
       if (this.pendingAnimationTime && !options) {
         options = { animationTime: this.pendingAnimationTime }
       }
diff --git a/ui/src/components/openlayers/CrossDragPan.js b/ui/src/components/openlayers/CrossDragPan.js
index 0a20e7f..3333c9b 100644
--- a/ui/src/components/openlayers/CrossDragPan.js
+++ b/ui/src/components/openlayers/CrossDragPan.js
@@ -10,7 +10,7 @@ const Axis = {
   Y: 2,
 }
 class CrossDragPan extends PointerInteraction {
-  constructor() {
+  constructor(options = {}) {
     super({
       handleDownEvent: (event) => {
         this.center = event.map.getView().getCenter();
@@ -48,7 +48,6 @@ class CrossDragPan extends PointerInteraction {
         ];
         this.delta = delta.slice();
         
-        // const time = event.frameState.time;
         const time = Date.now();
         if (this.lastEventTime) {
           const dt = time - this.lastEventTime;
@@ -88,79 +87,27 @@ class CrossDragPan extends PointerInteraction {
             scaleCoordinate(delta, view.getResolution());
             rotateCoordinate(delta, view.getRotation());
 
-            // const mapExtent = view.getProjection().getExtent();
-            // const viewExtent = view.calculateExtent();
-            // const zoomedOutExtent = [
-            //   0,
-            //   0,
-            //   mapExtent[2],
-            //   mapExtent[3] * 3,
-            // ]
-            // // const outZoom = (mapExtent[2] - mapExtent[0]) / (viewExtent[2] - viewExtent[0]);
-            // const zoom = view.getZoom();
-            // let frac = 1 - (zoom - 7.417) / (this.zoom - 7.417);
-            // frac *= frac;
-            // // const mapZoom = view.getZoomForResolution(view.getResolutionForExtent(mapExtent))
-            // console.log(this.zoom, zoom, frac);
-
-            // const topLeft = getTopLeft(mapExtent);
-            // const topRight = getTopRight(mapExtent);
-            // const width = topRight[0] - topLeft[0];
-            // const center = width * 0.5;
-            // const x = this.center[0] * (1 - frac) + center * frac;
-
-            // view.setCenterInternal([
-            //   x,
-            //   this.center[1],
-            // ]);
-            // const zoom = this.zoom - delta[1] * 1e-4;
-            // view.setZoom(zoom);
-            // const pix = map.getPixelFromCoordinateInternal(delta);
-            
             const resolution = this.resolution * Math.max(1, 1 + dy * 0.01);
-            // console.log(this.resolution, resolution, pix);
-            // console.log(map.getPixelFromCoordinate(this.center));
-            // console.log(map.getPixelFromCoordinate(centroid));
-            // console.log(base[1] - centroid[1]);
             view.setResolution(resolution);
 
-            const mapExtent = view.getProjection().getExtent();
-            // const mapRes = view.getResolutionForExtent(mapExtent);
-            const mapRes = view.getResolutionForExtent([
-              0,
-              0,
-              mapExtent[2],
-              mapExtent[2],
-            ]);
-            const frac = Math.min(1, (resolution - this.resolution) / (mapRes - this.resolution));
-            // console.log(mapRes, this.resolution, resolution, mapRes / resolution);
-            // console.log(frac);
-            
-            const topLeft = getTopLeft(mapExtent);
-            const topRight = getTopRight(mapExtent);
-            const bottomLeft = getBottomLeft(mapExtent);
-            const bottomRight = getBottomRight(mapExtent);
-            const width = topRight[0] - topLeft[0];
-            const height = bottomLeft[1] - topLeft[1];
-
-            const x = this.center[0] * (1 - frac) + (width * 0.5) * frac;
-            const y = this.center[1] * (1 - frac) + (height) * frac;
-            
-            view.setCenterInternal([
-              x,
-              this.center[1],
-            ]);
-
-            // const zoomedOutCenter = [
-            //   this.center[0] + width * 1,
-            //   this.center[1],
-            // ];
-            // view.adjustResolution(Math.max(1, 1 - dy * 0.0005));
-            // const dres = 1 - dy * 0.0005;
-            // view.adjustResolution(dres, zoomedOutCenter);
-            // console.log(mapExtent);
-            // console.log(viewExtent);
-            // console.log(view.calculateExtentInternal())
+            if (!options.centerZoom) {
+              const mapExtent = view.getProjection().getExtent();
+              const mapRes = view.getResolutionForExtent([
+                0,
+                0,
+                mapExtent[2],
+                mapExtent[2],
+              ]);
+              const frac = Math.min(1, (resolution - this.resolution) / (mapRes - this.resolution));
+              const topLeft = getTopLeft(mapExtent);
+              const topRight = getTopRight(mapExtent);
+              const width = topRight[0] - topLeft[0];
+              const x = this.center[0] * (1 - frac) + (width * 0.5) * frac;
+              view.setCenterInternal([
+                x,
+                this.center[1],
+              ]);
+            }
             break;
         }
 
@@ -195,7 +142,6 @@ class CrossDragPan extends PointerInteraction {
               const dy = this.delta[1] + this.velocity[1]*this.navYSpeed;
               const minh = map.getSize()[1] * this.navYDist;
               const y = dy < -minh ? 1 : dy > minh ? -1 : 0;
-              console.log("delta", this.delta[1], "velocity", this.velocity[1], "dy", dy, "minh", minh, "y", y);
               if (y !== 0) {
                 this.dispatchEvent({
                   type: 'nav',
diff --git a/ui/src/components/openlayers/geoview.js b/ui/src/components/openlayers/geoview.js
new file mode 100644
index 0000000..eecbca2
--- /dev/null
+++ b/ui/src/components/openlayers/geoview.js
@@ -0,0 +1,73 @@
+import { get as getProjection, fromLonLat, toLonLat } from 'ol/proj';
+
+const proj = getProjection("EPSG:3857");
+
+function toView(geoview, sceneBounds) {
+  if (!geoview || !sceneBounds) return null;
+
+  const coord = fromLonLat(geoview, proj);
+  const zoom = geoview[2];
+  const fullExtent = proj.getExtent();
+  const fw = fullExtent[2] - fullExtent[0];
+  const fh = fullExtent[3] - fullExtent[1];
+  const sx = sceneBounds.w / fw;
+  const sy = sceneBounds.h / fh;
+
+  const power = Math.pow(2, zoom);
+  const sw = fw / power;
+  const sh = fh / power;
+  const extent = [
+    coord[0] - sw,
+    coord[1] - sh,
+    coord[0] + sw,
+    coord[1] + sh,
+  ];
+  return {
+    x: (extent[0] - fullExtent[0]) * sx,
+    y: (fullExtent[3] - extent[3]) * sy,
+    w: (extent[2] - extent[0]) * sx,
+    h: (extent[3] - extent[1]) * sy,
+  };
+}
+
+function fromView(view, sceneBounds) {
+  if (!view || !sceneBounds) return null;
+
+  const fullExtent = proj.getExtent();
+  const fw = fullExtent[2] - fullExtent[0];
+  const fh = fullExtent[3] - fullExtent[1];
+  const sx = sceneBounds.w / fw;
+  const sy = sceneBounds.h / fh;
+
+  const extent = [
+    view.x / sx + fullExtent[0],
+    fullExtent[3] - view.y / sy,
+    (view.x + view.w) / sx + fullExtent[0],
+    fullExtent[3] - (view.y + view.h) / sy,
+  ];
+  const center = [
+    (extent[0] + extent[2]) / 2,
+    (extent[1] + extent[3]) / 2,
+  ];
+  const sw = (extent[2] - extent[0]) * 0.5;
+  const sh = (extent[1] - extent[3]) * 0.5;
+  const power = Math.max(fw / sw, fh / sh);
+  const zoom = Math.log2(power);
+  const lonlat = toLonLat(center, proj);
+  return [lonlat[0], lonlat[1], zoom];
+}
+
+function equal(a, b) {
+  if (!a || !b) return false;
+  return (
+    Math.abs(a[0] - b[0]) < 1e-4 &&
+    Math.abs(a[1] - b[1]) < 1e-4 &&
+    Math.abs(a[2] - b[2]) < 1e-1
+  );
+}
+
+export default {
+  toView,
+  fromView,
+  equal,
+};
\ No newline at end of file

From 2cb0e1c7220d650a6eddcb47fecc9a147251f736 Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Mon, 12 Feb 2024 00:50:15 +0100
Subject: [PATCH 06/16] Small bug fixes and polish

---
 ui/src/components/MapViewer.vue    | 20 +++++++++++++++++---
 ui/src/components/ScrollViewer.vue |  2 +-
 ui/src/components/TileViewer.vue   | 19 ++++++++++++++-----
 3 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/MapViewer.vue b/ui/src/components/MapViewer.vue
index f1b1889..6dd8ab6 100644
--- a/ui/src/components/MapViewer.vue
+++ b/ui/src/components/MapViewer.vue
@@ -14,7 +14,7 @@
       :crossNav="!!region"
       :geo="true"
       :view="view"
-      :zoom-transition="true"
+      :zoom-transition="regionTransition"
       :viewport="viewport"
       @nav="onNav"
       @view="onView"
@@ -104,6 +104,8 @@ const {
 const viewer = ref(null);
 const viewport = useViewport(viewer);
 
+const regionTransition = ref(false);
+
 // Maps are always a square,
 // so the layout is viewport-independent
 const staticViewport = {
@@ -142,6 +144,10 @@ watch(scene, async (newScene, oldScene) => {
   emit("scene", newScene);
 });
 
+watch(region, async (newRegion, oldRegion) => {
+  regionTransition.value = !!((!newRegion && oldRegion) || (newRegion && !oldRegion));
+});
+
 const contextMenu = ref(null);
 const {
   onContextMenu,
@@ -177,11 +183,14 @@ const geoviewView = computed(() => {
 });
 
 const view = computed(() => {
-  if (region.value) return region.value.bounds;
+  if (region.value) {
+    return region.value.bounds;
+  }
   return geoviewView.value;
 });
 
 const applyGeoview = async (geoview) => {
+  if (!geoview) return;
   const [lon, lat, z] = geoview;
   await router.replace({
     query: {
@@ -230,13 +239,17 @@ const externalExit = async () => {
   await regionExit();
 }
 
+const zoomOut = () => {
+  viewer.value?.setView(view.value);
+}
+
 const onNav = async (event) => {
   if (event.x) {
     const valid = await navigate(event.x);
     if (!valid) {
       viewer.value?.setPendingTransition({
         t: 0.5,
-        x: lastView.value?.x,
+        x: (lastView.value?.x - view.value?.x) / 2,
         ease: "out",
       });
       zoomOut();
@@ -247,6 +260,7 @@ const onNav = async (event) => {
     await exit();
     return;
   }
+  zoomOut();
 }
 
 const onClick = async (event) => {
diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index cdcad66..041bff3 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -446,7 +446,7 @@ const onNav = async (event) => {
     if (!valid) {
       viewer.value?.setPendingTransition({
         t: 0.5,
-        x: lastView.value?.x,
+        x: (lastView.value?.x - view.value?.x) / 2,
         ease: "out",
       });
       zoomOut();
diff --git a/ui/src/components/TileViewer.vue b/ui/src/components/TileViewer.vue
index c9b97f9..ce7a374 100644
--- a/ui/src/components/TileViewer.vue
+++ b/ui/src/components/TileViewer.vue
@@ -3,7 +3,7 @@
     class="container"
     ref="container"
     :style="{ backgroundColor }"
-    :class="{ interactive }"
+    :class="{ interactive, focus }"
     tabindex="1"
   >
     <div class="tileViewer" ref="map"></div>
@@ -99,7 +99,7 @@ export default {
     return {
       viewer: null,
       maxZoom: 30,
-      focusZoom: 0,
+      focusZoom: 1,
     }
   },
   async created() {
@@ -593,6 +593,8 @@ export default {
         const viewzoom = this.zoomFromView(view);
         const ratio = viewzoom / focuszoom;
         this.focusZoom = ratio;
+      } else {
+        this.focusZoom = 0;
       }
     },
 
@@ -655,6 +657,10 @@ export default {
         this.navOnZoom(event);
         return;
       }
+      this.setView(this.view, {
+        animationTime: 0.3,
+        ease: "out",
+      });
     },
 
     navOnZoom() {
@@ -937,11 +943,10 @@ export default {
         this.v.cancelAnimations();
       }
 
-      this.lastAnimationTime = options?.animationTime || 0;
-      
+      this.lastAnimationTime = options?.animationTime || 0;      
       
       const fitOpts = options ? {
-        duration: options.animationTime*1000,
+        duration: (options.animationTime || 0)*1000,
         easing:
           options.ease == "in" ? easeIn :
           options.ease == "out" ? easeOut :
@@ -982,6 +987,10 @@ export default {
   /* padding-top: 60px; */
 }
 
+.container.focus {
+  background: black;
+}
+
 .interactive {
   cursor: pointer;
 }

From 900d34660c53a14fefadc1f116a4c5119e74ba1c Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Mon, 12 Feb 2024 01:02:35 +0100
Subject: [PATCH 07/16] Fix left/right nav transition for scroll, more bg color
 polish

---
 ui/src/components/ScrollViewer.vue |  7 ++++++-
 ui/src/components/TileViewer.vue   | 10 ++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 041bff3..6a07425 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -13,7 +13,7 @@
       :interactive="interactive"
       :pannable="!nativeScroll"
       :zoomable="!nativeScroll"
-      :zoom-transition="true"
+      :zoom-transition="regionTransition"
       :focus="!!region"
       :crossNav="!!region"
       :viewport="viewport"
@@ -158,6 +158,11 @@ const {
   regionId,
 })
 
+const regionTransition = ref(false);
+watch(region, async (newRegion, oldRegion) => {
+  regionTransition.value = !!((!newRegion && oldRegion) || (newRegion && !oldRegion));
+});
+
 const exit = async () => {
   // const viewZoom = viewer.value.zoomFromView(view.value);
   // const moveZoom = viewer.value.zoomFromView(lastView.value);
diff --git a/ui/src/components/TileViewer.vue b/ui/src/components/TileViewer.vue
index ce7a374..a1f011b 100644
--- a/ui/src/components/TileViewer.vue
+++ b/ui/src/components/TileViewer.vue
@@ -2,8 +2,8 @@
   <div
     class="container"
     ref="container"
-    :style="{ backgroundColor }"
-    :class="{ interactive, focus }"
+    :style="{ backgroundColor: containerBackgroundColor }"
+    :class="{ interactive }"
     tabindex="1"
   >
     <div class="tileViewer" ref="map"></div>
@@ -241,6 +241,12 @@ export default {
       });
       return this.v.getZoomForResolution(this.v.getResolutionForExtent(extent));
     },
+    containerBackgroundColor() {
+      return this.backgroundColor || (
+        this.focus && this.focusZoom > 0.99 ?
+          "black" : null
+      );
+    }
   },
   methods: {
 

From c6d38668261aad007cb9a4ead27c97f94e279ad6 Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 17 Feb 2024 11:09:48 +0100
Subject: [PATCH 08/16] Fixed video playback & page titles

---
 ui/src/components/CollectionView.vue |  51 ++++++
 ui/src/components/MapViewer.vue      |   2 +
 ui/src/components/Overlays.vue       | 246 +++++++++++++--------------
 ui/src/components/ScrollViewer.vue   |  11 +-
 ui/src/components/TileViewer.vue     |   1 +
 ui/src/components/VideoPlayer.vue    |   1 +
 6 files changed, 176 insertions(+), 136 deletions(-)

diff --git a/ui/src/components/CollectionView.vue b/ui/src/components/CollectionView.vue
index 77bbb0b..cd5bec4 100644
--- a/ui/src/components/CollectionView.vue
+++ b/ui/src/components/CollectionView.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="collection">
+    <page-title :title="pageTitle"></page-title>
 
     <response-loader
       class="response"
@@ -22,6 +23,7 @@
       @region="onMapRegion"
       @scene="mapScene = $event"
       @search="onSearch"
+      @viewer="mapTileViewer = $event"
     >
     </map-viewer>
 
@@ -44,9 +46,18 @@
       @elementView="lastView = $event"
       @scene="scrollScene = $event"
       @search="onSearch"
+      @viewer="scrollTileViewer = $event"
     >
     </scroll-viewer>
     
+    <overlays
+      class="overlays"
+      :viewer="overlayViewer"
+      :overlay="overlay"
+      :scene="overlayScene"
+      :active="!!regionId"
+      ></overlays>
+
     <controls
       class="controls"
       :region="lastScrollRegion || lastMapRegion"
@@ -67,6 +78,9 @@ import ResponseLoader from './ResponseLoader.vue';
 import Controls from './Controls.vue';
 import ScrollViewer from './ScrollViewer.vue';
 import MapViewer from './MapViewer.vue';
+import PageTitle from './PageTitle.vue';
+import Overlays from './Overlays.vue';
+
 import { useApi } from '../api';
 
 const props = defineProps([
@@ -91,6 +105,30 @@ const {
 } = toRefs(props);
 
 const scrollViewer = ref(null);
+const scrollTileViewer = ref(null);
+const mapTileViewer = ref(null);
+
+const overlayViewer = computed(() => {
+  if (layout.value === 'MAP') {
+    return mapTileViewer.value;
+  }
+  return scrollTileViewer.value;
+});
+
+const overlay = computed(() => {
+  if (layout.value === 'MAP') {
+    return lastMapRegion.value;
+  }
+  return lastScrollRegion.value;
+});
+
+const overlayScene = computed(() => {
+  if (layout.value === 'MAP') {
+    return mapScene.value;
+  }
+  return scrollScene.value;
+});
+
 const mapViewer = ref(null);
 const stripViewer = ref(null);
 const lastScrollRegion = ref(null);
@@ -149,6 +187,17 @@ const selectTagId = computed(() => {
   return route.query.select_tag || undefined;
 })
 
+const pageTitle = computed(() => {
+  if (!collection.value) {
+    return "Photos";
+  }
+  const id = regionId.value;
+  if (!id) {
+    return `${collection.value.name} - Photos`;
+  }
+  return `#${id} - ${collection.value.name} - Photos`;
+});
+
 const onSelectTagId = (id) => {
   router.replace({
     query: {
@@ -275,6 +324,7 @@ const onStripRegion = async region => {
 
 const onScrollRegion = async (region) => {
   lastScrollRegion.value = region;
+  if (!region) return;
   router.push({
     name: "region",
     params: {
@@ -287,6 +337,7 @@ const onScrollRegion = async (region) => {
 
 const onMapRegion = async (region) => {
   lastMapRegion.value = region;
+  if (!region) return;
   router.push({
     name: "region",
     params: {
diff --git a/ui/src/components/MapViewer.vue b/ui/src/components/MapViewer.vue
index 6dd8ab6..0887fd4 100644
--- a/ui/src/components/MapViewer.vue
+++ b/ui/src/components/MapViewer.vue
@@ -20,6 +20,7 @@
       @view="onView"
       @contextmenu.prevent="onContextMenu"
       @click="onClick"
+      @viewer="emit('viewer', $event)"
     ></tile-viewer>
 
     <Spinner
@@ -87,6 +88,7 @@ const emit = defineEmits({
   region: null,
   selectTagId: null,
   search: null,
+  viewer: null,
 })
 
 const {
diff --git a/ui/src/components/Overlays.vue b/ui/src/components/Overlays.vue
index 07b72e2..0d1e6a8 100644
--- a/ui/src/components/Overlays.vue
+++ b/ui/src/components/Overlays.vue
@@ -1,148 +1,136 @@
 <template>
   <div class="overlays">
     <div
-      v-for="overlay in overlayPool"
-      :key="overlay.poolId"
-      :ref="'overlay-' + overlay.poolId"
+      ref="overlayRef"
       class="overlay"
     >
-      <div
-        v-if="overlay?.region?.data?.video"
-        class="video-icon"
-      >
-      </div>
-      <video-player
-        v-if="overlay?.region?.data?.video"
-        :region="overlay?.region"
-        :full="true"
-        :active="active"
-        @interactive="interactive => $emit('interactive', interactive)"
-      ></video-player>
+      <template v-if="videoOverlay">
+        <div class="video-icon">
+        </div>
+        <video-player
+          :region="overlay"
+          :full="true"
+          :active="active"
+          @interactive="interactive => $emit('interactive', interactive)"
+        ></video-player>
+      </template>
     </div>
   </div>
 </template>
 
-<script>
-
+<script setup>
+import { ref, onUnmounted, watch, computed, toRefs } from 'vue';
 import VideoPlayer from './VideoPlayer.vue';
 import Overlay from 'ol/Overlay';
 
-export default {
+const props = defineProps({
+  viewer: Object,
+  overlay: Object,
+  scene: Object,
+  active: Boolean,
+});
+
+const {
+  viewer,
+  overlay,
+  scene,
+  active
+} = toRefs(props);
+
+const overlayRef = ref(null);
+
+const videoOverlay = computed(() => {
+  if (!overlay.value?.data?.video) return null;
+  if (!viewer.value) return null;
+  if (!overlayRef.value) return null;
+  return {
+    ref: overlayRef.value,
+    overlay: overlay.value,
+  };
+});
+const addedOverlay = ref(null);
+
+function addOverlay(viewer, overlay) {
+  if (!overlay) return;
+  if (!viewer) return;
+  const overlays = viewer.getOverlays();
+  const length = overlays.push(new Overlay({
+    element: overlay.ref,
+    stopEvent: false,
+  }));
+  addedOverlay.value = overlays.item(length - 1);
+  updateOverlay();
+}
 
-  components: {
-    VideoPlayer,
-  },
+function removeOverlay(viewer) {
+  if (!viewer) return;
+  if (!addedOverlay.value) return;
+  const removed = viewer.removeOverlay(addedOverlay.value);
+  if (!removed) {
+    console.error("failed to remove overlay", addedOverlay.value);
+  }
+  addedOverlay.value = null;
+}
+
+onUnmounted(() => {
+  removeOverlay(viewer.value);
+});
+
+watch([viewer, videoOverlay], ([newViewer, newOverlay], [oldViewer, oldOverlay]) => {
+  const overlaysEqual = newOverlay?.ref == oldOverlay?.ref && newOverlay?.overlay.id == oldOverlay?.overlay.id;
+  if (!overlaysEqual) {
+    removeOverlay(oldViewer);
+    addOverlay(newViewer, newOverlay);
+  }
+  if (newViewer != oldViewer) {
+    if (oldViewer) {
+      oldViewer.getView().un("change:resolution", onResolutionChange);
+    }
+    if (newViewer) {
+      newViewer.getView().on("change:resolution", onResolutionChange);
+    }
+    removeOverlay(oldViewer);
+    addOverlay(newViewer, newOverlay);
+  }
+}, { immediate: true });
+
+function onResolutionChange() {
+  updateOverlay();
+}
+
+function updateOverlay() {
+  const region = overlay.value;
   
-  props: {
-    viewer: Object,
-    overlay: Object,
-    scene: Object,
-    active: Boolean,
-  },
-
-  emits: ["interactive"],
-
-  mounted() {
-    this.mountViewer(this.viewer);
-  },
-
-  unmounted() {
-    this.unmountViewer();
-  },
+  if (!region?.bounds) return;
+  if (!viewer.value) return;
   
-  watch: {
-    viewer(viewer) {
-      this.mountViewer(viewer);
-    },
-    overlay: {
-      immediate: true,
-      handler(overlay) {
-        this.updateOverlay(overlay);
-      }
-    },
-  },
-
-  computed: {
-    overlayPool() {
-      return [{
-        poolId: 0,
-        region: this.overlay,
-      }];
-    },
-  },
- 
-  methods: {
-
-    mountViewer(viewer) {
-      if (viewer != this.mountedViewer) {
-        this.unmountViewer();
-        if (viewer) {
-          viewer.getView().on("change:resolution", this.onResolutionChange);
-        }
-      }
-      this.mountedViewer = viewer;
-      if (!viewer) return;
-      
-      const ref = this.$refs["overlay-0"];
-      if (ref && !this.olOverlay) {
-        const overlays = viewer.getOverlays();
-        const length = overlays.push(new Overlay({
-          element: ref[0],
-          stopEvent: false,
-        }))
-        const overlay = overlays.item(length - 1);
-        this.olOverlay = overlay;
-        this.updateOverlay(overlay);
-      }
-    },
-
-    unmountViewer() {
-      const viewer = this.mountedViewer;
-      this.mountedViewer = null;
-      if (!viewer) return;
-      if (this.olOverlay) {
-        viewer.removeOverlay(this.olOverlay); 
-        this.olOverlay = null; 
-      }
-      viewer.getView().un("change:resolution", this.onResolutionChange);
-    },
-
-    onResolutionChange() {
-      this.updateOverlay(this.overlay);
-    },
-    
-    extentFromView(view) {
-      if (!this.scene) throw new Error("Scene not found");
-      const fullExtent = this.viewer.getView().getProjection().getExtent();
-      const fw = fullExtent[2] - fullExtent[0];
-      const fh = fullExtent[3] - fullExtent[1];
-      const sx = fw / this.scene.bounds.w;
-      const sy = fh / this.scene.bounds.h;
-      const tx = view.x * sx;
-      const ty = fh - view.y * sy;
-      const tw = view.w * sx;
-      const th = view.h * sy;
-      return [tx, ty-th, tx+tw, ty];
-    },
-
-    updateOverlay(region) {
-      if (!region || !region.bounds) return;
-      if (!this.viewer) return;
-      
-      const overlay = this.olOverlay;
-      if (!overlay) return;
-
-      const extent = this.extentFromView(region.bounds);
-      overlay.setPosition([extent[0], extent[3]]);
-      
-      const element = overlay.element;
-      const resolution = this.viewer.getView().getResolution();
-      element.style.width = (extent[2] - extent[0]) / resolution + "px";
-      element.style.height = (extent[3] - extent[1]) / resolution + "px";
-    },
+  const ov = addedOverlay.value;
+  if (!ov) return;
+
+  const extent = extentFromView(viewer.value, scene.value, region.bounds);
+  ov.setPosition([extent[0], extent[3]]);
+
+  const element = ov.element;
+  const resolution = viewer.value.getView().getResolution();
+  element.style.width = (extent[2] - extent[0]) / resolution + "px";
+  element.style.height = (extent[3] - extent[1]) / resolution + "px";
+}
+
+function extentFromView(viewer, scene, view) {
+  if (!scene) throw new Error("Scene not found");
+  const fullExtent = viewer.getView().getProjection().getExtent();
+  const fw = fullExtent[2] - fullExtent[0];
+  const fh = fullExtent[3] - fullExtent[1];
+  const sx = fw / scene.bounds.w;
+  const sy = fh / scene.bounds.h;
+  return [
+    fullExtent[0] + view.x * sx,
+    fullExtent[3] - (view.y + view.h) * sy,
+    fullExtent[0] + (view.x + view.w) * sx,
+    fullExtent[3] - view.y * sy,
+  ];
+}
 
-  }
-};
 </script>
 
 <style scoped>
diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 6a07425..6645803 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -26,6 +26,7 @@
       @contextmenu.prevent="onContextMenu"
       @keydown.esc="onEscape"
       @box-select="onBoxSelect"
+      @viewer="emit('viewer', $event)"
     ></tile-viewer>
 
     <Spinner
@@ -105,6 +106,7 @@ const emit = defineEmits({
   selectTagId: null,
   search: null,
   elementView: null,
+  viewer: null,
 })
 
 const {
@@ -161,16 +163,11 @@ const {
 const regionTransition = ref(false);
 watch(region, async (newRegion, oldRegion) => {
   regionTransition.value = !!((!newRegion && oldRegion) || (newRegion && !oldRegion));
+  emit("region", newRegion);
 });
 
 const exit = async () => {
-  // const viewZoom = viewer.value.zoomFromView(view.value);
-  // const moveZoom = viewer.value.zoomFromView(lastView.value);
-  // const ratio = moveZoom / viewZoom;
-  // if (ratio > 1.1) {
-  //   zoomOut();
-  //   return;
-  // }
+  await centerToBounds(lastNonNativeView.value);
   await regionExit();
 }
 
diff --git a/ui/src/components/TileViewer.vue b/ui/src/components/TileViewer.vue
index a1f011b..5a21ad9 100644
--- a/ui/src/components/TileViewer.vue
+++ b/ui/src/components/TileViewer.vue
@@ -692,6 +692,7 @@ export default {
     },
 
     reload() {
+      if (!this.map) return;
       const oldLayers = this.map.getLayers().getArray().slice();
       const newLayers = this.createLayers();
       const cleanup = () => {
diff --git a/ui/src/components/VideoPlayer.vue b/ui/src/components/VideoPlayer.vue
index 74147a3..6f6dcf1 100644
--- a/ui/src/components/VideoPlayer.vue
+++ b/ui/src/components/VideoPlayer.vue
@@ -48,6 +48,7 @@ export default {
   mounted() {
     this.player = new Plyr(this.$refs.video, {
       settings: ["captions", "quality", "speed", "loop"],
+      muted: true,
       quality: {
         default: originalQualitySize,
         options: qualities,

From b41c4bb1d250b5628636778657271e6e0414587e Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 17 Feb 2024 11:16:13 +0100
Subject: [PATCH 09/16] Cleanup unused code in CollectionView

---
 ui/src/components/CollectionView.vue | 118 ++-------------------------
 1 file changed, 6 insertions(+), 112 deletions(-)

diff --git a/ui/src/components/CollectionView.vue b/ui/src/components/CollectionView.vue
index cd5bec4..030684e 100644
--- a/ui/src/components/CollectionView.vue
+++ b/ui/src/components/CollectionView.vue
@@ -70,8 +70,7 @@
 </template>
 
 <script setup>
-import { computed, nextTick, ref, toRefs, watch } from 'vue';
-import { timeout, useTask } from 'vue-concurrency';
+import { computed, ref, toRefs, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import ResponseLoader from './ResponseLoader.vue';
@@ -86,7 +85,6 @@ import { useApi } from '../api';
 const props = defineProps([
   "collectionId",
   "regionId",
-  "fullpage",
   "scrollbar",
 ]);
 
@@ -104,6 +102,10 @@ const {
   regionId,
 } = toRefs(props);
 
+watch(regionId, (newRegionId) => {
+  emit("immersive", newRegionId !== undefined);
+}, { immediate: true });
+
 const scrollViewer = ref(null);
 const scrollTileViewer = ref(null);
 const mapTileViewer = ref(null);
@@ -130,20 +132,13 @@ const overlayScene = computed(() => {
 });
 
 const mapViewer = ref(null);
-const stripViewer = ref(null);
 const lastScrollRegion = ref(null);
 const lastMapRegion = ref(null);
-const lastStripRegion = ref(null);
 const lastView = ref(null);
 
 const route = useRoute();
 const router = useRouter();
 
-const initWithStrip = !!regionId.value;
-const stripVisible = ref(initWithStrip);
-const lastRegionId = ref(null);
-const transitionRegionId = ref(null);
-
 const navigate = computed(() => {
   return (scrollViewer.value || mapViewer.value)?.navigate;
 });
@@ -155,7 +150,6 @@ const exit = () => {
 
 const scrollScene = ref(null);
 const mapScene = ref(null);
-const stripScene = ref(null);
 const scenes = computed(() => {
   const scenes = [];
   if (scrollScene.value) scenes.push({
@@ -164,11 +158,7 @@ const scenes = computed(() => {
   });
   if (mapScene.value) scenes.push({
     name: "Map",
-    ...stripScene.value
-  });
-  if (stripScene.value) scenes.push({
-    name: "Strip",
-    ...stripScene.value
+    ...mapScene.value
   });
   return scenes;
 });
@@ -243,85 +233,6 @@ const debug = computed(() => {
   return v;
 });
 
-const showRegion = useTask(function*(_, regionId) {
-  if (regionId) {
-    if (stripVisible.value) return;
-
-    let view =
-      lastScrollRegion.value?.id == regionId &&
-      lastScrollRegion.value?.bounds;
-      
-    if (!view) {
-      view = yield scrollViewer.value.getRegionView(regionId);
-    }
-
-    view = scrollViewer.value.getScreenView(view);
-    yield stripViewer.value?.zoomInFromView(view);
-
-    stripVisible.value = true;
-    transitionRegionId.value = null;
-    if (lastStripRegion.value?.id != regionId) {
-      scrollViewer.value.drawViewToCanvas(view, stripViewer.value?.getCanvas());
-    }
-
-    yield nextTick();
-    stripViewer.value.focus();
-
-  } else {
-    let view = 
-      lastScrollRegion.value?.id == lastStripRegion.value.id &&
-      lastScrollRegion.value?.bounds;
-
-    if (!view) {
-      view = yield scrollViewer.value?.getRegionView(lastStripRegion.value.id);
-    }
-    if (!view) return;
-
-    if (lastScrollRegion.value?.id != lastStripRegion.value?.id) {
-      yield scrollViewer.value?.centerToBounds(view);
-    }
-
-    view = scrollViewer.value.getScreenView(view);
-    yield stripViewer.value?.zoomOutFromView(view);
-
-    yield timeout(300);
-    
-    stripVisible.value = false;
-    transitionRegionId.value = null;
-  }
-}).restartable();
-
-function showRegionImmediate(regionId) {
-  transitionRegionId.value = null;
-  stripViewer.value?.resetZoom();
-  if (regionId) {
-    stripVisible.value = true;
-  } else {
-    stripVisible.value = false;
-  }
-}
-
-watch(regionId, (newRegionId, oldRegionId) => {
-  lastRegionId.value = oldRegionId;
-  const showStrip = newRegionId !== undefined;
-  emit("immersive", showStrip);
-  if (layout.value === 'MAP') {
-    showRegionImmediate(newRegionId);
-  } else {
-    showRegion.perform(newRegionId);
-  }
-}, { immediate: true });
-
-const onStripRegion = async region => {
-  if (!region) return;
-  if (layout.value === 'MAP') {
-    showRegionImmediate(region.id);
-  } else {
-    showRegion.perform(region.id);
-  }
-  lastStripRegion.value = region;
-}
-
 const onScrollRegion = async (region) => {
   lastScrollRegion.value = region;
   if (!region) return;
@@ -357,21 +268,4 @@ const onMapRegion = async (region) => {
   left: 0;
 }
 
-.photoframe {
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-.strip {
-  visibility: hidden;
-  transition: none;
-  pointer-events: none;
-}
-
-.strip.visible {
-  visibility: visible;
-  pointer-events: all;
-}
-
 </style>

From 41a56b4192f0e7d3140cbdd02f9536816eea7acf Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 17 Feb 2024 12:39:49 +0100
Subject: [PATCH 10/16] Video is now controllable (finally!)

---
 ui/src/components/CollectionView.vue |  8 +++--
 ui/src/components/Overlays.vue       |  5 ++-
 ui/src/components/ScrollViewer.vue   | 10 +++---
 ui/src/components/TileViewer.vue     |  9 +----
 ui/src/components/VideoPlayer.vue    | 54 +++++-----------------------
 5 files changed, 24 insertions(+), 62 deletions(-)

diff --git a/ui/src/components/CollectionView.vue b/ui/src/components/CollectionView.vue
index 030684e..72eb72d 100644
--- a/ui/src/components/CollectionView.vue
+++ b/ui/src/components/CollectionView.vue
@@ -10,7 +10,7 @@
     <map-viewer
       v-if="layout == 'MAP'"
       ref="mapViewer"
-      :interactive="true"
+      :interactive="interactive"
       :collectionId="collectionId"
       :regionId="regionId"
       :layout="layout"
@@ -30,7 +30,7 @@
     <scroll-viewer
       v-if="layout != 'MAP'"
       ref="scrollViewer"
-      :interactive="true"
+      :interactive="interactive"
       :collectionId="collectionId"
       :regionId="regionId"
       :layout="layout"
@@ -56,6 +56,7 @@
       :overlay="overlay"
       :scene="overlayScene"
       :active="!!regionId"
+      @interactive="interactive = $event"
       ></overlays>
 
     <controls
@@ -109,6 +110,7 @@ watch(regionId, (newRegionId) => {
 const scrollViewer = ref(null);
 const scrollTileViewer = ref(null);
 const mapTileViewer = ref(null);
+const interactive = ref(true);
 
 const overlayViewer = computed(() => {
   if (layout.value === 'MAP') {
@@ -234,6 +236,7 @@ const debug = computed(() => {
 });
 
 const onScrollRegion = async (region) => {
+  if (region?.id === lastScrollRegion.value?.id) return;
   lastScrollRegion.value = region;
   if (!region) return;
   router.push({
@@ -247,6 +250,7 @@ const onScrollRegion = async (region) => {
 }
 
 const onMapRegion = async (region) => {
+  if (region?.id === lastMapRegion.value?.id) return;
   lastMapRegion.value = region;
   if (!region) return;
   router.push({
diff --git a/ui/src/components/Overlays.vue b/ui/src/components/Overlays.vue
index 0d1e6a8..e59dfea 100644
--- a/ui/src/components/Overlays.vue
+++ b/ui/src/components/Overlays.vue
@@ -37,6 +37,8 @@ const {
   active
 } = toRefs(props);
 
+defineEmits(["interactive"]);
+
 const overlayRef = ref(null);
 
 const videoOverlay = computed(() => {
@@ -134,7 +136,4 @@ function extentFromView(viewer, scene, view) {
 </script>
 
 <style scoped>
-.overlay {
-  pointer-events: none;
-}
 </style>
diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 6645803..6860501 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -11,8 +11,8 @@
       :debug="debug"
       :tileSize="512"
       :interactive="interactive"
-      :pannable="!nativeScroll"
-      :zoomable="!nativeScroll"
+      :pannable="!nativeScroll && interactive"
+      :zoomable="!nativeScroll && interactive"
       :zoom-transition="regionTransition"
       :focus="!!region"
       :crossNav="!!region"
@@ -326,8 +326,10 @@ const onClick = async (event) => {
   }
   const regions = await getRegions(scene.value?.id, event.x, event.y, 0, 0);
   if (regions && regions.length > 0) {
-    const region = regions[0];
-    emit("region", region);
+    if (regions[0].id == region.value?.id) {
+      return false;
+    }
+    emit("region", regions[0]);
     return true;
   }
   return false;
diff --git a/ui/src/components/TileViewer.vue b/ui/src/components/TileViewer.vue
index 5a21ad9..f5588cd 100644
--- a/ui/src/components/TileViewer.vue
+++ b/ui/src/components/TileViewer.vue
@@ -149,13 +149,6 @@ export default {
       this.setInteractive(interactive);
     },
 
-    pannable: {
-      immediate: true,
-      handler(newValue) {
-        this.dragPan?.setActive(newValue);
-      }
-    },
-
     zoomable: {
       immediate: true,
       handler(newValue) {
@@ -218,7 +211,7 @@ export default {
       return [-width*0.95, -height, width*1.95, height];
     },
     crossPanActive() {
-      return this.crossNav && this.focusZoom < 1.1;
+      return this.pannable && this.crossNav && this.focusZoom < 1.1;
     },
     dragPanActive() {
       return this.pannable && !this.crossPanActive;
diff --git a/ui/src/components/VideoPlayer.vue b/ui/src/components/VideoPlayer.vue
index 6f6dcf1..cea8ff6 100644
--- a/ui/src/components/VideoPlayer.vue
+++ b/ui/src/components/VideoPlayer.vue
@@ -2,9 +2,6 @@
   <div
     class="video-player"
     v-show="active && show"
-    @pointerDown.capture="onPointerDown"
-    @click.capture="onCaptureClick"
-    @wheel="onWheel"
   >
     <video
       ref="video"
@@ -21,7 +18,6 @@
 <script>
 import { getFileUrl, getThumbnailUrl } from '../api';
 import Plyr from 'plyr';
-import { isCloseClick } from '../utils';
 
 const originalQualitySize = 1000000;
 const qualities = [originalQualitySize, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
@@ -41,7 +37,7 @@ export default {
       show: false,
       loading: 0,
       hasPlayed: false,
-      interactive: false,
+      interactive: true,
     };
   },
 
@@ -59,40 +55,23 @@ export default {
         },
       },
     });
-    this.player.on("ready", this.onReady);
     this.player.on("loadstart", this.onLoadStart);
     this.player.on("canplay", this.onCanPlay);
     this.player.on("playing", this.onPlaying);
-    this.player.on("play", this.onPlay);
-    this.player.on("pause", this.onPause);
     this.player.on("error", this.onError);
-
-    // this.player.on("ready", () => console.log("ready"));
-    // this.player.on("loadstart", () => console.log("loadstart"));
-    // this.player.on("loadeddata", () => console.log("loadeddata"));
-    // this.player.on("loadedmetadata", () => console.log("loadedmetadata"));
-    // this.player.on("qualitychange", () => console.log("qualitychange"));
-    // this.player.on("canplay", () => console.log("canplay"));
-    // this.player.on("canplaythrough", () => console.log("canplaythrough"));
-    // this.player.on("play", () => console.log("play"));
-    // this.player.on("pause", () => console.log("pause"));
-    // this.player.on("stalled", () => console.log("stalled"));
-    // this.player.on("waiting", () => console.log("waiting"));
-    // this.player.on("emptied", () => console.log("emptied"));
-    // this.player.on("error", () => console.log("error"));
-    // this.player.on("playing", () => console.log("playing"));
-
+    this.player.elements.controls.addEventListener("pointerenter", this.onControlsPointerEnter);
+    this.player.elements.controls.addEventListener("pointerleave", this.onControlsPointerLeave);
     this.player.source = this.source;
+    console.log(this.player);
   },
 
   unmounted() {
     if (!this.player) return;
-    this.player.off("ready", this.onReady);
+    this.player.elements.controls.removeEventListener("pointerenter", this.onControlsPointerEnter);
+    this.player.elements.controls.removeEventListener("pointerleave", this.onControlsPointerLeave);
     this.player.off("loadstart", this.onLoadStart);
     this.player.off("canplay", this.onCanPlay);
     this.player.off("playing", this.onPlaying);
-    this.player.off("play", this.onPlay);
-    this.player.off("pause", this.onPause);
     this.player.off("error", this.onError);
     this.player.destroy();
     this.player = null;
@@ -152,7 +131,6 @@ export default {
   methods: {
     onLoadStart() {
       this.loading++;
-      this.interactive = false;
     },
     onCanPlay() {
       this.loading--;
@@ -186,25 +164,11 @@ export default {
       this.hasPlayed = true;
       this.show = true;
     },
-    onPlay() {
-      // TODO: The locking of controls here does not work that well yet, so it's
-      // disabled for now
-      // this.interactive = true;
-    },
-    onPause() {
+    onControlsPointerEnter() {
       this.interactive = false;
     },
-    onPointerDown(event) {
-      this.lastPointerDownEvent = event;
-    },
-    onCaptureClick(event) {
-      if (!isCloseClick(this.lastPointerDownEvent, event)) {
-        // Do not play/pause video if the click was a drag instead of a click
-        event.stopPropagation();
-      }
-    },
-    onWheel() {
-      this.interactive = false;
+    onControlsPointerLeave() {
+      this.interactive = true;
     },
   }
 

From 1167b32d1a8cbb0a0e5ee2273f5f1ac4df472d2d Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 17 Feb 2024 14:33:58 +0100
Subject: [PATCH 11/16] Prevent focusing regions outside of focused region

---
 ui/src/components/MapViewer.vue    | 1 +
 ui/src/components/ScrollViewer.vue | 1 +
 2 files changed, 2 insertions(+)

diff --git a/ui/src/components/MapViewer.vue b/ui/src/components/MapViewer.vue
index 0887fd4..6d6d5fc 100644
--- a/ui/src/components/MapViewer.vue
+++ b/ui/src/components/MapViewer.vue
@@ -267,6 +267,7 @@ const onNav = async (event) => {
 
 const onClick = async (event) => {
   if (!event) return false;
+  if (region.value) return false;
   const regions = await getRegions(scene.value?.id, event.x, event.y, 0, 0);
   if (regions && regions.length > 0) {
     const region = regions[0];
diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 6860501..71aa865 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -315,6 +315,7 @@ const selectBounds = async (op, bounds) => {
 
 const onClick = async (event) => {
   if (!event) return false;
+  if (region.value) return false;
   if (tagsSupported.value && (selectTagId.value || event.originalEvent.ctrlKey)) {
     await selectBounds("INVERT", {
       x: event.x,

From e63b757b4d5de88d1ff238a6587c114eff2630bc Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 17 Feb 2024 15:44:53 +0100
Subject: [PATCH 12/16] Tagging and reload fixes

---
 ui/src/components/CollectionView.vue | 45 +++++------------
 ui/src/components/Controls.vue       | 74 ++++++++++++++++++++--------
 ui/src/components/MapViewer.vue      |  5 +-
 ui/src/components/Overlays.vue       | 15 +++++-
 ui/src/components/ScrollViewer.vue   |  2 +-
 ui/src/components/VideoPlayer.vue    |  1 -
 6 files changed, 79 insertions(+), 63 deletions(-)

diff --git a/ui/src/components/CollectionView.vue b/ui/src/components/CollectionView.vue
index 72eb72d..eeebfef 100644
--- a/ui/src/components/CollectionView.vue
+++ b/ui/src/components/CollectionView.vue
@@ -20,7 +20,7 @@
       :debug="debug"
       :selectTagId="selectTagId"
       @selectTagId="onSelectTagId"
-      @region="onMapRegion"
+      @region="onRegion"
       @scene="mapScene = $event"
       @search="onSearch"
       @viewer="mapTileViewer = $event"
@@ -42,7 +42,7 @@
       :scrollbar="scrollbar"
       :selectTagId="selectTagId"
       @selectTagId="onSelectTagId"
-      @region="onScrollRegion"
+      @region="onRegion"
       @elementView="lastView = $event"
       @scene="scrollScene = $event"
       @search="onSearch"
@@ -52,17 +52,18 @@
     
     <overlays
       class="overlays"
-      :viewer="overlayViewer"
-      :overlay="overlay"
-      :scene="overlayScene"
+      :viewer="currentViewer"
       :active="!!regionId"
+      :regionId="regionId"
+      :scene="currentScene"
       @interactive="interactive = $event"
       ></overlays>
 
     <controls
       class="controls"
-      :region="lastScrollRegion || lastMapRegion"
-      :scene="scrollScene"
+      v-if="!!regionId"
+      :scene="currentScene"
+      :regionId="regionId"
       @navigate="navigate($event)"
       @exit="exit()"
     ></controls>
@@ -112,21 +113,14 @@ const scrollTileViewer = ref(null);
 const mapTileViewer = ref(null);
 const interactive = ref(true);
 
-const overlayViewer = computed(() => {
+const currentViewer = computed(() => {
   if (layout.value === 'MAP') {
     return mapTileViewer.value;
   }
   return scrollTileViewer.value;
 });
 
-const overlay = computed(() => {
-  if (layout.value === 'MAP') {
-    return lastMapRegion.value;
-  }
-  return lastScrollRegion.value;
-});
-
-const overlayScene = computed(() => {
+const currentScene = computed(() => {
   if (layout.value === 'MAP') {
     return mapScene.value;
   }
@@ -134,8 +128,6 @@ const overlayScene = computed(() => {
 });
 
 const mapViewer = ref(null);
-const lastScrollRegion = ref(null);
-const lastMapRegion = ref(null);
 const lastView = ref(null);
 
 const route = useRoute();
@@ -235,9 +227,7 @@ const debug = computed(() => {
   return v;
 });
 
-const onScrollRegion = async (region) => {
-  if (region?.id === lastScrollRegion.value?.id) return;
-  lastScrollRegion.value = region;
+const onRegion = async (region) => {
   if (!region) return;
   router.push({
     name: "region",
@@ -249,19 +239,6 @@ const onScrollRegion = async (region) => {
   });
 }
 
-const onMapRegion = async (region) => {
-  if (region?.id === lastMapRegion.value?.id) return;
-  lastMapRegion.value = region;
-  if (!region) return;
-  router.push({
-    name: "region",
-    params: {
-      collectionId: collectionId.value,
-      regionId: region?.id,
-    },
-    query: route.query,
-  });
-}
 </script>
 
 <style scoped>
diff --git a/ui/src/components/Controls.vue b/ui/src/components/Controls.vue
index 0ae14d1..4a7848d 100644
--- a/ui/src/components/Controls.vue
+++ b/ui/src/components/Controls.vue
@@ -9,7 +9,7 @@
     <div class="toolbar">
       <!-- <ui-icon light class="icon" size="32" @click="$event => download()">download</ui-icon> -->
       <ui-icon
-        v-if="tagsEnabled"
+        v-if="tagsSupported"
         light
         class="icon"
         size="32"
@@ -18,13 +18,13 @@
         tag
       </ui-icon>
       <ui-icon
-        v-if="tagsEnabled"
+        v-if="tagsSupported"
         light
         class="icon"
         size="32"
-        @click="$event => onFavorite()"
+        @click="toggleFavorite()"
       >
-        {{ favorite ? "favorite" : "favorite_outline" }}
+        {{ favoriteTag ? "favorite" : "favorite_outline" }}
       </ui-icon>
     </div>
     <Tags
@@ -50,22 +50,32 @@ import { onKeyStroke, useIdle } from '@vueuse/core';
 import Downloads from './Downloads.vue';
 import Tags from './Tags.vue';
 import { computed, ref, toRefs } from 'vue';
+import { postTagFiles, useApi } from '../api';
+import { useRegion } from '../use';
 
 const props = defineProps({
-  region: Object,
-  tagsEnabled: Boolean,
+  scene: Object,
+  regionId: String,
 });
 
 const {
-  region,
+  scene,
+  regionId,
 } = toRefs(props);
 
+const {
+  region,
+  mutate: updateRegion,
+} = useRegion({ scene, id: regionId })
+
+const { data: capabilities } = useApi(() => "/capabilities");
+const tagsSupported = computed(() => capabilities.value?.tags?.supported);
+
+const fileId = computed(() => region.value?.data?.id);
+
 const emit = defineEmits([
   "navigate",
   "exit",
-  "favorite",
-  "add-tag",
-  "remove-tag",
 ]);
 
 const { idle } = useIdle(5000, {
@@ -75,7 +85,7 @@ const { idle } = useIdle(5000, {
 
 const showTags = ref(false);
 
-const favorite = computed(() => {
+const favoriteTag = computed(() => {
   return region.value?.data?.tags?.find(tag => tag.name == "fav");
 })
 
@@ -91,16 +101,38 @@ const exit = () => {
   emit("exit");
 }
 
-const onFavorite = () => {
-  emit("favorite", favorite.value);
-}
-
-const addTag = (tag) => {
-  emit("add-tag", tag);
-}
-
-const removeTag = (tag) => {
-  emit("remove-tag", tag);
+const toggleFavorite = async () => {
+  const tagId = favoriteTag?.id || "fav:r0";
+  if (!fileId.value) {
+    return;
+  }
+  await postTagFiles(tagId, {
+    op: "INVERT",
+    file_id: fileId.value,
+  });
+  await updateRegion();
+}
+
+const addTag = async (tagId) => {
+  if (!fileId.value || !tagId) {
+    return;
+  }
+  await postTagFiles(tagId, {
+    op: "ADD",
+    file_id: fileId.value,
+  });
+  await updateRegion();
+}
+
+const removeTag = async (tagId) => {
+  if (!fileId.value || !tagId) {
+    return;
+  }
+  await postTagFiles(tagId, {
+    op: "SUBTRACT",
+    file_id: fileId.value,
+  });
+  await updateRegion();
 }
 
 onKeyStroke(["ArrowLeft"], left);
diff --git a/ui/src/components/MapViewer.vue b/ui/src/components/MapViewer.vue
index 6d6d5fc..c5270b2 100644
--- a/ui/src/components/MapViewer.vue
+++ b/ui/src/components/MapViewer.vue
@@ -140,15 +140,12 @@ useEventBus("recreate-scene").on(scene => {
 });
 
 watch(scene, async (newScene, oldScene) => {
-  if (newScene?.search != oldScene?.search) {
-    scrollToPixels(0);
-  }
   emit("scene", newScene);
 });
 
 watch(region, async (newRegion, oldRegion) => {
   regionTransition.value = !!((!newRegion && oldRegion) || (newRegion && !oldRegion));
-});
+}, { immediate: true });
 
 const contextMenu = ref(null);
 const {
diff --git a/ui/src/components/Overlays.vue b/ui/src/components/Overlays.vue
index e59dfea..d464ad3 100644
--- a/ui/src/components/Overlays.vue
+++ b/ui/src/components/Overlays.vue
@@ -22,23 +22,34 @@
 import { ref, onUnmounted, watch, computed, toRefs } from 'vue';
 import VideoPlayer from './VideoPlayer.vue';
 import Overlay from 'ol/Overlay';
+import { useRegion } from '../use';
 
 const props = defineProps({
   viewer: Object,
-  overlay: Object,
+  regionId: String,
   scene: Object,
   active: Boolean,
 });
 
 const {
   viewer,
-  overlay,
+  regionId,
   scene,
   active
 } = toRefs(props);
 
 defineEmits(["interactive"]);
 
+const {
+  region,
+} = useRegion({ scene, id: regionId });
+
+const overlay = ref(null);
+watch(region, (newRegion, oldRegion) => {
+  if (newRegion?.id == oldRegion?.id) return;
+  overlay.value = newRegion;
+}, { immediate: true });
+
 const overlayRef = ref(null);
 
 const videoOverlay = computed(() => {
diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 71aa865..4f90052 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -164,7 +164,7 @@ const regionTransition = ref(false);
 watch(region, async (newRegion, oldRegion) => {
   regionTransition.value = !!((!newRegion && oldRegion) || (newRegion && !oldRegion));
   emit("region", newRegion);
-});
+}, { immediate: true });
 
 const exit = async () => {
   await centerToBounds(lastNonNativeView.value);
diff --git a/ui/src/components/VideoPlayer.vue b/ui/src/components/VideoPlayer.vue
index cea8ff6..744effc 100644
--- a/ui/src/components/VideoPlayer.vue
+++ b/ui/src/components/VideoPlayer.vue
@@ -62,7 +62,6 @@ export default {
     this.player.elements.controls.addEventListener("pointerenter", this.onControlsPointerEnter);
     this.player.elements.controls.addEventListener("pointerleave", this.onControlsPointerLeave);
     this.player.source = this.source;
-    console.log(this.player);
   },
 
   unmounted() {

From 9f15a2eb00fbccdeed243ff97a8da3c131be098f Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 17 Feb 2024 16:26:01 +0100
Subject: [PATCH 13/16] Add map selection + cleanup

---
 ui/src/components/MapViewer.vue    |  48 ++++++++--
 ui/src/components/PhotoFrame.vue   |  88 ------------------
 ui/src/components/ScrollViewer.vue | 142 ++++-------------------------
 ui/src/components/TileViewer.vue   |  26 ------
 ui/src/use.js                      |  27 +++++-
 5 files changed, 85 insertions(+), 246 deletions(-)
 delete mode 100644 ui/src/components/PhotoFrame.vue

diff --git a/ui/src/components/MapViewer.vue b/ui/src/components/MapViewer.vue
index c5270b2..1336380 100644
--- a/ui/src/components/MapViewer.vue
+++ b/ui/src/components/MapViewer.vue
@@ -4,22 +4,24 @@
     <tile-viewer
       class="viewer"
       ref="viewer"
+      :geo="true"
       :scene="scene"
+      :view="view"
+      :selectTagId="selectTagId"
       :debug="debug"
       :tileSize="512"
       :interactive="interactive"
-      :pannable="true"
-      :zoomable="true"
+      :pannable="interactive"
+      :zoomable="interactive"
+      :zoom-transition="regionTransition"
       :focus="!!region"
       :crossNav="!!region"
-      :geo="true"
-      :view="view"
-      :zoom-transition="regionTransition"
       :viewport="viewport"
       @nav="onNav"
       @view="onView"
       @contextmenu.prevent="onContextMenu"
       @click="onClick"
+      @box-select="onBoxSelect"
       @viewer="emit('viewer', $event)"
     ></tile-viewer>
 
@@ -57,8 +59,8 @@ import { debounce } from 'throttle-debounce';
 import ContextMenu from '@overcoder/vue-context-menu';
 import { computed, ref, toRefs, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { getRegions, useScene } from '../api';
-import { useContextMenu, useSeekableRegion, useViewport } from '../use.js';
+import { getRegions, useApi, useScene } from '../api';
+import { useContextMenu, useSeekableRegion, useTags, useViewport } from '../use.js';
 import RegionMenu from './RegionMenu.vue';
 import Spinner from './Spinner.vue';
 import TileViewer from './TileViewer.vue';
@@ -147,6 +149,9 @@ watch(region, async (newRegion, oldRegion) => {
   regionTransition.value = !!((!newRegion && oldRegion) || (newRegion && !oldRegion));
 }, { immediate: true });
 
+const { data: capabilities } = useApi(() => "/capabilities");
+const tagsSupported = computed(() => capabilities.value?.tags?.supported);
+
 const contextMenu = ref(null);
 const {
   onContextMenu,
@@ -217,6 +222,10 @@ const onView = (view) => {
 const lastView = ref(null);
 
 const exit = async () => {
+  if (selectTagId.value) {
+    emit("selectTagId", null);
+    return;
+  }
   if (!region.value) {
     return;
   }
@@ -262,9 +271,28 @@ const onNav = async (event) => {
   zoomOut();
 }
 
+const {
+  selectBounds
+} = useTags({
+  supported: tagsSupported,
+  selectTagId,
+  collectionId,
+  scene,
+});
+
 const onClick = async (event) => {
   if (!event) return false;
   if (region.value) return false;
+  if (tagsSupported.value && (selectTagId.value || event.originalEvent.ctrlKey)) {
+    const id = await selectBounds("INVERT", {
+      x: event.x,
+      y: event.y,
+      w: 0,
+      h: 0,
+    });
+    emit("selectTagId", id);
+    return false;
+  }
   const regions = await getRegions(scene.value?.id, event.x, event.y, 0, 0);
   if (regions && regions.length > 0) {
     const region = regions[0];
@@ -274,6 +302,12 @@ const onClick = async (event) => {
   return false;
 }
 
+const onBoxSelect = async (bounds, shift) => {
+  const op = shift ? "SUBTRACT" : "ADD";
+  const id = await selectBounds(op, bounds);
+  emit("selectTagId", id);
+}
+
 defineExpose({
   navigate,
   exit: externalExit,
diff --git a/ui/src/components/PhotoFrame.vue b/ui/src/components/PhotoFrame.vue
deleted file mode 100644
index cd99e36..0000000
--- a/ui/src/components/PhotoFrame.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<template>
-  <div
-    class="photoframe"
-    :class="{ visible: !!view }"
-  >
-    <div class="bar left"></div>
-    <div class="bar right"></div>
-    <div class="bar top"></div>
-    <div class="bar bottom"></div>
-  </div>
-</template>
-
-<script setup>
-import { computed, toRefs } from 'vue';
-
-const props = defineProps({
-  region: Object,
-  view: Object,
-});
-
-const {
-  view,
-} = toRefs(props);
-
-const e = 0.5;
-const barLeft = computed(() => 
-  Math.ceil(view.value?.x + e) + 'px'
-);
-const barRight = computed(() => 
-  Math.floor(view.value?.x + view.value?.w - e) + 'px'
-);
-const barTop = computed(() =>
-  Math.ceil(view.value?.y + e) + 'px'
-);
-const barBottom = computed(() =>
-  Math.floor(view.value?.y + view.value?.h - e) + 'px'
-);
-
-</script>
-
-<style scoped>
-.photoframe {
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.5s ease-in-out;
-}
-
-.photoframe.visible {
-  opacity: 1;
-}
-
-.bar {
-  position: absolute;
-  background-color: black;
-  pointer-events: none;
-}
-
-.bar.left {
-  left: 0;
-  top: 0;
-  width: v-bind('barLeft');
-  height: 100%;
-}
-
-.bar.right {
-  right: 0;
-  top: 0;
-  width: calc(100% - v-bind('barRight'));
-  height: 100%;
-}
-
-.bar.top {
-  left: 0;
-  width: 100%;
-  top: 0;
-  height: v-bind('barTop');
-}
-
-.bar.bottom {
-  left: 0;
-  width: 100%;
-  bottom: 0;
-  height: calc(100% - v-bind('barBottom'));
-}
-
-</style>
diff --git a/ui/src/components/ScrollViewer.vue b/ui/src/components/ScrollViewer.vue
index 4f90052..f001611 100644
--- a/ui/src/components/ScrollViewer.vue
+++ b/ui/src/components/ScrollViewer.vue
@@ -19,7 +19,6 @@
       :viewport="viewport"
       @click="onClick"
       @view="onView"
-      @move-end="onMoveEnd"
       @nav="onNav"
       @wheel="onWheel"
       @load-end="onLoadEnd"
@@ -74,13 +73,12 @@
 import ContextMenu from '@overcoder/vue-context-menu';
 import { useEventBus } from '@vueuse/core';
 import { computed, nextTick, ref, toRefs, watch } from 'vue';
-import { getRegion, getRegions, useScene, addTag, postTagFiles, useApi } from '../api';
-import { useSeekableRegion, useScrollbar, useViewport, useContextMenu, useTimeline } from '../use.js';
+import { getRegion, getRegions, useScene, useApi } from '../api';
+import { useSeekableRegion, useScrollbar, useViewport, useContextMenu, useTimeline, useTags } from '../use.js';
 import DateStrip from './DateStrip.vue';
 import RegionMenu from './RegionMenu.vue';
 import Spinner from './Spinner.vue';
 import TileViewer from './TileViewer.vue';
-import { tr } from 'date-fns/locale';
 
 const props = defineProps({
   interactive: Boolean,
@@ -124,7 +122,6 @@ const {
 
 const viewer = ref(null);
 const viewport = useViewport(viewer);
-// const nativeScroll = ref(true);
 
 const lastView = ref(null);
 const lastNonNativeView = ref(null);
@@ -201,9 +198,6 @@ const lastZoom = computed(() => {
 });
 
 const nativeScroll = computed(() => {
-  // const lastZoom = lastZoom.value;
-  // console.log(lastZoom.value);
-
   if (lastZoom.value > 1.2) {
     return false;
   }
@@ -217,7 +211,6 @@ watch(nativeScroll, async (newValue, oldValue) => {
     return;
   }
   if (newValue) {
-    // console.log("nativey", lastView.value?.y, lastNonNativeView.value?.y);
     await centerToBounds(lastNonNativeView.value);
   }
 });
@@ -226,16 +219,16 @@ watch(nativeScroll, async (newValue, oldValue) => {
 const centerToBounds = async (bounds) => {
   const by = bounds.y + bounds.h * 0.5;
   const vy = viewport.height.value * 0.5;
-  // nativeScroll.value = true;
-  // if (region.value) {
-  //   await exit();
-  // }
   await nextTick();
   scrollToPixels(by - vy);
   await nextTick();
 }
 
 const onEscape = async () => {
+  if (selectTagId.value) {
+    emit("selectTagId", null);
+    return;
+  }
   zoomOut();
   if (lastView.value) {
     const lastZoom = scene.value.bounds.w / lastView.value.w;
@@ -243,17 +236,12 @@ const onEscape = async () => {
       return;
     }
   }
-  if (selectTagId.value) {
-    emit("selectTagId", null);
-    return;
-  }
 }
 
 const zoomOut = () => {
   viewer.value?.setView(view.value);
 }
 
-// const scrollSleep = computed(() => !nativeScroll.value);
 const scrollSleep = computed(() => {
   return !nativeScroll.value || lastZoom.value > 1.0001;
 });
@@ -268,8 +256,6 @@ const {
 const { date: scrollDate } = useTimeline({ scene, viewport, scrollRatio });
 
 const view = computed(() => {
-  // console.log("view", region.value);
-
   if (region.value) {
     return region.value.bounds;
   }
@@ -285,44 +271,26 @@ const view = computed(() => {
   }
 });
 
-// watch(region, async (newRegion, oldRegion) => {
-//   if (newRegion == null && oldRegion == null) {
-//     // nativeScroll.value = false;
-//   } else if (newRegion === null && oldRegion != null) {
-//     // nativeScroll.value = true;
-//     await centerToBounds(oldRegion.bounds);
-//   }
-// });
-
-const selectBounds = async (op, bounds) => {
-  if (!tagsSupported.value) return;
-  let id = selectTagId.value;
-  if (!id) {
-    const tag = await addTag({
-      selection: true,
-      collection_id: collectionId.value,
-    });
-    id = tag.id;
-  }
-  const tag = await postTagFiles(id, {
-    op,
-    scene_id: scene.value.id,
-    bounds
-  })
-  id = tag.id;
-  emit("selectTagId", id);
-}
+const {
+  selectBounds
+} = useTags({
+  supported: tagsSupported,
+  selectTagId,
+  collectionId,
+  scene,
+});
 
 const onClick = async (event) => {
   if (!event) return false;
   if (region.value) return false;
   if (tagsSupported.value && (selectTagId.value || event.originalEvent.ctrlKey)) {
-    await selectBounds("INVERT", {
+    const id = await selectBounds("INVERT", {
       x: event.x,
       y: event.y,
       w: 0,
       h: 0,
     });
+    emit("selectTagId", id);
     return false;
   }
   const regions = await getRegions(scene.value?.id, event.x, event.y, 0, 0);
@@ -361,90 +329,15 @@ const onView = (event) => {
   if (!scene.value?.bounds.w) {
     return;
   }
-  if (lastView.value) {
-    const lastZoom = scene.value.bounds.w / lastView.value.w;
-    const viewZoom = scene.value.bounds.w / view.value?.w;
-    const zoom = scene.value.bounds.w / event.w;
-    const zoomDiff = zoom - lastZoom;
-    const zoomingOut = zoomDiff < -0.000001;
-    // if (zoom <= 1.1 && zoomingOut) {
-    //   exit();
-    //   return;
-    // }
-    // if (viewZoom) {
-    //   const ratio = zoom / viewZoom;
-    //   console.log("ratio", ratio);
-    //   if (ratio < 0.8 && zoomingOut) {
-    //     exit();
-    //     return;
-    //   }
-    // }
-    // console.log("zoom", zoom, "lastZoom", lastZoom, "viewZoom", viewZoom, "zoomDiff", zoomDiff, "zoomingOut", zoomingOut);
-    // if (zoom <= 1.1) {
-    //   // Zoom out to native scroll
-    //   if (!nativeScroll.value) {
-    //     nativeScroll.value = true;
-    //   }
-    // } else if (zoom >= 1.0001) {
-    //   // Zoom in via tileviewer movement (e.g. pinch gesture)
-    //   if (nativeScroll.value) {
-    //     nativeScroll.value = false;
-    //   }
-    // }
-    // if (zoom <= 1.1 && zoomingOut) {
-    //   // Zoom out to native scroll
-    //   if (!nativeScroll.value) {
-    //     nativeScroll.value = true;
-    //   }
-    // } else if (zoom >= 1.0001) {
-    //   // Zoom in via tileviewer movement (e.g. pinch gesture)
-    //   if (nativeScroll.value) {
-    //     nativeScroll.value = false;
-    //   }
-    // }
-  }
   lastView.value = event;
   if (!nativeScroll.value) {
     lastNonNativeView.value = event;
   }
-  // console.log("y", nativeScroll.value, event.y)
-  // console.log("view", Object.assign({}, view));
-  // console.log("region", Object.assign({}, region.value?.bounds));
-  // console.log("element", viewer.value?.elementFromView(view));
-  // console.log("screen", getScreenView(region.value?.bounds));
-  // const corners = viewer.value?.pixelCornersFromView(region.value?.bounds);
-  // console.log(
-  //   "x", corners?.tl[0],
-  //   "y", corners?.tl[1],
-  //   "w", corners?.br[0] - corners?.tl[0],
-  //   "h", corners?.br[1] - corners?.tl[1],
-  // );
   if (region.value?.bounds) {
     emit("elementView", getScreenView(region.value.bounds));
   }
 }
 
-const onMoveEnd = async (event) => {
-  if (!scene.value?.bounds.w || !view.value || !viewer.value) {
-    return;
-  }
-  // const viewZoom = scene.value.bounds.w / view.value.w;
-  // const moveZoom = scene.value.bounds.w / event.w;
-  const viewZoom = viewer.value.zoomFromView(view.value);
-  const moveZoom = viewer.value.zoomFromView(event);
-  const ratio = moveZoom / viewZoom;
-  // console.log("ratio", ratio);
-  
-  // if (ratio < 0.7) {
-  //   await exit();
-  //   return;
-  // }
-  // if (ratio < 1.1) {
-  //   zoomOut();
-  //   return;
-  // }
-}
-
 const onNav = async (event) => {
   if (event.x) {
     const valid = await navigate(event.x);
@@ -467,7 +360,8 @@ const onNav = async (event) => {
 
 const onBoxSelect = async (bounds, shift) => {
   const op = shift ? "SUBTRACT" : "ADD";
-  selectBounds(op, bounds);
+  const id = await selectBounds(op, bounds);
+  emit("selectTagId", id);
 }
 
 const onLoadEnd = (event) => {
diff --git a/ui/src/components/TileViewer.vue b/ui/src/components/TileViewer.vue
index f5588cd..289af00 100644
--- a/ui/src/components/TileViewer.vue
+++ b/ui/src/components/TileViewer.vue
@@ -174,7 +174,6 @@ export default {
     crossPanActive: {
       immediate: true,
       handler(active) {
-        // console.log("crossPanActive", active)
         this.crossPan?.setActive(active);
       }
     },
@@ -182,7 +181,6 @@ export default {
     dragPanActive: {
       immediate: true,
       handler(active) {
-        // console.log("dragPanActive", active)
         this.dragPan?.setActive(active);
       }
     },
@@ -407,7 +405,6 @@ export default {
       } else {
         return [
           main,
-          // clip,
         ];
       }
     },
@@ -607,9 +604,7 @@ export default {
     onNav(event) {
       if (event.x) {
         const dx = event.x > 0 ? 1 : -1;
-        // const dx = 1;
         const t = 150 / Math.abs(event.x);
-        // const t = 1;
         const cx = this.view.x;
         const cw = this.view.w;
         const vx = this.latestView.x;
@@ -905,15 +900,7 @@ export default {
         const zoomDiff = Math.abs(zoom - prevZoom);
 
         if (zoomDiff > 1e-4 && !options) {
-          // console.log(zoomDiff)
-          // const t = zoomDiff * 0.05;
-          // const t = zoomDiff * 0.2;
-          // const t = zoomDiff * 1;
-          // const t = Math.pow(zoomDiff, 0.5) * 0.08;
-          // const t = Math.pow(zoomDiff, 0.5) * 0.2;
-          // const t = Math.pow(zoomDiff, 2) * 0.01;
           const t = Math.pow(zoomDiff, 0.8) * 0.1;
-          // const t = Math.pow(zoomDiff, 1.5) * 0.08;
           options = { animationTime: t }
         }
       }
@@ -952,18 +939,6 @@ export default {
           options.ease == "out" ? easeOut :
           options.ease == "linear" ? linear :
           zoomEase,
-        // easing: function(x) {
-        //   return x * x * x * (x * (6.0 * x - 15.0) + 10.0);
-        // },
-        // easing: function(t) {
-        //   return Math.pow(t, 0.5) + 0.3;
-        // },
-        // easing: function(t) {
-        //   return Math.pow(2, -50 * t) * Math.sin(((t - 0.1) * (2 * Math.PI)) / 0.3) + 1
-        // },
-        // easing: function(t) {
-        //   return Math.pow(2, -80 * t) * Math.sin(((t - 0.1) * (2 * Math.PI)) / 0.3) + 1
-        // },
       } : undefined;
 
       const targetExtent = this.extentFromView(view);
@@ -984,7 +959,6 @@ export default {
 
 .container {
   position: relative;
-  /* padding-top: 60px; */
 }
 
 .container.focus {
diff --git a/ui/src/use.js b/ui/src/use.js
index b12e4ad..1a01d62 100644
--- a/ui/src/use.js
+++ b/ui/src/use.js
@@ -2,7 +2,7 @@ import { computed, ref, watch, watchEffect } from "vue";
 import { refDebounced, useElementSize } from '@vueuse/core';
 import { useTask, timeout } from "vue-concurrency";
 import { useRoute, useRouter } from "vue-router";
-import { useApi, useBufferApi } from "./api";
+import { addTag, postTagFiles, useApi, useBufferApi } from "./api";
 import qs from "qs";
 import { debounce } from "throttle-debounce";
 
@@ -405,3 +405,28 @@ export function useTimeline({ scene, viewport, scrollRatio }) {
     date,
   }
 }
+
+export function useTags({ supported, selectTagId, collectionId, scene }) {
+  const selectBounds = async (op, bounds) => {
+    if (!supported.value) return;
+    let id = selectTagId.value;
+    if (!id) {
+      const tag = await addTag({
+        selection: true,
+        collection_id: collectionId.value,
+      });
+      id = tag.id;
+    }
+    const tag = await postTagFiles(id, {
+      op,
+      scene_id: scene.value.id,
+      bounds
+    });
+    id = tag.id;
+    return id;
+  };
+
+  return {
+    selectBounds
+  };
+};

From 85b3f243dbf3de533736d91b8c3d1ae7bb888bc8 Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 17 Feb 2024 16:45:08 +0100
Subject: [PATCH 14/16] Replace paths for better back nav

---
 ui/src/components/CollectionView.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/CollectionView.vue b/ui/src/components/CollectionView.vue
index eeebfef..e17f714 100644
--- a/ui/src/components/CollectionView.vue
+++ b/ui/src/components/CollectionView.vue
@@ -229,14 +229,19 @@ const debug = computed(() => {
 
 const onRegion = async (region) => {
   if (!region) return;
-  router.push({
+  const r = {
     name: "region",
     params: {
       collectionId: collectionId.value,
       regionId: region?.id,
     },
     query: route.query,
-  });
+  };
+  if (regionId.value) {
+    router.replace(r);
+  } else {
+    router.push(r);
+  }
 }
 
 </script>

From b19a6fc665fe6dae1e4fde6f86134b6fa4f67522 Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 17 Feb 2024 17:12:57 +0100
Subject: [PATCH 15/16] Fix reloading and video controls again...

---
 ui/src/components/Overlays.vue    |  2 +-
 ui/src/components/VideoPlayer.vue | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/ui/src/components/Overlays.vue b/ui/src/components/Overlays.vue
index d464ad3..a0275e2 100644
--- a/ui/src/components/Overlays.vue
+++ b/ui/src/components/Overlays.vue
@@ -46,7 +46,7 @@ const {
 
 const overlay = ref(null);
 watch(region, (newRegion, oldRegion) => {
-  if (newRegion?.id == oldRegion?.id) return;
+  if (newRegion?.data?.id == oldRegion?.data?.id) return;
   overlay.value = newRegion;
 }, { immediate: true });
 
diff --git a/ui/src/components/VideoPlayer.vue b/ui/src/components/VideoPlayer.vue
index 744effc..54cc47a 100644
--- a/ui/src/components/VideoPlayer.vue
+++ b/ui/src/components/VideoPlayer.vue
@@ -59,15 +59,13 @@ export default {
     this.player.on("canplay", this.onCanPlay);
     this.player.on("playing", this.onPlaying);
     this.player.on("error", this.onError);
-    this.player.elements.controls.addEventListener("pointerenter", this.onControlsPointerEnter);
-    this.player.elements.controls.addEventListener("pointerleave", this.onControlsPointerLeave);
+    this.player.on("ready", this.addControlsListeners);
     this.player.source = this.source;
   },
 
   unmounted() {
     if (!this.player) return;
-    this.player.elements.controls.removeEventListener("pointerenter", this.onControlsPointerEnter);
-    this.player.elements.controls.removeEventListener("pointerleave", this.onControlsPointerLeave);
+    this.removeControlsListeners();
     this.player.off("loadstart", this.onLoadStart);
     this.player.off("canplay", this.onCanPlay);
     this.player.off("playing", this.onPlaying);
@@ -128,6 +126,17 @@ export default {
   },
 
   methods: {
+    addControlsListeners() {
+      this.removeControlsListeners();
+      if (!this.player?.elements?.controls) return;
+      this.player.elements.controls.addEventListener("pointerenter", this.onControlsPointerEnter);
+      this.player.elements.controls.addEventListener("pointerleave", this.onControlsPointerLeave);
+    },
+    removeControlsListeners() {
+      if (!this.player?.elements?.controls) return;
+      this.player.elements.controls.removeEventListener("pointerenter", this.onControlsPointerEnter);
+      this.player.elements.controls.removeEventListener("pointerleave", this.onControlsPointerLeave);
+    },
     onLoadStart() {
       this.loading++;
     },

From 0cb3c5cc92342b9806140b51d8fa72f51b0852cf Mon Sep 17 00:00:00 2001
From: Miha Lunar <mlunar@gmail.com>
Date: Sat, 17 Feb 2024 23:32:53 +0100
Subject: [PATCH 16/16] Fix tag search layout

---
 main.go | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/main.go b/main.go
index fb6919e..7bfd3dd 100644
--- a/main.go
+++ b/main.go
@@ -405,9 +405,6 @@ func (*Api) PostScenes(w http.ResponseWriter, r *http.Request) {
 	}
 	if data.Search != nil {
 		sceneConfig.Scene.Search = string(*data.Search)
-		if sceneConfig.Layout.Type != layout.Strip {
-			sceneConfig.Layout.Type = layout.Search
-		}
 	}
 
 	scene := sceneSource.Add(sceneConfig, imageSource)
@@ -439,9 +436,6 @@ func (*Api) GetScenes(w http.ResponseWriter, r *http.Request, params openapi.Get
 	}
 	if params.Search != nil {
 		sceneConfig.Scene.Search = string(*params.Search)
-		if sceneConfig.Layout.Type != layout.Strip {
-			sceneConfig.Layout.Type = layout.Search
-		}
 	}
 	collection := getCollectionById(string(params.CollectionId))
 	if collection == nil {