From 41b5fffa2ef17ff852c1efc227a5ad5c37dc5c7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 28 Mar 2024 10:49:29 +0100
Subject: [PATCH] Decrease the number of elements by 3. (#3283)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When geo shape has no url or text we don't show the html container
containing the label and link. This results in 3 fewer dom nodes per
empty geo shape (going from 7 to 4). Similarly for an arrow without the
text label we go from 13 to 10.

First paint experience with 2000 empty rectangle shapes
Before: 1.5-1.6s
After: 1.2-1.3s

2000 rectangles shapes with text is similar between the two, around
3.6s.

### Change Type

<!-- ❗ Please select a 'Scope' label ❗️ -->

- [x] `sdk` — Changes the tldraw SDK
- [ ] `dotcom` — Changes the tldraw.com web app
- [ ] `docs` — Changes to the documentation, examples, or templates.
- [ ] `vs code` — Changes to the vscode plugin
- [ ] `internal` — Does not affect user-facing stuff

<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `bugfix` — Bug fix
- [ ] `feature` — New feature
- [x] `improvement` — Improving existing features
- [ ] `chore` — Updating dependencies, other boring stuff
- [ ] `galaxy brain` — Architectural changes
- [ ] `tests` — Changes to any test code
- [ ] `tools` — Changes to infrastructure, CI, internal scripts,
debugging tools, etc.
- [ ] `dunno` — I don't know

### Release Notes

- Reduce the number of rendered dom nodes for geo shapes and arrows
without text.
---
 .../src/lib/shapes/arrow/ArrowShapeUtil.tsx   | 22 ++++----
 .../src/lib/shapes/geo/GeoShapeUtil.tsx       | 53 +++++++++++--------
 2 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx
index 09a616bfc..2895c5337 100644
--- a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx
+++ b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx
@@ -530,6 +530,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 		if (!info?.isValid) return null
 
 		const labelPosition = getArrowLabelPosition(this.editor, shape)
+		const isEditing = this.editor.getEditingShapeId() === shape.id
+		const showArrowLabel = isEditing || shape.props.text
 
 		return (
 			<>
@@ -539,15 +541,17 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						shouldDisplayHandles={shouldDisplayHandles && onlySelectedShape === shape}
 					/>
 				</SVGContainer>
-				<ArrowTextLabel
-					id={shape.id}
-					text={shape.props.text}
-					font={shape.props.font}
-					size={shape.props.size}
-					position={labelPosition.box.center}
-					width={labelPosition.box.w}
-					labelColor={shape.props.labelColor}
-				/>
+				{showArrowLabel && (
+					<ArrowTextLabel
+						id={shape.id}
+						text={shape.props.text}
+						font={shape.props.font}
+						size={shape.props.size}
+						position={labelPosition.box.center}
+						width={labelPosition.box.w}
+						labelColor={shape.props.labelColor}
+					/>
+				)}
 			</>
 		)
 	}
diff --git a/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx b/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx
index 9a703574a..a02786fde 100644
--- a/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx
+++ b/packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx
@@ -383,33 +383,42 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 		const { id, type, props } = shape
 		const { labelColor, fill, font, align, verticalAlign, size, text } = props
 
+		const isEditing = this.editor.getEditingShapeId() === id
+		const showHtmlContainer = isEditing || shape.props.url || shape.props.text
+
 		return (
 			<>
 				<SVGContainer id={id}>
 					<GeoShapeBody shape={shape} />
 				</SVGContainer>
-				<HTMLContainer
-					id={shape.id}
-					style={{ overflow: 'hidden', width: shape.props.w, height: shape.props.h + props.growY }}
-				>
-					<TextLabel
-						id={id}
-						type={type}
-						font={font}
-						fontSize={LABEL_FONT_SIZES[size]}
-						lineHeight={TEXT_PROPS.lineHeight}
-						fill={fill}
-						align={align}
-						verticalAlign={verticalAlign}
-						text={text}
-						labelColor={labelColor}
-						wrap
-						bounds={props.geo === 'cloud' ? this.getGeometry(shape).bounds : undefined}
-					/>
-					{shape.props.url && (
-						<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.getZoomLevel()} />
-					)}
-				</HTMLContainer>
+				{showHtmlContainer && (
+					<HTMLContainer
+						id={shape.id}
+						style={{
+							overflow: 'hidden',
+							width: shape.props.w,
+							height: shape.props.h + props.growY,
+						}}
+					>
+						<TextLabel
+							id={id}
+							type={type}
+							font={font}
+							fontSize={LABEL_FONT_SIZES[size]}
+							lineHeight={TEXT_PROPS.lineHeight}
+							fill={fill}
+							align={align}
+							verticalAlign={verticalAlign}
+							text={text}
+							labelColor={labelColor}
+							wrap
+							bounds={props.geo === 'cloud' ? this.getGeometry(shape).bounds : undefined}
+						/>
+						{shape.props.url && (
+							<HyperlinkButton url={shape.props.url} zoomLevel={this.editor.getZoomLevel()} />
+						)}
+					</HTMLContainer>
+				)}
 			</>
 		)
 	}