@tldraw/editor 4.3.0 → 4.4.0-canary.09e80a09d230

package/src/lib/components/default-components/CanvasShapeIndicators.tsx

@@ -0,0 +1,244 @@
+import { useComputed, useQuickReactor } from '@tldraw/state-react'
+import { createComputedCache } from '@tldraw/store'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import { dedupe, isEqual } from '@tldraw/utils'
+import { memo, useEffect, useRef } from 'react'
+import { Editor } from '../../editor/Editor'
+import { TLIndicatorPath } from '../../editor/shapes/ShapeUtil'
+import { useEditor } from '../../hooks/useEditor'
+import { useIsDarkMode } from '../../hooks/useIsDarkMode'
+import { useActivePeerIds$ } from '../../hooks/usePeerIds'
+
+interface CollaboratorIndicatorData {
+	color: string
+	shapeIds: TLShapeId[]
+}
+
+const indicatorPathCache = createComputedCache(
+	'indicatorPath',
+	(editor: Editor, shape: TLShape) => {
+		const util = editor.getShapeUtil(shape)
+		return util.getIndicatorPath(shape)
+	}
+)
+
+const getIndicatorPath = (editor: Editor, shape: TLShape) => {
+	return indicatorPathCache.get(editor, shape.id)
+}
+
+function renderShapeIndicator(
+	ctx: CanvasRenderingContext2D,
+	editor: Editor,
+	shapeId: TLShapeId,
+	renderingShapeIds: Set<TLShapeId>
+): boolean {
+	if (!renderingShapeIds.has(shapeId)) return false
+
+	const shape = editor.getShape(shapeId)
+	if (!shape || shape.isLocked) return false
+
+	const pageTransform = editor.getShapePageTransform(shape)
+	if (!pageTransform) return false
+
+	const indicatorPath = getIndicatorPath(editor, shape)
+	if (!indicatorPath) return false
+
+	ctx.save()
+	ctx.transform(
+		pageTransform.a,
+		pageTransform.b,
+		pageTransform.c,
+		pageTransform.d,
+		pageTransform.e,
+		pageTransform.f
+	)
+	renderIndicatorPath(ctx, indicatorPath)
+	ctx.restore()
+
+	return true
+}
+
+function renderIndicatorPath(ctx: CanvasRenderingContext2D, indicatorPath: TLIndicatorPath) {
+	if (indicatorPath instanceof Path2D) {
+		ctx.stroke(indicatorPath)
+	} else {
+		const { path, clipPath, additionalPaths } = indicatorPath
+
+		if (clipPath) {
+			ctx.save()
+			ctx.clip(clipPath, 'evenodd')
+			ctx.stroke(path)
+			ctx.restore()
+		} else {
+			ctx.stroke(path)
+		}
+
+		if (additionalPaths) {
+			for (const additionalPath of additionalPaths) {
+				ctx.stroke(additionalPath)
+			}
+		}
+	}
+}
+
+/** @internal @react */
+export const CanvasShapeIndicators = memo(function CanvasShapeIndicators() {
+	const editor = useEditor()
+	const canvasRef = useRef<HTMLCanvasElement>(null)
+
+	// Cache the selected color to avoid getComputedStyle on every render
+	const rSelectedColor = useRef<string | null>(null)
+	const isDarkMode = useIsDarkMode()
+
+	useEffect(() => {
+		const timer = editor.timers.setTimeout(() => {
+			rSelectedColor.current = null
+		}, 0)
+		return () => clearTimeout(timer)
+	}, [isDarkMode, editor])
+
+	// Get active peer IDs (already handles time-based state transitions)
+	const activePeerIds$ = useActivePeerIds$()
+
+	const $renderData = useComputed(
+		'indicator render data',
+		() => {
+			const renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))
+
+			// Compute ids to display for selected/hovered shapes
+			const idsToDisplay = new Set<TLShapeId>()
+			const instanceState = editor.getInstanceState()
+			const isChangingStyle = instanceState.isChangingStyle
+			const isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')
+			const isInSelectState = editor.isInAny(
+				'select.brushing',
+				'select.scribble_brushing',
+				'select.pointing_shape',
+				'select.pointing_selection',
+				'select.pointing_handle'
+			)
+
+			if (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {
+				for (const id of editor.getSelectedShapeIds()) {
+					idsToDisplay.add(id)
+				}
+				if (isIdleOrEditing && instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
+					const hovered = editor.getHoveredShapeId()
+					if (hovered) idsToDisplay.add(hovered)
+				}
+			}
+
+			// Compute hinting shape ids
+			const hintingShapeIds = dedupe(editor.getHintingShapeIds())
+
+			// Compute collaborator indicators
+			const collaboratorIndicators: CollaboratorIndicatorData[] = []
+			const currentPageId = editor.getCurrentPageId()
+			const activePeerIds = activePeerIds$.get()
+
+			const collaborators = editor.getCollaborators()
+			for (const peerId of activePeerIds.values()) {
+				// Skip collaborators on different pages
+				const presence = collaborators.find((c) => c.userId === peerId)
+				if (!presence || presence.currentPageId !== currentPageId) continue
+
+				// Filter to shapes that are visible and on the current rendering set
+				const visibleShapeIds = presence.selectedShapeIds.filter(
+					(id) => renderingShapeIds.has(id) && !editor.isShapeHidden(id)
+				)
+
+				if (visibleShapeIds.length > 0) {
+					collaboratorIndicators.push({
+						color: presence.color,
+						shapeIds: visibleShapeIds,
+					})
+				}
+			}
+
+			return {
+				idsToDisplay,
+				renderingShapeIds,
+				hintingShapeIds,
+				collaboratorIndicators,
+			}
+		},
+		{ isEqual: isEqual },
+		[editor, activePeerIds$]
+	)
+
+	useQuickReactor(
+		'canvas indicators render',
+		() => {
+			const canvas = canvasRef.current
+			if (!canvas) return
+
+			const ctx = canvas.getContext('2d')
+			if (!ctx) return
+
+			const { idsToDisplay, renderingShapeIds, hintingShapeIds, collaboratorIndicators } =
+				$renderData.get()
+
+			const { w, h } = editor.getViewportScreenBounds()
+			const dpr = window.devicePixelRatio || 1
+			const { x: cx, y: cy, z: zoom } = editor.getCamera()
+
+			const canvasWidth = Math.ceil(w * dpr)
+			const canvasHeight = Math.ceil(h * dpr)
+
+			if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
+				canvas.width = canvasWidth
+				canvas.height = canvasHeight
+				canvas.style.width = `${w}px`
+				canvas.style.height = `${h}px`
+			}
+
+			ctx.resetTransform()
+			ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+			ctx.scale(dpr, dpr)
+			ctx.scale(zoom, zoom)
+			ctx.translate(cx, cy)
+
+			ctx.lineCap = 'round'
+			ctx.lineJoin = 'round'
+
+			// Draw collaborator indicators first (underneath local indicators)
+			// Use 0.5 opacity to match the original SVG-based collaborator indicators
+			ctx.lineWidth = 1.5 / zoom
+			for (const collaborator of collaboratorIndicators) {
+				ctx.strokeStyle = collaborator.color
+				ctx.globalAlpha = 0.7
+				for (const shapeId of collaborator.shapeIds) {
+					renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)
+				}
+			}
+
+			// Reset alpha for local indicators
+			ctx.globalAlpha = 1.0
+
+			// Use cached color, only call getComputedStyle when cache is empty
+			if (!rSelectedColor.current) {
+				rSelectedColor.current = getComputedStyle(canvas).getPropertyValue('--tl-color-selected')
+			}
+
+			ctx.strokeStyle = rSelectedColor.current
+
+			// Draw selected/hovered indicators (1.5px stroke)
+			ctx.lineWidth = 1.5 / zoom
+			for (const shapeId of idsToDisplay) {
+				renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)
+			}
+
+			// Draw hinted indicators with a thicker stroke (2.5px)
+			if (hintingShapeIds.length > 0) {
+				ctx.lineWidth = 2.5 / zoom
+				for (const shapeId of hintingShapeIds) {
+					renderShapeIndicator(ctx, editor, shapeId, renderingShapeIds)
+				}
+			}
+		},
+		[editor, $renderData]
+	)
+
+	return <canvas ref={canvasRef} className="tl-canvas-indicators" />
+})

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -26,6 +26,7 @@ import { GeometryDebuggingView } from '../GeometryDebuggingView'
 import { LiveCollaborators } from '../LiveCollaborators'
 import { MenuClickCapture } from '../MenuClickCapture'
 import { Shape } from '../Shape'
