@tldraw/editor 3.13.0-canary.52e2314962c1 → 3.13.0-canary.62d76a25592d

package/editor.css

@@ -44,6 +44,7 @@
 	/* User handles need to be above selection edges / corners, matters for sticky note clone handles */
 	--layer-overlays-user-handles: 105;
 	--layer-overlays-user-indicator-hint: 110;
+	--layer-overlays-custom: 115;
 	--layer-overlays-collaborator-cursor-hint: 120;
 	--layer-overlays-collaborator-cursor: 130;
 
@@ -156,6 +157,7 @@
 	--color-panel-contrast: hsl(0, 0%, 100%);
 	--color-panel-overlay: hsl(0, 0%, 100%, 82%);
 	--color-panel: hsl(0, 0%, 99%);
+	--color-panel-transparent: hsla(0, 0%, 99%, 0%);
 	--color-focus: hsl(219, 65%, 50%);
 	--color-selected: hsl(214, 84%, 56%);
 	--color-selected-contrast: hsl(0, 0%, 100%);
@@ -207,6 +209,7 @@
 	--color-panel-contrast: hsl(245, 12%, 23%);
 	--color-panel: hsl(235, 6.8%, 13.5%);
 	--color-panel-overlay: hsl(210, 10%, 24%, 82%);
+	--color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
 	--color-focus: hsl(217, 76%, 80%);
 	--color-selected: hsl(217, 89%, 61%);
 	--color-selected-contrast: hsl(0, 0%, 100%);
@@ -472,6 +475,10 @@ input,
 	stroke-width: calc(2.5px * var(--tl-scale));
 }
 
+.tl-custom-overlays {
+	z-index: var(--layer-overlays-custom);
+}
+
 /* behind collaborator cursor */
 .tl-collaborator__cursor-hint {
 	z-index: var(--layer-overlays-collaborator-cursor-hint);
@@ -595,6 +602,31 @@ input,
 	}
 }
 
+/* --------------------- Arrow Hints -------------------- */
+
+.tl-arrow-hint-handle {
+	fill: var(--color-selected-contrast);
+	stroke: var(--color-selection-stroke);
+	stroke-width: calc(1.5px * var(--tl-scale));
+	r: calc(4px * var(--tl-scale));
+}
+
+.tl-arrow-hint-snap {
+	stroke: transparent;
+	fill: var(--color-selection-fill);
+	r: calc(12px * var(--tl-scale));
+}
+
+.tl-arrow-hint-snap__none,
+.tl-arrow-hint-snap__center,
+.tl-arrow-hint-snap__axis {
+	display: none;
+}
+
+.tl-arrow-hint-snap__edge {
+	r: calc(8px * var(--tl-scale));
+}
+
 /* ------------------ Bounds Detail ----------------- */
 
 .tl-image,
@@ -964,6 +996,8 @@ input,
 
 .tl-rich-text p {
 	margin: 0;
+	/* Depending on the extensions, <p> tags can be empty, without a <br />. */
+	min-height: 1lh;
 }
 
 .tl-rich-text ul,
@@ -971,6 +1005,8 @@ input,
 	text-align: left;
 	margin: 0;
 	padding-left: 3.25ch;
+	/* Some resets, like Tailwind, nix the list styling. */
+	list-style: revert;
 }
 
 .tl-rich-text ol:has(> li:nth-child(10)) {
@@ -1348,10 +1384,6 @@ input,
 	opacity: 0;
 }
 
-.tl-arrow-label[data-isediting='true'] > .tl-arrow-label__inner {
-	background-color: var(--color-background);
-}
-
 .tl-arrow-label__inner {
 	border-radius: var(--radius-1);
 	box-sizing: content-box;
@@ -1710,6 +1742,12 @@ it from receiving any pointer events or affecting the cursor. */
 	background-color: var(--color-primary);
 	color: var(--color-selected-contrast);
 }
