@tldraw/editor 3.16.0-canary.1647ca5bba28 → 3.16.0-canary.1e91d2e19e07

package/src/lib/TldrawEditor.tsx

@@ -1,6 +1,7 @@
 import { MigrationSequence, Store } from '@tldraw/store'
 import { TLShape, TLStore, TLStoreSnapshot } from '@tldraw/tlschema'
 import { annotateError, Required } from '@tldraw/utils'
+import classNames from 'classnames'
 import React, {
 	memo,
 	ReactNode,
@@ -12,8 +13,6 @@ import React, {
 	useState,
 	useSyncExternalStore,
 } from 'react'
-
-import classNames from 'classnames'
 import { version } from '../version'
 import { DefaultErrorFallback } from './components/default-components/DefaultErrorFallback'
 import { OptionalErrorBoundary } from './components/ErrorBoundary'

package/src/lib/editor/Editor.ts

@@ -4680,8 +4680,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.store.createComputedCache<Box, TLShape>('pageBoundsCache', (shape) => {
 			const pageTransform = this.getShapePageTransform(shape)
 			if (!pageTransform) return undefined
-			const geometry = this.getShapeGeometry(shape)
-			return Box.FromPoints(pageTransform.applyToPoints(geometry.vertices))
+
+			return Box.FromPoints(
+				pageTransform.applyToPoints(this.getShapeGeometry(shape).boundsVertices)
+			)
 		})
 	}
 

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

@@ -7,6 +7,12 @@ function fromScratch(editor: Editor): Set<TLShapeId> {
 	const viewportPageBounds = editor.getViewportPageBounds()
 	const notVisibleShapes = new Set<TLShapeId>()
 	shapesIds.forEach((id) => {
+		const shape = editor.getShape(id)
+		if (!shape) return
+
+		const canCull = editor.getShapeUtil(shape.type).canCull(shape)
+		if (!canCull) return
+
 		// If the shape is fully outside of the viewport page bounds, add it to the set.
 		// We'll ignore masks here, since they're more expensive to compute and the overhead is not worth it.
 		const pageBounds = editor.getShapePageBounds(id)

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -283,6 +283,17 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 		return true
 	}
 
+	/**
+	 * Whether this shape can be culled. By default, shapes are culled for
+	 * performance reasons when they are outside of the viewport. Culled shapes are still rendered
+	 * to the DOM, but have their `display` property set to `none`.
+	 *
+	 * @param shape - The shape.
+	 */
+	canCull(_shape: Shape): boolean {
+		return true
+	}
+
 	/**
 	 * Does this shape provide a background for its children? If this is true,
 	 * then any children with a `renderBackground` method will have their

package/src/lib/hooks/usePassThroughMouseOverEvents.ts

@@ -1,14 +1,17 @@
 import { RefObject, useEffect } from 'react'
 import { preventDefault } from '../utils/dom'
 import { useContainer } from './useContainer'
+import { useMaybeEditor } from './useEditor'
 
 /** @public */
 export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
 	const container = useContainer()
+	const editor = useMaybeEditor()
 
 	useEffect(() => {
 		function onMouseOver(e: MouseEvent) {
+			if (!editor?.getInstanceState().isFocused) return
 			if ((e as any).isSpecialRedispatchedEvent) return
 			preventDefault(e)
 			const cvs = container.querySelector('.tl-canvas')
@@ -25,5 +28,5 @@ export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {
 		return () => {
 			elm.removeEventListener('mouseover', onMouseOver)
 		}
-	}, [container, ref])
+	}, [container, editor, ref])
 }