fix: use line-height-based bounds for text elements

3 files changed, 6 insertions, 18 deletions

diff --git a/apps/web/content/changelog/0.3.0.md b/apps/web/content/changelog/0.3.0.md
index 92675321..b9338e80 100644
--- a/apps/web/content/changelog/0.3.0.md
+++ b/apps/web/content/changelog/0.3.0.md
@@ -81,5 +81,7 @@ changes:
     text: "You can now import transcript files to generate captions instead of running auto-transcription."

   - type: new

     text: "Graph editor for keyframe curves. Shape the easing between keyframes by dragging bezier handles."

+  - type: fixed

+    text: "Text element handles no longer shift position as you type."

 

 ---

diff --git a/apps/web/src/lib/text/layout.ts b/apps/web/src/lib/text/layout.ts
index 32d0d80e..75fa7f09 100644
--- a/apps/web/src/lib/text/layout.ts
+++ b/apps/web/src/lib/text/layout.ts
@@ -54,32 +54,19 @@ export function getMetricDescent({
 export function measureTextBlock({
 	lineMetrics,
 	lineHeightPx,
-	fallbackFontSize,
 }: {
 	lineMetrics: TextMetrics[];
 	lineHeightPx: number;
-	fallbackFontSize: number;
 }): TextBlockMeasurement {
-	let top = Number.POSITIVE_INFINITY;
-	let bottom = Number.NEGATIVE_INFINITY;
 	let maxWidth = 0;
 
-	for (let index = 0; index < lineMetrics.length; index++) {
-		const metrics = lineMetrics[index];
-		const lineY = index * lineHeightPx;
-		top = Math.min(
-			top,
-			lineY - getMetricAscent({ metrics, fallbackFontSize }),
-		);
-		bottom = Math.max(
-			bottom,
-			lineY + getMetricDescent({ metrics, fallbackFontSize }),
-		);
+	for (const metrics of lineMetrics) {
 		maxWidth = Math.max(maxWidth, metrics.width);
 	}
 
-	const height = bottom - top;
-	const visualCenterOffset = (top + bottom) / 2;
+	const lineCount = lineMetrics.length;
+	const height = lineCount * lineHeightPx;
+	const visualCenterOffset = ((lineCount - 1) * lineHeightPx) / 2;
 
 	return { visualCenterOffset, height, maxWidth };
 }
diff --git a/apps/web/src/lib/text/measure-element.ts b/apps/web/src/lib/text/measure-element.ts
index d2a4a84d..77efe1b8 100644
--- a/apps/web/src/lib/text/measure-element.ts
+++ b/apps/web/src/lib/text/measure-element.ts
@@ -72,7 +72,6 @@ export function measureTextElement({
 	const block = measureTextBlock({

 		lineMetrics,

 		lineHeightPx,

-		fallbackFontSize: scaledFontSize,

 	});

 

 	const bg = element.background;