@tldraw/editor 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

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

@@ -1,21 +1,17 @@
-import { vi } from 'vitest'
 import { Editor } from '../../Editor'
 import { TextManager, TLMeasureTextSpanOpts } from './TextManager'
 
 // Create a simple mock DOM environment
 const mockElement = {
-	classList: { add: vi.fn() },
+	classList: { add: jest.fn() },
 	tabIndex: -1,
-	cloneNode: vi.fn(),
+	cloneNode: jest.fn(),
 	innerHTML: '',
 	textContent: '',
-	setAttribute: vi.fn(),
-	style: {
-		setProperty: vi.fn(),
-		getPropertyValue: vi.fn(() => ''),
-	},
+	setAttribute: jest.fn(),
+	style: { setProperty: jest.fn() },
 	scrollWidth: 100,
-	getBoundingClientRect: vi.fn(() => ({
+	getBoundingClientRect: jest.fn(() => ({
 		width: 100,
 		height: 20,
 		left: 0,
@@ -23,44 +19,22 @@ const mockElement = {
 		right: 100,
 		bottom: 20,
 	})),
-	remove: vi.fn(),
-	insertAdjacentElement: vi.fn(),
+	remove: jest.fn(),
+	insertAdjacentElement: jest.fn(),
 	childNodes: [],
 }
 
 // Mock document.createElement to return our mock element
-const mockCreateElement = vi.fn(() => {
+const mockCreateElement = jest.fn(() => {
 	const element = { ...mockElement }
-	element.cloneNode = vi.fn(() => ({ ...element }))
-
-	// Make textContent and innerHTML reactive like real DOM elements
-	let _textContent = ''
-	let _innerHTML = ''
-
-	Object.defineProperty(element, 'textContent', {
-		get: () => _textContent,
-		set: (value) => {
-			_textContent = value || ''
-			// When textContent is set, innerHTML should be the escaped version
-			_innerHTML = _textContent
-		},
-	})
-
-	Object.defineProperty(element, 'innerHTML', {
-		get: () => _innerHTML,
-		set: (value) => {
-			_innerHTML = value || ''
-			_textContent = _innerHTML // Simple approximation
-		},
-	})
-
+	element.cloneNode = jest.fn(() => ({ ...element }))
 	return element
 })
 
 // Mock editor
 const mockEditor = {
-	getContainer: vi.fn(() => ({
-		appendChild: vi.fn(),
+	getContainer: jest.fn(() => ({
+		appendChild: jest.fn(),
 	})),
 } as unknown as Editor
 
@@ -69,10 +43,10 @@ global.document = {
 	createElement: mockCreateElement,
 } as any
 
-global.Range = vi.fn(() => ({
-	setStart: vi.fn(),
-	setEnd: vi.fn(),
-	getClientRects: vi.fn(() => [
+global.Range = jest.fn(() => ({
+	setStart: jest.fn(),
+	setEnd: jest.fn(),
+	getClientRects: jest.fn(() => [
 		{
 			width: 10,
 			height: 16,
@@ -88,7 +62,7 @@ describe('TextManager', () => {
 	let textManager: TextManager
 
 	beforeEach(() => {
-		vi.clearAllMocks()
+		jest.clearAllMocks()
 		textManager = new TextManager(mockEditor)
 	})
 
@@ -112,13 +86,13 @@ describe('TextManager', () => {
 		}
 
 		it('should call measureHtml with normalized text', () => {
-			const spy = vi.spyOn(textManager, 'measureHtml')
+			const spy = jest.spyOn(textManager, 'measureHtml')
 			textManager.measureText('Hello World', defaultOpts)
 			expect(spy).toHaveBeenCalledWith('Hello World', defaultOpts)
 		})
 
 		it('should normalize line breaks', () => {
-			const spy = vi.spyOn(textManager, 'measureHtml')
+			const spy = jest.spyOn(textManager, 'measureHtml')
 			textManager.measureText('Hello\nWorld\r\nTest', defaultOpts)
 			// The text should be normalized to use consistent line breaks
 			expect(spy).toHaveBeenCalled()
@@ -273,7 +247,7 @@ describe('TextManager', () => {
 
 		it('should return array of text spans for non-empty text', () => {
 			// Mock measureElementTextNodeSpans to return some spans
-			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Hello World',
@@ -292,7 +266,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle wrap overflow', () => {
-			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Hello World',
@@ -310,7 +284,8 @@ describe('TextManager', () => {
 
 		it('should handle truncate-ellipsis overflow', () => {
 			// Mock the calls for ellipsis handling
-			vi.spyOn(textManager, 'measureElementTextNodeSpans')
+			jest
+				.spyOn(textManager, 'measureElementTextNodeSpans')
 				.mockReturnValueOnce({
 					spans: [
 						{
@@ -346,7 +321,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle truncate-clip overflow', () => {
-			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Hello Wo',
@@ -363,7 +338,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle different text alignments', () => {
-			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Test',
@@ -383,7 +358,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle custom font properties', () => {
-			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Test',
@@ -407,7 +382,7 @@ describe('TextManager', () => {
 		})
 
 		it('should handle other styles', () => {
-			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
+			jest.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [
 					{
 						text: 'Test',

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

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

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

@@ -1,15 +1,17 @@
 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 = vi.fn()
-window.matchMedia = mockMatchMedia
+const mockMatchMedia = jest.fn()
+Object.defineProperty(window, 'matchMedia', {
+	writable: true,
+	value: mockMatchMedia,
+})
 
 describe('UserPreferencesManager', () => {
-	let mockUser: Mocked<TLUser>
+	let mockUser: jest.Mocked<TLUser>
 	let mockUserPreferences: TLUserPreferences
 	let userPreferencesAtom: any
 	let userPreferencesManager: UserPreferencesManager
@@ -22,8 +24,6 @@ describe('UserPreferencesManager', () => {
 		color: '#FF802B',
 		locale: 'en',
 		animationSpeed: 1,
-		areKeyboardShortcutsEnabled: true,
-		showUiLabels: false,
 		edgeScrollSpeed: 1,
 		colorScheme: 'light',
 		isSnapMode: false,
@@ -34,14 +34,14 @@ describe('UserPreferencesManager', () => {
 	})
 
 	beforeEach(() => {
-		vi.clearAllMocks()
+		jest.clearAllMocks()
 
 		mockUserPreferences = createMockUserPreferences()
 		userPreferencesAtom = atom('userPreferences', mockUserPreferences)
 
 		mockUser = {
 			userPreferences: userPreferencesAtom,
-			setUserPreferences: vi.fn((prefs) => {
+			setUserPreferences: jest.fn((prefs) => {
 				userPreferencesAtom.set(prefs)
 			}),
 		}
@@ -49,8 +49,8 @@ describe('UserPreferencesManager', () => {
 		// Default matchMedia mock - no dark mode preference
 		mockMatchMedia.mockReturnValue({
 			matches: false,
-			addEventListener: vi.fn(),
-			removeEventListener: vi.fn(),
+			addEventListener: jest.fn(),
+			removeEventListener: jest.fn(),
 		})
 	})
 
@@ -64,14 +64,17 @@ describe('UserPreferencesManager', () => {
 			expect(userPreferencesManager.systemColorScheme.get()).toBe('light')
 
 			// Restore matchMedia
-			window.matchMedia = mockMatchMedia
+			Object.defineProperty(window, 'matchMedia', {
+				writable: true,
+				value: mockMatchMedia,
+			})
 		})
 
 		it('should initialize with light system color scheme when dark mode not preferred', () => {
 			mockMatchMedia.mockReturnValue({
 				matches: false,
-				addEventListener: vi.fn(),
-				removeEventListener: vi.fn(),
+				addEventListener: jest.fn(),
+				removeEventListener: jest.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -82,8 +85,8 @@ describe('UserPreferencesManager', () => {
 		it('should initialize with dark system color scheme when dark mode preferred', () => {
 			mockMatchMedia.mockReturnValue({
 				matches: true,
-				addEventListener: vi.fn(),
-				removeEventListener: vi.fn(),
+				addEventListener: jest.fn(),
+				removeEventListener: jest.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -92,8 +95,8 @@ describe('UserPreferencesManager', () => {
 		})
 
 		it('should set up media query listener for color scheme changes', () => {
-			const mockAddEventListener = vi.fn()
-			const mockRemoveEventListener = vi.fn()
+			const mockAddEventListener = jest.fn()
+			const mockRemoveEventListener = jest.fn()
 
 			mockMatchMedia.mockReturnValue({
 				matches: false,
@@ -107,7 +110,7 @@ describe('UserPreferencesManager', () => {
 		})
 
 		it('should handle media query change events', () => {
-			const mockAddEventListener = vi.fn()
+			const mockAddEventListener = jest.fn()
 			let changeHandler: (e: MediaQueryListEvent) => void
 
 			mockMatchMedia.mockReturnValue({
@@ -118,7 +121,7 @@ describe('UserPreferencesManager', () => {
 					}
 					mockAddEventListener(event, handler)
 				},
-				removeEventListener: vi.fn(),
+				removeEventListener: jest.fn(),
 			})
 
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
@@ -148,11 +151,11 @@ describe('UserPreferencesManager', () => {
 
 	describe('dispose', () => {
 		it('should remove media query listener on dispose', () => {
-			const mockRemoveEventListener = vi.fn()
+			const mockRemoveEventListener = jest.fn()
 
 			mockMatchMedia.mockReturnValue({
 				matches: false,
-				addEventListener: vi.fn(),
+				addEventListener: jest.fn(),
 				removeEventListener: mockRemoveEventListener,
 			})
 
@@ -165,8 +168,8 @@ describe('UserPreferencesManager', () => {
 		it('should call all disposables', () => {
 			userPreferencesManager = new UserPreferencesManager(mockUser, false)
 
-			const mockDisposable1 = vi.fn()
-			const mockDisposable2 = vi.fn()
+			const mockDisposable1 = jest.fn()
+			const mockDisposable2 = jest.fn()
 
 			userPreferencesManager.disposables.add(mockDisposable1)
 			userPreferencesManager.disposables.add(mockDisposable2)
@@ -226,8 +229,6 @@ describe('UserPreferencesManager', () => {
 				locale: mockUserPreferences.locale,
 				color: mockUserPreferences.color,
 				animationSpeed: mockUserPreferences.animationSpeed,
-				areKeyboardShortcutsEnabled: mockUserPreferences.areKeyboardShortcutsEnabled,
-				showUiLabels: mockUserPreferences.showUiLabels,
 				isSnapMode: mockUserPreferences.isSnapMode,
 				colorScheme: mockUserPreferences.colorScheme,
 				isDarkMode: false, // light mode
@@ -361,32 +362,6 @@ describe('UserPreferencesManager', () => {
 			})
 		})
 
-		describe('getAreKeyboardShortcutsEnabled', () => {
-			it('should return user keyboard shortcuts', () => {
-				expect(userPreferencesManager.getAreKeyboardShortcutsEnabled()).toBe(
-					mockUserPreferences.areKeyboardShortcutsEnabled
-				)
-			})
-
-			it('should return default keyboard shortcuts when null', () => {
-				userPreferencesAtom.set({ ...mockUserPreferences, areKeyboardShortcutsEnabled: null })
-				expect(userPreferencesManager.getAreKeyboardShortcutsEnabled()).toBe(
-					defaultUserPreferences.areKeyboardShortcutsEnabled
-				)
-			})
-		})
-
-		describe('getShowUiLabels', () => {
-			it('should return user show ui labels setting', () => {
-				expect(userPreferencesManager.getShowUiLabels()).toBe(mockUserPreferences.showUiLabels)
-			})
-
-			it('should return default show ui labels when null', () => {
-				userPreferencesAtom.set({ ...mockUserPreferences, showUiLabels: null })
-				expect(userPreferencesManager.getShowUiLabels()).toBe(defaultUserPreferences.showUiLabels)
-			})
-		})
-
 		describe('getEdgeScrollSpeed', () => {
 			it('should return user edge scroll speed', () => {
 				expect(userPreferencesManager.getEdgeScrollSpeed()).toBe(
@@ -508,7 +483,6 @@ describe('UserPreferencesManager', () => {
 				color: null,
 				locale: null,
 				animationSpeed: null,
-				areKeyboardShortcutsEnabled: null,
 				edgeScrollSpeed: null,
 				isSnapMode: null,
 				isWrapMode: null,
@@ -522,9 +496,6 @@ describe('UserPreferencesManager', () => {
 			expect(userPreferencesManager.getColor()).toBe(defaultUserPreferences.color)
 			expect(userPreferencesManager.getLocale()).toBe(defaultUserPreferences.locale)
 			expect(userPreferencesManager.getAnimationSpeed()).toBe(defaultUserPreferences.animationSpeed)
-			expect(userPreferencesManager.getAreKeyboardShortcutsEnabled()).toBe(
-				defaultUserPreferences.areKeyboardShortcutsEnabled
-			)
 			expect(userPreferencesManager.getEdgeScrollSpeed()).toBe(
 				defaultUserPreferences.edgeScrollSpeed
 			)

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' || !window.matchMedia) return
+		if (typeof window === 'undefined' || !('matchMedia' in window)) return
 
 		const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
 		if (darkModeMediaQuery?.matches) {
@@ -43,13 +43,11 @@ export class UserPreferencesManager {
 			locale: this.getLocale(),
 			color: this.getColor(),
 			animationSpeed: this.getAnimationSpeed(),
-			areKeyboardShortcutsEnabled: this.getAreKeyboardShortcutsEnabled(),
 			isSnapMode: this.getIsSnapMode(),
 			colorScheme: this.user.userPreferences.get().colorScheme,
 			isDarkMode: this.getIsDarkMode(),
 			isWrapMode: this.getIsWrapMode(),
 			isDynamicResizeMode: this.getIsDynamicResizeMode(),
-			showUiLabels: this.getShowUiLabels(),
 		}
 	}
 
@@ -77,13 +75,6 @@ export class UserPreferencesManager {
 		return this.user.userPreferences.get().animationSpeed ?? defaultUserPreferences.animationSpeed
 	}
 
-	@computed getAreKeyboardShortcutsEnabled() {
-		return (
-			this.user.userPreferences.get().areKeyboardShortcutsEnabled ??
-			defaultUserPreferences.areKeyboardShortcutsEnabled
-		)
-	}
-
 	@computed getId() {
 		return this.user.userPreferences.get().id
 	}
@@ -120,8 +111,4 @@ export class UserPreferencesManager {
 			defaultUserPreferences.isPasteAtCursorMode
 		)
 	}
-
-	@computed getShowUiLabels() {
-		return this.user.userPreferences.get().showUiLabels ?? defaultUserPreferences.showUiLabels
-	}
 }

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

@@ -584,15 +584,6 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onResizeEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
 
-	/**
-	 * A callback called when a shape resize is cancelled.
-	 *
-	 * @param initial - The shape at the start of the resize.
-	 * @param current - The current shape.
-	 * @public
-	 */
-	onResizeCancel?(initial: Shape, current: Shape): void
-
 	/**
 	 * A callback called when a shape starts being translated.
 	 *
@@ -622,25 +613,6 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onTranslateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
 
-	/**
-	 * A callback called when a shape translation is cancelled.
-	 *
-	 * @param initial - The shape at the start of the translation.
-	 * @param current - The current shape.
-	 * @public
-	 */
-	onTranslateCancel?(initial: Shape, current: Shape): void
-
-	/**
-	 * A callback called when a shape's handle starts being dragged.
-	 *
-	 * @param shape - The shape.
-	 * @param info - An object containing the handle and whether the handle is 'precise' or not.
-	 * @returns A change to apply to the shape, or void.
-	 * @public
-	 */
-	onHandleDragStart?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void
-
 	/**
 	 * A callback called when a shape's handle changes.
 	 *
@@ -651,25 +623,6 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onHandleDrag?(shape: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void
 
-	/**
-	 * A callback called when a shape's handle finishes being dragged.
-	 *
-	 * @param current - The current shape.
-	 * @param info - An object containing the handle and whether the handle is 'precise' or not.
-	 * @returns A change to apply to the shape, or void.
-	 * @public
-	 */
-	onHandleDragEnd?(current: Shape, info: TLHandleDragInfo<Shape>): TLShapePartial<Shape> | void
-
-	/**
-	 * A callback called when a shape's handle drag is cancelled.
-	 *
-	 * @param current - The current shape.
-	 * @param info - An object containing the handle and whether the handle is 'precise' or not.
-	 * @public
-	 */
-	onHandleDragCancel?(current: Shape, info: TLHandleDragInfo<Shape>): void
-
 	/**
 	 * A callback called when a shape starts being rotated.
 	 *
@@ -699,15 +652,6 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 */
 	onRotateEnd?(initial: Shape, current: Shape): TLShapePartial<Shape> | void
 
-	/**
-	 * A callback called when a shape rotation is cancelled.
-	 *
-	 * @param initial - The shape at the start of the rotation.
-	 * @param current - The current shape.
-	 * @public
-	 */
-	onRotateCancel?(initial: Shape, current: Shape): void
-
 	/**
 	 * Not currently used.
 	 *
@@ -875,6 +819,5 @@ export interface TLResizeInfo<T extends TLShape> {
 export interface TLHandleDragInfo<T extends TLShape> {
 	handle: TLHandle
 	isPrecise: boolean
-	isCreatingShape: boolean
 	initial?: T | undefined
 }

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

@@ -62,7 +62,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 
 		this.parent = parent ?? ({} as any)
 
-		if (parent) {
+		if (this.parent) {
 			if (children && initial) {
 				this.type = 'branch'
 				this.initial = initial
@@ -238,32 +238,6 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 		this._currentToolIdMask.set(id)
 	}
 
-	/**
-	 * Add a child node to this state node.
-	 *
-	 * @public
-	 */
-	addChild(childConstructor: TLStateNodeConstructor): this {
-		if (this.type === 'leaf') {
-			throw new Error('StateNode.addChild: cannot add child to a leaf node')
-		}
-
-		// Initialize children if it's undefined (for root nodes without static children)
-		if (!this.children) {
-			this.children = {}
-		}
-
-		const child = new childConstructor(this.editor, this)
-
-		// Check if a child with this ID already exists
-		if (this.children[child.id]) {
-			throw new Error(`StateNode.addChild: a child with id '${child.id}' already exists`)
-		}
-
-		this.children[child.id] = child
-		return this
-	}
-
 	onWheel?(info: TLWheelEventInfo): void
 	onPointerDown?(info: TLPointerEventInfo): void
 	onPointerMove?(info: TLPointerEventInfo): void