tldraw 4.2.2 → 4.2.3

package/src/lib/shapes/draw/toolStates/Drawing.ts

@@ -10,7 +10,6 @@ import {
 	TLShapePartial,
 	Vec,
 	VecModel,
-	b64Vecs,
 	createShapeId,
 	last,
 	snapAngle,
@@ -50,23 +49,19 @@ export class Drawing extends StateNode {
 	mergeNextPoint = false
 	currentLineLength = 0
 
-	// Cache for current segment's points to avoid repeated b64 decode/encode
-	currentSegmentPoints: Vec[] = []
-
 	markId = null as null | string
 
 	override onEnter(info: TLPointerEventInfo) {
 		this.markId = null
 		this.info = info
-		this.lastRecordedPoint = this.editor.inputs.getCurrentPagePoint().clone()
+		this.lastRecordedPoint = this.editor.inputs.currentPagePoint.clone()
 		this.startShape()
 	}
 
 	override onPointerMove() {
 		const { inputs } = this.editor
-		const isPen = inputs.getIsPen()
 
-		if (this.isPen && !isPen) {
+		if (this.isPen && !inputs.isPen) {
 			// The user made a palm gesture before starting a pen gesture;
 			// ideally we'd start the new shape here but we could also just bail
 			// as the next interaction will work correctly
@@ -79,9 +74,11 @@ export class Drawing extends StateNode {
 
 		if (this.isPenOrStylus) {
 			// Don't update the shape if we haven't moved far enough from the last time we recorded a point
-			const currentPagePoint = inputs.getCurrentPagePoint()
-			if (Vec.Dist(currentPagePoint, this.lastRecordedPoint) >= 1 / this.editor.getZoomLevel()) {
-				this.lastRecordedPoint = currentPagePoint.clone()
+			if (
+				Vec.Dist(inputs.currentPagePoint, this.lastRecordedPoint) >=
+				1 / this.editor.getZoomLevel()
+			) {
+				this.lastRecordedPoint = inputs.currentPagePoint.clone()
 				this.mergeNextPoint = false
 			} else {
 				this.mergeNextPoint = true
@@ -99,7 +96,7 @@ export class Drawing extends StateNode {
 				case 'free': {
 					// We've just entered straight mode, go to straight mode
 					this.segmentMode = 'starting_straight'
-					this.pagePointWhereNextSegmentChanged = this.editor.inputs.getCurrentPagePoint().clone()
+					this.pagePointWhereNextSegmentChanged = this.editor.inputs.currentPagePoint.clone()
 					break
 				}
 				case 'starting_free': {
@@ -118,7 +115,7 @@ export class Drawing extends StateNode {
 				case 'straight': {
 					// We've just exited straight mode, go back to free mode
 					this.segmentMode = 'starting_free'
-					this.pagePointWhereNextSegmentChanged = this.editor.inputs.getCurrentPagePoint().clone()
+					this.pagePointWhereNextSegmentChanged = this.editor.inputs.currentPagePoint.clone()
 					break
 				}
 				case 'starting_straight': {
@@ -134,7 +131,7 @@ export class Drawing extends StateNode {
 
 	override onExit() {
 		this.editor.snaps.clearIndicators()
-		this.pagePointWhereCurrentSegmentChanged = this.editor.inputs.getCurrentPagePoint().clone()
+		this.pagePointWhereCurrentSegmentChanged = this.editor.inputs.currentPagePoint.clone()
 	}
 
 	canClose() {
@@ -145,13 +142,11 @@ export class Drawing extends StateNode {
 		if (!this.canClose()) return false
 
 		const strokeWidth = STROKE_SIZES[size]
-		const firstPoint = b64Vecs.decodeFirstPoint(segments[0].points)
+		const firstPoint = segments[0].points[0]
 		const lastSegment = segments[segments.length - 1]
-		const lastPoint = b64Vecs.decodeLastPoint(lastSegment.points)
+		const lastPoint = lastSegment.points[lastSegment.points.length - 1]
 
 		return (
-			firstPoint !== null &&
-			lastPoint !== null &&
 			firstPoint !== lastPoint &&
 			this.currentLineLength > strokeWidth * 4 * scale &&
 			Vec.DistMin(firstPoint, lastPoint, strokeWidth * 2 * scale)
@@ -159,9 +154,9 @@ export class Drawing extends StateNode {
 	}
 
 	private startShape() {
-		const inputs = this.editor.inputs
-		const originPagePoint = inputs.getOriginPagePoint()
-		const isPen = inputs.getIsPen()
+		const {
+			inputs: { originPagePoint, isPen },
+		} = this.editor
 
 		this.markId = this.editor.markHistoryStoppingPoint('draw start')
 
@@ -177,7 +172,7 @@ export class Drawing extends StateNode {
 
 		const pressure = this.isPenOrStylus ? z * 1.25 : 0.5
 
-		this.segmentMode = this.editor.inputs.getShiftKey() ? 'straight' : 'free'
+		this.segmentMode = this.editor.inputs.shiftKey ? 'straight' : 'free'
 
 		this.didJustShiftClickToExtendPreviousShapeLine = false
 
@@ -193,17 +188,25 @@ export class Drawing extends StateNode {
 
 				const prevSegment = last(shape.props.segments)
 				if (!prevSegment) throw Error('Expected a previous segment!')
-				const prevPoint = b64Vecs.decodeLastPoint(prevSegment.points)
+				const prevPoint = last(prevSegment.points)
 				if (!prevPoint) throw Error('Expected a previous point!')
 
 				const { x, y } = this.editor.getPointInShapeSpace(shape, originPagePoint).toFixed()
 
 				const newSegment: TLDrawShapeSegment = {
 					type: this.segmentMode,
-					points: b64Vecs.encodePoints([
-						{ x: prevPoint.x, y: prevPoint.y, z: +pressure.toFixed(2) },
-						{ x, y, z: +pressure.toFixed(2) },
-					]),
+					points: [
+						{
+							x: prevPoint.x,
+							y: prevPoint.y,
+							z: +pressure.toFixed(2),
+						},
+						{
+							x,
+							y,
+							z: +pressure.toFixed(2),
+						},
+					],
 				}
 
 				// Convert prevPoint to page space
@@ -235,7 +238,7 @@ export class Drawing extends StateNode {
 					)
 				}
 
-				this.editor.updateShapes([shapePartial])
+				this.editor.updateShapes<TLDrawShape | TLHighlightShape>([shapePartial])
 
 				return
 			}
@@ -246,12 +249,8 @@ export class Drawing extends StateNode {
 		this.pagePointWhereCurrentSegmentChanged = originPagePoint.clone()
 		const id = createShapeId()
 
-		// Initialize the segment points cache
-		const initialPoint = new Vec(0, 0, +pressure.toFixed(2))
-		this.currentSegmentPoints = [initialPoint]
-
 		// Allow this to trigger the max shapes reached alert
-		this.editor.createShape({
+		this.editor.createShape<DrawableShape>({
 			id,
 			type: this.shapeType,
 			x: originPagePoint.x,
@@ -262,7 +261,13 @@ export class Drawing extends StateNode {
 				segments: [
 					{
 						type: this.segmentMode,
-						points: b64Vecs.encodePoints([initialPoint]),
+						points: [
+							{
+								x: 0,
+								y: 0,
+								z: +pressure.toFixed(2),
+							},
+						],
 					},
 				],
 			},
@@ -293,9 +298,8 @@ export class Drawing extends StateNode {
 
 		const { segments } = shape.props
 
-		const currentPagePoint = inputs.getCurrentPagePoint()
-		const { x, y, z } = this.editor.getPointInShapeSpace(shape, currentPagePoint).toFixed()
-		const pressure = this.isPenOrStylus ? +(currentPagePoint.z! * 1.25).toFixed(2) : 0.5
+		const { x, y, z } = this.editor.getPointInShapeSpace(shape, inputs.currentPagePoint).toFixed()
+		const pressure = this.isPenOrStylus ? +(inputs.currentPagePoint.z! * 1.25).toFixed(2) : 0.5
 		const newPoint = { x, y, z: pressure }
 
 		switch (this.segmentMode) {
@@ -307,7 +311,7 @@ export class Drawing extends StateNode {
 				}
 
 				const hasMovedFarEnough =
-					Vec.Dist2(pagePointWhereNextSegmentChanged, inputs.getCurrentPagePoint()) >
+					Vec.Dist2(pagePointWhereNextSegmentChanged, inputs.currentPagePoint) >
 					this.editor.options.dragDistanceSquared
 
 				// Find the distance from where the pointer was when shift was released and
@@ -324,7 +328,7 @@ export class Drawing extends StateNode {
 					const prevSegment = last(segments)
 					if (!prevSegment) throw Error('Expected a previous segment!')
 
-					const prevLastPoint = b64Vecs.decodeLastPoint(prevSegment.points)
+					const prevLastPoint = last(prevSegment.points)
 					if (!prevLastPoint) throw Error('Expected a previous last point!')
 
 					let newSegment: TLDrawShapeSegment
@@ -339,7 +343,7 @@ export class Drawing extends StateNode {
 
 						newSegment = {
 							type: 'straight',
-							points: b64Vecs.encodePoints([prevLastPoint, newLastPoint]),
+							points: [{ ...prevLastPoint }, newLastPoint],
 						}
 
 						const transform = this.editor.getShapePageTransform(shape)!
@@ -348,7 +352,7 @@ export class Drawing extends StateNode {
 					} else {
 						newSegment = {
 							type: 'straight',
-							points: b64Vecs.encodePoints([newLastPoint, newPoint]),
+							points: [newLastPoint, newPoint],
 						}
 					}
 
@@ -368,7 +372,7 @@ export class Drawing extends StateNode {
 						)
 					}
 
-					this.editor.updateShapes([shapePartial])
+					this.editor.updateShapes<TLDrawShape | TLHighlightShape>([shapePartial])
 				}
 				break
 			}
@@ -380,7 +384,7 @@ export class Drawing extends StateNode {
 				}
 
 				const hasMovedFarEnough =
-					Vec.Dist2(pagePointWhereNextSegmentChanged, inputs.getCurrentPagePoint()) >
+					Vec.Dist2(pagePointWhereNextSegmentChanged, inputs.currentPagePoint) >
 					this.editor.options.dragDistanceSquared
 
 				// Find the distance from where the pointer was when shift was released and
@@ -396,7 +400,7 @@ export class Drawing extends StateNode {
 
 					const newSegments = segments.slice()
 					const prevStraightSegment = newSegments[newSegments.length - 1]
-					const prevPoint = b64Vecs.decodeLastPoint(prevStraightSegment.points)
+					const prevPoint = last(prevStraightSegment.points)
 
 					if (!prevPoint) {
 						throw Error('No previous point!')
@@ -404,15 +408,15 @@ export class Drawing extends StateNode {
 
 					// Create the new free segment and interpolate the points between where the last line
 					// ended and where the pointer is now
-					const interpolatedPoints = Vec.PointsBetween(prevPoint, newPoint, 6).map(
-						(p) => new Vec(toFixed(p.x), toFixed(p.y), toFixed(p.z))
-					)
-					// Initialize cache for the new free segment
-					this.currentSegmentPoints = interpolatedPoints
-
 					const newFreeSegment: TLDrawShapeSegment = {
 						type: 'free',
-						points: b64Vecs.encodePoints(interpolatedPoints),
+						points: [
+							...Vec.PointsBetween(prevPoint, newPoint, 6).map((p) => ({
+								x: toFixed(p.x),
+								y: toFixed(p.y),
+								z: toFixed(p.z),
+							})),
+						],
 					}
 
 					const finalSegments = [...newSegments, newFreeSegment]
@@ -447,9 +451,7 @@ export class Drawing extends StateNode {
 				const newSegment = newSegments[newSegments.length - 1]
 
 				const { pagePointWhereCurrentSegmentChanged } = this
-				const inputs = this.editor.inputs
-				const ctrlKey = inputs.getCtrlKey()
-				const currentPagePoint = inputs.getCurrentPagePoint()
+				const { ctrlKey, currentPagePoint } = this.editor.inputs
 
 				if (!pagePointWhereCurrentSegmentChanged)
 					throw Error('We should have a point where the segment changed')
@@ -458,7 +460,7 @@ export class Drawing extends StateNode {
 				let shouldSnapToAngle = false
 
 				if (this.didJustShiftClickToExtendPreviousShapeLine) {
-					if (this.editor.inputs.getIsDragging()) {
+					if (this.editor.inputs.isDragging) {
 						// If we've just shift clicked to extend a line, only snap once we've started dragging
 						shouldSnapToAngle = !ctrlKey
 						this.didJustShiftClickToExtendPreviousShapeLine = false
@@ -487,8 +489,8 @@ export class Drawing extends StateNode {
 							if (!segment) break
 							if (segment.type === 'free') continue
 
-							const first = b64Vecs.decodeFirstPoint(segment.points)
-							const lastPoint = b64Vecs.decodeLastPoint(segment.points)
+							const first = segment.points[0]
+							const lastPoint = last(segment.points)
 							if (!(first && lastPoint)) continue
 
 							// Snap to the nearest point on the segment, if it's closer than the previous snapped point
@@ -515,9 +517,9 @@ export class Drawing extends StateNode {
 
 				if (didSnap && snapSegment) {
 					const transform = this.editor.getShapePageTransform(shape)!
-					const first = b64Vecs.decodeFirstPoint(snapSegment.points)
-					const lastPoint = b64Vecs.decodeLastPoint(snapSegment.points)
-					if (!first || !lastPoint) throw Error('Expected a last point!')
+					const first = snapSegment.points[0]
+					const lastPoint = last(snapSegment.points)
+					if (!lastPoint) throw Error('Expected a last point!')
 
 					const A = Mat.applyToPoint(transform, first)
 
@@ -547,7 +549,7 @@ export class Drawing extends StateNode {
 							angleDiff
 						)
 					} else {
-						pagePoint = currentPagePoint.clone()
+						pagePoint = currentPagePoint
 					}
 
 					newPoint = this.editor.getPointInShapeSpace(shape, pagePoint).toFixed().toJson()
@@ -557,18 +559,12 @@ export class Drawing extends StateNode {
 				// then the user just did a click-and-immediately-press-shift to create a new straight line
 				// without continuing the previous line. In this case, we want to remove the previous segment.
 
-				this.currentLineLength +=
-					newSegments.length && b64Vecs.decodeFirstPoint(newSegment.points)
-						? Vec.Dist(b64Vecs.decodeFirstPoint(newSegment.points)!, Vec.From(newPoint))
-						: 0
+				this.currentLineLength += Vec.Dist(newSegment.points[0], newPoint)
 
 				newSegments[newSegments.length - 1] = {
 					...newSegment,
 					type: 'straight',
-					points: b64Vecs.encodePoints([
-						b64Vecs.decodeFirstPoint(newSegment.points)!,
-						Vec.From(newPoint),
-					]),
+					points: [newSegment.points[0], newPoint],
 				}
 
 				const shapePartial: TLShapePartial<DrawableShape> = {
@@ -592,28 +588,27 @@ export class Drawing extends StateNode {
 				break
 			}
 			case 'free': {
-				// Use cached points instead of decoding from b64 on every update
-				const cachedPoints = this.currentSegmentPoints
-
-				if (cachedPoints.length && this.mergeNextPoint) {
-					const lastPoint = cachedPoints[cachedPoints.length - 1]
-					lastPoint.x = newPoint.x
-					lastPoint.y = newPoint.y
-					lastPoint.z = lastPoint.z ? Math.max(lastPoint.z, newPoint.z) : newPoint.z
+				const newSegments = segments.slice()
+				const newSegment = newSegments[newSegments.length - 1]
+				const newPoints = [...newSegment.points]
+
+				if (newPoints.length && this.mergeNextPoint) {
+					const { z } = newPoints[newPoints.length - 1]
+					newPoints[newPoints.length - 1] = {
+						x: newPoint.x,
+						y: newPoint.y,
+						z: z ? Math.max(z, newPoint.z) : newPoint.z,
+					}
 					// Note: we could recompute the line length here, but it's not really necessary
 					// this.currentLineLength = this.getLineLength(newSegments)
 				} else {
-					this.currentLineLength += cachedPoints.length
-						? Vec.Dist(cachedPoints[cachedPoints.length - 1], newPoint)
-						: 0
-					cachedPoints.push(new Vec(newPoint.x, newPoint.y, newPoint.z))
+					this.currentLineLength += Vec.Dist(newPoints[newPoints.length - 1], newPoint)
+					newPoints.push(newPoint)
 				}
 
-				const newSegments = segments.slice()
-				const newSegment = newSegments[newSegments.length - 1]
 				newSegments[newSegments.length - 1] = {
 					...newSegment,
-					points: b64Vecs.encodePoints(cachedPoints),
+					points: newPoints,
 				}
 
 				if (this.currentLineLength < STROKE_SIZES[shape.props.size] * 4) {
@@ -639,7 +634,7 @@ export class Drawing extends StateNode {
 				this.editor.updateShapes([shapePartial])
 
 				// Set a maximum length for the lines array; after 200 points, complete the line.
-				if (cachedPoints.length > this.util.options.maxPointsPerShape) {
+				if (newPoints.length > this.util.options.maxPointsPerShape) {
 					this.editor.updateShapes([{ id, type: this.shapeType, props: { isComplete: true } }])
 
 					const newShapeId = createShapeId()
@@ -647,24 +642,18 @@ export class Drawing extends StateNode {
 					const props = this.editor.getShape<DrawableShape>(id)!.props
 
 					if (!this.editor.canCreateShapes([newShapeId])) return this.cancel()
-					const currentPagePoint = inputs.getCurrentPagePoint()
-
-					// Reset cache for the new shape's segment
-					const initialPoint = new Vec(0, 0, this.isPenOrStylus ? +(z! * 1.25).toFixed() : 0.5)
-					this.currentSegmentPoints = [initialPoint]
-
-					this.editor.createShape({
+					this.editor.createShape<DrawableShape>({
 						id: newShapeId,
 						type: this.shapeType,
-						x: toFixed(currentPagePoint.x),
-						y: toFixed(currentPagePoint.y),
+						x: toFixed(inputs.currentPagePoint.x),
+						y: toFixed(inputs.currentPagePoint.y),
 						props: {
 							isPen: this.isPenOrStylus,
 							scale: props.scale,
 							segments: [
 								{
 									type: 'free',
-									points: b64Vecs.encodePoints([initialPoint]),
+									points: [{ x: 0, y: 0, z: this.isPenOrStylus ? +(z! * 1.25).toFixed() : 0.5 }],
 								},
 							],
 						},
@@ -680,7 +669,7 @@ export class Drawing extends StateNode {
 
 					this.initialShape = structuredClone(shape)
 					this.mergeNextPoint = false
-					this.lastRecordedPoint = currentPagePoint.clone()
+					this.lastRecordedPoint = inputs.currentPagePoint.clone()
 					this.currentLineLength = 0
 				}
 
@@ -692,10 +681,11 @@ export class Drawing extends StateNode {
 	private getLineLength(segments: TLDrawShapeSegment[]) {
 		let length = 0
 
-		for (let j = 0; j < segments.length; j++) {
-			const points = b64Vecs.decodePoints(segments[j].points)
-			for (let i = 0; i < points.length - 1; i++) {
-				length += Vec.Dist2(points[i], points[i + 1])
+		for (const segment of segments) {
+			for (let i = 0; i < segment.points.length - 1; i++) {
+				const A = segment.points[i]
+				const B = segment.points[i + 1]
+				length += Vec.Dist2(B, A)
 			}
 		}
 
@@ -715,7 +705,7 @@ export class Drawing extends StateNode {
 	}
 
 	override onInterrupt() {
-		if (this.editor.inputs.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			return
 		}
 

package/src/lib/shapes/embed/EmbedShapeUtil.tsx

@@ -43,12 +43,6 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 	static override migrations = embedShapeMigrations
 	private static embedDefinitions: readonly EmbedDefinition[] = DEFAULT_EMBED_DEFINITIONS
 
-	override canEditWhileLocked(shape: TLEmbedShape) {
-		const result = this.getEmbedDefinition(shape.props.url)
-		if (!result) return true
-		return result.definition.canEditWhileLocked ?? true
-	}
-
 	static setEmbedDefinitions(embedDefinitions: readonly TLEmbedDefinition[]) {
 		EmbedShapeUtil.embedDefinitions = embedDefinitions
 	}
@@ -143,7 +137,7 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 
 				if (editingShapeId && hoveredShapeId !== editingShapeId) {
 					const editingShape = this.editor.getShape(editingShapeId)
-					if (editingShape && this.editor.isShapeOfType(editingShape, 'embed')) {
+					if (editingShape && this.editor.isShapeOfType<TLEmbedShape>(editingShape, 'embed')) {
 						return true
 					}
 				}
@@ -217,7 +211,6 @@ export class EmbedShapeUtil extends BaseBoxShapeUtil<TLEmbedShape> {
 						frameBorder="0"
 						referrerPolicy="no-referrer-when-downgrade"
 						tabIndex={isEditing ? 0 : -1}
-						allowFullScreen
 						style={{
 							border: 0,
 							pointerEvents: isInteractive ? 'auto' : 'none',

package/src/lib/shapes/frame/FrameShapeTool.ts

@@ -4,7 +4,7 @@ import { BaseBoxShapeTool, TLShape, TLShapeId } from '@tldraw/editor'
 export class FrameShapeTool extends BaseBoxShapeTool {
 	static override id = 'frame'
 	static override initial = 'idle'
-	override shapeType = 'frame' as const
+	override shapeType = 'frame'
 
 	override onCreate(shape: TLShape | null): void {
 		if (!shape) return

package/src/lib/shapes/frame/FrameShapeUtil.tsx

@@ -9,7 +9,6 @@ import {
 	TLClickEventInfo,
 	TLDragShapesOutInfo,
 	TLDragShapesOverInfo,
-	TLEditStartInfo,
 	TLFrameShape,
 	TLFrameShapeProps,
 	TLResizeInfo,
@@ -54,10 +53,6 @@ export interface FrameShapeOptions {
 	 * When true, the frame will display colors for the shape's headings and background.
 	 */
 	showColors: boolean
-	/**
-	 * When true, the frame will resize its children when the frame itself is resized.
-	 */
-	resizeChildren: boolean
 }
 
 export function defaultEmptyAs(str: string, dflt: string) {
@@ -75,7 +70,6 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 
 	override options: FrameShapeOptions = {
 		showColors: false,
-		resizeChildren: false,
 	}
 
 	// evil crimes :)
@@ -94,8 +88,8 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		return withOptions
 	}
 
-	override canEdit(shape: TLFrameShape, info: TLEditStartInfo) {
-		return info.type === 'click-header' || info.type === 'unknown'
+	override canEdit() {
+		return true
 	}
 
 	override canResize() {
@@ -103,7 +97,7 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 	}
 
 	override canResizeChildren() {
-		return this.options.resizeChildren
+		return false
 	}
 
 	override isExportBoundsContainer(): boolean {
@@ -121,7 +115,7 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 	override getGeometry(shape: TLFrameShape): Geometry2d {
 		const { editor } = this
 
-		const z = editor.getEfficientZoomLevel()
+		const z = editor.getZoomLevel()
 
 		// Which dimension measures the top edge after rotation?
 		const labelSide = getFrameHeadingSide(editor, shape)

package/src/lib/shapes/geo/GeoShapeUtil.test.tsx

@@ -27,16 +27,8 @@ describe('Handle snapping', () => {
 		)
 	})
 
-	const geoShape = () => {
-		const shape = editor.getShape(ids.geo)!
-		assert(editor.isShapeOfType(shape, 'geo'))
-		return shape
-	}
-	const lineShape = () => {
-		const shape = editor.getShape(ids.line)!
-		assert(editor.isShapeOfType(shape, 'line'))
-		return shape
-	}
+	const geoShape = () => editor.getShape(ids.geo)!
+	const lineShape = () => editor.getShape(ids.line)!
 	const lineHandles = () => editor.getShapeUtil('line').getHandles!(lineShape())!
 
 	function startDraggingHandle() {