@tldraw/editor 4.3.0-canary.fd6b7f2a8adc → 4.3.0-next.2b3bfbba757b

package/src/lib/editor/bindings/BindingUtil.ts

@@ -1,15 +1,9 @@
-import {
-	RecordProps,
-	TLBinding,
-	TLPropsMigrations,
-	TLShape,
-	TLUnknownBinding,
-} from '@tldraw/tlschema'
+import { RecordProps, TLPropsMigrations, TLShape, TLUnknownBinding } from '@tldraw/tlschema'
 import { Editor } from '../Editor'
 
 /** @public */
 export interface TLBindingUtilConstructor<
-	T extends TLBinding,
+	T extends TLUnknownBinding,
 	U extends BindingUtil<T> = BindingUtil<T>,
 > {
 	new (editor: Editor): U
@@ -26,7 +20,7 @@ export interface TLBindingUtilConstructor<
  *
  * @public
  */
-export interface BindingOnCreateOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnCreateOptions<Binding extends TLUnknownBinding> {
 	/** The binding being created. */
 	binding: Binding
 }
@@ -37,7 +31,7 @@ export interface BindingOnCreateOptions<Binding extends TLBinding = TLBinding> {
  *
  * @public
  */
-export interface BindingOnChangeOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnChangeOptions<Binding extends TLUnknownBinding> {
 	/** The binding record before the change is made. */
 	bindingBefore: Binding
 	/** The binding record after the change is made. */
@@ -50,7 +44,7 @@ export interface BindingOnChangeOptions<Binding extends TLBinding = TLBinding> {
  *
  * @public
  */
-export interface BindingOnDeleteOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnDeleteOptions<Binding extends TLUnknownBinding> {
 	/** The binding being deleted. */
 	binding: Binding
 }
@@ -61,7 +55,7 @@ export interface BindingOnDeleteOptions<Binding extends TLBinding = TLBinding> {
  *
  * @public
  */
-export interface BindingOnShapeChangeOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnShapeChangeOptions<Binding extends TLUnknownBinding> {
 	/** The binding record linking these two shapes. */
 	binding: Binding
 	/** The shape record before the change is made. */
@@ -101,7 +95,7 @@ export interface BindingOnShapeChangeOptions<Binding extends TLBinding = TLBindi
  *
  * @public
  */
-export interface BindingOnShapeIsolateOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnShapeIsolateOptions<Binding extends TLUnknownBinding> {
 	/** The binding record that refers to the shape in question. */
 	binding: Binding
 	/**
@@ -120,7 +114,7 @@ export interface BindingOnShapeIsolateOptions<Binding extends TLBinding = TLBind
  *
  * @public
  */
-export interface BindingOnShapeDeleteOptions<Binding extends TLBinding = TLBinding> {
+export interface BindingOnShapeDeleteOptions<Binding extends TLUnknownBinding> {
 	/** The binding record that refers to the shape in question. */
 	binding: Binding
 	/** The shape that is about to be deleted. */
@@ -128,7 +122,7 @@ export interface BindingOnShapeDeleteOptions<Binding extends TLBinding = TLBindi
 }
 
 /** @public */
-export abstract class BindingUtil<Binding extends TLBinding = TLBinding> {
+export abstract class BindingUtil<Binding extends TLUnknownBinding = TLUnknownBinding> {
 	constructor(public editor: Editor) {}
 	static props?: RecordProps<TLUnknownBinding>
 	static migrations?: TLPropsMigrations

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

@@ -1,11 +1,11 @@
 import { Computed, RESET_VALUE, computed, isUninitialized } from '@tldraw/state'
-import { TLBinding, TLShapeId } from '@tldraw/tlschema'
+import { TLArrowBinding, TLBinding, TLShapeId, TLUnknownBinding } from '@tldraw/tlschema'
 import { objectMapValues } from '@tldraw/utils'
 import { Editor } from '../Editor'
 
 type TLBindingsIndex = Map<TLShapeId, TLBinding[]>
 
-function fromScratch(bindingsQuery: Computed<TLBinding[], unknown>) {
+function fromScratch(bindingsQuery: Computed<(TLArrowBinding | TLUnknownBinding)[], unknown>) {
 	const allBindings = bindingsQuery.get() as TLBinding[]
 
 	const shapesToBindings: TLBindingsIndex = new Map()

package/src/lib/editor/managers/FontManager/FontManager.test.ts

@@ -1,5 +1,4 @@
-import { TLParentId, TLShape, TLShapeId, createShapeId, toRichText } from '@tldraw/tlschema'
-import { IndexKey } from '@tldraw/utils'
+import { TLShape, TLShapeId, createShapeId } from '@tldraw/tlschema'
 import { Mock, Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
 import { FontManager, TLFontFace } from './FontManager'
@@ -42,21 +41,12 @@ describe('FontManager', () => {
 		x: 0,
 		y: 0,
 		rotation: 0,
-		index: 'a1' as IndexKey,
-		parentId: 'page:page' as TLParentId,
+		index: 'a1' as any,
+		parentId: 'page:page' as any,
 		opacity: 1,
 		isLocked: false,
 		meta: {},
-		props: {
-			color: 'black',
-			size: 'xl',
-			font: 'serif',
-			textAlign: 'middle',
-			w: 100,
-			richText: toRichText('❤️'),
-			scale: 2,
-			autoSize: true,
-		},
+		props: {},
 		typeName: 'shape' as const,
 	})
 

package/src/lib/editor/managers/SnapManager/SnapManager.ts

@@ -1,5 +1,5 @@
 import { EMPTY_ARRAY, atom, computed } from '@tldraw/state'
-import { TLParentId, TLShapeId, isShapeId } from '@tldraw/tlschema'
+import { TLFrameShape, TLGroupShape, TLParentId, TLShapeId, isShapeId } from '@tldraw/tlschema'
 import { Vec, VecLike } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
 import { BoundsSnaps } from './BoundsSnaps'
@@ -72,7 +72,7 @@ export class SnapManager {
 		const collectSnappableShapesFromParent = (parentId: TLParentId) => {
 			if (isShapeId(parentId)) {
 				const parent = editor.getShape(parentId)
-				if (parent && editor.isShapeOfType(parent, 'frame')) {
+				if (parent && editor.isShapeOfType<TLFrameShape>(parent, 'frame')) {
 					snappableShapes.add(parentId)
 				}
 			}
@@ -89,7 +89,7 @@ export class SnapManager {
 				const pageBounds = editor.getShapePageBounds(childId)
 				if (!(pageBounds && renderingBounds.includes(pageBounds))) continue
 				// Snap to children of groups but not group itself
-				if (editor.isShapeOfType(childShape, 'group')) {
+				if (editor.isShapeOfType<TLGroupShape>(childShape, 'group')) {
 					collectSnappableShapesFromParent(childId)
 					continue
 				}

package/src/lib/editor/shapes/BaseBoxShapeUtil.tsx

@@ -1,4 +1,4 @@
-import { ExtractShapeByProps } from '@tldraw/tlschema'
+import { TLBaseShape } from '@tldraw/tlschema'
 import { lerp } from '@tldraw/utils'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 import { Rectangle2d } from '../../primitives/geometry/Rectangle2d'
@@ -7,7 +7,7 @@ import { ShapeUtil, TLResizeInfo } from './ShapeUtil'
 import { resizeBox } from './shared/resizeBox'
 
 /** @public */
-export type TLBaseBoxShape = ExtractShapeByProps<{ w: number; h: number }>
+export type TLBaseBoxShape = TLBaseShape<string, { w: number; h: number }>
 
 /** @public */
 export abstract class BaseBoxShapeUtil<Shape extends TLBaseBoxShape> extends ShapeUtil<Shape> {

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

@@ -26,7 +26,10 @@ import { TLClickEventInfo } from '../types/event-types'
 import { TLResizeHandle } from '../types/selection-types'
 
 /** @public */
-export interface TLShapeUtilConstructor<T extends TLShape, U extends ShapeUtil<T> = ShapeUtil<T>> {
+export interface TLShapeUtilConstructor<
+	T extends TLUnknownShape,
+	U extends ShapeUtil<T> = ShapeUtil<T>,
+> {
 	new (editor: Editor): U
 	type: T['type']
 	props?: RecordProps<T>
@@ -39,11 +42,11 @@ export interface TLShapeUtilConstructor<T extends TLShape, U extends ShapeUtil<T
  *
  * @public
  */
-export interface TLShapeUtilCanBindOpts<Shape extends TLShape = TLShape> {
+export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLUnknownShape> {
 	/** The type of shape referenced by the `fromId` of the binding. */
-	fromShapeType: TLShape['type']
+	fromShapeType: string
 	/** The type of shape referenced by the `toId` of the binding. */
-	toShapeType: TLShape['type']
+	toShapeType: string
 	/** The type of binding. */
 	bindingType: string
 }
@@ -76,7 +79,7 @@ export interface TLShapeUtilCanvasSvgDef {
 }
 
 /** @public */
-export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
+export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	/** Configure this shape utils {@link ShapeUtil.options | `options`}. */
 	static configure<T extends TLShapeUtilConstructor<any, any>>(
 		this: T,

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -55,7 +55,9 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 		const isHintingOtherGroup =
 			hintingShapeIds.length > 0 &&
 			hintingShapeIds.some(
-				(id) => id !== shape.id && this.editor.isShapeOfType(this.editor.getShape(id)!, 'group')
+				(id) =>
+					id !== shape.id &&
+					this.editor.isShapeOfType<TLGroupShape>(this.editor.getShape(id)!, 'group')
 			)
 
 		const isFocused = this.editor.getCurrentPageState().focusedGroupId !== shape.id

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

@@ -1,5 +1,4 @@
 import { TLShape } from '@tldraw/tlschema'
-import { TLBaseBoxShape } from '../../shapes/BaseBoxShapeUtil'
 import { StateNode, TLStateNodeConstructor } from '../StateNode'
 import { Idle } from './children/Idle'
 import { Pointing } from './children/Pointing'
@@ -12,7 +11,7 @@ export abstract class BaseBoxShapeTool extends StateNode {
 		return [Idle, Pointing]
 	}
 
-	abstract override shapeType: TLBaseBoxShape['type']
+	abstract override shapeType: string
 
 	onCreate?(_shape: TLShape | null): void | null
 }

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([
+			this.editor.createShapes<TLBaseBoxShape>([
 				{
 					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([
+		this.editor.createShapes<TLBaseBoxShape>([
 			{
 				id,
 				type: shapeType,
@@ -127,7 +127,7 @@ export class Pointing extends StateNode {
 			;(next as TLBaseBoxShape & { props: { scale: number } }).props.scale = scale
 		}
 
-		this.editor.updateShape(next)
+		this.editor.updateShape<TLBaseBoxShape>(next)
 
 		this.editor.setSelectedShapes([id])
 

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

@@ -1,21 +1,30 @@
-import { Geometry2d, RecordProps, Rectangle2d, ShapeUtil, T, TLShape, createShapeId } from '../..'
+import {
+	Geometry2d,
+	RecordProps,
+	Rectangle2d,
+	ShapeUtil,
+	T,
+	TLBaseShape,
+	createShapeId,
+} from '../..'
 import { createTLStore } from '../config/createTLStore'
 import { Editor } from '../editor/Editor'
 import { Box } from '../primitives/Box'
 import { getExportDefaultBounds } from './getSvgJsx'
 
-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 = TLBaseShape<
+	'test-shape',
+	{
+		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_TYPE
+	static override type = 'test-shape' as const
 	static override props: RecordProps<ITestShape> = {
 		w: T.number,
 		h: T.number,

package/src/lib/exports/getSvgJsx.tsx

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

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(s, 'group'))?.id ??
-				editor.getCurrentPageId()
+				editor.findShapeAncestor(prevParent, (s) => editor.isShapeOfType<TLGroupShape>(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(parent, 'group')) {
+		if (parent && editor.isShapeOfType<TLGroupShape>(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(s, 'group')
+			editor.isShapeOfType<TLGroupShape>(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(s, 'group'))?.id
+					editor.findShapeAncestor(shape, (s) => editor.isShapeOfType<TLGroupShape>(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.3.0-canary.fd6b7f2a8adc'
+export const version = '4.3.0-next.2b3bfbba757b'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-11-24T22:53:38.801Z',
-	patch: '2025-11-24T22:53:38.801Z',
+	minor: '2025-11-25T08:43:48.918Z',
+	patch: '2025-11-25T08:43:48.918Z',
 }