fix(editor): respect canReceiveNewChildrenOfType when dragging shapes (tldraw#8777)

In order to make container acceptance rules apply consistently during
pointer drag (not only on paste or create), this PR filters drag targets
and drag callback arguments using `canReceiveNewChildrenOfType` when
shape utils override it, and fixes the geometric reparent helper to
consider child types when picking candidate parents.

### Change type

- [x] `bugfix`

### Test plan

1. Override `canReceiveNewChildrenOfType` on a frame-like or container
shape to reject a type (e.g. `geo`).
2. Drag a shape of that type over the container; it should not reparent
until release, and should stay on the page when dropped.
3. Drag an accepted type; behavior should match prior frame drag-in
behavior.
4. Run `yarn test run src/test/frames.test.ts` in `packages/tldraw`.

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

### Release notes

- Fix drag-and-drop so shapes that override
`canReceiveNewChildrenOfType` reject disallowed child types during drag,
not only on paste or create.

### Code changes

| Area | Description | Additions | Deletions |
| --- | --- | ---: | ---: |
| `packages/editor` | `getDraggingOverShape` skips targets that reject
all dragged types | 9 | 0 |
| `packages/editor` | `getDroppedShapesToNewParents` parent prefilter by
child types | 11 | 5 |
| `packages/tldraw` | `DragAndDropManager` filters shapes passed to drag
callbacks | 62 | 23 |
| `packages/tldraw` | Frame regression test for rejecting util | 34 | 0
|
| **Total** | | **116** | **28** |

Made with [Cursor](https://cursor.com)

### API changes

- adds `canRemoveChildrenOfType` for frame-like shapes

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>

Author: 3 people

apps/docs/content/releases/next.mdx

@@ -298,7 +298,7 @@ class AudioAssetUtil extends AssetUtil<TLAudioAsset> {
 
 Custom shapes can now opt into frame-like behavior: clipping children, acting as a parent on paste and drag-in, blocking erasure from inside, and supporting full-brush selection. Previously, frame behavior was hardcoded to the built-in `frame` type; the editor and tools now route frame checks through `editor.getShapeUtil(shape).isFrameLike(shape)`.
 
-The easiest way to build one is to extend the new `BaseFrameLikeShapeUtil` abstract class, which provides sensible defaults for `isFrameLike`, `providesBackgroundForChildren`, `canReceiveNewChildrenOfType`, `getClipPath`, `onDragShapesIn`, and `onDragShapesOut`:
+The easiest way to build one is to extend the new `BaseFrameLikeShapeUtil` abstract class, which provides sensible defaults for `isFrameLike`, `providesBackgroundForChildren`, `canReceiveNewChildrenOfType`, `canRemoveChildrenOfType`, `getClipPath`, `onDragShapesIn`, and `onDragShapesOut`:
 
 ```tsx
 import { BaseFrameLikeShapeUtil, SVGContainer } from '@tldraw/editor'

apps/docs/content/sdk-features/drag-and-drop.mdx

@@ -169,7 +169,7 @@ Only shapes that implement drag callbacks are considered as drop targets. If you
 
 ## Controlling which shapes can be dropped
 
-Use the [ShapeUtil#canReceiveNewChildrenOfType](?) method to control which shape types your container accepts:
+Use the [ShapeUtil#canReceiveNewChildrenOfType](?) method to control which shape types your container accepts. The editor uses it to decide whether `onDragShapesIn` and `onDropShapesOver` fire for a dragged shape:
 
 ```typescript
 override canReceiveNewChildrenOfType(shape: MyContainerShape, type: TLShape['type']) {
@@ -178,7 +178,20 @@ override canReceiveNewChildrenOfType(shape: MyContainerShape, type: TLShape['typ
 }
 ```
 
-You must check this yourself in your drag callbacks. The editor does not call it automatically.
+The default is `false`, so any shape that should accept dropped children must override this method. `onDragShapesOver` is not gated by this method, which lets you provide visual feedback even when the target won't accept the drop.
+
+## Controlling which shapes can be dragged out
+
+Use the [ShapeUtil#canRemoveChildrenOfType](?) method to control which child shape types can be dragged out of your container. The editor uses it to decide whether `onDragShapesOut` fires for a child shape, and to decide whether the editor should automatically reparent a child that has moved outside its parent's geometry:
+
+```typescript
+override canRemoveChildrenOfType(shape: MyContainerShape, type: TLShape['type']) {
+	// Pin certain children in place; allow others to be removed
+	return type !== 'pinned-item'
+}
+```
+
+The default is `true`, so children can be dragged out of any container unless this method is overridden.
 
 ## Example: slot container
 

apps/examples/src/examples/shapes/tools/drag-and-drop/DragAndDropExample.tsx

@@ -1,12 +1,15 @@
 import {
+	BaseFrameLikeShapeUtil,
 	Circle2d,
 	Geometry2d,
+	Group2d,
 	HTMLContainer,
 	Rectangle2d,
 	ShapeUtil,
-	TLDragShapesOutInfo,
+	TLBaseBoxShape,
 	TLShape,
 	Tldraw,
+	Vec,
 } from 'tldraw'
 import 'tldraw/tldraw.css'
 
@@ -16,13 +19,15 @@ const MY_COUNTER_SHAPE_TYPE = 'my-counter-shape'
 // [1]
 declare module 'tldraw' {
 	export interface TLGlobalShapePropsMap {
-		[MY_GRID_SHAPE_TYPE]: Record<string, never>
+		[MY_GRID_SHAPE_TYPE]: { w: number; h: number }
 		[MY_COUNTER_SHAPE_TYPE]: Record<string, never>
 	}
 }
 
 // [2]
-type MyGridShape = TLShape<typeof MY_GRID_SHAPE_TYPE>
+type MyGridShape = TLBaseBoxShape & {
+	type: typeof MY_GRID_SHAPE_TYPE
+}
 type MyCounterShape = TLShape<typeof MY_COUNTER_SHAPE_TYPE>
 
 // [3]
@@ -65,59 +70,66 @@ class MyCounterShapeUtil extends ShapeUtil<MyCounterShape> {
 }
 
 // [4]
-class MyGridShapeUtil extends ShapeUtil<MyGridShape> {
+class MyGridShapeUtil extends BaseFrameLikeShapeUtil<MyGridShape> {
 	static override type = MY_GRID_SHAPE_TYPE
 
 	getDefaultProps(): MyGridShape['props'] {
-		return {}
+		return {
+			w: SLOT_SIZE * 5,
+			h: SLOT_SIZE * 2,
+		}
 	}
 
-	getGeometry(): Geometry2d {
-		return new Rectangle2d({
-			width: SLOT_SIZE * 5,
-			height: SLOT_SIZE * 2,
-			isFilled: true,
+	override getGeometry(shape: MyGridShape): Geometry2d {
+		return new Group2d({
+			children: [
+				new Rectangle2d({
+					width: shape.props.w,
+					height: shape.props.h,
+					isFilled: true,
+				}),
+			],
 		})
 	}
 
-	override canResize(shape: MyGridShape) {
+	override canResize(_shape: MyGridShape) {
 		return false
 	}
-	override hideResizeHandles(shape: MyGridShape) {
+
+	override hideResizeHandles(_shape: MyGridShape) {
 		return true
 	}
 
 	// [5]
-	override onDragShapesIn(shape: MyGridShape, draggingShapes: TLShape[]): void {
-		const { editor } = this
-		const reparentingShapes = draggingShapes.filter(
-			(s) => s.parentId !== shape.id && s.type === 'my-counter-shape'
-		)
-		if (reparentingShapes.length === 0) return
-		editor.reparentShapes(reparentingShapes, shape.id)
+	override canReceiveNewChildrenOfType(_shape: MyGridShape, type: TLShape['type']) {
+		return type === MY_COUNTER_SHAPE_TYPE
 	}
 
 	// [6]
-	override onDragShapesOut(
-		shape: MyGridShape,
-		draggingShapes: TLShape[],
-		info: TLDragShapesOutInfo
-	): void {
-		const { editor } = this
-		const reparentingShapes = draggingShapes.filter((s) => s.parentId !== shape.id)
-		if (!info.nextDraggingOverShapeId) {
-			editor.reparentShapes(reparentingShapes, editor.getCurrentPageId())
-		}
+	override canRemoveChildrenOfType(_shape: MyGridShape, type: TLShape['type']) {
+		return type !== MY_COUNTER_SHAPE_TYPE
 	}
 
-	component() {
+	// [7]
+	override getClipPath(_shape: MyGridShape): Vec[] {
+		return [
+			new Vec(0, 0),
+			new Vec(SLOT_SIZE * 5, 0),
+			new Vec(SLOT_SIZE * 5, SLOT_SIZE * 2),
+			new Vec(0, SLOT_SIZE * 2),
+		]
+	}
+
+	component(shape: MyGridShape) {
 		return (
 			<HTMLContainer
 				style={{
 					backgroundColor: '#efefef',
 					borderRight: '1px solid #ccc',
 					borderBottom: '1px solid #ccc',
 					backgroundSize: `${SLOT_SIZE}px ${SLOT_SIZE}px`,
+					width: shape.props.w,
+					height: shape.props.h,
 					backgroundImage: `
 						linear-gradient(to right, #ccc 1px, transparent 1px),
 						linear-gradient(to bottom, #ccc 1px, transparent 1px)
@@ -127,9 +139,9 @@ class MyGridShapeUtil extends ShapeUtil<MyGridShape> {
 		)
 	}
 
-	getIndicatorPath() {
+	override getIndicatorPath(shape: MyGridShape) {
 		const path = new Path2D()
-		path.rect(0, 0, SLOT_SIZE * 5, SLOT_SIZE * 2)
+		path.rect(0, 0, shape.props.w, shape.props.h)
 		return path
 	}
 }
@@ -170,10 +182,19 @@ Create a ShapeUtil for the grid shape. This creates a rectangular grid that can
 Rectangle2d geometry and render it with CSS grid lines using background gradients.
 
 [5]
-Override onDragShapesIn to handle when shapes are dragged into the grid. We filter for counter shapes that
-aren't already children of this grid, then reparent them to become children. This makes them move with the grid.
+Override canReceiveNewChildrenOfType to gate which shape types can be dragged into the grid. The editor only
+fires onDragShapesIn for shapes that pass this check. The default is false, so any container that wants to
+receive dragged shapes must override this. Here we accept counter shapes only.
 
 [6]
-Override onDragShapesOut to handle when shapes are dragged out of the grid. If they're not being dragged to
-another shape, we reparent them back to the page level, making them independent again.
+Override canRemoveChildrenOfType to gate which child shape types are allowed to be dragged out. The editor
+only fires onDragShapesOut for shapes that pass this check, and it also won't auto-reparent ("kick out") a
+child of a blocked type when it's moved outside the parent's geometry. The default is true. Here, we don't 
+allow any child counter shapes to be dragged out.
+
+[7]
+Override getClipPath so children are visually clipped to the grid's bounds while they're parented to it.
+This is independent of the drag-and-drop callbacks above; it just makes it visually obvious that a counter
+"belongs" to the grid while it's a child. Try dragging a counter outside the grid — because counters are
+pinned, the counter stays a child of the grid and the clip path keeps it inside.
 */

packages/editor/api-report.api.md

@@ -196,6 +196,8 @@ export abstract class BaseFrameLikeShapeUtil<Shape extends TLBaseBoxShape> exten
     // (undocumented)
     canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
     // (undocumented)
+    canRemoveChildrenOfType(shape: Shape, _type: TLShape['type']): boolean;
+    // (undocumented)
     getClipPath(shape: Shape): undefined | Vec[];
     // (undocumented)
     isFrameLike(_shape: Shape): boolean;
@@ -2996,6 +2998,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
     canEditInReadonly(shape: Shape): boolean;
     canEditWhileLocked(shape: Shape): boolean;
     canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
+    canRemoveChildrenOfType(shape: Shape, type: TLShape['type']): boolean;
     canResize(shape: Shape): boolean;
     canResizeChildren(shape: Shape): boolean;
     canScroll(shape: Shape): boolean;

packages/editor/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx

@@ -15,6 +15,7 @@ import { TLDragShapesInInfo, TLDragShapesOutInfo } from './ShapeUtil'
  * - `isFrameLike()` returns `true`
  * - `providesBackgroundForChildren()` returns `true`
  * - `canReceiveNewChildrenOfType()` returns `true` unless the container is locked
+ * - `canRemoveChildrenOfType()` returns `true` unless the container is locked
  * - `getClipPath()` returns the shape geometry's vertices
  * - `onDragShapesIn()` reparents shapes into the frame (with index restoration)
  * - `onDragShapesOut()` reparents shapes back to the page
@@ -60,6 +61,10 @@ export abstract class BaseFrameLikeShapeUtil<
 		return !shape.isLocked
 	}
 
+	override canRemoveChildrenOfType(shape: Shape, _type: TLShape['type']): boolean {
+		return !shape.isLocked
+	}
+
 	override getClipPath(shape: Shape): Vec[] | undefined {
 		return this.editor.getShapeGeometry(shape.id).vertices
 	}

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

@@ -546,7 +546,9 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	getHandles?(shape: Shape): TLHandle[]
 
 	/**
-	 * Get whether the shape can receive children of a given type.
+	 * Get whether the shape can receive children of a given type. Used by the drag and drop system
+	 * to decide whether {@link ShapeUtil.onDragShapesIn} should fire when a shape of the given type
+	 * is dragged over this one.
 	 *
 	 * @param shape - The shape.
 	 * @param type - The shape type.
@@ -556,6 +558,22 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 		return false
 	}
 
+	/**
+	 * Get whether children of a given type can be removed from this shape. Used by the drag and
+	 * drop system to decide whether {@link ShapeUtil.onDragShapesOut} should fire when a child of
+	 * the given type is dragged out of this shape, and by `kickoutOccludedShapes` to decide
+	 * whether to auto-reparent a child of the given type when it has moved outside this shape's
+	 * geometry. Returning `false` therefore "pins" matching children — they stay parented to this
+	 * shape even when dragged or moved outside it. Defaults to `true`.
+	 *
+	 * @param shape - The shape.
+	 * @param type - The shape type.
+	 * @public
+	 */
+	canRemoveChildrenOfType(shape: Shape, type: TLShape['type']) {
+		return true
+	}
+
 	/**
 	 * Get the shape as an SVG object.
 	 *

packages/editor/src/lib/utils/reparenting.ts

@@ -42,10 +42,17 @@ export function kickoutOccludedShapes(
 		} else {
 			const overlappingChildren = getOverlappingShapes(editor, parent.id, childIds)
 			if (overlappingChildren.length < childIds.length) {
-				parentsToLostChildren.set(
-					parent,
-					childIds.filter((id) => !overlappingChildren.includes(id))
-				)
+				const parentUtil = editor.getShapeUtil(parent)
+				const lostChildIds = childIds.filter((id) => {
+					if (overlappingChildren.includes(id)) return false
+					const child = editor.getShape(id)
+					if (!child) return false
+					// Respect the parent's removal gate: if it pins this child type, don't kick it out.
+					return parentUtil.canRemoveChildrenOfType(parent, child.type)
+				})
+				if (lostChildIds.length > 0) {
+					parentsToLostChildren.set(parent, lostChildIds)
+				}
 			}
 		}
 	}
@@ -238,11 +245,17 @@ export function getDroppedShapesToNewParents(
 	const potentialParentShapes = editor
 		.getCurrentPageShapesSorted()
 		// filter out any shapes that aren't frames or that are included among the provided shapes
-		.filter(
-			(s) =>
-				editor.getShapeUtil(s).canReceiveNewChildrenOfType?.(s, s.type) &&
-				!remainingShapesToReparent.has(s)
-		)
+		.filter((parentShape) => {
+			if (remainingShapesToReparent.has(parentShape)) return false
+
+			const parentUtil = editor.getShapeUtil(parentShape)
+			for (const childShape of remainingShapesToReparent) {
+				if (parentUtil.canReceiveNewChildrenOfType(parentShape, childShape.type)) {
+					return true
+				}
+			}
+			return false
+		})
 
 	parentCheck: for (let i = potentialParentShapes.length - 1; i >= 0; i--) {
 		const parentShape = potentialParentShapes[i]