@tldraw/editor 3.16.0-canary.6c77a180e58d → 3.16.0-canary.7379d3553d7e

package/src/lib/config/TLUserPreferences.ts

@@ -25,6 +25,7 @@ export interface TLUserPreferences {
 	isDynamicSizeMode?: boolean | null
 	isPasteAtCursorMode?: boolean | null
 	showUiLabels?: boolean | null
+	inputMode?: 'trackpad' | 'mouse' | null
 }
 
 interface UserDataSnapshot {
@@ -54,6 +55,7 @@ export const userTypeValidator: T.Validator<TLUserPreferences> = T.object<TLUser
 	isDynamicSizeMode: T.boolean.nullable().optional(),
 	isPasteAtCursorMode: T.boolean.nullable().optional(),
 	showUiLabels: T.boolean.nullable().optional(),
+	inputMode: T.literalEnum('trackpad', 'mouse').nullable().optional(),
 })
 
 const Versions = {
@@ -67,6 +69,7 @@ const Versions = {
 	AddPasteAtCursor: 8,
 	AddKeyboardShortcuts: 9,
 	AddShowUiLabels: 10,
+	AddPointerPeripheral: 11,
 } as const
 
 const CURRENT_VERSION = Math.max(...Object.values(Versions))
@@ -109,6 +112,10 @@ function migrateSnapshot(data: { version: number; user: any }) {
 		data.user.showUiLabels = false
 	}
 
+	if (data.version < Versions.AddPointerPeripheral) {
+		data.user.inputMode = null
+	}
+
 	// finally
 	data.version = CURRENT_VERSION
 }
@@ -158,6 +165,7 @@ export const defaultUserPreferences = Object.freeze({
 	isPasteAtCursorMode: false,
 	showUiLabels: false,
 	colorScheme: 'light',
+	inputMode: null,
 }) satisfies Readonly<Omit<TLUserPreferences, 'id'>>
 
 /** @public */

package/src/lib/editor/Editor.test.ts

@@ -833,3 +833,93 @@ describe('selectAll', () => {
 		setSelectedShapesSpy.mockRestore()
 	})
 })
