@tldraw/editor 3.12.0-canary.ceec8eda0db0 → 3.12.0-canary.d81bcb86d4e7

package/editor.css

@@ -897,16 +897,17 @@ input,
 	cursor: var(--tl-cursor-default);
 }
 
+.tl-rich-text[data-is-ready-for-editing='true'],
+.tl-text-wrapper[data-is-ready-for-editing='true'] .tl-text-input {
+	cursor: var(--tl-cursor-text);
+}
+
 .tl-text-input::selection {
 	background: var(--color-selected);
 	color: var(--color-selected-contrast);
 	text-shadow: none;
 }
 
-.tl-rich-text[data-iseditinganything='true'] {
-	cursor: var(--tl-cursor-text);
-}
-
 .tl-rich-text .ProseMirror {
 	word-wrap: break-word;
 	overflow-wrap: break-word;
@@ -1421,13 +1422,17 @@ input,
 }
 
 .tl-frame-heading {
+	--frame-padding-x: 6px;
+	--frame-height: 24px;
+	--frame-minimum-width: 32px;
+	--frame-offset-width: 16px;
 	display: flex;
 	align-items: center;
 	position: absolute;
 	transform-origin: 0% 100%;
 	overflow: hidden;
 	max-width: 100%;
-	min-width: 32px;
+	min-width: var(--frame-minimum-width);
 	height: auto;
 	font-size: 12px;
 	padding-bottom: 4px;
@@ -1439,32 +1444,33 @@ input,
 	/* scale from bottom left corner so we can pin it to the top left corner of the frame */
 	transform-origin: 0% 100%;
 	display: flex;
-	height: 100%;
+	height: var(--frame-height);
 	width: 100%;
 	align-items: center;
 	border-radius: var(--radius-1);
-	background-color: var(--color-background);
 }
 
 .tl-frame-label {
 	pointer-events: all;
 	overflow: hidden;
 	text-overflow: ellipsis;
-	padding: var(--space-3) var(--space-3);
+	padding: 0px var(--frame-padding-x);
+	border-radius: var(--radius-1);
 	position: relative;
 	font-size: inherit;
 	white-space: pre;
-	border: 1px solid transparent;
 }
 
 .tl-frame-label__editing {
 	color: transparent;
 	white-space: pre;
 	width: auto;
+	min-width: var(--frame-minimum-width);
+	height: 100%;
 	overflow: visible;
 	background-color: var(--color-panel);
-	border-radius: var(--radius-1);
 	border-color: var(--color-selected);
+	box-shadow: inset 0px 0px 0px 1.5px var(--color-selected);
 }
 
 .tl-frame-name-input {
@@ -1472,7 +1478,7 @@ input,
 	border: none;
 	background: none;
 	outline: none;
-	padding: var(--space-3) var(--space-3);
+	padding: 0px var(--frame-padding-x);
 	inset: 0px;
 	height: 100%;
 	width: 100%;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.12.0-canary.ceec8eda0db0",
+  "version": "3.12.0-canary.d81bcb86d4e7",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -48,12 +48,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.12.0-canary.ceec8eda0db0",
-    "@tldraw/state-react": "3.12.0-canary.ceec8eda0db0",
-    "@tldraw/store": "3.12.0-canary.ceec8eda0db0",
-    "@tldraw/tlschema": "3.12.0-canary.ceec8eda0db0",
-    "@tldraw/utils": "3.12.0-canary.ceec8eda0db0",
-    "@tldraw/validate": "3.12.0-canary.ceec8eda0db0",
+    "@tldraw/state": "3.12.0-canary.d81bcb86d4e7",
+    "@tldraw/state-react": "3.12.0-canary.d81bcb86d4e7",
+    "@tldraw/store": "3.12.0-canary.d81bcb86d4e7",
+    "@tldraw/tlschema": "3.12.0-canary.d81bcb86d4e7",
+    "@tldraw/utils": "3.12.0-canary.d81bcb86d4e7",
+    "@tldraw/validate": "3.12.0-canary.d81bcb86d4e7",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/lib/TldrawEditor.tsx

@@ -50,7 +50,7 @@ import { TLStoreWithStatus } from './utils/sync/StoreWithStatus'
 
 /**
  * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when passing in a
- * {@link store#TLStore} directly. If you would like tldraw to create a store for you, use
+ * `TLStore` directly. If you would like tldraw to create a store for you, use
  * {@link TldrawEditorWithoutStoreProps}.
  *
  * @public
@@ -64,7 +64,7 @@ export interface TldrawEditorWithStoreProps {
 
 /**
  * Props for the {@link tldraw#Tldraw} and {@link TldrawEditor} components, when not passing in a
- * {@link store#TLStore} directly. If you would like to pass in a store directly, use
+ * `TLStore` directly. If you would like to pass in a store directly, use
  * {@link TldrawEditorWithStoreProps}.
  *
  * @public

package/src/lib/components/Shape.tsx

@@ -1,7 +1,7 @@
 import { react } from '@tldraw/state'
 import { useQuickReactor, useStateTracking } from '@tldraw/state-react'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
-import { memo, useCallback, useEffect, useRef } from 'react'
+import { memo, useCallback, useEffect, useLayoutEffect, useRef } from 'react'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
@@ -44,10 +44,10 @@ export const Shape = memo(function Shape({
 
 	useEffect(() => {
 		return react('load fonts', () => {
-			const fonts = editor.fonts.getShapeFontFaces(shape)
+			const fonts = editor.fonts.getShapeFontFaces(id)
 			editor.fonts.requestFonts(fonts)
 		})
-	}, [editor, shape])
+	}, [editor, id])
 
 	const memoizedStuffRef = useRef({
 		transform: '',
@@ -104,22 +104,18 @@ export const Shape = memo(function Shape({
 	)
 
 	// This stuff changes pretty infrequently, so we can change them together
-	useQuickReactor(
-		'set opacity and z-index',
-		() => {
-			const container = containerRef.current
-			const bgContainer = bgContainerRef.current
-
-			// Opacity
-			setStyleProperty(container, 'opacity', opacity)
-			setStyleProperty(bgContainer, 'opacity', opacity)
-
-			// Z-Index
-			setStyleProperty(container, 'z-index', index)
-			setStyleProperty(bgContainer, 'z-index', backgroundIndex)
-		},
-		[opacity, index, backgroundIndex]
-	)
+	useLayoutEffect(() => {
+		const container = containerRef.current
+		const bgContainer = bgContainerRef.current
+
+		// Opacity
+		setStyleProperty(container, 'opacity', opacity)
+		setStyleProperty(bgContainer, 'opacity', opacity)
+
+		// Z-Index
+		setStyleProperty(container, 'z-index', index)
+		setStyleProperty(bgContainer, 'z-index', backgroundIndex)
+	}, [opacity, index, backgroundIndex])
 
 	useQuickReactor(
 		'set display',

package/src/lib/editor/Editor.ts

@@ -1216,7 +1216,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 	run(fn: () => void, opts?: TLEditorRunOptions): this {
 		const previousIgnoreShapeLock = this._shouldIgnoreShapeLock
 		this._shouldIgnoreShapeLock = opts?.ignoreShapeLock ?? previousIgnoreShapeLock
-
 		try {
 			this.history.batch(fn, opts)
 		} finally {
@@ -8139,8 +8138,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!currentTool) return styles
 
 		if (currentTool.shapeType) {
-			for (const style of this.styleProps[currentTool.shapeType].keys()) {
-				styles.applyValue(style, this.getStyleForNextShape(style))
+			if (
+				currentTool.shapeType === 'frame' &&
+				!(this.getShapeUtil('frame')!.options as any).showColors
+			) {
+				for (const style of this.styleProps[currentTool.shapeType].keys()) {
+					if (style.id === 'tldraw:color') continue
+					styles.applyValue(style, this.getStyleForNextShape(style))
+				}
+			} else {
+				for (const style of this.styleProps[currentTool.shapeType].keys()) {
+					styles.applyValue(style, this.getStyleForNextShape(style))
+				}
 			}
 		}
 
@@ -9849,12 +9858,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 						const { x: cx, y: cy, z: cz } = unsafe__withoutCapture(() => this.getCamera())
 
-						const { panSpeed, zoomSpeed } = cameraOptions
+						const { panSpeed } = cameraOptions
 						this._setCamera(
 							new Vec(
-								cx + (dx * panSpeed) / cz - x / cz + x / (z * zoomSpeed),
-								cy + (dy * panSpeed) / cz - y / cz + y / (z * zoomSpeed),
-								z * zoomSpeed
+								cx + (dx * panSpeed) / cz - x / cz + x / z,
+								cy + (dy * panSpeed) / cz - y / cz + y / z,
+								z
 							),
 							{ immediate: true }
 						)
@@ -9929,14 +9938,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 							}
 
 							const zoom = cz + (delta ?? 0) * zoomSpeed * cz
-							this._setCamera(
-								new Vec(
-									cx + (x / zoom - x) - (x / cz - x),
-									cy + (y / zoom - y) - (y / cz - y),
-									zoom
-								),
-								{ immediate: true }
-							)
+							this._setCamera(new Vec(cx + x / zoom - x / cz, cy + y / zoom - y / cz, zoom), {
+								immediate: true,
+							})
 							this.maybeTrackPerformance('Zooming')
 							return
 						}

package/src/lib/editor/derivations/notVisibleShapes.ts

@@ -31,7 +31,7 @@ export const notVisibleShapes = (editor: Editor) => {
 		})
 		return notVisibleShapes
 	}
-	return computed<Set<TLShapeId>>('getCulledShapes', (prevValue) => {
+	return computed<Set<TLShapeId>>('notVisibleShapes', (prevValue) => {
 		if (isUninitialized(prevValue)) {
 			return fromScratch(editor)
 		}

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

@@ -94,7 +94,7 @@ export class FontManager {
 				const shapeUtil = this.editor.getShapeUtil(shape)
 				return shapeUtil.getFontFaces(shape)
 			},
-			{ areResultsEqual: areArraysShallowEqual }
+			{ areResultsEqual: areArraysShallowEqual, areRecordsEqual: (a, b) => a.props === b.props }
 		)
 
 		this.shapeFontLoadStateCache = editor.store.createCache<(FontState | null)[], TLShape>(

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

@@ -38,6 +38,7 @@ export interface TLStateNodeConstructor {
 	initial?: string
 	children?(): TLStateNodeConstructor[]
 	isLockable: boolean
+	useCoalescedEvents: boolean
 }
 
 /** @public */
@@ -47,7 +48,8 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 		public editor: Editor,
 		parent?: StateNode
 	) {
-		const { id, children, initial, isLockable } = this.constructor as TLStateNodeConstructor
+		const { id, children, initial, isLockable, useCoalescedEvents } = this
+			.constructor as TLStateNodeConstructor
 
 		this.id = id
 		this._isActive = atom<boolean>('toolIsActive' + this.id, false)
@@ -83,6 +85,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 			}
 		}
 		this.isLockable = isLockable
