From 2a7b2dcdfd08aa15f892ecbfbe3e7a1fc4e021d4 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Fri, 19 May 2023 12:19:11 +0100
Subject: [PATCH] [improvement] set horizontal position using text alignment
 (#1419)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR makes it so that horizontal alignment in geo and sticky note
shapes also effects the position of the text within the shape.

<img width="1169" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/96b28a7d-0f13-46ba-9ea1-82d02b4f870b">

<img width="1274" alt="image"
src="https://github.com/tldraw/tldraw/assets/23072548/fa768c71-4e9e-4cfe-ad8a-94d7700c445d">

This PR also places the shape's label at the center when there is no
text and the shape is not editing.

### Change Type

- [x] `minor` — New Feature

### Test Plan

1. Create shapes with labels
2. Confirm that their labels are positioned correctly
3. Export the shapes and verify the export

### Release Notes

- Geo shapes and sticky notes now position their labels based on their
alignment.
---
 packages/editor/editor.css                    |  1 +
 .../app/shapeutils/TLGeoUtil/TLGeoUtil.tsx    | 12 ++++++++--
 .../app/shapeutils/TLNoteUtil/TLNoteUtil.tsx  | 22 +------------------
 .../lib/app/shapeutils/shared/TextLabel.tsx   | 13 +++++++++--
 .../shapeutils/shared/getTextSvgElement.ts    |  4 ++--
 5 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/packages/editor/editor.css b/packages/editor/editor.css
index 893849568..c063d33b1 100644
--- a/packages/editor/editor.css
+++ b/packages/editor/editor.css
@@ -1002,6 +1002,7 @@ input,
 	height: 100%;
 	display: flex;
 	justify-content: center;
+	align-items: center;
 	color: var(--color-text);
 	text-shadow: var(--tl-text-outline);
 	overflow: hidden;
diff --git a/packages/editor/src/lib/app/shapeutils/TLGeoUtil/TLGeoUtil.tsx b/packages/editor/src/lib/app/shapeutils/TLGeoUtil/TLGeoUtil.tsx
index ab79284a7..9f540f901 100644
--- a/packages/editor/src/lib/app/shapeutils/TLGeoUtil/TLGeoUtil.tsx
+++ b/packages/editor/src/lib/app/shapeutils/TLGeoUtil/TLGeoUtil.tsx
@@ -672,8 +672,16 @@ export class TLGeoUtil extends TLBoxUtil<TLGeoShape> {
 				width: labelSize.w,
 			})
 
-			// yuck, include padding as magic number
-			textBgEl.setAttribute('transform', `translate(${(bounds.width - labelSize.w) / 2}, 0)`)
+			switch (shape.props.align) {
+				case 'middle': {
+					textBgEl.setAttribute('transform', `translate(${(bounds.width - labelSize.w) / 2}, 0)`)
+					break
+				}
+				case 'end': {
+					textBgEl.setAttribute('transform', `translate(${bounds.width - labelSize.w}, 0)`)
+					break
+				}
+			}
 
 			const textElm = textBgEl.cloneNode(true) as SVGTextElement
 			textElm.setAttribute('fill', colors.fill[shape.props.labelColor])
diff --git a/packages/editor/src/lib/app/shapeutils/TLNoteUtil/TLNoteUtil.tsx b/packages/editor/src/lib/app/shapeutils/TLNoteUtil/TLNoteUtil.tsx
index 00a1723ca..5c37ee0d5 100644
--- a/packages/editor/src/lib/app/shapeutils/TLNoteUtil/TLNoteUtil.tsx
+++ b/packages/editor/src/lib/app/shapeutils/TLNoteUtil/TLNoteUtil.tsx
@@ -151,27 +151,7 @@ export class TLNoteUtil extends TLShapeUtil<TLNoteShape> {
 			...opts,
 		})
 
-		const maxWidth = lines.reduce((max, line) => {
-			return Math.max(
-				max,
-				this.app.textMeasure.measureText({
-					...TEXT_PROPS,
-					text: line.trim(),
-					fontFamily: opts.fontFamily,
-					fontSize: opts.fontSize,
-					width: 'fit-content',
-					padding: `0px`,
-				}).w
-			)
-		}, 0)
-
-		if (shape.props.align === 'start') {
-			opts.padding = (bounds.width - maxWidth) / 2
-		} else if (shape.props.align === 'end') {
-			opts.padding = -(bounds.width - maxWidth) / 2
-		} else {
-			opts.padding = PADDING
-		}
+		opts.padding = PADDING
 		opts.width = bounds.width
 
 		const textElm = getTextSvgElement(this.app, {
diff --git a/packages/editor/src/lib/app/shapeutils/shared/TextLabel.tsx b/packages/editor/src/lib/app/shapeutils/shared/TextLabel.tsx
index 5155be9f1..9c1141503 100644
--- a/packages/editor/src/lib/app/shapeutils/shared/TextLabel.tsx
+++ b/packages/editor/src/lib/app/shapeutils/shared/TextLabel.tsx
@@ -48,6 +48,8 @@ export const TextLabel = React.memo(function TextLabel<
 	} = useEditableText(id, type, text)
 
 	const isInteractive = isEditing || isEditableFromHover
+	const finalText = TextHelpers.normalizeTextForDom(text)
+	const hasText = finalText.trim().length > 0
 
 	return (
 		<div
@@ -57,7 +59,14 @@ export const TextLabel = React.memo(function TextLabel<
 			data-hastext={!isEmpty}
 			data-isediting={isEditing}
 			data-textwrap={!!wrap}
-			style={{ alignItems: verticalAlign === 'middle' ? 'center' : verticalAlign }}
+			style={
+				hasText || isInteractive
+					? {
+							justifyContent: align === 'middle' ? 'center' : align,
+							alignItems: verticalAlign === 'middle' ? 'center' : verticalAlign,
+					  }
+					: undefined
+			}
 		>
 			<div
 				className="tl-text-label__inner"
@@ -70,7 +79,7 @@ export const TextLabel = React.memo(function TextLabel<
 				}}
 			>
 				<div className="tl-text tl-text-content" dir="ltr">
-					{TextHelpers.normalizeTextForDom(text)}
+					{finalText}
 				</div>
 				{isInteractive ? (
 					// Consider replacing with content-editable
diff --git a/packages/editor/src/lib/app/shapeutils/shared/getTextSvgElement.ts b/packages/editor/src/lib/app/shapeutils/shared/getTextSvgElement.ts
index 4a40885b9..ffdf958df 100644
--- a/packages/editor/src/lib/app/shapeutils/shared/getTextSvgElement.ts
+++ b/packages/editor/src/lib/app/shapeutils/shared/getTextSvgElement.ts
@@ -41,6 +41,8 @@ export function getTextSvgElement(
 
 	const innerHeight = lines.length * (opts.lineHeight * opts.fontSize)
 
+	const offsetX = padding
+
 	let offsetY: number
 	switch (opts.verticalTextAlign) {
 		case 'start': {
@@ -56,8 +58,6 @@ export function getTextSvgElement(
 		}
 	}
 
-	const offsetX = padding
-
 	// Create text span elements for each line
 	for (let i = 0; i < lines.length; i++) {
 		const tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')