+
+describe('putExternalContent', () => {
+	let mockHandler: any
+
+	beforeEach(() => {
+		mockHandler = vi.fn()
+		editor.registerExternalContentHandler('text', mockHandler)
+	})
+
+	it('calls external content handler when not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info)
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('does not call external content handler when readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info)
+
+		expect(mockHandler).not.toHaveBeenCalled()
+	})
+
+	it('calls external content handler when readonly but force is true', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info, { force: true })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('calls external content handler when force is false and not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.putExternalContent(info, { force: false })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+})
+
+describe('replaceExternalContent', () => {
+	let mockHandler: any
+
+	beforeEach(() => {
+		mockHandler = vi.fn()
+		editor.registerExternalContentHandler('text', mockHandler)
+	})
+
+	it('calls external content handler when not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info)
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('does not call external content handler when readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info)
+
+		expect(mockHandler).not.toHaveBeenCalled()
+	})
+
+	it('calls external content handler when readonly but force is true', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(true)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info, { force: true })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+
+	it('calls external content handler when force is false and not readonly', async () => {
+		vi.spyOn(editor, 'getIsReadonly').mockReturnValue(false)
+
+		const info = { type: 'text' as const, text: 'test-data' }
+		await editor.replaceExternalContent(info, { force: false })
+
+		expect(mockHandler).toHaveBeenCalledWith(info)
+	})
+})

package/src/lib/editor/Editor.ts

@@ -343,6 +343,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.root = new NewRoot(this)
 		this.root.children = {}
 
+		this.markEventAsHandled = this.markEventAsHandled.bind(this)
+
 		const allShapeUtils = checkShapesAndAddCore(shapeUtils)
 
 		const _shapeUtils = {} as Record<string, ShapeUtil<any>>
@@ -4680,8 +4682,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.store.createComputedCache<Box, TLShape>('pageBoundsCache', (shape) => {
 			const pageTransform = this.getShapePageTransform(shape)
 			if (!pageTransform) return undefined
-			const geometry = this.getShapeGeometry(shape)
-			return Box.FromPoints(pageTransform.applyToPoints(geometry.vertices))
+
+			return Box.FromPoints(
+				pageTransform.applyToPoints(this.getShapeGeometry(shape).boundsVertices)
+			)
 		})
 	}
 
@@ -8831,8 +8835,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Handle external content, such as files, urls, embeds, or plain text which has been put into the app, for example by pasting external text or dropping external images onto canvas.
 	 *
 	 * @param info - Info about the external content.
+	 * @param opts - Options for handling external content, including force flag to bypass readonly checks.
 	 */
-	async putExternalContent<E>(info: TLExternalContent<E>): Promise<void> {
+	async putExternalContent<E>(
+		info: TLExternalContent<E>,
+		opts = {} as { force?: boolean }
+	): Promise<void> {
+		if (!opts.force && this.getIsReadonly()) return
 		return this.externalContentHandlers[info.type]?.(info as any)
 	}
 
@@ -8840,8 +8849,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Handle replacing external content.
 	 *
 	 * @param info - Info about the external content.
+	 * @param opts - Options for handling external content, including force flag to bypass readonly checks.
 	 */
-	async replaceExternalContent<E>(info: TLExternalContent<E>): Promise<void> {
+	async replaceExternalContent<E>(
+		info: TLExternalContent<E>,
+		opts = {} as { force?: boolean }
+	): Promise<void> {
+		if (!opts.force && this.getIsReadonly()) return
 		return this.externalContentHandlers[info.type]?.(info as any)
 	}
 
@@ -10085,6 +10099,37 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	private performanceTrackerTimeout = -1 as any
 
+	/** @internal */
+	private handledEvents = new WeakSet<Event>()
+
+	/**
+	 * In tldraw, events are sometimes handled by multiple components. For example, the shapes might
+	 * have events, but the canvas handles events too. The way that the canvas handles events can
+	 * interfere with the with the shapes event handlers - for example, it calls `.preventDefault()`
+	 * on `pointerDown`, which also prevents `click` events from firing on the shapes.
+	 *
+	 * You can use `.stopPropagation()` to prevent the event from propagating to the rest of the
+	 * DOM, but that can impact non-tldraw event handlers set up elsewhere. By using
+	 * `markEventAsHandled`, you'll stop other parts of tldraw from handling the event without
+	 * impacting other, non-tldraw event handlers. See also {@link Editor.wasEventAlreadyHandled}.
+	 *
+	 * @public
+	 */
+	markEventAsHandled(e: Event | { nativeEvent: Event }) {
+		const nativeEvent = 'nativeEvent' in e ? e.nativeEvent : e
+		this.handledEvents.add(nativeEvent)
+	}
+
+	/**
+	 * Checks if an event has already been handled. See {@link Editor.markEventAsHandled}.
+	 *
+	 * @public
+	 */
+	wasEventAlreadyHandled(e: Event | { nativeEvent: Event }) {
+		const nativeEvent = 'nativeEvent' in e ? e.nativeEvent : e
+		return this.handledEvents.has(nativeEvent)
+	}
+
 	/**
 	 * Dispatch an event to the editor.
 	 *
@@ -10289,7 +10334,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 				this._updateInputsFromEvent(info)
 
-				const { panSpeed, zoomSpeed, wheelBehavior } = cameraOptions
+				const { panSpeed, zoomSpeed } = cameraOptions
+				let wheelBehavior = cameraOptions.wheelBehavior
+				const inputMode = this.user.getUserPreferences().inputMode
+
+				// If the user has set their input mode preference, then use that to determine the wheel behavior
+				if (inputMode !== null) {
+					wheelBehavior = inputMode === 'trackpad' ? 'pan' : 'zoom'
+				}
 
 				if (wheelBehavior !== 'none') {
 					// Stop any camera animation

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

@@ -58,8 +58,12 @@ export class FocusManager {
 
 	private handleKeyDown(keyEvent: KeyboardEvent) {
 		const container = this.editor.getContainer()
-		if (this.editor.isIn('select.editing_shape')) return
-		if (document.activeElement === container && this.editor.getSelectedShapeIds().length > 0) return
+		const activeEl = document.activeElement
+		// Edit mode should remove the focus ring, however if the active element's
+		// parent is the contextual toolbar, then allow it.
+		if (this.editor.isIn('select.editing_shape') && !activeEl?.closest('.tlui-contextual-toolbar'))
+			return
+		if (activeEl === container && this.editor.getSelectedShapeIds().length > 0) return
 		if (['Tab', 'ArrowUp', 'ArrowDown'].includes(keyEvent.key)) {
 			container.classList.remove('tl-container__no-focus-ring')
 		}

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

@@ -30,6 +30,7 @@ describe('UserPreferencesManager', () => {
 		isWrapMode: false,
 		isDynamicSizeMode: false,
 		isPasteAtCursorMode: false,
+		inputMode: null,
 		...overrides,
 	})
 
@@ -233,6 +234,7 @@ describe('UserPreferencesManager', () => {
 				isDarkMode: false, // light mode
 				isWrapMode: mockUserPreferences.isWrapMode,
 				isDynamicResizeMode: mockUserPreferences.isDynamicSizeMode,
+				inputMode: mockUserPreferences.inputMode,
 			})
 		})
 
@@ -453,6 +455,22 @@ describe('UserPreferencesManager', () => {
 				)
 			})
 		})
+
+		describe('getInputMode', () => {
+			it('should return user input mode setting', () => {
+				expect(userPreferencesManager.getInputMode()).toBe(null)
+			})
+
+			it('should return trackpad if input mode is trackpad', () => {
+				userPreferencesAtom.set({ ...mockUserPreferences, inputMode: 'trackpad' })
+				expect(userPreferencesManager.getInputMode()).toBe('trackpad')
+			})
+
+			it('should return mouse if input mode is mouse', () => {
+				userPreferencesAtom.set({ ...mockUserPreferences, inputMode: 'mouse' })
+				expect(userPreferencesManager.getInputMode()).toBe('mouse')
+			})
+		})
 	})
 
 	describe('reactive behavior', () => {

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

@@ -50,6 +50,7 @@ export class UserPreferencesManager {
 			isWrapMode: this.getIsWrapMode(),
 			isDynamicResizeMode: this.getIsDynamicResizeMode(),
 			showUiLabels: this.getShowUiLabels(),
+			inputMode: this.getInputMode(),
 		}
 	}
 
@@ -124,4 +125,8 @@ export class UserPreferencesManager {
 	@computed getShowUiLabels() {
 		return this.user.userPreferences.get().showUiLabels ?? defaultUserPreferences.showUiLabels
 	}
+
+	@computed getInputMode() {
+		return this.user.userPreferences.get().inputMode ?? defaultUserPreferences.inputMode
+	}
 }

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,12 +1,7 @@
 import { useValue } from '@tldraw/state-react'
 import React, { useEffect, useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
-import {
-	preventDefault,
-	releasePointerCapture,
-	setPointerCapture,
-	stopEventPropagation,
-} from '../utils/dom'
+import { preventDefault, releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
 
@@ -17,14 +12,14 @@ export function useCanvasEvents() {
 	const events = useMemo(
 		function canvasEvents() {
 			function onPointerDown(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 
 				if (e.button === RIGHT_MOUSE_BUTTON) {
 					editor.dispatch({
 						type: 'pointer',
 						target: 'canvas',
 						name: 'right_click',
-						...getPointerInfo(e),
+						...getPointerInfo(editor, e),
 					})
 					return
 				}
@@ -37,12 +32,12 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_down',
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 
 			function onPointerUp(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
 
 				releasePointerCapture(e.currentTarget, e)
@@ -51,31 +46,33 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_up',
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 
 			function onPointerEnter(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
 				const canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'
 				editor.updateInstanceState({ isHoveringCanvas: canHover ? true : null })
 			}
 
 			function onPointerLeave(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (editor.getInstanceState().isPenMode && e.pointerType !== 'pen') return
 				const canHover = e.pointerType === 'mouse' || e.pointerType === 'pen'
 				editor.updateInstanceState({ isHoveringCanvas: canHover ? false : null })
 			}
 
 			function onTouchStart(e: React.TouchEvent) {
-				;(e as any).isKilled = true
+				if (editor.wasEventAlreadyHandled(e)) return
+				editor.markEventAsHandled(e)
 				preventDefault(e)
 			}
 
 			function onTouchEnd(e: React.TouchEvent) {
-				;(e as any).isKilled = true
+				if (editor.wasEventAlreadyHandled(e)) return
+				editor.markEventAsHandled(e)
 				// check that e.target is an HTMLElement
 				if (!(e.target instanceof HTMLElement)) return
 
@@ -94,12 +91,14 @@ export function useCanvasEvents() {
 			}
 
 			function onDragOver(e: React.DragEvent<Element>) {
+				if (editor.wasEventAlreadyHandled(e)) return
 				preventDefault(e)
 			}
 
 			async function onDrop(e: React.DragEvent<Element>) {
+				if (editor.wasEventAlreadyHandled(e)) return
 				preventDefault(e)
-				stopEventPropagation(e)
+				e.stopPropagation()
 
 				if (e.dataTransfer?.files?.length) {
 					const files = Array.from(e.dataTransfer.files)
@@ -124,7 +123,8 @@ export function useCanvasEvents() {
 			}
 
 			function onClick(e: React.MouseEvent) {
-				stopEventPropagation(e)
+				if (editor.wasEventAlreadyHandled(e)) return
+				e.stopPropagation()
 			}
 
 			return {
@@ -151,8 +151,8 @@ export function useCanvasEvents() {
 		let lastX: number, lastY: number
 
 		function onPointerMove(e: PointerEvent) {
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
+			if (editor.wasEventAlreadyHandled(e)) return
+			editor.markEventAsHandled(e)
 
 			if (e.clientX === lastX && e.clientY === lastY) return
 			lastX = e.clientX
@@ -168,7 +168,7 @@ export function useCanvasEvents() {
 					type: 'pointer',
 					target: 'canvas',
 					name: 'pointer_move',
-					...getPointerInfo(singleEvent),
+					...getPointerInfo(editor, singleEvent),
 				})
 			}
 		}

package/src/lib/hooks/useDocumentEvents.ts

@@ -2,7 +2,7 @@ import { useValue } from '@tldraw/state-react'
 import { useEffect } from 'react'
 import { Editor } from '../editor/Editor'
 import { TLKeyboardEventInfo } from '../editor/types/event-types'
-import { activeElementShouldCaptureKeys, preventDefault, stopEventPropagation } from '../utils/dom'
+import { activeElementShouldCaptureKeys, preventDefault } from '../utils/dom'
 import { isAccelKey } from '../utils/keyboard'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
@@ -29,7 +29,7 @@ export function useDocumentEvents() {
 			// re-dispatched, which would lead to an infinite loop.
 			if ((e as any).isSpecialRedispatchedEvent) return
 			preventDefault(e)
-			stopEventPropagation(e)
+			e.stopPropagation()
 			const cvs = container.querySelector('.tl-canvas')
 			if (!cvs) return
 			const newEvent = new DragEvent(e.type, e)
@@ -103,8 +103,8 @@ export function useDocumentEvents() {
 				preventDefault(e)
 			}
 
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
+			if (editor.wasEventAlreadyHandled(e)) return
+			editor.markEventAsHandled(e)
 			const hasSelectedShapes = !!editor.getSelectedShapeIds().length
 
 			switch (e.key) {
@@ -211,8 +211,8 @@ export function useDocumentEvents() {
 		}
 
 		const handleKeyUp = (e: KeyboardEvent) => {
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
+			if (editor.wasEventAlreadyHandled(e)) return
+			editor.markEventAsHandled(e)
 
 			if (areShortcutsDisabled(editor)) {
 				return

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -19,7 +19,7 @@ export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLE
 
 		const handleEvent = (e: PointerEvent | TouchEvent) => {
 			if (e instanceof PointerEvent && e.pointerType === 'pen') {
-				;(e as any).isKilled = true
+				editor.markEventAsHandled(e)
 				const { target } = e
 
 				// Allow events to propagate if the app is editing a shape, or if the event is occurring in a text area or input

package/src/lib/hooks/useGestureEvents.ts

@@ -3,7 +3,7 @@ import { createUseGesture, pinchAction, wheelAction } from '@use-gesture/react'
 import * as React from 'react'
 import { TLWheelEventInfo } from '../editor/types/event-types'
 import { Vec } from '../primitives/Vec'
-import { preventDefault, stopEventPropagation } from '../utils/dom'
+import { preventDefault } from '../utils/dom'
 import { isAccelKey } from '../utils/keyboard'
 import { normalizeWheel } from '../utils/normalizeWheel'
 import { useEditor } from './useEditor'
@@ -113,7 +113,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 			}
 
 			preventDefault(event)
-			stopEventPropagation(event)
+			event.stopPropagation()
 			const delta = normalizeWheel(event)
 
 			if (delta.x === 0 && delta.y === 0) return

package/src/lib/hooks/useHandleEvents.ts

@@ -16,7 +16,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 
 	return React.useMemo(() => {
 		const onPointerDown = (e: React.PointerEvent) => {
-			if ((e as any).isKilled) return
+			if (editor.wasEventAlreadyHandled(e)) return
 
 			// Must set pointer capture on an HTML element!
 			const target = loopToHtmlElement(e.currentTarget)
@@ -32,7 +32,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 				handle,
 				shape,
 				name: 'pointer_down',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 
@@ -40,7 +40,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 		let lastX: number, lastY: number
 
 		const onPointerMove = (e: React.PointerEvent) => {
-			if ((e as any).isKilled) return
+			if (editor.wasEventAlreadyHandled(e)) return
 			if (e.clientX === lastX && e.clientY === lastY) return
 			lastX = e.clientX
 			lastY = e.clientY
@@ -55,12 +55,12 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 				handle,
 				shape,
 				name: 'pointer_move',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 
 		const onPointerUp = (e: React.PointerEvent) => {
-			if ((e as any).isKilled) return
+			if (editor.wasEventAlreadyHandled(e)) return
 
 			const target = loopToHtmlElement(e.currentTarget)
 			releasePointerCapture(target, e)
@@ -75,7 +75,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 				handle,
 				shape,
 				name: 'pointer_up',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 

package/src/lib/hooks/useSelectionEvents.ts

@@ -1,12 +1,7 @@
 import { useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import { TLSelectionHandle } from '../editor/types/selection-types'
-import {
-	loopToHtmlElement,
-	releasePointerCapture,
-	setPointerCapture,
-	stopEventPropagation,
-} from '../utils/dom'
+import { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
 
@@ -17,7 +12,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 	const events = useMemo(
 		function selectionEvents() {
 			const onPointerDown: React.PointerEventHandler = (e) => {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 
 				if (e.button === RIGHT_MOUSE_BUTTON) {
 					editor.dispatch({
@@ -25,7 +20,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 						target: 'selection',
 						handle,
 						name: 'right_click',
-						...getPointerInfo(e),
+						...getPointerInfo(editor, e),
 					})
 					return
 				}
@@ -52,16 +47,16 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					type: 'pointer',
 					target: 'selection',
 					handle,
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
-				stopEventPropagation(e)
+				editor.markEventAsHandled(e)
 			}
 
 			// Track the last screen point
 			let lastX: number, lastY: number
 
 			function onPointerMove(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0) return
 				if (e.clientX === lastX && e.clientY === lastY) return
 				lastX = e.clientX
@@ -72,12 +67,12 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					type: 'pointer',
 					target: 'selection',
 					handle,
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}
 
 			const onPointerUp: React.PointerEventHandler = (e) => {
-				if ((e as any).isKilled) return
+				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0) return
 
 				editor.dispatch({
@@ -85,7 +80,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					type: 'pointer',
 					target: 'selection',
 					handle,
-					...getPointerInfo(e),
+					...getPointerInfo(editor, e),
 				})
 			}