Re-init viewer on resize

src/components/ViewScan.vue

@@ -4,6 +4,7 @@ import OpenSeadragon from 'openseadragon';
 
 import { preventEvent } from '../modules/keyboard';
 import { createPromise } from '../modules/promise';
+import { createResizeObserver, destroyResizeObserver } from '../modules/resize';
 
 const gapBetweenPages = 0.01;
 
@@ -87,6 +88,8 @@ export default {
 		this.$store.rootElement.addEventListener('keypress', this.onKeypress);
 	},
 	beforeUnmount() {
+		destroyResizeObserver(this.$el, this.initViewer);
+
 		if (this.viewer) {
 			this.viewer.destroy();
 		}
@@ -348,9 +351,11 @@ export default {
 					});
 
 					this.initViewer(reset);
+					createResizeObserver(this.$el, this.initViewer.bind(null, reset));
 				});
 			} else {
 				this.initViewer(reset);
+				createResizeObserver(this.$el, this.initViewer.bind(null, reset));
 			}
 		},
 		onKeydown(event) {

src/components/ViewThumbnails.vue

@@ -1,4 +1,5 @@
 <script>
+import { createResizeObserver, destroyResizeObserver } from '../modules/resize';
 import { scrollTo, updateScrollPos } from '../modules/scroll';
 
 const longTouchDuration = 750;
@@ -12,8 +13,6 @@ export default {
 			itemsPerRow: 0,
 			knownImages: [],
 			lastScrollTop: 0,
-			resizeObserver: null,
-			resizeTimeout: null,
 			style: {},
 			thumbnailWidth: 0,
 			touchTimeout: null,
@@ -48,28 +47,14 @@ export default {
 	mounted() {
 		this.style.flex = this.$el.style.flex;
 	},
-	unmounted() {
-		this.resizeObserver?.disconnect();
-		clearTimeout(this.resizeTimeout);
+	beforeUnmount() {
+		destroyResizeObserver(this.$el, this.updateDimensions);
 	},
 	methods: {
 		init() {
 			this.updateDimensions();
 			this.scrollToCurrentPage(false);
-
-			this.resizeObserver = new ResizeObserver(this.onResize);
-			this.resizeObserver.observe(this.$el);
-		},
-		onResize() {
-			clearTimeout(this.resizeTimeout);
-
-			this.resizeTimeout = setTimeout(() => {
-				if (this.$store.options.view !== 'thumbnails') {
-					return;
-				}
-
-				this.updateDimensions();
-			}, 200);
+			createResizeObserver(this.$el, this.updateDimensions);
 		},
 		updateDimensions() {
 			const itemTemplate = this.$refs.container.querySelector('.tify-thumbnails-item');

src/modules/resize.js

@@ -0,0 +1,50 @@
+const instances = [];
+
+function getInstance(el, callback) {
+	return instances.find((instance) => {
+		const callbackName = callback.name.replace(/bound /g, '');
+		return instance.el === el && instance.callbackName === callbackName;
+	});
+}
+
+export function createResizeObserver(el, callback) {
+	if (getInstance(el, callback)) {
+		return;
+	}
+
+	const instance = {
+		el,
+		callbackName: callback.name.replace(/bound /g, ''),
+		timeout: null,
+	};
+
+	instance.resizeObserver = new ResizeObserver(() => {
+		if (!instance.timeout) {
+			callback();
+			instance.timeout = -1;
+			return;
+		}
+
+		clearTimeout(instance.timeout);
+
+		instance.timeout = setTimeout(callback, 100);
+	});
+
+	instance.resizeObserver.observe(el);
+
+	instances.push(instance);
+}
+
+export function destroyResizeObserver(el, callback) {
+	const instance = getInstance(el, callback);
+
+	if (!instance) {
+		return;
+	}
+
+	instance.resizeObserver?.disconnect();
+	clearTimeout(instance.timeout);
+
+	const instanceIndex = instances.findIndex((ins) => ins.el === el && ins.callbackName === instance.callbackName);
+	instances.splice(instanceIndex, 1);
+}