packages/editor/src/lib/utils/pointer.test.ts - main - githubmirror/tldraw

packages/editor/src/lib/utils/pointer.test.ts

76 строк2 KB

Steve Ruiz

fix(editor): only auto-enable pen mode for direct-display stylus input (#9316)

20 июн 2026, 01:47

20 июн 2026, 01:47aabc8d8

import { tlenv } from '../globals/environment'
import { TestEditor } from '../test/TestEditor'
import { getPointerInfo } from './getPointerInfo'
import { isDirectDisplayPen, isSecondaryClickEvent } from './pointer'

const originalIsDarwin = tlenv.isDarwin

afterEach(() => {
	tlenv.isDarwin = originalIsDarwin
})

describe('isSecondaryClickEvent', () => {
	it('treats ctrl + left-click as a secondary click on macOS', () => {
		tlenv.isDarwin = true
		expect(isSecondaryClickEvent({ button: 0, ctrlKey: true, metaKey: false })).toBe(true)
	})

	it('does not treat ctrl + left-click as a secondary click off macOS', () => {
		tlenv.isDarwin = false
		expect(isSecondaryClickEvent({ button: 0, ctrlKey: true, metaKey: false })).toBe(false)
	})
})

describe('isDirectDisplayPen', () => {
	const originalIsTouchDevice = tlenv.isTouchDevice

	afterEach(() => {
		tlenv.isTouchDevice = originalIsTouchDevice
	})

	function event(pointerType: string) {
		return { pointerType, pointerId: 1 } as unknown as PointerEvent
	}

	it('treats a pen on a touch-capable device as a direct-display pen', () => {
		tlenv.isTouchDevice = true
		expect(isDirectDisplayPen(event('pen'))).toBe(true)
	})

	it('treats a pen on a non-touch device as indirect', () => {
		tlenv.isTouchDevice = false
		expect(isDirectDisplayPen(event('pen'))).toBe(false)
	})

	it('is never true for mouse or touch input, even on a touch-capable device', () => {
		tlenv.isTouchDevice = true
		expect(isDirectDisplayPen(event('mouse'))).toBe(false)
		expect(isDirectDisplayPen(event('touch'))).toBe(false)
	})
})

describe('ctrl + left-click on macOS fires as a right-click (regression)', () => {
	// Regression test for https://github.com/tldraw/tldraw/issues/8217
	// On macOS, a ctrl + left-click should be treated as a right-click
	let editor: TestEditor

	beforeEach(() => {
		editor = new TestEditor()
	})

	afterEach(() => {
		editor.dispose()
	})

	it('reports button 2 in the dispatched pointer info on macOS', () => {
		tlenv.isDarwin = true
		const event = new PointerEvent('pointerdown', { button: 0, ctrlKey: true })
		expect(getPointerInfo(editor, event).button).toBe(2)
	})

	it('stays button 0 for the same gesture off macOS', () => {
		tlenv.isDarwin = false
		const event = new PointerEvent('pointerdown', { button: 0, ctrlKey: true })
		expect(getPointerInfo(editor, event).button).toBe(0)
	})
})