tldraw 4.1.0-next.542f014c3fac → 4.1.0-next.74327a60f18a

package/src/test/customSnapping.test.tsx

@@ -173,6 +173,7 @@ describe('custom handle snapping', () => {
 			handlePoints: VecModel[] | 'default'
 			selfSnapOutline: VecModel[] | 'default'
 			selfSnapPoints: VecModel[] | 'default'
+			handleSnapType?: 'point' | 'align'
 		}
 	>
 	class TestShapeUtil extends BaseBoxShapeUtil<TestShape> {
@@ -213,17 +214,23 @@ describe('custom handle snapping', () => {
 			}
 		}
 		override getHandles(shape: TestShape): TLHandle[] {
-			return [
-				{
-					id: 'handle',
-					label: 'handle',
-					type: 'vertex',
-					x: shape.props.ownHandle.x,
-					y: shape.props.ownHandle.y,
-					index: ZERO_INDEX_KEY,
-					canSnap: true,
-				},
-			]
+			const handle: TLHandle = {
+				id: 'handle',
+				label: 'handle',
+				type: 'vertex',
+				x: shape.props.ownHandle.x,
+				y: shape.props.ownHandle.y,
+				index: ZERO_INDEX_KEY,
+			}
+
+			if (shape.props.handleSnapType) {
+				handle.snapType = shape.props.handleSnapType
+			} else {
+				// eslint-disable-next-line @typescript-eslint/no-deprecated
+				handle.canSnap = true
+			}
+
+			return [handle]
 		}
 		override onHandleDrag(shape: TestShape, { handle }: TLHandleDragInfo<TestShape>) {
 			return { ...shape, props: { ...shape.props, ownHandle: { x: handle.x, y: handle.y } } }
@@ -495,5 +502,42 @@ describe('custom handle snapping', () => {
 				expect(ownHandlePosition()).toMatchObject({ x: 20, y: 50 })
 			})
 		})
+
+		describe('with snapType set to align', () => {
+			beforeEach(() => {
+				editor.updateShape<TestShape>({
+					id: ids.test,
+					type: 'test',
+					props: {
+						selfSnapPoints: [
+							{ x: 20, y: 50 },
+							{ x: 60, y: 10 },
+						],
+						handleSnapType: 'align',
+					},
+				})
+			})
+
+			test('snaps to the y axis', () => {
+				startDraggingOwnHandle()
+				editor.pointerMove(18, 0, undefined, { ctrlKey: true })
+				expect(editor.snaps.getIndicators()).toHaveLength(1)
+				expect(ownHandlePosition()).toMatchObject({ x: 20, y: 0 })
+			})
+
+			test('snaps to the x axis', () => {
+				startDraggingOwnHandle()
+				editor.pointerMove(0, 48, undefined, { ctrlKey: true })
+				expect(editor.snaps.getIndicators()).toHaveLength(1)
+				expect(ownHandlePosition()).toMatchObject({ x: 0, y: 50 })
+			})
+
+			test('snaps to both axes', () => {
+				startDraggingOwnHandle()
+				editor.pointerMove(18, 9, undefined, { ctrlKey: true })
+				expect(editor.snaps.getIndicators()).toHaveLength(2)
+				expect(ownHandlePosition()).toMatchObject({ x: 20, y: 10 })
+			})
+		})
 	})
 })

package/tldraw.css

@@ -1325,6 +1325,10 @@ input,
 	flex: 1;
 }
 
+.tl-bookmark__copy_container:has(.tl-bookmark__link:only-child) {
+	justify-content: center;
+}
+
 .tl-bookmark__heading,
 .tl-bookmark__description,
 .tl-bookmark__link {
@@ -1357,7 +1361,7 @@ input,
 	line-clamp: 3;
 	text-overflow: ellipsis;
 	display: -webkit-box;
-	color: var(--tl-color-text-2);
+	color: var(--tl-color-text-1);
 	margin: var(--tl-space-2) 0px;
 }
 
@@ -1369,11 +1373,12 @@ input,
 	font-size: 12px;
 	pointer-events: all;
 	display: flex;
-	color: var(--tl-color-text-2);
+	color: var(--tl-color-text-1);
 	align-items: center;
 	cursor: var(--tl-cursor-pointer);
 	width: fit-content;
 	max-width: 100%;
+	text-decoration: none;
 }
 
 .tl-bookmark__link > span {