tldraw 4.1.0-canary.9c36de6e611c → 4.1.0-canary.a152954244d2

package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts

@@ -1,7 +1,7 @@
 import { HALF_PI, TLArrowShape, TLShapeId, createShapeId, toRichText } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
-import { createOrUpdateArrowBinding, getArrowBindings } from './shared'
+import { createOrUpdateArrowBinding, getArrowBindings, getArrowInfo } from './shared'
 
 let editor: TestEditor
 
@@ -620,3 +620,213 @@ describe('Arrow export bounds', () => {
 		expect(arrow.props.richText).not.toBeNull()
 	})
 })
+
+describe('Arrow terminal positioning bug fix', () => {
+	const data = {
+		document: {
+			store: {
+				'shape:1Hm61DGAsY0uqEO-kt75l': {
+					x: 637.2890625,
+					y: 383.9296875,
+					rotation: 0,
+					isLocked: false,
+					opacity: 1,
+					meta: {},
+					id: 'shape:1Hm61DGAsY0uqEO-kt75l',
+					type: 'geo',
+					props: {
+						w: 230.66796875,
+						h: 114.796875,
+						geo: 'rectangle',
+						dash: 'draw',
+						growY: 0,
+						url: '',
+						scale: 1,
+						color: 'black',
+						labelColor: 'black',
+						fill: 'none',
+						size: 'm',
+						font: 'draw',
+						align: 'middle',
+						verticalAlign: 'middle',
+						richText: {
+							type: 'doc',
+							content: [
+								{
+									type: 'paragraph',
+								},
+							],
+						},
+					},
+					parentId: 'page:page',
+					index: 'a1',
+					typeName: 'shape',
+				},
+				'binding:nekxhMCGaoEJO98DEqWgo': {
+					meta: {},
+					id: 'binding:nekxhMCGaoEJO98DEqWgo',
+					type: 'arrow',
+					fromId: 'shape:j0HKQihjBXqMqgVhfRhDS',
+					toId: 'shape:1Hm61DGAsY0uqEO-kt75l',
+					props: {
+						isPrecise: true,
+						isExact: false,
+						normalizedAnchor: {
+							x: 0.13182672605036325,
+							y: 0.8036953858717844,
+						},
+						snap: 'none',
+						terminal: 'start',
+					},
+					typeName: 'binding',
+				},
+				'binding:kWamalL_QSq_kFPZDgp7Z': {
+					meta: {},
+					id: 'binding:kWamalL_QSq_kFPZDgp7Z',
+					type: 'arrow',
+					fromId: 'shape:j0HKQihjBXqMqgVhfRhDS',
+					toId: 'shape:1Hm61DGAsY0uqEO-kt75l',
+					props: {
+						isPrecise: true,
+						isExact: false,
+						normalizedAnchor: {
+							x: 0.7138744475114731,
+							y: 0.45797604464407243,
+						},
+						snap: 'none',
+						terminal: 'end',
+					},
+					typeName: 'binding',
+				},
+				'shape:j0HKQihjBXqMqgVhfRhDS': {
+					x: 665.296875,
+					y: 477.59765625,
+					rotation: 0,
+					isLocked: false,
+					opacity: 1,
+					meta: {},
+					id: 'shape:j0HKQihjBXqMqgVhfRhDS',
+					type: 'arrow',
+					props: {
+						kind: 'arc',
+						elbowMidPoint: 0.5,
+						dash: 'draw',
+						size: 'm',
+						fill: 'none',
+						color: 'black',
+						labelColor: 'black',
+						bend: 0,
+						start: {
+							x: 0,
+							y: 0,
+						},
+						end: {
+							x: 2,
+							y: 0,
+						},
+						arrowheadStart: 'none',
+						arrowheadEnd: 'arrow',
+						richText: {
+							type: 'doc',
+							content: [
+								{
+									type: 'paragraph',
+								},
+							],
+						},
+						labelPosition: 0.5,
+						font: 'draw',
+						scale: 1,
+					},
+					parentId: 'page:page',
+					index: 'a2lbpzZG',
+					typeName: 'shape',
+				},
+				'page:page': {
+					meta: {},
+					id: 'page:page',
+					name: 'Page 1',
+					index: 'a1',
+					typeName: 'page',
+				},
+				'document:document': {
+					gridSize: 10,
+					name: '',
+					meta: {},
+					id: 'document:document',
+					typeName: 'document',
+				},
+			},
+			schema: {
+				schemaVersion: 2,
+				sequences: {
+					'com.tldraw.store': 5,
+					'com.tldraw.asset': 1,
+					'com.tldraw.camera': 1,
+					'com.tldraw.document': 2,
+					'com.tldraw.instance': 25,
+					'com.tldraw.instance_page_state': 5,
+					'com.tldraw.page': 1,
+					'com.tldraw.instance_presence': 6,
+					'com.tldraw.pointer': 1,
+					'com.tldraw.shape': 4,
+					'com.tldraw.asset.bookmark': 2,
+					'com.tldraw.asset.image': 5,
+					'com.tldraw.asset.video': 5,
+					'com.tldraw.shape.group': 0,
+					'com.tldraw.shape.text': 3,
+					'com.tldraw.shape.bookmark': 2,
+					'com.tldraw.shape.draw': 2,
+					'com.tldraw.shape.geo': 10,
+					'com.tldraw.shape.note': 9,
+					'com.tldraw.shape.line': 5,
+					'com.tldraw.shape.frame': 1,
+					'com.tldraw.shape.arrow': 7,
+					'com.tldraw.shape.highlight': 1,
+					'com.tldraw.shape.embed': 4,
+					'com.tldraw.shape.image': 5,
+					'com.tldraw.shape.video': 4,
+					'com.tldraw.binding.arrow': 1,
+				},
+			},
+		},
+		session: {
+			version: 0,
+			currentPageId: 'page:page',
+			exportBackground: true,
+			isFocusMode: false,
+			isDebugMode: false,
+			isToolLocked: false,
+			isGridMode: false,
+			pageStates: [
+				{
+					pageId: 'page:page',
+					camera: {
+						x: 0,
+						y: 0,
+						z: 1,
+					},
+					selectedShapeIds: ['shape:j0HKQihjBXqMqgVhfRhDS'],
+					focusedGroupId: null,
+				},
+			],
+		},
+	}
+
+	it('should position straight arrow terminals on shape boundary, not text label boundary', () => {
+		// Create a geo shape with text label
+		editor.loadSnapshot(data as any)
+
+		const arrow = editor.getShape('shape:j0HKQihjBXqMqgVhfRhDS' as TLShapeId) as TLArrowShape
+		expect(arrow).toBeDefined()
+
+		expect(getArrowBindings(editor, arrow)).toMatchObject({
+			end: { props: { isPrecise: true } },
+			start: { props: { isPrecise: true } },
+		})
+
+		const info = getArrowInfo(editor, arrow)
+		expect(info?.start.handle).toEqual(info?.start.point)
+		expect(info?.end.handle).toEqual(info?.end.point)
+	})
+})

