tldraw 4.3.0-next.39f1d5b92226 → 4.3.0-next.40e4536afc8e

package/src/lib/shapes/highlight/HighlightShapeUtil.test.ts

@@ -0,0 +1,146 @@
+import { createShapeId, TLHighlightShape } from '@tldraw/editor'
+import { TestEditor } from '../../../test/TestEditor'
+import { createDrawSegments, pointsToBase64 } from '../../utils/test-helpers'
+
+let editor: TestEditor
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+afterEach(() => {
+	editor?.dispose()
+})
+
+describe('HighlightShapeUtil dot detection', () => {
+	const shapeId = createShapeId('test-highlight')
+
+	function createHighlightShape(segments: TLHighlightShape['props']['segments']): TLHighlightShape {
+		editor.createShapes([
+			{
+				id: shapeId,
+				type: 'highlight',
+				props: { segments },
+			},
+		])
+		return editor.getShape(shapeId) as TLHighlightShape
+	}
+
+	describe('getIsDot behavior via hideResizeHandles', () => {
+		it('treats a shape with one segment and zero points as a dot', () => {
+			const shape = createHighlightShape([{ type: 'free', points: '' }])
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+
+		it('treats a shape with one segment and one point as a dot', () => {
+			const shape = createHighlightShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+
+		it('treats a shape with one segment and two points as NOT a dot', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('treats a shape with one segment and many points as NOT a dot', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+						{ x: 20, y: 5, z: 0.5 },
+						{ x: 30, y: 15, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('treats a shape with multiple segments as NOT a dot', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([[{ x: 0, y: 0, z: 0.5 }], [{ x: 10, y: 10, z: 0.5 }]])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+	})
+
+	describe('hideRotateHandle mirrors hideResizeHandles for dots', () => {
+		it('hides rotate handle for dots', () => {
+			const shape = createHighlightShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideRotateHandle(shape)).toBe(true)
+		})
+
+		it('shows rotate handle for non-dots', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideRotateHandle(shape)).toBe(false)
+		})
+	})
+
+	describe('hideSelectionBoundsFg mirrors hideResizeHandles for dots', () => {
+		it('hides selection bounds for dots', () => {
+			const shape = createHighlightShape(createDrawSegments([[{ x: 0, y: 0, z: 0.5 }]]))
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideSelectionBoundsFg(shape)).toBe(true)
+		})
+
+		it('shows selection bounds for non-dots', () => {
+			const shape = createHighlightShape(
+				createDrawSegments([
+					[
+						{ x: 0, y: 0, z: 0.5 },
+						{ x: 10, y: 10, z: 0.5 },
+					],
+				])
+			)
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideSelectionBoundsFg(shape)).toBe(false)
+		})
+	})
+
+	describe('base64 encoding boundary conditions', () => {
+		it('correctly handles the boundary at exactly 16 base64 characters (2 points)', () => {
+			// Each point is 8 base64 characters (3 Float16s = 6 bytes = 8 base64 chars)
+			// 2 points = 16 characters, which should NOT be a dot
+			const twoPointsBase64 = pointsToBase64([
+				{ x: 0, y: 0, z: 0.5 },
+				{ x: 1, y: 1, z: 0.5 },
+			])
+			expect(twoPointsBase64.length).toBe(16)
+
+			const shape = createHighlightShape([{ type: 'free', points: twoPointsBase64 }])
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(false)
+		})
+
+		it('correctly handles the boundary at exactly 8 base64 characters (1 point)', () => {
+			// 1 point = 8 characters, which should be a dot
+			const onePointBase64 = pointsToBase64([{ x: 0, y: 0, z: 0.5 }])
+			expect(onePointBase64.length).toBe(8)
+
+			const shape = createHighlightShape([{ type: 'free', points: onePointBase64 }])
+			const util = editor.getShapeUtil('highlight')
+			expect(util.hideResizeHandles(shape)).toBe(true)
+		})
+	})
+})

package/src/lib/shapes/highlight/HighlightShapeUtil.tsx

@@ -5,7 +5,6 @@ import {
 	Polygon2d,
 	SVGContainer,
 	ShapeUtil,
-	TLDrawShapeSegment,
 	TLHighlightShape,
 	TLHighlightShapeProps,
 	TLResizeInfo,
@@ -19,7 +18,7 @@ import {
 	useValue,
 } from '@tldraw/editor'
 
-import { getHighlightFreehandSettings, getPointsFromSegments } from '../draw/getPath'
+import { getHighlightFreehandSettings, getPointsFromDrawSegments } from '../draw/getPath'
 import { FONT_SIZES } from '../shared/default-shape-constants'
 import { getStrokeOutlinePoints } from '../shared/freehand/getStrokeOutlinePoints'
 import { getStrokePoints } from '../shared/freehand/getStrokePoints'
@@ -70,6 +69,8 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 			isComplete: false,
 			isPen: false,
 			scale: 1,
+			scaleX: 1,
+			scaleY: 1,
 		}
 	}
 
@@ -130,7 +131,11 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 		const strokeWidth = getStrokeWidth(shape)
 
 		const { strokePoints, sw } = getHighlightStrokePoints(shape, strokeWidth, forceSolid)
-		const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+		const allPointsFromSegments = getPointsFromDrawSegments(
+			shape.props.segments,
+			shape.props.scaleX,
+			shape.props.scaleY
+		)
 
 		let strokePath
 		if (strokePoints.length < 2) {
@@ -177,24 +182,10 @@ export class HighlightShapeUtil extends ShapeUtil<TLHighlightShape> {
 	override onResize(shape: TLHighlightShape, info: TLResizeInfo<TLHighlightShape>) {
 		const { scaleX, scaleY } = info
 
-		const newSegments: TLDrawShapeSegment[] = []
-
-		for (const segment of shape.props.segments) {
-			newSegments.push({
-				...segment,
-				points: segment.points.map(({ x, y, z }) => {
-					return {
-						x: scaleX * x,
-						y: scaleY * y,
-						z,
-					}
-				}),
-			})
-		}
-
 		return {
 			props: {
-				segments: newSegments,
+				scaleX: scaleX * shape.props.scaleX,
+				scaleY: scaleY * shape.props.scaleY,
 			},
 		}
 	}
@@ -231,7 +222,11 @@ function getHighlightStrokePoints(
 	strokeWidth: number,
 	forceSolid: boolean
 ) {
-	const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+	const allPointsFromSegments = getPointsFromDrawSegments(
+		shape.props.segments,
+		shape.props.scaleX,
+		shape.props.scaleY
+	)
 	const showAsComplete = shape.props.isComplete || last(shape.props.segments)?.type === 'straight'
 
 	let sw = strokeWidth
@@ -254,7 +249,9 @@ function getStrokeWidth(shape: TLHighlightShape) {
 }
 
 function getIsDot(shape: TLHighlightShape) {
-	return shape.props.segments.length === 1 && shape.props.segments[0].points.length < 2
+	// Each point is 8 base64 characters (3 Float16s = 6 bytes = 8 base64 chars)
+	// Check if we have less than 2 points without decoding
+	return shape.props.segments.length === 1 && shape.props.segments[0].points.length < 16
 }
 
 function HighlightRenderer({
@@ -270,7 +267,11 @@ function HighlightRenderer({
 }) {
 	const theme = useDefaultColorTheme()
 
-	const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
+	const allPointsFromSegments = getPointsFromDrawSegments(
+		shape.props.segments,
+		shape.props.scaleX,
+		shape.props.scaleY
+	)
 
 	let sw = strokeWidth
 	if (!forceSolid && !shape.props.isPen && allPointsFromSegments.length === 1) {
@@ -287,7 +288,7 @@ function HighlightRenderer({
 	const solidStrokePath =
 		strokePoints.length > 1
 			? getSvgPathFromStrokePoints(strokePoints, false)
-			: getShapeDot(shape.props.segments[0].points[0])
+			: getShapeDot(allPointsFromSegments[0])
 
 	const colorSpace = useColorSpace()
 
@@ -315,7 +316,7 @@ function useHighlightForceSolid(editor: Editor, shape: TLHighlightShape) {
 		'forceSolid',
 		() => {
 			const sw = getStrokeWidth(shape)
-			const zoomLevel = editor.getZoomLevel()
+			const zoomLevel = editor.getEfficientZoomLevel()
 			if (sw / zoomLevel < 1.5) {
 				return true
 			}

package/src/lib/shapes/line/toolStates/Pointing.ts

@@ -23,14 +23,14 @@ export class Pointing extends StateNode {
 
 	override onEnter(info: { shapeId?: TLShapeId }) {
 		const { inputs } = this.editor
-		const { currentPagePoint } = inputs
+		const currentPagePoint = inputs.getCurrentPagePoint()
 
 		this.markId = undefined
 
 		// Previously created line shape that we might be extending
 		const shape = info.shapeId && this.editor.getShape<TLLineShape>(info.shapeId)
 
-		if (shape && inputs.shiftKey) {
+		if (shape && inputs.getShiftKey()) {
 			// Extending a previous shape
 			this.markId = this.editor.markHistoryStoppingPoint(`creating_line:${shape.id}`)
 			this.shape = shape
@@ -114,7 +114,7 @@ export class Pointing extends StateNode {
 	override onPointerMove() {
 		if (!this.shape) return
 
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			const handles = this.editor.getShapeHandles(this.shape)
 			if (!handles) {
 				if (this.markId) this.editor.bailToMark(this.markId)

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -32,7 +32,7 @@ import {
 	useValue,
 } from '@tldraw/editor'
 import { useCallback, useContext } from 'react'
-import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers'
+import { startEditingShapeWithRichText } from '../../tools/SelectTool/selectHelpers'
 import { TranslationsContext } from '../../ui/hooks/useTranslation/useTranslation'
 import {
 	isEmptyRichText,
@@ -50,6 +50,7 @@ import {
 } from '../shared/default-shape-constants'
 import { useDefaultColorTheme } from '../shared/useDefaultColorTheme'
 import { useIsReadyForEditing } from '../shared/useEditablePlainText'
+import { useEfficientZoomThreshold } from '../shared/useEfficientZoomThreshold'
 import {
 	CLONE_HANDLE_MARGIN,
 	NOTE_CENTER_OFFSET,
@@ -158,7 +159,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 		const isCoarsePointer = this.editor.getInstanceState().isCoarsePointer
 		if (isCoarsePointer) return []
 
-		const zoom = this.editor.getZoomLevel()
+		const zoom = this.editor.getEfficientZoomLevel()
 		if (zoom * scale < 0.25) return []
 
 		const nh = getNoteHeight(shape)
@@ -268,15 +269,12 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 			[this.editor]
 		)
 
-		// todo: consider hiding shadows on dark mode if they're invisible anyway
-
-		const hideShadows = useValue('zoom', () => this.editor.getZoomLevel() < 0.35 / scale, [
-			scale,
-			this.editor,
-		])
-
 		const isDarkMode = useValue('dark mode', () => this.editor.user.getIsDarkMode(), [this.editor])
 
+		// Shadows are hidden when zoomed out far enough or in dark mode
+		let hideShadows = useEfficientZoomThreshold(scale * 0.25)
+		if (isDarkMode) hideShadows = true
+
 		const isSelected = shape.id === this.editor.getOnlySelectedShapeId()
 
 		const isReadyForEditing = useIsReadyForEditing(this.editor, shape.id)
@@ -318,6 +316,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 							wrap
 							padding={LABEL_PADDING * scale}
 							hasCustomTabBehavior
+							showTextOutline={false}
 							onKeyDown={handleKeyDown}
 						/>
 					)}
@@ -537,7 +536,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 				const newNote = getNoteShapeForAdjacentPosition(editor, shape, adjacentCenter, pageRotation)
 
 				if (newNote) {
-					startEditingShapeWithLabel(editor, newNote, true /* selectAll */)
+					startEditingShapeWithRichText(editor, newNote, { selectAll: true })
 				}
 			}
 		},

package/src/lib/shapes/note/noteCloning.test.ts

@@ -30,7 +30,7 @@ function testCloneHandles(x: number, y: number, rotation: number) {
 		const handleInPageSpace = editor.getShapePageTransform(shape).applyToPoint(handle)
 		editor.select(shape.id)
 		editor.pointerMove(handleInPageSpace.x, handleInPageSpace.y)
-		expect(editor.inputs.currentPagePoint).toMatchObject({
+		expect(editor.inputs.getCurrentPagePoint()).toMatchObject({
 			x: handleInPageSpace.x,
 			y: handleInPageSpace.y,
 		})
@@ -99,6 +99,7 @@ function testDragCloneHandles(x: number, y: number, rotation: number) {
 		editor.expectToBeIn('select.pointing_handle')
 
 		editor.pointerMove(handleInPageSpace.x + 30, handleInPageSpace.y + 30)
+		editor.forceTick()
 
 		editor.expectToBeIn('select.translating')
 
@@ -205,6 +206,7 @@ it('Creates an adjacent note when dragging the clone handle', () => {
 	editor.expectToBeIn('select.pointing_handle')
 
 	editor.pointerMove(handle.x + 30, handle.y + 30)
+	editor.forceTick()
 
 	const newShape = editor.getLastCreatedShape()
 

package/src/lib/shapes/note/toolStates/Pointing.ts

@@ -9,6 +9,7 @@ import {
 	maybeSnapToGrid,
 } from '@tldraw/editor'
 
+import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
 import {
 	NOTE_ADJACENT_POSITION_SNAP_RADIUS,
 	getAvailableNoteAdjacentPositions,
@@ -32,7 +33,7 @@ export class Pointing extends StateNode {
 		this.markId = editor.markHistoryStoppingPoint(`creating_note:${id}`)
 
 		// Check for note pits; if the pointer is close to one, place the note centered on the pit
-		const center = this.editor.inputs.originPagePoint.clone()
+		const center = this.editor.inputs.getOriginPagePoint().clone()
 		const offset = getNoteShapeAdjacentPositionOffset(
 			this.editor,
 			center,
@@ -52,7 +53,7 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.isDragging) {
+		if (this.editor.inputs.getIsDragging()) {
 			this.editor.setCurrentTool('select.translating', {
 				...info,
 				target: 'shape',
@@ -61,8 +62,7 @@ export class Pointing extends StateNode {
 				isCreating: true,
 				creatingMarkId: this.markId,
 				onCreate: () => {
-					this.editor.setEditingShape(this.shape.id)
-					this.editor.setCurrentTool('select.editing_shape')
+					startEditingShapeWithRichText(this.editor, this.shape.id)
 				},
 			})
 		}
@@ -88,12 +88,7 @@ export class Pointing extends StateNode {
 		if (this.editor.getInstanceState().isToolLocked) {
 			this.parent.transition('idle')
 		} else {
-			this.editor.setEditingShape(this.shape.id)
-			this.editor.setCurrentTool('select.editing_shape', {
-				...this.info,
-				target: 'shape',
-				shape: this.shape,
-			})
+			startEditingShapeWithRichText(this.editor, this.shape.id, { info: this.info })
 		}
 	}
 

package/src/lib/shapes/shared/HyperlinkButton.tsx

@@ -1,16 +1,17 @@
-import { useEditor, useValue } from '@tldraw/editor'
+import { useEditor } from '@tldraw/editor'
 import classNames from 'classnames'
 import { PointerEventHandler, useCallback } from 'react'
+import { useEfficientZoomThreshold } from './useEfficientZoomThreshold'
 
 const LINK_ICON =
 	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M13 5H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6M19 5h6m0 0v6m0-6L13 17'/%3E%3C/svg%3E"
 
 export function HyperlinkButton({ url }: { url: string }) {
 	const editor = useEditor()
-	const hideButton = useValue('zoomLevel', () => editor.getZoomLevel() < 0.32, [editor])
+	const hideButton = useEfficientZoomThreshold()
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
+			if (!editor.inputs.getShiftKey()) editor.markEventAsHandled(e)
 		},
 		[editor]
 	)

package/src/lib/shapes/shared/PlainTextLabel.tsx

@@ -7,6 +7,7 @@ import {
 	TLDefaultVerticalAlignStyle,
 	TLShapeId,
 } from '@tldraw/editor'
+import classNames from 'classnames'
 import React from 'react'
 import { PlainTextArea } from '../text/PlainTextArea'
 import { TextHelpers } from './TextHelpers'
@@ -34,6 +35,7 @@ export interface PlainTextLabelProps {
 	textWidth?: number
 	textHeight?: number
 	padding?: number
+	showTextOutline?: boolean
 }
 
 /**
@@ -61,6 +63,7 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 	style,
 	textWidth,
 	textHeight,
+	showTextOutline = true,
 }: PlainTextLabelProps) {
 	const { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =
 		useEditablePlainText(shapeId, type, plaintext)
@@ -109,7 +112,13 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 					height: textHeight ? Math.ceil(textHeight) : undefined,
 				}}
 			>
-				<div className={`${cssPrefix} tl-text tl-text-content`} dir="auto">
+				<div
+					className={classNames(
+						`${cssPrefix} tl-text tl-text-content`,
+						showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
+					)}
+					dir="auto"
+				>
 					{finalPlainText.split('\n').map((lineOfText, index) => (
 						<div key={index} dir="auto">
 							{lineOfText}

package/src/lib/shapes/shared/RichTextLabel.tsx

@@ -15,6 +15,7 @@ import {
 	useReactor,
 	useValue,
 } from '@tldraw/editor'
+import classNames from 'classnames'
 import React, { useMemo } from 'react'
 import { renderHtmlFromRichText } from '../../utils/text/richText'
 import { RichTextArea } from '../text/RichTextArea'
@@ -44,6 +45,7 @@ export interface RichTextLabelProps {
 	textHeight?: number
 	padding?: number
 	hasCustomTabBehavior?: boolean
+	showTextOutline?: boolean
 }
 
 /**
@@ -72,6 +74,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	textWidth,
 	textHeight,
 	hasCustomTabBehavior,
+	showTextOutline = true,
 }: RichTextLabelProps) {
 	const editor = useEditor()
 	const isDragging = React.useRef(false)
@@ -94,7 +97,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 		'isDragging',
 		() => {
 			editor.getInstanceState()
-			isDragging.current = editor.inputs.isDragging
+			isDragging.current = editor.inputs.getIsDragging()
 		},
 		[editor]
 	)
@@ -129,7 +132,10 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	const cssPrefix = classNamePrefix || 'tl-text'
 	return (
 		<div
-			className={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}
+			className={classNames(
+				`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`,
+				showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
+			)}
 			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
@@ -259,7 +265,10 @@ export function RichTextSVG({
 			y={bounds.minY}
 			width={bounds.w}
 			height={bounds.h}
-			className="tl-export-embed-styles tl-rich-text tl-rich-text-svg"
+			className={classNames(
+				'tl-export-embed-styles tl-rich-text tl-rich-text-svg',
+				showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
+			)}
 		>
 			<div style={wrapperStyle}>
 				<div dangerouslySetInnerHTML={{ __html: html }} style={style} />

package/src/lib/shapes/shared/ShapeFill.tsx

@@ -50,10 +50,10 @@ export const ShapeFill = React.memo(function ShapeFill({
 export function PatternFill({ d, color, theme }: ShapeFillProps) {
 	const editor = useEditor()
 	const svgExport = useSvgExportContext()
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const getHashPatternZoomName = useGetHashPatternZoomName()
 
-	const teenyTiny = editor.getZoomLevel() <= 0.18
+	const teenyTiny = zoomLevel <= 0.18
 
 	return (
 		<>

package/src/lib/shapes/shared/interpolate-props.ts

@@ -1,4 +1,4 @@
-import { TLDrawShapeSegment, VecModel, lerp } from '@tldraw/editor'
+import { TLDrawShapeSegment, VecModel, b64Vecs, lerp } from '@tldraw/editor'
 
 /** @public */
 export const interpolateSegments = (
@@ -10,8 +10,8 @@ export const interpolateSegments = (
 	const endPoints: VecModel[] = []
 
 	// Extract all points from startSegments and endSegments
-	startSegments.forEach((segment) => startPoints.push(...segment.points))
-	endSegments.forEach((segment) => endPoints.push(...segment.points))
+	startSegments.forEach((segment) => startPoints.push(...b64Vecs.decodePoints(segment.points)))
+	endSegments.forEach((segment) => endPoints.push(...b64Vecs.decodePoints(segment.points)))
 
 	const maxLength = Math.max(startPoints.length, endPoints.length)
 	const pointsToUseStart: VecModel[] = []
@@ -39,7 +39,7 @@ export const interpolateSegments = (
 	return [
 		{
 			type: 'free',
-			points: interpolatedPoints,
+			points: b64Vecs.encodePoints(interpolatedPoints),
 		},
 	]
 }

package/src/lib/shapes/shared/useEfficientZoomThreshold.ts

@@ -0,0 +1,10 @@
+import { useEditor, useValue } from '@tldraw/editor'
+
+/** Returns true when zoomed out far enough that shapes should render in a simplified "solid" style. */
+export function useEfficientZoomThreshold(threshold = 0.25) {
+	const editor = useEditor()
+	return useValue('efficient zoom threshold', () => editor.getEfficientZoomLevel() < threshold, [
+		editor,
+		threshold,
+	])
+}

package/src/lib/shapes/shared/useImageOrVideoAsset.ts

@@ -96,7 +96,7 @@ export function useImageOrVideoAsset({ shapeId, assetId, width }: UseImageOrVide
 
 			const screenScale = exportInfo
 				? exportInfo.scale * (width / asset.props.w)
-				: editor.getZoomLevel() * (width / asset.props.w)
+				: editor.getEfficientZoomLevel() * (width / asset.props.w)
 
 			function resolve(asset: TLImageAsset | TLVideoAsset, url: string | null) {
 				if (isCancelled) return // don't update if the hook has remounted

package/src/lib/shapes/text/RichTextArea.tsx

@@ -183,6 +183,11 @@ export const RichTextArea = React.forwardRef<HTMLDivElement, TextAreaProps>(func
 					blockSeparator: '\n',
 				},
 			},
+			// N.B. We disable the text direction in the core list here,
+			// but we add it back in again in our own extensions list so that
+			// people can omit/override it if they want to.
+			enableCoreExtensions: { textDirection: false },
+			textDirection: 'auto',
 			...restOfTipTapConfig,
 			content: rInitialRichText.current as JSONContent,
 		})

package/src/lib/shapes/text/TextShapeUtil.tsx

@@ -43,6 +43,8 @@ const sizeCache = createComputedCache(
 export interface TextShapeOptions {
 	/** How much addition padding should be added to the horizontal geometry of the shape when binding to an arrow? */
 	extraArrowHorizontalPadding: number
+	/** Whether to show the outline of the text shape (using the same color as the canvas). This helps with overlapping shapes. It does not show up on Safari, where text outline is a performance issues. */
+	showTextOutline: boolean
 }
 
 /** @public */
@@ -53,6 +55,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 
 	override options: TextShapeOptions = {
 		extraArrowHorizontalPadding: 10,
+		showTextOutline: true,
 	}
 
 	getDefaultProps(): TLTextShape['props'] {
@@ -140,6 +143,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				isSelected={isSelected}
 				textWidth={width}
 				textHeight={height}
+				showTextOutline={this.options.showTextOutline}
 				style={{
 					transform: `scale(${scale})`,
 					transformOrigin: 'top left',
@@ -175,6 +179,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				labelColor={getColorValue(theme, shape.props.color, 'solid')}
 				bounds={exportBounds}
 				padding={0}
+				showTextOutline={this.options.showTextOutline}
 			/>
 		)
 	}