@tldraw/editor 3.16.0-canary.e9c30b532b82 → 3.16.0-canary.eb9a487b3293

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

@@ -1,28 +1,29 @@
+import { Mock, Mocked, vi } from 'vitest'
 import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
 import { TickManager } from './TickManager'
 
 // Mock the Editor class
-jest.mock('../../Editor')
+vi.mock('../../Editor')
 
 // Mock Date.now to control time
-const mockDateNow = jest.fn()
+const mockDateNow = vi.fn()
 Date.now = mockDateNow
 
 // Mock requestAnimationFrame and cancelAnimationFrame
-const mockRequestAnimationFrame = jest.fn()
-const mockCancelAnimationFrame = jest.fn()
+const mockRequestAnimationFrame = vi.fn()
+const mockCancelAnimationFrame = vi.fn()
 global.requestAnimationFrame = mockRequestAnimationFrame
 global.cancelAnimationFrame = mockCancelAnimationFrame
 
 describe('TickManager', () => {
-	let editor: jest.Mocked<Editor>
+	let editor: Mocked<Editor>
 	let tickManager: TickManager
-	let mockEmit: jest.Mock
-	let mockDisposablesAdd: jest.Mock
+	let mockEmit: Mock
+	let mockDisposablesAdd: Mock
 
 	beforeEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 
 		// Reset time
 		mockDateNow.mockReturnValue(1000)
@@ -37,8 +38,8 @@ describe('TickManager', () => {
 
 		mockCancelAnimationFrame.mockImplementation(() => {})
 
-		mockEmit = jest.fn()
-		mockDisposablesAdd = jest.fn()
+		mockEmit = vi.fn()
+		mockDisposablesAdd = vi.fn()
 
 		editor = {
 			emit: mockEmit,
@@ -90,7 +91,7 @@ describe('TickManager', () => {
 		})
 
 		it('should cancel existing RAF before starting new one', () => {
-			const mockCancel = jest.fn()
+			const mockCancel = vi.fn()
 			tickManager.cancelRaf = mockCancel
 
 			tickManager.start()
@@ -143,7 +144,7 @@ describe('TickManager', () => {
 		})
 
 		it('should update pointer velocity', () => {
-			const updatePointerVelocitySpy = jest.spyOn(tickManager as any, 'updatePointerVelocity')
+			const updatePointerVelocitySpy = vi.spyOn(tickManager as any, 'updatePointerVelocity')
 			tickManager.now = 1000
 			mockDateNow.mockReturnValue(1016)
 
@@ -176,7 +177,7 @@ describe('TickManager', () => {
 		})
 
 		it('should cancel RAF if exists', () => {
-			const mockCancel = jest.fn()
+			const mockCancel = vi.fn()
 			tickManager.cancelRaf = mockCancel
 
 			tickManager.dispose()

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

@@ -1,17 +1,15 @@
 import { atom } from '@tldraw/state'
+import { Mocked, vi } from 'vitest'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { TLUser } from '../../../config/createTLUser'
 import { UserPreferencesManager } from './UserPreferencesManager'
 
 // Mock window.matchMedia
-const mockMatchMedia = jest.fn()
-Object.defineProperty(window, 'matchMedia', {
-	writable: true,
-	value: mockMatchMedia,
-})
+const mockMatchMedia = vi.fn()
+window.matchMedia = mockMatchMedia
 
 describe('UserPreferencesManager', () => {
-	let mockUser: jest.Mocked<TLUser>
+	let mockUser: Mocked<TLUser>
 	let mockUserPreferences: TLUserPreferences
 	let userPreferencesAtom: any
 	let userPreferencesManager: UserPreferencesManager
@@ -36,14 +34,14 @@ describe('UserPreferencesManager', () => {
 	})
 
 	beforeEach(() => {
-		jest.clearAllMocks()
+		vi.clearAllMocks()
 
 		mockUserPreferences = createMockUserPreferences()
 		userPreferencesAtom = atom('userPreferences', mockUserPreferences)
 
 		mockUser = {
 			userPreferences: userPreferencesAtom,
-			setUserPreferences: jest.fn((prefs) => {
+			setUserPreferences: vi.fn((prefs) => {
 				userPreferencesAtom.set(prefs)
 			}),
 		}
@@ -51,8 +49,8 @@ describe('UserPreferencesManager', () => {
 		// Default matchMedia mock - no dark mode preference
 		mockMatchMedia.mockReturnValue({
 			matches: false,
-			addEventListener: jest.fn(),
-			removeEventListener: jest.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
 		})
 	})
 
@@ -66,17 +64,14 @@ describe('UserPreferencesManager', () => {
 			expect(userPreferencesManager.systemColorScheme.get()).toBe('light')
 
 			// Restore matchMedia
-			Object.defineProperty(window, 'matchMedia', {
-				writable: true,
-				value: mockMatchMedia,
-			})
+			window.matchMedia = mockMatchMedia
 		})
 
 		it('should initialize with light system color scheme when dark mode not preferred', () => {
 			mockMatchMedia.mockReturnValue({
 				matches: false,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -87,8 +82,8 @@ describe('UserPreferencesManager', () => {
 		it('should initialize with dark system color scheme when dark mode preferred', () => {
 			mockMatchMedia.mockReturnValue({
 				matches: true,
-				addEventListener: jest.fn(),
-				removeEventListener: jest.fn(),
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -97,8 +92,8 @@ describe('UserPreferencesManager', () => {
 		})
 
 		it('should set up media query listener for color scheme changes', () => {
-			const mockAddEventListener = jest.fn()
-			const mockRemoveEventListener = jest.fn()
+			const mockAddEventListener = vi.fn()
+			const mockRemoveEventListener = vi.fn()
 
 			mockMatchMedia.mockReturnValue({
 				matches: false,
@@ -112,7 +107,7 @@ describe('UserPreferencesManager', () => {
 		})
 
 		it('should handle media query change events', () => {
-			const mockAddEventListener = jest.fn()
+			const mockAddEventListener = vi.fn()
 			let changeHandler: (e: MediaQueryListEvent) => void
 
 			mockMatchMedia.mockReturnValue({
@@ -123,7 +118,7 @@ describe('UserPreferencesManager', () => {
 					}
 					mockAddEventListener(event, handler)
 				},
-				removeEventListener: jest.fn(),
+				removeEventListener: vi.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -153,11 +148,11 @@ describe('UserPreferencesManager', () => {
 
 	describe('dispose', () => {
 		it('should remove media query listener on dispose', () => {
-			const mockRemoveEventListener = jest.fn()
+			const mockRemoveEventListener = vi.fn()
 
 			mockMatchMedia.mockReturnValue({
 				matches: false,
-				addEventListener: jest.fn(),
+				addEventListener: vi.fn(),
 				removeEventListener: mockRemoveEventListener,
 			})
 
@@ -170,8 +165,8 @@ describe('UserPreferencesManager', () => {
 		it('should call all disposables', () => {
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
 
-			const mockDisposable1 = jest.fn()
-			const mockDisposable2 = jest.fn()
+			const mockDisposable1 = vi.fn()
+			const mockDisposable2 = vi.fn()
 
 			userPreferencesManager.disposables.add(mockDisposable1)
 			userPreferencesManager.disposables.add(mockDisposable2)

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

@@ -13,7 +13,7 @@ export class UserPreferencesManager {
 		private readonly user: TLUser,
 		private readonly inferDarkMode: boolean
 	) {
-		if (typeof window === 'undefined' || !('matchMedia' in window)) return
+		if (typeof window === 'undefined' || !window.matchMedia) return
 
 		const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 		if (darkModeMediaQuery?.matches) {

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

@@ -296,6 +296,27 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 		return false
 	}
 
+	/**
+	 * Get the clip path to apply to this shape's children.
+	 *
+	 * @param shape - The shape to get the clip path for
+	 * @returns Array of points defining the clipping polygon in local coordinates, or undefined if no clipping
+	 * @public
+	 */
+	getClipPath?(shape: Shape): Vec[] | undefined
+
+	/**
+	 * Whether a specific child shape should be clipped by this shape.
+	 * Only called if getClipPath returns a valid polygon.
+	 *
+	 * If not defined, the default behavior is to clip all children.
+	 *
+	 * @param child - The child shape to check
+	 * @returns boolean indicating if this child should be clipped
+	 * @public
+	 */
+	shouldClipChild?(child: TLShape): boolean
+
 	/**
 	 * Whether the shape should hide its resize handles when selected.
 	 *
@@ -341,6 +362,20 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 		return false
 	}
 
+	/**
+	 * By default, the bounds of an image export are the bounds of all the shapes it contains, plus
+	 * some padding. If an export includes a shape where `isExportBoundsContainer` is true, then the
+	 * padding is skipped _if the bounds of that shape contains all the other shapes_. This is
+	 * useful in cases like annotating on top of an image, where you usually want to avoid extra
+	 * padding around the image if you don't need it.
+	 *
+	 * @param _shape - The shape to check
+	 * @returns True if this shape should be treated as an export bounds container
+	 */
+	isExportBoundsContainer(_shape: Shape): boolean {
+		return false
+	}
+
 	/**
 	 * Get a JSX element for the shape (as an HTML element) to be rendered as part of the canvas background - behind any other shape content.
 	 *

package/src/lib/editor/types/misc-types.ts

@@ -72,12 +72,6 @@ export interface TLImageExportOptions extends TLSvgExportOptions {
 	format?: TLExportType
 }
 
-/**
- * @public
- * @deprecated use {@link TLImageExportOptions} instead
- */
-export type TLSvgOptions = TLImageExportOptions
-
 /** @public */
 export interface TLCameraMoveOptions {
 	/** Whether to move the camera immediately, rather than on the next tick. */