From 736a9461013747d4f097eeff8ab67ddbd4f5de50 Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jrasm91@gmail.com>
Date: Fri, 21 Apr 2023 17:24:25 -0400
Subject: [PATCH] fix(web): justified layout (#2313)

---
 .../gallery-viewer/gallery-viewer.svelte      | 50 ++++++++++---------
 1 file changed, 26 insertions(+), 24 deletions(-)

diff --git a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
index 383e44e443..11541f4ab5 100644
--- a/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
+++ b/web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte
@@ -32,25 +32,24 @@
 	let viewWidth: number;
 
 	$: isMultiSelectionMode = selectedAssets.size > 0;
+	$: geometry = justifiedLayout(assets.map(getAssetRatio), {
+		boxSpacing: 5,
+		containerWidth: Math.floor(viewWidth),
+		targetRowHeight: 235
+	});
+
+	function getAssetRatio(asset: AssetResponseDto) {
+		let height = asset.exifInfo?.exifImageHeight || 235;
+		let width = asset.exifInfo?.exifImageWidth || 235;
 
-	function getAssetRatio(asset: AssetResponseDto): number {
-		const height = asset.exifInfo?.exifImageHeight;
-		const width = asset.exifInfo?.exifImageWidth;
 		const orientation = Number(asset.exifInfo?.orientation);
-
-		if (height && width) {
-			if (orientation) {
-				if (orientation == 6 || orientation == -90) {
-					return height / width;
-				} else {
-					return width / height;
-				}
+		if (orientation) {
+			if (orientation == 6 || orientation == -90) {
+				[width, height] = [height, width];
 			}
-
-			return width / height;
 		}
 
-		return 1;
+		return { width, height };
 	}
 
 	const viewAssetHandler = (event: CustomEvent) => {
@@ -122,20 +121,23 @@
 </script>
 
 {#if assets.length > 0}
-	<div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
+	<div
+		class="relative w-full mb-20"
+		bind:clientWidth={viewWidth}
+		style="height: {geometry.containerHeight}px"
+	>
 		{#if viewWidth}
-			{@const geoArray = assets.map(getAssetRatio)}
-			{@const justifiedLayoutResult = justifiedLayout(geoArray, {
-				targetRowHeight: 235,
-				containerWidth: Math.floor(viewWidth)
-			})}
-
 			{#each assets as asset, index (asset.id)}
-				<div animate:flip={{ duration: 500 }}>
+				{@const box = geometry.boxes[index]}
+				<div
+					class="absolute"
+					style="width: {box.width}px; height: {box.height}px; top: {box.top}px; left: {box.left}px"
+					animate:flip={{ duration: 500 }}
+				>
 					<Thumbnail
 						{asset}
-						thumbnailWidth={justifiedLayoutResult.boxes[index].width || 235}
-						thumbnailHeight={justifiedLayoutResult.boxes[index].height || 235}
+						thumbnailWidth={box.width}
+						thumbnailHeight={box.height}
 						readonly={disableAssetSelect}
 						publicSharedKey={sharedLink?.key}
 						format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}