From 937d3d3cfb9c09027932a4e70269f6330ad7ca3c Mon Sep 17 00:00:00 2001
From: Hornwitser <github@hornwitser.no>
Date: Wed, 15 Jan 2025 02:35:16 +0100
Subject: [PATCH] Add clamping of perspective origin in Viewport

If there are elements deep into the viewport near the top or bottom they
will end up obscured by the edge of the viewport when scrolling.  This
may be undesirable in some cases.  Implement a clamping of the allowed
range of the perspective origin to give better control over the
perspective and what it obscures.
---
 src/components/Viewport.tsx | 10 ++++++-
 web/viewport.js             | 52 ++++++++++++++++++++++++++++++++++++-
 2 files changed, 60 insertions(+), 2 deletions(-)

diff --git a/src/components/Viewport.tsx b/src/components/Viewport.tsx
index 72973d6..8222998 100644
--- a/src/components/Viewport.tsx
+++ b/src/components/Viewport.tsx
@@ -4,9 +4,17 @@
 export default function Viewport(
 	props: {
 		children: unknown,
+		clampTop?: number,
+		clampBottom?: number,
 	}
 ) {
-	return <div class="viewport in3d">
+	const viewportProps: any = {};
+	if (props.clampTop !== undefined) viewportProps["data-clamp-top"] = String(props.clampTop);
+	if (props.clampBottom !== undefined) viewportProps["data-clamp-bottom"] = String(props.clampBottom);
+	return <div
+		class="viewport in3d"
+		{...viewportProps}
+	>
 		{ props.children }
 	</div>
 }
diff --git a/web/viewport.js b/web/viewport.js
index a61d374..20aa3c6 100644
--- a/web/viewport.js
+++ b/web/viewport.js
@@ -32,6 +32,23 @@ function getWindowHeight(event) {
 	return window.innerHeight + heightOffset;
 }
 
+/**
+	Returns x rescaled such that the values in the range a-b are mapped to the range c-d.
+*/
+function rescaleRange(x, a, b, c, d){
+	return c + (x - a) * (d - c) / (b - a);
+}
+
+/**
+	If value is not undefined return it parsed as a float, otherwise returns undefined.
+*/
+function maybeFloat(value) {
+	if (value === undefined) {
+		return undefined;
+	}
+	return Number.parseFloat(value);
+}
+
 function setViewportOffset(viewport, windowHeight) {
 
 	/*
@@ -57,13 +74,46 @@ function setViewportOffset(viewport, windowHeight) {
 	*/
 	const documentRect = document.documentElement.getBoundingClientRect();
 	const endOffset = viewportRect.height * 0.25;
-	const origin = Math.min(
+	let origin = Math.min(
 		(viewportRect.bottom - documentRect.top) - endOffset,
 		Math.max(
 			windowHeight / 2,
 			windowHeight - (documentRect.bottom - viewportRect.top) + endOffset,
 		)
 	);
+
+	/*
+		In some cases it's undesirable to let the perspective origin move too far
+		away in one or both directions as it causes elements inside the 3d view to
+		become obscured by the top/bottom of the viewport. To aid with this
+		optionally clamp how far the perspective origin can move relative to the top
+		and bottom.
+
+		This is done by calculating how far the origin can go un-clamped while the
+		viewport is visible on the screen and then rescaling the range of the
+		perspective origin from it's un-clamped range to its clamped range.
+	*/
+	const clampTop = maybeFloat(viewport.dataset.clampTop);
+	const clampBottom = maybeFloat(viewport.dataset.clampBottom);
+	if (clampBottom !== undefined || clampTop !== undefined) {
+		const rootFontSize = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+		const topOrigin = Math.min(
+			viewportRect.bottom - endOffset,
+			Math.max(viewportRect.top, documentRect.top + windowHeight) - windowHeight / 2,
+		)
+		const topClampPosition = rootFontSize * (clampTop ?? -Infinity) + viewportRect.top;
+		const topLimit = Math.max(topOrigin, topClampPosition);
+
+		const bottomOrigin = Math.max(
+			viewportRect.top + endOffset,
+			Math.min(viewportRect.bottom, documentRect.bottom - windowHeight) + windowHeight / 2,
+		)
+		const bottomClampPosition = rootFontSize * (clampBottom ?? +Infinity) + viewportRect.bottom;
+		const bottomLimit = Math.min(bottomOrigin, bottomClampPosition);
+
+		origin = rescaleRange(origin, topOrigin, bottomOrigin, topLimit, bottomLimit);
+	}
+
 	const yOffset = origin - viewportRect.top;
 	viewport.style.setProperty('perspective-origin', `50% ${yOffset}px`);
 }