[Fix] indicators hideAll / showAll (tldraw#5654)

This PR adds `showAll` and `hideAll` props to the `TLShapeIndicators`
component.

## Context

As an optimization, we mount indicators for all shapes and hide or show
them dynamically using CSS. This is faster than mounting or unmounting
them dynamically.

There are certain states where we want to hide all of the indicators. We
allow customization of this logic by overriding a the `ShapeIndicators`
component. In tldraw's `ShapeIndicators` component override, we check to
see if we're in one of the select tool's "hide the indicators" states
and return `null` instead of the default indicators component.

However, this means the indicators are unmounted and remounted whenever
they're hidden or shown; and on larger projects, this can be a
performance hit.

## Solution

This PR provides `hideAll` and `showAll` props to the ShapeIndicators
component so that we can allow parent components to control visibility
in a more performant way.

### For later

It would be good to move _all_ of the "hide indicators when in these
states" logic out of the DefaultIndicators component, though this would
be a breaking change.

### Change type

- [x] `bugfix`
- [] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`

### Release notes

- Improved performance on large projects when hiding / showing shape
indicators.
- Added `hideAll` and `showAll` props to the `ShapeIndicators` component
props

Author: steveruizok

apps/examples/src/examples/indicators-logic/IndicatorsLogicExample.tsx

@@ -12,7 +12,7 @@ const components: TLComponents = {
 			[editor]
 		)
 
-		// [2
+		// [2]
 		const { ShapeIndicator } = useEditorComponents()
 		if (!ShapeIndicator) return null
 
@@ -24,6 +24,10 @@ const components: TLComponents = {
 			</div>
 		)
 	},
+	// [3]
+	// ShapeIndicators: () => {
+	// 	return <DefaultShapeIndicators showAll />
+	// },
 }
 
 export default function IndicatorsLogicExample() {
@@ -71,5 +75,11 @@ you want to show the indicators for.
 [2]
 You could override the default ShapeIndicator component in this
 same TLComponents object, but the default (DefaultIndicator.tsx)
-has a lot of logic for where and how to display the indicator
+has a lot of logic for where and how to display the indicator.
+
+[3]
+If all you want to do is show or hide all the indicators, you could 
+create an override for the ShapeIndicators component that returns the
+DefaultShapeIndicators component with `hideAll` or `showAll` props 
+set to true.
 */

packages/editor/api-report.api.md

@@ -689,7 +689,7 @@ export function DefaultSelectionForeground({ bounds, rotation }: TLSelectionFore
 export const DefaultShapeIndicator: NamedExoticComponent<TLShapeIndicatorProps>;
 
 // @public (undocumented)
-export const DefaultShapeIndicators: NamedExoticComponent<object>;
+export const DefaultShapeIndicators: NamedExoticComponent<TLShapeIndicatorsProps>;
 
 // @public (undocumented)
 export function DefaultSnapIndicator({ className, line, zoom }: TLSnapIndicatorProps): JSX_2.Element;
@@ -3951,6 +3951,12 @@ export interface TLShapeIndicatorProps {
     userId?: string;
 }
 
+// @public (undocumented)
+export interface TLShapeIndicatorsProps {
+    hideAll?: boolean;
+    showAll?: boolean;
+}
+
 // @public
 export interface TLShapeUtilCanBeLaidOutOpts {
     shapes?: TLShape[];

packages/editor/src/index.ts

@@ -109,7 +109,10 @@ export {
 	type TLShapeIndicatorProps,
 } from './lib/components/default-components/DefaultShapeIndicator'
 export { type TLShapeIndicatorErrorFallbackComponent } from './lib/components/default-components/DefaultShapeIndicatorErrorFallback'
-export { DefaultShapeIndicators } from './lib/components/default-components/DefaultShapeIndicators'
+export {
+	DefaultShapeIndicators,
+	type TLShapeIndicatorsProps,
+} from './lib/components/default-components/DefaultShapeIndicators'
 export {
 	DefaultSnapIndicator,
 	type TLSnapIndicatorProps,

packages/editor/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -9,15 +9,15 @@ import { useEditorComponents } from '../../hooks/useEditorComponents'
 import { OptionalErrorBoundary } from '../ErrorBoundary'
 
 // need an extra layer of indirection here to allow hooks to be used inside the indicator render
-const EvenInnererIndicator = ({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {
+const EvenInnererIndicator = memo(({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {
 	return useStateTracking('Indicator: ' + shape.type, () =>
 		// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
 		// calling the render method with stale data.
 		util.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)
 	)
-}
+})
 
-const InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {
+const InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId }) => {
 	const shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])
 
 	const { ShapeIndicatorErrorFallback } = useEditorComponents()
@@ -34,7 +34,7 @@ const InnerIndicator = ({ editor, id }: { editor: Editor; id: TLShapeId }) => {
 			<EvenInnererIndicator key={shape.id} shape={shape} util={editor.getShapeUtil(shape)} />
 		</OptionalErrorBoundary>
 	)
-}
+})
 
 /** @public */
 export interface TLShapeIndicatorProps {

packages/editor/src/lib/components/default-components/DefaultShapeIndicators.tsx

@@ -4,10 +4,24 @@ import { memo, useRef } from 'react'
 import { useEditor } from '../../hooks/useEditor'
 import { useEditorComponents } from '../../hooks/useEditorComponents'
 
+/** @public */
+export interface TLShapeIndicatorsProps {
+	/** Whether to hide all of the indicators */
+	hideAll?: boolean
+	/** Whether to show all of the indicators */
+	showAll?: boolean
+}
+
 /** @public @react */
-export const DefaultShapeIndicators = memo(function DefaultShapeIndicators() {
+export const DefaultShapeIndicators = memo(function DefaultShapeIndicators({
+	hideAll,
+	showAll,
+}: TLShapeIndicatorsProps) {
 	const editor = useEditor()
 
+	if (hideAll && showAll)
+		throw Error('You cannot set both hideAll and showAll props to true, cmon now')
+
 	const rPreviousSelectedShapeIds = useRef<Set<TLShapeId>>(new Set())
 
 	const idsToDisplay = useValue(
@@ -16,33 +30,38 @@ export const DefaultShapeIndicators = memo(function DefaultShapeIndicators() {
 			const prev = rPreviousSelectedShapeIds.current
 			const next = new Set<TLShapeId>()
 
-			if (
-				// We only show indicators when in the following states...
-				editor.isInAny(
-					'select.idle',
-					'select.brushing',
-					'select.scribble_brushing',
-					'select.editing_shape',
-					'select.pointing_shape',
-					'select.pointing_selection',
-					'select.pointing_handle'
-				) &&
-				// ...but we hide indicators when we've just changed a style (so that the user can see the change)
-				!editor.getInstanceState().isChangingStyle
-			) {
-				// We always want to show indicators for the selected shapes, if any
-				const selected = editor.getSelectedShapeIds()
-				for (const id of selected) {
-					next.add(id)
-				}
+			const isChangingStyle = editor.getInstanceState().isChangingStyle
+
+			// todo: this is tldraw specific and is duplicated at the tldraw layer. What should we do here instead?
+			const isInSelectState = editor.isInAny(
+				'select.idle',
+				'select.brushing',
+				'select.scribble_brushing',
+				'select.editing_shape',
+				'select.pointing_shape',
+				'select.pointing_selection',
+				'select.pointing_handle'
+			)
+
+			// We hide all indicators if we're changing style or in certain interactions
+			// todo: move this to some kind of Tool.hideIndicators property
+			if (isChangingStyle || !isInSelectState) {
+				rPreviousSelectedShapeIds.current = next
+				return next
+			}
+
+			// We always want to show indicators for the selected shapes, if any
+			const selected = editor.getSelectedShapeIds()
+			for (const id of selected) {
+				next.add(id)
+			}
 
-				// If we're idle or editing a shape, we want to also show an indicator for the hovered shape, if any
-				if (editor.isInAny('select.idle', 'select.editing_shape')) {
-					const instanceState = editor.getInstanceState()
-					if (instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
-						const hovered = editor.getHoveredShapeId()
-						if (hovered) next.add(hovered)
-					}
+			// If we're idle or editing a shape, we want to also show an indicator for the hovered shape, if any
+			if (editor.isInAny('select.idle', 'select.editing_shape')) {
+				const instanceState = editor.getInstanceState()
+				if (instanceState.isHoveringCanvas && !instanceState.isCoarsePointer) {
+					const hovered = editor.getHoveredShapeId()
+					if (hovered) next.add(hovered)
 				}
 			}
 
@@ -75,6 +94,10 @@ export const DefaultShapeIndicators = memo(function DefaultShapeIndicators() {
 	if (!ShapeIndicator) return null
 
 	return renderingShapes.map(({ id }) => (
-		<ShapeIndicator key={id + '_indicator'} shapeId={id} hidden={!idsToDisplay.has(id)} />
+		<ShapeIndicator
+			key={id + '_indicator'}
+			shapeId={id}
+			hidden={!showAll && (hideAll || !idsToDisplay.has(id))}
+		/>
 	))
 })

packages/tldraw/api-report.api.md

@@ -2415,7 +2415,7 @@ export const TldrawSelectionBackground: ({ bounds, rotation }: TLSelectionBackgr
 export const TldrawSelectionForeground: NamedExoticComponent<TLSelectionForegroundProps>;
 
 // @public (undocumented)
-export function TldrawShapeIndicators(): JSX_2.Element | null;
+export function TldrawShapeIndicators(): JSX_2.Element;
 
 // @public (undocumented)
 export const TldrawUi: React_3.NamedExoticComponent<TldrawUiProps>;

packages/tldraw/src/lib/canvas/TldrawShapeIndicators.tsx

@@ -20,7 +20,5 @@ export function TldrawShapeIndicators() {
 		[editor]
 	)
 
-	if (!isInSelectState) return null
-
-	return <DefaultShapeIndicators />
+	return <DefaultShapeIndicators hideAll={!isInSelectState} />
 }

packages/tldraw/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -430,18 +430,12 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 		const isOnlySelected = useValue(
 			'isGeoOnlySelected',
 			() => shape.id === editor.getOnlySelectedShapeId(),
-			[]
+			[editor]
 		)
 		const isEditingAnything = editor.getEditingShapeId() !== null
 		const plaintext = renderPlaintextFromRichText(this.editor, shape.props.richText)
 		const showHtmlContainer = isEditingAnything || !!plaintext.length
-		const isForceSolid = useValue(
-			'force solid',
-			() => {
-				return editor.getZoomLevel() < 0.2
-			},
-			[editor]
-		)
+		const isForceSolid = useValue('force solid', () => editor.getZoomLevel() < 0.2, [editor])
 
 		return (
 			<>