+import { CanvasShapeIndicators } from './CanvasShapeIndicators'
 
 /** @public */
 export interface TLCanvasComponentProps {
@@ -159,6 +160,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 					{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
 				</div>
 				<div className="tl-overlays">
+					<CanvasShapeIndicators />
 					<div ref={rHtmlLayer2} className="tl-html-layer">
 						{debugGeometry ? <GeometryDebuggingView /> : null}
 						<BrushWrapper />
@@ -412,11 +414,7 @@ function ReflowIfNeeded() {
 		'reflow for culled shapes',
 		() => {
 			const culledShapes = editor.getCulledShapes()
-			if (
-				culledShapesRef.current.size === culledShapes.size &&
-				[...culledShapes].every((id) => culledShapesRef.current.has(id))
-			)
-				return
+			if (culledShapesRef.current === culledShapes) return
 
 			culledShapesRef.current = culledShapes
 			const canvas = document.getElementsByClassName('tl-canvas')
@@ -449,7 +447,19 @@ function HintedShapeIndicator() {
 	const editor = useEditor()
 	const { ShapeIndicator } = useEditorComponents()
 
-	const ids = useValue('hinting shape ids', () => dedupe(editor.getHintingShapeIds()), [editor])
+	const ids = useValue(
+		'hinting shape ids without canvas indicator',
+		() => {
+			// Filter to only shapes that use legacy SVG indicators
+			return dedupe(editor.getHintingShapeIds()).filter((id) => {
+				const shape = editor.getShape(id)
+				if (!shape) return false
+				const util = editor.getShapeUtil(shape)
+				return util.useLegacyIndicator()
+			})
+		},
+		[editor]
+	)
 
 	if (!ids.length) return null
 	if (!ShapeIndicator) return null

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -32,6 +32,11 @@ const InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId })
 
 	if (!shape || shape.isLocked) return null
 
+	const util = editor.getShapeUtil(shape)
+
+	// If the shape uses canvas indicators, it will be rendered by CanvasShapeIndicators
+	if (!util.useLegacyIndicator()) return null
+
 	return (
 		<OptionalErrorBoundary
 			fallback={ShapeIndicatorErrorFallback}
@@ -39,7 +44,7 @@ const InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId })
 				editor.annotateError(error, { origin: 'react.shapeIndicator', willCrashApp: false })
 			}
 		>
-			<EvenInnererIndicator key={shape.id} shape={shape} util={editor.getShapeUtil(shape)} />
+			<EvenInnererIndicator key={shape.id} shape={shape} util={util} />
 		</OptionalErrorBoundary>
 	)
 })

