tldraw 4.2.2 → 4.2.3

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

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

package/src/lib/shapes/line/LineShapeTool.test.ts

@@ -1,4 +1,4 @@
-import { assert } from '@tldraw/editor'
+import { TLLineShape, assert } from '@tldraw/editor'
 import { TestEditor } from '../../../test/TestEditor'
 
 let editor: TestEditor
@@ -127,7 +127,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(20, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType(line, 'line'))
+		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 
@@ -143,7 +143,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(30, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType(line, 'line'))
+		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(2)
 	})
 
@@ -160,7 +160,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(30, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType(line, 'line'))
+		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 
@@ -179,7 +179,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(30, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType(line, 'line'))
+		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 
@@ -200,7 +200,7 @@ describe('When extending the line with the shift-key in tool-lock mode', () => {
 			.pointerUp(40, 10)
 
 		const line = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
-		assert(editor.isShapeOfType(line, 'line'))
+		assert(editor.isShapeOfType<TLLineShape>(line, 'line'))
 		expect(Object.keys(line.props.points).length).toBe(3)
 	})
 })

package/src/lib/shapes/line/LineShapeUtil.test.tsx

@@ -24,7 +24,7 @@ beforeEach(() => {
 	editor
 		.selectAll()
 		.deleteShapes(editor.getSelectedShapeIds())
-		.createShapes([
+		.createShapes<TLLineShape>([
 			{
 				id: id,
 				type: 'line',
@@ -168,10 +168,10 @@ describe('Snapping', () => {
 			type: 'line',
 			props: {
 				points: {
-					a1: { id: 'a1', index: 'a1' as IndexKey, x: 0, y: 0 },
-					a2: { id: 'a2', index: 'a2' as IndexKey, x: 100, y: 0 },
-					a3: { id: 'a3', index: 'a3' as IndexKey, x: 100, y: 100 },
-					a4: { id: 'a4', index: 'a4' as IndexKey, x: 0, y: 100 },
+					a1: { id: 'a1', index: 'a1', x: 0, y: 0 },
+					a2: { id: 'a2', index: 'a2', x: 100, y: 0 },
+					a3: { id: 'a3', index: 'a3', x: 100, y: 100 },
+					a4: { id: 'a4', index: 'a4', x: 0, y: 100 },
 				},
 			},
 		})

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.getCurrentPagePoint()
+		const { currentPagePoint } = inputs
 
 		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.getShiftKey()) {
+		if (shape && inputs.shiftKey) {
 			// Extending a previous shape
 			this.markId = this.editor.markHistoryStoppingPoint(`creating_line:${shape.id}`)
 			this.shape = shape
@@ -89,7 +89,7 @@ export class Pointing extends StateNode {
 
 			const newPoint = maybeSnapToGrid(currentPagePoint, this.editor)
 
-			this.editor.createShapes([
+			this.editor.createShapes<TLLineShape>([
 				{
 					id,
 					type: 'line',
@@ -114,7 +114,7 @@ export class Pointing extends StateNode {
 	override onPointerMove() {
 		if (!this.shape) return
 
-		if (this.editor.inputs.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			const handles = this.editor.getShapeHandles(this.shape)
 			if (!handles) {
 				if (this.markId) this.editor.bailToMark(this.markId)

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

@@ -1,4 +1,3 @@
-import { TLNoteShape } from '@tldraw/editor'
 import { TestEditor } from '../../../test/TestEditor'
 import { NoteShapeTool } from './NoteShapeTool'
 
@@ -243,7 +242,7 @@ describe('Adjacent note position helpers (sticky pits)', () => {
 
 	it('Falls into correct pit below notes with growY', () => {
 		editor.createShape({ type: 'note', x: 0, y: 0 }).updateShape({
-			...editor.getLastCreatedShape<TLNoteShape>(),
+			...editor.getLastCreatedShape(),
 			props: { growY: 100 },
 		})
 

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

@@ -32,7 +32,7 @@ import {
 	useValue,
 } from '@tldraw/editor'
 import { useCallback, useContext } from 'react'
-import { startEditingShapeWithRichText } from '../../tools/SelectTool/selectHelpers'
+import { startEditingShapeWithLabel } from '../../tools/SelectTool/selectHelpers'
 import { TranslationsContext } from '../../ui/hooks/useTranslation/useTranslation'
 import {
 	isEmptyRichText,
@@ -50,7 +50,6 @@ 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,
@@ -159,7 +158,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 		const isCoarsePointer = this.editor.getInstanceState().isCoarsePointer
 		if (isCoarsePointer) return []
 
-		const zoom = this.editor.getEfficientZoomLevel()
+		const zoom = this.editor.getZoomLevel()
 		if (zoom * scale < 0.25) return []
 
 		const nh = getNoteHeight(shape)
@@ -269,11 +268,14 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 			[this.editor]
 		)
 
-		const isDarkMode = useValue('dark mode', () => this.editor.user.getIsDarkMode(), [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,
+		])
 
-		// Shadows are hidden when zoomed out far enough or in dark mode
-		let hideShadows = useEfficientZoomThreshold(scale * 0.25)
-		if (isDarkMode) hideShadows = true
+		const isDarkMode = useValue('dark mode', () => this.editor.user.getIsDarkMode(), [this.editor])
 
 		const isSelected = shape.id === this.editor.getOnlySelectedShapeId()
 
@@ -316,7 +318,6 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 							wrap
 							padding={LABEL_PADDING * scale}
 							hasCustomTabBehavior
-							showTextOutline={false}
 							onKeyDown={handleKeyDown}
 						/>
 					)}
@@ -536,7 +537,7 @@ function useNoteKeydownHandler(id: TLShapeId) {
 				const newNote = getNoteShapeForAdjacentPosition(editor, shape, adjacentCenter, pageRotation)
 
 				if (newNote) {
-					startEditingShapeWithRichText(editor, newNote, { selectAll: true })
+					startEditingShapeWithLabel(editor, newNote, true /* selectAll */)
 				}
 			}
 		},

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.getCurrentPagePoint()).toMatchObject({
+		expect(editor.inputs.currentPagePoint).toMatchObject({
 			x: handleInPageSpace.x,
 			y: handleInPageSpace.y,
 		})
@@ -99,7 +99,6 @@ 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')
 
@@ -206,7 +205,6 @@ 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/noteHelpers.ts

@@ -104,7 +104,7 @@ export function getAvailableNoteAdjacentPositions(
 	// Get all the positions that are adjacent to the selected note shapes
 	for (const shape of editor.getCurrentPageShapes()) {
 		if (
-			!editor.isShapeOfType(shape, 'note') ||
+			!editor.isShapeOfType<TLNoteShape>(shape, 'note') ||
 			scale !== shape.props.scale ||
 			selectedShapeIds.has(shape.id)
 		) {
@@ -204,7 +204,7 @@ export function getNoteShapeForAdjacentPosition(
 
 		// We create it at the center first, so that it becomes
 		// the child of whatever parent was at that center
-		editor.createShape({
+		editor.createShape<TLNoteShape>({
 			id,
 			type: 'note',
 			x: center.x,

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

@@ -9,7 +9,6 @@ import {
 	maybeSnapToGrid,
 } from '@tldraw/editor'
 
-import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
 import {
 	NOTE_ADJACENT_POSITION_SNAP_RADIUS,
 	getAvailableNoteAdjacentPositions,
@@ -33,7 +32,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.getOriginPagePoint().clone()
+		const center = this.editor.inputs.originPagePoint.clone()
 		const offset = getNoteShapeAdjacentPositionOffset(
 			this.editor,
 			center,
@@ -53,7 +52,7 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		if (this.editor.inputs.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			this.editor.setCurrentTool('select.translating', {
 				...info,
 				target: 'shape',
@@ -62,7 +61,8 @@ export class Pointing extends StateNode {
 				isCreating: true,
 				creatingMarkId: this.markId,
 				onCreate: () => {
-					startEditingShapeWithRichText(this.editor, this.shape.id)
+					this.editor.setEditingShape(this.shape.id)
+					this.editor.setCurrentTool('select.editing_shape')
 				},
 			})
 		}
@@ -88,7 +88,12 @@ export class Pointing extends StateNode {
 		if (this.editor.getInstanceState().isToolLocked) {
 			this.parent.transition('idle')
 		} else {
-			startEditingShapeWithRichText(this.editor, this.shape.id, { info: this.info })
+			this.editor.setEditingShape(this.shape.id)
+			this.editor.setCurrentTool('select.editing_shape', {
+				...this.info,
+				target: 'shape',
+				shape: this.shape,
+			})
 		}
 	}
 

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

@@ -1,17 +1,16 @@
-import { useEditor } from '@tldraw/editor'
+import { useEditor, useValue } 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 = useEfficientZoomThreshold()
+	const hideButton = useValue('zoomLevel', () => editor.getZoomLevel() < 0.32, [editor])
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.getShiftKey()) editor.markEventAsHandled(e)
+			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
 		},
 		[editor]
 	)

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

@@ -1,13 +1,11 @@
 import {
 	Box,
-	ExtractShapeByProps,
 	TLDefaultFillStyle,
 	TLDefaultFontStyle,
 	TLDefaultHorizontalAlignStyle,
 	TLDefaultVerticalAlignStyle,
 	TLShapeId,
 } from '@tldraw/editor'
-import classNames from 'classnames'
 import React from 'react'
 import { PlainTextArea } from '../text/PlainTextArea'
 import { TextHelpers } from './TextHelpers'
@@ -17,7 +15,7 @@ import { useEditablePlainText } from './useEditablePlainText'
 /** @public */
 export interface PlainTextLabelProps {
 	shapeId: TLShapeId
-	type: ExtractShapeByProps<{ text: string }>['type']
+	type: string
 	font: TLDefaultFontStyle
 	fontSize: number
 	lineHeight: number
@@ -35,7 +33,6 @@ export interface PlainTextLabelProps {
 	textWidth?: number
 	textHeight?: number
 	padding?: number
-	showTextOutline?: boolean
 }
 
 /**
@@ -63,7 +60,6 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 	style,
 	textWidth,
 	textHeight,
-	showTextOutline = true,
 }: PlainTextLabelProps) {
 	const { rInput, isEmpty, isEditing, isReadyForEditing, ...editableTextRest } =
 		useEditablePlainText(shapeId, type, plaintext)
@@ -112,13 +108,7 @@ export const PlainTextLabel = React.memo(function PlainTextLabel({
 					height: textHeight ? Math.ceil(textHeight) : undefined,
 				}}
 			>
-				<div
-					className={classNames(
-						`${cssPrefix} tl-text tl-text-content`,
-						showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
-					)}
-					dir="auto"
-				>
+				<div className={`${cssPrefix} tl-text tl-text-content`} dir="auto">
 					{finalPlainText.split('\n').map((lineOfText, index) => (
 						<div key={index} dir="auto">
 							{lineOfText}

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

@@ -1,7 +1,6 @@
 import {
 	Box,
 	DefaultFontFamilies,
-	ExtractShapeByProps,
 	TLDefaultFillStyle,
 	TLDefaultFontStyle,
 	TLDefaultHorizontalAlignStyle,
@@ -15,7 +14,6 @@ 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'
@@ -26,7 +24,7 @@ import { useEditableRichText } from './useEditableRichText'
 /** @public */
 export interface RichTextLabelProps {
 	shapeId: TLShapeId
-	type: ExtractShapeByProps<{ richText: TLRichText }>['type']
+	type: string
 	font: TLDefaultFontStyle
 	fontSize: number
 	lineHeight: number
@@ -45,7 +43,6 @@ export interface RichTextLabelProps {
 	textHeight?: number
 	padding?: number
 	hasCustomTabBehavior?: boolean
-	showTextOutline?: boolean
 }
 
 /**
@@ -74,7 +71,6 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	textWidth,
 	textHeight,
 	hasCustomTabBehavior,
-	showTextOutline = true,
 }: RichTextLabelProps) {
 	const editor = useEditor()
 	const isDragging = React.useRef(false)
@@ -97,7 +93,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 		'isDragging',
 		() => {
 			editor.getInstanceState()
-			isDragging.current = editor.inputs.getIsDragging()
+			isDragging.current = editor.inputs.isDragging
 		},
 		[editor]
 	)
@@ -132,10 +128,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 	const cssPrefix = classNamePrefix || 'tl-text'
 	return (
 		<div
-			className={classNames(
-				`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`,
-				showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
-			)}
+			className={`${cssPrefix}-label tl-text-wrapper tl-rich-text-wrapper`}
 			aria-hidden={!isEditing}
 			data-font={font}
 			data-align={align}
@@ -265,10 +258,7 @@ export function RichTextSVG({
 			y={bounds.minY}
 			width={bounds.w}
 			height={bounds.h}
-			className={classNames(
-				'tl-export-embed-styles tl-rich-text tl-rich-text-svg',
-				showTextOutline ? 'tl-text__outline' : 'tl-text__no-outline'
-			)}
+			className="tl-export-embed-styles tl-rich-text tl-rich-text-svg"
 		>
 			<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.getEfficientZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
 	const getHashPatternZoomName = useGetHashPatternZoomName()
 
-	const teenyTiny = zoomLevel <= 0.18
+	const teenyTiny = editor.getZoomLevel() <= 0.18
 
 	return (
 		<>

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

@@ -361,7 +361,6 @@ export function getCropBox<T extends ShapeWithCrop>(
 		x: newPoint.x,
 		y: newPoint.y,
 		props: {
-			...shape.props,
 			w: tempBox.w,
 			h: tempBox.h,
 			crop: newCrop,

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

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

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

@@ -1,7 +1,7 @@
 import {
 	Editor,
-	ExtractShapeByProps,
 	TLShapeId,
+	TLUnknownShape,
 	getPointerInfo,
 	noop,
 	preventDefault,
@@ -13,11 +13,7 @@ import React, { useCallback, useEffect, useRef } from 'react'
 import { TextHelpers } from './TextHelpers'
 
 /** @public */
-export function useEditablePlainText(
-	shapeId: TLShapeId,
-	type: ExtractShapeByProps<{ text: string }>['type'],
-	text?: string
-) {
+export function useEditablePlainText(shapeId: TLShapeId, type: string, text?: string) {
 	const commonUseEditableTextHandlers = useEditableTextCommon(shapeId)
 	const isEditing = commonUseEditableTextHandlers.isEditing
 	const editor = useEditor()
@@ -79,7 +75,7 @@ export function useEditablePlainText(
 			if (editor.getEditingShapeId() !== shapeId) return
 
 			const normalizedPlaintext = TextHelpers.normalizeText(plaintext || '')
-			editor.updateShape({
+			editor.updateShape<TLUnknownShape & { props: { text: string } }>({
 				id: shapeId,
 				type,
 				props: { text: normalizedPlaintext },

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

@@ -1,14 +1,10 @@
-import { ExtractShapeByProps, TLRichText, TLShapeId, isAccelKey, useEditor } from '@tldraw/editor'
+import { TLRichText, TLShapeId, TLUnknownShape, isAccelKey, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef } from 'react'
 import { isEmptyRichText } from '../../utils/text/richText'
 import { useEditableTextCommon } from './useEditablePlainText'
 
 /** @public */
-export function useEditableRichText(
-	shapeId: TLShapeId,
-	type: ExtractShapeByProps<{ richText: TLRichText }>['type'],
-	richText?: TLRichText
-) {
+export function useEditableRichText(shapeId: TLShapeId, type: string, richText?: TLRichText) {
 	const commonUseEditableTextHandlers = useEditableTextCommon(shapeId)
 	const isEditing = commonUseEditableTextHandlers.isEditing
 	const editor = useEditor()
@@ -43,7 +39,7 @@ export function useEditableRichText(
 		({ richText }: { richText: TLRichText }) => {
 			if (editor.getEditingShapeId() !== shapeId) return
 
-			editor.updateShape({
+			editor.updateShape<TLUnknownShape & { props: { richText: TLRichText } }>({
 				id: shapeId,
 				type,
 				props: { richText },

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

@@ -0,0 +1,6 @@
+import { useEditor, useValue } from '@tldraw/editor'
+
+export function useForceSolid() {
+	const editor = useEditor()
+	return useValue('zoom', () => editor.getZoomLevel() < 0.35, [editor])
+}

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.getEfficientZoomLevel() * (width / asset.props.w)
+				: editor.getZoomLevel() * (width / asset.props.w)
 
 			function resolve(asset: TLImageAsset | TLVideoAsset, url: string | null) {
 				if (isCancelled) return // don't update if the hook has remounted