perf(arrows): use reactive hooks for arrow handle display and editing state (tldraw#8167)

Previously, any change to any shape would cause all arrows to render. We
should be careful with any reactive call to getOnlySelectedShape,
because it will call when the selected shape is changing. If we need to
react to a change in which shape is selected, we should use
getOnlySelectedShapeId.

In order to reduce unnecessary re-renders of arrow components, this PR
changes a call to `getOnlySelectedShape()?.id` to
`getOnlySelectedShapeId`.

To avoid an extra render when editing shape changes, it also wraps
`shouldDisplayHandles` and `isEditing` checks in `useValue` hooks for
finer-grained reactivity. It also refactors `getArrowLabelPosition` to
accept `isEditing` as a parameter rather than computing it internally,
avoiding redundant reactive lookups.

### Change type

- [x] `improvement`

### Test plan

1. Create arrows between shapes
2. Select an arrow — handles should display correctly
3. Double-click an arrow label to edit — label positioning should work
as before
4. Deselect and verify handles disappear

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Improve arrow component rendering performance with finer-grained
reactivity


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Touches arrow rendering reactivity (selection/editing state and label
positioning), so regressions could show up as missing handles or
mispositioned labels, but the changes are localized to UI/perf code.
> 
> **Overview**
> Reduces unnecessary arrow re-renders by switching arrow component
state derivations to fine-grained `useValue` subscriptions (e.g.
`shouldDisplayHandles`, selection, and editing state) and by preferring
`getOnlySelectedShapeId()` over `getOnlySelectedShape()` where only the
id is needed.
> 
> Refactors `getArrowLabelPosition` to accept an explicit `isEditing`
flag and updates all call sites (geometry, component render, and SVG
export) to avoid redundant reactive lookups when computing label bounds.
Also updates touch-end handling in `useCanvasEvents` to use
`editor.getEditingShapeId()`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e04558e. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: steveruizok

packages/editor/src/lib/hooks/useCanvasEvents.ts

@@ -78,7 +78,7 @@ export function useCanvasEvents() {
 				// check that e.target is an HTMLElement
 				if (!(e.target instanceof HTMLElement)) return
 
-				const editingShapeId = editor.getEditingShape()?.id
+				const editingShapeId = editor.getEditingShapeId()
 				if (
 					// if the target is not inside the editing shape
 					!(editingShapeId && e.target.closest(`[data-shape-id="${editingShapeId}"]`)) &&

packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import {
 	Arc2d,
 	Box,
@@ -45,6 +46,7 @@ import {
 	useEditor,
 	useIsEditing,
 	useSharedSafeId,
+	useValue,
 } from '@tldraw/editor'
 import React, { useMemo } from 'react'
 import { updateArrowTerminal } from '../../bindings/arrow/ArrowBindingUtil'
@@ -220,7 +222,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 
 		let labelGeom
 		if (isEditing || !isEmptyRichText(shape.props.richText)) {
-			const labelPosition = getArrowLabelPosition(this.editor, shape)
+			const labelPosition = getArrowLabelPosition(this.editor, shape, isEditing)
 			if (debugFlags.debugGeometry.get()) {
 				debugGeom.push(...labelPosition.debugGeom)
 			}
@@ -755,33 +757,50 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 	}
 
 	component(shape: TLArrowShape) {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
+		const { editor } = this
+
 		const theme = useDefaultColorTheme()
-		const onlySelectedShape = this.editor.getOnlySelectedShape()
-		const shouldDisplayHandles =
-			this.editor.isInAny(
-				'select.idle',
-				'select.pointing_handle',
-				'select.dragging_handle',
-				'select.translating',
-				'arrow.dragging'
-			) && !this.editor.getIsReadonly()
 
-		const info = getArrowInfo(this.editor, shape)
+		const shouldDisplayHandles = useValue(
+			'should display handles',
+			() => {
+				const { editor } = this
+				return (
+					!editor.getIsReadonly() &&
+					editor.getOnlySelectedShapeId() === shape.id &&
+					editor.isInAny(
+						'select.idle',
+						'select.pointing_handle',
+						'select.dragging_handle',
+						'select.translating',
+						'arrow.dragging'
+					)
+				)
+			},
+			[editor, shape.id]
+		)
+
+		const isSelected = useValue(
+			'is selected',
+			() => editor.getOnlySelectedShape()?.id === shape.id,
+			[editor, shape.id]
+		)
+
+		const isEditing = useValue('is editing', () => editor.getEditingShapeId() === shape.id, [
+			editor,
+			shape.id,
+		])
+
+		const info = getArrowInfo(editor, shape)
 		if (!info?.isValid) return null
 
-		const labelPosition = getArrowLabelPosition(this.editor, shape)
-		const isSelected = shape.id === this.editor.getOnlySelectedShapeId()
-		const isEditing = this.editor.getEditingShapeId() === shape.id
+		const labelPosition = getArrowLabelPosition(editor, shape, isEditing)
 		const showArrowLabel = isEditing || !isEmptyRichText(shape.props.richText)
 
 		return (
 			<>
 				<SVGContainer style={{ minWidth: 50, minHeight: 50 }}>
-					<ArrowSvg
-						shape={shape}
-						shouldDisplayHandles={shouldDisplayHandles && onlySelectedShape?.id === shape.id}
-					/>
+					<ArrowSvg shape={shape} shouldDisplayHandles={shouldDisplayHandles} />
 					{shape.props.kind === 'elbow' && debugFlags.debugElbowArrows.get() && (
 						<ElbowArrowDebug arrow={shape} />
 					)}
@@ -798,7 +817,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						labelColor={getColorValue(theme, shape.props.labelColor, 'solid')}
 						richText={shape.props.richText}
 						textWidth={labelPosition.box.w - ARROW_LABEL_PADDING * 2 * shape.props.scale}
-						isSelected={isSelected}
+						isSelected={isSelected} // does this HAVE to be isSelected? or isOnlySelected?
 						padding={0}
 						showTextOutline={this.options.showTextOutline}
 						style={{
@@ -811,9 +830,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 	}
 
 	indicator(shape: TLArrowShape) {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
 		const isEditing = useIsEditing(shape.id)
-		// eslint-disable-next-line react-hooks/rules-of-hooks
+
 		const clipPathId = useSharedSafeId(shape.id + '_clip')
 
 		const info = getArrowInfo(this.editor, shape)
@@ -1072,7 +1090,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 					verticalAlign="middle"
 					labelColor={getColorValue(theme, shape.props.labelColor, 'solid')}
 					richText={shape.props.richText}
-					bounds={getArrowLabelPosition(this.editor, shape)
+					bounds={getArrowLabelPosition(this.editor, shape, false)
 						.box.clone()
 						.expandBy(-ARROW_LABEL_PADDING * shape.props.scale)}
 					padding={0}
@@ -1185,7 +1203,7 @@ const ArrowSvg = track(function ArrowSvg({
 		})
 	}
 
-	const labelPosition = getArrowLabelPosition(editor, shape)
+	const labelPosition = getArrowLabelPosition(editor, shape, isEditing)
 
 	const clipStartArrowhead = !(info.start.arrowhead === 'none' || info.start.arrowhead === 'arrow')
 	const clipEndArrowhead = !(info.end.arrowhead === 'none' || info.end.arrowhead === 'arrow')

packages/tldraw/src/lib/shapes/arrow/arrowLabel.ts

@@ -226,8 +226,7 @@ interface ArrowheadInfo {
 	hasStartArrowhead: boolean
 	hasEndArrowhead: boolean
 }
-export function getArrowLabelPosition(editor: Editor, shape: TLArrowShape) {
-	const isEditing = editor.getEditingShapeId() === shape.id
+export function getArrowLabelPosition(editor: Editor, shape: TLArrowShape, isEditing: boolean) {
 	if (!isEditing && isEmptyRichText(shape.props.richText)) {
 		// Short-circuit for empty labels.
 		const bodyGeom = getArrowBodyGeometry(editor, shape)