cull in quick reactor

packages/editor/src/lib/components/Shape.tsx

@@ -26,7 +26,6 @@ export const Shape = memo(function Shape({
 	index,
 	backgroundIndex,
 	opacity,
-	isCulled,
 	dprMultiple,
 }: {
 	id: TLShapeId
@@ -35,7 +34,6 @@ export const Shape = memo(function Shape({
 	index: number
 	backgroundIndex: number
 	opacity: number
-	isCulled: boolean
 	dprMultiple: number
 }) {
 	const editor = useEditor()
@@ -59,6 +57,27 @@ export const Shape = memo(function Shape({
 			const shape = editor.getShape(id)
 			if (!shape) return // probably the shape was just deleted
 
+			{
+				// If renderingBoundsMargin is set to Infinity, then we won't cull offscreen shapes
+				const isCullingOffScreenShapes = Number.isFinite(editor.renderingBoundsMargin)
+				const selectedShapeIds = editor.getSelectedShapeIds()
+				const renderingBoundsExpanded = editor.getRenderingBoundsExpanded()
+			const maskedPageBounds = editor.getShapeMaskedPageBounds(id)
+				const isCulled =
+					isCullingOffScreenShapes &&
+					// never cull editing shapes
+					editor.getEditingShapeId() !== id &&
+					// if the shape is fully outside of its parent's clipping bounds...
+					(maskedPageBounds === undefined ||
+						// ...or if the shape is outside of the expanded viewport bounds...
+						(!renderingBoundsExpanded.includes(maskedPageBounds) &&
+							// ...and if it's not selected... then cull it
+							!selectedShapeIds.includes(id)))
+				setStyleProperty(containerRef.current, 'display', isCulled ? 'none' : 'block')
+				setStyleProperty(culledContainerRef.current, 'display', isCulled ? 'block' : 'none')
+				setStyleProperty(bgContainerRef.current, 'display', isCulled ? 'none' : 'block')
+			}
+
 			const prev = memoizedStuffRef.current
 
 			// Clip path
@@ -143,30 +162,18 @@ export const Shape = memo(function Shape({
 					className="tl-shape tl-shape-background"
 					data-shape-type={shape.type}
 					draggable={false}
-					style={{ display: isCulled ? 'none' : undefined }}
 				>
 					<OptionalErrorBoundary fallback={ShapeErrorFallback} onError={annotateError}>
 						<InnerShapeBackground shape={shape} util={util} />
 					</OptionalErrorBoundary>
 				</div>
 			)}
-			<div
-				ref={containerRef}
-				className="tl-shape"
-				data-shape-type={shape.type}
-				draggable={false}
-				style={{ display: isCulled ? 'none' : undefined }}
-			>
+			<div ref={containerRef} className="tl-shape" data-shape-type={shape.type} draggable={false}>
 				<OptionalErrorBoundary fallback={ShapeErrorFallback as any} onError={annotateError}>
 					<InnerShape shape={shape} util={util} />
 				</OptionalErrorBoundary>
 			</div>
-			<div
-				ref={culledContainerRef}
-				className="tl-shape__culled"
-				draggable={false}
-				style={{ display: isCulled ? undefined : 'none' }}
-			></div>
+			<div ref={culledContainerRef} className="tl-shape__culled" draggable={false}></div>
 		</>
 	)
 })

packages/editor/src/lib/editor/Editor.ts

@@ -3111,7 +3111,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			index: number
 			backgroundIndex: number
 			opacity: number
-			isCulled: boolean
 			maskedPageBounds: Box | undefined
 		}[] = []
 
@@ -3119,20 +3118,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let nextBackgroundIndex = MAX_SHAPES_PER_PAGE
 
 		// We only really need these if we're using editor state, but that's ok
-		const editingShapeId = this.getEditingShapeId()
-		const selectedShapeIds = this.getSelectedShapeIds()
 		const erasingShapeIds = this.getErasingShapeIds()
-		const renderingBoundsExpanded = this.getRenderingBoundsExpanded()
-
-		// If renderingBoundsMargin is set to Infinity, then we won't cull offscreen shapes
-		const isCullingOffScreenShapes = Number.isFinite(this.renderingBoundsMargin)
 
 		const addShapeById = (id: TLShapeId, opacity: number, isAncestorErasing: boolean) => {
 			const shape = this.getShape(id)
 			if (!shape) return
 
 			opacity *= shape.opacity
-			let isCulled = false
 			let isShapeErasing = false
 			const util = this.getShapeUtil(shape)
 			const maskedPageBounds = this.getShapeMaskedPageBounds(id)
@@ -3143,16 +3135,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 					opacity *= 0.32
 				}
 
-				isCulled =
-					isCullingOffScreenShapes &&
-					// never cull editingg shapes
-					editingShapeId !== id &&
-					// if the shape is fully outside of its parent's clipping bounds...
-					(maskedPageBounds === undefined ||
-						// ...or if the shape is outside of the expanded viewport bounds...
-						(!renderingBoundsExpanded.includes(maskedPageBounds) &&
-							// ...and if it's not selected... then cull it
-							!selectedShapeIds.includes(id)))
+
 			}
 
 			renderingShapes.push({
@@ -3162,7 +3145,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 				index: nextIndex,
 				backgroundIndex: nextBackgroundIndex,
 				opacity,
-				isCulled,
 				maskedPageBounds,
 			})
 
@@ -4623,7 +4605,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	@computed getCurrentPageRenderingShapesSorted(): TLShape[] {
 		return this.getRenderingShapes()
-			.filter(({ isCulled }) => !isCulled)
 			.sort((a, b) => a.index - b.index)
 			.map(({ shape }) => shape)
 	}