+.tl-container__focused:not(.tl-container__no-focus-ring)
+	.tlui-button.tl-error-boundary__refresh:focus-visible {
+	border-radius: 8px;
+	outline-offset: 0;
+}
+
 /* --------------------- Coarse --------------------- */
 
 .tl-hidden {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.13.0-canary.52e2314962c1",
+  "version": "3.13.0-canary.62d76a25592d",
   "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.13.0-canary.52e2314962c1",
-    "@tldraw/state-react": "3.13.0-canary.52e2314962c1",
-    "@tldraw/store": "3.13.0-canary.52e2314962c1",
-    "@tldraw/tlschema": "3.13.0-canary.52e2314962c1",
-    "@tldraw/utils": "3.13.0-canary.52e2314962c1",
-    "@tldraw/validate": "3.13.0-canary.52e2314962c1",
+    "@tldraw/state": "3.13.0-canary.62d76a25592d",
+    "@tldraw/state-react": "3.13.0-canary.62d76a25592d",
+    "@tldraw/store": "3.13.0-canary.62d76a25592d",
+    "@tldraw/tlschema": "3.13.0-canary.62d76a25592d",
+    "@tldraw/utils": "3.13.0-canary.62d76a25592d",
+    "@tldraw/validate": "3.13.0-canary.62d76a25592d",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -4,37 +4,11 @@ import 'core-js/stable/array/flat-map.js'
 import 'core-js/stable/array/flat.js'
 import 'core-js/stable/string/at.js'
 import 'core-js/stable/string/replace-all.js'
-export {
-	EMPTY_ARRAY,
-	EffectScheduler,
-	atom,
-	computed,
-	react,
-	transact,
-	transaction,
-	whyAmIRunning,
-	type Atom,
-	type Signal,
-} from '@tldraw/state'
-export {
-	track,
-	useAtom,
-	useComputed,
-	useQuickReactor,
-	useReactor,
-	useStateTracking,
-	useValue,
-} from '@tldraw/state-react'
-export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
-export {
-	getFontsFromRichText,
-	type RichTextFontVisitor,
-	type RichTextFontVisitorState,
-	type TLTextOptions,
-	type TiptapEditor,
-	type TiptapNode,
-} from './lib/utils/richText'
-export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
+
+// eslint-disable-next-line local/no-export-star
+export * from '@tldraw/state'
+// eslint-disable-next-line local/no-export-star
+export * from '@tldraw/state-react'
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/store'
 // eslint-disable-next-line local/no-export-star
@@ -43,6 +17,7 @@ export * from '@tldraw/tlschema'
 export * from '@tldraw/utils'
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/validate'
+
 export {
 	ErrorScreen,
 	LoadingScreen,
@@ -212,6 +187,7 @@ export {
 export { GroupShapeUtil } from './lib/editor/shapes/group/GroupShapeUtil'
 export { getPerfectDashProps } from './lib/editor/shapes/shared/getPerfectDashProps'
 export { resizeBox, type ResizeBoxOptions } from './lib/editor/shapes/shared/resizeBox'
+export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
 export { BaseBoxShapeTool } from './lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool'
 export { maybeSnapToGrid } from './lib/editor/tools/BaseBoxShapeTool/children/Pointing'
 export { StateNode, type TLStateNodeConstructor } from './lib/editor/tools/StateNode'
@@ -459,12 +435,21 @@ export { hardResetEditor } from './lib/utils/hardResetEditor'
 export { isAccelKey } from './lib/utils/keyboard'
 export { normalizeWheel } from './lib/utils/normalizeWheel'
 export { refreshPage } from './lib/utils/refreshPage'
+export {
+	getFontsFromRichText,
+	type RichTextFontVisitor,
+	type RichTextFontVisitorState,
+	type TLTextOptions,
+	type TiptapEditor,
+	type TiptapNode,
+} from './lib/utils/richText'
 export {
 	applyRotationToSnapshotShapes,
 	getRotationSnapshot,
 	type TLRotationSnapshot,
 } from './lib/utils/rotation'
 export { runtime, setRuntimeOverrides } from './lib/utils/runtime'
+export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
 export { type TLStoreWithStatus } from './lib/utils/sync/StoreWithStatus'
 export { hardReset } from './lib/utils/sync/hardReset'
 export { uniq } from './lib/utils/uniq'

package/src/lib/TldrawEditor.tsx

@@ -285,6 +285,7 @@ export const TldrawEditor = memo(function TldrawEditor({
 			onPointerDown={stopEventPropagation}
 			tabIndex={-1}
 			role="application"
+			aria-label={_options?.branding ?? 'tldraw'}
 		>
 			<OptionalErrorBoundary
 				fallback={ErrorFallback}
@@ -669,7 +670,11 @@ export interface LoadingScreenProps {
 
 /** @public @react */
 export function LoadingScreen({ children }: LoadingScreenProps) {
-	return <div className="tl-loading">{children}</div>
+	return (
+		<div className="tl-loading" aria-busy="true" tabIndex={0}>
+			{children}
+		</div>
+	)
 }
 
 /** @public @react */

package/src/lib/components/Shape.tsx

@@ -6,6 +6,7 @@ import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
 import { Mat } from '../primitives/Mat'
+import { areShapesContentEqual } from '../utils/areShapesContentEqual'
 import { setStyleProperty } from '../utils/dom'
 import { OptionalErrorBoundary } from './ErrorBoundary'
 
@@ -27,6 +28,7 @@ export const Shape = memo(function Shape({
 	index,
 	backgroundIndex,
 	opacity,
+	dprMultiple,
 }: {
 	id: TLShapeId
 	shape: TLShape
@@ -34,6 +36,7 @@ export const Shape = memo(function Shape({
 	index: number
 	backgroundIndex: number
 	opacity: number
+	dprMultiple: number
 }) {
 	const editor = useEditor()
 
@@ -88,14 +91,18 @@ export const Shape = memo(function Shape({
 			}
 
 			// Width / Height
-			const width = Math.max(bounds.width, 1)
-			const height = Math.max(bounds.height, 1)
+			// We round the shape width and height up to the nearest multiple of dprMultiple
+			// to avoid the browser making miscalculations when applying the transform.
+			const widthRemainder = bounds.w % dprMultiple
+			const heightRemainder = bounds.h % dprMultiple
+			const width = widthRemainder === 0 ? bounds.w : bounds.w + (dprMultiple - widthRemainder)
+			const height = heightRemainder === 0 ? bounds.h : bounds.h + (dprMultiple - heightRemainder)
 
 			if (width !== prev.width || height !== prev.height) {
-				setStyleProperty(containerRef.current, 'width', width + 'px')
-				setStyleProperty(containerRef.current, 'height', height + 'px')
-				setStyleProperty(bgContainerRef.current, 'width', width + 'px')
-				setStyleProperty(bgContainerRef.current, 'height', height + 'px')
+				setStyleProperty(containerRef.current, 'width', Math.max(width, dprMultiple) + 'px')
+				setStyleProperty(containerRef.current, 'height', Math.max(height, dprMultiple) + 'px')
+				setStyleProperty(bgContainerRef.current, 'width', Math.max(width, dprMultiple) + 'px')
+				setStyleProperty(bgContainerRef.current, 'height', Math.max(height, dprMultiple) + 'px')
 				prev.width = width
 				prev.height = height
 			}
@@ -184,10 +191,7 @@ export const InnerShape = memo(
 			[util, shape.id]
 		)
 	},
-	(prev, next) =>
-		prev.shape.props === next.shape.props &&
-		prev.shape.meta === next.shape.meta &&
-		prev.util === next.util
+	(prev, next) => areShapesContentEqual(prev.shape, next.shape) && prev.util === next.util
 )
 
 export const InnerShapeBackground = memo(

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -22,6 +22,7 @@ import { Vec } from '../../primitives/Vec'
 import { toDomPrecision } from '../../primitives/utils'
 import { debugFlags } from '../../utils/debug-flags'
 import { setStyleProperty } from '../../utils/dom'
+import { nearestMultiple } from '../../utils/nearestMultiple'
 import { GeometryDebuggingView } from '../GeometryDebuggingView'
 import { LiveCollaborators } from '../LiveCollaborators'
 import { MenuClickCapture } from '../MenuClickCapture'
@@ -36,7 +37,7 @@ export interface TLCanvasComponentProps {
 export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	const editor = useEditor()
 
-	const { Background, SvgDefs, ShapeIndicators } = useEditorComponents()
+	const { SelectionBackground, Background, SvgDefs, ShapeIndicators } = useEditorComponents()
 
 	const rCanvas = useRef<HTMLDivElement>(null)
 	const rHtmlLayer = useRef<HTMLDivElement>(null)
@@ -154,7 +155,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				<GridWrapper />
 				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
 					<OnTheCanvasWrapper />
-					<SelectionBackgroundWrapper />
+					{SelectionBackground && <SelectionBackgroundWrapper />}
 					{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
 				</div>
 				<div className="tl-overlays">
@@ -168,6 +169,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 						<SnapIndicatorWrapper />
 						<SelectionForegroundWrapper />
 						<HandlesWrapper />
+						<OverlaysWrapper />
 						<LiveCollaborators />
 					</div>
 				</div>
@@ -372,14 +374,33 @@ function HandleWrapper({
 	)
 }
 
+function OverlaysWrapper() {
+	const { Overlays } = useEditorComponents()
+	if (!Overlays) return null
+	return (
+		<div className="tl-custom-overlays tl-overlays__item">
+			<Overlays />
+		</div>
+	)
+}
+
 function ShapesWithSVGs() {
 	const editor = useEditor()
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
+	const dprMultiple = useValue(
+		'dpr multiple',
+		() =>
+			// dprMultiple is the smallest number we can multiply dpr by to get an integer
+			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
+			nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),
+		[editor]
+	)
+
 	return renderingShapes.map((result) => (
 		<Fragment key={result.id + '_fragment'}>
-			<Shape {...result} />
+			<Shape {...result} dprMultiple={dprMultiple} />
 			<DebugSvgCopy id={result.id} mode="iframe" />
 		</Fragment>
 	))
@@ -414,10 +435,19 @@ function ShapesToDisplay() {
 
 	const renderingShapes = useValue('rendering shapes', () => editor.getRenderingShapes(), [editor])
 
+	const dprMultiple = useValue(
+		'dpr multiple',
+		() =>
+			// dprMultiple is the smallest number we can multiply dpr by to get an integer
+			// it's usually 1, 2, or 4 (for e.g. dpr of 2, 2.5 and 2.25 respectively)
+			nearestMultiple(Math.floor(editor.getInstanceState().devicePixelRatio * 100) / 100),
+		[editor]
+	)
+
 	return (
 		<>
 			{renderingShapes.map((result) => (
-				<Shape key={result.id + '_shape'} {...result} />
+				<Shape key={result.id + '_shape'} {...result} dprMultiple={dprMultiple} />
 			))}
 			{tlenv.isSafari && <ReflowIfNeeded />}
 		</>
@@ -545,9 +575,13 @@ function DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {
 
 function SelectionForegroundWrapper() {
 	const editor = useEditor()
-	const selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [
-		editor,
-	])
+	const selectionRotation = useValue(
+		'selection rotation',
+		function getSelectionRotation() {
+			return editor.getSelectionRotation()
+		},
+		[editor]
+	)
 	const selectionBounds = useValue(
 		'selection bounds',
 		() => editor.getSelectionRotatedPageBounds(),

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -157,8 +157,10 @@ My browser: ${navigator.userAgent}`
 						<h2>Are you sure?</h2>
 						<p>Resetting your data will delete your drawing and cannot be undone.</p>
 						<div className="tl-error-boundary__content__actions">
-							<button onClick={() => setShouldShowResetConfirmation(false)}>Cancel</button>
-							<button className="tl-error-boundary__reset" onClick={resetLocalState}>
+							<button className="tlui-button" onClick={() => setShouldShowResetConfirmation(false)}>
+								Cancel
+							</button>
+							<button className="tlui-button tl-error-boundary__reset" onClick={resetLocalState}>
 								Reset data
 							</button>
 						</div>
@@ -166,16 +168,23 @@ My browser: ${navigator.userAgent}`
 				) : (
 					<>
 						<h2>Something went wrong</h2>
-						<p>Please refresh the page to continue.</p>
+						<p>Please refresh your browser.</p>
+						<p>
+							If the issue continues after refreshing, you may need to reset the tldraw data stored
+							on your device.
+						</p>
 						<p>
-							If you keep seeing this screen, you can create a{' '}
-							<a href={url.toString()}>GitHub issue</a> or ask for help on{' '}
-							<a href="https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen">
-								Discord
-							</a>
-							. If you are still stuck, you can reset the tldraw data on your machine. This may
-							erase the project you were working on, so try to get help first.
+							<strong>Note:</strong> Resetting will erase your current project and any unsaved work.
 						</p>
+						{process.env.NODE_ENV !== 'production' && (
+							<p>
+								If you&apos;re developing with the SDK and need help, join us on{' '}
+								<a href="https://discord.tldraw.com/?utm_source=sdk&utm_medium=organic&utm_campaign=error-screen">
+									Discord
+								</a>
+								.
+							</p>
+						)}
 						{shouldShowError && (
 							<>
 								Message:
@@ -187,22 +196,24 @@ My browser: ${navigator.userAgent}`
 									<pre>
 										<code>{errorStack ?? errorMessage}</code>
 									</pre>
-									<button onClick={copyError}>{didCopy ? 'Copied!' : 'Copy'}</button>
+									<button className="tlui-button" onClick={copyError}>
+										{didCopy ? 'Copied!' : 'Copy'}
+									</button>
 								</div>
 							</>
 						)}
 						<div className="tl-error-boundary__content__actions">
-							<button onClick={() => setShouldShowError(!shouldShowError)}>
+							<button className="tlui-button" onClick={() => setShouldShowError(!shouldShowError)}>
 								{shouldShowError ? 'Hide details' : 'Show details'}
 							</button>
 							<div className="tl-error-boundary__content__actions__group">
 								<button
-									className="tl-error-boundary__reset"
+									className="tlui-button tl-error-boundary__reset"
 									onClick={() => setShouldShowResetConfirmation(true)}
 								>
 									Reset data
 								</button>
-								<button className="tl-error-boundary__refresh" onClick={refresh}>
+								<button className="tlui-button tl-error-boundary__refresh" onClick={refresh}>
 									Refresh Page
 								</button>
 							</div>

package/src/lib/components/default-components/DefaultShapeIndicator.tsx

@@ -9,13 +9,21 @@ import { useEditorComponents } from '../../hooks/useEditorComponents'
 import { OptionalErrorBoundary } from '../ErrorBoundary'
 
 // need an extra layer of indirection here to allow hooks to be used inside the indicator render
-const EvenInnererIndicator = memo(({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {
-	return useStateTracking('Indicator: ' + shape.type, () =>
-		// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
-		// calling the render method with stale data.
-		util.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)
-	)
-})
+const EvenInnererIndicator = memo(
+	({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {
+		return useStateTracking('Indicator: ' + shape.type, () =>
+			// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
+			// calling the render method with stale data.
+			util.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)
+		)
+	},
+	(prevProps, nextProps) => {
+		return (
+			prevProps.shape.props === nextProps.shape.props &&
+			prevProps.shape.meta === nextProps.shape.meta
+		)
+	}
+)
 
 const InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId }) => {
 	const shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])
@@ -61,13 +69,14 @@ export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
 	useQuickReactor(
 		'indicator transform',
 		() => {
+			if (hidden) return
 			const elm = rIndicator.current
 			if (!elm) return
 			const pageTransform = editor.getShapePageTransform(shapeId)
 			if (!pageTransform) return
 			elm.style.setProperty('transform', pageTransform.toCssString())
 		},
-		[editor, shapeId]
+		[editor, shapeId, hidden]
 	)
 
 	useLayoutEffect(() => {

package/src/lib/components/default-components/DefaultSpinner.tsx

@@ -1,7 +1,7 @@
 /** @public @react */
 export function DefaultSpinner() {
 	return (
-		<svg width={16} height={16} viewBox="0 0 16 16">
+		<svg width={16} height={16} viewBox="0 0 16 16" aria-hidden="false">
 			<g strokeWidth={2} fill="none" fillRule="evenodd">
 				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
 				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">

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

@@ -52,7 +52,7 @@ beforeEach(() => {
 		shapeUtils: [CustomShape],
 		bindingUtils: [],
 		tools: [],
-		store: createTLStore({ shapeUtils: [CustomShape] }),
+		store: createTLStore({ shapeUtils: [CustomShape], bindingUtils: [] }),
 		getContainer: () => document.body,
 	})
 	editor.setCameraOptions({ isLocked: true })