tldraw 4.2.2 → 4.2.3

package/src/lib/shapes/arrow/toolStates/Pointing.tsx

@@ -18,7 +18,7 @@ export class Pointing extends StateNode {
 
 		const targetState = updateArrowTargetState({
 			editor: this.editor,
-			pointInPageSpace: this.editor.inputs.getCurrentPagePoint(),
+			pointInPageSpace: this.editor.inputs.currentPagePoint,
 			arrow: undefined,
 			isPrecise: this.isPrecise,
 			currentBinding: undefined,
@@ -43,7 +43,7 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove() {
-		if (this.editor.inputs.getIsDragging()) {
+		if (this.editor.inputs.isDragging) {
 			if (!this.shape) {
 				this.createArrowShape()
 			}
@@ -90,13 +90,13 @@ export class Pointing extends StateNode {
 	}
 
 	createArrowShape() {
-		const originPagePoint = this.editor.inputs.getOriginPagePoint()
+		const { originPagePoint } = this.editor.inputs
 
 		const id = createShapeId()
 
 		this.markId = this.editor.markHistoryStoppingPoint(`creating_arrow:${id}`)
 		const newPoint = maybeSnapToGrid(originPagePoint, this.editor)
-		this.editor.createShape({
+		this.editor.createShape<TLArrowShape>({
 			id,
 			type: 'arrow',
 			x: newPoint.x,
@@ -159,10 +159,7 @@ export class Pointing extends StateNode {
 		{
 			const util = this.editor.getShapeUtil<TLArrowShape>('arrow')
 			const initial = this.shape
-			const point = this.editor.getPointInShapeSpace(
-				shape,
-				this.editor.inputs.getCurrentPagePoint()
-			)
+			const point = this.editor.getPointInShapeSpace(shape, this.editor.inputs.currentPagePoint)
 			const endHandle = handles.find((h) => h.id === 'end')!
 			const change = util.onHandleDrag?.(this.editor.getShape(shape)!, {
 				handle: { ...endHandle, x: point.x, y: point.y },

package/src/lib/shapes/bookmark/BookmarkShapeUtil.tsx

@@ -139,7 +139,7 @@ export function BookmarkShapeComponent({
 
 	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.getShiftKey()) editor.markEventAsHandled(e)
+			if (!editor.inputs.shiftKey) editor.markEventAsHandled(e)
 		},
 		[editor]
 	)

package/src/lib/shapes/bookmark/bookmarks.ts

@@ -59,7 +59,7 @@ export function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmark
 	if (editor.getAsset(assetId)) {
 		// Existing asset for this URL?
 		if (shape.props.assetId !== assetId) {
-			editor.updateShapes([
+			editor.updateShapes<TLBookmarkShape>([
 				{
 					id: shape.id,
 					type: shape.type,
@@ -71,7 +71,7 @@ export function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmark
 		// No asset for this URL?
 
 		// First, clear out the existing asset reference
-		editor.updateShapes([
+		editor.updateShapes<TLBookmarkShape>([
 			{
 				id: shape.id,
 				type: shape.type,
@@ -103,7 +103,7 @@ const createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TL
 		editor.createAssets([asset])
 
 		// And update the shape
-		editor.updateShapes([
+		editor.updateShapes<TLBookmarkShape>([
 			{
 				id: shape.id,
 				type: shape.type,

package/src/lib/shapes/draw/DrawShapeUtil.tsx

@@ -8,6 +8,7 @@ import {
 	SvgExportContext,
 	TLDrawShape,
 	TLDrawShapeProps,
+	TLDrawShapeSegment,
 	TLResizeInfo,
 	TLShapeUtilCanvasSvgDef,
 	VecLike,
@@ -17,6 +18,7 @@ import {
 	last,
 	lerp,
 	rng,
+	toFixed,
 	useEditor,
 	useValue,
 } from '@tldraw/editor'
@@ -29,11 +31,7 @@ import { getSvgPathFromStrokePoints } from '../shared/freehand/svg'
 import { svgInk } from '../shared/freehand/svgInk'
 import { interpolateSegments } from '../shared/interpolate-props'
 import { useDefaultColorTheme } from '../shared/useDefaultColorTheme'
-import {
-	getDrawShapeStrokeDashArray,
-	getFreehandOptions,
-	getPointsFromDrawSegments,
-} from './getPath'
+import { getDrawShapeStrokeDashArray, getFreehandOptions, getPointsFromSegments } from './getPath'
 
 /** @public */
 export interface DrawShapeOptions {
@@ -75,17 +73,11 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
 			isClosed: false,
 			isPen: false,
 			scale: 1,
-			scaleX: 1,
-			scaleY: 1,
 		}
 	}
 
 	getGeometry(shape: TLDrawShape) {
-		const points = getPointsFromDrawSegments(
-			shape.props.segments,
-			shape.props.scaleX,
-			shape.props.scaleY
-		)
+		const points = getPointsFromSegments(shape.props.segments)
 
 		const sw = (STROKE_SIZES[shape.props.size] + 1) * shape.props.scale
 
@@ -139,11 +131,7 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
 	}
 
 	indicator(shape: TLDrawShape) {
-		const allPointsFromSegments = getPointsFromDrawSegments(
-			shape.props.segments,
-			shape.props.scaleX,
-			shape.props.scaleY
-		)
+		const allPointsFromSegments = getPointsFromSegments(shape.props.segments)
 
 		let sw = (STROKE_SIZES[shape.props.size] + 1) * shape.props.scale
 
@@ -151,7 +139,7 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
 		const forceSolid = useValue(
 			'force solid',
 			() => {
-				const zoomLevel = this.editor.getEfficientZoomLevel()
+				const zoomLevel = this.editor.getZoomLevel()
 				return zoomLevel < 0.5 && zoomLevel < 1.5 / sw
 			},
 			[this.editor, sw]
@@ -194,10 +182,24 @@ export class DrawShapeUtil extends ShapeUtil<TLDrawShape> {
 	override onResize(shape: TLDrawShape, info: TLResizeInfo<TLDrawShape>) {
 		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: toFixed(scaleX * x),
+						y: toFixed(scaleY * y),
+						z,
+					}
+				}),
+			})
+		}
+
 		return {
 			props: {
-				scaleX: scaleX * shape.props.scaleX,
-				scaleY: scaleY * shape.props.scaleY,
+				segments: newSegments,
 			},
 		}
 	}
@@ -227,20 +229,14 @@ function getDot(point: VecLike, sw: number) {
 }
 
 function getIsDot(shape: TLDrawShape) {
-	// 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 DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverride?: number }) {
 	const theme = useDefaultColorTheme()
 	const editor = useEditor()
 
-	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'
 
@@ -248,7 +244,7 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 	const forceSolid = useValue(
 		'force solid',
 		() => {
-			const zoomLevel = zoomOverride ?? editor.getEfficientZoomLevel()
+			const zoomLevel = zoomOverride ?? editor.getZoomLevel()
 			return zoomLevel < 0.5 && zoomLevel < 1.5 / sw
 		},
 		[editor, sw, zoomOverride]
@@ -257,7 +253,7 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 	const dotAdjustment = useValue(
 		'dot adjustment',
 		() => {
-			const zoomLevel = zoomOverride ?? editor.getEfficientZoomLevel()
+			const zoomLevel = zoomOverride ?? editor.getZoomLevel()
 			// If we're zoomed way out (10%), then we need to make the dotted line go to 9 instead 0.1
 			// Chrome doesn't render anything otherwise.
 			return zoomLevel < 0.2 ? 0 : 0.1

package/src/lib/shapes/draw/getPath.ts

@@ -6,7 +6,6 @@ import {
 	TLDrawShape,
 	TLDrawShapeSegment,
 	Vec,
-	b64Vecs,
 	modulate,
 } from '@tldraw/editor'
 import { StrokeOptions } from '../shared/freehand/types'
@@ -102,39 +101,19 @@ export function getFreehandOptions(
 	return { ...solidSettings(strokeWidth), last }
 }
 
-/** @public */
-export function getPointsFromDrawSegment(
-	segment: TLDrawShapeSegment,
-	scaleX: number,
-	scaleY: number,
-	points: Vec[] = []
-) {
-	const _points = b64Vecs.decodePoints(segment.points)
-
-	// Apply scale factors (used for lazy resize and flipping)
-	if (scaleX !== 1 || scaleY !== 1) {
-		for (const point of _points) {
-			point.x *= scaleX
-			point.y *= scaleY
-		}
-	}
-
-	if (segment.type === 'free' || _points.length < 2) {
-		points.push(..._points.map(Vec.From))
-	} else {
-		const pointsToInterpolate = Math.max(4, Math.floor(Vec.Dist(_points[0], _points[1]) / 16))
-		points.push(...Vec.PointsBetween(_points[0], _points[1], pointsToInterpolate))
-	}
-
-	return points
-}
-
-/** @public */
-export function getPointsFromDrawSegments(segments: TLDrawShapeSegment[], scaleX = 1, scaleY = 1) {
+export function getPointsFromSegments(segments: TLDrawShapeSegment[]) {
 	const points: Vec[] = []
 
 	for (const segment of segments) {
-		getPointsFromDrawSegment(segment, scaleX, scaleY, points)
+		if (segment.type === 'free' || segment.points.length < 2) {
+			points.push(...segment.points.map(Vec.Cast))
+		} else {
+			const pointsToInterpolate = Math.max(
+				4,
+				Math.floor(Vec.Dist(segment.points[0], segment.points[1]) / 16)
+			)
+			points.push(...Vec.PointsBetween(segment.points[0], segment.points[1], pointsToInterpolate))
+		}
 	}
 
 	return points