package/src/lib/shapes/arrow/ArrowShapeUtil.tsx

@@ -144,6 +144,9 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 	override hideSelectionBoundsFg() {
 		return true
 	}
+	override hideInMinimap() {
+		return true
+	}
 
 	override canBeLaidOut(shape: TLArrowShape, info: TLShapeUtilCanBeLaidOutOpts) {
 		if (info.type === 'flip') {

package/src/lib/shapes/arrow/curved-arrow.ts

@@ -154,7 +154,10 @@ export function getCurvedArrowInfo(
 		}
 		if (!point) {
 			if (isClosed) {
-				const nearestPoint = startShapeInfo.geometry.nearestPoint(startInStartShapeLocalSpace)
+				const nearestPoint = startShapeInfo.geometry.nearestPoint(startInStartShapeLocalSpace, {
+					includeInternal: false,
+					includeLabels: false,
+				})
 				if (Vec.DistMin(nearestPoint, startInStartShapeLocalSpace, 1)) {
 					point = nearestPoint
 				}
@@ -233,7 +236,10 @@ export function getCurvedArrowInfo(
 		}
 		if (!point) {
 			if (isClosed) {
-				const nearestPoint = endShapeInfo.geometry.nearestPoint(endInEndShapeLocalSpace)
+				const nearestPoint = endShapeInfo.geometry.nearestPoint(endInEndShapeLocalSpace, {
+					includeInternal: false,
+					includeLabels: false,
+				})
 				if (Vec.DistMin(nearestPoint, endInEndShapeLocalSpace, 1)) {
 					point = nearestPoint
 				}

package/src/lib/shapes/arrow/straight-arrow.ts

@@ -248,7 +248,11 @@ function updateArrowheadPointWithBoundShape(
 	if (targetInt === undefined) {
 		// No intersection? The arrowhead point will be at the arrow terminal.
 		// if we _almost_ hit the target, just put the arrowhead at the target.
-		targetInt = targetShapeInfo.geometry.nearestPoint(targetTo)
+		targetInt = targetShapeInfo.geometry.nearestPoint(targetTo, {
+			includeLabels: false,
+			includeInternal: false,
+		})
+
 		if (!Vec.DistMin(targetInt, targetTo, 1)) {
 			return
 		}

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

@@ -1,7 +1,5 @@
 import {
-	AssetRecordType,
 	BaseBoxShapeUtil,
-	Editor,
 	HTMLContainer,
 	T,
 	TLAssetId,
@@ -10,8 +8,6 @@ import {
 	TLBookmarkShapeProps,
 	bookmarkShapeMigrations,
 	bookmarkShapeProps,
-	debounce,
-	getHashForString,
 	lerp,
 	tlenv,
 	toDomPrecision,
@@ -24,11 +20,13 @@ import { convertCommonTitleHTMLEntities } from '../../utils/text/text'
 import { HyperlinkButton } from '../shared/HyperlinkButton'
 import { LINK_ICON } from '../shared/icons-editor'
 import { getRotatedBoxShadow } from '../shared/rotated-box-shadow'
-
-const BOOKMARK_WIDTH = 300
-const BOOKMARK_HEIGHT = 320
-const BOOKMARK_JUST_URL_HEIGHT = 46
-const SHORT_BOOKMARK_HEIGHT = 101
+import {
+	BOOKMARK_HEIGHT,
+	BOOKMARK_WIDTH,
+	getHumanReadableAddress,
+	setBookmarkHeight,
+	updateBookmarkAssetOnUrlChange,
+} from './bookmarks'
 
 /** @public */
 export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
@@ -71,22 +69,18 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
 	}
 
 	override component(shape: TLBookmarkShape) {
-		return <BookmarkShapeComponent shape={shape} />
+		const { assetId, url, h } = shape.props
+		const rotation = this.editor.getShapePageTransform(shape)!.rotation()
+
+		return <BookmarkShapeComponent assetId={assetId} url={url} h={h} rotation={rotation} />
 	}
 
 	override indicator(shape: TLBookmarkShape) {
-		return (
-			<rect
-				width={toDomPrecision(shape.props.w)}
-				height={toDomPrecision(shape.props.h)}
-				rx="6"
-				ry="6"
-			/>
-		)
+		return <BookmarkIndicatorComponent w={shape.props.w} h={shape.props.h} />
 	}
 
 	override onBeforeCreate(next: TLBookmarkShape) {
-		return getBookmarkSize(this.editor, next)
+		return setBookmarkHeight(this.editor, next)
 	}
 
 	override onBeforeUpdate(prev: TLBookmarkShape, shape: TLBookmarkShape) {
@@ -99,7 +93,7 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
 		}
 
 		if (prev.props.assetId !== shape.props.assetId) {
-			return getBookmarkSize(this.editor, shape)
+			return setBookmarkHeight(this.editor, shape)
 		}
 	}
 	override getInterpolatedProps(
@@ -115,18 +109,30 @@ export class BookmarkShapeUtil extends BaseBoxShapeUtil<TLBookmarkShape> {
 	}
 }
 
-function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
+export function BookmarkIndicatorComponent({ w, h }: { w: number; h: number }) {
+	return <rect width={toDomPrecision(w)} height={toDomPrecision(h)} rx="6" ry="6" />
+}
+
+export function BookmarkShapeComponent({
+	assetId,
+	rotation,
+	url,
+	h,
+	showImageContainer = true,
+}: {
+	assetId: TLAssetId | null
+	rotation: number
+	h: number
+	url: string
+	showImageContainer?: boolean
+}) {
 	const editor = useEditor()
 
-	const asset = (
-		shape.props.assetId ? editor.getAsset(shape.props.assetId) : null
-	) as TLBookmarkAsset
+	const asset = assetId ? (editor.getAsset(assetId) as TLBookmarkAsset) : null
 
 	const isSafariExport = !!useSvgExportContext() && tlenv.isSafari
 
-	const pageRotation = editor.getShapePageTransform(shape)!.rotation()
-
-	const address = getHumanReadableAddress(shape)
+	const address = getHumanReadableAddress(url)
 
 	const [isFaviconValid, setIsFaviconValid] = useState(true)
 	const onFaviconError = () => setIsFaviconValid(false)
@@ -146,11 +152,11 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 					isSafariExport && 'tl-bookmark__container--safariExport'
 				)}
 				style={{
-					boxShadow: isSafariExport ? undefined : getRotatedBoxShadow(pageRotation),
-					maxHeight: shape.props.h,
+					boxShadow: isSafariExport ? undefined : getRotatedBoxShadow(rotation),
+					maxHeight: h,
 				}}
 			>
-				{(!asset || asset.props.image) && (
+				{showImageContainer && (!asset || asset.props.image) && (
 					<div className="tl-bookmark__image_container">
 						{asset ? (
 							<img
@@ -163,21 +169,31 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 						) : (
 							<div className="tl-bookmark__placeholder" />
 						)}
-						{asset?.props.image && <HyperlinkButton url={shape.props.url} />}
+						{asset?.props.image && <HyperlinkButton url={url} />}
 					</div>
 				)}
 				<div className="tl-bookmark__copy_container">
 					{asset?.props.title ? (
-						<h2 className="tl-bookmark__heading">
-							{convertCommonTitleHTMLEntities(asset.props.title)}
-						</h2>
+						<a
+							className="tl-bookmark__link"
+							href={url || ''}
+							target="_blank"
+							rel="noopener noreferrer"
+							draggable={false}
+							onPointerDown={markAsHandledOnShiftKey}
+							onPointerUp={markAsHandledOnShiftKey}
+						>
+							<h2 className="tl-bookmark__heading">
+								{convertCommonTitleHTMLEntities(asset.props.title)}
+							</h2>
+						</a>
 					) : null}
 					{asset?.props.description && asset?.props.image ? (
 						<p className="tl-bookmark__description">{asset.props.description}</p>
 					) : null}
 					<a
 						className="tl-bookmark__link"
-						href={shape.props.url || ''}
+						href={url || ''}
 						target="_blank"
 						rel="noopener noreferrer"
 						draggable={false}
@@ -208,103 +224,3 @@ function BookmarkShapeComponent({ shape }: { shape: TLBookmarkShape }) {
 		</HTMLContainer>
 	)
 }
-
-function getBookmarkSize(editor: Editor, shape: TLBookmarkShape) {
-	const asset = (
-		shape.props.assetId ? editor.getAsset(shape.props.assetId) : null
-	) as TLBookmarkAsset
-
-	let h = BOOKMARK_HEIGHT
-
-	if (asset) {
-		if (!asset.props.image) {
-			if (!asset.props.title) {
-				h = BOOKMARK_JUST_URL_HEIGHT
-			} else {
-				h = SHORT_BOOKMARK_HEIGHT
-			}
-		}
-	}
-
-	return {
-		...shape,
-		props: {
-			...shape.props,
-			h,
-		},
-	}
-}
-
-/** @internal */
-export const getHumanReadableAddress = (shape: TLBookmarkShape) => {
-	try {
-		const url = new URL(shape.props.url)
-		// we want the hostname without any www
-		return url.hostname.replace(/^www\./, '')
-	} catch {
-		return shape.props.url
-	}
-}
-
-function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {
-	const { url } = shape.props
-
-	// Derive the asset id from the URL
-	const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))
-
-	if (editor.getAsset(assetId)) {
-		// Existing asset for this URL?
-		if (shape.props.assetId !== assetId) {
-			editor.updateShapes<TLBookmarkShape>([
-				{
-					id: shape.id,
-					type: shape.type,
-					props: { assetId },
-				},
-			])
-		}
-	} else {
-		// No asset for this URL?
-
-		// First, clear out the existing asset reference
-		editor.updateShapes<TLBookmarkShape>([
-			{
-				id: shape.id,
-				type: shape.type,
-				props: { assetId: null },
-			},
-		])
-
-		// Then try to asyncronously create a new one
-		createBookmarkAssetOnUrlChange(editor, shape)
-	}
-}
-
-const createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TLBookmarkShape) => {
-	if (editor.isDisposed) return
-
-	const { url } = shape.props
-
-	// Create the asset using the external content manager's createAssetFromUrl method.
-	// This may be overwritten by the user (for example, we overwrite it on tldraw.com)
-	const asset = await editor.getAssetForExternalContent({ type: 'url', url })
-
-	if (!asset) {
-		// No asset? Just leave the bookmark as a null assetId.
-		return
-	}
-
-	editor.run(() => {
-		// Create the new asset
-		editor.createAssets([asset])
-
-		// And update the shape
-		editor.updateShapes<TLBookmarkShape>([
-			{
-				id: shape.id,
-				type: shape.type,
-				props: { assetId: asset.id },
-			},
-		])
-	})
-}, 500)

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

@@ -0,0 +1,170 @@
+import {
+	AssetRecordType,
+	Editor,
+	Result,
+	TLAssetId,
+	TLBookmarkAsset,
+	TLBookmarkShape,
+	TLShapePartial,
+	createShapeId,
+	debounce,
+	getHashForString,
+} from '@tldraw/editor'
+
+export const BOOKMARK_WIDTH = 300
+export const BOOKMARK_HEIGHT = 320
+export const BOOKMARK_JUST_URL_HEIGHT = 46
+const SHORT_BOOKMARK_HEIGHT = 101
+
+export function getBookmarkHeight(editor: Editor, assetId?: TLAssetId | null) {
+	const asset = (assetId ? editor.getAsset(assetId) : null) as TLBookmarkAsset | null
+
+	if (asset) {
+		if (!asset.props.image) {
+			if (!asset.props.title) {
+				return BOOKMARK_JUST_URL_HEIGHT
+			} else {
+				return SHORT_BOOKMARK_HEIGHT
+			}
+		}
+	}
+
+	return BOOKMARK_HEIGHT
+}
+
+export function setBookmarkHeight(editor: Editor, shape: TLBookmarkShape) {
+	return {
+		...shape,
+		props: { ...shape.props, h: getBookmarkHeight(editor, shape.props.assetId) },
+	}
+}
+
+/** @internal */
+export const getHumanReadableAddress = (url: string) => {
+	try {
+		const objUrl = new URL(url)
+		// we want the hostname without any www
+		return objUrl.hostname.replace(/^www\./, '')
+	} catch {
+		return url
+	}
+}
+
+export function updateBookmarkAssetOnUrlChange(editor: Editor, shape: TLBookmarkShape) {
+	const { url } = shape.props
+
+	// Derive the asset id from the URL
+	const assetId: TLAssetId = AssetRecordType.createId(getHashForString(url))
+
+	if (editor.getAsset(assetId)) {
+		// Existing asset for this URL?
+		if (shape.props.assetId !== assetId) {
+			editor.updateShapes<TLBookmarkShape>([
+				{
+					id: shape.id,
+					type: shape.type,
+					props: { assetId },
+				},
+			])
+		}
+	} else {
+		// No asset for this URL?
+
+		// First, clear out the existing asset reference
+		editor.updateShapes<TLBookmarkShape>([
+			{
+				id: shape.id,
+				type: shape.type,
+				props: { assetId: null },
+			},
+		])
+
+		// Then try to asyncronously create a new one
+		createBookmarkAssetOnUrlChange(editor, shape)
+	}
+}
+
+const createBookmarkAssetOnUrlChange = debounce(async (editor: Editor, shape: TLBookmarkShape) => {
+	if (editor.isDisposed) return
+
+	const { url } = shape.props
+
+	// Create the asset using the external content manager's createAssetFromUrl method.
+	// This may be overwritten by the user (for example, we overwrite it on tldraw.com)
+	const asset = await editor.getAssetForExternalContent({ type: 'url', url })
+
+	if (!asset) {
+		// No asset? Just leave the bookmark as a null assetId.
+		return
+	}
+
+	editor.run(() => {
+		// Create the new asset
+		editor.createAssets([asset])
+
+		// And update the shape
+		editor.updateShapes<TLBookmarkShape>([
+			{
+				id: shape.id,
+				type: shape.type,
+				props: { assetId: asset.id },
+			},
+		])
+	})
+}, 500)
+
+/**
+ * Creates a bookmark shape from a URL with unfurled metadata.
+ *
+ * @returns A Result containing the created bookmark shape or an error
+ * @public
+ */
+
+export async function createBookmarkFromUrl(
+	editor: Editor,
+	{
+		url,
+		center = editor.getViewportPageBounds().center,
+	}: {
+		url: string
+		center?: { x: number; y: number }
+	}
+): Promise<Result<TLBookmarkShape, string>> {
+	try {
+		// Create the bookmark asset with unfurled metadata
+		const asset = await editor.getAssetForExternalContent({ type: 'url', url })
+
+		// Create the bookmark shape
+		const shapeId = createShapeId()
+		const shapePartial: TLShapePartial<TLBookmarkShape> = {
+			id: shapeId,
+			type: 'bookmark',
+			x: center.x - BOOKMARK_WIDTH / 2,
+			y: center.y - BOOKMARK_HEIGHT / 2,
+			rotation: 0,
+			opacity: 1,
+			props: {
+				url,
+				assetId: asset?.id || null,
+				w: BOOKMARK_WIDTH,
+				h: getBookmarkHeight(editor, asset?.id),
+			},
+		}
+
+		editor.run(() => {
+			// Create the asset if we have one
+			if (asset) {
+				editor.createAssets([asset])
+			}
+
+			// Create the shape
+			editor.createShapes([shapePartial])
+		})
+
+		// Get the created shape
+		const createdShape = editor.getShape(shapeId) as TLBookmarkShape
+		return Result.ok(createdShape)
+	} catch (error) {
+		return Result.err(error instanceof Error ? error.message : 'Failed to create bookmark')
+	}
+}