package/src/lib/components/default-components/DefaultShapeIndicators.tsx

@@ -89,9 +89,24 @@ export const DefaultShapeIndicators = memo(function DefaultShapeIndicators({
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
 	const { ShapeIndicator } = useEditorComponents()
+
+	// Filter out shapes that have canvas indicator support - only render shapes that use legacy SVG indicators
+	const shapesToRender = useValue(
+		'shapes to render for svg indicators',
+		() => {
+			return renderingShapes.filter(({ id }) => {
+				const shape = editor.getShape(id)
+				if (!shape) return false
+				const util = editor.getShapeUtil(shape)
+				return util.useLegacyIndicator()
+			})
+		},
+		[editor, renderingShapes]
+	)
+
 	if (!ShapeIndicator) return null
 
-	return renderingShapes.map(({ id }) => (
+	return shapesToRender.map(({ id }) => (
 		<ShapeIndicator
 			key={id + '_indicator'}
 			shapeId={id}

package/src/lib/config/TLUserPreferences.test.ts

@@ -21,6 +21,7 @@ describe('TLUserPreferences consistency', () => {
 		'isPasteAtCursorMode',
 		'enhancedA11yMode',
 		'inputMode',
+		'isZoomDirectionInverted',
 	] as const
 
 	it('defaultUserPreferences contains all TLUserPreferences keys (except id)', () => {

package/src/lib/config/TLUserPreferences.ts

@@ -26,6 +26,7 @@ export interface TLUserPreferences {
 	isPasteAtCursorMode?: boolean | null
 	enhancedA11yMode?: boolean | null
 	inputMode?: 'trackpad' | 'mouse' | null
+	isZoomDirectionInverted?: boolean | null
 }
 
 interface UserDataSnapshot {
@@ -56,6 +57,7 @@ export const userTypeValidator: T.Validator<TLUserPreferences> = T.object<TLUser
 	isPasteAtCursorMode: T.boolean.nullable().optional(),
 	enhancedA11yMode: T.boolean.nullable().optional(),
 	inputMode: T.literalEnum('trackpad', 'mouse').nullable().optional(),
+	isZoomDirectionInverted: T.boolean.nullable().optional(),
 })
 
 const Versions = {
@@ -71,6 +73,7 @@ const Versions = {
 	AddShowUiLabels: 10,
 	AddPointerPeripheral: 11,
 	RenameShowUiLabelsToEnhancedA11yMode: 12,
+	AddZoomDirectionInverted: 13,
 } as const
 
 const CURRENT_VERSION = Math.max(...Object.values(Versions))
@@ -121,6 +124,10 @@ function migrateSnapshot(data: { version: number; user: any }) {
 		data.user.inputMode = null
 	}
 
+	if (data.version < Versions.AddZoomDirectionInverted) {
+		data.user.isZoomDirectionInverted = false
+	}
+
 	// finally
 	data.version = CURRENT_VERSION
 }
@@ -171,6 +178,7 @@ export const defaultUserPreferences = Object.freeze({
 	enhancedA11yMode: false,
 	colorScheme: 'light',
 	inputMode: null,
+	isZoomDirectionInverted: false,
 }) satisfies Readonly<Omit<TLUserPreferences, 'id'>>
 
 /** @public */

package/src/lib/editor/Editor.ts

@@ -149,6 +149,7 @@ import { HistoryManager } from './managers/HistoryManager/HistoryManager'
 import { InputsManager } from './managers/InputsManager/InputsManager'
 import { ScribbleManager } from './managers/ScribbleManager/ScribbleManager'
 import { SnapManager } from './managers/SnapManager/SnapManager'
+import { SpatialIndexManager } from './managers/SpatialIndexManager/SpatialIndexManager'
 import { TextManager } from './managers/TextManager/TextManager'
 import { TickManager } from './managers/TickManager/TickManager'
 import { UserPreferencesManager } from './managers/UserPreferencesManager/UserPreferencesManager'
@@ -308,6 +309,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this.snaps = new SnapManager(this)
 
+		this._spatialIndex = new SpatialIndexManager(this)
+		this.disposables.add(() => this._spatialIndex.dispose())
+
 		this.disposables.add(this.timers.dispose)
 
 		this._cameraOptions.set({ ...DEFAULT_CAMERA_OPTIONS, ...cameraOptions })
@@ -895,6 +899,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	readonly snaps: SnapManager
 
+	private readonly _spatialIndex: SpatialIndexManager
+
 	/**
 	 * A manager for the any asynchronous events and making sure they're
 	 * cleaned up upon disposal.
@@ -5135,6 +5141,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	private _notVisibleShapes = notVisibleShapes(this)
+	private _culledShapesCache: Set<TLShapeId> | null = null
 
 	/**
 	 * Get culled shapes (those that should not render), taking into account which shapes are selected or editing.
@@ -5146,16 +5153,41 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const notVisibleShapes = this.getNotVisibleShapes()
 		const selectedShapeIds = this.getSelectedShapeIds()
 		const editingId = this.getEditingShapeId()
-		const culledShapes = new Set<TLShapeId>(notVisibleShapes)
+		const nextValue = new Set<TLShapeId>(notVisibleShapes)
 		// we don't cull the shape we are editing
 		if (editingId) {
-			culledShapes.delete(editingId)
+			nextValue.delete(editingId)
 		}
 		// we also don't cull selected shapes
 		selectedShapeIds.forEach((id) => {
-			culledShapes.delete(id)
+			nextValue.delete(id)
 		})
-		return culledShapes
+
+		// Cache optimization: return same Set object if contents unchanged
+		// This allows consumers to use === comparison and prevents unnecessary re-renders
+		const prevValue = this._culledShapesCache
+		if (prevValue) {
+			// If sizes differ, contents must differ
+			if (prevValue.size !== nextValue.size) {
+				this._culledShapesCache = nextValue
+				return nextValue
+			}
+
+			// Check if all elements are the same
+			for (const id of prevValue) {
+				if (!nextValue.has(id)) {
+					// Found a difference, update cache and return new set
+					this._culledShapesCache = nextValue
+					return nextValue
+				}
+			}
+
+			// Loop completed without finding differences - contents identical
+			return prevValue
+		}
+
+		this._culledShapesCache = nextValue
+		return nextValue
 	}
 
 	/**
@@ -5222,11 +5254,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let inMarginClosestToEdgeDistance = Infinity
 		let inMarginClosestToEdgeHit: TLShape | null = null
 
+		// Use larger margin for spatial search to account for edge distance checks
+		const searchMargin = Math.max(innerMargin, outerMargin, this.options.hitTestMargin / zoomLevel)
+		const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, searchMargin)
+
 		const shapesToCheck = (
 			opts.renderingOnly
 				? this.getCurrentPageRenderingShapesSorted()
 				: this.getCurrentPageShapesSorted()
 		).filter((shape) => {
+			// Frames have labels positioned above the shape (outside bounds), so always include them
+			if (!candidateIds.has(shape.id) && !this.isShapeOfType(shape, 'frame')) return false
+
 			if (
 				(shape.isLocked && !hitLocked) ||
 				this.isShapeHidden(shape) ||
@@ -5412,11 +5451,41 @@ export class Editor extends EventEmitter<TLEventMap> {
 		point: VecLike,
 		opts = {} as { margin?: number; hitInside?: boolean }
 	): TLShape[] {
+		const margin = opts.margin ?? 0
+		const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, margin)
+
+		// Get all page shapes in z-index order and filter to candidates that pass isPointInShape
+		// Frames are always checked because their labels can be outside their bounds
 		return this.getCurrentPageShapesSorted()
-			.filter((shape) => !this.isShapeHidden(shape) && this.isPointInShape(shape, point, opts))
+			.filter((shape) => {
+				if (this.isShapeHidden(shape)) return false
+				if (!candidateIds.has(shape.id) && !this.isShapeOfType(shape, 'frame')) return false
+				return this.isPointInShape(shape, point, opts)
+			})
 			.reverse()
 	}
 
+	/**
+	 * Get shape IDs within the given bounds.
+	 *
+	 * Note: Uses shape page bounds only. Frames with labels outside their bounds
+	 * may not be included even if the label is within the search bounds.
+	 *
+	 * Note: Results are unordered. If you need z-order, combine with sorted shapes:
+	 * ```ts
+	 * const candidates = editor.getShapeIdsInsideBounds(bounds)
+	 * const sorted = editor.getCurrentPageShapesSorted().filter(s => candidates.has(s.id))
+	 * ```
+	 *
+	 * @param bounds - The bounds to search within.
+	 * @returns Unordered set of shape IDs within the given bounds.
+	 *
+	 * @internal
+	 */
+	getShapeIdsInsideBounds(bounds: Box): Set<TLShapeId> {
+		return this._spatialIndex.getShapeIdsInsideBounds(bounds)
+	}
+
 	/**
 	 * Test whether a point (in the current page space) will will a shape. This method takes into account masks,
 	 * such as when a shape is the child of a frame and is partially clipped by the frame.
@@ -10475,7 +10544,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 								}
 							}
 
-							const zoom = cz + (delta ?? 0) * zoomSpeed * cz
+							// because we can't for sure detect whether a user is using a mouse or a trackpad,
+							// we need to check the input mode preference, and only invert the zoom direction
+							// if the user has specifically set it to a mouse.
+							const isZoomDirectionInverted =
+								(this.user.getUserPreferences().isZoomDirectionInverted && inputMode === 'mouse') ??
+								false
+							const deltaValue = delta ?? 0
+							const finalDelta = isZoomDirectionInverted ? -deltaValue : deltaValue
+
+							const zoom = cz + finalDelta * zoomSpeed * cz
 							this._setCamera(new Vec(cx + x / zoom - x / cz, cy + y / zoom - y / cz, zoom), {
 								immediate: true,
 							})

package/src/lib/editor/derivations/notVisibleShapes.ts

@@ -9,60 +9,34 @@ import { Editor } from '../Editor'
  * @returns Incremental derivation of non visible shapes.
  */
 export function notVisibleShapes(editor: Editor) {
-	return computed<Set<TLShapeId>>('notVisibleShapes', function updateNotVisibleShapes(prevValue) {
-		const shapeIds = editor.getCurrentPageShapeIds()
-		const nextValue = new Set<TLShapeId>()
-
-		// Extract viewport bounds once to avoid repeated property access
+	return computed<Set<TLShapeId>>('notVisibleShapes', function (prevValue) {
+		const allShapeIds = editor.getCurrentPageShapeIds()
 		const viewportPageBounds = editor.getViewportPageBounds()
-		const viewMinX = viewportPageBounds.minX
-		const viewMinY = viewportPageBounds.minY
-		const viewMaxX = viewportPageBounds.maxX
-		const viewMaxY = viewportPageBounds.maxY
+		const visibleIds = editor.getShapeIdsInsideBounds(viewportPageBounds)
 
-		for (const id of shapeIds) {
-			const pageBounds = editor.getShapePageBounds(id)
-
-			// Hybrid check: if bounds exist and shape overlaps viewport, it's visible.
-			// This inlines Box.Collides to avoid function call overhead and the
-			// redundant Contains check that Box.Includes was doing.
-			if (
-				pageBounds !== undefined &&
-				pageBounds.maxX >= viewMinX &&
-				pageBounds.minX <= viewMaxX &&
-				pageBounds.maxY >= viewMinY &&
-				pageBounds.minY <= viewMaxY
-			) {
-				continue
-			}
+		const nextValue = new Set<TLShapeId>()
 
-			// Shape is outside viewport or has no bounds - check if it can be culled.
-			// We defer getShape and canCull checks until here since most shapes are
-			// typically visible and we can skip these calls for them.
-			const shape = editor.getShape(id)
-			if (!shape) continue
+		// Non-visible shapes are all shapes minus visible shapes
+		for (const id of allShapeIds) {
+			if (!visibleIds.has(id)) {
+				const shape = editor.getShape(id)
+				if (!shape) continue
 
-			const canCull = editor.getShapeUtil(shape.type).canCull(shape)
-			if (!canCull) continue
+				const canCull = editor.getShapeUtil(shape.type).canCull(shape)
+				if (!canCull) continue
 
-			nextValue.add(id)
+				nextValue.add(id)
+			}
 		}
 
-		if (isUninitialized(prevValue)) {
+		if (isUninitialized(prevValue) || prevValue.size !== nextValue.size) {
 			return nextValue
 		}
 
-		// If there are more or less shapes, we know there's a change
-		if (prevValue.size !== nextValue.size) return nextValue
-
-		// If any of the old shapes are not in the new set, we know there's a change
 		for (const prev of prevValue) {
-			if (!nextValue.has(prev)) {
-				return nextValue
-			}
+			if (!nextValue.has(prev)) return nextValue
 		}
 
-		// If we've made it here, we know that the set is the same
 		return prevValue
 	})
 }