+		this.useCoalescedEvents = useCoalescedEvents
 		this.performanceTracker = new PerformanceTracker()
 	}
 
@@ -90,6 +93,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	static initial?: string
 	static children?: () => TLStateNodeConstructor[]
 	static isLockable = true
+	static useCoalescedEvents = false
 
 	id: string
 	type: 'branch' | 'leaf' | 'root'
@@ -97,6 +101,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	initial?: string
 	children?: Record<string, StateNode>
 	isLockable: boolean
+	useCoalescedEvents: boolean
 	parent: StateNode
 
 	/**

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,3 +1,4 @@
+import { useValue } from '@tldraw/state-react'
 import React, { useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import {
@@ -11,6 +12,7 @@ import { useEditor } from './useEditor'
 
 export function useCanvasEvents() {
 	const editor = useEditor()
+	const currentTool = useValue('current tool', () => editor.getCurrentTool(), [editor])
 
 	const events = useMemo(
 		function canvasEvents() {
@@ -49,12 +51,17 @@ export function useCanvasEvents() {
 				lastX = e.clientX
 				lastY = e.clientY
 
-				editor.dispatch({
-					type: 'pointer',
-					target: 'canvas',
-					name: 'pointer_move',
-					...getPointerInfo(e),
-				})
+				// For tools that benefit from a higher fidelity of events,
+				// we dispatch the coalesced events.
+				const events = currentTool.useCoalescedEvents ? e.nativeEvent.getCoalescedEvents() : [e]
+				for (const singleEvent of events) {
+					editor.dispatch({
+						type: 'pointer',
+						target: 'canvas',
+						name: 'pointer_move',
+						...getPointerInfo(singleEvent),
+					})
+				}
 			}
 
 			function onPointerUp(e: React.PointerEvent) {
@@ -159,7 +166,7 @@ export function useCanvasEvents() {
 				onClick,
 			}
 		},
-		[editor]
+		[editor, currentTool]
 	)
 
 	return events

package/src/lib/hooks/useGestureEvents.ts

@@ -135,7 +135,6 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 
 		let initDistanceBetweenFingers = 1 // the distance between the two fingers when the pinch starts
 		let initZoom = 1 // the browser's zoom level when the pinch starts
-		let currZoom = 1 // the current zoom level according to the pinch gesture recognizer
 		let currDistanceBetweenFingers = 0
 		const initPointBetweenFingers = new Vec()
 		const prevPointBetweenFingers = new Vec()
@@ -239,7 +238,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 
 			switch (pinchState) {
 				case 'zooming': {
-					currZoom = offset[0]
+					const currZoom = offset[0] ** editor.getCameraOptions().zoomSpeed
 
 					editor.dispatch({
 						type: 'pinch',
@@ -278,7 +277,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 			if (event instanceof WheelEvent) return
 			if (!(event.target === elm || elm?.contains(event.target as Node))) return
 
-			const scale = offset[0]
+			const scale = offset[0] ** editor.getCameraOptions().zoomSpeed
 
 			pinchState = 'not sure'
 
@@ -309,14 +308,21 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 		target: ref,
 		eventOptions: { passive: false },
 		pinch: {
-			from: () => [editor.getZoomLevel(), 0], // Return the camera z to use when pinch starts
+			from: () => {
+				const { zoomSpeed } = editor.getCameraOptions()
+				const level = editor.getZoomLevel() ** (1 / zoomSpeed)
+				return [level, 0]
+			}, // Return the camera z to use when pinch starts
 			scaleBounds: () => {
 				const baseZoom = editor.getBaseZoom()
-				const zoomSteps = editor.getCameraOptions().zoomSteps
+				const { zoomSteps, zoomSpeed } = editor.getCameraOptions()
 				const zoomMin = zoomSteps[0] * baseZoom
 				const zoomMax = zoomSteps[zoomSteps.length - 1] * baseZoom
 
-				return { from: editor.getZoomLevel(), max: zoomMax, min: zoomMin }
+				return {
+					max: zoomMax ** (1 / zoomSpeed),
+					min: zoomMin ** (1 / zoomSpeed),
+				}
 			},
 		},
 	})

package/src/lib/primitives/geometry/Group2d.ts

@@ -102,6 +102,6 @@ export class Group2d extends Geometry2d {
 	}
 
 	getSvgPathData(): string {
-		return this.children.map((c, i) => (c.isLabel ? '' : c.getSvgPathData(i === 0))).join(' ')
+		return this.children.map((c) => (c.isLabel ? '' : c.getSvgPathData(true))).join(' ')
 	}
 }

package/src/lib/utils/debug-flags.ts

@@ -53,6 +53,7 @@ export const debugFlags = {
 	debugGeometry: createDebugValue('debugGeometry', { defaults: { all: false } }),
 	hideShapes: createDebugValue('hideShapes', { defaults: { all: false } }),
 	editOnType: createDebugValue('editOnType', { defaults: { all: false } }),
+	a11y: createDebugValue('a11y', { defaults: { all: false } }),
 } as const
 
 declare global {

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.12.0-canary.ceec8eda0db0'
+export const version = '3.12.0-canary.d81bcb86d4e7'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-03-20T16:36:46.091Z',
-	patch: '2025-03-20T16:36:46.091Z',
+	minor: '2025-04-02T09:21:19.427Z',
+	patch: '2025-04-02T09:21:19.427Z',
 }