@tldraw/editor 3.16.0-canary.1647ca5bba28 → 3.16.0-canary.1e59e27864bb

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-import { preventDefault } from '../utils/dom'
+import { markEventAsHandled, preventDefault } from '../utils/dom'
 import { useEditor } from './useEditor'
 
 const IGNORED_TAGS = ['textarea', 'input']
@@ -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
+				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

@@ -1,7 +1,12 @@
 import { TLArrowShape, TLLineShape, TLShapeId } from '@tldraw/tlschema'
 import * as React from 'react'
 import { Editor } from '../editor/Editor'
-import { loopToHtmlElement, releasePointerCapture, setPointerCapture } from '../utils/dom'
+import {
+	loopToHtmlElement,
+	releasePointerCapture,
+	setPointerCapture,
+	wasEventAlreadyHandled,
+} from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
 
@@ -16,7 +21,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 
 	return React.useMemo(() => {
 		const onPointerDown = (e: React.PointerEvent) => {
-			if ((e as any).isKilled) return
+			if (wasEventAlreadyHandled(e)) return
 
 			// Must set pointer capture on an HTML element!
 			const target = loopToHtmlElement(e.currentTarget)
@@ -40,7 +45,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 (wasEventAlreadyHandled(e)) return
 			if (e.clientX === lastX && e.clientY === lastY) return
 			lastX = e.clientX
 			lastY = e.clientY
@@ -60,7 +65,7 @@ export function useHandleEvents(id: TLShapeId, handleId: string) {
 		}
 
 		const onPointerUp = (e: React.PointerEvent) => {
-			if ((e as any).isKilled) return
+			if (wasEventAlreadyHandled(e)) return
 
 			const target = loopToHtmlElement(e.currentTarget)
 			releasePointerCapture(target, e)

package/src/lib/hooks/usePassThroughMouseOverEvents.ts

@@ -1,14 +1,17 @@
 import { RefObject, useEffect } from 'react'
 import { preventDefault } from '../utils/dom'
 import { useContainer } from './useContainer'
+import { useMaybeEditor } from './useEditor'
 
 /** @public */
 export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
 	const container = useContainer()
+	const editor = useMaybeEditor()
 
 	useEffect(() => {
 		function onMouseOver(e: MouseEvent) {
+			if (!editor?.getInstanceState().isFocused) return
 			if ((e as any).isSpecialRedispatchedEvent) return
 			preventDefault(e)
 			const cvs = container.querySelector('.tl-canvas')
@@ -25,5 +28,5 @@ export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {
 		return () => {
 			elm.removeEventListener('mouseover', onMouseOver)
 		}
-	}, [container, ref])
+	}, [container, editor, ref])
 }

package/src/lib/hooks/useSelectionEvents.ts

@@ -3,9 +3,10 @@ import { RIGHT_MOUSE_BUTTON } from '../constants'
 import { TLSelectionHandle } from '../editor/types/selection-types'
 import {
 	loopToHtmlElement,
+	markEventAsHandled,
 	releasePointerCapture,
 	setPointerCapture,
-	stopEventPropagation,
+	wasEventAlreadyHandled,
 } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
 import { useEditor } from './useEditor'
@@ -17,7 +18,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 	const events = useMemo(
 		function selectionEvents() {
 			const onPointerDown: React.PointerEventHandler = (e) => {
-				if ((e as any).isKilled) return
+				if (wasEventAlreadyHandled(e)) return
 
 				if (e.button === RIGHT_MOUSE_BUTTON) {
 					editor.dispatch({
@@ -54,14 +55,14 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 					handle,
 					...getPointerInfo(e),
 				})
-				stopEventPropagation(e)
+				markEventAsHandled(e)
 			}
 
 			// Track the last screen point
 			let lastX: number, lastY: number
 
 			function onPointerMove(e: React.PointerEvent) {
-				if ((e as any).isKilled) return
+				if (wasEventAlreadyHandled(e)) return
 				if (e.button !== 0) return
 				if (e.clientX === lastX && e.clientY === lastY) return
 				lastX = e.clientX
@@ -77,7 +78,7 @@ export function useSelectionEvents(handle: TLSelectionHandle) {
 			}
 
 			const onPointerUp: React.PointerEventHandler = (e) => {
-				if ((e as any).isKilled) return
+				if (wasEventAlreadyHandled(e)) return
 				if (e.button !== 0) return
 
 				editor.dispatch({