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;