@tldraw/editor 4.6.0-next.0eb36d65eec3 → 4.6.0-next.1a05e8ec7833

package/src/lib/exports/getSvgJsx.tsx

@@ -1,11 +1,6 @@
 import { useAtom, useValue } from '@tldraw/state-react'
-import {
-	TLFrameShape,
-	TLShape,
-	TLShapeId,
-	getColorValue,
-	getDefaultColorTheme,
-} from '@tldraw/tlschema'
+import { TLFrameShape, TLShape, TLShapeId } from '@tldraw/tlschema'
+import { TLFontFace } from '@tldraw/tlschema'
 import { hasOwnProperty, promiseWithResolve, uniqueId } from '@tldraw/utils'
 import {
 	ComponentType,
@@ -21,7 +16,7 @@ import { flushSync } from 'react-dom'
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import { InnerShape, InnerShapeBackground } from '../components/Shape'
 import type { Editor, TLRenderingShape } from '../editor/Editor'
-import { TLFontFace } from '../editor/managers/FontManager/FontManager'
+import { getColorValue } from '../editor/managers/ThemeManager/defaultThemes'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { TLImageExportOptions } from '../editor/types/misc-types'
 import {
@@ -54,7 +49,9 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 	const renderPadding =
 		typeof opts.padding === 'number' ? opts.padding : editor.options.defaultSvgPadding
 
-	const isDarkMode = opts.darkMode ?? editor.user.getIsDarkMode()
+	const colorMode: 'light' | 'dark' =
+		opts.darkMode !== undefined ? (opts.darkMode ? 'dark' : 'light') : editor.getColorMode()
+	const isDarkMode = colorMode === 'dark'
 
 	// ---Figure out which shapes we need to include
 	const shapeIdsToInclude = editor.getShapeAndDescendantIds(ids)
@@ -63,8 +60,9 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 		.filter(({ id }) => shapeIdsToInclude.has(id))
 
 	// --- Common bounding box of all shapes
+	const singleFrameShape = ids.length === 1 ? editor.getShape(ids[0]) : null
 	const singleFrameShapeId =
-		ids.length === 1 && editor.isShapeOfType(editor.getShape(ids[0])!, 'frame') ? ids[0] : null
+		singleFrameShape && editor.isShapeFrameLike(singleFrameShape) ? ids[0] : null
 
 	let bbox: null | Box = null
 	let paddingWasApplied = false
@@ -116,6 +114,7 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 			background={background}
 			singleFrameShapeId={singleFrameShapeId}
 			isDarkMode={isDarkMode}
+			colorMode={colorMode}
 			renderingShapes={renderingShapes}
 			onMount={initialEffectPromise.resolve}
 			waitUntil={exportDelay.waitUntil}
@@ -206,6 +205,7 @@ function SvgExport({
 	background,
 	singleFrameShapeId,
 	isDarkMode,
+	colorMode,
 	renderingShapes,
 	onMount,
 	waitUntil,
@@ -218,12 +218,13 @@ function SvgExport({
 	background: boolean
 	singleFrameShapeId: TLShapeId | null
 	isDarkMode: boolean
+	colorMode: 'light' | 'dark'
 	renderingShapes: TLRenderingShape[]
 	onMount(): void
 	waitUntil(promise: Promise<void>): void
 }) {
 	const masksId = useUniqueSafeId()
-	const theme = getDefaultColorTheme({ isDarkMode })
+	const theme = editor.getCurrentTheme()
 
 	const stateAtom = useAtom<{
 		defsById: Record<
@@ -257,6 +258,7 @@ function SvgExport({
 	const exportContext = useMemo(
 		(): SvgExportContext => ({
 			isDarkMode,
+			colorMode,
 			waitUntil,
 			addExportDef,
 			scale,
@@ -272,7 +274,7 @@ function SvgExport({
 				})
 			},
 		}),
-		[isDarkMode, waitUntil, addExportDef, scale, pixelRatio, editor]
+		[isDarkMode, colorMode, waitUntil, addExportDef, scale, pixelRatio, editor]
 	)
 
 	const didRenderRef = useRef(false)
@@ -443,17 +445,22 @@ function SvgExport({
 		onMount()
 	}, [onMount, shapeElements])
 
-	let backgroundColor = background ? theme.background : 'transparent'
+	const colors = theme.colors[colorMode]
+	let backgroundColor = background ? colors.background : 'transparent'
 
 	if (singleFrameShapeId && background) {
 		const frameShapeUtil = editor.getShapeUtil('frame') as any as
 			| undefined
-			| { options: { showColors: boolean } }
+			| {
+					options: {
+						showColors: boolean
+					}
+			  }
 		if (frameShapeUtil?.options.showColors) {
 			const shape = editor.getShape(singleFrameShapeId)! as TLFrameShape
-			backgroundColor = getColorValue(theme, shape.props.color, 'frameFill')
+			backgroundColor = getColorValue(colors, shape.props.color, 'frameFill')
 		} else {
-			backgroundColor = theme.solid
+			backgroundColor = colors.solid
 		}
 	}
 

package/src/lib/globals/environment.ts

@@ -46,8 +46,26 @@ const tlenvReactive = atom('tlenvReactive', {
 	// on touch-screen laptops, which will become "coarse" if the user touches the screen.
 	// See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer#coarse
 	isCoarsePointer: false,
+	// Whether the user's display supports P3 color space. This is dynamic because a window can
+	// move between displays with different color gamut support.
+	supportsP3ColorSpace: false,
 })
 
+if (typeof window !== 'undefined') {
+	const canRenderP3 = typeof CSS !== 'undefined' && CSS.supports('color', 'color(display-p3 1 1 1)')
+	if (canRenderP3) {
+		const p3mql = window.matchMedia('(color-gamut: p3)')
+		const updateSupportsP3 = () => {
+			const supportsP3 = p3mql.matches
+			if (supportsP3 !== tlenvReactive.__unsafe__getWithoutCapture().supportsP3ColorSpace) {
+				tlenvReactive.update((prev) => ({ ...prev, supportsP3ColorSpace: supportsP3 }))
+			}
+		}
+		updateSupportsP3()
+		p3mql.addEventListener('change', updateSupportsP3)
+	}
+}
+
 if (typeof window !== 'undefined' && !isForcedFinePointer) {
 	const mql = getGlobalWindow().matchMedia && getGlobalWindow().matchMedia('(any-pointer: coarse)')
 

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,6 +1,5 @@
 import { useValue } from '@tldraw/state-react'
 import React, { useEffect, useMemo } from 'react'
-import { RIGHT_MOUSE_BUTTON } from '../constants'
 import { tlenv } from '../globals/environment'
 import {
 	elementShouldCaptureKeys,
@@ -21,7 +20,9 @@ export function useCanvasEvents() {
 			function onPointerDown(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
 
-				if (e.button === RIGHT_MOUSE_BUTTON) {
+				// With right-click panning disabled, fire right_click on press and let the
+				// native contextmenu through so the menu opens at the pointer-down location.
+				if (e.button === 2 && !editor.options.rightClickPanning) {
 					editor.dispatch({
 						type: 'pointer',
 						target: 'canvas',
@@ -31,7 +32,7 @@ export function useCanvasEvents() {
 					return
 				}
 
-				if (e.button !== 0 && e.button !== 1 && e.button !== 5) return
+				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
 
 				setPointerCapture(e.currentTarget, e)
 
@@ -47,6 +48,11 @@ export function useCanvasEvents() {
 				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
 
+				const rightClickPanning = editor.options.rightClickPanning
+				// Check before dispatch (which resets isPanning)
+				const wasRightClickPanning =
+					rightClickPanning && e.button === 2 && editor.inputs.getIsPanning()
+
 				releasePointerCapture(e.currentTarget, e)
 
 				editor.dispatch({
@@ -55,6 +61,21 @@ export function useCanvasEvents() {
 					name: 'pointer_up',
 					...getPointerInfo(editor, e),
 				})
+
+				// Static right-click: fire contextmenu at the pointer-up location
+				if (rightClickPanning && e.button === 2 && !wasRightClickPanning) {
+					const contextMenuEvent = new PointerEvent('contextmenu', {
+						bubbles: true,
+						clientX: e.clientX,
+						clientY: e.clientY,
+						button: 2,
+						buttons: 0,
+						pointerId: e.pointerId,
+						pointerType: e.pointerType,
+						isPrimary: e.isPrimary,
+					})
+					e.currentTarget.dispatchEvent(contextMenuEvent)
+				}
 			}
 
 			function onPointerEnter(e: React.PointerEvent) {
@@ -143,6 +164,21 @@ export function useCanvasEvents() {
 				e.stopPropagation()
 			}
 
+			function onContextMenu(e: React.MouseEvent) {
+				// With right-click panning disabled, let the native contextmenu through so the
+				// menu opens on press.
+				if (!editor.options.rightClickPanning) return
+				// Synthetic events — our own dispatch from onPointerUp, or tests using
+				// fireEvent.contextMenu — pass through so Radix can open the menu. The real
+				// browser contextmenu is always suppressed: right-click behavior has
+				// already been decided by our pointer handling (either we dispatched a
+				// synthetic to open the menu at the release position, or we panned and
+				// don't want a menu at all).
+				if (e.nativeEvent.isTrusted) {
+					preventDefault(e)
+				}
+			}
+
 			return {
 				onPointerDown,
 				onPointerUp,
@@ -153,6 +189,7 @@ export function useCanvasEvents() {
 				onTouchStart,
 				onTouchEnd,
 				onClick,
+				onContextMenu,
 			}
 		},
 		[editor]

package/src/lib/hooks/{useIsDarkMode.ts → useColorMode.ts}

@@ -3,11 +3,15 @@ import { useSvgExportContext } from '../editor/types/SvgExportContext'
 import { useEditor } from './useEditor'
 
 /** @public */
-export function useIsDarkMode() {
+export function useColorMode(): 'light' | 'dark' {
 	const editor = useEditor()
 	const exportContext = useSvgExportContext()
-	return useValue('isDarkMode', () => exportContext?.isDarkMode ?? editor.user.getIsDarkMode(), [
-		exportContext,
-		editor,
-	])
+	return useValue(
+		'colorMode',
+		() => {
+			if (exportContext) return exportContext.colorMode
+			return editor.getColorMode()
+		},
+		[exportContext, editor]
+	)
 }

package/src/lib/hooks/useCursor.ts

@@ -3,7 +3,6 @@ import { TLCursorType } from '@tldraw/tlschema'
 import { PI, radiansToDegrees } from '../primitives/utils'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
-import { useIsDarkMode } from './useIsDarkMode'
 
 const CORNER_SVG = `<path d='m19.7432 17.0869-4.072 4.068 2.829 2.828-8.473-.013-.013-8.47 2.841 2.842 4.075-4.068 1.414-1.415-2.844-2.842h8.486v8.484l-2.83-2.827z' fill='%23fff'/><path d='m18.6826 16.7334-4.427 4.424 1.828 1.828-5.056-.016-.014-5.054 1.842 1.841 4.428-4.422 2.474-2.475-1.844-1.843h5.073v5.071l-1.83-1.828z' fill='%23000'/>`
 const EDGE_SVG = `<path d='m9 17.9907v.005l5.997 5.996.001-3.999h1.999 2.02v4l5.98-6.001-5.98-5.999.001 4.019-2.021.002h-2l.001-4.022zm1.411.003 3.587-3.588-.001 2.587h3.5 2.521v-2.585l3.565 3.586-3.564 3.585-.001-2.585h-2.521l-3.499-.001-.001 2.586z' fill='%23fff'/><path d='m17.4971 18.9932h2.521v2.586l3.565-3.586-3.565-3.585v2.605h-2.521-3.5v-2.607l-3.586 3.587 3.586 3.586v-2.587z' fill='%23000'/>`
@@ -67,7 +66,6 @@ export function getCursor(cursor: TLCursorType, rotation = 0, color = 'black') {
 export function useCursor() {
 	const editor = useEditor()
 	const container = useContainer()
-	const isDarkMode = useIsDarkMode()
 
 	useQuickReactor(
 		'useCursor',
@@ -79,11 +77,9 @@ export function useCursor() {
 				return
 			}
 
-			container.style.setProperty(
-				'--tl-cursor',
-				getCursor(type, rotation, isDarkMode ? 'white' : 'black')
-			)
+			const { cursor } = editor.getCurrentTheme().colors[editor.getColorMode()]
+			container.style.setProperty('--tl-cursor', getCursor(type, rotation, cursor))
 		},
-		[editor, container, isDarkMode]
+		[editor, container]
 	)
 }

package/src/lib/hooks/useDarkMode.ts

@@ -1,18 +1,18 @@
 import { useValue } from '@tldraw/state-react'
 import React from 'react'
 import { debugFlags } from '../utils/debug-flags'
+import { useColorMode } from './useColorMode'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
-import { useIsDarkMode } from './useIsDarkMode'
 
 export function useDarkMode() {
 	const editor = useEditor()
 	const container = useContainer()
-	const isDarkMode = useIsDarkMode()
+	const colorMode = useColorMode()
 	const forceSrgb = useValue(debugFlags.forceSrgb)
 
 	React.useEffect(() => {
-		if (isDarkMode) {
+		if (colorMode === 'dark') {
 			container.setAttribute('data-color-mode', 'dark')
 			container.classList.remove('tl-theme__light')
 			container.classList.add('tl-theme__dark')
@@ -26,5 +26,5 @@ export function useDarkMode() {
 		} else {
 			container.classList.remove('tl-theme__force-sRGB')
 		}
-	}, [editor, container, forceSrgb, isDarkMode])
+	}, [editor, container, forceSrgb, colorMode])
 }