@tldraw/editor 3.13.0-canary.2449ca610c41 → 3.13.0-canary.2594be9eef80

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'
@@ -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 />}
 		</>

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/editor/Editor.ts

@@ -129,6 +129,7 @@ import { Group2d } from '../primitives/geometry/Group2d'
 import { intersectPolygonPolygon } from '../primitives/intersect'
 import { PI, approximately, areAnglesCompatible, clamp, pointInPolygon } from '../primitives/utils'
 import { ReadonlySharedStyleMap, SharedStyle, SharedStyleMap } from '../utils/SharedStylesMap'
+import { areShapesContentEqual } from '../utils/areShapesContentEqual'
 import { dataUrlToFile } from '../utils/assets'
 import { debugFlags } from '../utils/debug-flags'
 import {
@@ -4574,7 +4575,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 					this.fonts.trackFontsForShape(shape)
 					return this.getShapeUtil(shape).getGeometry(shape, opts)
 				},
-				{ areRecordsEqual: (a, b) => a.props === b.props }
+				{ areRecordsEqual: areShapesContentEqual }
 			)
 		}
 		return this._shapeGeometryCaches[context].get(
@@ -4622,9 +4623,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	/** @internal */
 	@computed private _getShapeHandlesCache(): ComputedCache<TLHandle[] | undefined, TLShape> {
-		return this.store.createComputedCache('handles', (shape) => {
-			return this.getShapeUtil(shape).getHandles?.(shape)
-		})
+		return this.store.createComputedCache(
+			'handles',
+			(shape) => {
+				return this.getShapeUtil(shape).getHandles?.(shape)
+			},
+			{
+				areRecordsEqual: areShapesContentEqual,
+			}
+		)
 	}
 
 	/**
@@ -5845,9 +5852,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 	@computed
 	private _getBindingsIndexCache() {
 		const index = bindingsIndex(this)
-		return this.store.createComputedCache<TLBinding[], TLShape>('bindingsIndex', (shape) => {
-			return index.get().get(shape.id)
-		})
+		return this.store.createComputedCache<TLBinding[], TLShape>(
+			'bindingsIndex',
+			(shape) => {
+				return index.get().get(shape.id)
+			},
+			// we can ignore the shape equality check here because the index is
+			// computed incrementally based on what bindings are in the store
+			{ areRecordsEqual: () => true }
+		)
 	}
 
 	/**
@@ -10214,7 +10227,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 					// If the camera behavior is "zoom" and the ctrl key is pressed, then pan;
 					// If the camera behavior is "pan" and the ctrl key is not pressed, then zoom
-					if (inputs.ctrlKey) behavior = wheelBehavior === 'pan' ? 'zoom' : 'pan'
+					if (info.ctrlKey) behavior = wheelBehavior === 'pan' ? 'zoom' : 'pan'
 
 					switch (behavior) {
 						case 'zoom': {

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -19,6 +19,7 @@ import { TLFontFace } from '../managers/FontManager'
 import { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'
 import { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'
 import { SvgExportContext } from '../types/SvgExportContext'
+import { TLClickEventInfo } from '../types/event-types'
 import { TLResizeHandle } from '../types/selection-types'
 
 /** @public */
@@ -671,10 +672,21 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * A callback called when a shape's edge is double clicked.
 	 *
 	 * @param shape - The shape.
+	 * @param info - Info about the edge.
 	 * @returns A change to apply to the shape, or void.
 	 * @public
 	 */
-	onDoubleClickEdge?(shape: Shape): TLShapePartial<Shape> | void
+	onDoubleClickEdge?(shape: Shape, info: TLClickEventInfo): TLShapePartial<Shape> | void
+
+	/**
+	 * A callback called when a shape's corner is double clicked.
+	 *
+	 * @param shape - The shape.
+	 * @param info - Info about the corner.
+	 * @returns A change to apply to the shape, or void.
+	 * @public
+	 */
+	onDoubleClickCorner?(shape: Shape, info: TLClickEventInfo): TLShapePartial<Shape> | void
 
 	/**
 	 * A callback called when a shape is double clicked.

package/src/lib/exports/getSvgJsx.tsx

@@ -365,6 +365,21 @@ function SvgExport({
 		onMount()
 	}, [onMount, shapeElements])
 
+	let backgroundColor = background ? theme.background : 'transparent'
+
+	if (singleFrameShapeId && background) {
+		const frameShapeUtil = editor.getShapeUtil('frame') as any as
+			| undefined
+			| { options: { showColors: boolean } }
+		if (frameShapeUtil?.options.showColors) {
+			const shape = editor.getShape(singleFrameShapeId)! as TLFrameShape
+			const color = theme[shape.props.color]
+			backgroundColor = color.frame.fill
+		} else {
+			backgroundColor = theme.solid
+		}
+	}
+
 	return (
 		<SvgExportContextProvider editor={editor} context={exportContext}>
 			<svg
@@ -375,13 +390,7 @@ function SvgExport({
 				viewBox={`${bbox.minX} ${bbox.minY} ${bbox.width} ${bbox.height}`}
 				strokeLinecap="round"
 				strokeLinejoin="round"
-				style={{
-					backgroundColor: background
-						? singleFrameShapeId
-							? theme.solid
-							: theme.background
-						: 'transparent',
-				}}
+				style={{ backgroundColor }}
 				data-color-mode={isDarkMode ? 'dark' : 'light'}
 				className={`tl-container tl-theme__force-sRGB ${isDarkMode ? 'tl-theme__dark' : 'tl-theme__light'}`}
 			>

package/src/lib/hooks/useEditorComponents.tsx

@@ -51,29 +51,30 @@ import { useShallowObjectIdentity } from './useIdentity'
 /** @public */
 export interface TLEditorComponents {
 	Background?: ComponentType | null
-	SvgDefs?: ComponentType | null
 	Brush?: ComponentType<TLBrushProps> | null
-	ZoomBrush?: ComponentType<TLBrushProps> | null
-	ShapeIndicators?: ComponentType | null
-	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
-	Cursor?: ComponentType<TLCursorProps> | null
 	Canvas?: ComponentType<TLCanvasComponentProps> | null
 	CollaboratorBrush?: ComponentType<TLBrushProps> | null
 	CollaboratorCursor?: ComponentType<TLCursorProps> | null
 	CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null
+	CollaboratorScribble?: ComponentType<TLScribbleProps> | null
 	CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
+	Cursor?: ComponentType<TLCursorProps> | null
 	Grid?: ComponentType<TLGridProps> | null
-	Scribble?: ComponentType<TLScribbleProps> | null
-	CollaboratorScribble?: ComponentType<TLScribbleProps> | null
-	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
-	Handles?: ComponentType<TLHandlesProps> | null
 	Handle?: ComponentType<TLHandleProps> | null
-	Spinner?: ComponentType | null
-	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
-	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
-	OnTheCanvas?: ComponentType | null
+	Handles?: ComponentType<TLHandlesProps> | null
 	InFrontOfTheCanvas?: ComponentType | null
 	LoadingScreen?: ComponentType | null
+	OnTheCanvas?: ComponentType | null
+	Overlays?: ComponentType | null
+	Scribble?: ComponentType<TLScribbleProps> | null
+	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
+	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
+	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
+	ShapeIndicators?: ComponentType | null
+	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
+	Spinner?: ComponentType | null
+	SvgDefs?: ComponentType | null
+	ZoomBrush?: ComponentType<TLBrushProps> | null
 
 	// These will always have defaults
 	ErrorFallback?: TLErrorFallbackComponent
@@ -96,32 +97,35 @@ export function EditorComponentsProvider({
 	const value = useMemo(
 		(): Required<TLEditorComponents> => ({
 			Background: DefaultBackground,
-			SvgDefs: DefaultSvgDefs,
 			Brush: DefaultBrush,
-			ZoomBrush: DefaultBrush,
+			Canvas: DefaultCanvas,
 			CollaboratorBrush: DefaultBrush,
-			Cursor: DefaultCursor,
 			CollaboratorCursor: DefaultCursor,
 			CollaboratorHint: DefaultCollaboratorHint,
+			CollaboratorScribble: DefaultScribble,
 			CollaboratorShapeIndicator: DefaultShapeIndicator,
+			Cursor: DefaultCursor,
 			Grid: DefaultGrid,
+			Handle: DefaultHandle,
+			Handles: DefaultHandles,
+			InFrontOfTheCanvas: null,
+			LoadingScreen: DefaultLoadingScreen,
+			OnTheCanvas: null,
+			Overlays: null,
 			Scribble: DefaultScribble,
+			SelectionBackground: DefaultSelectionBackground,
+			SelectionForeground: DefaultSelectionForeground,
+			ShapeIndicator: DefaultShapeIndicator,
+			ShapeIndicators: DefaultShapeIndicators,
 			SnapIndicator: DefaultSnapIndicator,
-			Handles: DefaultHandles,
-			Handle: DefaultHandle,
-			CollaboratorScribble: DefaultScribble,
+			Spinner: DefaultSpinner,
+			SvgDefs: DefaultSvgDefs,
+			ZoomBrush: DefaultBrush,
+
 			ErrorFallback: DefaultErrorFallback,
 			ShapeErrorFallback: DefaultShapeErrorFallback,
 			ShapeIndicatorErrorFallback: DefaultShapeIndicatorErrorFallback,
-			Spinner: DefaultSpinner,
-			SelectionBackground: DefaultSelectionBackground,
-			SelectionForeground: DefaultSelectionForeground,
-			ShapeIndicators: DefaultShapeIndicators,
-			ShapeIndicator: DefaultShapeIndicator,
-			OnTheCanvas: null,
-			InFrontOfTheCanvas: null,
-			Canvas: DefaultCanvas,
-			LoadingScreen: DefaultLoadingScreen,
+
 			..._overrides,
 		}),
 		[_overrides]

package/src/lib/utils/areShapesContentEqual.ts

@@ -0,0 +1,4 @@
+import { TLShape } from '@tldraw/tlschema'
+
+export const areShapesContentEqual = (a: TLShape, b: TLShape) =>
+	a.props === b.props && a.meta === b.meta

package/src/lib/utils/nearestMultiple.ts

@@ -0,0 +1,13 @@
+// Euclidean algorithm to find the GCD
+function gcd(a: number, b: number): number {
+	return b === 0 ? a : gcd(b, a % b)
+}
+
+// Returns the lowest value that the given number can be multiplied by to reach an integer
+export function nearestMultiple(float: number) {
+	const decimal = float.toString().split('.')[1]
+	if (!decimal) return 1
+	const denominator = Math.pow(10, decimal.length)
+	const numerator = parseInt(decimal, 10)
+	return denominator / gcd(numerator, denominator)
+}

package/src/lib/utils/rotation.ts

@@ -26,11 +26,13 @@ export function getRotationSnapshot({
 		return null
 	}
 
-	const pageCenter = rotatedPageBounds.center.clone().rotWith(rotatedPageBounds.point, rotation)
+	const initialPageCenter = rotatedPageBounds.center
+		.clone()
+		.rotWith(rotatedPageBounds.point, rotation)
 
 	return {
-		pageCenter,
-		initialCursorAngle: pageCenter.angle(editor.inputs.originPagePoint),
+		initialPageCenter,
+		initialCursorAngle: initialPageCenter.angle(editor.inputs.originPagePoint),
 		initialShapesRotation: rotation,
 		shapeSnapshots: shapes.map((shape) => ({
 			shape,
@@ -43,7 +45,7 @@ export function getRotationSnapshot({
  * @internal
  **/
 export interface TLRotationSnapshot {
-	pageCenter: Vec
+	initialPageCenter: Vec
 	initialCursorAngle: number
 	initialShapesRotation: number
 	shapeSnapshots: {
@@ -66,7 +68,7 @@ export function applyRotationToSnapshotShapes({
 	stage: 'start' | 'update' | 'end' | 'one-off'
 	centerOverride?: VecLike
 }) {
-	const { pageCenter, shapeSnapshots } = snapshot
+	const { initialPageCenter, shapeSnapshots } = snapshot
 
 	editor.updateShapes(
 		shapeSnapshots.map(({ shape, initialPagePoint }) => {
@@ -77,7 +79,7 @@ export function applyRotationToSnapshotShapes({
 				? editor.getShapePageTransform(shape.parentId)!
 				: Mat.Identity()
 
-			const newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? pageCenter, delta)
+			const newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? initialPageCenter, delta)
 
 			const newLocalPoint = Mat.applyToPoint(
 				// use the current parent transform in case it has moved/resized since the start

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.13.0-canary.2449ca610c41'
+export const version = '3.13.0-canary.2594be9eef80'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-04-29T10:47:44.728Z',
-	patch: '2025-04-29T10:47:44.728Z',
+	minor: '2025-05-02T12:26:33.242Z',
+	patch: '2025-05-02T12:26:33.242Z',
 }