@tldraw/editor 4.2.0 → 4.3.0-canary.3b56c8d3ecee

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -23,7 +23,7 @@ export class Pointing extends StateNode {
 			const newPoint = maybeSnapToGrid(originPagePoint, editor)
 
 			// Allow this to trigger the max shapes reached alert
-			this.editor.createShapes<TLBaseBoxShape>([
+			this.editor.createShapes([
 				{
 					id,
 					type: shapeType,
@@ -88,7 +88,7 @@ export class Pointing extends StateNode {
 
 		// Allow this to trigger the max shapes reached alert
 		// todo: add scale here when dynamic size is enabled (is this still needed?)
-		this.editor.createShapes<TLBaseBoxShape>([
+		this.editor.createShapes([
 			{
 				id,
 				type: shapeType,
@@ -127,7 +127,7 @@ export class Pointing extends StateNode {
 			;(next as TLBaseBoxShape & { props: { scale: number } }).props.scale = scale
 		}
 
-		this.editor.updateShape<TLBaseBoxShape>(next)
+		this.editor.updateShape(next)
 
 		this.editor.setSelectedShapes([id])
 

package/src/lib/exports/getSvgJsx.test.ts

@@ -1,30 +1,21 @@
-import {
-	Geometry2d,
-	RecordProps,
-	Rectangle2d,
-	ShapeUtil,
-	T,
-	TLBaseShape,
-	createShapeId,
-} from '../..'
+import { Geometry2d, RecordProps, Rectangle2d, ShapeUtil, T, TLShape, createShapeId } from '../..'
 import { createTLStore } from '../config/createTLStore'
 import { Editor } from '../editor/Editor'
 import { Box } from '../primitives/Box'
 import { getExportDefaultBounds } from './getSvgJsx'
 
-type ITestShape = TLBaseShape<
-	'test-shape',
-	{
-		w: number
-		h: number
-		x: number
-		y: number
-		isContainer?: boolean
+const TEST_SHAPE_TYPE = 'test-shape'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[TEST_SHAPE_TYPE]: { w: number; h: number; x: number; y: number; isContainer?: boolean }
 	}
->
+}
+
+type ITestShape = TLShape<typeof TEST_SHAPE_TYPE>
 
 class TestShape extends ShapeUtil<ITestShape> {
-	static override type = 'test-shape' as const
+	static override type = TEST_SHAPE_TYPE
 	static override props: RecordProps<ITestShape> = {
 		w: T.number,
 		h: T.number,

package/src/lib/exports/getSvgJsx.tsx

@@ -1,7 +1,6 @@
 import { useAtom, useValue } from '@tldraw/state-react'
 import {
 	TLFrameShape,
-	TLGroupShape,
 	TLShape,
 	TLShapeId,
 	getColorValue,
@@ -58,9 +57,7 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 
 	// --- Common bounding box of all shapes
 	const singleFrameShapeId =
-		ids.length === 1 && editor.isShapeOfType<TLFrameShape>(editor.getShape(ids[0])!, 'frame')
-			? ids[0]
-			: null
+		ids.length === 1 && editor.isShapeOfType(editor.getShape(ids[0])!, 'frame') ? ids[0] : null
 
 	let bbox: null | Box = null
 	if (opts.bounds) {
@@ -272,7 +269,7 @@ function SvgExport({
 
 					const shape = editor.getShape(id)!
 
-					if (editor.isShapeOfType<TLGroupShape>(shape, 'group')) return []
+					if (editor.isShapeOfType(shape, 'group')) return []
 
 					const elements = []
 					const util = editor.getShapeUtil(shape)

package/src/lib/hooks/useCanvasEvents.ts

@@ -8,6 +8,7 @@ import { useEditor } from './useEditor'
 
 export function useCanvasEvents() {
 	const editor = useEditor()
+	const ownerDocument = editor.getContainer().ownerDocument
 	const currentTool = useValue('current tool', () => editor.getCurrentTool(), [editor])
 
 	const events = useMemo(
@@ -180,11 +181,11 @@ export function useCanvasEvents() {
 			}
 		}
 
-		document.body.addEventListener('pointermove', onPointerMove)
+		ownerDocument.body.addEventListener('pointermove', onPointerMove)
 		return () => {
-			document.body.removeEventListener('pointermove', onPointerMove)
+			ownerDocument.body.removeEventListener('pointermove', onPointerMove)
 		}
-	}, [editor, currentTool])
+	}, [editor, currentTool, ownerDocument])
 
 	return events
 }

package/src/lib/utils/reparenting.ts

@@ -95,8 +95,8 @@ export function kickoutOccludedShapes(
 		if (remainingShapesToReparent.size > 0) {
 			// The remaining shapes are going to be reparented to the old parent's containing group, if there was one, or else to the page
 			const newParentId =
-				editor.findShapeAncestor(prevParent, (s) => editor.isShapeOfType<TLGroupShape>(s, 'group'))
-					?.id ?? editor.getCurrentPageId()
+				editor.findShapeAncestor(prevParent, (s) => editor.isShapeOfType(s, 'group'))?.id ??
+				editor.getCurrentPageId()
 
 			remainingShapesToReparent.forEach((shape) => {
 				if (!parentsToNewChildren[newParentId]) {
@@ -211,7 +211,7 @@ export function getDroppedShapesToNewParents(
 
 	for (const shape of shapes) {
 		const parent = editor.getShapeParent(shape)
-		if (parent && editor.isShapeOfType<TLGroupShape>(parent, 'group')) {
+		if (parent && editor.isShapeOfType(parent, 'group')) {
 			if (!movingGroups.has(parent)) {
 				movingGroups.add(parent)
 			}
@@ -248,7 +248,7 @@ export function getDroppedShapesToNewParents(
 	parentCheck: for (let i = potentialParentShapes.length - 1; i >= 0; i--) {
 		const parentShape = potentialParentShapes[i]
 		const parentShapeContainingGroupId = editor.findShapeAncestor(parentShape, (s) =>
-			editor.isShapeOfType<TLGroupShape>(s, 'group')
+			editor.isShapeOfType(s, 'group')
 		)?.id
 
 		const parentGeometry = editor.getShapeGeometry(parentShape)
@@ -274,7 +274,7 @@ export function getDroppedShapesToNewParents(
 			if (!shapeGroupIds.has(shape.id)) {
 				shapeGroupIds.set(
 					shape.id,
-					editor.findShapeAncestor(shape, (s) => editor.isShapeOfType<TLGroupShape>(s, 'group'))?.id
+					editor.findShapeAncestor(shape, (s) => editor.isShapeOfType(s, 'group'))?.id
 				)
 			}
 

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.2.0'
+export const version = '4.3.0-canary.3b56c8d3ecee'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-11-19T11:47:45.748Z',
-	patch: '2025-11-19T11:47:45.748Z',
+	minor: '2025-11-21T09:57:00.394Z',
+	patch: '2025-11-21T09:57:00.394Z',
 }